Skip to content

Commit 1f31e8f

Browse files
corcor
authored
Token UI refinements (#3698)
If you want to see all token details, select "show token details" in the sidebar. - **feat(app): toggle token details** - **feat(app): more refined token displayingj**
2 parents 6a18275 + 3c50b52 commit 1f31e8f

File tree

7 files changed

+53
-39
lines changed

7 files changed

+53
-39
lines changed

‎app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,14 @@ const hideZeroBalances = writable(true)
4848
</button>
4949
</div>
5050

51-
<div class="flex flex-col overflow-y-auto">
51+
<div class="flex flex-col overflow-y-auto gap-2 py-2">
5252
{#each intents.baseTokens ?? [] as token}
5353
{#if !$hideZeroBalances || token.balance !== "0"}
5454
<button
55-
class="px-2 py-1 hover:bg-neutral-400 dark:hover:bg-neutral-800 text-md flex justify-start items-center"
55+
class="px-4 py-1 hover:bg-neutral-400 dark:hover:bg-neutral-800 text-sm flex justify-start items-center"
5656
on:click={() => setAsset(token.denom)}
5757
>
58-
<Token chainId={$rawIntents.source} denom={token.denom} amount={token.balance} {chains}/>
58+
<Token stackedView highlightEnabled={false} chainId={$rawIntents.source} denom={token.denom} amount={token.balance} {chains}/>
5959
</button>
6060
{/if}
6161
{/each}

‎app/src/lib/components/TransferFrom/components/SelectedAsset.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export let onSelectAsset: Props["onSelectAsset"]
3030
on:click={onSelectAsset}
3131
>
3232
{#if $rawIntents.asset}
33-
<Token {chains} chainId={$rawIntents.source} denom={$rawIntents.asset}/>
33+
<Token highlightEnabled={false} showWrapping={false} {chains} chainId={$rawIntents.source} denom={$rawIntents.asset}/>
3434
{:else}
3535
Select Asset
3636
{/if}

‎app/src/lib/components/connect/connect.svelte

+3-4
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@ import { Switch } from "$lib/components/ui/switch"
1212
import { Button } from "$lib/components/ui/button"
1313
import * as Avatar from "$lib/components/ui/avatar"
1414
import WalletIcon from "virtual:icons/lucide/wallet"
15-
import { showUnsupported } from "$lib/stores/user.ts"
16-
import { crtEffectEnabled } from "$lib/stores/user.ts"
15+
import { crtEffectEnabled, showTokenDetails } from "$lib/stores/user.ts"
1716
import * as DropdownMenu from "$lib/components/ui/dropdown-menu"
1817
import { sepoliaStore, evmWalletsInformation } from "$lib/wallet/evm/index.ts"
1918
import { aptosStore, aptosWalletsInformation } from "$lib/wallet/aptos/index.ts"
@@ -131,8 +130,8 @@ $: if ($navigating) sheetOpen = false
131130
onDisconnectClick={cosmosStore.disconnect}
132131
/>
133132
<div class="flex items-center space-x-2">
134-
<Switch bind:checked={$showUnsupported} id="unsupported-assets" />
135-
<Label for="unsupported-assets">Show unverified assets</Label>
133+
<Switch bind:checked={$showTokenDetails} id="show-token-details" />
134+
<Label for="show-token-details">Show Token Details</Label>
136135
</div>
137136
<div class="mt-auto flex justify-between">
138137
<div class="flex items-center space-x-2">

‎app/src/lib/components/table-cells/cell-assets.svelte

+4-3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { truncate } from "$lib/utilities/format"
44
import ExplorerPrecise from "$lib/components/explorer-precise.svelte"
55
import Token from "$lib/components/token.svelte"
66
import type { Chain } from "$lib/types"
7+
import { showTokenDetails } from "$lib/stores/user"
78
89
export let chains: Array<Chain>
910
export let chainId: string
@@ -22,7 +23,7 @@ export let token: {
2223
</script>
2324

2425
<div class="flex flex-col items-start">
25-
<Token {chains} showWrapping={false} amount={token.base.amount} denom={token.base.token} chainId={token.base.chainId}/>
26-
<!-- TODO: add setting to show this in overview !-->
27-
<!--<Token {chains} amount={token.quote.amount} denom={token.quote.token} chainId={token.quote.chainId}/>!-->
26+
<Token {chains} showWrapping={$showTokenDetails} amount={token.base.amount} denom={token.base.token} chainId={token.base.chainId}/>
27+
{#if $showTokenDetails}
28+
<Token {chains} amount={token.quote.amount} denom={token.quote.token} chainId={token.quote.chainId}/> {/if}
2829
</div>

‎app/src/lib/components/token.svelte

+14-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export let userAmount: string | null = null
2020
export let expanded = false
2121
export let highlightEnabled = true
2222
export let showWrapping = true
23+
export let stackedView = false
2324
2425
let tokenInfo = derived(
2526
tokenInfos,
@@ -57,6 +58,7 @@ onMount(() => {
5758
<span class={cn("inline-flex gap-1", highlightEnabled && $highlightItem?.kind === "token" && $highlightItem.denom === denom ? "bg-union-accent-300 dark:bg-union-accent-950" : "")}><b><Truncate
5859
value={token.combined.symbol} type="symbol"/></b>
5960
{#if showWrapping}
61+
{#if !stackedView}
6062
<div class="text-muted-foreground text-xs flex gap-1 items-center">
6163
{toDisplayName(chainId, chains)}
6264
{#each token.combined.wrapping as wrapping}
@@ -65,8 +67,19 @@ onMount(() => {
6567
chains,
6668
)}
6769
{/each}
68-
</div>{/if}</span>
70+
</div>{/if}{/if}</span>
6971
</div>
72+
{#if stackedView}
73+
<div class="text-muted-foreground text-xs flex gap-1 items-center -mt-1">
74+
{toDisplayName(chainId, chains)}
75+
{#each token.combined.wrapping as wrapping}
76+
<ArrowLeftIcon/>{toDisplayName(
77+
wrapping.unwrapped_chain.chain_id,
78+
chains,
79+
)}
80+
{/each}
81+
</div>
82+
{/if}
7083
{#if expanded}
7184
<div class="text-xs flex flex-col gap gap-4 text-muted-foreground">
7285
<section>

‎app/src/lib/components/transfer-details.svelte

+26-26
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script lang="ts">
2+
import { Switch } from "$lib/components/ui/switch"
3+
import { Label } from "$lib/components/ui/label"
24
import { page } from "$app/stores"
35
import request from "graphql-request"
46
import { transfersBySourceHashBaseQueryDocument } from "$lib/graphql/queries/transfer-details.ts"
@@ -8,7 +10,7 @@ import { URLS } from "$lib/constants"
810
import * as Card from "$lib/components/ui/card/index.ts"
911
import { toIsoString } from "$lib/utilities/date"
1012
import LoadingLogo from "$lib/components/loading-logo.svelte"
11-
import { derived } from "svelte/store"
13+
import { derived, writable } from "svelte/store"
1214
import { raise } from "$lib/utilities"
1315
import Trace from "$lib/components/trace.svelte"
1416
import type { Chain } from "$lib/types"
@@ -19,6 +21,7 @@ import { formatUnits } from "viem"
1921
import PacketPath from "./packet-path.svelte"
2022
import Token from "./token.svelte"
2123
import Address from "./address.svelte"
24+
import { showTokenDetails } from "$lib/stores/user"
2225
2326
// prefix a source with 0x if not there for cosmos tx hashes
2427
const source = $page.params.source.startsWith("0x")
@@ -91,31 +94,28 @@ let processedTransfers = derived(
9194
/>
9295
</Card.Header>
9396
<Card.Content class="flex flex-col gap-8">
94-
<section class="flex justify-between">
95-
<div>
96-
<div class="flex flex-col gap-6">
97-
{#if transfer.base_amount && transfer.base_token}
98-
<Token
99-
expanded="true"
100-
highlightEnabled={false}
101-
amount={transfer.base_amount}
102-
denom={transfer.base_token}
103-
chainId={transfer.source_chain_id}
104-
{chains}
105-
/>
106-
{/if}
107-
{#if "quote_amount" in transfer && transfer.quote_amount && "quote_token" in transfer && transfer.quote_token}
108-
<Token
109-
expanded="true"
110-
highlightEnabled={false}
111-
amount={transfer.quote_amount}
112-
denom={transfer.quote_token}
113-
chainId={transfer.destination_chain_id}
114-
{chains}
115-
/>
116-
{/if}
117-
</div>
118-
</div>
97+
<section class={cn(!$showTokenDetails ? "items-center text-xl" : "", "flex flex-col gap-6")}>
98+
{#if transfer.base_amount && transfer.base_token}
99+
<Token
100+
expanded={$showTokenDetails}
101+
showWrapping={$showTokenDetails}
102+
highlightEnabled={false}
103+
amount={transfer.base_amount}
104+
denom={transfer.base_token}
105+
chainId={transfer.source_chain_id}
106+
{chains}
107+
/>
108+
{/if}
109+
{#if $showTokenDetails && "quote_amount" in transfer && transfer.quote_amount && "quote_token" in transfer && transfer.quote_token}
110+
<Token
111+
expanded={$showTokenDetails}
112+
highlightEnabled={false}
113+
amount={transfer.quote_amount}
114+
denom={transfer.quote_token}
115+
chainId={transfer.destination_chain_id}
116+
{chains}
117+
/>
118+
{/if}
119119
</section>
120120

121121
<section>

‎app/src/lib/stores/user.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@ function persistStore<T>(key: string, initial: T) {
1313
return store
1414
}
1515

16-
export const showUnsupported = persistStore("show-unsupported", true)
16+
export const showUnsupported = persisted("show-unsupported", true)
1717
export const crtEffectEnabled = persisted("crt-effect-enabled", true)
18+
export const showTokenDetails = persisted("show-token-details", false)

0 commit comments

Comments
 (0)