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
  • <QuadClient /> Component
  • <QuadClient /> Props
  • Configuration Object
  • Get User's Permissions
  1. HOW TO INTEGRATE
  2. Onboard users
  3. Individual Passport Onboarding

4. QuadClient Package

<QuadClient /> Component

import { QuadClient } from '@quadrata/client-react';

const MyComponent = () => {
  <QuadClient
      accessToken={accessToken}                 // JWT token obtained by calling /v1/api/login
      account={account}                         // wallet address of the user to onboard
      attributes={quadAttributes}               // list of attributes required by the protocol
      bypassMint={bypassMint}                   // Optional boolean flag indicating whether to bypass the mint screen. If this is set to true, onMintClick is optional 
      chainId={chainId}                         // Blockchain chainId to onboard to (see: https://chainlist.org/)
      config={quadConfig}                       // Custom Configuration (i.e endpoint, protocol name)
      darkMode={false}
      mintComplete={mintComplete}               // Boolean flag indicating when the "passport minting" is completed
      mintError={mintError}                     // Optional string that can be passed to display mint error message
      offeringId={offeringId}                   // Optional string or number that can be passed to track accreditation status for a company offering
      onApplicationEnd={handleOnApplicationEnd} // Optional callback function: triggered when the application reaches an end state (error or completion)
      onConsentGranted={handleConsentGranted}   // Optional callback function: triggered with privacy consent is granted
      onHide={handleHide}                       // Optional callback function: triggered when the modal is closed
      onMintClick={handleMintClick}             // Optional 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
      privacyScopes={privacyScopes}             // Optional list of privacy scopes to request for consent
      signature={signature}                     // store the result of the callback `onSign`
      signatureConsent={signatureConsent}       // store the result of the callback `onSign` when consent is requested
      transactionHash={data?.hash}              // The mint blockchain transaction hash
  >
      Loading...
  </QuadClient>
}

<QuadClient /> Props

Prop
Description
Type

accessToken (required)

string

account

(required)

The user's wallet address.

string

attributes (required)

QuadAttribute[]

bypassMint (optional)

Indicates whether to show the mint screen to the onboarding user. Set to True if user is not required to mint passport onchain. Defaults to False.

boolean

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

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

config

(required)

QuadClientConfig

darkMode (optional)

Toggle between dark and light mode.

Default: false

boolean

error

(optional)

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

string | undefined

mintComplete (required)

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

boolean

mintError (optional)

String that can be passed to display a mint error message. If provided the client will be navigated to the MINT_STATUS page and display the error message.

string | undefined

offeringId (optional)

String or Number that can be passed to track Accreditation status for a company offering. If provided, the client will be navigated to an Accreditation Re-Attestation screen (when applicable) for re-attestation of the passport's Accreditation status.

string | number | undefined

onApplicationEnd (optional)

A callback function: triggered when the application reaches an end state - error or completion. Event object includes status and error properties for additional information.

QuadrataOnApplicationEndCallback

Statuses: - READY - IN_REVIEW - MINTED

onConsentGranted (optional)

A callback function: triggered when the applicant consents to privacy data sharing.

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

QuadClientOnConsentGrantedCallback (scopes: PrivacyConsentScopeParamKey[]) => void;

onHide (optional)

A callback function: triggered when the modal is closed.

onMintClick (optional)

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

privacyScopes (optional)

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

Configuration Object

Pass a configuration object to the config prop:

import { QuadClient, QuadClientConfig, QuadClientEnvironment } from '@quadrata/client-react';

// Outside of your react component
const quadConfig: QuadClientConfig = {
    protocolName: 'ACME, Inc.',
    environment: QuadClientEnvironment.PRODUCTION, // or QuadClientEnvironment.SANDBOX for testing environment
};

// Inside your react component
<QuadClient config={quadConfig} />

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

Property
Description
Type

_debug

(optional)

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

boolean

_unsafeForcePage (optional)

Forcing a specific page to be displayed. Useful when styling and testing different pages. Set the _debug prop to true when using. Never use in production.

Page

contactEmail (optional)

Contact email address Default: support@quadrata.com

string

countriesUnavailable (optional)

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

discordUrl

(optional)

Discord link URL Default:

Quadrata Discord Server

string

environment (optional)

Possible values:

  • sandbox

  • production

Default: sandbox

Never set to sandbox in production.

tip: The sandbox environment will not perform real verifications.

QuadClientEnvironment

protocolName (required)

Your protocol name Example: "Acme, Inc."

string

showSocialButtons (optional)

Show or hide the social media share buttons on the "mint complete" page.

Default: true

boolean

Get User's Permissions

Previous3. API Onboard StatusNext5. Privacy Data Permissions

Last updated 8 months ago

JWT access token. See "" page

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

The configuration object. See the "" below.

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

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

NOTE: Contact Quadrata via to request API keys.

email
Discover User Attributes
API Authentication
List of Privacy Data
ISO
Configuration Section