feat(wallet): surface multi-chain balances in Settings

app/src/components/settings/hooks/useSettingsNavigation.ts

@@ -23,6 +23,7 @@ export type SettingsRoute =
   | 'memory-data'
   | 'memory-debug'
   | 'recovery-phrase'
+  | 'wallet-balances'
   | 'webhooks-debug'
   | 'agent-chat'
   | 'screen-awareness-debug'
@@ -108,6 +109,7 @@ export const useSettingsNavigation = (): SettingsNavigationHook => {
     if (path.includes('/settings/composio-routing')) return 'composio-routing';
     if (path.includes('/settings/intelligence')) return 'intelligence';
     if (path.includes('/settings/recovery-phrase')) return 'recovery-phrase';
+    if (path.includes('/settings/wallet-balances')) return 'wallet-balances';
     if (path.includes('/settings/agent-chat')) return 'agent-chat';
     // Notification routes must be checked in specificity order so the more
     // specific `notification-routing` path doesn't get swallowed by the
@@ -185,6 +187,7 @@ export const useSettingsNavigation = (): SettingsNavigationHook => {
 
       // Leaf panels under account
       case 'recovery-phrase':
+      case 'wallet-balances':
       case 'team':
       case 'privacy':
         return [settingsCrumb, accountCrumb];

app/src/components/settings/panels/WalletBalancesPanel.tsx

@@ -0,0 +1,322 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { useT } from '../../../lib/i18n/I18nContext';
+import { type BalanceInfo, fetchWalletBalances } from '../../../services/walletApi';
+import SettingsHeader from '../components/SettingsHeader';
+import { useSettingsNavigation } from '../hooks/useSettingsNavigation';
+
+// ---------------------------------------------------------------------------
+// Chain badge colours — each chain gets a distinct palette token combination
+// that maps to the project's sage / amber / coral / ocean (primary) design
+// language.  Tailwind class strings are kept literal so the build can detect
+// them via static analysis.
+// ---------------------------------------------------------------------------
+
+const CHAIN_BADGE_CLASS: Record<string, string> = {
+  evm: 'bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300',
+  btc: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+  solana: 'bg-sage-100 text-sage-700 dark:bg-sage-900/30 dark:text-sage-300',
+  tron: 'bg-coral-100 text-coral-700 dark:bg-coral-900/30 dark:text-coral-300',
+};
+
+const CHAIN_LABEL: Record<string, string> = { evm: 'EVM', btc: 'BTC', solana: 'SOL', tron: 'TRX' };
+
+/** Shorten an address to first 6 + last 4 characters: `0x1234…abcd`. */
+function truncateAddress(address: string): string {
+  if (address.length <= 12) return address;
+  return `${address.slice(0, 6)}…${address.slice(-4)}`;
+}
+
+// ---------------------------------------------------------------------------
+// BalanceRow — a single chain entry
+// ---------------------------------------------------------------------------
+
+interface BalanceRowProps {
+  balance: BalanceInfo;
+}
+
+const BalanceRow = ({ balance }: BalanceRowProps) => {
+  const { t } = useT();
+  const [copied, setCopied] = useState(false);
+  // Tracks the most recent "Copied" timer so rapid re-clicks reset the 2s
+  // window rather than stacking independent setTimeouts (the older one would
+  // otherwise flip `copied` back to false while the newest click still wants
+  // to show the checkmark).
+  const copyResetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (copyResetTimerRef.current !== null) {
+        clearTimeout(copyResetTimerRef.current);
+        copyResetTimerRef.current = null;
+      }
+    },
+    []
+  );
+
+  const handleCopyAddress = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(balance.address);
+      setCopied(true);
+      if (copyResetTimerRef.current !== null) {
+        clearTimeout(copyResetTimerRef.current);
+      }
+      copyResetTimerRef.current = setTimeout(() => {
+        setCopied(false);
+        copyResetTimerRef.current = null;
+      }, 2000);
+    } catch {
+      // Clipboard unavailable (no permissions); silently skip.
+    }
+  }, [balance.address]);
+
+  const badgeClass =
+    CHAIN_BADGE_CLASS[balance.chain] ??
+    'bg-stone-100 text-stone-700 dark:bg-neutral-800 dark:text-neutral-300';
+  const chainLabel = CHAIN_LABEL[balance.chain] ?? balance.chain.toUpperCase();
+
+  return (
+    <div className="flex items-center gap-3 px-4 py-3">
+      {/* Chain badge */}
+      <span
+        className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-semibold font-mono min-w-[3rem] justify-center shrink-0 ${badgeClass}`}>
+        {chainLabel}
+      </span>
+
+      {/* Address + copy button */}
+      <div className="flex items-center gap-1.5 min-w-0">
+        <span className="font-mono text-xs text-stone-600 dark:text-neutral-400 truncate">
+          {truncateAddress(balance.address)}
+        </span>
+        <button
+          type="button"
+          onClick={() => void handleCopyAddress()}
+          aria-label={t('walletBalances.copyAddress')}
+          className="shrink-0 text-stone-400 hover:text-stone-600 dark:text-neutral-500 dark:hover:text-neutral-300 transition-colors">
+          {copied ? (
+            <svg
+              className="w-3.5 h-3.5 text-sage-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          ) : (
+            <svg
+              className="w-3.5 h-3.5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}>
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+              />
+            </svg>
+          )}
+        </button>
+      </div>
+
+      {/* Spacer */}
+      <div className="flex-1" />
+
+      {/* Amount + provider status */}
+      <div className="flex items-center gap-2 shrink-0">
+        <div className="text-right">
+          <span
+            title={t('walletBalances.rawBalance').replace('{raw}', balance.raw)}
+            className="text-sm font-medium text-stone-800 dark:text-neutral-100 font-mono">
+            {balance.formatted}
+          </span>
+          <span className="ml-1 text-xs text-stone-500 dark:text-neutral-400">
+            {balance.assetSymbol}
+          </span>
+        </div>
+        {balance.providerStatus !== 'ready' && (
+          <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
+            {t('walletBalances.providerMissing')}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// WalletBalancesPanel — main panel
+// ---------------------------------------------------------------------------
+
+const WalletBalancesPanel = () => {
+  const { t } = useT();
+  const { navigateBack, breadcrumbs } = useSettingsNavigation();
+
+  const [balances, setBalances] = useState<BalanceInfo[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Request-sequencing guard: a slower earlier request must not overwrite a
+  // newer one. `loadBalances` can fire concurrently (mount + Refresh + Retry),
+  // so we tag each call with a monotonic id and drop any response whose id no
+  // longer matches the latest dispatched call.
+  const latestRequestIdRef = useRef(0);
+
+  const loadBalances = useCallback(async () => {
+    const requestId = ++latestRequestIdRef.current;
+    setLoading(true);
+    setError(null);
+    try {
+      const rows = await fetchWalletBalances();
+      if (requestId !== latestRequestIdRef.current) return;
+      setBalances(rows);
+    } catch (err) {
+      if (requestId !== latestRequestIdRef.current) return;
+      const message = err instanceof Error ? err.message : String(err);
+      // Log the raw backend phrasing for diagnostics; the UI surfaces a
+      // translated, user-facing copy via `walletBalances.errorGeneric`.
+      console.debug('[walletBalances] fetch failed:', message);
+      setError(message);
+    } finally {
+      if (requestId === latestRequestIdRef.current) {
+        setLoading(false);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadBalances();
+  }, [loadBalances]);
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <div className="flex items-center justify-center gap-2 py-10 text-stone-500 dark:text-neutral-400">
+          <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
+          </svg>
+          <span className="text-sm">{t('walletBalances.loading')}</span>
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="px-4 py-4">
+          <div
+            role="alert"
+            className="flex items-start gap-2.5 p-3 mb-4 rounded-xl bg-coral-50 dark:bg-coral-500/10 border border-coral-200 dark:border-coral-500/30">
+            <svg
+              className="w-4 h-4 text-coral-500 flex-shrink-0 mt-0.5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}>
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+              />
+            </svg>
+            <p className="text-xs text-coral-700 dark:text-coral-300 leading-relaxed">
+              {t('walletBalances.errorGeneric')}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => void loadBalances()}
+            className="btn-primary w-full py-2.5 text-sm font-medium rounded-xl">
+            {t('walletBalances.retry')}
+          </button>
+        </div>
+      );
+    }
+
+    if (balances !== null && balances.length === 0) {
+      return (
+        <div className="px-4 py-8 text-center">
+          <div className="w-12 h-12 rounded-full bg-stone-100 dark:bg-neutral-800 flex items-center justify-center mx-auto mb-3">
+            <svg
+              className="w-6 h-6 text-stone-400 dark:text-neutral-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.5}>
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18-3a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6m18 0V5.25A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25V6"
+              />
+            </svg>
+          </div>
+          <p className="text-sm text-stone-500 dark:text-neutral-400 leading-relaxed">
+            {t('walletBalances.emptyState')}
+          </p>
+        </div>
+      );
+    }
+
+    if (balances && balances.length > 0) {
+      return (
+        <div className="divide-y divide-stone-100 dark:divide-neutral-800">
+          {balances.map((balance, index) => (
+            <BalanceRow key={`${balance.chain}-${index}`} balance={balance} />
+          ))}
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <div>
+      <div className="flex items-center justify-between pr-4">
+        <SettingsHeader
+          title={t('walletBalances.title')}
+          showBackButton
+          onBack={navigateBack}
+          breadcrumbs={breadcrumbs}
+        />
+        <button
+          type="button"
+          onClick={() => void loadBalances()}
+          disabled={loading}
+          aria-label={t('walletBalances.refresh')}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 disabled:opacity-50 transition-colors">
+          <svg
+            className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}>
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+            />
+          </svg>
+          {t('walletBalances.refresh')}
+        </button>
+      </div>
+
+      <div className="bg-white dark:bg-neutral-900 rounded-xl border border-stone-200 dark:border-neutral-800 mx-4 mb-4 overflow-hidden">
+        {renderContent()}
+      </div>
+    </div>
+  );
+};
+
+export default WalletBalancesPanel;