From f19cf6686eaa327f56a645a2c3290baa2e513782 Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Wed, 8 May 2024 15:22:10 +0200
Subject: [PATCH 1/2] feat(bridge-ui): update token dropdown (#16979)

---
 .../src/components/Alert/FlatAlert.svelte     |   2 +-
 .../AddressInput/AddressInput.svelte          |   2 +-
 .../components/DialogTabs/DialogTab.svelte    |  40 ++++
 .../components/DialogTabs/DialogTabs.svelte   |  24 +++
 .../src/components/DialogTabs/index.ts        |   2 +
 .../bridge-ui/src/components/Icon/Icon.svelte |   2 +-
 .../src/components/InputBox/InputBox.svelte   |   2 +-
 .../TokenDropdown/AddCustomERC20.svelte       |  27 +--
 .../TokenDropdown/DialogView.svelte           | 172 ++++++++++-----
 .../TokenDropdown/DropdownView.svelte         | 199 ++++++++++++------
 .../TokenDropdown/TokenDropdown.svelte        |  43 +++-
 .../src/components/TokenDropdown/types.ts     |   9 +
 packages/bridge-ui/src/i18n/en.json           |   5 +-
 .../src/libs/fee/recommendProcessingFee.ts    |  12 --
 packages/bridge-ui/src/styles/components.css  |   5 +-
 15 files changed, 388 insertions(+), 158 deletions(-)
 create mode 100644 packages/bridge-ui/src/components/DialogTabs/DialogTab.svelte
 create mode 100644 packages/bridge-ui/src/components/DialogTabs/DialogTabs.svelte
 create mode 100644 packages/bridge-ui/src/components/DialogTabs/index.ts
 create mode 100644 packages/bridge-ui/src/components/TokenDropdown/types.ts

diff --git a/packages/bridge-ui/src/components/Alert/FlatAlert.svelte b/packages/bridge-ui/src/components/Alert/FlatAlert.svelte
index 6fc7fd4d029..a82472fe189 100644
--- a/packages/bridge-ui/src/components/Alert/FlatAlert.svelte
+++ b/packages/bridge-ui/src/components/Alert/FlatAlert.svelte
@@ -30,7 +30,7 @@
     info: {
       textClass: 'text-secondary-content',
       iconType: 'info-circle',
-      iconFillClass: 'fill-info-content',
+      iconFillClass: 'fill-secondary-content',
     },
   };
 
