@hinkal/common v0.0.167

Hinkal SDK

Hinkal is a middleware and a set of smart contracts on EVM chains that use ZK-proofs and stealth addresses to enable compliant and private transactions on major dApps. Users can privately store assets and transact on major dApps such as Uniswap, Pendle, Lido, Curve, and others.

This SDK allows users to perform arbitrary smart contract interactions privately.

Installation

Using npm:

npm install @hinkal/common

Or, yarn:

yarn add @hinkal/common

Vite-based React App

Step 1: Create a Vite App

If you don't have a Vite app set up, create one using the following command:

npm create vite@latest my-vite-app --template react
cd my-vite-app

Create React App (CRA)

Step 1: Create a CRA App

If you don't have a CRA app set up, create one using the following command:

npx create-react-app my-cra-app

cd my-cra-app

Step 2: Install Required Packages

For correct operation in CRA, you should install craco and update the configuration:

npm install @craco/craco copy-webpack-plugin

Step 3: Configure CRACO

Create a craco.config.js file in the root of your CRA project and add the following configuration:

// craco.config.js
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require('webpack');

module.exports = {
  webpack: {
    configure: (config, { env, paths }) => {
      return {
        ...config,
        // Important: This plugins update is required for correct @hinkal/common work
        plugins: [
          ...config.plugins || [],
          new CopyPlugin({
            patterns: [{
              from: './node_modules/@hinkal/common/assets/*.js',
              to: './static/media/[name].js'
            }],
          }),
          new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
          }),
        ],
      }
    },
  },
};

The CRACO configuration is essential because your library utilizes Web Workers. The CopyPlugin is required to ensure that the necessary worker scripts are correctly loaded into your application. By copying the worker-related assets to the appropriate directory, you enable seamless access to these resources.

Additionally, the webpack.ProvidePlugin configuration is needed for the correct functioning of the worker, as it provides the Buffer global variable, which some functionalities in your library may depend on.

Step 4: Update Scripts in package.json

Update the scripts section in package.json to use CRACO:

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

3. Next.js-based App

Step 1: Create a Next.js App

If you don't have a Next.js app set up, create one using the following command:

npx create-next-app@latest my-next-app
cd my-next-app

Step 2: Install Required Packages

For correct operation in Next.js, you should install copy-webpack-plugin:

npm install copy-webpack-plugin

Step 3: Configure Next.js

Create or update the next.config.js file in the root of your Next.js project and add the following configuration:

// next.config.js
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  webpack: (config) => {
    config.plugins.push(
      new CopyPlugin({
        patterns: [{
          from: './node_modules/@hinkal/common/assets/*.js',
          to: './static/media/[name].js'
        }],
      })
    );
    return config;
  },
};

The CopyPlugin in the Next.js configuration is required to ensure that the necessary worker scripts are correctly loaded into your application. By copying the worker-related assets to the appropriate directory, you enable seamless access to these resources. This setup is crucial for the proper functioning of your library, which relies on Web Workers.

Usage

1. Import hinkal from @hinkal/common package and initiate a Hinkal instance:

import { Hinkal } from '@hinkal/common';

const hinkal = new Hinkal<Connector>();

2. Initialize a ProviderAdapter object, where the connector should be an instance of the wagmi Connector.

const providerAdapter = new ProviderAdapter(connector);
await hinkal.initProviderAdapter(connector, providerAdapter);

3. Prompt a user to generate their shielded address and fetch the state from the smart contract.

await hinkal.initUserKeys();
await hinkal.resetMerkle();

4. Once a user has generated a shielded address, the shielded balances become available and can be displayed on the front end:

const balances = await hinkal.getBalances();

5. A user can deposit to their shielded account using:

function deposit(erc20addresses: string[], amountChanges: bigint[]): Promise<TransactionObject>;

where erc20Addresses is an array of token addresses, and amountChanges represents the token amounts for the deposit.

6. Once a user’s balance is updated, they can perform any smart contract interaction:

function actionPrivateWallet(
  erc20Addresses: string[],
  amountChanges: bigint[],
  onChainCreation: boolean[],
  ops: string[],
): Promise<TransactionObject>;

where onChainCreation indicates the amounts of tokens that are uncertain before the transaction is executed on-chain. The ops array is an encoded array of user operations.

Access Tokens

Before interacting with Hinkal smart contracts, a user needs to mint an access token after passing compliance checks.

To check whether the user already has an access token, one can use the checkAccessToken function:

function checkAccessToken(): Promise<boolean>;

If the user does not have an access token, one of the compliance providers should be used to pass the check. To view the available providers:

function getSupportedPassportLinks(): string[];

Once the user has passed the check, they can mint an access token using:

const { signatureData } = await hinkal.getAPI().getAccessTokenSignature(chainId, ethereumAddress, accessKey);
await mintAccessToken(this, signatureData);