Vocs

https://github.com/wevm/vocs
Admin
Vocs is a minimal documentation framework powered by React and Vite, designed to simplify the...
Tokens:657,050
Snippets:5,910
Trust Score:9.7
License:MIT
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Run Development Server

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/introduction/getting-started.mdx

Install project dependencies and start the local development server to preview your site.

```bash
npm install
npm run dev
```

```bash
pnpm install
pnpm dev
```

```bash
yarn install
yarn dev
```

```bash
bun install
bun run dev
```

--------------------------------

### Install and Run VitePress

Source: https://github.com/wevm/vocs/blob/main/create-vocs/template/README.md

Commands to install dependencies, start the development server, build the project, and preview the build.

```bash
npm install      # Install
npm run dev      # Start development server
npm run build    # Build 
npm run preview  # Preview build
```

--------------------------------

### Install Viem

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/tempo/index.mdx

Install the Viem library using npm or pnpm. Ensure Viem is installed before proceeding with the Tempo extension setup.

```bash
npm i viem
```

```bash
pnpm i viem
```

--------------------------------

### Viem Client Setup

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/contract/getContract.md

Provides examples for creating public and wallet clients using Viem, including configurations for Metamask and WalletConnect.

```typescript
import { createPublicClient, createWalletClient, http, custom } from 'viem'
import { mainnet } from 'viem/chains'
import { EthereumProvider } from '@walletconnect/ethereum-provider'

export const publicClient = createPublicClient({
  chain: mainnet,
  transport: http(),
})

// eg: Metamask
export const walletClient = createWalletClient({
  chain: mainnet,
  transport: custom(window.ethereum!),
})

// eg: WalletConnect
const provider = await EthereumProvider.init({
  projectId: "abcd1234",
  showQrModal: true,
  chains: [1],
})

export const walletClientWC = createWalletClient({
  chain: mainnet,
  transport: custom(provider),
})
```

--------------------------------

### Viem Client Setup

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/public/getProof.md

Example of setting up a `publicClient` using `createPublicClient` from `viem`. This client is used to interact with the Ethereum blockchain.

```typescript
import { createPublicClient, http } from 'viem'
import { optimism } from 'viem/chains'

export const publicClient = createPublicClient({
  chain: optimism,
  transport: http()
})
```

--------------------------------

### Viem Installation Commands

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages/kitchen-sink.mdx

Install the viem package using different package managers within a step-by-step guide.

```bash
npm i viem
```

```bash
pnpm i viem
```

```bash
bun i viem
```

--------------------------------

### Viem Public Client Setup

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/ens/actions/getEnsResolver.md

Example of how to create a viem public client for interacting with the Ethereum mainnet. This client is required for actions like `getEnsResolver`.

```typescript
import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'

export const publicClient = createPublicClient({
  chain: mainnet,
  transport: http(),
})
```

--------------------------------

### Start Development Server

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/features/rehype-and-remark.mdx

Start the development server using npm, pnpm, yarn, or bun.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

```bash
bun run dev
```

--------------------------------

### Vocs Setup for Existing Projects Prompt

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/introduction/writing-docs-with-ai.mdx

For existing projects, provide a more detailed prompt that includes multiple guides for the AI agent to read, audit the project, and add Vocs documentation.

```txt
Read https://vocs.dev/introduction/getting-started, https://vocs.dev/introduction/project-structure, and https://vocs.dev/writing/markdown-extensions.

Then audit this project and add Vocs documentation. Edit the docs source files, update navigation, and run the docs build when you are done.
```

--------------------------------

### Install Viem and Tempo

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/tempo/actions/setup.mdx

Install Viem and the Tempo extension using npm or pnpm.

```bash
npm i tempo.ts viem
```

```bash
pnpm i tempo.ts viem
```

--------------------------------

### Set up KZG Interface

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/guides/blob-transactions.md

Hook up the installed KZG bindings to Viem by creating a KZG interface. This involves importing the KZG library and using Viem's `setupKzg` function with the appropriate trusted setup path.

```typescript
// @noErrors
import * as cKzg from 'c-kzg'
import { setupKzg } from 'viem'
import { mainnetTrustedSetupPath } from 'viem/node'

export const kzg = setupKzg(cKzg, mainnetTrustedSetupPath)
```

--------------------------------

### Install viem with bun

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/getting-started.mdx

Install viem using bun.

```bash
bun i viem
```

--------------------------------

### Manage Multi-File Examples with ---cut---

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/writing/twoslash.mdx

When working with multi-file examples, `// ---cut---` can be used to hide setup code in one file while still allowing Twoslash to evaluate the entire program. The `// @filename:` directive is preserved by default unless `---cut---` appears below it.

```ts
// @filename: a.ts
export const helloWorld = "Hi"

// @filename: b.ts
// ---cut---
import { helloWorld } from "./a"
console.log(helloWorld)
```

```md
```ts twoslash
// @filename: a.ts
export const helloWorld = "Hi"

// @filename: b.ts
// ---cut---
import { helloWorld } from "./a"
console.log(helloWorld)
```
```

--------------------------------

