feat(app): show token paths

unionlabs · Jan 21, 2025 · 2bfe80e · 2bfe80e
1 parent 87c5d81
commit 2bfe80e
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 17 deletions.
diff --git a/app/src/lib/components/table-cells/cell-assets.svelte b/app/src/lib/components/table-cells/cell-assets.svelte
@@ -21,6 +21,7 @@ export let token: {
 }
 </script>
 
-<Token {chains} denom={token.base.token} chainId={token.base.chainId}/>
-➡️
-<Token {chains} denom={token.quote.token} chainId={token.quote.chainId}/>
+<div class="flex flex-col items-start">
+  <Token {chains} denom={token.base.token} chainId={token.base.chainId}/>
+  <Token {chains} denom={token.quote.token} chainId={token.quote.chainId}/>
+</div>
diff --git a/app/src/lib/components/token-quality-level.svelte b/app/src/lib/components/token-quality-level.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { Chain, TokenInfo } from "$lib/types"
+import { cn } from "$lib/utilities/shadcn"
+export let level: "GRAPHQL" | "ONCHAIN" | "NONE"
+</script>
+
+<div class={cn("rounded text-xs w-4 h-4 flex justify-center items-center", level === "GRAPHQL" ? "bg-black text-white" : level === "ONCHAIN" ? "bg-yellow-500 text-black" : "bg-red-500 text-black")}>
+  {#if level === "GRAPHQL"}
+  G
+  {:else if level === "ONCHAIN"}
+  O
+  {:else if level === "NONE"}
+  N
+  {/if}
+</div>
diff --git a/app/src/lib/components/token.svelte b/app/src/lib/components/token.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
 import type { Chain, TokenInfo } from "$lib/types"
+import TokenQualityLevel from "$lib/components/token-quality-level.svelte"
+import Truncate from "./truncate.svelte"
+import ArrowLeftIcon from "virtual:icons/lucide/arrow-left"
+import { toDisplayName } from "$lib/utilities/chains.ts"
+
 export let chains: Array<Chain>
 export let chainId: string
 export let denom: string
@@ -26,7 +31,8 @@ let token: TokenInfo = (() => {
         quality_level: "GRAPHQL",
         denom,
         primaryRepresentation: fullRepresentations[0],
-        representations: fullRepresentations
+        representations: fullRepresentations,
+        wrapping: graphqlToken.wrapping
       }
     }
   }
@@ -38,9 +44,16 @@ let token: TokenInfo = (() => {
 })()
 </script>
 
-
-{#if token.quality_level === "GRAPHQL"}
-  [G] {token.primaryRepresentation.symbol}
-{:else}
-  [N] {denom}
-{/if}
+<div class="flex gap-1 items-center">
+  {#if token.quality_level === "GRAPHQL"}
+    <div class="font-bold">{token.primaryRepresentation.symbol}</div>
+    <div class="text-muted-foreground text-xs flex gap-1 items-center">
+    {#each token.wrapping as wrapping}
+       <ArrowLeftIcon/>{toDisplayName(wrapping.wrapped_chain.chain_id, chains)}
+    {/each}
+    </div>
+  {:else}
+    <Truncate value={token.denom} type = "address"/>
+  {/if}
+  <TokenQualityLevel level={token.quality_level}/>
+</div>
diff --git a/app/src/lib/types.ts b/app/src/lib/types.ts
@@ -85,13 +85,15 @@ export type ChainToken = {
       update_timestamp: string | null
     }>
   }>
-  wrapping: Array<{
-    wrapped_chain: {
-      chain_id: string
-    }
-    destination_channel_id: 3
-    unwrapped_denom: string
-  }>
+  wrapping: Array<Wrapping>
+}
+
+export type Wrapping = {
+  wrapped_chain: {
+    chain_id: string
+  }
+  destination_channel_id: number
+  unwrapped_denom: string
 }
 
 export type TokenInfoQualityLevel = "GRAPHQL" | "ONCHAIN" | "NONE"
@@ -107,6 +109,7 @@ export type TokenInfo =
       denom: string
       primaryRepresentation: TokenRepresentation
       representations: Array<TokenRepresentation>
+      wrapping: Array<Wrapping>
     }
   | {
       quality_level: "ONCHAIN"