Merge pull request WalletConnect#1695 from WalletConnect/feat/migrati…

…on-guide-anza

feat: Add anza adapter migration path

docs/appkit/migration/from-anza-adapter-react.mdx

@@ -0,0 +1,188 @@
+---
+title: Migration from Solana Anza Adapter to AppKit
+pagination_next: 
+
+---
+
+# 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 WalletConnect Cloud
+
++ Create a new project on [WalletConnect Cloud](https://cloud.walletconnect.com) and obtain a new project ID.
+
+### b. Uninstall old packages and install the AppKit packages: 
+
+```bash npm2yarn
+npm uninstall @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui
+```
+
+```bash npm2yarn
+npm install @web3modal/solana
+```
+
+### c. Add imports to the top of the `App.tsx`
+
+Remove old imports:
+
+```tsx
+/* highlight-delete-start */
+- import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
+- import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
+- import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
+/* highlight-delete-end */
+```
+
+Add the new imports:
+
+```tsx
+/* highlight-add-start */
++ import { createWeb3Modal, defaultSolanaConfig, useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react'
++ import { solana, solanaTestnet, solanaDevnet } from '@web3modal/solana/chains'
+/* highlight-add-end */
+```
+
+Update the code:
+
+```tsx
+// 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](https://docs.walletconnect.com/appkit/react-native/core/components#w3mbutton-).
+
+:::info
+AppKit's web components are global HTML elements that don't require importing.
+:::
+
+```tsx
+const Content: FC = () => {
+/* highlight-delete-start */
+-   return <WalletMultiButton />;
+/* highlight-delete-end */
+/* highlight-add-start */
++   return <w3m-button />
+/* highlight-add-end */   
+};
+
+```
+
+### 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/WalletConnect/web-examples/tree/main/dapps/web3modal/react-solana) on how to fully interact or read our [documentation](https://docs.walletconnect.com/appkit/react/core/installation#smart-contract-interaction) for more information.
+
+### a. Add all the imports you need to interact with the Solana network:
+
+```tsx
+import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react'
+import {
+  PublicKey,
+  Transaction,
+  SystemProgram,
+  Connection
+} from '@solana/web3.js'
+```
+
+### b. call the hooks `useWeb3ModalAccount` and `useWeb3ModalProvider`:
+
+```tsx
+const { address } = useWeb3ModalAccount()
+const { walletProvider, connection } = useWeb3ModalProvider() 
+```
+
+### c. Create a function to generate a transaction:
+
+```tsx
+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:
+
+  ```tsx
+  <button onClick={handleSendTransaction}>Send Transaction</button>
+  ```
+
+### e. Install and Run the Solana AppKit Project.
+
+Install dependencies:
+```bash npm2yarn
+npm install
+```
+ Start the project:
+```bash npm2yarn
+npm run dev
+```
+
+# 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.

sidebars.js

@@ -245,6 +245,7 @@ module.exports = {
               collapsible: true,
               items: [
                 { type: 'doc', label: 'From RainbowKit', id: 'appkit/migration/from-rainbowkit-next' },
+                { type: 'doc', label: 'From Anza Adapter', id: 'appkit/migration/from-anza-adapter-react' },
               ]
             },
           ]