diff --git a/apps/portal/src/app/connect/sidebar.tsx b/apps/portal/src/app/connect/sidebar.tsx index 5f9ceb0f214..68d47fc5778 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", 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..61abf14f953 --- /dev/null +++ b/apps/portal/src/app/connect/wallet/web3-onboard/migration-guide/page.mdx @@ -0,0 +1,221 @@ +import {Steps, Step} from "@doc"; + +# Migration Guide: Blocknative to thirdweb + +## 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 + +## Migration Steps + + + +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 + +``` + + + +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 */} + + ); +} + +``` + + + + +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 ( + + + + ); +} + +``` + + + + +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 ; +} + +``` +
+ + + +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 thirdweb](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](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 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