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 Reown Cloud

  • Create a new project on Reown Cloud and obtain a new project ID.

​
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 @reown/appkit @reown/appkit-adapter-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 { createAppKit } from '@reown/appkit/react'
+ import { SolanaAdapter } from '@reown/appkit-adapter-solana/react'
+ import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/networks'

Update the code:


// 1. Get projectId at https://cloud.reown.com
const projectId = import.meta.env.VITE_PROJECT_ID
if (!projectId) throw new Error('Project ID is undefined')

// 2. Create Metadata
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/179229932']
}

// 3. Set up Solana Adapter
const solanaWeb3JsAdapter = new SolanaAdapter()

// 4. Initialize AppKit
createAppKit({
  projectId,
  metadata,
  networks: [solana, solanaTestnet, solanaDevnet],
  adapters: [solanaWeb3JsAdapter],
  features: {
    analytics: true // Optional - defaults to your Cloud configuration
  }
})

Email and social logins are enabled by default.See our section on configuration

​
d. Update the App.tsx component

Use the AppKit Button. It can be configure following these guidelines.

AppKit’s web components are global HTML elements that don’t require importing.

const Content: FC = () => {
-   return <WalletMultiButton />;
+   return <appkit-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 guide for more information.

​
a. Add all the imports you need to interact with the Solana network:

import { useAppKitConnection } from "@reown/appkit-adapter-solana/react";
import { PublicKey, Transaction, SystemProgram } from "@solana/web3.js";
import { useAppKitAccount, useAppKitProvider } from "@reown/appkit/react";
import type { Provider } from "@reown/appkit-adapter-solana/react";

​
b. call the hooks useAppKitAccount, useAppKitProvider and useAppKitConnection:

const { isConnected, address } = useAppKitAccount();
const { connection } = useAppKitConnection();
const { walletProvider } = useAppKitProvider<Provider>("solana");

​
c. Create a function to generate a transaction:

const handleSendTransaction = async () => {
  const latestBlockhash = await connection.getLatestBlockhash();

    // create the transaction
    const transaction= new Transaction({
        feePayer: wallet,
        recentBlockhash: latestBlockhash?.blockhash,
      }).add(
        SystemProgram.transfer({
          fromPubkey: wallet,
          toPubkey: new PublicKey(address), // destination address
          lamports: 1000,
        })
      );

    // raise the modal
    const signature = await walletProvider.sendTransaction(transaction, connection)

    // print the Transaction Signature
    console.log(signature);
}

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