Astro

Tevm works with Astro for static site generation and server-side rendering of Ethereum data.

Installation

bun add @tevm/voltaire

Static Data Fetching

Fetch data at build time:

---
// pages/address/[address].astro
import { Address } from '@tevm/voltaire/Address'
import { Wei } from '@tevm/voltaire/Denomination'
import { createJsonRpcProvider } from '@tevm/voltaire/jsonrpc'

const provider = createJsonRpcProvider('https://eth.llamarpc.com')

const { address } = Astro.params

if (!address) {
  return Astro.redirect('/404')
}

const addr = Address.from(address)

const [balance, nonce, code] = await Promise.all([
  provider.eth.getBalance({ address: addr }),
  provider.eth.getTransactionCount({ address: addr }),
  provider.eth.getCode({ address: addr }),
])

const data = {
  address,
  balance: Wei.toEther(balance),
  nonce: Number(nonce),
  isContract: code.length > 2,
}
---

<html>
  <body>
    <h1>Address: {data.address}</h1>
    <p>Balance: {data.balance} ETH</p>
    <p>Nonce: {data.nonce}</p>
    <p>Type: {data.isContract ? 'Contract' : 'EOA'}</p>
  </body>
</html>

Server Endpoints

Create API routes for dynamic data:

// pages/api/balance/[address].ts
import type { APIRoute } from 'astro'
import { Address } from '@tevm/voltaire/Address'
import { Wei } from '@tevm/voltaire/Denomination'
import { createJsonRpcProvider } from '@tevm/voltaire/jsonrpc'

const provider = createJsonRpcProvider('https://eth.llamarpc.com')

export const GET: APIRoute = async ({ params }) => {
  const { address } = params

  if (!address) {
    return new Response(JSON.stringify({ error: 'Address required' }), {
      status: 400,
      headers: { 'Content-Type': 'application/json' },
    })
  }

  try {
    const addr = Address.from(address)
    const balance = await provider.eth.getBalance({ address: addr })

    return new Response(JSON.stringify({
      address,
      balance: Wei.toEther(balance),
    }), {
      headers: { 'Content-Type': 'application/json' },
    })
  } catch (e) {
    return new Response(JSON.stringify({ error: (e as Error).message }), {
      status: 500,
      headers: { 'Content-Type': 'application/json' },
    })
  }
}

Static Paths for Known Addresses

Pre-generate pages for known addresses:

---
// pages/address/[address].astro
import { Address } from '@tevm/voltaire/Address'
import { Wei } from '@tevm/voltaire/Denomination'
import { createJsonRpcProvider } from '@tevm/voltaire/jsonrpc'

export async function getStaticPaths() {
  // Pre-defined addresses to generate at build time
  const addresses = [
    '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045', // vitalik.eth
    '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', // WETH
  ]

  return addresses.map(address => ({
    params: { address },
  }))
}

const provider = createJsonRpcProvider('https://eth.llamarpc.com')
const { address } = Astro.params
const addr = Address.from(address!)

const balance = await provider.eth.getBalance({ address: addr })
---

<p>Balance: {Wei.toEther(balance)} ETH</p>

Hybrid Rendering

Use SSR for dynamic pages:

// astro.config.mjs
export default defineConfig({
  output: 'hybrid', // or 'server' for full SSR
})

---
// pages/live/[address].astro
export const prerender = false // Force SSR for this page

import { Address } from '@tevm/voltaire/Address'
import { Wei } from '@tevm/voltaire/Denomination'
import { createJsonRpcProvider } from '@tevm/voltaire/jsonrpc'

const provider = createJsonRpcProvider('https://eth.llamarpc.com')
const { address } = Astro.params

const addr = Address.from(address!)
const balance = await provider.eth.getBalance({ address: addr })
---

<p>Live Balance: {Wei.toEther(balance)} ETH</p>
<p>Fetched at: {new Date().toISOString()}</p>

React/Vue/Solid Islands

Use framework components for interactivity:

---
// pages/dashboard.astro
import BalanceChecker from '../components/BalanceChecker.tsx'
---

<html>
  <body>
    <h1>Ethereum Dashboard</h1>
    <!-- React component with client-side interactivity -->
    <BalanceChecker client:load />
  </body>
</html>

// components/BalanceChecker.tsx (React)
import { useState } from 'react'
import { Address } from '@tevm/voltaire/Address'
import { Wei } from '@tevm/voltaire/Denomination'
import { createJsonRpcProvider } from '@tevm/voltaire/jsonrpc'

const provider = createJsonRpcProvider('https://eth.llamarpc.com')

