From 0fefc653fc71e68cbba71b7bebb95be488b294c8 Mon Sep 17 00:00:00 2001
From: cor <cor@pruijs.dev>
Date: Fri, 24 Jan 2025 22:35:18 +0000
Subject: [PATCH] feat(app): highlight tokens

---
 app/src/lib/components/token.svelte | 15 ++++++++++++---
 app/src/lib/stores/highlight.ts     |  2 +-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/src/lib/components/token.svelte b/app/src/lib/components/token.svelte
index 38b2c02aca..a61d405f96 100644
--- a/app/src/lib/components/token.svelte
+++ b/app/src/lib/components/token.svelte
@@ -9,6 +9,8 @@ import { formatUnits } from "viem"
 import { onMount } from "svelte"
 import { tokenInfoQuery } from "$lib/queries/tokens"
 import LoadingDots from "./loading-dots.svelte"
+import { highlightItem } from "$lib/stores/highlight"
+import { cn } from "$lib/utilities/shadcn"
 
 export let chains: Array<Chain>
 export let chainId: string
@@ -23,13 +25,20 @@ $: tokenInfo = tokenInfoQuery(chainId, denom.toLowerCase(), chains)
 
 {#if $tokenInfo.data}
 {@const token = $tokenInfo.data}
-<div>
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="flex flex-col gap-1"
+  on:mouseleave={() => highlightItem.set(null)}
+  on:mouseenter={() => {
+  highlightItem.set(denom ? { kind: "token", denom} : null)
+  }}>
   <div class="flex gap-1 items-center">
     <TokenQualityLevel level={token.graphql != null ? "GRAPHQL" : token.onchain != null ? "ONCHAIN" : "NONE"} />
       {#if amount !== null}
         {formatUnits(BigInt(amount), token.combined.decimals)}
       {/if}
-    <b><Truncate value={token.combined.symbol} type="symbol"/></b>
+    <span class={cn("inline-flex gap-1 transition-colors", $highlightItem?.kind === "token" && $highlightItem.denom === denom  ? "bg-union-accent-300 dark:bg-union-accent-950" : "")}><b><Truncate value={token.combined.symbol} type="symbol"/></b>
     <div class="text-muted-foreground text-xs flex gap-1 items-center">
       {toDisplayName(chainId, chains)}
       {#each token.combined.wrapping as wrapping}
@@ -38,7 +47,7 @@ $: tokenInfo = tokenInfoQuery(chainId, denom.toLowerCase(), chains)
           chains,
         )}
       {/each}
-    </div>
+    </div></span>
   </div>
   {#if expanded}
     <div class="text-xs flex flex-col gap gap-4 text-muted-foreground">
diff --git a/app/src/lib/stores/highlight.ts b/app/src/lib/stores/highlight.ts
index 9940a7688f..2b576203e6 100644
--- a/app/src/lib/stores/highlight.ts
+++ b/app/src/lib/stores/highlight.ts
@@ -1,4 +1,4 @@
 import { writable, type Writable } from "svelte/store"
 
-type HighlightItem = { kind: "address"; address: string } | null
+type HighlightItem = { kind: "address"; address: string } | { kind: "token"; denom: string } | null
 export const highlightItem: Writable<HighlightItem> = writable(null)