{/* USDT */}

USDT 11

$0.999623

2,450.00

$2,450.00

{/* TRX */}

TRX

$0.322157

45.62

$14.70

{/* referral card */}

Earn with referrals

10% from each friend's transaction fee

10% {/* tron coin */}

{/* tether coin */}

₮

); } // ── SEND ── function SendScreen({ go, amount, setAmount }) { const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '⌫']; const press = (k) => { setAmount((prev) => { if (k === '⌫') return prev.length <= 1 ? '0' : prev.slice(0, -1); if (k === '.') return prev.includes('.') ? prev : prev + '.'; if (prev === '0') return k; return prev.replace('.', '').length >= 6 ? prev : prev + k; }); }; return (

Send USDT

T7bkq…M2dE9

Edit

You send

{amount} USDT

{WIcon.bolt} 3.5 TRX fees

{keys.map((k) => )}

); } // ── REVIEW ── function ReviewScreen({ go, amount, onConfirm }) { const amt = parseFloat(amount || '0') || 0; return (

Review

{amt.toFixed(2)}

USDT to T7bkq…M2dE9

{[ ['Amount', `${amt.toFixed(2)} USDT`], ['Network', 'Tron (TRC-20)']]. map(([k, v], i) =>

{k}{v}

)}

Network fee

7 TRX 3.5 TRX −50%

≈ $1.10

{WIcon.bolt} Network fee is just 3.5 TRX — half what most wallets charge.

); } // — count-up number, ticks to a target then keeps gently climbing — function SavingsCount({ target, duration = 1600, delay = 0, format, live = 0, style }) { const [val, setVal] = React.useState(0); const fmt = format || ((n) => Math.round(n).toLocaleString('en-US')); React.useEffect(() => { const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce) { setVal(target); return; } let raf, liveTimer, current = target; const start = performance.now() + delay; const ease = (t) => 1 - Math.pow(1 - t, 3); const tick = (now) => { const t = Math.min(1, Math.max(0, (now - start) / duration)); setVal(target * ease(t)); if (t < 1) { raf = requestAnimationFrame(tick); } else if (live > 0) { liveTimer = setInterval(() => { current += Math.floor(Math.random() * live) + 1; setVal(current); }, 1600); } }; raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); clearInterval(liveTimer); }; }, [target]); return {fmt(val)}; } // ── SUCCESS ── function SuccessScreen({ go, amount }) { const amt = parseFloat(amount || '0') || 0; const sparks = [0, 60, 120, 180, 240, 300]; return (

{/* check + one-shot burst */}

{sparks.map((deg, i) => { const rad = deg * Math.PI / 180, dist = 62; return ; })}

{WIcon.check}

Sent!

{amt.toFixed(2)} USDT delivered in seconds.

{/* you just saved — the win on THIS transfer */}

{WIcon.bolt} You just saved

$1.10 −50%

7 TRX → 3.5 TRX kept in your wallet

{/* the aggregate — community total, counts up + gently climbs */}

Together, Gasless users have saved

in network fees — and counting

{/* return to start */}

); } // ── iOS-style navigation stack ── // Depth defines forward (push, slide in from right) vs back (pop, slide off to right). const SCREEN_DEPTH = { home: 0, send: 1, review: 2, sending: 2, success: 3 }; function IOSNavigator({ screen, render, depth }) { const depthMap = depth || SCREEN_DEPTH; const [active, setActive] = React.useState(screen); const [out, setOut] = React.useState(null); // { key, dir } const depthRef = React.useRef(depthMap[screen] ?? 0); React.useEffect(() => { if (screen === active) return; const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const newDepth = depthMap[screen] ?? 0; const oldDepth = depthRef.current; depthRef.current = newDepth; const dir = newDepth > oldDepth ? 'push' : newDepth < oldDepth ? 'pop' : 'fade'; if (reduce) { setActive(screen); setOut(null); return; } setOut({ key: active, dir }); setActive(screen); }, [screen]); // eslint-disable-line // Fallback cleanup in case animationend never fires (throttled/background tab, // interrupted animation) — never leave a stale outgoing pane on top. React.useEffect(() => { if (!out) return; const t = setTimeout(() => setOut(null), 650); return () => clearTimeout(t); }, [out]); const dir = out ? out.dir : null; const inCls = dir === 'push' ? 'nav-push-in' : dir === 'pop' ? 'nav-pop-in' : dir === 'fade' ? 'nav-fade-in' : ''; const outCls = dir === 'push' ? 'nav-push-out' : dir === 'pop' ? 'nav-pop-out' : dir === 'fade' ? 'nav-fade-out' : ''; // incoming sits on top for push/fade; on pop the leaving screen slides off over it const inZ = dir === 'pop' ? 1 : 2; const outZ = dir === 'pop' ? 2 : 1; return (

{render(active)} {dir === 'pop' &&

}

{out &&

setOut(null)}> {render(out.key)} {dir === 'push' &&

}

); } function WalletDemo({ scale = 1 }) { const [screen, setScreen] = React.useState('home'); const [amount, setAmount] = React.useState('250'); const go = (s) => setScreen(s); const confirm = () => {setScreen('sending');setTimeout(() => setScreen('success'), 1100);}; const renderScreen = (key) => { switch (key) { case 'home': return ; case 'send': return ; case 'review': return ; case 'sending': return (

Signing & broadcasting…

); case 'success': return ; default: return null; } }; return (

} hideIsland>

); } window.WalletDemo = WalletDemo; // Shared helpers reused by no-trx-demo.jsx (the beginners-section demo) Object.assign(window, { WalletStatusBar, ScreenShell, USDT, TronMark, WIcon, Tooltip, IOSNavigator, SavingsCount });