From 894129409c1febb39bf5ee4ed29ef245628e8901 Mon Sep 17 00:00:00 2001 From: Joe-thirdweb Date: Wed, 7 May 2025 23:05:06 -0500 Subject: [PATCH 1/6] Adding Migration Guide to portal --- .../web3-onboard/migration-guide/page.mdx | 219 ++++++++++++++++++ .../web3-onboard/{ => overview}/page.mdx | 0 2 files changed, 219 insertions(+) create mode 100644 apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx rename apps/portal/src/app/connect/wallet/web3-onboard/{ => overview}/page.mdx (100%) diff --git a/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx b/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx new file mode 100644 index 00000000000..fada8bc3aea --- /dev/null +++ b/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx @@ -0,0 +1,219 @@ +# Migration Guide: Blocknative to thirdweb (2025) + +## Introduction + +Learn how to migrate from Blocknative's Web3Onboard to thirdweb while maintaining the same wallet support. Following thirdweb's acquisition of Web3Onboard in January 2025, this migration will enable you to leverage thirdweb's enhanced features while ensuring a seamless transition for your users. + +## Benefits of Migration + +- Over 500+ wallet connections +- Enhanced wallet connection experience +- Access to thirdweb's broader ecosystem of tools +- Ongoing support and updates from thirdweb + +## Prerequisites + +- An existing project using Blocknative/Web3Onboard +- Basic familiarity with web3 development + +## Migration Steps + +### 1. Update Dependencies + +First, remove the Blocknative packages and install the thirdweb packages: + +```bash +# Remove Blocknative packages +npm uninstall bnc-onboard @web3-onboard/core @web3-onboard/injected-wallets + +# Install thirdweb unified package +npm install thirdweb + +``` + +### 2. Update Configuration (React) + +Replace your Blocknative configuration with thirdweb's: + +### Before (with Blocknative): + +```jsx +import Onboard from '@web3-onboard/core'; +import injectedModule from '@web3-onboard/injected-wallets'; + +const injected = injectedModule(); + +const onboard = Onboard({ + wallets: [injected], + chains: [ + { + id: '0x1', + token: 'ETH', + label: 'Ethereum Mainnet', + rpcUrl: 'https://mainnet.infura.io/v3/your-key' + } + ] +}); + +// Connect wallet +const wallets = await onboard.connectWallet(); + +``` + +### After (with thirdweb): + +1. Create your thirdweb project here. +2. Wrap your application with the `` + +```jsx +import { ThirdwebProvider, ConnectButton } from "thirdweb/react"; +import { createThirdwebClient } from "thirdweb"; + +const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", // Get one from thirdweb.com/dashboard +}); + +function App() { + return ( + + {/* Your app content */} + + ); +} + +``` + +### 3. Custom Wallet Configuration + +If you need to support specific wallets: + +```jsx +import { + ThirdwebProvider, + ConnectButton +} from "thirdweb/react"; +import { createWallet } from "thirdweb/wallets"; +import { createThirdwebClient } from "thirdweb"; + +const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", // Get one from thirdweb.com/dashboard +}); + +const wallets = [ + createWallet("io.metamask"), // Add your wallet in wallet list + // add other wallets... +]; + +function App() { + return ( + + + + ); +} + +``` + +### 4. Update Wallet Connection Logic + +Replace the wallet connection logic: + +### Before (with Blocknative): + +```jsx +const connectWallet = async () => { + const wallets = await onboard.connectWallet(); + if (wallets[0]) { + const provider = wallets[0].provider; + // Use the provider + } +}; + +``` + +### After (with thirdweb): + +```jsx +import { useActiveWallet, useDisconnect, useConnect } from "thirdweb/react"; + +function WalletConnect() { + const wallet = useActiveWallet(); + const { connect } = useConnect(); + const { disconnect } = useDisconnect(); + + if (wallet) { + return ( +
+

Connected: {wallet.address}

