Updating the wagmi section (#182)

* update wagmi section

* update setup docs

* update link

Author: youssefea

docs/base-account/framework-integrations/wagmi/base-pay.mdx

@@ -0,0 +1,60 @@
+---
+title: "Base Pay"
+description: "Accept USDC payments with Base Pay in your Wagmi-powered React application"
+---
+
+Base Pay works the same way in Wagmi applications as it does anywhere else - it operates independently of wallet connections and uses the Base Account SDK directly.
+
+## Implementation
+
+Base Pay doesn't require any special Wagmi integration. Simply follow the [Accept Payments guide](/base-account/guides/accept-payments) - all the code examples work exactly the same in your Wagmi app.
+
+The key points:
+
+- **No wallet connection needed** - Base Pay handles everything through the SDK
+- **Same API** - Use `pay()` and `getPaymentStatus()` exactly as shown in the main guide
+- **Works alongside Wagmi** - You can display the user's connected address from `useAccount()` but it's not required for payments
+
+## Quick Example
+
+```tsx
+import { pay } from '@base-org/account'
+import { useAccount } from 'wagmi' // Optional - just for display
+
+export function CheckoutButton() {
+  const { address } = useAccount() // Optional
+
+  const handlePayment = async () => {
+    try {
+      const payment = await pay({
+        amount: '5.00',
+        to: '0xYourAddress',
+        testnet: true
+      })
+      console.log('Payment sent:', payment.id)
+    } catch (error) {
+      console.error('Payment failed:', error)
+    }
+  }
+
+  return (
+    <div>
+      {address && <p>Connected: {address}</p>}
+      <button onClick={handlePayment}>
+        Pay $5.00 with Base Pay
+      </button>
+    </div>
+  )
+}
+```
+
+<Warning>
+**Please Follow the Brand Guidelines** 
+
+If you intend on using the `BasePayButton`, please follow the [Brand Guidelines](/base-account/reference/ui-elements/brand-guidelines) to ensure consistency across your application.
+
+</Warning>
+
+## Learn More
+
+For complete implementation details, examples, and advanced features like collecting user information, see the main [Accept Payments guide](/base-account/guides/accept-payments).

docs/base-account/framework-integrations/wagmi/other-use-cases.mdx

@@ -0,0 +1,106 @@
+---
+title: "Other Use Cases"
+description: "Access the Base Account provider from Wagmi for advanced functionality like Sub Accounts, Spend Permissions, and more"
+---
+
+Learn how to access the Base Account provider through Wagmi to unlock advanced Base Account features beyond basic authentication and payments.
+
+## Prerequisites
+
+Make sure you have [set up Wagmi with Base Account](/base-account/framework-integrations/wagmi/setup) before following this guide.
+
+## Getting the Provider
+
+The key to accessing advanced Base Account functionality is getting the provider from your Wagmi connector. Once you have the provider, you can use any Base Account RPC method.
+
+<CodeGroup>
+```tsx Hook
+// hooks/useBaseAccountProvider.ts
+import { useConnector, useAccount } from 'wagmi'
+import { useEffect, useState } from 'react'
+
+export function useBaseAccountProvider() {
+  const { isConnected } = useAccount()
+  const connector = useConnector()
+  const [provider, setProvider] = useState<any>(null)
+
+  useEffect(() => {
+    if (isConnected && connector) {
+      // Access the Base Account provider
+      const baseAccountProvider = connector.provider
+      setProvider(baseAccountProvider)
+    } else {
+      setProvider(null)
+    }
+  }, [isConnected, connector])
+
+  return provider
+}
+```
+```tsx Component
+// components/BaseAccountFeatures.tsx
+import { useBaseAccountProvider } from '../hooks/useBaseAccountProvider'
+import { useAccount } from 'wagmi'
+
+export function BaseAccountFeatures() {
+  const { address, isConnected } = useAccount()
+  const provider = useBaseAccountProvider()
+
+  const callProviderMethod = async (method: string, params: any[]) => {
+    if (!provider) {
+      console.error('Provider not available')
+      return
+    }
+
+    try {
+      const result = await provider.request({
+        method,
+        params
+      })
+      console.log(`${method} result:`, result)
+      return result
+    } catch (error) {
+      console.error(`${method} error:`, error)
+      throw error
+    }
+  }
+
+  if (!isConnected) {
+    return <p>Please connect your wallet to access Base Account features</p>
+  }
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-bold">Base Account Features</h2>
+      <p className="text-gray-600">
+        Connected with Base Account provider. You can now access advanced features.
+      </p>
+    </div>
+  )
+}
+```
+</CodeGroup>
+
+## Available Use Cases
+
+Once you have the provider, you can access all Base Account functionality:
+
+### Sub Accounts
+Create and manage child accounts for improved UX.
+
+**Learn more:** [Sub Accounts Guide](/base-account/improve-ux/sub-accounts) | [Sub Accounts RPC Method](/base-account/reference/core/provider-rpc-methods/wallet_addSubAccount)
+
+### Spend Permissions
+Allow apps to spend on behalf of users with predefined limits.
+
+**Learn more:** [Spend Permissions Guide](/base-account/improve-ux/spend-permissions) | [Spend Permissions Reference](/base-account/reference/spend-permission-utilities/requestSpendPermission)
+
+### Batch Transactions
+Execute multiple transactions in a single user confirmation.
+
+**Learn more:** [Batch Transactions Guide](/base-account/improve-ux/batch-transactions) | [`wallet_sendCalls` Reference](/base-account/reference/core/provider-rpc-methods/wallet_sendCalls)
+
+### Gasless Transactions
+Sponsor gas fees for your users.
+
+**Learn more:** [Gasless Transactions Guide](/base-account/improve-ux/sponsor-gas/paymaster) | [Coinbase Developer Platform Paymaster](https://docs.cdp.coinbase.com/paymaster/introduction/welcome)

docs/base-account/framework-integrations/wagmi/setup.mdx

@@ -9,17 +9,11 @@ Learn how to set up Wagmi with Base Account to enable Base Account SDK functiona
 
 [Wagmi](https://wagmi.sh/) is a collection of React hooks for Ethereum Virtual Machine (EVM) compatible networks that makes it easy to work with wallets, contracts, transactions, and signing. Base Account integrates perfectly with Wagmi, allowing you to use all your familiar hooks.
 
-### What you'll achieve
-
-By the end of this guide, you will:
-
-- Set up Wagmi with Base Account connector
-- Configure your React application for Base Account
-- Use standard Wagmi hooks with Base Account
-
 ## Installation
 
-After [creating a new Next.js project](https://nextjs.org/docs/app/getting-started/installation), install the required dependencies:
+If you start [a new wagmi project](https://wagmi.sh/react/getting-started), you can skip the installation step.
+
+If you already have a project, you can install the dependencies with your package manager of choice:
 
 <CodeGroup>
 ```bash npm
@@ -40,7 +34,7 @@ bun add wagmi viem @base-org/account
 </CodeGroup>
 
 <Tip>
-You can also use the command line `npm create wagmi@latest` to create a new full Wagmi project.
+To create a new wagmi project, you can use the command line `npm create wagmi@latest`.
 </Tip>
 
 ## Configuration
@@ -97,4 +91,4 @@ export default function App({ children }: { children: React.ReactNode }) {
 Now that you have Wagmi configured with Base Account, you can:
 
 - [Connect users with Sign in with Base](/base-account/framework-integrations/wagmi/sign-in-with-base)
-- [Implement Sub Accounts functionality](/base-account/framework-integrations/wagmi/sub-accounts)
+- [Access the Base Account provider](/base-account/framework-integrations/wagmi/other-use-cases)