3. QuadrataReact Package

<QuadrataReact /> Component 

import {
    QuadAttribute,
    QuadClientEnvironment,
    QuadrataReact,
    QuadrataReactConfigShared,
    QuadrataReactConfigUser 
} from '@quadrata/quadrata-react';

let configShared: QuadrataReactConfigShared = {
    _debug: false,                                // When true, debug information will be printed in the console.
    accessToken: undefined,                       // JWT access token
    apiUrl: 'https://prod.quadrata.com/api/v1',   // Quadrata endpoint to be used for implementation.     
    children: undefined,                          // Component to override the default loading component
    className: 'custom_class',                    // The class name to be appended to the component's root DOM element.
    contactEmail: 'your_email@email.com',         // Contact email address
    darkMode: false,                              // Toggle between dark and light mode
    discordUrl: 'https://discord.gg/SR5Fc6BK',    // Discord link URL
    error: undefined,                             // Generic error text, when defined, an error message will appear at the bottom of the UI.
    environment: QuadClientEnvironment.SANDBOX,   // Integration environment to use.
    protocolName: 'Example Inc.',                 // Your protocol name
    showSocialButtons: false,                     // Show or hide the social media share buttons on the `mint complete` page.
};

let configUser: QuadrataReactConfigUser = {
    ...configShared,
    account: '',                                  // Wallet address of the user to onboard
    attributes: [] as QuadAttribute[],            // An array of Quadrata attributes required by the protocol.
    bypassMint: boolean                           // Optional boolean to allow bypass minting the Quadrata Passport
    countriesUnavailable: undefined,              // Array of country codes that make the onboarding process unavailable.
    mintComplete: false,                          // Upon a successful mint, pass a true value to this prop to display the final page.
    mintError: string,                            // Optional error message to be displayed in the MINT_STATUS view
    privacyScopes: undefined,                     // An array of Quadrata Privacy Scope attributes that can be requested from the users' PII.
    signature: '',                                // The user's signature of the `Welcome to Quadrata! By signing, you agree to the Terms of Service.`
    signatureConsent: '',                         // The user's signature when granting access to PII data.
    transactionHash: '',                          // The mint transaction hash.
};

const MyComponent = () => {
  <QuadrataReact
      configBusiness={configShared}             // Configuration for KYB onboarding
      configUser={configUser}                   // Configuration for KYC onboarding
      onApplicationEnd={handleOnApplicationEnd} // Optional call function: triggered when the onboarding reaches an end state.
      onHide={handleHide}                       // Optional callback function: triggered when the modal is closed
      onMintClick={handleMintClick}             // Callback function: triggered when a user clicks "Claim Passport"
      onMintParamsReady={handleMintParamsReady} // Optional callback function: triggered when the mint parameters are signed and ready to mint
      onPageChange={handlePageChange}           // Optional callback function: triggers when a page changes
      onSign={handleSign}                       // Callback function: triggered when a user attemps to Sign Wallet or Allow Consent
  >
      Loading...
  </QuadrataReact>
}

<QuadrataReact /> Props

Shared Configuration Object

QuadrataReact component accepts configUser and configBusines props to configure corresponding onboarding flows. It is required to set one of the props to launch the appropriate onboarding flow. If both props are set, the onboarding selection screen is displayed.

Business Configuration Object

ConfigBusiness interface defines the required properties for the kyb onboarding flow. The ConfigBusiness interface has no additional options than the ConfigShared interface.

Always define your configuration object outside of your React components to prevent unexpected behavior

User Configuration Object

ConfigUser interface defines the required properties for the kyc onboarding flow.

Previous2. API AuthenticationNext4. Full Example

Last updated