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: '[email protected]',         // 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

Prop

Description

Type

configBusiness (optional)

ConfigBusiness interface defines the required properties for the kyb onboarding flow.

QuadrataReactConfigBusiness

configUser

(optional)

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

QuadrataReactConfigUser

onApplicationEnd(optional)

A callback function: triggered when the application has reached an end state.

QuadrataOnApplicationEndCallback

Individual Passport Onboarding Statuses: - READY - IN_REVIEW- MINTEDBusiness Passport Onboarding Statuses: - APPROVED - DENIED - INITIALIZED - IN_REVIEW

onHide (optional)

A callback function: triggered when the modal is closed.

onMintClick (required)

A callback function. triggered when a user clicks Claim Passport. the event object passed to this function will contain all the data required to mint a passport. event.params event.signature and event.signatureIssuer should be passed to the QuadPassport.setAttributesBulk() function in the correct order, and include the event.params.fee as the value passed to the overrides of the setAttributes function. see the example below.

QuadClientMintClickEventHandler

onMintParamsReady (optional)

A callback function: triggered when the mint parameters are signed and ready. tip: useful in case the UI needs to prepare the transaction before initiating it, see example page.

QuadClientMintParamsReadyCallback

onPageChange (optional)

A callback function: triggered when a page is changed. Passes a Page type string.

tip: Import the Page type from the @quadrata/client-react library

(page: Page) => void

onSign

(required)

A callback function. triggered when a user clicks Sign Wallet or Allow. It passes a message for the user to sign in the Onboarding and/or User Consent flow.

(message: string, isConsent: boolean) => void

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.

Prop

Description

Type

_debug (optional)

When true, debug information will be printed in the console. Never use in production.

boolean

accessToken (required)

JWT access token. See "API Authentication" page

string

apiUrl

(required)

Quadrata endpoint to be used for implementation.

string

testing - https://int.quadrata.com/api/v1
production - https://prod.quadrata.com/api/v1

children (optional)

Overrides the default loader component inside of the form markup. This component will be shown in all loading states during the flow. if not defined, a "Loading..." text will be shown instead.

React.ReactNode

className (optional)

The class name to be appended to the component's root DOM element.

string

contactEmail (optional)

The contactEmail prop assigns an email address to all support email instances in the client.

string

default - [email protected]

darkMode (optional)

Toggle between dark and light mode.

Default: false

boolean

discordUrl (optional)

The discordUrl prop accepts a string value expected to be a link to a Discord server and will be displayed in all instances where a Discord link is displayed in the client.

string

default - Quadrata Discord server

error

(optional)

Generic error text, when defined, an error message will appear at the bottom of the UI.

string | undefined

environment (optional)

The environment prop controls the environment with which the client communicates. Never set the environment to QuadClientEnvironment.SANDBOX in production.

QuadClientEnvironment

QuadClientEnvironment.SANDBOX - https://int.quadrata.com/api/v1
QuadClientEnvironment.PRODUCTION - https://prod.quadrata.com/api/v1
default - QuadClientEnvironment.SANDBOX

protocolName (required)

The protocolName prop accepts a string value for your protocol, dApp, or company name. The protocolName should match the name assigned for your company at Quadrata.

string

showSocialButtons (optional)

The showSocialButtons prop accepts a boolean value to display or not display social share buttons. Social share buttons are displayed on the mint completed page after a user or business has successfully onboarded.

string | undefined

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.

Prop

Description

Type

account

(required)

The user's wallet address.

string

attributes (required)

An array of Quadrata attributes required by the protocol. See "Discover User Attributes" page.

QuadAttribute[]

chainId

(required)

The decimal chain ID number of the currently connected network. In case of unsupported chain IDs the user will be navigated to the "Configuration Error" screen. Tip: Supported chain IDs can be found in the QuadSupportedChainId enum which can be imported from the @quadrata/core-react NPM package.

number

countriesUnavailable(optional)

An array of ISO country codes where the onboarding process is made unavailable.

string[] ISO country codes example: ['US', 'CA']

mintComplete (required)

Upon a successful mint, pass a true value to this prop to display the final page.

boolean

onSign

(required)

A callback function. triggered when a user clicks Sign Wallet or Allow. It passes a message for the user to sign in the Onboarding and/or User Consent flow.

(message: string, isConsent: boolean) => void

privacyScopes (optional)

An array of Quadrata Privacy Parameter Names that can be requested from the users' privacy data. See "List of Privacy Data" page.

PrivacyConsentScopeParam[] | undefined

signature (required)

The user's signature of the "Welcome to Quadrata! By signing, you agree to the Terms of Service." message passed by the onSign prop.

string | undefined

signatureConsent (optional)

The user's signature when granting access to privacy data.

string | undefined

transactionHash (required)

The mint transaction hash. If the value is not undefined, it will trigger navigation to the "Mint in progress" page and will generate the Block explorer transaction link URL.

string | undefined

Previous2. API Authentication Next4. Full Example

Last updated 1 year ago

<QuadrataReact /> Component

<QuadrataReact /> Props

Shared Configuration Object

Business Configuration Object

User Configuration Object

`<QuadrataReact /> Component`

`<QuadrataReact />` Props