Update COMMIT_MESSAGE.txt

COMMIT_MESSAGE.txt

@@ -1,5 +1,6 @@
 feat(ui): redesign ServerError component with calm UX and accessibility
 
+
 BREAKING CHANGE: ServerError API simplified - onGoHome prop removed
 
 This is a complete UX/UI redesign of the ServerError component following

src/components/Dashboard.css

@@ -1,3 +1,33 @@
+.low-balance-banner {
+  background: color-mix(in srgb, var(--warning) 15%, transparent);
+  border: 1px solid var(--warning);
+  border-radius: var(--radius-lg);
+  padding: 16px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.low-balance-banner__content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.low-balance-banner__text {
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.low-balance-banner__actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+}
+
 .dashboard-grid {
   display: grid;
   gap: 24px;
@@ -159,4 +189,13 @@
   .dashboard-actions button {
     flex: 1 1 100%;
   }
+
+  .low-balance-banner {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .low-balance-banner__actions {
+    justify-content: flex-end;
+  }
 }

src/components/Dashboard.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import './Dashboard.css';
+import LowBalanceBanner from './LowBalanceBanner';
 import { useNavigate } from 'react-router-dom';
 import Skeleton from '../components/Skeleton';
 import EmptyState from '../components/EmptyState';
@@ -42,8 +43,10 @@ export default function Dashboard({ vaultBalance, walletBalance, openDeposit }:
   const totalUsage = activity?.reduce((sum, item) => (item.type === 'usage' ? sum + item.amount : sum), 0) ?? 0;
 
   return (
-    <section className="dashboard-grid surface">
-      {/* Balance Overview */}
+    <>
+      <LowBalanceBanner balance={vaultBalance} openDeposit={openDeposit} />
+      <section className="dashboard-grid surface">
+        {/* Balance Overview */}
       <div className="dashboard-card">
         <h3 className="eyebrow">Vault balance</h3>
         <strong>{formatUsdc(vaultBalance)} USDC</strong>
@@ -94,5 +97,6 @@ export default function Dashboard({ vaultBalance, walletBalance, openDeposit }:
         )}
       </div>
     </section>
+    </>
   );
 }

src/components/LowBalanceBanner.tsx

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+import { LOW_BALANCE_USD } from '../config/constants';
+
+interface LowBalanceBannerProps {
+  balance: number;
+  openDeposit: () => void;
+}
+
+export default function LowBalanceBanner({ balance, openDeposit }: LowBalanceBannerProps) {
+  const [dismissed, setDismissed] = useState(false);
+
+  useEffect(() => {
+    const isDismissed = sessionStorage.getItem('lowBalanceBannerDismissed') === 'true';
+    if (isDismissed) {
+      setDismissed(true);
+    }
+  }, []);
+
+  const handleDismiss = () => {
+    sessionStorage.setItem('lowBalanceBannerDismissed', 'true');
+    setDismissed(true);
+  };
+
+  if (dismissed || balance >= LOW_BALANCE_USD) {
+    return null;
+  }
+
+  return (
+    <div className="low-balance-banner" role="status">
+      <div className="low-balance-banner__content">
+        <span className="low-balance-banner__icon" aria-hidden="true">⚠️</span>
+        <div className="low-balance-banner__text">
+          <strong>Low balance warning:</strong> Your vault balance is below {LOW_BALANCE_USD} USDC. Add funds to prevent API disruption.
+        </div>
+      </div>
+      <div className="low-balance-banner__actions">
+        <button className="primary-button" onClick={openDeposit}>
+          Deposit USDC
+        </button>
+        <button className="ghost-button" onClick={handleDismiss} aria-label="Dismiss warning">
+          Dismiss
+        </button>
+      </div>
+    </div>
+  );
+}

src/config/constants.ts

@@ -16,6 +16,9 @@ export const API_BASE_URL = "https://api.callora.com";
 /** Minimum USDC deposit amount accepted by the vault. */
 export const MIN_DEPOSIT = 10;
 
+/** Low balance warning threshold in USDC. */
+export const LOW_BALANCE_USD = 15;
+
 /** Human-readable network fee shown in the deposit preview. */
 export const NETWORK_FEE = "0.00001 XLM";