feat(bridge): non-mm wallets

packages/bridge-ui/.default.env

@@ -2,4 +2,8 @@ VITE_NODE_ENV=dev
 VITE_L1_RPC_URL=""
 VITE_L2_RPC_URL=""
 VITE_TAIKO_BRIDGE_ADDRESS=""
-VITE_MAINNET_BRIDGE_ADDRESS=""
+VITE_MAINNET_BRIDGE_ADDRESS=""
+VITE_TEST_ERC20_ADDRESS_MAINNET=""
+VITE_MAINNET_TOKEN_VAULT_ADDRESS=""
+VITE_TAIKO_TOKEN_VAULT_ADDRESS=""
+VITE_TEST_ERC20_ADDRESS_MAINNET=""

packages/bridge-ui/jest.config.js

@@ -39,8 +39,8 @@ export default {
     ],
     coverageThreshold: {
         global: {
-            statements: 99.45,
-            branches: 93.65,
+            statements: 98.95,
+            branches: 90.19,
             functions: 100,
             lines: 100,
         },

packages/bridge-ui/src/App.svelte

@@ -2,13 +2,17 @@
   import { wrap } from "svelte-spa-router/wrap";
   import QueryProvider from "./components/providers/QueryProvider.svelte";
   import Router from "svelte-spa-router";
-  import { SvelteToast, toast } from "@zerodevx/svelte-toast";
+  import { SvelteToast } from "@zerodevx/svelte-toast";
   import type { SvelteToastOptions } from "@zerodevx/svelte-toast";
-  import { configureChains, createClient, InjectedConnector } 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 {
+    configureChains,
+    createClient,
+    InjectedConnector,
+  } 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 Home from "./pages/home/Home.svelte";
   import { setupI18n } from "./i18n";
@@ -25,9 +29,15 @@
   import { signer } from "./store/signer";
   import type { Transactioner } from "./domain/transactions";
   import { wagmiClient } from "./store/wagmi";
-  
+
   setupI18n({ withLocale: "en" });
-  import { chains, CHAIN_MAINNET, CHAIN_TKO, mainnet, taiko } from "./domain/chain";
+  import {
+    chains,
+    CHAIN_MAINNET,
+    CHAIN_TKO,
+    mainnet,
+    taiko,
+  } from "./domain/chain";
   import SwitchEthereumChainModal from "./components/modals/SwitchEthereumChainModal.svelte";
   import { ProofService } from "./proof/service";
   import { ethers } from "ethers";
@@ -36,6 +46,7 @@
   import { StorageService } from "./storage/service";
   import { MessageStatus } from "./domain/message";
   import BridgeABI from "./constants/abi/Bridge";
+  import { providers } from "./store/providers";
 
   const providerMap: Map<number, ethers.providers.JsonRpcProvider> = new Map<
     number,
@@ -49,28 +60,36 @@
     CHAIN_TKO.id,
     new ethers.providers.JsonRpcProvider(import.meta.env.VITE_L2_RPC_URL)
   );
+  providers.set(providerMap);
 
