Installation

Quadrata SDK Installation

To install the Quadrata SDK, you can use the following commands:

npm i --save @quadrata/sdk
npm i --save @quadrata/contracts

Optional Peer Dependencies

The SDK has optional peer dependencies that you will need to install, depending on which SDK libraries you want to use.

If you are not using the SDK Client Libraries, then you do not need to consider any of the peer dependencies for installation.

If you are using client libraries at @quadrata/sdk/client then you will need to install the following packages in your project:

• @quadrata/core-react

• @tanstack/react-query

• react

• react-dom

npm i --save react
npm i --save react-dom
npm i --save @quadrata/core-react
npm i --save @tanstack/react-query

Each client onboarding application has its own package that you need to install in order to take advantage of the SDK for client onboarding, and all of them require @quadrata/core-react.

---

KYC Onboarding

For KYC onboarding, you need to install the following dependencies:

• @quadrata/core-react

• @quadrata/client-react

npm i --save @quadrata/core-react
npm i --save @quadrata/client-react

You can find more information about installing @quadrata/client-react on the Individual Passport Onboarding > Installation page.

---

KYB Onboarding

For KYB onboarding, you need to install the following dependencies:

• @quadrata/core-react

• @quadrata/kyb-react

npm i --save @quadrata/core-react
npm i --save @quadrata/kyb-react

You can find more information about installing @quadrata/kyb-react on the Business Passport Onboarding > Installation page.

---

With Wagmi Connect

If you want to use the built-in With Wagmi Connect abstraction to connect wallets and sign transactions, you need to install the following dependencies:

• [email protected]

• viem@2

npm i --save wagmi
npm i --save viem

Notes on optional dependencies

Due to the static analysis performed by the bundler (like Webpack or Parcel) during the build process, when a module is imported, the bundler tries to resolve these modules at build time and not run time.

If you are using the SDK client libraries and you do not wish to install all of the peer dependencies, you need to tell your bundler how to handle packages that are not installed or you will receive Module not found errors.

NextJS / Webpack Config

NextJS uses Webpack and allows you to configure a fallback package for modules by name.

If you only need Individual Onboarding (KYC), for instance, and do not wish to install the Business Onboarding (KYB) react packages, you can tell webpack not to attempt to load the KYB package.

An example of this configuration would like like the following:

// next.config.mjs

const nextConfig = {
    // ...
    webpack: config => {
        config.resolve.fallback = {
            ...config.resolve.fallback,
            
            // do not attemp to load @quadrata/kyb-react
            '@quadrata/kyb-react': false
        };
        return config;
    },
};

export default nextConfig;

ViteJS Config

ViteJS uses esbuild and allows you to configure a fallback package for modules by name.

If you only need Individual Onboarding (KYC), for instance, and do not wish to install the Business Onboarding (KYB) react packages, you can tell webpack not to attempt to load the KYB package.

An example of this configuration would like like the following:

// vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      // do not attempt to load @quadrata/kyb-react
      '@quadrata/kyb-react': false
    }
  }
});

Typescript Configuration

In order for typescript to find the type definitions in @quadrata/sdk/types you might need to update your tsconfig.json.

Specifically, moduleResolution may need to be set to bundler.

Here are some example tsconfig.json files for different environments.

NextJS

Here is an example tsconfig.json for a NextJS Application:

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

ViteJS

Here is an example tsconfig.json for a ViteJS Application:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}