Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions docs/base-account/framework-integrations/wagmi/base-pay.mdx
Original file line number Diff line number Diff line change
@@ -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).
106 changes: 106 additions & 0 deletions docs/base-account/framework-integrations/wagmi/other-use-cases.mdx
Original file line number Diff line number Diff line change
@@ -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)
16 changes: 5 additions & 11 deletions docs/base-account/framework-integrations/wagmi/setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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)
Loading