Business Passport Onboarding
Help users claim (or mint) their passport directly from your DApp. The onboarding process performs KYC, AML risk scoring, and wallet screening on passport holders.
Our UI library can be easily installed and imported to your project.
@quadrata/kyb-react is version-specific. The latest version is 1.0.0. - 1.Install Quadrata NPM Package:
yarn add @quadrata/kyb-react- or
npm install @quadrata/kyb-react
Protocol integrating with Quadrata Passport can request to have their personalized Quadrata NFT Passport by reserving a tokenId.
Contact Quadrata via email [email protected] or Discord to get your assigned tokenId and your custom NFT animation.
import { QuadrataKyb } from '@quadrata/kyb-react';
const MyComponent = () => {
return <QuadrataKyb
kybId={KYB_ID}
backendUrl={KYB_BACKEND_URL}
protocolName="ACME, Inc."
/>
}
Prop | Description | Type |
|---|---|---|
kybId | string (required) | |
backendUrl | The backend URL provided by Quadrata. You can request one via Discord or [email protected]. (THIS URL IS NOT THE SAME AS THE KYC BACKEND URL). | string (required) |
protocolName | Your protocol name. (e.x. "Quadrata, Inc.") | string (required) |
tokenId | The token ID to mint (assuming you want to mint a customized Quadrata Passport for your protocol)
Default: 1 | number (optional) |
children | Overrides the default loader component inside of the form markup. This component will be shown in all loading states during the flow. | React.ReactNode (optional) |
className | The class name to be appended to the root DOM element of the form. className can be used for styling. We recommend using styled-components library to add custom styles. | string | undefined (optional) |
discordUrl | The discord URL for support, this link will be displayed as "Join Discord" at the bottom of some of the pages. Default to Quadrata Discord URL. | string | undefined (optional) |
contactEmail | The contact email address this link will be displayed as the email address provided at the bottom of some of the pages. Default to [email protected] | string | undefined (optional) |
onPageChange | A callback function that is triggrerd when a page is changed. Passes a PageKyb type. | (page: PageKyb) => void (optional) |
_unsafeForcePage | A dev-only helper prop to force a specific page to be displayed. Useful when styling and testing different pages. Never use this prop in production. | (page: PageKyb) => void (optional) |
_debug | Development debug flag. when true, useful debug information will be printed in the console. Never use this prop in production. | boolean | undefined (optional) |
React.js
import type { NextPage } from 'next';
import { QuadrataKyb } from '@quadrata/kyb-react';
// Optional: Quadrata UI theme
import '@quadrata/core-react/lib/cjs/quadrata-ui.min.css';
// Email [email protected] to request your KYB_ID.
const KYB_ID = process.env.NEXT_PUBLIC_KYB_ID!;
const KYB_BACKEND_URL = process.env.NEXT_PUBLIC_KYB_BACKEND_URL!;
const PageKybFlow: NextPage = () => {
return <QuadrataKyb kybId={KYB_ID}
backendUrl={KYB_BACKEND_URL}
protocolName="ACME, Inc."
tokenId=2
/>;
};
export default PageKybFlow;
If you'd like to use the default Quadrata UI CSS:
- Install
@quadrata/core-react:yarn add @quadrata/core-react- or
npm install @quadrata/core-react
- Import in your root compoment:
import '@quadrata/core-react/lib/cjs/quadrata-ui.min.css';
To match the overall branding and style of your DApp, It is the developer's responsibility to style the KYB form as they see fit.
Tip: There are CSS class names baked in most of the HTML elements that should be used to add custom CSS freely and flexibly.
There's also a
className prop that can be used to encapsulate the CSS selectors and prevent CSS override issues.Last modified 6mo ago