{title &&
;
export const RampLeafLogo = () => ;
export const IcoArrowDownTT = () => ;
export const IcoCheck = () => ;
export const TradeCompletedScreen = ({dark = true, fromAsset = "USD", fromAmount = "100.00", toAsset = "BTC", toAmount = "0.00154883", webhookBadge = null, assetColors = {
BTC: "#F7931A",
ETH: "#627EEA",
EUROC: "#2775CA",
USDC: "#2775CA",
USD: "#35B13D"
}, completionHeading = "Trade completed!", sentLabel = "You sent", receivedLabel = "You received"}) => {
const accent = dark ? "#ffffff" : "#0E1116";
const bg = dark ? "#0B0D10" : "#FAFAF7";
const textPrimary = dark ? "#ffffff" : "#0E1525";
const textMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(14,21,37,0.5)";
const rowBg = dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)";
return
{title}
}
{completionHeading}
{sentLabel}
{fromAmount} {fromAsset}
{receivedLabel}
{toAmount} {toAsset}
{webhookBadge}
}
{label}
{sub}
{webhookBadge && {webhookBadge}
}
{
e.currentTarget.style.display = "none";
}} style={{
display: "block",
borderRadius: "50%"
}} />
{a}
;
const bg = dark ? "#0E1116" : "#FAFAF7";
const textPrimary = dark ? "#ffffff" : "#0E1525";
const textMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(14,21,37,0.5)";
const rowBg = dark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)";
const dividerColor = dark ? "rgba(255,255,255,0.1)" : "rgba(14,21,37,0.1)";
const [countdown, setCountdown] = useState(15);
const [displayToAmount, setDisplayToAmount] = useState(toAmount);
const [justRefreshed, setJustRefreshed] = useState(false);
useEffect(() => {
if (!liveQuote) return;
const dec = toAmount.includes(".") ? toAmount.split(".")[1].length : 0;
const unit = Math.pow(10, -dec);
const steps = [3, -5, 7, -2, 4, -8, 6, -3, 5, -7, 2, -4, 8, -6, 3];
let tick = 0;
let cd = 15;
let cur = parseFloat(toAmount);
const id = setInterval(() => {
cd -= 1;
if (cd <= 0) {
const delta = steps[tick % steps.length] * unit;
cur = Math.max(0, cur + delta);
setDisplayToAmount(cur.toFixed(dec));
setJustRefreshed(true);
setTimeout(() => setJustRefreshed(false), 1200);
tick += 1;
cd = 15;
}
setCountdown(cd);
}, 1000);
return () => clearInterval(id);
}, []);
return
{sendLabel}
{fromAmount}
{badge(fromAsset)}
{receiveLabel}
{liveQuote ? displayToAmount : toAmount}
{badge(toAsset)}
Rate
{rate}
{liveQuote &&
{justRefreshed ?
Rate updated
: Refreshes in {countdown}s}
Live quote
}
{asset}
{
e.currentTarget.style.display = 'none';
}} style={{
display: 'block',
position: 'relative',
zIndex: 1
}} />
;
const Chevron = () => ;
if (subView === 'accounts') {
return {
e.currentTarget.style.display = 'none';
}} style={{
display: 'block',
position: 'relative',
zIndex: 1
}} />
{
setSubView('accounts');
dispatch('accounts');
}}>
{fromAccount ?
From
{fromAccount ? <>
{fromAccount.label}
{fromAccount.balance} {fromAccount.asset}
: Select account
}
{
setSubView('assets');
dispatch('assets');
}}>
{toAsset ?
To
{toAsset ? {toAsset}
: Select asset
}
Amount
setLocalAmount(e.target.value)} placeholder="0.00" className="text-2xl font-semibold bg-transparent border-none outline-none w-full" style={{
color: amountError ? '#ef4444' : textPrimary,
fontFamily: 'inherit'
}} />
{fromAccount && {fromAccount.asset}}
{fromAccount && !amountError && Max: {fromAccount.balance} {fromAccount.asset}
}
{amountError &&
{amountNum > maxBalance ? 'Exceeds available balance' : 'Enter a valid amount'}
}
{assets.map(({asset, label}) => {
const color = assetColors[asset] || accent;
return
onSelectAsset(asset) : undefined}>
;
})}
{asset}
{
e.currentTarget.style.display = 'none';
}} style={{
display: 'block',
position: 'relative',
zIndex: 1
}} />
{
e.currentTarget.style.display = 'none';
}} style={{
display: 'block',
position: 'relative',
zIndex: 1
}} />
{asset}
{label}
{accounts.map(account => {
const {asset, label, balance} = account;
const color = assetColors[asset] || accent;
const balanceDisplay = typeof balance === 'number' ? `${balance} ${asset}` : balance;
return
onSelectAccount(account) : undefined}>
;
})}
{!onSelectAccount && }
{asset}
{
e.currentTarget.style.display = "none";
}} style={{
display: "block",
position: "relative",
zIndex: 1
}} />
{
e.currentTarget.style.display = "none";
}} style={{
display: "block",
position: "relative",
zIndex: 1
}} />
{label}
{balanceDisplay}
{tabs.map((tab, i) => )}
{activeCode}
{label}
{json != null && }
{json != null ? tokenizeJson(json).map((token, i) =>
{token.text}
) :
— no payload —
}
setOpen(o => !o)} className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-purple-500/20 text-purple-300 text-xs font-mono cursor-pointer select-none hover:bg-purple-500/30">
{event}
{open &&
;
};
export const WizardStatusBar = ({light}) =>
9:41
;
export const WizardPhoneShell = ({children, bgClass = "bg-zinc-50 dark:bg-[#0E1116]", lightStatus = false, borderClass = "border-zinc-200 dark:border-white/10"}) => {children}
{step.phase}
{step.title}
Step {visibleStepIndex + 1} of {visibleSteps.length}
{(() => {
const seenPhases = [];
steps.forEach(s => {
if (!seenPhases.includes(s.phase)) seenPhases.push(s.phase);
});
const els = [];
seenPhases.forEach((phase, pi) => {
const phaseSteps = steps.map((s, idx) => ({
...s,
globalIndex: idx
})).filter(s => s.phase === phase);
const accent = (phaseColors[phase] ?? FALLBACK_PHASE).accent;
const isActivePhase = phaseSteps.some(s => s.globalIndex === stepIndex);
if (pi > 0) els.push();
els.push(
{phase}
);
phaseSteps.filter(s => !isSkipped(s)).forEach(s => {
const isDone = s.globalIndex < stepIndex;
const isCurrent = s.globalIndex === stepIndex;
els.push();
});
});
return els;
})()}
{stepChildren[stepIndex] ?? null}
{findStep(stepIndex, 1) != null && }
Tap **From** to pick the source account, then **To** to choose the destination asset. The API panel updates to show the relevant endpoint as you interact.
The trade amount cannot exceed the available balance of the selected account.