diff --git a/apps/portal/src/app/connect/account-abstraction/erc-20-paymaster/page.mdx b/apps/portal/src/app/connect/account-abstraction/erc-20-paymaster/page.mdx index 610498964e2..4d10d3390c8 100644 --- a/apps/portal/src/app/connect/account-abstraction/erc-20-paymaster/page.mdx +++ b/apps/portal/src/app/connect/account-abstraction/erc-20-paymaster/page.mdx @@ -1,4 +1,4 @@ - +import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; # ERC-20 Paymaster @@ -7,17 +7,20 @@ In traditional Ethereum transactions, users pay gas fees in the native cryptocur ### Get Started -1. Install Connect SDK - -```bash -npm install thirdweb -``` - -2. Configure the Paymaster In your SDK code, specify the ERC-20 token you wish to use for gas fees. +Configure the Paymaster In your SDK code, specify the ERC-20 token you wish to use for gas fees. Currently you may use Lisk LSK, Base USDC or Celo CUSD. + + + + TypeScript + React + .NET + Unity + + ```tsx import { base, lisk, celo } from "thirdweb/chains"; import { TokenPaymaster, smartWallet } from "thirdweb/wallets"; @@ -48,4 +51,52 @@ const cusdWallet = smartWallet({ tokenPaymaster: TokenPaymaster.CELO_CUSD, }, }); -``` \ No newline at end of file +``` + + + +```tsx +import { base, lisk, celo } from "thirdweb/chains"; +import { TokenPaymaster, smartWallet } from "thirdweb/wallets"; + +// Have users pay for gas in Base USDC + + + +```csharp +var chainId = 1135; // lisk + +var erc20SmartWallet = await SmartWallet.Create( + personalWallet: privateKeyWallet, + chainId: chainId, + tokenPaymaster: TokenPaymaster.LISK_LSK +); +``` + + + +```csharp +var chainId = 8453; // base + +var erc20SmartWallet = await ConnectWallet( + new WalletOptions( + WalletProvider.InAppWallet, + chainId, + inAppWalletOptions: new InAppWalletOptions(authprovider: AuthProvider.Steam), + smartWalletOptions: new SmartWalletOptions(sponsorGas: true, tokenPaymaster: TokenPaymaster.BASE_USDC) + ) +); +``` + + + diff --git a/apps/portal/src/app/connect/page.mdx b/apps/portal/src/app/connect/page.mdx index fafdfaf0a9b..3af092221c2 100644 --- a/apps/portal/src/app/connect/page.mdx +++ b/apps/portal/src/app/connect/page.mdx @@ -8,8 +8,10 @@ import { Stack, ConnectCard, SDKCard, - Callout + Callout, + ArticleIconCard, } from "@doc"; +import { ExternalLink } from "lucide-react"; import { TypeScriptIcon, ReactIcon, DotNetIcon, UnityIcon, UnrealEngineIcon } from "@/icons"; import { cn } from "@/lib/utils"; import Link from "next/link"; @@ -28,29 +30,27 @@ export const metadata = createMetadata({ Connect is the complete toolkit for connecting every user to your application. It features customizable onboarding flows, self-custodial in-app wallets, account abstraction, onramps, and a performant API to interact with the blockchain. -
- - -
+## Live Playground + +You can interact with the React SDK in the [Live Playground](https://playground.thirdweb.com/). -### Quick starts + + + + + + +## Quick starts + +Get started with Connect in your preferred language. - -### With Connect, you can +## With Connect, you can -- **Connect to 350+ different wallet providers** with support for every EVM network +- **Connect to 500+ different wallet providers** with support for every EVM network - **Log in and authenticate your users** with customizable and secure [email, phone, passkeys and social login](https://portal.thirdweb.com/connect/in-app-wallet/overview) flows. - **Sponsor transactions** to seamlessly onboard non-native or new crypto users with [Account Abstraction](https://portal.thirdweb.com/connect/account-abstraction/overview). - **Perform wallet actions** like connecting and disconnecting wallets, viewing balance, displaying ENS names, and execute transactions with our [perfomant, reliable and type safe API](https://portal.thirdweb.com/connect/blockchain-api) @@ -107,11 +107,11 @@ Connect is the complete toolkit for connecting every user to your application. I -### Supported Chains +## Supported Chains Connect is supported on every EVM compatible chain. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist). -### Starter Kits & demos +## Starter Kits & demos View all available starter kits, demos and templates on Github. 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 9dced8cbbf7..762456e59ec 100644 --- a/apps/portal/src/app/connect/wallet/get-started/page.mdx +++ b/apps/portal/src/app/connect/wallet/get-started/page.mdx @@ -1,12 +1,12 @@ -import { Callout, OpenSourceCard, createMetadata, InstallTabs, ArticleIconCard } from "@doc"; +import { Callout, OpenSourceCard, createMetadata, InstallTabs, SDKCard, Grid, ArticleIconCard } from "@doc"; import { ReactIcon, TypeScriptIcon, UnityIcon, DotNetIcon, - ExternalLinkIcon, UnrealEngineIcon } from "@/icons" +import { ExternalLink } from "lucide-react"; export const metadata = createMetadata({ image: { @@ -27,13 +27,13 @@ thirdweb offers multiple ways to add wallets to your application. Choose the met These methods can be used independently or together in the same application to provide the best experience for your users. -## Try the demo +## Live Playground -We have a playground that lets you see all the various options via our prebuilt UI: +Check out the playground that lets you see all the various capabilities of Connect. @@ -42,103 +42,40 @@ We have a playground that lets you see all the various options via our prebuilt To use in-app wallets in your applications, you will need a client ID. You can get one for free on [your thirdweb dashboard](https://thirdweb.com/create-api-key). -## External Wallets - -Connect to popular external wallets like Metamask, Rainbow, Coinbase, etc. - -
- - - - -
- -## In-App Wallets - -Create in-app wallets with social/email/sms/passkey login. - -
- - - {/* TODO: Link to react native getting started for in appw allet */} - - - - -
- -## Ecosystem Wallets - -If you're looking to set up an ecosystem from scratch, refer to the [set-up guide](/connect/wallet/ecosystem/set-up) - -If you're looking to integrate ecosystem wallets in your aplication, refer to the following guides: - -
- - - {/* TODO: Add react native specific getting started for ecosystem wallets */} - - - -
+## Pick your language + +Start with Connect in your preferred language. + + + + + + + + + diff --git a/apps/portal/src/app/connect/wallet/overview/page.mdx b/apps/portal/src/app/connect/wallet/overview/page.mdx index a4a8b4d4287..26998b0cd35 100644 --- a/apps/portal/src/app/connect/wallet/overview/page.mdx +++ b/apps/portal/src/app/connect/wallet/overview/page.mdx @@ -17,7 +17,7 @@ export const metadata = createMetadata({ A flexible sign-up flow that accommodates different preferences is critical when onboarding users. thirdweb offers multiple wallet solutions to meet various integration needs: -1. **External Wallets** - Traditional wallet connection with 350+ providers +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 @@ -30,7 +30,7 @@ A flexible sign-up flow that accommodates different preferences is critical when > + - + ### Ecosystem Wallets -In order to configure sign-in options within your ecosystem, first configure the allowed sign-in methods on [your dashboard](https://thirdweb.com/team/~/~/ecosystem). + +In order to configure sign-in options for all apps within your ecosystem, first configure the allowed sign-in methods on [your dashboard](https://thirdweb.com/team/~/~/ecosystem). + Once configured, refer to the following guides to use the various login options within your ecosystem: -
+ -
+ Note that while you're allowed to pass any auth strategy today, we recommend only passing the strategies that are enabled on your dashboard. We might enforce this in the future. @@ -111,7 +113,7 @@ Once configured, refer to the following guides to use the various login options Most authentication option are that straight forward. However, some options require additional setup or nuances. See below for more information on these options: -
+ -
+ ## Interacting with your App diff --git a/apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx b/apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx index 61d4486ae43..2dc06464877 100644 --- a/apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx +++ b/apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx @@ -1,4 +1,4 @@ -import { createMetadata, ArticleIconCard, Callout } from "@doc"; +import { createMetadata, ArticleIconCard, Callout, Grid } from "@doc"; import { WalletsAuthIcon, WalletsConnectIcon, @@ -23,7 +23,7 @@ export const metadata = createMetadata({ # External wallets -thirdweb natively supports 350+ first-party wallets and all wallets that implement EIP-6963 (Multi-injected Provider Discovery). For the full list, please consult [this list](/typescript/v5/supported-wallets). +thirdweb natively supports 500+ first-party wallets and all wallets that implement EIP-6963 (Multi-injected Provider Discovery). For the full list, please consult [this list](/typescript/v5/supported-wallets). You can use an external wallet in many ways. We've outlined these different use cases below: @@ -84,11 +84,9 @@ thirdweb wallets provide a seamless web3 experience with minimal prompts and dis Note, however, that the wallet interacting with your application will be a thirdweb wallet, not the user's external wallet. While we provide methods to export keys and see how the external wallet and thirdweb wallet are linked, if your app requires the user's external wallet, you should use [SIWE](#authenticating-with-external-wallets) instead. -### Implementation - -#### In App Wallet +#### Authenticate to an In App Wallet with SIWE -
+ -
+ -#### Ecosystem Wallet +#### Authenticate to an Ecosystem Wallet with SIWE -
+ -
\ No newline at end of file + diff --git a/apps/portal/src/app/infrastructure/sidebar.tsx b/apps/portal/src/app/infrastructure/sidebar.tsx index 705e9c7ad13..7d43890de38 100644 --- a/apps/portal/src/app/infrastructure/sidebar.tsx +++ b/apps/portal/src/app/infrastructure/sidebar.tsx @@ -29,6 +29,10 @@ export const sidebar: SideBar = { { name: "How to Use Storage", links: [ + { + name: "Connect SDK", + href: "/connect", + }, { name: "Upload Files to IPFS", href: `${storageSlug}/how-to-use-storage/upload-files-to-ipfs`, @@ -39,10 +43,6 @@ export const sidebar: SideBar = { }, ], }, - { - name: "Storage SDK", - href: "/storage-sdk/latest", - }, ], }, //RPC Edge diff --git a/apps/portal/src/app/react/v5/adapters/page.mdx b/apps/portal/src/app/react/v5/adapters/page.mdx index 917e04cd336..88ff4c2f5fb 100644 --- a/apps/portal/src/app/react/v5/adapters/page.mdx +++ b/apps/portal/src/app/react/v5/adapters/page.mdx @@ -14,6 +14,64 @@ Adapters allow you to use contracts, providers and wallets from these libraries ## Wagmi +### Using thirdweb in-app wallets with wagmi + +You can use in-app and ecosystem wallets in your wagmi application by using the `@thirdweb-dev/wagmi-adapter` package. + +```shell +npm install thirdweb @thirdweb-dev/wagmi-adapter +``` + +Make sure you're running wagmi 2.14.1 or above. + +You probably already have a wagmi config with some connectors, simply add the inAppWalletConnector to the list, along with the desired options. + +```ts +import { http, createConfig } from "wagmi"; +import { inAppWalletConnector } from "@thirdweb-dev/wagmi-adapter"; +import { createThirdwebClient, defineChain as thirdwebChain } from "thirdweb"; + +const client = createThirdwebClient({ + clientId: "your-client-id", +}); + +export const config = createConfig({ + chains: [sepolia], + connectors: [ + // add the in-app wallet connector + inAppWalletConnector({ + client, + // optional: turn on smart accounts! + smartAccounts: { + sponsorGas: true, + chain: thirdwebChain(sepolia), + }, + }), + ], + transports: { + [sepolia.id]: http(), + }, +}); +``` + +Then in your application, you can use the connector to trigger the in-app wallet connection. + +```ts +const { connect, connectors } = useConnect(); + +const onClick = () => { + // grab the connector + const inAppWallet = connectors.find((x) => x.id === "in-app-wallet"); + // call connect with the desired strategy + connect({ + connector: inAppWallet, + strategy: "google", + }); +}; +``` + +### Converting a wagmi wallet client to a thirdweb wallet + You can use the thirdweb SDK within a wagmi application by setting the wagmi connected account as the thirdweb 'active wallet'. After that, you can use all of the react components and hooks normally, including `PayEmbed`, `TransactionButton`, etc. ```ts @@ -28,37 +86,28 @@ import { viemAdapter } from "thirdweb/adapters/viem"; import { client } from './client' -const { data: walletClient } = useWalletClient(); // from wagmi -const { disconnectAsync } = useDisconnect(); // from wagmi -const { switchChainAsync } = useSwitchChain(); // from wagmi +const account = useAccount(); // from wagmi const setActiveWallet = useSetActiveWallet(); // from thirdweb/react -// whenever the walletClient changes, -// we adapt it to a thirdweb account and set it as the active wallet -useEffect(() => { +// whenever the wagmi account changes, +// we adapt it to a thirdweb wallet and set it as the active wallet + useEffect(() => { const setActive = async () => { - if (walletClient) { - // adapt the walletClient to a thirdweb account - const adaptedAccount = viemAdapter.walletClient.fromViem({ - walletClient: walletClient as any, // accounts for wagmi/viem version mismatches - }); - // create the thirdweb wallet with the adapted account - const thirdwebWallet = createWalletAdapter({ - client, - adaptedAccount, - chain: defineChain(await walletClient.getChainId()), - onDisconnect: async () => { - await disconnectAsync(); - }, - switchChain: async (chain) => { - await switchChainAsync({ chainId: chain.id as any }); - }, - }); - setActiveWallet(thirdwebWallet); - } + if (account?.connector?.getProvider) { + const provider = await account?.connector?.getProvider({ + chainId, + }); + const thirdwebWallet = EIP1193.fromProvider({ + provider, + }); + await thirdwebWallet.connect({ + client, + }); + setActiveWallet(thirdwebWallet); + } }; setActive(); -}, [walletClient]); + }, [account?.connector?.getProvider, setActiveWallet]); ``` You can view a fully functioning wagmi + thirdweb app in this [github repository](https://github.com/thirdweb-example/wagmi-thirdweb). @@ -89,22 +138,12 @@ useEffect(() => { const privyWallet = wallets[0]; if (privyWallet) { const ethersProvider = await privyWallet.getEthersProvider(); - // adapt privy wallet to a thirdweb account - const adaptedAccount = await ethers5Adapter.signer.fromEthers({ - signer: ethersProvider.getSigner(), + // create a thirdweb wallet with the privy provider + const thirdwebWallet = EIP1193.fromProvider({ + provider: ethersProvider, }); - // create the thirdweb wallet with the adapted account - const thirdwebWallet = createWalletAdapter({ - client, - adaptedAccount, - // chainId is in the format of "eip155:1" - chain: defineChain(Number(privyWallet.chainId.split(":")[1])), - onDisconnect: async () => { - privyWallet.disconnect(); - }, - switchChain: async (chain) => { - await privyWallet.switchChain(chain.id); - }, + await thirdwebWallet.connect({ + client, }); setActiveWallet(thirdwebWallet); } 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 aa592e9581f..202f29bd305 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 @@ -34,7 +34,7 @@ export default function App() { } ``` -These components support over 350+ wallets, including support in-app wallets and account abstraction. +These components support over 500+ wallets, including support in-app wallets and account abstraction. It also automatically shows all installed `EIP-6963` compliant wallet extensions installed by the user. @@ -99,7 +99,7 @@ You can create any wallet by id with auto completion using the [`createWallet`]( -The SDK supports 350+ wallets out of the box, all you need to pass is their id. +The SDK supports 500+ wallets out of the box, all you need to pass is their id. @@ -107,7 +107,7 @@ The SDK supports 350+ wallets out of the box, all you need to pass is their id. title="Supported Wallets" icon={ComponentIcon} href="/typescript/v5/supported-wallets" - description="See all 350+ wallets supported by the Connect SDK" + description="See all 500+ wallets supported by the Connect SDK" /> diff --git a/apps/portal/src/app/react/v5/getting-started/page.mdx b/apps/portal/src/app/react/v5/getting-started/page.mdx index 33fcc5abd7d..a46318c1715 100644 --- a/apps/portal/src/app/react/v5/getting-started/page.mdx +++ b/apps/portal/src/app/react/v5/getting-started/page.mdx @@ -105,7 +105,7 @@ function App() { } ``` -The `ConnectButton` and `ConnectEmbed` components come with built-in support for 350+ of wallets, 2000+ chains, fiat on-ramping, crypto swapping, transaction tracking, and more. +The `ConnectButton` and `ConnectEmbed` components come with built-in support for 500+ of wallets, 2000+ chains, fiat on-ramping, crypto swapping, transaction tracking, and more. You can also build your own custom button using the [`useConnect`](/react/v5/connecting-wallets/hooks) hook. diff --git a/apps/portal/src/app/react/v5/page.mdx b/apps/portal/src/app/react/v5/page.mdx index e976dc911eb..0bcd86f883f 100644 --- a/apps/portal/src/app/react/v5/page.mdx +++ b/apps/portal/src/app/react/v5/page.mdx @@ -88,7 +88,7 @@ You can interact with the React SDK in the [Live Playground](https://playground. @@ -25,7 +25,7 @@ The SDK supports 350+ wallets out of the box, all you need to pass is their id. title="Supported Wallets" icon={ComponentIcon} href="/typescript/v5/supported-wallets" - description="See all 350+ wallets supported by the Connect SDK" + description="See all 500+ wallets supported by the Connect SDK" /> diff --git a/apps/portal/src/app/typescript/v5/page.mdx b/apps/portal/src/app/typescript/v5/page.mdx index 1bbb227eb96..a17b678168a 100644 --- a/apps/portal/src/app/typescript/v5/page.mdx +++ b/apps/portal/src/app/typescript/v5/page.mdx @@ -98,81 +98,6 @@ Follow our [Quickstart](/typescript/v5/getting-started) to get started with the - **Developer experience:** type-safe, simple to use, with repeatable and predictable patterns. - **Interoperable:** works with any infra provider and with other libraries like viem and ethers. -## Get Started - - - - - - - - - - - - - - - - - - - - - - - - ## API Reference diff --git a/apps/portal/src/app/typescript/v5/sidebar.tsx b/apps/portal/src/app/typescript/v5/sidebar.tsx index 5aef9d26ef9..68aeda2f384 100644 --- a/apps/portal/src/app/typescript/v5/sidebar.tsx +++ b/apps/portal/src/app/typescript/v5/sidebar.tsx @@ -48,6 +48,10 @@ export const sidebar: SideBar = { name: "Contracts", href: `${slug}/contract`, }, + { + name: "Accounts & Wallets", + href: `${slug}/wallets`, + }, ], }, { separator: true }, @@ -55,10 +59,6 @@ export const sidebar: SideBar = { name: "Onboarding Users", isCollapsible: false, links: [ - { - name: "Overview", - href: `${slug}/wallets`, - }, { name: "External Wallets", href: `${slug}/supported-wallets`, diff --git a/apps/portal/src/app/typescript/v5/wallets/page.mdx b/apps/portal/src/app/typescript/v5/wallets/page.mdx index abbb83b1447..673bf3f1f84 100644 --- a/apps/portal/src/app/typescript/v5/wallets/page.mdx +++ b/apps/portal/src/app/typescript/v5/wallets/page.mdx @@ -35,7 +35,7 @@ See also: [Account (ethereum.org)](https://ethereum.org/en/glossary/#account) title="Supported Wallets" icon={ComponentIcon} href="/typescript/v5/supported-wallets" - description="See all 350+ wallets supported by the Connect SDK" + description="See all 500+ wallets supported by the Connect SDK" />