From d0e08499c33bc8211c3fc1ab1ce27f97ad2b77b4 Mon Sep 17 00:00:00 2001 From: Rohit Ramesh Date: Wed, 9 Oct 2024 12:47:16 +0530 Subject: [PATCH] create migration docs for ConnectKit --- .../appkit/migration/from-connectkit-next.mdx | 146 ++++++++++++++++++ .../appkit/migration/from-rainbowkit-next.mdx | 4 +- sidebars.js | 5 + 3 files changed, 153 insertions(+), 2 deletions(-) create mode 100644 docs/appkit/migration/from-connectkit-next.mdx diff --git a/docs/appkit/migration/from-connectkit-next.mdx b/docs/appkit/migration/from-connectkit-next.mdx new file mode 100644 index 00000000..9151d1b5 --- /dev/null +++ b/docs/appkit/migration/from-connectkit-next.mdx @@ -0,0 +1,146 @@ +--- +title: Migration from ConnectKit to AppKit +pagination_next: +--- + +# Migration from ConnectKit to AppKit + +If you have currently set up ConnectKit as the wallet provider for your Web3 app, you can easily migrate to **Reown AppKit**. + +Assuming that your Web3 app is set up similarly to ConnectKit's example app [here](https://github.com/family/connectkit/tree/main/examples/nextjs), let's explore how to migrate from this example app to Reown AppKit. + +To migrate from ConnectKit to Reown AppKit, please follow the steps below. + +## Step 1. Create a project in Reown Cloud + ++ Create a new project on [Reown Cloud](https://cloud.reown.com) and obtain a new project ID. + +## Step 2. Install & uninstall libraries + ++ Run this command to install Reown AppKit and uninstall ConnectKit. + +```bash npm2yarn +npm install @reown/appkit @reown/appkit-adapter-wagmi && npm uninstall connectkit +``` + +## Step 3. Change the code in the `/components/Web3Provider.tsx` file + ++ Navigate to the `/components/Web3Provider.tsx` file inside your ConnectKit example Web3 app directory. ++ Now, you need to remove the existing configuration that uses ConnectKit and replace it with Reown AppKit. Refer to the code snippet below. + +```tsx +import React from 'react'; + +import { WagmiProvider, createConfig } from 'wagmi'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; + +/* highlight-delete-start */ +- import { ConnectKitProvider, getDefaultConfig } from 'connectkit'; +/* highlight-delete-end */ +/* highlight-add-start */ ++ import { WagmiAdapter } from '@reown/appkit-adapter-wagmi' + +// Include networks from AppKit ++ import { mainnet, arbitrum } from '@reown/appkit/networks' ++ import { createAppKit } from '@reown/appkit'; ++ export const networks = [mainnet, arbitrum] +/* highlight-add-end */ + +/* highlight-delete-start */ +- const config = createConfig( +- getDefaultConfig({ +- appName: 'ConnectKit Next.js demo', +- walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!, +- }) +- ); +/* highlight-delete-end */ + +/* highlight-add-start */ +// Get projectId from https://cloud.reown.com ++ export const projectId = "YOUR_PROJECT_ID"; + +//Set up the Wagmi Adapter (Config) ++ export const wagmiAdapter = new WagmiAdapter({ ++ networks, ++ projectId ++ }) +/* highlight-add-end */ + +const queryClient = new QueryClient(); + +/* highlight-add-start */ +// Create the modal ++ const modal = createAppKit({ ++ adapters: [wagmiAdapter], ++ projectId, ++ networks: [mainnet, arbitrum], ++ features: { ++ analytics: true, // Optional - defaults to your Cloud configuration ++ } ++ }) +/* highlight-add-end */ + + +export const Web3Provider = ({ children }: { children: React.ReactNode }) => { + return ( + /* highlight-delete-start*/ +- + /* highlight-delete-end */ + /* highlight-add-start*/ ++ + /* highlight-add-end */ + + /* highlight-delete-start*/ +- {children} + /* highlight-delete-end*/ + /* highlight-add-start*/ ++ {children} + /* highlight-add-end*/ + + + ); +}; + +``` + +## Step 4. Change the code in the `/pages/index.tsx` file + ++ Navigate to the `/pages/index.tsx` file inside your ConnectKit example Web3 app directory. ++ Now, you need to remove the existing code that uses `` and replace it with ``. Refer to the code snippet below. + +```tsx +import type { NextPage } from 'next'; +/* highlight-delete-start*/ +- import { ConnectKitButton } from 'connectkit'; +/* highlight-delete-end*/ + +const Home: NextPage = () => { + return ( +
+ /* highlight-delete-start*/ + + /* highlight-delete-end*/ + /* highlight-add-start*/ + + /* highlight-add-end*/ +
+ ); +}; + +export default Home; + +``` + +## Final notes + ++ Ensure that you have updated all relevant configurations and imports in your project to reflect the changes from ConnectKit to Reown AppKit. ++ Test your application thoroughly to ensure that the migration has been successful and that all functionality is working as expected. ++ Check our [AppKit Web examples](https://github.com/reown-com/appkit/tree/main/examples) to compare with your implementation in case you are having issues ++ If you want to start from scratch, please refer to the Installation docs [here](/appkit/overview) diff --git a/docs/appkit/migration/from-rainbowkit-next.mdx b/docs/appkit/migration/from-rainbowkit-next.mdx index edf7f29a..44dd45e9 100644 --- a/docs/appkit/migration/from-rainbowkit-next.mdx +++ b/docs/appkit/migration/from-rainbowkit-next.mdx @@ -1,7 +1,6 @@ --- title: Migration from RainbowKit to AppKit pagination_next: - --- # Migration from RainbowKit to AppKit @@ -176,4 +175,5 @@ export default MyApp; + Ensure that you have updated all relevant configurations and imports in your project to reflect the changes from RainbowKit to AppKit. + Test your application thoroughly to ensure that the migration has been successful and that all functionality is working as expected. -+ Check our [AppKit web examples](https://github.com/WalletConnect/web-examples/tree/main/dapps/web3modal) to compare with your implementation in case you are having issues ++ Check our [AppKit web examples](https://github.com/reown-com/appkit/tree/main/examples) to compare with your implementation in case you are having issues ++ If you want to start from scratch, please refer to the Installation docs [here](/appkit/overview) diff --git a/sidebars.js b/sidebars.js index eb21d29a..0996ad11 100644 --- a/sidebars.js +++ b/sidebars.js @@ -260,6 +260,11 @@ module.exports = { label: 'From RainbowKit', id: 'appkit/migration/from-rainbowkit-next' }, + { + type: 'doc', + label: 'From ConnectKit', + id: 'appkit/migration/from-connectkit-next' + }, { type: 'doc', label: 'From Anza Adapter',