npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@hinkal/common

v0.0.205

Published

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, L

Downloads

12,122

Readme

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>();
  1. 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);
  1. Prompt a user to generate their shielded address and fetch the state from the smart contract.
await hinkal.initUserKeys();
await hinkal.resetMerkle();
  1. 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();
  1. 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.

  1. 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);