### Example Fee Payer Service Client Setup

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/tempo/transports/withFeePayer.mdx

Sets up a viem client to interact with a fee payer service. This client will send transactions with the `feePayer: true` flag, which will be handled by the specified relay transport.

```typescript
import { createWalletClient, http } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { tempoTestnet } from 'viem/chains'
import { withFeePayer } from 'viem/tempo'

const client = createWalletClient({
  account: privateKeyToAccount('0x...'),
  chain: tempoTestnet,
  transport: withFeePayer(
    http(), 
    http('http://localhost:3000'), 
  ),
})

const hash = await client.sendTransactionSync({
  feePayer: true,
  to: '0x0000000000000000000000000000000000000000',
})
```

--------------------------------

### Install viem with npm

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/getting-started.mdx

Install viem using npm.

```bash
npm i viem
```

--------------------------------

### setStorageAt Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/test/setStorageAt.md

Demonstrates how to write to a storage slot of an account using `setStorageAt`. Requires a test client setup.

```typescript
import { testClient } from './client'

await testClient.setStorageAt({
  address: '0xe846c6fcf817734ca4527b28ccb4aea2b6663c79',
  index: 2,
  value: '0x0000000000000000000000000000000000000000000000000000000000000069'
})
```

--------------------------------

### KZG Implementation Setup

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/utilities/blobsToProofs.md

Set up the KZG implementation using trusted setup data. This is a prerequisite for using blobsToProofs.

```typescript
// @noErrors
import * as cKzg from 'c-kzg'
import { setupKzg } from 'viem'

export const kzg = setupKzg('./trusted-setup.json', cKzg)
```

--------------------------------

### Import Example Component

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/kitchen-sink.mdx

Imports a custom Example component from a local path.

```javascript
import { Example } from '../components/Example'
```

--------------------------------

### Grant Permissions Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/experimental/erc7715/grantPermissions.mdx

Demonstrates how to request permissions for native token transfers with an allowance policy. Ensure you have `viem` and `viem/experimental` installed and the wallet client is configured.

```typescript
import { parseEther } from 'viem'

const result = await walletClient.grantPermissions({
  account,
  expiry: 1716846083638,
  permissions: [
    {
      type: 'native-token-transfer',
      data: {
        ticker: 'ETH',
      },
      policies: [
        {
          type: 'token-allowance',
          data: {
            allowance: parseEther('1'),
          },
        },
      ],
    },
  ],
})
```

```typescript
import 'viem/window'
import { createWalletClient, custom } from 'viem'
import { mainnet } from 'viem/chains'
import { erc7715Actions } from 'viem/experimental'

export const walletClient = createWalletClient({
  chain: mainnet,
  transport: custom(window.ethereum!),
}).extend(erc7715Actions())

export const [account] = await walletClient.getAddresses()
```

--------------------------------

### Setup KZG with c-kzg and Trusted Setup Path Parameter

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/utilities/setupKzg.md

Demonstrates passing the trusted setup file path as the second argument to the setupKzg function, highlighting the 'path' parameter.

```typescript
// @noErrors
import * as cKzg from 'c-kzg'
import { setupKzg } from 'viem'
import { mainnetTrustedSetupPath } from 'viem/node' // [!code focus]

const kzg = setupKzg(
  cKzg,
  mainnetTrustedSetupPath // [!code focus]
)
```

--------------------------------

### Install MetaMask Smart Accounts Kit

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/account-abstraction/accounts/smart/toMetaMaskSmartAccount.md

Install the MetaMask Smart Accounts Kit using your preferred package manager.

```bash
pnpm add @metamask/smart-accounts-kit
```

```bash
npm install @metamask/smart-accounts-kit
```

```bash
yarn add @metamask/smart-accounts-kit
```

```bash
bun add @metamask/smart-accounts-kit
```

--------------------------------

### Example MDX Page Structure with Steps

Source: https://github.com/wevm/vocs/blob/main/AGENTS.md

Demonstrates how to structure an MDX page using the 'steps' directive for ordered guides. Each step is a heading.

```mdx
## Setup

::::steps

### Create the API route

Add a file at `src/pages/_api/og.tsx`.

### Implement the handler

```tsx
// ...
```

### Verify

Run `pnpm dev` and visit the endpoint.

::::
```

--------------------------------

### Install viem with pnpm

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/getting-started.mdx

Install viem using pnpm.

```bash
pnpm i viem
```

--------------------------------

### Setup KZG with c-kzg and Imported Trusted Setup

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/utilities/setupKzg.md

Initialize the KZG interface using the c-kzg library and the directly imported contents of a trusted setup JSON file. This method bypasses file system access.

```typescript
// @noErrors
import * as cKzg from 'c-kzg'
import { setupKzg } from 'viem'
import { mainnetTrustedSetupPath } from 'viem/node'

const kzg = setupKzg(
  cKzg, // [!code focus]
  mainnetTrustedSetupPath
)
```

--------------------------------

### Install and Run Vercel CLI with npm

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/deployment/vercel.mdx

Install the Vercel CLI globally using npm and then run the deploy command from your project root.

```bash
npm i -g vercel
vercel
```

