Client Configuration

Quadrata SDK Client Configuration

Quadrata Component Props

The Quadrata component accepts the following props:

• sdkConfig: ( Required ) The SDK Configuration object.

• accessToken: ( Required ) The access token obtained from the Quadrata API Login endpoint. This is a JWT token that grants access to most API calls.

• clientConfig: ( Optional ) The client configuration is an optional set of configuration parameters that are shared by both KYB and KYC onboarding applications. While you can specify the configuration only once, you are also able to override the configuration for each onboarding application. The client configuration parameters are mapped from both, KYB and KYC configuration libraries at @quadrata/kyb-react and @quadrata/client-react respectively.

• sharedProps: ( Optional ) The shared props object is an optional set of props that are shared by both KYB and KYC. While you can specify the shared props only once, you are also able to override the shared props for each onboarding application. The shared props are mapped from both KYB and KYC shared libraries at @quadrata/kyb-react and @quadrata/client-react respectively. If any event handlers are passed into both sharedProps and kybProps or kycProps, both will be called, but shared props handlers will be called last.

• kycProps: ( Optional ) Specifying KYC props will tell the Quadrata component to render the KYC onboarding application. The KYC props are mapped from the KYC library at @quadrata/client-react.

• kybProps: ( Optional ) Specifying KYB props will tell the Quadrata component to render the KYB onboarding application. The KYB props are mapped from the KYB library at @quadrata/kyb-react.

• helperComponent: ( Required ) The helper component is required as either a child component or as a prop. Its purpose is to provide a way to interact with the Quadrata SDK from within your application. The props passed to your helper will let you know the state of an application and allow you to launch the application from a button click or other. The helper component is mapped from the component Helper type at @quadrata/sdk/types/components/helper. There are different helper components for both KYB and KYC onboarding applications which contain different props.

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

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

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

// busines onboarding props
const kybProps = {
    // ...
};

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

export default function AllInOneComponent(props: { accessToken: string }) {
    const quadrataProps = withWagmiConnect({
        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);
            }
        },
        kybProps: kybProps,
        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>;
                }
                return (
                    <button
                        disabled={!helper.isApplicationReady}
                        onClick={helper.launchApplication}
                    >
                        Launch Application
                    </button>
                );
            })}
        </Quadrata>
    );
}