@zkbridge/token-bridge

@zkbridge/token-bridge is an SDK project for Token Bridge on EVM similar chains

Usage

install

pnpm add @zkbridge/token-bridge

use demo

/* eslint-disable react/no-deprecated */
import { TokenBridgeWidget, BridgeProvider } from "@zkbridge/btc-token-bridge";
import { useCallback, useEffect, useState } from "react";
import ReactDOM from "react-dom";


declare global {
  interface Window {
    ethereum: any;
  }
}

//===========================================================
// config 参考src/__tests__/lightningConfig.ts
// - 【注意】： 以下合约地址和其他配置信息只是一个举例，请不要直接在线上使用。
// (don't use the following contract address and other configuration information directly in production)
//===========================================================

	const chainMap = {
  oeth: {
    fastBridgeContract: isProd
      ? "0x24bbC063DeF30Ae81AECC659B97A8b2562b2AFCd"
      : "0xd19b6Edef09E3455Ef6fc1130f0E984042b0226e",
    nativeToken: {
      poolId: ETHPoolIdOfLightning,
      shareDecimal: 18,
      tokenName: "ETH",
      decimal: 18,
    },
    erc20Tokens: {
      [USDT_TOKEN_NAME]: {
        tokenAddress: "0x94b008aA00579c1307B0EF2c499aD98a8ce58e58",
        decimal: 6,
        shareDecimal: 6,
        poolId: USDTPoolIdOfLightning,
      },
    },
  },
  bnb: {
    fastBridgeContract: isProd
      ? "0x51187757342914E7d94FFFD95cCCa4f440FE0E06"
      : "0x8169E97E84A95c90FE44df038D0b79a5a2650F58",
    nativeToken: {
      poolId: BNBPoolIdOfLightning,
      shareDecimal: 18,
      decimal: 18,
      tokenName: BNBTokenName,
    },
    erc20Tokens: {
      [USDT_TOKEN_NAME]: {
        tokenAddress: "0x55d398326f99059fF775485246999027B3197955",
        decimal: 18,
        shareDecimal: 6,
        poolId: USDTPoolIdOfLightning,
      },
      [ETHTokenName]: {
        tokenAddress: "0x2170Ed0880ac9A755fd29B2688956BD959F933F8",
        decimal: 18,
        poolId: ETHPoolIdOfLightning,
        shareDecimal: 18,
      },
    },
  },
  opbnb_mainnet: {
    fastBridgeContract: isProd
      ? "0x953a578c7Ce8F3A1BF625d182A8caf7181FD4BEB"
      : "0x39454A5Ad76c379ec1a5281cD93e301Fed3995A4",
    nativeToken: {
      poolId: BNBPoolIdOfLightning,
      shareDecimal: 18,
      decimal: 18,
      tokenName: BNBTokenName,
    },
    erc20Tokens: {
      [ETHTokenName]: {
        tokenAddress: "0xE7798f023fC62146e8Aa1b36Da45fb70855a77Ea",
        decimal: 18,
        shareDecimal: 18,
        poolId: ETHPoolIdOfLightning,
      },
      [USDT_TOKEN_NAME]: {
        tokenAddress: "0x9e5AAC1Ba1a2e6aEd6b32689DFcF62A509Ca96f3",
        decimal: 18,
        shareDecimal: 6,
        poolId: USDTPoolIdOfLightning,
      },
    },
  },
  matic: {
    fastBridgeContract: isProd
      ? "0x104bc711530554F18936a12542192F8bd36166B1"
      : "0xAbb8EC70288F6470DD7c3bcCF6c68a962820a0d5",
    nativeToken: undefined, //不支持native
    erc20Tokens: {
      [USDT_TOKEN_NAME]: {
        tokenAddress: "0xc2132D05D31c914a87C6611C10748AEb04B58e8F",
        decimal: 6,
        shareDecimal: 6,
        poolId: USDTPoolIdOfLightning,
      },
    },
  },
} as const satisfies ChainMapForConfig;

//===========================================================
// 支持的联对
//===========================================================
 const chainPair = {
  bnb: {
    opbnb_mainnet: [USDT_TOKEN_NAME, BNBTokenName],
    matic: [USDT_TOKEN_NAME],
  },
  opbnb_mainnet: {
    bnb: [USDT_TOKEN_NAME, BNBTokenName],
    matic: [USDT_TOKEN_NAME],
  },
  matic: {
    bnb: [USDT_TOKEN_NAME],
    opbnb_mainnet: [USDT_TOKEN_NAME],
  },
} as const satisfies ChainPairForConfig< typeof chainMap, TokenNameLightningType>;




const App = () => {
  const [sourceAccount, setSourceAccount] = useState<string>("");
  useEffect(() => {
    window.ethereum
      .request({ method: "eth_requestAccounts" })
      .then((accounts: string[]) => {
        setSourceAccount(accounts?.[0] || "");
      });

    const setAccount = (accounts: string[]) => {
      console.log("accounts changed", accounts);
      setSourceAccount(accounts?.[0] || "");
    };
    window.ethereum.on("accountsChanged", setAccount);
    return () => {
      window.ethereum.off("accountsChanged", setAccount);
    };
  }, []);
  return (
    <BridgeProvider
      value={{
        chainMap: chainMap,
        chainPair: chainPair,
        injectedProvider: window.ethereum,
        sourceAccount,
        // bridgeContractType: "lightning",
        partnerId: "", 
        showHistory: true, //show tx history panel
      }}
    >
      <TokenBridgeWidget />
    </BridgeProvider>
  );
};
ReactDOM.render(<App />, document.getElementById("app")!);

How to build

Pre-Requisites

This project uses PNPM to manage dependencies.

$ npm i -g pnpm

Setup

Install and build dependencies across all project folders:

$ pnpm install

Dev

Install and build dependencies across all project folders:

$ pnpm run dev #start vite dev server and css first time compile
$ pnpm run watchcss #start watch css change and recomplie it

Build:

$ pnpm run build