--------------------------------

### Card Component Example

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/reference/components.mdx

Use Card to create a linked card with a title, description, and optional icon. This example links to the 'Getting Started' page.

```tsx
import { Card } from 'vocs'

export function QuickLink() {
  return (
    <Card
      title="Getting Started"
      description="Create your first Vocs site."
      icon="book-open"
      to="/introduction/getting-started"
    />
  )
}
```

--------------------------------

### Viem Configuration Setup

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/tempo/actions/amm.getLiquidityBalance.mdx

This snippet shows the necessary setup for Viem configuration, which is required before using the `amm.getLiquidityBalance` function.

```typescript
// [!include ~/snippets/tempo/viem.config.ts:setup]
```

--------------------------------

### Cards Component Example

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/reference/components.mdx

Use Cards as a responsive grid wrapper for multiple Card children. This example includes two cards: 'Getting Started' and 'Theming'.

```tsx
import { Card, Cards } from 'vocs'

export function QuickLinks() {
  return (
    <Cards>
      <Card
        title="Getting Started"
        description="Create your first Vocs site."
        to="/introduction/getting-started"
      />
      <Card
        title="Theming"
        description="Customize the look and feel of your docs."
        to="/features/theming"
      />
    </Cards>
  )
}
```

--------------------------------

### Wallet Client Initialization

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/wallet/getAddresses.md

Example of how to set up a wallet client. This is a prerequisite for using actions like `getAddresses`.

```typescript
// [!include ~/snippets/walletClient.ts]
```

--------------------------------

### Get L1 Allowance Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/zksync/actions/getL1Allowance.md

Demonstrates how to fetch the L1 allowance for a given token and bridge address. Requires account and publicClient setup.

```typescript
import { account, publicClient } from './config'

const allowance = await publicClient.getL1Allowance({
  account
  token: '0x5C221E77624690fff6dd741493D735a17716c26B',
  bridgeAddress: '0x84DbCC0B82124bee38e3Ce9a92CdE2f943bab60D',
})
```

--------------------------------

### Configuration for Smart Account examples

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/account-abstraction/accounts/smart/signMessage.md

This snippet shows the necessary configuration for the Smart Account examples, including creating an owner account from a private key and setting up a public client.

```ts
import { http, createPublicClient } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { mainnet } from 'viem/chains'

export const owner = privateKeyToAccount('0x...')
 
export const client = createPublicClient({
  chain: mainnet,
  transport: http(),
})
```

--------------------------------

### Import Trusted Setup Paths from viem/node

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/utilities/setupKzg.md

Import the file paths for trusted setup configurations from the 'viem/node' entrypoint. These paths are used with the setupKzg function.

```typescript
import {
  mainnetTrustedSetupPath,
  minimalTrustedSetupPath,
} from 'viem/node'
```

--------------------------------

### Install and Run Vercel CLI with pnpm

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/deployment/vercel.mdx

Install the Vercel CLI globally using pnpm and then run the deploy command from your project root.

```bash
pnpm add -g vercel
vercel
```

--------------------------------

### TypeScript Example within Tip

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages/kitchen-sink.mdx

A TypeScript code example embedded within a tip, demonstrating client setup.

```typescript
// 1. Import modules.
import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'

// 2. Set up your client with desired chain & transport. asd asd asd asd 
const client = createPublicClient({
  chain: mainnet,
  transport: http(),
})

// 3. Consume an action!
const blockNumber = await client.getBlockNumber()
```

--------------------------------

### Install Circle Modular Wallets SDK

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/circle-usdc/guides/smart-account.mdx

Install the necessary SDK package for passkey authentication and smart account creation.

```sh
npm install @circle-fin/modular-wallets-core
```

--------------------------------

### Setup KZG with c-kzg and Node.js Path

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/utilities/setupKzg.md

Initialize the KZG interface using the c-kzg library and a trusted setup file path from 'viem/node'. This is suitable for Node.js environments.

```typescript
// @noErrors
import * as cKzg from 'c-kzg'
import { setupKzg } from 'viem'
import { mainnetTrustedSetupPath } from 'viem/node'

const kzg = setupKzg(cKzg, mainnetTrustedSetupPath)
```

--------------------------------

### Set up Viem Client

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/guides/blob-transactions.md

Create a Viem client instance for interacting with the Ethereum network. Ensure you have the necessary imports for creating a wallet client, accounts, and chains.

```typescript
import { createWalletClient, http } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { mainnet } from 'viem/chains'

export const account = privateKeyToAccount('0x...')

export const client = createWalletClient({
  account,
  chain: mainnet,
  transport: http()
})
```

--------------------------------

### Get Sell Quote Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/tempo/actions/dex.getSellQuote.mdx

Demonstrates how to get a quote for selling tokens. Ensure you have the `client` initialized and `parseUnits` imported.

```typescript
import { parseUnits } from 'viem'

const amountOut = await client.dex.getSellQuote({
  amountIn: parseUnits('100', 6),
  tokenIn: '0x20c0000000000000000000000000000000000001',
  tokenOut: '0x20c0000000000000000000000000000000000002',
})

console.log('Amount received:', amountOut)
// @log: Amount received: 99700000n
```

