Merge pull request #158 from ToryMic/fix/26-trivial-frontend-implement-max-balance-button

[#26] [Trivial] Frontend: Implement Max Balance Button

Author: Junirezz

frontend/src/components/VaultDashboard.test.tsx

@@ -123,6 +123,33 @@ describe("VaultDashboard", () => {
     expect(screen.getByText("1350.50")).toBeInTheDocument();
   });
 
+  it("fills the input with max allowable amount via MAX button", async () => {
+    renderDashboard("GABC123");
+
+    expect(await screen.findByText(/Approve & Deposit/i)).toBeInTheDocument();
+
+    const maxButton = screen.getByRole("button", { name: "MAX" });
+    fireEvent.click(maxButton);
+    const input = screen.getByPlaceholderText("0.00");
+    expect(input).toHaveValue(1250.5);
+
+    fireEvent.click(screen.getByRole("button", { name: "Withdraw" }));
+    fireEvent.click(maxButton);
+    expect(input).toHaveValue(1250.5);
+  });
+
+  it("prevents transactions above the max allowable amount", async () => {
+    renderDashboard("GABC123");
+
+    expect(await screen.findByText(/Approve & Deposit/i)).toBeInTheDocument();
+
+    const input = screen.getByPlaceholderText("0.00");
+    fireEvent.change(input, { target: { value: "2000" } });
+    fireEvent.click(screen.getByRole("button", { name: "Approve & Deposit" }));
+
+    expect(screen.getByText(/Amount exceeds maximum/i)).toBeInTheDocument();
+  });
+
   it("shows a normalized API error message when data loading fails", async () => {
     vi.useRealTimers();
     vi.stubGlobal(

frontend/src/components/VaultDashboard.tsx

@@ -13,6 +13,66 @@ interface VaultDashboardProps {
   usdcBalance?: number;
 }
 
+const VaultDashboard: React.FC<VaultDashboardProps> = ({ walletAddress, usdcBalance = 0 }) => {
+    const { formattedTvl, formattedApy, summary, error, isLoading } = useVault();
+    const toast = useToast();
+    const [activeTab, setActiveTab] = useState<"deposit" | "withdraw">("deposit");
+    const [amount, setAmount] = useState("");
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [pendingBalanceChange, setPendingBalanceChange] = useState(0);
+
+    const yieldRate = formattedApy;
+    const tvl = formattedTvl;
+    const strategy = summary.strategy;
+    const availableBalance = Math.max(0, usdcBalance + pendingBalanceChange);
+    const estimatedUsdcFee = (() => {
+        const feeMatch = summary.networkFeeEstimate.match(/([0-9]*\.?[0-9]+)\s*USDC/i);
+        return feeMatch ? Number(feeMatch[1]) : 0;
+    })();
+    const maxDepositAmount = Math.max(0, availableBalance - estimatedUsdcFee);
+    const maxWithdrawAmount = availableBalance;
+    const maxAllowableAmount = activeTab === "deposit" ? maxDepositAmount : maxWithdrawAmount;
+
+    const handleTransaction = () => {
+        const value = Number(amount);
+        if (!walletAddress || !amount || isNaN(value)) {
+            toast.warning({
+                title: "Enter a valid amount",
+                description: "Choose a wallet and amount before submitting the transaction.",
+            });
+            return;
+        }
+        if (value > maxAllowableAmount) {
+            toast.warning({
+                title: "Amount exceeds maximum",
+                description:
+                    activeTab === "deposit"
+                        ? `You can deposit up to ${maxDepositAmount.toFixed(2)} USDC based on your available balance and fees.`
+                        : `You can withdraw up to ${maxWithdrawAmount.toFixed(2)} USDC.`,
+            });
+            return;
+        }
+        setIsProcessing(true);
+
+        // Simulate transaction delay
+        setTimeout(() => {
+            if (activeTab === "deposit") {
+                setPendingBalanceChange((prev) => prev + value);
+            }
+            if (activeTab === "withdraw") {
+                setPendingBalanceChange((prev) => prev - value);
+            }
+            setAmount("");
+            setIsProcessing(false);
+            toast.success({
+                title: activeTab === "deposit" ? "Deposit queued" : "Withdrawal queued",
+                description:
+                    activeTab === "deposit"
+                        ? `${value.toFixed(2)} USDC has been added to your pending vault activity.`
+                        : `${value.toFixed(2)} USDC has been added to your pending withdrawal activity.`,
+            });
+        }, 2000);
+    };
 const VaultDashboard: React.FC<VaultDashboardProps> = ({
   walletAddress,
   usdcBalance = 0,
@@ -47,6 +107,8 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
       return;
     }
 
+                <div className="glass-panel panel-padding-mobile" style={{ padding: '32px' }}>
+                    {error && <ApiStatusBanner error={error} />}
     if (actionType === "withdraw" && value > availableBalance) {
       toast.warning({
         title: "Insufficient balance",
@@ -114,6 +176,9 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
             </div>
           </div>
 
+            {/* Right Column - User Interaction */}
+            <div style={{ flex: '1 1 400px' }}>
+                <div className="glass-panel panel-padding-mobile" style={{ padding: '32px', position: 'relative', overflow: 'hidden' }}>
           <div
             style={{
               height: "1px",
@@ -244,6 +309,43 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
             }}
           />
 
+                    <div className="flex justify-between items-center" style={{ marginBottom: '16px' }}>
+                        <div style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
+                            {activeTab === 'deposit' ? 'Amount to deposit' : 'Amount to withdraw'}
+                        </div>
+                        <div style={{ color: 'var(--text-secondary)', fontSize: '0.85rem' }}>
+                            Balance: <span style={{ color: 'var(--text-primary)', fontWeight: 600 }}>{walletAddress ? availableBalance.toFixed(2) : '0.00'}</span>
+                        </div>
+                    </div>
+
+                    <div className="input-group" style={{ marginBottom: '24px' }}>
+                        <div className="input-wrapper">
+                            <span style={{ color: 'var(--text-secondary)', paddingRight: '12px', borderRight: '1px solid var(--border-glass)', marginRight: '16px' }}>USDC</span>
+                            <input
+                                className="input-field"
+                                type="number"
+                                placeholder="0.00"
+                                value={amount}
+                                onChange={(e) => setAmount(e.target.value)}
+                            />
+                            <button
+                                style={{
+                                    color: 'var(--accent-cyan)',
+                                    fontSize: '0.8rem',
+                                    fontWeight: 600,
+                                    background: 'var(--accent-cyan-dim)',
+                                    padding: '4px 10px',
+                                    borderRadius: '6px'
+                                }}
+                                onClick={() =>
+                                  setAmount(maxAllowableAmount.toFixed(2))
+                                }
+                                disabled={!walletAddress || maxAllowableAmount <= 0}
+                            >
+                                MAX
+                            </button>
+                        </div>
+                    </div>
           {!walletAddress && (
             <div
               style={{