[Portal] Block native to thridweb guide (#6977)

Signed-off-by: samina <57885104+saminacodes@users.noreply.github.com>
Co-authored-by: samina <57885104+saminacodes@users.noreply.github.com>
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

Author: 3 people

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",

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
+<Steps>
+<Step title="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
+
+```
+</Step>
+
+<Step title = "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 `<ThirdwebProvider/>` 
+
+```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 (
+    <ThirdwebProvider >
+      {/* Your app content */}
+    </ThirdwebProvider>
+  );
+}
+
+```
+</Step>
+
+<Step title ="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 (
+    <ThirdwebProvider>
+      <ConnectButton 
+      client={client}
+      wallets={wallets}/>
+    </ThirdwebProvider>
+  );
+}
+
+```
+</Step>
+
+<Step title ="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 (
+      <div>
+        <p>Connected: {wallet.address}</p>
+        <button onClick={() => disconnect()}>Disconnect</button>
+      </div>
+    );
+  }
+
+  return <button
+      onClick={() =>
+        connect(async () => {
+          // instantiate wallet
+          const wallet = createWallet("io.metamask");
+          // connect wallet
+          await wallet.connect({
+            client,
+          });
+          // return the wallet
+          return wallet;
+        })
+      }
+    >
+      Connect
+    </button>;
+}
+
+```
+</Step>
+
+<Step title = "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 (
+    <ThirdwebProvider>
+      <ConnectButton client={client} chains={[ethereum, polygon, optimism, arbitrum]}/>
+    </ThirdwebProvider>
+  );
+}
+
+```
+</Step>
+
+</Steps>
+
+### 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)