Merge pull request #13 from base-org/theme-switcher

Theme switcher
base-org · Oct 4, 2024 · 4e8caa7 · 4e8caa7
2 parents c04fcbf + 23010fd
commit 4e8caa7
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 29 deletions.
diff --git a/app/component/themeSwitcher.tsx b/app/component/themeSwitcher.tsx
@@ -0,0 +1,47 @@
+'use-client';
+import useTheme from '../hooks/useTheme';
+
+export default function ThemeChanger() {
+  const { theme, changeTheme } = useTheme();
+
+  return (
+    <select 
+      className="select select-bordered"
+      onChange={(e) => changeTheme(e.target.value)}
+      value={theme}
+    >
+      <option value="light">Light</option>
+      <option value="dark">Dark</option>
+      <option value="cupcake">Cupcake</option>
+      <option value="bumblebee">Bumblebee</option>
+      <option value="emerald">Emerald</option>
+      <option value="corporate">Corporate</option>
+      <option value="synthwave">Synthwave</option>
+      <option value="retro">Retro</option>
+      <option value="cyberpunk">Cyberpunk</option>
+      <option value="valentine">Valentine</option>
+      <option value="halloween">Halloween</option>
+      <option value="garden">Garden</option>
+      <option value="forest">Forest</option>
+      <option value="aqua">Aqua</option>
+      <option value="lofi">Lofi</option>
+      <option value="pastel">Pastel</option>
+      <option value="fantasy">Fantasy</option>
+      <option value="wireframe">Wireframe</option>
+      <option value="black">Black</option>
+      <option value="luxury">Luxury</option>
+      <option value="dracula">Dracula</option>
+      <option value="cmyk">CMYK</option>
+      <option value="autumn">Autumn</option>
+      <option value="business">Business</option>
+      <option value="acid">Acid</option>
+      <option value="lemonade">Lemonade</option>
+      <option value="night">Night</option>
+      <option value="coffee">Coffee</option>
+      <option value="winter">Winter</option>
+      <option value="dim">Dim</option>
+      <option value="nord">Nord</option>
+      <option value="sunset">Sunset</option>
+    </select>
+  )
+};
diff --git a/app/hooks/useTheme.ts b/app/hooks/useTheme.ts
@@ -0,0 +1,24 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+const useTheme = () => {
+  const [theme, setTheme] = useState('light')
+
+  useEffect(() => {
+    const storedTheme = localStorage.getItem('theme')
+    if (storedTheme) {
+      setTheme(storedTheme)
+    }
+  }, [])
+
+  const changeTheme = (newTheme: string) => {
+    setTheme(newTheme)
+    localStorage.setItem('theme', newTheme)
+    document.documentElement.setAttribute('data-theme', newTheme)
+  }
+
+  return { theme, changeTheme }
+}
+
+export default useTheme;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import "./globals.css";
+import ThemeProvider from "./provider/Theme";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -25,8 +26,10 @@ export default function RootLayout({
         <meta name="theme-color" content="#ffffff" />
       </head>
       <body className={inter.className}>
-        {children}
-        <ToastContainer />
+        <ThemeProvider>
+          {children}
+          <ToastContainer />
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -7,13 +7,15 @@ import { useWallet } from './hooks/useWallet';
 import shortenAddress from './helpers/shortenAddress';
 import { GradientAvatar } from './component/gradientAvatar';
 import { isAddress } from 'ethers';
+import ThemeChanger from './component/themeSwitcher';
+import { useRouter } from 'next/navigation';
 
 export default function Home({ searchParams }: { searchParams: any }) {
   const { provider, account, connectWallet, switchWallet } = useWallet();
   const [address, setAddress] = useState(searchParams.address || account || '');
   const [amount, setAmount] = useState('');
   const [isRedirecting, setIsRedirecting] = useState(false);
-
+  const router = useRouter();
   const { resolvedAddress } = useEnsResolver(address, provider);
 
   const handleAddressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -37,38 +39,41 @@ export default function Home({ searchParams }: { searchParams: any }) {
   const goToCheckout = () => {
     if (checkoutUrl) {
       setIsRedirecting(true);
-      window.location.href = checkoutUrl;
+      router.push(checkoutUrl);
     }
   }
 
   const { resolvedAddress: connectedEnsResolvedAddress, avatarUrl: connectedEnsAvatarUrl } = useEnsResolver(account || '', provider);
 
   return (
     <main className="flex w-full min-h-screen flex-col items-center justify-between p-4 md:p-24 bg-base-200">
-      {!account ? (
-        <button
-          className="btn btn-secondary"
-          onClick={connectWallet}
-        >
-          Connect Wallet
-        </button>
-      ) : (
-        <button
-          className="btn btn-neutral"
-          onClick={switchWallet}
-        >
-          {connectedEnsAvatarUrl ? (
-            <img
-              src={connectedEnsAvatarUrl}
-              alt="Avatar"
-              className="rounded-full w-8 h-8 mr-1"
-            />
-          ) : (
-            <GradientAvatar address={account} className="rounded-full w-8 h-8 mr-1" />
-          )}
-          {isAddress(connectedEnsResolvedAddress) ? shortenAddress(connectedEnsResolvedAddress) : connectedEnsResolvedAddress}
-        </button>
-      )}
+      <div className="flex items-center gap-2">
+        {!account ? (
+          <button
+            className="btn btn-secondary"
+            onClick={connectWallet}
+          >
+            Connect Wallet
+          </button>
+        ) : (
+          <button
+            className="btn btn-neutral"
+            onClick={switchWallet}
+          >
+            {connectedEnsAvatarUrl ? (
+              <img
+                src={connectedEnsAvatarUrl}
+                alt="Avatar"
+                className="rounded-full w-8 h-8 mr-1"
+              />
+            ) : (
+              <GradientAvatar address={account} className="rounded-full w-8 h-8 mr-1" />
+            )}
+            {isAddress(connectedEnsResolvedAddress) ? shortenAddress(connectedEnsResolvedAddress) : connectedEnsResolvedAddress}
+          </button>
+        )}
+        <ThemeChanger />
+      </div>
       <div className="card bg-base-100 shadow-xl p-8 mt-4">
         <div className="card-title mb-0">Check out</div>
         <div className="card-body p-4">

diff --git a/app/provider/Theme.tsx b/app/provider/Theme.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import { ReactNode, useEffect } from 'react'
+import useTheme from '@/app/hooks/useTheme'
+
+const ThemeProvider = ({ children } : { children: ReactNode }) => {
+  const { theme } = useTheme()
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+  }, [theme])
+
+  return <>{children}</>
+}
+
+export default ThemeProvider
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -17,7 +17,40 @@ const config: Config = {
     },
   },
   daisyui: {
-    themes: ["cupcake"],
+    themes: [
+      "light",
+      "dark",
+      "cupcake",
+      "bumblebee",
+      "emerald",
+      "corporate",
+      "synthwave",
+      "retro",
+      "cyberpunk",
+      "valentine",
+      "halloween",
+      "garden",
+      "forest",
+      "aqua",
+      "lofi",
+      "pastel",
+      "fantasy",
+      "wireframe",
+      "black",
+      "luxury",
+      "dracula",
+      "cmyk",
+      "autumn",
+      "business",
+      "acid",
+      "lemonade",
+      "night",
+      "coffee",
+      "winter",
+      "dim",
+      "nord",
+      "sunset",
+    ],
   },
   plugins: [daisyui],
 };