{completionHeading}
{sentToLabel}
{recipientName}
Amount
{amount} {asset}
{webhookBadge}
}
{fromSelected ? <>
{fromAsset}
{
e.currentTarget.style.display = "none";
}} style={{
display: "block",
position: "relative",
zIndex: 1
}} />
: }
{
e.currentTarget.style.display = "none";
}} style={{
display: "block",
position: "relative",
zIndex: 1
}} />
: }
From
{fromSelected ? <>
{fromLabel}
{fromBalance}
: Select an account
}
To (recipient account)
{recipientId}
Amount
{amount}{" "}
{fromAsset}
{title &&
;
export const RampLeafLogo = () => ;
export const IcoArrowDownTT = () => ;
export const IcoCheck = () => ;
export const TradeProcessingScreen = ({dark = true, mode = "trade", webhookBadge = null, processingMessage = "We are processing your transaction", sendingMessage = "Sending..."}) => {
const accent = dark ? "#ffffff" : "#0E1116";
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 label = mode === "send" ? sendingMessage : processingMessage;
const sub = mode === "send" ? "Crediting recipient…" : "Waiting for confirmation…";
return
{title}
}
{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
}
{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}
{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 && }