Wilson/examples

docs/pages/FAQ.mdx

@@ -1,51 +1,60 @@
 ## What networks are supported?
-- Base
-- Arbitrum
-- Optimism
-- Zora 
-- Polygon 
-- BNB
-- Avalanche
-- ETH mainnet (not preferred for use, due to gas cost)
+
+* Base
+* Arbitrum
+* Optimism
+* Zora
+* Polygon
+* BNB
+* Avalanche
+* ETH mainnet (not preferred for use, due to gas cost)
 
 **Testnets**
-- Sepolia 
-- Base Sepolia
 
-## How does Smart Wallet work with Coinbase Wallet mobile app and extension? 
+* Sepolia
+* Base Sepolia
+
+## 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/). 
+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. 
+See [makeWeb3Provider](/sdk/makeWeb3Provider#parameters) documentation for nuances based on different configurations.
 
-## Do users have the same address across chains? 
-Yes, a user's Smart Wallet address will be the same across all the chains we support. 
+## Do 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. 
+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
+
+* ETH transfer: $0.03
+* ERC-20 transfer: $0.06
 
 ## Who is 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). 
+
+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? 
+## 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? 
+## 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

@@ -1,11 +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. 
+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|
+| 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

@@ -1,35 +1,43 @@
-# Smart Wallet Launch-Ready Checklist 
+# 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). 
+
+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 
+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, 
+
+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. 
+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

@@ -7,11 +7,12 @@ You can submit batch transactions by using new `wallet_sendCalls` RPC, defined [
 ## 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. 
+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.
@@ -175,4 +176,4 @@ function App() {
 }
 ```
 
-:::
+:::

docs/pages/guides/components/App.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+
+export default function App({ children }: { children: ReactNode }) {
+  const isServer = typeof window === 'undefined';
+  if (isServer) {
+    return null;
+  }
+  return (
+    <html lang="en">
+      <body >
+        {children}
+      </body>
+    </html>
+  );
+}

docs/pages/guides/components/RequestAccountsButton.tsx

@@ -0,0 +1,15 @@
+import { CoinbaseWalletSDK } from '@coinbase/wallet-sdk'
+
+export const sdk = new CoinbaseWalletSDK({
+  appName: 'My App Name',
+  appChainIds: [8453]
+});
+
+export default function RequestAccountsButton() {
+  const provider = sdk.makeWeb3Provider({options: 'smartWalletOnly'});
+  return(
+    <button
+    onClick={() => provider.request({method: 'eth_requestAccounts'})}
+    > test </button>
+  )
+}

docs/pages/guides/components/create-wallet-button.mdx

@@ -12,33 +12,33 @@ For the best onboarding experience, we recommend adding a highly visible 'Create
 
 Adding a 'Create Wallet' button to a page streamlines the onboarding experience for a new user and gets them ready to use your dapp in a few seconds.
 
-<Callout type="info" >
-We're offering additional incentives to dapps who implement this new approach. By integrating a create wallet button on the front page of your app, you are eligible for:
+<Callout type="info">
+  We're offering additional incentives to dapps who implement this new approach. By integrating a create wallet button on the front page of your app, you are eligible for:
 
-- Increased volume of gas credits via our Cloud paymaster
-- Comarketing and promotional opportunities with Coinbase
-- Featured placement in our dapp listings on homebase.coinbase.com
-
-For more information, please [fill out the
-form](https://docs.google.com/forms/d/e/1FAIpQLSdmTnSjbI-wkkf2TzmuSEv3iYzkbZBsY08xPdK-54J0Ipt4PA/viewform)
-on [coinbase.com/smart-wallet](http://coinbase.com/smart-wallet) so our team can get
-in touch with you.
+  * Increased volume of gas credits via our Cloud paymaster
+  * Comarketing and promotional opportunities with Coinbase
+  * Featured placement in our dapp listings on homebase.coinbase.com
 
+  For more information, please [fill out the
+  form](https://docs.google.com/forms/d/e/1FAIpQLSdmTnSjbI-wkkf2TzmuSEv3iYzkbZBsY08xPdK-54J0Ipt4PA/viewform)
+  on [coinbase.com/smart-wallet](http://coinbase.com/smart-wallet) so our team can get
+  in touch with you.
 </Callout>
 
 ## Implementation
 
 **We recommend two paths for implementation:**
 
 1. Match our branded Create Wallet button
-1. Match your own apps look and feel in the Create button
+2. Match your own apps look and feel in the Create button
 
 Example:
 
 <div style={{ width: 200 }}>
   <div style={{ paddingBottom: 10 }}>
     ![Create Wallet Button](/createWalletButtonBlack.png)
   </div>
+
   <div>![Create Wallet Button](/createWalletButtonBlue.png)</div>
 </div>
 
@@ -277,8 +277,8 @@ declare module 'wagmi' {
 
 #### Notes
 
-- For more detail, view the [`useConnect` documentation](https://wagmi.sh/react/api/hooks/useConnect).
-- Upon successful connection, account information can be accessed via [data](https://wagmi.sh/react/api/hooks/useConnect#data)
+* For more detail, view the [`useConnect` documentation](https://wagmi.sh/react/api/hooks/useConnect).
+* Upon successful connection, account information can be accessed via [data](https://wagmi.sh/react/api/hooks/useConnect#data)
   returned from `useConnect`, or via [`useAccount`](https://wagmi.sh/react/api/hooks/useAccount).
 
 ### With CoinbaseWalletSDK only

docs/pages/guides/create-app/using-boat.mdx

@@ -1,24 +1,32 @@
-# Getting started with Build Onchain Apps Template 
+# Getting started with Build Onchain Apps Template
+
 This guide uses [Build Onchain Apps Template](https://buildonchainapps.xyz/).
 ::::steps
+
 ## Create project
-Run the command below and proceed through the following steps, choosing "yes" 
+
+Run the command below and proceed through the following steps, choosing "yes"
 when asked "Do you want to use Smart Wallet?".
+
 ```bash
 npx @coinbase/build-onchain-apps@latest create
 ```
 
-## Setup project 
+## Setup project
+
 Open your newly created project, and create a new `.env` file in the `web` folder. Add the following to this file.
+
 ```bash
 NEXT_PUBLIC_RPC_URL=https://sepolia.base.org
 ENVIRONMENT=localhost
 ```
 
-## Install dependencies and run dev 
+## Install dependencies and run dev
+
 ```bash
 yarn install && yarn dev
 ```
+
 Visit your site locally and click the "Connect Wallet" button. You'll see a popup window with a Smart Wallet
 connection option.
-::::
+::::

docs/pages/guides/create-app/using-wagmi.mdx

@@ -3,6 +3,7 @@
 This guide covers creating a new Wagmi template project that uses Smart Wallet.
 
 ::::steps
+
 ## Run the following command and proceed through the prompts.
 
 :::code-group
@@ -66,4 +67,4 @@ Temporarily disable the Extension to connect with Smart Wallet.
 ## Keep building
 
 You can find everything you need here: https://wagmi.sh/react/api/hooks
-::::
+::::

docs/pages/guides/magic-spend.mdx

@@ -28,6 +28,6 @@ function App() {
 }
 ```
 
-If your app supports Smart Wallet and sees that the `auxiliaryFunds` capability is supported on a given chain, 
-it means that a user might have funds available for use onchain on Coinbase. 
-As a result, your app should not block user actions on the basis of balance checks.
+If your app supports Smart Wallet and sees that the `auxiliaryFunds` capability is supported on a given chain,
+it means that a user might have funds available for use onchain on Coinbase.
+As a result, your app should not block user actions on the basis of balance checks.