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

294 lines
7.7 KiB
TypeScript

import { sample } from '@/components/blockchain/sample'
import HanzoWebhooks from './view'
const EXAMPLES = [
{
language: "Solidity",
filename: "WebhookTrigger.sol",
code: `// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;
import "@hanzo/webhooks/IHanzoWebhooks.sol";
/// @title WebhookTrigger - Emit events for webhook notifications
/// @notice Structured events for reliable webhook delivery
contract WebhookTrigger {
// Events optimized for webhook subscriptions
event PaymentReceived(
address indexed from,
address indexed token,
uint256 amount,
bytes32 indexed orderId,
uint256 timestamp
);
event LiquidationAlert(
address indexed user,
address indexed market,
uint256 collateralValue,
uint256 debtValue,
uint256 indexed blockNumber
);
event NFTActivity(
address indexed collection,
uint256 indexed tokenId,
address from,
address to,
uint256 price,
string activityType // "sale", "bid", "transfer"
);
event SecurityAlert(
address indexed target,
bytes32 indexed alertType,
address triggeredBy,
bytes data
);
// Emit payment for webhook notification
function emitPayment(
address token,
uint256 amount,
bytes32 orderId
) external {
emit PaymentReceived(msg.sender, token, amount, orderId, block.timestamp);
}
// Emit liquidation alert for DeFi monitoring
function emitLiquidationAlert(
address user,
address market,
uint256 collateralValue,
uint256 debtValue
) external {
emit LiquidationAlert(user, market, collateralValue, debtValue, block.number);
}
// Emit NFT activity for marketplace webhooks
function emitNFTActivity(
address collection,
uint256 tokenId,
address from,
address to,
uint256 price,
string calldata activityType
) external {
emit NFTActivity(collection, tokenId, from, to, price, activityType);
}
}`,
},
{
language: "Node",
filename: "webhooks.ts",
code: `import { HanzoWebhooks } from "@hanzo/blockchain";
const webhooks = new HanzoWebhooks({
apiKey: process.env.HANZO_API_KEY,
});
// Create a webhook subscription
const subscription = await webhooks.create({
url: "https://api.myapp.com/webhook",
events: ["transfer", "contract_event"],
chains: ["ethereum", "polygon"],
filters: {
address: "0x...",
minValue: "1000000000000000000", // 1 ETH
},
confirmations: 12,
});
// Verify webhook signature
const isValid = webhooks.verifySignature({
payload: req.body,
signature: req.headers["x-webhook-signature"],
secret: process.env.WEBHOOK_SECRET,
});`,
},
{
language: "Python",
filename: "webhooks.py",
code: `from hanzo_blockchain import HanzoWebhooks
webhooks = HanzoWebhooks(api_key=os.environ["HANZO_API_KEY"])
# Create a webhook subscription
subscription = webhooks.create(
url="https://api.myapp.com/webhook",
events=["transfer", "contract_event"],
chains=["ethereum", "polygon"],
filters={
"address": "0x...",
"min_value": "1000000000000000000", # 1 ETH
},
confirmations=12,
)
# Verify webhook signature
is_valid = webhooks.verify_signature(
payload=request.data,
signature=request.headers["X-Webhook-Signature"],
secret=os.environ["WEBHOOK_SECRET"],
)`,
},
{
language: "Go",
filename: "webhooks.go",
code: `package main
import (
"os"
hanzo "github.com/hanzoai/blockchain-go"
)
func main() {
webhooks := hanzo.NewWebhooks(os.Getenv("HANZO_API_KEY"))
// Create a webhook subscription
subscription, err := webhooks.Create(&hanzo.WebhookConfig{
URL: "https://api.myapp.com/webhook",
Events: []string{"transfer", "contract_event"},
Chains: []string{"ethereum", "polygon"},
Filters: &hanzo.WebhookFilters{
Address: "0x...",
MinValue: "1000000000000000000", // 1 ETH
},
Confirmations: 12,
})
// Verify webhook signature
isValid := webhooks.VerifySignature(
payload,
r.Header.Get("X-Webhook-Signature"),
os.Getenv("WEBHOOK_SECRET"),
)
}`,
},
{
language: "Rust",
filename: "webhooks.rs",
code: `use hanzo_blockchain::{HanzoWebhooks, WebhookConfig, WebhookFilters};
use std::env;
#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
let webhooks = HanzoWebhooks::new(&env::var("HANZO_API_KEY")?);
// Create a webhook subscription
let subscription = webhooks.create(WebhookConfig {
url: "https://api.myapp.com/webhook".into(),
events: vec!["transfer".into(), "contract_event".into()],
chains: vec!["ethereum".into(), "polygon".into()],
filters: Some(WebhookFilters {
address: Some("0x...".into()),
min_value: Some("1000000000000000000".into()), // 1 ETH
}),
confirmations: 12,
}).await?;
// Verify webhook signature
let is_valid = webhooks.verify_signature(
&payload,
&headers["x-webhook-signature"],
&env::var("WEBHOOK_SECRET")?,
);
Ok(())
}`,
},
{
language: "C",
filename: "webhooks.c",
code: `#include <hanzo/blockchain.h>
#include <stdlib.h>
int main() {
hanzo_webhooks_t *webhooks = hanzo_webhooks_new(getenv("HANZO_API_KEY"));
// Create a webhook subscription
hanzo_webhook_config_t config = {
.url = "https://api.myapp.com/webhook",
.events = (const char*[]){"transfer", "contract_event"},
.events_count = 2,
.chains = (const char*[]){"ethereum", "polygon"},
.chains_count = 2,
.filter_address = "0x...",
.filter_min_value = "1000000000000000000", // 1 ETH
.confirmations = 12,
};
hanzo_subscription_t *subscription = hanzo_webhooks_create(webhooks, &config);
// Verify webhook signature
int is_valid = hanzo_webhooks_verify_signature(
webhooks, payload, signature, getenv("WEBHOOK_SECRET")
);
hanzo_subscription_free(subscription);
hanzo_webhooks_free(webhooks);
return 0;
}`,
},
{
language: "C++",
filename: "webhooks.cpp",
code: `#include <hanzo/blockchain.hpp>
#include <cstdlib>
int main() {
auto webhooks = hanzo::Webhooks(std::getenv("HANZO_API_KEY"));
// Create a webhook subscription
auto subscription = webhooks.create({
.url = "https://api.myapp.com/webhook",
.events = {"transfer", "contract_event"},
.chains = {"ethereum", "polygon"},
.filters = {
.address = "0x...",
.min_value = "1000000000000000000", // 1 ETH
},
.confirmations = 12,
});
// Verify webhook signature
bool is_valid = webhooks.verify_signature(
payload,
headers["X-Webhook-Signature"],
std::getenv("WEBHOOK_SECRET")
);
return 0;
}`,
},
{
language: "Ruby",
filename: "webhooks.rb",
code: `require 'hanzo/blockchain'
webhooks = Hanzo::Webhooks.new(api_key: ENV['HANZO_API_KEY'])
# Create a webhook subscription
subscription = webhooks.create(
url: 'https://api.myapp.com/webhook',
events: ['transfer', 'contract_event'],
chains: ['ethereum', 'polygon'],
filters: {
address: '0x...',
min_value: '1000000000000000000' # 1 ETH
},
confirmations: 12
)
# Verify webhook signature
is_valid = webhooks.verify_signature(
payload: request.body.read,
signature: request.headers['X-Webhook-Signature'],
secret: ENV['WEBHOOK_SECRET']
)`,
},
]
/** The page, with every language's sample highlighted where it is built (components/code). */
export default function Page() {
return <HanzoWebhooks codeExamples={EXAMPLES.map(sample)} />
}