--------------------------------

### Get ENS Avatar Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/ens/actions/getEnsAvatar.md

Demonstrates how to get the avatar of an ENS name using `getEnsAvatar`. Ensure you have a `publicClient` configured and import the `normalize` utility.

```typescript
import { normalize } from 'viem/ens'
import { publicClient } from './client'

const ensText = await publicClient.getEnsAvatar({
  name: normalize('wevm.eth'),
})
// 'https://ipfs.io/ipfs/Qma8mnp6xV3J2cRNf3mTth5C8nV11CAnceVinc3y8jSbio'
```

--------------------------------

### Install Viem with Package Managers

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/installation.mdx

Install Viem using your preferred package manager. Supports pnpm, npm, yarn, and bun.

```bash
pnpm add viem
```

```bash
npm install viem
```

```bash
yarn add viem
```

```bash
bun add viem
```

--------------------------------

### Get Capabilities for Specific Account

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/wallet/getCapabilities.mdx

Example of passing a specific account address to `getCapabilities`.

```typescript
// ---cut---
const capabilities = await walletClient.getCapabilities({
  account: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266', // [!code focus]
})
```

--------------------------------

### Get ENS Name with Specific Address

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/ens/actions/getEnsName.md

Example showing how to specify the `address` parameter for `getEnsName`.

```typescript
const ensName = await publicClient.getEnsName({
  address: '0xd2135CfB216b74109775236E36d4b433F1DF507B', // [!code focus]
})
```

--------------------------------

### Install Bridge Kit and Dependencies

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/circle-usdc/guides/bridge-kit.mdx

Installs Bridge Kit, an EVM adapter, and other necessary tools for cross-chain transfers.

```bash
# Setup your directory and initialize a Node.js project
mkdir bridge-kit-quickstart-transfer-base-to-eth
cd bridge-kit-quickstart-transfer-base-to-eth
npm init -y

# Install Bridge Kit and tools
npm install @circle-fin/bridge-kit @circle-fin/adapter-viem-v2 viem typescript tsx dotenv
```

--------------------------------

### Import setupKzg

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/utilities/setupKzg.md

Import the setupKzg function from the 'viem' library.

```typescript
import { setupKzg } from 'viem'
```

--------------------------------

### Get Capabilities for Specific Chain ID

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/wallet/getCapabilities.mdx

Example of passing a specific chain ID to `getCapabilities`.

```typescript
// ---cut---
const capabilities = await walletClient.getCapabilities({
  account: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266',
  chainId: 8453, // [!code focus]
})
```

--------------------------------

### Handle Specific HTTP Methods

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/features/api-routes.mdx

Export named functions corresponding to HTTP methods (e.g., `GET`, `POST`) to handle specific requests. This example defines handlers for both GET and POST requests.

```typescript
export const GET = async () => {
  return new Response('I am a server!', { status: 200 })
}

export const POST = async (request: Request) => {
  const body = await request.json()
  return Response.json({ echoed: body })
}
```

--------------------------------

### Create a Private Key Account and Wallet Client

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/accounts/local/privateKeyToAccount.md

Initialize a Private Key Account by passing a private key to `privateKeyToAccount`, then use it to create a viem `WalletClient`. Note: The provided private key is for testing purposes only.

```typescript
import { createWalletClient, http } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { mainnet } from 'viem/chains'

const account = privateKeyToAccount('0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80')

const client = createWalletClient({
  account,
  chain: mainnet,
  transport: http()
})
```

--------------------------------

### Watch Blocks with Emit On Begin Enabled

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/public/watchBlocks.md

This example demonstrates enabling `emitOnBegin` to receive the initial block when the subscription starts.

```typescript
import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'

const publicClient = createPublicClient({
  chain: mainnet,
  transport: http()
})

const unwatch = publicClient.watchBlocks(
  {
    emitOnBegin: true, 
    onBlock: block => console.log(block),
  }
)
```

--------------------------------

### Create Access Key Account with Parent Account

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/tempo/accounts/account.fromP256.mdx

This example demonstrates creating an access key account that acts as a delegate for a parent account. It includes signing a key authorization and attaching it to a transaction. Ensure `viem/tempo` is imported and a `client` is configured.

```typescript
import { Account, P256 } from 'viem/tempo'

// Create root account
const account = Account.fromSecp256k1(
  '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80'
)

// Create access key 
const accessKey = Account.fromP256(
  P256.randomPrivateKey(),
  { access: account } // Specify the parent account
)

// Sign a key authorization for the access key
const keyAuthorization = await account.signKeyAuthorization(accessKey, {
  expiry: Math.floor(Date.now() / 1000) + 86400, // 24 hour expiry
})

// Attach the key authorization to the next transaction
const receipt = await client.sendTransactionSync({
  account: accessKey,
  keyAuthorization,
  to: '0xdeadbeefdeadbeefdeadbeefdeadbeefdeadbeef',
})

// Subsequent transactions with `accessKey` will not require `keyAuthorization`.
```

--------------------------------

