Client Helper Component

Quadrata SDK Client Helper Component

The Helper Component provides a way to interact with the state of a Quadrata application from within your app.

It will have access to props that let you know what's happening before, during, and after onboarding.

There are different helper components for both KYB and KYC onboarding applications which contain different props.

The helper component is mapped from the component Helper type at @quadrata/sdk/types/components/helper

Helper Component Props

No matter which application type is being accessed (KYB or KYC), the helper component will always have the following props:

• isApplicationComplete: A boolean that tells you if the application is complete or not.

• isApplicationReady: A boolean that tells you if the application is ready to be launched or not.

• isLoading: A boolean that tells you if the application is loading or not.

• isOpen: A boolean that tells you if the application is open or not.

• isPassportInReview: A boolean that tells you if the the passport is in review or not. If the passport is in review, that means all the attributes are claimed and the application is awaiting manual review.

• launchApplication: A function that launches the application and sets isOpen to true.

• closeApplication : A function that closes the application and sets isOpen to false.

KYB Helper Props

When the user is going through the KYB application, the following additional props will be passed to your helper component:

• isConsentGranted: A boolean that tells you if KYB consent has been granted or not.

• isConsentRequested: A boolean that tells you if the onboarding application is configured to request for KYB privacy consent.

• isKybApplication: A boolean that tells you if the application is a KYB application or not.

• walletAddresses: An array containing all of the business wallet addresses inserted into the KYB application during onboarding.

KYC Helper Props

When the user is going through the KYC application, the following additional props will be passed to your helper component:

• isConsentGranted: A boolean that tells you if the consent passed into privacyScopes is granted or not.

• isConsentNeeded: A boolean that tells you if the consent passed into privacyScopes have not been granted. That is, should the application prompt the user for consent or not.

• isConsentRequested: A boolean that tells you if anything has been passed into privacyScopes or not.

• isKycApplication: A boolean that tells you if the application is a KYC application or not.

• walletAddress: A string that contains the wallet address passed into component or connected through wallet connect.

When the SDK loads the KYC components, onboard status is abstracted for you. So the props you pass into kycProps are not directly passed into the KYC application. They are first checked against the wallet address to see which attributes or privacy scopes are needed.

This is done through the useOnboardStatus hook, which is handled for you.

This is why you have helper properties for isConsentGranted, isConsentNeeded, isConsentRequested, etc.

Multi-Component (All In One) Helper Props

When both kybProps and kycProps are passed into the Quadrata component, the following additional props will be passed to your helper component:

• isConsentGranted: A boolean that tells you if the consent passed into privacyScopes is granted or not.

• isConsentNeeded: A boolean that tells you if the consent passed into privacyScopes have not been granted. That is, should the application prompt the user for consent or not.

• isConsentRequested: A boolean that tells you if anything has been passed into privacyScopes or not.

• isKybApplication: A boolean that tells you if the application is a KYB application or not.

• isKycApplication: A boolean that tells you if the application is a KYC application or not.

• launchKybApplication: A function that launches only the KYB application and sets isOpen to true.

• launchKycApplication: A function that launches only the KYC application and sets isOpen to true.

• walletAddress: A string that contains the wallet address passed into component or connected through wallet connect.

• walletAddresses: An array containing all of the business wallet addresses inserted into the KYB application during onboarding. This will only be available when isKybApplication is true.

In this context the launchApplication function will launch a modal that gives the user the option to choose between KYB and KYC applications.

If the user's wallet is not connected or passed in, the KYC application will be disabled in this modal.

Wagmi Connect Helper Props

If you are using the Quadrata SDK with Wagmi, you can use the withWagmiConnect props initializer.

Using this, the event handlers to connect wallets and sign transactions will be abstracted for you, so you do not need to worry about handling the them yourself.

In this context, the helper object will have the following additional props:

• isWalletConnected: A boolean that tells you if the wallet is connected or not.

Usage

The helper component is required as either a child component or as a prop.

As Child Component

import * as QuadrataTypes from '@quadrata/sdk/types';
import { withWagmiConnect, Quadrata } from '@quadrata/sdk/client';

const quadrataSdkConfig: QuadrataTypes.QuadrataSdkConfiguration = {
    environment: QuadrataTypes.QuadrataEnvironment.SANDBOX
};

// individual onboarding props
const kycProps = {
    attributes: [
        QuadrataTypes.QuadrataAttribute.DID,
        QuadrataTypes.QuadrataAttribute.COUNTRY,
        QuadrataTypes.QuadrataAttribute.AML
    ],
};

export default function MyComponent({ accessToken }) {
    const quadrataProps = withWagmiConnect({
        accessToken: accessToken,
        sdkConfig: quadrataSdkConfig,
        clientConfig: {
            _debug: true,
            protocolName: 'Your Company Name'
        },
        sharedProps: {
            onApplicationEnd: (data: Record<string, any>) => {
                console.log('Application ended', data.status, data.error);
            }
        },
        kycProps: kycProps,
    });
    return (
        <Quadrata {...quadrataProps}>
            {((helper: QuadrataTypes.Client.Component.Helper) => {
                if (!helper.isWalletConnected) {
                    return <p>Wallet is not connected</p>;
                }
                if (helper.isApplicationComplete) {
                    return <p>Application is Complete</p>;
                }
                if (helper.isPassportInReview) {
                    return <p>Your application is in review.</p>;
                }
                return (
                    <button
                        disabled={!helper.isApplicationReady}
                        onClick={helper.launchApplication}
                    >
                        Launch Application
                    </button>
                );
            })}
        </Quadrata>
    );
}

As Prop

import type { JSX } from 'react';

import * as QuadrataTypes from '@quadrata/sdk/types';
import { withWagmiConnect, Quadrata } from '@quadrata/sdk/client';

const quadrataSdkConfig: QuadrataTypes.QuadrataSdkConfiguration = {
    environment: QuadrataTypes.QuadrataEnvironment.SANDBOX
};

// individual onboarding props
const kycProps = {
    attributes: [
        QuadrataTypes.QuadrataAttribute.DID,
        QuadrataTypes.QuadrataAttribute.COUNTRY,
        QuadrataTypes.QuadrataAttribute.AML
    ],
};

function HelperComponent(helper: QuadrataTypes.Client.Component.Helper): JSX.Element {
    if (!helper.isWalletConnected) {
        return <p>Wallet is not connected</p>;
    }
    if (helper.isApplicationComplete) {
        return <p>Application is Complete</p>;
    }
    if (helper.isPassportInReview) {
        return <p>Application is in review.</p>;
    }
    return (
        <button
            disabled={!helper.isApplicationReady}
            onClick={helper.launchApplication}
        >
            Launch Application
        </button>
    );
}

export default function MyComponent({ accessToken }) {
    const quadrataProps = withWagmiConnect({
        accessToken: accessToken,
        sdkConfig: quadrataSdkConfig,
        clientConfig: {
            _debug: true,
            protocolName: 'Your Company Name'
        },
        sharedProps: {
            onApplicationEnd: (data: Record<string, any>) => {
                console.log('Application ended', data.status, data.error);
            }
        },
        kycProps: kycProps,
    });
    return (
        <Quadrata
            {...quadrataProps}
            helperComponent={HelperComponent}
        />
    );
}