feat(app): show full token metadata

unionlabs · Jan 21, 2025 · ca9b6ed · ca9b6ed
1 parent 6d7d7d7
commit ca9b6ed
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 21 deletions.
diff --git a/app/src/generated/graphql-env.d.ts b/app/src/generated/graphql-env.d.ts
diff --git a/app/src/generated/schema.graphql b/app/src/generated/schema.graphql
diff --git a/app/src/lib/components/token.svelte b/app/src/lib/components/token.svelte
@@ -2,7 +2,7 @@
   import type { Chain, TokenInfo } from "$lib/types";
   import TokenQualityLevel from "$lib/components/token-quality-level.svelte";
   import Truncate from "./truncate.svelte";
-  import ArrowRightIcon from "virtual:icons/lucide/arrow-right";
+  import ArrowLeftIcon from "virtual:icons/lucide/arrow-left";
   import { toDisplayName } from "$lib/utilities/chains.ts";
   import { formatUnits } from "viem";
 
@@ -50,23 +50,39 @@
   })();
 </script>
 
-<div class="flex gap-1 items-center">
-  <TokenQualityLevel level={token.quality_level} />
-  {#if token.quality_level === "GRAPHQL"}
-    {#if amount !== null}
-      {formatUnits(BigInt(amount), token.primaryRepresentation.decimals)}
+<div>
+  <div class="flex gap-1 items-center">
+    <TokenQualityLevel level={token.quality_level} />
+    {#if token.quality_level === "GRAPHQL"}
+      {#if amount !== null}
+        {formatUnits(BigInt(amount), token.primaryRepresentation.decimals)}
+      {/if}
+      <div class="font-bold">{token.primaryRepresentation.symbol}</div>
+      <div class="text-muted-foreground text-xs flex gap-1 items-center">
+        {toDisplayName(chainId, chains)}
+        {#each token.wrapping as wrapping}
+          <ArrowLeftIcon />{toDisplayName(
+            wrapping.unwrapped_chain.chain_id,
+            chains,
+          )}
+        {/each}
+      </div>
+    {:else}
+      {amount}
+      <b><Truncate value={token.denom} type="address" /></b>
     {/if}
-    <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}
-        <ArrowRightIcon />{toDisplayName(
-          wrapping.wrapped_chain.chain_id,
-          chains,
-        )}
-      {/each}
+  </div>
+  {#if token.quality_level === "GRAPHQL"}
+    <div class="text-xs">
+      <div>Name: {token.primaryRepresentation.name}</div>
+      <div>Symbol: {token.primaryRepresentation.symbol}</div>
+      <div>Denom: <Truncate value={token.denom} type="address" /></div>
+      <div>
+        Verifiers: {#each token.primaryRepresentation.sources as source}<a
+            class="underline"
+            href={source.source.source_uri}>{source.source.name}</a
+          >{/each}
+      </div>
     </div>
-  {:else}
-    {amount}
-    <b><Truncate value={token.denom} type="address" /></b>
   {/if}
 </div>
diff --git a/app/src/lib/components/transfer-details.svelte b/app/src/lib/components/transfer-details.svelte
@@ -93,7 +93,7 @@
           <Card.Content class="flex flex-col gap-8">
             <section class="flex justify-between">
               <div>
-                <div class="block">
+                <div class="flex flex-col gap-4">
                   {#if transfer.base_amount && transfer.base_token}
                     <Token
                       amount={transfer.base_amount}

diff --git a/app/src/lib/graphql/queries/chains.ts b/app/src/lib/graphql/queries/chains.ts
@@ -44,6 +44,7 @@ export const chainsQueryDocument = graphql(/* GraphQL */ `query ChainsQuery @cac
           source {
             name
             logo_uri
+            source_uri
           }
           wrapping {
             destination_channel_id
@@ -55,6 +56,9 @@ export const chainsQueryDocument = graphql(/* GraphQL */ `query ChainsQuery @cac
         }
       }
       wrapping {
+        unwrapped_chain {
+          chain_id
+        }
         wrapped_chain {
           chain_id
         }

diff --git a/app/src/lib/types.ts b/app/src/lib/types.ts
@@ -92,6 +92,9 @@ export type Wrapping = {
   wrapped_chain: {
     chain_id: string
   }
+  unwrapped_chain: {
+    chain_id: string
+  }
   destination_channel_id: number
   unwrapped_denom: string
 }