diff --git a/apps/portal/src/app/connect/pay/get-started/page.mdx b/apps/portal/src/app/connect/pay/get-started/page.mdx index c631050fb09..8d597f85ff8 100644 --- a/apps/portal/src/app/connect/pay/get-started/page.mdx +++ b/apps/portal/src/app/connect/pay/get-started/page.mdx @@ -46,7 +46,7 @@ Log in to [the thirdweb dashboard](https://thirdweb.com/team). Navigate to the * ## Option 1: ConnectButton -Pay is available by default with our `ConnectButton` component. When users log in with Connect, they'll be able to onramp and purchase crypto directly from the logged in Connect interface. You can read more about `ConnectButton` [in this guide](/connect/sign-in/ConnectButton). +Universal Bridge is available by default with our `ConnectButton` component. When users log in with Connect, they'll be able to onramp and purchase crypto directly from the logged in Connect interface. You can read more about `ConnectButton` [in this guide](/connect/sign-in/ConnectButton). ```tsx import { ThirdwebProvider, ConnectButton } from "thirdweb/react"; diff --git a/apps/portal/src/app/connect/pay/testing-pay/page.mdx b/apps/portal/src/app/connect/pay/testing-pay/page.mdx index 1d9dede41b3..1d88ab73481 100644 --- a/apps/portal/src/app/connect/pay/testing-pay/page.mdx +++ b/apps/portal/src/app/connect/pay/testing-pay/page.mdx @@ -3,7 +3,7 @@ import { createMetadata, Callout } from "@doc"; export const metadata = createMetadata({ image: { - title: "thirdweb Pay - Test Mode", + title: "thirdweb Universal Bridge - Test Mode", icon: "thirdweb", }, title: "Enable Test Mode for Universal bridge — thirdweb docs", diff --git a/apps/portal/src/app/connect/sidebar.tsx b/apps/portal/src/app/connect/sidebar.tsx index ad6bacd3ef7..d15262cc5c1 100644 --- a/apps/portal/src/app/connect/sidebar.tsx +++ b/apps/portal/src/app/connect/sidebar.tsx @@ -75,6 +75,10 @@ export const sidebar: SideBar = { name: "Guest Mode", href: `${walletSlug}/sign-in-methods/guest`, }, + { + name: "FAQ", + href: `${walletSlug}/in-app-wallet/faq`, + }, { name: "Custom Authentication", links: [ @@ -130,6 +134,10 @@ export const sidebar: SideBar = { name: "Register with WalletConnect", href: `${walletSlug}/ecosystem/register-walletconnect`, }, + { + name: "FAQ", + href: `${walletSlug}/ecosystem/faq`, + }, ], }, //Account abstraction diff --git a/apps/portal/src/app/connect/wallet/ecosystem/faq/page.mdx b/apps/portal/src/app/connect/wallet/ecosystem/faq/page.mdx new file mode 100644 index 00000000000..c94bd9c47db --- /dev/null +++ b/apps/portal/src/app/connect/wallet/ecosystem/faq/page.mdx @@ -0,0 +1,58 @@ +import { createMetadata } from "@doc"; + +export const metadata = createMetadata({ + title: "Ecosystem Wallet FAQs", + description: "Frequently asked questions about thirdweb's Ecosystem Wallet", + image: { + title: "FAQs for thirdweb Ecosystem Wallet", + icon: "wallets", + }, +}); + +# Ecosystem Wallet FAQs + +### What is an Ecosystem Wallet? + +An ecosystem wallet is a managed in-app wallet service that allows platforms to create a branded wallet and login system, manage their partners, and allow any number of partners to spin up in-app wallets. End users that create in-app wallets through your partner applications (either with email, phone number, passkey, or socials) will receive **one account and wallet address** that they can access across the entire ecosystem. + +### How do Ecosystem Wallets work? + +Ecosystem Wallets are a fully managed and containerized in-app wallet backend service that is white labeled to your application. By giving you access to this backend service, you can power any application with in-app wallets just like thirdweb does for over 70,000 developers. + +### What is an Ecosystem Partner? + +Ecosystem partners are games or applications that you have permissioned to spin up in-app wallets underneath your brand. They will have access to the same account (funds, assets, etc.) for any end users that 1) use your branded login system or 2) log in with your wallet. + +You can manage ecosystem partners in the Permissions tab of your Ecosystem Wallet dashboard. + +### Which login providers can display my Ecosystem Wallet? + +thirdweb Connect, with WalletConnect and any wagmi- or viem-based login providers coming soon. + +### How can Partners integrate my Ecosystem Wallet? + +Partners can integrate your Ecosystem Wallet in three different ways: + +**Login System** + +Partners can install thirdweb SDK and use the Partner ID you created for them to display your branded sign in flow. All login options in this sign in flow will create an in-app wallet. + +**Branded Wallet Connector** + +Partners can add your wallet as a wallet connector option in their existing sign in flow on any domains they've whitelisted by calling the follow endpoint from their application. + +**WalletConnect (Coming Soon)** + +Partners using WalletConnect will automatically display your wallet as a WalletConnect option on any domains they've whitelisted. + +### What is the difference between Anyone and Allowlist scopes for Ecosystem Wallet? + +The **Anyone** scope allows any developer to integrate your ecosystem wallet, even if you have not given them permission. Any developer with thirdweb Connect, for example, would now display your wallet as a login option. + +The **Allowlist** scope allows developers that you have explicitly added to your list of Partners to display your wallet as a login option. + +You can manage scope in the Permissions tab of your Ecosystem Wallet dashboard. + +### How does billing work for Ecosystem Wallets? + +As the ecosystem admin, you will be billed $250 monthly for your Ecosystem Wallet. This allows any application or game in your ecosystem generate in-app wallets. Each month, we allow you and your ecosystem partners to generate 30,000 wallets for free. Once you've generated 30,000 wallets, you will be charged $0.02 per in-app wallet. At the end of each month, we will provide you with an invoice with a usage breakdown across all partners. \ No newline at end of file diff --git a/apps/portal/src/app/connect/wallet/faq/page.mdx b/apps/portal/src/app/connect/wallet/faq/page.mdx index 7a8b865c34b..45ffecbac4b 100644 --- a/apps/portal/src/app/connect/wallet/faq/page.mdx +++ b/apps/portal/src/app/connect/wallet/faq/page.mdx @@ -57,63 +57,6 @@ Currently, users will rely on the built-in recovery of their auth method. Refer Users can also link their account to a different auth method (e.g. email, phone, or social). All linked methods will be able to be used to access their accounts, providing an alternate recovery method in the case where one is lost. -# In App Wallet FAQs - -### How do users connect to their in-app wallet in a third-party app? - -Users can access it by doing a manual connection via wallet connect. They will then have to use the connect button or embed and select manage wallet -> connect an App. - -### How is pricing calculated for in-app wallets? - -In-app wallets are billed based on "monthly active wallets". An active wallet is defined as a wallet where a user logs in during the billing period. In-app wallets are completely free up to 1,000 monthly active wallets, and $0.02 per wallet after that. - -# Ecosystem Wallet FAQs - -### What is an Ecosystem Wallet? - -An ecosystem wallet is a managed in-app wallet service that allows you to create a branded wallet and login system, manage your partners, and allow any number of partners to spin up in-app wallets. End users that create in-app wallets through your partner applications (either with email, phone number, passkey, or socials) will receive **one account and wallet address** that they can access across the entire ecosystem. - -### How do Ecosystem Wallets work? - -Ecosystem Wallets are a fully managed and containerized in-app wallet backend service that is white labeled to your application. By giving you access to this backend service, you can power any application with in-app wallets just like thirdweb does for over 70,000 developers. - -### What is an Ecosystem Partner? - -Ecosystem partners are games or applications that you have permissioned to spin up in-app wallets underneath your brand. They will have access to the same account (funds, assets, etc.) for any end users that 1) use your branded login system or 2) log in with your wallet. - -You can manage ecosystem partners in the Permissions tab of your Ecosystem Wallet dashboard. - -### Which login providers can display my Ecosystem Wallet? - -thirdweb Connect, with WalletConnect and any wagmi- or viem-based login providers coming soon. - -### How can Partners integrate my Ecosystem Wallet? - -Partners can integrate your Ecosystem Wallet in three different ways: - -**Login System** - -Partners can install thirdweb SDK and use the Partner ID you created for them to display your branded sign in flow. All login options in this sign in flow will create an in-app wallet. - -**Branded Wallet Connector** - -Partners can add your wallet as a wallet connector option in their existing sign in flow on any domains they've whitelisted by calling the follow endpoint from their application. - -**WalletConnect (Coming Soon)** - -Partners using WalletConnect will automatically display your wallet as a WalletConnect option on any domains they've whitelisted. - -### What is the difference between Anyone and Allowlist scopes for Ecosystem Wallet? - -The **Anyone** scope allows any developer to integrate your ecosystem wallet, even if you have not given them permission. Any developer with thirdweb Connect, for example, would now display your wallet as a login option. - -The **Allowlist** scope allows developers that you have explicitly added to your list of Partners to display your wallet as a login option. - -You can manage scope in the Permissions tab of your Ecosystem Wallet dashboard. - -### How does billing work for Ecosystem Wallets? - -As the ecosystem admin, you will be billed $250 monthly for your Ecosystem Wallet. This allows any application or game in your ecosystem generate in-app wallets. Each month, we allow you and your ecosystem partners to generate 30,000 wallets for free. Once you’ve generated 30,000 wallets, you will be charged $0.02 per in-app wallet. At the end of each month, we will provide you with an invoice with a usage breakdown across all partners. # Security FAQs 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 762456e59ec..6a2ef9a5205 100644 --- a/apps/portal/src/app/connect/wallet/get-started/page.mdx +++ b/apps/portal/src/app/connect/wallet/get-started/page.mdx @@ -1,4 +1,4 @@ -import { Callout, OpenSourceCard, createMetadata, InstallTabs, SDKCard, Grid, ArticleIconCard } from "@doc"; +import { Callout, OpenSourceCard, createMetadata, InstallTabs, SDKCard, Grid, ArticleIconCard, Tabs, TabsList, TabsTrigger, TabsContent } from "@doc"; import { ReactIcon, TypeScriptIcon, @@ -10,26 +10,36 @@ import { ExternalLink } from "lucide-react"; export const metadata = createMetadata({ image: { - title: "Get started with thirdweb Wallets", + title: "Get started with Connect", icon: "wallets", }, - title: "Get started with thirdweb Wallet", - description: "Get started with thirdweb Wallet", + title: "Get started with Connect", + description: "Get started with Connect", }); -# Get Started +# Get Started with Connect -thirdweb offers multiple ways to add wallets to your application. Choose the method that best suits your needs: +Connect offers multiple ways to integrate wallet functionality in your application: 1. **External Wallets** - Connect to existing wallets like MetaMask, Coinbase Wallet, etc. 2. **In-App Wallets** - Create wallets with social/email login. -3. **Ecosystem Wallets** - Create wallets with social/email login that is shareable across various aplications. +3. **Ecosystem Wallets** - Create wallets with social/email login that is shareable across various applications. These methods can be used independently or together in the same application to provide the best experience for your users. +## Get your Client ID + +To use wallet features in your applications, you will need a client ID. Generate one for free at [your thirdweb dashboard](https://thirdweb.com/create-api-key). + + + Keep your client ID safe. You can generate different client IDs for development and production environments. + + +Your client ID authenticates your application with thirdweb's services and provides access to infrastructure like RPC endpoints, IPFS gateways, and wallet services. + ## Live Playground -Check out the playground that lets you see all the various capabilities of Connect. +Before diving into the implementation, check out our playground to see all the various capabilities of Connect: -## Get your client ID +## Choose Your Framework/Language + + + + TypeScript + React + React Native + Unity + .NET + Unreal Engine + + + + ### Installation + + Install the thirdweb SDK in your TypeScript project: + + ```bash + npm install thirdweb + # or + yarn add thirdweb + # or + pnpm add thirdweb + ``` + + ### Set up the Client + + First, create a client instance to connect with thirdweb services: + + ```typescript + import { createThirdwebClient } from "thirdweb"; + + // For client-side applications: + const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", // Get from your thirdweb dashboard + }); + + // For server-side scripts (Never expose secret keys in client code): + // const client = createThirdwebClient({ + // secretKey: process.env.THIRDWEB_SECRET_KEY, + // }); + ``` + + ### Connect External Wallets + + Enable users to connect their existing wallets: + + ```typescript + import { createThirdwebClient, walletConnect } from "thirdweb"; + + // Create the client (do this once and reuse it) + const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", + }); + + // Connect WalletConnect + const wallet = walletConnect({ + projectId: "YOUR_WALLETCONNECT_PROJECT_ID", // Get from WalletConnect dashboard + }); + + // Connect the wallet + const walletInstance = await wallet.connect(); + const address = await walletInstance.getAddress(); + console.log("Connected to:", address); + + // Read wallet balance + import { getWalletBalance, ethereum } from "thirdweb"; + + const balance = await getWalletBalance({ + client, + chain: ethereum, + address: walletInstance.getAddress(), + }); + console.log(`Balance: ${balance.displayValue} ${balance.symbol}`); + ``` + + ### Setup In-App Wallet + + Create wallets with email or social login: + + ```typescript + import { createThirdwebClient, embeddedWallet } from "thirdweb"; + + // Create the client (do this once and reuse it) + const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", + }); + + // Initialize embedded wallet + const wallet = embeddedWallet({ + client, + }); + + // Connect with email + const emailWallet = await wallet.connect({ + strategy: "email", + email: "user@example.com", + }); + + // Connect with social login + const googleWallet = await wallet.connect({ + strategy: "google", + }); + ``` + + ### Setup Ecosystem Wallet + + Create shareable wallets across multiple applications: + + ```typescript + import { createThirdwebClient, ecosystemWallet } from "thirdweb"; + + // Create the client (do this once and reuse it) + const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", + }); + + // Initialize ecosystem wallet + const wallet = ecosystemWallet({ + client, + ecosystemId: "YOUR_ECOSYSTEM_ID", // Get from your ecosystem dashboard + }); + + // Connect with email + const emailWallet = await wallet.connect({ + strategy: "email", + email: "user@example.com", + }); + ``` + + + + ### Installation + + Install the thirdweb SDK in your React project: + + ```bash + npm install thirdweb + # or + yarn add thirdweb + # or + pnpm add thirdweb + ``` + + ### 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: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID, + }); + ``` + + ### Setup the Provider + + Wrap your application with the ThirdwebProvider: + + ```tsx + // app.tsx / _app.tsx + import { ThirdwebProvider } from "thirdweb/react"; + import { client } from "./thirdwebClient"; + + function App() { + return ( + + + + ); + } + ``` + + ### Connect Button Component + + Use the pre-built ConnectButton for a complete wallet connection UI: + + ```tsx + import { ConnectButton } from "thirdweb/react"; + import { client } from "./thirdwebClient"; + + function YourApp() { + return ( +
+

My dApp

+ +
+ ); + } + ``` + + The ConnectButton automatically handles 500+ wallets, including MetaMask, WalletConnect, Coinbase Wallet, and all supported in-app wallets. + + ### Connection Hooks + + For more customized implementations, use the connection hooks: + + ```tsx + import { useConnect, useDisconnect, useActiveAccount, useWalletBalance } from "thirdweb/react"; + import { client } from "./thirdwebClient"; + import { ethereum } from "thirdweb/chains"; + + function CustomWalletUI() { + const { connect } = useConnect(); + const { disconnect } = useDisconnect(); + const activeAccount = useActiveAccount(); + + // Get wallet balance (only when connected) + const { data: balance, isLoading } = useWalletBalance({ + client, + chain: ethereum, + address: activeAccount?.address, + }); + + return ( +
+ {activeAccount ? ( +
+

Connected: {activeAccount.address}

+ {isLoading ? ( +

Loading balance...

+ ) : ( +

Balance: {balance?.displayValue} {balance?.symbol}

+ )} + +
+ ) : ( + + )} +
+ ); + } + ``` + + ### Using In-App Wallets + + Enable email or social login with the `useEmbeddedWallet` hook: + + ```tsx + import { useEmbeddedWallet } from "thirdweb/react"; + import { useState } from "react"; + import { client } from "./thirdwebClient"; + + function EmailLoginButton() { + const embeddedWallet = useEmbeddedWallet({ + client, + }); + const [email, setEmail] = useState(""); + + const handleLogin = async () => { + try { + await embeddedWallet.connect({ + strategy: "email", + email, + }); + } catch (error) { + console.error("Failed to login:", error); + } + }; + + return ( +
+ setEmail(e.target.value)} + placeholder="Enter your email" + /> + +
+ ); + } + ``` + + + + ### Installation + + Install the thirdweb SDK in your React Native project: + + ```bash + npm install thirdweb + # or + yarn add thirdweb + # or + pnpm add thirdweb + ``` + + + You cannot use Expo Go with thirdweb because native modules are required. + Use an Expo development build (`npx expo prebuild`) or React Native CLI app. + + + ### Create a Client + + Create a client file for reuse throughout your app: + + ```typescript + // thirdwebClient.ts + import { createThirdwebClient } from "thirdweb"; + + export const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID", // Configure in your app's env or constants + }); + ``` + + + 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"; + import { client } from "./thirdwebClient"; + + function App() { + return ( + + + + ); + } + ``` + + ### Connect Button Component + + Use the pre-built ConnectButton for a complete wallet connection UI: + + ```tsx + import { ConnectButton } from "thirdweb/react"; + import { client } from "./thirdwebClient"; + import { View, Text } from "react-native"; + + function YourApp() { + return ( + + My Mobile dApp + + + ); + } + ``` + + ### Using In-App Wallets + + Enable email or social login for mobile: + + ```tsx + import { useEmbeddedWallet } from "thirdweb/react"; + import { useState } from "react"; + import { View, TextInput, Button, Alert } from "react-native"; + import { client } from "./thirdwebClient"; + + function EmailLoginButton() { + const embeddedWallet = useEmbeddedWallet({ + client, + }); + const [email, setEmail] = useState(""); + + const handleLogin = async () => { + try { + await embeddedWallet.connect({ + strategy: "email", + email, + }); + } catch (error) { + Alert.alert("Login Failed", error.message); + } + }; + + return ( + + +