feat: remove the last beginner walls — USDC sourcing help, reachable deposit page, first-run reassurance

- The /welcome deposit page (QR + auto-refreshing balance + key backup) was
  gated behind a legacy 'beginner mode' localStorage flag that nothing sets
  anymore — every deposit link silently bounced to /traders. Gate removed:
  any signed-in user reaches it.
- 'Don't have USDC yet?' helper on the deposit page: buy on Binance/OKX/
  Coinbase, withdraw picking the Base network, arrives in ~1 minute. This is
  the wall every true newcomer hits first.
- Autopilot step 3 now says exactly where trading money goes
  (app.hyperliquid.xyz → Deposit, USDC on Arbitrum).
- Register page: 'NEW_USER ONBOARDING / Initializing Registration Sequence'
  jargon replaced with what actually happens next (guided launch, ~$13,
  five minutes).
- Dashboard shows a calm first-run note while a fresh autopilot runs its
  first cycle ('reading the whole market — first decision lands in a minute
  or two'), so the initial silence doesn't read as broken.
- Hyperliquid connect steps renamed to plain language ('Approve it in your
  wallet (trade-only, cannot withdraw)' etc.).
This commit is contained in:
tinkle-community
2026-07-07 23:03:20 +09:00
parent c1b660bb45
commit 390db72cdb
6 changed files with 44 additions and 23 deletions

View File

@@ -143,10 +143,11 @@ export function RegisterPage() {
</div>
</div>
<h1 className="text-3xl font-bold tracking-tighter text-nofx-text uppercase mb-2">
<span className="text-nofx-gold">NEW_USER</span> ONBOARDING
<span className="text-nofx-gold">CREATE</span> YOUR ACCOUNT
</h1>
<p className="text-nofx-text-muted text-xs tracking-[0.2em] uppercase">
Initializing Registration Sequence...
<p className="text-nofx-text-muted text-sm">
This account owns your NOFX instance. Next step: a guided launch
about $13 and five minutes to your first AI trade.
</p>
</div>

View File

@@ -249,17 +249,21 @@ export function HyperliquidWalletConnect({
title: language === 'zh' ? 'Hyperliquid Wallet' : 'Hyperliquid Wallet',
connect: language === 'zh' ? 'Connect Hyperliquid' : 'Connect Hyperliquid',
connected: language === 'zh' ? 'Connected' : 'Connected',
mainWallet: language === 'zh' ? 'EVM main wallet' : 'EVM main wallet',
mainWallet: language === 'zh' ? 'Connect your wallet' : 'Connect your wallet',
generateAgent:
language === 'zh'
? 'Generate NOFX agent wallet'
: 'Generate NOFX agent wallet',
? 'Create a trading key for NOFX'
: 'Create a trading key for NOFX',
approveAgent:
language === 'zh' ? 'Authorize agent trading' : 'Authorize agent trading',
language === 'zh'
? 'Approve it in your wallet (trade-only, cannot withdraw)'
: 'Approve it in your wallet (trade-only, cannot withdraw)',
approveBuilder:
language === 'zh' ? 'Finalize trading authorization' : 'Finalize trading authorization',
save: language === 'zh' ? 'Save to NOFX' : 'Save to NOFX',
done: language === 'zh' ? 'Flow complete' : 'Flow complete',
language === 'zh'
? 'Approve the small per-trade builder fee'
: 'Approve the small per-trade builder fee',
save: language === 'zh' ? 'Save to NOFX — done' : 'Save to NOFX — done',
done: language === 'zh' ? 'All set — trading authorized' : 'All set — trading authorized',
balance: language === 'zh' ? 'Hyperliquid balance' : 'Hyperliquid balance',
withdrawable: language === 'zh' ? 'Withdrawable' : 'Withdrawable',
equity: language === 'zh' ? 'Equity' : 'Equity',

View File

@@ -322,6 +322,16 @@ export function TerminalDashboard({
</span>
</div>
)}
{/* first-run reassurance — a fresh autopilot looks idle for its first
minute (the AI is reading the market); tell newcomers what to expect */}
{!on && status?.is_running && (status.call_count ?? 0) <= 1 && !status.safe_mode && (
<div className="tm-mono" style={{ display: 'flex', gap: 10, alignItems: 'center', margin: '8px 14px 0', padding: '8px 12px', fontSize: 11, border: '1px solid var(--tm-up)', color: 'var(--tm-ink)', background: 'rgba(40,140,80,0.06)', flexWrap: 'wrap' }}>
<span style={{ fontWeight: 600, color: 'var(--tm-up)' }}>Your AI is live.</span>
<span style={{ color: 'var(--tm-ink-2)' }}>
It reads the whole market before acting the first decision usually lands within a minute or two and will appear in the Execution Log below. You can stop it anytime from the Config page.
</span>
</div>
)}
{/* config / identity strip — first row, flows directly under the global nav */}
<div className="tm-mono" style={{ display: 'flex', gap: 16, padding: '6px 14px', fontSize: 11, color: 'var(--tm-ink-2)', flexWrap: 'wrap' }}>
<span style={{ fontWeight: 500 }}>{selectedTrader?.trader_name ?? 'NOFX'}</span>

View File

@@ -455,7 +455,7 @@ export function AutopilotLaunchPanel({
{
title: 'Step 3 · Add trading money ($12+)',
detail:
'Deposit USDC into your Hyperliquid account. This is what the AI trades with — start small, you can add more anytime.',
'Deposit USDC into your Hyperliquid account (app.hyperliquid.xyz → Deposit, USDC on Arbitrum). This is what the AI trades with — start small, you can add more anytime.',
status: tradingBalanceReady
? 'ready'
: hyperliquidConnected

View File

@@ -204,9 +204,19 @@ export function BeginnerOnboardingPage() {
</div>
<div className="mt-4 text-sm text-nofx-text-muted">
{isZh
? '$5-$10 usually lasts a long time'
: '$5-$10 usually lasts a long time'}
$5$10 usually lasts a long time · balance updates by
itself after you deposit
</div>
{/* the wall every true beginner hits: where does USDC come from? */}
<div className="mt-5 rounded-2xl border border-nofx-gold/20 bg-nofx-gold/10 px-5 py-4 text-left text-[13px] leading-6 text-nofx-text">
<div className="mb-1 font-semibold">
Don&apos;t have USDC yet?
</div>
Buy USDC on Binance, OKX or Coinbase, then withdraw it to
the address above and pick the{' '}
<b>Base network</b> when the exchange asks. It usually
arrives in about a minute. Only send USDC on Base.
</div>
</div>
</section>
@@ -298,9 +308,7 @@ export function BeginnerOnboardingPage() {
isZh ? 'text-[20px]' : 'text-[16px] sm:text-[18px]'
}`}
>
<span>
{isZh ? 'Go to Traders' : 'Go to Traders'}
</span>
<span>Continue setup</span>
<ArrowRight className="h-5 w-5" />
</button>

View File

@@ -31,7 +31,6 @@ import { useLanguage } from '../contexts/LanguageContext'
import { useSystemConfig } from '../hooks/useSystemConfig'
import { t } from '../i18n/translations'
import { api } from '../lib/api'
import { getUserMode } from '../lib/onboarding'
import type {
AccountInfo,
DecisionRecord,
@@ -446,12 +445,11 @@ export function AppRoutes() {
<Route
path={ROUTES.welcome}
element={
// The welcome overlay is the AI-wallet deposit page (QR +
// auto-refreshing balance) — useful to every signed-in user, so
// no legacy "beginner mode" gate here.
isAuthenticated ? (
getUserMode() === 'beginner' ? (
<TradersRoute showBeginnerOnboarding />
) : (
<Navigate to={ROUTES.traders} replace />
)
<TradersRoute showBeginnerOnboarding />
) : (
<Navigate to={ROUTES.login} replace />
)