From 402003e3548c57d26c5be93b0ffe354430169151 Mon Sep 17 00:00:00 2001 From: Jadonamite Date: Fri, 12 Dec 2025 22:10:27 +0100 Subject: [PATCH 1/2] Revise Thirdweb integration documentation Updated the description and content for integrating the Thirdweb SDK v5 into Celo dApps, including prerequisites and environment variable setup. --- docs/integrations/wallets/thirdweb.mdx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/docs/integrations/wallets/thirdweb.mdx b/docs/integrations/wallets/thirdweb.mdx index 1390d4b9..4c71e373 100644 --- a/docs/integrations/wallets/thirdweb.mdx +++ b/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. - - You can get your free Client ID from the [Thirdweb - Dashboard](https://thirdweb.com/dashboard/settings/api-keys). - From 818511a425f9d45977eec26a55420235bdb6fe03 Mon Sep 17 00:00:00 2001 From: Jadonamite Date: Fri, 12 Dec 2025 22:33:26 +0100 Subject: [PATCH 2/2] Create thirdweb_explicit_guide.mdx I tried doing this recently and for anyone out there here is a more explicit version. This version updates the content to use the Thirdweb SDK v5 (the latest standard), adds concrete code examples, specifically configures the Celo network, and introduces advanced features like Smart Wallets (Account Abstraction) which are highly relevant for Celo developers. --- .../wallets/thirdweb_explicit_guide.mdx | 109 ++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 docs/integrations/wallets/thirdweb_explicit_guide.mdx diff --git a/docs/integrations/wallets/thirdweb_explicit_guide.mdx b/docs/integrations/wallets/thirdweb_explicit_guide.mdx new file mode 100644 index 00000000..9e587840 --- /dev/null +++ b/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 ( +
+ +
+ ); +} +``` + +### 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"), +]; + +; +``` + +## 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 + +``` + +\ +To use **sponsorGas**, you must enable "Account Abstraction" for the Celo chain in your [Thirdweb Dashboard](https://thirdweb.com/dashboard). +\ + +```