Merge pull request #1 from growindiedev/feat/dev

upgrade the styling and fix bugs

package.json

@@ -10,10 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@daohaus/keychain-utils": "^0.4.4",
-    "@daohaus/moloch-v3-data": "^0.4.4",
-    "@daohaus/moloch-v3-hooks": "^0.4.4",
-    "@daohaus/utils": "^0.4.4",
+    "@daohaus/keychain-utils": "^0.5.0",
+    "@daohaus/moloch-v3-data": "^0.5.0",
+    "@daohaus/moloch-v3-hooks": "^0.5.0",
+    "@daohaus/utils": "^0.5.0",
+    "next-themes": "^0.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
@@ -27,9 +28,12 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -1,11 +1,28 @@
-import { Routes } from './Routes';
+import { Link } from "react-router-dom";
+import { Routes } from "./Routes";
+import "./index.css";
+import { ThemeProvider } from "./components/theme-provider";
+import { ModeToggle } from "./components/ModeToggle";
 
 export const App = () => {
-
   return (
-    <>
-      <Routes  />
-    </>
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <div
+        className={`antialiased min-h-screen bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-50`}
+      >
+        <div className="max-w-3xl mx-auto py-10 px-4">
+          <header>
+            <div className="flex items-center justify-between">
+              <ModeToggle />
+              {/* <nav className="ml-auto text-sm font-medium space-x-6">
+                <Link to="/">Home</Link>
+                <Link to="/about">About</Link>
+              </nav> */}
+            </div>
+          </header>
+          <Routes />
+        </div>
+      </div>
+    </ThemeProvider>
   );
 };
-

src/Routes.tsx

@@ -1,24 +1,20 @@
-import {
-  Routes as Router,
-  Route,
-} from "react-router-dom";
+import { Routes as Router, Route } from "react-router-dom";
 
 import { HomeContainer } from "./components/layout/HomeContainer";
 import Home from "./pages/Home";
 import Blog from "./pages/Blog";
 import BlogDetail from "./pages/BlogDetail";
 
-
 export const Routes = () => {
-
   return (
     <Router>
       <Route path="/" element={<HomeContainer />}>
         <Route path="/" element={<Home />} />
-        <Route path="/blog/:chainId/:daoId" element={<Blog/>} />
-        <Route path="/content/:chainId/:daoId/:contentId" element={<BlogDetail/>} />
-
-
+        <Route path="/blog/:chainId/:daoId" element={<Blog />} />
+        <Route
+          path="/content/:chainId/:daoId/:contentId"
+          element={<BlogDetail />}
+        />
       </Route>
     </Router>
   );

src/components/ModeToggle.tsx

@@ -0,0 +1,45 @@
+import { useTheme } from "next-themes";
+
+export function ModeToggle() {
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <button
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      className="border rounded-md w-6 h-6 flex items-center justify-center"
+    >
+      <span className="sr-only">Toggle mode</span>
+      {theme !== "dark" ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="w-4 h-4"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+          />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="w-4 h-4"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}

src/components/layout/HomeContainer.tsx

@@ -1,21 +1,19 @@
-
 import { Outlet } from "react-router-dom";
-import styled from "styled-components";
+//import styled from "styled-components";
 
-const BlogContainerLayout = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: left;
-    justify-content: center;
-    margin-top: 2rem;
-    max-width: 800px;
-    `;
+// const BlogContainerLayout = styled.div`
+//   display: flex;
+//   flex-direction: column;
+//   align-items: left;
+//   justify-content: center;
+//   margin-top: 2rem;
+//   max-width: 800px;
+// `;
 
 export const HomeContainer = () => {
-
   return (
-    <BlogContainerLayout>
+    <div className="flex flex-col items-start justify-center mt-8 max-w-3xl">
       <Outlet />
-    </BlogContainerLayout>
+    </div>
   );
 };

src/components/theme-provider.tsx

@@ -0,0 +1,6 @@
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

src/hooks/UseRecords.tsx

@@ -8,6 +8,7 @@ import { BlogPost } from "../utils/types";
 const defaultGraphApiKeys = {
   "0x1": import.meta.env.VITE_GRAPH_API_KEY_MAINNET,
   "0x64": import.meta.env.VITE_GRAPH_API_KEY_MAINNET,
+  "0xaa36a7": import.meta.env.VITE_GRAPH_API_KEY_MAINNET,
 };
 
 type Record = {
@@ -39,8 +40,6 @@ type Record = {
   };
 };
 
-
-
 const fetchRecords = async ({
   daoId,
   chainId,
@@ -79,51 +78,35 @@ const fetchRecords = async ({
       });
     }
 
-
     for (let i = 0; i < data.items.length; i++) {
       (data.items[i].parsedContent as BlogPost).tag = recordType;
     }
 
-
     if (hash && recordType === "DUCEREF") {
       console.log("hash recordtype", hash, recordType);
-      const filteredData = data.items.filter(
-        (item) => {
-          return (item as Record)?.parsedContent?.id === hash
-        }
-
-      );
+      const filteredData = data.items.filter((item) => {
+        return (item as Record)?.parsedContent?.id === hash;
+      });
       console.log("filteredData DIN", filteredData);
       return filteredData;
     } else if (hash && recordType === "DUCE") {
-
-      const filteredData = data.items.filter(
-        (item) => {
-          return (item as Record)?.parsedContent?.id === hash
-        }
-      );
+      const filteredData = data.items.filter((item) => {
+        return (item as Record)?.parsedContent?.id === hash;
+      });
       console.log("filteredData", filteredData);
       return filteredData;
     } else if (parentHash && recordType === "DUCE") {
-
-      const filteredData = data.items.filter(
-        (item) => {
-          return (item as Record)?.parsedContent?.parentId === parentHash
-        }
-      );
+      const filteredData = data.items.filter((item) => {
+        return (item as Record)?.parsedContent?.parentId === parentHash;
+      });
       console.log("filteredData", filteredData);
       return filteredData;
     } else if (recordType === "DUCE") {
-
-      return data.items.filter(
-        (item) => {
-          return (item as Record)?.parsedContent.description !== ""
-        }
-      );
+      return data.items.filter((item) => {
+        return (item as Record)?.parsedContent.description !== "";
+      });
     }
 
-
-
     return data.items;
   } catch (error) {
     console.error(error);
@@ -153,7 +136,10 @@ export const useRecords = ({
   graphApiKeys?: Keychain;
 }) => {
   const { data, error, ...rest } = useQuery(
-    [`${daoId || 'all'}_${recordType}_h${hash || ""}-ph${parentHash || ""}`, { daoId, chainId }],
+    [
+      `${daoId || "all"}_${recordType}_h${hash || ""}-ph${parentHash || ""}`,
+      { daoId, chainId },
+    ],
     () =>
       fetchRecords({
         daoId,
@@ -169,4 +155,4 @@ export const useRecords = ({
   );
 
   return { records: data, error: error as Error | null, ...rest };
-};
+};

src/index.css

@@ -1,4 +1,14 @@
-:root {
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* #root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+} */
+
+/* :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
@@ -65,4 +75,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+} */

src/main.tsx

@@ -3,20 +3,18 @@ import ReactDOM from "react-dom/client";
 import { HashRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
 
-
 import { App } from "./App";
 
-import "./App.css";
-
+import "./index.css";
 
 const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <HashRouter>
       <QueryClientProvider client={queryClient}>
-          <App />
+        <App />
       </QueryClientProvider>
     </HashRouter>
   </React.StrictMode>
-);
+);