export default function BalanceChecker() {
  const [address, setAddress] = useState('')
  const [balance, setBalance] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)

  async function checkBalance() {
    if (!address) return
    setLoading(true)
    try {
      const addr = Address.from(address)
      const result = await provider.eth.getBalance({ address: addr })
      setBalance(Wei.toEther(result))
    } finally {
      setLoading(false)
    }
  }

  return (
    <div>
      <input
        value={address}
        onChange={(e) => setAddress(e.target.value)}
        placeholder="Enter address"
      />
      <button onClick={checkBalance} disabled={loading}>
        {loading ? 'Loading...' : 'Check Balance'}
      </button>
      {balance && <p>Balance: {balance} ETH</p>}
    </div>
  )
}

Content Collections

Generate pages from a collection of addresses:

// content/config.ts
import { defineCollection, z } from 'astro:content'

const addresses = defineCollection({
  type: 'data',
  schema: z.object({
    address: z.string(),
    name: z.string(),
    description: z.string().optional(),
  }),
})

export const collections = { addresses }

// content/addresses/vitalik.json
{
  "address": "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
  "name": "Vitalik Buterin",
  "description": "Ethereum co-founder"
}

---
// pages/addresses/[slug].astro
import { getCollection, getEntry } from 'astro:content'
import { Address } from '@tevm/voltaire/Address'
import { Wei } from '@tevm/voltaire/Denomination'
import { createJsonRpcProvider } from '@tevm/voltaire/jsonrpc'

export async function getStaticPaths() {
  const entries = await getCollection('addresses')
  return entries.map(entry => ({
    params: { slug: entry.id },
    props: { entry },
  }))
}

const { entry } = Astro.props
const provider = createJsonRpcProvider('https://eth.llamarpc.com')

const addr = Address.from(entry.data.address)
const balance = await provider.eth.getBalance({ address: addr })
---

<h1>{entry.data.name}</h1>
<p>{entry.data.description}</p>
<p>Address: {entry.data.address}</p>
<p>Balance: {Wei.toEther(balance)} ETH</p>

Middleware for Caching

Add caching headers:

// middleware.ts
import { defineMiddleware } from 'astro:middleware'

export const onRequest = defineMiddleware(async (context, next) => {
  const response = await next()

  // Cache API responses
  if (context.url.pathname.startsWith('/api/')) {
    response.headers.set('Cache-Control', 'public, max-age=10')
  }

  return response
})

Environment Variables

Configure RPC URL:

// env.d.ts
interface ImportMetaEnv {
  readonly PUBLIC_RPC_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

// lib/provider.ts
import { createJsonRpcProvider } from '@tevm/voltaire/jsonrpc'

export const provider = createJsonRpcProvider(
  import.meta.env.PUBLIC_RPC_URL || 'https://eth.llamarpc.com'
)

Build-time Data

Fetch data during build:

// lib/buildData.ts
import { Address } from '@tevm/voltaire/Address'
import { Wei } from '@tevm/voltaire/Denomination'
import { createJsonRpcProvider } from '@tevm/voltaire/jsonrpc'

const provider = createJsonRpcProvider('https://eth.llamarpc.com')

// This runs at build time
export async function getTopContracts() {
  const contracts = [
    '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', // WETH
    '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC
    '0xdAC17F958D2ee523a2206206994597C13D831ec7', // USDT
  ]

  return Promise.all(
    contracts.map(async (address) => {
      const addr = Address.from(address)
      const balance = await provider.eth.getBalance({ address: addr })
      return { address, balance: Wei.toEther(balance) }
    })
  )
}

---
import { getTopContracts } from '../lib/buildData'

const contracts = await getTopContracts()
---

<ul>
  {contracts.map(c => (
    <li>{c.address}: {c.balance} ETH</li>
  ))}
</ul>

Next Steps

JSONRPCProvider - Full provider documentation
Address - Address primitive reference

Overview

Getting Started

Core Concepts

Skills

JSONRPCProvider

Contract

Primitives

Cryptography

EVM

Utils

Guides

Examples

Swift

Zig

Developer Documentation

Generated API (TypeDoc)

Installation

Static Data Fetching

Server Endpoints

Static Paths for Known Addresses

Hybrid Rendering

React/Vue/Solid Islands

Content Collections

Middleware for Caching

Environment Variables

Build-time Data

Next Steps

​Installation

​Static Data Fetching

​Server Endpoints

​Static Paths for Known Addresses

​Hybrid Rendering

​React/Vue/Solid Islands

​Content Collections

​Middleware for Caching

​Environment Variables

​Build-time Data

​Next Steps

Installation

Static Data Fetching

Server Endpoints

Static Paths for Known Addresses

Hybrid Rendering

React/Vue/Solid Islands

Content Collections

Middleware for Caching

Environment Variables

Build-time Data

Next Steps