Viem

The Viem library has first-class support for Abstract by providing a set of extensions to interact with paymasters, smart contract wallets, and more. This page will walk through how to configure Viem to utilize Abstract’s features.

Prerequisites

Ensure you have the following installed on your machine:

Node.js v18.0.0 or later.
You’ve already created a JavaScript project, (e.g. using CRA or Next.js).
Viem library version 2.21.25 or later installed.

1. Installation

Install the viem package.

npm install viem

2. Client Configuration

Configure your Viem client using abstractTestnet as the chain and extend it with eip712WalletActions.

import { createPublicClient, createWalletClient, custom, http } from 'viem'
import { abstractTestnet } from 'viem/chains'
import { eip712WalletActions } from 'viem/zksync'

// Create a client from a wallet
const walletClient = createWalletClient({
  chain: abstractTestnet,
  transport: custom(window.ethereum!),
}).extend(eip712WalletActions()) ;

// Create a client without a wallet
const publicClient = createPublicClient({
  chain: abstractTestnet,
  transport: http()
}).extend(eip712WalletActions());

import { createPublicClient, createWalletClient, custom, http } from 'viem'
import { abstract } from 'viem/chains'
import { eip712WalletActions } from 'viem/zksync'

// Create a client from a wallet
const walletClient = createWalletClient({
  chain: abstract,
  transport: custom(window.ethereum!),
}).extend(eip712WalletActions()) ;

// Create a client without a wallet
const publicClient = createPublicClient({
  chain: abstract,
  transport: http()
}).extend(eip712WalletActions());

Learn more on the official viem documentation.

Reading Blockchain Data

Use a public client to fetch data from the blockchain via an RPC.

const balance = await publicClient.getBalance({
  address: "0x8e729E23CDc8bC21c37a73DA4bA9ebdddA3C8B6d",
});

Sending Transactions

Use a wallet client to send transactions to the blockchain.

const transactionHash = await walletClient.sendTransaction({
  to: "0x8e729E23CDc8bC21c37a73DA4bA9ebdddA3C8B6d",
  data: "0x69",
});

Paymasters

Viem has native support for Abstract paymasters. Provide the paymaster and paymasterInput fields when sending a transaction. View Viem documentation.

const hash = await walletClient.sendTransaction({
  to: "0x8e729E23CDc8bC21c37a73DA4bA9ebdddA3C8B6d",
  paymaster: "0x5407B5040dec3D339A9247f3654E59EEccbb6391", // Your paymaster contract address
  paymasterInput: "0x", // Any additional data to be sent to the paymaster
});

Smart Contract Wallets

Viem also has native support for using smart contract wallets. This means you can submit transactions from a smart contract wallet by providing a smart wallet account as the account field to the client. View Viem documentation.

import { toSmartAccount, eip712WalletActions } from "viem/zksync";
import { createWalletClient, http } from "viem";
import { abstractTestnet } from "viem/chains";

const account = toSmartAccount({
  address: CONTRACT_ADDRESS,
  async sign({ hash }) {
    // ... signing logic here for your smart contract account
  },
});

// Create a client from a smart contract wallet
const walletClient = createWalletClient({
  chain: abstractTestnet,
  transport: http(),
  account: account, // <-- Provide the smart contract wallet account
}).extend(eip712WalletActions());

// ... Continue using the wallet client as usual (will send transactions from the smart contract wallet)

import { toSmartAccount, eip712WalletActions } from "viem/zksync";
import { createWalletClient, http } from "viem";
import { abstract } from "viem/chains";

const account = toSmartAccount({
  address: CONTRACT_ADDRESS,
  async sign({ hash }) {
    // ... signing logic here for your smart contract account
  },
});

// Create a client from a smart contract wallet
const walletClient = createWalletClient({
  chain: abstract,
  transport: http(),
  account: account, // <-- Provide the smart contract wallet account
}).extend(eip712WalletActions());

// ... Continue using the wallet client as usual (will send transactions from the smart contract wallet)

Overview

Build on Abstract

How Abstract Works

Tooling

Infrastructure

1. Installation

2. Client Configuration

Reading Blockchain Data

Sending Transactions

Paymasters

Smart Contract Wallets

​1. Installation

​2. Client Configuration

​Reading Blockchain Data

​Sending Transactions

​Paymasters

​Smart Contract Wallets

1. Installation

2. Client Configuration

Reading Blockchain Data

Sending Transactions

Paymasters

Smart Contract Wallets