From 251b87897134cf0fa1a4eafc6185d646c6f88c9a Mon Sep 17 00:00:00 2001
From: Dopezapha <officialnwaneridaniel@gmail.com>
Date: Sat, 29 Aug 2026 07:09:53 +0100
Subject: [PATCH] fix: add deposit validation and timeline calendar controls

---
 apps/web/components/BondTimeline.tsx  | 20 ++++++++++-
 apps/web/components/DepositWizard.tsx | 52 ++++++++++++++++++++-------
 2 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/apps/web/components/BondTimeline.tsx b/apps/web/components/BondTimeline.tsx
index 1d8e3e4..d83b89b 100644
--- a/apps/web/components/BondTimeline.tsx
+++ b/apps/web/components/BondTimeline.tsx
@@ -134,11 +134,23 @@ export function BondTimeline({
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [selectedEvent]);
 
+  const now = new Date();
+  const isViewingCurrentMonth =
+    currentMonth.getFullYear() === now.getFullYear() &&
+    currentMonth.getMonth() === now.getMonth();
+
   return (
     <div className="mt-10 relative">
       <div className="flex items-center justify-between mb-4">
         <h2 className="text-sm font-semibold uppercase tracking-wide text-muted">Bond Timeline</h2>
-        <div className="flex gap-2">
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setCurrentMonth(new Date())}
+            disabled={isViewingCurrentMonth}
+            className="text-xs px-2 py-1 border border-border rounded hover:bg-card disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            Today
+          </button>
           <button
             onClick={prevMonth}
             className="text-xs px-2 py-1 border border-border rounded hover:bg-card"
@@ -157,6 +169,12 @@ export function BondTimeline({
         </div>
       </div>
 
+      {events.length === 0 && (
+        <div className="mb-4 rounded-md border border-border bg-card p-3 text-xs text-muted italic text-center">
+          No bond activity yet this month
+        </div>
+      )}
+
       <div className="rounded-lg border border-border bg-card overflow-hidden">
         <div className="grid grid-cols-7 bg-muted/10">
           {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
diff --git a/apps/web/components/DepositWizard.tsx b/apps/web/components/DepositWizard.tsx
index 9720f18..2f2cf0a 100644
--- a/apps/web/components/DepositWizard.tsx
+++ b/apps/web/components/DepositWizard.tsx
@@ -48,24 +48,41 @@ export function DepositWizard({
 
   const bucketLabel = bucket === 'collateral' ? 'Collateral' : 'Reserve (auto-top-up pool)';
 
+  const parsedXlm = Number(xlm);
+  const amountError =
+    !xlm || xlm.trim() === ''
+      ? 'Please enter a deposit amount.'
+      : isNaN(parsedXlm) || parsedXlm <= 0
+        ? 'Amount must be greater than 0 XLM.'
+        : parsedXlm < 0.1
+          ? 'Minimum deposit amount is 0.1 XLM.'
+          : null;
+
   return (
     <div className="space-y-4">
       {step === 'amount' && (
         <>
-          <div className="flex gap-2">
-            <input
-              type="number"
-              step="0.1"
-              min="0.1"
-              value={xlm}
-              onChange={(e) => setXlm(e.target.value)}
-              placeholder="XLM"
-              className="flex-1 rounded-md border border-border bg-background px-2 py-1.5 text-sm focus:border-accent focus:outline-none"
-            />
+          <div>
+            <div className="flex gap-2">
+              <input
+                type="number"
+                step="0.1"
+                min="0.1"
+                value={xlm}
+                onChange={(e) => setXlm(e.target.value)}
+                placeholder="XLM"
+                className="flex-1 rounded-md border border-border bg-background px-2 py-1.5 text-sm focus:border-accent focus:outline-none"
+              />
+            </div>
+            <p className="mt-1 text-xs text-muted">Minimum deposit amount: 0.1 XLM</p>
+            {amountError && <p className="mt-1 text-xs text-danger">{amountError}</p>}
           </div>
           <button
-            onClick={() => setStep('preview')}
-            className="w-full rounded-md bg-accent text-accent-foreground px-3 py-1.5 text-sm hover:opacity-90"
+            onClick={() => {
+              if (!amountError) setStep('preview');
+            }}
+            disabled={Boolean(amountError)}
+            className="w-full rounded-md bg-accent text-accent-foreground px-3 py-1.5 text-sm hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Next
           </button>
@@ -133,7 +150,16 @@ export function DepositWizard({
               {xlm} XLM deposited to {bucketLabel.toLowerCase()}
             </p>
             {txHash && (
-              <p className="mt-2 text-xs font-mono break-all text-accent">{txHash.slice(0, 16)}…</p>
+              <p className="mt-2 text-xs font-mono break-all">
+                <a
+                  href={`https://stellar.expert/explorer/testnet/tx/${txHash}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-accent hover:underline"
+                >
+                  {txHash.slice(0, 16)}… ↗
+                </a>
+              </p>
             )}
           </div>
         </>