diff --git a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte b/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte
index 92fd502b3c7..f7a8d25ce4b 100644
--- a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte
+++ b/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte
@@ -99,7 +99,7 @@
 
   <!-- Conditional alerts -->
   {#if !quiet}
-    <div class="">
+    <div class="pt-[8px]">
       {#if state === State.INVALID && ethereumAddress}
         <FlatAlert type="error" forceColumnFlow message={$t('inputs.address_input.errors.invalid')} />
       {:else if state === State.TOO_SHORT && ethereumAddress}
diff --git a/packages/bridge-ui/src/components/DialogTabs/DialogTab.svelte b/packages/bridge-ui/src/components/DialogTabs/DialogTab.svelte
new file mode 100644
index 00000000000..9c1ab0557fe
--- /dev/null
+++ b/packages/bridge-ui/src/components/DialogTabs/DialogTab.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  import { classNames } from '$libs/util/classNames';
+
+  const dispatch = createEventDispatcher();
+
+  export let active: boolean;
+
+  function onClick() {
+    dispatch('click');
+  }
+</script>
+
+<button
+  role="tab"
+  aria-selected={active}
+  class:tab-active={active}
+  class={classNames('tab !border-color-red', active ? 'tab-active ' : '')}
+  on:click={onClick}>
+  <slot></slot>
+</button>
+
+<style>
+  .tab {
+    box-sizing: border-box !important;
+    padding-bottom: 6px;
+  }
+  .tab:not(.tab-active) {
+    border-color: var(--tertiary-content) !important;
+    border-bottom: 1px solid;
+    margin-bottom: 2px;
+    padding-top: 2px;
+  }
+  .tab-active {
+    border-bottom: 4px solid;
+    border-color: var(--primary-brand) !important;
+    padding-bottom: 4px;
+  }
+</style>
diff --git a/packages/bridge-ui/src/components/DialogTabs/DialogTabs.svelte b/packages/bridge-ui/src/components/DialogTabs/DialogTabs.svelte
new file mode 100644
index 00000000000..919434c01d3
--- /dev/null
+++ b/packages/bridge-ui/src/components/DialogTabs/DialogTabs.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  import DialogTab from './DialogTab.svelte';
+
+  export let tabs: { id: string; title: string }[];
+  export let activeTab: string;
+  const dispatch = createEventDispatcher();
+
+  function setActiveTab(tabId: string) {
+    if (activeTab !== tabId) {
+      activeTab = tabId;
+      dispatch('change', { tabId });
+    }
+  }
+</script>
+
+<div role="tablist" class="tabs">
+  {#each tabs as tab}
+    <DialogTab active={tab.id === activeTab} on:click={() => setActiveTab(tab.id)}>
+      {tab.title}
+    </DialogTab>
+  {/each}
+</div>
diff --git a/packages/bridge-ui/src/components/DialogTabs/index.ts b/packages/bridge-ui/src/components/DialogTabs/index.ts
new file mode 100644
index 00000000000..1db8f2a45c8
--- /dev/null
+++ b/packages/bridge-ui/src/components/DialogTabs/index.ts
@@ -0,0 +1,2 @@
+export { default as DialogTab } from './DialogTab.svelte';
+export { default as DialogTabs } from './DialogTabs.svelte';
diff --git a/packages/bridge-ui/src/components/Icon/Icon.svelte b/packages/bridge-ui/src/components/Icon/Icon.svelte
index 95e37b2de99..87b3de139e2 100644
--- a/packages/bridge-ui/src/components/Icon/Icon.svelte
+++ b/packages/bridge-ui/src/components/Icon/Icon.svelte
@@ -202,7 +202,7 @@
       class={fillClass}
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M20,6H16V5a3,3,0,0,0-3-3H11A3,3,0,0,0,8,5V6H4A1,1,0,0,0,4,8H5V19a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V8h1a1,1,0,0,0,0-2ZM10,5a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1V6H10Zm7,14a1,1,0,0,1-1,1H8a1,1,0,0,1-1-1V8H17Z" />
+      d="M6.12461 0.699951C5.06146 0.699951 4.19961 1.5618 4.19961 2.62495V2.93484C3.64291 2.98875 3.09083 3.05858 2.54381 3.14386C2.25733 3.18852 2.06129 3.45697 2.10595 3.74346C2.15061 4.02995 2.41907 4.22599 2.70556 4.18132L2.80909 4.16538L3.39814 11.5285C3.47817 12.5289 4.31339 13.2999 5.31701 13.2999H8.68206C9.68568 13.2999 10.5209 12.5289 10.6009 11.5285L11.19 4.16534L11.2938 4.18132C11.5803 4.22599 11.8488 4.02995 11.8934 3.74346C11.9381 3.45697 11.742 3.18852 11.4556 3.14386C10.9085 3.05857 10.3564 2.98874 9.79961 2.93482V2.62495C9.79961 1.5618 8.93776 0.699951 7.87461 0.699951H6.12461ZM6.99968 2.79995C7.58723 2.79995 8.17071 2.81761 8.74961 2.85244V2.62495C8.74961 2.1417 8.35786 1.74995 7.87461 1.74995H6.12461C5.64136 1.74995 5.24961 2.1417 5.24961 2.62495V2.85245C5.82856 2.81762 6.41208 2.79995 6.99968 2.79995ZM5.94903 5.40625C5.93868 5.14758 5.72059 4.94626 5.46192 4.95661C5.20324 4.96696 5.00193 5.18505 5.01228 5.44372L5.22229 10.6937C5.23263 10.9524 5.45072 11.1537 5.7094 11.1434C5.96807 11.133 6.16938 10.9149 6.15904 10.6563L5.94903 5.40625ZM8.98704 5.44372C8.99738 5.18505 8.79607 4.96696 8.5374 4.95661C8.27872 4.94627 8.06063 5.14758 8.05029 5.40625L7.84029 10.6563C7.82994 10.9149 8.03125 11.133 8.28993 11.1434C8.5486 11.1537 8.76669 10.9524 8.77704 10.6937L8.98704 5.44372Z" />
   {:else if type === 'adjustments'}
     <path
       class={fillClass}
diff --git a/packages/bridge-ui/src/components/InputBox/InputBox.svelte b/packages/bridge-ui/src/components/InputBox/InputBox.svelte
index 094a6fcea87..e06f42fe46c 100644
--- a/packages/bridge-ui/src/components/InputBox/InputBox.svelte
+++ b/packages/bridge-ui/src/components/InputBox/InputBox.svelte
@@ -9,7 +9,7 @@
   $: disabled = $$props.disabled || false;
 
   let classes = classNames(
-    'w-full input-box bg-neutral-background shadow-none placeholder:text-tertiary-content font-bold shadow-none outline-none ',
+    'w-full input-box bg-neutral-background placeholder:text-tertiary-content font-bold',
     disabled ? 'cursor-not-allowed ' : 'cursor-pointer',
     $$props.class,
   );
diff --git a/packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte b/packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte
index e615001f5db..d9f59bbfbe1 100644
--- a/packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte
+++ b/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) => {
@@ -186,7 +180,7 @@
         on:addressvalidation={onAddressValidation}
         bind:state
         onDialog />
-      <div class="w-full flex items-center justify-between mt-4">
+      <div class="w-full flex items-center justify-between">
         {#if customTokenWithDetails}
           <span>{$t('common.name')}: {customTokenWithDetails.symbol}</span>
           <span>{$t('common.balance')}: {formattedBalance}</span>
@@ -194,16 +188,12 @@
           <FlatAlert type="error" message={$t('bridge.errors.custom_token.not_found.message')} />
         {:else if loadingTokenDetails}
           <Spinner />
-        {:else}
-          <div class="min-h-[25px]" />
+        {:else if state === AddressInputState.DEFAULT}
+          <FlatAlert type="info" message={$t('token_dropdown.custom_token.default_message')} />
         {/if}
       </div>
     </div>
-
-    <ActionButton priority="primary" {disabled} on:click={addCustomErc20Token} onPopup>
-      {$t('token_dropdown.custom_token.button')}
-    </ActionButton>
-
+    <div class="h-sep" />
     {#if customTokens.length > 0}
       <div class="flex h-full w-full flex-col justify-between mt-6">
         <h3 class="title-body-bold mb-7">{$t('token_dropdown.imported_tokens')}</h3>
@@ -217,10 +207,15 @@
               <Icon type="trash" fillClass="fill-primary-icon" size={24} />
             </button>
           </div>
-          <div class="h-sep" />
         {/each}
       </div>
+    {:else}
+      <span>{$t('token_dropdown.no_imported_token')}</span>
     {/if}
+    <div class="h-sep" />
+    <ActionButton priority="primary" {disabled} on:click={addCustomErc20Token} onPopup>
+      {$t('token_dropdown.custom_token.button')}
+    </ActionButton>
   </div>
   <!-- We catch key events above -->
   <!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/packages/bridge-ui/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui/src/components/TokenDropdown/DialogView.svelte
index cf199d2b111..cb355971ce1 100644
--- a/packages/bridge-ui/src/components/TokenDropdown/DialogView.svelte
+++ b/packages/bridge-ui/src/components/TokenDropdown/DialogView.svelte
@@ -1,34 +1,49 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
+  import { deepEqual } from '@wagmi/core';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
   import { CloseButton } from '$components/Button';
+  import { DialogTabs } from '$components/DialogTabs';
   import { Icon } from '$components/Icon';
   import Erc20 from '$components/Icon/ERC20.svelte';
+  import { InputBox } from '$components/InputBox';
   import { OnAccount } from '$components/OnAccount';
   import { closeOnEscapeOrOutsideClick } from '$libs/customActions';
   import { tokenService } from '$libs/storage/services';
   import type { Token } from '$libs/token';
   import { noop } from '$libs/util/noop';
+  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';
 
   export let id: string;
   export let tokens: Token[] = [];
   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;
+  };
+
+  const handleTabChange = (event: CustomEvent) => {
+    activeTab = event.detail.tabId;
+  };
+
   const showAddERC20 = () => {
     menuOpen = false;
-    modalOpen = true;
+    dispatch('openCustomTokenModal');
   };
 
   const handleStorageChange = (newTokens: Token[]) => {
@@ -41,6 +56,10 @@
     }
   };
 
+  const removeToken = async (token: Token) => {
+    dispatch('tokenRemoved', { token });
+  };
+
   const getTokenKeydownHandler = (token: Token) => {
     return (event: KeyboardEvent) => {
       if (event.key === 'Enter') {
@@ -52,6 +71,22 @@
     };
   };
 
+  $: filteredCustomTokens = [] as Token[];
+  $: filteredTokens = [] as Token[];
+  $: enteredTokenName = '';
+
+  $: if (enteredTokenName !== '') {
+    filteredTokens = tokens.filter((token) => {
+      return token.name.includes(enteredTokenName) || token.symbol.includes(enteredTokenName);
+    });
+    filteredCustomTokens = customTokens.filter((token) => {
+      return token.name.includes(enteredTokenName) || token.symbol.includes(enteredTokenName);
+    });
+  } else {
+    filteredTokens = tokens;
+    filteredCustomTokens = customTokens;
+  }
+
   onMount(() => tokenService.subscribeToChanges(handleStorageChange));
 
   onDestroy(() => tokenService.unsubscribeFromChanges(handleStorageChange));
@@ -69,64 +104,92 @@
     <div class="w-full">
       <h3 class="title-body-bold mb-7">{$t('token_dropdown.label')}</h3>
 
+      <DialogTabs tabs={TokenTabs} bind:activeTab on:change={handleTabChange} />
+
+      <InputBox
+        {id}
+        type="text"
+        placeholder={$t('common.search_token')}
+        bind:value={enteredTokenName}
+        on:input={searchToken}
+        class="p-[12px] my-[20px]" />
       <ul role="listbox" class="menu p-0">
-        {#each tokens as token (token.symbol)}
-          {@const selected = token === value}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <li
-            role="option"
-            tabindex="0"
-            aria-selected={selected}
-            class="rounded-[10px]"
-            class:bg-tertiary-interactive-accent={selected}
-            on:click={() => selectToken(token)}>
-            <div class="p-4">
-              {#if symbolToIconMap[token.symbol] && !token.imported}
-                <i role="img" aria-label={token.name}>
-                  <svelte:component this={symbolToIconMap[token.symbol]} size={28} />
-                </i>
-              {:else}
-                <i role="img" aria-label={token.symbol}>
-                  <svelte:component this={Erc20} size={28} />
-                </i>
-              {/if}
-              <span class="body-bold">{token.symbol}</span>
-            </div>
-          </li>
-        {/each}
-        {#if !onlyMintable}
-          {#each customTokens as token, index (index)}
+        {#if activeTab === TabTypes.TOKEN}
+          {#each filteredTokens as token (token.symbol)}
+            {@const selected = deepEqual(token, value)}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <li
               role="option"
               tabindex="0"
-              aria-selected={token === value}
-              on:click={() => selectToken(token)}
-              on:keydown={getTokenKeydownHandler(token)}>
+              aria-selected={selected}
+              class="rounded-[10px]"
+              class:bg-tertiary-interactive-accent={selected}
+              on:click={() => selectToken(token)}>
               <div class="p-4">
-                <i role="img" aria-label={token.name}>
-                  <Erc20 />
-                </i>
+                {#if symbolToIconMap[token.symbol] && !token.imported}
+                  <i role="img" aria-label={token.name}>
+                    <svelte:component this={symbolToIconMap[token.symbol]} size={28} />
+                  </i>
+                {:else}
+                  <i role="img" aria-label={token.symbol}>
+                    <svelte:component this={Erc20} size={28} />
+                  </i>
+                {/if}
                 <span class="body-bold">{token.symbol}</span>
               </div>
             </li>
           {/each}
-
-          <div class="h-sep" />
-          <li>
-            <button on:click={showAddERC20} class="flex hover:bg-dark-5 justify-center items-center p-4 rounded-sm">
-              <Icon type="plus-circle" fillClass="fill-primary-icon" />
-              <span
-                class="
-            body-bold
-            bg-transparent
-            flex-1
-            w-[100px]
-            px-0
-            pl-2">
-                {$t('token_dropdown.add_custom')}
-              </span>
-            </button>
-          </li>
+        {:else if activeTab === TabTypes.CUSTOM}
+          {#if !onlyMintable}
+            {#each filteredCustomTokens as ct, index (index)}
+              {@const selected = deepEqual(ct, value)}
+              <li
+                role="option"
+                tabindex="0"
+                aria-selected={selected}
+                class="rounded-[10px]"
+                class:bg-tertiary-interactive-accent={selected}
+                on:click={() => selectToken(ct)}
+                on:keydown={getTokenKeydownHandler(ct)}>
+                <div class="p-4 flex">
+                  <i
+                    role="option"
+                    tabindex="0"
+                    aria-selected={ct === value}
+                    on:click={() => selectToken(ct)}
+                    on:keydown={getTokenKeydownHandler(ct)}
+                    aria-label={ct.name}>
+                    <Erc20 />
+                  </i>
+                  <span
+                    role="option"
+                    aria-selected={ct === value}
+                    tabindex="-1"
+                    on:click={() => selectToken(ct)}
+                    on:keydown={getTokenKeydownHandler(ct)}
+                    class="grow body-bold">{truncateString(ct.symbol, 10)}</span>
+                  <div
+                    role="button"
+                    tabindex="-1"
+                    on:click={() => removeToken(ct)}
+                    on:keydown={getTokenKeydownHandler(ct)}
+                    class="cursor-pointer">
+                    <Icon type="trash" size={25} fillClass="fill-primary-icon" />
+                  </div>
+                </div>
+              </li>
+            {/each}
+            <li class="f-between-center max-h-[42px]">
+              <button
+                on:click={showAddERC20}
+                class="flex w-full hover:bg-dark-5 justify-center items-center rounded-sm">
+                <Icon type="plus-circle" fillClass="fill-primary-icon" />
+                <span class=" body-bold bg-transparent flex-1 w-[100px] px-0 pl-2">
+                  {$t('token_dropdown.add_custom')}
+                </span>
+              </button>
+            </li>
+          {/if}
         {/if}
       </ul>
     </div>
@@ -134,7 +197,4 @@
   <button class="overlay-backdrop" data-modal-uuid={id} />
 </dialog>
 
-<AddCustomErc20 bind:modalOpen on:tokenRemoved />
-
-<!-- <OnNetwork change={onNetworkChange} /> -->
 <OnAccount change={onAccountChange} />
diff --git a/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte b/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte
index 46d20e118f2..b12c2ad6b6e 100644
--- a/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte
+++ b/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
+  import { deepEqual } from '@wagmi/core';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
+  import { DialogTabs } from '$components/DialogTabs';
   import { Icon } from '$components/Icon';
   import Erc20 from '$components/Icon/ERC20.svelte';
+  import InputBox from '$components/InputBox/InputBox.svelte';
   import { OnAccount } from '$components/OnAccount';
   import { closeOnEscapeOrOutsideClick } from '$libs/customActions';
   import { tokenService } from '$libs/storage/services';
@@ -16,23 +19,29 @@
 
   import AddCustomErc20 from './AddCustomERC20.svelte';
   import { symbolToIconMap } from './symbolToIconMap';
+  import { TabTypes, TokenTabs } from './types';
 
   export let id: string;
   export let menuOpen = false;
-  export let closeMenu: () => void = noop;
-
+  export let closeMenu: () => void = () => {
+    noop();
+  };
   export let tokens: Token[] = [];
   export let customTokens: Token[] = [];
   export let value: Maybe<Token> = null;
   export let selectToken: (token: Token) => void = noop;
   export let onlyMintable: boolean = false;
 
-  let addArc20ModalOpen = false;
+  export let activeTab: TabTypes = TabTypes.TOKEN;
 
-  $: menuClasses = classNames(
-    'menu absolute right-0 w-[265px] p-3 mt-2 rounded-[10px] bg-neutral-background z-10  box-shadow-small',
-    menuOpen ? 'visible opacity-100' : 'invisible opacity-0',
-  );
+  const dispatch = createEventDispatcher();
+
+  const handleCloseMenu = () => {
+    enteredTokenName = '';
+    closeMenu();
+  };
+
+  let addArc20ModalOpen = false;
 
   const getTokenKeydownHandler = (token: Token) => {
     return (event: KeyboardEvent) => {
@@ -42,7 +51,7 @@
     };
   };
 
-  const showAddERC20 = () => (addArc20ModalOpen = true);
+  const showAddERC20 = () => dispatch('openCustomTokenModal');
 
   const handleStorageChange = (newTokens: Token[]) => {
     customTokens = newTokens;
@@ -54,6 +63,39 @@
     }
   };
 
+  const handleTabChange = (event: CustomEvent) => {
+    activeTab = event.detail.tabId;
+  };
+
+  const searchToken = (event: Event) => {
+    enteredTokenName = (event.target as HTMLInputElement).value;
+  };
+
+  const removeToken = async (token: Token) => {
+    dispatch('tokenRemoved', { token });
+  };
+
+  $: filteredCustomTokens = [] as Token[];
+  $: filteredTokens = [] as Token[];
+  $: enteredTokenName = '';
+
+  $: if (enteredTokenName !== '') {
+    filteredTokens = tokens.filter((token) => {
+      return token.name.includes(enteredTokenName) || token.symbol.includes(enteredTokenName);
+    });
+    filteredCustomTokens = customTokens.filter((token) => {
+      return token.name.includes(enteredTokenName) || token.symbol.includes(enteredTokenName);
+    });
+  } else {
+    filteredTokens = tokens;
+    filteredCustomTokens = customTokens;
+  }
+
+  $: menuClasses = classNames(
+    'menu absolute right-0 w-[244px] p-3 mt-2 rounded-[10px] bg-neutral-background z-10  box-shadow-small',
+    menuOpen ? 'visible opacity-100' : 'invisible opacity-0',
+  );
+
   onMount(() => {
     tokenService.subscribeToChanges(handleStorageChange);
   });
@@ -64,66 +106,97 @@
 </script>
 
 <!-- Desktop (or larger) view -->
-<ul
-  role="listbox"
+<div
   {id}
   class={menuClasses}
-  use:closeOnEscapeOrOutsideClick={{ enabled: menuOpen, callback: closeMenu, uuid: id }}>
-  {#each tokens as t (t.symbol)}
-    <li
-      role="option"
-      tabindex="0"
-      aria-selected={t === value}
-      on:click={() => selectToken(t)}
-      on:keydown={getTokenKeydownHandler(t)}>
-      <div class="p-4">
-        <!-- Only match icons to configurd tokens -->
-        {#if symbolToIconMap[t.symbol] && !t.imported}
-          <i role="img" aria-label={t.name}>
-            <svelte:component this={symbolToIconMap[t.symbol]} size={28} />
-          </i>
-        {:else}
-          <i role="img" aria-label={t.symbol}>
-            <svelte:component this={Erc20} size={28} />
-          </i>
-        {/if}
-        <span class="body-bold">{t.symbol}</span>
-      </div>
-    </li>
-  {/each}
-  {#if !onlyMintable}
-    {#each customTokens as ct, index (index)}
-      <li
-        role="option"
-        tabindex="0"
-        aria-selected={ct === value}
-        on:click={() => selectToken(ct)}
-        on:keydown={getTokenKeydownHandler(ct)}>
-        <div class="p-4">
-          <i role="img" aria-label={ct.name}>
-            <Erc20 />
-          </i>
-          <span class="body-bold">{truncateString(ct.symbol, 10)}</span>
-        </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]">
-        <Icon type="plus-circle" fillClass="fill-primary-icon" size={32} vWidth={28} vHeight={28} />
-        <span
-          class="
+  use:closeOnEscapeOrOutsideClick={{ enabled: menuOpen, callback: handleCloseMenu, uuid: id }}>
+  <DialogTabs tabs={TokenTabs} bind:activeTab on:change={handleTabChange} />
+
+  <InputBox
+    {id}
+    type="text"
+    placeholder={$t('common.search_token')}
+    bind:value={enteredTokenName}
+    on:input={searchToken}
+    class="p-[12px] my-[20px]" />
+  <ul role="listbox" {id} class="gap-2">
+    {#if activeTab === TabTypes.TOKEN}
+      {#each filteredTokens as t (t.symbol)}
+        {@const selected = deepEqual(t, value)}
+        <li
+          role="option"
+          tabindex="0"
+          aria-selected={selected}
+          class="rounded-[10px] my-[8px]"
+          class:bg-tertiary-interactive-accent={selected}
+          on:click={() => selectToken(t)}
+          on:keydown={getTokenKeydownHandler(t)}>
+          <div class="p-4">
+            <!-- Only match icons to configurd tokens -->
+            {#if symbolToIconMap[t.symbol] && !t.imported}
+              <i role="img" aria-label={t.name}>
+                <svelte:component this={symbolToIconMap[t.symbol]} size={28} />
+              </i>
+            {:else}
+              <i role="img" aria-label={t.symbol}>
+                <svelte:component this={Erc20} size={28} />
+              </i>
+            {/if}
+            <span class="body-bold">{t.symbol}</span>
+          </div>
+        </li>
+      {/each}
+    {:else if activeTab === TabTypes.CUSTOM}
+      {#if !onlyMintable}
+        {#each filteredCustomTokens as ct, index (index)}
+          <li>
+            <div class="p-4 flex">
+              <i
+                role="option"
+                tabindex="0"
+                aria-selected={ct === value}
+                on:click={() => selectToken(ct)}
+                on:keydown={getTokenKeydownHandler(ct)}
+                aria-label={ct.name}>
+                <Erc20 />
+              </i>
+              <span
+                role="option"
+                aria-selected={ct === value}
+                tabindex="-1"
+                on:click={() => selectToken(ct)}
+                on:keydown={getTokenKeydownHandler(ct)}
+                class="grow body-bold">{truncateString(ct.symbol, 10)}</span>
+              <div
+                role="button"
+                tabindex="-1"
+                on:click={() => removeToken(ct)}
+                on:keydown={getTokenKeydownHandler(ct)}
+                class="cursor-pointer">
+                <Icon type="trash" size={25} fillClass="fill-primary-icon" />
+              </div>
+            </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]">
+            <Icon type="plus-circle" fillClass="fill-primary-icon" size={32} vWidth={28} vHeight={28} />
+            <span
+              class="
             body-bold
             bg-transparent
             flex-1
             px-0">
-          {$t('token_dropdown.add_custom')}
-        </span>
-      </button>
-    </li>
-  {/if}
-</ul>
-
+              {$t('token_dropdown.add_custom')}
+            </span>
+          </button>
+        </li>
+      {/if}
+    {/if}
+  </ul>
+</div>
 <AddCustomErc20 bind:modalOpen={addArc20ModalOpen} on:tokenRemoved />
 
 <OnAccount change={onAccountChange} />
diff --git a/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
index 07ddc5a7869..5b40f1e2b81 100644
--- a/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
+++ b/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { deepEqual } from '@wagmi/core';
   import { onDestroy, onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
@@ -26,9 +27,11 @@
   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';
+  import { TabTypes } from './types';
 
   const log = getLogger('TokenDropdown');
 
@@ -38,10 +41,15 @@
   export let disabled = false;
   export let combined = false;
 
+  let customTokenModalOpen = false;
+
   let id = `menu-${uid()}`;
   $: menuOpen = false;
 
-  const customTokens = tokenService.getTokens($account?.address as Address);
+  let activeTab: TabTypes = TabTypes.TOKEN;
+
+  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
@@ -115,11 +123,21 @@
     $computingBalance = false;
   };
 
+  const handleCustomTokenModal = () => {
+    closeMenu();
+    customTokenModalOpen = true;
+  };
+
   const handleTokenRemoved = (event: { detail: { token: Token } }) => {
+    const token = event.detail.token;
+
     // if the selected token is the one that was removed by the user, remove it
-    if (event.detail.token === value) {
+    if (deepEqual(token, value)) {
       value = ETHToken;
     }
+    const address = $account.address;
+    tokenService.removeToken(token, address as Address);
+    customTokens = tokenService.getTokens(address as Address);
   };
 
   async function updateBalance() {
@@ -231,16 +249,31 @@
       bind:menuOpen
       {onlyMintable}
       {tokens}
-      {customTokens}
+      bind:customTokens
       {value}
       {selectToken}
       {closeMenu}
-      on:tokenRemoved={handleTokenRemoved} />
+      {activeTab}
+      on:tokenRemoved={handleTokenRemoved}
+      on:openCustomTokenModal={handleCustomTokenModal} />
   {:else}
-    <DialogView {id} bind:menuOpen {onlyMintable} {tokens} {customTokens} {value} {selectToken} {closeMenu} />
+    <DialogView
+      {id}
+      bind:menuOpen
+      {onlyMintable}
+      {tokens}
+      bind:customTokens
+      {value}
+      {selectToken}
+      {closeMenu}
+      {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 />
diff --git a/packages/bridge-ui/src/components/TokenDropdown/types.ts b/packages/bridge-ui/src/components/TokenDropdown/types.ts
new file mode 100644
index 00000000000..e7be0b3c2da
--- /dev/null
+++ b/packages/bridge-ui/src/components/TokenDropdown/types.ts
@@ -0,0 +1,9 @@
+export enum TabTypes {
+  TOKEN = 'token',
+  CUSTOM = 'custom',
+}
+
+export const TokenTabs = [
+  { id: TabTypes.TOKEN, title: 'Token' },
+  { id: TabTypes.CUSTOM, title: 'Custom' },
+];
diff --git a/packages/bridge-ui/src/i18n/en.json b/packages/bridge-ui/src/i18n/en.json
index eea6937a316..7b76320727f 100644
--- a/packages/bridge-ui/src/i18n/en.json
+++ b/packages/bridge-ui/src/i18n/en.json
@@ -240,6 +240,7 @@
     "ok": "Okay",
     "recipient": "Recipient",
     "review": "Review",
+    "search_token": "Search token",
     "see_results": "See results",
     "sender": "Sender",
     "status": "Status",
@@ -412,11 +413,13 @@
     "add_custom": "Add Custom",
     "custom_token": {
       "button": "Add token",
+      "default_message": "Only ERC20 token accepted",
       "description": "You can add your own token by entering the contract address below. Make sure you are on the chain where the token is deployed.",
       "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": {
diff --git a/packages/bridge-ui/src/libs/fee/recommendProcessingFee.ts b/packages/bridge-ui/src/libs/fee/recommendProcessingFee.ts
index ed40a6b3078..909fcdb40d4 100644
--- a/packages/bridge-ui/src/libs/fee/recommendProcessingFee.ts
+++ b/packages/bridge-ui/src/libs/fee/recommendProcessingFee.ts
@@ -29,14 +29,12 @@ export async function recommendProcessingFee({
   let estimatedMsgGaslimit;
 
   const baseFee = await getBaseFee(BigInt(destChainId));
-  log(`Base fee: ${baseFee}`);
 
   const destPublicClient = getPublicClient(config, { chainId: destChainId });
 
   if (!destPublicClient) throw new Error('Could not get public client');
 
   const maxPriorityFee = await destPublicClient.estimateMaxPriorityFeePerGas();
-  log(`Max priority fee: ${maxPriorityFee}`);
 
   if (!baseFee) throw new Error('Unable to get base fee');
 
@@ -57,15 +55,9 @@ export async function recommendProcessingFee({
         log(`token ${token.symbol} is already deployed on chain ${destChainId}`);
 
         estimatedMsgGaslimit = BigInt(gasLimitConfig.GAS_RESERVE) + gasLimitConfig.erc20DeployedGasLimit;
-        log(
-          `calculation ${gasLimitConfig.GAS_RESERVE} + ${gasLimitConfig.erc20DeployedGasLimit} = ${estimatedMsgGaslimit}`,
-        );
       } else {
         log(`token ${token.symbol} is not deployed on chain ${destChainId}`);
         estimatedMsgGaslimit = BigInt(gasLimitConfig.GAS_RESERVE) + gasLimitConfig.erc20NotDeployedGasLimit;
-        log(
-          `calculation ${gasLimitConfig.GAS_RESERVE} + ${gasLimitConfig.erc20NotDeployedGasLimit} = ${estimatedMsgGaslimit}`,
-        );
       }
     } else if (token.type === TokenType.ERC721) {
       if (isTokenAlreadyDeployed) {
@@ -87,14 +79,10 @@ export async function recommendProcessingFee({
   } else {
     log(`Fee for ETH bridging`);
     estimatedMsgGaslimit = BigInt(gasLimitConfig.GAS_RESERVE);
-    log(`calculation ${gasLimitConfig.GAS_RESERVE}  = ${estimatedMsgGaslimit}`);
   }
   if (!estimatedMsgGaslimit) throw new Error('Unable to calculate fee');
 
   const fee = estimatedMsgGaslimit * (BigInt(PUBLIC_FEE_MULTIPLIER) * (baseFee + maxPriorityFee));
-  log(`Formula: ${estimatedMsgGaslimit} * ${PUBLIC_FEE_MULTIPLIER} * (${baseFee} + ${maxPriorityFee})) = ${fee}`);
-
-  log(`Recommended fee: ${fee.toString()}`);
   return roundWeiTo6DecimalPlaces(fee);
 }
 
diff --git a/packages/bridge-ui/src/styles/components.css b/packages/bridge-ui/src/styles/components.css
index 35115edbc32..36dfaa6d696 100644
--- a/packages/bridge-ui/src/styles/components.css
+++ b/packages/bridge-ui/src/styles/components.css
@@ -189,7 +189,10 @@
   }
 
   input {
-    border: 1px solid var(--primary-border);
+    border: 1px solid var(--primary-border-dark);
+    &:hover {
+      border: 1px solid transparent;
+    }
   }
 
   h1 {

From e47ff54b87a9200fbe3684af4333febc5aa2d6e2 Mon Sep 17 00:00:00 2001
From: d1onys1us <13951458+d1onys1us@users.noreply.github.com>
Date: Wed, 8 May 2024 10:07:02 -0400
Subject: [PATCH 2/2] chore(repo): revert quic-go deps bump (#17041)

---
 go.mod |  5 +++--
 go.sum | 10 ++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/go.mod b/go.mod
index 61d6cb40de7..88cde8d900c 100644
--- a/go.mod
+++ b/go.mod
@@ -229,7 +229,8 @@ require (
 	github.com/prysmaticlabs/gohashtree v0.0.3-alpha // indirect
 	github.com/prysmaticlabs/prombbolt v0.0.0-20210126082820-9b7adba6db7c // indirect
 	github.com/quic-go/qpack v0.4.0 // indirect
-	github.com/quic-go/quic-go v0.42.0 // indirect
+	github.com/quic-go/qtls-go1-20 v0.3.4 // indirect
+	github.com/quic-go/quic-go v0.39.4 // indirect
 	github.com/quic-go/webtransport-go v0.6.0 // indirect
 	github.com/raulk/go-watchdog v1.3.0 // indirect
 	github.com/rivo/uniseg v0.4.4 // indirect
@@ -269,7 +270,7 @@ require (
 	go.opentelemetry.io/otel/trace v1.24.0 // indirect
 	go.uber.org/dig v1.17.1 // indirect
 	go.uber.org/fx v1.20.1 // indirect
-	go.uber.org/mock v0.4.0 // indirect
+	go.uber.org/mock v0.3.0 // indirect
 	go.uber.org/multierr v1.11.0 // indirect
 	go.uber.org/zap v1.26.0 // indirect
 	golang.org/x/crypto v0.22.0 // indirect
diff --git a/go.sum b/go.sum
index 591d7adf2e8..ca234aa4bcb 100644
--- a/go.sum
+++ b/go.sum
@@ -992,8 +992,10 @@ github.com/prysmaticlabs/prysm/v4 v4.2.0 h1:87QoRT3Azs7c1Y6SnIq0+CNtQRbAt0sVKGj2
 github.com/prysmaticlabs/prysm/v4 v4.2.0/go.mod h1:PQrQtHJeeqTz4K3udN/EX1Gs2xhWR4j93gSj0OQZ1f4=
 github.com/quic-go/qpack v0.4.0 h1:Cr9BXA1sQS2SmDUWjSofMPNKmvF6IiIfDRmgU0w1ZCo=
 github.com/quic-go/qpack v0.4.0/go.mod h1:UZVnYIfi5GRk+zI9UMaCPsmZ2xKJP7XBUvVyT1Knj9A=
-github.com/quic-go/quic-go v0.42.0 h1:uSfdap0eveIl8KXnipv9K7nlwZ5IqLlYOpJ58u5utpM=
-github.com/quic-go/quic-go v0.42.0/go.mod h1:132kz4kL3F9vxhW3CtQJLDVwcFe5wdWeJXXijhsO57M=
+github.com/quic-go/qtls-go1-20 v0.3.4 h1:MfFAPULvst4yoMgY9QmtpYmfij/em7O8UUi+bNVm7Cg=
+github.com/quic-go/qtls-go1-20 v0.3.4/go.mod h1:X9Nh97ZL80Z+bX/gUXMbipO6OxdiDi58b/fMC9mAL+k=
+github.com/quic-go/quic-go v0.39.4 h1:PelfiuG7wXEffUT2yceiqz5V6Pc0TA5ruOd1LcmFc1s=
+github.com/quic-go/quic-go v0.39.4/go.mod h1:T09QsDQWjLiQ74ZmacDfqZmhY/NLnw5BC40MANNNZ1Q=
 github.com/quic-go/webtransport-go v0.6.0 h1:CvNsKqc4W2HljHJnoT+rMmbRJybShZ0YPFDD3NxaZLY=
 github.com/quic-go/webtransport-go v0.6.0/go.mod h1:9KjU4AEBqEQidGHNDkZrb8CAa1abRaosM2yGOyiikEc=
 github.com/rabbitmq/amqp091-go v1.9.0 h1:qrQtyzB4H8BQgEuJwhmVQqVHB9O4+MNDJCCAcpc3Aoo=
@@ -1225,8 +1227,8 @@ go.uber.org/fx v1.20.1/go.mod h1:iSYNbHf2y55acNCwCXKx7LbWb5WG1Bnue5RDXz1OREg=
 go.uber.org/goleak v1.1.11-0.20210813005559-691160354723/go.mod h1:cwTWslyiVhfpKIDGSZEM2HlOvcqm+tG4zioyIeLoqMQ=
 go.uber.org/goleak v1.2.1 h1:NBol2c7O1ZokfZ0LEU9K6Whx/KnwvepVetCUhtKja4A=
 go.uber.org/goleak v1.2.1/go.mod h1:qlT2yGI9QafXHhZZLxlSuNsMw3FFLxBr+tBRlmO1xH4=
-go.uber.org/mock v0.4.0 h1:VcM4ZOtdbR4f6VXfiOpwpVJDL6lCReaZ6mw31wqh7KU=
-go.uber.org/mock v0.4.0/go.mod h1:a6FSlNadKUHUa9IP5Vyt1zh4fC7uAwxMutEAscFbkZc=
+go.uber.org/mock v0.3.0 h1:3mUxI1No2/60yUYax92Pt8eNOEecx2D3lcXZh2NEZJo=
+go.uber.org/mock v0.3.0/go.mod h1:a6FSlNadKUHUa9IP5Vyt1zh4fC7uAwxMutEAscFbkZc=
 go.uber.org/multierr v1.1.0/go.mod h1:wR5kodmAFQ0UK8QlbwjlSNy0Z68gJhDJUG5sjR94q/0=
 go.uber.org/multierr v1.3.0/go.mod h1:VgVr7evmIr6uPjLBxg28wmKNXyqE9akIJ5XnfpiKl+4=
 go.uber.org/multierr v1.6.0/go.mod h1:cdWPpRnG4AhwMwsgIHip0KRBQjJy5kYEpYjJxpXp9iU=