Skip to content

Commit 5890292

Browse files
patnirpatnir
committed
fix: navigating pages requires you to connect base account again
1 parent c033dbc commit 5890292

4 files changed

Lines changed: 113 additions & 62 deletions

File tree

‎components/Providers.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ export const config = createConfig({
3434
transports: {
3535
[base.id]: http(),
3636
},
37+
autoConnect: true,
38+
ssr: true,
3739
});
3840

3941
const miniKitConfig = {

‎pages/_app.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import type { AppProps } from 'next/app'
2-
import dynamic from 'next/dynamic'
32
import '@coinbase/onchainkit/styles.css'
43

5-
const Providers = dynamic(() => import('../components/Providers').then(m => m.Providers), { ssr: false })
6-
const MiniAppGuard = dynamic(() => import('../components/MiniAppGuard').then(m => m.MiniAppGuard), { ssr: false })
7-
const ToastProvider = dynamic(() => import('../components/ToastProvider').then(m => m.ToastProvider), { ssr: false })
4+
import { Providers } from '../components/Providers'
5+
import { MiniAppGuard } from '../components/MiniAppGuard'
6+
import { ToastProvider } from '../components/ToastProvider'
87

98
export default function App({ Component, pageProps }: AppProps) {
109
return (

‎pages/docs/[slug].tsx‎

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -488,29 +488,40 @@ export default function DocsPage({ content, headings, title, slug }: DocsPagePro
488488
Docs
489489
</h3>
490490
<nav>
491-
{NAV_ITEMS.map((item) => (
492-
<a
493-
key={item.slug}
494-
href={`/docs/${item.slug === 'index' ? '' : item.slug}`}
495-
style={{
496-
display: 'block',
497-
fontSize: '0.875rem',
498-
color: slug === item.slug ? '#0052FF' : '#666',
499-
textDecoration: 'none',
500-
marginBottom: '0.75rem',
501-
fontWeight: slug === item.slug ? '600' : '400',
502-
transition: 'color 0.2s ease'
503-
}}
504-
onMouseEnter={(e) => {
505-
e.currentTarget.style.color = '#0052FF';
506-
}}
507-
onMouseLeave={(e) => {
508-
e.currentTarget.style.color = slug === item.slug ? '#0052FF' : '#666';
509-
}}
510-
>
511-
{item.label}
512-
</a>
513-
))}
491+
{NAV_ITEMS.map((item) => {
492+
const targetPath = item.slug === 'index' ? '/docs' : `/docs/${item.slug}`;
493+
const isActive = slug === item.slug;
494+
495+
return (
496+
<button
497+
key={item.slug}
498+
type="button"
499+
onClick={() => router.push(targetPath)}
500+
style={{
501+
display: 'block',
502+
fontSize: '0.875rem',
503+
color: isActive ? '#0052FF' : '#666',
504+
textDecoration: 'none',
505+
marginBottom: '0.75rem',
506+
fontWeight: isActive ? '600' : '400',
507+
transition: 'color 0.2s ease',
508+
background: 'transparent',
509+
border: 'none',
510+
padding: 0,
511+
cursor: 'pointer',
512+
textAlign: 'left',
513+
}}
514+
onMouseEnter={(e) => {
515+
e.currentTarget.style.color = '#0052FF';
516+
}}
517+
onMouseLeave={(e) => {
518+
e.currentTarget.style.color = isActive ? '#0052FF' : '#666';
519+
}}
520+
>
521+
{item.label}
522+
</button>
523+
);
524+
})}
514525
</nav>
515526

516527
{/* TOC for current page */}

‎pages/docs/index.tsx‎

Lines changed: 74 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Head from 'next/head';
1010
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
1111
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
1212
import { Layout } from '../../components/Layout';
13+
import { useRouter } from 'next/router';
1314

1415
interface DocsPageProps {
1516
content: string;
@@ -25,6 +26,14 @@ const NAV_ITEMS = [
2526
]
2627

2728
export default function DocsIndexPage({ content, headings }: DocsPageProps) {
29+
const router = useRouter();
30+
const currentPath = (router.asPath ?? router.pathname ?? '').split('?')[0];
31+
const linkBaseStyle = {
32+
color: '#0052FF',
33+
textDecoration: 'underline',
34+
fontWeight: 500,
35+
} as const;
36+
2837
return (
2938
<Layout title="Base Verify Documentation">
3039
<Head>
@@ -80,29 +89,38 @@ export default function DocsIndexPage({ content, headings }: DocsPageProps) {
8089
Docs
8190
</h3>
8291
<nav>
83-
{NAV_ITEMS.map((item) => (
84-
<a
85-
key={item.path}
86-
href={item.path}
87-
style={{
88-
display: 'block',
89-
fontSize: '0.875rem',
90-
color: item.path === '/docs' ? '#0052FF' : '#666',
91-
textDecoration: 'none',
92-
marginBottom: '0.75rem',
93-
fontWeight: item.path === '/docs' ? '600' : '400',
94-
transition: 'color 0.2s ease'
95-
}}
96-
onMouseEnter={(e) => {
97-
e.currentTarget.style.color = '#0052FF';
98-
}}
99-
onMouseLeave={(e) => {
100-
e.currentTarget.style.color = item.path === '/docs' ? '#0052FF' : '#666';
101-
}}
102-
>
103-
{item.label}
104-
</a>
105-
))}
92+
{NAV_ITEMS.map((item) => {
93+
const isActive = currentPath === item.path;
94+
return (
95+
<button
96+
key={item.path}
97+
type="button"
98+
onClick={() => router.push(item.path)}
99+
style={{
100+
display: 'block',
101+
fontSize: '0.875rem',
102+
color: isActive ? '#0052FF' : '#666',
103+
textDecoration: 'none',
104+
marginBottom: '0.75rem',
105+
fontWeight: isActive ? '600' : '400',
106+
transition: 'color 0.2s ease',
107+
background: 'transparent',
108+
border: 'none',
109+
padding: 0,
110+
cursor: 'pointer',
111+
textAlign: 'left',
112+
}}
113+
onMouseEnter={(e) => {
114+
e.currentTarget.style.color = '#0052FF';
115+
}}
116+
onMouseLeave={(e) => {
117+
e.currentTarget.style.color = isActive ? '#0052FF' : '#666';
118+
}}
119+
>
120+
{item.label}
121+
</button>
122+
);
123+
})}
106124
</nav>
107125
</aside>
108126

@@ -262,18 +280,39 @@ export default function DocsIndexPage({ content, headings }: DocsPageProps) {
262280
{...props}
263281
/>
264282
),
265-
a: ({ node, ...props }) => (
266-
<a
267-
style={{
268-
color: '#0052FF',
269-
textDecoration: 'underline',
270-
fontWeight: '500'
271-
}}
272-
target="_blank"
273-
rel="noopener noreferrer"
274-
{...props}
275-
/>
276-
),
283+
a: ({ node, href, children, ...props }) => {
284+
if (href?.startsWith('/')) {
285+
return (
286+
<button
287+
type="button"
288+
onClick={() => router.push(href)}
289+
style={{
290+
...linkBaseStyle,
291+
background: 'transparent',
292+
border: 'none',
293+
padding: 0,
294+
cursor: 'pointer',
295+
fontSize: 'inherit',
296+
textAlign: 'left',
297+
}}
298+
>
299+
{children}
300+
</button>
301+
);
302+
}
303+
304+
return (
305+
<a
306+
style={linkBaseStyle}
307+
target={href?.startsWith('#') ? undefined : '_blank'}
308+
rel={href?.startsWith('#') ? undefined : 'noopener noreferrer'}
309+
href={href}
310+
{...props}
311+
>
312+
{children}
313+
</a>
314+
);
315+
},
277316
table: ({ node, ...props }) => (
278317
<div style={{ overflowX: 'auto', marginBottom: '1.25rem' }}>
279318
<table

0 commit comments

Comments
 (0)