# Client Configuration

## Quadrata Component Props

The `Quadrata` component accepts the following props:

* **`sdkConfig`**: <mark style="color:red;">(</mark> <mark style="color:red;"></mark>*<mark style="color:red;">Required</mark>* <mark style="color:red;"></mark><mark style="color:red;">)</mark> The [SDK Configuration](https://docs.quadrata.com/integration/how-to-integrate/quadrata-sdk/advanced/sdk-configuration) object.
* **`accessToken`**: <mark style="color:red;">(</mark> <mark style="color:red;"></mark>*<mark style="color:red;">Required</mark>* <mark style="color:red;"></mark><mark style="color:red;">)</mark> The access token obtained from the [Quadrata API Login](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/2.-api-authentication) 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`](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package) and [`KYC`](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package) 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`](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package) and [`KYC`](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package) 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`](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package) and [`KYC`](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package). 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`](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package) and [`KYC`](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package) 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](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package) props will tell the `Quadrata` component to render the [KYC onboarding application](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding). The [KYC](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package) props are mapped from the [`KYC`](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package) library at `@quadrata/client-react`.
* **`kybProps`**: ( *Optional* ) Specifying [KYB](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package) props will tell the `Quadrata` component to render the [KYB onboarding application](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding). The [KYB](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package) props are mapped from the [`KYB`](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package) library at `@quadrata/kyb-react`.
* **`helperComponent`**: <mark style="color:red;">(</mark> <mark style="color:red;"></mark>*<mark style="color:red;">Required</mark>* <mark style="color:red;"></mark><mark style="color:red;">)</mark> The [helper component](https://docs.quadrata.com/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-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](https://docs.quadrata.com/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-examples/all-in-one) 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

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