### Get Pool Reserves Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/tempo/actions/amm.getPool.mdx

Fetches the reserves for a specified liquidity pool. Requires the client to be set up with the Tempo configuration.

```typescript
const pool = await client.amm.getPool({
  userToken: '0x20c0000000000000000000000000000000000000',
  validatorToken: '0x20c0000000000000000000000000000000000001',
})

console.log('User token reserve:', pool.reserveUserToken)
// @log: User token reserve: 1000000000000000000000n
console.log('Validator token reserve:', pool.reserveValidatorToken)
// @log: Validator token reserve: 1000000000000000000000n
console.log('Total supply:', pool.totalSupply)
// @log: Total supply: 1000000000000000000000n
```

```typescript
// [!include ~/snippets/tempo/viem.config.ts:setup]
```

--------------------------------

### Package Manager Installation Commands

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages/kitchen-sink.mdx

Provides installation commands for various package managers (npm, pnpm, yarn, bun).

```bash
npm i vocs@rc
```

```bash
pnpm add vocs@rc
```

```bash
yarn add vocs@rc
```

```bash
bun add vocs@rc
```

--------------------------------

### Get ENS Name with Coin Type

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/ens/actions/getEnsName.md

Example demonstrating the use of `coinType` with `toCoinType` to specify the chain for ENS resolution.

```typescript
import { base } from 'viem/chains'

const ensName = await publicClient.getEnsName({
  address: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
  coinType: toCoinType(base.id), // [!code focus]
})
```

--------------------------------

### Install and Run Vercel CLI with yarn

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/deployment/vercel.mdx

Install the Vercel CLI globally using yarn and then run the deploy command from your project root.

```bash
yarn global add vercel
vercel
```

--------------------------------

### Get Balance at Specific Block Number

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/public/getBalance.md

Fetch the balance of an address at a particular block number. Requires `publicClient` setup.

```typescript
import { publicClient } from './client'

const balance = await publicClient.getBalance({
  address: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e',
  blockNumber: 69420n
})
```

--------------------------------

### Get Token Balance Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/tempo/actions/token.getBalance.mdx

Fetches the balance of a specified token for a given account address. Ensure the client is properly configured.

```typescript
const balance = await client.token.getBalance({
  account: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb',
  token: '0x20c0000000000000000000000000000000000000',
})

console.log('Balance:', balance)
// @log: Balance: 10500000n
```

--------------------------------

### Get ENS Name with Custom Universal Resolver Address

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/ens/actions/getEnsName.md

Example of specifying a custom address for the ENS Universal Resolver Contract.

```typescript
const ensName = await publicClient.getEnsName({
  address: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
  universalResolverAddress: '0x74E20Bd2A1fE0cdbe45b9A1d89cb7e0a45b36376', // [!code focus]
})
```

--------------------------------

### Get Calls Status Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/wallet/getCallsStatus.mdx

Demonstrates how to use `walletClient.getCallsStatus` to retrieve the status of a call batch. Ensure you have a `walletClient` instance configured.

```typescript
const result = await walletClient.getCallsStatus({
  id: '0x1234567890abcdef',
})
// @log: {
// @log:   atomic: false,
// @log:   chainId: 1,
// @log:   id: '0x1234567890abcdef',
// @log:   statusCode: 200,
// @log:   status: 'success',
// @log:   receipts: [{ ... }],
// @log: }
```

--------------------------------

### Get Balance at Block Tag

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/public/getBalance.md

Retrieve the balance of an address using a block tag like 'safe'. Requires `publicClient` setup.

```typescript
import { publicClient } from './client'

const balance = await publicClient.getBalance({
  address: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e',
  blockTag: 'safe'
})
```

--------------------------------

### Initialize Public Client

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/public/createPendingTransactionFilter.md

Example of how to create a public client using viem. This client is required to interact with the Ethereum network.

```typescript
import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'

export const publicClient = createPublicClient({
  chain: mainnet,
  transport: http()
})
```

--------------------------------

### Get Withdrawal Status Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/op-stack/actions/getWithdrawalStatus.md

Demonstrates how to use `getWithdrawalStatus` to check the status of a withdrawal using L2 transaction receipt and target chain.

```typescript
import { account, publicClientL1, publicClientL2 } from './config'

const receipt = await publicClientL2.getTransactionReceipt({
  hash: '0x7b5cedccfaf9abe6ce3d07982f57bcb9176313b019ff0fc602a0b70342fe3147'
})

const status = await publicClientL1.getWithdrawalStatus({
  receipt,
  targetChain: publicClientL2.chain,
})
// "ready-to-prove"
```

--------------------------------

### Build Viem from Source

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/installation.mdx

Clone the Viem repository, build, and link it locally for development or testing unreleased commits.

```bash
gh repo clone wevm/viem
cd viem
pnpm install
pnpm build
pnpm link --global
```

--------------------------------

### Get Games for an L2

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/op-stack/actions/getGames.md

Demonstrates how to retrieve dispute games for a specified L2 chain. This example requires importing necessary modules and clients.

```typescript
import { optimism } from 'viem/chains'
import { account, publicClientL1 } from './config'

const games = await publicClientL1.getGames({
  targetChain: optimism,
})
```

