DashboardContact Us

Quick Start

Overview

This guide is designed to help you quickly integrate Byzanlink's Account Abstraction and Auth SDKs in your React app.

Integration

  1. Create a new react app

npx create-react-app react-test-byzanlink --template typescript

  1. Navigate to project directory

cd react-test-byzanlink

  1. Install the Byzanlink AA SDK

npm i -s @byzanlink-tech/aa-sdk

  1. Install required dependencies

npm i -s react react-dom

  1. Additional packages to use Signer instead of Private key. Refer step 8 for more information

npm i -s @byzanlink-tech/aa-wallet-auth @toruslabs/tss-dkls-lib jwt-decode

  1. Create the following tsconfig.json (Typescript config)

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./lib",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["./**/*.ts"]
}

  1. Additional steps to handle Webpack issue

  • Install craco into your application

npm i -s @craco/craco

  • Install missing libraries

npm i -s buffer process crypto-browserify stream-browserify

  • Create craco.config.ts in the root of your project folder with the content:

import webpack from 'webpack';

const config = {
  webpack: {
    configure: (webpackConfig: any) => {
      webpackConfig.resolve.fallback = {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
        buffer: require.resolve('buffer'),
        process: require.resolve('process/browser.js'),  // Add .js extension

      };
      webpackConfig.module.rules = webpackConfig.module.rules.map((rule: any) => {
        if (rule.loader && rule.loader.includes('source-map-loader')) {
          rule.exclude = /node_modules/; // Exclude node_modules
        }
        return rule;
      });

      webpackConfig.plugins = (webpackConfig.plugins || []).concat([
        new webpack.ProvidePlugin({
          process: 'process/browser.js',
          Buffer: ['buffer', 'Buffer'],
        }),
      ]);

      return webpackConfig;
    },
  },
};

export default config;

  • Replace the scripts in package.json to use craco instead of react-scripts

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

  1. Replace the content of App.tsx with the following

import { useState } from "react";
import './App.css'
import { ByzanlinkAAAuth, CHAIN_NAMESPACE, WALLET_INFRA_PROVIDER } from '@byzanlink-tech/aa-wallet-auth';
import { ByzanlinkAASdk, Web3WalletProvider } from "@byzanlink-tech/aa-sdk";
import { tssLib } from "@toruslabs/tss-dkls-lib";
import { jwtDecode } from 'jwt-decode';

const apiKey = process.env.REACT_APP_API_KEY; // Get api key from https://dev.byzanlink.com/#/apps
const policyId = process.env.REACT_APP_POLICY_ID; // Get the policy ID of Gas Manager from https://dev.byzanlink.com/#/gas-manager
const web3AuthClientId = process.env.REACT_APP_WEB3AUTH_CLIENT_ID;
const web3AuthNetwork = process.env.REACT_APP_WEB3AUTH_NETWORK;
const web3AuthVerifier = process.env.REACT_APP_WEB3AUTH_VERIFIER;
const web3AuthSubVerifier = process.env.REACT_APP_WEB3AUTH_SUB_VERIFIER;
  
