!Logo

@purefi/kyc-sdk

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

!typescript

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.


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 (







)
}
`
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) {
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({
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 (
<>

// 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(null);

useEffect(() => {
KycWidget.mount(widgetRef.current);

return () => {
KycWidget.unmount();
};
}, []);

return (