Skip to content

Commit 22bc65f

Browse files
youssefeayoussefea
authored
Merge pull request #83 from base/base-account-wagmi-template
Update wagmi project batch transactions
2 parents dfc3438 + 61aa3fc commit 22bc65f

File tree

5 files changed

+561
-134
lines changed

5 files changed

+561
-134
lines changed

‎base-account/base-account-wagmi-template/src/app/globals.css‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
:root {
2-
background-color: #181818;
3-
color: rgba(255, 255, 255, 0.87);
42
color-scheme: light dark;
53
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
64
font-synthesis: none;
@@ -13,9 +11,29 @@
1311
-webkit-text-size-adjust: 100%;
1412
}
1513

16-
@media (prefers-color-scheme: light) {
17-
:root {
18-
background-color: #f8f8f8;
19-
color: #181818;
14+
body {
15+
margin: 0;
16+
padding: 0;
17+
}
18+
19+
/* Spinner animation */
20+
@keyframes spin {
21+
0% {
22+
transform: rotate(0deg);
2023
}
24+
100% {
25+
transform: rotate(360deg);
26+
}
27+
}
28+
29+
/* Input focus styles */
30+
input:focus {
31+
border-color: #667eea !important;
32+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
33+
}
34+
35+
/* Button hover effects */
36+
button:not(:disabled):hover {
37+
transform: translateY(-1px);
38+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
2139
}

‎base-account/base-account-wagmi-template/src/app/page.tsx‎

Lines changed: 228 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -10,51 +10,240 @@ function App() {
1010
const { disconnect } = useDisconnect();
1111

1212
return (
13-
<>
14-
<div>
15-
<h2>Account</h2>
16-
17-
<div>
18-
status: {account.status}
19-
<br />
20-
addresses: {JSON.stringify(account.addresses)}
21-
<br />
22-
chainId: {account.chainId}
23-
</div>
13+
<div style={styles.container}>
14+
<div style={styles.innerContainer}>
15+
{/* Header */}
16+
<header style={styles.header}>
17+
<h1 style={styles.title}>🔷 Base Account Demo</h1>
18+
<p style={styles.subtitle}>
19+
Sign in to interact with batch transactions and mint NFTs
20+
</p>
21+
</header>
2422

23+
{/* Account Info Card */}
2524
{account.status === "connected" && (
26-
<button type="button" onClick={() => disconnect()}>
27-
Disconnect
28-
</button>
25+
<div style={styles.card}>
26+
<div style={styles.cardHeader}>
27+
<h2 style={styles.cardTitle}>Your Account</h2>
28+
<span style={{
29+
...styles.statusBadge,
30+
backgroundColor: "#10b981",
31+
}}>
32+
Signed In
33+
</span>
34+
</div>
35+
<div style={styles.accountInfo}>
36+
<div style={styles.infoRow}>
37+
<span style={styles.infoLabel}>Address:</span>
38+
<code style={styles.infoValue}>
39+
{account.addresses?.[0]
40+
? `${account.addresses[0]}`
41+
: "N/A"}
42+
</code>
43+
</div>
44+
</div>
45+
<button
46+
type="button"
47+
onClick={() => disconnect()}
48+
style={styles.disconnectButton}
49+
>
50+
Sign Out
51+
</button>
52+
</div>
2953
)}
30-
</div>
3154

32-
<div>
33-
<h2>Connect</h2>
34-
{connectors.map((connector) => {
35-
if (connector.name === "Base Account") {
36-
return (
37-
<SignInWithBase key={connector.uid} connector={connector} />
38-
);
39-
} else {
40-
return (
41-
<button
42-
key={connector.uid}
43-
onClick={() => connect({ connector })}
44-
type="button"
45-
>
46-
{connector.name}
47-
</button>
48-
);
49-
}
50-
})}
51-
<div>{status}</div>
52-
<div>{error?.message}</div>
53-
</div>
55+
{/* Sign In Card */}
56+
{account.status !== "connected" && (
57+
<div style={styles.card}>
58+
<h2 style={styles.cardTitle}>Sign In</h2>
59+
<p style={styles.cardDescription}>
60+
Choose your preferred sign-in method to get started
61+
</p>
62+
<div style={styles.connectButtons}>
63+
{connectors.map((connector) => {
64+
if (connector.name === "Base Account") {
65+
return (
66+
<SignInWithBase key={connector.uid} connector={connector} />
67+
);
68+
} else {
69+
return (
70+
<button
71+
key={connector.uid}
72+
onClick={() => connect({ connector })}
73+
type="button"
74+
style={styles.connectButton}
75+
>
76+
Sign in with {connector.name}
77+
</button>
78+
);
79+
}
80+
})}
81+
</div>
82+
{status && status !== "idle" && (
83+
<div style={styles.statusMessage}>
84+
<span style={styles.statusText}>Status: {status}</span>
85+
</div>
86+
)}
87+
{error && (
88+
<div style={styles.errorMessage}>
89+
⚠️ {error.message}
90+
</div>
91+
)}
92+
</div>
93+
)}
94+
95+
{/* Batch Transactions Card */}
96+
{account.status === "connected" && (
97+
<div style={styles.card}>
98+
<BatchTransactions />
99+
</div>
100+
)}
54101

55-
{account.status === "connected" && <BatchTransactions />}
56-
</>
102+
{/* Footer */}
103+
<footer style={styles.footer}>
104+
<p style={styles.footerText}>
105+
Powered by Base • Built with Wagmi
106+
</p>
107+
</footer>
108+
</div>
109+
</div>
57110
);
58111
}
59112

113+
const styles = {
114+
container: {
115+
minHeight: "100vh",
116+
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
117+
padding: "2rem",
118+
} as React.CSSProperties,
119+
innerContainer: {
120+
maxWidth: "800px",
121+
margin: "0 auto",
122+
} as React.CSSProperties,
123+
header: {
124+
textAlign: "center",
125+
marginBottom: "3rem",
126+
color: "white",
127+
} as React.CSSProperties,
128+
title: {
129+
fontSize: "3rem",
130+
fontWeight: "bold",
131+
margin: "0 0 1rem 0",
132+
textShadow: "0 2px 4px rgba(0,0,0,0.1)",
133+
} as React.CSSProperties,
134+
subtitle: {
135+
fontSize: "1.125rem",
136+
opacity: 0.9,
137+
margin: 0,
138+
} as React.CSSProperties,
139+
card: {
140+
backgroundColor: "white",
141+
borderRadius: "16px",
142+
padding: "2rem",
143+
marginBottom: "2rem",
144+
boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
145+
} as React.CSSProperties,
146+
cardHeader: {
147+
display: "flex",
148+
justifyContent: "space-between",
149+
alignItems: "center",
150+
marginBottom: "1.5rem",
151+
} as React.CSSProperties,
152+
cardTitle: {
153+
fontSize: "1.5rem",
154+
fontWeight: "600",
155+
color: "#1f2937",
156+
margin: 0,
157+
} as React.CSSProperties,
158+
cardDescription: {
159+
color: "#6b7280",
160+
marginBottom: "1.5rem",
161+
} as React.CSSProperties,
162+
statusBadge: {
163+
padding: "0.5rem 1rem",
164+
borderRadius: "9999px",
165+
color: "white",
166+
fontSize: "0.875rem",
167+
fontWeight: "500",
168+
} as React.CSSProperties,
169+
accountInfo: {
170+
backgroundColor: "#f9fafb",
171+
borderRadius: "8px",
172+
padding: "1.5rem",
173+
marginBottom: "1.5rem",
174+
} as React.CSSProperties,
175+
infoRow: {
176+
display: "flex",
177+
justifyContent: "space-between",
178+
alignItems: "center",
179+
marginBottom: "0.75rem",
180+
} as React.CSSProperties,
181+
infoLabel: {
182+
fontWeight: "500",
183+
color: "#6b7280",
184+
} as React.CSSProperties,
185+
infoValue: {
186+
color: "#1f2937",
187+
fontWeight: "500",
188+
} as React.CSSProperties,
189+
connectButtons: {
190+
display: "flex",
191+
flexDirection: "column",
192+
gap: "0.75rem",
193+
alignItems: "center",
194+
} as React.CSSProperties,
195+
connectButton: {
196+
width: "100%",
197+
padding: "1rem",
198+
backgroundColor: "#667eea",
199+
color: "white",
200+
border: "none",
201+
borderRadius: "8px",
202+
fontSize: "1rem",
203+
fontWeight: "500",
204+
cursor: "pointer",
205+
transition: "all 0.2s",
206+
} as React.CSSProperties,
207+
disconnectButton: {
208+
width: "100%",
209+
padding: "0.75rem",
210+
backgroundColor: "#ef4444",
211+
color: "white",
212+
border: "none",
213+
borderRadius: "8px",
214+
fontSize: "1rem",
215+
fontWeight: "500",
216+
cursor: "pointer",
217+
transition: "all 0.2s",
218+
} as React.CSSProperties,
219+
statusMessage: {
220+
marginTop: "1rem",
221+
padding: "0.75rem",
222+
backgroundColor: "#dbeafe",
223+
borderRadius: "8px",
224+
textAlign: "center",
225+
} as React.CSSProperties,
226+
statusText: {
227+
color: "#1e40af",
228+
fontWeight: "500",
229+
} as React.CSSProperties,
230+
errorMessage: {
231+
marginTop: "1rem",
232+
padding: "0.75rem",
233+
backgroundColor: "#fee2e2",
234+
borderRadius: "8px",
235+
color: "#991b1b",
236+
textAlign: "center",
237+
} as React.CSSProperties,
238+
footer: {
239+
textAlign: "center",
240+
marginTop: "3rem",
241+
color: "white",
242+
} as React.CSSProperties,
243+
footerText: {
244+
opacity: 0.8,
245+
fontSize: "0.875rem",
246+
} as React.CSSProperties,
247+
};
248+
60249
export default App;

0 commit comments

Comments
 (0)