-  const { chains: wagmiChains, provider, webSocketProvider } = configureChains(
+  const {
+    chains: wagmiChains,
+    provider,
+    webSocketProvider,
+  } = configureChains(
     [mainnet, taiko],
-    [publicProvider(), jsonRpcProvider({
-      rpc: (chain) => ({
-        http: providerMap.get(chain.id).connection.url,
+    [
+      publicProvider(),
+      jsonRpcProvider({
+        rpc: (chain) => ({
+          http: providerMap.get(chain.id).connection.url,
+        }),
       }),
-    })],
+    ]
   );
 
   $wagmiClient = createClient({
     provider,
     connectors: [
       new InjectedConnector({
-        chains: wagmiChains
+        chains: wagmiChains,
       }),
       new CoinbaseWalletConnector({
-      chains: wagmiChains,
-      options: {
-        appName: 'Taiko Bridge',
-      },
-    }),
+        chains: wagmiChains,
+        options: {
+          appName: "Taiko Bridge",
+        },
+      }),
       new WalletConnectConnector({
         chains: wagmiChains,
         options: {
@@ -92,8 +111,11 @@
   });
 
   chainIdToTokenVaultAddress.update((store) => {
-    store.set(CHAIN_TKO.id, import.meta.env.VITE_TAIKO_BRIDGE_ADDRESS);
-    store.set(CHAIN_MAINNET.id, import.meta.env.VITE_MAINNET_BRIDGE_ADDRESS);
+    store.set(CHAIN_TKO.id, import.meta.env.VITE_TAIKO_TOKEN_VAULT_ADDRESS);
+    store.set(
+      CHAIN_MAINNET.id,
+      import.meta.env.VITE_MAINNET_TOKEN_VAULT_ADDRESS
+    );
     return store;
   });
 
@@ -137,12 +159,12 @@
         if (tx.interval) clearInterval(tx.interval);
 
         if (tx.status === MessageStatus.New) {
-          const provider = providerMap.get(tx.message.destChainId.toNumber());
+          const provider = providerMap.get(tx.toChainId);
 
           const interval = setInterval(async () => {
             tx.interval = interval;
             const contract = new ethers.Contract(
-              chains[tx.message.destChainId.toNumber()].bridgeAddress,
+              chains[tx.toChainId].bridgeAddress,
               BridgeABI,
               provider
             );

packages/bridge-ui/src/app.css

@@ -54,4 +54,4 @@
 
 .dropdown-content.address-dropdown-content {
   border-radius: 6px;
-}
+}

packages/bridge-ui/src/components/AddressDropdown.svelte

@@ -12,14 +12,9 @@
   import { errorToast } from "../utils/toast";
   import CopyIcon from "./icons/Copy.svelte";
   import DisconnectIcon from "./icons/Disconnect.svelte";
-  import TransactionsIcon from "./icons/Transactions.svelte";
   import { slide } from "svelte/transition";
   import { fromChain } from "../store/chain";
   import { truncateString } from "../utils/truncateString";
-  import Transactions from "./Transactions.svelte";
-  import { transactions } from "../store/transactions";
-
-  let showTransactions = false;
 
   let address: string;
   let addressAvatarImgData: string;
@@ -98,54 +93,39 @@
     tabindex="0"
     class="dropdown-content address-dropdown-content menu shadow bg-dark-3 rounded-sm w-64 mt-2 pb-2"
   >
-    {#if !showTransactions}
-      <div class="p-5 pb-0 flex flex-col items-center" transition:slide>
-        {#if $fromChain && $signer}
-          <svelte:component this={$fromChain.icon} />
-          <div class="text-lg mt-2">
-            {tokenBalance.length > 10
-              ? `${truncateString(tokenBalance)}...`
-              : tokenBalance} ETH
-          </div>
-        {/if}
-      </div>
-      <div class="divider" />
-      <div class="flex hover:bg-dark-5 items-center py-2 px-2">
-        <img
-          width="24"
-          height="24"
-          src="data:image/png;base64,{addressAvatarImgData}"
-          class="rounded-full mr-2 inline-block"
-          alt="avatar"
-        />
-        {addressSubsection(address)}
-      </div>
-      <div
-        class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2"
-        on:click={async () => await copyToClipboard(address)}
-      >
-        <CopyIcon />
-        Copy Address
-      </div>
-      <div
-        class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2"
-        on:click={async () => await disconnect()}
-      >
-        <DisconnectIcon /> Disconnect
-      </div>
-      {#if $transactions && $transactions.length}
-        <div
-          class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2"
-          on:click={() => (showTransactions = true)}
-        >
-          <TransactionsIcon />
-          {$transactions.length} Transactions
+    <div class="p-5 pb-0 flex flex-col items-center" transition:slide>
+      {#if $fromChain && $signer}
+        <svelte:component this={$fromChain.icon} />
+        <div class="text-lg mt-2">
+          {tokenBalance.length > 10
+            ? `${truncateString(tokenBalance)}...`
+            : tokenBalance} ETH
         </div>
       {/if}
-    {:else}
-      <div class="" transition:slide>
-        <Transactions bind:showTransactions />
-      </div>
-    {/if}
+    </div>
+    <div class="divider" />
+    <div class="flex hover:bg-dark-5 items-center py-2 px-2">
+      <img
+        width="24"
+        height="24"
+        src="data:image/png;base64,{addressAvatarImgData}"
+        class="rounded-full mr-2 inline-block"
+        alt="avatar"
+      />
+      {addressSubsection(address)}
+    </div>
+    <div
+      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2"
+      on:click={async () => await copyToClipboard(address)}
+    >
+      <CopyIcon />
+      Copy Address
+    </div>
+    <div
+      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2"
+      on:click={async () => await disconnect()}
+    >
+      <DisconnectIcon /> Disconnect
+    </div>
   </ul>
 </div>

packages/bridge-ui/src/components/Loader.svelte

@@ -1,5 +1,4 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM1.39211 7C1.39211 10.0972 3.90285 12.6079 7 12.6079C10.0972 12.6079 12.6079 10.0972 12.6079 7C12.6079 3.90285 10.0972 1.39211 7 1.39211C3.90285 1.39211 1.39211 3.90285 1.39211 7Z" fill="#B20F89"/>
   <path d="M14 7C14 8.1941 13.6945 9.36835 13.1127 10.4111C12.5308 11.4538 11.6918 12.3304 10.6756 12.9574C9.65935 13.5844 8.49961 13.941 7.30665 13.9933C6.1137 14.0456 4.9272 13.7919 3.85998 13.2562L4.48444 12.012C5.33942 12.4411 6.28996 12.6444 7.24567 12.6025C8.20138 12.5606 9.13048 12.2749 9.94461 11.7726C10.7587 11.2703 11.4309 10.5681 11.897 9.73271C12.3632 8.89735 12.6079 7.95663 12.6079 7H14Z" fill="#FC0FC0"/>
-  </svg>
-
+  </svg>