From 05920639ec8a00c1fed144bf0a81a4ca716c04a9 Mon Sep 17 00:00:00 2001
From: Orioye Blessing Esther <210155349+ayaoba24@users.noreply.github.com>
Date: Tue, 30 Jun 2026 10:38:22 +0100
Subject: [PATCH 1/2] Update COMMIT_MESSAGE.txt

---
 COMMIT_MESSAGE.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/COMMIT_MESSAGE.txt b/COMMIT_MESSAGE.txt
index 46a89f4..97ff093 100644
--- a/COMMIT_MESSAGE.txt
+++ b/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

From f642f720629293ff256ce0ea1f88705bfc351ee5 Mon Sep 17 00:00:00 2001
From: ayaoba24 <orioyeesther2019@gmail.com>
Date: Thu, 2 Jul 2026 11:53:45 +0100
Subject: [PATCH 2/2] feat: low-balance warning banner on Dashboard

---
 src/components/Dashboard.css        | 39 ++++++++++++++++++++++++
 src/components/Dashboard.tsx        |  8 +++--
 src/components/LowBalanceBanner.tsx | 46 +++++++++++++++++++++++++++++
 src/config/constants.ts             |  3 ++
 4 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 src/components/LowBalanceBanner.tsx

diff --git a/src/components/Dashboard.css b/src/components/Dashboard.css
index cd94771..384dd71 100644
--- a/src/components/Dashboard.css
+++ b/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;
+  }
 }
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 18f44a9..dcd0da1 100644
--- a/src/components/Dashboard.tsx
+++ b/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>
+    </>
   );
 }
diff --git a/src/components/LowBalanceBanner.tsx b/src/components/LowBalanceBanner.tsx
new file mode 100644
index 0000000..4802de7
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 552cb70..c65c8fe 100644
--- a/src/config/constants.ts
+++ b/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";