-
Notifications
You must be signed in to change notification settings - Fork 217
Update base account page in Mini Apps section #512
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
youssefea
wants to merge
2
commits into
master
Choose a base branch
from
base-account-in-mini-apps
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,174 +1,261 @@ | ||
| --- | ||
| title: "Base Account" | ||
| description: "Learn how Base Accounts enhance Mini App user experience and what Mini App developers need to know to implement Base Account capabilities." | ||
| title: "Base Account & Pay" | ||
| description: "Learn how to use Base Account features in Mini Apps" | ||
| --- | ||
|
|
||
| > **What you'll learn** | ||
| > By the end of this guide, you'll understand: | ||
| > - How to handle wallet transactions effectively in Mini Apps, including leveraging enhanced Base Account capabilities when available. | ||
| ## What is Base Account? | ||
|
|
||
| ## Default Wallets in Mini Apps | ||
| Mini Apps launched within the Base App are automatically connected to the user's [Base Account](/base-account/overview), eliminating wallet connection flows and enabling instant onchain interactions. This zero-friction approach means users can immediately swap, send, and transact without any wallet setup, maintaining a familiar experience with their existing Base Account and assets. | ||
| Base Account is a Smart Wallet-backed account that provides: | ||
|
|
||
| ## For Mini App Development | ||
| - **Universal sign-on** – one passkey works across every Base-enabled app | ||
| - **One-tap USDC payments** – low-friction payments built into the account layer | ||
| - **Gasless transactions** – apps can sponsor user transaction fees | ||
| - **Batch transactions** – combine multiple operations into a single confirmation | ||
| - **Multi-chain support** – works across nine EVM networks including Base, Arbitrum, Optimism, and more | ||
|
|
||
| <Steps> | ||
| <Step title="Detect Base Account Capabilities"> | ||
| Base Accounts offer enhanced features that traditional wallets don't support. | ||
| <Note> | ||
| Mini Apps launched within the Base App are automatically connected to the user's Base Account, eliminating wallet connection flows and enabling instant onchain interactions. | ||
| </Note> | ||
|
|
||
| - Use `wallet_getCapabilities` to check for `atomicBatch`, `paymasterService`, and `auxiliaryFunds` | ||
| - Adapt your UI to show streamlined workflows for Base Account users | ||
| - Provide fallback experiences for traditional wallets | ||
| ## Base Pay in Mini Apps | ||
|
|
||
| <Check> | ||
| Test with both Base Accounts and traditional wallets to ensure your capability detection works correctly. | ||
| </Check> | ||
| Accept one-tap USDC payments with the Base Pay helper function. No additional setup required—just import and call: | ||
|
|
||
| Learn More: [Base Account Capabilities Overview](/base-account/reference/core/capabilities/overview) | ||
| </Step> | ||
| ```typescript | ||
| import { pay, getPaymentStatus } from '@base-org/account'; | ||
|
|
||
| <Step title="Implement Sponsored Gas Transactions"> | ||
| Enable sponsored gas transactions where your Mini App pays gas fees for users. | ||
| async function handlePayment() { | ||
| try { | ||
| const payment = await pay({ | ||
| amount: '5.00', // USD amount | ||
| to: '0xYourAddress', // your recipient address | ||
| testnet: true // set false for mainnet | ||
| }); | ||
|
|
||
| console.log(`Payment sent! ID: ${payment.id}`); | ||
|
|
||
| // Check payment status | ||
| const { status } = await getPaymentStatus({ | ||
| id: payment.id, | ||
| testnet: true | ||
| }); | ||
|
|
||
| if (status === 'completed') { | ||
| console.log('Payment confirmed!'); | ||
| } | ||
| } catch (error) { | ||
| console.error('Payment failed:', error.message); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| <Warning> | ||
| **Collecting user info at checkout** | ||
|
|
||
| - Check for `paymasterService` capability before offering gas-free transactions | ||
| - Use the `capabilities` parameter in `writeContracts` to enable sponsored gas | ||
| - Handle cases where paymaster service is unavailable | ||
| You can request email, phone, or shipping address by passing a `payerInfo` object. See the [Accept Payments Guide](/base-account/guides/accept-payments#collect-user-information-optional) for details. | ||
|
|
||
| <Check> | ||
| Verify your Mini App works with Base Accounts that have zero ETH balance. | ||
| </Check> | ||
| However, this is ***not supported*** in Mini Apps yet. | ||
| </Warning> | ||
|
|
||
| Learn More: [Paymaster Service](/base-account/reference/core/capabilities/paymasterService) | ||
| </Step> | ||
| <CardGroup cols={2}> | ||
| <Card title="Base Pay Guide" icon="file-lines" href="/base-account/guides/accept-payments"> | ||
| Complete implementation guide with examples | ||
| </Card> | ||
| <Card title="Base Pay Button" icon="rectangle-wide" href="/base-account/reference/ui-elements/base-pay-button"> | ||
| Pre-built UI component | ||
| </Card> | ||
| </CardGroup> | ||
|
|
||
| <Step title="Optimize Transaction Patterns"> | ||
| Base Accounts can batch multiple operations into single transactions. | ||
| --- | ||
|
|
||
| - Use `atomicBatch` capability to group related transactions | ||
| - Implement `wallet_sendCalls` for complex workflows | ||
| - Show one confirmation instead of multiple prompts | ||
| ## Using Base Account Features | ||
|
|
||
| <Tip> | ||
| Consider transaction batching for multi-step operations like approve + transfer + mint. | ||
| </Tip> | ||
| ### Get the Ethereum Provider | ||
|
|
||
| In Mini Apps, access Base Account through the standard Ethereum provider: | ||
|
|
||
| ```typescript app.tsx | ||
| // [...] | ||
|
|
||
| // Get the provider | ||
| const provider = window.ethereum; | ||
|
|
||
| if (!provider) { | ||
| console.error('No Ethereum provider found'); | ||
| return; | ||
| } | ||
|
|
||
| // Request account access | ||
| const accounts = await provider.request({ | ||
| method: 'eth_requestAccounts' | ||
| }); | ||
|
|
||
| console.log('Connected account:', accounts[0]); | ||
| ``` | ||
|
|
||
| Getting the provider allows you to use the Base Account SDK to interact with the user's Base Account. | ||
| Follow the [Base Account guides](/base-account/overview/what-is-base-account) to use these features. | ||
|
|
||
| ### Available RPC Methods | ||
|
|
||
| Once you have the provider, you can call Base Account RPC methods. See the [full RPC methods reference](/base-account/reference/core/provider-rpc-methods/request-overview) for complete details. | ||
|
|
||
| <Warning> | ||
| **Unsupported Methods and Capabilities in Mini Apps** | ||
|
|
||
| Learn More: [Batch Transactions Guide](/base-account/improve-ux/batch-transactions) | ||
| </Step> | ||
| </Steps> | ||
| The following methods and capabilities are not yet supported in Mini Apps but will be added soon: | ||
| - `wallet_sign` | ||
| - `wallet_connect` | ||
| - `wallet_getSubAccounts` | ||
| - `wallet_addSubAccount` | ||
| - `coinbase_fetchPermissions` | ||
| - `coinbase_fetchPermission` | ||
| - `signTypedData` | ||
| - `datacallback` | ||
|
|
||
| ## Base Account Benefits for Mini Apps | ||
| All other standard Ethereum and Base Account RPC methods work as expected. | ||
| </Warning> | ||
|
|
||
| | Feature | What It Does | Mini App Benefit | | ||
| |---------|-------------|------------------| | ||
| | Atomic Batch | Combines multiple transactions into one | Multi-step workflows require only one user confirmation | | ||
| | Paymaster Service | App pays gas fees, not user | Users can transact without owning ETH | | ||
| | Passkey Authentication | Uses device biometrics instead of private keys | Faster, more secure user authentication | | ||
| --- | ||
|
|
||
| ## Key Features & Examples | ||
|
|
||
| ## Implementation Examples | ||
| ### 1. Batch Transactions | ||
|
|
||
| ### Capability Detection | ||
| Combine multiple operations into a single user confirmation using `wallet_sendCalls`: | ||
|
|
||
| ```javascript | ||
| function useBaseAccountCapabilities(address) { | ||
| const [capabilities, setCapabilities] = useState({}); | ||
| ```typescript components/batchTransfer.tsx | ||
| import { numberToHex, parseEther } from 'viem'; | ||
|
|
||
| async function batchTransfer() { | ||
| const provider = window.ethereum; | ||
| const accounts = await provider.request({ method: 'eth_requestAccounts' }); | ||
|
|
||
| useEffect(() => { | ||
| async function detect() { | ||
| const caps = await publicClient.request({ | ||
| method: 'wallet_getCapabilities', | ||
| params: [address] | ||
| }); | ||
|
|
||
| setCapabilities({ | ||
| atomicBatch: caps['0x2105']?.atomicBatch?.supported, | ||
| paymasterService: caps['0x2105']?.paymasterService?.supported, | ||
| auxiliaryFunds: caps['0x2105']?.auxiliaryFunds?.supported | ||
| }); | ||
| } | ||
|
|
||
| if (address) detect(); | ||
| }, [address]); | ||
| const result = await provider.request({ | ||
| method: 'wallet_sendCalls', | ||
| params: [{ | ||
| version: '1.0', | ||
| from: accounts[0], | ||
| chainId: numberToHex(8453), // Base mainnet | ||
| calls: [ | ||
| { | ||
| to: '0xRecipient1', | ||
| value: numberToHex(parseEther('0.01')), | ||
| data: '0x' | ||
| }, | ||
| { | ||
| to: '0xRecipient2', | ||
| value: numberToHex(parseEther('0.01')), | ||
| data: '0x' | ||
| } | ||
| ] | ||
| }] | ||
| }); | ||
|
|
||
| return capabilities; | ||
| console.log('Batch transaction sent:', result); | ||
| } | ||
| ``` | ||
|
|
||
| ### Sponsored Gas Implementation | ||
| <Card title="Batch Transactions Full Guide" icon="layer-group" href="/base-account/improve-ux/batch-transactions"> | ||
| Learn about atomic batching and how to use it with Base Account | ||
| </Card> | ||
|
|
||
| ### 2. Sponsored Gas Transactions | ||
|
|
||
| ```javascript | ||
| import { useCapabilities, useWriteContracts } from 'wagmi/experimental' | ||
| Let your Mini App pay gas fees for users with paymaster capabilities: | ||
|
|
||
| function SponsoredTransactionButton() { | ||
| const account = useAccount() | ||
| const { writeContracts } = useWriteContracts() | ||
| const { data: availableCapabilities } = useCapabilities({ | ||
| account: account.address, | ||
| }) | ||
| ```typescript components/sponsoredMint.tsx | ||
| import { numberToHex, encodeFunctionData } from 'viem'; | ||
|
|
||
| async function sponsoredMint() { | ||
| const provider = window.ethereum; | ||
| const accounts = await provider.request({ method: 'eth_requestAccounts' }); | ||
|
|
||
| const capabilities = useMemo(() => { | ||
| if (!availableCapabilities || !account.chainId) return {} | ||
| const capabilitiesForChain = availableCapabilities[account.chainId] | ||
| if ( | ||
| capabilitiesForChain['paymasterService'] && | ||
| capabilitiesForChain['paymasterService'].supported | ||
| ) { | ||
| return { | ||
| paymasterService: { | ||
| url: `https://api.developer.coinbase.com/rpc/v1/base/v7HqDLjJY4e28qgIDAAN4JNYXnz88mJZ`, | ||
| }, | ||
| } | ||
| const nftABI = [ | ||
| { | ||
| name: 'mint', | ||
| type: 'function', | ||
| stateMutability: 'nonpayable', | ||
| inputs: [{ name: 'to', type: 'address' }], | ||
| outputs: [] | ||
| } | ||
| return {} | ||
| }, [availableCapabilities, account.chainId]) | ||
|
|
||
| const handleSponsoredMint = () => { | ||
| writeContracts({ | ||
| contracts: [{ | ||
| address: '0x...', | ||
| abi: contractAbi, | ||
| functionName: 'mint', | ||
| args: [account.address], | ||
| ]; | ||
|
|
||
| const result = await provider.request({ | ||
| method: 'wallet_sendCalls', | ||
| params: [{ | ||
| version: '1.0', | ||
| from: accounts[0], | ||
| chainId: numberToHex(8453), | ||
| calls: [{ | ||
| to: '0xNFTContract', | ||
| value: '0x0', | ||
| data: encodeFunctionData({ | ||
| abi: nftABI, | ||
| functionName: 'mint', | ||
| args: [accounts[0]] | ||
| }) | ||
| }], | ||
| capabilities, | ||
| }) | ||
| } | ||
|
|
||
| return <button onClick={handleSponsoredMint}>Mint NFT (Gas Free)</button> | ||
| capabilities: { | ||
| paymasterService: { | ||
| url: 'https://api.developer.coinbase.com/rpc/v1/base/YOUR_KEY' | ||
| } | ||
| } | ||
| }] | ||
| }); | ||
|
|
||
| console.log('Sponsored transaction sent:', result); | ||
| } | ||
| ``` | ||
| <Tip> | ||
| You can get your paymaster API key from [Coinbase Developer Platform](https://docs.cdp.coinbase.com/paymaster/introduction/welcome). | ||
| </Tip> | ||
|
|
||
| ### Capability-Based UI | ||
| <Card title="Sponsor Gas Full Guide" icon="gas-pump" href="/base-account/improve-ux/sponsor-gas/paymasters"> | ||
| Set up paymasters and manage gas sponsorship | ||
| </Card> | ||
|
|
||
| ### 3. Check Wallet Capabilities | ||
|
|
||
| ```javascript | ||
| function MiniAppWorkflow() { | ||
| const { address } = useAccount(); | ||
| const { atomicBatch } = useBaseAccountCapabilities(address); | ||
| EIP-5792 introduced capabilities detection to allow wallets to declare what capabilities they support. | ||
| In order to detect what capabilities the mini apps supports, you can use the `wallet_getCapabilities` method. | ||
|
|
||
| ```typescript components/checkCapabilities.tsx | ||
| async function checkCapabilities() { | ||
| const provider = window.ethereum; | ||
| const accounts = await provider.request({ method: 'eth_requestAccounts' }); | ||
|
|
||
| if (atomicBatch) { | ||
| // Base Account: One-click workflow | ||
| return <OneClickPurchaseFlow />; | ||
| } else { | ||
| // Traditional wallet: Multi-step workflow | ||
| return <MultiStepPurchaseFlow />; | ||
| } | ||
| const capabilities = await provider.request({ | ||
| method: 'wallet_getCapabilities', | ||
| params: [accounts[0]] | ||
| }); | ||
|
|
||
| const baseCapabilities = capabilities['0x2105']; // Base mainnet chain ID | ||
|
|
||
| console.log('Atomic batch:', baseCapabilities?.atomicBatch?.supported); | ||
| console.log('Paymaster:', baseCapabilities?.paymasterService?.supported); | ||
| console.log('Auxiliary funds:', baseCapabilities?.auxiliaryFunds?.supported); | ||
| } | ||
| ``` | ||
|
|
||
| ## Additional Resources | ||
| For detailed implementation of Base Account features: | ||
| <CardGroup cols={3}> | ||
| <Card title="User Authentication" href="https://docs.base.org/base-account/guides/authenticate-users"> | ||
| Authenticate Users Guide | ||
| <Card title="Capabilities Reference" icon="list-check" href="/base-account/reference/core/capabilities/overview"> | ||
| Full list of Base Account capabilities | ||
| </Card> | ||
|
|
||
| <Card title="Base Pay Guide" href="https://docs.base.org/base-account/guides/accept-payments"> | ||
| Base Pay Guide | ||
| </Card> | ||
| --- | ||
|
|
||
| <Card title="Sign and Verify Signatures" href="https://docs.base.org/base-account/guides/sign-and-verify-typed-data"> | ||
| Sign and Verify Typed Data Guide | ||
| </Card> | ||
| </CardGroup> | ||
| ## Additional Resources | ||
|
|
||
| <CardGroup cols={3}> | ||
| <Card title="What is Base Account?" icon="repeat" href="/base-account/overview/what-is-base-account"> | ||
| Full overview of Base Account | ||
| </Card> | ||
|
|
||
| <Card title="Base Pay Guide" icon="wallet" href="/base-account/guides/accept-payments"> | ||
| Complete implementation guide with examples | ||
| </Card> | ||
|
|
||
| <Card title="Get Support" icon="signature" href="https://discord.com/invite/buildonbase"> | ||
| Get support from the Base team and community | ||
| </Card> | ||
| </CardGroup> | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's use the
Stepscomponent and add a step for adding the@base-org/accountpackageUh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm also not sure if we want to combine both a Base Pay guide in here. I think we should actually focus on Base Account with the focus on accessing the account and sending batch transactions (or a single transaction).