Elysium sends USDC only. Its gas token, HYPE, can be received there but not sent, so receive a little HYPE first if you have none to pay gas on Elysium.
+
Funds on an exchange? The panel's exchange guide shows where to withdraw them (Base, Ethereum, Arbitrum or Optimism), watches for them to land, then opens the bridge on that route.
Funds go from your wallet to Relay's deposit contract, or to Circle's transfer contract on a Circle route. They never pass through an openlaunch wallet or contract.
Relay and Circle are third parties. openlaunch operates neither and cannot reverse a transfer.
A transfer is saved in this browser while it is in progress. Reopen the bridge with the same wallet to pick it up.
diff --git a/app/src/app/ui-review-bridge/BridgeReview.tsx b/app/src/app/ui-review-bridge/BridgeReview.tsx
index ab15375c..f8730231 100644
--- a/app/src/app/ui-review-bridge/BridgeReview.tsx
+++ b/app/src/app/ui-review-bridge/BridgeReview.tsx
@@ -3,7 +3,9 @@
import { useEffect, useState } from "react";
import { Dialog } from "@base-ui/react/dialog";
import { X } from "lucide-react";
-import { BridgeForm, Transfer } from "@/components/bridge/BridgeDialog";
+import { BridgeForm, ExchangeGuide, Transfer } from "@/components/bridge/BridgeDialog";
+import { EXCHANGE_IDLE, type ExchangeView } from "@/components/bridge/useExchangeWatch";
+import signal from "@/components/bridge/Signal.module.css";
import type useBridge from "@/components/bridge/useBridge";
import { formatUnits, parseEther, parseUnits, zeroAddress } from "viem";
import { canReverseBridgeRoute, changeBridgeRoute, parseBridgeAmount, type BridgeRouteChange, type BridgeRouteInputs } from "@/lib/bridge/client";
@@ -16,7 +18,7 @@ import { HistoryBoard } from "@/components/bridge/BridgeHistory";
import type { BridgeHistoryEntry } from "@/lib/bridge/history";
import { FundCard } from "@/components/bridge/BridgeToBuy";
import type { BridgeHolding, FundStep } from "@/lib/bridge/fund";
-import type { BridgeAsset, BridgeDestinationId } from "@/lib/bridge/types";
+import type { BridgeAsset, BridgeChainId, BridgeDestinationId } from "@/lib/bridge/types";
import { CCTP_TOKEN_MESSENGER, cctpRoute } from "@/lib/bridge/cctp";
const wallet = "0x03508bB71268BBA25ECaCC8F620e01866650532c" as const;
@@ -58,6 +60,20 @@ const FUND_SCENES: FundScene[] = [
{ name: "Elysium HYPE, arrived", step: "arrived", destination: 99901, asset: "HYPE", symbol: "KINO", row: HISTORY_ROWS[6], shortBy: null, suggestion: null, searching: false },
];
+// "From an exchange", one guide per state it can show. Arrivals are synthetic, in real units.
+type ExchangeScene = { name: string; address: typeof wallet | undefined; destinationChainId: BridgeChainId; view: ExchangeView };
+const watching: ExchangeView = { checking: false, unreadable: false, arrivals: [] };
+const EXCHANGE_SCENES: ExchangeScene[] = [
+ { name: "no wallet", address: undefined, destinationChainId: 4663, view: EXCHANGE_IDLE },
+ { name: "watching", address: wallet, destinationChainId: 4663, view: watching },
+ { name: "balances unreadable", address: wallet, destinationChainId: 4663, view: { ...watching, unreadable: true } },
+ { name: "USDC landed, no gas", address: wallet, destinationChainId: 5042, view: { ...watching, arrivals: [{ chainId: 42161, asset: "USDC", amount: 250_000_000n, decimals: 6, gas: 0n }] } },
+ { name: "USDC and ETH landed", address: wallet, destinationChainId: 99901, view: { ...watching, arrivals: [{ chainId: 42161, asset: "USDC", amount: 250_000_000n, decimals: 6, gas: 4_000_000_000_000_000n }, { chainId: 42161, asset: "ETH", amount: 4_000_000_000_000_000n, decimals: 18, gas: null }] } },
+ { name: "landed on Base, wanted on Base", address: wallet, destinationChainId: 8453, view: { ...watching, arrivals: [{ chainId: 8453, asset: "USDC", amount: 100_000_000n, decimals: 6, gas: 2_000_000_000_000_000n }] } },
+];
+// the dialog's guide: 25 USDC on Arbitrum with no ETH beside it, so its button opens the bridge on that route
+const DIALOG_EXCHANGE: ExchangeView = { ...watching, arrivals: [{ chainId: 42161, asset: "USDC", amount: 25_000_000n, decimals: 6, gas: 0n }] };
+
export default function BridgeReview() {
const [historyScene, setHistoryScene] = useState("rows");
const [open, setOpen] = useState(false);
@@ -134,7 +150,7 @@ export default function BridgeReview() {
For gas: {nativeAmount(b.nativeBalance)} {origin.symbol}
: null}
+ {!reviewing ? : null}
Receive on {destination.name}
@@ -349,6 +386,118 @@ export function BridgeForm({ bridge: b, connect }: { bridge: Bridge; connect: ()
);
}
+type ExchangeGuideProps = { address: Address | undefined; destinationChainId: BridgeChainId; focusOnMount?: boolean; onBridge: (arrival: ExchangeArrival) => void; onBack: () => void; onConnect: () => void };
+
+function LiveExchangeGuide(props: ExchangeGuideProps) {
+ const view = useExchangeWatch(props.address);
+ return ;
+}
+
+/**
+ * From an exchange (lib/bridge/exchange.ts): where to withdraw, a read-only watch for the funds to land, then the bridge
+ * on that route. Plain props, so the development fixture can show every state without a wallet or a network.
+ */
+export function ExchangeGuide({ address, destinationChainId, focusOnMount = false, view, onBridge, onBack, onConnect }: ExchangeGuideProps & { view: ExchangeView }) {
+ const [copied, setCopied] = useState(false);
+ const addressRef = useRef(null);
+ const backRef = useRef(null);
+ const titleRef = useRef(null);
+ // the guide replaces the form in place: bring its top into view and move focus to its title
+ useEffect(() => {
+ if (!focusOnMount) return;
+ backRef.current?.scrollIntoView({ block: "nearest" });
+ titleRef.current?.focus({ preventScroll: true });
+ }, [focusOnMount]);
+ const destination = BRIDGE_CHAINS[destinationChainId].name;
+ // nothing is watched without a wallet, whatever the view says
+ const arrivals = address ? view.arrivals : [];
+ const landed = arrivals.length > 0;
+ const firstBridge = arrivals.find((arrival) => exchangeNext(arrival, destinationChainId).kind === "bridge");
+ const names = EXCHANGE_NETWORKS.map((id) => BRIDGE_CHAINS[id].name);
+ const watched = `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}`;
+ const seconds = EXCHANGE_POLL_MS / 1000;
+ const amountOf = (arrival: ExchangeArrival) => `${formatFundAmount(arrival.amount, arrival.decimals)} ${arrival.asset}`;
+
+ async function copy() {
+ if (!address) return;
+ try {
+ await navigator.clipboard.writeText(address);
+ setCopied(true);
+ window.setTimeout(() => setCopied(false), 2000);
+ } catch {
+ // no clipboard here: select the address so it can be copied by hand
+ const node = addressRef.current;
+ const selection = window.getSelection();
+ if (!node || !selection) return;
+ const range = document.createRange();
+ range.selectNodeContents(node);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ }
+ }
+
+ return (
+
+
+
From an exchange
+
{destinationChainId === 8453
+ ? "Withdraw ETH or USDC from your exchange to this wallet on Base and it is ready to use. Withdrawn to one of the other networks below, it can be bridged to Base after."
+ : `Withdraw ETH or USDC from your exchange to this wallet on one of the networks below, then bridge it to ${destination}.`}
+
+
1
+ Use this wallet's address
+ {address ? <>
+ {address}
+
+ {copied ? "Address copied" : ""}
+ Paste it as the withdrawal address on the exchange. Some smart wallets work only on some networks, so pick one your wallet supports.
+ : <>
+ Connect a wallet to see the address to withdraw to.
+
+ }
+
+
2
+ Withdraw on one of these networks
+
+ {EXCHANGE_NETWORKS.map((id) =>
+
+ {BRIDGE_CHAINS[id].name}{BRIDGE_SEND_ASSETS[id].join(" or ")}
+ {id === destinationChainId ? "No bridge needed" : "Then bridge"}
+
)}
+
+ Pick one your exchange lists for that token. For USDC, choose USDC itself, not USDC.e or another bridged version: the bridge sends only Circle's USDC. Bridging USDC from there takes a little ETH on that network for gas, so withdraw some ETH there too.
+
+
{landed ? : "3"}
+ {landed ? "Landed in your wallet" : "Wait for it to land"}
+
+ {address && !landed && !view.unreadable ? : null}
+ {!address ? "Starts once a wallet is connected."
+ : view.checking ? "Checking your balances…"
+ : view.unreadable ? `Could not read your balances. Trying again every ${seconds} seconds.`
+ : landed ? `${arrivals.map((arrival) => `${amountOf(arrival)} on ${BRIDGE_CHAINS[arrival.chainId].name}`).join(", ")}.`
+ : `Watching ${watched} every ${seconds} seconds. You can close the panel and reopen it in this tab to keep watching.`}
+
+
+
4
+ {destinationChainId === 8453 ? "Bridge it to Base if it landed elsewhere" : `Bridge it to ${destination}`}
+ {!landed ? Once it lands, the bridge opens on that route. : arrivals.map((arrival) => {
+ const from = BRIDGE_CHAINS[arrival.chainId].name;
+ return
{amountOf(arrival)} is on {from}, ready to use. No bridge needed.
+ : <>
+
+ {exchangeNeedsGas(arrival) ?
There is no ETH on {from} to pay gas for sending {arrival.asset}. Withdraw a little ETH to {from} as well. This updates when it lands.
: null}
+ }
+
;
+ })}
+
+
+
The exchange sends to your wallet and sets its own withdrawal fees, limits and timing. This guide only reads your balances. It never asks your wallet for anything, and openlaunch never holds your funds.