@purefi/kyc-sdk v0.5.1

@purefi/kyc-sdk

Node.js module with the KYC SDK for PureFI decentralized AML protocol. Providing wrappers for communicating with PureFI issuers

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:

npm install @purefi/kyc-sdk

Using yarn:

yarn add @purefi/kyc-sdk

The core idea

Widget allows users going through compliance procedures using PureFi infrastructure right in your dApp. 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

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

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

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

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 The full list of variables to play with

: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