Skip to content

Commit 4e8caa7

Browse files
justin-lee-cbjustin-lee-cb
authored
Merge pull request #13 from base-org/theme-switcher
Theme switcher
2 parents c04fcbf + 23010fd commit 4e8caa7

File tree

6 files changed

+157
-29
lines changed

6 files changed

+157
-29
lines changed

‎app/component/themeSwitcher.tsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
'use-client';
2+
import useTheme from '../hooks/useTheme';
3+
4+
export default function ThemeChanger() {
5+
const { theme, changeTheme } = useTheme();
6+
7+
return (
8+
<select
9+
className="select select-bordered"
10+
onChange={(e) => changeTheme(e.target.value)}
11+
value={theme}
12+
>
13+
<option value="light">Light</option>
14+
<option value="dark">Dark</option>
15+
<option value="cupcake">Cupcake</option>
16+
<option value="bumblebee">Bumblebee</option>
17+
<option value="emerald">Emerald</option>
18+
<option value="corporate">Corporate</option>
19+
<option value="synthwave">Synthwave</option>
20+
<option value="retro">Retro</option>
21+
<option value="cyberpunk">Cyberpunk</option>
22+
<option value="valentine">Valentine</option>
23+
<option value="halloween">Halloween</option>
24+
<option value="garden">Garden</option>
25+
<option value="forest">Forest</option>
26+
<option value="aqua">Aqua</option>
27+
<option value="lofi">Lofi</option>
28+
<option value="pastel">Pastel</option>
29+
<option value="fantasy">Fantasy</option>
30+
<option value="wireframe">Wireframe</option>
31+
<option value="black">Black</option>
32+
<option value="luxury">Luxury</option>
33+
<option value="dracula">Dracula</option>
34+
<option value="cmyk">CMYK</option>
35+
<option value="autumn">Autumn</option>
36+
<option value="business">Business</option>
37+
<option value="acid">Acid</option>
38+
<option value="lemonade">Lemonade</option>
39+
<option value="night">Night</option>
40+
<option value="coffee">Coffee</option>
41+
<option value="winter">Winter</option>
42+
<option value="dim">Dim</option>
43+
<option value="nord">Nord</option>
44+
<option value="sunset">Sunset</option>
45+
</select>
46+
)
47+
};

‎app/hooks/useTheme.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use client'
2+
3+
import { useState, useEffect } from 'react'
4+
5+
const useTheme = () => {
6+
const [theme, setTheme] = useState('light')
7+
8+
useEffect(() => {
9+
const storedTheme = localStorage.getItem('theme')
10+
if (storedTheme) {
11+
setTheme(storedTheme)
12+
}
13+
}, [])
14+
15+
const changeTheme = (newTheme: string) => {
16+
setTheme(newTheme)
17+
localStorage.setItem('theme', newTheme)
18+
document.documentElement.setAttribute('data-theme', newTheme)
19+
}
20+
21+
return { theme, changeTheme }
22+
}
23+
24+
export default useTheme;

‎app/layout.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
33
import { ToastContainer } from 'react-toastify';
44
import 'react-toastify/dist/ReactToastify.css';
55
import "./globals.css";
6+
import ThemeProvider from "./provider/Theme";
67

78
const inter = Inter({ subsets: ["latin"] });
89

