Skip to main content

Background

Viem​

Viem serves as a foundational TypeScript Interface for Ethereum, facilitating developer engagement with the EVM-compatible blockchain.

Its functionalities encompass abstracting JSON-RPC API interactions, facilitating Smart Contract engagement, implementing wallet and signing protocols, as well as offering coding and parsing utilities, among other features.

We utilize Public Client and Wallet Client from Viem to interact with our contracts.

Wagmi​

Viem is an implementation of low-level Ethereum interface abstractions. For projects built with React, we recommend utilizing Wagmi for developing a DAPP. Wagmi is a popular React Hooks library tailored for Ethereum, offering a variety of React Hooks for interaction with Viem.

warning

Currently, this SDK exclusively utilizes Wagmi version 1.x.x and Viem version 1.x.x

Initialization​

We suggest initializing Wagmi with WalletConnect; please refer to the docs for other connectors.

// Wagmi V1
import { publicProvider } from '@wagmi/core/providers/public'
import { EIP6963Connector, walletConnectProvider } from '@web3modal/wagmi'
import { configureChains, createConfig } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
import { linea, polygonZkEvm} from 'wagmi/chains'

const { publicClient, chains } = configureChains(
  [polygonZkEvm, linea],
  [
    publicProvider(),
    walletConnectProvider({
      projectId: "YOUR_WALLET_CONNECT_PROJECT_ID"
    }),
  ],
)

export const wagmiConfig = createConfig({
  autoConnect: true,
  publicClient,
  connectors: [
    new WalletConnectConnector({
      chains,
      options: {
        // ... check options [here](https://wagmi.sh/core/api/connectors/walletConnect)
      },
    }),
    new EIP6963Connector({ chains }),
    injectedWalletConnect: new InjectedConnector({
      chains: [polygonZkEvm, linea],
    }),
  ],
})


//App.tsx
  <WagmiConfig config={wagmiConfig}>
    <YourApp />
  </WagmiConfig>

Get Client​

import { getPublicClient, getWalletClient } from 'wagmi/actions'

//...

const publicClient = getPublicClient({ chainId })
const walletClient = await getWalletClient({ chainId })