feat(app): more refined token displayingj

Author: cor

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}

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}

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>