Skip to content

Commit a1aeb8f

Browse files
patnirpatnir
committed
layout component
1 parent 83707df commit a1aeb8f

3 files changed

Lines changed: 268 additions & 341 deletions

File tree

‎components/Layout.tsx‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
import { useRouter } from 'next/router'
2+
import { WalletComponent } from './Wallet'
3+
import { useOpenUrl } from '@coinbase/onchainkit/minikit'
4+
import { useToast } from './ToastProvider'
5+
import { verifySignatureCache } from '../lib/signatureCache'
6+
import { useState } from 'react'
7+
8+
interface LayoutProps {
9+
children: React.ReactNode
10+
title?: string
11+
}
12+
13+
export function Layout({ children, title = 'Base Verify Demo' }: LayoutProps) {
14+
const router = useRouter()
15+
const openUrl = useOpenUrl()
16+
const { showToast } = useToast()
17+
const [showDebugButtons, setShowDebugButtons] = useState(false)
18+
19+
return (
20+
<div style={{
21+
minHeight: '100vh',
22+
background: '#f5f5f5',
23+
fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
24+
display: 'flex',
25+
flexDirection: 'column'
26+
}}>
27+
{/* Header */}
28+
<div style={{
29+
background: 'rgba(255, 255, 255, 0.95)',
30+
backdropFilter: 'blur(10px)',
31+
borderBottom: '1px solid rgba(255, 255, 255, 0.2)',
32+
padding: '0.75rem 0',
33+
position: 'sticky',
34+
top: 0,
35+
zIndex: 100
36+
}}>
37+
<div style={{ margin: '0 auto', padding: '0 1rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
38+
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem' }}>
39+
<h1 style={{ margin: 0, fontSize: 'clamp(1.1rem, 4vw, 1.3rem)', fontWeight: '600', color: '#1a1a1a' }}>{title}</h1>
40+
</div>
41+
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
42+
<WalletComponent />
43+
</div>
44+
</div>
45+
</div>
46+
47+
{/* Main Content */}
48+
<div style={{ maxWidth: '1200px', margin: '0 auto', padding: '1.5rem 1rem', flex: 1, width: '100%' }}>
49+
{children}
50+
</div>
51+
52+
{/* Footer */}
53+
<div style={{
54+
textAlign: 'center',
55+
padding: '1rem',
56+
borderTop: '1px solid #e5e7eb',
57+
marginTop: 'auto'
58+
}}>
59+
{/* Debug Buttons */}
60+
{showDebugButtons && (
61+
<div style={{
62+
display: 'flex',
63+
justifyContent: 'center',
64+
marginBottom: '1rem',
65+
gap: '1rem'
66+
}}>
67+
<button
68+
onClick={() => openUrl('cbwallet://settings')}
69+
style={{
70+
padding: '0.5rem 1rem',
71+
background: '#0052FF',
72+
color: 'white',
73+
border: 'none',
74+
borderRadius: '8px',
75+
cursor: 'pointer',
76+
fontSize: '0.8rem',
77+
fontWeight: '600',
78+
boxShadow: '0 2px 8px rgba(0, 82, 255, 0.2)',
79+
transition: 'all 0.2s ease'
80+
}}
81+
onMouseEnter={(e) => {
82+
e.currentTarget.style.background = '#0045DD';
83+
e.currentTarget.style.transform = 'translateY(-1px)';
84+
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 82, 255, 0.3)';
85+
}}
86+
onMouseLeave={(e) => {
87+
e.currentTarget.style.background = '#0052FF';
88+
e.currentTarget.style.transform = 'translateY(0)';
89+
e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 82, 255, 0.2)';
90+
}}
91+
>
92+
Open Wallet Settings
93+
</button>
94+
<button
95+
onClick={() => openUrl('cbwallet://points')}
96+
style={{
97+
padding: '0.5rem 1rem',
98+
background: '#0052FF',
99+
color: 'white',
100+
border: 'none',
101+
borderRadius: '8px',
102+
cursor: 'pointer',
103+
fontSize: '0.8rem',
104+
fontWeight: '600',
105+
boxShadow: '0 2px 8px rgba(0, 82, 255, 0.2)',
106+
transition: 'all 0.2s ease'
107+
}}
108+
onMouseEnter={(e) => {
109+
e.currentTarget.style.background = '#0045DD';
110+
e.currentTarget.style.transform = 'translateY(-1px)';
111+
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 82, 255, 0.3)';
112+
}}
113+
onMouseLeave={(e) => {
114+
e.currentTarget.style.background = '#0052FF';
115+
e.currentTarget.style.transform = 'translateY(0)';
116+
e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 82, 255, 0.2)';
117+
}}
118+
>
119+
Open Points
120+
</button>
121+
<button
122+
onClick={() => openUrl('cbwallet://miniapp?url=https://verify.base.dev')}
123+
style={{
124+
padding: '0.5rem 1rem',
125+
background: '#0052FF',
126+
color: 'white',
127+
border: 'none',
128+
borderRadius: '8px',
129+
cursor: 'pointer',
130+
fontSize: '0.8rem',
131+
fontWeight: '600',
132+
boxShadow: '0 2px 8px rgba(0, 82, 255, 0.2)',
133+
transition: 'all 0.2s ease'
134+
}}
135+
onMouseEnter={(e) => {
136+
e.currentTarget.style.background = '#0045DD';
137+
e.currentTarget.style.transform = 'translateY(-1px)';
138+
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 82, 255, 0.3)';
139+
}}
140+
onMouseLeave={(e) => {
141+
e.currentTarget.style.background = '#0052FF';
142+
e.currentTarget.style.transform = 'translateY(0)';
143+
e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 82, 255, 0.2)';
144+
}}
145+
>
146+
Open Base Verify
147+
</button>
148+
</div>
149+
)}
150+
151+
{/* Footer Links */}
152+
<div style={{
153+
display: 'flex',
154+
justifyContent: 'center',
155+
alignItems: 'center',
156+
gap: '1rem',
157+
flexWrap: 'wrap'
158+
}}>
159+
<a href="cbwallet://miniapp?url=https://verify.base.dev" target="_blank" rel="noopener noreferrer" style={{
160+
color: '#6b7280',
161+
fontSize: '0.8rem',
162+
textDecoration: 'none'
163+
}}>
164+
Powered by Base Verify
165+
</a>
166+
<span style={{ color: '#d1d5db', fontSize: '0.8rem' }}>•</span>
167+
<button
168+
onClick={() => {
169+
verifySignatureCache.clear();
170+
localStorage.removeItem('miniapp_last_prompt_timestamp');
171+
showToast('Cache cleared', 'success');
172+
}}
173+
style={{
174+
background: 'none',
175+
border: 'none',
176+
color: '#9ca3af',
177+
fontSize: '0.75rem',
178+
cursor: 'pointer',
179+
textDecoration: 'underline',
180+
padding: 0
181+
}}
182+
onMouseEnter={(e) => {
183+
e.currentTarget.style.color = '#1a1a1a';
184+
}}
185+
onMouseLeave={(e) => {
186+
e.currentTarget.style.color = '#9ca3af';
187+
}}
188+
>
189+
Clear Cache
190+
</button>
191+
<span style={{ color: '#d1d5db', fontSize: '0.8rem' }}>•</span>
192+
<button
193+
onClick={() => setShowDebugButtons(!showDebugButtons)}
194+
style={{
195+
background: 'none',
196+
border: 'none',
197+
color: '#9ca3af',
198+
fontSize: '0.75rem',
199+
cursor: 'pointer',
200+
textDecoration: 'underline',
201+
padding: 0
202+
}}
203+
onMouseEnter={(e) => {
204+
e.currentTarget.style.color = '#1a1a1a';
205+
}}
206+
onMouseLeave={(e) => {
207+
e.currentTarget.style.color = '#9ca3af';
208+
}}
209+
>
210+
{showDebugButtons ? 'Hide' : 'Show'} Debug Buttons
211+
</button>
212+
<span style={{ color: '#d1d5db', fontSize: '0.8rem' }}>•</span>
213+
<button
214+
onClick={() => router.push('/docs')}
215+
style={{
216+
background: 'none',
217+
border: 'none',
218+
color: '#9ca3af',
219+
fontSize: '0.75rem',
220+
cursor: 'pointer',
221+
textDecoration: 'underline',
222+
padding: 0
223+
}}
224+
onMouseEnter={(e) => {
225+
e.currentTarget.style.color = '#1a1a1a';
226+
}}
227+
onMouseLeave={(e) => {
228+
e.currentTarget.style.color = '#9ca3af';
229+
}}
230+
>
231+
Base Verify Docs
232+
</button>
233+
<span style={{ color: '#d1d5db', fontSize: '0.8rem' }}>•</span>
234+
<button
235+
onClick={() => router.push('/coinbase')}
236+
style={{
237+
background: 'none',
238+
border: 'none',
239+
color: '#9ca3af',
240+
fontSize: '0.75rem',
241+
cursor: 'pointer',
242+
textDecoration: 'underline',
243+
padding: 0
244+
}}
245+
onMouseEnter={(e) => {
246+
e.currentTarget.style.color = '#1a1a1a';
247+
}}
248+
onMouseLeave={(e) => {
249+
e.currentTarget.style.color = '#9ca3af';
250+
}}
251+
>
252+
Claim Coinbase Airdrop
253+
</button>
254+
</div>
255+
</div>
256+
</div>
257+
)
258+
}
259+

0 commit comments

Comments
 (0)