fix(frontend): add tooltips and improved unknown token icons in swap tracker (#79)

Author: Im-Madhur-Gupta

frontend/components/swap-transfer-tracker/token-icon.tsx

@@ -1,5 +1,12 @@
 import Image from 'next/image'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import { getTokenFromList } from '@/lib/token-list'
+import { cn, shortenHex } from '@/lib/utils'
+import { UnknownTokenIcon } from './unknown-token-icon'
 
 interface TokenIconProps {
   address?: string
@@ -14,26 +21,50 @@ export function TokenIcon({
 }: TokenIconProps) {
   const token = address ? getTokenFromList(address) : null
   const logoURI = token?.logoURI
+  const name = token?.name
   const symbol = token?.symbol
 
+  const getTooltipText = () => {
+    if (name) return name
+    if (symbol) return symbol
+    if (address) return shortenHex(address)
+    return 'Unknown token'
+  }
+
+  const getAltText = () => {
+    if (symbol) return symbol.slice(0, 2).toUpperCase()
+    return 'Unknown token'
+  }
+
+  // If we have a logo URI, show the image
   if (logoURI) {
     return (
-      <Image
-        src={logoURI}
-        alt={symbol ?? ''}
-        width={size}
-        height={size}
-        className={`rounded-full ${className}`}
-      />
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Image
+            src={logoURI}
+            alt={getAltText()}
+            width={size}
+            height={size}
+            className={cn('rounded-full', className)}
+          />
+        </TooltipTrigger>
+        <TooltipContent sideOffset={5}>
+          <p>{getTooltipText()}</p>
+        </TooltipContent>
+      </Tooltip>
     )
   }
 
-  // Gray circle placeholder when no logo is available
+  // For unknown tokens, use the UnknownTokenIcon component
   return (
-    <div
-      className={`rounded-full bg-zinc-600 ${className}`}
-      style={{ width: size, height: size }}
-      title={symbol ?? ''}
-    />
+    <Tooltip>
+      <TooltipTrigger>
+        <UnknownTokenIcon symbol={symbol} size={size} className={className} />
+      </TooltipTrigger>
+      <TooltipContent sideOffset={5}>
+        <p>{getTooltipText()}</p>
+      </TooltipContent>
+    </Tooltip>
   )
 }

frontend/components/swap-transfer-tracker/unknown-token-icon.tsx

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils'
+
+interface UnknownTokenIconProps {
+  symbol?: string
+  size?: number
+  className?: string
+}
+
+export function UnknownTokenIcon({
+  symbol,
+  size = 16,
+  className,
+}: UnknownTokenIconProps) {
+  const displayText = symbol ? symbol.slice(0, 2).toUpperCase() : '?'
+  const textSize =
+    size <= 16 ? 'text-[0.5625rem]' : size <= 24 ? 'text-xs' : 'text-sm'
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium select-none shrink-0',
+        textSize,
+        className,
+      )}
+      style={{ width: size, height: size }}
+    >
+      {displayText}
+    </div>
+  )
+}