npm package: @purefi/kyc-sdk
Description: Node.js module with the KYC SDK for PureFI decentralized AML protocol. Providing wrappers for communicating with PureFI issuers
Author: Mikhail Radchenko
Latest version: 0.5.1

![Logo](https://user-images.githubusercontent.com/23620645/136548302-6bf7f6e0-8236-44bf-b75a-9c067e9347da.png)

# @purefi/kyc-sdk

Node.js module with the KYC SDK for PureFI decentralized AML protocol. Providing wrappers for communicating with PureFI issuers

![typescript](https://img.shields.io/npm/types/@purefi/verifier-widget)

## Documentation

The PureFi docs page to get the idea and general flow https://docs.purefi.io

Demo live example: https://playground.purefi.io

Demo source code: https://github.com/purefiprotocol/purefi-playground

## Installation

Using npm:

```bash
npm install @purefi/kyc-sdk
```

Using yarn:

```bash
yarn add @purefi/kyc-sdk
```

## The core idea

Widget allows users going through compliance procedures using PureFi infrastructure right in your dApp.
<br />
As an entity, the Widget represents React app that can be embedded in any javascript frontend application, e.g. React, Vue, Angular etc.

> NOTE: The only thing you need to keep in mind embedding the widget - whenever user account changes, let the widget know about it.


## Quick guide 

1. Set up a config for the widget in the root of your app once

```typescript
import { KycWidget, WidgetConfig } from '@purefi/kyc-sdk';

const App = () => {
 // query client and wagmi setup is omitted

 useEffect(() => {
  
  const defaultConfig: WidgetConfig = {
    issuerUrl: 'https://stage.issuer.app.purefi.io',
    dashboardUrl: 'https://stage.dashboard.purefi.io',
    onSuccess: (...args) => console.log(args),
    onWarning: (...args) => console.log(args),
    onError: (...args) => console.log(args),
    onInfo: (...args) => console.log(args),
  };

  KycWidget.setConfig(defaultConfig);

 }, []);

 return (
    <React.StrictMode>
        <WagmiProvider config={...}>
          <QueryClientProvider client={...}>
            <Content />
          </QueryClientProvider>
        </WagmiProvider>
    </React.StrictMode>
 )
}
```
2. Whenever user connects, disconnects or even changes his wallet, you are expected to set/update corresponding signer (in terms of ethers) for the widget

>**Note**: In case you use viem, you need to convert viem's account to ethers signer instance.
>There is a helper hook you can use for this convertion

```typescript
import { useMemo } from 'react';
import { BrowserProvider, JsonRpcSigner } from 'ethers';
import type { Account, Chain, Client, Transport } from 'viem';
import { type Config, useAccount, useConnectorClient } from 'wagmi';

export function clientToSigner(client: Client<Transport, Chain, Account>) {
  const { account, chain, transport } = client;

  if (!chain) {
    return undefined;
  }

  const network = {
    chainId: chain.id,
    name: chain.name,
    ensAddress: chain.contracts?.ensRegistry?.address,
  };
  const provider = new BrowserProvider(transport, network);
  const signer = new JsonRpcSigner(provider, account.address);

  return signer;
}

// hook to convert a viem Wallet Client to an ethers.js Signer
export function useSigner() {
  const account = useAccount();

  const { data: client } = useConnectorClient<Config>({
    chainId: account.chainId,
  });

  return useMemo(() => (client ? clientToSigner(client) : undefined), [client]);
}

export { useSigner };
```

Now, when you have a helper hook, just let the widget know that user account changed using corresponding setters

```typescript
import { KycWidget } from '@purefi/kyc-sdk';
import { WidgetComponent } from 'components';

const Content = () => {
  const signer = useSigner();

  useEffect(() => {
    if (signer) {
      KycWidget.setSigner(signer);
    } else {
      KycWidget.unsetSigner();
    }
  }, [signer]);

  return (
    <>
      <WidgetComponent />
      // other stuff
    </> 
  )
}
export { Content };
```

3. Mounting of the widget is pretty straightforward

```typescript
import { useRef, useEffect } from 'react';
import { KycWidget } from '@purefi/kyc-sdk';

const WidgetComponent = () => {
  const widgetRef = useRef<any>(null);

  useEffect(() => {
    KycWidget.mount(widgetRef.current);

    return () => {
      KycWidget.unmount();
    };
  }, []);

  return (
    <div ref={widgetRef} />
  );
}

export { WidgetComponent };
```

4. Finally, you can modify widget appearance to fit the needs of your theme using corresponding css variables
<br />
The full list of variables to play with

```css
:root {
  --purefi_font_size: 16px;
  --purefi_font_family: 'Poppins';

  --purefi_card_border_width: 1px;
  --purefi_card_border_style: solid;
  --purefi_card_border_color: #1e1f23;

  --purefi_modal_border_radius: 16px;
  --purefi_card_border_radius: 12px;
  --purefi_button_border_radius: 6px;

  --purefi_primary_font_color: #ffffff;
  --purefi_title_color: #0e0d0d;

  --purefi_modal_font_color: #ffffff;
  --purefi_modal_bg_color: #0e0d0d;

  --purefi_button_font_color: #ffffff;
  --purefi_button_font_color_hover: #ffffff;
  --purefi_button_bg_color: #2d0d7b;
  --purefi_button_bg_color_hover: #4f2ca7;
  --purefi_card_bg_color: #0e0d0d;

  --purefi_spinner_color: #4f2ca7;

  --purefi_link_font_color: #1890ff;
  --purefi_link_font_color_hover: #40a9ff;
  --purefi_copy_font_color: #25a2e9;
  --purefi_copy_font_color_hover: #3993c7;

  --purefi_success_font_color: #5cde2e;
  --purefi_pendig_font_color: #ffb800;
  --purefi_warning_font_color: #ffb800;
  --purefi_error_font_color: #ea7062;
  --purefi_error_bg_color: #ea706220;
  --purefi_card_label: #bdbdbd;

  --purefi_mobile_breakpoint: 992px;
}
```

## License

[MIT](https://github.com/purefiprotocol/kyc-sdk/blob/master/LICENSE)