Smart Wallet Revamp

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).
 
+<div className="row" style={{ marginBottom: 12, padding: 8, paddingTop: 0 }}>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="Getting Started"
+      link="/smart-wallet"
+      image="/assets/wallets/smart-wallet.svg"
+      description="How to use smart wallets with the thirdweb SDKs."
+    />
+  </div>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="How it Works"
+      link="/smart-wallet/how-it-works"
+      image="/assets/wallets/smart-wallet.svg"
+      description="Learn more about what a smart wallet is and how it works."
+    />
+  </div>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="Bundler & Paymaster"
+      link="/smart-wallet/infrastructure"
+      image="/assets/wallets/smart-wallet.svg"
+      description="Using the thirdweb account abstraction infrastructure."
+    />
+  </div>
+</div>
+
+## 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<UserOperationStruct>,
-  ): Promise<string> {
-    // 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.
-
-<div className="row" style={{ marginLeft: 8 }}>
-  <div>
-    <ViewRepoButton
-      name={"js"}
-      text="Node.js Script"
-      link={"https://github.com/thirdweb-example/smart-wallet-script"}
-    />
-  </div>
-  <div style={{ marginLeft: 12 }}>
-    <ViewRepoButton
-      name={"js"}
-      text="React App"
-      link={"https://github.com/thirdweb-example/smart-wallet-react"}
-    />
-  </div>
-</div>
-
 ## Supported chains
 
 With a thirdweb API key, you get access to bundler and paymaster infrastructure on the following chains:

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.

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:
+
+<div className="row" style={{ marginBottom: 12, padding: 8, paddingTop: 0 }}>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="Wallet SDK"
+      link="/wallet/smart-wallet"
+      image="/assets/product/wallet.png"
+      description="Using smart wallets with the Wallet SDK for low level control in JavaScript"
+    />
+  </div>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="React SDK"
+      link="/react/react.smartwallet"
+      image="/assets/languages/react.png"
+      description="Using smart wallets with Connect Wallet in a React app."
+    />
+  </div>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="React Native SDK"
+      link="/react-native/wallets#smart-wallet"
+      image="/assets/languages/react-native.png"
+      description="Using smart wallets with Connect Wallet for mobile apps"
+    />
+  </div>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="Unity SDK"
+      link="/unity/thirdwebmanager#smart-wallet-options"
+      image="/assets/languages/unity.webp"
+      description="Using smart wallets in a game built with Unity"
+    />
+  </div>
+</div>
+
+## 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](https://thirdweb.com/pricing).
+
+## Supported chains
+
+<details>
+  <summary>View supported chains</summary>
+  <div>
+    <ul>
+      <li>
+        <b>Polygon</b>
+      </li>
+      <li>
+        <b>Optimism</b>
+      </li>
+      <li>
+        <b>Base</b>
+      </li>
+      <li>
+        <b>Arbitrum</b>
+      </li>
+      <li>
+        <b>Linea</b>
+      </li>
+      <li>
+        <b>Goerli</b>
+      </li>
+      <li>
+        <b>Sepolia</b>
+      </li>
+      <li>
+        <b>Mumbai</b>
+      </li>
+      <li>
+        <b>Base Goerli</b>
+      </li>
+      <li>
+        <b>Optimism Goerli</b>
+      </li>
+      <li>
+        <b>Arbitrum Goerli</b>
+      </li>
+      <li>
+        <b>Linea Testnet</b>
+      </li>
+      <li>
+        <b>Celo Alfajores Testnet</b>
+      </li>
+    </ul>
+  </div>
+</details>
+
+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).

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/).
+
+![Smart Wallet Flow](/assets/smart-wallet-architecture.png)
+
+## 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.