From 42fad6bfc0154d04dd271b93085b57caa6e8e4e4 Mon Sep 17 00:00:00 2001
From: Jeffery Walsh <cyberhorsey@gmail.com>
Date: Tue, 6 Jun 2023 13:17:10 -0700
Subject: [PATCH 1/3] add token to wallet

---
 .../src/components/AddTokenToWallet.svelte    | 42 +++++++++++++++++++
 .../components/BridgeForm/BridgeForm.svelte   | 16 +++++--
 .../src/constants/__mocks__/envVars.ts        |  2 +
 packages/bridge-ui/src/constants/envVars.ts   |  1 +
 packages/bridge-ui/src/token/tokens.ts        |  5 ++-
 5 files changed, 62 insertions(+), 4 deletions(-)
 create mode 100644 packages/bridge-ui/src/components/AddTokenToWallet.svelte

diff --git a/packages/bridge-ui/src/components/AddTokenToWallet.svelte b/packages/bridge-ui/src/components/AddTokenToWallet.svelte
new file mode 100644
index 00000000000..f820670c5cf
--- /dev/null
+++ b/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>
diff --git a/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte b/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte
index b43a49fe32c..b357d7a0fb9 100644
--- a/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte
+++ b/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type Address,fetchFeeData } from '@wagmi/core';
+  import { type Address, fetchFeeData } from '@wagmi/core';
   import { BigNumber, Contract, ethers, type Signer } from 'ethers';
   import { _ } from 'svelte-i18n';
 
@@ -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) {
@@ -495,6 +495,10 @@
     amount = target.value;
   }
 
+  function toggleShowAddTokenToWallet(token: Token) {
+    showAddToWallet = token.symbol !== 'ETH';
+  }
+
   $: updateTokenBalance($signer, $token).finally(() => {
     computingTokenBalance = false;
   });
@@ -521,6 +525,8 @@
     });
 
   $: amountEntered = Boolean(amount);
+
+  $: toggleShowAddTokenToWallet($token);
 </script>
 
 <div class="space-y-6 md:space-y-4">
@@ -543,6 +549,10 @@
             on:click={useFullAmount}>
             {$_('bridgeForm.maxLabel')}
           </button>
+
+          {#if showAddToWallet}
+            <AddTokenToWallet />
+          {/if}
         </div>
       {/if}
     </label>
diff --git a/packages/bridge-ui/src/constants/__mocks__/envVars.ts b/packages/bridge-ui/src/constants/__mocks__/envVars.ts
index b598c65236b..3649f0f4c4c 100644
--- a/packages/bridge-ui/src/constants/__mocks__/envVars.ts
+++ b/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',
   },
 ];
diff --git a/packages/bridge-ui/src/constants/envVars.ts b/packages/bridge-ui/src/constants/envVars.ts
index a105b65fabb..839642f6482 100644
--- a/packages/bridge-ui/src/constants/envVars.ts
+++ b/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);
diff --git a/packages/bridge-ui/src/token/tokens.ts b/packages/bridge-ui/src/token/tokens.ts
index 4cee9f0d8fa..c5b3c1e94e2 100644
--- a/packages/bridge-ui/src/token/tokens.ts
+++ b/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,
   }),
 );
 

From e9cffdc6a72b0287f2c12443fc9287bc99a5e18e Mon Sep 17 00:00:00 2001
From: Jeffery Walsh <cyberhorsey@gmail.com>
Date: Tue, 6 Jun 2023 13:45:10 -0700
Subject: [PATCH 2/3] error handling

---
 packages/bridge-ui/src/components/AddTokenToWallet.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bridge-ui/src/components/AddTokenToWallet.svelte b/packages/bridge-ui/src/components/AddTokenToWallet.svelte
index f820670c5cf..47814ee2ab9 100644
--- a/packages/bridge-ui/src/components/AddTokenToWallet.svelte
+++ b/packages/bridge-ui/src/components/AddTokenToWallet.svelte
@@ -27,7 +27,7 @@
         },
       });
     } catch (e) {
-      if (e instanceof UserRejectedRequestError) {
+      if (e.code === 4001) {
         warningToast('Adding token has been rejected.');
       } else {
         errorToast('Failed to add token to wallet');

From 8d5dd0a24b1ac0b334c4fbb3b35e81dda336f00f Mon Sep 17 00:00:00 2001
From: Jeffery Walsh <cyberhorsey@gmail.com>
Date: Tue, 6 Jun 2023 13:47:53 -0700
Subject: [PATCH 3/3] mm mobile

---
 packages/bridge-ui/src/components/AddTokenToWallet.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bridge-ui/src/components/AddTokenToWallet.svelte b/packages/bridge-ui/src/components/AddTokenToWallet.svelte
index 47814ee2ab9..e0d409e072f 100644
--- a/packages/bridge-ui/src/components/AddTokenToWallet.svelte
+++ b/packages/bridge-ui/src/components/AddTokenToWallet.svelte
@@ -27,7 +27,7 @@
         },
       });
     } catch (e) {
-      if (e.code === 4001) {
+      if (e.code === 4001 || e?.data?.originalError?.code === 4001) {
         warningToast('Adding token has been rejected.');
       } else {
         errorToast('Failed to add token to wallet');