Production-ready overhaul: backend fixes, claim flow polish, SEO, mobile, nginx
Backend: - Fix activity score (followersCount check), NIP-98 URL proto, wallet balance guard - Add payment_hash to confirm response, spentTodaySats to stats - Add idx_claims_ip_hash; security headers, graceful shutdown, periodic nonce cleanup Frontend: - Remove 8 legacy components; polish wizard (rules summary, profile card, confetti, share) - Stats budget bar uses spentTodaySats; ErrorBoundary with reload SEO & production: - Full meta/OG/Twitter, favicon, JSON-LD, robots.txt, sitemap.xml - Mobile CSS fixes; nginx static dist + gzip + cache + security headers - Vite manualChunks; aria-labels, dynamic page titles Made-with: Cursor
This commit is contained in:
Michaël
@@ -1,24 +0,0 @@
|
||||
import type { DenialState } from "../hooks/useClaimFlow";
|
||||
|
||||
interface ClaimDenialCardProps {
|
||||
denial: DenialState;
|
||||
onDismiss?: () => void;
|
||||
}
|
||||
|
||||
export function ClaimDenialCard({ denial, onDismiss }: ClaimDenialCardProps) {
|
||||
return (
|
||||
<div className="claim-denial-card">
|
||||
<p className="claim-denial-message">{denial.message}</p>
|
||||
{denial.next_eligible_at != null && (
|
||||
<p className="claim-denial-next">
|
||||
Next eligible: {new Date(denial.next_eligible_at * 1000).toLocaleString()}
|
||||
</p>
|
||||
)}
|
||||
{onDismiss && (
|
||||
<button type="button" className="btn-secondary claim-denial-dismiss" onClick={onDismiss}>
|
||||
Dismiss
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,231 +0,0 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import {
|
||||
getConfig,
|
||||
postUserRefreshProfile,
|
||||
type UserProfile,
|
||||
type FaucetConfig,
|
||||
} from "../api";
|
||||
import { useClaimFlow, ELIGIBILITY_PROGRESS_STEPS } from "../hooks/useClaimFlow";
|
||||
import { ConnectNostr } from "./ConnectNostr";
|
||||
import { Modal } from "./Modal";
|
||||
import { PayoutCard } from "./PayoutCard";
|
||||
import { ClaimModal, type ClaimModalPhase } from "./ClaimModal";
|
||||
import { ClaimDenialPanel } from "./ClaimDenialPanel";
|
||||
import { ClaimStepIndicator } from "./ClaimStepIndicator";
|
||||
|
||||
const QUOTE_TO_MODAL_DELAY_MS = 900;
|
||||
const LIGHTNING_ADDRESS_REGEX = /^[^@]+@[^@]+$/;
|
||||
|
||||
function isValidLightningAddress(addr: string): boolean {
|
||||
return LIGHTNING_ADDRESS_REGEX.test(addr.trim());
|
||||
}
|
||||
|
||||
interface Props {
|
||||
pubkey: string | null;
|
||||
onPubkeyChange: (pk: string | null) => void;
|
||||
onClaimSuccess?: () => void;
|
||||
}
|
||||
|
||||
export function ClaimFlow({ pubkey, onPubkeyChange, onClaimSuccess }: Props) {
|
||||
const [config, setConfig] = React.useState<FaucetConfig | null>(null);
|
||||
const [profile, setProfile] = React.useState<UserProfile | null>(null);
|
||||
const [lightningAddress, setLightningAddress] = React.useState("");
|
||||
const [lightningAddressTouched, setLightningAddressTouched] = React.useState(false);
|
||||
const [showQuoteModal, setShowQuoteModal] = useState(false);
|
||||
const quoteModalDelayRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const lightningAddressInvalid =
|
||||
lightningAddressTouched && lightningAddress.trim() !== "" && !isValidLightningAddress(lightningAddress);
|
||||
|
||||
const claim = useClaimFlow();
|
||||
|
||||
React.useEffect(() => {
|
||||
getConfig().then(setConfig).catch(() => setConfig(null));
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!pubkey) {
|
||||
setProfile(null);
|
||||
setLightningAddress("");
|
||||
return;
|
||||
}
|
||||
postUserRefreshProfile()
|
||||
.then((p) => {
|
||||
setProfile(p);
|
||||
const addr = (p.lightning_address ?? "").trim();
|
||||
setLightningAddress(addr);
|
||||
})
|
||||
.catch(() => setProfile(null));
|
||||
}, [pubkey]);
|
||||
|
||||
useEffect(() => {
|
||||
if (claim.quote && claim.claimState === "quote_ready") {
|
||||
quoteModalDelayRef.current = setTimeout(() => {
|
||||
setShowQuoteModal(true);
|
||||
}, QUOTE_TO_MODAL_DELAY_MS);
|
||||
return () => {
|
||||
if (quoteModalDelayRef.current) clearTimeout(quoteModalDelayRef.current);
|
||||
};
|
||||
}
|
||||
setShowQuoteModal(false);
|
||||
}, [claim.quote, claim.claimState]);
|
||||
|
||||
const handleDisconnect = () => {
|
||||
onPubkeyChange(null);
|
||||
setProfile(null);
|
||||
claim.cancelQuote();
|
||||
claim.resetSuccess();
|
||||
claim.clearDenial();
|
||||
claim.clearConfirmError();
|
||||
};
|
||||
|
||||
const handleDone = () => {
|
||||
claim.resetSuccess();
|
||||
onClaimSuccess?.();
|
||||
};
|
||||
|
||||
const handleCheckEligibility = () => {
|
||||
claim.checkEligibility(lightningAddress);
|
||||
};
|
||||
|
||||
const quoteExpired =
|
||||
claim.quote != null && claim.quote.expires_at <= Math.floor(Date.now() / 1000);
|
||||
|
||||
const modalOpen =
|
||||
(claim.quote != null && (showQuoteModal || claim.loading === "confirm" || claim.confirmError != null)) ||
|
||||
claim.success != null;
|
||||
|
||||
const modalPhase: ClaimModalPhase = claim.success
|
||||
? "success"
|
||||
: claim.loading === "confirm"
|
||||
? "sending"
|
||||
: claim.confirmError != null
|
||||
? "failure"
|
||||
: "quote";
|
||||
|
||||
const modalTitle =
|
||||
modalPhase === "quote" || modalPhase === "sending"
|
||||
? "Confirm payout"
|
||||
: modalPhase === "success"
|
||||
? "Sats sent"
|
||||
: "Claim";
|
||||
|
||||
return (
|
||||
<div className="content claim-flow-content">
|
||||
<div className="claim-flow-layout">
|
||||
<ClaimStepIndicator claimState={claim.claimState} hasPubkey={!!pubkey} />
|
||||
|
||||
<div className="claim-flow-main">
|
||||
<h2>Get sats from the faucet</h2>
|
||||
<p className="claim-flow-desc">
|
||||
Connect with Nostr once to sign in. Your Lightning address is filled from your profile. Check eligibility, then confirm in the modal to receive sats.
|
||||
</p>
|
||||
|
||||
<ConnectNostr
|
||||
pubkey={pubkey}
|
||||
displayName={profile?.name}
|
||||
onConnect={(pk) => onPubkeyChange(pk)}
|
||||
onDisconnect={handleDisconnect}
|
||||
/>
|
||||
|
||||
{pubkey && (
|
||||
<>
|
||||
<PayoutCard
|
||||
config={{
|
||||
minSats: Number(config?.faucetMinSats) || 1,
|
||||
maxSats: Number(config?.faucetMaxSats) || 5,
|
||||
}}
|
||||
quote={claim.quote}
|
||||
expired={quoteExpired}
|
||||
onRecheck={() => {
|
||||
claim.cancelQuote();
|
||||
claim.clearDenial();
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="claim-flow-address-section">
|
||||
<div className="address-row">
|
||||
<label>Your Lightning Address:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={lightningAddress}
|
||||
onChange={(e) => setLightningAddress(e.target.value)}
|
||||
onBlur={() => setLightningAddressTouched(true)}
|
||||
placeholder="you@wallet.com"
|
||||
disabled={!!claim.quote}
|
||||
readOnly={!!profile?.lightning_address && lightningAddress.trim() === (profile.lightning_address ?? "").trim()}
|
||||
title={profile?.lightning_address ? "From your Nostr profile" : undefined}
|
||||
aria-invalid={lightningAddressInvalid || undefined}
|
||||
aria-describedby={lightningAddressInvalid ? "lightning-address-hint" : undefined}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-primary btn-eligibility"
|
||||
onClick={handleCheckEligibility}
|
||||
disabled={claim.loading !== "idle"}
|
||||
>
|
||||
{claim.loading === "quote"
|
||||
? ELIGIBILITY_PROGRESS_STEPS[claim.eligibilityProgressStep ?? 0]
|
||||
: "Check eligibility"}
|
||||
</button>
|
||||
</div>
|
||||
{lightningAddressInvalid && (
|
||||
<p id="lightning-address-hint" className="claim-flow-input-hint" role="alert">
|
||||
Enter a valid Lightning address (user@domain)
|
||||
</p>
|
||||
)}
|
||||
{profile?.lightning_address && lightningAddress.trim() === profile.lightning_address.trim() && (
|
||||
<div
|
||||
className="profile-hint profile-hint-pill"
|
||||
title="From your Nostr profile (kind:0 lightning field)"
|
||||
>
|
||||
<span className="profile-hint-pill-icon" aria-hidden>✓</span>
|
||||
Filled from profile
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{claim.denial && (
|
||||
<ClaimDenialPanel denial={claim.denial} onDismiss={claim.clearDenial} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{modalOpen && (
|
||||
<Modal
|
||||
open={true}
|
||||
onClose={() => {
|
||||
if (claim.success) {
|
||||
handleDone();
|
||||
} else {
|
||||
claim.cancelQuote();
|
||||
claim.clearConfirmError();
|
||||
setShowQuoteModal(false);
|
||||
}
|
||||
}}
|
||||
title={modalTitle}
|
||||
preventClose={claim.loading === "confirm"}
|
||||
>
|
||||
<ClaimModal
|
||||
phase={modalPhase}
|
||||
quote={claim.quote}
|
||||
confirmResult={claim.success}
|
||||
confirmError={claim.confirmError}
|
||||
lightningAddress={lightningAddress}
|
||||
quoteExpired={quoteExpired}
|
||||
onConfirm={claim.confirmClaim}
|
||||
onCancel={() => {
|
||||
claim.cancelQuote();
|
||||
claim.clearConfirmError();
|
||||
setShowQuoteModal(false);
|
||||
}}
|
||||
onRetry={claim.confirmClaim}
|
||||
onDone={handleDone}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,195 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Countdown } from "./Countdown";
|
||||
import { useToast } from "../contexts/ToastContext";
|
||||
import type { QuoteResult, ConfirmResult } from "../api";
|
||||
import type { ConfirmErrorState } from "../hooks/useClaimFlow";
|
||||
|
||||
export type ClaimModalPhase = "quote" | "sending" | "success" | "failure";
|
||||
|
||||
interface ClaimModalProps {
|
||||
phase: ClaimModalPhase;
|
||||
quote: QuoteResult | null;
|
||||
confirmResult: ConfirmResult | null;
|
||||
confirmError: ConfirmErrorState | null;
|
||||
lightningAddress: string;
|
||||
quoteExpired: boolean;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
onRetry: () => void;
|
||||
onDone: () => void;
|
||||
}
|
||||
|
||||
function CheckIcon() {
|
||||
return (
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function SpinnerIcon() {
|
||||
return (
|
||||
<svg className="claim-modal-spinner" width="40" height="40" viewBox="0 0 24 24" fill="none" aria-hidden>
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" strokeOpacity="0.25" />
|
||||
<path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function ClaimModal({
|
||||
phase,
|
||||
quote,
|
||||
confirmResult,
|
||||
confirmError,
|
||||
lightningAddress,
|
||||
quoteExpired,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
onRetry,
|
||||
onDone,
|
||||
}: ClaimModalProps) {
|
||||
const { showToast } = useToast();
|
||||
const [paymentHashExpanded, setPaymentHashExpanded] = useState(false);
|
||||
|
||||
const handleShare = () => {
|
||||
const amount = confirmResult?.payout_sats ?? 0;
|
||||
const text = `Just claimed ${amount} sats from the faucet!`;
|
||||
navigator.clipboard.writeText(text).then(() => showToast("Copied"));
|
||||
};
|
||||
|
||||
const copyPaymentHash = () => {
|
||||
const hash = confirmResult?.payment_hash;
|
||||
if (!hash) return;
|
||||
navigator.clipboard.writeText(hash).then(() => showToast("Copied"));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="claim-modal-content">
|
||||
<AnimatePresence mode="wait">
|
||||
{phase === "quote" && quote && (
|
||||
<motion.div
|
||||
key="quote"
|
||||
className="claim-modal-phase claim-modal-quote"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<h3 className="claim-modal-phase-title">Confirm payout</h3>
|
||||
<div className="claim-modal-quote-amount-large">
|
||||
<span className="claim-modal-quote-amount-value">{quote.payout_sats}</span>
|
||||
<span className="claim-modal-quote-amount-unit">sats</span>
|
||||
</div>
|
||||
<div className="claim-modal-quote-destination">
|
||||
<span className="claim-modal-quote-destination-label">To</span>
|
||||
<span className="claim-modal-quote-destination-value">{lightningAddress}</span>
|
||||
</div>
|
||||
<div className="claim-modal-quote-expiry-ring">
|
||||
<Countdown targetUnixSeconds={quote.expires_at} format="clock" />
|
||||
<span className="claim-modal-quote-expiry-label">Expires in</span>
|
||||
</div>
|
||||
<div className="claim-modal-actions">
|
||||
<button type="button" className="btn-primary btn-primary-large" onClick={onConfirm} disabled={quoteExpired}>
|
||||
Send sats
|
||||
</button>
|
||||
<button type="button" className="btn-secondary" onClick={onCancel}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{phase === "sending" && (
|
||||
<motion.div
|
||||
key="sending"
|
||||
className="claim-modal-phase claim-modal-sending"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<SpinnerIcon />
|
||||
<p className="claim-modal-sending-text">Sending sats via Lightning</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{phase === "success" && confirmResult && (
|
||||
<motion.div
|
||||
key="success"
|
||||
className="claim-modal-phase claim-modal-success"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<div className="claim-modal-success-icon">
|
||||
<CheckIcon />
|
||||
</div>
|
||||
<p className="claim-modal-success-headline">Sent {confirmResult.payout_sats ?? 0} sats</p>
|
||||
{confirmResult.payment_hash && (
|
||||
<div className="claim-modal-success-payment-hash">
|
||||
<button
|
||||
type="button"
|
||||
className="claim-modal-payment-hash-btn"
|
||||
onClick={() => {
|
||||
setPaymentHashExpanded((e) => !e);
|
||||
}}
|
||||
aria-expanded={paymentHashExpanded}
|
||||
>
|
||||
{paymentHashExpanded
|
||||
? confirmResult.payment_hash
|
||||
: `${confirmResult.payment_hash.slice(0, 12)}…`}
|
||||
</button>
|
||||
<button type="button" className="btn-secondary claim-modal-copy-btn" onClick={copyPaymentHash}>
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{confirmResult.next_eligible_at != null && (
|
||||
<p className="claim-modal-success-next">
|
||||
Next eligible: <Countdown targetUnixSeconds={confirmResult.next_eligible_at} format="duration" />
|
||||
</p>
|
||||
)}
|
||||
<div className="claim-modal-actions">
|
||||
<button type="button" className="btn-primary btn-primary-large" onClick={onDone}>
|
||||
Done
|
||||
</button>
|
||||
<button type="button" className="btn-secondary" onClick={handleShare}>
|
||||
Share
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{phase === "failure" && confirmError && (
|
||||
<motion.div
|
||||
key="failure"
|
||||
className="claim-modal-phase claim-modal-failure"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<p className="claim-modal-failure-message">{confirmError.message}</p>
|
||||
<div className="claim-modal-actions">
|
||||
{confirmError.allowRetry && !quoteExpired && (
|
||||
<button type="button" className="btn-primary" onClick={onRetry}>
|
||||
Try again
|
||||
</button>
|
||||
)}
|
||||
{(!confirmError.allowRetry || quoteExpired) && (
|
||||
<button type="button" className="btn-primary" onClick={onCancel}>
|
||||
Re-check eligibility
|
||||
</button>
|
||||
)}
|
||||
<button type="button" className="btn-secondary" onClick={onCancel}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import type { QuoteResult } from "../api";
|
||||
import type { ConfirmErrorState } from "../hooks/useClaimFlow";
|
||||
|
||||
interface ClaimQuoteModalProps {
|
||||
quote: QuoteResult;
|
||||
lightningAddress: string;
|
||||
loading: boolean;
|
||||
confirmError: ConfirmErrorState | null;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
onRetry: () => void;
|
||||
}
|
||||
|
||||
function formatCountdown(expiresAt: number): string {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const left = Math.max(0, expiresAt - now);
|
||||
const m = Math.floor(left / 60);
|
||||
const s = left % 60;
|
||||
return `${m}:${s.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export function ClaimQuoteModal({
|
||||
quote,
|
||||
lightningAddress,
|
||||
loading,
|
||||
confirmError,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
onRetry,
|
||||
}: ClaimQuoteModalProps) {
|
||||
const [countdown, setCountdown] = useState(() => formatCountdown(quote.expires_at));
|
||||
const expired = quote.expires_at <= Math.floor(Date.now() / 1000);
|
||||
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => {
|
||||
setCountdown(formatCountdown(quote.expires_at));
|
||||
}, 1000);
|
||||
return () => clearInterval(t);
|
||||
}, [quote.expires_at]);
|
||||
|
||||
if (confirmError) {
|
||||
return (
|
||||
<div className="claim-modal-content claim-quote-error">
|
||||
<p className="claim-modal-error-text">{confirmError.message}</p>
|
||||
<div className="claim-modal-actions">
|
||||
{confirmError.allowRetry && (
|
||||
<button type="button" className="btn-primary" onClick={onRetry} disabled={loading}>
|
||||
{loading ? "Retrying…" : "Retry"}
|
||||
</button>
|
||||
)}
|
||||
<button type="button" className="btn-secondary" onClick={onCancel}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="claim-modal-content">
|
||||
<div className="claim-quote-amount">
|
||||
<span className="claim-quote-amount-value">{quote.payout_sats}</span>
|
||||
<span className="claim-quote-amount-unit">sats</span>
|
||||
</div>
|
||||
<div className="claim-quote-countdown">
|
||||
{expired ? (
|
||||
<span className="claim-quote-expired">Quote expired</span>
|
||||
) : (
|
||||
<>Expires in {countdown}</>
|
||||
)}
|
||||
</div>
|
||||
<div className="claim-quote-address">
|
||||
<span className="claim-quote-address-label">To</span>
|
||||
<span className="claim-quote-address-value">{lightningAddress}</span>
|
||||
</div>
|
||||
<div className="claim-modal-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-primary"
|
||||
onClick={onConfirm}
|
||||
disabled={loading || expired}
|
||||
>
|
||||
{loading ? "Sending…" : "Confirm"}
|
||||
</button>
|
||||
<button type="button" className="btn-secondary" onClick={onCancel} disabled={loading}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import type { ClaimFlowState } from "../hooks/useClaimFlow";
|
||||
|
||||
const STEPS = [
|
||||
{ id: 1, label: "Connect" },
|
||||
{ id: 2, label: "Check" },
|
||||
{ id: 3, label: "Confirm" },
|
||||
{ id: 4, label: "Receive" },
|
||||
] as const;
|
||||
|
||||
function stepFromState(claimState: ClaimFlowState, hasPubkey: boolean): number {
|
||||
if (!hasPubkey) return 1;
|
||||
switch (claimState) {
|
||||
case "connected_idle":
|
||||
case "quoting":
|
||||
case "denied":
|
||||
return 2;
|
||||
case "quote_ready":
|
||||
case "confirming":
|
||||
case "error":
|
||||
return 3;
|
||||
case "success":
|
||||
return 4;
|
||||
default:
|
||||
return 2;
|
||||
}
|
||||
}
|
||||
|
||||
interface ClaimStepIndicatorProps {
|
||||
claimState: ClaimFlowState;
|
||||
hasPubkey: boolean;
|
||||
}
|
||||
|
||||
export function ClaimStepIndicator({ claimState, hasPubkey }: ClaimStepIndicatorProps) {
|
||||
const currentStep = stepFromState(claimState, hasPubkey);
|
||||
|
||||
return (
|
||||
<div className="claim-step-indicator" role="list" aria-label="Claim steps">
|
||||
{STEPS.map((step, index) => {
|
||||
const isActive = step.id === currentStep;
|
||||
const isPast = step.id < currentStep;
|
||||
return (
|
||||
<div
|
||||
key={step.id}
|
||||
className={`claim-step-indicator-item ${isActive ? "claim-step-indicator-item--active" : ""} ${isPast ? "claim-step-indicator-item--past" : ""}`}
|
||||
role="listitem"
|
||||
>
|
||||
<div className="claim-step-indicator-dot" aria-current={isActive ? "step" : undefined} />
|
||||
<span className="claim-step-indicator-label">{step.label}</span>
|
||||
{index < STEPS.length - 1 && <div className="claim-step-indicator-line" />}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import confetti from "canvas-confetti";
|
||||
import type { ConfirmResult } from "../api";
|
||||
|
||||
interface ClaimSuccessModalProps {
|
||||
result: ConfirmResult;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function ClaimSuccessModal({ result, onClose }: ClaimSuccessModalProps) {
|
||||
const amount = result.payout_sats ?? 0;
|
||||
const nextAt = result.next_eligible_at;
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => {
|
||||
confetti({
|
||||
particleCount: 60,
|
||||
spread: 60,
|
||||
origin: { y: 0.6 },
|
||||
colors: ["#f97316", "#22c55e", "#eab308"],
|
||||
});
|
||||
}, 300);
|
||||
return () => clearTimeout(t);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="claim-modal-content claim-success-content">
|
||||
<div className="claim-success-amount">
|
||||
<span className="claim-success-amount-value">{amount}</span>
|
||||
<span className="claim-success-amount-unit">sats sent</span>
|
||||
</div>
|
||||
{nextAt != null && (
|
||||
<p className="claim-success-next">
|
||||
Next claim after <strong>{new Date(nextAt * 1000).toLocaleString()}</strong>
|
||||
</p>
|
||||
)}
|
||||
<button type="button" className="btn-primary claim-success-close" onClick={onClose}>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { ConnectNostr } from "./ConnectNostr";
|
||||
import { getConfig, type FaucetConfig } from "../api";
|
||||
|
||||
interface ConnectStepProps {
|
||||
pubkey: string | null;
|
||||
@@ -8,6 +10,12 @@ interface ConnectStepProps {
|
||||
}
|
||||
|
||||
export function ConnectStep({ pubkey, displayName, onConnect, onDisconnect }: ConnectStepProps) {
|
||||
const [config, setConfig] = useState<FaucetConfig | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
getConfig().then(setConfig).catch(() => {});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="claim-wizard-step claim-wizard-step-connect">
|
||||
<h3 className="claim-wizard-step-title">Connect your Nostr account</h3>
|
||||
@@ -22,6 +30,17 @@ export function ConnectStep({ pubkey, displayName, onConnect, onDisconnect }: Co
|
||||
onDisconnect={onDisconnect}
|
||||
/>
|
||||
</div>
|
||||
{config && (
|
||||
<div className="claim-wizard-rules">
|
||||
<h4 className="claim-wizard-rules-title">Faucet rules</h4>
|
||||
<ul className="claim-wizard-rules-list">
|
||||
<li>Payout: <strong>{config.faucetMinSats}–{config.faucetMaxSats} sats</strong> (random)</li>
|
||||
<li>Cooldown: <strong>{config.cooldownDays} day{config.cooldownDays !== 1 ? "s" : ""}</strong> between claims</li>
|
||||
<li>Account age: at least <strong>{config.minAccountAgeDays} days</strong></li>
|
||||
<li>Activity score: minimum <strong>{config.minActivityScore}</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
interface CountUpNumberProps {
|
||||
value: number;
|
||||
durationMs?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CountUpNumber({ value, durationMs = 600, className }: CountUpNumberProps) {
|
||||
const [display, setDisplay] = useState(0);
|
||||
const prevValue = useRef(value);
|
||||
const startTime = useRef<number | null>(null);
|
||||
const rafId = useRef<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (value === prevValue.current) return;
|
||||
prevValue.current = value;
|
||||
setDisplay(0);
|
||||
startTime.current = null;
|
||||
|
||||
const tick = (now: number) => {
|
||||
if (startTime.current === null) startTime.current = now;
|
||||
const elapsed = now - startTime.current;
|
||||
const t = Math.min(elapsed / durationMs, 1);
|
||||
const eased = 1 - (1 - t) * (1 - t);
|
||||
setDisplay(Math.round(eased * value));
|
||||
if (t < 1) rafId.current = requestAnimationFrame(tick);
|
||||
};
|
||||
rafId.current = requestAnimationFrame(tick);
|
||||
return () => cancelAnimationFrame(rafId.current);
|
||||
}, [value, durationMs]);
|
||||
|
||||
return <span className={className}>{display}</span>;
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { ClaimDenialPanel } from "./ClaimDenialPanel";
|
||||
import { ELIGIBILITY_PROGRESS_STEPS } from "../hooks/useClaimFlow";
|
||||
import type { DenialState } from "../hooks/useClaimFlow";
|
||||
@@ -33,35 +34,48 @@ export function EligibilityStep({
|
||||
onClearDenial,
|
||||
onCheckAgain,
|
||||
}: EligibilityStepProps) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const canCheck = !loading && lightningAddress.trim() !== "" && LIGHTNING_ADDRESS_REGEX.test(lightningAddress.trim());
|
||||
const showProfileCard = fromProfile && !editing;
|
||||
|
||||
return (
|
||||
<div className="claim-wizard-step claim-wizard-step-eligibility">
|
||||
<h3 className="claim-wizard-step-title">Check eligibility</h3>
|
||||
<p className="claim-wizard-step-desc">
|
||||
Enter your Lightning address. We’ll verify cooldown and calculate your payout.
|
||||
Enter your Lightning address. We'll verify cooldown and calculate your payout.
|
||||
</p>
|
||||
|
||||
<div className="claim-wizard-address-row">
|
||||
<label htmlFor="wizard-lightning-address">Lightning address</label>
|
||||
<input
|
||||
id="wizard-lightning-address"
|
||||
type="text"
|
||||
value={lightningAddress}
|
||||
onChange={(e) => onLightningAddressChange(e.target.value)}
|
||||
onBlur={() => setLightningAddressTouched(true)}
|
||||
placeholder="you@wallet.com"
|
||||
disabled={loading}
|
||||
readOnly={fromProfile}
|
||||
aria-invalid={invalid || undefined}
|
||||
aria-describedby={invalid ? "wizard-lightning-hint" : undefined}
|
||||
/>
|
||||
{fromProfile && (
|
||||
<span className="claim-wizard-profile-badge" title="From your Nostr profile">
|
||||
From profile
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{showProfileCard ? (
|
||||
<div className="claim-wizard-profile-card">
|
||||
<div className="claim-wizard-profile-card-icon" aria-hidden>⚡</div>
|
||||
<div className="claim-wizard-profile-card-body">
|
||||
<span className="claim-wizard-profile-card-label">Lightning address from profile</span>
|
||||
<span className="claim-wizard-profile-card-address">{lightningAddress}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-secondary claim-wizard-profile-card-edit"
|
||||
onClick={() => setEditing(true)}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="claim-wizard-address-row">
|
||||
<label htmlFor="wizard-lightning-address">Lightning address</label>
|
||||
<input
|
||||
id="wizard-lightning-address"
|
||||
type="text"
|
||||
value={lightningAddress}
|
||||
onChange={(e) => onLightningAddressChange(e.target.value)}
|
||||
onBlur={() => setLightningAddressTouched(true)}
|
||||
placeholder="you@wallet.com"
|
||||
disabled={loading}
|
||||
aria-invalid={invalid || undefined}
|
||||
aria-describedby={invalid ? "wizard-lightning-hint" : undefined}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{invalid && (
|
||||
<p id="wizard-lightning-hint" className="claim-wizard-input-hint" role="alert">
|
||||
Enter a valid Lightning address (user@domain)
|
||||
|
||||
@@ -6,7 +6,7 @@ export function Footer() {
|
||||
return (
|
||||
<footer className="site-footer">
|
||||
<div className="site-footer-inner">
|
||||
<nav className="site-footer-nav">
|
||||
<nav className="site-footer-nav" aria-label="Footer navigation">
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="/transactions">Transactions</Link>
|
||||
<a href="https://bitcoin.org/en/" target="_blank" rel="noopener noreferrer">
|
||||
|
||||
@@ -9,7 +9,7 @@ export function Header() {
|
||||
<Link to="/" className="site-logo">
|
||||
<span className="site-logo-text">Sats Faucet</span>
|
||||
</Link>
|
||||
<nav className="site-nav">
|
||||
<nav className="site-nav" aria-label="Main navigation">
|
||||
<Link
|
||||
to="/"
|
||||
className={location.pathname === "/" ? "site-nav-link active" : "site-nav-link"}
|
||||
|
||||
@@ -1,189 +0,0 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Countdown } from "./Countdown";
|
||||
import { CountUpNumber } from "./CountUpNumber";
|
||||
import type { QuoteResult } from "../api";
|
||||
|
||||
const SLOT_DURATION_MS = 750;
|
||||
const QUOTE_TTL_SECONDS = 60;
|
||||
|
||||
interface PayoutCardConfig {
|
||||
minSats: number;
|
||||
maxSats: number;
|
||||
}
|
||||
|
||||
interface PayoutCardProps {
|
||||
config: PayoutCardConfig;
|
||||
quote: QuoteResult | null;
|
||||
expired: boolean;
|
||||
onRecheck: () => void;
|
||||
}
|
||||
|
||||
function useReducedMotionOrDefault(): boolean {
|
||||
if (typeof window === "undefined") return false;
|
||||
try {
|
||||
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function PayoutCard({ config, quote, expired, onRecheck }: PayoutCardProps) {
|
||||
const [slotPhase, setSlotPhase] = useState<"idle" | "spinning" | "locked">("idle");
|
||||
const [slotValue, setSlotValue] = useState(0);
|
||||
const reduceMotion = useReducedMotionOrDefault();
|
||||
const maxSats = Math.max(1, config.maxSats || 5);
|
||||
const minSats = Math.max(1, config.minSats || 1);
|
||||
const tiers = Array.from({ length: maxSats - minSats + 1 }, (_, i) => minSats + i);
|
||||
const hasQuote = quote != null && !expired;
|
||||
const payoutSats = quote?.payout_sats ?? 0;
|
||||
const expiresAt = quote?.expires_at ?? 0;
|
||||
const slotDuration = reduceMotion ? 0 : SLOT_DURATION_MS;
|
||||
const hasAnimatedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasQuote || payoutSats < minSats || payoutSats > maxSats) {
|
||||
setSlotPhase("idle");
|
||||
setSlotValue(0);
|
||||
hasAnimatedRef.current = false;
|
||||
return;
|
||||
}
|
||||
if (hasAnimatedRef.current) {
|
||||
setSlotPhase("locked");
|
||||
setSlotValue(payoutSats);
|
||||
return;
|
||||
}
|
||||
hasAnimatedRef.current = true;
|
||||
setSlotPhase("spinning");
|
||||
setSlotValue(0);
|
||||
|
||||
if (slotDuration <= 0) {
|
||||
setSlotPhase("locked");
|
||||
setSlotValue(payoutSats);
|
||||
return;
|
||||
}
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setSlotValue((v) => (v >= maxSats ? minSats : v + 1));
|
||||
}, 50);
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
clearInterval(interval);
|
||||
setSlotPhase("locked");
|
||||
setSlotValue(payoutSats);
|
||||
}, slotDuration);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
}, [hasQuote, payoutSats, minSats, maxSats, slotDuration]);
|
||||
|
||||
if (expired && quote) {
|
||||
return (
|
||||
<motion.div
|
||||
className="payout-card payout-card-expired"
|
||||
initial={false}
|
||||
animate={{ opacity: 1 }}
|
||||
>
|
||||
<p className="payout-card-expired-label">Quote expired</p>
|
||||
<button type="button" className="payout-card-recheck-btn" onClick={onRecheck}>
|
||||
<span className="payout-card-recheck-icon" aria-hidden>↻</span>
|
||||
Re-check
|
||||
</button>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
if (hasQuote && slotPhase !== "idle") {
|
||||
return (
|
||||
<PayoutCardLocked
|
||||
quote={quote}
|
||||
expiresAt={expiresAt}
|
||||
slotPhase={slotPhase}
|
||||
slotValue={slotValue}
|
||||
payoutSats={payoutSats}
|
||||
reduceMotion={reduceMotion}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div className="payout-card payout-card-potential" layout>
|
||||
<p className="payout-card-potential-label">Potential range</p>
|
||||
<div className="payout-card-amount-row">
|
||||
<span className="payout-card-amount-value">{minSats}–{maxSats}</span>
|
||||
<span className="payout-card-amount-unit">sats</span>
|
||||
</div>
|
||||
<div className="payout-card-dots" role="img" aria-label={`Payout range ${minSats} to ${maxSats} sats`}>
|
||||
{tiers.map((i) => (
|
||||
<div key={i} className="payout-card-dot" />
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function PayoutCardLocked({
|
||||
quote,
|
||||
expiresAt,
|
||||
slotPhase,
|
||||
slotValue,
|
||||
payoutSats,
|
||||
reduceMotion,
|
||||
}: {
|
||||
quote: QuoteResult;
|
||||
expiresAt: number;
|
||||
slotPhase: "spinning" | "locked";
|
||||
slotValue: number;
|
||||
payoutSats: number;
|
||||
reduceMotion: boolean;
|
||||
}) {
|
||||
const [secondsLeft, setSecondsLeft] = useState(() =>
|
||||
Math.max(0, expiresAt - Math.floor(Date.now() / 1000))
|
||||
);
|
||||
useEffect(() => {
|
||||
setSecondsLeft(Math.max(0, expiresAt - Math.floor(Date.now() / 1000)));
|
||||
const t = setInterval(() => {
|
||||
setSecondsLeft(Math.max(0, expiresAt - Math.floor(Date.now() / 1000)));
|
||||
}, 1000);
|
||||
return () => clearInterval(t);
|
||||
}, [expiresAt]);
|
||||
const progressPct = quote.expires_at > 0 ? (secondsLeft / QUOTE_TTL_SECONDS) * 100 : 0;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="payout-card payout-card-locked"
|
||||
initial={reduceMotion ? false : { scale: 0.98 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<div className="payout-card-amount-row">
|
||||
<span className="payout-card-amount-value">
|
||||
{slotPhase === "locked" ? (
|
||||
<CountUpNumber value={payoutSats} durationMs={400} />
|
||||
) : (
|
||||
slotValue
|
||||
)}
|
||||
</span>
|
||||
<span className="payout-card-amount-unit">sats</span>
|
||||
</div>
|
||||
<p className="payout-card-locked-subtitle">
|
||||
Locked for <Countdown targetUnixSeconds={expiresAt} format="clock" />
|
||||
</p>
|
||||
<div
|
||||
className="payout-card-expiry-bar"
|
||||
role="progressbar"
|
||||
aria-valuenow={Math.round(progressPct)}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
>
|
||||
<motion.div
|
||||
className="payout-card-expiry-fill"
|
||||
animate={{ width: `${progressPct}%` }}
|
||||
transition={{ duration: 1 }}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -62,7 +62,7 @@ export function StatsSection({ refetchTrigger }: StatsSectionProps) {
|
||||
const n = (v: number | undefined | null) => Number(v ?? 0);
|
||||
const ts = (v: number | undefined | null) => new Date(Number(v ?? 0) * 1000).toLocaleString();
|
||||
const dailyBudget = Number(stats.dailyBudgetSats) || 1;
|
||||
const budgetUsed = 0; /* API does not expose "spent today" in sats */
|
||||
const budgetUsed = n(stats.spentTodaySats);
|
||||
const budgetPct = Math.min(100, (budgetUsed / dailyBudget) * 100);
|
||||
|
||||
return (
|
||||
@@ -75,10 +75,10 @@ export function StatsSection({ refetchTrigger }: StatsSectionProps) {
|
||||
|
||||
<div className="stats-progress-wrap">
|
||||
<div className="stats-progress-label">
|
||||
Daily budget: <AnimatedNumber value={n(stats.dailyBudgetSats)} /> sats
|
||||
Daily budget: <AnimatedNumber value={budgetUsed} /> / <AnimatedNumber value={n(stats.dailyBudgetSats)} /> sats
|
||||
</div>
|
||||
<div className="stats-progress-bar">
|
||||
<div className="stats-progress-fill" style={{ width: `${100 - budgetPct}%` }} />
|
||||
<div className="stats-progress-fill" style={{ width: `${budgetPct}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import confetti from "canvas-confetti";
|
||||
import { Countdown } from "./Countdown";
|
||||
import { useToast } from "../contexts/ToastContext";
|
||||
import type { ConfirmResult } from "../api";
|
||||
@@ -19,6 +21,19 @@ function CheckIcon() {
|
||||
export function SuccessStep({ result, onDone, onClaimAgain }: SuccessStepProps) {
|
||||
const { showToast } = useToast();
|
||||
const amount = result.payout_sats ?? 0;
|
||||
const confettiFired = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (confettiFired.current) return;
|
||||
confettiFired.current = true;
|
||||
confetti({
|
||||
particleCount: 80,
|
||||
spread: 70,
|
||||
origin: { y: 0.6 },
|
||||
colors: ["#f97316", "#facc15", "#4ade80", "#38bdf8"],
|
||||
disableForReducedMotion: true,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const copyPaymentHash = () => {
|
||||
const hash = result.payment_hash;
|
||||
@@ -26,19 +41,24 @@ export function SuccessStep({ result, onDone, onClaimAgain }: SuccessStepProps)
|
||||
navigator.clipboard.writeText(hash).then(() => showToast("Copied"));
|
||||
};
|
||||
|
||||
const shareMessage = () => {
|
||||
const text = `I just received ${amount} sats from the Sats Faucet! ⚡\nhttps://faucet.lnpulse.app`;
|
||||
navigator.clipboard.writeText(text).then(() => showToast("Copied to clipboard"));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="claim-wizard-step claim-wizard-step-success">
|
||||
<div className="claim-wizard-success-icon" aria-hidden>
|
||||
<CheckIcon />
|
||||
</div>
|
||||
<h3 className="claim-wizard-step-title">Sats sent</h3>
|
||||
<h3 className="claim-wizard-step-title">Sats sent!</h3>
|
||||
<p className="claim-wizard-success-amount">
|
||||
<span className="claim-wizard-success-amount-value">{amount}</span>
|
||||
<span className="claim-wizard-success-amount-unit"> sats</span>
|
||||
</p>
|
||||
{result.payment_hash && (
|
||||
<div className="claim-wizard-success-payment-hash">
|
||||
<code className="claim-wizard-payment-hash-code">{result.payment_hash.slice(0, 16)}…</code>
|
||||
<code className="claim-wizard-payment-hash-code">{result.payment_hash.slice(0, 16)}…</code>
|
||||
<button type="button" className="btn-secondary claim-wizard-copy-btn" onClick={copyPaymentHash}>
|
||||
Copy hash
|
||||
</button>
|
||||
@@ -53,6 +73,9 @@ export function SuccessStep({ result, onDone, onClaimAgain }: SuccessStepProps)
|
||||
<button type="button" className="btn-primary claim-wizard-btn-primary" onClick={onDone}>
|
||||
Done
|
||||
</button>
|
||||
<button type="button" className="btn-secondary" onClick={shareMessage}>
|
||||
Share
|
||||
</button>
|
||||
<button type="button" className="btn-secondary" onClick={onClaimAgain}>
|
||||
Claim again later
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user