# 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](/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-examples/all-in-one.md) 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.

{% hint style="info" %}
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.
{% endhint %}

```tsx
// 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

```tsx
// 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

{% hint style="info" %}
You still have to place the `ConnectButton` somewhere in your application
{% endhint %}

{% hint style="info" %}
You can use the [`createAccessToken`](/integration/how-to-integrate/quadrata-sdk/advanced/api-libraries/api-service-libraries/create-access-token.md) API Service to create the access token you need to pass in to the component.
{% endhint %}

```tsx
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>
    );
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quadrata.com/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-examples/with-wagmi-connect.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.