All In One

Quadrata SDK Client Examples: All In One

Enabling The All In One Component

The All In One Component is enabled when you specify a combination of properties in the Quadrata Component.

You can enable the All In One Component in one of the following ways:

• Specify sharedProps and either kybProps or kycProps

• Specify both kybProps and kycProps

Example

This example demonstrates how to set up the Quadrata component to launch the All In One multi-component.

This context gives the user an intro screen where they can select either Individual User Onboarding or Business Onboarding.

In this context, if the wallet address is unknown, the Individual User option will be disabled on the intro screen.

Not all of the required configuration or props are included in this example

See all available KYC props and configuration at the following page: QuadClient Package

See all available KYB props and configuration at the following page: QuadrataKyb Package

It is suggested that you use the built-in withWagmiConnect props initializer to abstract connecting a wallet and signing transactions, but you are free to implement your own logic.

You can use the createAccessToken API Service to create the access token you need to pass in to the component.

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

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

export default function AllInOneOnboardingComponent(props: { accessToken: string }) {
    const quadrataProps = {
        accessToken: props.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: {
            // see available props at
            // https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package#less-than-quadclient-greater-than-props
            account: '0x123',
            attributes: [
                QuadrataTypes.QuadrataAttribute.DID,
                QuadrataTypes.QuadrataAttribute.COUNTRY,
                QuadrataTypes.QuadrataAttribute.AML
            ],
            chainId: QuadrataTypes.QuadrataNetwork.SEPOLIA,
            privacyScopes: [
                QuadrataTypes.QuadrataPrivacyConsent.EMAIL,
                QuadrataTypes.QuadrataPrivacyConsent.DATE_OF_BIRTH,
                QuadrataTypes.QuadrataPrivacyConsent.FIRST_NAME,
                QuadrataTypes.QuadrataPrivacyConsent.LAST_NAME,
                QuadrataTypes.QuadrataPrivacyConsent.ADDRESS
            ],
        },
        kybProps: {
            // since clientConfig and sharedProps define everything, nothing is 
            // required here unless you want to override anything or have more 
            // control over the callbacks
            
            // see available props at
            // https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package
        }
    };
    return (
        <Quadrata {...quadrataProps}>
            {((helper: QuadrataTypes.Client.Components.Helper) => {
                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>
    );
}