Change home page & add social login section

CLAUDE.md

@@ -4,10 +4,10 @@ This document serves as a comprehensive guide for working with the Pimlico docum
 
 ## Repository Overview
 
-The Pimlico documentation is built using **Vocs v1.0.5**, a React-based documentation framework. The site is deployed on Vercel and uses MDX format for content, allowing React components within markdown files.
+The Pimlico documentation is built using **Vocs v1.4.x**, a React-based documentation framework. The site is deployed on Vercel and uses MDX format for content, allowing React components within markdown files.
 
 ### Technology Stack
-- **Framework**: Vocs (v1.0.5)
+- **Framework**: Vocs (v1.4.x)
 - **Package Manager**: pnpm (v9.6.0)
 - **Language**: TypeScript/MDX
 - **Styling**: Tailwind CSS

docs/pages/guides/conceptual/account-abstraction.mdx

@@ -1,8 +1,8 @@
 ---
-title: About Account Abstraction
+title: Account Abstraction (ERC-4337)
 ---
 
-# Account Abstraction
+# Account Abstraction (ERC-4337)
 
 Account abstraction is a feature that allows users to customize their Ethereum accounts with smart contract logic. It simplifies the account system by reducing Ethereum's two types of accounts (Externally Owned Accounts and Contract Accounts) to one type - Contract Accounts. The resulting contract accounts can initiate transactions, pay transaction fees, and have more flexibility and security than regular accounts.
 

docs/pages/guides/getting-started.mdx

