Upgrade Guide
AppKit v2 to AppKit v5 Upgrade Guide
This guide is useful for those that have used a previous AppKit V2 version and are looking to upgrade to AppKit v5.
Installation
- react
- JavaScript
To upgrade from AppKit v2 to AppKit v4 start by removing AppKit v2 dependencies
@web3modal/ethereum and @web3modal/react. Now you can install AppKit library and update Wagmi and Viem.Copy
npm install @web3modal/wagmi@latest wagmi@2.x viem@2.x @tanstack/react-query@5.x
To upgrade from AppKit v2 to AppKit v4 start by removing AppKit v2 dependencies
@web3modal/ethereum and @web3modal/react. Now you can install AppKit library and update @wagmi/core and Viem.Copy
npm install @web3modal/wagmi@latest @wagmi/connectors @wagmi/core@2.x viem@2.x
Implementation
- react
- JavaScript
You can start the AppKit 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.
Make sure to set your configuration outside React components to avoid unwanted rerenders.
- Default
- Advanced
Start by importing Then create Finally, pass
createWeb3Modal, defaultWagmiConfig and wagmi packagesCopy
// Remove the following code lines
- import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
- import { Web3Modal } from '@web3modal/react'
+ import { createWeb3Modal } from '@web3modal/wagmi/react'
+ import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiConfig } from 'wagmi'
import { arbitrum, mainnet } from 'viem/chains'
wagmiConfig using defaultWagmiConfig function as shown belowCopy
const chains = [arbitrum, mainnet]
const projectId = 'YOUR_PROJECT_ID'
/* Create Wagmi Config */
// Remove the following code lines
- const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
- const wagmiConfig = createConfig({
- autoConnect: true,
- connectors: w3mConnectors({ projectId, chains }),
- publicClient
- })
+ const queryClient = new QueryClient()
+ const metadata = {
+ name: 'AppKit',
+ description: 'AppKit Example',
+ url: 'https://example.com',
+ icons: ['https://avatars.githubusercontent.com/u/179229932']
+ }
+ const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })
config to createWeb3ModalCopy
/* Call createWeb3Modal function */
/* highlight-delete-start */
- const ethereumClient = new EthereumClient(wagmiConfig, chains)
/* highlight-delete-end */
/* highlight-add-start */
+ createWeb3Modal({ wagmiConfig, projectId, chains })
/* highlight-add-end */
export default function App() {
return (
<>
<WagmiConfig config={wagmiConfig}>
/* highlight-add-start */
+ <QueryClientProvider client={queryClient}>
/* highlight-add-end */
<HomePage />
/* highlight-add-start */
+ </QueryClientProvider>
/* highlight-add-end */
</WagmiConfig>
/* highlight-delete-start */
- <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
/* highlight-delete-end */
</>
)
}
Start by importing Then create Finally, pass
createWeb3Modal and wagmi packagesCopy
/* highlight-delete-start */
- import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
- import { Web3Modal } from '@web3modal/react'
/* highlight-delete-end */
/* highlight-add-start */
+ import { createWeb3Modal } from '@web3modal/wagmi/react'
/* highlight-add-end */
import { WagmiConfig, configureChains, createConfig } from 'wagmi'
import { mainnet } from 'viem/chains'
/* highlight-add-start */
+ import { http, createConfig, WagmiProvider } from 'wagmi'
+ import { mainnet, sepolia } from 'wagmi/chains'
+ import { walletConnect, injected, coinbaseWallet } from 'wagmi/connectors'
+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
/* highlight-add-end */
wagmiConfig using your own settingsCopy
// 1. Get projectId from https://dashboard.reown.com
const projectId = 'YOUR_PROJECT_ID'
// 2. Create wagmiConfig
/* highlight-delete-start */
- const { chains, publicClient } = configureChains([mainnet], [w3mProvider({ projectId })])
- const wagmiConfig = createConfig({
- autoConnect: true,
- connectors: w3mConnectors({ projectId, chains }),
- publicClient
- })
/* highlight-delete-end */
/* highlight-add-start */
+ const metadata = {
+ name: 'AppKit',
+ description: 'AppKit Example',
+ url: 'https://example.com', // origin must match your domain & subdomain
+ icons: ['https://avatars.githubusercontent.com/u/179229932']
+ }
+ const wagmiConfig = createConfig({
+ chains: [mainnet, sepolia],
+ transports: {
+ [mainnet.id]: http(),
+ [sepolia.id]: http()
+ },
+ connectors: [
+ walletConnect({ projectId, metadata, showQrModal: false }),
+ injected({ shimDisconnect: true }),
+ coinbaseWallet({
+ appName: metadata.name,
+ appLogoUrl: metadata.icons[0]
+ })
+ ]
+ })
/* highlight-add-end */
wagmiConfig to createWeb3ModalCopy
/* Call createWeb3Modal function */
/* highlight-delete-start */
- const ethereumClient = new EthereumClient(wagmiConfig, chains)
/* highlight-delete-end */
/* highlight-add-start */
+ createWeb3Modal({
+ wagmiConfig,
+ projectId,
+ enableAnalytics: true // Optional - defaults to your Cloud configuration
+ })
/* highlight-add-end */
export default function App() {
return (
<>
<WagmiConfig config={wagmiConfig}>
/* highlight-add-start */
+ <QueryClientProvider client={queryClient}>
<HomePage />
+ </QueryClientProvider>
/* highlight-add-end */
</WagmiConfig>
/* highlight-delete-start */
- <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
/* highlight-delete-end */
</>
)
}
Start by importing AppKit and wagmi packages, then create wagmi config using your own settings or our default presets as shown below. Finally, pass wagmi config to AppKit as ethereumClient.
- Default
- Advanced
Start by importing Then create Finally, pass
createWeb3Modal, defaultWagmiConfig and wagmi packagesCopy
/* highlight-delete-start */
- import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
- import { Web3Modal } from '@web3modal/html'
/* highlight-delete-end */
/* highlight-add-start */
+ import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
/* highlight-add-end */
/* highlight-delete-start */
import { configureChains } from '@wagmi/core'
/* highlight-delete-end */
import { createConfig } from '@wagmi/core'
import { arbitrum, mainnet } from 'viem/chains'
wagmiConfig using defaultWagmiConfig function as shown belowCopy
const chains = [arbitrum, mainnet]
const projectId = 'YOUR_PROJECT_ID'
/* Create Wagmi Config */
/* highlight-delete-start */
- const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
- const wagmiConfig = createConfig({
- autoConnect: true,
- connectors: w3mConnectors({ projectId, chains }),
- publicClient
- })
/* highlight-delete-end */
/* highlight-add-start */
+ const metadata = {
+ name: 'AppKit',
+ description: 'AppKit Example',
+ url: 'https://example.com',
+ icons: ['https://avatars.githubusercontent.com/u/179229932']
+ }
+ const wagmiConfig = defaultWagmiConfig({ chains, projectId, appName: metadata.name })
/* highlight-add-end */
wagmiConfig to createWeb3ModalCopy
/* highlight-delete-start */
- const ethereumClient = new EthereumClient(wagmiConfig, chains)
/* highlight-delete-end */
/* highlight-add-start */
+ createWeb3Modal({
+ wagmiConfig,
+ projectId,
+ enableAnalytics: true // Optional - defaults to your Cloud configuration
+ })
/* highlight-add-end */
Start by importing AppKit and wagmi packagesThen create Finally, pass
Copy
/* highlight-delete-start */
- import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
- import { Web3Modal } from '@web3modal/react'
/* highlight-delete-end */
/* highlight-add-start */
+ import { Web3Modal, walletConnectProvider } from '@web3modal/wagmi'
/* highlight-add-end */
/* highlight-delete-start */
import { configureChains } from '@wagmi/core'
/* highlight-delete-end */
import { createConfig } from '@wagmi/core'
import { mainnet } from 'viem/chains'
/* highlight-add-start */
import { reconnect, http, createConfig } from '@wagmi/core'
import { mainnet, sepolia } from '@wagmi/core/chains'
import { coinbaseWallet, walletConnect, injected } from '@wagmi/connectors'
/* highlight-add-end */
wagmiConfig using your own settingsCopy
// 1. Get projectId from https://dashboard.reown.com
const projectId = 'YOUR_PROJECT_ID'
// 2. Create wagmiConfig
/* highlight-delete-start */
- const { chains, publicClient } = configureChains([mainnet], [w3mProvider({ projectId })])
/* highlight-delete-end */
/* highlight-delete-start */
- const wagmiConfig = createConfig({
- autoConnect: true,
- connectors: w3mConnectors({ projectId, chains }),
- publicClient
- })
/* highlight-delete-end */
/* highlight-add-start */
+ const metadata = {
+ name: 'AppKit',
+ description: 'AppKit Example',
+ url: 'https://example.com',
+ icons: ['https://avatars.githubusercontent.com/u/179229932']
+ }
/* highlight-add-end */
/* highlight-add-start */
+ const wagmiConfig = createConfig({
+ chains: [mainnet, sepolia],
+ transports: {
+ [mainnet.id]: http(),
+ [sepolia.id]: http()
+ },
+ connectors: [
+ walletConnect({ projectId, metadata, showQrModal: false }),
+ injected({ shimDisconnect: true }),
+ coinbaseWallet({
+ appName: metadata.name,
+ appLogoUrl: metadata.icons[0]
+ })
+ ]
+ })
+ reconnect(wagmiConfig)
/* highlight-add-end */
wagmiConfig to createWeb3ModalCopy
/* highlight-delete-start */
- const ethereumClient = new EthereumClient(wagmiConfig, chains)
/* highlight-delete-end */
/* highlight-add-start */
+ createWeb3Modal({
+ wagmiConfig,
+ projectId,
+ enableAnalytics: true // Optional - defaults to your Cloud configuration
+ })
/* highlight-add-end */
Trigger the modal
- react
- JavaScript
Copy
/* highlight-delete-start */
- import { useWeb3Modal } from '@web3modal/react'
/* highlight-delete-end */
/* highlight-add-start */
+ import { useWeb3Modal } from '@web3modal/wagmi/react'
/* highlight-add-end */
function HomePage() {
const { open } = useWeb3Modal()
return <button onClick={() => open()}>Connect</button>
}
Use your own button with to open the modalLearn more about AppKit v4 JavaScript here
Copy
document.getElementById('my-button').addEventListener('click', () => {
/* highlight-delete-start */
- web3modal.openModal()
/* highlight-delete-end */
/* highlight-add-start */
+ modal.open()
/* highlight-add-end */
})
<button id="my-button">Connect Wallet</button>