diff --git a/packages/bridge-ui/src/components/Alert/FlatAlert.svelte b/packages/bridge-ui/src/components/Alert/FlatAlert.svelte index 6fc7fd4d02..a82472fe18 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/Icon/Icon.svelte b/packages/bridge-ui/src/components/Icon/Icon.svelte index 95e37b2de9..87b3de139e 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'} -
+
{#if customTokenWithDetails} {$t('common.name')}: {customTokenWithDetails.symbol} {$t('common.balance')}: {formattedBalance} @@ -195,15 +195,11 @@ {:else if loadingTokenDetails} {:else} -
+ {/if}
- - - {$t('token_dropdown.custom_token.button')} - - +
{#if customTokens.length > 0}

{$t('token_dropdown.imported_tokens')}

@@ -217,10 +213,13 @@
-
{/each}
{/if} +
+ + {$t('token_dropdown.custom_token.button')} +
diff --git a/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte b/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte index 46d20e118f..a882ea088a 100644 --- a/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte +++ b/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte @@ -5,6 +5,7 @@ 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'; @@ -19,21 +20,25 @@ 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 = null; export let selectToken: (token: Token) => void = noop; export let onlyMintable: boolean = false; + const handleCloseMenu = () => { + enteredTokenName = ''; + closeMenu(); + }; + enum TokenTabs { + TOKEN, + CUSTOM, + } let addArc20ModalOpen = false; - $: 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 getTokenKeydownHandler = (token: Token) => { return (event: KeyboardEvent) => { if (event.key === 'Enter') { @@ -54,6 +59,42 @@ } }; + let activeTab = TokenTabs.TOKEN; + function setActiveTab(tab: TokenTabs) { + activeTab = tab; + } + + const searchToken = (event: Event) => { + enteredTokenName = (event.target as HTMLInputElement).value; + }; + + const removeToken = async (token: Token) => { + const address = $account.address; + tokenService.removeToken(token, address as Address); + customTokens = tokenService.getTokens(address as Address); + }; + + $: 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); }); @@ -61,69 +102,132 @@ onDestroy(() => { tokenService.unsubscribeFromChanges(handleStorageChange); }); + $: 'tab-active !border-primary-brand !border-b-4'; -
    - {#each tokens as t (t.symbol)} -
  • selectToken(t)} - on:keydown={getTokenKeydownHandler(t)}> -
    - - {#if symbolToIconMap[t.symbol] && !t.imported} - - - - {:else} - - - - {/if} - {t.symbol} -
    -
    • - {/each} - {#if !onlyMintable} - {#each customTokens as ct, index (index)} -
  • selectToken(ct)} - on:keydown={getTokenKeydownHandler(ct)}> -
    - - - - {truncateString(ct.symbol, 10)} -
    -
    • - {/each} -
    -
  • - + +
    +
    +
    + +
      + {#if activeTab === TokenTabs.TOKEN} + {#each filteredTokens as t (t.symbol)} +
    • selectToken(t)} + on:keydown={getTokenKeydownHandler(t)}> +
      + + {#if symbolToIconMap[t.symbol] && !t.imported} + + + + {:else} + + + + {/if} + {t.symbol} +
      +
      • + {/each} + {:else if !onlyMintable} + {#each filteredCustomTokens as ct, index (index)} +
    • +
      + selectToken(ct)} + on:keydown={getTokenKeydownHandler(ct)} + aria-label={ct.name}> + + + selectToken(ct)} + on:keydown={getTokenKeydownHandler(ct)} + class="grow body-bold">{truncateString(ct.symbol, 10)} +
      removeToken(ct)} + on:keydown={getTokenKeydownHandler(ct)} + class="cursor-pointer"> + +
      +
      +
      • + {/each} +
      +
    • + -
      • - {/if} -
    - + {$t('token_dropdown.add_custom')} + + +
    • + {/if} +
+
+
+ + diff --git a/packages/bridge-ui/src/i18n/en.json b/packages/bridge-ui/src/i18n/en.json index 0ec330ce52..c8b0eb0a2a 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", @@ -410,6 +411,7 @@ "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" },