From 043474d424ab787f4da5894ed36129066f5484d8 Mon Sep 17 00:00:00 2001 From: Youssef Date: Fri, 28 Aug 2026 11:50:18 +0100 Subject: [PATCH] fix(demos): fix See technical details link color, simplify trading demo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Force the "See technical details" anchor text to always use the on-blue color (white) across all solution demo snippets, since the platform anchor styling was overriding the .wf-btn color and rendering the link text with a hard-to-read color. - Simplify the trading demo flow from Quote → Approve USDC → Simulate swap → Submit swap to Quote → Simulate swap → Approve + submit swap, removing the standalone approve step and folding approval into the final submit step. - On the Integrate Trading page, remove the "Build a Safe Trade Review" and "Production Checklist" sections, drop the "Supported Chains" card, and change "straightforward ERC-20" to "B20 or ERC-20". Co-Authored-By: Claude --- .../integrate-defi/integrate-trading.mdx | 31 +------------------ docs/snippets/AssetDemo.jsx | 1 + docs/snippets/DeFiDemo.jsx | 13 +++----- docs/snippets/PaymentsDemo.jsx | 1 + docs/snippets/StablecoinDemo.jsx | 1 + 5 files changed, 9 insertions(+), 38 deletions(-) diff --git a/docs/build-on-base/integrate-defi/integrate-trading.mdx b/docs/build-on-base/integrate-defi/integrate-trading.mdx index 03e927427..5c0216df2 100644 --- a/docs/build-on-base/integrate-defi/integrate-trading.mdx +++ b/docs/build-on-base/integrate-defi/integrate-trading.mdx @@ -18,7 +18,7 @@ The demo above is mock only. If you want to see onchain demos on Vibenet, head t ## Route a Swap with 0x -Use the [AllowanceHolder flow](https://docs.0x.org/docs/introduction/quickstart/swap-tokens-with-0x-swap-api) for a straightforward ERC-20 swap: +Use the [AllowanceHolder flow](https://docs.0x.org/docs/introduction/quickstart/swap-tokens-with-0x-swap-api) for a B20 or ERC-20 swap: 1. Request an indicative `/price` while the user edits the trade. 2. Request a firm `/quote` when the user is ready to review and sign. @@ -109,32 +109,6 @@ console.log(`Swap confirmed: ${hash}`); console.log(`Minimum WETH output: ${formatUnits(BigInt(quote.minBuyAmount), 18)} WETH`); ``` -## Build a Safe Trade Review - -Before the user signs, display values from the latest quote rather than calculating them yourself: - -| Quote field | Show or check | -| --- | --- | -| `buyAmount` | Estimated output at the quoted route | -| `minBuyAmount` | Minimum output after the configured slippage tolerance | -| `fees` and `totalNetworkFee` | 0x, integrator, and estimated network costs | -| `route.fills` | Liquidity sources and how the route is split | -| `issues.balance` | Whether the taker has enough sell tokens | -| `issues.allowance.spender` | The only address to approve when allowance is required | -| `issues.simulationIncomplete` | Whether 0x completed its transaction simulation | - -Request a new quote after an approval transaction or any change to the amount, tokens, taker, recipient, or slippage. Simulate the exact returned transaction against the user's current state before sending it. - -## Production Checklist - -- Proxy 0x requests through your backend so the API key never reaches the browser. -- Validate Base chain ID `8453`, token addresses, the taker, and any separate recipient on the server. -- Use `/price` for frequently refreshed previews and reserve `/quote` for the confirmation step. -- Show the quoted output, minimum received, fees, gas estimate, and route before requesting a signature. -- Use an exact or deliberately bounded allowance instead of granting unlimited approval by default. -- Handle unavailable liquidity, insufficient balance, incomplete simulation, rate limits, reverted transactions, and user rejection. -- Refresh the quote after approval and refresh wallet balances only after the swap receipt confirms. - ## 0x Documentation @@ -147,9 +121,6 @@ Request a new quote after an approval transaction or any change to the amount, t Approve the correct spender and avoid unsafe approvals. - - Confirm Base support and the current Swap API feature matrix. - ## See Also diff --git a/docs/snippets/AssetDemo.jsx b/docs/snippets/AssetDemo.jsx index 9669b1e33..a693e2f86 100644 --- a/docs/snippets/AssetDemo.jsx +++ b/docs/snippets/AssetDemo.jsx @@ -280,6 +280,7 @@ export const AssetDemo = ({ flow }) => { .wf-btn { font-family: ${sans}; font-size: 13px; font-weight: 600; border-radius: 6px; padding: 10px 14px; cursor: pointer; transition: filter .15s ease; border: 1px solid ${C.blue}; background: ${C.blue}; color: ${C.onBlue}; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .wf-btn:hover { filter: brightness(1.1); } .wf-btn:disabled { background: ${C.panel}; border-color: ${C.border}; color: ${C.sub}; cursor: default; filter: none; } + a.wf-btn, a.wf-btn:visited { color: ${C.onBlue}; } .wf-btn2 { font-family: ${sans}; font-size: 13px; font-weight: 600; border-radius: 6px; padding: 10px 14px; cursor: pointer; background: ${C.white}; border: 1px solid ${C.border}; color: ${C.body}; width: 100%; transition: background .15s ease; } .wf-btn2:hover { background: ${C.panel}; } .wf-pill { font-family: ${sans}; font-size: 12px; font-weight: 500; border-radius: 6px; padding: 5px 10px; cursor: pointer; white-space: nowrap; color: ${C.sec}; background: ${C.white}; border: 1px solid ${C.border}; transition: all .12s ease; } diff --git a/docs/snippets/DeFiDemo.jsx b/docs/snippets/DeFiDemo.jsx index c5db6d42e..54dcee46a 100644 --- a/docs/snippets/DeFiDemo.jsx +++ b/docs/snippets/DeFiDemo.jsx @@ -96,18 +96,14 @@ export const DeFiDemo = ({ flow }) => { text: "Request a firm 0x quote to swap 1,000 USDC for WETH on Base.", summary: [["Operation", "Swap"], ["Sell", M("1,000 USDC")], ["Buy", M("WETH")], ["Slippage", M("0.5%")], ["Network", NETWORK]], run: (s) => { s.metrics = [{ label: "Sell", value: "1,000 USDC" }, { label: "Quoted output", value: "0.397 WETH" }, { label: "Minimum output", value: "0.395 WETH" }]; return { entries: [nfo("route quoted", "0x · 0.397 WETH"), nfo("minimum output", "0.395 WETH")], caption: "Show the user the minimum output, fees, and route before approval." }; } }, - { stage: "Approve", action: "Approve USDC", - text: "Approve only the AllowanceHolder address returned by the quote for the exact sell amount.", - summary: [["Operation", "Token approval"], ["Asset", M("USDC")], ["Amount", M("1,000 USDC")], ["Spender", "0x AllowanceHolder"], ["Network", NETWORK]], - run: (s) => { s.metrics = [{ label: "Sell", value: "1,000 USDC" }, { label: "Quoted output", value: "0.397 WETH" }, { label: "Allowance", value: "1,000 USDC", tone: "ok" }]; return { entries: [ok("approve", "1,000 USDC · AllowanceHolder")], caption: "Never approve the 0x Settler contract; use the spender returned by the API." }; } }, { stage: "Simulate", action: "Simulate swap", text: "Fetch a fresh quote, then simulate its transaction data against the user's current wallet state.", summary: [["Operation", "Simulate"], ["Expected", M("0.397 WETH")], ["Minimum", M("0.395 WETH")], ["Result", "No revert"], ["Network", NETWORK]], run: (s) => { s.metrics = [{ label: "Sell", value: "1,000 USDC" }, { label: "Quoted output", value: "0.397 WETH" }, { label: "Minimum output", value: "0.395 WETH", tone: "ok" }]; return { entries: [ok("simulation", "transaction succeeds"), nfo("quote refreshed", "allowance satisfied")], caption: "Do not submit stale calldata after balances, allowances, or market prices change." }; } }, - { stage: "Swap", action: "Submit swap", - text: "Ask the wallet to sign the prepared transaction and wait for its receipt.", - summary: [["Operation", "Execute swap"], ["Sell", M("1,000 USDC")], ["Receive", M("0.397 WETH")], ["Minimum", M("0.395 WETH")], ["Network", NETWORK]], - run: (s) => { s.metrics = [{ label: "USDC spent", value: "1,000 USDC" }, { label: "WETH received", value: "0.397 WETH", tone: "ok" }, { label: "Status", value: "Confirmed", tone: "ok" }]; return { entries: [ok("swap submitted", "0x route"), ok("swap confirmed", "0.397 WETH received")], caption: "Refresh balances from Base after the receipt confirms." }; } }, + { stage: "Swap", action: "Approve and submit swap", + text: "Approve only the AllowanceHolder address returned by the quote for the exact sell amount, then ask the wallet to sign the prepared transaction and wait for its receipt.", + summary: [["Operation", "Approve and execute swap"], ["Sell", M("1,000 USDC")], ["Receive", M("0.397 WETH")], ["Minimum", M("0.395 WETH")], ["Spender", "0x AllowanceHolder"], ["Network", NETWORK]], + run: (s) => { s.metrics = [{ label: "USDC spent", value: "1,000 USDC" }, { label: "WETH received", value: "0.397 WETH", tone: "ok" }, { label: "Status", value: "Confirmed", tone: "ok" }]; return { entries: [ok("approve", "1,000 USDC · AllowanceHolder"), ok("swap submitted", "0x route"), ok("swap confirmed", "0.397 WETH received")], caption: "Never approve the 0x Settler contract; use the spender returned by the API. Refresh balances from Base after the receipt confirms." }; } }, ], }, }; @@ -237,6 +233,7 @@ export const DeFiDemo = ({ flow }) => { .wf-btn { font-family: ${sans}; font-size: 13px; font-weight: 600; border-radius: 6px; padding: 10px 14px; cursor: pointer; transition: filter .15s ease; border: 1px solid ${C.blue}; background: ${C.blue}; color: ${C.onBlue}; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .wf-btn:hover { filter: brightness(1.1); } .wf-btn:disabled { background: ${C.panel}; border-color: ${C.border}; color: ${C.sub}; cursor: default; filter: none; } + a.wf-btn, a.wf-btn:visited { color: ${C.onBlue}; } .wf-btn2 { font-family: ${sans}; font-size: 13px; font-weight: 600; border-radius: 6px; padding: 10px 14px; cursor: pointer; background: ${C.white}; border: 1px solid ${C.border}; color: ${C.body}; width: 100%; transition: background .15s ease; } .wf-btn2:hover { background: ${C.panel}; } .wf-pill { font-family: ${sans}; font-size: 12px; font-weight: 500; border-radius: 6px; padding: 5px 10px; cursor: pointer; white-space: nowrap; color: ${C.sec}; background: ${C.white}; border: 1px solid ${C.border}; transition: all .12s ease; } diff --git a/docs/snippets/PaymentsDemo.jsx b/docs/snippets/PaymentsDemo.jsx index 457c484c9..abe4c6d0b 100644 --- a/docs/snippets/PaymentsDemo.jsx +++ b/docs/snippets/PaymentsDemo.jsx @@ -443,6 +443,7 @@ export const PaymentsDemo = ({ flow }) => { .wf-btn { font-family: ${sans}; font-size: 13px; font-weight: 600; border-radius: 6px; padding: 10px 14px; cursor: pointer; transition: filter .15s ease; border: 1px solid ${C.blue}; background: ${C.blue}; color: ${C.onBlue}; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .wf-btn:hover { filter: brightness(1.1); } .wf-btn:disabled { background: ${C.panel}; border-color: ${C.border}; color: ${C.sub}; cursor: default; filter: none; } + a.wf-btn, a.wf-btn:visited { color: ${C.onBlue}; } .wf-btn2 { font-family: ${sans}; font-size: 13px; font-weight: 600; border-radius: 6px; padding: 10px 14px; cursor: pointer; background: ${C.white}; border: 1px solid ${C.border}; color: ${C.body}; width: 100%; transition: background .15s ease; } .wf-btn2:hover { background: ${C.panel}; } .wf-pill { font-family: ${sans}; font-size: 12px; font-weight: 500; border-radius: 6px; padding: 5px 10px; cursor: pointer; white-space: nowrap; color: ${C.sec}; background: ${C.white}; border: 1px solid ${C.border}; transition: all .12s ease; } diff --git a/docs/snippets/StablecoinDemo.jsx b/docs/snippets/StablecoinDemo.jsx index d92dbe8c6..fc16a1733 100644 --- a/docs/snippets/StablecoinDemo.jsx +++ b/docs/snippets/StablecoinDemo.jsx @@ -305,6 +305,7 @@ export const StablecoinDemo = ({ flow }) => { .wf-btn { font-family: var(--wf-sans); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; border-radius: 6px; padding: 10px 14px; cursor: pointer; transition: filter .15s ease; border: 1px solid ${C.blue}; background: ${C.blue}; color: ${C.onBlue}; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .wf-btn:hover { filter: brightness(1.1); } .wf-btn:disabled { background: ${C.panel}; border-color: ${C.border}; color: ${C.sub}; cursor: default; filter: none; } + a.wf-btn, a.wf-btn:visited { color: ${C.onBlue}; } .wf-btn2 { font-family: var(--wf-sans); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; border-radius: 6px; padding: 10px 14px; cursor: pointer; background: ${C.white}; border: 1px solid ${C.border}; color: ${C.body}; width: 100%; transition: background .15s ease; } .wf-btn2:hover { background: ${C.panel}; } .wf-pill { font-family: var(--wf-sans); font-size: 12px; font-weight: 500; border-radius: 6px; padding: 5px 10px; cursor: pointer; white-space: nowrap; color: ${C.sec}; background: ${C.white}; border: 1px solid ${C.border}; transition: all .12s ease; }