Node.js module with the KYC SDK for PureFI decentralized AML protocol. Providing wrappers for communicating with PureFI issuers
npm install @purefi/kyc-sdk!Logo
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 (
);
}
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
`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;
}
``