Skip to content

Commit aa00046

Browse files
youssefeayoussefea
authored
Update Base Account Docs (#109)
* change quickstart page * update with wagmi core tip * add new app.js * change datacallback url * change recipient address
1 parent 6633838 commit aa00046

4 files changed

Lines changed: 204 additions & 63 deletions

File tree

‎docs/base-account/guides/accept-payments.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ Supported request types:
7373

7474
You can use the `callbackURL` to validate the user's information on the server side.
7575

76-
Learn more about this in the [callbackURL reference](/base-account/reference/base-pay/Datacallbackurl).
76+
Learn more about this in the [callbackURL reference](/base-account/reference/core/capabilities/DataCallbackURL).
7777
</Tip>
7878

7979
## Polling example

‎docs/base-account/quickstart/web.mdx‎

Lines changed: 189 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,220 @@
11
---
2-
title: "Web (HTML + JS)"
2+
title: "Web (React)"
33
---
44

5-
This quick-start shows the **minimum** code required to add Sign in with Base and Base Pay to any web page using nothing but the Base Account SDK. No frameworks, no additional libraries.
5+
This quick-start shows the **minimum** code required to add Sign in with Base and Base Pay to any React app using the Base Account SDK.
66

7-
## 1. Install the SDK
7+
## 1. Create a new React app
8+
9+
If you're starting fresh, create a new React app:
10+
11+
<CodeGroup>
12+
```bash npm
13+
npx create-react-app base-account-quickstart
14+
cd base-account-quickstart
15+
```
16+
17+
```bash yarn
18+
yarn create react-app base-account-quickstart
19+
cd base-account-quickstart
20+
```
21+
</CodeGroup>
22+
23+
## 2. Install the SDK
824

925
<CodeGroup>
1026
```bash npm
11-
npm install @base-org/account
27+
npm install @base-org/account @base-org/account-ui
1228
```
1329

1430
```bash pnpm
15-
pnpm add @base-org/account
31+
pnpm add @base-org/account @base-org/account-ui
1632
```
1733

1834
```bash yarn
19-
yarn add @base-org/account
35+
yarn add @base-org/account @base-org/account-ui
2036
```
2137

2238
```bash bun
23-
bun add @base-org/account
39+
bun add @base-org/account @base-org/account-ui
2440
```
2541
</CodeGroup>
2642

27-
If you prefer a CDN import, you can skip the install step and replace the `import` line below with:
28-
29-
```html
30-
<script type="module" src="https://cdn.skypack.dev/@base-org/account"></script>
43+
<Tip>
44+
**Got a peer dependency error?**
45+
46+
Use `--legacy-peer-deps` flag if you get a peer dependency error.
47+
</Tip>
48+
49+
## 3. Replace src/App.js with this component
50+
51+
```jsx title="src/App.js" lineNumbers
52+
import React, { useState } from 'react';
53+
import { createBaseAccountSDK, pay, getPaymentStatus } from '@base-org/account';
54+
import { SignInWithBaseButton, BasePayButton } from '@base-org/account-ui/react';
55+
56+
function App() {
57+
const [isSignedIn, setIsSignedIn] = useState(false);
58+
const [paymentStatus, setPaymentStatus] = useState('');
59+
const [paymentId, setPaymentId] = useState('');
60+
const [theme, setTheme] = useState('light');
61+
62+
// Initialize SDK
63+
const sdk = createBaseAccountSDK(
64+
{
65+
appName: 'Base Account Quick-start',
66+
appLogo: 'https://base.org/logo.png',
67+
}
68+
);
69+
70+
// Optional sign-in step – not required for `pay()`, but useful to get the user address
71+
const handleSignIn = async () => {
72+
try {
73+
await sdk.getProvider().request({ method: 'wallet_connect' });
74+
setIsSignedIn(true);
75+
} catch (error) {
76+
console.error('Sign in failed:', error);
77+
}
78+
};
79+
80+
// One-tap USDC payment using the pay() function
81+
const handlePayment = async () => {
82+
try {
83+
const { id } = await pay({
84+
amount: '0.01', // USD – SDK quotes equivalent USDC
85+
to: '0xRecipientAddress', // Replace with your recipient address
86+
testnet: true // set to false or omit for Mainnet
87+
});
88+
89+
setPaymentId(id);
90+
setPaymentStatus('Payment initiated! Click "Check Status" to see the result.');
91+
} catch (error) {
92+
console.error('Payment failed:', error);
93+
setPaymentStatus('Payment failed');
94+
}
95+
};
96+
97+
// Check payment status using stored payment ID
98+
const handleCheckStatus = async () => {
99+
if (!paymentId) {
100+
setPaymentStatus('No payment ID found. Please make a payment first.');
101+
return;
102+
}
103+
104+
try {
105+
const { status } = await getPaymentStatus({ id: paymentId });
106+
setPaymentStatus(`Payment status: ${status}`);
107+
} catch (error) {
108+
console.error('Status check failed:', error);
109+
setPaymentStatus('Status check failed');
110+
}
111+
};
112+
113+
const toggleTheme = () => {
114+
setTheme(theme === 'light' ? 'dark' : 'light');
115+
};
116+
117+
const dark = theme === 'dark';
118+
const styles = {
119+
container: { minHeight: '100vh', backgroundColor: dark ? '#111' : '#fff', color: dark ? '#fff' : '#000', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '20px' },
120+
card: { backgroundColor: dark ? '#222' : '#f9f9f9', borderRadius: '12px', padding: '30px', maxWidth: '400px', textAlign: 'center' },
121+
title: { fontSize: '24px', fontWeight: 'bold', marginBottom: '10px', color: dark ? '#fff' : '#00f' },
122+
subtitle: { fontSize: '16px', color: dark ? '#aaa' : '#666', marginBottom: '30px' },
123+
themeToggle: { position: 'absolute', top: '20px', right: '20px', background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px' },
124+
buttonGroup: { display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'center' },
125+
status: { marginTop: '20px', padding: '12px', backgroundColor: dark ? '#333' : '#f0f0f0', borderRadius: '8px', fontSize: '14px' },
126+
signInStatus: { marginTop: '8px', fontSize: '14px', color: dark ? '#0f0' : '#060' }
127+
};
128+
129+
return (
130+
<div style={styles.container}>
131+
<button onClick={toggleTheme} style={styles.themeToggle}>
132+
{theme === 'light' ? '🌙' : '☀️'}
133+
</button>
134+
135+
<div style={styles.card}>
136+
<h1 style={styles.title}>Base Account</h1>
137+
<p style={styles.subtitle}>Experience seamless crypto payments</p>
138+
139+
<div style={styles.buttonGroup}>
140+
<SignInWithBaseButton
141+
align="center"
142+
variant="solid"
143+
colorScheme={theme}
144+
size="medium"
145+
onClick={handleSignIn}
146+
/>
147+
148+
{isSignedIn && (
149+
<div style={styles.signInStatus}>
150+
✅ Connected to Base Account
151+
</div>
152+
)}
153+
154+
<BasePayButton
155+
colorScheme={theme}
156+
onClick={handlePayment}
157+
/>
158+
159+
{paymentId && (
160+
<button
161+
onClick={handleCheckStatus}
162+
style={{
163+
padding: '12px 24px',
164+
backgroundColor: theme === 'dark' ? '#374151' : '#f3f4f6',
165+
color: theme === 'dark' ? '#ffffff' : '#1f2937',
166+
border: `1px solid ${theme === 'dark' ? '#6b7280' : '#d1d5db'}`,
167+
borderRadius: '8px',
168+
cursor: 'pointer',
169+
fontSize: '14px'
170+
}}
171+
>
172+
Check Payment Status
173+
</button>
174+
)}
175+
</div>
176+
177+
{paymentStatus && (
178+
<div style={styles.status}>
179+
{paymentStatus}
180+
</div>
181+
)}
182+
</div>
183+
</div>
184+
);
185+
}
186+
187+
export default App;
31188
```
32189

33-
## 2. Copy-paste this HTML file
34-
35-
```html title="index.html" lineNumbers
36-
<!doctype html>
37-
<html>
38-
<head>
39-
<meta charset="utf-8" />
40-
<title>Base Account Quick-start</title>
41-
</head>
42-
<body>
43-
<!-- TODO! Button styles -->
44-
<button id="signin">Sign in with Base</button>
45-
<button id="pay" disabled>Pay 5&nbsp;USDC on testnet</button>
46-
47-
<script type="module">
48-
import { createBaseAccountSDK, pay, getPaymentStatus } from "@base-org/account";
49-
50-
// Initialise SDK with the injected provider (the user will be prompted to connect on first call).
51-
const sdk = createBaseAccountSDK();
52-
53-
// Optional sign-in step – not required for `pay()`, but useful to get the user address.
54-
document.getElementById("signin").onclick = async () => {
55-
await sdk.getProvider().request({ method: "wallet_connect" });
56-
document.getElementById("pay").disabled = false;
57-
};
58-
59-
// One-tap USDC payment (works even if you skip the sign-in button above).
60-
document.getElementById("pay").onclick = async () => {
61-
const { id } = await pay({
62-
amount: "5.00", // USD – SDK quotes equivalent USDC
63-
to: "0xRecipientAddress",
64-
testnet: true // set to false or omit for Mainnet
65-
});
66-
67-
const { status } = await getPaymentStatus({ id });
68-
alert(`Payment status: ${status}`);
69-
};
70-
</script>
71-
</body>
72-
</html>
190+
<Note>
191+
**Note:**
192+
193+
Make sure to replace `0xRecipientAddress` with your recipient address.
194+
</Note>
195+
196+
<Tip>
197+
**`@wagmi/core` error**
198+
199+
If you get an error that says `@wagmi/core` is not found, you can install it with:
200+
201+
```bash
202+
npm install @wagmi/core
73203
```
74204

75-
## 3. Serve the file
205+
We're working on a fix for this.
206+
</Tip>
76207

77-
Any static server will work:
208+
209+
## 4. Start your app
78210

79211
```bash
80-
npx serve .
81-
# or
82-
python -m http.server
212+
npm start
83213
```
84214

85-
Open http://localhost:3000, click **Sign in with Base** (optional) and then **Pay**, approve the transaction, and you’ve sent 5 USDC on Base Sepolia—done! 🎉
215+
Open http://localhost:3000, click **Sign in with Base** (optional) and then **Pay**, approve the transaction, and you've sent 5 USDC on Base Sepolia—done! 🎉
216+
217+
**Note:** If you have an existing React app, just install the SDK (`npm install @base-org/account`) and add the component above to your project.
86218

87219
## Next steps
88220

docs/base-account/reference/base-pay/DatacallbackURL.mdx renamed to docs/base-account/reference/core/capabilities/DatacallbackURL.mdx

File renamed without changes.

‎docs/docs.json‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -236,8 +236,7 @@
236236
"group": "Base Pay",
237237
"pages": [
238238
"base-account/reference/base-pay/pay",
239-
"base-account/reference/base-pay/getPaymentStatus",
240-
"base-account/reference/base-pay/DatacallbackURL"
239+
"base-account/reference/base-pay/getPaymentStatus"
241240
]
242241
},
243242
{
@@ -256,6 +255,12 @@
256255
"base-account/reference/core/provider-rpc-methods/coinbase_fetchPermissions",
257256
"base-account/reference/core/provider-rpc-methods/standard-rpc-methods"
258257
]
258+
},
259+
{
260+
"group": "Capabilities",
261+
"pages": [
262+
"base-account/reference/core/capabilities/DataCallbackURL"
263+
]
259264
}
260265
]
261266
},
@@ -1834,6 +1839,10 @@
18341839
"source": "/smart-wallet/quickstart/nextjs-project",
18351840
"destination": "/base-account/quickstart/web"
18361841
},
1842+
{
1843+
"source": "/base-account/reference/base-pay/DatacallbackURL",
1844+
"destination": "/base-account/reference/core/capabilities/DataCallbackURL"
1845+
},
18371846
{
18381847
"source": "/smart-wallet/quickstart/react-native-project",
18391848
"destination": "/base-account/quickstart/mobile-integration"
@@ -1880,7 +1889,7 @@
18801889
},
18811890
{
18821891
"source": "/smart-wallet/concepts/features/optional/profiles",
1883-
"destination": "/base-account/improve-ux/sub-accounts"
1892+
"destination": "/base-account/reference/core/capabilities/DataCallbackURL"
18841893
},
18851894
{
18861895
"source": "/smart-wallet/concepts/usage-details/popups",
@@ -1948,7 +1957,7 @@
19481957
},
19491958
{
19501959
"source": "/smart-wallet/guides/profiles",
1951-
"destination": "/base-account/improve-ux/sub-accounts"
1960+
"destination": "/base-account/reference/core/capabilities/DataCallbackURL"
19521961
},
19531962
{
19541963
"source": "/smart-wallet/technical-reference/sdk",
@@ -1968,7 +1977,7 @@
19681977
},
19691978
{
19701979
"source": "/smart-wallet/technical-reference/profiles-reference",
1971-
"destination": "/base-account/improve-ux/sub-accounts"
1980+
"destination": "/base-account/reference/core/capabilities/DataCallbackURL"
19721981
},
19731982
{
19741983
"source": "/smart-wallet/basenames/:slug*",

0 commit comments

Comments
 (0)