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

290 lines
7.9 KiB
TypeScript

import { sample } from '@/components/blockchain/sample'
import HanzoGas from './view'
const EXAMPLES = [
{
language: "Solidity",
filename: "GaslessApp.sol",
code: `// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;
import "@hanzo/gas/IHanzoPaymaster.sol";
import "@account-abstraction/contracts/core/BasePaymaster.sol";
contract HanzoPaymaster is BasePaymaster {
mapping(address => bool) public whitelistedContracts;
mapping(address => uint256) public userGasUsed;
uint256 public maxGasPerUser = 0.01 ether;
constructor(IEntryPoint _entryPoint) BasePaymaster(_entryPoint) {}
// Validate paymaster will sponsor this UserOp
function _validatePaymasterUserOp(
UserOperation calldata userOp,
bytes32 userOpHash,
uint256 maxCost
) internal override returns (bytes memory context, uint256 validationData) {
address target = address(bytes20(userOp.callData[16:36]));
require(whitelistedContracts[target], "Contract not whitelisted");
require(
userGasUsed[userOp.sender] + maxCost <= maxGasPerUser,
"User gas limit exceeded"
);
return (abi.encode(userOp.sender, maxCost), 0);
}
// Called after UserOp execution
function _postOp(
PostOpMode mode,
bytes calldata context,
uint256 actualGasCost
) internal override {
(address user, ) = abi.decode(context, (address, uint256));
userGasUsed[user] += actualGasCost;
}
// Admin functions
function whitelistContract(address target, bool allowed) external onlyOwner {
whitelistedContracts[target] = allowed;
}
function setMaxGasPerUser(uint256 _max) external onlyOwner {
maxGasPerUser = _max;
}
}`,
},
{
language: "Node",
filename: "gas.ts",
code: `import { HanzoGasManager } from "@hanzo/blockchain";
const gasManager = new HanzoGasManager({
apiKey: process.env.HANZO_API_KEY,
});
// Create a gas policy
const policy = await gasManager.createPolicy({
name: "new-user-onboarding",
chains: ["ethereum", "polygon"],
maxGasPerUser: "0.01",
maxGasPerOperation: "0.001",
allowedContracts: ["0x..."],
expiresAt: "2025-12-31",
});
// Sponsor a UserOperation
const sponsorship = await gasManager.sponsorUserOp({
chain: "ethereum",
userOp: userOperation,
policyId: policy.id,
});
// Check balance and usage
const balance = await gasManager.getBalance({ chain: "ethereum" });
const usage = await gasManager.getUsage({ policyId: policy.id });`,
},
{
language: "Python",
filename: "gas.py",
code: `from hanzo.blockchain import GasManager
import os
gas_manager = GasManager(api_key=os.environ["HANZO_API_KEY"])
# Create a gas policy
policy = gas_manager.create_policy(
name="new-user-onboarding",
chains=["ethereum", "polygon"],
max_gas_per_user="0.01",
max_gas_per_operation="0.001",
allowed_contracts=["0x..."],
expires_at="2025-12-31",
)
# Sponsor a UserOperation
sponsorship = gas_manager.sponsor_user_op(
chain="ethereum",
user_op=user_operation,
policy_id=policy.id,
)
# Check balance and usage
balance = gas_manager.get_balance(chain="ethereum")
usage = gas_manager.get_usage(policy_id=policy.id)`,
},
{
language: "Go",
filename: "gas.go",
code: `package main
import (
"os"
"github.com/hanzoai/blockchain-go/gas"
)
func main() {
manager := gas.NewManager(os.Getenv("HANZO_API_KEY"))
// Create a gas policy
policy, _ := manager.CreatePolicy(&gas.PolicyConfig{
Name: "new-user-onboarding",
Chains: []string{"ethereum", "polygon"},
MaxGasPerUser: "0.01",
MaxGasPerOperation: "0.001",
AllowedContracts: []string{"0x..."},
ExpiresAt: "2025-12-31",
})
// Sponsor a UserOperation
sponsorship, _ := manager.SponsorUserOp(&gas.SponsorRequest{
Chain: "ethereum",
UserOp: userOperation,
PolicyID: policy.ID,
})
// Check balance and usage
balance, _ := manager.GetBalance("ethereum")
usage, _ := manager.GetUsage(policy.ID)
}`,
},
{
language: "Rust",
filename: "gas.rs",
code: `use hanzo_blockchain::gas::{GasManager, PolicyConfig, SponsorRequest};
use std::env;
#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
let manager = GasManager::new(&env::var("HANZO_API_KEY")?);
// Create a gas policy
let policy = manager.create_policy(PolicyConfig {
name: "new-user-onboarding".into(),
chains: vec!["ethereum".into(), "polygon".into()],
max_gas_per_user: "0.01".into(),
max_gas_per_operation: "0.001".into(),
allowed_contracts: vec!["0x...".into()],
expires_at: "2025-12-31".into(),
}).await?;
// Sponsor a UserOperation
let sponsorship = manager.sponsor_user_op(SponsorRequest {
chain: "ethereum".into(),
user_op: user_operation,
policy_id: policy.id.clone(),
}).await?;
// Check balance and usage
let balance = manager.get_balance("ethereum").await?;
let usage = manager.get_usage(&policy.id).await?;
Ok(())
}`,
},
{
language: "C",
filename: "gas.c",
code: `#include <hanzo/blockchain/gas.h>
#include <stdlib.h>
int main() {
hanzo_gas_manager_t *manager = hanzo_gas_manager_new(
getenv("HANZO_API_KEY")
);
// Create a gas policy
const char *chains[] = {"ethereum", "polygon", NULL};
const char *contracts[] = {"0x...", NULL};
hanzo_gas_policy_t *policy = hanzo_gas_create_policy(manager,
"new-user-onboarding", // name
chains, // chains
"0.01", // max_gas_per_user
"0.001", // max_gas_per_operation
contracts, // allowed_contracts
"2025-12-31" // expires_at
);
// Sponsor a UserOperation
hanzo_sponsorship_t *sponsorship = hanzo_gas_sponsor_user_op(
manager, "ethereum", user_op, policy->id
);
// Check balance and usage
hanzo_balance_t *balance = hanzo_gas_get_balance(manager, "ethereum");
hanzo_usage_t *usage = hanzo_gas_get_usage(manager, policy->id);
hanzo_gas_manager_free(manager);
return 0;
}`,
},
{
language: "C++",
filename: "gas.cpp",
code: `#include <hanzo/blockchain/gas.hpp>
#include <cstdlib>
int main() {
auto manager = hanzo::gas::Manager(std::getenv("HANZO_API_KEY"));
// Create a gas policy
auto policy = manager.create_policy({
.name = "new-user-onboarding",
.chains = {"ethereum", "polygon"},
.max_gas_per_user = "0.01",
.max_gas_per_operation = "0.001",
.allowed_contracts = {"0x..."},
.expires_at = "2025-12-31",
});
// Sponsor a UserOperation
auto sponsorship = manager.sponsor_user_op({
.chain = "ethereum",
.user_op = user_operation,
.policy_id = policy.id,
});
// Check balance and usage
auto balance = manager.get_balance("ethereum");
auto usage = manager.get_usage(policy.id);
return 0;
}`,
},
{
language: "Ruby",
filename: "gas.rb",
code: `require 'hanzo/blockchain'
manager = Hanzo::Blockchain::GasManager.new(
api_key: ENV['HANZO_API_KEY']
)
# Create a gas policy
policy = manager.create_policy(
name: 'new-user-onboarding',
chains: %w[ethereum polygon],
max_gas_per_user: '0.01',
max_gas_per_operation: '0.001',
allowed_contracts: ['0x...'],
expires_at: '2025-12-31'
)
# Sponsor a UserOperation
sponsorship = manager.sponsor_user_op(
chain: 'ethereum',
user_op: user_operation,
policy_id: policy.id
)
# Check balance and usage
balance = manager.get_balance(chain: 'ethereum')
usage = manager.get_usage(policy_id: policy.id)`,
},
]
/** The page, with every language's sample highlighted where it is built (components/code). */
export default function Page() {
return <HanzoGas codeExamples={EXAMPLES.map(sample)} />
}