-
-
Cashu Balance
+
+ {/* Balance */}
+
+
Cashu Balance
+
+
+ {hasCashu ? cashuBalance.toLocaleString() : '0'}
+
+ sats
-
- {hasCashu ? cashuBalance.toLocaleString() : '—'}
- sats
-
- {cashuUsd !== null && cashuBalance > 0 && (
-
+ {cashuUsd !== null && cashuBalance > 0 ? (
+
≈ ${cashuUsd.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-
+
+ ) : (
+
no balance yet
)}
- {/* Wallet status pills */}
-
- {hasCashu && (
-
- Cashu
-
- )}
- {webln && (
-
- WebLN
-
- )}
- {hasNWC && (
-
- NWC
-
- )}
- {!hasCashu && !webln && !hasNWC && (
-
- No wallet connected
-
- )}
-
- {/* Manage button */}
+ {/* Wallet status — compact icon row */}
+
+
+
+
+
+
+ {/* Primary action buttons — scroll down to Cashu card to act */}
+
+
+
+
+
+ {/* Manage wallets */}
-
@@ -309,6 +127,167 @@ function BalanceHero() {
);
}
+function WalletStatusPill({
+ icon: Icon,
+ label,
+ active,
+ color,
+ activeBg,
+}: {
+ icon: React.ComponentType<{ className?: string }>;
+ label: string;
+ active: boolean;
+ color: string;
+ activeBg: string;
+}) {
+ return (
+
+
+ {label}
+ {active
+ ?
+ :
+ }
+
+ );
+}
+
+// ─── Recommended Wallets (collapsible) ───────────────────────────────────────
+
+function RecommendedWallets() {
+ const [open, setOpen] = useState(false);
+
+ const wallets = [
+ { name: 'Minibits', desc: 'Mobile Cashu · NWC', url: 'https://www.minibits.cash', color: 'text-orange-400' },
+ { name: 'Alby', desc: 'Browser extension · WebLN + NWC', url: 'https://getalby.com', color: 'text-yellow-400' },
+ { name: 'Zeus', desc: 'Self-custodial Lightning', url: 'https://zeusln.com', color: 'text-blue-400' },
+ { name: 'Coinos', desc: 'Web-based · works everywhere', url: 'https://coinos.io', color: 'text-green-400' },
+ ];
+
+ return (
+
+
+
+ {open && (
+
+ {wallets.map((w) => (
+
+
+
+
+ ))}
+
+
+ )}
+
+ );
+}
+
+// ─── Zaps explainer (collapsible, hidden once wallet connected) ───────────────
+
+function WhatAreZaps({ walletConnected }: { walletConnected: boolean }) {
+ const [open, setOpen] = useState(!walletConnected);
+
+ if (walletConnected && !open) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ {open && (
+
+
+ Zaps are instant Bitcoin Lightning payments. Send sats to any skater, spot creator, or coach — no middleman, no platform cut.
+
+
+ {[
+ { emoji: '⚡', title: 'Instant', desc: 'Settles in seconds' },
+ { emoji: '🔐', title: 'Flexible', desc: 'Your wallet, your keys' },
+ { emoji: '🥜', title: 'Private', desc: 'Cashu hides who pays' },
+ { emoji: '💜', title: 'Direct', desc: 'Value goes to creator' },
+ ].map((item) => (
+
+
{item.emoji}
+
+
{item.title}
+
{item.desc}
+
+
+ ))}
+
+
+ )}
+
+ );
+}
+
+// ─── Not logged in ────────────────────────────────────────────────────────────
+
+function NotLoggedIn() {
+ return (
+
+
+
+
+
Login Required
+
+ Log in with your Nostr account to connect your Lightning wallet and start zapping.
+
+
+
+ );
+}
+
// ─── Page ─────────────────────────────────────────────────────────────────────
export default function WalletPage() {
@@ -318,67 +297,42 @@ export default function WalletPage() {
});
const { user } = useCurrentUser();
+ const { webln } = useWallet();
+ const { connections } = useNWC();
+ const { isInitialized: hasCashu } = useCashu();
+ const hasNWC = connections.length > 0 && connections.some((c) => c.isConnected);
+ const walletConnected = !!(webln || hasNWC || hasCashu);
return (
-
+
+
{/* Header */}
-
-
-
- Wallet
+
+
+ WALLET
-
- Bitcoin Lightning payments & zaps
-
+
Bitcoin Lightning + Cashu
- {/* Balance hero — always at top for logged-in users */}
+ {/* 1. Balance hero — always first */}
- {/* Quick Guide — collapsed by default */}
-
+ {/* 2. Cashu wallet card — the main interactive section */}
+
+
+
-
- {/* Tab pills — full width, thumb-friendly height */}
-
-
-
- Cashu
-
-
-
- Lightning
-
-
+ {/* 3. Get a wallet — collapsed by default */}
+
- {/* Cashu tab */}
-
-
-
-
- {/* Lightning tab */}
-
-
-
-
-
-
-
+ {/* 4. Zaps explainer — auto-collapsed once wallet is connected */}
+
-
-
-
+
)}