Thirdweb SDK v5 integration guide (the latest standard)

docs/integrations/wallets/thirdweb.mdx

@@ -1,20 +1,22 @@
 ---
 title: Thirdweb
-description: "Integrate the Thirdweb wallet SDK into your Celo dApp."
+description: "Integrate the Thirdweb SDK v5 into your Celo dApp for seamless wallet connection and smart account features."
 icon: "hotel"
 ---
 
-Thirdweb is a complete Web3 development framework that includes a powerful wallet SDK. It supports both external wallets (like MetaMask) and in-app wallets, which allow users to sign up with just an email or social account.
+[Thirdweb](https://thirdweb.com/) is a full-stack Web3 development framework. Their latest **SDK v5** is lightweight, performant, and supports over 300+ wallets out of the box, including in-app wallets (social/email login) and Account Abstraction.
 
-When you select Thirdweb, Celo Composer automatically installs the necessary dependencies, adds the provider components, and includes a ready-to-use `ConnectButton` in your UI.
+## Prerequisites
 
-## Environment Variables
+To use the Thirdweb SDK, you need a **Client ID**.
 
-To use the Thirdweb SDK, you'll need a Client ID from the Thirdweb Dashboard.
+1. Go to the [Thirdweb Dashboard](https://thirdweb.com/dashboard/settings/api-keys).
+2. Create a new API Key.
+3. Allow the domains where your app will be deployed (e.g., `localhost:3000`, `myapp.com`).
+
+Add your Client ID to your environment variables:
+
+```bash
+NEXT_PUBLIC_THIRDWEB_CLIENT_ID=your_client_id_here
 
-- **`NEXT_PUBLIC_THIRDWEB_CLIENT_ID`**: Your project-specific client ID.
 
-<Info>
-  You can get your free Client ID from the [Thirdweb
-  Dashboard](https://thirdweb.com/dashboard/settings/api-keys).
-</Info>

docs/integrations/wallets/thirdweb_explicit_guide.mdx

@@ -0,0 +1,109 @@
+
+---
+ "Integrate the Thirdweb SDK v5 into your Celo dApp for seamless wallet connection and smart account features."
+icon: "hotel"
+---
+
+[Thirdweb](https://thirdweb.com/) is a full-stack Web3 development framework. Their latest **SDK v5** is lightweight, performant, and supports over 300+ wallets out of the box, including in-app wallets (social/email login) and Account Abstraction.
+
+## Prerequisites
+
+To use the Thirdweb SDK, you need a **Client ID**.
+
+1. Go to the [Thirdweb Dashboard](https://thirdweb.com/dashboard/settings/api-keys).
+2. Create a new API Key.
+3. Allow the domains where your app will be deployed (e.g., `localhost:3000`, `myapp.com`).
+
+Add your Client ID to your environment variables:
+
+```bash
+NEXT_PUBLIC_THIRDWEB_CLIENT_ID=your_client_id_here
+````
+
+## 1\. Installation
+
+Install the latest Thirdweb SDK and React dependencies.
+
+```bash
+npm install thirdweb
+```
+
+## 2\. Configuration
+
+In Thirdweb v5, you create a lightweight client instance once and reuse it throughout your app.
+
+Create a file named `client.ts` in your project (e.g., `src/client.ts`):
+
+```typescript
+import { createThirdwebClient } from "thirdweb";
+
+export const client = createThirdwebClient({
+  clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID,
+});
+```
+
+## 3\. Add the Connect Button
+
+The `ConnectButton` is a pre-built UI component that handles connection management, wallet switching, and social logins.
+
+In your main component (e.g., `Navbar.tsx` or `App.tsx`), import the `client` and the **Celo** chain definition.
+
+```tsx
+import { ConnectButton } from "thirdweb/react";
+import { celo } from "thirdweb/chains";
+import { client } from "./client"; // Import the client you created
+
+export default function WalletConnect() {
+  return (
+    <div className="flex justify-center">
+        <ConnectButton
+          client={client}
+          chain={celo} 
+          connectModal={{
+            size: "compact",
+            title: "Connect to Celo",
+          }}
+        />
+    </div>
+  );
+}
+```
+
+### Supported Wallets
+
+By default, the button supports 300+ wallets. You can restrict this to specific wallets (like MetaMask or Rainbow) if you prefer:
+
+```tsx
+import { createWallet, inAppWallet } from "thirdweb/wallets";
+
+const wallets = [
+  inAppWallet(), // Email/Social Login
+  createWallet("io.metamask"),
+  createWallet("com.coinbase.wallet"),
+];
+
+<ConnectButton client={client} wallets={wallets} chain={celo} />;
+```
+
+## 4\. Enable Smart Wallets (Account Abstraction)
+
+Celo's low gas fees make it perfect for **Smart Wallets**. This allows you to sponsor gas fees for your users, creating a completely gasless experience.
+
+Simply add the `accountAbstraction` prop to your `ConnectButton`:
+
+```tsx
+<ConnectButton
+  client={client}
+  chain={celo}
+  accountAbstraction={{
+    chain: celo,
+    sponsorGas: true, // Enables gasless transactions for users
+  }}
+/>
+```
+
+\<Info\>
+To use **sponsorGas**, you must enable "Account Abstraction" for the Celo chain in your [Thirdweb Dashboard](https://thirdweb.com/dashboard).
+\</Info\>
+
+```