feat(explorer): add live token/native pricing and legacy tx route compatibility

frontend/src/components/home/HomePage.tsx

@@ -23,6 +23,7 @@ import ActivityContextPanel from '@/components/common/ActivityContextPanel'
 import FreshnessTrustNote from '@/components/common/FreshnessTrustNote'
 import { Explain, useUiMode } from '@/components/common/UiModeContext'
 import { resolveEffectiveFreshness, shouldExplainEmptyHeadBlocks } from '@/utils/explorerFreshness'
+import { tokenAggregationApi, type TokenAggregationTokenSnapshot } from '@/services/api/tokenAggregation'
 
 type HomeStats = ExplorerStats
 
@@ -92,6 +93,15 @@ function compactStatNote(guided: string, expert: string, mode: 'guided' | 'exper
   return mode === 'guided' ? guided : expert
 }
 
+function formatUsd(value: number | undefined) {
+  if (value == null || !Number.isFinite(value)) return 'Unavailable'
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: value >= 100 ? 0 : 2,
+  }).format(value)
+}
+
 export default function Home({
   initialStats = null,
   initialRecentBlocks = [],
@@ -109,6 +119,7 @@ export default function Home({
   const [activitySnapshot, setActivitySnapshot] = useState<ExplorerRecentActivitySnapshot | null>(initialActivitySnapshot)
   const [bridgeStatus, setBridgeStatus] = useState<MissionControlBridgeStatusResponse | null>(initialBridgeStatus)
   const [relaySummary, setRelaySummary] = useState<MissionControlRelaySummary | null>(initialRelaySummary)
+  const [featuredPrices, setFeaturedPrices] = useState<TokenAggregationTokenSnapshot[]>([])
   const [missionExpanded, setMissionExpanded] = useState(false)
   const [relayExpanded, setRelayExpanded] = useState(false)
   const [relayPage, setRelayPage] = useState(1)
@@ -166,6 +177,29 @@ export default function Home({
     }
   }, [])
 
+  useEffect(() => {
+    let cancelled = false
+
+    tokenAggregationApi.getTokensByAddressSafe(138, [
+      '0x93E66202A11B1772E55407B32B44e5Cd8eda7f22',
+      '0xf22258f57794CC8E06237084b353Ab30fFfa640b',
+      '0x290e52a8819A4fBd0714e517225429AA2B70EC6B',
+      '0xc02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
+    ]).then(({ data }) => {
+      if (!cancelled) {
+        setFeaturedPrices(data)
+      }
+    }).catch((error) => {
+      if (!cancelled && process.env.NODE_ENV !== 'production') {
+        console.warn('Failed to load featured token prices:', error)
+      }
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
   useEffect(() => {
     let cancelled = false
 
@@ -738,6 +772,35 @@ export default function Home({
         </div>
       )}
 
+      {featuredPrices.length > 0 ? (
+        <div className="mb-8">
+          <Card title="Live Price Feed">
+            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+              {featuredPrices.map((token) => (
+                <Link
+                  key={token.address}
+                  href={`/tokens/${token.address}`}
+                  className="rounded-2xl border border-gray-200 bg-gray-50/70 px-4 py-3 transition hover:border-primary-400 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40"
+                >
+                  <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                    {token.symbol || token.name || 'Token'}
+                  </div>
+                  <div className="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
+                    {formatUsd(token.market?.priceUsd)}
+                  </div>
+                  <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                    Visible liquidity: {formatUsd(token.market?.liquidityUsd)}
+                  </div>
+                  <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    {token.market?.lastUpdated ? `Updated ${formatRelativeAge(token.market.lastUpdated)}` : 'Update time unavailable'}
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </Card>
+        </div>
+      ) : null}
+
       <div className="mb-8">
         <ActivityContextPanel
           context={activityContext}