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


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
            account: '0x123',
            attributes: [
            chainId: QuadrataTypes.QuadrataNetwork.SEPOLIA,
            privacyScopes: [
        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
    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 (
                        Launch Application

Last updated