Quadrata Integration
  • INTRODUCTION
    • Introduction to Quadrata
    • Passport Attributes
  • HOW TO INTEGRATE
    • Quadrata SDK
      • Get Started Quickly
      • Advanced
        • Installation
        • SDK Configuration
        • Onboarding Example
        • Client Libraries
          • Client Configuration
          • Client Lazy Loading
          • Client Eager Loading
          • Client Helper Component
          • Client React Hooks
            • useOnboardStatus
          • Client Examples
            • With Wagmi Connect
            • KYC Only
            • KYB Only
            • All In One
        • API Libraries
          • API Configuration
          • API Service Options
          • API Service Libraries
            • Create Access Token
            • Create Privacy Access Token
            • Fetch Attribute Values
            • Fetch Onboard Status
            • Fetch Passport List
            • Fetch Privacy Data
            • Fetch Privacy Grants
            • Fetch Wallet Screening
            • Revoke Privacy Grants
    • Onboard users
      • Individual Passport Onboarding
        • 1. Installation
        • 2. API Authentication
        • 3. API Onboard Status
        • 4. QuadClient Package
        • 5. Privacy Data Permissions
        • 6. Full Example
      • Business Passport Onboarding
        • 1. Installation
        • 2. API Authentication
        • 3. QuadrataKyb Package
        • 4. Privacy Data Permissions
        • 5. Full Example
      • All-In-One Passport Onboarding
        • 1. Installation
        • 2. API Authentication
        • 3. QuadrataReact Package
        • 4. Full Example
    • Request Privacy Data
      • List of Privacy Data
      • Privacy Data Permissions
      • API Requests
        • How to sign API
          • Full Example
          • Generate ECDSA Key Pair
        • API Get Privacy Permissions
        • API Privacy Access Token
        • API Get Privacy Data
        • API Revoke Permissions
    • Query attributes
      • Via Smart Contract
        • Query a single attribute
        • Query multiple attributes
        • Query Helper
      • Via API
    • On-Chain Wallet Screening
      • How to sign API
        • Full Example
        • Generate ECDSA Key Pair
      • API Get On-Chain AML Score
    • Webhooks
      • Onboarding Webhooks
      • Ongoing Monitoring Webhooks
      • Webhook Request Signature
    • Burn Passports
  • additional information
    • Smart contracts
    • Quadrata Sandbox
    • Passport Issuers
    • Privileged Roles & Ownership
    • Constants
    • Flex Kit Attributes
      • Smart Contract Addresses
Powered by GitBook
On this page
  1. HOW TO INTEGRATE
  2. Onboard users
  3. Business Passport Onboarding

5. Full Example

In this example we use rainbowkit and wagmi libraries to manage Web3 connectivity, you might use any other library.

All of our UI libraries support both Javascript and Typescript environments.

Types, interfaces, helper functions, and object maps can be found in and imported from the @quadrata/core-react and @quadrata/kyb-react NPM packages.

import React, { useState } from 'react';
import { QuadClientEnvironment, QuadrataOnApplicationEndCallback } from '@quadrata/core-react';
import { PageKyb, QuadClientKybConfig, QuadrataKyb } from '@quadrata/kyb-react';

const quadKybConfig: QuadClientKybConfig = {
    apiUrl: 'https://prod.quadrata.com/api/v1',    // Testing url: https://int.quadrata.com/api/v1
    environment: QuadClientEnvironment.PRODUCTION, // Use QuadClientEnvironment.SANDBOX for testing environment
    protocolName: 'Your Company Name',
    _debug: false,  // set this to true if on a localhost domain
};

// Component
export const MyComponent: React.FC<{ accessToken: string }> = ({
  accessToken,
}) => {
    const [showModal, setShowModal] = useState<boolean>(false);

    // Handlers
    const handleOnApplicationEnd: QuadrataOnApplicationEndCallback = ({ status, error }) => {
        // Application has reached an end state: completion or error
        console.log('handleOnApplicationEnd:::status:::', status);
        console.log('handleOnApplicationEnd:::error:::', error);
    };
  
    const handleOnHide = () => {
        // do something on QuadrataKyb client hide
    };

    const handlePageChange = (page: PageKyb) => {
        // do something on page change
    };
    
    if (!showModal) {
        // Button to launch the KYB application
        return (
            <button
                type="button"
                onClick={() => setShowModal(true)}
            >
                Launch Quadrata
            </button>
        );
    }

    return (
        <QuadrataKyb
            accessToken={accessToken}
            config={quadKybConfig}
            onApplicationEnd={handleOnApplicationEnd}
            onHide={handleOnHide}
            onPageChange={handlePageChange}
        />
    );
};

Previous4. Privacy Data PermissionsNextAll-In-One Passport Onboarding

Last updated 8 months ago