```typescript
import { createPublicClient, custom, http } from 'viem'
import { mainnet, optimism } from 'viem/chains'
import { publicActionsL1 } from 'viem/op-stack'

export const publicClientL1 = createPublicClient({
  chain: mainnet,
  transport: http()
}).extend(publicActionsL1())
```

--------------------------------

### Get Contract Address Utility: Ethers

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/ethers-migration.mdx

Example of how to derive a contract address using Ethers.js, which requires the sender's address and nonce.

```typescript
import { utils } from 'ethers'

const address = utils.getContractAddress({ from: '0x...', nonce: 5 });
```

--------------------------------

### Viem Client Setup for Verification

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/public/verifyHash.md

Provides the necessary setup for Viem clients, including `publicClient` and `walletClient`, along with obtaining an Ethereum account address. This snippet is typically used in conjunction with other Viem actions.

```typescript
import 'viem/window'
// ---
import { createPublicClient, createWalletClient, custom, http } from 'viem'
import { mainnet } from 'viem/chains'

export const publicClient = createPublicClient({
  chain: mainnet,
  transport: http()
})

export const walletClient = createWalletClient({
  transport: custom(window.ethereum!)
})

// @log: 
export const [account] = await walletClient.getAddresses()
```

--------------------------------

### Deploy Contract with Viem

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/contract/deployContract.md

Basic example of deploying a contract using `walletClient.deployContract`. Ensure you have the contract's ABI, bytecode, and account configured.

```typescript
import { wagmiAbi } from './abi'
import { account, walletClient } from './config'

const hash = await walletClient.deployContract({
  abi,
  account,
  bytecode: '0x608060405260405161083e38038061083e833981016040819052610...'
})
```

```typescript
export const wagmiAbi = [
  ...
  {
    inputs: [],
    stateMutability: "nonpayable",
    type: "constructor",
  },
  ...
] as const;
```

```typescript
import { createWalletClient, custom } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { mainnet } from 'viem/chains'

export const walletClient = createWalletClient({
  chain: mainnet,
  transport: custom(window.ethereum)
})

// JSON-RPC Account
export const [account] = await walletClient.getAddresses()
// Local Account
export const account = privateKeyToAccount(...)
```

--------------------------------

### Get ENS Name with Gateway URLs

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/ens/actions/getEnsName.md

Example showing how to provide custom gateway URLs for CCIP-Read requests when resolving ENS names.

```typescript
const ensName = await publicClient.getEnsName({
  address: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
  gatewayUrls: ["https://ccip.ens.xyz"], // [!code focus]
})
```

--------------------------------

### Get ENS Name at Specific Block Number

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/ens/actions/getEnsName.md

Example of using the optional `blockNumber` parameter to query the ENS name at a historical block.

```typescript
const ensName = await publicClient.getEnsName({
  address: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
  blockNumber: 15121123n, // [!code focus]
})
```

--------------------------------

### Client and Owner Configuration

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/account-abstraction/accounts/smart/signTypedData.md

Sets up the Viem public client and an owner account for Smart Account operations. Replace '0x...' with your actual private key.

```typescript
import { http, createPublicClient } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { mainnet } from 'viem/chains'

export const owner = privateKeyToAccount('0x...')

export const client = createPublicClient({
  chain: mainnet,
  transport: http(),
})
```

--------------------------------

### Get Contract Events with From Block

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/contract/getContractEvents.md

Specifies the starting block number (inclusive) for fetching event logs. Use `bigint` for block numbers.

```typescript
const filter = await publicClient.getContractEvents({
  abi: erc20Abi,
  fromBlock: 69420n
})
```

--------------------------------

### Package Manager Project Creation Commands

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/writing/syntax-highlighting.mdx

Demonstrates project creation commands for various package managers.

```bash
npm create vocs
```

```bash
pnpm create vocs
```

```bash
yarn create vocs
```

```bash
bun create vocs
```

--------------------------------

### getAllBalances Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/zksync/actions/getAllBalances.md

Demonstrates how to use the getAllBalances action with a zkSync client and account. Requires importing necessary modules and configuring the client.

```typescript
import { client, account } from './config'

const balances = await client.getAllBalances({
  account
});
```

--------------------------------

### Collapsing a Versioned Path

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/features/redirects.mdx

Strip a version prefix from all URLs under it. This example redirects all paths starting with `/v1/` to the root path without the version prefix.

```typescript
redirects: [
  { source: '/v1/:path*', destination: '/:path*' },
]
```

--------------------------------

### Set up ZKsync Wallet Client

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/zksync.mdx

Configure a Viem wallet client for the ZKsync chain, extending it with EIP712 actions. Ensure you have `viem/window` imported for browser environments.

```typescript
import 'viem/window'
import { createWalletClient, custom } from 'viem'
import { zksync } from 'viem/chains'
import { eip712WalletActions } from 'viem/zksync'

const walletClient = createWalletClient({
  chain: zksync,
  transport: custom(window.ethereum!)
}).extend(eip712WalletActions())
```

--------------------------------

