DAO metadata

app/daos/[daoAddress]/layout.tsx

@@ -1,13 +1,15 @@
 'use client';
 
-import { Button, Center, Text, VStack } from '@chakra-ui/react';
+import { Button, Center, Text, VStack, ChakraProvider, extendTheme } from '@chakra-ui/react';
+import { theme } from '@decent-org/fractal-ui';
 import { useRouter } from 'next/navigation';
-import { ReactNode } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNetwork } from 'wagmi';
 import ClientOnly from '../../../src/components/ui/utils/ClientOnly';
 import { APP_NAME } from '../../../src/constants/common';
 import useDAOController from '../../../src/hooks/DAO/useDAOController';
+import useDAOMetadata from '../../../src/hooks/DAO/useDAOMetadata';
 import { useFractal } from '../../../src/providers/App/AppProvider';
 import {
   disconnectedChain,
@@ -71,13 +73,37 @@ export default function DaoPageLayout({
 }) {
   const { node } = useFractal();
   const { nodeLoading, reloadingDAO } = useDAOController({ daoAddress });
+  const daoMetadata = useDAOMetadata();
   const { chain } = useNetwork();
+  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: 'none',
+            },
+          },
+        },
+      });
+    }
+    return theme;
+  }, [daoMetadata]);
 
   const validSafe = node.safe;
   let display;
