From 2bfe80eac03666dccaee5884f6b7487147108731 Mon Sep 17 00:00:00 2001
From: cor <cor@pruijs.dev>
Date: Tue, 21 Jan 2025 13:18:33 +0000
Subject: [PATCH] feat(app): show token paths

---
 .../components/table-cells/cell-assets.svelte |  7 ++---
 .../lib/components/token-quality-level.svelte | 15 +++++++++++
 app/src/lib/components/token.svelte           | 27 ++++++++++++++-----
 app/src/lib/types.ts                          | 17 +++++++-----
 4 files changed, 49 insertions(+), 17 deletions(-)
 create mode 100644 app/src/lib/components/token-quality-level.svelte

diff --git a/app/src/lib/components/table-cells/cell-assets.svelte b/app/src/lib/components/table-cells/cell-assets.svelte
index b63bc5eeee..87357248dc 100644
--- 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
new file mode 100644
index 0000000000..4b6d92cdb2
--- /dev/null
+++ 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
index de9b9f7abc..d54b7ab4ff 100644
--- 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
index 7764dcc050..470b4e4b8e 100644
--- 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"