* 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>
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. |
|
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.
:::