cleanup

packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte

@@ -31,10 +31,10 @@
 
   export let modalOpen = false;
   export let loadingTokenDetails = false;
+  export let customTokens: Token[] = [];
 
   let addressInputComponent: AddressInput;
   let tokenAddress: Address | string = '';
-  let customTokens: Token[] = [];
   let customToken: Token | null = null;
   let customTokenWithDetails: Token | null = null;
   let disabled = true;
@@ -88,10 +88,6 @@
   };
 
   const remove = async (token: Token) => {
-    log('remove token', token);
-    const address = $account.address;
-    tokenService.removeToken(token, address as Address);
-    customTokens = tokenService.getTokens(address as Address);
     dispatch('tokenRemoved', { token });
   };
 
@@ -155,8 +151,6 @@
       ? formatUnits(customTokenWithDetails.balance, customTokenWithDetails.decimals)
       : 0;
 
-  $: customTokens = tokenService.getTokens($account?.address as Address);
-
   $: disabled = state !== AddressInputState.VALID || tokenAddress === '' || tokenAddress.length !== 42;
 
   const closeModalIfClickedOutside = (e: MouseEvent) => {
@@ -215,6 +209,8 @@
           </div>
         {/each}
       </div>
+    {:else}
+      <span>{$t('token_dropdown.no_imported_token')}</span>
     {/if}
     <div class="h-sep" />
     <ActionButton priority="primary" {disabled} on:click={addCustomErc20Token} onPopup>

packages/bridge-ui/src/components/TokenDropdown/DialogView.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
@@ -16,7 +16,6 @@
   import { truncateString } from '$libs/util/truncateString';
   import { account } from '$stores/account';
 
-  import AddCustomErc20 from './AddCustomERC20.svelte';
   import { symbolToIconMap } from './symbolToIconMap';
   import { TabTypes, TokenTabs } from './types';
 
@@ -25,13 +24,14 @@
   export let customTokens: Token[] = [];
   export let value: Maybe<Token> = null;
   export let menuOpen = false;
-  export let modalOpen = false;
   export let onlyMintable: boolean = false;
   export let selectToken: (token: Token) => void = noop;
   export let closeMenu: () => void = noop;
 
   export let activeTab: TabTypes = TabTypes.TOKEN;
 
+  const dispatch = createEventDispatcher();
+
   const searchToken = (event: Event) => {
     enteredTokenName = (event.target as HTMLInputElement).value;
   };
@@ -42,7 +42,7 @@
 
   const showAddERC20 = () => {
     menuOpen = false;
-    modalOpen = true;
+    dispatch('openCustomTokenModal');
   };
 
   const handleStorageChange = (newTokens: Token[]) => {
@@ -56,9 +56,7 @@
   };
 
   const removeToken = async (token: Token) => {
-    const address = $account.address;
-    tokenService.removeToken(token, address as Address);
-    customTokens = tokenService.getTokens(address as Address);
+    dispatch('tokenRemoved', { token });
   };
 
   const getTokenKeydownHandler = (token: Token) => {
@@ -180,10 +178,6 @@
                 </div>
               </li>
             {/each}
-            {#if filteredCustomTokens.length === 0}
-              <li class="rounded-[10px]">No custom tokens added</li>
-            {/if}
-            <div class="h-sep" />
             <li class="f-between-center max-h-[42px]">
               <button
                 on:click={showAddERC20}
@@ -202,6 +196,4 @@
   <button class="overlay-backdrop" data-modal-uuid={id} />
 </dialog>
 
-<AddCustomErc20 bind:modalOpen on:tokenRemoved />
-
 <OnAccount change={onAccountChange} />

packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
@@ -33,6 +33,8 @@
 
   export let activeTab: TabTypes = TabTypes.TOKEN;
 
+  const dispatch = createEventDispatcher();
+
   const handleCloseMenu = () => {
     enteredTokenName = '';
     closeMenu();
@@ -48,7 +50,7 @@
     };
   };
 
-  const showAddERC20 = () => (addArc20ModalOpen = true);
+  const showAddERC20 = () => dispatch('openCustomTokenModal');
 
   const handleStorageChange = (newTokens: Token[]) => {
     customTokens = newTokens;
@@ -69,9 +71,7 @@
   };
 
   const removeToken = async (token: Token) => {
-    const address = $account.address;
-    tokenService.removeToken(token, address as Address);
-    customTokens = tokenService.getTokens(address as Address);
+    dispatch('tokenRemoved', { token });
   };
 
   $: filteredCustomTokens = [] as Token[];
@@ -177,6 +177,7 @@
             </div>
           </li>
         {/each}
+
         <div class="h-sep my-[8px]" />
         <li>
           <button on:click={showAddERC20} class="flex hover:bg-dark-5 justify-center items-center rounded-lg h-[64px]">

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

@@ -26,6 +26,7 @@
   import { type Account, account } from '$stores/account';
   import { connectedSourceChain } from '$stores/network';
 
+  import AddCustomErc20 from './AddCustomERC20.svelte';
   import DialogView from './DialogView.svelte';
   import DropdownView from './DropdownView.svelte';
   import { symbolToIconMap } from './symbolToIconMap';
@@ -39,12 +40,15 @@
   export let disabled = false;
   export let combined = false;
 
+  let customTokenModalOpen = false;
+
   let id = `menu-${uid()}`;
   $: menuOpen = false;
 
   let activeTab: TabTypes = TabTypes.TOKEN;
 
-  const customTokens = tokenService.getTokens($account?.address as Address);
+  let customTokens = tokenService.getTokens($account?.address as Address);
+
   // This will control which view to render depending on the screensize.
   // Since markup will differ, and there is logic running when interacting
   // with this component, it makes more sense to not render the view that's
@@ -119,11 +123,21 @@
     $computingBalance = false;
   };
 
+  const handleCustomTokenModal = () => {
+    closeMenu();
+    customTokenModalOpen = true;
+  };
+
   const handleTokenRemoved = (event: { detail: { token: Token } }) => {
+    const token = event.detail.token;
+    value = ETHToken;
     // if the selected token is the one that was removed by the user, remove it
-    if (event.detail.token === value) {
-      value = ETHToken;
-    }
+    // if (token === value || $selectedToken === token) {
+    //   value = ETHToken;
+    // }
+    const address = $account.address;
+    tokenService.removeToken(token, address as Address);
+    customTokens = tokenService.getTokens(address as Address);
   };
 
   async function updateBalance() {
@@ -235,26 +249,31 @@
       bind:menuOpen
       {onlyMintable}
       {tokens}
-      {customTokens}
+      bind:customTokens
       {value}
       {selectToken}
       {closeMenu}
       {activeTab}
-      on:tokenRemoved={handleTokenRemoved} />
+      on:tokenRemoved={handleTokenRemoved}
+      on:openCustomTokenModal={handleCustomTokenModal} />
   {:else}
     <DialogView
       {id}
       bind:menuOpen
       {onlyMintable}
       {tokens}
-      {customTokens}
+      bind:customTokens
       {value}
       {selectToken}
       {closeMenu}
-      {activeTab} />
+      {activeTab}
+      on:tokenRemoved={handleTokenRemoved}
+      on:openCustomTokenModal={handleCustomTokenModal} />
   {/if}
 </div>
 
 <div data-modal-uuid={id} />
 
 <OnAccount change={onAccountChange} />
+
+<AddCustomErc20 bind:modalOpen={customTokenModalOpen} bind:customTokens on:tokenRemoved />

packages/bridge-ui/src/i18n/en.json

@@ -416,7 +416,8 @@
       "title": "Add your own token"
     },
     "imported_tokens": "Your imported tokens:",
-    "label": "Select token"
+    "label": "Select token",
+    "no_imported_token": "No imported tokens yet"
   },
   "transactions": {
     "actions": {