Skip to main content

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​

b. Uninstall old packages and install the AppKit packages:​

npm uninstall @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
npm install @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 an 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 install

Start the project:

npm 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.