### Get L1 Token Balance Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/zksync/actions/getL1TokenBalance.md

Demonstrates how to retrieve an L1 token balance for a given account. Requires importing necessary modules and clients.

```typescript
import { account, publicClient } from './config'

const balance = await publicClient.getL1TokenBalance({
  account
  token: '0x5C221E77624690fff6dd741493D735a17716c26B',
})
```

--------------------------------

### Connect Accounts with Sign-In with Ethereum Capability (Full Example)

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/experimental/erc7846/connect.md

A full example of connecting accounts and enabling the `unstable_signInWithEthereum` capability, showing the expected logged output.

```typescript
import { walletClient } from './config'

const { accounts } = await walletClient.connect({
  capabilities: {
    unstable_signInWithEthereum: {
      chainId: 1,
      nonce: 'abcd1234',
    }
  }
})
// @log: [{
// @log:   address: '0x90F79bf6EB2c4f870365E785982E1f101E93b906',
// @log:   capabilities: {
// @log:     unstable_signInWithEthereum: {
// @log:       message: 'example.com wants you to sign in with your Ethereum account...', 
// @log:       signature: '0xdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeef',
// @log:     },
// @log:   },
// @log: }]
```

--------------------------------

### Get Storage Value Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/contract/getStorageAt.md

Demonstrates how to fetch the storage value at a given slot for a contract address. Requires importing `toHex`, `wagmiAbi`, and `publicClient`.

```typescript
import { toHex } from 'viem'
import { wagmiAbi } from './abi'
import { publicClient } from './client'

const data = await publicClient.getStorageAt({
  address: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
  slot: toHex(0)
})
```

--------------------------------

### Set up Viem Client and Smart Account

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/circle-usdc/guides/paymaster.mdx

Initializes a Viem client for Arbitrum Sepolia and creates a simple 7702 smart account using a private key. It also defines the addresses for the paymaster and USDC token.

```typescript
import { createClient, http, publicActions, walletActions } from 'viem'
import { arbitrumSepolia } from 'viem/chains'
import { privateKeyToAccount } from 'viem/accounts'
import { toSimple7702SmartAccount } from 'viem/account-abstraction'

export const owner = privateKeyToAccount('0x...')

export const client = createClient({
  account: owner,
  chain: arbitrumSepolia,
  transport: http()
})
  .extend(publicActions)
  .extend(walletActions)

export const account = await toSimple7702SmartAccount({ client, owner })

export const paymasterAddress = '0x3BA9A96eE3eFf3A69E2B18886AcF52027EFF8966'
export const usdcAddress = '0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d'
```

--------------------------------

### Basic API Route Handler

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/introduction/project-structure.mdx

Create API routes by placing files in `src/pages/_api`. This example shows a simple `GET` handler for a health check endpoint.

```ts
export async function GET() {
  return Response.json({ status: 'ok' })
}
```

--------------------------------

### Get Log Proof Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/zksync/actions/getLogProof.md

Demonstrates how to retrieve the proof for an L2 to L1 log using the `getLogProof` action. Requires transaction hash and log index.

```typescript
import { client } from './config'

const proof = await client.getLogProof({
  txHash: '0x...',
  index: 1
});
```

--------------------------------

### Load State Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/test/loadState.md

Demonstrates how to use the `loadState` action with a provided state blob. Ensure `testClient` is set up correctly.

```typescript
import { testClient } from './client'

await testClient.loadState({ state: '0x1f8b08000000000000ffad934d8e1c310885ef52eb5e003660e636184c3651b7949948915a7df7b8934ded6bbcc23fe2f3e3c1f3f088c7effbd7e7f1f13ce00ff60c35939e4e016352131bb3658bd0f046682dcd98dfafef8f7bace3036ec7f49ffe2fde190817da82b0e9933abcd7713be291ffaf77fcf9f5f8e53ff6f6f97addde4cced6dd8b3b89e6d4d468a2a3d93e537480fd15713933f12a73ebc2b106ae561c59bae1d152784733c067f1dc49479d987295d9a2f7c8cc296e00e534797026d94ed312a9bc93b5192726d155a882999a42300ea48ce680109a80936141a2be0d8f7182f6cb4a0d4a6d96ac49d16b2834e1a5836dd0c242c0b5751ac8d9d1cb4a4d65b97620594ac2dc77a159cbb9ab349f096fedee76828ecb4cdb20d044679e1124c6c1633a4acda639d026f81ea96f15eab0963a76ca3d2f81b58705fbea3e4a59761b11f8769ce0046d5799d5ac5216a37b8e51523d96f81c839476fb54d53422393bda94af505fafbf9d0612379c040000' })

```

--------------------------------

### Get L1 Token Balance with Specific Account

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/zksync/actions/getL1TokenBalance.md

Example showing how to specify the account for checking the L1 token balance. The account can be a JSON-RPC or a local account.

```typescript
const balance = await publicClient.getL1TokenBalance({
  account: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266' // [!code focus]
  blockTag: 'latest',
  token: '0x5C221E77624690fff6dd741493D735a17716c26B',
})
```

--------------------------------

### Get DEX Balance Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/tempo/actions/dex.getBalance.mdx

