mirror of
https://github.com/hoornet/vega.git
synced 2026-05-07 04:39:12 -07:00
Add NWC setup UX guided wizard (roadmap #7)
Replaces the raw nostr+walletconnect:// textarea with a two-step wizard: Step 1 — wallet chooser: grid of 4 cards (Alby Hub, Alby Extension, Mutiny, Phoenix) each with an "open ↗" link to the wallet's NWC setup page and a "connect →" button to advance; "I already have a connection string" skip link for power users. Step 2 — paste URI: per-wallet numbered instructions, textarea with real-time format validation (detects missing params, wrong prefix), green "✓ Valid — relay: hostname" on success, specific error messages on failure; ← back link to wallet chooser. Connected state: shows detected wallet name + relay hostname, disconnect button. Raw URI textarea kept as the fallback path via "generic" wallet. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jure
296
src/components/shared/NWCWizard.tsx
Normal file
296
src/components/shared/NWCWizard.tsx
Normal file
@@ -0,0 +1,296 @@
|
||||
import { useState } from "react";
|
||||
import { useLightningStore } from "../../stores/lightning";
|
||||
import { isValidNwcUri, parseNwcUri } from "../../lib/lightning/nwc";
|
||||
|
||||
// ── Wallet catalogue ─────────────────────────────────────────────────────────
|
||||
|
||||
interface WalletDef {
|
||||
id: string;
|
||||
name: string;
|
||||
tagline: string;
|
||||
setupUrl: string;
|
||||
steps: string[];
|
||||
detect: (relay: string) => boolean;
|
||||
}
|
||||
|
||||
const WALLETS: WalletDef[] = [
|
||||
{
|
||||
id: "alby-hub",
|
||||
name: "Alby Hub",
|
||||
tagline: "Self-hosted · full control",
|
||||
setupUrl: "https://albyhub.com",
|
||||
steps: [
|
||||
"Open your Alby Hub dashboard",
|
||||
'Go to Connections → "Add connection"',
|
||||
"Copy the Nostr Wallet Connect URI",
|
||||
"Paste it below",
|
||||
],
|
||||
detect: (r) => r.includes("albyhub") || (r.includes("getalby") && r.includes("hub")),
|
||||
},
|
||||
{
|
||||
id: "alby",
|
||||
name: "Alby Extension",
|
||||
tagline: "Browser extension",
|
||||
setupUrl: "https://getalby.com/apps/new",
|
||||
steps: [
|
||||
"Go to getalby.com/apps/new",
|
||||
"Create a new app connection",
|
||||
"Copy the Nostr Wallet Connect URI",
|
||||
"Paste it below",
|
||||
],
|
||||
detect: (r) => r.includes("getalby") && !r.includes("albyhub"),
|
||||
},
|
||||
{
|
||||
id: "mutiny",
|
||||
name: "Mutiny",
|
||||
tagline: "Web-based wallet",
|
||||
setupUrl: "https://app.mutinywallet.com/#/settings/connections",
|
||||
steps: [
|
||||
"Open Mutiny Wallet",
|
||||
"Go to Settings → Nostr Wallet Connect",
|
||||
"Create a new connection",
|
||||
"Copy the URI and paste it below",
|
||||
],
|
||||
detect: (r) => r.includes("mutiny"),
|
||||
},
|
||||
{
|
||||
id: "phoenix",
|
||||
name: "Phoenix",
|
||||
tagline: "Mobile · self-custodial",
|
||||
setupUrl: "https://phoenix.acinq.co",
|
||||
steps: [
|
||||
"Open Phoenix on your phone",
|
||||
"Go to Settings → Nostr Wallet Connect",
|
||||
"Tap 'Link a new wallet'",
|
||||
"Copy the URI and paste it below",
|
||||
],
|
||||
detect: (r) => r.includes("phoenix") || r.includes("acinq"),
|
||||
},
|
||||
];
|
||||
|
||||
const GENERIC: WalletDef = {
|
||||
id: "generic",
|
||||
name: "Other wallet",
|
||||
tagline: "",
|
||||
setupUrl: "",
|
||||
steps: [
|
||||
"Open your Lightning wallet",
|
||||
"Find the Nostr Wallet Connect section",
|
||||
"Generate a new NWC connection URI",
|
||||
"Paste it below",
|
||||
],
|
||||
detect: () => true,
|
||||
};
|
||||
|
||||
function detectWallet(nwcUri: string): WalletDef {
|
||||
try {
|
||||
const { relayUrl } = parseNwcUri(nwcUri);
|
||||
return WALLETS.find((w) => w.detect(relayUrl)) ?? GENERIC;
|
||||
} catch {
|
||||
return GENERIC;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Connected state ───────────────────────────────────────────────────────────
|
||||
|
||||
function ConnectedState({ nwcUri, onDisconnect }: { nwcUri: string; onDisconnect: () => void }) {
|
||||
const wallet = detectWallet(nwcUri);
|
||||
let relay = "";
|
||||
try {
|
||||
relay = parseNwcUri(nwcUri).relayUrl;
|
||||
const u = new URL(relay);
|
||||
relay = u.hostname;
|
||||
} catch { /* keep raw */ }
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 px-3 py-2 border border-border mb-2">
|
||||
<span className="text-zap text-[11px]">⚡</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-text text-[12px]">{wallet.name} connected</span>
|
||||
{relay && <span className="text-text-dim text-[10px] ml-2">via {relay}</span>}
|
||||
</div>
|
||||
<button
|
||||
onClick={onDisconnect}
|
||||
className="text-[10px] text-text-dim hover:text-danger transition-colors shrink-0"
|
||||
>
|
||||
disconnect
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-text-dim text-[10px] px-1">
|
||||
Your NWC connection is active. You can zap notes and profiles.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Wallet card ───────────────────────────────────────────────────────────────
|
||||
|
||||
function WalletCard({ wallet, onSelect }: { wallet: WalletDef; onSelect: () => void }) {
|
||||
return (
|
||||
<div className="border border-border p-3 hover:border-accent/50 hover:bg-bg-hover transition-colors">
|
||||
<div className="font-medium text-text text-[12px] mb-0.5">{wallet.name}</div>
|
||||
<div className="text-text-dim text-[10px] mb-2">{wallet.tagline}</div>
|
||||
<div className="flex gap-2">
|
||||
{wallet.setupUrl && (
|
||||
<a
|
||||
href={wallet.setupUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[10px] px-2 py-1 border border-border text-text-dim hover:text-accent hover:border-accent/40 transition-colors"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
open ↗
|
||||
</a>
|
||||
)}
|
||||
<button
|
||||
onClick={onSelect}
|
||||
className="text-[10px] px-2 py-1 border border-accent/60 text-accent hover:bg-accent hover:text-white transition-colors"
|
||||
>
|
||||
connect →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Paste step ────────────────────────────────────────────────────────────────
|
||||
|
||||
function PasteStep({
|
||||
wallet,
|
||||
onBack,
|
||||
onConnected,
|
||||
}: {
|
||||
wallet: WalletDef;
|
||||
onBack: () => void;
|
||||
onConnected: () => void;
|
||||
}) {
|
||||
const { setNwcUri } = useLightningStore();
|
||||
const [input, setInput] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const valid = isValidNwcUri(input.trim());
|
||||
let parsedRelay = "";
|
||||
if (valid) {
|
||||
try {
|
||||
parsedRelay = new URL(parseNwcUri(input.trim()).relayUrl).hostname;
|
||||
} catch { /* keep raw */ }
|
||||
}
|
||||
|
||||
const formatError =
|
||||
input.trim() && !valid
|
||||
? input.trim().startsWith("nostr+walletconnect://")
|
||||
? "URI is incomplete — missing relay or secret parameter"
|
||||
: "Should start with nostr+walletconnect://"
|
||||
: null;
|
||||
|
||||
const handleConnect = () => {
|
||||
const uri = input.trim();
|
||||
if (!isValidNwcUri(uri)) {
|
||||
setError("Invalid NWC URI — check and try again");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setNwcUri(uri);
|
||||
onConnected();
|
||||
} catch (err) {
|
||||
setError(String(err));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="text-text-dim hover:text-text text-[11px] transition-colors mb-3 block"
|
||||
>
|
||||
← {wallet.name}
|
||||
</button>
|
||||
|
||||
{/* Step-by-step instructions */}
|
||||
<ol className="space-y-1 mb-4">
|
||||
{wallet.steps.map((step, i) => (
|
||||
<li key={i} className="flex items-start gap-2 text-[12px]">
|
||||
<span className="text-accent shrink-0 w-4 text-right">{i + 1}.</span>
|
||||
<span className="text-text-muted">{step}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
|
||||
{/* URI input */}
|
||||
<textarea
|
||||
value={input}
|
||||
onChange={(e) => { setInput(e.target.value); setError(null); }}
|
||||
placeholder="nostr+walletconnect://…"
|
||||
rows={3}
|
||||
autoFocus
|
||||
className="w-full bg-bg border border-border px-3 py-2 text-text text-[11px] font-mono resize-none focus:outline-none focus:border-accent/50 placeholder:text-text-dim mb-1.5"
|
||||
style={{ WebkitUserSelect: "text", userSelect: "text" } as React.CSSProperties}
|
||||
/>
|
||||
|
||||
{/* Inline validation feedback */}
|
||||
{formatError && (
|
||||
<p className="text-danger text-[10px] mb-1.5">{formatError}</p>
|
||||
)}
|
||||
{valid && (
|
||||
<p className="text-success text-[10px] mb-1.5">
|
||||
✓ Valid — relay: {parsedRelay}
|
||||
</p>
|
||||
)}
|
||||
{error && <p className="text-danger text-[11px] mb-2">{error}</p>}
|
||||
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
disabled={!valid}
|
||||
className="px-4 py-1.5 text-[11px] border border-border text-text-muted hover:text-accent hover:border-accent/40 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
connect wallet
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Wizard root ───────────────────────────────────────────────────────────────
|
||||
|
||||
export function NWCWizard() {
|
||||
const { nwcUri, clearNwcUri } = useLightningStore();
|
||||
const [step, setStep] = useState<"choose" | "paste">("choose");
|
||||
const [selectedWallet, setSelectedWallet] = useState<WalletDef>(GENERIC);
|
||||
|
||||
if (nwcUri) {
|
||||
return <ConnectedState nwcUri={nwcUri} onDisconnect={clearNwcUri} />;
|
||||
}
|
||||
|
||||
if (step === "paste") {
|
||||
return (
|
||||
<PasteStep
|
||||
wallet={selectedWallet}
|
||||
onBack={() => setStep("choose")}
|
||||
onConnected={() => setStep("choose")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className="text-text-muted text-[12px] mb-3">
|
||||
Choose your Lightning wallet to get a Nostr Wallet Connect (NWC) URI.
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-2 mb-3">
|
||||
{WALLETS.map((w) => (
|
||||
<WalletCard
|
||||
key={w.id}
|
||||
wallet={w}
|
||||
onSelect={() => { setSelectedWallet(w); setStep("paste"); }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { setSelectedWallet(GENERIC); setStep("paste"); }}
|
||||
className="text-text-dim hover:text-text text-[11px] transition-colors"
|
||||
>
|
||||
I already have a connection string →
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,9 @@
|
||||
import { useState } from "react";
|
||||
import { useUserStore } from "../../stores/user";
|
||||
import { useLightningStore } from "../../stores/lightning";
|
||||
import { useMuteStore } from "../../stores/mute";
|
||||
import { isValidNwcUri } from "../../lib/lightning/nwc";
|
||||
import { getNDK, getStoredRelayUrls, addRelay, removeRelay } from "../../lib/nostr";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { NWCWizard } from "./NWCWizard";
|
||||
|
||||
function MutedRow({ pubkey, onUnmute }: { pubkey: string; onUnmute: () => void }) {
|
||||
const profile = useProfile(pubkey);
|
||||
@@ -162,70 +161,10 @@ function IdentitySection() {
|
||||
}
|
||||
|
||||
function WalletSection() {
|
||||
const { nwcUri, setNwcUri, clearNwcUri } = useLightningStore();
|
||||
const [input, setInput] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleSave = () => {
|
||||
const uri = input.trim();
|
||||
if (!uri) return;
|
||||
if (!isValidNwcUri(uri)) {
|
||||
setError("Invalid NWC URI. Must start with nostr+walletconnect://");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setSaving(true);
|
||||
setNwcUri(uri);
|
||||
setInput("");
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(String(err));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section>
|
||||
<h2 className="text-text text-[11px] font-medium uppercase tracking-widest mb-2 text-text-dim">Lightning Wallet (NWC)</h2>
|
||||
{nwcUri ? (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 px-3 py-2 border border-border mb-2">
|
||||
<span className="text-zap text-[11px]">⚡</span>
|
||||
<span className="text-text text-[12px] flex-1">Wallet connected</span>
|
||||
<button
|
||||
onClick={clearNwcUri}
|
||||
className="text-[10px] text-text-dim hover:text-danger transition-colors shrink-0"
|
||||
>
|
||||
disconnect
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-text-dim text-[10px] px-1">Your NWC connection is active. You can zap notes and profiles.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<textarea
|
||||
value={input}
|
||||
onChange={(e) => { setInput(e.target.value); setError(null); }}
|
||||
placeholder="nostr+walletconnect://…"
|
||||
rows={3}
|
||||
className="w-full bg-bg border border-border px-3 py-2 text-text text-[11px] font-mono resize-none focus:outline-none focus:border-accent/50 placeholder:text-text-dim mb-2"
|
||||
style={{ WebkitUserSelect: "text", userSelect: "text" } as React.CSSProperties}
|
||||
/>
|
||||
{error && <p className="text-danger text-[11px] mb-2">{error}</p>}
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!input.trim() || saving}
|
||||
className="px-4 py-1.5 text-[11px] border border-border text-text-muted hover:text-accent hover:border-accent/40 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
connect wallet
|
||||
</button>
|
||||
<p className="text-text-dim text-[10px] mt-2 px-1">
|
||||
Get an NWC connection string from Alby, Mutiny, or any NWC-compatible wallet.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<NWCWizard />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user