laoxong/nofx
1
0
Fork 0
mirror of https://github.com/laoxong/nofx.git synced 2026-06-04 01:48:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: refine beginner wallet onboarding modal (#1438)

Browse Source 
Co-authored-by: Codex <codex@openai.com>
This commit is contained in:
Zavier
2026-03-28 16:09:04 +08:00
committed by GitHub
parent cab58afe6d
commit 55db747318
2 changed files with 217 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/App.tsx
+12 -3
View File
@@ -65,6 +65,7 @@ function App() {
const path = window.location.pathname
const hash = window.location.hash.slice(1) // 去掉 #
if (path === '/welcome') return 'traders'
if (path === '/traders' || hash === 'traders') return 'traders'
if (path === '/strategy' || hash === 'strategy') return 'strategy'
if (path === '/strategy-market' || hash === 'strategy-market') return 'strategy-market'
@@ -157,7 +158,9 @@ function App() {
const params = new URLSearchParams(window.location.search)
const traderParam = params.get('trader')
if (path === '/traders' || hash === 'traders') {
if (path === '/welcome') {
setCurrentPage('traders')
} else if (path === '/traders' || hash === 'traders') {
setCurrentPage('traders')
} else if (path === '/strategy' || hash === 'strategy') {
setCurrentPage('strategy')
@@ -337,7 +340,9 @@ function App() {
// Set current page based on route for consistent navigation state
useEffect(() => {
if (route === '/competition') {
if (route === '/welcome') {
setCurrentPage('traders')
} else if (route === '/competition') {
setCurrentPage('competition')
} else if (route === '/traders') {
setCurrentPage('traders')
@@ -346,6 +351,9 @@ function App() {
}
}, [route])
const showBeginnerOnboarding =
route === '/welcome' && (!!user || hasPersistedAuth) && getUserMode() === 'beginner'
// Show loading spinner while checking auth or config
if (isLoading || configLoading) {
return (
@@ -391,7 +399,6 @@ function App() {
window.location.href = '/traders'
return null
}
return <BeginnerOnboardingPage />
}
if (route === '/faq') {
return (
@@ -695,6 +702,8 @@ function App() {
onClose={() => setLoginOverlayOpen(false)}
featureName={loginOverlayFeature}
/>
{showBeginnerOnboarding && <BeginnerOnboardingPage />}
</div>
)
}
web/src/pages/BeginnerOnboardingPage.tsx
+205 -133
View File
@@ -1,8 +1,13 @@
import { useEffect, useRef, useState } from 'react'
import { Copy, Eye, EyeOff, RefreshCw, Shield, Wallet } from 'lucide-react'
import { useEffect, useMemo, useRef, useState } from 'react'
import {
ArrowRight,
Copy,
RefreshCw,
Shield,
Wallet,
} from 'lucide-react'
import { QRCodeSVG } from 'qrcode.react'
import { toast } from 'sonner'
import { DeepVoidBackground } from '../components/common/DeepVoidBackground'
import { useLanguage } from '../contexts/LanguageContext'
import { api } from '../lib/api'
import type { BeginnerOnboardingResponse } from '../types'
@@ -13,33 +18,55 @@ export function BeginnerOnboardingPage() {
const [data, setData] = useState<BeginnerOnboardingResponse | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState('')
const [showPrivateKey, setShowPrivateKey] = useState(true)
const [refreshingBalance, setRefreshingBalance] = useState(false)
const hasRequestedRef = useRef(false)
const isZh = language === 'zh'
const loadOnboarding = async (showLoading: boolean) => {
if (showLoading) setLoading(true)
else setRefreshingBalance(true)
if (showLoading) {
setLoading(true)
} else {
setRefreshingBalance(true)
}
setError('')
try {
const result = await api.prepareBeginnerOnboarding()
setData(result)
setBeginnerWalletAddress(result.address)
} catch (err) {
setError(err instanceof Error ? err.message : isZh ? '新手钱包准备失败' : 'Failed to prepare beginner wallet')
setError(
err instanceof Error
? err.message
: isZh
? '新手钱包准备失败'
: 'Failed to prepare beginner wallet'
)
} finally {
if (showLoading) setLoading(false)
else setRefreshingBalance(false)
if (showLoading) {
setLoading(false)
} else {
setRefreshingBalance(false)
}
}
}
useEffect(() => {
if (hasRequestedRef.current) return
if (hasRequestedRef.current) {
return
}
hasRequestedRef.current = true
void loadOnboarding(true)
}, [])
const noticeText = useMemo(
() =>
isZh
? '此钱包仅用于大模型调用费用，不会自动充到交易所。私钥丢失后无法恢复，只充 Base 链 USDC。'
: 'This wallet only pays for model calls. It does not fund your exchange automatically. The private key cannot be recovered, and you should only deposit Base USDC.',
[isZh]
)
const copyText = async (value: string, label: string) => {
try {
await navigator.clipboard.writeText(value)
@@ -55,133 +82,178 @@ export function BeginnerOnboardingPage() {
}
return (
<DeepVoidBackground disableAnimation>
<div className="mx-auto flex h-screen max-w-4xl flex-col justify-center px-4">
{/* Header - compact */}
<div className="mb-5 flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-nofx-gold/15 text-nofx-gold">
<Shield className="h-5 w-5" />
</div>
<div>
<div className="text-[10px] font-semibold uppercase tracking-[0.3em] text-nofx-gold/80">
{isZh ? '新手保护' : 'Beginner Guard'}
<div className="fixed inset-0 z-[80]">
<div className="absolute inset-0 bg-black/58 backdrop-blur-[2px]" />
<div className="relative flex min-h-screen items-center justify-center px-4 py-10 sm:px-6">
<div className="w-full max-w-[1120px]">
<div className="mb-5 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
<div className="flex items-center gap-4">
<div className="flex h-14 w-14 items-center justify-center rounded-[22px] border border-nofx-gold/20 bg-nofx-gold/8 text-nofx-gold shadow-[0_0_30px_rgba(240,185,11,0.12)]">
<Shield className="h-6 w-6" />
</div>
<div>
<div
className={`font-semibold uppercase text-nofx-gold/80 ${
isZh ? 'text-[11px] tracking-[0.34em]' : 'text-[10px] tracking-[0.2em]'
}`}
>
{isZh ? '新手保护' : 'Beginner Guard'}
</div>
<h1
className={`mt-2 font-bold leading-[1.04] text-white ${
isZh
? 'text-[34px] tracking-tight sm:text-[44px] xl:text-[52px] xl:whitespace-nowrap'
: 'max-w-[720px] text-[27px] tracking-[-0.03em] sm:text-[35px] xl:text-[42px]'
}`}
>
{isZh ? '钱包已经帮你准备好了' : 'Your wallet is ready'}
</h1>
</div>
</div>
<div
className={`pb-2 text-zinc-500 lg:text-right ${
isZh
? 'text-sm tracking-[0.18em] lg:whitespace-nowrap'
: 'text-[13px] tracking-[0.12em] lg:whitespace-nowrap'
}`}
>
Claw402 + DeepSeek <span className="mx-2 text-zinc-700">·</span>
{isZh ? '按次付费' : 'Pay per call'}
</div>
<h1 className="text-xl font-bold text-white">
{isZh ? '钱包已经帮你准备好了' : 'Your wallet is ready'}
</h1>
</div>
<div className="ml-auto text-xs text-zinc-500">
Claw402 + DeepSeek · {isZh ? '按次付费' : 'Pay per call'}
<div className="overflow-hidden rounded-[32px] border border-white/10 bg-[linear-gradient(180deg,rgba(8,11,16,0.94),rgba(5,7,10,0.88))] shadow-[0_24px_120px_rgba(0,0,0,0.58)] backdrop-blur-2xl">
{loading ? (
<div className="flex min-h-[390px] items-center justify-center px-6 text-sm text-zinc-400">
{isZh ? '正在准备你的 Base 钱包...' : 'Preparing your Base wallet...'}
</div>
) : data ? (
<div className="grid lg:grid-cols-[0.82fr_1.18fr]">
<section className="flex flex-col justify-center px-8 py-7 sm:px-9 lg:min-h-[430px]">
<div className="mx-auto w-full max-w-[248px] text-center">
<div className="mx-auto inline-flex rounded-[28px] border border-black/10 bg-white p-4 shadow-[0_20px_60px_rgba(255,255,255,0.08)]">
<QRCodeSVG value={data.address} size={164} level="M" />
</div>
<div className="mt-4 text-[15px] font-medium text-zinc-300">
{isZh ? '充值地址（Base USDC）' : 'Deposit address (Base USDC)'}
</div>
<div className="mt-4 flex items-center justify-between gap-3 rounded-[24px] border border-emerald-400/20 bg-emerald-500/7 px-5 py-3.5 shadow-[0_0_0_1px_rgba(16,185,129,0.08)]">
<div className="text-left">
<div className="flex items-baseline gap-3 font-mono font-bold tracking-tight text-emerald-300">
<span className="text-[22px]">{data.balance_usdc}</span>
<span className="text-[20px]">USDC</span>
</div>
</div>
<button
type="button"
onClick={() => void loadOnboarding(false)}
disabled={refreshingBalance}
className="inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-emerald-300/20 bg-black/20 text-emerald-300 transition hover:bg-emerald-500/10 disabled:cursor-not-allowed disabled:opacity-60"
aria-label={isZh ? '刷新余额' : 'Refresh balance'}
>
<RefreshCw className={`h-4 w-4 ${refreshingBalance ? 'animate-spin' : ''}`} />
</button>
</div>
<div className="mt-4 text-sm text-zinc-500">
{isZh ? '$5-$10 可以用很久' : '$5-$10 usually lasts a long time'}
</div>
</div>
</section>
<section className="border-t border-white/8 px-8 py-7 lg:border-l lg:border-t-0 lg:px-9">
<div className="space-y-5">
<div>
<div className="mb-3 flex items-center gap-2 text-sm font-medium text-nofx-gold">
<Wallet className="h-4 w-4" />
<span>{isZh ? '钱包地址' : 'Wallet address'}</span>
</div>
<div className="flex items-stretch gap-3">
<div className="min-w-0 flex-1 rounded-2xl border border-white/10 bg-black/30 px-5 py-3 font-mono text-[14px] text-zinc-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]">
<div className="break-all">{data.address}</div>
</div>
<button
type="button"
onClick={() => copyText(data.address, isZh ? '地址' : 'Address')}
className="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-zinc-300 transition hover:border-white/20 hover:bg-white/10 hover:text-white"
aria-label={isZh ? '复制地址' : 'Copy address'}
>
<Copy className="h-5 w-5" />
</button>
</div>
</div>
<div className="pt-1">
<div className="mb-3 flex items-center gap-2 text-sm font-medium text-nofx-gold">
<Shield className="h-4 w-4" />
<span>{isZh ? '私钥，请立即备份' : 'Private key, back it up now'}</span>
</div>
<div className="flex items-stretch gap-3">
<div className="min-w-0 flex-1 rounded-[24px] border border-nofx-gold/20 bg-[linear-gradient(180deg,rgba(32,25,7,0.44),rgba(14,10,3,0.28))] px-5 py-3 font-mono text-[13px] leading-6 text-amber-100 shadow-[0_0_0_1px_rgba(240,185,11,0.05)]">
<div className="overflow-x-auto whitespace-nowrap">{data.private_key}</div>
</div>
<div className="flex shrink-0 flex-col justify-end">
<button
type="button"
onClick={() => copyText(data.private_key, isZh ? '私钥' : 'Private key')}
className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-nofx-gold/20 bg-nofx-gold/10 text-nofx-gold transition hover:bg-nofx-gold/15"
aria-label={isZh ? '复制私钥' : 'Copy private key'}
>
<Copy className="h-5 w-5" />
</button>
</div>
</div>
</div>
<div
className={`rounded-[24px] border border-white/15 bg-black/18 px-5 py-3.5 text-zinc-500 ${
isZh ? 'text-xs lg:whitespace-nowrap' : 'text-[11px] leading-6'
}`}
>
<span className="mr-2 text-zinc-600">•</span>
{noticeText}
</div>
{data.env_warning ? (
<div className="rounded-2xl border border-amber-500/20 bg-amber-500/10 px-4 py-3 text-sm text-amber-200">
{data.env_warning}
</div>
) : null}
{error ? (
<div className="rounded-2xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-300">
{error}
</div>
) : null}
<button
type="button"
onClick={handleContinue}
className={`mt-1 flex w-full items-center justify-center gap-3 rounded-[24px] bg-nofx-gold px-5 py-3.5 font-bold text-black shadow-[0_10px_40px_rgba(240,185,11,0.22)] transition hover:bg-yellow-400 ${
isZh ? 'text-[20px]' : 'text-[16px] sm:text-[18px]'
}`}
>
<span>{isZh ? '我已保存，进入下一步' : 'I saved it, continue'}</span>
<ArrowRight className="h-5 w-5" />
</button>
{data.env_saved ? (
<div className="pt-1 text-xs text-zinc-600">
{isZh
? `钱包信息已同步保存到 ${data.env_path || '.env'}`
: `Wallet details were also saved to ${data.env_path || '.env'}`}
</div>
) : null}
</div>
</section>
</div>
) : null}
</div>
</div>
{error ? (
<div className="mb-4 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-2 text-sm text-red-300">{error}</div>
) : null}
{/* Main card */}
<section className="rounded-[24px] border border-white/10 bg-zinc-950/70 shadow-2xl backdrop-blur-xl">
{loading ? (
<div className="flex h-[400px] items-center justify-center text-sm text-zinc-400">
{isZh ? '正在准备你的 Base 钱包...' : 'Preparing your Base wallet...'}
</div>
) : data ? (
<div className="grid gap-0 lg:grid-cols-[280px_1fr]">
{/* Left: QR + Balance */}
<div className="flex flex-col items-center border-b border-white/8 p-6 lg:border-b-0 lg:border-r">
<div className="rounded-2xl bg-white p-2.5">
<QRCodeSVG value={data.address} size={120} level="M" />
</div>
<div className="mt-3 text-xs font-medium text-zinc-400">
{isZh ? '充值地址（Base USDC）' : 'Deposit (Base USDC)'}
</div>
<div className="mt-3 flex items-center gap-2 rounded-xl border border-emerald-500/20 bg-emerald-500/8 px-3 py-2">
<div>
<div className="text-lg font-bold text-emerald-300">{data.balance_usdc} USDC</div>
</div>
<button
type="button"
onClick={() => void loadOnboarding(false)}
disabled={refreshingBalance}
className="rounded-lg border border-emerald-500/20 p-1.5 text-emerald-400 transition hover:bg-emerald-500/10 disabled:opacity-50"
>
<RefreshCw className={`h-3 w-3 ${refreshingBalance ? 'animate-spin' : ''}`} />
</button>
</div>
<div className="mt-2 text-[11px] text-zinc-600">
{isZh ? '$5-$10 可以用很久' : '$5-$10 lasts a long time'}
</div>
</div>
{/* Right: Address + Key + Action */}
<div className="flex flex-col gap-4 p-6">
{/* Address */}
<div>
<div className="flex items-center gap-2 text-xs font-medium text-zinc-400">
<Wallet className="h-3.5 w-3.5 text-nofx-gold" />
{isZh ? '钱包地址' : 'Wallet Address'}
</div>
<div className="mt-1.5 flex items-center gap-2">
<div className="min-w-0 flex-1 truncate rounded-lg bg-black/30 px-3 py-2 font-mono text-xs text-zinc-300">
{data.address}
</div>
<button
type="button"
onClick={() => copyText(data.address, isZh ? '地址' : 'Address')}
className="shrink-0 rounded-lg bg-white/10 p-2 text-zinc-400 transition hover:bg-white/15 hover:text-white"
>
<Copy className="h-3.5 w-3.5" />
</button>
</div>
</div>
{/* Private Key */}
<div>
<div className="flex items-center gap-2 text-xs font-medium text-amber-300/80">
<Shield className="h-3.5 w-3.5" />
{isZh ? '私钥 — 请立即备份' : 'Private Key — back up now'}
<button
type="button"
onClick={() => setShowPrivateKey((p) => !p)}
className="ml-auto rounded-lg p-1 text-amber-300/60 transition hover:text-amber-200"
>
{showPrivateKey ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
</button>
</div>
<div className="mt-1.5 flex items-center gap-2">
<div className="min-w-0 flex-1 truncate rounded-lg bg-amber-500/8 border border-amber-500/15 px-3 py-2 font-mono text-xs text-amber-100">
{showPrivateKey ? data.private_key : '0x' + '•'.repeat(64)}
</div>
<button
type="button"
onClick={() => copyText(data.private_key, isZh ? '私钥' : 'Private key')}
className="shrink-0 rounded-lg bg-amber-500/10 border border-amber-500/15 p-2 text-amber-300 transition hover:bg-amber-500/20"
>
<Copy className="h-3.5 w-3.5" />
</button>
</div>
</div>
{/* Tips */}
<div className="rounded-lg bg-white/3 border border-white/5 px-3 py-2 text-[11px] leading-5 text-zinc-500">
{isZh
? '• 此钱包仅用于大模型调用费用，不会自动充值交易所 • 私钥丢失后无法恢复 • 只充 Base 链 USDC'
: '• This wallet only covers LLM costs, not exchange funding • Private key cannot be recovered • Base USDC only'}
</div>
{/* Continue */}
<button
type="button"
onClick={handleContinue}
className="mt-auto w-full rounded-xl bg-nofx-gold px-5 py-3 text-sm font-bold text-black transition hover:bg-yellow-400"
>
{isZh ? '我已保存，进入下一步 →' : 'I saved it, continue →'}
</button>
</div>
</div>
) : null}
</section>
</div>
</DeepVoidBackground>
</div>
)
}