mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
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.
229 lines
6.5 KiB
TypeScript
229 lines
6.5 KiB
TypeScript
import { sample } from '@/components/blockchain/sample'
|
|
import HanzoRollups from './view'
|
|
|
|
const EXAMPLES = [
|
|
{
|
|
language: "Solidity",
|
|
filename: "L2Bridge.sol",
|
|
code: `// SPDX-License-Identifier: MIT
|
|
pragma solidity ^0.8.24;
|
|
|
|
import "@hanzo/rollups/IL2Bridge.sol";
|
|
import "@hanzo/rollups/ICrossChainMessenger.sol";
|
|
import "@openzeppelin/contracts/token/ERC20/IERC20.sol";
|
|
|
|
/// @title L2Bridge - Bridge assets between L1 and L2 rollups
|
|
contract L2Bridge {
|
|
IL2Bridge public bridge;
|
|
ICrossChainMessenger public messenger;
|
|
|
|
mapping(bytes32 => bool) public processedDeposits;
|
|
|
|
event DepositInitiated(address indexed from, uint256 amount, uint256 l2ChainId);
|
|
event WithdrawalCompleted(address indexed to, uint256 amount);
|
|
|
|
constructor(address _bridge, address _messenger) {
|
|
bridge = IL2Bridge(_bridge);
|
|
messenger = ICrossChainMessenger(_messenger);
|
|
}
|
|
|
|
// Bridge ETH from L1 to L2
|
|
function bridgeETHToL2(uint256 l2ChainId) external payable {
|
|
bridge.depositETH{value: msg.value}(l2ChainId, msg.sender);
|
|
emit DepositInitiated(msg.sender, msg.value, l2ChainId);
|
|
}
|
|
|
|
// Bridge ERC20 tokens to L2
|
|
function bridgeTokenToL2(
|
|
address token,
|
|
uint256 amount,
|
|
uint256 l2ChainId
|
|
) external {
|
|
IERC20(token).transferFrom(msg.sender, address(this), amount);
|
|
IERC20(token).approve(address(bridge), amount);
|
|
bridge.depositERC20(token, amount, l2ChainId, msg.sender);
|
|
emit DepositInitiated(msg.sender, amount, l2ChainId);
|
|
}
|
|
|
|
// Finalize withdrawal on L1 (called by relayer)
|
|
function finalizeWithdrawal(
|
|
bytes32 withdrawalHash,
|
|
address to,
|
|
uint256 amount,
|
|
bytes calldata proof
|
|
) external {
|
|
require(!processedDeposits[withdrawalHash], "Already processed");
|
|
require(bridge.verifyWithdrawalProof(withdrawalHash, proof), "Invalid proof");
|
|
|
|
processedDeposits[withdrawalHash] = true;
|
|
payable(to).transfer(amount);
|
|
emit WithdrawalCompleted(to, amount);
|
|
}
|
|
}`,
|
|
},
|
|
{
|
|
language: "Node",
|
|
filename: "rollups.ts",
|
|
code: `import { HanzoRollups } from "@hanzo/blockchain";
|
|
|
|
const rollups = new HanzoRollups({ apiKey: process.env.HANZO_API_KEY });
|
|
|
|
// Deploy a new app-specific rollup
|
|
const rollup = await rollups.deploy({
|
|
name: "my-app-chain",
|
|
type: "optimistic", // or "zk"
|
|
dataAvailability: "ethereum",
|
|
gasToken: "ETH",
|
|
});
|
|
|
|
// Monitor rollup status
|
|
const status = await rollup.getStatus();
|
|
console.log("TPS:", status.transactionsPerSecond);
|
|
console.log("Finality:", status.averageFinalityTime);`,
|
|
},
|
|
{
|
|
language: "Python",
|
|
filename: "rollups.py",
|
|
code: `from hanzo import HanzoRollups
|
|
|
|
rollups = HanzoRollups(api_key=os.environ["HANZO_API_KEY"])
|
|
|
|
# Deploy a new app-specific rollup
|
|
rollup = await rollups.deploy(
|
|
name="my-app-chain",
|
|
type="optimistic", # or "zk"
|
|
data_availability="ethereum",
|
|
gas_token="ETH",
|
|
)
|
|
|
|
# Monitor rollup status
|
|
status = await rollup.get_status()
|
|
print(f"TPS: {status['transactions_per_second']}")
|
|
print(f"Finality: {status['average_finality_time']}")`,
|
|
},
|
|
{
|
|
language: "Go",
|
|
filename: "rollups.go",
|
|
code: `package main
|
|
|
|
import "github.com/hanzoai/hanzo-go/blockchain"
|
|
|
|
func main() {
|
|
rollups := blockchain.NewRollups(os.Getenv("HANZO_API_KEY"))
|
|
|
|
// Deploy a new app-specific rollup
|
|
rollup, _ := rollups.Deploy(ctx, blockchain.DeployConfig{
|
|
Name: "my-app-chain",
|
|
Type: "optimistic", // or "zk"
|
|
DataAvailability: "ethereum",
|
|
GasToken: "ETH",
|
|
})
|
|
|
|
// Monitor rollup status
|
|
status, _ := rollup.GetStatus(ctx)
|
|
fmt.Printf("TPS: %d\\n", status.TransactionsPerSecond)
|
|
fmt.Printf("Finality: %s\\n", status.AverageFinalityTime)
|
|
}`,
|
|
},
|
|
{
|
|
language: "Rust",
|
|
filename: "rollups.rs",
|
|
code: `use hanzo_blockchain::Rollups;
|
|
|
|
#[tokio::main]
|
|
async fn main() -> Result<()> {
|
|
let rollups = Rollups::new(std::env::var("HANZO_API_KEY")?);
|
|
|
|
// Deploy a new app-specific rollup
|
|
let rollup = rollups.deploy(DeployConfig {
|
|
name: "my-app-chain".into(),
|
|
rollup_type: RollupType::Optimistic, // or Zk
|
|
data_availability: "ethereum".into(),
|
|
gas_token: "ETH".into(),
|
|
}).await?;
|
|
|
|
// Monitor rollup status
|
|
let status = rollup.get_status().await?;
|
|
println!("TPS: {}", status.transactions_per_second);
|
|
println!("Finality: {}", status.average_finality_time);
|
|
Ok(())
|
|
}`,
|
|
},
|
|
{
|
|
language: "C",
|
|
filename: "rollups.c",
|
|
code: `#include <hanzo/blockchain.h>
|
|
|
|
int main() {
|
|
hanzo_rollups_t *rollups = hanzo_rollups_new(getenv("HANZO_API_KEY"));
|
|
|
|
// Deploy a new app-specific rollup
|
|
hanzo_deploy_config_t config = {
|
|
.name = "my-app-chain",
|
|
.type = HANZO_ROLLUP_OPTIMISTIC, // or HANZO_ROLLUP_ZK
|
|
.data_availability = "ethereum",
|
|
.gas_token = "ETH"
|
|
};
|
|
hanzo_rollup_t *rollup = hanzo_rollups_deploy(rollups, &config);
|
|
|
|
// Monitor rollup status
|
|
hanzo_status_t status;
|
|
hanzo_rollup_get_status(rollup, &status);
|
|
printf("TPS: %d\\n", status.transactions_per_second);
|
|
printf("Finality: %s\\n", status.average_finality_time);
|
|
|
|
hanzo_rollups_free(rollups);
|
|
return 0;
|
|
}`,
|
|
},
|
|
{
|
|
language: "C++",
|
|
filename: "rollups.cpp",
|
|
code: `#include <hanzo/blockchain.hpp>
|
|
|
|
int main() {
|
|
auto rollups = hanzo::Rollups(std::getenv("HANZO_API_KEY"));
|
|
|
|
// Deploy a new app-specific rollup
|
|
auto rollup = rollups.deploy({
|
|
.name = "my-app-chain",
|
|
.type = hanzo::RollupType::Optimistic, // or Zk
|
|
.data_availability = "ethereum",
|
|
.gas_token = "ETH"
|
|
});
|
|
|
|
// Monitor rollup status
|
|
auto status = rollup.get_status();
|
|
std::cout << "TPS: " << status.transactions_per_second << std::endl;
|
|
std::cout << "Finality: " << status.average_finality_time << std::endl;
|
|
|
|
return 0;
|
|
}`,
|
|
},
|
|
{
|
|
language: "Ruby",
|
|
filename: "rollups.rb",
|
|
code: `require 'hanzo/blockchain'
|
|
|
|
rollups = Hanzo::Rollups.new(api_key: ENV['HANZO_API_KEY'])
|
|
|
|
# Deploy a new app-specific rollup
|
|
rollup = rollups.deploy(
|
|
name: 'my-app-chain',
|
|
type: :optimistic, # or :zk
|
|
data_availability: 'ethereum',
|
|
gas_token: 'ETH'
|
|
)
|
|
|
|
# Monitor rollup status
|
|
status = rollup.get_status
|
|
puts "TPS: #{status[:transactions_per_second]}"
|
|
puts "Finality: #{status[:average_finality_time]}"`,
|
|
},
|
|
]
|
|
|
|
/** The page, with every language's sample highlighted where it is built (components/code). */
|
|
export default function Page() {
|
|
return <HanzoRollups codeExamples={EXAMPLES.map(sample)} />
|
|
}
|