Migration from Solana Anza Adapter to AppKit
Follow the steps below to migrate from the Starter Pack of Anza Adapter to AppKit. Based on the default implementation. Our starting point is the Anza Adapter Starter Pack in Github.
Step 1. Integrate Solana Appkit
a. Create a project in WalletConnect Cloud
- Create a new project on WalletConnect Cloud and obtain a new project ID.
b. Uninstall old packages and install the AppKit packages:
- npm
- Yarn
- Bun
- pnpm
npm uninstall @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
yarn remove @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
npm uninstall @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
pnpm remove @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
- npm
- Yarn
- Bun
- pnpm
npm install @web3modal/solana
yarn add @web3modal/solana
bun add @web3modal/solana
pnpm add @web3modal/solana
c. Add imports to the top of the App.tsx
Remove old imports:
- import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
- import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
- import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
Add the new imports:
+ import { createWeb3Modal, defaultSolanaConfig, useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react'
+ import { solana, solanaTestnet, solanaDevnet } from '@web3modal/solana/chains'
Update the code:
// 0. Setup chains
const chains = [solana, solanaTestnet, solanaDevnet]
// Get projectId at https://cloud.walletconnect.com
const projectId = import.meta.env.VITE_PROJECT_ID;
if (!projectId) throw new Error("Project ID is undefined");
// 2. Create solanaConfig
const metadata = {
name: 'Appkit Solana Example',
description: 'Appkit Solana Example',
url: 'https://example.com', // origin must match your domain & subdomain
icons: ['https://avatars.githubusercontent.com/u/37784886'],
}
const solanaConfig = defaultSolanaConfig({
metadata,
chains,
projectId,
auth: {
email: true,
socials: ['google', 'x', 'farcaster', 'github']
}
})
// Create modal
createWeb3Modal({
metadata,
solanaConfig,
chains,
projectId,
})
info
Email a social logins are enabled by default.
d. Update the App.tsx
component
Use the AppKit Button. It can be configure following these guidelines.
info
AppKit's web components are global HTML elements that don't require importing.
const Content: FC = () => {
- return <WalletMultiButton />;
+ return <w3m-button />
};
e. Create the .env
file with the projectId
VITE_PROJECT_ID=<Add_your_project_id>
Step 2. Interact with the Solana network
After integrating AppKit, you can interact with the Solana network using the @solana/web3.js
library.
You can check our example on how to fully interact or read our documentation for more information.
a. Add all the imports you need to interact with the Solana network:
import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react'
import {
PublicKey,
Transaction,
SystemProgram,
Connection
} from '@solana/web3.js'
b. call the hooks useWeb3ModalAccount
and useWeb3ModalProvider
:
const { address } = useWeb3ModalAccount()
const { walletProvider, connection } = useWeb3ModalProvider()
c. Create a function to generate a transaction:
const handleSendTransaction = async () => {
if (!walletProvider || !address || !connection) {
// walletProvider, connection or address are undefined
return;
}
// Recipient address
const recipientAddress = new PublicKey("DG1Bq6muEMqaW6MHzWZFfQ8MmHiwvEuQcjVefVmPoV3j")
// Create a new transaction
const transaction = new Transaction().add(
SystemProgram.transfer({
fromPubkey: walletProvider.publicKey,
toPubkey: recipientAddress,
lamports: 10000000, //0.01 SOL
})
)
transaction.feePayer = walletProvider.publicKey;
const { blockhash } = await connection.getLatestBlockhash();
transaction.recentBlockhash = blockhash;
const tx = await walletProvider.sendTransaction(transaction, connection as Connection)
}
d. Call the function:
<button onClick={handleSendTransaction}>Send Transaction</button>
e. Install and Run the Solana AppKit Project.
Install dependencies:
- npm
- Yarn
- Bun
- pnpm
npm install
yarn install
npm install
pnpm install
Start the project:
- npm
- Yarn
- Bun
- pnpm
npm run dev
yarn dev
npm run dev
pnpm run dev
Final notes
- Check our Solana AppKit React Docs for more information on how to customize your project.
- Test your application thoroughly to ensure that the migration has been successful and that all functionality is working as expected.