Merge remote-tracking branch 'origin/feat/explorer-dual-currency-display'

Co-authored-by: Cursor <cursoragent@cursor.com>

# Conflicts:
#	frontend/src/components/common/ExplorerChrome.tsx
#	frontend/src/pages/tokens/[address].tsx

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

@@ -3,29 +3,32 @@ import Navbar from './Navbar'
 import Footer from './Footer'
 import ExplorerAgentTool from './ExplorerAgentTool'
 import ExplorerDocumentHead from './ExplorerDocumentHead'
+import { DisplayCurrencyProvider } from './DisplayCurrencyContext'
 import { UiModeProvider } from './UiModeContext'
 import { PostureGlossaryProvider } from './PostureGlossaryProvider'
 
 export default function ExplorerChrome({ children }: { children: ReactNode }) {
   return (
     <UiModeProvider>
-      <PostureGlossaryProvider>
-      <ExplorerDocumentHead />
-      <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>
-      </PostureGlossaryProvider>
+      <DisplayCurrencyProvider>
+        <PostureGlossaryProvider>
+          <ExplorerDocumentHead />
+          <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>
+        </PostureGlossaryProvider>
+      </DisplayCurrencyProvider>
     </UiModeProvider>
   )
 }