Fix dashboard trend test expectations

Add dual currency token display
2026-04-16 13:48:23 -07:00 · 2026-04-16 13:16:18 -07:00
11 changed files with 290 additions and 445 deletions
--- a/backend/api/rest/auth.go
+++ b/backend/api/rest/auth.go
@@ -141,12 +141,49 @@ type internalValidateAPIKeyRequest struct {
 	LastIP       string `json:"last_ip"`
 }

-// rpcAccessProducts returns the Chain 138 RPC access catalog. The source
-// of truth lives in config/rpc_products.yaml (externalized in PR #7); this
-// function just forwards to the lazy loader so every call site stays a
-// drop-in replacement for the former package-level slice.
-func rpcAccessProducts() []accessProduct {
-	return rpcAccessProductCatalog()
+var rpcAccessProducts = []accessProduct{
+	{
+		Slug:               "core-rpc",
+		Name:               "Core RPC",
+		Provider:           "besu-core",
+		VMID:               2101,
+		HTTPURL:            "https://rpc-http-prv.d-bis.org",
+		WSURL:              "wss://rpc-ws-prv.d-bis.org",
+		DefaultTier:        "enterprise",
+		RequiresApproval:   true,
+		BillingModel:       "contract",
+		Description:        "Private Chain 138 Core RPC for operator-grade administration and sensitive workloads.",
+		UseCases:           []string{"core deployments", "operator automation", "private infrastructure integration"},
+		ManagementFeatures: []string{"dedicated API key", "higher rate ceiling", "operator-oriented access controls"},
+	},
+	{
+		Slug:               "alltra-rpc",
+		Name:               "Alltra RPC",
+		Provider:           "alltra",
+		VMID:               2102,
+		HTTPURL:            "http://192.168.11.212:8545",
+		WSURL:              "ws://192.168.11.212:8546",
+		DefaultTier:        "pro",
+		RequiresApproval:   false,
+		BillingModel:       "subscription",
+		Description:        "Dedicated Alltra-managed RPC lane for partner traffic, subscription access, and API-key-gated usage.",
+		UseCases:           []string{"tenant RPC access", "managed partner workloads", "metered commercial usage"},
+		ManagementFeatures: []string{"subscription-ready key issuance", "rate governance", "partner-specific traffic lane"},
+	},
+	{
+		Slug:               "thirdweb-rpc",
+		Name:               "Thirdweb RPC",
+		Provider:           "thirdweb",
+		VMID:               2103,
+		HTTPURL:            "http://192.168.11.217:8545",
+		WSURL:              "ws://192.168.11.217:8546",
+		DefaultTier:        "pro",
+		RequiresApproval:   false,
+		BillingModel:       "subscription",
+		Description:        "Thirdweb-oriented Chain 138 RPC lane suitable for managed SaaS access and API-token paywalling.",
+		UseCases:           []string{"thirdweb integrations", "commercial API access", "managed dApp traffic"},
+		ManagementFeatures: []string{"API token issuance", "usage tiering", "future paywall/subscription hooks"},
+	},
 }

 func (s *Server) generateUserJWT(user *auth.User) (string, time.Time, error) {
@@ -329,7 +366,7 @@ func (s *Server) handleAccessProducts(w http.ResponseWriter, r *http.Request) {
 	}
 	w.Header().Set("Content-Type", "application/json")
 	_ = json.NewEncoder(w).Encode(map[string]any{
-		"products": rpcAccessProducts(),
+		"products": rpcAccessProducts,
 		"note":     "Products are ready for auth, API key, and subscription gating. Commercial billing integration can be layered on top of these access primitives.",
 	})
 }
@@ -587,7 +624,7 @@ func firstNonEmpty(values ...string) string {
 }

 func findAccessProduct(slug string) *accessProduct {
-	for _, product := range rpcAccessProducts() {
+	for _, product := range rpcAccessProducts {
 		if product.Slug == slug {
 			copy := product
 			return &copy
--- a/backend/api/rest/rpc_products_config.go
+++ b/backend/api/rest/rpc_products_config.go
@@ -1,206 +0,0 @@
-package rest
-
-import (
-	"errors"
-	"fmt"
-	"log"
-	"os"
-	"path/filepath"
-	"strings"
-	"sync"
-
-	"gopkg.in/yaml.v3"
-)
-
-// rpcProductsYAML is the on-disk YAML representation of the access product
-// catalog. It matches config/rpc_products.yaml at the repo root.
-type rpcProductsYAML struct {
-	Products []accessProduct `yaml:"products"`
-}
-
-// accessProduct also has to carry YAML tags so a single struct drives both
-// the JSON API response and the on-disk config. (JSON tags are unchanged.)
-// These yaml tags mirror the json tags exactly to avoid drift.
-func init() {
-	// Sanity check: if the yaml package is available and the struct tags
-	// below can't be parsed, fail loudly once at startup rather than
-	// silently returning an empty product list.
-	var _ yaml.Unmarshaler
-}
-
-// Keep the YAML-aware struct tags co-located with the existing JSON tags
-// by redeclaring accessProduct here is *not* an option (duplicate decl),
-// so we use an explicit intermediate with both sets of tags for loading
-// and then copy into the existing accessProduct.
-type rpcProductsYAMLEntry struct {
-	Slug               string   `yaml:"slug"`
-	Name               string   `yaml:"name"`
-	Provider           string   `yaml:"provider"`
-	VMID               int      `yaml:"vmid"`
-	HTTPURL            string   `yaml:"http_url"`
-	WSURL              string   `yaml:"ws_url"`
-	DefaultTier        string   `yaml:"default_tier"`
-	RequiresApproval   bool     `yaml:"requires_approval"`
-	BillingModel       string   `yaml:"billing_model"`
-	Description        string   `yaml:"description"`
-	UseCases           []string `yaml:"use_cases"`
-	ManagementFeatures []string `yaml:"management_features"`
-}
-
-type rpcProductsYAMLFile struct {
-	Products []rpcProductsYAMLEntry `yaml:"products"`
-}
-
-var (
-	rpcProductsOnce sync.Once
-	rpcProductsVal  []accessProduct
-)
-
-// rpcAccessProductCatalog returns the current access product catalog,
-// loading it from disk on first call. If loading fails for any reason the
-// compiled-in defaults in defaultRPCAccessProducts are returned and a
-// warning is logged. Callers should treat the returned slice as read-only.
-func rpcAccessProductCatalog() []accessProduct {
-	rpcProductsOnce.Do(func() {
-		loaded, path, err := loadRPCAccessProducts()
-		switch {
-		case err != nil:
-			log.Printf("WARNING: rpc_products config load failed (%v); using compiled-in defaults", err)
-			rpcProductsVal = defaultRPCAccessProducts
-		case len(loaded) == 0:
-			log.Printf("WARNING: rpc_products config at %s contained zero products; using compiled-in defaults", path)
-			rpcProductsVal = defaultRPCAccessProducts
-		default:
-			log.Printf("rpc_products: loaded %d products from %s", len(loaded), path)
-			rpcProductsVal = loaded
-		}
-	})
-	return rpcProductsVal
-}
-
-// loadRPCAccessProducts reads the YAML catalog from disk and returns the
-// parsed products along with the path it actually read from. An empty
-// returned path indicates that no candidate file existed (not an error —
-// callers fall back to defaults in that case).
-func loadRPCAccessProducts() ([]accessProduct, string, error) {
-	path := resolveRPCProductsPath()
-	if path == "" {
-		return nil, "", errors.New("no rpc_products.yaml found (set RPC_PRODUCTS_PATH or place config/rpc_products.yaml next to the binary)")
-	}
-	raw, err := os.ReadFile(path) // #nosec G304 -- path comes from env/repo-known locations
-	if err != nil {
-		return nil, path, fmt.Errorf("read %s: %w", path, err)
-	}
-	var decoded rpcProductsYAMLFile
-	if err := yaml.Unmarshal(raw, &decoded); err != nil {
-		return nil, path, fmt.Errorf("parse %s: %w", path, err)
-	}
-	products := make([]accessProduct, 0, len(decoded.Products))
-	seen := make(map[string]struct{}, len(decoded.Products))
-	for i, entry := range decoded.Products {
-		if strings.TrimSpace(entry.Slug) == "" {
-			return nil, path, fmt.Errorf("%s: product[%d] has empty slug", path, i)
-		}
-		if _, dup := seen[entry.Slug]; dup {
-			return nil, path, fmt.Errorf("%s: duplicate product slug %q", path, entry.Slug)
-		}
-		seen[entry.Slug] = struct{}{}
-		if strings.TrimSpace(entry.HTTPURL) == "" {
-			return nil, path, fmt.Errorf("%s: product %q is missing http_url", path, entry.Slug)
-		}
-		products = append(products, accessProduct{
-			Slug:               entry.Slug,
-			Name:               entry.Name,
-			Provider:           entry.Provider,
-			VMID:               entry.VMID,
-			HTTPURL:            strings.TrimSpace(entry.HTTPURL),
-			WSURL:              strings.TrimSpace(entry.WSURL),
-			DefaultTier:        entry.DefaultTier,
-			RequiresApproval:   entry.RequiresApproval,
-			BillingModel:       entry.BillingModel,
-			Description:        strings.TrimSpace(entry.Description),
-			UseCases:           entry.UseCases,
-			ManagementFeatures: entry.ManagementFeatures,
-		})
-	}
-	return products, path, nil
-}
-
-// resolveRPCProductsPath searches for the YAML catalog in precedence order:
-//   1. $RPC_PRODUCTS_PATH (absolute or relative to cwd)
-//   2. $EXPLORER_BACKEND_DIR/config/rpc_products.yaml
-//   3. <cwd>/backend/config/rpc_products.yaml
-//   4. <cwd>/config/rpc_products.yaml
-//
-// Returns "" when no candidate exists.
-func resolveRPCProductsPath() string {
-	if explicit := strings.TrimSpace(os.Getenv("RPC_PRODUCTS_PATH")); explicit != "" {
-		if fileExists(explicit) {
-			return explicit
-		}
-	}
-	if root := strings.TrimSpace(os.Getenv("EXPLORER_BACKEND_DIR")); root != "" {
-		candidate := filepath.Join(root, "config", "rpc_products.yaml")
-		if fileExists(candidate) {
-			return candidate
-		}
-	}
-	for _, candidate := range []string{
-		filepath.Join("backend", "config", "rpc_products.yaml"),
-		filepath.Join("config", "rpc_products.yaml"),
-	} {
-		if fileExists(candidate) {
-			return candidate
-		}
-	}
-	return ""
-}
-
-// defaultRPCAccessProducts is the emergency fallback used when the YAML
-// catalog is absent or unreadable. Kept in sync with config/rpc_products.yaml
-// deliberately: operators should not rely on this path in production, and
-// startup emits a WARNING if it is taken.
-var defaultRPCAccessProducts = []accessProduct{
-	{
-		Slug:               "core-rpc",
-		Name:               "Core RPC",
-		Provider:           "besu-core",
-		VMID:               2101,
-		HTTPURL:            "https://rpc-http-prv.d-bis.org",
-		WSURL:              "wss://rpc-ws-prv.d-bis.org",
-		DefaultTier:        "enterprise",
-		RequiresApproval:   true,
-		BillingModel:       "contract",
-		Description:        "Private Chain 138 Core RPC for operator-grade administration and sensitive workloads.",
-		UseCases:           []string{"core deployments", "operator automation", "private infrastructure integration"},
-		ManagementFeatures: []string{"dedicated API key", "higher rate ceiling", "operator-oriented access controls"},
-	},
-	{
-		Slug:               "alltra-rpc",
-		Name:               "Alltra RPC",
-		Provider:           "alltra",
-		VMID:               2102,
-		HTTPURL:            "http://192.168.11.212:8545",
-		WSURL:              "ws://192.168.11.212:8546",
-		DefaultTier:        "pro",
-		RequiresApproval:   false,
-		BillingModel:       "subscription",
-		Description:        "Dedicated Alltra-managed RPC lane for partner traffic, subscription access, and API-key-gated usage.",
-		UseCases:           []string{"tenant RPC access", "managed partner workloads", "metered commercial usage"},
-		ManagementFeatures: []string{"subscription-ready key issuance", "rate governance", "partner-specific traffic lane"},
-	},
-	{
-		Slug:               "thirdweb-rpc",
-		Name:               "Thirdweb RPC",
-		Provider:           "thirdweb",
-		VMID:               2103,
-		HTTPURL:            "http://192.168.11.217:8545",
-		WSURL:              "ws://192.168.11.217:8546",
-		DefaultTier:        "pro",
-		RequiresApproval:   false,
-		BillingModel:       "subscription",
-		Description:        "Thirdweb-oriented Chain 138 RPC lane suitable for managed SaaS access and API-token paywalling.",
-		UseCases:           []string{"thirdweb integrations", "commercial API access", "managed dApp traffic"},
-		ManagementFeatures: []string{"API token issuance", "usage tiering", "future paywall/subscription hooks"},
-	},
-}
--- a/backend/api/rest/rpc_products_config_test.go
+++ b/backend/api/rest/rpc_products_config_test.go
@@ -1,111 +0,0 @@
-package rest
-
-import (
-	"os"
-	"path/filepath"
-	"testing"
-)
-
-func TestLoadRPCAccessProductsFromRepoDefault(t *testing.T) {
-	// The repo ships config/rpc_products.yaml relative to backend/. When
-	// running `go test ./...` from the repo root, the loader's relative
-	// search path finds it there. Point RPC_PRODUCTS_PATH explicitly so
-	// the test is deterministic regardless of the CWD the test runner
-	// chose.
-	repoRoot, err := findBackendRoot()
-	if err != nil {
-		t.Fatalf("locate backend root: %v", err)
-	}
-	t.Setenv("RPC_PRODUCTS_PATH", filepath.Join(repoRoot, "config", "rpc_products.yaml"))
-
-	products, path, err := loadRPCAccessProducts()
-	if err != nil {
-		t.Fatalf("loadRPCAccessProducts: %v", err)
-	}
-	if path == "" {
-		t.Fatalf("loadRPCAccessProducts returned empty path")
-	}
-	if len(products) < 3 {
-		t.Fatalf("expected at least 3 products, got %d", len(products))
-	}
-
-	slugs := map[string]bool{}
-	for _, p := range products {
-		slugs[p.Slug] = true
-		if p.HTTPURL == "" {
-			t.Errorf("product %q has empty http_url", p.Slug)
-		}
-	}
-	for _, required := range []string{"core-rpc", "alltra-rpc", "thirdweb-rpc"} {
-		if !slugs[required] {
-			t.Errorf("expected product slug %q in catalog", required)
-		}
-	}
-}
-
-func TestLoadRPCAccessProductsRejectsDuplicateSlug(t *testing.T) {
-	dir := t.TempDir()
-	path := filepath.Join(dir, "rpc_products.yaml")
-	yaml := `products:
-  - slug: a
-    http_url: https://a.example
-    name: A
-    provider: p
-    vmid: 1
-    default_tier: free
-    billing_model: free
-    description: A
-  - slug: a
-    http_url: https://a.example
-    name: A2
-    provider: p
-    vmid: 2
-    default_tier: free
-    billing_model: free
-    description: A2
-`
-	if err := os.WriteFile(path, []byte(yaml), 0o600); err != nil {
-		t.Fatalf("write fixture: %v", err)
-	}
-	t.Setenv("RPC_PRODUCTS_PATH", path)
-
-	if _, _, err := loadRPCAccessProducts(); err == nil {
-		t.Fatal("expected duplicate-slug error, got nil")
-	}
-}
-
-func TestLoadRPCAccessProductsRejectsMissingHTTPURL(t *testing.T) {
-	dir := t.TempDir()
-	path := filepath.Join(dir, "rpc_products.yaml")
-	if err := os.WriteFile(path, []byte("products:\n  - slug: x\n    name: X\n"), 0o600); err != nil {
-		t.Fatalf("write fixture: %v", err)
-	}
-	t.Setenv("RPC_PRODUCTS_PATH", path)
-
-	if _, _, err := loadRPCAccessProducts(); err == nil {
-		t.Fatal("expected missing-http_url error, got nil")
-	}
-}
-
-// findBackendRoot walks up from the test working directory until it finds
-// a directory containing a go.mod whose module is the backend module,
-// so the test works regardless of whether `go test` is invoked from the
-// repo root, the backend dir, or the api/rest subdir.
-func findBackendRoot() (string, error) {
-	cwd, err := os.Getwd()
-	if err != nil {
-		return "", err
-	}
-	for {
-		goMod := filepath.Join(cwd, "go.mod")
-		if _, err := os.Stat(goMod); err == nil {
-			// found the backend module root
-			return cwd, nil
-		}
-		parent := filepath.Dir(cwd)
-		if parent == cwd {
-			return "", os.ErrNotExist
-		}
-		cwd = parent
-	}
-}
--- a/backend/config/rpc_products.yaml
+++ b/backend/config/rpc_products.yaml
@@ -1,97 +0,0 @@
-# Chain 138 RPC access product catalog.
-#
-# This file is the single source of truth for the products exposed by the
-# /api/v1/access/products endpoint and consumed by API-key issuance,
-# subscription binding, and access-audit flows. Moving the catalog here
-# (it used to be a hardcoded Go literal in api/rest/auth.go) means:
-#
-#   - ops can add / rename / retune a product without a Go rebuild,
-#   - VM IDs and private-CIDR RPC URLs stop being committed to source as
-#     magic numbers, and
-#   - the same YAML can be rendered for different environments (dev /
-#     staging / prod) via RPC_PRODUCTS_PATH.
-#
-# Path resolution at startup:
-#   1. $RPC_PRODUCTS_PATH if set (absolute or relative to the working dir),
-#   2. $EXPLORER_BACKEND_DIR/config/rpc_products.yaml if that env var is set,
-#   3. the first of <cwd>/backend/config/rpc_products.yaml or
-#      <cwd>/config/rpc_products.yaml that exists,
-#   4. the compiled-in fallback slice (legacy behaviour; logs a warning).
-#
-# Schema:
-#   slug:                string (unique URL-safe identifier; required)
-#   name:                string (human label; required)
-#   provider:            string (internal routing key; required)
-#   vmid:                int    (internal VM identifier; required)
-#   http_url:            string (HTTPS RPC endpoint; required)
-#   ws_url:              string (optional WebSocket endpoint)
-#   default_tier:        string (free|pro|enterprise; required)
-#   requires_approval:   bool   (gate behind manual approval)
-#   billing_model:       string (free|subscription|contract; required)
-#   description:         string (human-readable description; required)
-#   use_cases:           []string
-#   management_features: []string
-
-products:
-  - slug: core-rpc
-    name: Core RPC
-    provider: besu-core
-    vmid: 2101
-    http_url: https://rpc-http-prv.d-bis.org
-    ws_url: wss://rpc-ws-prv.d-bis.org
-    default_tier: enterprise
-    requires_approval: true
-    billing_model: contract
-    description: >-
-      Private Chain 138 Core RPC for operator-grade administration and
-      sensitive workloads.
-    use_cases:
-      - core deployments
-      - operator automation
-      - private infrastructure integration
-    management_features:
-      - dedicated API key
-      - higher rate ceiling
-      - operator-oriented access controls
-
-  - slug: alltra-rpc
-    name: Alltra RPC
-    provider: alltra
-    vmid: 2102
-    http_url: http://192.168.11.212:8545
-    ws_url: ws://192.168.11.212:8546
-    default_tier: pro
-    requires_approval: false
-    billing_model: subscription
-    description: >-
-      Dedicated Alltra-managed RPC lane for partner traffic, subscription
-      access, and API-key-gated usage.
-    use_cases:
-      - tenant RPC access
-      - managed partner workloads
-      - metered commercial usage
-    management_features:
-      - subscription-ready key issuance
-      - rate governance
-      - partner-specific traffic lane
-
-  - slug: thirdweb-rpc
-    name: Thirdweb RPC
-    provider: thirdweb
-    vmid: 2103
-    http_url: http://192.168.11.217:8545
-    ws_url: ws://192.168.11.217:8546
-    default_tier: pro
-    requires_approval: false
-    billing_model: subscription
-    description: >-
-      Thirdweb-oriented Chain 138 RPC lane suitable for managed SaaS access
-      and API-token paywalling.
-    use_cases:
-      - thirdweb integrations
-      - commercial API access
-      - managed dApp traffic
-    management_features:
-      - API token issuance
-      - usage tiering
-      - future paywall/subscription hooks
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -13,7 +13,6 @@ require (
 	github.com/redis/go-redis/v9 v9.17.2
 	github.com/stretchr/testify v1.11.1
 	golang.org/x/crypto v0.36.0
-	gopkg.in/yaml.v3 v3.0.1
 )

 require (
@@ -52,5 +51,6 @@ require (
 	golang.org/x/text v0.23.0 // indirect
 	golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d // indirect
 	google.golang.org/protobuf v1.33.0 // indirect
+	gopkg.in/yaml.v3 v3.0.1 // indirect
 	rsc.io/tmplfunc v0.0.3 // indirect
 )
--- a/frontend/src/components/common/DisplayCurrencyContext.tsx
+++ b/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
+}
--- a/frontend/src/components/common/ExplorerChrome.tsx
+++ b/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>
  )
 }
--- a/frontend/src/pages/tokens/[address].tsx
+++ b/frontend/src/pages/tokens/[address].tsx
@@ -12,8 +12,10 @@ import { DetailRow } from '@/components/common/DetailRow'
 import EntityBadge from '@/components/common/EntityBadge'
 import GruStandardsCard from '@/components/common/GruStandardsCard'
 import { formatTokenAmount, formatTimestamp } from '@/utils/format'
+import { useDisplayCurrency } from '@/components/common/DisplayCurrencyContext'
 import { getGruStandardsProfileSafe, type GruStandardsProfile } from '@/services/api/gru'
 import { getGruExplorerMetadata } from '@/services/api/gruExplorerData'
+import { formatUsdValue, getSecondaryDisplayValue } from '@/utils/displayCurrency'

 function isValidAddress(value: string) {
  return /^0x[a-fA-F0-9]{40}$/.test(value)
@@ -31,15 +33,12 @@ function toNumeric(value: string | number | null | undefined): number | null {
 function formatUsd(value: string | number | null | undefined): string {
  const numeric = toNumeric(value)
  if (numeric == null) return 'Unavailable'
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    maximumFractionDigits: numeric >= 100 ? 0 : 2,
-  }).format(numeric)
+  return formatUsdValue(numeric)
 }

 export default function TokenDetailPage() {
  const router = useRouter()
+  const { currency, setCurrency } = useDisplayCurrency()
  const address = typeof router.query.address === 'string' ? router.query.address : ''
  const isValidTokenAddress = address !== '' && isValidAddress(address)

@@ -177,6 +176,28 @@ export default function TokenDetailPage() {
    [address, token?.address, token?.symbol],
  )

+  const renderAmountWithDisplayCurrency = useCallback(
+    (rawAmount: string | number | null | undefined, decimals: number, symbol?: string | null) => {
+      const primaryAmount = formatTokenAmount(rawAmount, decimals, symbol)
+      const secondaryAmount = getSecondaryDisplayValue({
+        rawAmount,
+        decimals,
+        exchangeRate: token?.exchange_rate,
+        displayCurrency: currency,
+      })
+
+      if (!secondaryAmount) return primaryAmount
+
+      return (
+        <div className="space-y-1">
+          <div>{primaryAmount}</div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">Approx. {secondaryAmount}</div>
+        </div>
+      )
+    },
+    [currency, token?.exchange_rate],
+  )
+
  const holderColumns = [
    {
      header: 'Holder',
@@ -188,7 +209,7 @@ export default function TokenDetailPage() {
    },
    {
      header: 'Balance',
-      accessor: (holder: TokenHolder) => formatTokenAmount(holder.value, token?.decimals || holder.token_decimals, token?.symbol),
+      accessor: (holder: TokenHolder) => renderAmountWithDisplayCurrency(holder.value, token?.decimals || holder.token_decimals, token?.symbol),
    },
  ]

@@ -238,7 +259,7 @@ export default function TokenDetailPage() {
    },
    {
      header: 'Amount',
-      accessor: (transfer: AddressTokenTransfer) => formatTokenAmount(transfer.value, transfer.token_decimals, transfer.token_symbol),
+      accessor: (transfer: AddressTokenTransfer) => renderAmountWithDisplayCurrency(transfer.value, transfer.token_decimals, transfer.token_symbol),
    },
    {
      header: 'When',
@@ -316,9 +337,27 @@ export default function TokenDetailPage() {
              </DetailRow>
              <DetailRow label="Type">{token.type || 'Unknown'}</DetailRow>
              <DetailRow label="Decimals">{token.decimals}</DetailRow>
+              <DetailRow label="Display Currency">
+                <div className="space-y-2">
+                  <label className="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+                    <span className="sr-only">Display currency</span>
+                    <select
+                      value={currency}
+                      onChange={(event) => setCurrency(event.target.value === 'usd' ? 'usd' : 'native')}
+                      className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:ring-primary-900"
+                    >
+                      <option value="native">Native token amounts</option>
+                      <option value="usd">USD estimate</option>
+                    </select>
+                  </label>
+                  <div className="text-xs text-gray-500 dark:text-gray-400">
+                    USD estimates use the explorer&apos;s current indicative token price and appear as a secondary line when available.
+                  </div>
+                </div>
+              </DetailRow>
              {token.total_supply && (
                <DetailRow label="Total Supply">
-                  {formatTokenAmount(token.total_supply, token.decimals, token.symbol)}
+                  {renderAmountWithDisplayCurrency(token.total_supply, token.decimals, token.symbol)}
                </DetailRow>
              )}
              {token.holders != null && (
--- a/frontend/src/utils/dashboard.test.ts
+++ b/frontend/src/utils/dashboard.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest'
 import type { Block } from '@/services/api/blocks'
-import type { ExplorerStats } from '@/services/api/stats'
+import type { ExplorerStats, ExplorerTransactionTrendPoint } from '@/services/api/stats'
 import { loadDashboardData } from './dashboard'

 const sampleStats: ExplorerStats = {
@@ -23,6 +23,17 @@ const sampleBlocks: Block[] = [
  },
 ]

+const sampleTrend: ExplorerTransactionTrendPoint[] = [
+  {
+    date: '2026-04-03',
+    count: 11,
+  },
+  {
+    date: '2026-04-04',
+    count: 17,
+  },
+]
+
 describe('loadDashboardData', () => {
  it('returns both stats and recent blocks when both loaders succeed', async () => {
    const result = await loadDashboardData({
@@ -33,6 +44,7 @@ describe('loadDashboardData', () => {
    expect(result).toEqual({
      stats: sampleStats,
      recentBlocks: sampleBlocks,
+      recentTransactionTrend: [],
    })
  })

@@ -50,6 +62,7 @@ describe('loadDashboardData', () => {
    expect(result).toEqual({
      stats: null,
      recentBlocks: sampleBlocks,
+      recentTransactionTrend: [],
    })
    expect(onError).toHaveBeenCalledTimes(1)
    expect(onError).toHaveBeenCalledWith('stats', expect.any(Error))
@@ -69,8 +82,44 @@ describe('loadDashboardData', () => {
    expect(result).toEqual({
      stats: sampleStats,
      recentBlocks: [],
+      recentTransactionTrend: [],
    })
    expect(onError).toHaveBeenCalledTimes(1)
    expect(onError).toHaveBeenCalledWith('blocks', expect.any(Error))
  })
+
+  it('returns the recent transaction trend when the optional loader succeeds', async () => {
+    const result = await loadDashboardData({
+      loadStats: async () => sampleStats,
+      loadRecentBlocks: async () => sampleBlocks,
+      loadRecentTransactionTrend: async () => sampleTrend,
+    })
+
+    expect(result).toEqual({
+      stats: sampleStats,
+      recentBlocks: sampleBlocks,
+      recentTransactionTrend: sampleTrend,
+    })
+  })
+
+  it('falls back to an empty recent transaction trend when the optional loader fails', async () => {
+    const onError = vi.fn()
+
+    const result = await loadDashboardData({
+      loadStats: async () => sampleStats,
+      loadRecentBlocks: async () => sampleBlocks,
+      loadRecentTransactionTrend: async () => {
+        throw new Error('trend unavailable')
+      },
+      onError,
+    })
+
+    expect(result).toEqual({
+      stats: sampleStats,
+      recentBlocks: sampleBlocks,
+      recentTransactionTrend: [],
+    })
+    expect(onError).toHaveBeenCalledTimes(1)
+    expect(onError).toHaveBeenCalledWith('trend', expect.any(Error))
+  })
 })
--- a/frontend/src/utils/displayCurrency.test.ts
+++ b/frontend/src/utils/displayCurrency.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+import { formatUsdValue, getSecondaryDisplayValue } from './displayCurrency'
+
+describe('formatUsdValue', () => {
+  it('keeps cents for smaller values', () => {
+    expect(formatUsdValue(4.5)).toBe('$4.50')
+  })
+
+  it('drops cents for larger rounded values', () => {
+    expect(formatUsdValue(1250)).toBe('$1,250')
+  })
+})
+
+describe('getSecondaryDisplayValue', () => {
+  it('returns null when the user prefers native display', () => {
+    expect(
+      getSecondaryDisplayValue({
+        rawAmount: '4500000',
+        decimals: 6,
+        exchangeRate: 1,
+        displayCurrency: 'native',
+      }),
+    ).toBeNull()
+  })
+
+  it('formats a USD secondary value from token units and exchange rate', () => {
+    expect(
+      getSecondaryDisplayValue({
+        rawAmount: '4500000',
+        decimals: 6,
+        exchangeRate: 1,
+        displayCurrency: 'usd',
+      }),
+    ).toBe('$4.50')
+  })
+
+  it('returns null when no usable exchange rate is available', () => {
+    expect(
+      getSecondaryDisplayValue({
+        rawAmount: '4500000',
+        decimals: 6,
+        exchangeRate: null,
+        displayCurrency: 'usd',
+      }),
+    ).toBeNull()
+  })
+})
--- a/frontend/src/utils/displayCurrency.ts
+++ b/frontend/src/utils/displayCurrency.ts
@@ -0,0 +1,35 @@
+import { formatUnits } from './format'
+
+function toFiniteNumber(value: string | number | null | undefined): number | null {
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (typeof value === 'string' && value.trim() !== '') {
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) return parsed
+  }
+  return null
+}
+
+export function formatUsdValue(value: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: Math.abs(value) >= 100 ? 0 : 2,
+  }).format(value)
+}
+
+export function getSecondaryDisplayValue(input: {
+  rawAmount: string | number | null | undefined
+  decimals?: number
+  exchangeRate?: string | number | null
+  displayCurrency: 'native' | 'usd'
+}): string | null {
+  if (input.displayCurrency !== 'usd') return null
+
+  const exchangeRate = toFiniteNumber(input.exchangeRate)
+  if (exchangeRate == null || exchangeRate < 0) return null
+
+  const normalizedAmount = Number(formatUnits(input.rawAmount, input.decimals ?? 18, 8))
+  if (!Number.isFinite(normalizedAmount)) return null
+
+  return formatUsdValue(normalizedAmount * exchangeRate)
+}
Author	SHA1	Message	Date
defiQUG	6a27d2c0e8	Fix dashboard trend test expectations	2026-04-16 13:48:23 -07:00
defiQUG	cc70283171	Add dual currency token display	2026-04-16 13:16:18 -07:00