// no-trx-demo.jsx — "What if I have no TRX?" interactive demo for the beginners section. // Reuses helpers exported to window by phone-demo.jsx. Exports: NoTrxDemo const ShellX = window.ScreenShell; const USDTX = window.USDT; const TronX = window.TronMark; const IconX = window.WIcon; const NavX = window.IOSNavigator; const StatusX = window.WalletStatusBar; const NT_ACCENT = 'var(--accent)'; const NT_INK = '#0C1512'; const NT_MUTED = '#7C857F'; const NT_LINE = 'rgba(12,21,18,0.07)'; const NT_DARK = '#1E1E1E'; const NT_TRON = '#EF0027'; const NT_WARN = '#C4453F'; // USDT amount being sent in the demo const NT_AMOUNT = '250'; // Buy options — match the SUN "Get TRX" sheet const NT_TIERS = [ { trx: '17.57', usdt: '5', tx: 2 }, { trx: '52.71', usdt: '15', tx: 6 }, { trx: '175.71', usdt: '50', tx: 22 }]; // small inline marks const NT_Ic = { alert: , check: , close: , back: , bolt: , trxCheck: }; // ── SEND screen, but the wallet has no TRX ── function NoTrxSendScreen({ onGetTrx }) { const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '⌫']; return (
Send USDT
T7
To
T7bkq…M2dE9
Edit
You send
{NT_AMOUNT} USDT
{/* the no-TRX moment */}
{NT_Ic.alert}
Oops — you have no TRX
TRX pays the network fee. Top up to send.
{keys.map((k) =>
{k}
)}
{/* Get TRX CTA — pulsing ring like the Send button */}
); } // ── Bottom sheet: Get TRX with USDT ── function GetTrxModal({ onClose, onBuy }) { const [sel, setSel] = React.useState(2); const t = NT_TIERS[sel]; return (

Get TRX for fees

Pay the network fee with the USDT you already hold — no TRX required, even on a brand-new wallet.

{/* balance card — the key reassurance */}
Your TRX balance 0 TRX
Choose an amount
{NT_TIERS.map((tier, i) => { const on = i === sel; return ( ); })}
); } // ── Success: TRX added, ready to send ── function TrxAddedScreen({ tier, onSend }) { const sparks = [0, 60, 120, 180, 240, 300]; return (
{sparks.map((deg, i) => {const rad = deg * Math.PI / 180,dist = 62;return ;})}
{NT_Ic.trxCheck}
TRX added!
{tier.trx} TRX is in your wallet — you’re ready to send.
Paid with {tier.usdt} USDT
TRX added to your wallet {tier.trx} TRX
{NT_Ic.bolt} Enough gas for ~{tier.tx} transfers
); } const NT_DEPTH = { send: 0, gettingTrx: 1, trxAdded: 2, review: 3, broadcasting: 4, sent: 5 }; const SavingsCountX = window.SavingsCount; // ── REVIEW & CONFIRM — same confirmation page as the Hero app ── function NoTrxReviewScreen({ onBack, onConfirm }) { const amt = parseFloat(NT_AMOUNT) || 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
{NT_Ic.bolt} Paid from your TRX — just topped up, no seed phrase needed.
); } // ── SENT! — successful transfer, offer to run it again ── function NoTrxSentScreen({ onRepeat }) { const amt = parseFloat(NT_AMOUNT) || 0; const sparks = [0, 60, 120, 180, 240, 300]; return (
{sparks.map((deg, i) => {const rad = deg * Math.PI / 180,dist = 62;return ;})}
{NT_Ic.trxCheck}
Sent!
{amt.toFixed(2)} USDT delivered in seconds.
{NT_Ic.bolt} You just saved
$1.10 −50%
7 TRX → 3.5 TRX kept in your wallet
Runs the no-TRX flow again from the start
); } function NoTrxDemo({ scale = 1 }) { const [screen, setScreen] = React.useState('send'); const [modal, setModal] = React.useState(false); const [tier, setTier] = React.useState(NT_TIERS[2]); const buy = (t) => {setTier(t);setModal(false);setScreen('gettingTrx');setTimeout(() => setScreen('trxAdded'), 1150);}; const confirm = () => {setScreen('broadcasting');setTimeout(() => setScreen('sent'), 1100);}; const Spinner = ({ label }) =>
{label}
; const render = (key) => { switch (key) { case 'send':return setModal(true)} />; case 'gettingTrx':return ; case 'trxAdded':return setScreen('review')} />; case 'review':return setScreen('trxAdded')} onConfirm={confirm} />; case 'broadcasting':return ; case 'sent':return setScreen('send')} />; default:return null; } }; return (
} hideIsland> {modal && setModal(false)} onBuy={buy} />}
); } window.NoTrxDemo = NoTrxDemo;