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**
unionlabs · Feb 6, 2025 · 1f31e8f · 1f31e8f
2 parents 6a18275 + 3c50b52
commit 1f31e8f
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 39 deletions.
diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte
@@ -48,14 +48,14 @@ const hideZeroBalances = writable(true)
     </button>
   </div>
 
-  <div class="flex flex-col overflow-y-auto">
+  <div class="flex flex-col overflow-y-auto gap-2 py-2">
     {#each intents.baseTokens ?? [] as token}
       {#if !$hideZeroBalances || token.balance !== "0"}
         <button
-                class="px-2 py-1 hover:bg-neutral-400 dark:hover:bg-neutral-800 text-md flex justify-start items-center"
+                class="px-4 py-1 hover:bg-neutral-400 dark:hover:bg-neutral-800 text-sm flex justify-start items-center"
                 on:click={() => setAsset(token.denom)}
         >
-          <Token chainId={$rawIntents.source} denom={token.denom} amount={token.balance} {chains}/>
+          <Token stackedView highlightEnabled={false} chainId={$rawIntents.source} denom={token.denom} amount={token.balance} {chains}/>
         </button>
       {/if}
     {/each}

diff --git a/app/src/lib/components/TransferFrom/components/SelectedAsset.svelte b/app/src/lib/components/TransferFrom/components/SelectedAsset.svelte
@@ -30,7 +30,7 @@ export let onSelectAsset: Props["onSelectAsset"]
           on:click={onSelectAsset}
   >
     {#if $rawIntents.asset}
-      <Token {chains} chainId={$rawIntents.source} denom={$rawIntents.asset}/>
+      <Token highlightEnabled={false} showWrapping={false} {chains} chainId={$rawIntents.source} denom={$rawIntents.asset}/>
     {:else}
       Select Asset
     {/if}

diff --git a/app/src/lib/components/connect/connect.svelte b/app/src/lib/components/connect/connect.svelte
@@ -12,8 +12,7 @@ import { Switch } from "$lib/components/ui/switch"
 import { Button } from "$lib/components/ui/button"
 import * as Avatar from "$lib/components/ui/avatar"
 import WalletIcon from "virtual:icons/lucide/wallet"
-import { showUnsupported } from "$lib/stores/user.ts"
-import { crtEffectEnabled } from "$lib/stores/user.ts"
+import { crtEffectEnabled, showTokenDetails } from "$lib/stores/user.ts"
 import * as DropdownMenu from "$lib/components/ui/dropdown-menu"
 import { sepoliaStore, evmWalletsInformation } from "$lib/wallet/evm/index.ts"
 import { aptosStore, aptosWalletsInformation } from "$lib/wallet/aptos/index.ts"
@@ -131,8 +130,8 @@ $: if ($navigating) sheetOpen = false
       onDisconnectClick={cosmosStore.disconnect}
     />
     <div class="flex items-center space-x-2">
-      <Switch bind:checked={$showUnsupported} id="unsupported-assets" />
-      <Label for="unsupported-assets">Show unverified assets</Label>
+      <Switch bind:checked={$showTokenDetails} id="show-token-details" />
+      <Label for="show-token-details">Show Token Details</Label>
     </div>
     <div class="mt-auto flex justify-between">
       <div class="flex items-center space-x-2">

diff --git a/app/src/lib/components/table-cells/cell-assets.svelte b/app/src/lib/components/table-cells/cell-assets.svelte
@@ -4,6 +4,7 @@ import { truncate } from "$lib/utilities/format"
 import ExplorerPrecise from "$lib/components/explorer-precise.svelte"
 import Token from "$lib/components/token.svelte"
 import type { Chain } from "$lib/types"
+import { showTokenDetails } from "$lib/stores/user"
 
 export let chains: Array<Chain>
 export let chainId: string
@@ -22,7 +23,7 @@ export let token: {
 </script>
 
 <div class="flex flex-col items-start">
-  <Token {chains} showWrapping={false} amount={token.base.amount} denom={token.base.token} chainId={token.base.chainId}/>
-  <!-- TODO: add setting to show this in overview !-->
-  <!--<Token {chains}  amount={token.quote.amount} denom={token.quote.token} chainId={token.quote.chainId}/>!-->
+  <Token {chains} showWrapping={$showTokenDetails} amount={token.base.amount} denom={token.base.token} chainId={token.base.chainId}/>
+  {#if $showTokenDetails}
+  <Token {chains}  amount={token.quote.amount} denom={token.quote.token} chainId={token.quote.chainId}/>  {/if}
 </div>
diff --git a/app/src/lib/components/token.svelte b/app/src/lib/components/token.svelte
@@ -20,6 +20,7 @@ export let userAmount: string | null = null
 export let expanded = false
 export let highlightEnabled = true
 export let showWrapping = true
+export let stackedView = false
 
 let tokenInfo = derived(
   tokenInfos,
@@ -57,6 +58,7 @@ onMount(() => {
       <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
               value={token.combined.symbol} type="symbol"/></b>
               {#if showWrapping}
+    {#if !stackedView}
     <div class="text-muted-foreground text-xs flex gap-1 items-center">
       {toDisplayName(chainId, chains)}
       {#each token.combined.wrapping as wrapping}
@@ -65,8 +67,19 @@ onMount(() => {
         chains,
       )}
       {/each}
-    </div>{/if}</span>
+    </div>{/if}{/if}</span>
     </div>
+    {#if stackedView}
+    <div class="text-muted-foreground text-xs flex gap-1 items-center -mt-1">
+      {toDisplayName(chainId, chains)}
+      {#each token.combined.wrapping as wrapping}
+        <ArrowLeftIcon/>{toDisplayName(
+        wrapping.unwrapped_chain.chain_id,
+        chains,
+      )}
+      {/each}
+      </div>
+    {/if}
     {#if expanded}
       <div class="text-xs flex flex-col gap gap-4 text-muted-foreground">
         <section>

diff --git a/app/src/lib/components/transfer-details.svelte b/app/src/lib/components/transfer-details.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+import { Switch } from "$lib/components/ui/switch"
+import { Label } from "$lib/components/ui/label"
 import { page } from "$app/stores"
 import request from "graphql-request"
 import { transfersBySourceHashBaseQueryDocument } from "$lib/graphql/queries/transfer-details.ts"
@@ -8,7 +10,7 @@ import { URLS } from "$lib/constants"
 import * as Card from "$lib/components/ui/card/index.ts"
 import { toIsoString } from "$lib/utilities/date"
 import LoadingLogo from "$lib/components/loading-logo.svelte"
-import { derived } from "svelte/store"
+import { derived, writable } from "svelte/store"
 import { raise } from "$lib/utilities"
 import Trace from "$lib/components/trace.svelte"
 import type { Chain } from "$lib/types"
@@ -19,6 +21,7 @@ import { formatUnits } from "viem"
 import PacketPath from "./packet-path.svelte"
 import Token from "./token.svelte"
 import Address from "./address.svelte"
+import { showTokenDetails } from "$lib/stores/user"
 
 // prefix a source with 0x if not there for cosmos tx hashes
 const source = $page.params.source.startsWith("0x")
@@ -91,31 +94,28 @@ let processedTransfers = derived(
             />
           </Card.Header>
           <Card.Content class="flex flex-col gap-8">
-            <section class="flex justify-between">
-              <div>
-                <div class="flex flex-col gap-6">
-                  {#if transfer.base_amount && transfer.base_token}
-                    <Token
-                      expanded="true"
-                      highlightEnabled={false}
-                      amount={transfer.base_amount}
-                      denom={transfer.base_token}
-                      chainId={transfer.source_chain_id}
-                      {chains}
-                    />
-                  {/if}
-                  {#if "quote_amount" in transfer && transfer.quote_amount && "quote_token" in transfer && transfer.quote_token}
-                    <Token
-                      expanded="true"
-                      highlightEnabled={false}
-                      amount={transfer.quote_amount}
-                      denom={transfer.quote_token}
-                      chainId={transfer.destination_chain_id}
-                      {chains}
-                    />
-                  {/if}
-                </div>
-              </div>
+            <section class={cn(!$showTokenDetails ? "items-center text-xl" : "", "flex flex-col gap-6")}>
+              {#if transfer.base_amount && transfer.base_token}
+                <Token
+                  expanded={$showTokenDetails}
+                  showWrapping={$showTokenDetails}
+                  highlightEnabled={false}
+                  amount={transfer.base_amount}
+                  denom={transfer.base_token}
+                  chainId={transfer.source_chain_id}
+                  {chains}
+                />
+              {/if}
+              {#if $showTokenDetails && "quote_amount" in transfer && transfer.quote_amount && "quote_token" in transfer && transfer.quote_token}
+                <Token
+                  expanded={$showTokenDetails}
+                  highlightEnabled={false}
+                  amount={transfer.quote_amount}
+                  denom={transfer.quote_token}
+                  chainId={transfer.destination_chain_id}
+                  {chains}
+                />
+              {/if}
             </section>
 
             <section>

diff --git a/app/src/lib/stores/user.ts b/app/src/lib/stores/user.ts
@@ -13,5 +13,6 @@ function persistStore<T>(key: string, initial: T) {
   return store
 }
 
-export const showUnsupported = persistStore("show-unsupported", true)
+export const showUnsupported = persisted("show-unsupported", true)
 export const crtEffectEnabled = persisted("crt-effect-enabled", true)
+export const showTokenDetails = persisted("show-token-details", false)