# 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
npm uninstall @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
```
```bash Yarn
yarn remove @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
```
```bash Bun
npm uninstall @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
```
```bash pnpm
pnpm remove @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
```
</CodeGroup>
<CodeGroup>
```bash npm
npm install @reown/appkit @reown/appkit-adapter-solana
```
```bash Yarn
yarn add @reown/appkit @reown/appkit-adapter-solana
```
```bash Bun
bun add @reown/appkit @reown/appkit-adapter-solana
```
```bash pnpm
pnpm add @reown/appkit @reown/appkit-adapter-solana
```
</CodeGroup>
### c. Add imports to the top of the `App.tsx`

Remove old imports:

```tsx
- 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}
+ 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

// 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}
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
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
const { isConnected, address } = useAppKitAccount();
const { connection } = useAppKitConnection();
const { walletProvider } = useAppKitProvider<Provider>("solana");
```

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

```tsx
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
<button onClick={handleSendTransaction}>Send Transaction</button>
```

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

Install dependencies:
<CodeGroup>
```bash npm
npm install
```
```bash Yarn
yarn install
```
```bash Bun
npm install
```
```bash pnpm
pnpm install
```
</CodeGroup>

Start the project:
<CodeGroup>
```bash npm
npm run dev
```
```bash Yarn
yarn dev
```
```bash Bun
npm run dev
```
```bash pnpm
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.