With Wagmi Connect

Quadrata SDK Client Examples: With Wagmi Connect

With Wagmi Connect Props Initializer

The Quadrata SDK provides a powerful props initializer called withWagmiConnect.

Using this initializer will automate all of the event handlers required for connecting a wallet to the onboarding application, signing messages, and signing transactions. There can be a good amount of technical overhead when doing this yourself, so it's advised to take advantage of this as it is built-in and handles everything behind the scenes for you.

Enabling The All In One Component

The All In One Component can be enabled when you use withWagmiConnect 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

Initialize Wagmi

In order to use Wagmi you need to initialize the Wagmi providers.

In this example, we are using @rainbow-me/rainbowkit with the Wagmi connector.

See https://www.rainbowkit.com/docs/installation for more information about RainbowKit.

See https://wagmi.sh/react/getting-started for more information about Wagmi.

// WagmiWrapper.tsx

import type { PropsWithChildren } from 'react';
import { WagmiProvider, http } from 'wagmi';
import * as chains from 'wagmi/chains';
import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// NOTE: you should only map the chains and transports you actually want to support

const config = getDefaultConfig({
    appName: 'Quadrata Demo App',
    projectId: 'your-project-id',
    ssr: true,
    chains: [
        chains.arbitrum,
        chains.avalanche,
        chains.avalancheFuji,
        chains.base,
        chains.evmos,
        chains.evmosTestnet,
        chains.mainnet,
        chains.optimism,
        chains.polygon,
        chains.polygonMumbai,
        chains.sepolia,
        chains.zkSync,
        chains.zkSyncSepoliaTestnet,
    ],
    transports: {
        [chains.arbitrum.id]: http(),
        [chains.avalanche.id]: http(),
        [chains.avalancheFuji.id]: http(),
        [chains.base.id]: http(),
        [chains.evmos.id]: http(),
        [chains.evmosTestnet.id]: http(),
        [chains.mainnet.id]: http(),
        [chains.optimism.id]: http(),
        [chains.polygon.id]: http(),
        [chains.polygonMumbai.id]: http(),
        [chains.sepolia.id]: http(),
        [chains.zkSync.id]: http(),
        [chains.zkSyncSepoliaTestnet.id]: http(),
    },
});

const queryClient = new QueryClient();

export default function WagmiWrapper(props: PropsWithChildren) {
    return (
        <QueryClientProvider client={queryClient}>
            <WagmiProvider config={config}>
                <RainbowKitProvider>
                    {props.children}
                </RainbowKitProvider>
            </WagmiProvider>
        </QueryClientProvider>
    );
}

Quadrata Component

// OnboardingComponent.tsx

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

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

export default function OnboardingComponent(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);
            },
        },
        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
            attributes: [
                QuadrataTypes.QuadrataAttribute.DID,
                QuadrataTypes.QuadrataAttribute.COUNTRY,
                QuadrataTypes.QuadrataAttribute.AML
            ],
            privacyScopes: [
                QuadrataTypes.QuadrataPrivacyConsent.EMAIL,
                QuadrataTypes.QuadrataPrivacyConsent.DATE_OF_BIRTH,
                QuadrataTypes.QuadrataPrivacyConsent.FIRST_NAME,
                QuadrataTypes.QuadrataPrivacyConsent.LAST_NAME,
                QuadrataTypes.QuadrataPrivacyConsent.ADDRESS
            ],
        },
        kybProps: {
            // 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>
    );
}

Putting It Together

You still have to place the ConnectButton somewhere in your application

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

import { ConnectButton } from '@rainbow-me/rainbowkit';

import WagmiWrapper from './WagmiWrapper';
import OnboardingComponent from './OnboardingComponent';

export default function MyComponent(props: { accessToken: string }) {
    return (
        <WagmiWrapper>
            <ConnectButton/>
            <OnboardingComponent
                accessToken={props.accessToken}
            />
        </WagmiWrapper>
    );
}