This document outlines the steps to migrate from the old @web3modal packages to the new @reown/appkit packages in your React Native project.
Step 1. Replace the dependencies in your code and package.json
{
"dependencies": {
// Remove the following code lines
"@web3modal/wagmi-react-native": "2.0.4",
"@web3modal/email-wagmi-react-native": "2.0.4",
"@web3modal/coinbase-wagmi-react-native": "2.0.4",
"@web3modal/siwe-react-native": "2.0.4",
// Add the following code lines
"@reown/appkit-wagmi-react-native": "1.0.0",
"@reown/appkit-auth-wagmi-react-native": "1.0.0",
"@reown/appkit-coinbase-wagmi-react-native": "1.0.0",
"@reown/appkit-siwe-react-native": "1.0.0"
}
}
- Run
yarn install after replacing the packages
Step 2. Update your AppKit config
// Remove the following code lines
import { createWeb3Modal } from "@web3modal/wagmi-react-native";
// Add the following code lines
import { createAppKit } from "@reown/appkit-wagmi-react-native";
Step 3. Update your Hooks usage
Update your hook imports as follows:
// Remove the following code lines
import {
useWeb3Modal,
useWeb3ModalState,
useWeb3ModalEvents,
useWalletInfo,
} from "@web3modal/wagmi-react-native";
// Add the following code lines
import {
useAppKit,
useAppKitState,
useAppKitEvents,
useWalletInfo,
} from "@reown/appkit-wagmi-react-native";
Step 4. Update your Components usage
Update your component imports as follows:
// Remove the following code lines
import {
W3mAccountButton,
W3mButton,
W3mConnectButton,
W3mNetworkButton,
Web3Modal,
} from "@web3modal/wagmi-react-native";
// Add the following code lines
import {
AccountButton,
AppKitButton,
ConnectButton,
NetworkButton,
AppKit,
} from "@reown/appkit-wagmi-react-native";
Step 5. Update your config for Universal Wallets
Update email wallet specific imports as follows:
// Remove the following code lines
import { emailConnector } from "@web3modal/email-wagmi-react-native";
// Add the following code lines
import { authConnector } from "@reown/appkit-auth-wagmi-react-native";
Step 6. Update your import to support Coinbase Wallet
Update coinbase connector import as follows:
// Remove the following code lines
import { coinbaseConnector } from "@web3modal/coinbase-wagmi-react-native";
// Add the following code lines
import { coinbaseConnector } from "@reown/appkit-coinbase-wagmi-react-native";
Step 1. Replace the dependencies in your code and package.json
{
"dependencies": {
// Remove the following code lines
"@web3modal/wagmi-react-native": "2.0.4",
"@web3modal/email-wagmi-react-native": "2.0.4",
"@web3modal/coinbase-wagmi-react-native": "2.0.4",
"@web3modal/siwe-react-native": "2.0.4",
// Add the following code lines
"@reown/appkit-wagmi-react-native": "1.0.0",
"@reown/appkit-auth-wagmi-react-native": "1.0.0",
"@reown/appkit-coinbase-wagmi-react-native": "1.0.0",
"@reown/appkit-siwe-react-native": "1.0.0"
}
}
- Run
yarn install after replacing the packages
Step 2. Update your AppKit config
// Remove the following code lines
import { createWeb3Modal } from "@web3modal/wagmi-react-native";
// Add the following code lines
import { createAppKit } from "@reown/appkit-wagmi-react-native";
Step 3. Update your Hooks usage
Update your hook imports as follows:
// Remove the following code lines
import {
useWeb3Modal,
useWeb3ModalState,
useWeb3ModalEvents,
useWalletInfo,
} from "@web3modal/wagmi-react-native";
// Add the following code lines
import {
useAppKit,
useAppKitState,
useAppKitEvents,
useWalletInfo,
} from "@reown/appkit-wagmi-react-native";
Step 4. Update your Components usage
Update your component imports as follows:
// Remove the following code lines
import {
W3mAccountButton,
W3mButton,
W3mConnectButton,
W3mNetworkButton,
Web3Modal,
} from "@web3modal/wagmi-react-native";
// Add the following code lines
import {
AccountButton,
AppKitButton,
ConnectButton,
NetworkButton,
AppKit,
} from "@reown/appkit-wagmi-react-native";
Step 5. Update your config for Universal Wallets
Update email wallet specific imports as follows:
// Remove the following code lines
import { emailConnector } from "@web3modal/email-wagmi-react-native";
// Add the following code lines
import { authConnector } from "@reown/appkit-auth-wagmi-react-native";
Step 6. Update your import to support Coinbase Wallet
Update coinbase connector import as follows:
// Remove the following code lines
import { coinbaseConnector } from "@web3modal/coinbase-wagmi-react-native";
// Add the following code lines
import { coinbaseConnector } from "@reown/appkit-coinbase-wagmi-react-native";
- If you are using ethers v5, follow the same steps but replacing
ethers with ethers5
Step 1. Replace the dependencies in your code and package.json
{
"dependencies": {
// Remove the following code lines
"@web3modal/ethers-react-native": "2.0.4",
"@web3modal/ethers5-react-native": "2.0.4",
"@web3modal/email-ethers-react-native": "2.0.4",
"@web3modal/coinbase-ethers-react-native": "2.0.4",
"@web3modal/siwe-react-native": "2.0.4",
// Add the following code lines
"@reown/appkit-ethers-react-native": "1.0.0",
"@reown/appkit-auth-ethers-react-native": "1.0.0",
"@reown/appkit-coinbase-ethers-react-native": "1.0.0",
"@reown/appkit-siwe-react-native": "1.0.0"
}
}
- Run
yarn install after replacing the packages
Step 2. Update your AppKit config
// Remove the following code lines
import { createWeb3Modal } from "@web3modal/ethers-react-native";
// Add the following code lines
import { createAppKit } from "@reown/appkit-ethers-react-native";
Step 3. Update your Hooks usage
Update your hook imports as follows:
// Remove the following code lines
import {
useWeb3Modal,
useWeb3ModalState,
useWeb3ModalEvents,
useWeb3ModalAccount,
useWeb3ModalProvider,
useWeb3ModalError,
useWalletInfo,
} from "@web3modal/ethers-react-native";
// Add the following code lines
import {
useAppKit,
useAppKitState,
useAppKitEvents,
useAppKitAccount,
useAppKitProvider,
useAppKitError,
useWalletInfo,
} from "@reown/appkit-ethers-react-native";
Step 4. Update your Components usage
Update your component imports as follows:
// Remove the following code lines
import {
W3mAccountButton,
W3mButton,
W3mConnectButton,
W3mNetworkButton,
Web3Modal,
} from "@web3modal/ethers-react-native";
// Add the following code lines
import {
AccountButton,
AppKitButton,
ConnectButton,
NetworkButton,
AppKit,
} from "@reown/appkit-ethers-react-native";
Step 5. Update email wallet specific imports as follows:
// Remove the following code lines
import { EmailProvider } from "@web3modal/email-ethers-react-native";
// Add the following code lines
import { AuthProvider } from "@reown/appkit-auth-ethers-react-native";
Step 6. Update your import to support Coinbase Wallet
Update coinbase connector import as follows:
// Remove the following code lines
import { CoinbaseProvider } from "@web3modal/coinbase-ethers-react-native";
// Add the following code lines
import { CoinbaseProvider } from "@reown/appkit-coinbase-ethers-react-native";
Final notes
- Ensure that you have updated all relevant configurations and imports in your project to reflect the changes from Web3Modal to AppKit.
- Test your application thoroughly to ensure that the migration has been successful and that all functionality is working as expected.
- Check our AppKit example for React Native to compare with your implementation in case you are having issues
