fix(bridge-ui): update abis

packages/bridge-ui/.eslintignore

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

packages/bridge-ui/.prettierignore

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

packages/bridge-ui/README.md

@@ -18,29 +18,37 @@ You can use the following values in the `.env` file to spin up the Bridge UI loc
 VITE_NODE_ENV=dev
 VITE_L1_RPC_URL=https://l1rpc.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_L3_EXPLORER_URL="https://l3explorer.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_L1_TOKEN_VAULT_ADDRESS="0x59b670e9fA9D0A427751Af201D676719a970857b"
 VITE_L2_TOKEN_VAULT_ADDRESS="0x0000777700000000000000000000000000000002"
+VITE_L3_TOKEN_VAULT_ADDRESS="0x0000777700000000000000000000000000000002"
 
-VITE_L1_CROSS_CHAIN_SYNC_ADDRESS="0x9A9f2CCfdE556A7E9Ff0848998Aa4a0CFD8863AE"
+VITE_L1_CROSS_CHAIN_SYNC_ADDRESS="0x9A676e781A523b5d0C0e43731313A708CB607508"
 VITE_L2_CROSS_CHAIN_SYNC_ADDRESS="0x0000777700000000000000000000000000000001"
+VITE_L3_CROSS_CHAIN_SYNC_ADDRESS="0x0000777700000000000000000000000000000001"
 
-VITE_L1_BRIDGE_ADDRESS="0x59b670e9fA9D0A427751Af201D676719a970857b"
+VITE_L1_BRIDGE_ADDRESS="0x68B1D87F95878fE05B998F19b66F4baba5De1aed"
 VITE_L2_BRIDGE_ADDRESS="0x0000777700000000000000000000000000000004"
+VITE_L3_BRIDGE_ADDRESS="0x0000777700000000000000000000000000000004"
 
-VITE_L1_SIGNAL_SERVICE_ADDRESS="0x09635F643e140090A9A8Dcd712eD6285858ceBef"
+VITE_L1_SIGNAL_SERVICE_ADDRESS="0xa85233C63b9Ee964Add6F2cffe00Fd84eb32338f"
 VITE_L2_SIGNAL_SERVICE_ADDRESS="0x0000777700000000000000000000000000000007"
+VITE_L3_SIGNAL_SERVICE_ADDRESS="0x0000777700000000000000000000000000000007"
 
