From 683b19cab30bf8c9c713e889f969336e04641187 Mon Sep 17 00:00:00 2001
From: jeff <113397187+cyberhorsey@users.noreply.github.com>
Date: Tue, 6 Jun 2023 14:07:49 -0700
Subject: [PATCH] feat(bridge-ui): add token to wallet (#13902)

---
 .../src/components/AddTokenToWallet.svelte    | 42 +++++++++++++++++++
 .../components/BridgeForm/BridgeForm.svelte   | 14 ++++++-
 .../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, 61 insertions(+), 3 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 0000000000..e0d409e072
--- /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.code === 4001 || e?.data?.originalError?.code === 4001) {
+        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 d86894d067..8deabf54c9 100644
--- a/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte
+++ b/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>
diff --git a/packages/bridge-ui/src/constants/__mocks__/envVars.ts b/packages/bridge-ui/src/constants/__mocks__/envVars.ts
index b598c65236..3649f0f4c4 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 a105b65fab..839642f648 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 4cee9f0d8f..c5b3c1e94e 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,
   }),
 );