fix(demos): solution demo link color + trading demo cleanup

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
 
 <CardGroup cols={2}>
@@ -147,9 +121,6 @@ Request a new quote after an approval transaction or any change to the amount, t
   <Card title="Token Allowances" icon="shield" href="https://docs.0x.org/evm/0x-swap-api/additional-topics/how-to-set-your-token-allowances">
     Approve the correct spender and avoid unsafe approvals.
   </Card>
-  <Card title="Supported Chains" icon="link" href="https://docs.0x.org/docs/introduction/supported-chains">
-    Confirm Base support and the current Swap API feature matrix.
-  </Card>
 </CardGroup>
 
 ## See Also

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; }

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; }

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; }

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; }