-VITE_TEST_ERC20=[{"address": "0x959922bE3CAee4b8Cd9a407cc3ac1C251C2007B1", "symbol": "BLL", "name": "Bull Token"}, {"address": "0x0B306BF915C4d645ff596e518fAf3F9669b97016", "symbol": "HORSE", "name": "Horse Token"}]
+VITE_TEST_ERC20=[{"address": "0x0DCd1Bf9A1b36cE34237eEaFef220932846BCD82", "symbol": "BLL", "name": "Bull Token"}, {"address": "0xA51c1fc2f0D1a1b8494Ed1FE312d7C3a78Ed91C0", "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

@@ -15,7 +15,8 @@
     "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",
+    "copy-abi": "node ./scripts/copy-abi.js"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.16.0",
@@ -36,6 +37,7 @@
     "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/scripts/copy-abi.js

@@ -0,0 +1,64 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const protocolAbiPath = path.resolve(__dirname, '../../protocol/abi');
+const abiOutputPath = path.resolve(__dirname, '../src/constants/abi');
+
+// Map of exported ABI constant to abi file path within protocol package.
+// This map needs maintainance when new contracts are added to the protocol.
+const jsonFilesMap = {
+  BRIDGE: '/contracts/bridge/Bridge.sol/Bridge.json',
+  ERC20: '/@openzeppelin/contracts/token/ERC20/ERC20.sol/ERC20.json',
+  TOKEN_VAULT: '/contracts/bridge/TokenVault.sol/TokenVault.json',
+  CROSS_CHAIN_SYNC:
+    '/contracts/common/ICrossChainSync.sol/ICrossChainSync.json',
+  FREE_MINT_ERC20: '/contracts/test/erc20/FreeMintERC20.sol/FreeMintERC20.json',
+};
+
+// Copy all ABI files to the output directory
+function copyAbis() {
+  Object.entries(jsonFilesMap).forEach(([, jsonPath]) => {
+    try {
+      const jsonStr = fs.readFileSync(protocolAbiPath + jsonPath, {
+        encoding: 'utf8',
+      });
+
+      const filename = path.basename(jsonPath);
+
+      fs.writeFileSync(`${abiOutputPath}/${filename}`, jsonStr, 'utf8');
+    } catch (e) {
+      if (e.code === 'ENOENT') {
+        console.error(`File not found: ${e.path}`);
+      } else {
+        console.error('Something really bad happened 😱', e);
+      }
+    }
+  });
+}
+
+// Generate index.ts file exporting abi files
+function generateIndexFile() {
+  const indexFile = Object.entries(jsonFilesMap)
+    .map(([name, jsonPath]) => {
+      const filename = path.basename(jsonPath);
+      return `export { default as ${name}_ABI } from './${filename}';`;
+    })
+    .join('\n');
+
+  try {
+    fs.writeFileSync(`${abiOutputPath}/index.ts`, indexFile, 'utf8');
+  } catch (e) {
+    console.error('`index.ts` could not be generated', e);
+  }
+}
+
+// Remove all files within the directory but not the directory itself
+fs.emptyDirSync(abiOutputPath);
+
+copyAbis();
+
+generateIndexFile();

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 { BRIDGE_ABI } 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,
+              BRIDGE_ABI,
               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 { TOKEN_VAULT_ABI, ERC20_ABI, BRIDGE_ABI } 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,
+      TOKEN_VAULT_ABI,
       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, ERC20_ABI, 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,
+      ERC20_ABI,
       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,
+      BRIDGE_ABI,
       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,
+      BRIDGE_ABI,
       opts.destProvider,
     );
 
@@ -250,7 +248,7 @@ export class ERC20Bridge implements Bridge {
 
       const srcTokenVaultContract: Contract = new Contract(
         opts.srcTokenVaultAddress,
-        TokenVault,
+        TOKEN_VAULT_ABI,
         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 { BRIDGE_ABI } 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,
+      BRIDGE_ABI,
       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,
+      BRIDGE_ABI,
       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,
+      BRIDGE_ABI,
       opts.destProvider,
     );
 
@@ -189,7 +189,7 @@ export class ETHBridge implements Bridge {
 
       const srcBridgeContract: Contract = new Contract(
         opts.srcBridgeAddress,
-        BridgeABI,
+        BRIDGE_ABI,
         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 {
+    CROSS_CHAIN_SYNC_ABI,
+    BRIDGE_ABI,
+    TOKEN_VAULT_ABI,
+  } 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,
+      CROSS_CHAIN_SYNC_ABI,
       providers[chains[transaction.toChainId].id],
     );
 
@@ -194,7 +196,7 @@
       processable = await isProcessable();
       const contract = new ethers.Contract(
         chains[transaction.toChainId].bridgeAddress,
-        BridgeABI,
+        BRIDGE_ABI,
         providers[chains[transaction.toChainId].id],
       );
 
@@ -209,7 +211,7 @@
         if (transaction.message?.data !== '0x') {
           const srcTokenVaultContract = new ethers.Contract(
             tokenVaults[transaction.fromChainId],
-            TokenVaultABI,
+            TOKEN_VAULT_ABI,
             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,
+            BRIDGE_ABI,
             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 { ERC20_ABI } from '../../constants/abi';
   import { signer } from '../../store/signer';
   import { userTokens } from '../../store/userToken';
   import { fromChain, toChain } from '../../store/chain';

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 { ERC20_ABI } 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, ERC20_ABI, 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 { ERC20_ABI, TOKEN_VAULT_ABI } 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,
+        TOKEN_VAULT_ABI,
         $signer,
       );