diff --git a/docs/onboarding/14 Wallet/1 Wallets/Smart Wallet.mdx b/docs/onboarding/14 Wallet/1 Wallets/Smart Wallet.mdx
index d5dda66ef..a41221b4b 100644
--- a/docs/onboarding/14 Wallet/1 Wallets/Smart Wallet.mdx
+++ b/docs/onboarding/14 Wallet/1 Wallets/Smart Wallet.mdx
@@ -8,11 +8,41 @@ import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import ViewRepoButton from "@components/ViewRepoButton";
+import QuickstartCard from "@components/QuickstartCard";
Let your users connect to any [Smart Wallet](/glossary/smart-wallet).
A Smart Wallet is a wallet that is controlled by a smart contract following the [ERC-4337 specification](https://eips.ethereum.org/EIPS/eip-4337).
+
+
+## Features
+
thirdweb’s smart wallets have the following features by default:
- Have multiple owners
@@ -22,121 +52,10 @@ thirdweb’s smart wallets have the following features by default:
- Multicall-able.
- Store contract metadata.
-## Requirements
-
-#### 1. Smart Wallet Factory Contract
-
-Deployable via the [explore page](https://thirdweb.com/explore/smart-wallet) or use your own [ERC 4337](https://eips.ethereum.org/EIPS/eip-4337) compatible factory contract.
-
-Choose the right smart wallet setup for your app. thirdweb offers the following three different kinds of smart wallets:
-
-| | [`Account`](/solidity/base-contracts/account) setup | [`DynamicAccount`](/solidity/base-contracts/dynamic-account) setup | [`ManagedAccount`](/solidity/base-contracts/managed-account) setup |
-| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Upgradeability** | Non-upgradeable | Account upgrades controlled locally by account admin. | Account upgrades controlled centrally by account factory admin. |
-| **User persona** | Developer wants to issue simple smart wallets to their users. They do not anticipate that users wallets will need any feature upgrades. | Developer wants to issue smart wallets to their users. They do anticipate feature upgrades to user wallets but do not want to push upgrades to user wallets without consent. | Developer wants to issue smart wallets to their users. They do anticipate feature upgrades to user wallets, and want to push upgrades to user wallets for seamless/invisible UX for upgrades. |
-
-#### 2. An API key
-
-:::info
-You will require an API key to use thirdweb’s infrastructure services such as the bundler and paymaster.
-
-The API key will need to have the following settings:
-
-- smart wallet as an enabled service
-- The contracts that the smart wallet will interact with must be added to the "Destination Contracts" list. Learn more [here](/api-keys#smart-wallet-allowed-destination-addresses)
-
-:::
-
-Obtain an API key from the [thirdweb dashboard](https://thirdweb.com/create-api-key).
-
-The API key lets you access thirdweb's bundler and paymaster infrastructure, which is required for the smart wallet to operate and optionally enable [gasless transactions](/glossary/gasless-transactions).
-
-Learn more about creating an API key and restricting which contracts the smart wallet can interact with [here](/api-keys).
-
-## Features
-
-Smart Wallets are controlled by a programmable smart contract rather than by a user as is the case for externally-owned accounts (EOA). This programmable wallet contract can:
-
-- Hold any assets
-- Pay for its own gas
-- Execute transactions in batches
-- Have multiple owners
-- Assign roles and permissions
-
-And more!
-
Smart Wallets can be customized to each application's needs using the [Solidity SDK](/solidity).
The SmartWallet API is **composable** - you can use in your own [ERC 4337](https://eips.ethereum.org/EIPS/eip-4337) compatible factory contract and you can also use your own bundler or paymaster services.
-## Bundler & Paymaster Services
-
-Thirdweb's bundler and paymaster services are used to fund and send transactions. To use these services, you need to setup a billing account on the thirdweb dashboard Settings page.
-
-Smart Wallet is free to use with your own account abstraction infrastructure. To use your own paymaster & bundler,
-pass the `bundlerUrl`, `paymasterUrl` and `paymasterAPI` options to the `SmartWallet`:
-
-```javascript
-class MyPaymaster extends PaymasterAPI {
- async getPaymasterAndData(
- userOp: Partial,
- ): Promise {
- // your implementation, must return the signed paymaster data
- }
-}
-
-const config: SmartWalletConfig = {
- chain,
- gasless,
- factoryAddress,
- clientId,
- bundlerUrl: "your-bundler-url",
- paymasterUrl: "your-paymaster-url",
- paymasterAPI: new MyPaymaster(),
-};
-```
-
-## Pricing & Billing
-
-To use thirdweb's account abstraction infrastructure, you need to setup a billing account on the thirdweb dashboard Settings page.
-
-**Free Tier**
-
-- Ideal for small teams and individuals who require basic features.
-- **Features:**
- - **Bundler**: 10% premium on top of network fee based on your usage.
- - **Paymaster**: 10% premium on top of network fee based on your usage.
-
-Pro Tier
-
-- Ideal for teams that require a higher level of customization and support
-- **Features:**
- - **Bundler**: 10% premium on top of network fee based on your usage.
- - **Paymaster**: 10% premium on top of network fee based on your usage.
-
-Find more information on the different billing tiers by visiting [thirdweb's pricing page](https://thirdweb.com/pricing).
-
-## Templates
-
-Clone these templates to quickly deploy Smart Wallets and connect to them.
-
-
-
## Supported chains
With a thirdweb API key, you get access to bundler and paymaster infrastructure on the following chains:
diff --git a/docs/onboarding/15 Glossary/Smart Wallet.mdx b/docs/onboarding/15 Glossary/Smart Wallet.mdx
index ed2777e51..52fbe3fb6 100644
--- a/docs/onboarding/15 Glossary/Smart Wallet.mdx
+++ b/docs/onboarding/15 Glossary/Smart Wallet.mdx
@@ -55,4 +55,4 @@ A bundler is a smart contract that bundles multiple 'UserOperations' into a sing
A paymaster is a smart contract that relays transactions. It provides a service that enables a third party to pay
the transaction fee on behalf of the user by funding the paymaster in advance. The Paymaster acts as a gas reserve which then
can be used during the call execution via `EntryPoint`. The thirdweb [Smart Wallet](/wallet/smart-wallet) paymaster is initially paid for by thirdweb. By using an API key,
-usage is tracked the third-party billed (currently, using our paymaster is free as Smart Wallets are only enabled on testnets).
+the usage is tracked and billed.
diff --git a/docs/onboarding/23 Smart Wallet/0 Overview.mdx b/docs/onboarding/23 Smart Wallet/0 Overview.mdx
new file mode 100644
index 000000000..c8f682e29
--- /dev/null
+++ b/docs/onboarding/23 Smart Wallet/0 Overview.mdx
@@ -0,0 +1,143 @@
+---
+slug: /smart-wallet
+title: Overview
+hide_title: true
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+import ViewRepoButton from "@components/ViewRepoButton";
+import QuickstartCard from "@components/QuickstartCard";
+
+# Smart Wallet
+
+Everything you need to build [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) Smart Wallets for your users.
+
+Once setup, your application will:
+
+Ethereum has 2 types of accounts to transfer and receive tokens: EOAs (Externally Owned Accounts) and smart contract accounts.
+A smart wallet is a wallet type requiring **no private keys or seed phrases**.
+Smart contract wallets rely on code instead of private keys to secure and recover wallet information.
+
+**A smart contract wallet is a Web3 wallet controlled by a smart contract following the [ERC-4337 specification](https://eips.ethereum.org/EIPS/eip-4337).**
+
+## Features
+
+thirdweb’s smart wallets have the following features by default:
+
+- The ability to have multiple owners on the same wallet.
+- Execute transactions (single and batched).
+- Send and receive native tokens to and from the smart wallet.
+- Send and receive [ERC-721](/solidity/extensions/erc721) and [ERC-1155](/solidity/extensions/erc1155) NFTs from the smart wallet.
+- Store contract metadata.
+- Pay for its own gas via a [paymaster](/smart-wallet/how-it-works#paymaster).
+- Assign roles and permissions such as signers and admins.
+
+And more!
+
+Smart Wallets can be deployed via the [explore page](https://thirdweb.com/explore) or customized to each application's needs using the [Solidity SDK](/solidity).
+
+The `SmartWallet` API is **composable** - you can use with your own [ERC 4337](https://eips.ethereum.org/EIPS/eip-4337) compatible factory contract and you can also use your own bundler or paymaster services.
+
+## References
+
+By using the thirdweb SDKs, you can easily create and manage smart wallets for your users:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ View supported chains
+
+
+ -
+ Polygon
+
+ -
+ Optimism
+
+ -
+ Base
+
+ -
+ Arbitrum
+
+ -
+ Linea
+
+ -
+ Goerli
+
+ -
+ Sepolia
+
+ -
+ Mumbai
+
+ -
+ Base Goerli
+
+ -
+ Optimism Goerli
+
+ -
+ Arbitrum Goerli
+
+ -
+ Linea Testnet
+
+ -
+ Celo Alfajores Testnet
+
+
+
+
+To support a chain not listed, [contact us](https://thirdweb.typeform.com/to/Q93CVgUc?typeform-source=thirdweb-www-git-mariano-ftd-1670.thirdweb-preview.com).
diff --git a/docs/onboarding/23 Smart Wallet/1 How it Works.mdx b/docs/onboarding/23 Smart Wallet/1 How it Works.mdx
new file mode 100644
index 000000000..491a43114
--- /dev/null
+++ b/docs/onboarding/23 Smart Wallet/1 How it Works.mdx
@@ -0,0 +1,76 @@
+---
+slug: /smart-wallet/how-it-works
+title: How it Works
+---
+
+## What is a Smart Wallet?
+
+A Smart Wallet is a wallet that is controlled by a smart contract following the [ERC-4337 specification](https://eips.ethereum.org/EIPS/eip-4337).
+
+Ethereum has 2 types of accounts to transfer and receive tokens: EOAs (Externally Owned Accounts) and Contract Accounts. A smart contract wallet is a wallet managed by a contract account
+instead of an EOA. A smart wallet is a wallet type requiring **no private keys or seed phrases**.
+Smart contract wallets rely on code instead of private keys to secure and recover wallet information.
+
+**A smart contract wallet is a type of Web3 wallet powered by smart contracts.**
+
+This smart wallet is unlocked by a 'key' - a personal account. This key can be anything from a [MetaMask](/wallet/metamask) wallet or even a [Local Wallet](/wallet/local-wallet) and is used as a way to 'sign in' to the wallet.
+
+Benefits of Smart Wallets:
+
+1. Optimized transaction efficiency & batch transactions
+ - Combine multiple transactions into a single transaction to save on [gas fees](/glossary/gas)
+2. Improved Security Features
+3. Social & Multi-Sig Recovery
+ - Recover a wallet without seed phrases/passwords
+ - Nominate a trusted person to recover your wallet in the case of an emergency
+
+## How does it work?
+
+When sending a transaction using a smart wallet, the `execute` method is called on the account contracts
+which sends a `UserOperation` object that defines the purpose of the transaction and includes the relevant data for verification.
+
+The requested `UserOperation` goes to an alt mempool — a waiting area specifically for pending smart account transactions — and waits for bundlers (nodes) to pick up transactions,
+bundle them, and pay the gas, via a paymaster contract, for the transaction to register all `UserOperation` in a block.
+
+To prioritize transactions, bundlers use a similar logic to how miners or validators prioritize transactions in the mempool based on the fee associated with each of them.
+Bundlers earn the combined fee paid within all UserOperation they bundled.
+
+These bundled `UserOperation` are then sent to the `EntryPoint` contract which verifies the `UserOperation` and executes the transaction.
+
+To learn more about how smart wallets work, read our [smart contract deep dive](https://blog.thirdweb.com/smart-contract-deep-dive-building-smart-wallets-for-individuals-and-teams/).
+
+
+
+## Terminology
+
+### UserOperations
+
+This is the data structure for the transaction that the user wants to perform. It contains the following fields:
+
+- `sender`: The account making the operation.
+- `nonce`: Anti-replay parameter; also used as the salt for first-time account creation.
+- `initCode`: The initialization code needed to create the account (needed if and only if the account is not yet on-chain).
+- `callData`: The data to pass to the `sender` during the operation.
+- `callGasLimit`: The amount of gas to allocate for the operation.
+- `verificationGasLimit`: The amount of gas to allocate for the verification step.
+- `preVerificationGas`: The amount of gas to pay for to compensate the bundler for pre-verification execution and calldata.
+- `maxFeePerGas`: Maximum fee per gas (similar to [EIP-1559](https://eips.ethereum.org/EIPS/eip-1559) `max_fee_per_gas`).
+- `maxPriorityFeePerGas`: Maximum priority fee per gas (similar to [EIP-1559](https://eips.ethereum.org/EIPS/eip-1559)).
+- `paymasterAndData`: Address of paymaster sponsoring the transaction, followed by extra data to send to the paymaster (empty for self-sponsored transaction).
+- `signature`: Data passed into the account along with the nonce during the verification step. Should depend on the `chainid` and `EntryPoint` address to prevent replay attacks.
+
+### EntryPoint
+
+The EntryPoint is a singleton contract (a contract that has a predictable address that is the same on every chain).
+It has two methods that are used as entry points to execute bundles of UserOperations: `handleOps` and `handleAggregatedOps`.
+
+### Bundler (relayer)
+
+A bundler is a smart contract that bundles multiple 'UserOperations' into a single bundle, a `handleOps` call, to the `EntryPoint` contract.
+
+### Paymaster
+
+A paymaster is a smart contract that relays transactions. It provides a service that enables a third party to pay
+the transaction fee on behalf of the user by funding the paymaster in advance. The Paymaster acts as a gas reserve which then
+can be used during the call execution via the `EntryPoint` contract. The thirdweb [Smart Wallet](/smart-wallet) paymaster is initially paid for by thirdweb. By using an API key,
+the usage is tracked and billed.
diff --git a/docs/onboarding/23 Smart Wallet/3 Getting Started.mdx b/docs/onboarding/23 Smart Wallet/3 Getting Started.mdx
new file mode 100644
index 000000000..ae600560c
--- /dev/null
+++ b/docs/onboarding/23 Smart Wallet/3 Getting Started.mdx
@@ -0,0 +1,331 @@
+---
+slug: /smart-wallet/getting started
+title: Getting Started
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+import ViewRepoButton from "@components/ViewRepoButton";
+import QuickstartCard from "@components/QuickstartCard";
+
+Getting started to easily add ERC-4337 smart wallet support to your application.
+
+Once setup, your application will:
+
+- Let users **connect to their smart wallet** using any personal wallet, including email and local 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.
+
+## 1. Smart Wallet Factory Contract
+
+Deployable via the [explore page](https://thirdweb.com/explore/smart-wallet) or build your own [ERC 4337](https://eips.ethereum.org/EIPS/eip-4337) compatible factory contract using the [Solidity SDK](/solidity/base-contracts/smart-accounts).
+
+Choose the right smart wallet setup for your app. thirdweb offers the following three different kinds of smart wallets:
+
+| | [`Account`](/solidity/base-contracts/account) setup | [`DynamicAccount`](/solidity/base-contracts/dynamic-account) setup | [`ManagedAccount`](/solidity/base-contracts/managed-account) setup |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Upgradeability** | Non-upgradeable | Account upgrades controlled locally by account admin. | Account upgrades controlled centrally by account factory admin. |
+| **User persona** | Developer wants to issue simple smart wallets to their users. They do not anticipate that users wallets will need any feature upgrades. | Developer wants to issue smart wallets to their users. They do anticipate feature upgrades to user wallets but do not want to push upgrades to user wallets without consent. | Developer wants to issue smart wallets to their users. They do anticipate feature upgrades to user wallets, and want to push upgrades to user wallets for seamless/invisible UX for upgrades. |
+
+### Supported chains
+
+
+ View supported chains
+
+
+ -
+ Polygon
+
+ -
+ Optimism
+
+ -
+ Base
+
+ -
+ Arbitrum
+
+ -
+ Linea
+
+ -
+ Goerli
+
+ -
+ Sepolia
+
+ -
+ Mumbai
+
+ -
+ Base Goerli
+
+ -
+ Optimism Goerli
+
+ -
+ Arbitrum Goerli
+
+ -
+ Linea Testnet
+
+ -
+ Celo Alfajores Testnet
+
+
+
+
+To support a chain not listed, [contact us](https://thirdweb.typeform.com/to/Q93CVgUc?typeform-source=thirdweb-www-git-mariano-ftd-1670.thirdweb-preview.com).
+
+## 2. An API key
+
+You will require an API key to use thirdweb's infrastructure services such as the bundler and paymaster.
+
+Obtain an API key from the [thirdweb dashboard Settings page](https://thirdweb.com/create-api-key).
+
+The API key lets you access thirdweb's bundler and paymaster infrastructure, which is required for the smart wallet to operate and optionally enable [gasless transactions](/glossary/gasless-transactions).
+
+The API key will need to have the following settings:
+
+- smart wallet as an enabled service
+- The contracts that the smart wallet will interact with must be added to the "Destination Contracts" list. Learn more [here](/api-keys#smart-wallet-allowed-destination-addresses)
+
+Learn more about creating an API key and restricting which contracts the smart wallet can interact with [here](/api-keys).
+
+## 3. Connecting & Creating Smart Wallets in an Application
+
+Use the following code to integrate smart wallets into your apps. This will handle:
+
+- Connecting your users to their smart wallet based of their personal wallet (can be any wallet, including email or local wallets).
+- Automatically deploy the individual account contracts for your users when they do their first onchain transaction.
+- Handle all transaction gas costs via the thirdweb paymaster.
+- Select your deployed account factory and client ID to get a fully functional code snippet.
+
+
+
+
+ {`import { LocalWallet, SmartWallet } from "@thirdweb-dev/wallets";
+// First, connect the personal wallet, which can be any wallet (metamask, walletconnect, etc.)
+// Here we're just generating a new local wallet which can be saved later
+const personalWallet = new LocalWallet();
+await personalWallet.generate();
+// Setup the Smart Wallet configuration
+const config = {
+chain: "goerli", // the chain where your smart wallet will be or is deployed
+factoryAddress: "0x...", // your own deployed account factory address
+clientId: "YOUR_CLIENT_ID", // or use secretKey for backend/node scripts
+gasless: true, // enable or disable gasless transactions
+};
+// Then, connect the Smart wallet
+const wallet = new SmartWallet(config);
+await wallet.connect({
+personalWallet,
+});`}
+
+
+
+
+
+ {`import { ThirdwebProvider, ConnectWallet, smartWallet } from "@thirdweb-dev/react";
+export default function App() {
+return (
+
+
+
+ );
+}
+`}
+
+
+
+
+ {`import { ThirdwebProvider, ConnectWallet, smartWallet } from "@thirdweb-dev/react-native";
+export default function App() {
+return (
+
+
+
+ );
+}`}
+
+
+
+
+ {`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 personal wallet (Optional)
+ email: "email@email.com", // If using an email wallet as 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);
+}
+ `}
+
+
+
+
+### Using a Template
+
+Clone these templates to quickly deploy Smart Wallets and connect to them.
+
+
+
+## 4. Executing gas free transactions with Smart Wallets
+
+Once setup, you can use the thirdweb [TypeScript](/typescript), [React](/react), [React Native](react-native)
+and [Unity SDKs](/unity) to deploy contracts, perform transactions, and manipulate wallets just like you would with any other wallet.
+
+
+
+
+ {`import { ThirdwebSDK } from "@thirdweb-dev/sdk";
+// Simply initialize your SDK with the created smart wallet
+const sdk = await ThirdwebSDK.fromWallet(smartWallet, "goerli", {
+ clientId: "YOUR_CLIENT_ID"
+});
+// You can now interact with the blockchain as you would with a regular EOA
+const smartWalletAddress = await sdk.wallet.getAddress();
+// gas free wallet actions
+await sdk.wallet.transfer("0x...", "0.01");
+// gas free contract deployments
+const contractAddress = await sdk.deployer.deployNFTCollection({
+ name: "My NFT Collection",
+ primary_sale_recipient: smartWalletAddress
+});
+// gas free contract interactions
+const contract = await sdk.getContract(contractAddress);
+await contract.erc721.mint({
+ name: "My NFT",
+ description: "My NFT description",
+ image: "https://example.com/image.png",
+});
+`}
+
+
+
+
+ {`import { useAddress, useContract, useOwnedNFTs, Web3Button } from "@thirdweb-dev/react";
+// The ThirdwebProvider setup above already handles connection to the smart wallet
+// Within the provider, you can use the react SDK hooks to interact with the blockchain
+export default function MyComponent() {
+ // Get the connected smart wallet address
+ const smartWalletAddress = useAddress();
+ // Fetch owned NFTs
+ const { contract } = useContract("0x...");
+ const { data, isLoading } = useOwnedNFTs(contract, smartWalletAddress);
+ // Mint a new NFT
+ return (
+ contract.erc721.mint({
+ name: "My NFT",
+ description: "My NFT description",
+ image: "https://example.com/image.png",
+ })
+ }
+ >
+ Mint NFT
+
+ );
+}
+`}
+
+
+
+
+ {`import { useAddress, useContract, useOwnedNFTs, Web3Button } from "@thirdweb-dev/react-native";
+// The ThirdwebProvider setup above already handles connection to the smart wallet
+// Within the provider, you can use the react SDK hooks to interact with the blockchain
+export default function MyComponent() {
+ // Get the connected smart wallet address
+ const smartWalletAddress = useAddress();
+ // Fetch owned NFTs
+ const { contract } = useContract("0x...");
+ const { data, isLoading } = useOwnedNFTs(contract, smartWalletAddress);
+ // Mint a new NFT
+ return (
+ contract.erc721.mint({
+ name: "My NFT",
+ description: "My NFT description",
+ image: "https://example.com/image.png",
+ })
+ }
+ >
+ Mint NFT
+
+ );
+}
+`}
+
+
+
+
+ {`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",
+});
+}
+`}
+
+
+
+
+
diff --git a/docs/onboarding/23 Smart Wallet/4 Infrastructure.mdx b/docs/onboarding/23 Smart Wallet/4 Infrastructure.mdx
new file mode 100644
index 000000000..9915d0bb4
--- /dev/null
+++ b/docs/onboarding/23 Smart Wallet/4 Infrastructure.mdx
@@ -0,0 +1,102 @@
+---
+slug: /smart-wallet/infrastructure
+title: Bundler & Paymaster
+---
+
+# Bundler & Paymaster Infrastructure
+
+The thirdweb SDK handles all the heavy lifting of bundling operations and covering gas fees with a turn key infrastructure.
+The thirdweb paymaster and bundler services are **stand alone** and can be used with any smart account contract without using the thirdweb SDKs.
+
+On testnets, the only requirement is to obtain a free client id to get started.
+Once you're ready to deploy on mainnets, you will require an active [billing account](https://thirdweb.com/dashboard/settings).
+You can configure your client id to restrict interactions only with your own contracts or with any contract.
+
+### Pricing & Billing
+
+To use thirdweb's account abstraction infrastructure, you need to setup a billing account on the thirdweb dashboard Settings page.
+
+**Free Tier and Pro Tier:**
+
+- **Features:**
+ - **Bundler: **Transaction bundle calls (non-sponsored calls) are free to use.
+ - **Paymaster:** 10% premium on top of network fee based on your usage.
+ Find more information on the different billing tiers by visiting thirdweb's pricing page.
+
+### Supported chains
+
+With a thirdweb API key, you get access to bundler and paymaster infrastructure on the following chains:
+
+
+ View supported chains
+
+
+ -
+ Polygon
+
+ -
+ Optimism
+
+ -
+ Base
+
+ -
+ Arbitrum
+
+ -
+ Linea
+
+ -
+ Goerli
+
+ -
+ Sepolia
+
+ -
+ Mumbai
+
+ -
+ Base Goerli
+
+ -
+ Optimism Goerli
+
+ -
+ Arbitrum Goerli
+
+ -
+ Linea Testnet
+
+ -
+ Celo Alfajores Testnet
+
+
+
+
+To support a chain not listed, [contact us](https://thirdweb.typeform.com/to/Q93CVgUc?typeform-source=thirdweb-www-git-mariano-ftd-1670.thirdweb-preview.com).
+
+## Using a Custom Bundler & Paymaster
+
+Smart Wallet is free to use with your own account abstraction infrastructure. To use your own paymaster & bundler,
+pass the `bundlerUrl`, `paymasterUrl` and `paymasterAPI` options to the `SmartWallet`:
+
+```javascript
+class MyPaymaster extends PaymasterAPI {
+ async getPaymasterAndData(
+ userOp: Partial,
+ ): Promise {
+ // your implementation, must return the signed paymaster data
+ }
+}
+
+const config: SmartWalletConfig = {
+ chain,
+ gasless,
+ factoryAddress,
+ clientId,
+ bundlerUrl: "your-bundler-url",
+ paymasterUrl: "your-paymaster-url",
+ paymasterAPI: new MyPaymaster(),
+};
+```
diff --git a/docs/onboarding/23 Smart Wallet/Guides/TypeScript.mdx b/docs/onboarding/23 Smart Wallet/Guides/TypeScript.mdx
new file mode 100644
index 000000000..629e5f98e
--- /dev/null
+++ b/docs/onboarding/23 Smart Wallet/Guides/TypeScript.mdx
@@ -0,0 +1,253 @@
+---
+slug: /smart-wallet/guides/typescript
+title: Using Smart Wallet with the Typescript SDK
+---
+
+# How to use the Smart Wallet with the Typescript SDK
+
+By using the [wallet SDK](/wallet/smart-wallet) alongside the [TypeScript SDK](/typescript), we can use smart wallets in our applications easily.
+
+## Example Use Cases
+
+The wallet SDK with the TypeScript SDK is primarily used when creating a backend for your application or when creating a node script.
+In this guide, we will be using the wallet SDK to create a Node script but the logic for creating a backend is the same.
+
+If you are working in a React environment, you are recommended to follow [this guide](/smart-wallet/guides/react).
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/en/) installed.
+- [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) installed.
+
+## 1. Deploy an Account Factory
+
+First, you need to deploy an account factory. This is a contract that will be used to issue smart wallets.
+
+There are two ways to deploy an account factory:
+
+### 1.(a) Deploy a Pre-Built Contract
+
+You can deploy a pre-built account factory from the [explore page](https://thirdweb.com/explore).
+Head to the [Account Factory](https://thirdweb.com/thirdweb.eth/AccountFactory) contract page, Select your desired network and click on Deploy Now:
+
+Alternatively, you can deploy [ManagedAccountFactory](https://thirdweb.com/thirdweb.eth/ManagedAccountFactory) or [DynamicAccountFactory](https://thirdweb.com/thirdweb.eth/DynamicAccountFactory) to create upgradable wallets.
+
+**Learn more about the different account factories [here]**(/solidity/base-contracts/smart-accounts).
+
+### 1.(b) Deploy a Custom Contract
+
+You can also create a custom account factory by using the Solidity SDK and inheriting from one of the [base factory contracts](/solidity/base-contracts/smart-accounts).
+This is useful if you want to create a custom account factory with custom logic.
+
+For example:
+
+```solidity
+import "@thirdweb-dev/contracts/smart-wallet/non-upgradable/AccountFactory.sol";
+
+contract MyAccountFactory is AccountFactory {
+ constructor(
+ IEntryPoint _entrypoint
+ )
+ AccountFactory(
+ _entrypoint
+ )
+ {}
+
+ function createAccount(
+ address _owner,
+ address _account,
+ bytes calldata _data
+ ) external override returns (address) {
+ // custom logic here
+ }
+}
+```
+
+You can then deploy this contract using the CLI:
+
+```bash
+npx thirdweb deploy
+```
+
+This command will require you to [login](/cli/login) with your thirdweb account.
+
+Once the `AccountFactory` contract is deployed, you will be redirected to the deployed contract dashboard page.
+Copy the address for this contract.
+
+## 2. Create an API key
+
+To use the smart wallet bundler and paymaster you need to create an API key and a billing account.
+
+To create an API Key:
+
+- Head to the settings page in the dashboard and click the **API Keys** tab.
+- Click on **Create API Key**:
+
+
+
+- Give your API key a name and click **Next**.
+- Make sure that the **Smart Wallets** services are enabled and any addresses that your deployed smart accounts interact with are added to the **Allowed Contract Addresses** section:
+
+
+
+- Click **Next** and then ignore the **Set Access Restrictions** section. If you are using the smart wallet as part of a client side application,
+ you will need to add the domains/ bundle IDs of your application here but since we will be writing a script, we do not need this. Click "Create" to create your key.
+- Copy your **Secret Key** and store it in a safe place such as a password manager. You will not be able to see this key again.
+- Click **I Have Stored the Secret Key Securely** and your key will now be visible from the API Keys table.
+- **Note**: to edit your private key at any point, click on the key from the table and then click on the **Edit** button.
+
+In order to use smart wallets on mainnet you will also need to [create an account and add a paymet method](https://thirdweb.com/dashboard/settings/billing).
+
+## 3. Create a Node Script
+
+### 3.(a) Using the Create Command
+
+To use smart wallets in a node script, we are going to setup our project using the CLI [create](/cli/create) command.
+Open your terminal and run:
+
+```bash
+npx thirdweb create app
+```
+
+When promted, select/input the following options:
+
+- A name for the project
+- `EVM` as the blockchain
+- `Node.js` as the environment
+- `TypeScript` as the language
+
+This will create a repository. Open this in your code editor.
+
+Open the `index.ts` file and add the following:
+
+```typescript
+import { config } from "dotenv";
+import { ThirdwebSDK } from "@thirdweb-dev/sdk";
+import { readFileSync } from "fs";
+
+config();
+
+const chain = Goerli;
+const factoryAddress = "0x3c115305ecC8119D9517BB67a5B3D4073Bc9CffF";
+const secretKey = process.env.THIRDWEB_SECRET_KEY as string;
+
+const main = async () => {
+ if (!secretKey) {
+ throw new Error(
+ "No API Key found, get one from https://thirdweb.com/dashboard",
+ );
+ }
+ console.log("Running on", chain.slug, "with factory", factoryAddress);
+};
+
+main();
+```
+
+Here, we have added `Goerli` as the chain, pasted the factory address and the retrieved the `secretKey` from the `.env` file - make sure you paste the `secretKey` we created earlier here.
+
+### 3.(b) Creating the Personal Wallet Key
+
+This smart wallet is unlocked by a 'key' - a personal account.
+This key can be anything from a [MetaMask wallet](/wallet/metamask) or even a [Local Wallet](/wallet/local-wallet) and is used as a way to 'sign in' to the wallet.
+
+To create a personal wallet key, we are going to use the [Local Wallet](/wallet/local-wallet), which we need to import from the `@thirdweb-dev/wallets` package, and store it in an ecrypted JSON file.
+
+```typescript
+// Load or create personal wallet
+// here we generate LocalWallet that will be stored in wallet.json
+const personalWallet = new LocalWalletNode();
+await personalWallet.loadOrCreate({
+ strategy: "encryptedJson",
+ password: "password",
+});
+const personalWalletAddress = await personalWallet.getAddress();
+console.log("Personal wallet address:", personalWalletAddress);
+```
+
+### 3.(c) Creating the Smart Wallet
+
+Now, let's create a smart wallet using the [SmartWallet](/wallet/smart-wallet) class from the `@thirdweb-dev/wallets` package.
+To do this, we need to pass a `SmartWalletConfig` object to the constructor. This object contains the following properties:
+
+- `chain`: the chain that the smart wallet will be deployed on.
+- `factoryAddress`: the address of the account factory contract.
+- `secretKey`: the secret key that we created earlier.
+- `gasless`: whether the smart wallet should be gasless or not.
+
+Once we have created the config and instantiating the `SmartWallet` class, we can connect the personal wallet to the smart wallet using the `connect` method.
+
+```typescript
+// Configure the smart wallet
+const config: SmartWalletConfig = {
+ chain,
+ factoryAddress,
+ secretKey,
+ gasless: true,
+};
+
+// Connect the smart wallet
+const smartWallet = new SmartWallet(config);
+await smartWallet.connect({
+ personalWallet,
+});
+```
+
+To view all of the methods on the `SmartWallet` class, [view the Wallet SDK documentation](/wallet/smart-wallet).
+
+### 3.(d) Instantiate the thirdweb SDK
+
+Now that we have created a smart wallet object and connected it, we can instantiate the [thirdweb SDK](/typescript) with the smart wallet using the `fromWallet` method.
+
+```typescript
+// now use the SDK normally to perform transactions with the smart wallet
+const sdk = await ThirdwebSDK.fromWallet(smartWallet, chain, {
+ secretKey: secretKey,
+});
+
+console.log("Smart Account addr:", await sdk.wallet.getAddress());
+console.log("balance:", (await sdk.wallet.balance()).displayValue);
+```
+
+We have also passed our `secretKey` to the SDK so that we can use the smart wallet bundler and paymaster.
+
+We have also added some helpful logs to view the smart wallet address and balance using the associated `balance` and `getAddress` methods.
+
+### 3.(d) Using the Smart Wallet
+
+In order to follow this specific example, you will need the following setup:
+
+- [Deploy a token drop contract](https://thirdweb.com/thirdweb.eth/DropERC20) deployed on Goerli.
+- [Claim conditions](/dashboard/claim-conditions) set so that tokens can be claimed
+
+Now let's use this smart wallet to claim an ERC20 token from a token drop contract!
+
+First, we will get the contract instance of an ERC20 token drop contract using the `getContract` method.
+Then, we will get the balance of the ERC20 token using the `balance` method and log it to the console.
+Finally, we will claim 1 ERC20 token using the `claim` method and log the transaction hash to the console.
+
+```typescript
+// Claim a ERC20 token
+const contract = await sdk.getContract(
+ "0xc54414e0E2DBE7E9565B75EFdC495c7eD12D3823", // TokenDrop on goerli
+);
+const tokenBalance = await contract.erc20.balance();
+console.log("ERC20 token balance:", tokenBalance.displayValue);
+const tx = await contract.erc20.claim(1);
+console.log("Claimed 1 ERC20 token, tx hash:", tx.receipt.transactionHash);
+```
+
+## 4. Run the Script
+
+To run the script, run the following command:
+
+```bash
+yarn dev
+```
+
+Here, you will see the following output:
+
+
+
+As you can see, upon claiming the token, the smart wallet is deployed. This is because smart account contracts are deployed when the first transaction is initiated.
+
+We have successfully deployed a smart wallet using our factory contract and claimed an ERC20 token!
diff --git a/sidebars/onboarding.js b/sidebars/onboarding.js
index d54eb6077..10256b493 100644
--- a/sidebars/onboarding.js
+++ b/sidebars/onboarding.js
@@ -41,7 +41,7 @@ const sidebars = {
{
type: "link",
label: "Smart Wallet",
- href: "/wallet/smart-wallet",
+ href: "/smart-wallet",
},
{
type: "link",
@@ -230,6 +230,13 @@ const sidebars = {
},
],
+ smartWallet: [
+ {
+ type: "autogenerated",
+ dirName: "23 Smart Wallet",
+ },
+ ],
+
sdk: [
{
type: "doc",
diff --git a/src/components/landing-page/WalletsCardsSection.tsx b/src/components/landing-page/WalletsCardsSection.tsx
index 6f3814937..89494e049 100644
--- a/src/components/landing-page/WalletsCardsSection.tsx
+++ b/src/components/landing-page/WalletsCardsSection.tsx
@@ -22,6 +22,20 @@ const products: Product[] = [
description: "Enable users to connect their wallets to web3 apps and games",
link: "react/react.connectwallet",
},
+ {
+ image: "/assets/wallets/smart-wallet.svg",
+ name: "Smart Wallet",
+ description:
+ "Easily create and connect to ERC-4337 Smart Wallets in your application",
+ link: "/smart-wallet",
+ },
+ {
+ image: "/assets/wallets/paper.png",
+ name: "Email Wallet",
+ description:
+ "Easily create and connect users with social or email wallets in your application",
+ link: "/wallet/paper",
+ },
{
image: "/assets/product/auth.png",
name: "Auth",
diff --git a/static/assets/dashboard/create-api-key-combined.png b/static/assets/dashboard/create-api-key-combined.png
index 732b833b8..2dea2c3ea 100644
Binary files a/static/assets/dashboard/create-api-key-combined.png and b/static/assets/dashboard/create-api-key-combined.png differ
diff --git a/static/assets/dashboard/settings-tab.png b/static/assets/dashboard/settings-tab.png
index d3794e521..9581fd54d 100644
Binary files a/static/assets/dashboard/settings-tab.png and b/static/assets/dashboard/settings-tab.png differ
diff --git a/static/assets/script-smart-wallet-output.png b/static/assets/script-smart-wallet-output.png
new file mode 100644
index 000000000..bf7bea6ca
Binary files /dev/null and b/static/assets/script-smart-wallet-output.png differ
diff --git a/static/assets/smart-wallet-architecture.png b/static/assets/smart-wallet-architecture.png
new file mode 100644
index 000000000..2af46e6a7
Binary files /dev/null and b/static/assets/smart-wallet-architecture.png differ