diff --git a/app/daos/[daoAddress]/layout.tsx b/app/daos/[daoAddress]/layout.tsx index 4143f3ba17..afe5b2799d 100644 --- a/app/daos/[daoAddress]/layout.tsx +++ b/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 = {children}; if (process.env.NEXT_PUBLIC_TESTING_ENVIRONMENT) { - display = children; + display = childrenDisplay; } else if (!chain) { // if we're disconnected if (nodeLoading || reloadingDAO || validSafe) { diff --git a/app/daos/[daoAddress]/page.tsx b/app/daos/[daoAddress]/page.tsx index e69d2ede08..e1054d30d3 100644 --- a/app/daos/[daoAddress]/page.tsx +++ b/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 ( - - - - - + <> + + + + + + + ); } diff --git a/package-lock.json b/package-lock.json index 83773217f1..0ed0ddd62b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,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", @@ -3498,9 +3498,9 @@ } }, "node_modules/@decent-org/fractal-ui": { - "version": "0.1.21", - "resolved": "https://registry.npmjs.org/@decent-org/fractal-ui/-/fractal-ui-0.1.21.tgz", - "integrity": "sha512-F9OvB1VqyPREqocwDEfM0UasBVF5qdw4tsbaM6mHNQZDyXhWXfWF6i9bxO/wlo9GLfd9vbF9TDaAb0dLwURiLw==", + "version": "0.1.22", + "resolved": "https://registry.npmjs.org/@decent-org/fractal-ui/-/fractal-ui-0.1.22.tgz", + "integrity": "sha512-17exPAa4jXljrsXatDpB3fJC0l4XGo1nj3dxoS2H13ruJhPnOsQhH/ooDPXXUnmEC7YvFOp0gq4XNiLOMoOvDA==", "peerDependencies": { "@chakra-ui/react": "^2.3.4", "react": "^16 || ^17 || ^18", @@ -28017,9 +28017,9 @@ } }, "@decent-org/fractal-ui": { - "version": "0.1.21", - "resolved": "https://registry.npmjs.org/@decent-org/fractal-ui/-/fractal-ui-0.1.21.tgz", - "integrity": "sha512-F9OvB1VqyPREqocwDEfM0UasBVF5qdw4tsbaM6mHNQZDyXhWXfWF6i9bxO/wlo9GLfd9vbF9TDaAb0dLwURiLw==", + "version": "0.1.22", + "resolved": "https://registry.npmjs.org/@decent-org/fractal-ui/-/fractal-ui-0.1.22.tgz", + "integrity": "sha512-17exPAa4jXljrsXatDpB3fJC0l4XGo1nj3dxoS2H13ruJhPnOsQhH/ooDPXXUnmEC7YvFOp0gq4XNiLOMoOvDA==", "requires": {} }, "@emotion/babel-plugin": { diff --git a/package.json b/package.json index fdae287e81..0fb9b2888b 100644 --- a/package.json +++ b/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", diff --git a/src/components/pages/DaoDashboard/Info/InfoHeader.tsx b/src/components/pages/DaoDashboard/Info/InfoHeader.tsx new file mode 100644 index 0000000000..5efbe40fb4 --- /dev/null +++ b/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 ( + + {`${daoName} + + + + + + + {daoName} + + + + + + {t('goTo')} + + + {daoMetadata.links.map(link => ( + + + {link.title}{' '} + + + + ))} + + + + + + ); +} diff --git a/src/components/pages/DaoDashboard/Info/index.tsx b/src/components/pages/DaoDashboard/Info/index.tsx index 0ba3aca9f9..790cded3b2 100644 --- a/src/components/pages/DaoDashboard/Info/index.tsx +++ b/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() { - - - - - - - - - - - - - - - + {daoMetadata ? ( + <> + + + + + + + + + + + + + + + {daoMetadata.sections.map((section, index) => ( + + {section.background && ( + + )} + + {section.title} + + + {section.link && section.link.position === 'start' && ( + {section.link.text} + )} + {section.content} + {section.link && section.link.position === 'end' && ( + {section.link.text} + )} + + + ))} + + + ) : ( + <> + + + + + + + + + + + + + + + + + )} ); diff --git a/src/components/ui/containers/InfoBox.tsx b/src/components/ui/containers/InfoBox.tsx index 4f270cfaf7..e965e73080 100644 --- a/src/components/ui/containers/InfoBox.tsx +++ b/src/components/ui/containers/InfoBox.tsx @@ -1,21 +1,25 @@ -import { Box } from '@chakra-ui/react'; +import { Box, BoxProps } from '@chakra-ui/react'; import { useRouter } from 'next/navigation'; import { ReactNode } from 'react'; import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common'; +type InfoBoxProps = { + minHeight?: string; + minWidth?: { [key: string]: string } | string; + m?: string | number; + to?: string; + background?: string; + children: ReactNode; +} & BoxProps; + export function InfoBox({ minWidth = '100%', minHeight = '10.6rem', children, to, + background, ...rest -}: { - minHeight?: string; - minWidth?: { [key: string]: string } | string; - m?: string | number; - to?: string; - children: ReactNode; -}) { +}: InfoBoxProps) { const { push } = useRouter(); return ( { + if (storeState && storeState.node && storeState.node.daoAddress) { + switch (storeState.node.daoAddress) { + case lizzardsDAOMetadata.address: + return lizzardsDAOMetadata; + default: + return undefined; + } + } + return undefined; + }, [storeState]); + + return daoMetadata; +} diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json index a4bd181c69..d59cf73c70 100644 --- a/src/i18n/locales/en/common.json +++ b/src/i18n/locales/en/common.json @@ -101,5 +101,6 @@ "invalidChain": "Your currently connected chain is not supported.", "showMore": "Show More", "showLess": "Show Less", - "poweredBy": "Powered by" + "poweredBy": "Powered by", + "goTo": "Go to" } \ No newline at end of file diff --git a/src/metadata/lizzardsDAO/assets/logo.png b/src/metadata/lizzardsDAO/assets/logo.png new file mode 100644 index 0000000000..ee25aa1006 Binary files /dev/null and b/src/metadata/lizzardsDAO/assets/logo.png differ diff --git a/src/metadata/lizzardsDAO/assets/meta-section-background-1.png b/src/metadata/lizzardsDAO/assets/meta-section-background-1.png new file mode 100644 index 0000000000..0fb7132df4 Binary files /dev/null and b/src/metadata/lizzardsDAO/assets/meta-section-background-1.png differ diff --git a/src/metadata/lizzardsDAO/index.ts b/src/metadata/lizzardsDAO/index.ts new file mode 100644 index 0000000000..db2a286bb4 --- /dev/null +++ b/src/metadata/lizzardsDAO/index.ts @@ -0,0 +1,50 @@ +import { DAOMetadata } from '../../types'; +import logo from './assets/logo.png'; +import metaSectionBackground1 from './assets/meta-section-background-1.png'; + +const LIZZARDS_DAO_METADATA: DAOMetadata = { + address: '0x167bE4073f52aD2Aa0D6d6FeddF0F1f79a82B98e', + 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', + url: 'https://ethlizards.gitbook.io/ethlizards-white-paper/', + }, + { + title: 'Eth Lizards Docs', + url: 'https://ethlizards.io/', + }, + { + title: 'Eth Lizards on Discord', + url: 'https://discord.com/invite/ethlizards', + }, + ], + sections: [ + { + title: 'Description', + content: ' for this proposal or just click on the link to learn more about the proposal', + background: undefined, + link: { + position: 'start', + text: 'Vote here', + url: '/proposals/0xe10c44fceb1b43f74c42bd6efc9316e9ce14109ac8a166e5266fc78499cb4fea', + }, + }, + { + title: 'Elemental Lizards coming soon', + content: + 'Designed by gamers for Web3 Gamers, Guild Leaders, and Content Creators. The Elemental Lizards provide battle passes for all Ethlizards gaming experiences, customizable avatars, and exclusive community access for the Community Sub-DAO. ', + background: metaSectionBackground1.src, + link: { + position: 'end', + text: 'Learn more', + url: 'https://ethlizards.io/#lizards', + }, + }, + ], +}; + +export default LIZZARDS_DAO_METADATA; diff --git a/src/providers/App/governance/reducer.ts b/src/providers/App/governance/reducer.ts index 55b655267b..47a8d9db05 100644 --- a/src/providers/App/governance/reducer.ts +++ b/src/providers/App/governance/reducer.ts @@ -68,7 +68,7 @@ export const governanceReducer = (state: FractalGovernance, action: FractalGover }; case FractalGovernanceAction.UPDATE_NEW_AZORIUS_ERC20_VOTE: { const { proposalId, voter, support, votesSummary, weight } = action.payload; - const updatedProposals = (proposals as AzoriusProposal[]).map(proposal => { + const updatedProposals = ((proposals || []) as AzoriusProposal[]).map(proposal => { if (proposal.proposalId === proposalId) { const foundVote = proposal.votes.find(vote => vote.voter === voter); const newProposal: AzoriusProposal = { @@ -86,7 +86,7 @@ export const governanceReducer = (state: FractalGovernance, action: FractalGover } case FractalGovernanceAction.UPDATE_NEW_AZORIUS_ERC721_VOTE: { const { proposalId, voter, support, votesSummary, tokenAddresses, tokenIds } = action.payload; - const updatedProposals = (proposals as AzoriusProposal[]).map(proposal => { + const updatedProposals = ((proposals || []) as AzoriusProposal[]).map(proposal => { if (proposal.proposalId === proposalId) { const foundVote = proposal.votes.find(vote => vote.voter === voter); const newProposal: AzoriusProposal = { @@ -110,7 +110,7 @@ export const governanceReducer = (state: FractalGovernance, action: FractalGover if (!proposals) { return state; } - const updatedProposals = (proposals as AzoriusProposal[]).map(proposal => { + const updatedProposals = ((proposals || []) as AzoriusProposal[]).map(proposal => { if (proposal.proposalId === proposalId) { const newProposal: AzoriusProposal = { ...proposal, diff --git a/src/types/daoGeneral.ts b/src/types/daoGeneral.ts index 80ae43c45d..e0ea2b0577 100644 --- a/src/types/daoGeneral.ts +++ b/src/types/daoGeneral.ts @@ -8,6 +8,27 @@ export type DAOData = { freezeGuard: FreezeGuard; }; +export type DAOMetadata = { + address: string; + logo: string; + headerBackground: string; + bodyBackground?: string; + links: { + title: string; + url: string; + }[]; + sections: { + title: string; + content: string; + background?: string; + link?: { + url: string; + text: string; + position: 'start' | 'end'; + }; + }[]; +}; + export enum DAOState { freezeInit = 'stateFreezeInit', frozen = 'stateFrozen',