diff --git a/apps/portal/knip.json b/apps/portal/knip.json
index 6d8eb39d614..245cc750138 100644
--- a/apps/portal/knip.json
+++ b/apps/portal/knip.json
@@ -20,7 +20,7 @@
"src/pages/**/*.{js,jsx,ts,tsx}",
"scripts/*.ts"
],
- "ignore": ["src/components/ui/**"],
+ "ignore": ["src/components/ui/**", "src/icons/**"],
"ignoreBinaries": ["only-allow"],
"ignoreDependencies": [
"@thirdweb-dev/chains",
diff --git a/apps/portal/src/app/connect/sidebar.tsx b/apps/portal/src/app/connect/sidebar.tsx
index 085bcc12ec8..f5411ef7ab2 100644
--- a/apps/portal/src/app/connect/sidebar.tsx
+++ b/apps/portal/src/app/connect/sidebar.tsx
@@ -228,7 +228,7 @@ export const sidebar: SideBar = {
name: "FAQ",
},
],
- name: "Onboard Users",
+ name: "User Wallets",
},
{ separator: true },
// User identity
diff --git a/apps/portal/src/app/connect/wallet/get-started/page.mdx b/apps/portal/src/app/connect/wallet/get-started/page.mdx
index 28a801caf4d..d2ce951a6f6 100644
--- a/apps/portal/src/app/connect/wallet/get-started/page.mdx
+++ b/apps/portal/src/app/connect/wallet/get-started/page.mdx
@@ -1,11 +1,23 @@
-import { Callout, OpenSourceCard, createMetadata, InstallTabs, SDKCard, Grid, ArticleIconCard, Tabs, TabsList, TabsTrigger, TabsContent } from "@doc";
import {
- ReactIcon,
- TypeScriptIcon,
- UnityIcon,
- DotNetIcon,
- UnrealEngineIcon
-} from "@/icons"
+ Callout,
+ OpenSourceCard,
+ createMetadata,
+ InstallTabs,
+ SDKCard,
+ Grid,
+ ArticleIconCard,
+ Tabs,
+ TabsList,
+ TabsTrigger,
+ TabsContent,
+} from "@doc";
+import {
+ ReactIcon,
+ TypeScriptIcon,
+ UnityIcon,
+ DotNetIcon,
+ UnrealEngineIcon,
+} from "@/icons";
import { ExternalLink } from "lucide-react";
export const metadata = createMetadata({
@@ -19,34 +31,15 @@ export const metadata = createMetadata({
# Get Started with wallets
-There are 4 types of wallets you can integrate into your app with thirdweb:
-
-- **External Wallets** - Connect to existing web3 wallets like MetaMask, Coinbase Wallet, etc.
-- **In-App Wallets** - Create embedded, branded and customizable wallets for your app, or game.
-- [**Ecosystem Wallets**](/connect/wallet/ecosystem/set-up) - Create a branded and customizable wallet offering users a unified identity across your entire ecosystem of apps or games.
-- [**Smart Wallets (Account Abstraction)**](/connect/account-abstraction/get-started) - leverage account abstraction to unlock complex functionality such as gasless & signless transactions.
-
-These methods can be used independently or together in the same application to provide the best experience for your users.
-
-## Get your Client ID
-
-To use wallet features in your applications, you will need a client ID. Generate one for free at [your thirdweb dashboard](https://thirdweb.com/create-api-key).
-
-
- Keep your client ID safe. You can generate different client IDs for development and production environments.
-
-
-Your client ID authenticates your application with thirdweb's services and provides access to infrastructure like RPC endpoints, IPFS gateways, and wallet services.
-
## Live Playground
Before diving into the implementation, check out our playground to see all the various capabilities of Wallets:
## Choose Your Framework/Language
@@ -66,13 +59,12 @@ Before diving into the implementation, check out our playground to see all the v
Install the thirdweb SDK in your TypeScript project:
- ```bash
- npm install thirdweb
- # or
- yarn add thirdweb
- # or
- pnpm add thirdweb
- ```
+
### Set up the Client
@@ -81,103 +73,32 @@ Before diving into the implementation, check out our playground to see all the v
```typescript
import { createThirdwebClient } from "thirdweb";
- // For client-side applications:
+ // - clientId for client-side applications
+ // - secretKey for server-side applications
const client = createThirdwebClient({
clientId: "YOUR_CLIENT_ID", // Get from your thirdweb dashboard
});
-
- // For server-side scripts (Never expose secret keys in client code):
- // const client = createThirdwebClient({
- // secretKey: process.env.THIRDWEB_SECRET_KEY,
- // });
```
- ### Connect External Wallets
-
- Enable users to connect their existing wallets:
-
- ```typescript
- import { createThirdwebClient, walletConnect } from "thirdweb";
-
- // Create the client (do this once and reuse it)
- const client = createThirdwebClient({
- clientId: "YOUR_CLIENT_ID",
- });
-
- // Connect WalletConnect
- const wallet = walletConnect({
- projectId: "YOUR_WALLETCONNECT_PROJECT_ID", // Get from WalletConnect dashboard
- });
-
- // Connect the wallet
- const walletInstance = await wallet.connect();
- const address = await walletInstance.getAddress();
- console.log("Connected to:", address);
-
- // Read wallet balance
- import { getWalletBalance, ethereum } from "thirdweb";
-
- const balance = await getWalletBalance({
- client,
- chain: ethereum,
- address: walletInstance.getAddress(),
- });
- console.log(`Balance: ${balance.displayValue} ${balance.symbol}`);
- ```
-
- ### Setup In-App Wallet
+ ### Create a wallet for your users
Create wallets with email or social login:
```typescript
- import { createThirdwebClient, embeddedWallet } from "thirdweb";
+ import { inAppWallet } from "thirdweb/wallets";
- // Create the client (do this once and reuse it)
- const client = createThirdwebClient({
- clientId: "YOUR_CLIENT_ID",
- });
-
- // Initialize embedded wallet
- const wallet = embeddedWallet({
- client,
- });
-
- // Connect with email
- const emailWallet = await wallet.connect({
- strategy: "email",
- email: "user@example.com",
- });
+ // Initialize a wallet
+ const wallet = inAppWallet();
// Connect with social login
- const googleWallet = await wallet.connect({
- strategy: "google",
- });
- ```
-
- ### Setup Ecosystem Wallet
-
- Create a single unified identity for your users with our branded, customizable wallets built for supporting multiple apps and games within an entire ecosystem.
-
- ```typescript
- import { createThirdwebClient, ecosystemWallet } from "thirdweb";
-
- // Create the client (do this once and reuse it)
- const client = createThirdwebClient({
- clientId: "YOUR_CLIENT_ID",
- });
-
- // Initialize ecosystem wallet
- const wallet = ecosystemWallet({
- client,
- ecosystemId: "YOUR_ECOSYSTEM_ID", // Get from your ecosystem dashboard
+ const account = await wallet.connect({
+ client, // your thirdweb client
+ strategy: "google", // or any other auth strategy
});
- // Connect with email
- const emailWallet = await wallet.connect({
- strategy: "email",
- email: "user@example.com",
- });
+ console.log("connected to", account.address);
```
+
@@ -185,13 +106,13 @@ Before diving into the implementation, check out our playground to see all the v
Install the thirdweb SDK in your React project:
- ```bash
- npm install thirdweb
- # or
- yarn add thirdweb
- # or
- pnpm add thirdweb
- ```
+
+
### Create a Client
@@ -200,12 +121,12 @@ Before diving into the implementation, check out our playground to see all the v
```typescript
// thirdwebClient.ts
import { createThirdwebClient } from "thirdweb";
-
+
export const client = createThirdwebClient({
- clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID,
+ clientId: "YOUR_CLIENT_ID", // Get from your thirdweb dashboard
});
```
-
+
### Setup the Provider
Wrap your application with the ThirdwebProvider:
@@ -213,7 +134,6 @@ Before diving into the implementation, check out our playground to see all the v
```tsx
// app.tsx / _app.tsx
import { ThirdwebProvider } from "thirdweb/react";
- import { client } from "./thirdwebClient";
function App() {
return (
@@ -224,110 +144,65 @@ Before diving into the implementation, check out our playground to see all the v
}
```
- ### Wallet Button Component
+ ### Connect Button Component
Use the pre-built ConnectButton for a complete wallet connection UI:
```tsx
- import { ConnectButton } from "thirdweb/react";
- import { client } from "./thirdwebClient";
+ import { ConnectButton, useActiveAccount } from "thirdweb/react";
function YourApp() {
+ const account = useActiveAccount();
+ console.log("connected to", account?.address);
+
return (
-
My dApp
);
}
```
- The ConnectButton automatically handles 500+ wallets, including MetaMask, WalletConnect, Coinbase Wallet, and all supported in-app wallets.
+ The ConnectButton automatically handles creating wallets for your users, as well as connecting to 500+ external wallets, including MetaMask, WalletConnect, Coinbase Wallet, and more.
### Connection Hooks
For more customized implementations, use the connection hooks:
```tsx
- import { useConnect, useDisconnect, useActiveAccount, useWalletBalance } from "thirdweb/react";
- import { client } from "./thirdwebClient";
- import { ethereum } from "thirdweb/chains";
+ import { useConnect, useActiveAccount } from "thirdweb/react";
+ import { inAppWallet } from "thirdweb/wallets";
+
+ // initialize a wallet
+ const wallet = inAppWallet();
function CustomWalletUI() {
const { connect } = useConnect();
- const { disconnect } = useDisconnect();
- const activeAccount = useActiveAccount();
-
- // Get wallet balance (only when connected)
- const { data: balance, isLoading } = useWalletBalance({
- client,
- chain: ethereum,
- address: activeAccount?.address,
- });
+ const account = useActiveAccount();
+ console.log("connected to", account?.address);
+
+ const onClick = () => {
+ connect(async () => {
+ await wallet.connect({
+ client, // your thirdweb client
+ strategy: "google", // or any other auth strategy
+ });
+ return wallet;
+ });
+ };
return (
- setEmail(e.target.value)}
- placeholder="Enter your email"
- />
-
-
- );
- }
- ```
@@ -335,33 +210,32 @@ Before diving into the implementation, check out our playground to see all the v
Install the thirdweb SDK in your React Native project:
- ```bash
- npm install thirdweb
- # or
- yarn add thirdweb
- # or
- pnpm add thirdweb
- ```
+
+
-
+
You cannot use Expo Go with thirdweb because native modules are required.
Use an Expo development build (`npx expo prebuild`) or React Native CLI app.
### Create a Client
- Create a client file for reuse throughout your app:
+ Create a client once and reuse it throughout your app:
```typescript
- // thirdwebClient.ts
import { createThirdwebClient } from "thirdweb";
-
+
export const client = createThirdwebClient({
- clientId: "YOUR_CLIENT_ID", // Configure in your app's env or constants
+ clientId: "YOUR_CLIENT_ID", // Get from your thirdweb dashboard
});
```
-
+
When creating your client ID on the thirdweb dashboard, allowlist your mobile app's bundle ID (e.g., com.yourcompany.app) for security.
@@ -371,7 +245,6 @@ Before diving into the implementation, check out our playground to see all the v
```tsx
import { ThirdwebProvider } from "thirdweb/react";
- import { client } from "./thirdwebClient";
function App() {
return (
@@ -387,60 +260,60 @@ Before diving into the implementation, check out our playground to see all the v
Use the pre-built ConnectButton for a complete wallet connection UI:
```tsx
- import { ConnectButton } from "thirdweb/react";
- import { client } from "./thirdwebClient";
- import { View, Text } from "react-native";
+ import { ConnectButton, useActiveAccount } from "thirdweb/react";
function YourApp() {
+ const account = useActiveAccount();
+ console.log("connected to", account?.address);
+
return (
- My Mobile dApp
);
}
```
- ### Using In-App Wallets
+ The ConnectButton automatically handles creating wallets for your users, as well as connecting to 500+ external wallets, including MetaMask, WalletConnect, Coinbase Wallet, and more.
- Enable email or social login for mobile:
+ ### Connection Hooks
+
+ For more customized implementations, use the connection hooks:
```tsx
- import { useEmbeddedWallet } from "thirdweb/react";
- import { useState } from "react";
- import { View, TextInput, Button, Alert } from "react-native";
- import { client } from "./thirdwebClient";
-
- function EmailLoginButton() {
- const embeddedWallet = useEmbeddedWallet({
- client,
- });
- const [email, setEmail] = useState("");
-
- const handleLogin = async () => {
- try {
- await embeddedWallet.connect({
- strategy: "email",
- email,
+ import { useConnect, useActiveAccount } from "thirdweb/react";
+ import { inAppWallet } from "thirdweb/wallets";
+
+ // initialize a wallet
+ const wallet = inAppWallet();
+
+ function CustomWalletUI() {
+ const { connect } = useConnect();
+ const account = useActiveAccount();
+ console.log("connected to", account?.address);
+
+ const onClick = () => {
+ connect(async () => {
+ await wallet.connect({
+ client, // your thirdweb client
+ strategy: "google", // or any other auth strategy
});
- } catch (error) {
- Alert.alert("Login Failed", error.message);
- }
+ return wallet;
+ });
};
return (
-
-
+
);
}
```
+
@@ -453,7 +326,7 @@ Before diving into the implementation, check out our playground to see all the v
After importing the SDK:
- 1. Go to Project Settings > Thirdweb
+ 1. Go to Project Settings > Thirdweb
2. Enter your Client ID from the thirdweb dashboard
3. Allowlist your game's Bundle ID on the thirdweb dashboard for security
@@ -487,7 +360,7 @@ Before diving into the implementation, check out our playground to see all the v
provider = WalletProvider.CoinbaseWallet,
chainId = 1 // Ethereum Mainnet
});
-
+
walletAddressText.text = "Connected: " + address;
}
catch (System.Exception e) {
@@ -519,9 +392,9 @@ Before diving into the implementation, check out our playground to see all the v
email = email,
chainId = 1 // Ethereum Mainnet
});
-
+
walletAddressText.text = "Connected: " + address;
-
+
// Read wallet balance
var balance = await sdk.wallet.GetBalance();
Debug.Log($"Balance: {balance.DisplayValue} {balance.Symbol}");
@@ -531,6 +404,7 @@ Before diving into the implementation, check out our playground to see all the v
}
}
```
+
@@ -570,11 +444,11 @@ Before diving into the implementation, check out our playground to see all the v
// For server-side applications or wallet management
var privateKey = Environment.GetEnvironmentVariable("WALLET_PRIVATE_KEY"); // Never hardcode
var wallet = new PrivateKeyWallet(privateKey);
-
+
await sdk.SetWallet(wallet);
var address = await sdk.Wallet.GetAddress();
Console.WriteLine($"Connected wallet address: {address}");
-
+
// Read wallet balance
var balance = await sdk.Wallet.GetBalance();
Console.WriteLine($"Balance: {balance.DisplayValue} {balance.Symbol}");
@@ -591,10 +465,10 @@ Before diving into the implementation, check out our playground to see all the v
Email = "user@example.com",
AuthProvider = AuthProvider.Email
};
-
+
var wallet = new EmbeddedWallet(walletOptions);
await sdk.SetWallet(wallet);
-
+
// Authenticate and get the wallet address
await wallet.Authenticate();
var address = await sdk.Wallet.GetAddress();
@@ -608,8 +482,8 @@ Before diving into the implementation, check out our playground to see all the v
```csharp
// Get a contract instance
var contract = await ThirdwebContract.Create(
- client: sdk.Client,
- address: "0x...",
+ client: sdk.Client,
+ address: "0x...",
chain: Chain.Ethereum
);
@@ -617,6 +491,7 @@ Before diving into the implementation, check out our playground to see all the v
var name = await contract.Read("name");
Console.WriteLine($"Contract name: {name}");
```
+
@@ -645,7 +520,7 @@ Before diving into the implementation, check out our playground to see all the v
{
// Get the Thirdweb subsystem
UThirdwebSubsystem* ThirdwebSubsystem = GEngine->GetEngineSubsystem();
-
+
// Initialize with your client ID (configured in project settings)
ThirdwebSubsystem->Initialize("ethereum");
}
@@ -653,13 +528,13 @@ Before diving into the implementation, check out our playground to see all the v
void AMyGameController::ConnectWallet()
{
UThirdwebSubsystem* ThirdwebSubsystem = GEngine->GetEngineSubsystem();
-
+
// Configure wallet connection
FWalletConnection WalletOptions;
WalletOptions.Provider = EWalletProvider::EmbeddedWallet;
WalletOptions.Email = "user@example.com";
WalletOptions.ChainId = 1; // Ethereum Mainnet
-
+
// Connect wallet asynchronously
ThirdwebSubsystem->ConnectWallet(WalletOptions, FOnWalletConnected::CreateUObject(this, &AMyGameController::OnWalletConnected));
}
@@ -669,7 +544,7 @@ Before diving into the implementation, check out our playground to see all the v
if (Error.IsEmpty())
{
UE_LOG(LogTemp, Display, TEXT("Wallet connected: %s"), *Address);
-
+
// Get balance
UThirdwebSubsystem* ThirdwebSubsystem = GEngine->GetEngineSubsystem();
ThirdwebSubsystem->GetWalletBalance(FOnWalletBalanceReceived::CreateUObject(this, &AMyGameController::OnBalanceReceived));
@@ -694,17 +569,19 @@ Before diving into the implementation, check out our playground to see all the v
2. Add a component for user interface (like widget blueprint)
3. Use the Thirdweb nodes found in the node palette
4. Connect nodes for wallet login, balance checking, etc.
+
-## Next Steps
+## Going further
-After setting up wallet functionality, explore these advanced topics:
+To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides:
-- [Enable Account Abstraction](/connect/account-abstraction/overview)
+- [Auth strategies](/connect/wallet/sign-in-methods/configure)
+- [Sponsor Gas](/connect/account-abstraction/overview)
- [Implement Sign In with Ethereum](/connect/auth)
-- [Configure Gas Sponsorship](/connect/account-abstraction/sponsorship-rules)
-- [Explore Payment Options](/connect/pay/overview)
+- [External Wallets](/connect/wallet/sign-in-methods/external-wallets)
+- [Onramp and Payments](/connect/pay/overview)
## Explore Full SDK Documentation
@@ -716,30 +593,17 @@ For comprehensive guides on implementing the full thirdweb SDK, explore our lang
href="/typescript/v5/getting-started"
icon={TypeScriptIcon}
/>
-
+
-
-
+
+
-
diff --git a/apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx b/apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx
index beb2f56e238..ca0c0fd786d 100644
--- a/apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx
+++ b/apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx
@@ -15,19 +15,9 @@ import { getSocialIcon } from "thirdweb/wallets/in-app";
# Sign-In Methods
-thirdweb supports a bunch of various traditional authentication methods.
+thirdweb supports various authentication methods: social logins, email and SMS, passkeys, and more. For every user, thirdweb generates a non-custodial [wallet](/connect/wallet/security) behind the scenes.
-From social logins via the [OAuth 2.0 Protocol](https://oauth.net/2/), to email and SMS, to passkeys.
-
-For all login methods, thirdweb generates a non-custodial [wallet](/connect/wallet/security) behind the scenes. Thirdweb wallets enable your users to interact with your application, as well as store tokens and assets they receive while interacting with your application.
-
-## Supported Methods
-
-
-
-## Enable Sign-In options
-
-### In-App Wallets
+## Platform specific guides
To enable a given sign-in method for the thirdweb wallet, refer to the following guides:
@@ -65,67 +55,15 @@ To enable a given sign-in method for the thirdweb wallet, refer to the following
/>
-### Ecosystem Wallets
-
-
-In order to configure sign-in options for all apps within your ecosystem, first configure the allowed sign-in methods on [your dashboard](https://thirdweb.com/team/~/~/ecosystem).
-
-
-
-
-Once configured, refer to the following guides to use the various login options within your ecosystem:
-
-
-
-
- {/* TODO: Add react native specific getting started for ecosystem wallets */}
-
-
-
-
-
-
- Note that while you're allowed to pass any auth strategy today, we recommend only passing the strategies that are enabled on your dashboard. We might enforce this in the future.
-
+## Supported Methods
+
-## Other Sign-In options
+## Bring your own auth system
-Most authentication option are that straight forward. However, some options require additional setup or nuances. See below for more information on these options:
+If you already have an auth system, you can use thirdweb to attach wallets to your existing users:
-
-
-## Interacting with your App
-
-Once a user signed in and their wallet is generated, you can use the **[Wallet Connection functions](/typescript/v5/wallets)** to get information about the connected wallet like getting the address, account, and more.
diff --git a/apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx b/apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx
index 2dc06464877..f373c75cdee 100644
--- a/apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx
+++ b/apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx
@@ -1,147 +1,22 @@
-import { createMetadata, ArticleIconCard, Callout, Grid } from "@doc";
-import {
- WalletsAuthIcon,
- WalletsConnectIcon,
- ReactIcon,
- TypeScriptIcon,
- UnityIcon,
- DotNetIcon,
- ExternalLinkIcon,
- UnrealEngineIcon
-} from "@/icons"
+import { Breadcrumb, createMetadata } from "@doc";
+import { WalletCard, WalletCardGrid } from "@/components/others/WalletCard";
+import SmartWalletIcon from "@public/icons/wallets/smartwallet.svg";
+import EmbeddedWalletIcon from "@public/icons/wallets/embeddedwallet.svg";
+import { AllSupportedWallets } from "@/components/others/AllSupportedWallets";
export const metadata = createMetadata({
image: {
title: "External Wallets",
- icon: "wallets",
+ icon: "typescript",
},
title: "External Wallets | thirdweb",
- description:
- "Learn how to connect and authenticate with external wallets using thirdweb.",
+ description: "List of all the supported external wallets in thirdweb.",
});
+# External Wallets
-# External wallets
+thirdweb natively supports 500+ first-party wallets and all wallets that implement EIP-6963 (Multi-injected Provider Discovery).
-thirdweb natively supports 500+ first-party wallets and all wallets that implement EIP-6963 (Multi-injected Provider Discovery). For the full list, please consult [this list](/typescript/v5/supported-wallets).
+Select a wallet in the list below to see how to connect it with thirdweb.
-You can use an external wallet in many ways. We've outlined these different use cases below:
-
-| USAGE | BEST FOR |
-|----------|---------- |
-| Connect to site | Applications simply needing web3 wallet connectivity |
-| Authenticate into your site | Applications requiring authentication with existing web3 users |
-| Authenticate into a thirdweb wallet (either in-app or ecosystem) | Applications looking to provide a seamless web3 application with minimal disruptions and prompts |
-
-The good news is that thirdweb cover each and every one of this use case!
-
-Read on to find out how it's done:
-
-## Connecting External Wallets
-
-External wallets are perfect for applications that want to integrate with existing web3 users. These users typically already have wallets like MetaMask, Coinbase Wallet, or Rainbow installed and are familiar with web3 concepts.
-
-
- Your backend will not know about the user's wallet.
- This is fine if the user's wallet is used to sign transactions and interact with the blockchain directly.
-
- If you need your backend to be aware of the user's wallet, see [SIWE](#authenticating-with-external-wallets).
-
-
-### Implementation
-
-We have code snippets and guide for various wallet connecting options below:
-
-
-
-## Authenticating with External Wallets
-
-Authentication with external wallets using Sign-In with Ethereum (SIWE) enables your backend to securely verify user wallet ownership. This is essential for applications requiring user-specific data or authenticated actions.
-
-
- Unlike simple wallet connections, SIWE authentication creates a session between your backend and the user's wallet, enabling secure, authenticated API calls.
-
- However, users will still require to sign prompts when interacting with the blockchain via their wallets. If you want an invisible web3 experience, consider using [thirdweb wallets](#authenticating-with-external-wallets-into-thirdweb-wallets).
-
-
-### Implementation
-
-
-
-## Authenticating with External Wallets into thirdweb Wallets
-
-thirdweb wallets provide a seamless web3 experience with minimal prompts and disruptions. This will provide you, the developer with full control of how the user interacts with your application.
-
-Note, however, that the wallet interacting with your application will be a thirdweb wallet, not the user's external wallet. While we provide methods to export keys and see how the external wallet and thirdweb wallet are linked, if your app requires the user's external wallet, you should use [SIWE](#authenticating-with-external-wallets) instead.
-
-#### Authenticate to an In App Wallet with SIWE
-
-
-
-
- {/* TODO: Add react native specific getting started for ecosystem wallets */}
-
-
-
-
-
-#### Authenticate to an Ecosystem Wallet with SIWE
-
-
-
-
- {/* TODO: Add react native specific getting started for ecosystem wallets */}
-
-
-
-
+
\ No newline at end of file
diff --git a/apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx b/apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx
index 5eaada1af59..5f0684c1424 100644
--- a/apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx
+++ b/apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx
@@ -28,10 +28,6 @@ export const metadata = createMetadata({
Create in-app wallet for your users based on their email, phone, passkey, social auth or even their external wallets. These wallets are scoped by your clientId and do not require any confirmation to sign transactions.
-## Available auth methods
-
-
-
## Live Playground
Try out in-app wallets for yourself in the [in-app wallet live playground](https://playground.thirdweb.com/connect/in-app-wallet)
@@ -69,8 +65,8 @@ const wallet = inAppWallet({
passkeyDomain, // for passkey, the domain that the passkey is created on
redirectUrl, // the URL to redirect to after authentication
},
- metadata, // metadata for the wallet (name, icon, etc.)
- smartAccount, // smart account options for the wallet (for gasless tx)
+ metadata, // metadata for the wallet (name, icon, etc.), will show in UI components
+ executionMode, // enable gasless transactions for the wallet
});
```
@@ -82,12 +78,7 @@ Once created, you can use it either with the prebuilt UI components, or with you
The easiest way to use in-app wallets is using the prebuilt connect UI components like [`ConnectButton`](/references/typescript/v5/ConnectButton) and [`ConnectEmbed`](/references/typescript/v5/ConnectEmbed) to authenticate users and connect their wallets.
-By default, the connect UI supports multiple social logins as well as email, phone and passkey authentication. You can customize which authentication methods to support which will be reflected in the UI.
-
-
- By default, email login is displayed before phone number login. To display phone number first, add "phone" before "email" in the providers array
-
-
+By default, the connect UI supports multiple social logins as well as email, phone and passkey authentication. You can customize which authentication methods to support which will be reflected in the UI, as well as the app name, icon and image.
```tsx
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
@@ -95,7 +86,22 @@ import { inAppWallet } from "thirdweb/wallets";
const client = createThirdwebClient({ clientId });
const wallets = [inAppWallet({
- auth: { options: ["email", "passkey", "google"] }
+ // available auth methods
+ auth: { options: ["email", "passkey", "google"] },
+ // app metadata
+ metadata: {
+ name: "My App",
+ image: {
+ src: "https://example.com/banner.png",
+ width: 100,
+ height: 100,
+ },
+ },
+ // enable gasless transactions for the wallet
+ executionMode: {
+ mode: "EIP7702",
+ sponsorGas: true,
+ }
})];
export default function App() {
@@ -123,6 +129,20 @@ import { ThirdwebProvider } from "thirdweb/react";
;
```
+### Configure the wallet
+
+```tsx
+import { inAppWallet } from "thirdweb/wallets";
+
+const wallet = inAppWallet({
+ // enable gasless transactions for the wallet
+ executionMode: {
+ mode: "EIP7702",
+ sponsorGas: true,
+ },
+});
+```
+
### Authenticate via Google
Note that for Apple and Facebook, you just need to update the strategy to "facebook" or "apple".
@@ -130,14 +150,12 @@ Note that for Apple and Facebook, you just need to update the strategy to "faceb
In React and React Native, the `useConnect()` hook handles authentication and connection states.
```tsx
-import { inAppWallet } from "thirdweb/wallets";
import { useConnect } from "thirdweb/react";
const { connect } = useConnect();
const handleLogin = async () => {
await connect(async () => {
- const wallet = inAppWallet();
await wallet.connect({
client,
strategy: "google",
@@ -152,7 +170,8 @@ Other social options include Apple, Facebook, Discord, Farcaster and more.
### Authenticate via Email verification
```typescript
-import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
+import { useConnect } from "thirdweb/react";
+import { preAuthenticate } from "thirdweb/wallets/in-app";
const { connect } = useConnect();
@@ -168,7 +187,6 @@ const preLogin = async (email: string) => {
const handleLogin = async (email: string, verificationCode: string) => {
// verify email and connect
await connect(async () => {
- const wallet = inAppWallet();
await wallet.connect({
client,
strategy: "email",
@@ -183,7 +201,8 @@ const handleLogin = async (email: string, verificationCode: string) => {
### Authenticate via Phone number verification
```typescript
-import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
+import { useConnect } from "thirdweb/react";
+import { preAuthenticate } from "thirdweb/wallets/in-app";
const { connect } = useConnect();
@@ -199,7 +218,6 @@ const preLogin = async (phoneNumber: string) => {
const handleLogin = async (phoneNumber: string, verificationCode: string) => {
// verify phone number and connect
await connect(async () => {
- const wallet = inAppWallet();
await wallet.connect({
client,
strategy: "phone",
@@ -220,17 +238,13 @@ For React Native, `passkeyDomain` is required and must be set to a valid app uni
```typescript
-import { inAppWallet, hasStoredPasskey } from "thirdweb/wallets/in-app";
+import { useConnect } from "thirdweb/react";
+import { hasStoredPasskey } from "thirdweb/wallets/in-app";
const { connect } = useConnect();
const handleLogin = async () => {
await connect(async () => {
- const wallet = inAppWallet({
- auth: {
- passkeyDomain: "example.com", // defaults to current url
- },
- });
const hasPasskey = await hasStoredPasskey(client);
await wallet.connect({
client,
@@ -247,14 +261,13 @@ const handleLogin = async () => {
You can also use wallets as an authentication method, when using this method, both external and in-app wallets are connected, and you can switch between the 2 at any time.
```typescript
-import { inAppWallet } from "thirdweb/wallets/in-app";
+import { useConnect } from "thirdweb/react";
import { sepolia } from "thirdweb/chains";
const { connect } = useConnect();
const handleLogin = async () => {
await connect(async () => {
- const wallet = inAppWallet();
await wallet.connect({
client,
strategy: "wallet",
@@ -271,13 +284,12 @@ const handleLogin = async () => {
You can also create wallets for your users without any input at all. This will create a session that can be later upgraded by linking another identity. Great for progressive onboarding.
```typescript
-import { inAppWallet } from "thirdweb/wallets/in-app";
+import { useConnect } from "thirdweb/react";
const { connect } = useConnect();
const handleLogin = async () => {
await connect(async () => {
- const wallet = inAppWallet();
await wallet.connect({
client,
strategy: "guest",
@@ -297,13 +309,12 @@ From the in-app wallet settings on the thirdweb dashboard, you can enable [custo
Pass any OICD compliant JWT, can be used with firebase, auth0, and more.
```typescript
-import { inAppWallet } from "thirdweb/wallets/in-app";
+import { useConnect } from "thirdweb/react";
const { connect } = useConnect();
const handleLogin = async () => {
await connect(async () => {
- const wallet = inAppWallet();
await wallet.connect({
client,
strategy: "jwt",
@@ -319,13 +330,12 @@ const handleLogin = async () => {
Fully custom auth endpoint, pass your own payload and configure your auth verification endpoint on the thirdweb dashboard. This approach lets you use virtually any auth method you can imagine.
```typescript
-import { inAppWallet } from "thirdweb/wallets/in-app";
+import { useConnect } from "thirdweb/react";
const { connect } = useConnect();
const handleLogin = async () => {
await connect(async () => {
- const wallet = inAppWallet();
await wallet.connect({
client,
strategy: "auth_endpoint",
diff --git a/apps/portal/src/app/typescript/v5/getting-started/page.mdx b/apps/portal/src/app/typescript/v5/getting-started/page.mdx
index a9d9a549495..8291ee76362 100644
--- a/apps/portal/src/app/typescript/v5/getting-started/page.mdx
+++ b/apps/portal/src/app/typescript/v5/getting-started/page.mdx
@@ -14,11 +14,10 @@ To get started, install the thirdweb SDK using your preferred package manager.
-Get a client id from https://thirdweb.com/create-api-key by creating a new project and add it to your `.env`.
+Get a project secret key from https://thirdweb.com/create-api-key by creating a new project and add it to your `.env`.
```shell
-THIRDWEB_SECRET_KEY=[YOUR SECRET KEY]
-WALLET_PRIVATE_KEY=[YOUR WALLET PRIVATE KEY]
+THIRDWEB_SECRET_KEY=[YOUR PROJECT SECRET KEY]
```
Create a thirdweb client in your script.
@@ -53,7 +52,7 @@ A client is all you need to start reading blockchain data.
import { getContract } from "thirdweb";
import { sepolia } from "thirdweb/chains";
// 1. import the extension you want to use
-import { getOwnedNFTs } from "thirdweb/extensions/erc1155";
+import { getNFTs } from "thirdweb/extensions/erc1155";
// 2. get the contract
const contract = getContract({
@@ -63,26 +62,28 @@ const contract = getContract({
});
// 3. call the extension function
-const ownedNFTs = await getOwnedNFTs({
+const nfts = await getNFTs({
contract,
- address: "0x1234...",
});
-console.log(ownedNFTs);
+console.log(nfts);
```
-
+
-To perform transactions from your script, you'll need an account. You can generate a wallet from a private key using the `privateKeyToAccount` function.
+To perform transactions from your script, you'll need an account. Let's generate a wallet from your project secret key.
```ts
-import { privateKeyToAccount } from "thirdweb/wallets"
-
-const account = privateKeyToAccount({
- client,
- privateKey: process.env.PRIVATE_KEY
+import { inAppWallet } from "thirdweb/wallets"
+
+// create or access a wallet
+ const wallet = inAppWallet();
+const account = await wallet.connect({
+ client: TEST_CLIENT,
+ strategy: "backend", // we use backend strategy to generate a wallet from a secret key
+ walletSecret: "my-test-wallet-secret", // use this secret to access the same wallet across multiple scripts
});
// Get the address of the account
diff --git a/apps/portal/src/app/typescript/v5/in-app-wallet/page.mdx b/apps/portal/src/app/typescript/v5/in-app-wallet/page.mdx
index d7d39e6e8ed..8757e9d7df3 100644
--- a/apps/portal/src/app/typescript/v5/in-app-wallet/page.mdx
+++ b/apps/portal/src/app/typescript/v5/in-app-wallet/page.mdx
@@ -70,8 +70,8 @@ const wallet = inAppWallet({
passkeyDomain, // for passkey, the domain that the passkey is created on
redirectUrl, // the URL to redirect to after authentication
},
- metadata, // metadata for the wallet (name, icon, etc.)
- smartAccount, // smart account options for the wallet (for gasless tx)
+ metadata, // metadata for the wallet (name, icon, etc.), will show in UI components
+ executionMode, // enable gasless transactions for the wallet
});
```
@@ -86,7 +86,13 @@ import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
const client = createThirdwebClient({ clientId });
-const wallet = inAppWallet();
+const wallet = inAppWallet({
+ // enable gasless transactions for the wallet
+ executionMode: {
+ mode: "EIP7702",
+ sponsorGas: true,
+ },
+});
const account = await wallet.connect({
client,
diff --git a/apps/portal/src/app/typescript/v5/supported-wallets/page.mdx b/apps/portal/src/app/typescript/v5/supported-wallets/page.mdx
index beed65954d5..6fb5e1a7eeb 100644
--- a/apps/portal/src/app/typescript/v5/supported-wallets/page.mdx
+++ b/apps/portal/src/app/typescript/v5/supported-wallets/page.mdx
@@ -6,37 +6,17 @@ import { AllSupportedWallets } from "@/components/others/AllSupportedWallets";
export const metadata = createMetadata({
image: {
- title: "Supported Wallets",
+ title: "External Wallets",
icon: "typescript",
},
- title: "Supported Wallets | Connect SDK",
- description: "List of all the supported wallets in Connect SDK.",
+ title: "External Wallets | thirdweb",
+ description: "List of all the supported external wallets in thirdweb.",
});
-# Supported Wallets
+# External Wallets
-## thirdweb first-party wallets
+thirdweb natively supports 500+ first-party wallets and all wallets that implement EIP-6963 (Multi-injected Provider Discovery).
-
-
-
-
-
-
-
-
-## Other wallets
+Select a wallet in the list below to see how to connect it with thirdweb.
diff --git a/packages/thirdweb/src/wallets/in-app/core/authentication/guest.ts b/packages/thirdweb/src/wallets/in-app/core/authentication/guest.ts
index bdc8c0755ba..ac568bfc2aa 100644
--- a/packages/thirdweb/src/wallets/in-app/core/authentication/guest.ts
+++ b/packages/thirdweb/src/wallets/in-app/core/authentication/guest.ts
@@ -2,9 +2,8 @@ import type { ThirdwebClient } from "../../../../client/client.js";
import { getClientFetch } from "../../../../utils/fetch.js";
import { stringify } from "../../../../utils/json.js";
import { randomBytesHex } from "../../../../utils/random.js";
-import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
import type { Ecosystem } from "../wallet/types.js";
-import { ClientScopedStorage } from "./client-scoped-storage.js";
+import type { ClientScopedStorage } from "./client-scoped-storage.js";
import { getLoginCallbackUrl } from "./getLoginPath.js";
import type { AuthStoredTokenWithCookieReturnType } from "./types.js";
@@ -14,19 +13,13 @@ import type { AuthStoredTokenWithCookieReturnType } from "./types.js";
*/
export async function guestAuthenticate(args: {
client: ThirdwebClient;
- storage: AsyncStorage;
+ storage: ClientScopedStorage;
ecosystem?: Ecosystem;
}): Promise {
- const storage = new ClientScopedStorage({
- clientId: args.client.clientId,
- ecosystem: args.ecosystem,
- storage: args.storage,
- });
-
- let sessionId = await storage.getGuestSessionId();
+ let sessionId = await args.storage.getGuestSessionId();
if (!sessionId) {
sessionId = randomBytesHex(32);
- storage.saveGuestSessionId(sessionId);
+ args.storage.saveGuestSessionId(sessionId);
}
const clientFetch = getClientFetch(args.client, args.ecosystem);
diff --git a/packages/thirdweb/src/wallets/in-app/native/native-connector.ts b/packages/thirdweb/src/wallets/in-app/native/native-connector.ts
index 81e94c5a5ae..d26dd494fc6 100644
--- a/packages/thirdweb/src/wallets/in-app/native/native-connector.ts
+++ b/packages/thirdweb/src/wallets/in-app/native/native-connector.ts
@@ -165,7 +165,7 @@ export class InAppNativeConnector implements InAppConnector {
return guestAuthenticate({
client: this.client,
ecosystem: params.ecosystem,
- storage: nativeLocalStorage,
+ storage: this.storage,
});
}
case "backend": {
diff --git a/packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts b/packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts
index b24e97692bd..68a321891f7 100644
--- a/packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts
+++ b/packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts
@@ -352,7 +352,7 @@ export class InAppWebConnector implements InAppConnector {
return guestAuthenticate({
client: this.client,
ecosystem: this.ecosystem,
- storage: webLocalStorage,
+ storage: this.storage,
});
}
case "backend": {