Files
web/apps/base-docs/docs/tools/viem.md
taycaldwell 47ca5b7b77 Docs Site Revamp: Tutorials (#370)
* Add discord, twitter, and github icons.

* Update docusaurus.

* Move security page to sidebar.

* Remove copyright from site footers.

* Add caret icons for dropdown css override.

* Build and style custom docs navbar.

* Resolve Icon merge conflict.

* Change Developers dropdown to Builders.

* lint: Remove unused variable

* Add tutorials; initial commit

* Add and display new frontmatter

* Convert tutorials to single page pt. 1

* Update tutorial data; fix paths

* Ecopage - rubyscore + lore logos (#373)

* Update ecosystem.json (#374)

* Fix incorrectly rendering open graph metadata (#369)

* feat(web): Serve dynamic og:metadata server-side

* feat(docs): Serve dynamic og:metadata server-side

* fix(web): Resolve linting errors

* fix(web): Linting

* fix(web): Additional linting corrections

* fix(web): Resolve Typescript-related syntax error

* refactor(web): Add ogData to data structure

* fix(ecosystem): Typo in partner image name (#375)

* feat(bridge): Add planned paused note to top of page (#376)

* Update hyperframes to use state (#377)

* Update hyperframes to use state

* Respond to feedback

* fix(bridge): Add default open graph metadata (#378)

* Added Moralis to data indexers (#371)

* Added Moralis to data indexers

* typos

* Update copy

* Remove superlatives

---------

Co-authored-by: taycaldwell <taylor.lee.caldwell@gmail.com>

* docs(bridge): Update bridge pause to new date (#381)

* mention setting `OP_NODE_L1_BEACON` (#380)

* feat(docs): Add Uniswap V3 Base Sepolia contracts (#382)

* Improve loading experience on jobs page (#389)

* Docs Site Revamp: Navbar, Sidebar, and Doc Page (#379)

* Add discord, twitter, and github icons.

* Update docusaurus.

* Move security page to sidebar.

* Remove copyright from site footers.

* Add caret icons for dropdown css override.

* Build and style custom docs navbar.

* Resolve Icon merge conflict.

* Change Developers dropdown to Builders.

* lint: Remove unused variable

* Re-add node polyfills required for cookie manager to work.

* Disable DocFeedback component.

* Disable paginator and table of contents.

* Add collapse icons for css override.

* Fix Modal overlay styles.

* Adjust DocChat floating button position.

* Reorganize and restyle sidebar for new design.

* Update gray0 and modal overlay styles.

* Add stylesheet for new doc page styles.

* Remove TODO. Add sidebar link hover styles.

* Move responsive styles to bottom.

* Disable breadcrumb component. Update layout spacing.

---------

Co-authored-by: taycaldwell <taylor.lee.caldwell@gmail.com>

* refactor(bridge): Drop bridge maintenance notice (#390)

* Add tutorials; initial commit

* Add and display new frontmatter

* Update tutorial data

* Fix frontmatter

* Update TOC

* Update tutorials page

* Update toc margin

* fix nested categories in sidebar

* Add all tutorials back link

---------

Co-authored-by: Jacob Moore <jacob.moore@coinbase.com>
Co-authored-by: Kathryn <kathryn.snow@coinbase.com>
Co-authored-by: wbnns <hello@wbnns.com>
Co-authored-by: Brian Doyle <brian.doyle@coinbase.com>
Co-authored-by: Filip Martinsson <martinsson.filip@gmail.com>
Co-authored-by: abhi <abhijeet.bhagat@gmx.com>
Co-authored-by: Matthew Bunday <matthew.bunday@coinbase.com>
2024-03-28 11:33:18 -07:00

3.7 KiB

title, slug, description, keywords, hide_table_of_contents
title slug description keywords hide_table_of_contents
viem /tools/viem Documentation for using Viem, a TypeScript interface for EVM-compatible blockchains. This page covers installation, setup, and various functionalities such as reading and writing blockchain data and interacting with smart contracts on Base.
viem
Base
Base mainnet
Base testnet
Ethereum
smart contracts
blockchain
RPC URL
JavaScript
TypeScript
true

viem

:::info

Viem is currently only available on Base Sepolia testnet.

:::

viem a TypeScript interface for Ethereum that provides low-level stateless primitives for interacting with Ethereum.

You can use viem to interact with smart contracts deployed on Base.


Install

To install viem run the following command:

npm install --save viem

Setup

Before you can start using viem, you need to setup a Client with a desired Transport and Chain.

import { createPublicClient, http } from 'viem';
import { base } from 'viem/chains';

const client = createPublicClient({
  chain: base,
  transport: http(),
});

:::info

To use Base, you must specify base as the chain when creating a Client.

To use Base Sepolia (testnet), replace base with baseSepolia.

:::

Reading data from the blockchain

Once you have created a client, you can use it to read and access data from Base using Public Actions

Public Actions are client methods that map one-to-one with a "public" Ethereum RPC method (eth_blockNumber, eth_getBalance, etc.)

For example, you can use the getBlockNumber client method to get the latest block:

const blockNumber = await client.getBlockNumber();

Writing data to the blockchain

In order to write data to Base, you need to create a Wallet client (createWalletClient) and specify an Account to use.

import { createWalletClient, custom } from 'viem'
import { base } from 'viem/chains'

//highlight-start
const [account] = await window.ethereum.request({ method: 'eth_requestAccounts' })
//highlight-end

const client = createWalletClient({
  //highlight-next-line
  account,
  chain: base,
  transport: custom(window.ethereum)
})

client.sendTransaction({ ... })

:::info

In addition to making a JSON-RPC request (eth_requestAccounts) to get an Account, viem provides various helper methods for creating an Account, including: privateKeyToAccount, mnemonicToAccount, and hdKeyToAccount.

To use Base Sepolia (testnet), replace base with baseSepolia.

:::

Interacting with smart contracts

You can use viem to interact with a smart contract on Base by creating a Contract instance using getContract and passing it the contract ABI, contract address, and Public and/or Wallet Client:

import { getContract } from 'viem';
import { wagmiAbi } from './abi';
import { publicClient } from './client';

// 1. Create contract instance
const contract = getContract({
  address: 'CONTRACT_ADDRESS',
  abi: wagmiAbi,
  publicClient,
});

// 2. Call contract methods, listen to events, etc.
const result = await contract.read.totalSupply();

:::info

CONTRACT_ADDRESS is the address of the deployed contract.

:::