Skip to content

Commit d99443a

Browse files
youssefeayoussefea
authored
Updating Base Account Quickstarts (#179)
* Fix nits in the Base Account Docs (#163) (#177) * remove callouts * update case * remove base pay button from accept payments page * remove siwb buttons * update background buttons * update base account quickstart
1 parent 44f02b4 commit d99443a

3 files changed

Lines changed: 349 additions & 176 deletions

File tree

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

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
---
2+
title: "Web (React)"
3+
description: "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."
4+
---
5+
6+
import { GithubRepoCard } from "/snippets/GithubRepoCard.mdx"
7+
8+
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.
9+
10+
## 1. Create a new React app
11+
12+
If you're starting fresh, create a new React app:
13+
14+
<CodeGroup>
15+
```bash npm
16+
npx create-react-app base-account-quickstart
17+
cd base-account-quickstart
18+
```
19+
20+
```bash yarn
21+
yarn create react-app base-account-quickstart
22+
cd base-account-quickstart
23+
```
24+
</CodeGroup>
25+
26+
## 2. Install the SDK
27+
28+
<CodeGroup>
29+
```bash npm
30+
npm install @base-org/account @base-org/account-ui
31+
```
32+
33+
```bash pnpm
34+
pnpm add @base-org/account @base-org/account-ui
35+
```
36+
37+
```bash yarn
38+
yarn add @base-org/account @base-org/account-ui
39+
```
40+
41+
```bash bun
42+
bun add @base-org/account @base-org/account-ui
43+
```
44+
</CodeGroup>
45+
46+
<Tip>
47+
**Got a peer dependency error?**
48+
49+
Use `--legacy-peer-deps` flag if you get a peer dependency error.
50+
</Tip>
51+
52+
## 3. Replace src/App.js with this component
53+
54+
```jsx title="src/App.js" lineNumbers
55+
import React, { useState } from 'react';
56+
import { createBaseAccountSDK, pay, getPaymentStatus } from '@base-org/account';
57+
import { SignInWithBaseButton, BasePayButton } from '@base-org/account-ui/react';
58+
59+
function App() {
60+
const [isSignedIn, setIsSignedIn] = useState(false);
61+
const [paymentStatus, setPaymentStatus] = useState('');
62+
const [paymentId, setPaymentId] = useState('');
63+
const [theme, setTheme] = useState('light');
64+
65+
// Initialize SDK
66+
const sdk = createBaseAccountSDK(
67+
{
68+
appName: 'Base Account Quick-start',
69+
appLogo: 'https://base.org/logo.png',
70+
}
71+
);
72+
73+
// Optional sign-in step – not required for `pay()`, but useful to get the user address
74+
const handleSignIn = async () => {
75+
try {
76+
await sdk.getProvider().request({ method: 'wallet_connect' });
77+
setIsSignedIn(true);
78+
} catch (error) {
79+
console.error('Sign in failed:', error);
80+
}
81+
};
82+
83+
// One-tap USDC payment using the pay() function
84+
const handlePayment = async () => {
85+
try {
86+
const { id } = await pay({
87+
amount: '0.01', // USD – SDK quotes equivalent USDC
88+
to: '0xRecipientAddress', // Replace with your recipient address
89+
testnet: true // set to false or omit for Mainnet
90+
});
91+
92+
setPaymentId(id);
93+
setPaymentStatus('Payment initiated! Click "Check Status" to see the result.');
94+
} catch (error) {
95+
console.error('Payment failed:', error);
96+
setPaymentStatus('Payment failed');
97+
}
98+
};
99+
100+
// Check payment status using stored payment ID
101+
const handleCheckStatus = async () => {
102+
if (!paymentId) {
103+
setPaymentStatus('No payment ID found. Please make a payment first.');
104+
return;
105+
}
106+
107+
try {
108+
const { status } = await getPaymentStatus({ id: paymentId });
109+
setPaymentStatus(`Payment status: ${status}`);
110+
} catch (error) {
111+
console.error('Status check failed:', error);
112+
setPaymentStatus('Status check failed');
113+
}
114+
};
115+
116+
const toggleTheme = () => {
117+
setTheme(theme === 'light' ? 'dark' : 'light');
118+
};
119+
120+
const dark = theme === 'dark';
121+
const styles = {
122+
container: { minHeight: '100vh', backgroundColor: dark ? '#111' : '#fff', color: dark ? '#fff' : '#000', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '20px' },
123+
card: { backgroundColor: dark ? '#222' : '#f9f9f9', borderRadius: '12px', padding: '30px', maxWidth: '400px', textAlign: 'center' },
124+
title: { fontSize: '24px', fontWeight: 'bold', marginBottom: '10px', color: dark ? '#fff' : '#00f' },
125+
subtitle: { fontSize: '16px', color: dark ? '#aaa' : '#666', marginBottom: '30px' },
126+
themeToggle: { position: 'absolute', top: '20px', right: '20px', background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px' },
127+
buttonGroup: { display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'center' },
128+
status: { marginTop: '20px', padding: '12px', backgroundColor: dark ? '#333' : '#f0f0f0', borderRadius: '8px', fontSize: '14px' },
129+
signInStatus: { marginTop: '8px', fontSize: '14px', color: dark ? '#0f0' : '#060' }
130+
};
131+
132+
return (
133+
<div style={styles.container}>
134+
<button onClick={toggleTheme} style={styles.themeToggle}>
135+
{theme === 'light' ? '🌙' : '☀️'}
136+
</button>
137+
138+
<div style={styles.card}>
139+
<h1 style={styles.title}>Base Account</h1>
140+
<p style={styles.subtitle}>Experience seamless crypto payments</p>
141+
142+
<div style={styles.buttonGroup}>
143+
<SignInWithBaseButton
144+
align="center"
145+
variant="solid"
146+
colorScheme={theme}
147+
size="medium"
148+
onClick={handleSignIn}
149+
/>
150+
151+
{isSignedIn && (
152+
<div style={styles.signInStatus}>
153+
✅ Connected to Base Account
154+
</div>
155+
)}
156+
157+
<BasePayButton
158+
colorScheme={theme}
159+
onClick={handlePayment}
160+
/>
161+
162+
{paymentId && (
163+
<button
164+
onClick={handleCheckStatus}
165+
style={{
166+
padding: '12px 24px',
167+
backgroundColor: theme === 'dark' ? '#374151' : '#f3f4f6',
168+
color: theme === 'dark' ? '#ffffff' : '#1f2937',
169+
border: `1px solid ${theme === 'dark' ? '#6b7280' : '#d1d5db'}`,
170+
borderRadius: '8px',
171+
cursor: 'pointer',
172+
fontSize: '14px'
173+
}}
174+
>
175+
Check Payment Status
176+
</button>
177+
)}
178+
</div>
179+
180+
{paymentStatus && (
181+
<div style={styles.status}>
182+
{paymentStatus}
183+
</div>
184+
)}
185+
</div>
186+
</div>
187+
);
188+
}
189+
190+
export default App;
191+
```
192+
193+
<Note>
194+
**Note:**
195+
196+
Make sure to replace `0xRecipientAddress` with your recipient address.
197+
</Note>
198+
199+
## 4. Start your app
200+
201+
```bash
202+
npm start
203+
```
204+
205+
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! 🎉
206+
207+
**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.
208+
209+
## Next steps
210+
211+
* **[Request profile data](/base-account/guides/accept-payments#collect-user-information-optional)** – ask the user for email, shipping address, etc. during `pay()`
212+
* **[Sub Accounts guide](/base-account/improve-ux/sub-accounts)** – embed gas-less child wallets inside your app
213+
* **[Mobile quick-start](/base-account/quickstart/mobile-integration)** – the same flow for React Native

0 commit comments

Comments
 (0)