feat(frontend): surface USDC balance in wallet status area

Displays the connected wallet's USDC balance alongside wallet and RPC status so users can verify available funds directly from the connect area.

Made-with: Cursor

Author: yinkscss

frontend/src/App.tsx

@@ -70,6 +70,7 @@ function AppContent() {
       <div className="app-container">
         <Navbar
           walletAddress={walletAddress}
+          usdcBalance={usdcBalance}
           onConnect={handleConnect}
           onDisconnect={handleDisconnect}
         />

frontend/src/components/Navbar.tsx

@@ -8,12 +8,14 @@ interface NavbarProps {
     currentPath: '/' | '/analytics' | '/portfolio';
     onNavigate: (path: '/' | '/analytics' | '/portfolio') => void;
     walletAddress: string | null;
+    usdcBalance?: number;
     onConnect: (address: string) => void;
     onDisconnect: () => void;
 }
 
 const Navbar: React.FC<NavbarProps> = ({
   walletAddress,
+  usdcBalance = 0,
   onConnect,
   onDisconnect,
 }) => {
@@ -116,6 +118,7 @@ const Navbar: React.FC<NavbarProps> = ({
           <ThemeToggle />
           <WalletConnect
             walletAddress={walletAddress}
+            usdcBalance={usdcBalance}
             onConnect={onConnect}
             onDisconnect={onDisconnect}
           />

frontend/src/components/WalletConnect.tsx

@@ -9,13 +9,14 @@ import { discoverConnectedAddress } from "../lib/stellarAccount";
 
 interface WalletConnectProps {
     walletAddress: string | null;
+    usdcBalance?: number;
     onConnect: (address: string) => void;
     onDisconnect: () => void;
 }
 
 type ConnectionErrorType = 'not-installed' | 'not-allowed' | 'no-address' | 'generic' | null;
 
-const WalletConnect: React.FC<WalletConnectProps> = ({ walletAddress, onConnect, onDisconnect }) => {
+const WalletConnect: React.FC<WalletConnectProps> = ({ walletAddress, usdcBalance = 0, onConnect, onDisconnect }) => {
     const [isConnecting, setIsConnecting] = useState(false);
     const [connectionError, setConnectionError] = useState<ConnectionErrorType>(null);
     const [showTooltip, setShowTooltip] = useState(false);
@@ -200,6 +201,21 @@ const WalletConnect: React.FC<WalletConnectProps> = ({ walletAddress, onConnect,
                 >
                     {t('wallet.rpcPrefix')} {hasCustomRpcConfig ? t('wallet.rpcCustom') : t('wallet.rpcDefault')}
                 </div>
+                <div
+                    className="glass-panel"
+                    style={{
+                        padding: '8px 12px',
+                        borderRadius: '10px',
+                        border: '1px solid var(--border-glass)',
+                        fontSize: '0.75rem',
+                        color: 'var(--text-secondary)',
+                        minWidth: '130px',
+                        textAlign: 'right'
+                    }}
+                    aria-label="USDC wallet balance"
+                >
+                    USDC: <span style={{ color: 'var(--text-primary)', fontWeight: 600 }}>{usdcBalance.toFixed(2)}</span>
+                </div>
                 <button
                     className="btn btn-outline"
                     style={{ padding: '8px', borderRadius: '50%' }}