+  const childrenDisplay = <ChakraProvider theme={activeTheme}>{children}</ChakraProvider>;
 
   if (process.env.NEXT_PUBLIC_TESTING_ENVIRONMENT) {
-    display = children;
+    display = childrenDisplay;
   } else if (!chain) {
     // if we're disconnected
     if (nodeLoading || reloadingDAO || validSafe) {

app/daos/[daoAddress]/page.tsx

@@ -3,14 +3,21 @@
 import { Activities } from '../../../src/components/pages/DaoDashboard/Activities';
 import { ERCO20Claim } from '../../../src/components/pages/DaoDashboard/ERC20Claim';
 import { Info } from '../../../src/components/pages/DaoDashboard/Info';
+import InfoHeader from '../../../src/components/pages/DaoDashboard/Info/InfoHeader';
 import ClientOnly from '../../../src/components/ui/utils/ClientOnly';
+import useDAOMetadata from '../../../src/hooks/DAO/useDAOMetadata';
 
 export default function DaoDashboardPage() {
+  const daoMetadata = useDAOMetadata();
+
   return (
-    <ClientOnly mt={12}>
-      <Info />
-      <ERCO20Claim />
-      <Activities />
-    </ClientOnly>
+    <>
+      <InfoHeader />
+      <ClientOnly mt={!!daoMetadata ? 40 : 12}>
+        <Info />
+        <ERCO20Claim />
+        <Activities />
+      </ClientOnly>
+    </>
   );
 }

package.json

@@ -6,7 +6,7 @@
     "@apollo/client": "^3.7.10",
     "@chakra-ui/next-js": "^2.0.1",
     "@chakra-ui/react": "^2.5.2",
-    "@decent-org/fractal-ui": "^0.1.21",
+    "@decent-org/fractal-ui": "^0.1.22",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@ethersproject/abstract-signer": "^5.7.0",

src/components/pages/DaoDashboard/Info/InfoHeader.tsx

@@ -0,0 +1,90 @@
+import { Box, Flex, Image, Menu, MenuButton, MenuList, Text } from '@chakra-ui/react';
+import { ArrowAngleUp, Burger } from '@decent-org/fractal-ui';
+import { useTranslation } from 'react-i18next';
+import useDAOMetadata from '../../../../hooks/DAO/useDAOMetadata';
+import { useFractal } from '../../../../providers/App/AppProvider';
+import ExternalLink from '../../../ui/links/ExternalLink';
+
+export default function InfoHeader() {
+  const {
+    node: { daoName },
+  } = useFractal();
+  const daoMetadata = useDAOMetadata();
+  const { t } = useTranslation();
+
+  if (!daoMetadata) {
+    return null;
+  }
+
+  return (
+    <Flex
+      bg={daoMetadata.headerBackground}
+      justifyContent="center"
+      alignItems="center"
+      position="absolute"
+      left="4.25rem"
+      width="calc(100vw - 4.25rem)"
+      paddingTop={2}
+      paddingBottom={2}
+      flexDirection="column"
+    >
+      <Image
+        src={daoMetadata.logo}
+        alt={`${daoName} logo`}
+        width="60px"
+        height="60px"
+      />
+      <Box marginTop={2}>
+        <Menu>
+          <MenuButton>
+            <Flex alignItems="center">
+              <Burger boxSize="1.5rem" />
+              <Text
+                textStyle="text-lg-mono-regular"
+                ml={4}
+              >
+                {daoName}
+              </Text>
+            </Flex>
+          </MenuButton>
+          <MenuList
+            rounded="lg"
+            shadow="menu-gold"
+            mr={['auto', '1rem']}
+            bg="grayscale.black"
+            border="none"
+            padding="1rem 1.5rem"
+            zIndex={1000}
+          >
+            <Text
+              textStyle="text-sm-sans-regular"
+              color="chocolate.200"
+              marginBottom="0.5rem"
+            >
+              {t('goTo')}
+            </Text>
+            <Flex
+              gap={4}
+              flexDirection="column"
+            >
+              {daoMetadata.links.map(link => (
+                <Box key={link.url}>
+                  <ExternalLink
+                    href={link.url}
+                    color="grayscale.100"
+                  >
+                    {link.title}{' '}
+                    <ArrowAngleUp
+                      boxSize="1.5rem"
+                      fill="currentColor"
+                    />
+                  </ExternalLink>
+                </Box>
+              ))}
+            </Flex>
+          </MenuList>
+        </Menu>
+      </Box>
+    </Flex>
+  );
+}

src/components/pages/DaoDashboard/Info/index.tsx

@@ -1,9 +1,11 @@
 'use client';
 
-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import { DAO_ROUTES } from '../../../../constants/routes';
+import useDAOMetadata from '../../../../hooks/DAO/useDAOMetadata';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { InfoBox } from '../../../ui/containers/InfoBox';
+import ExternalLink from '../../../ui/links/ExternalLink';
 import { InfoDAO } from './InfoDAO';
 import { InfoGovernance } from './InfoGovernance';
 import { InfoProposals } from './InfoProposals';
@@ -14,6 +16,7 @@ export function Info() {
   const {
     node: { daoAddress },
   } = useFractal();
+  const daoMetadata = useDAOMetadata();
 
   // using this gap method instead of 'gap' to make width percentages more precise, since they
   // can now add up to 100%, as well as prevent variable gap space as you widen the screen
@@ -40,37 +43,115 @@ export function Info() {
             <InfoDAO />
           </InfoBox>
         </Box>
-        <Box
-          width={{ base: '100%', md: '33.3%', lg: '25%', xl: '20%' }}
-          ps={{ base: NONE, lg: PAD }}
-          pe={{ base: NONE, md: PAD }}
-          pb={{ sm: PAD, md: NONE }}
-          pt={{ sm: PAD, lg: NONE }}
-        >
-          <InfoBox>
-            <InfoGovernance />
-          </InfoBox>
-        </Box>
-        <Box
-          width={{ base: '100%', md: '33.3%', lg: '19%', xl: '20%' }}
-          ps={{ base: NONE, md: PAD }}
-          pe={{ base: NONE, md: PAD }}
-          pb={{ sm: PAD, md: NONE }}
-          pt={{ sm: PAD, lg: NONE }}
-        >
-          <InfoBox to={DAO_ROUTES.proposals.relative(daoAddress)}>
-            <InfoProposals />
-          </InfoBox>
-        </Box>
-        <Box
-          width={{ base: '100%', md: '33.3%', lg: '23%', xl: '20%' }}
-          ps={{ base: NONE, md: PAD }}
-          pt={{ sm: PAD, lg: NONE }}
-        >
-          <InfoBox to={DAO_ROUTES.treasury.relative(daoAddress)}>
-            <InfoTreasury />
-          </InfoBox>
-        </Box>
+        {daoMetadata ? (
+          <>
+            <Box
+              width={{ base: '100%', md: '100%', lg: '67%', xl: '60%' }}
+              ps={{ base: NONE, lg: PAD }}
+              pe={{ base: NONE, md: PAD }}
+              pb={{ sm: PAD, md: NONE }}
+              pt={{ sm: PAD, lg: NONE }}
+            >
+              <InfoBox
+                display="flex"
+                justifyContent="space-between"
+              >
+                <Box width="25%">
+                  <InfoGovernance />
+                </Box>
+                <Box width="25%">
+                  <InfoProposals />
+                </Box>
+                <Box width="25%">
+                  <InfoTreasury />
+                </Box>
+              </InfoBox>
+            </Box>
+            <Flex
+              gap={6}
+              mt={8}
+              pe={{ base: NONE, md: PAD }}
+              pb={{ sm: PAD, md: NONE }}
+              pt={{ sm: PAD, lg: NONE }}
+            >
+              {daoMetadata.sections.map((section, index) => (
+                <InfoBox
+                  overflow="hidden"
+                  position="relative"
+                  minWidth="auto"
+                  width="50%"
+                  p="1.5rem"
+                  key={index}
+                >
+                  {section.background && (
+                    <Box
+                      left="0"
+                      top="-150%"
+                      width="47.2vw"
+                      height="47.2vw"
+                      position="absolute"
+                      zIndex="-1"
+                      background={`url(${section.background})`}
+                      backgroundSize="cover"
+                      backgroundRepeat="no-repeat"
+                      backgroundColor="lightgray"
+                      backgroundPosition="50%"
+                    />
+                  )}
+                  <Text
+                    textStyle="text-lg-mono-regular"
+                    marginBottom={2}
+                  >
+                    {section.title}
+                  </Text>
+                  <Text textStyle="text-base-mono-regular">
+                    {section.link && section.link.position === 'start' && (
+                      <ExternalLink href={section.link.url}>{section.link.text}</ExternalLink>
+                    )}
+                    {section.content}
+                    {section.link && section.link.position === 'end' && (
+                      <ExternalLink href={section.link.url}>{section.link.text}</ExternalLink>
+                    )}
+                  </Text>
+                </InfoBox>
+              ))}
+            </Flex>
+          </>
+        ) : (
+          <>
+            <Box
+              width={{ base: '100%', md: '33.3%', lg: '25%', xl: '20%' }}
+              ps={{ base: NONE, lg: PAD }}
+              pe={{ base: NONE, md: PAD }}
+              pb={{ sm: PAD, md: NONE }}
+              pt={{ sm: PAD, lg: NONE }}
+            >
+              <InfoBox>
+                <InfoGovernance />
+              </InfoBox>
+            </Box>
+            <Box
+              width={{ base: '100%', md: '33.3%', lg: '19%', xl: '20%' }}
+              ps={{ base: NONE, md: PAD }}
+              pe={{ base: NONE, md: PAD }}
+              pb={{ sm: PAD, md: NONE }}
+              pt={{ sm: PAD, lg: NONE }}
+            >
+              <InfoBox to={DAO_ROUTES.proposals.relative(daoAddress)}>
+                <InfoProposals />
+              </InfoBox>
+            </Box>
+            <Box
+              width={{ base: '100%', md: '33.3%', lg: '23%', xl: '20%' }}
+              ps={{ base: NONE, md: PAD }}
+              pt={{ sm: PAD, lg: NONE }}
+            >
+              <InfoBox to={DAO_ROUTES.treasury.relative(daoAddress)}>
+                <InfoTreasury />
+              </InfoBox>
+            </Box>
+          </>
+        )}
       </Flex>
     </Flex>
   );