taikoxyz · jscriptcoder · Jun 1, 2023 · May 4, 2023 · May 4, 2023 · May 4, 2023
diff --git a/packages/bridge-ui/.eslintrc.cjs b/packages/bridge-ui/.eslintrc.cjs
@@ -12,12 +12,12 @@ module.exports = {
     sourceType: 'module',
     extraFileExtensions: ['.svelte'],
   },
-  plugins: ['svelte3', '@typescript-eslint' /*, 'simple-import-sort'*/],
+  plugins: ['svelte3', '@typescript-eslint', 'simple-import-sort'],
   rules: {
-    'linebreak-style': ['error', 'unix'],
-    // 'simple-import-sort/imports': 'error',
-    // 'simple-import-sort/exports': 'error',
     semi: ['error', 'always'],
+    'linebreak-style': ['error', 'unix'],
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
     'no-console': ['error', { allow: ['warn', 'error'] }],
     'no-irregular-whitespace': 'off',
   },
@@ -51,6 +51,7 @@ module.exports = {
         '@typescript-eslint/no-misused-promises': 'off',
         '@typescript-eslint/no-floating-promises': 'off',
         '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/restrict-plus-operands': 'off',
       },
     },
     {

diff --git a/packages/bridge-ui/README.md b/packages/bridge-ui/README.md
@@ -16,36 +16,36 @@ You can use the following values in the `.env` file to spin up the Bridge UI loc
 
 ```
 VITE_L1_RPC_URL=https://l1rpc.internal.taiko.xyz
-VITE_L2_RPC_URL=https://l2rpc.internal.taiko.xyz
+VITE_L2_RPC_URL=https://rpc.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_L2_EXPLORER_URL=https://explorer.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_CHAIN_NAME="Ethereum"
+VITE_L2_CHAIN_NAME="Taiko"
+VITE_L3_CHAIN_NAME="L3 Chain"
 
 VITE_L1_CROSS_CHAIN_SYNC_ADDRESS=0x0B306BF915C4d645ff596e518fAf3F9669b97016
 VITE_L2_CROSS_CHAIN_SYNC_ADDRESS=0x1000777700000000000000000000000000000001
 VITE_L3_CROSS_CHAIN_SYNC_ADDRESS=0x1000777700000000000000000000000000000001
 
-VITE_L1_TOKEN_VAULT_ADDRESS=0x4ed7c70F96B99c776995fB64377f0d4aB3B0e1C1
+VITE_L1_TOKEN_VAULT_ADDRESS=0x322813Fd9A801c5507c9de605d63CEA4f2CE6c44
 VITE_L2_TOKEN_VAULT_ADDRESS=0x1000777700000000000000000000000000000002
 VITE_L3_TOKEN_VAULT_ADDRESS=0x1000777700000000000000000000000000000002
 
-VITE_L1_BRIDGE_ADDRESS=0x3Aa5ebB10DC797CAC828524e59A333d0A371443c
+VITE_L1_BRIDGE_ADDRESS=0xc6e7DF5E7b4f2A278906862b61205850344D4e7d
 VITE_L2_BRIDGE_ADDRESS=0x1000777700000000000000000000000000000004
 VITE_L3_BRIDGE_ADDRESS=0x1000777700000000000000000000000000000004
 
-VITE_L1_SIGNAL_SERVICE_ADDRESS=0x4A679253410272dd5232B3Ff7cF5dbB88f295319
+VITE_L1_SIGNAL_SERVICE_ADDRESS=0x7a2088a1bFc9d81c55368AE168C2C02570cB814F
 VITE_L2_SIGNAL_SERVICE_ADDRESS=0x1000777700000000000000000000000000000007
 VITE_L3_SIGNAL_SERVICE_ADDRESS=0x1000777700000000000000000000000000000007
 

diff --git a/packages/bridge-ui/__mocks__/axios/index.ts b/packages/bridge-ui/__mocks__/axios/index.ts
@@ -0,0 +1,7 @@
+import type { AxiosRequestConfig } from 'axios';
+
+const axios = {
+  get: jest.fn<Promise<unknown>, [string, AxiosRequestConfig<unknown>]>(),
+};
+
+export default axios;
diff --git a/packages/bridge-ui/index.html b/packages/bridge-ui/index.html
@@ -7,14 +7,14 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;700&display=swap"
       rel="stylesheet" />
 
     <title>Bridge</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="src/app.ts"></script>
   </body>
 
   <script>

diff --git a/packages/bridge-ui/jest.config.js b/packages/bridge-ui/jest.config.js
@@ -39,10 +39,16 @@ export default {
   ],
   coverageThreshold: {
     global: {
-      statements: 95,
-      branches: 87, // TODO: increase to 90
-      functions: 94,
-      lines: 95,
+      // TODO: temporal coverage decrease due to new logic,
+      //       services, utils and and error handling.
+      //       Mising tests for:
+      //         - relayer-api/RelayerAPIService (partial test coverage)
+      //         - bridge/ERC20Bridge (partial test coverage)
+      //         - bridge/ETHBridge (partial test coverage)
+      statements: 89,
+      branches: 86,
+      functions: 91,
+      lines: 89,
     },
   },
   modulePathIgnorePatterns: ['<rootDir>/public/build/'],

diff --git a/packages/bridge-ui/package.json b/packages/bridge-ui/package.json
@@ -9,7 +9,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "svelte:check": "svelte-check --tsconfig ./tsconfig.json --ignore ./wagmi.config.ts",
-    "test": "pnpm exec jest",
+    "test": "pnpm exec jest --silent",
+    "test:debug": "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",
@@ -63,8 +64,7 @@
     "ts-loader": "^9.2.6",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",
-    "vite": "^3.0.0",
-    "vite-plugin-static-copy": "^0.12.0"
+    "vite": "^3.0.0"
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "^3.6.3",

diff --git a/...s/bridge-ui/src/assets/lottie/loader.json → packages/bridge-ui/public/lottie/loader.json b/...s/bridge-ui/src/assets/lottie/loader.json → packages/bridge-ui/public/lottie/loader.json
diff --git a/packages/bridge-ui/public/taiko-favicon.png b/packages/bridge-ui/public/taiko-favicon.png
diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
@@ -1,176 +1,20 @@
 <script lang="ts">
-  import QueryProvider from './components/providers/QueryProvider.svelte';
-  import { configureChains, createClient } from '@wagmi/core';
-  import { publicProvider } from '@wagmi/core/providers/public';
-  import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc';
-  import { CoinbaseWalletConnector } from '@wagmi/core/connectors/coinbaseWallet';
-  import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect';
-  import { MetaMaskConnector } from '@wagmi/core/connectors/metaMask';
+  import { onDestroy, onMount } from 'svelte';
 
-  import { setupI18n } from './i18n';
-  import { transactions } from './store/transactions';
   import Navbar from './components/Navbar.svelte';
-  import Toast, { successToast } from './components/Toast.svelte';
-  import { signer } from './store/signer';
-  import type { BridgeTransaction } from './domain/transactions';
-  import { wagmiClient } from './store/wagmi';
-
-  setupI18n({ withLocale: 'en' });
-  import SwitchEthereumChainModal from './components/modals/SwitchEthereumChainModal.svelte';
-  import { ethers } from 'ethers';
-  import { MessageStatus } from './domain/message';
-  import { bridgeABI } from './constants/abi';
-  import { userTokens } from './store/userToken';
-  import { RelayerAPIService } from './relayer-api/RelayerAPIService';
-  import {
-    DEFAULT_PAGE,
-    MAX_PAGE_SIZE,
-    type RelayerAPI,
-  } from './domain/relayerApi';
-  import {
-    paginationInfo,
-    relayerApi,
-    relayerBlockInfoMap,
-  } from './store/relayerApi';
-  import { chains, mainnetWagmiChain, taikoWagmiChain } from './chain/chains';
-  import { providers } from './provider/providers';
-  import { RELAYER_URL } from './constants/envVars';
+  import NotificationToast from './components/NotificationToast.svelte';
   import Router from './components/Router.svelte';
-  import { storageService, tokenService } from './storage/services';
-
-  const { chains: wagmiChains, provider } = configureChains(
-    [mainnetWagmiChain, taikoWagmiChain],
-    [
-      publicProvider(),
-      jsonRpcProvider({
-        rpc: (chain) => ({
-          http: providers[chain.id].connection.url,
-        }),
-      }),
-    ],
-  );
-
-  $wagmiClient = createClient({
-    autoConnect: true,
-    provider,
-    connectors: [
-      new MetaMaskConnector({
-        chains: wagmiChains,
-      }),
-      new CoinbaseWalletConnector({
-        chains: wagmiChains,
-        options: {
-          appName: 'Taiko Bridge',
-        },
-      }),
-      new WalletConnectConnector({
-        chains: wagmiChains,
-        options: {
-          qrcode: true,
-        },
-      }),
-    ],
-  });
-
-  const relayerApiService: RelayerAPI = new RelayerAPIService(
-    RELAYER_URL,
-    providers,
-  );
-
-  relayerApi.set(relayerApiService);
-
-  signer.subscribe(async (store) => {
-    if (store) {
-      const userAddress = await store.getAddress();
-
-      const { txs: apiTxs, paginationInfo: info } =
-        await $relayerApi.getAllBridgeTransactionByAddress(userAddress, {
-          page: DEFAULT_PAGE,
-          size: MAX_PAGE_SIZE,
-        });
-
-      paginationInfo.set(info);
-
-      const blockInfoMap = await $relayerApi.getBlockInfo();
-      relayerBlockInfoMap.set(blockInfoMap);
-
-      const txs = await storageService.getAllByAddress(userAddress);
-      const hashToApiTxsMap = new Map(
-        apiTxs.map((tx) => {
-          return [tx.hash.toLowerCase(), 1];
-        }),
-      );
-
-      const updatedStorageTxs: BridgeTransaction[] = txs.filter((tx) => {
-        return !hashToApiTxsMap.has(tx.hash.toLowerCase());
-      });
-
-      storageService.updateStorageByAddress(userAddress, updatedStorageTxs);
-
-      transactions.set([...updatedStorageTxs, ...apiTxs]);
-
-      const tokens = tokenService.getTokens(userAddress);
-      userTokens.set(tokens);
-    }
-  });
-
-  const transactionToIntervalMap = new Map();
-
-  transactions.subscribe((store) => {
-    if (store) {
-      store.forEach((tx) => {
-        const txInterval = transactionToIntervalMap.get(tx.hash);
-        if (txInterval) {
-          clearInterval(txInterval);
-          transactionToIntervalMap.delete(tx.hash);
-        }
-
-        if (tx.status === MessageStatus.New) {
-          const provider = providers[tx.toChainId];
-
-          const interval = setInterval(async () => {
-            const txInterval = transactionToIntervalMap.get(tx.hash);
-            if (txInterval !== interval) {
-              clearInterval(txInterval);
-              transactionToIntervalMap.delete(tx.hash);
-            }
-
-            transactionToIntervalMap.set(tx.hash, interval);
-            if (!tx.msgHash) return;
-
-            const contract = new ethers.Contract(
-              chains[tx.toChainId].bridgeAddress,
-              bridgeABI,
-              provider,
-            );
-
-            const messageStatus: MessageStatus =
-              await contract.getMessageStatus(tx.msgHash);
+  import SwitchChainModal from './components/SwitchChainModal.svelte';
+  import { startWatching, stopWatching } from './wagmi/watcher';
 
-            if (messageStatus === MessageStatus.Done) {
-              successToast('Bridge message processed successfully');
-              const txOngoingInterval = transactionToIntervalMap.get(tx.hash);
-              clearInterval(txOngoingInterval);
-              transactionToIntervalMap.delete(tx.hash);
-            }
-          }, 20 * 1000);
-        }
-      });
-    }
-  });
+  onMount(startWatching);
+  onDestroy(stopWatching);
 </script>
 
-<QueryProvider>
-  <main>
-    <Navbar />
-    <Router />
-  </main>
-  <Toast />
-  <SwitchEthereumChainModal />
-</QueryProvider>
+<main>
+  <Navbar />
+  <Router />
+</main>
 
-<style>
-  main {
-    font-family: 'Inter', sans-serif;
-  }
-</style>
+<NotificationToast />
+<SwitchChainModal />