diff --git a/apps/portal/public/llms-full.txt b/apps/portal/public/llms-full.txt index 81f0029746a..e65dbbc19ba 100644 --- a/apps/portal/public/llms-full.txt +++ b/apps/portal/public/llms-full.txt @@ -850,7 +850,7 @@ const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" }); />; ``` -[View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets) +[View all available wallets](https://portal.thirdweb.com/connect/external-wallets) #### Customizing the default chain to connect to @@ -1133,7 +1133,7 @@ const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" }); />; ``` -[View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets) +[View all available wallets](https://portal.thirdweb.com/connect/external-wallets) #### Customizing the default chain to connect to @@ -45137,7 +45137,7 @@ Creates a wallet based on the provided ID and arguments. * Supports 500+ wallets * Handles both injected browser wallets and WalletConnect sessions -[View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets) +[View all available wallets](https://portal.thirdweb.com/connect/external-wallets) ### Example diff --git a/apps/portal/redirects.mjs b/apps/portal/redirects.mjs index be3d0064344..4a4e2a13c71 100644 --- a/apps/portal/redirects.mjs +++ b/apps/portal/redirects.mjs @@ -628,7 +628,6 @@ const walletRedirects = { "/connect/wallet/sign-in-methods/configure", "/connect/sign-in/overview": "/connect/wallet/overview", - "/connect/supported-wallets": "/connect/connect", "/connect/usage-with-react-native-sdk": "/connect/sign-in", "/connect/usage-with-react-sdk": "/connect/sign-in", "/connect/usage-with-typescript-sdk": "/connect/sign-in", @@ -1039,8 +1038,8 @@ const v4ToV5Redirects = { "/react-native/v0/:path*": "/react-native/v5", "/react/v4": "/react/v5", "/react/v4/:path*": "/react/v5", - "/references/wallets": "/typescript/v5/supported-wallets", - "/references/wallets/:path*": "/typescript/v5/supported-wallets", + "/references/wallets": "/connect/external-wallets", + "/references/wallets/:path*": "/connect/external-wallets", "/storage-sdk/v2": "/typescript/v5/storage", "/storage-sdk/v2/:path*": "/typescript/v5/storage", "/typescript/v4": "/typescript/v5", @@ -1071,6 +1070,11 @@ const payRedirects = { "/connect/pay/webhooks": "/pay/webhooks", }; +const walletRefactorRedirects = { + "/typescript/v5/supported-wallets": "/connect/external-wallets", + "/typescript/v5/supported-wallets/:path*": "/connect/external-wallets/:path*", +}; + /** * @type {import('next').NextConfig['redirects']} */ @@ -1092,6 +1096,7 @@ export const redirects = async () => { ...createRedirects(v4ToV5Redirects), ...createRedirects(glossaryRedirects), ...createRedirects(payRedirects), + ...createRedirects(walletRefactorRedirects), ]; }; diff --git a/apps/portal/src/app/Header.tsx b/apps/portal/src/app/Header.tsx index 86d36a3df9b..5838d0455ec 100644 --- a/apps/portal/src/app/Header.tsx +++ b/apps/portal/src/app/Header.tsx @@ -123,6 +123,10 @@ export const connectLinks: Array<{ ] as const; const apisLinks = [ + { + href: "https://engine.thirdweb.com/reference", + name: "Engine", + }, { href: "https://insight.thirdweb.com/reference", name: "Insight", @@ -135,21 +139,25 @@ const apisLinks = [ href: "https://bridge.thirdweb.com/reference", name: "Universal Bridge", }, + { + href: "/connect/account-abstraction/api", + name: "Bundler", + }, ]; const sdkLinks = [ { - href: "/typescript/v5", + href: "/references/typescript/v5", icon: TypeScriptIcon, name: "TypeScript", }, { - href: "/react/v5", + href: "/references/typescript/v5", icon: ReactIcon, name: "React", }, { - href: "/react-native/v5", + href: "/references/typescript/v5", icon: ReactIcon, name: "React Native", }, diff --git a/apps/portal/src/app/connect/account-abstraction/get-started/page.mdx b/apps/portal/src/app/connect/account-abstraction/get-started/page.mdx index 9297cd95736..ba35306775b 100644 --- a/apps/portal/src/app/connect/account-abstraction/get-started/page.mdx +++ b/apps/portal/src/app/connect/account-abstraction/get-started/page.mdx @@ -9,337 +9,119 @@ import { } from "@doc"; import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; import { WalletsSmartIcon } from "@/icons"; +import { TypeScriptIcon, DotNetIcon } from "@/icons"; export const metadata = createMetadata({ image: { - title: "Get started with Account Abstraction", + title: "Sponsor gas", icon: "wallets", }, - title: "Getting Started with Account Abstraction | thirdweb", + title: "Sponsor Gas | thirdweb", description: - "Getting started to add ERC-4337 Account Abstraction support to your application easily.", + "Sponsor Gas for all users of your application.", }); -# Getting Started +# Sponsor gas -Getting started to add ERC-4337 compatible smart accounts to your application easily. +Sponsor gas fees for your users by configuring `executionMode` in the in-app wallet options. -Once set, your application will: +--- -- Let users **connect to their smart account** using any personal wallet, including in-app wallets for easy onboarding. -- Automatically **deploy individual account contracts** for your users when they do their first onchain transaction. -- **Handle all transaction gas costs** via the thirdweb paymaster. + + + EIP-7702 + EIP-4337 + - - + -You will require an API key to use thirdweb's infrastructure services such as the bundler and paymaster. +## EIP-7702 (recommended) -Obtain an API key from the [thirdweb dashboard Settings page](https://thirdweb.com/create-api-key). +Sponsor gas fees for your users' in-app wallets using [EIP-7702](https://eips.ethereum.org/EIPS/eip-7702), enabling gasless transactions and improving user experience. -The API key lets you access thirdweb's bundler and paymaster infrastructure, which is required for smart accounts to operate and optionally enable [gasless transactions](/glossary/gasless-transactions). + + + + + TypeScript / React + + + + .NET / Unity + + -Learn more about creating an API key and restricting which contracts the smart account can interact with [here](/api-keys). - - - - -Use the following code to integrate account abstraction into your apps. - - - -To set up sponsored transactions, set the `sponsorGas` option to `true` in the smart account configuration. -All transactions performed with the smart account will then be sponsored by your application. Testnet transactions are free, but you need a valid credit card on file for mainnet transactions. - - - - - - - UI Component - React Hook - TypeScript - Unity - - - -```tsx -import { createThirdwebClient } from "thirdweb"; -import { ThirdwebProvider, ConnectButton } from "thirdweb/react"; - -const client = createThirdwebClient({ -clientId: "YOUR_CLIENT_ID", -}); - -export default function App() { -return ( - - - - ); -} -``` - - - - -```tsx -import { useConnect } from "thirdweb/react"; -import { inAppWallet } from "thirdweb/wallets"; -import { sepolia } from "thirdweb/chains"; - -function App() { - // 1. set the `accountAbstraction` configuration - const { connect } = useConnect({ - client, - accountAbstraction: { - chain: sepolia, // the chain where your smart accounts will be or is deployed - sponsorGas: true, // enable or disable sponsored transactions - }, - }); - - const connectToSmartAccount = async () => { - // 2. connect with the admin wallet of the smart account - connect(async () => { - const wallet = inAppWallet(); // or any other wallet - await wallet.connect({ - client, - chain: sepolia, - strategy: "google", - }); - return wallet; + + ```typescript + const wallet = inAppWallet({ + // enable gasless transactions for the wallet + executionMode: { + mode: "EIP7702", + sponsorGas: true, + }, }); - }; - - return ; -} -``` - - - - - -```ts -import { createThirdwebClient } from "thirdweb"; -import { inAppWallet, smartWallet } from "thirdweb/wallets"; -import { sepolia } from "thirdweb/chains"; - -const client = createThirdwebClient({ - clientId, -}); - -// First, create and connect the personal wallet, which can be any wallet (in-app, metamask, etc.) -const personalWallet = inAppWallet(); -const personalAccount = await personalWallet.connect({ - client, - strategy: "google", -}); -// Then, create and connect the Smart wallet -const wallet = smartWallet({ - client, - chain: sepolia, // the chain where your smart wallet will be or is deployed - sponsorGas: true, // enable or disable sponsored transactions -}); -const smartAccount = await wallet.connect({ - client, - personalAccount, -}); -``` - - - - - -```csharp -using Thirdweb; - -public async void ConnectWallet() -{ -// Reference to your Thirdweb SDK -var sdk = ThirdwebManager.Instance.SDK; -// Configure the connection -var connection = new WalletConnection( -provider: WalletProvider.SmartWallet, // The wallet provider you want to connect to (Required) -chainId: 1, // The chain you want to connect to (Required) -password: "myEpicPassword", // If using a local wallet as a personal wallet (Optional) -email: "email@email.com", // If using an email wallet as a personal wallet (Optional) -personalWallet: WalletProvider.LocalWallet // The personal wallet you want to use with your Smart Wallet (Optional) -); -// Connect the wallet -string address = await sdk.wallet.Connect(connection); -} - -``` - - + ``` + + + + ```csharp + var smartEoa = await InAppWallet.Create( + client: thirdwebClient, + authProvider: AuthProvider.Google, // or other auth providers + executionMode: ExecutionMode.EIP7702Sponsored // enable gas sponsorship + ); + ``` + - - - -Once setup, you can use the Connect [TypeScript](/typescript/v5), [React](/react/v5) and [Unity SDKs](/unity) to deploy contracts, perform transactions, and manipulate smart accounts like any other wallet. - - - - - UI Component - React Hook - TypeScript - Unity - - - - -```tsx -import { getContract } from "thirdweb"; -import { useActiveAccount, TransactionButton } from "thirdweb/react"; -import { mintTo } from "thirdweb/extensions/erc721"; - -const contract = getContract({ client, chain, address: "0x..." }); - -// The ThirdwebProvider setup above already handles the connection to the smart account -// Within the provider, you can use the SDK normally to interact with the blockchain -export default function MyComponent() { - // Get the connected smart account - const smartAccount = useActiveAccount(); - // Mint a new NFT - return ( - { - if (!account) return; - return mintTo({ - contract, - to: account.address, - nft: { - name: "My NFT", - description: "My NFT description", - image: "https://example.com/image.png", - }, - }); - }} - > - Mint NFT - - ); -} -``` +That's it! All transactions executed by the user will be sponsored via the thirdweb infrastructure. - - -```tsx -import { getContract } from "thirdweb"; -import { useActiveAccount, useSendTransaction } from "thirdweb/react"; -import { mintTo, balanceOf } from "thirdweb/extensions/erc721"; - -const contract = getContract({ client, chain, address: "0x..." }); - -// The ThirdwebProvider setup above already handles the connection to the smart account -// Within the provider, you can use the SDK normally to interact with the blockchain -export default function MyComponent() { - // Get the connected smart account - const smartAccount = useActiveAccount(); - // Example read - const { data, isLoading } = useReadContract( - balanceOf, - { - contract, - owner: smartAccount.address!, - }, - { - enabled: !!smartAccount, - }, - ); - // Example write - const { mutate: sendTransaction, isPending } = useSendTransaction(); - const mint = () => { - sendTransaction({ - transaction: mintTo({ - contract, - to: smartAccount.address, - nft: { - name: "My NFT", - description: "My NFT description", - image: "https://example.com/image.png", - }, - }), + + +## EIP-4337 + +For chains that don't support EIP-7702, you can use EIP-4337 smart contract wallets to sponsor gas fees. Note that with EIP-4337, you need to create a smart contract wallet for the user with a different address than the admin wallet (EOA) that controls it. + + + + + + TypeScript / React + + + + .NET / Unity + + + + + ```typescript + const wallet = inAppWallet({ + // will create a smart contract wallet for the user + executionMode: { + mode: "EIP4337", + smartAccount: { + chain: sepolia, + sponsorGas: true, + }, + }, }); - }; - // Mint a new NFT - return ; -} -``` - - - - - -```ts -import { getContract, prepareContractCall } from "thirdweb"; -import { mintTo } from "thirdweb/extensions/erc721"; - -// Once you have a smartAccount connected, you can interact with the blockchain as you would with a regular EOA -const smartWalletAddress = smartAccount.address; -// gas-free wallet actions -const transaction = await mintTo({ - contract, - to: smartWalletAddress, - nft: { - name: "My NFT", - description: "My NFT description", - image: "https://example.com/image.png", - }, -}); -const { transactionHash } = await sendTransaction({ - transaction, - smartAccount, -}); -console.log(`Minted NFT with transaction hash: ${transactionHash}`); -``` - - - - - -```cs -using Thirdweb; -public async void MintNFT() -{ - // The ThirdwebManger prefab holds the smart wallet connection state - var sdk = ThirdwebManager.Instance.SDK; - // Get the connected smart wallet address - var smartWalletAddress = await sdk.Wallet.GetAddress(); - // Interact with contracts - Contract contract = sdk.GetContract("0x..."); - await contract.ERC721.Mint(new NFTMetadata() - { - name = "My NFT", - description = "My NFT description", - image = "https://example.com/image.png", - } - ); -} -``` + ``` + + + + ```csharp + var adminWallet = await InAppWallet.Create( + client: thirdwebClient, + authProvider: AuthProvider.Google, // or other auth providers + ); + var smartWallet = await SmartWallet.Create(adminWallet, chainId, gasless: true); + ``` + + - - - -### Demos - -Learn by example with these open-source demos: - - diff --git a/apps/portal/src/app/connect/account-abstraction/how-it-works/page.mdx b/apps/portal/src/app/connect/account-abstraction/how-it-works/page.mdx index d9507832014..07a27a6ff7b 100644 --- a/apps/portal/src/app/connect/account-abstraction/how-it-works/page.mdx +++ b/apps/portal/src/app/connect/account-abstraction/how-it-works/page.mdx @@ -20,7 +20,7 @@ Smart accounts rely on code instead of private keys to secure and recover wallet **A smart account is a type of Web3 wallet powered by smart contracts.** -This smart account is unlocked by a 'key' - a personal account. This key can be anything from a [MetaMask wallet](/typescript/v5/supported-wallets/io.metamask) or even an [In-App Wallet](/connect/in-app-wallet/overview) and is used as a way to 'sign in' to the wallet. +This smart account is unlocked by a 'key' - a personal account. This key can be anything from a [MetaMask wallet](/connect/external-wallets/io.metamask) or even an [In-App Wallet](/connect/in-app-wallet/overview) and is used as a way to 'sign in' to the wallet. ## Benefits of Smart Accounts diff --git a/apps/portal/src/app/connect/assets/test.jpg b/apps/portal/src/app/connect/assets/test.jpg deleted file mode 100644 index a606dd3a597..00000000000 Binary files a/apps/portal/src/app/connect/assets/test.jpg and /dev/null differ diff --git a/apps/portal/src/app/connect/auth/page.mdx b/apps/portal/src/app/connect/auth/page.mdx index d7fb87b81d9..ffabb719bdc 100644 --- a/apps/portal/src/app/connect/auth/page.mdx +++ b/apps/portal/src/app/connect/auth/page.mdx @@ -17,152 +17,123 @@ import { GraduationCap } from "lucide-react"; export const metadata = createMetadata({ image: { - title: "thirdweb Auth", + title: "Sign in with Ethereum", icon: "wallets", }, - title: "thirdweb Auth", + title: "Sign in with Ethereum", description: - "Auth allows anyone to integrate passwordless web3-native authentication and authorization into their applications.", + "Sign in with Ethereum allows anyone to integrate passwordless web3-native authentication and authorization into their applications.", }); -# Overview +# Sign in with Ethereum -Auth allows anyone to integrate passwordless web3-native authentication and authorization into their applications. Users can then **login using any thirdweb wallet** (in-app, browser, or smart wallet). +Sign in with Ethereum (SIWE) allows anyone to integrate passwordless web3-native authentication and authorization into their applications. Users can then **login using any thirdweb wallet** (in-app, browser, or smart wallet). This allows developers to create a familiar, secure authentication flow that works with traditional backends while leveraging the features of a web3 application. --- -# Get Started + - + + Client + Server + -## Get Your Client ID + -To use Auth in your app, you'll need a client ID. You can get one for free on [your thirdweb dashboard](https://thirdweb.com/create-api-key). +At the root of your React application: -## Setting Up Auth +```tsx +import { ThirdwebProvider } from "thirdweb/react"; - +export default function App() { + return {/* Your app here */}; +} +``` - - React - TypeScript - +In your `components` directory: - ```tsx -import { ThirdwebProvider, ConnectButton } from "thirdweb/react"; +import { ConnectButton } from "thirdweb/react"; import { createThirdwebClient } from "thirdweb"; -import { createAuth } from "thirdweb/auth"; -const client = createThirdwebClient({ -clientId: '1234567890', // get yours by creating a project on https://thirdweb.com/create-api-key -}); - -const thirdwebAuth = createAuth({ -domain: 'localhost:3000', -client, -adminAccount: privateKeyToAccount({ client, privateKey }), -}); - -export default function App() { - const [loggedIn, setLoggedIn] = useState(false); - return ( - // The ThirdwebProvider should be at the root of your application, but the ConnectButton can be anywhere - - { - // here you should call your backend, using generatePayload to return - // a SIWE compliant login payload to the client - return thirdwebAuth.generatePayload(params) - }, - doLogin: async (params) => { - // here you should call your backend to verify the signed payload passed in params - // this will verify that the signature matches the intended wallet - const verifiedPayload = await thirdwebAuth.verifyPayload(params); - setLoggedIn(verifiedPayload.valid) - }, - isLoggedIn: async () => { - // here you should ask you backend if the user is logged in - // can use cookies, storage, or your method of choice - return loggedIn; - }, - doLogout: async () => { - // here you should call your backend to logout the user if needed - // and delete any local auth tokens - setLoggedIn(false); - } - }} - /> - - ); +const client = createThirdwebClient({ clientId }); + +export default function Connect() { + { + const address = params.address; + // fetch the login payload here using address from your server + }, + doLogin: async (params) => { + // send the signed login payload (params) to your server to verify the signature + }, + isLoggedIn: async () => { + // fetch the user's login status from your server + }, + doLogout: async () => { + // send a logout request to your server + }, + }} + />; } ``` + - + ```ts +import { createThirdwebClient } from "thirdweb"; import { createAuth } from "thirdweb/auth"; const client = createThirdwebClient({ - clientId: "1234567890", // get yours at https://thirdweb.com/create-api-key + secretKey: "", // get yours on your thirdweb dashboard }); -const auth = createAuth({ - domain: "localhost:3000", - adminAccount: privateKeyToAccount({ client, privateKey }), +const thirdwebAuth = createAuth({ + domain: "localhost:3000", // your domain client, }); -// 1. generate a login payload on the server -const loginPayload = await auth.generatePayload({ - address: "0x123...", - chain: 1, -}); +// handle the login payload generation on your server +// example: /api/generate-login-payload +export async function generateLoginPayload(address: string) { + return thirdwebAuth.generatePayload({ address }); +} -// 2. sign the login payload on the client -const signature = await auth.signPayload({ - payload: loginPayload, - account: userAccount, -}); +// handle the login payload verification on your server +// example: /api/verify-login-payload +export async function verifyLoginPayload(payload: string, signature: string) { + // verify the payload and signature + const verifiedPayload = await thirdwebAuth.verifyPayload({ payload, signature }); -// 3. verify the login payload and signature on the server -const verifiedPayload = await auth.verifyPayload({ - payload: loginPayload, - signature, -}); + // if the payload is invalid, throw an error + if(!verifiedPayload.valid) { + throw new Error("Invalid signature"); + } -// 4. generate a JWT for the client -const jwt = await auth.generateJWT({ payload: verifiedPayload }); + // Optionally, handle the JWT generation on your server for the client to use for subsequent calls to your server + const jwt = await thirdwebAuth.generateJWT({ payload: verifiedPayload }); -// 5. set the JWT as a cookie or store it another way + return { + valid: verifiedPayload.valid, + jwt, // can also be stored in a cookie or another way + }; +} -// 6. authenticate the client based on the JWT on subsequent calls -const { valid, parsedJWT } = await auth.verifyJWT({ jwt }); +// handle the JWT verification on your server sent by the client +// typically in a middleware +export async function verifyJWT(jwt: string) { + return thirdwebAuth.verifyJWT({ jwt }); +} ``` - - These examples are intended to get up and running quickly, but aren't secure - for production. Before deploying your app to real users, checkout out our - walkthrough on [Deploying to - Production](/connect/auth/deploying-to-production). - - -### Auth with Smart Accounts (Account Abstraction) - -When using Auth with a smart account, you **must** specify a client (on `createAuth`) and a chain ID (on `generatePayload`). The smart account is deployed on a specific chain and the payload must reflect that, and the client is needed to call the wallet contract to verify the signature. - ## Templates diff --git a/apps/portal/src/app/typescript/v5/supported-wallets/[walletId]/assets/appstore.svg b/apps/portal/src/app/connect/external-wallets/[walletId]/assets/appstore.svg similarity index 100% rename from apps/portal/src/app/typescript/v5/supported-wallets/[walletId]/assets/appstore.svg rename to apps/portal/src/app/connect/external-wallets/[walletId]/assets/appstore.svg diff --git a/apps/portal/src/app/typescript/v5/supported-wallets/[walletId]/assets/chromestore.svg b/apps/portal/src/app/connect/external-wallets/[walletId]/assets/chromestore.svg similarity index 100% rename from apps/portal/src/app/typescript/v5/supported-wallets/[walletId]/assets/chromestore.svg rename to apps/portal/src/app/connect/external-wallets/[walletId]/assets/chromestore.svg diff --git a/apps/portal/src/app/typescript/v5/supported-wallets/[walletId]/assets/playstore.svg b/apps/portal/src/app/connect/external-wallets/[walletId]/assets/playstore.svg similarity index 100% rename from apps/portal/src/app/typescript/v5/supported-wallets/[walletId]/assets/playstore.svg rename to apps/portal/src/app/connect/external-wallets/[walletId]/assets/playstore.svg diff --git a/apps/portal/src/app/typescript/v5/supported-wallets/[walletId]/page.tsx b/apps/portal/src/app/connect/external-wallets/[walletId]/page.tsx similarity index 97% rename from apps/portal/src/app/typescript/v5/supported-wallets/[walletId]/page.tsx rename to apps/portal/src/app/connect/external-wallets/[walletId]/page.tsx index e8b9cd660ec..aaf6ce58a05 100644 --- a/apps/portal/src/app/typescript/v5/supported-wallets/[walletId]/page.tsx +++ b/apps/portal/src/app/connect/external-wallets/[walletId]/page.tsx @@ -15,7 +15,7 @@ import { DocLink, Heading, Paragraph, -} from "../../../../../components/Document"; +} from "@/components/Document"; import appStoreSvg from "./assets/appstore.svg"; import chromeStoreSvg from "./assets/chromestore.svg"; import playStoreSvg from "./assets/playstore.svg"; @@ -31,7 +31,7 @@ export async function generateMetadata(props: PageProps) { const walletMetadata = await getWalletInfo(params.walletId); return createMetadata({ - description: `Connect ${walletMetadata.name} with thirdweb Connect SDK`, + description: `Connect ${walletMetadata.name} with the thirdweb SDK`, image: { icon: "wallets", title: walletMetadata.name, @@ -57,11 +57,11 @@ export default async function Page(props: PageProps) { + + JWT (OICD) + Auth endpoint + + + + +## Strategy `jwt` - OIDC compatible auth The OIDC auth set-up is a good option if you use an external auth provider like `Auth0`, `firebase`, `cognito` etc. that publishes the JWK for checking the authenticity of the token. @@ -44,12 +57,13 @@ You will be asked to enter the following values - The URL of the JWKS file (public key): This is used to verify the token was signed by you. - The `aud` value of the idToken: This is used to verify that thirdweb is the intended user of the token -### Authenticating a user via OIDC-compatible auth +### Usage example - + - React TypeScript + React + .NET @@ -58,19 +72,29 @@ You will be asked to enter the following values import { inAppWallet } from "thirdweb/wallets"; import { useConnect } from "thirdweb/react"; -const { connect } = useConnect(); +const client = createThirdwebClient({ clientId: "your-client-id" }); +const wallet = inAppWallet(); + +const MyComponent = () => { + const { connect } = useConnect(); -const handlePostLogin = async (jwt: string) => { +const handlePostLogin = async () => { await connect(() => { - const wallet = inAppWallet(); wallet.connect({ client, strategy: "jwt", - jwt, + jwt: "", }); return wallet; }); }; + +return ( + +); +}; ``` @@ -85,16 +109,33 @@ const wallet = inAppWallet(); const account = await wallet.connect({ client, strategy: "jwt", - jwt, + jwt: "", }); // use the account to send transactions ``` + + + +```csharp +using Thirdweb; + +var client = ThirdwebClient.Create(clientId: "your-client-id"); +var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.JWT); +var address = await wallet.LoginWithCustomAuth(jwt: ""); +``` + + + -## Generic auth + + + + +## Strategy `auth_endpoint` - Generic auth Generic auth is a lower-level option that can be used when you have your own auth server that you use to authenticate users. @@ -127,35 +168,47 @@ The endpoint should return a JSON body containing the following fields: You can also pass a list of headers. These headers will be sent with every request to your verification endpoint. You can use these to authenticate the request. -### Authenticating a user via generic auth +### Usage example Once you've logged in with your own auth, you can pass the user's JWT to the in-app wallet to authenticate and connect. - + - React TypeScript + React + .NET ```typescript +import { createThirdwebClient } from "thirdweb"; import { inAppWallet } from "thirdweb/wallets"; import { useConnect } from "thirdweb/react"; -const { connect } = useConnect(); +const client = createThirdwebClient({ clientId: "your-client-id" }); +const wallet = inAppWallet(); -const handlePostLogin = async (jwt: string) => { - await connect(async () => { - const wallet = inAppWallet(); - await wallet.connect({ - client, - strategy: "auth_endpoint", - // This is the payload that is sent to the auth endpoint - payload, +const MyComponent = () => { + const { connect } = useConnect(); + + const handlePostLogin = async () => { + await connect(async () => { + await wallet.connect({ + client, + strategy: "auth_endpoint", + // This is the payload that will be sent to your auth endpoint + payload: "", + }); + return wallet; }); - return wallet; - }); + }; + + return ( + + ); }; ``` @@ -173,12 +226,29 @@ const wallet = inAppWallet(); const account = await wallet.connect({ client, strategy: "auth_endpoint", - // This is the payload that is sent to the auth endpoint - payload, + // This is the payload that will be sent to your auth endpoint + payload: "", }); // use the account to send transactions ``` + + + +```csharp +using Thirdweb; + +var client = ThirdwebClient.Create(clientId: "your-client-id"); +var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.AuthEndpoint); +var address = await wallet.LoginWithAuthEndpoint(payload: ""); +``` + + + + + + + diff --git a/apps/portal/src/app/connect/layout.tsx b/apps/portal/src/app/connect/layout.tsx index 8e890659697..843af4956d9 100644 --- a/apps/portal/src/app/connect/layout.tsx +++ b/apps/portal/src/app/connect/layout.tsx @@ -1,5 +1,4 @@ import { DocLayout } from "@/components/Layouts/DocLayout"; -import { PlatformSelector } from "../../components/others/PlatformSelector"; import { sidebar } from "./sidebar"; export default async function Layout(props: { children: React.ReactNode }) { @@ -10,7 +9,6 @@ export default async function Layout(props: { children: React.ReactNode }) { sidebarHeader={

Wallets

-
} > diff --git a/apps/portal/src/app/connect/page.mdx b/apps/portal/src/app/connect/page.mdx index bf960789f19..cc877a9efc0 100644 --- a/apps/portal/src/app/connect/page.mdx +++ b/apps/portal/src/app/connect/page.mdx @@ -1,127 +1,610 @@ import { - ArticleCard, - GithubTemplateCard, - Grid, - ExpandableGrid, - FeatureCard, - createMetadata, + Callout, OpenSourceCard, - Stack, - ConnectCard, + createMetadata, + InstallTabs, SDKCard, - Callout, + Grid, ArticleIconCard, - DocImage + Tabs, + TabsList, + TabsTrigger, + TabsContent, } from "@doc"; import { - TypeScriptIcon, ReactIcon, - DotNetIcon, + TypeScriptIcon, UnityIcon, + DotNetIcon, UnrealEngineIcon, } from "@/icons"; -import { cn } from "@/lib/utils"; -import Link from "next/link"; -import { Button } from "@/components/ui/button"; -import SupportedChains from "../_images/supported-chains.png"; -import {FuelIcon,MonitorCheckIcon,WalletCardsIcon,UserLockIcon, ExternalLinkIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon, IdCardIcon, HandCoinsIcon, MonitorSmartphoneIcon} from "lucide-react"; - +import { ExternalLink } from "lucide-react"; export const metadata = createMetadata({ - title: "thirdweb Connect", - description: "Everything you need for your web3 frontend.", image: { - title: "thirdweb Connect", - icon: "thirdweb", + title: "Wallets", + icon: "wallets", }, + title: "Get started with wallets", + description: "Create or connect wallets to your app or your backend", }); -# Wallets +# Get Started with Wallets -Wallets is a complete toolkit for connecting any user to your application. It includes **customizable components** for onboarding, **embedded wallets** , **account abstraction** -for gasless transactions, **server wallets** for developers to carry out transactions, and a secure **non-custodial key management system**. +Create wallets for your users, authenticate with your backend, connect to external wallets, and more. -## Live Playground +--- - + + + + + TypeScript + + + + React + + + + React Native + + + + Unity + + + + .NET + + + + Unreal Engine + + - + + ### Installation - + Install the thirdweb SDK in your TypeScript project: -## Features + -
- } - /> + ### Set up the Client - } - /> + First, create a client instance to connect with thirdweb services: - } - /> - - } - /> - - } - /> + ```typescript + import { createThirdwebClient } from "thirdweb"; + // - clientId for client-side applications + // - secretKey for server-side applications + const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", // Get from your thirdweb dashboard + }); + ``` - } - /> + ### Create a wallet for your users - } - /> + Create wallets with email or social login: - } - /> + ```typescript + import { inAppWallet } from "thirdweb/wallets"; + + // Initialize a wallet + const wallet = inAppWallet(); + + // Connect with social login + const account = await wallet.connect({ + client, // your thirdweb client + strategy: "google", // or any other auth strategy + }); + + console.log("connected to", account.address); + ``` + + + + + ### Installation + + Install the thirdweb SDK in your React project: + + + + + ### Create a Client + + First, create a client file (e.g., `thirdwebClient.ts`) for reuse throughout your app: + + ```typescript + // thirdwebClient.ts + import { createThirdwebClient } from "thirdweb"; + + export const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", // Get from your thirdweb dashboard + }); + ``` + + ### Setup the Provider + + Wrap your application with the ThirdwebProvider: + + ```tsx + // app.tsx / _app.tsx + import { ThirdwebProvider } from "thirdweb/react"; + + function App() { + return ( + + + + ); + } + ``` + + ### Connect Button Component + + Use the pre-built ConnectButton for a complete wallet connection UI: + + ```tsx + import { ConnectButton, useActiveAccount } from "thirdweb/react"; + + function YourApp() { + const account = useActiveAccount(); + console.log("connected to", account?.address); + + return ( +
+ +
+ ); + } + ``` + + 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, 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 + }); + return wallet; + }); + }; + + return ( +
+ +
+ ); + } + ``` + + + + + ### Installation + + Install the thirdweb SDK in your React Native project: + + + + + + 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 once and reuse it throughout your app: + + ```typescript + import { createThirdwebClient } from "thirdweb"; + + export const client = createThirdwebClient({ + 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. + + + ### Setup the Provider + + Wrap your application with the ThirdwebProvider: + + ```tsx + import { ThirdwebProvider } from "thirdweb/react"; + + function App() { + return ( + + + + ); + } + ``` + + ### Connect Button Component + + Use the pre-built ConnectButton for a complete wallet connection UI: + + ```tsx + import { ConnectButton, useActiveAccount } from "thirdweb/react"; + + function YourApp() { + const account = useActiveAccount(); + console.log("connected to", account?.address); + + return ( + + + + ); + } + ``` + + 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, 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 + }); + return wallet; + }); + }; -
+ return ( + + + + ); + } + ``` -## Quick Starts + + + + ### Installation + + 1. Download the latest [thirdweb Unity SDK](https://github.com/thirdweb-dev/unity-sdk/releases) (.unitypackage file) + 2. Import the package into your Unity project via Assets > Import Package > Custom Package + + ### Configure Client ID + + After importing the SDK: + + 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 + + ### Initialize the SDK + + Create a new script to manage wallet connections: + + ```csharp + using Thirdweb; + using UnityEngine; + using UnityEngine.UI; + + public class WalletManager : MonoBehaviour + { + private ThirdwebSDK sdk; + public Text walletAddressText; + public Button connectButton; + + void Start() + { + // Client ID is set in Project Settings > Thirdweb + sdk = new ThirdwebSDK("ethereum"); // Or any supported chain + connectButton.onClick.AddListener(ConnectWallet); + } + + public async void ConnectWallet() + { + try { + // Connect with an external wallet like Coinbase Wallet + string address = await sdk.wallet.Connect(new WalletConnection() { + provider = WalletProvider.CoinbaseWallet, + chainId = 1 // Ethereum Mainnet + }); + + walletAddressText.text = "Connected: " + address; + } + catch (System.Exception e) { + Debug.LogError("Error connecting wallet: " + e.Message); + } + } + } + ``` + + ### Using the Connect Wallet Prefab + + For a quicker implementation, use the provided prefab: + + 1. Add the `ThirdwebManager` prefab to your scene + 2. Configure your Client ID in the inspector + 3. Add the `ConnectWallet` prefab to your UI Canvas + 4. Connect the prefab to your ThirdwebManager + + ### Implementing In-App Wallets + + Enable email login in Unity: + + ```csharp + public async void ConnectWithEmail(string email) + { + try { + string address = await sdk.wallet.Connect(new WalletConnection() { + provider = WalletProvider.EmbeddedWallet, + 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}"); + } + catch (System.Exception e) { + Debug.LogError("Error connecting wallet: " + e.Message); + } + } + ``` + + + + + ### Installation + + Install the thirdweb .NET SDK using NuGet: + + ```bash + dotnet add package Thirdweb + ``` + + ### Initialize the SDK + + Create a client instance to connect with thirdweb services: + + ```csharp + using Thirdweb; + + // For client-side applications: + var sdk = new ThirdwebSDK("ethereum", new ThirdwebSDK.Options + { + ClientId = "YOUR_CLIENT_ID" // From thirdweb dashboard + }); + + // For server-side applications: + // var sdk = new ThirdwebSDK("ethereum", new ThirdwebSDK.Options + // { + // SecretKey = Environment.GetEnvironmentVariable("THIRDWEB_SECRET_KEY") + // }); + ``` + + ### Connect External Wallets + + For .NET applications that need to interact with external wallets: + + ```csharp + // 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}"); + ``` + + ### Using In-App Wallets + + Create wallets with email authentication: + + ```csharp + // Create an embedded wallet with email + var walletOptions = new EmbeddedWalletOptions + { + 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(); + Console.WriteLine($"Connected with embedded wallet: {address}"); + ``` + + ### Reading Contract Data + + Interact with smart contracts: + + ```csharp + // Get a contract instance + var contract = await ThirdwebContract.Create( + client: sdk.Client, + address: "0x...", + chain: Chain.Ethereum + ); + + // Read a value from the contract + var name = await contract.Read("name"); + Console.WriteLine($"Contract name: {name}"); + ``` + + + + + ### Installation + + 1. Download the thirdweb Unreal Engine plugin from the [Unreal Engine Marketplace](https://www.unrealengine.com/marketplace/en-US/product/thirdweb) + 2. Add the plugin to your Unreal project + 3. Enable the plugin in your project settings + + ### Configure Client ID + + 1. Go to Edit > Project Settings > Thirdweb + 2. Enter your Client ID from the thirdweb dashboard + 3. Enter your Bundle ID (must match what was allowlisted on the thirdweb dashboard) + + ### Initialize the SDK (C++) + + Create a new class to manage wallet connections: + + ```cpp + #include "ThirdwebManager.h" + #include "WalletConnection.h" + + // In your game class or controller + void AMyGameController::InitializeThirdweb() + { + // Get the Thirdweb subsystem + UThirdwebSubsystem* ThirdwebSubsystem = GEngine->GetEngineSubsystem(); + + // Initialize with your client ID (configured in project settings) + ThirdwebSubsystem->Initialize("ethereum"); + } + + 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)); + } + + void AMyGameController::OnWalletConnected(const FString& Address, const FString& Error) + { + 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)); + } + else + { + UE_LOG(LogTemp, Error, TEXT("Failed to connect wallet: %s"), *Error); + } + } + + void AMyGameController::OnBalanceReceived(const FString& Balance, const FString& Symbol) + { + UE_LOG(LogTemp, Display, TEXT("Balance: %s %s"), *Balance, *Symbol); + } + ``` + + ### Using Blueprints + + Alternatively, use Blueprint nodes provided by the Thirdweb plugin: + + 1. Create a new Blueprint class + 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. + + + + +## Going further + +To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides: + +- [Other auth strategies](/connect/wallet/sign-in-methods/configure) +- [Sponsor Gas](/connect/account-abstraction/overview) +- [Implement Sign In with Ethereum](/connect/auth) +- [External Wallets](/connect/wallet/sign-in-methods/external-wallets) (e.g. MetaMask, WalletConnect, Coinbase Wallet, etc.) + +## Explore Full API References + +For comprehensive guides on implementing the full thirdweb SDK, explore our language-specific documentation: - + @@ -132,18 +615,3 @@ for gasless transactions, **server wallets** for developers to carry out transac icon={UnrealEngineIcon} /> - -## Supported Chains - -Wallets are supported on EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=connect-sdk). - - - -## Starter Kits & demos - -View all available starter kits, demos, and templates on Github. - - diff --git a/apps/portal/src/app/connect/sidebar.tsx b/apps/portal/src/app/connect/sidebar.tsx index cb28839d8c4..58e837314f0 100644 --- a/apps/portal/src/app/connect/sidebar.tsx +++ b/apps/portal/src/app/connect/sidebar.tsx @@ -1,21 +1,21 @@ -import { ExternalLinkIcon } from "lucide-react"; +import { ExternalLinkIcon, ZapIcon } from "lucide-react"; import type { SideBar } from "@/components/Layouts/DocLayout"; import { DotNetIcon, ReactIcon, TypeScriptIcon, UnityIcon } from "@/icons"; import { UnrealEngineIcon } from "../../icons/sdks/UnrealEngineIcon"; -// TODO: move the following two slugs to walletSlug with updated docs +// TODO: remove all unused pages const inAppSlug = "/connect/in-app-wallet"; - +const connectSlug = "/connect"; const walletSlug = "/connect/wallet"; const aAslug = "/connect/account-abstraction"; const authSlug = "/connect/auth"; export const sidebar: SideBar = { links: [ - { separator: true }, { - href: "/connect", - name: "Introduction", + href: connectSlug, + name: "Get Started", + icon: , }, { href: "https://playground.thirdweb.com/", @@ -28,242 +28,34 @@ export const sidebar: SideBar = { name: "Templates", }, { separator: true }, - // Connect\ { expanded: true, isCollapsible: false, + name: "Guides", links: [ { - href: `${walletSlug}/overview`, - name: "Overview", - }, - { - href: `${walletSlug}/security`, - name: "Security", - }, - { - href: `${walletSlug}/get-started`, - name: "Get Started", - }, - { - href: `${walletSlug}/sign-in-methods/external-wallets`, - name: "External Wallets", + href: `${walletSlug}/sign-in-methods/configure`, + name: "Create Wallets", }, { - links: [ - { - href: `${walletSlug}/sign-in-methods/configure`, - name: "Sign-In Methods", - }, - { - href: `${walletSlug}/get-users`, - name: "Fetch Users", - }, - { - href: `${walletSlug}/pregenerate-wallets`, - name: "Pregenerate Wallets", - }, - { - href: `${walletSlug}/sign-in-methods/guest`, - name: "Guest Mode", - }, - { - href: `${walletSlug}/in-app-wallet/faq`, - name: "FAQ", - }, - { - links: [ - { - href: `${inAppSlug}/custom-auth/overview`, - name: "Overview", - }, - { - href: `${inAppSlug}/custom-auth/configuration`, - name: "Configuration", - }, - { - links: [ - { - href: `${inAppSlug}/custom-auth/custom-jwt-auth-server`, - name: "Custom auth server (OIDC Auth)", - }, - { - href: `${inAppSlug}/custom-auth/custom-auth-server`, - name: "Custom auth server (Generic Auth)", - }, - { - href: `${inAppSlug}/custom-auth/firebase-auth`, - name: "Firebase Auth", - }, - ], - name: "Integration guides", - }, - ], - name: "Custom Authentication", - }, - ], - name: "In-App Wallets", + href: `${aAslug}/get-started`, + name: "Sponsor Gas", }, { - links: [ - { - href: `${walletSlug}/ecosystem/set-up`, - name: "Set-up", - }, - { - href: `${walletSlug}/ecosystem/portal`, - name: "Ecosystem Portal", - }, - { - href: `${walletSlug}/ecosystem/permissions`, - name: "Managing Ecosystem Permissions", - }, - { - href: `${walletSlug}/ecosystem/integrating-partners`, - name: "Integrating with Partners", - }, - { - href: `${walletSlug}/ecosystem/register-walletconnect`, - name: "Register with WalletConnect", - }, - { - href: `${walletSlug}/ecosystem/faq`, - name: "FAQ", - }, - ], - name: "Ecosystem Wallets", + href: `${walletSlug}/get-users`, + name: "Fetch Users", }, - //Account abstraction { - links: [ - { - href: `${aAslug}/overview`, - name: "Overview", - }, - { - href: `${aAslug}/how-it-works`, - name: "How it Works", - }, - { - links: [ - { - href: "/typescript/v5/account-abstraction/get-started", - icon: , - name: "TypeScript", - }, - { - href: "/react/v5/account-abstraction/get-started", - icon: , - name: "React", - }, - { - // TODO - add react-native dedicated page - href: "/react/v5/account-abstraction/get-started", - icon: , - name: "React Native", - }, - { - href: "/dotnet/wallets/providers/account-abstraction", - icon: , - name: "Dotnet", - }, - { - href: "/unity/wallets/providers/account-abstraction", - icon: , - name: "Unity", - }, - ], - name: "Get Started", - }, - { - href: `${aAslug}/erc-20-paymaster`, - name: "ERC-20 Paymaster", - }, - { - href: `${aAslug}/factories`, - name: "Account Factories", - }, - { - href: `${aAslug}/infrastructure`, - name: "Bundler & Paymaster", - }, - { - href: `${aAslug}/sponsorship-rules`, - name: "Sponsorship rules", - }, - { - href: `${aAslug}/api`, - name: "API Reference", - }, - { - href: `${aAslug}/faq`, - name: "FAQs", - }, - ], - name: "Account Abstraction", + href: `${walletSlug}/pregenerate-wallets`, + name: "Pregenerate Wallets", }, { - links: [ - { - href: `${walletSlug}/web3-onboard/overview`, - name: "Overview", - }, - { - href: `${walletSlug}/web3-onboard/migration-guide`, - name: "Migration Guide", - }, - ], - name: "Web3 Onboard", + href: `${inAppSlug}/custom-auth/configuration`, + name: "Bring your own Auth", }, { - href: `${walletSlug}/migrate-to-thirdweb`, - name: "Migrate to thirdweb", - }, - { - href: `${walletSlug}/faq`, - name: "FAQ", - }, - ], - name: "User Wallets", - }, - { separator: true }, - // User identity - { - isCollapsible: false, - links: [ - // Auth - // TODO move to TS reference - { - links: [ - { - href: `${authSlug}`, - name: "Get Started", - }, - { - expanded: false, - isCollapsible: true, - links: [ - { - href: `${authSlug}/frameworks/next`, - name: "Next.js", - }, - { - href: `${authSlug}/frameworks/react-express`, - name: "React + Express", - }, - ], - name: "Frameworks", - }, - { - href: `${authSlug}/deploying-to-production`, - name: "Deploying to Production", - }, - ], - name: "Sign In with Ethereum", - }, - { - href: `${walletSlug}/user-management/get-user-profiles`, - name: "Get User Profiles", + href: `${authSlug}`, + name: "Sign in with Ethereum", }, { href: `${walletSlug}/user-management/link-multiple-identity`, @@ -273,32 +65,28 @@ export const sidebar: SideBar = { href: `${walletSlug}/user-management/export-private-key`, name: "Export Private Keys", }, - // TODO: - // { - // name: "Deleting User Details", - // href: `${walletSlug}/user-management/deleting-user-details`, - // }, + { + href: `${connectSlug}/external-wallets`, + name: "External Wallets", + }, ], - name: "User Identity", }, { separator: true }, - // Blockchain API - // TODO Overview page? { isCollapsible: false, links: [ { - href: "/typescript/v5", + href: "/references/typescript/v5", icon: , name: "TypeScript", }, { - href: "/react/v5", + href: "/references/typescript/v5", icon: , name: "React", }, { - href: "/react-native/v5", + href: "/references/typescript/v5", icon: , name: "React Native", }, @@ -320,6 +108,21 @@ export const sidebar: SideBar = { ], name: "API References", }, + { separator: true }, + { + isCollapsible: false, + name: "Resources", + links: [ + { + href: `${walletSlug}/security`, + name: "Security", + }, + { + href: `${walletSlug}/faq`, + name: "FAQ", + }, + ], + } ], name: "Connect", }; diff --git a/apps/portal/src/app/connect/wallet/faq/page.mdx b/apps/portal/src/app/connect/wallet/faq/page.mdx index ca9efe931b6..4166c38e32d 100644 --- a/apps/portal/src/app/connect/wallet/faq/page.mdx +++ b/apps/portal/src/app/connect/wallet/faq/page.mdx @@ -27,10 +27,6 @@ Make sure that you are developing on a [secure origin](https://www.chromium.org/ If you continue to run into a console error, please contact us with more details. -### What is thirdweb's ability to scale? - -thirdweb can create up to 300 wallets/second by default and can support higher limits (up to 3,000 wallets/second) upon request. - ### What login options does thirdweb support? We support a lot of authentication options out of the box. For a full list, check out the [playground](https://playground.thirdweb.com/connect/sign-in/button). We also support custom authentication if you want to integrate thirdweb into your own auth system. 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 d2ce951a6f6..3e25d0ab4ac 100644 --- a/apps/portal/src/app/connect/wallet/get-started/page.mdx +++ b/apps/portal/src/app/connect/wallet/get-started/page.mdx @@ -46,12 +46,30 @@ Before diving into the implementation, check out our playground to see all the v - TypeScript - React - React Native - Unity - .NET - Unreal Engine + + + TypeScript + + + + React + + + + React Native + + + + Unity + + + + .NET + + + + Unreal Engine + @@ -577,26 +595,25 @@ Before diving into the implementation, check out our playground to see all the v To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides: -- [Auth strategies](/connect/wallet/sign-in-methods/configure) +- [Other auth strategies](/connect/wallet/sign-in-methods/configure) - [Sponsor Gas](/connect/account-abstraction/overview) - [Implement Sign In with Ethereum](/connect/auth) -- [External Wallets](/connect/wallet/sign-in-methods/external-wallets) -- [Onramp and Payments](/connect/pay/overview) +- [External Wallets](/connect/wallet/sign-in-methods/external-wallets) (e.g. MetaMask, WalletConnect, Coinbase Wallet, etc.) -## Explore Full SDK Documentation +## Explore Full API References For comprehensive guides on implementing the full thirdweb SDK, explore our language-specific documentation: - + diff --git a/apps/portal/src/app/connect/wallet/get-users/page.mdx b/apps/portal/src/app/connect/wallet/get-users/page.mdx index 2eaf12118b4..9b57dbd52e1 100644 --- a/apps/portal/src/app/connect/wallet/get-users/page.mdx +++ b/apps/portal/src/app/connect/wallet/get-users/page.mdx @@ -1,5 +1,6 @@ import { Callout } from "@doc"; import { createMetadata, ArticleIconCard, Stack } from "@doc"; +import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; import { TypeScriptIcon } from "@/icons"; export const metadata = createMetadata({ @@ -11,11 +12,23 @@ export const metadata = createMetadata({ description: "Learn how to fetch in-app wallet users for your application.", }); -# Fetch a Single User +# Fetch Users -From the backend, you are able to get the details of any user within your in app or ecosystem wallet. +From your backend, you can list all your users and fetch the details of any user within your in app or ecosystem wallet. This includes their address, email, phone number, and more. -To get the user details, you can make a `GET` request to the following endpoint: +--- + + + + Single User + All Users + + + + +### Endpoint + +`GET` request to the following endpoint: ``` https://in-app-wallet.thirdweb.com/api/2023-11-30/embedded-wallet/user-details @@ -37,11 +50,13 @@ You can then specify the value to query by, matching the queryBy parameter: ### Authentication -You need to include your ThirdWeb Client Secret in the Authorization header. +You need to include the following headers: -If you are an ecosystem owner, you have to include the `x-ecosystem-id` header and optionally the `x-ecosystem-partner-id` header if the ecosystem is set to partners only. +- `x-secret-key`: Your secret key for authentication +- `x-ecosystem-id` (optional): Your ecosystem ID +- `x-ecosystem-partner-id` (optional): Your ecosystem partner ID -### Example curl Command +### Example Requests Here's an example curl command to fetch user details by email: @@ -120,25 +135,38 @@ If you are using the thirdweb SDK, you can use the `getUser` method to retrieve /> -# Fetch All Users + + + + +### Endpoint + +`GET` request to the following endpoint: -Once you have users connecting to your app through in-app wallets, you can fetch all users through our REST API: ``` https://in-app-wallet.thirdweb.com/api/v1/users ``` -## Headers +### Query Parameters + +- `offset` (optional): Number of users to skip (for pagination) +- `limit` (optional): Maximum number of users to return per request (defaults to 100) + +### Authentication You need to include the following headers: -- `Content-Type`: Must be set to `application/json` - `x-secret-key`: Your secret key for authentication - `x-ecosystem-id` (optional): Your ecosystem ID - `x-ecosystem-partner-id` (optional): Your ecosystem partner ID -## Example curl Command + +For ecosystem wallets, the secret key have to be from the same account as the ecosystem owner. + -Here's an example curl command to pregenerate a thirdweb wallet for the user `user@example.com`: +### Example Requests + +Here's an example curl command to fetch all users: ```bash curl -X GET 'https://in-app-wallet.thirdweb.com/api/v1/users?offset=200&limit=100' \ @@ -146,14 +174,7 @@ curl -X GET 'https://in-app-wallet.thirdweb.com/api/v1/users?offset=200&limit=10 -H 'Content-Type: application/json' ``` -Limit defaults to 100 users per request. - - -For ecosystem wallets, the secret key have to be from the same account as the ecosystem owner. - - - -## Response Format +### Response Format A successful API call returns an array of user objects in the following format: @@ -177,3 +198,6 @@ A successful API call returns an array of user objects in the following format: } ] ``` + + + diff --git a/apps/portal/src/app/connect/wallet/overview/page.mdx b/apps/portal/src/app/connect/wallet/overview/page.mdx index 29d5aabcabd..2fef58e166d 100644 --- a/apps/portal/src/app/connect/wallet/overview/page.mdx +++ b/apps/portal/src/app/connect/wallet/overview/page.mdx @@ -1,100 +1,166 @@ import { ArticleCard, + GithubTemplateCard, + Grid, + ExpandableGrid, + FeatureCard, + createMetadata, + OpenSourceCard, + Stack, + ConnectCard, + SDKCard, Callout, + ArticleIconCard, DocImage, - createMetadata, - FeatureCard, } from "@doc"; -import { WalletsConnectIcon } from "@/icons"; -import customModal from "./assets/custom-modals.png"; -import EcosystemWalletOverview from "./assets/ecosystem-wallet.png"; +import { + TypeScriptIcon, + ReactIcon, + DotNetIcon, + UnityIcon, + UnrealEngineIcon, +} from "@/icons"; +import { cn } from "@/lib/utils"; +import Link from "next/link"; +import { Button } from "@/components/ui/button"; +import SupportedChains from "../../../_images/supported-chains.png"; +import { + FuelIcon, + MonitorCheckIcon, + WalletCardsIcon, + UserLockIcon, + ExternalLinkIcon, + WalletIcon, + PencilIcon, + ShieldCheckIcon, + PiggyBankIcon, + GlobeIcon, + ComponentIcon, + CodeIcon, + ApiIcon, + WebhookIcon, + IdCardIcon, + HandCoinsIcon, + MonitorSmartphoneIcon, +} from "lucide-react"; export const metadata = createMetadata({ + title: "thirdweb Connect", + description: "Everything you need for your web3 frontend.", image: { - title: "thirdweb Wallets", - icon: "wallets", + title: "thirdweb Connect", + icon: "thirdweb", }, - title: "thirdweb Wallets | thirdweb", - description: - "thirdweb wallets provide a comprehensive toolkit for connecting users to applications and games. We offer a way to let users sign in however you want. Be it, connecting an external wallet, or creating a seamless login experiences for brand new users, or enabling you to own your web3 identity stack, we have a solution for you.", }); -# Overview +# Wallets + +Wallets is a complete toolkit for connecting any user to your application. It includes **customizable components** for onboarding, **embedded wallets** , **account abstraction** +for gasless transactions, **server wallets** for developers to carry out transactions, and a secure **non-custodial key management system**. -A flexible sign-up flow that accommodates different preferences is critical when onboarding users. thirdweb offers multiple wallet solutions to meet various integration needs: +## Live Playground -1. **External Wallets** - Traditional wallet connection with 500+ providers -2. **In-App Wallet** - Seamless onboarding with email, social, and passkey options -3. **Ecosystem Wallet** - Branded wallet service for cross-application authentication + + + - + -### Features +## Features
} /> - - - - - } + /> + + } + /> + + } + /> + + } + /> + + + } + /> + + } + /> + + } + /> + +
+ +## Quick Starts + + + - + - + + - + -### Solutions +## Supported Chains -| SOLUTION | BEST FOR | PRICING | -| ---------------- | ------------------------------------------------------- | -------------------------------------------------------------------- | -| External Wallets | Applications needing traditional EOA wallet integration | Free | -| In-App Wallet | Mainstream applications requiring seamless onboarding | [Free up to 1,000 MAW, then $0.02/MAW](https://thirdweb.com/pricing) | -| Ecosystem Wallet | Organizations building branded wallet networks | [$250/mo](https://thirdweb.com/pricing) | +Wallets are supported on EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=connect-sdk). -### Use Cases + -- **Gaming & Entertainment** - Cross-game accounts and gasless transactions -- **Enterprise & Loyalty** - Custom authentication and user attribution -- **DeFi & NFT** - Traditional wallet connection and fiat on-ramps -- **Chain Ecosystems** - Unified accounts across chain applications +## Starter Kits & demos - +View all available starter kits, demos, and templates on Github. - + diff --git a/apps/portal/src/app/connect/wallet/pregenerate-wallets/page.mdx b/apps/portal/src/app/connect/wallet/pregenerate-wallets/page.mdx index 5e343b28f69..f2931425fef 100644 --- a/apps/portal/src/app/connect/wallet/pregenerate-wallets/page.mdx +++ b/apps/portal/src/app/connect/wallet/pregenerate-wallets/page.mdx @@ -12,7 +12,7 @@ export const metadata = createMetadata({ # Pregenerate Wallets -## What is Wallet Pregeneration? +### What is Wallet Pregeneration? Wallet pregeneration is a technique where you create wallets for users before they actually sign up or authenticate. This allows you to: @@ -21,18 +21,17 @@ Wallet pregeneration is a technique where you create wallets for users before th 3. Pre-fund wallets with tokens or NFTs before users claim them 4. Create smoother user experiences for gaming and other applications -## Why Use Wallet Pregeneration? +### Why Use Wallet Pregeneration? -### Pre-funding Capability You can distribute assets to wallets before users claim them, enabling: - Pre-loaded game assets - Welcome bonus tokens - Promotional NFTs - Airdrops -### Better User Experience -- Users don't have to wait for wallet to be created during signup -- Reduced failed wallet creation due to network issues +--- + +## Endpoint To pregenerate an in-app or ecosystem wallet wallet, you can make a `POST` request to the following endpoint: @@ -79,7 +78,7 @@ You need to include the following headers: - `x-ecosystem-id` (optional): Your ecosystem ID - `x-ecosystem-partner-id` (optional): Your ecosystem partner ID -## Example curl Command +## Example Request Here's an example curl command to pregenerate a thirdweb wallet for the user `user@example.com`: @@ -115,9 +114,9 @@ A successful API call returns a JSON object in the following format: } ``` - -Use [`predictSmartAccountAddress`](/references/typescript/v5/predictSmartAccountAddress) to generate the corresponding smart wallet address. -The `address` field always corresponds to the EOA address that has been pregenerated. + +Use [`predictSmartAccountAddress`](/references/typescript/v5/predictSmartAccountAddress) to generate the corresponding smart contract wallet address. +The `address` field always corresponds to the EOA address (admin wallet) that has been pregenerated. @@ -127,4 +126,4 @@ Pre-generating is independent and doesn't change the user's experience. Your users can continue to login as per usual. When they do, they will be assigned the pregenerated wallet. -For more information on signing in, see [Sign In](/connect/wallet/sign-in-methods/configure). +For more information on signing in, see the [Connect Wallets](/connect/wallet/sign-in-methods/configure) section. 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 1e18ef7b408..accb9605969 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 @@ -11,52 +11,19 @@ import { WalletsConnectIcon } from "@/icons" import EcosystemSocialConfig from '../assets/social-config.png' +import { AuthMethodsTabs } from "@/components/Document/AuthMethodsTabs" -# Sign-In Methods +# Create wallets -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. +thirdweb supports creating wallets with various authentication methods: social logins, email, SMS, passkeys, and more. For every user, thirdweb generates a [non-custodial wallet](/connect/wallet/security) behind the scenes. -## Platform specific guides +--- -To enable a given sign-in method for the thirdweb wallet, refer to the following guides: +## Interactive Guide - - - - {/* TODO: Link to react native getting started for in app wallet */} - - - - - - -## Supported Methods +Choose your authentication method and see the code for your platform: - + ## Bring your own auth system diff --git a/apps/portal/src/app/connect/wallet/user-management/get-user-profiles/page.mdx b/apps/portal/src/app/connect/wallet/user-management/get-user-profiles/page.mdx index 62a4b624c31..5d410fa43c0 100644 --- a/apps/portal/src/app/connect/wallet/user-management/get-user-profiles/page.mdx +++ b/apps/portal/src/app/connect/wallet/user-management/get-user-profiles/page.mdx @@ -154,7 +154,7 @@ You need to include your ThirdWeb Client Secret in the Authorization header. If you are an ecosystem owner, you have to include the `x-ecosystem-id` header and optionally the `x-ecosystem-partner-id` header if the ecosystem is set to partners only. -### Example curl Command +### Example Requests Here's an example curl command to fetch user details by email: diff --git a/apps/portal/src/app/connect/wallet/user-management/link-multiple-identity/page.mdx b/apps/portal/src/app/connect/wallet/user-management/link-multiple-identity/page.mdx index de8efb90643..eafe05cac70 100644 --- a/apps/portal/src/app/connect/wallet/user-management/link-multiple-identity/page.mdx +++ b/apps/portal/src/app/connect/wallet/user-management/link-multiple-identity/page.mdx @@ -1,4 +1,4 @@ -import { createMetadata, ArticleIconCard, Callout } from "@doc"; +import { createMetadata, ArticleIconCard, Callout, Tabs, TabsList, TabsTrigger, TabsContent } from "@doc"; import { ReactIcon, TypeScriptIcon, @@ -22,78 +22,245 @@ export const metadata = createMetadata({ thirdweb Wallets allow users to tie the same wallet address to multiple social identities. Developers can programmatically link additional identities at any point in their user journey. -## Link a new identity - -When linking two identities, both identities will now be linked to the same wallet. - - - If the account that is is already linked to this or another wallet, this will throw an error. - - - -### In App Wallet - -
- - - - - -
- -### Ecosystem Wallet - -
- - - - - -
+--- + + + + + TypeScript + + + + React + + + + React Native + + + + .NET + + + + Unity + + + + +**OAuth Authentication (Discord, Google, Apple, etc.)** + +```typescript +import { linkProfile } from "thirdweb/wallets"; + +// optionally specify the ecosystem if you're linking an ecosystem wallet +await linkProfile({ client, strategy: "discord" }); +``` + +**OTP Authentication (Email, Phone)** + +```typescript +import { linkProfile, preAuthenticate } from "thirdweb/wallets"; + +// For email OTP +const sendEmail = async () => { + await preAuthenticate({ + client, + strategy: "email", + email: "john.doe@example.com", + }); +}; + +// Then link with verification code +await linkProfile({ + client, + strategy: "email", + email: "john.doe@example.com", + verificationCode: "123456", +}); +``` + + + +**OAuth Authentication (Discord, Google, Apple, etc.)** + +```tsx +import { useLinkProfile } from "thirdweb/react"; + +const { mutate: linkProfile } = useLinkProfile(); + +const handleOAuthLink = () => { + linkProfile({ + client, + strategy: "discord", + }); +}; +``` + +**OTP Authentication (Email, Phone)** + +```tsx +import { useLinkProfile } from "thirdweb/react"; +import { preAuthenticate } from "thirdweb/wallets"; + +const { mutate: linkProfile } = useLinkProfile(); + +// send a verification email first +const sendEmail = async () => { + const email = await preAuthenticate({ + client, + strategy: "email", + email: "john.doe@example.com", + }); +}; + +// then link the profile with the verification code +const onClick = (code: string) => { + linkProfile({ + client, + strategy: "email", + email: "john.doe@example.com", + verificationCode: code, + }); +}; +``` + + + +**OAuth Authentication (Discord, Google, Apple, etc.)** + +```tsx +import { useLinkProfile } from "thirdweb/react"; + +const { mutate: linkProfile } = useLinkProfile(); + +const handleOAuthLink = () => { + linkProfile({ + client, + strategy: "google", + }); +}; +``` + +**OTP Authentication (Email, Phone)** + +```tsx +import { useLinkProfile } from "thirdweb/react"; +import { preAuthenticate } from "thirdweb/wallets"; + +const { mutate: linkProfile } = useLinkProfile(); + +// send a verification email first +const sendEmail = async () => { + await preAuthenticate({ + client, + strategy: "email", + email: "john.doe@example.com", + }); +}; + +// then link the profile with the verification code +const linkWithCode = (code: string) => { + linkProfile({ + client, + strategy: "email", + email: "john.doe@example.com", + verificationCode: code, + }); +}; +``` + + + +```csharp +// Your main InAppWallet account, already authenticated and connected +InAppWallet mainInAppWallet = ... + +// Prepare Telegram +var socialWallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.Telegram); +// Link Telegram +_ = await mainWallet.LinkAccount(walletToLink: socialWallet,); + +// Prepare Phone +var phoneWallet = await InAppWallet.Create(client: client, phoneNumber: "+1234567890"); +_ = await phoneWallet.SendOTP(); +var otp = Console.ReadLine(); +// Link Phone +_ = await mainWallet.LinkAccount(walletToLink: phoneWallet, otp: otp); +``` + + + +```csharp +// Your main InAppWallet account, already authenticated and connected +InAppWallet mainInAppWallet = ... + +// An InAppWallet with a new auth provider to be linked to the main account, not connected +InAppWallet walletToLink = await InAppWallet.Create(client: Client, authProvider: AuthProvider.Telegram); + +// Link Account - Headless version +var linkedAccounts = await mainInAppWallet.LinkAccount(walletToLink: walletToLink); + +// Link Account - Unity wrapper version +var linkedAccounts = await ThirdwebManager.Instance.LinkAccount(mainInAppWallet, walletToLink); +``` + + ## Retrieve Linked Profiles Once linked, you can retrieve the user profiles via either identity. -For more information, see [Getting User Profiles](/connect/wallet/user-management/get-user-profiles). + + + + + TypeScript + + + + React + + + + .NET + + + + +```typescript +import { getProfiles } from "thirdweb/wallets"; + +const profiles = await getProfiles({ + client, + // optionally sepcify the ecosystem for ecosystem wallets +}); + +console.log(profiles[0].type); // will be "email", "phone", "google", "discord", etc +console.log(profiles[0].details.email); +console.log(profiles[0].details.phone); +``` + + + +```tsx +import { useProfiles } from "thirdweb/react"; + +const { data: profiles } = useProfiles({ + client, +}); + +console.log("Type:", profiles[0].type); // "discord" +console.log("Email:", profiles[0].details.email); // "john.doe@example.com" +``` + + + +```csharp +List linkedAccounts = await inAppWallet.GetLinkedAccounts(); +``` + + + +For fetching linked profile information from the backend, see [Fetch Users](/connect/wallet/get-users). 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 index 61abf14f953..66c8cb89324 100644 --- 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 @@ -205,7 +205,7 @@ function App() { ### 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) +- **Missing wallets**: Check that you've added all wallet types to [supported wallets](https://portal.thirdweb.com/connect/external-wallets) - **Chain not available**: Verify that the chain is properly configured and [supported by thirdweb](https://thirdweb.com/chainlist) ### Support Resources diff --git a/apps/portal/src/app/nebula/get-started/page.mdx b/apps/portal/src/app/nebula/get-started/page.mdx index 69f82f416c8..b756d9c0f70 100644 --- a/apps/portal/src/app/nebula/get-started/page.mdx +++ b/apps/portal/src/app/nebula/get-started/page.mdx @@ -105,7 +105,7 @@ async function handleNebulaResponse(response) { secretKey: process.env.THIRDWEB_SECRET_KEY, }); - // You can use any wallet- see https://portal.thirdweb.com/typescript/v5/supported-wallets + // You can use any wallet- see https://portal.thirdweb.com/connect/external-wallets const account = await generateAccount({ client }); if (response.actions && response.actions.length > 0) { diff --git a/apps/portal/src/app/page.tsx b/apps/portal/src/app/page.tsx index 0d03b246ce2..b87dca24fe5 100644 --- a/apps/portal/src/app/page.tsx +++ b/apps/portal/src/app/page.tsx @@ -115,14 +115,14 @@ function ReferenceSection() { /> diff --git a/apps/portal/src/app/react/v5/components/ConnectEmbed/page.mdx b/apps/portal/src/app/react/v5/components/ConnectEmbed/page.mdx index 852fb203a1c..5b9faa66304 100644 --- a/apps/portal/src/app/react/v5/components/ConnectEmbed/page.mdx +++ b/apps/portal/src/app/react/v5/components/ConnectEmbed/page.mdx @@ -71,7 +71,7 @@ function Example() { diff --git a/apps/portal/src/app/react/v5/connecting-wallets/hooks/page.mdx b/apps/portal/src/app/react/v5/connecting-wallets/hooks/page.mdx index 16aadeff54b..b77146fadca 100644 --- a/apps/portal/src/app/react/v5/connecting-wallets/hooks/page.mdx +++ b/apps/portal/src/app/react/v5/connecting-wallets/hooks/page.mdx @@ -14,7 +14,7 @@ export const metadata = createMetadata({ # Connection Hooks -You can build a completely custom UI for connecting the wallet using the [`useConnect`](/references/typescript/v5/useConnect) hook to connect any of [supported wallets](/typescript/v5/supported-wallets). +You can build a completely custom UI for connecting the wallet using the [`useConnect`](/references/typescript/v5/useConnect) hook to connect any of [supported wallets](/connect/external-wallets). ```tsx import { createThirdwebClient } from "thirdweb"; diff --git a/apps/portal/src/app/react/v5/connecting-wallets/ui-components/page.mdx b/apps/portal/src/app/react/v5/connecting-wallets/ui-components/page.mdx index 202f29bd305..36b2a7bce4e 100644 --- a/apps/portal/src/app/react/v5/connecting-wallets/ui-components/page.mdx +++ b/apps/portal/src/app/react/v5/connecting-wallets/ui-components/page.mdx @@ -106,7 +106,7 @@ The SDK supports 500+ wallets out of the box, all you need to pass is their id. diff --git a/apps/portal/src/app/react/v5/migrate/installation/page.mdx b/apps/portal/src/app/react/v5/migrate/installation/page.mdx index 0f04a0d66c8..0ad22de56b2 100644 --- a/apps/portal/src/app/react/v5/migrate/installation/page.mdx +++ b/apps/portal/src/app/react/v5/migrate/installation/page.mdx @@ -84,7 +84,7 @@ import { ThirdwebProvider } from "thirdweb/react"; // v5 Similar to v4's `ConnectWallet` component, the latest version has the [`ConnectButton`](/connect/sign-in/ConnectButton) component which has the same functionality. However, unlike with v4 where the number of supported wallets is limited (about 20), and adding more wallets mean your app becomes heavier, -the SDK v5 supports [over 300 wallets](/typescript/v5/supported-wallets) with virtually no impact to your application. +the SDK v5 supports [over 300 wallets](/connect/external-wallets) with virtually no impact to your application. Here's how you use the new `ConnectButton`: diff --git a/apps/portal/src/app/react/v5/sidebar.tsx b/apps/portal/src/app/react/v5/sidebar.tsx index 09860856c87..49158b17b7b 100644 --- a/apps/portal/src/app/react/v5/sidebar.tsx +++ b/apps/portal/src/app/react/v5/sidebar.tsx @@ -51,7 +51,7 @@ export const sidebar: SideBar = { name: "Ecosystems Wallets", }, { - href: "/typescript/v5/supported-wallets", + href: "/connect/external-wallets", name: "External Wallets", }, { diff --git a/apps/portal/src/app/typescript/v5/connecting-wallets/page.mdx b/apps/portal/src/app/typescript/v5/connecting-wallets/page.mdx index 511911abf9a..344b7c65907 100644 --- a/apps/portal/src/app/typescript/v5/connecting-wallets/page.mdx +++ b/apps/portal/src/app/typescript/v5/connecting-wallets/page.mdx @@ -24,7 +24,7 @@ The SDK supports 500+ wallets out of the box, all you need to pass is their id. diff --git a/apps/portal/src/app/typescript/v5/wallets/page.mdx b/apps/portal/src/app/typescript/v5/wallets/page.mdx index 673bf3f1f84..5377841f4ac 100644 --- a/apps/portal/src/app/typescript/v5/wallets/page.mdx +++ b/apps/portal/src/app/typescript/v5/wallets/page.mdx @@ -34,7 +34,7 @@ See also: [Account (ethereum.org)](https://ethereum.org/en/glossary/#account) diff --git a/apps/portal/src/components/Document/AuthMethodsTabs.tsx b/apps/portal/src/components/Document/AuthMethodsTabs.tsx new file mode 100644 index 00000000000..7a924163f4b --- /dev/null +++ b/apps/portal/src/components/Document/AuthMethodsTabs.tsx @@ -0,0 +1,717 @@ +/* eslint-disable @next/next/no-img-element */ +"use client"; + +import React, { useState } from "react"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { getSocialIcon } from "thirdweb/wallets/in-app"; +import { cn } from "@/lib/utils"; +import { CodeClient, CodeLoading } from "../code/code.client"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { + ReactIcon, + TypeScriptIcon, + UnityIcon, + DotNetIcon, + UnrealEngineIcon, +} from "@/icons"; + +export type AuthMethod = + | "email" + | "phone" + | "google" + | "apple" + | "facebook" + | "discord" + | "x" + | "telegram" + | "farcaster" + | "github" + | "passkey" + | "wallet" + | "guest" + | "jwt" + | "auth_endpoint"; + +export type Platform = "typescript" | "react" | "react-native" | "dotnet" | "unity" | "unreal"; + +const authMethods: { id: AuthMethod; label: string; description: string }[] = [ + { id: "email", label: "Email", description: "Email OTP verification" }, + { id: "phone", label: "Phone", description: "SMS OTP verification" }, + { id: "google", label: "Google", description: "Google OAuth" }, + { id: "apple", label: "Apple", description: "Apple OAuth" }, + { id: "facebook", label: "Facebook", description: "Facebook OAuth" }, + { id: "discord", label: "Discord", description: "Discord OAuth" }, + { id: "x", label: "X (Twitter)", description: "X OAuth" }, + { id: "telegram", label: "Telegram", description: "Telegram OAuth" }, + { id: "farcaster", label: "Farcaster", description: "Farcaster OAuth" }, + { id: "github", label: "GitHub", description: "GitHub OAuth" }, + { id: "passkey", label: "Passkey", description: "WebAuthn passkey" }, + { id: "wallet", label: "Wallet", description: "External wallet authentication" }, + { id: "guest", label: "Guest", description: "Anonymous authentication" }, + { id: "jwt", label: "Custom JWT", description: "Custom JWT authentication" }, + { id: "auth_endpoint", label: "Custom Auth", description: "Custom auth endpoint" }, +]; + +const platforms: { id: Platform; label: string; icon: React.ComponentType }[] = [ + { id: "typescript", label: "TypeScript", icon: TypeScriptIcon }, + { id: "react", label: "React", icon: ReactIcon }, + { id: "react-native", label: "React Native", icon: ReactIcon }, + { id: "dotnet", label: ".NET", icon: DotNetIcon }, + { id: "unity", label: "Unity", icon: UnityIcon }, + { id: "unreal", label: "Unreal Engine", icon: UnrealEngineIcon }, +]; + +const getCodeSnippet = (authMethod: AuthMethod, platform: Platform): string => { + switch (platform) { + case "typescript": + return getTypeScriptSnippet(authMethod); + case "react": + return getReactSnippet(authMethod); + case "react-native": + return getReactSnippet(authMethod); + case "dotnet": + return getDotNetSnippet(authMethod); + case "unity": + return getUnitySnippet(authMethod); + case "unreal": + return getUnrealSnippet(authMethod); + default: + return ""; + } +}; + +const getTypeScriptSnippet = (authMethod: AuthMethod): string => { + const baseSetup = `import { createThirdwebClient } from "thirdweb"; +import { inAppWallet } from "thirdweb/wallets"; + +const client = createThirdwebClient({ clientId: "your-client-id" }); +const wallet = inAppWallet(); + +`; + +const baseEnding = `\n\n// Once connected, you can use the account to send transactions +console.log("Connected as:", account?.address);`; + + switch (authMethod) { + case "email": + return baseSetup + `// Email authentication +import { preAuthenticate } from "thirdweb/wallets/in-app"; + +// Send OTP +await preAuthenticate({ + client, + strategy: "email", + email: "user@example.com", +}); + +// Connect with verification code +const account = await wallet.connect({ + client, + strategy: "email", + email: "user@example.com", + verificationCode: "123456", +});` + baseEnding; + + case "phone": + return baseSetup + `// Phone authentication +import { preAuthenticate } from "thirdweb/wallets/in-app"; + +// Send OTP +await preAuthenticate({ + client, + strategy: "phone", + phoneNumber: "+1234567890", +}); + +// Connect with verification code +const account = await wallet.connect({ + client, + strategy: "phone", + phoneNumber: "+1234567890", + verificationCode: "123456", +});` + baseEnding; + + case "google": + case "apple": + case "facebook": + case "discord": + case "x": + case "telegram": + case "farcaster": + case "github": + return baseSetup + `// ${authMethod.charAt(0).toUpperCase() + authMethod.slice(1)} OAuth +const account = await wallet.connect({ + client, + strategy: "${authMethod}", +});` + baseEnding; + + case "passkey": + return baseSetup + `// Passkey authentication +import { hasStoredPasskey } from "thirdweb/wallets/in-app"; + +const hasPasskey = await hasStoredPasskey(client); +const account = await wallet.connect({ + client, + strategy: "passkey", + type: hasPasskey ? "sign-in" : "sign-up", +});` + baseEnding; + + case "wallet": + return baseSetup + `// External wallet authentication +import { createWallet } from "thirdweb/wallets"; +import { sepolia } from "thirdweb/chains"; + +const account = await wallet.connect({ + client, + strategy: "wallet", + wallet: createWallet("io.metamask"), + chain: sepolia, +});` + baseEnding; + + case "guest": + return baseSetup + `// Guest authentication +const account = await wallet.connect({ + client, + strategy: "guest", +});` + baseEnding; + + case "jwt": + return baseSetup + `// Custom JWT authentication +const account = await wallet.connect({ + client, + strategy: "jwt", + jwt: "your-jwt-token", +});` + baseEnding; + + case "auth_endpoint": + return baseSetup + `// Custom auth endpoint +const account = await wallet.connect({ + client, + strategy: "auth_endpoint", + payload: "your-auth-payload", +});` + baseEnding; + + default: + return baseSetup + baseEnding; + } +}; + +const getReactSnippet = (authMethod: AuthMethod): string => { + const baseSetup = `import { createThirdwebClient } from "thirdweb"; +import { ThirdwebProvider, useConnect, useActiveAccount } from "thirdweb/react"; +import { inAppWallet } from "thirdweb/wallets"; + +const client = createThirdwebClient({ clientId: "your-client-id" }); +const wallet = inAppWallet(); + +// 1. Wrap your app with ThirdwebProvider +function App() { + return ( + + + + ); +} + +// 2. Custom hook approach +function MyComponent() { + const { connect } = useConnect(); + // Once connected, you can access the active account + const activeAccount = useActiveAccount(); + console.log("Connected as:", activeAccount?.address); + + const handleLogin = async () => { + await connect(async () => { +`; + + const baseEnding = ` return wallet; + }); + }; + + return ( + + ); +} + +// 3. Or use prebuilt UI components (ConnectButton/ConnectEmbed) +function PrebuiltUIExample() { + const walletWithAuth = inAppWallet({ + auth: { options: ["${authMethod}"] }, + metadata: { + name: "My App", + icon: "https://example.com/icon.png", + image: { + src: "https://example.com/logo.png", + alt: "My logo", + width: 100, + height: 100, + }, + }, + }); + + return ( + + ); +}`; + + // Specialised snippets for email and phone where OTP sending is a separate step + if (authMethod === "email") { + return `import { createThirdwebClient } from "thirdweb"; +import { ThirdwebProvider, useConnect, useActiveAccount } from "thirdweb/react"; +import { inAppWallet } from "thirdweb/wallets"; +import { preAuthenticate } from "thirdweb/wallets/in-app"; + +const client = createThirdwebClient({ clientId: "your-client-id" }); +const wallet = inAppWallet(); + +// 1. Wrap your app with ThirdwebProvider +function App() { + return ( + + + + ); +} + +// 2. Custom hook approach +function MyComponent() { + const { connect } = useConnect(); + + // Once connected, you can access the active account + const activeAccount = useActiveAccount(); + console.log("Connected as:", activeAccount?.address); + + const sendOtp = async (email: string) => { + // send email verification code + await preAuthenticate({ + client, + strategy: "email", + email, // ex: user@example.com + }); + }; + + const handleLogin = async (email: string, verificationCode: string) => { + // verify email and connect + await connect(async () => { + await wallet.connect({ + client, + strategy: "email", + email, + verificationCode, + }); + return wallet; + }); + }; + + return ( + <> + + + + ); +} + +// 3. Or use prebuilt UI components (ConnectButton/ConnectEmbed) +const walletWithAuth = inAppWallet({ + auth: { options: ["email"] }, + metadata: { + name: "My App", + icon: "https://example.com/icon.png", + image: { + src: "https://example.com/logo.png", + alt: "My logo", + width: 100, + height: 100, + }, + }, +}); + +function PrebuiltUIExample() { + // Once connected, you can access the active account + const activeAccount = useActiveAccount(); + console.log("Connected as:", activeAccount?.address); + + return ( + + ); +}`; + } + + if (authMethod === "phone") { + return `import { createThirdwebClient } from "thirdweb"; +import { ThirdwebProvider, useConnect } from "thirdweb/react"; +import { inAppWallet } from "thirdweb/wallets"; +import { preAuthenticate } from "thirdweb/wallets/in-app"; + +const client = createThirdwebClient({ clientId: "your-client-id" }); +const wallet = inAppWallet(); + +// 1. Wrap your app with ThirdwebProvider +function App() { + return ( + + + + ); +} + +// 2. Custom hook approach +function MyComponent() { + const { connect } = useConnect(); + + const sendOtp = async (phoneNumber: string) => { + // send SMS verification code + await preAuthenticate({ + client, + strategy: "phone", + phoneNumber, // ex: +1234567890 + }); + }; + + const handleLogin = async (phoneNumber: string, verificationCode: string) => { + // verify phone number and connect + await connect(async () => { + await wallet.connect({ + client, + strategy: "phone", + phoneNumber, + verificationCode, + }); + return wallet; + }); + }; + + return ( + <> + + + + ); +} + +// 3. Or use prebuilt UI components (ConnectButton/ConnectEmbed) +function PrebuiltUIExample() { + const walletWithAuth = inAppWallet({ + auth: { options: ["phone"] }, + metadata: { + name: "My App", + icon: "https://example.com/icon.png", + image: { + src: "https://example.com/logo.png", + alt: "My logo", + width: 100, + height: 100, + }, + }, + }); + + return ( + + ); +}`; + } + + // All other auth methods follow the previous pattern + switch (authMethod) { + case "google": + case "apple": + case "facebook": + case "discord": + case "x": + case "telegram": + case "farcaster": + case "github": + return baseSetup + ` await wallet.connect({\n client,\n strategy: "${authMethod}",\n });\n` + baseEnding; + + case "passkey": + return baseSetup + ` const hasPasskey = await hasStoredPasskey(client);\n await wallet.connect({\n client,\n strategy: "passkey",\n type: hasPasskey ? "sign-in" : "sign-up",\n });\n` + baseEnding; + + case "wallet": + return baseSetup + ` await wallet.connect({\n client,\n strategy: "wallet",\n wallet: createWallet("io.metamask"),\n chain: sepolia,\n });\n` + baseEnding; + + case "guest": + return baseSetup + ` await wallet.connect({\n client,\n strategy: "guest",\n });\n` + baseEnding; + + case "jwt": + return baseSetup + ` await wallet.connect({\n client,\n strategy: "jwt",\n jwt: "your-jwt-token",\n });\n` + baseEnding; + + case "auth_endpoint": + return baseSetup + ` await wallet.connect({\n client,\n strategy: "auth_endpoint",\n payload: "your-auth-payload",\n });\n` + baseEnding; + + default: + return baseSetup + baseEnding; + } +}; + +const getDotNetSnippet = (authMethod: AuthMethod): string => { + const baseSetup = `using Thirdweb; + +var client = ThirdwebClient.Create(clientId: "your-client-id"); +`; + + switch (authMethod) { + case "email": + return baseSetup + `// Email authentication +var wallet = await InAppWallet.Create(client: client, email: "user@example.com"); +await wallet.SendOTP(); +var address = await wallet.LoginWithOtp("123456");`; + + case "phone": + return baseSetup + `// Phone authentication +var wallet = await InAppWallet.Create(client: client, phoneNumber: "+1234567890"); +await wallet.SendOTP(); +var address = await wallet.LoginWithOtp("123456");`; + + case "google": + case "apple": + case "facebook": + case "discord": + case "x": + case "telegram": + case "farcaster": + case "github": + const providerMap: Record = { + google: "Google", + apple: "Apple", + facebook: "Facebook", + discord: "Discord", + x: "X", + telegram: "Telegram", + farcaster: "Farcaster", + github: "Github", + }; + return baseSetup + `// ${providerMap[authMethod]} OAuth +var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.${providerMap[authMethod]}); +var address = await wallet.LoginWithOauth( + isMobile: false, + browserOpenAction: (url) => { + var psi = new ProcessStartInfo { FileName = url, UseShellExecute = true }; + _ = Process.Start(psi); + }, + mobileRedirectScheme: "myapp://" +);`; + + case "guest": + return baseSetup + `// Guest authentication +var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.Guest); +var address = await wallet.LoginWithGuest();`; + + case "jwt": + return baseSetup + `// Custom JWT authentication +var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.JWT); +var address = await wallet.LoginWithCustomAuth(jwt: "your-jwt-token");`; + + case "auth_endpoint": + return baseSetup + `// Custom auth endpoint +var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.AuthEndpoint); +var address = await wallet.LoginWithAuthEndpoint(payload: "your-auth-payload");`; + + case "wallet": + return baseSetup + `// External wallet authentication +var externalWallet = await PrivateKeyWallet.Create(client, "your-private-key"); +var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.Siwe, siweSigner: externalWallet); +var address = await wallet.LoginWithSiwe(chainId: 1);`; + + default: + return baseSetup + `// ${authMethod} authentication +var wallet = await InAppWallet.Create(client: client);`; + } +}; + +const getUnitySnippet = (authMethod: AuthMethod): string => { + const baseSetup = `using Thirdweb; + +`; + + switch (authMethod) { + case "email": + return baseSetup + `// Email authentication +var inAppWalletOptions = new InAppWalletOptions(email: "user@example.com"); +var options = new WalletOptions( + provider: WalletProvider.InAppWallet, + chainId: 1, + inAppWalletOptions: inAppWalletOptions +); +var wallet = await ThirdwebManager.Instance.ConnectWallet(options);`; + + case "phone": + return baseSetup + `// Phone authentication +var inAppWalletOptions = new InAppWalletOptions(phoneNumber: "+1234567890"); +var options = new WalletOptions( + provider: WalletProvider.InAppWallet, + chainId: 1, + inAppWalletOptions: inAppWalletOptions +); +var wallet = await ThirdwebManager.Instance.ConnectWallet(options);`; + + case "google": + case "apple": + case "facebook": + case "discord": + case "x": + case "telegram": + case "farcaster": + case "github": + const providerMap: Record = { + google: "Google", + apple: "Apple", + facebook: "Facebook", + discord: "Discord", + x: "X", + telegram: "Telegram", + farcaster: "Farcaster", + github: "Github", + }; + return baseSetup + `// ${providerMap[authMethod]} OAuth +var inAppWalletOptions = new InAppWalletOptions(authprovider: AuthProvider.${providerMap[authMethod]}); +var options = new WalletOptions( + provider: WalletProvider.InAppWallet, + chainId: 1, + inAppWalletOptions: inAppWalletOptions +); +var wallet = await ThirdwebManager.Instance.ConnectWallet(options);`; + + case "guest": + return baseSetup + `// Guest authentication +var inAppWalletOptions = new InAppWalletOptions(authprovider: AuthProvider.Guest); +var options = new WalletOptions( + provider: WalletProvider.InAppWallet, + chainId: 1, + inAppWalletOptions: inAppWalletOptions +); +var wallet = await ThirdwebManager.Instance.ConnectWallet(options);`; + + case "wallet": + return baseSetup + `// External wallet authentication +var externalWallet = await PrivateKeyWallet.Create(client, "your-private-key"); +var inAppWalletOptions = new InAppWalletOptions(authprovider: AuthProvider.Siwe, siweSigner: externalWallet); +var options = new WalletOptions( + provider: WalletProvider.InAppWallet, + chainId: 1, + inAppWalletOptions: inAppWalletOptions +); +var wallet = await ThirdwebManager.Instance.ConnectWallet(options);`; + + default: + return baseSetup + `// ${authMethod} authentication +var inAppWalletOptions = new InAppWalletOptions(); +var options = new WalletOptions( + provider: WalletProvider.InAppWallet, + chainId: 1, + inAppWalletOptions: inAppWalletOptions +); +var wallet = await ThirdwebManager.Instance.ConnectWallet(options);`; + } +}; + +const getUnrealSnippet = (authMethod: AuthMethod): string => { + return `// ${authMethod.charAt(0).toUpperCase() + authMethod.slice(1)} authentication in Unreal Engine +// Use the Blueprint nodes for ${authMethod} authentication +// See the Unreal Engine documentation for specific Blueprint setup`; +}; + +function AuthMethodsTabsContent() { + const [selectedAuth, setSelectedAuth] = useState("email"); + + return ( +
+ {/* Auth Method Selection */} +
+

1. Choose Authentication Method

+
+ {authMethods.map((method) => ( + + ))} +
+
+ + {/* Platform Tabs */} +
+

2. Select Platform

+ + + {platforms.map((platform) => { + const IconComponent = platform.icon; + return ( + + + + + {platform.label} + + ); + })} + + + {platforms.map((platform) => { + const IconComponent = platform.icon; + return ( + +
+
+ + + +

+ {authMethods.find(m => m.id === selectedAuth)?.label} authentication with {platform.label} +

+
+
+ } + className="text-sm" + /> +
+
+ + ); + })} + +
+
+ ); +} + +const queryClient = new QueryClient(); + +export function AuthMethodsTabs() { + return ( + + + + ); +} \ No newline at end of file diff --git a/apps/portal/src/components/others/AllSupportedWallets.tsx b/apps/portal/src/components/others/AllSupportedWallets.tsx index 0848dbd665d..c00c0627788 100644 --- a/apps/portal/src/components/others/AllSupportedWallets.tsx +++ b/apps/portal/src/components/others/AllSupportedWallets.tsx @@ -33,7 +33,7 @@ export async function AllSupportedWallets() { {w.name}