@@ -25,8 +26,10 @@ export default function RootLayout({
2526
<meta name="theme-color" content="#ffffff" />
2627
</head>
2728
<body className={inter.className}>
28-
{children}
29-
<ToastContainer />
29+
<ThemeProvider>
30+
{children}
31+
<ToastContainer />
32+
</ThemeProvider>
3033
</body>
3134
</html>
3235
);

‎app/page.tsx

+31-26
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@ import { useWallet } from './hooks/useWallet';
77
import shortenAddress from './helpers/shortenAddress';
88
import { GradientAvatar } from './component/gradientAvatar';
99
import { isAddress } from 'ethers';
10+
import ThemeChanger from './component/themeSwitcher';
11+
import { useRouter } from 'next/navigation';
1012

1113
export default function Home({ searchParams }: { searchParams: any }) {
1214
const { provider, account, connectWallet, switchWallet } = useWallet();
1315
const [address, setAddress] = useState(searchParams.address || account || '');
1416
const [amount, setAmount] = useState('');
1517
const [isRedirecting, setIsRedirecting] = useState(false);
16-
18+
const router = useRouter();
1719
const { resolvedAddress } = useEnsResolver(address, provider);
1820

1921
const handleAddressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -37,38 +39,41 @@ export default function Home({ searchParams }: { searchParams: any }) {
3739
const goToCheckout = () => {
3840
if (checkoutUrl) {
3941
setIsRedirecting(true);
40-
window.location.href = checkoutUrl;
42+
router.push(checkoutUrl);
4143
}
4244
}
4345

4446
const { resolvedAddress: connectedEnsResolvedAddress, avatarUrl: connectedEnsAvatarUrl } = useEnsResolver(account || '', provider);
4547

4648
return (
4749
<main className="flex w-full min-h-screen flex-col items-center justify-between p-4 md:p-24 bg-base-200">
48-
{!account ? (
49-
<button
50-
className="btn btn-secondary"
51-
onClick={connectWallet}
52-
>
53-
Connect Wallet
54-
</button>
55-
) : (
56-
<button
57-
className="btn btn-neutral"
58-
onClick={switchWallet}
59-
>
60-
{connectedEnsAvatarUrl ? (
61-
<img
62-
src={connectedEnsAvatarUrl}
63-
alt="Avatar"
64-
className="rounded-full w-8 h-8 mr-1"
65-
/>
66-
) : (
67-
<GradientAvatar address={account} className="rounded-full w-8 h-8 mr-1" />
68-
)}
69-
{isAddress(connectedEnsResolvedAddress) ? shortenAddress(connectedEnsResolvedAddress) : connectedEnsResolvedAddress}
70-
</button>
71-
)}
50+
<div className="flex items-center gap-2">
51+
{!account ? (
52+
<button
53+
className="btn btn-secondary"
54+
onClick={connectWallet}
55+
>
56+
Connect Wallet
57+
</button>
58+
) : (
59+
<button
60+
className="btn btn-neutral"
61+
onClick={switchWallet}
62+
>
63+
{connectedEnsAvatarUrl ? (
64+
<img
65+
src={connectedEnsAvatarUrl}
66+
alt="Avatar"
67+
className="rounded-full w-8 h-8 mr-1"
68+
/>
69+
) : (
70+
<GradientAvatar address={account} className="rounded-full w-8 h-8 mr-1" />
71+
)}
72+
{isAddress(connectedEnsResolvedAddress) ? shortenAddress(connectedEnsResolvedAddress) : connectedEnsResolvedAddress}
73+
</button>
74+
)}
75+
<ThemeChanger />
76+
</div>
7277
<div className="card bg-base-100 shadow-xl p-8 mt-4">
7378
<div className="card-title mb-0">Check out</div>
7479
<div className="card-body p-4">

‎app/provider/Theme.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use client'
2+
3+
import { ReactNode, useEffect } from 'react'
4+
import useTheme from '@/app/hooks/useTheme'
5+
6+
const ThemeProvider = ({ children } : { children: ReactNode }) => {
7+
const { theme } = useTheme()
8+
9+
useEffect(() => {
10+
document.documentElement.setAttribute('data-theme', theme)
11+
}, [theme])
12+
13+
return <>{children}</>
14+
}
15+
16+
export default ThemeProvider

‎tailwind.config.ts

+34-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,40 @@ const config: Config = {
1717
},
1818
},
1919
daisyui: {
20-
themes: ["cupcake"],
20+
themes: [
21+
"light",
22+
"dark",
23+
"cupcake",
24+
"bumblebee",
25+
"emerald",
26+
"corporate",
27+
"synthwave",
28+
"retro",
29+
"cyberpunk",
30+
"valentine",
31+
"halloween",
32+
"garden",
33+
"forest",
34+
"aqua",
35+
"lofi",
36+
"pastel",
37+
"fantasy",
38+
"wireframe",
39+
"black",
40+
"luxury",
41+
"dracula",
42+
"cmyk",
43+
"autumn",
44+
"business",
45+
"acid",
46+
"lemonade",
47+
"night",
48+
"coffee",
49+
"winter",
50+
"dim",
51+
"nord",
52+
"sunset",
53+
],
2154
},
2255
plugins: [daisyui],
2356
};

0 commit comments

Comments
 (0)