export default function App() {
  const [smartAccount, setSmartAccount] = useState<string | null>(null);
  const [balance, setBalance] = useState<string | null>(null);

  const connect = async () => {
    try {

      /** Wallet Provider - Start */

      // Update the chain config based on the selected chain
      const chainConfig = {
        chainNamespace: CHAIN_NAMESPACE.EIP155,
        chainId: "0x13882", // Amoy Chain ID
        rpcTarget: "https://rpc-amoy.polygon.technology/",
        displayName: "Polygon Amoy",
        blockExplorer: "https://www.oklink.com/amoy/",
        ticker: "MATIC",
        tickerName: "Polygon Matic",
      };

      const token = '<jwt_token>'; // JWT token of the user for which the smart account needs to be fetched
      const decodedToken = jwtDecode(token) as any;

      // Web3Auth Project details
      const walletOptions = {
        web3AuthClientId,
        web3AuthNetwork,
        storage: window.localStorage,
        manualSync: true,
        tssLib: tssLib,
      }

      // Web3Auth Project's Custom Authentication details
      const jwtLoginParams = {
        verifier: web3AuthVerifier,
        subVerifier: web3AuthSubVerifier,
        verifierId: decodedToken?.email,
        idToken: token,
      }

      // Instantiate Byzanlink Auth SDK
      const byzanlinkAuth = new ByzanlinkAAAuth({
        walletProvider: WALLET_INFRA_PROVIDER.WEB3_AUTH,
        walletInfraChainConfig: chainConfig,
        walletInfraOptions: walletOptions,
        jwtLoginParams: jwtLoginParams
      });

      const provider = await byzanlinkAuth.getProvider();
      const walletProvider = await Web3WalletProvider.connect(provider);

      /** Wallet Provider - End */

      // Instantiate Byzanlink AA SDK
      const byzanlinkAASdk = new ByzanlinkAASdk(
        walletProvider,
        {
          chainId: Number('80002'),
          apiKey, // Get the API Key from Byzanlink dashboard
          policyId // Optional - Get the policy Id from Byzanlink dashboard
        })

      // Smart Account
      const address = await byzanlinkAASdk.getCounterFactualAddress();
      setSmartAccount(address);

      // Wallet balance
      setBalance(await byzanlinkAASdk.getNativeBalance())
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "16px", alignItems: 'center', justifyContent: 'start', padding: '96px' }} >
      <div style={{ fontWeight: 'bold', fontSize: '2rem', color: '#1B82FB' }}>
        Byzanlink Smart Account
      </div>
      {
        smartAccount ? (
          <>
            {" "}
            < span > Network: Amoy </span>
            < span > Smart Account Address: {smartAccount} </span>
            < span > Balance: {balance} </span>
          </>
        ) : (
          <>
            <button
              className="w-[10rem] h-[3rem] bg-white border border-[#1B82FB] text-[#1B82FB] font-normal rounded-lg"
              style={{ width: "10rem", height: '3rem', background: 'white', color: '#1B82FB', border: "1px solid #1B82FB", borderRadius: '0.5rem', cursor: 'pointer' }}
              onClick={connect}
            >
              Connect
            </button>
          </>
        )
      }
    </div>
  );
}

  1. Following values are required before running the code

File
Key
Value

.env

REACT_APP_API_KEY

API key for the App from Byzanlink dashboard

REACT_APP_POLICY_ID

Policy ID of the Gas Manager available under Services in Byzanlink dashboard

REACT_APP_WEB3AUTH_CLIENT_ID

Client ID of the project under Wallet Infra in Byzanlink dashboard

REACT_APP_WEB3AUTH_NETWORK

Network selected for a project under Wallet Infra

REACT_APP_WEB3AUTH_VERIFIER

Verifier name of Custom Authentication for a project under Wallet Infra

REACT_APP_WEB3AUTH_SUB_VERIFIER

Sub-verifier name of Custom Authentication for a project under Wallet Infra

App.tsx

token

JWT token of the user for which the smart account needs to be fetched

  1. Start the react app

npm start

  1. Update the values for the keys mentioned in step 6 and click on Connect. You should be able to see the wallet address along with balance.

Congrats! You just created your Smart Wallet Account with Byzanlink.

Now, take a moment to explore the Smart Account documentation and discover all the other features and capabilities that our SDK offers.

In case of any issues, please check the browser console for more information or follow the troubleshooting guide mentioned below

Troubleshooting

  • Fixing Bundler Issues

While using Byzanlink Auth in React, you may run into issues building. This issue occurs because some core packages like eccrypto have certain dependencies which are not present within the browser build environment.

To solve this, please have a look at our troubleshooting pages:

PreviousIntroductionNextSmart Account

Last updated