Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion apps/web/components/BondTimeline.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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) => (
Expand Down
52 changes: 39 additions & 13 deletions apps/web/components/DepositWizard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
</>
Expand Down
Loading