Skip to content

Commit

Permalink
update token views
Browse files Browse the repository at this point in the history
  • Loading branch information
@KorbinianK
KorbinianK committed May 3, 2024
1 parent 00cf125 commit 180dc1b
Show file tree
Hide file tree
Showing 6 changed files with 177 additions and 72 deletions.
2 changes: 1 addition & 1 deletion packages/bridge-ui/src/components/Alert/FlatAlert.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
info: {
textClass: 'text-secondary-content',
iconType: 'info-circle',
iconFillClass: 'fill-info-content',
iconFillClass: 'fill-secondary-content',
},
};
Expand Down
2 changes: 1 addition & 1 deletion packages/bridge-ui/src/components/Icon/Icon.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/bridge-ui/src/components/InputBox/InputBox.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
Expand Down
15 changes: 7 additions & 8 deletions packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,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 mt-[8px]">
{#if customTokenWithDetails}
<span>{$t('common.name')}: {customTokenWithDetails.symbol}</span>
<span>{$t('common.balance')}: {formattedBalance}</span>
Expand All @@ -195,15 +195,11 @@
{:else if loadingTokenDetails}
<Spinner />
{:else}
<div class="min-h-[25px]" />
<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>
Expand All @@ -217,10 +213,13 @@
<Icon type="trash" fillClass="fill-primary-icon" size={24} />
</button>
</div>
<div class="h-sep" />
{/each}
</div>
{/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 -->
Expand Down
226 changes: 165 additions & 61 deletions packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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<Token> = 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') {
Expand All @@ -54,76 +59,175 @@
}
};
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);
});
onDestroy(() => {
tokenService.unsubscribeFromChanges(handleStorageChange);
});
$: 'tab-active !border-primary-brand !border-b-4';
</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 }}>
<div role="tablist" class="relative tabs tabs-bordered f-row align-left">
<button
role="tab"
aria-selected={activeTab === TokenTabs.TOKEN}
class:tab-active={activeTab === TokenTabs.TOKEN}
class={classNames("tab !border-color-red'", activeTab === TokenTabs.TOKEN ? 'tab-active ' : '')}
on:click={() => setActiveTab(TokenTabs.TOKEN)}>
<span class="text-secondary-content">Tokens</span>
</button>
<button
role="tab"
aria-selected={activeTab === TokenTabs.CUSTOM}
class:tab-active={activeTab === TokenTabs.CUSTOM}
class={classNames(" tab box-content'", activeTab === TokenTabs.CUSTOM ? ' tab-active' : '')}
on:click={() => setActiveTab(TokenTabs.CUSTOM)}>
<span class="text-secondary-content"> Custom</span>
</button>
<div class="absolut w-full border-b-[1px] box-border border-tertiary-content mb-[2px]" />

Check warning on line 130 in packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte

View workflow job for this annotation

GitHub Actions / check-for-typos 

"absolut" should be "absolute".
</div>
<div>
<InputBox
{id}
type="text"
placeholder={$t('common.search_token')}
bind:value={enteredTokenName}
on:input={searchToken}
class="p-[12px] my-[20px]" />
<ul role="listbox" {id}>
{#if activeTab === TokenTabs.TOKEN}
{#each filteredTokens 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}
{:else 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}
</ul>
</div>
</div>
<AddCustomErc20 bind:modalOpen={addArc20ModalOpen} on:tokenRemoved />

<OnAccount change={onAccountChange} />

<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>
2 changes: 2 additions & 0 deletions packages/bridge-ui/src/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,7 @@
"ok": "Okay",
"recipient": "Recipient",
"review": "Review",
"search_token": "Search token",
"see_results": "See results",
"sender": "Sender",
"status": "Status",
Expand Down Expand Up @@ -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"
},
Expand Down

0 comments on commit 180dc1b

Please sign in to comment.