> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reown.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://github.com/anza-xyz/wallet-adapter/blob/master/packages/starter/react-ui-starter/) in Github.

## Step 1. Integrate Solana Appkit

### a. Create a project in Reown Dashboard

* Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.

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

<CodeGroup>
  ```bash npm theme={null}
  npm uninstall @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
  ```

  ```bash Yarn theme={null}
  yarn remove @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
  ```

  ```bash Bun theme={null}
  npm uninstall @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
  ```

  ```bash pnpm theme={null}
  pnpm remove @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
  ```
</CodeGroup>

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit @reown/appkit-adapter-solana
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit @reown/appkit-adapter-solana
  ```

  ```bash Bun theme={null}
  bun add @reown/appkit @reown/appkit-adapter-solana
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit @reown/appkit-adapter-solana
  ```
</CodeGroup>

### c. Add imports to the top of the `App.tsx`

Remove old imports:

```tsx theme={null}
- 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:

```tsx {1-3} theme={null}
+ 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:

```tsx theme={null}

// 1. Get projectId at https://dashboard.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
  }
})
```

<Note>
  Email and social logins are enabled by default.See our section on [configuration](/appkit/react/core/socials)
</Note>

### d. Update the `App.tsx` component

Use the AppKit Button. It can be configure following these [guidelines](https://docs.walletconnect.com/appkit/react-native/core/components#w3mbutton-).

<Note>
  AppKit's web components are global HTML elements that don't require importing.
</Note>

```tsx {3} theme={null}
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](https://github.com/reown-com/appkit-web-examples/tree/main/react/react-solana) on how to fully interact or read our [guide](https://docs.reown.com/appkit/recipes/solana-send-transaction) for more information.

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

```tsx theme={null}
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`:

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

### c. Create a function to generate a transaction:

```tsx theme={null}
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:

```tsx theme={null}
<button onClick={handleSendTransaction}>Send Transaction</button>
```

### e. Install and Run the Solana AppKit Project.

Install dependencies:

<CodeGroup>
  ```bash npm theme={null}
  npm install
  ```

  ```bash Yarn theme={null}
  yarn install
  ```

  ```bash Bun theme={null}
  npm install
  ```

  ```bash pnpm theme={null}
  pnpm install
  ```
</CodeGroup>

Start the project:

<CodeGroup>
  ```bash npm theme={null}
  npm run dev
  ```

  ```bash Yarn theme={null}
  yarn dev
  ```

  ```bash Bun theme={null}
  npm run dev
  ```

  ```bash pnpm theme={null}
  pnpm run dev
  ```
</CodeGroup>

# Final notes

* Check our [Solana AppKit React Docs](/appkit/react/core/installation?platform=solana) 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.