@@ -81,10 +81,8 @@ To use Pimlico's services, you'll need an API key. [Learn how to create one](/gu
 
 If you're new to account abstraction, we recommend starting with our conceptual guides:
 
-- [About Account Abstraction](/guides/conceptual/account-abstraction)
-- [ERC-4337 Explained](/guides/conceptual/erc4337)
+- [Account Abstraction (ERC-4337)](/guides/conceptual/account-abstraction)
 - [EIP-7702 Explained](/guides/eip7702)
-- [ERC-7579 Explained](/guides/conceptual/erc7579)
 
 ## Choosing a Smart Account
 
@@ -104,7 +102,6 @@ Or jump directly to implementation guides for specific accounts:
 
 Once you're familiar with the basics, explore these advanced topics:
 
-- [Dapp Gas Sponsorship](/guides/how-to/dapp-gas-sponsorship)
 - [Parallel Transactions](/guides/how-to/parallel-transactions)
 - [Conditional Sponsoring](/guides/how-to/paymasters/conditional-sponsoring)
 

docs/pages/guides/how-to/signers/social-logins.mdx

@@ -0,0 +1,20 @@
+# Social login signers
+
+permissionless.js works with a wide range of embedded-wallet and social-login providers, so you can let users sign in with Google, email, phone, passkeys, and more while still benefiting from the power of smart accounts (gas sponsorship, batched transactions, session keys, and programmable permissions).
+
+Below is the documentation for some of the most known providers:
+
+- [Dynamic](/guides/how-to/signers/dynamic) — embedded wallets with social, email, and wallet connectors.
+- [Privy](/guides/how-to/signers/privy) — embedded wallets with social and email login.
+- [Magic](/guides/how-to/signers/magic) — email and social login with a hosted wallet UI.
+- [Web3Auth](/guides/how-to/signers/web3auth) — MPC-based social login with native account abstraction support.
+- [Openfort](/guides/how-to/signers/openfort) — embedded wallets tailored for consumer and gaming apps.
+- [Para](/guides/how-to/signers/para) — portable MPC embedded wallets accessible via email or social login.
+- [Particle Network](/guides/how-to/signers/particle-network) — MPC-TSS wallet-as-a-service with Web2 login methods.
+- [Lit Protocol](/guides/how-to/signers/lit-protocol) — OTP sign-in via email, SMS, or WhatsApp backed by a decentralized key management network.
+
+Looking for passkeys? Check out [Passkey (WebAuthn) signer](/guides/how-to/signers/passkey) and [Passkey (WebAuthn) server](/guides/how-to/signers/passkey-server).
+
+## Don't see your provider?
+
+Using a custom signer, or a provider we don't have documentation for yet? Reach out to [support@pimlico.io](mailto:support@pimlico.io) and we'll help you integrate it.

docs/pages/guides/tutorials/index.mdx

@@ -2,6 +2,8 @@
 
 Learning-oriented lessons that take you through a series of steps to complete a project. Most useful when you want to get started with Pimlico.
 
-[Tutorial 1](/references/permissionless/tutorial/tutorial-1) takes you through the journey of leveraging permissionless.js's high-level APIs to easily create and bundle a user operation.
+[Send your first gasless transaction](/guides/tutorials/tutorial-1) takes you through the journey of leveraging permissionless.js's high-level APIs to easily create and bundle a gasless user operation sponsored by Pimlico's verifying paymaster.
 
-[Tutorial 2](/references/permissionless/tutorial/tutorial-2) takes you through the journey of sponsoring your first user operation with USDC with an ERC-20 paymaster.
+[Batch multiple transactions from a smart account](/guides/tutorials/send-transaction) walks you through deploying a smart account and sending a batched user operation (multiple calls in one tx) paid for by the account's own ETH.
+
+[Submit a user operation with an ERC-20 Paymaster](/guides/tutorials/tutorial-2) takes you through the journey of sponsoring your first user operation with USDC with an ERC-20 paymaster.

docs/pages/guides/tutorials/send-transaction.mdx

@@ -0,0 +1,144 @@
+# Tutorial — Batch multiple transactions from a smart account
+
+In this tutorial, you will deploy an ERC-4337 smart account and submit your first user operation — one that batches **multiple calls** into a single on-chain transaction.
+
+Batching is one of the core superpowers of smart accounts. Instead of asking the user to sign two transactions (e.g. an ERC-20 `approve` followed by a `swap`), you can bundle them into a single user operation that executes atomically: either everything succeeds, or nothing does.
+
+You will set up the necessary permissionless.js clients, build a batched user operation, fund the smart account with Sepolia ETH so it can pay its own gas, and then submit it on-chain with Pimlico's bundler.
+
+:::tip[Want gasless transactions instead?]
+If you'd rather have a paymaster sponsor the gas for your user, jump to [Tutorial 1 — Send your first gasless transaction](/guides/tutorials/tutorial-1).
+:::
+
+## Steps
+
+::::steps
+
+### Get a Pimlico API key
+
+[Create your API key](/guides/create-api-key)
+
+### Clone the Pimlico tutorial template repository
+
+We have created a [Pimlico tutorial template repository](https://github.com/pimlicolabs/tutorial-template) that you can use to get started. It comes set up with Typescript, viem, and permissionless.js.
+
+```bash
+git clone https://github.com/pimlicolabs/tutorial-template.git pimlico-tutorial-send-transaction
+cd pimlico-tutorial-send-transaction
+```
+
+Now, let's install the dependencies:
+
+```bash
+npm install
+```
+
+The main file we will be working with is `index.ts`. Let's run it to make sure everything is working:
+
+```bash
+npm start
+```
+
+If everything has been set up correctly, you should see `Hello world!` printed to the console.
+
+### Create the public client and generate a private key
+
+The public client will be responsible for querying the blockchain. We will also use a Pimlico client to fetch gas prices from the bundler.
+
+Make sure to replace `YOUR_PIMLICO_API_KEY` in the code below with your actual Pimlico API key.
+
+Let's open up `index.ts`, and add the following to the bottom:
+
+```ts
+// [!include ~/snippets/send-transaction.ts:clients]
+```
+
+### Create the `SmartAccount` instance
+
+For the purposes of this guide, we will be using [Safe](https://safe.global) accounts. This account is an ERC-4337 wallet controlled by a single EOA signer.
+
+:::tip[Tip]
+Want to learn more about using Safe accounts? Take a look at our [dedicated Safe guide](/references/permissionless/how-to/accounts/use-safe-account)
+:::
+
+To create the Safe account, we will use the `toSafeSmartAccount` utility function from permissionless.js. We need to specify the Safe version we are using as well as the global ERC-4337 EntryPoint address. For the signer, we will be using the previously generated private key.
+
+Add the following to the bottom of `index.ts`:
+
+```ts 
+// [!include ~/snippets/send-transaction.ts:smartAccount]
+```
+
+Let's run this code with `npm start`. You should see the smart account address printed to the console.
+
+```txt
+Smart account address: https://sepolia.etherscan.io/address/0x374b42bCFAcf85FDCaAB84774EA15ff36D42cdA7
+```
+
+:::info
+If you visit the address on Etherscan, you might notice that no contract is actually deployed to this address yet. This is because smart accounts are counterfactual, meaning that they are only deployed on-chain the first time you send a transaction through the account.
+:::
+
+### Fund the smart account with Sepolia ETH
+
+Since we are not using a paymaster in this tutorial, the smart account needs to pay its own gas. Send a small amount of Sepolia ETH (0.01 ETH is plenty) to the smart account address printed above.
+
+You can get Sepolia ETH from a public faucet, for example the [PoW Sepolia Faucet](https://sepolia-faucet.pk910.de/).
+
+:::note
+If you'd prefer to skip funding and have the gas sponsored instead, see [Tutorial 1](/guides/tutorials/tutorial-1), which uses Pimlico's verifying paymaster.
+:::
+
+### Create the bundler and smart account clients
+
+Now that we have a `SmartAccount` instance, we need to create a `SmartAccountClient` instance to be able to transact from it. `SmartAccountClient` is an almost drop-in replacement for a viem [`WalletClient`](https://viem.sh/docs/clients/wallet), but it also includes some additional functionality for interacting with smart accounts.
+
+We specify the `gasPrice` middleware function to fetch the gas price from the bundler that we will use to submit the user operation in the next step. We do **not** configure a paymaster — the smart account will pay for its own gas using the ETH you just sent it.
+
+Add the following to the bottom of `index.ts`:
+
+```typescript
+// [!include ~/snippets/send-transaction.ts:smartAccountClient]
+```
+
+### Batch multiple calls in one user operation
+
+Finally, let's submit a batched user operation from the smart account. We will send **two calls** to `0xd8da6bf26964af9d7eed9e03e53415d37aa96045` (vitalik.eth) with different `callData`, packed into a single user operation.
+
+Instead of passing a single `to`/`data` pair, we pass an array of `calls` — the smart account will execute them atomically.
+
+Underneath the hood, the `SmartAccountClient` will build a user operation, sign it with the smart account's private key, and then submit it to the bundler. The bundler will then query for receipts until it sees the user operation included on-chain.
+
+Add the following to the bottom of `index.ts`:
+
+```typescript
+// [!include ~/snippets/send-transaction.ts:submit]
+```
+
+:::tip[Real-world batching]
+In production, batching is how you deliver "one-click" UX for multi-step flows — for example, combining an ERC-20 `approve` and a DEX `swap` into a single signature, or minting an NFT and listing it for sale in one go.
+:::
+
+Let's run this code again with `npm start`. You should see the transaction hash bundling the user operation on-chain printed to the console.
+
+```txt
+User operation included: https://sepolia.etherscan.io/tx/0x7a2b61b4b7b6e9e66c459e3c9c24c7a292fc6c740533ce35dbf58710960cc0e5
+```
+
+You can now view the transaction on the Sepolia testnet explorer. By sending this user operation, you have:
+- Deployed the counterfactual smart account contract
+- Had this newly-deployed smart account verify the private key's signature
+- Paid for the user operation's gas fees from the smart account's own ETH balance
+- Executed **two calls atomically** in a single on-chain transaction
+
+All in a couple lines of code.
+
+Congratulations, you are now a pioneer of Account Abstraction! 🎉
+
+Please [get in touch](https://t.me/pimlicoHQ) if you have any questions or if you'd like to share what you're building!
+
+::::
+
+### Combined code
+
+If you want to see the complete code that combines all of the previous steps, we uploaded it to a [separate repository](https://github.com/pimlicolabs/tutorials). If you're looking to run it, remember to replace the API key with your own!

docs/pages/index.mdx

@@ -16,27 +16,30 @@ import { HomePage } from 'vocs/components'
 
 <div className="mx-0 mt-4 md:mx-4 xl:-mx-12 2xl:-mx-24">
     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+    <div>
+        ## [<span className="underline text-teal-600 hover:text-teal-800 hover:underline">Sponsor gas →</span>](/guides/tutorials/tutorial-1)
+
+        Use the verifying paymaster to submit a gasless transaction.
+    </div>
         <div>
-            ## [<span className="underline text-orange-600 hover:text-orange-800 hover:underline">permissionless.js →</span>](/references/permissionless)
+            ## [<span className="underline text-purple-600 hover:text-purple-800 hover:underline">Batch multiple transactions →</span>](/guides/tutorials/send-transaction)
 
-            Our TypeScript library built on viem for interacting with ERC-4337 bundlers, paymasters, and user operations.
+            Combine actions like `approve` + `swap` into a single user operation.
         </div>
         <div>
-            ## [<span className="underline text-blue-600 hover:text-blue-800 hover:underline">Bundler →</span>](/references/bundler)
-            Powering smart accounts by relaying ERC-4337 user operations for fast and reliable on-chain inclusion.
+            ## [<span className="underline text-orange-600 hover:text-orange-800 hover:underline">Pay gas in any token →</span>](/guides/tutorials/tutorial-2)
+
+            Let users pay gas in any token via our ERC-20 paymaster.
         </div>
         <div>
-            ## [<span className="underline text-teal-600 hover:text-teal-800 hover:underline">Paymasters →</span>](/guides/tutorials/tutorial-1)
-            Sponsoring the gas fees for user operations on 100+ chains with a simple API endpoint.
-        </div>
-        {/* <div>
-            ## [<span className="underline text-yellow-600 hover:text-yellow-800 hover:underline">Batua →</span>](https://batua.sh/)
-            Fully customizable smart account shadcn/ui component secured with passkeys.
+            ## [<span className="underline text-blue-600 hover:text-blue-800 hover:underline">Social logins →</span>](/guides/how-to/signers/social-logins)
+
+            Onboard users with passkeys, Privy, Dynamic, Magic, Web3Auth, and more.
         </div>
-        <div>
-            ## [<span className="underline text-yellow-600 hover:text-yellow-800 hover:underline">FlashFund →</span>](/references/flash-fund)
-            Access instant ETH across any chain through developer-funded credit or user-controlled resource locks.
-        </div> */}
+    </div>
+
+    <div style={{ marginTop: '0.5rem' }} className="text-sm opacity-80">
+        Looking for product references? [permissionless.js](/references/permissionless), [Bundler](/references/bundler), [Paymasters](/references/paymaster).
     </div>
 </div>
 

docs/snippets/send-transaction.ts

@@ -0,0 +1,84 @@
+import "dotenv/config"
+import { writeFileSync } from "fs"
+import { toSafeSmartAccount } from "permissionless/accounts"
+import { Hex, createPublicClient, http } from "viem"
+import { generatePrivateKey, privateKeyToAccount } from "viem/accounts"
+import { sepolia } from "viem/chains"
+import { createPimlicoClient } from "permissionless/clients/pimlico"
+import { entryPoint07Address } from "viem/account-abstraction"
+import { createSmartAccountClient } from "permissionless"
+
+// [!region clients]
+const apiKey = process.env.PIMLICO_API_KEY
+if (!apiKey) throw new Error("Missing PIMLICO_API_KEY")
+
+const privateKey =
+	(process.env.PRIVATE_KEY as Hex) ??
+	(() => {
+		const pk = generatePrivateKey()
+		writeFileSync(".env", `PRIVATE_KEY=${pk}`)
+		return pk
+	})()
+
+export const publicClient = createPublicClient({
+	chain: sepolia,
+	transport: http("https://sepolia.rpc.thirdweb.com"),
+})
+
+const pimlicoUrl = `https://api.pimlico.io/v2/sepolia/rpc?apikey=${apiKey}`
+
+const pimlicoClient = createPimlicoClient({
+	transport: http(pimlicoUrl),
+	entryPoint: {
+		address: entryPoint07Address,
+		version: "0.7",
+	},
+})
+// [!endregion clients]
+
+// [!region smartAccount]
+const account = await toSafeSmartAccount({
+	client: publicClient,
+	owners: [privateKeyToAccount(privateKey)],
+	entryPoint: {
+		address: entryPoint07Address,
+		version: "0.7",
+	}, // global entrypoint
+	version: "1.4.1",
+})
+
+// Send some Sepolia ETH to this address so the smart account can pay its own gas.
+console.log(`Smart account address: https://sepolia.etherscan.io/address/${account.address}`)
+// [!endregion smartAccount]
+
+// [!region smartAccountClient]
+const smartAccountClient = createSmartAccountClient({
+	account,
+	chain: sepolia,
+	bundlerTransport: http(pimlicoUrl),
+	userOperation: {
+		estimateFeesPerGas: async () => {
+			return (await pimlicoClient.getUserOperationGasPrice()).fast
+		},
+	},
+})
+// [!endregion smartAccountClient]
+
+// [!region submit]
+const txHash = await smartAccountClient.sendTransaction({
+	calls: [
+		{
+			to: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
+			value: 0n,
+			data: "0x1234",
+		},
+		{
+			to: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
+			value: 0n,
+			data: "0x5678",
+		},
+	],
+})
+
+console.log(`User operation included: https://sepolia.etherscan.io/tx/${txHash}`)
+// [!endregion submit]