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

239 lines
6.7 KiB
TypeScript

import { sample } from '@/components/blockchain/sample'
import HanzoChains from './view'
const EXAMPLES = [
{
language: "Solidity",
filename: "MultiChainReader.sol",
code: `// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;
import "@hanzo/chains/IChainReader.sol";
import "@hanzo/chains/ICrossChainMessenger.sol";
contract MultiChainReader {
IChainReader public chainReader;
ICrossChainMessenger public messenger;
mapping(uint256 => uint256) public chainBalances;
event CrossChainBalanceUpdated(uint256 chainId, uint256 balance);
constructor(address _chainReader, address _messenger) {
chainReader = IChainReader(_chainReader);
messenger = ICrossChainMessenger(_messenger);
}
// Request balance from another chain via cross-chain message
function requestCrossChainBalance(
uint256 targetChainId,
address account
) external returns (bytes32 messageId) {
bytes memory payload = abi.encode(account);
messageId = messenger.sendMessage(
targetChainId,
address(this),
payload,
200000 // gas limit
);
}
// Receive cross-chain balance response
function onMessageReceived(
uint256 sourceChainId,
bytes calldata payload
) external {
require(msg.sender == address(messenger), "Only messenger");
uint256 balance = abi.decode(payload, (uint256));
chainBalances[sourceChainId] = balance;
emit CrossChainBalanceUpdated(sourceChainId, balance);
}
// Read current chain's block number
function getBlockNumber() external view returns (uint256) {
return chainReader.getBlockNumber();
}
// Read current chain's gas price
function getGasPrice() external view returns (uint256) {
return chainReader.getGasPrice();
}
}`,
},
{
language: "Node",
filename: "chains.ts",
code: `import { HanzoChains } from "@hanzo/blockchain";
const chains = new HanzoChains({
apiKey: process.env.HANZO_API_KEY,
});
// Get the latest block from Ethereum
const block = await chains.eth.getBlockNumber();
// Subscribe to new blocks on Lux C-Chain
chains.lux.cchain.subscribe("newHeads", (block) => {
console.log("New block:", block.number);
});
// Multi-chain balance check
const balances = await chains.multiCall([
{ chain: "ethereum", method: "eth_getBalance", params: [address] },
{ chain: "lux-cchain", method: "eth_getBalance", params: [address] },
]);`,
},
{
language: "Python",
filename: "chains.py",
code: `from hanzo import HanzoChains
chains = HanzoChains(api_key=os.environ["HANZO_API_KEY"])
# Get the latest block from Ethereum
block = await chains.eth.get_block_number()
# Subscribe to new blocks on Lux C-Chain
async for block in chains.lux.cchain.subscribe("newHeads"):
print(f"New block: {block['number']}")
# Multi-chain balance check
balances = await chains.multi_call([
{"chain": "ethereum", "method": "eth_getBalance", "params": [address]},
{"chain": "lux-cchain", "method": "eth_getBalance", "params": [address]},
])`,
},
{
language: "Go",
filename: "chains.go",
code: `package main
import "github.com/hanzoai/hanzo-go/blockchain"
func main() {
chains := blockchain.NewClient(os.Getenv("HANZO_API_KEY"))
// Get the latest block from Ethereum
block, _ := chains.Eth.GetBlockNumber(ctx)
// Subscribe to new blocks on Lux C-Chain
sub := chains.Lux.CChain.Subscribe(ctx, "newHeads")
for block := range sub.Blocks() {
fmt.Printf("New block: %d\\n", block.Number)
}
// Multi-chain balance check
balances, _ := chains.MultiCall(ctx, []blockchain.Call{
{Chain: "ethereum", Method: "eth_getBalance", Params: []any{address}},
{Chain: "lux-cchain", Method: "eth_getBalance", Params: []any{address}},
})
}`,
},
{
language: "Rust",
filename: "chains.rs",
code: `use hanzo_blockchain::HanzoChains;
#[tokio::main]
async fn main() -> Result<()> {
let chains = HanzoChains::new(std::env::var("HANZO_API_KEY")?);
// Get the latest block from Ethereum
let block = chains.eth().get_block_number().await?;
// Subscribe to new blocks on Lux C-Chain
let mut stream = chains.lux().cchain().subscribe("newHeads").await?;
while let Some(block) = stream.next().await {
println!("New block: {}", block.number);
}
// Multi-chain balance check
let balances = chains.multi_call(vec![
Call::new("ethereum", "eth_getBalance", vec![address]),
Call::new("lux-cchain", "eth_getBalance", vec![address]),
]).await?;
Ok(())
}`,
},
{
language: "C",
filename: "chains.c",
code: `#include <hanzo/blockchain.h>
int main() {
hanzo_chains_t *chains = hanzo_chains_new(getenv("HANZO_API_KEY"));
// Get the latest block from Ethereum
uint64_t block = hanzo_eth_get_block_number(chains);
// Subscribe to new blocks on Lux C-Chain
hanzo_subscription_t *sub = hanzo_lux_cchain_subscribe(chains, "newHeads");
hanzo_block_t block;
while (hanzo_subscription_next(sub, &block)) {
printf("New block: %llu\\n", block.number);
}
// Multi-chain balance check
hanzo_call_t calls[] = {
{"ethereum", "eth_getBalance", address},
{"lux-cchain", "eth_getBalance", address},
};
hanzo_multi_call(chains, calls, 2);
hanzo_chains_free(chains);
return 0;
}`,
},
{
language: "C++",
filename: "chains.cpp",
code: `#include <hanzo/blockchain.hpp>
int main() {
auto chains = hanzo::Chains(std::getenv("HANZO_API_KEY"));
// Get the latest block from Ethereum
auto block = chains.eth().getBlockNumber();
// Subscribe to new blocks on Lux C-Chain
chains.lux().cchain().subscribe("newHeads", [](auto block) {
std::cout << "New block: " << block.number << std::endl;
});
// Multi-chain balance check
auto balances = chains.multiCall({
{"ethereum", "eth_getBalance", {address}},
{"lux-cchain", "eth_getBalance", {address}},
});
return 0;
}`,
},
{
language: "Ruby",
filename: "chains.rb",
code: `require 'hanzo/blockchain'
chains = Hanzo::Chains.new(api_key: ENV['HANZO_API_KEY'])
# Get the latest block from Ethereum
block = chains.eth.get_block_number
# Subscribe to new blocks on Lux C-Chain
chains.lux.cchain.subscribe('newHeads') do |block|
puts "New block: #{block[:number]}"
end
# Multi-chain balance check
balances = chains.multi_call([
{ chain: 'ethereum', method: 'eth_getBalance', params: [address] },
{ chain: 'lux-cchain', method: 'eth_getBalance', params: [address] },
])`,
},
]
/** The page, with every language's sample highlighted where it is built (components/code). */
export default function Page() {
return <HanzoChains codeExamples={EXAMPLES.map(sample)} />
}