diff --git a/app/src/app/bridge/bridge.module.css b/app/src/app/bridge/bridge.module.css index c9dee357..3dfd6d1e 100644 --- a/app/src/app/bridge/bridge.module.css +++ b/app/src/app/bridge/bridge.module.css @@ -7,6 +7,7 @@ .networks div { display: grid; grid-template-columns: minmax(96px, 132px) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-line); font-size: 14px; line-height: 1.5; } .networks div:last-child { border-bottom: 1px solid var(--color-line); } .networks dt { color: var(--color-ink); font-weight: 600; } +.networks dd + dd { grid-column: 2; } .networks dd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0; color: var(--color-body); } .networks dd span { color: var(--color-muted); font-size: 13px; } diff --git a/app/src/app/bridge/page.tsx b/app/src/app/bridge/page.tsx index 0558953b..a5940dc7 100644 --- a/app/src/app/bridge/page.tsx +++ b/app/src/app/bridge/page.tsx @@ -6,7 +6,7 @@ import shell from "@/components/sections/SectionShell.module.css"; import BridgePageSlot from "@/components/bridge/BridgePageSlot"; import BridgeHistory from "@/components/bridge/BridgeHistory"; import { parseBridgeLink } from "@/lib/bridge/link"; -import { BRIDGE_ASSETS, BRIDGE_CHAINS, BRIDGE_DESTINATION_IDS, BRIDGE_FUNDING_IDS } from "@/lib/bridge/types"; +import { BRIDGE_CHAINS, BRIDGE_DESTINATION_IDS, BRIDGE_FUNDING_IDS, BRIDGE_RECEIVE_ASSETS, BRIDGE_SEND_ASSETS, type BridgeChainId } from "@/lib/bridge/types"; import styles from "./bridge.module.css"; /** @@ -20,6 +20,16 @@ export const metadata: Metadata = pageMetadata({ description: "Move ETH and dollars between Base, Robinhood Chain, Arc and Elysium, or fund them from Ethereum, Arbitrum and Optimism. Same wallet, no openlaunch fee.", }); +/** A launch chain's assets: what it sends and receives, then what it only receives (HYPE on Elysium). */ +function launchAssets(id: BridgeChainId) { + const both = BRIDGE_SEND_ASSETS[id].filter((asset) => BRIDGE_RECEIVE_ASSETS[id].includes(asset)); + const receiveOnly = BRIDGE_RECEIVE_ASSETS[id].filter((asset) => !BRIDGE_SEND_ASSETS[id].includes(asset)); + return <> +
{both.join(", ")}Send and receive
+ {receiveOnly.length > 0 ?
{receiveOnly.join(", ")}Receive only
: null} + ; +} + const STEPS = [ ["Pick a route and an amount", "A live quote appears with the fee, the gas and the least you will receive. Nothing is asked of your wallet yet."], ["Approve, for tokens only", "USDC and USDG need an approval for the exact amount first. It is its own wallet step and moves nothing. ETH skips it."], @@ -45,8 +55,8 @@ export default async function BridgePage({ searchParams }: { searchParams: Promi

Networks and tokens

- {BRIDGE_DESTINATION_IDS.map((id) =>
{BRIDGE_CHAINS[id].name}
{BRIDGE_ASSETS[id].join(", ")}Send and receive
)} - {BRIDGE_FUNDING_IDS.map((id) =>
{BRIDGE_CHAINS[id].name}
{BRIDGE_ASSETS[id].join(", ")}Send only
)} + {BRIDGE_DESTINATION_IDS.map((id) =>
{BRIDGE_CHAINS[id].name}
{launchAssets(id)}
)} + {BRIDGE_FUNDING_IDS.map((id) =>
{BRIDGE_CHAINS[id].name}
{BRIDGE_SEND_ASSETS[id].join(", ")}Send only
)}
@@ -68,7 +78,7 @@ export default async function BridgePage({ searchParams }: { searchParams: Promi

Good to know