Merge branch 'main' into fix/245-frontend-add-fee-display-before-transaction-confirmation

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/VaultDashboard.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Activity, ShieldCheck, TrendingUp, Wallet as WalletIcon } from "./icons";
+import { Activity, ShieldCheck, TrendingUp, Wallet as WalletIcon, Loader2 } from "./icons";
 import { hasCustomRpcConfig, networkConfig } from "../config/network";
 import { useVault } from "../context/VaultContext";
 import ApiStatusBanner from "./ApiStatusBanner";
@@ -256,6 +256,15 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
 
                 <button className="btn btn-primary" style={{ width: "100%", padding: "16px" }} onClick={() => handleTransaction(tab)} disabled={isProcessing !== null || !amount || Number(amount) <= 0}>
                   {isProcessing === tab ? "Processing Transaction..." : tab === "deposit" ? "Approve & Deposit" : "Withdraw Funds"}
+                <button className="btn btn-primary" style={{ width: "100%", padding: "16px", display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" }} onClick={() => handleTransaction(tab)} disabled={isProcessing !== null || !amount || Number(amount) <= 0}>
+                  {isProcessing === tab ? (
+                    <>
+                      <Loader2 size={16} className="spin" style={{ animation: "spin 0.9s linear infinite" }} />
+                      Processing Transaction...
+                    </>
+                  ) : (
+                    tab === "deposit" ? "Approve & Deposit" : "Withdraw Funds"
+                  )}
                 </button>
               </TabsContent>
             ))}

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%' }}