# Client Helper Component

The Helper Component provides a way to interact with the state of a Quadrata application from within your app.

It will have access to props that let you know what's happening before, during, and after onboarding.

There are different helper components for both `KYB` and `KYC` onboarding applications which contain different props.

{% hint style="info" %}
The helper component is mapped from the component `Helper` type at `@quadrata/sdk/types/components/helper`
{% endhint %}

## Helper Component Props

No matter which application type is being accessed (KYB or KYC), the helper component will always have the following props:

* **`isApplicationComplete`**: A boolean that tells you if the application is complete or not.
* **`isApplicationReady`**: A boolean that tells you if the application is ready to be launched or not.
* **`isLoading`**: A boolean that tells you if the application is loading or not.
* **`isOpen`**: A boolean that tells you if the application is open or not.
* **`isPassportInReview`**: A boolean that tells you if the the passport is in review or not. If the passport is in review, that means all the attributes are claimed and the application is awaiting manual review.
* **`launchApplication`**: A function that launches the application and sets `isOpen` to `true`.
* **`closeApplication`** : A function that closes the application and sets `isOpen` to `false`.

### KYB Helper Props

When the user is going through the KYB application, the following additional props will be passed to your helper component:

* **`isConsentGranted`**: A boolean that tells you if KYB consent has been granted or not.
* **`isConsentRequested`**: A boolean that tells you if the onboarding application is configured to request for KYB privacy consent.
* **`isKybApplication`**: A boolean that tells you if the application is a KYB application or not.
* **`walletAddresses`**: An array containing all of the business wallet addresses inserted into the KYB application during onboarding.

### KYC Helper Props

When the user is going through the KYC application, the following additional props will be passed to your helper component:

* **`isConsentGranted`**: A boolean that tells you if the consent passed into `privacyScopes` is granted or not.
* **`isConsentNeeded`**: A boolean that tells you if the consent passed into `privacyScopes` have not been granted. That is, should the application prompt the user for consent or not.
* **`isConsentRequested`**: A boolean that tells you if anything has been passed into `privacyScopes` or not.
* **`isKycApplication`**: A boolean that tells you if the application is a KYC application or not.
* **`walletAddress`**: A string that contains the wallet address passed into component or connected through wallet connect.

{% hint style="info" %}
When the SDK loads the KYC components, onboard status is abstracted for you. So the props you pass into `kycProps` are not directly passed into the KYC application. They are first checked against the wallet address to see which attributes or privacy scopes are needed.

This is done through the [useOnboardStatus](https://docs.quadrata.com/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-react-hooks/useonboardstatus) hook, which is handled for you.

This is why you have helper properties for isConsentGranted, isConsentNeeded, isConsentRequested, etc.
{% endhint %}

### Multi-Component (All In One) Helper Props

When both `kybProps` and `kycProps` are passed into the `Quadrata` component, the following additional props will be passed to your helper component:

* **`isConsentGranted`**: A boolean that tells you if the consent passed into `privacyScopes` is granted or not.
* **`isConsentNeeded`**: A boolean that tells you if the consent passed into `privacyScopes` have not been granted. That is, should the application prompt the user for consent or not.
* **`isConsentRequested`**: A boolean that tells you if anything has been passed into `privacyScopes` or not.
* **`isKybApplication`**: A boolean that tells you if the application is a KYB application or not.
* **`isKycApplication`**: A boolean that tells you if the application is a KYC application or not.
* **`launchKybApplication`**: A function that launches only the KYB application and sets `isOpen` to `true`.
* **`launchKycApplication`**: A function that launches only the KYC application and sets `isOpen` to `true`.
* **`walletAddress`**: A string that contains the wallet address passed into component or connected through wallet connect.
* **`walletAddresses`**: An array containing all of the business wallet addresses inserted into the KYB application during onboarding. This will only be available when `isKybApplication` is true.

In this context the `launchApplication` function will launch a modal that gives the user the option to choose between KYB and KYC applications.

{% hint style="info" %}
If the user's wallet is not connected or passed in, the `KYC` application will be disabled in this modal.
{% endhint %}

### Wagmi Connect Helper Props

If you are using the Quadrata SDK with Wagmi, you can use the [`withWagmiConnect`](https://docs.quadrata.com/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-examples/with-wagmi-connect) props initializer.

Using this, the event handlers to connect wallets and sign transactions will be abstracted for you, so you do not need to worry about handling the them yourself. 

In this context, the helper object will have the following additional props:

* **`isWalletConnected`**: A boolean that tells you if the wallet is connected or not.

## Usage

The helper component is required as either a child component or as a prop.

### As Child Component

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

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

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

export default function MyComponent({ accessToken }) {
    const quadrataProps = withWagmiConnect({
        accessToken: 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: 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>;
                }
                if (helper.isPassportInReview) {
                    return <p>Your application is in review.</p>;
                }
                return (
                    <button
                        disabled={!helper.isApplicationReady}
                        onClick={helper.launchApplication}
                    >
                        Launch Application
                    </button>
                );
            })}
        </Quadrata>
    );
}
```

### As Prop

```tsx
import type { JSX } from 'react';

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

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

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

function HelperComponent(helper: QuadrataTypes.Client.Component.Helper): JSX.Element {
    if (!helper.isWalletConnected) {
        return <p>Wallet is not connected</p>;
    }
    if (helper.isApplicationComplete) {
        return <p>Application is Complete</p>;
    }
    if (helper.isPassportInReview) {
        return <p>Application is in review.</p>;
    }
    return (
        <button
            disabled={!helper.isApplicationReady}
            onClick={helper.launchApplication}
        >
            Launch Application
        </button>
    );
}

export default function MyComponent({ accessToken }) {
    const quadrataProps = withWagmiConnect({
        accessToken: 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: kycProps,
    });
    return (
        <Quadrata
            {...quadrataProps}
            helperComponent={HelperComponent}
        />
    );
}
```