Retrieves the token balance for a given account on the Stablecoin DEX. Ensure you have the `client` object initialized and the necessary token address.

```typescript
const balance = await client.dex.getBalance({
  account: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb',
  token: '0x20c0000000000000000000000000000000000001',
})

console.log('DEX balance:', balance)
// @log: DEX balance: 1000000000n
```

--------------------------------

### Wallet Client Configuration

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/wallet/sendCallsSync.mdx

Sets up a Viem wallet client using the `window.ethereum` provider and retrieves the user's account address. This is a prerequisite for using wallet actions.

```typescript
import 'viem/window'
import { createWalletClient, custom } from 'viem'
import { mainnet } from 'viem/chains'

export const walletClient = createWalletClient({
  chain: mainnet,
  transport: custom(window.ethereum!),
})

export const [account] = await walletClient.getAddresses()
```

--------------------------------

### Configuration for Local Account

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/zksync/actions/withdraw.md

Example configuration for a wallet client using a local account, derived from a private key. This setup is used when the account is hoisted on the wallet client.

```typescript
import { createWalletClient, custom } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { publicActionsL2 } from 'viem/zksync'

export const walletClient = createWalletClient({
  account: privateKeyToAccount('0x...'), 
  transport: custom(window.ethereum)
}).extend(publicActionsL2())
```

--------------------------------

### Create Access List Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/public/createAccessList.md

Demonstrates how to create an EIP-2930 access list for a transaction request. Requires `publicClient` to be configured.

```typescript
import { account, publicClient } from './config'

const result = await publicClient.createAccessList({
  data: '0xdeadbeef',
  to: '0x70997970c51812dc3a010c7d01b50e0d17dc79c8'
})
```

--------------------------------

### Specify Output Type for fromBlobs

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/utilities/fromBlobs.md

When using fromBlobs, you can specify the desired output type as either 'bytes' or 'hex'. This example shows how to get the data as a byte array.

```typescript
import { fromBlobs } from 'viem'

const data = fromBlobs({
  blobs: ['0x...'],
  to: 'bytes' // [!code focus]
})

data // [!code focus]
// ^?
```

--------------------------------

### Get ENS Name at Specific Block Tag

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/ens/actions/getEnsName.md

Example of using the optional `blockTag` parameter to query the ENS name at a specific block state like 'safe'.

```typescript
const ensName = await publicClient.getEnsName({
  address: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
  blockTag: 'safe', // [!code focus]
})
```

--------------------------------

### Get Paymaster Data Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/account-abstraction/actions/paymaster/getPaymasterData.md

Use `getPaymasterData` to retrieve paymaster properties for a User Operation. Ensure the paymaster client is configured with the correct transport and chain ID.

```typescript
import { paymasterClient } from './config'

const paymasterArgs = await paymasterClient.getPaymasterData({
  callData: '0xb61d27f600000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000de0b6b3a764000000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000',
  factory: '0xfb6dab6200b8958c2655c3747708f82243d3f32e',
  factoryData: '0xf14ddffc000000000000000000000000f39fd6e51aad88f6f4ce6ab8827279cfffb922660000000000000000000000000000000000000000000000000000000000000000',
  maxFeePerGas: 14510554812n,
  maxPriorityFeePerGas: 2000000000n,
  nonce: 0n,
  sender: '0xE911628bF8428C23f179a07b081325cAe376DE1f',
  signature: '0xfffffffffffffffffffffffffffffff0000000000000000000000000000000007aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa1c'
})
```

--------------------------------

### Test Client Setup

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/docs/actions/test/dropTransaction.md

Sets up a viem test client for use with Anvil. This client is necessary for executing actions like dropTransaction.

```typescript
import { createTestClient, http } from 'viem'
import { foundry } from 'viem/chains'

export const testClient = createTestClient({
  chain: foundry,
  mode: 'anvil',
  transport: http(), 
})
```

--------------------------------

### Get Nonce Key Count Example

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/tempo/actions/nonce.getNonceKeyCount.mdx

Use this snippet to retrieve the number of active nonce keys for a specific account. Ensure you have the `client` object initialized with the necessary configuration.

```typescript
const count = await client.nonce.getNonceKeyCount({
  account: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb',
})

console.log('Active nonce keys:', count)
// @log: Active nonce keys: 3n
```

--------------------------------

### Build and Deploy with Netlify CLI (yarn)

Source: https://github.com/wevm/vocs/blob/main/site/src/pages/deployment/netlify.mdx

Install the Netlify CLI and deploy your Vocs site using yarn. Ensure the NETLIFY environment variable is set for the build process.

```bash
yarn global add netlify-cli
NETLIFY=1 yarn build
netlify deploy
```

--------------------------------

### Configure Environment Variables

Source: https://github.com/wevm/vocs/blob/main/playground/src/pages-stress/circle-usdc/guides/bridge-kit.mdx

Sets up the .env file to store the private key for wallet authentication. Ensure this file is not committed to version control.

```bash
echo "PRIVATE_KEY={YOUR_PRIVATE_KEY}" > .env
```
Tokens:
Raw