Skip to main content

Upgrade Guide

What's new in v3

  • Support for Vue & Nuxt
  • Simpler design and new theming mechanism
  • More optimized multi platform wallet support
  • Smaller bundle size
  • New Explorer API integration
  • Unified experience for iOS, Android and Desktop

Web3Modal v3 Upgrade Guide

Installation

To upgrade from Web3Modal v2 to v3 start by removing Web3Modal v2 dependencies @web3modal/ethereum and @web3modal/react, while keeping wagmi and viem installed. Now you can install Web3Modal v3 library

npm install @web3modal/wagmi

Implementation

You can start the Web3Modal configuration by using either the default or advanced mode.

Default mode will implement WalletConnect, Browser Wallets (injected) and Coinbase options in addition to Wagmi's public clients and WalletConnect's provider.

note

Make sure to set your configuration outside React components to avoid unwanted rerenders.

Start by importing createWeb3Modal, defaultWagmiConfig and wagmi packages

- import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
- import { Web3Modal } from '@web3modal/react'
+ import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'

import { WagmiConfig } from 'wagmi'
import { arbitrum, mainnet } from 'viem/chains'

Then create wagmiConfig using defaultWagmiConfig function as shown below

const chains = [arbitrum, mainnet]
const projectId = 'YOUR_PROJECT_ID'

/* Create Wagmi Config */
- const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
- const wagmiConfig = createConfig({
- autoConnect: true,
- connectors: w3mConnectors({ projectId, chains }),
- publicClient
- })
+ const metadata = {
+ name: 'Web3Modal',
+ description: 'Web3Modal Example',
+ url: 'https://web3modal.com',
+ icons: ['https://avatars.githubusercontent.com/u/37784886']
+ }

+ const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

Finally, pass wagmiConfig to createWeb3Modal

/* Call createWeb3Modal function */
- const ethereumClient = new EthereumClient(wagmiConfig, chains)
+ createWeb3Modal({ wagmiConfig, projectId, chains })

export default function App() {
return (
<>
<WagmiConfig config={wagmiConfig}>
<HomePage />
</WagmiConfig>

- <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
</>
)
}

Trigger the modal

- import { useWeb3Modal } from '@web3modal/react'
+ import { useWeb3Modal } from '@web3modal/wagmi/react'

function HomePage() {
const { open } = useWeb3Modal()

return <button onClick={() => open()}>Connect</button>
}

Learn more about Web3Modal v3 here