Skip to content

Commit

Permalink
feat(bridge-ui): update token dropdown (#16979)
Browse files Browse the repository at this point in the history
  • Loading branch information
KorbinianK authored May 8, 2024
1 parent fe49ed8 commit f19cf66
Show file tree
Hide file tree
Showing 15 changed files with 388 additions and 158 deletions.
2 changes: 1 addition & 1 deletion packages/bridge-ui/src/components/Alert/FlatAlert.svelte
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
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
40 changes: 40 additions & 0 deletions packages/bridge-ui/src/components/DialogTabs/DialogTab.svelte
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 24 additions & 0 deletions packages/bridge-ui/src/components/DialogTabs/DialogTabs.svelte
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 2 additions & 0 deletions packages/bridge-ui/src/components/DialogTabs/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { default as DialogTab } from './DialogTab.svelte';
export { default as DialogTabs } from './DialogTabs.svelte';
2 changes: 1 addition & 1 deletion packages/bridge-ui/src/components/Icon/Icon.svelte
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
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
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 });
};
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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>
Expand All @@ -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 -->
Expand Down
Loading

0 comments on commit f19cf66

Please sign in to comment.