initial commit

.github/workflows/fmt.yml

@@ -0,0 +1,13 @@
+name: format check
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  style:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: dprint/check@v2.2

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/docs/dist

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Coinbase
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1 @@
+This is a [Vocs](https://vocs.dev) project bootstrapped with the Vocs CLI.

docs/pages/FAQ.mdx

@@ -0,0 +1,50 @@
+## When will Smart Wallet be publicly available on mainnets? 
+By early June. 
+
+## What networks are supported?
+- Base
+- Arbitrum
+- Optimism
+- Zora 
+- Polygon 
+- BNB
+- Avalanche
+- ETH mainnet (not preferred for use, due to gas cost)
+
+## How does Smart Wallet work with Coinbase Wallet mobile app and extension? 
+For now, Smart Wallet is separate from wallet mobile and extension. Users sign on [keys.coinbase.com](https://keys.coinbase.com/)
+and can view and manage assets at [homebase.coinbase.com](https://homebase.coinbase.com/). 
+
+See [makeWeb3Provider](/sdk/makeWeb3Provider#parameters) documentation for nuances based on different configurations. 
+
+## Will users have the same address across chains? 
+Yes, a user's Smart Wallet address will be the same across all the chains we support. 
+
+## How much does it cost?
+Smart Wallet is free to use for both developers and users. 
+
+## Is Smart Wallet more expensive to use? 
+Smart contract wallets use more gas per transaction than EOA wallets. This means they should be avoided on networks like Ethereum mainnet, 
+but elsewhere the cost difference is negligible. 
+
+For example, some current transaction costs on Base using Smart Wallet
+- ETH transfer: $0.03
+- ERC-20 transfer: $0.06
+
+## Who's holding the keys?
+Smart wallets are secured by passkeys stored on the user's device. 
+Passkeys are backed up with passkey providers such as Apple, Chrome, or 1Password, 
+or on hardware such as YubiKeys. 
+Passkey signatures are validated directly onchain via an [open source and audited smart contract](https://github.com/base-org/webauthn-sol). 
+Coinbase never holds keys and never has access to user funds.
+
+## What is a passkey? 
+Passkeys are alternatives to passwords or other encrypted methods like recovery phrases, that are extremely easy to create and highly secure.
+
+They are end-to-end encrypted and linked to your Google or iCloud account, Chrome profile, or hardware device such as a YubiKey.
+
+This means users no longer have to deal with passwords or recovery phrases. Instead they can use common methods of authorization like touch or faceID, and be more resistant to phishing attempts.
+
+## What happens if a user loses their passkey? 
+
+Every Smart Wallet supports multiple owners, and our client will soon allow users to add a backup recovery key for the unlikely case they lose their passkey.

docs/pages/base-gasless-campaign.mdx

@@ -0,0 +1,11 @@
+# Base Gasless Campaign
+
+Base is offering gas credits to help developers make the most of 
+Smart Wallet's [paymaster (sponsored transactions)](/guides/paymasters) features. 
+
+| Partner Tier | Base Gas Credit Incentive | Requirements | Actions |
+|--------------|---------------------------|--------------|----------|
+| 1            | $15k                      | <ul><li>- Support Coinbase Smart Wallet</li><li>- Onboard to Coinbase Paymaster</li><li>- Preferred placement in your UI (ie “Create Wallet” button)</li></ul>      | <ol><li>1. Bump your Coinbase SDK to add Coinbase Smart Wallet to your app, or bump to latest version of any [supporting wallet library](/wallet-library-support).</li><li>2. Sign in / up for [Coinbase Developer Platform](https://www.coinbase.com/developer-platform) (takes less than 2 minutes). No KYC needed - just email and phone.</li><li>3. Check out the Paymaster product where the Base Mainnet Paymaster is enabled by default. Set and change your gas policy at any time.</li><li>4. Complete [this form](https://docs.google.com/forms/d/1yPnBFW0bVUNLUN_w3ctCqYM9sjdIQO3Typ53KXlsS5g/viewform?edit_requested=true) and email basegascredits@coinbase.com that you’ve completed, along with evidence that you’ll have the “Create Wallet” button in your UI</li><li>Credits will land within 1 week of completion</li></ol>  |
+| 2            | $10k                      | <ul><li>- Support Coinbase Smart Wallet</li><li>- Onboard to Coinbase Paymaster</li></ul>  | <ol><li>1. Bump your Coinbase SDK to add Coinbase Smart Wallet to your app, or bump to latest version of any [supporting wallet library](/wallet-library-support).</li><li>2. Sign in / up for [Coinbase Developer Platform](https://www.coinbase.com/developer-platform) (takes less than 2 minutes). No KYC needed - just email and phone.</li><li>3. Check out the Paymaster product where the Base Mainnet Paymaster is enabled by default. Set and change your gas policy at any time.</li><li>4. Complete [this form](https://docs.google.com/forms/d/1yPnBFW0bVUNLUN_w3ctCqYM9sjdIQO3Typ53KXlsS5g/viewform?edit_requested=true) and email basegascredits@coinbase.com that you’ve completed.</li><li>Credits will land within 1 week of completion</li></ol>    |
+| 3            | $3k                       | <ul><li>- Support Coinbase Smart Wallet</li><li>- Provide Contract Address</li></ul>         | <ol><li>1. Bump your Coinbase SDK to add Coinbase Smart Wallet to your app, or bump to latest version of any [supporting wallet library](/wallet-library-support).</li><li>2. Provide your contract address(es) in [this form](https://docs.google.com/forms/d/1wiEf01LCA4FBQ2Yh_K20TC9USgDPR95LkVVfe_o2-Is/viewform?edit_requested=true). </li><li>3. For additional credits, sign in / up for [Coinbase Developer Platform](https://www.coinbase.com/developer-platform) (takes less than 2 minutes). No KYC needed - just email and phone.</li></ol>  |
+| Bonus        | $1k                       | <ul><li>- Release demo</li></ul>      | Create a demo of your Coinbase Smart wallet integration, post on social (Warpcast and/or X) and tag Coinbase Wallet and/or Base|

docs/pages/checklist.mdx

@@ -0,0 +1,35 @@
+# Smart Wallet Launch-Ready Checklist 
+## The Basics
+
+:::steps
+
+### Test your app with Smart Wallet
+
+Test your app with Smart Wallet enabled. See [our guide](/guides/update-existing-app).
+
+### Ensure Smart Wallet compatible Signature Validation
+
+If your app does any offchain signature validation (such as Sign-In With Ethereum) or your smart contracts 
+do any signature validation, ensure your app is [ERC-6492](https://eips.ethereum.org/EIPS/eip-6492) compliant. 
+See [our guide](/guides/signature-verification). 
+
+### Magic Spend Compatible
+Magic Spend enables users to get "just in time" transaction funding from their Coinbase account.
+This is currently supported for ETH only on Base. 
+To give users the best experience, apps should make use of the `auxiliaryFunds` capability 
+and ensure they are not blocking actions based solely on onchain balance checks. See [our guide](/guides/magic-spend).
+
+### Use SDK 4.0.3 or later
+Ensure your app is using SDK version 4.0.3. Check [Wallet Library Support](/wallet-library-support) to ensure readiness.
+:::
+
+## Bonus: Make the most of Smart Wallet!
+:::steps
+### Batch Transactions
+Improve your app's UX by using batch transactions, allowing, for examples, 
+approvals and swaps to happen in a single transaction. See [our guide](/guides/batch-transactions).
+### Paymasters (sponsored transactions)
+Smart Wallet is one of the first wallets to support app-defined paymasters. This enables sponsoring
+certain transactions for your users, so they do not have to know or think about gas cost. 
+See [our guide](/guides/paymasters).
+:::

docs/pages/guides/batch-transactions.mdx

@@ -0,0 +1,178 @@
+# Batch Transactions
+
+With Smart Wallet, you can send multiple onchain calls in a single transaction. Doing so improves the UX of multi-step interactions by reducing them to a single click. A common example of where you might want to leverage batch transactions is an ERC-20 `approve` followed by a swap.
+
+You can submit batch transactions by using new `wallet_sendCalls` RPC, defined [here](https://eip5792.xyz/reference/sendCalls).
+
+## Using Wagmi
+
+:::warning
+The `useWriteContracts` and `useCapabilities` hooks used below rely on new wallet RPC and are not yet supported in most wallets. 
+It is recommended to have a fallback function if your app supports wallets other than Smart Wallet. 
+:::
+
+:::steps
+### (Optional) Check for atomic batching support
+
+Smart Wallet will submit multiple calls as part of a single transaction. However, if your app supports other wallets, and you want to check that multiple calls will be submitted atomically (in a single transaction), check the wallet's capabilities.
+
+```ts twoslash [App.tsx]
+// @filename: App.tsx
+import React from 'react'
+// ---cut---
+import { useCapabilities } from 'wagmi/experimental'
+
+function App() {
+  const { data: capabilities } = useCapabilities() // [!code hl]
+// @log:   {
+// @log:     84532: {
+// @log:       atomicBatch: {
+// @log:         supported: true,
+// @log:       },
+// @log:     }  
+// @log:   }
+
+  return <div />
+}
+```
+
+The `useCapabilities` method will return, per chain, the capabilities that the connected wallet supports. If the connected wallet supports atomic batching, it will return an `atomicBatch` capability with a `supported` field equal to `true` for each chain it supports atomic batching on.
+
+### Send the calls
+
+If you have your smart contract ABIs, the easiest way to send multiple calls is to use the Wagmi `useWriteContracts` hook.
+
+```ts twoslash [App.tsx]
+// @filename: App.tsx
+import React from 'react'
+// ---cut---
+import { useAccount } from 'wagmi'
+import { useWriteContracts } from 'wagmi/experimental'
+
+const abi = [
+  {
+    stateMutability: 'nonpayable',
+    type: 'function',
+    inputs: [{ name: 'to', type: 'address' }],
+    name: 'safeMint',
+    outputs: [],
+  }
+] as const
+
+function App() {
+  const account = useAccount()
+  const { writeContracts } = useWriteContracts() // [!code hl]
+
+  const handleMint = () => {
+    writeContracts({ // [!code hl]
+      contracts: [ // [!code hl]
+        { // [!code hl]
+          address: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19", // [!code hl]
+          abi, // [!code hl]
+          functionName: "safeMint", // [!code hl]
+          args: [account.address], // [!code hl]
+        }, // [!code hl]
+        { // [!code hl]
+          address: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19", // [!code hl]
+          abi, // [!code hl]
+          functionName: "safeMint", // [!code hl]
+          args: [account.address], // [!code hl]
+        } // [!code hl]
+      ], // [!code hl]
+    }) // [!code hl]
+  }
+
+  return ( 
+    <div>
+      <button onClick={handleMint}>Mint</button>
+    </div>
+  )
+}
+```
+
+### Check on the status of your calls
+
+The `useWriteContracts` hook returns an object with a `data` field. This `data` is a call bundle identifier. Use the Wagmi `useCallsStatus` hook with this identifier to check on the status of your calls.
+
+This will return a `PENDING` or `CONFIRMED` status along with a subset of a transaction receipt.
+
+```ts twoslash [App.tsx]
+// @filename: App.tsx
+import React from 'react'
+// ---cut---
+import { useAccount } from 'wagmi'
+import { useWriteContracts, useCallsStatus } from 'wagmi/experimental'
+
+const abi = [
+  {
+    stateMutability: 'nonpayable',
+    type: 'function',
+    inputs: [{ name: 'to', type: 'address' }],
+    name: 'safeMint',
+    outputs: [],
+  }
+] as const
+
+function App() {
+  const account = useAccount()
+  const { data: id, writeContracts } = useWriteContracts()
+  const { data: callsStatus } = useCallsStatus({ // [!code hl]
+    id: id as string, // [!code hl]
+    query: { // [!code hl]
+      enabled: !!id, // [!code hl]
+      // Poll every second until the calls are confirmed // [!code hl]
+      refetchInterval: (data) => // [!code hl]
+        data.state.data?.status === "CONFIRMED" ? false : 1000, // [!code hl]
+    }, // [!code hl]
+  }); // [!code hl]
+// @log:   {
+// @log:     status: 'CONFIRMED',
+// @log:     receipts: [
+// @log:       {
+// @log:         logs: [
+// @log:           {
+// @log:             address: '0x...',
+// @log:             topics: [
+// @log:               '0x...'
+// @log:             ],
+// @log:             data: '0x...'
+// @log:           },
+// @log:         ],
+// @log:         status: 'success',
+// @log:         blockHash: '0x...',
+// @log:         blockNumber: 122414523n,
+// @log:         gasUsed: 390000n,
+// @log:         transactionHash: '0x...'
+// @log:       }
+// @log:     ]
+// @log:   }
+
+  const handleMint = () => {
+    writeContracts({
+      contracts: [
+        {
+          address: "0x...",
+          abi,
+          functionName: "safeMint",
+          args: [account.address],
+        },
+        {
+          address: "0x...",
+          abi,
+          functionName: "safeMint",
+          args: [account.address],
+        }
+      ],
+    })
+  }
+
+  return ( 
+    <div>
+      <button onClick={handleMint}>Mint</button>
+      {callsStatus && <div> Status: {callsStatus.status}</div>}
+    </div>
+  )
+}
+```
+
+:::