feat(bridge-ui): update token dropdown (#16979)

taikoxyz · May 8, 2024 · f19cf66 · f19cf66
1 parent fe49ed8
commit f19cf66
Show file tree

Hide file tree

Showing 15 changed files with 388 additions and 158 deletions.
diff --git 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/...s/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte b/...s/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,24 +180,20 @@
         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>
         {:else if state === AddressInputState.INVALID && tokenAddress !== '' && isValidEthereumAddress && !loadingTokenDetails}
           <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 -->