Add dual currency token display

frontend/src/components/common/DisplayCurrencyContext.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { createContext, type ReactNode, useContext, useEffect, useMemo, useState } from 'react'
+
+export type DisplayCurrency = 'native' | 'usd'
+
+const DISPLAY_CURRENCY_STORAGE_KEY = 'explorer_display_currency'
+
+const DisplayCurrencyContext = createContext<{
+  currency: DisplayCurrency
+  setCurrency: (currency: DisplayCurrency) => void
+} | null>(null)
+
+export function DisplayCurrencyProvider({ children }: { children: ReactNode }) {
+  const [currency, setCurrencyState] = useState<DisplayCurrency>('native')
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const stored = window.localStorage.getItem(DISPLAY_CURRENCY_STORAGE_KEY)
+    if (stored === 'native' || stored === 'usd') {
+      setCurrencyState(stored)
+    }
+  }, [])
+
+  const setCurrency = (nextCurrency: DisplayCurrency) => {
+    setCurrencyState(nextCurrency)
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(DISPLAY_CURRENCY_STORAGE_KEY, nextCurrency)
+    }
+  }
+
+  const value = useMemo(
+    () => ({
+      currency,
+      setCurrency,
+    }),
+    [currency],
+  )
+
+  return <DisplayCurrencyContext.Provider value={value}>{children}</DisplayCurrencyContext.Provider>
+}
+
+export function useDisplayCurrency() {
+  const context = useContext(DisplayCurrencyContext)
+  if (!context) {
+    throw new Error('useDisplayCurrency must be used within a DisplayCurrencyProvider')
+  }
+  return context
+}

frontend/src/components/common/ExplorerChrome.tsx

@@ -2,25 +2,28 @@ import type { ReactNode } from 'react'
 import Navbar from './Navbar'
 import Footer from './Footer'
 import ExplorerAgentTool from './ExplorerAgentTool'
+import { DisplayCurrencyProvider } from './DisplayCurrencyContext'
 import { UiModeProvider } from './UiModeContext'
 
 export default function ExplorerChrome({ children }: { children: ReactNode }) {
   return (
     <UiModeProvider>
-      <div className="flex min-h-screen flex-col bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
-        <a
-          href="#main-content"
-          className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-primary-600 focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-white"
-        >
-          Skip to content
-        </a>
-        <Navbar />
-        <div id="main-content" className="flex-1">
-          {children}
+      <DisplayCurrencyProvider>
+        <div className="flex min-h-screen flex-col bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+          <a
+            href="#main-content"
+            className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-primary-600 focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-white"
+          >
+            Skip to content
+          </a>
+          <Navbar />
+          <div id="main-content" className="flex-1">
+            {children}
+          </div>
+          <ExplorerAgentTool />
+          <Footer />
         </div>
-        <ExplorerAgentTool />
-        <Footer />
-      </div>
+      </DisplayCurrencyProvider>
     </UiModeProvider>
   )
 }