Set body background based on DAO metadata

decentdao · Nov 30, 2023 · 4b6272b · 4b6272b
1 parent 73a6304
commit 4b6272b
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 12 deletions.
diff --git a/app/daos/[daoAddress]/page.tsx b/app/daos/[daoAddress]/page.tsx
@@ -1,5 +1,8 @@
 'use client';
 
+import { ChakraProvider, extendTheme } from '@chakra-ui/react';
+import { theme } from '@decent-org/fractal-ui';
+import { useMemo } from 'react';
 import { Activities } from '../../../src/components/pages/DaoDashboard/Activities';
 import { ERCO20Claim } from '../../../src/components/pages/DaoDashboard/ERC20Claim';
 import { Info } from '../../../src/components/pages/DaoDashboard/Info';
@@ -9,14 +12,37 @@ import useDAOMetadata from '../../../src/hooks/DAO/useDAOMetadata';
 
 export default function DaoDashboardPage() {
   const daoMetadata = useDAOMetadata();
+  const activeTheme = useMemo(() => {
+    if (daoMetadata && daoMetadata.bodyBackground) {
+      return extendTheme({
+        ...theme,
+        styles: {
+          ...theme.styles,
+          global: {
+            ...theme.styles.global,
+            html: {
+              ...theme.styles.global.html,
+              background: daoMetadata.bodyBackground,
+            },
+            body: {
+              ...theme.styles.global.body,
+              background: daoMetadata.bodyBackground,
+            },
+          },
+        },
+      });
+    }
+    return theme;
+  }, [daoMetadata]);
+
   return (
-    <>
+    <ChakraProvider theme={activeTheme}>
       <InfoHeader />
       <ClientOnly mt={!!daoMetadata ? 8 : 12}>
         <Info />
         <ERCO20Claim />
         <Activities />
       </ClientOnly>
-    </>
+    </ChakraProvider>
   );
 }
diff --git a/src/components/pages/DaoDashboard/Info/InfoHeader.tsx b/src/components/pages/DaoDashboard/Info/InfoHeader.tsx
@@ -66,7 +66,12 @@ export default function InfoHeader() {
             </Text>
             {daoMetadata.links.map(link => (
               <Box key={link.url}>
-                <ExternalLink href={link.url}>{link.title}</ExternalLink>
+                <ExternalLink
+                  href={link.url}
+                  color="grayscale.100"
+                >
+                  {link.title}
+                </ExternalLink>
               </Box>
             ))}
           </MenuList>

diff --git a/src/hooks/DAO/useDAOMetadata.ts b/src/hooks/DAO/useDAOMetadata.ts
@@ -3,18 +3,19 @@ import lizzardsDAOMetadata from '../../metadata/lizzardsDAO';
 import { useFractal } from '../../providers/App/AppProvider';
 
 export default function useDAOMetadata() {
-  const {
-    node: { daoAddress },
-  } = useFractal();
+  const storeState = useFractal();
 
   const daoMetadata = useMemo(() => {
-    switch (daoAddress) {
-      case lizzardsDAOMetadata.address:
-        return lizzardsDAOMetadata;
-      default:
-        return undefined;
+    if (storeState && storeState.node && storeState.node.daoAddress) {
+      switch (storeState.node.daoAddress) {
+        case lizzardsDAOMetadata.address:
+          return lizzardsDAOMetadata;
+        default:
+          return undefined;
+      }
     }
-  }, [daoAddress]);
+    return undefined;
+  }, [storeState]);
 
   return daoMetadata;
 }
diff --git a/src/metadata/lizzardsDAO/index.ts b/src/metadata/lizzardsDAO/index.ts
@@ -7,6 +7,7 @@ const LIZZARDS_DAO_METADATA: DAOMetadata = {
   logo: logo.src,
   headerBackground:
     'linear-gradient(269deg, rgba(110, 97, 240, 0.35) 3.2%, rgba(74, 163, 183, 0.35) 51.2%, rgba(101, 211, 138, 0.35) 98.2%), #000',
+  bodyBackground: 'linear-gradient(180deg, #2A2F33 0%, #101212 100%)',
   links: [
     {
       title: 'Eth Lizards White Paper',

diff --git a/src/types/daoGeneral.ts b/src/types/daoGeneral.ts
@@ -12,6 +12,7 @@ export type DAOMetadata = {
   address: string;
   logo: string;
   headerBackground: string;
+  bodyBackground?: string;
   links: {
     title: string;
     url: string;