Files
zeekay 11265a21fd Highlight every code sample with shiki in the code theme
Code on hanzo.ai was plain monospace: 285 blocks across 200 pages, one of
them hand-inked in four greys. components/code now renders each sample
at build with shiki and @hanzo/ui's codeTheme (Dracula dark, GitHub
Light light), every colour written as light-dark() so the page's
color-scheme picks it, on the theme's own ground. The page ships the
coloured spans and no highlighter; e2e/gates/code.spec.ts holds both.

A client page that shows code is split into a server page.tsx that owns
the sample and a client view.tsx that takes the highlighted node:
ProductLanding's code.source, the blockchain pages' codeExamples, the
models kit Sample, the guest-key card, realtime, analytics, payments,
sdks and the rest. Transcripts, agent prompts and ASCII diagrams are not
code and keep their markup.

Takes @hanzo/ui 8.27.83 for codeTheme and @hanzo/design 0.5.35 with it,
regenerates app/gui.css for the new theme keys, and lowers the raw-colour
allowance to 58: the samples' literal inks are gone.
2026-10-05 01:31:58 -07:00

40 lines
1021 B
TypeScript

import { Code } from '@/components/code'
import HanzoExchange from './view'
const SOURCE = `import { HanzoExchange } from "@hanzo/blockchain";
const exchange = new HanzoExchange({
apiKey: process.env.HANZO_API_KEY,
});
// DEX Aggregator - Find best swap route
const quote = await exchange.dex.getQuote({
fromToken: "ETH",
toToken: "USDC",
amount: "1.0",
slippage: 0.5, // 0.5%
});
console.log("Best route:", quote.route);
console.log("Expected output:", quote.outputAmount);
console.log("Price impact:", quote.priceImpact);
// Execute swap with MEV protection
const tx = await exchange.dex.swap(quote, {
mevProtection: true,
privateTransaction: true,
});
// Or use Order Book for limit orders
await exchange.orderbook.placeLimitOrder({
pair: "ETH/USDC",
side: "buy",
price: 2000,
amount: 1.0,
});`
/** The page, with its sample highlighted where it is built (components/code). */
export default function Page() {
return <HanzoExchange source={<Code lang="typescript" code={SOURCE} />} />
}