+ +
+ ); + } + + return ; +} + +``` + +### 5. Multi-chain Support + +Configure multi-chain support with thirdweb: + +```jsx +import { ThirdwebProvider } from "thirdweb/react"; +import { createThirdwebClient } from "thirdweb"; +import { ethereum, polygon, optimism, arbitrum } from "thirdweb/chains"; + +const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", +}); + +function App() { + return ( + + + + ); +} + +``` + +### Common Issues + +- **Wallet not connecting**: Ensure you've properly configured the ThirdwebProvider +- **Missing wallets**: Check that you've added all wallet types to [supported wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets) +- **Chain not available**: Verify that the chain is properly configured and [supported by thridweb](https://thirdweb.com/chainlist) + +### Support Resources + +- [thirdweb Documentation](https://portal.thirdweb.com/connect) + +## Next Steps + +After successfully migrating, consider exploring additional thirdweb features: + +- Smart wallets and account abstraction +- In-app wallets for easier onboarding +- Gas-less transactions +- Advanced wallet management + +## Conclusion + +By following this guide, you've successfully migrated from Blocknative to thirdweb while maintaining the same wallet support. Your users will experience no disruption in service, and you can now take advantage of thirdweb's comprehensive web3 development platform. \ No newline at end of file diff --git a/apps/portal/src/app/connect/wallet/web3-onboard/page.mdx b/apps/portal/src/app/connect/wallet/web3-onboard/overview/page.mdx similarity index 100% rename from apps/portal/src/app/connect/wallet/web3-onboard/page.mdx rename to apps/portal/src/app/connect/wallet/web3-onboard/overview/page.mdx From 6272112e9e5af44e57910c64a10fe480b5ff62d1 Mon Sep 17 00:00:00 2001 From: Joe-thirdweb Date: Wed, 7 May 2025 23:22:37 -0500 Subject: [PATCH 2/6] adding sidebar routing. --- apps/portal/src/app/connect/sidebar.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/apps/portal/src/app/connect/sidebar.tsx b/apps/portal/src/app/connect/sidebar.tsx index 5f9ceb0f214..3f178d885c0 100644 --- a/apps/portal/src/app/connect/sidebar.tsx +++ b/apps/portal/src/app/connect/sidebar.tsx @@ -207,7 +207,16 @@ export const sidebar: SideBar = { }, { name: "Web3 Onboard", - href: `${walletSlug}/web3-onboard`, + links: [ + { + name: "Overview", + href: `${walletSlug}/web3-onboard/overview`, + }, + { + name: "Migration Guide", + href: `${walletSlug}//web3-onboard/migration-guide`, + }, + ], }, { name: "Migrate to thirdweb", From cf0bf4e1909072c04ee4687ac7fe283cbba023c2 Mon Sep 17 00:00:00 2001 From: Joe-thirdweb Date: Wed, 7 May 2025 23:23:26 -0500 Subject: [PATCH 3/6] fixing Migration Guide routing --- apps/portal/src/app/connect/sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/portal/src/app/connect/sidebar.tsx b/apps/portal/src/app/connect/sidebar.tsx index 3f178d885c0..68d47fc5778 100644 --- a/apps/portal/src/app/connect/sidebar.tsx +++ b/apps/portal/src/app/connect/sidebar.tsx @@ -214,7 +214,7 @@ export const sidebar: SideBar = { }, { name: "Migration Guide", - href: `${walletSlug}//web3-onboard/migration-guide`, + href: `${walletSlug}/web3-onboard/migration-guide`, }, ], }, From 467817adb66cb129ff6cb2dbe2a8e7a59a3998e4 Mon Sep 17 00:00:00 2001 From: samina <57885104+saminacodes@users.noreply.github.com> Date: Thu, 8 May 2025 08:30:34 -0600 Subject: [PATCH 4/6] Update apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Signed-off-by: samina <57885104+saminacodes@users.noreply.github.com> --- .../app/connect/wallet/web3-onboard/migration-guide/page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx b/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx index fada8bc3aea..2a66becb3b9 100644 --- a/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx +++ b/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx @@ -199,7 +199,7 @@ function App() { - **Wallet not connecting**: Ensure you've properly configured the ThirdwebProvider - **Missing wallets**: Check that you've added all wallet types to [supported wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets) -- **Chain not available**: Verify that the chain is properly configured and [supported by thridweb](https://thirdweb.com/chainlist) +- **Chain not available**: Verify that the chain is properly configured and [supported by thirdweb](https://thirdweb.com/chainlist) ### Support Resources From 75275a4a347e8c3933fff35b032268c0c2701647 Mon Sep 17 00:00:00 2001 From: Joe-thirdweb Date: Thu, 8 May 2025 14:49:30 -0500 Subject: [PATCH 5/6] Adding Step, removing conclusion, turning into links. --- .../web3-onboard/migration-guide/page.mdx | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx b/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx index fada8bc3aea..541198aecff 100644 --- a/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx +++ b/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx @@ -1,4 +1,6 @@ -# Migration Guide: Blocknative to thirdweb (2025) +import { InstallTabs, Steps, Step, Callout } from "@doc"; + +# Migration Guide: Blocknative to thirdweb ## Introduction @@ -14,11 +16,10 @@ Learn how to migrate from Blocknative's Web3Onboard to thirdweb while maintainin ## Prerequisites - An existing project using Blocknative/Web3Onboard -- Basic familiarity with web3 development ## Migration Steps - -### 1. Update Dependencies + + First, remove the Blocknative packages and install the thirdweb packages: @@ -30,9 +31,9 @@ npm uninstall bnc-onboard @web3-onboard/core @web3-onboard/injected-wallets npm install thirdweb ``` + -### 2. Update Configuration (React) - + Replace your Blocknative configuration with thirdweb's: ### Before (with Blocknative): @@ -82,8 +83,9 @@ function App() { } ``` + -### 3. Custom Wallet Configuration + If you need to support specific wallets: @@ -115,8 +117,9 @@ function App() { } ``` + -### 4. Update Wallet Connection Logic + Replace the wallet connection logic: @@ -171,8 +174,9 @@ function WalletConnect() { } ``` + -### 5. Multi-chain Support + Configure multi-chain support with thirdweb: @@ -194,6 +198,9 @@ function App() { } ``` + + + ### Common Issues @@ -209,11 +216,6 @@ function App() { After successfully migrating, consider exploring additional thirdweb features: -- Smart wallets and account abstraction -- In-app wallets for easier onboarding -- Gas-less transactions -- Advanced wallet management - -## Conclusion - -By following this guide, you've successfully migrated from Blocknative to thirdweb while maintaining the same wallet support. Your users will experience no disruption in service, and you can now take advantage of thirdweb's comprehensive web3 development platform. \ No newline at end of file +- [Smart wallets and account abstraction](https://portal.thirdweb.com/connect/account-abstraction/overview) +- [In-app wallets for easier onboarding](https://portal.thirdweb.com/connect/wallet/sign-in-methods/configure) +- [Gas-less transactions](https://portal.thirdweb.com/react/v5/account-abstraction/get-started) \ No newline at end of file From 855c0aeaff719aee68f4ae0a1f7ccafbb498132f Mon Sep 17 00:00:00 2001 From: Joe-thirdweb Date: Thu, 8 May 2025 14:49:49 -0500 Subject: [PATCH 6/6] Updated with Samina notes. --- .../app/connect/wallet/web3-onboard/migration-guide/page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx b/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx index 541198aecff..7e5f3d908b0 100644 --- a/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx +++ b/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx @@ -1,4 +1,4 @@ -import { InstallTabs, Steps, Step, Callout } from "@doc"; +import {Steps, Step} from "@doc"; # Migration Guide: Blocknative to thirdweb