fix(bridge-ui): update abis (#13705)

Co-authored-by: Daniel Wang <99078276+dantaik@users.noreply.github.com>

packages/bridge-ui/.eslintignore

@@ -2,6 +2,7 @@ dist
 build
 coverage
 node_modules
+scripts
 example
 LICENSES
 public

packages/bridge-ui/.eslintrc.cjs

@@ -19,8 +19,9 @@ module.exports = {
     // 'simple-import-sort/exports': 'error',
     semi: ['error', 'always'],
     'no-console': ['error', { allow: ['warn', 'error'] }],
+    'no-irregular-whitespace': 'off',
   },
-  ignorePatterns: ['node_modules'], // todo: lets lint that separately, or move it to its own package
+  ignorePatterns: ['node_modules', 'wagmi.config.ts'],
   settings: {
     'svelte3/typescript': require('typescript'),
   },

packages/bridge-ui/.prettierignore

@@ -2,6 +2,7 @@ dist
 build
 coverage
 node_modules
+scripts
 example
 LICENSES
 public

packages/bridge-ui/README.md

@@ -15,32 +15,39 @@
 You can use the following values in the `.env` file to spin up the Bridge UI locally.
 
 ```
-VITE_NODE_ENV=dev
 VITE_L1_RPC_URL=https://l1rpc.internal.taiko.xyz
-VITE_L2_RPC_URL="https://l2rpc.internal.taiko.xyz"
+VITE_L2_RPC_URL=https://l2rpc.internal.taiko.xyz
+VITE_L3_RPC_URL=https://l3rpc.internal.taiko.xyz
 
-VITE_L1_EXPLORER_URL="https://l1explorer.internal.taiko.xyz"
-VITE_L2_EXPLORER_URL="https://l2explorer.internal.taiko.xyz"
+VITE_L1_EXPLORER_URL=https://l1explorer.internal.taiko.xyz
+VITE_L2_EXPLORER_URL=https://l2explorer.internal.taiko.xyz
+VITE_L3_EXPLORER_URL=https://l3explorer.internal.taiko.xyz
 
-VITE_RELAYER_URL="https://relayer.internal.taiko.xyz/"
+VITE_RELAYER_URL=https://relayer.internal.taiko.xyz/
 
 VITE_L1_CHAIN_ID=31336
 VITE_L2_CHAIN_ID=167001
+VITE_L3_CHAIN_ID=167002
 
 VITE_L1_CHAIN_NAME="Ethereum A3"
 VITE_L2_CHAIN_NAME="Taiko A3"
+VITE_L3_CHAIN_NAME="L3 Chain A3"
 
-VITE_L1_TOKEN_VAULT_ADDRESS="0xa85233C63b9Ee964Add6F2cffe00Fd84eb32338f"
-VITE_L2_TOKEN_VAULT_ADDRESS="0x0000777700000000000000000000000000000002"
+VITE_L1_CROSS_CHAIN_SYNC_ADDRESS=0x0B306BF915C4d645ff596e518fAf3F9669b97016
+VITE_L2_CROSS_CHAIN_SYNC_ADDRESS=0x1000777700000000000000000000000000000001
+VITE_L3_CROSS_CHAIN_SYNC_ADDRESS=0x1000777700000000000000000000000000000001
 
-VITE_L1_CROSS_CHAIN_SYNC_ADDRESS="0x9A9f2CCfdE556A7E9Ff0848998Aa4a0CFD8863AE"
-VITE_L2_CROSS_CHAIN_SYNC_ADDRESS="0x0000777700000000000000000000000000000001"
+VITE_L1_TOKEN_VAULT_ADDRESS=0x4ed7c70F96B99c776995fB64377f0d4aB3B0e1C1
+VITE_L2_TOKEN_VAULT_ADDRESS=0x1000777700000000000000000000000000000002
+VITE_L3_TOKEN_VAULT_ADDRESS=0x1000777700000000000000000000000000000002
 
-VITE_L1_BRIDGE_ADDRESS="0x59b670e9fA9D0A427751Af201D676719a970857b"
-VITE_L2_BRIDGE_ADDRESS="0x0000777700000000000000000000000000000004"
+VITE_L1_BRIDGE_ADDRESS=0x3Aa5ebB10DC797CAC828524e59A333d0A371443c
+VITE_L2_BRIDGE_ADDRESS=0x1000777700000000000000000000000000000004
+VITE_L3_BRIDGE_ADDRESS=0x1000777700000000000000000000000000000004
 
-VITE_L1_SIGNAL_SERVICE_ADDRESS="0x09635F643e140090A9A8Dcd712eD6285858ceBef"
-VITE_L2_SIGNAL_SERVICE_ADDRESS="0x0000777700000000000000000000000000000007"
+VITE_L1_SIGNAL_SERVICE_ADDRESS=0x4A679253410272dd5232B3Ff7cF5dbB88f295319
+VITE_L2_SIGNAL_SERVICE_ADDRESS=0x1000777700000000000000000000000000000007
+VITE_L3_SIGNAL_SERVICE_ADDRESS=0x1000777700000000000000000000000000000007
 
-VITE_TEST_ERC20=[{"address": "0x959922bE3CAee4b8Cd9a407cc3ac1C251C2007B1", "symbol": "BLL", "name": "Bull Token"}, {"address": "0x0B306BF915C4d645ff596e518fAf3F9669b97016", "symbol": "HORSE", "name": "Horse Token"}]
+VITE_TEST_ERC20=[{"address": "0x9A676e781A523b5d0C0e43731313A708CB607508", "symbol": "BLL", "name": "Bull Token"}, {"address": "0x0DCd1Bf9A1b36cE34237eEaFef220932846BCD82", "symbol": "HORSE", "name": "Horse Token"}]
 ```

packages/bridge-ui/jest.config.js

@@ -40,7 +40,7 @@ export default {
   coverageThreshold: {
     global: {
       statements: 95,
-      branches: 85, // TODO: increase to 90
+      branches: 87, // TODO: increase to 90
       functions: 94,
       lines: 95,
     },

packages/bridge-ui/package.json

@@ -8,14 +8,15 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "svelte:check": "svelte-check --tsconfig ./tsconfig.json",
+    "svelte:check": "svelte-check --tsconfig ./tsconfig.json --ignore ./wagmi.config.ts",
     "test": "pnpm exec jest",
     "prettier": "pnpm exec prettier '**/*.{js,ts,svelte}'",
     "prettier:write": "pnpm run prettier '**/*.{js,ts,svelte}' --write",
     "prettier:check": "pnpm run prettier '**/*.{js,ts,svelte}' --check",
     "lint": "pnpm exec eslint './**/*.{js,ts,svelte}' --ignore-path .eslintignore",
     "lint:fix": "pnpm exec eslint --fix './**/*.{js,ts,svelte}' --ignore-path .eslintignore",
-    "lint-staged": "lint-staged --allow-empty"
+    "lint-staged": "lint-staged --allow-empty",
+    "generate-abi": "pnpm exec wagmi generate"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.16.0",
@@ -28,14 +29,17 @@
     "@types/sanitize-html": "^2.6.2",
     "@typescript-eslint/eslint-plugin": "^5.16.0",
     "@typescript-eslint/parser": "^5.16.0",
+    "@wagmi/cli": "^1.0.1",
     "@zerodevx/svelte-toast": "^0.6.3",
+    "abitype": "^0.8.2",
     "autoprefixer": "^10.4.13",
     "babel-jest": "^27.3.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "daisyui": "1.16.6",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-svelte3": "^4.0.0",
+    "fs-extra": "^11.1.1",
     "jest": "^27.5.1",
     "lint-staged": "^12.3.4",
     "node-sass": "^7.0.1",

packages/bridge-ui/src/App.svelte

@@ -19,7 +19,7 @@
   import SwitchEthereumChainModal from './components/modals/SwitchEthereumChainModal.svelte';
   import { ethers } from 'ethers';
   import { MessageStatus } from './domain/message';
-  import BridgeABI from './constants/abi/Bridge';
+  import { bridgeABI } from './constants/abi';
   import { userTokens } from './store/userToken';
   import { RelayerAPIService } from './relayer-api/RelayerAPIService';
   import {
@@ -140,7 +140,7 @@
 
             const contract = new ethers.Contract(
               chains[tx.toChainId].bridgeAddress,
-              BridgeABI,
+              bridgeABI,
               provider,
             );
 

packages/bridge-ui/src/bridge/ERC20Bridge.ts

@@ -7,11 +7,9 @@ import type {
   ClaimOpts,
   ReleaseOpts,
 } from '../domain/bridge';
-import TokenVault from '../constants/abi/TokenVault';
-import ERC20 from '../constants/abi/ERC20';
+import { tokenVaultABI, erc20ABI, bridgeABI } from '../constants/abi';
 import type { Prover } from '../domain/proof';
 import { MessageStatus } from '../domain/message';
-import BridgeABI from '../constants/abi/Bridge';
 import { chains } from '../chain/chains';
 
 export class ERC20Bridge implements Bridge {
@@ -24,7 +22,7 @@ export class ERC20Bridge implements Bridge {
   static async prepareTransaction(opts: BridgeOpts) {
     const contract: Contract = new Contract(
       opts.tokenVaultAddress,
-      TokenVault,
+      tokenVaultABI,
       opts.signer,
     );
 
@@ -58,7 +56,7 @@ export class ERC20Bridge implements Bridge {
     amount: BigNumber,
     bridgeAddress: string,
   ): Promise<boolean> {
-    const contract: Contract = new Contract(tokenAddress, ERC20, signer);
+    const contract: Contract = new Contract(tokenAddress, erc20ABI, signer);
     const owner = await signer.getAddress();
     const allowance: BigNumber = await contract.allowance(owner, bridgeAddress);
 
@@ -88,7 +86,7 @@ export class ERC20Bridge implements Bridge {
 
     const contract: Contract = new Contract(
       opts.contractAddress,
-      ERC20,
+      erc20ABI,
       opts.signer,
     );
 
@@ -150,7 +148,7 @@ export class ERC20Bridge implements Bridge {
   async Claim(opts: ClaimOpts): Promise<Transaction> {
     const contract: Contract = new Contract(
       opts.destBridgeAddress,
-      BridgeABI,
+      bridgeABI,
       opts.signer,
     );
 
@@ -216,7 +214,7 @@ export class ERC20Bridge implements Bridge {
   async ReleaseTokens(opts: ReleaseOpts): Promise<Transaction> {
     const destBridgeContract: Contract = new Contract(
       opts.destBridgeAddress,
-      BridgeABI,
+      bridgeABI,
       opts.destProvider,
     );
 
@@ -250,7 +248,7 @@ export class ERC20Bridge implements Bridge {
 
       const srcTokenVaultContract: Contract = new Contract(
         opts.srcTokenVaultAddress,
-        TokenVault,
+        tokenVaultABI,
         opts.signer,
       );
 

packages/bridge-ui/src/bridge/ETHBridge.ts

@@ -8,7 +8,7 @@ import type {
   ReleaseOpts,
 } from '../domain/bridge';
 import type { Prover } from '../domain/proof';
-import BridgeABI from '../constants/abi/Bridge';
+import { bridgeABI } from '../constants/abi';
 import { chains } from '../chain/chains';
 import { type Message, MessageStatus } from '../domain/message';
 
@@ -24,7 +24,7 @@ export class ETHBridge implements Bridge {
   ): Promise<{ contract: Contract; message: Message; owner: string }> {
     const contract: Contract = new Contract(
       opts.bridgeAddress,
-      BridgeABI,
+      bridgeABI,
       opts.signer,
     );
 
@@ -92,7 +92,7 @@ export class ETHBridge implements Bridge {
   async Claim(opts: ClaimOpts): Promise<Transaction> {
     const contract: Contract = new Contract(
       opts.destBridgeAddress,
-      BridgeABI,
+      bridgeABI,
       opts.signer,
     );
 
@@ -155,7 +155,7 @@ export class ETHBridge implements Bridge {
   async ReleaseTokens(opts: ReleaseOpts): Promise<Transaction> {
     const destBridgeContract: Contract = new Contract(
       opts.destBridgeAddress,
-      BridgeABI,
+      bridgeABI,
       opts.destProvider,
     );
 
@@ -189,7 +189,7 @@ export class ETHBridge implements Bridge {
 
       const srcBridgeContract: Contract = new Contract(
         opts.srcBridgeAddress,
-        BridgeABI,
+        bridgeABI,
         opts.signer,
       );
 

packages/bridge-ui/src/components/Transactions/Transaction.svelte

@@ -13,10 +13,12 @@
 
   import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
   import { errorToast, successToast } from '../Toast.svelte';
-  import HeaderSyncABI from '../../constants/abi/ICrossChainSync';
-  import BridgeABI from '../../constants/abi/Bridge';
+  import {
+    crossChainSyncABI,
+    bridgeABI,
+    tokenVaultABI,
+  } from '../../constants/abi';
   import ButtonWithTooltip from '../ButtonWithTooltip.svelte';
-  import TokenVaultABI from '../../constants/abi/TokenVault';
   import { chains } from '../../chain/chains';
   import { providers } from '../../provider/providers';
   import { bridges } from '../../bridge/bridges';
@@ -176,7 +178,7 @@
 
     const contract = new Contract(
       chains[transaction.toChainId].crossChainSyncAddress,
-      HeaderSyncABI,
+      crossChainSyncABI,
       providers[chains[transaction.toChainId].id],
     );
 
@@ -194,7 +196,7 @@
       processable = await isProcessable();
       const contract = new ethers.Contract(
         chains[transaction.toChainId].bridgeAddress,
-        BridgeABI,
+        bridgeABI,
         providers[chains[transaction.toChainId].id],
       );
 
@@ -209,7 +211,7 @@
         if (transaction.message?.data !== '0x') {
           const srcTokenVaultContract = new ethers.Contract(
             tokenVaults[transaction.fromChainId],
-            TokenVaultABI,
+            tokenVaultABI,
             providers[chains[transaction.fromChainId].id],
           );
           const { token, amount } = await srcTokenVaultContract.messageDeposits(
@@ -221,7 +223,7 @@
         } else {
           const srcBridgeContract = new ethers.Contract(
             chains[transaction.fromChainId].bridgeAddress,
-            BridgeABI,
+            bridgeABI,
             providers[chains[transaction.fromChainId].id],
           );
           const isFailedMessageResolved =

packages/bridge-ui/src/components/buttons/SelectToken.svelte

@@ -6,7 +6,7 @@
   import { BridgeType, type HTMLBridgeForm } from '../../domain/bridge';
   import { ChevronDown, PlusCircle } from 'svelte-heros-v2';
   import { ethers } from 'ethers';
-  import ERC20_ABI from '../../constants/abi/ERC20';
+  import { erc20ABI } from '../../constants/abi';
   import { signer } from '../../store/signer';
   import { userTokens } from '../../store/userToken';
   import { fromChain, toChain } from '../../store/chain';
@@ -53,7 +53,7 @@
       }
 
       const provider = getProvider();
-      const contract = new ethers.Contract(tokenAddress, ERC20_ABI, provider);
+      const contract = new ethers.Contract(tokenAddress, erc20ABI, provider);
 
       const userAddress = await $signer.getAddress();
 

packages/bridge-ui/src/components/form/AddCustomERC20.svelte

@@ -9,7 +9,7 @@
   import Modal from '../modals/Modal.svelte';
   import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
   import { ethers } from 'ethers';
-  import ERC20 from '../../constants/abi/ERC20';
+  import { erc20ABI } from '../../constants/abi';
   import { ETHToken } from '../../token/tokens';
   import { errorToast } from '../Toast.svelte';
   import { tokenService } from '../../storage/services';
@@ -40,7 +40,7 @@
       loadingTokenDetails = true;
       try {
         const provider = getProvider();
-        const contract = new ethers.Contract(tokenAddress, ERC20, provider);
+        const contract = new ethers.Contract(tokenAddress, erc20ABI, provider);
         const userAddress = await $signer.getAddress();
         const [symbol, decimals, userBalance] = await Promise.all([
           contract.symbol(),

packages/bridge-ui/src/components/form/BridgeForm.svelte

@@ -20,8 +20,7 @@
     transactions as transactionsStore,
   } from '../../store/transactions';
   import Memo from './Memo.svelte';
-  import ERC20_ABI from '../../constants/abi/ERC20';
-  import TokenVaultABI from '../../constants/abi/TokenVault';
+  import { erc20ABI, tokenVaultABI } from '../../constants/abi';
   import type { BridgeTransaction } from '../../domain/transactions';
   import { MessageStatus } from '../../domain/message';
   import { Funnel } from 'svelte-heros-v2';
@@ -68,7 +67,7 @@
 
       const tokenVault = new Contract(
         tokenVaults[$fromChain.id],
-        TokenVaultABI,
+        tokenVaultABI,
         $signer,
       );
 
@@ -97,7 +96,7 @@
           tokenBalance = '0';
           return;
         }
-        const contract = new Contract(addr, ERC20_ABI, signer);
+        const contract = new Contract(addr, erc20ABI, signer);
         const userBalance = await contract.balanceOf(await signer.getAddress());
         tokenBalance = ethers.utils.formatUnits(userBalance, token.decimals);
       }

packages/bridge-ui/src/components/modals/FaucetModal.svelte

@@ -3,7 +3,7 @@
   import { pendingTransactions } from '../../store/transactions';
   import { signer } from '../../store/signer';
   import { _ } from 'svelte-i18n';
-  import MintableERC20 from '../../constants/abi/MintableERC20';
+  import { freeMintErc20ABI } from '../../constants/abi';
   import { fromChain } from '../../store/chain';
   import { fetchSigner, switchNetwork } from '@wagmi/core';
   import Modal from './Modal.svelte';
@@ -35,7 +35,7 @@
 
     const contract = new ethers.Contract(
       $token.addresses[0].address,
-      MintableERC20,
+      freeMintErc20ABI,
       $signer,
     );
 
@@ -70,7 +70,7 @@
       }
       const contract = new ethers.Contract(
         $token.addresses[0].address,
-        MintableERC20,
+        freeMintErc20ABI,
         $signer,
       );