feat(bridge-ui): add token to wallet

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { UserRejectedRequestError } from '@wagmi/core';
+
+  import { L1_CHAIN_ID } from '../constants/envVars';
+  import type { Token } from '../domain/token';
+  import { token } from '../store/token';
+  import MetaMask from './icons/MetaMask.svelte';
+  import { errorToast, warningToast } from './NotificationToast.svelte';
+
+  async function addTokenToWallet(customToken: Token) {
+    if (!customToken) {
+      errorToast('Token not selected.');
+      return;
+    }
+
+    try {
+      await window.ethereum.request({
+        method: 'wallet_watchAsset',
+        params: {
+          type: 'ERC20',
+          options: {
+            address: customToken.addresses[L1_CHAIN_ID],
+            symbol: customToken.symbol,
+            decimals: customToken.decimals,
+            image: customToken.logoUrl,
+          },
+        },
+      });
+    } catch (e) {
+      if (e instanceof UserRejectedRequestError) {
+        warningToast('Adding token has been rejected.');
+      } else {
+        errorToast('Failed to add token to wallet');
+      }
+    }
+  }
+</script>
+
+<span
+  class="inline-block cursor-pointer align-middle"
+  on:click={() => addTokenToWallet($token)}>
+  <MetaMask width={16} /></span>

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

@@ -28,6 +28,7 @@
   import { getLogger } from '../../utils/logger';
   import { truncateString } from '../../utils/truncateString';
   import { tokenVaults } from '../../vault/tokenVaults';
+  import AddTokenToWallet from '../AddTokenToWallet.svelte';
   import {
     errorToast,
     successToast,
@@ -61,8 +62,7 @@
   let feeMethod: ProcessingFeeMethod = ProcessingFeeMethod.RECOMMENDED;
   let feeAmount: string = '0';
 
-  // TODO: too much going on here. We need to extract
-  //       logic and unit test the hell out of all this.
+  let showAddToWallet: boolean = false;
 
   async function updateTokenBalance(signer: Signer, token: Token) {
     if (signer && token) {
@@ -513,6 +513,10 @@
     amount = target.value;
   }
 
+  function toggleShowAddTokenToWallet(token: Token) {
+    showAddToWallet = token.symbol !== 'ETH';
+  }
+
   $: updateTokenBalance($signer, $token).finally(() => {
     computingTokenBalance = false;
   });
@@ -539,6 +543,8 @@
     });
 
   $: amountEntered = Boolean(amount);
+
+  $: toggleShowAddTokenToWallet($token);
 </script>
 
 <div class="space-y-6 md:space-y-4">
@@ -561,6 +567,10 @@
             on:click={useFullAmount}>
             {$_('bridgeForm.maxLabel')}
           </button>
+
+          {#if showAddToWallet}
+            <AddTokenToWallet />
+          {/if}
         </div>
       {/if}
     </label>

packages/bridge-ui/src/constants/__mocks__/envVars.ts

@@ -45,10 +45,12 @@ export const TEST_ERC20 = [
     address: '0x959922bE3CAee4b8Cd9a407cc3ac1C251C2007B1',
     symbol: 'BLL',
     name: 'Bull Token',
+    logoUrl: 'https://internet.com/bll',
   },
   {
     address: '0x0B306BF915C4d645ff596e518fAf3F9669b97016',
     symbol: 'HORSE',
     name: 'Horse Token',
+    logoUrl: 'https://internet.com/horse',
   },
 ];

packages/bridge-ui/src/constants/envVars.ts

@@ -51,4 +51,5 @@ export const TEST_ERC20: {
   address: Address;
   symbol: string;
   name: string;
+  logoUrl?: string;
 }[] = JSON.parse(import.meta.env?.VITE_TEST_ERC20);

packages/bridge-ui/src/token/tokens.ts

@@ -25,6 +25,8 @@ export const TKOToken: Token = {
   },
   decimals: 18,
   symbol: 'TKO',
+  logoUrl:
+    'https://github.com/taikoxyz/taiko-mono/tree/main/packages/branding/testnet-token-images/ttko.svg',
   logoComponent: Tko,
 };
 
@@ -35,7 +37,7 @@ const symbolToLogoComponent = {
 };
 
 export const testERC20Tokens: Token[] = TEST_ERC20.map(
-  ({ name, address, symbol }) => ({
+  ({ name, address, symbol, logoUrl }) => ({
     name,
     symbol,
 
@@ -45,6 +47,7 @@ export const testERC20Tokens: Token[] = TEST_ERC20.map(
     },
     decimals: 18,
     logoComponent: symbolToLogoComponent[symbol] || Unknown,
+    logoUrl: logoUrl,
   }),
 );