-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement DAO metadata - showing banner, meta links, logo in DAO dash…
…board header and additional sections
- Loading branch information
Showing
11 changed files
with
283 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { Box, Flex, Image, Menu, MenuButton, MenuList, Text } from '@chakra-ui/react'; | ||
| import { FractalBrandBurger } 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" | ||
| marginLeft="-3rem" | ||
| marginRight="-3rem" | ||
| width="calc(100% + 6rem)" | ||
| paddingTop={2} | ||
| paddingBottom={2} | ||
| flexDirection="column" | ||
| > | ||
| <Image | ||
| src={daoMetadata.logo} | ||
| alt={`${daoName} logo`} | ||
| width="60px" | ||
| height="60px" | ||
| /> | ||
| <Box marginTop={2}> | ||
| <Menu> | ||
| <MenuButton> | ||
| <Flex> | ||
| {/* TODO: Replace with regular burger icon once added to @decent-org/fractal-ui */} | ||
| <FractalBrandBurger boxSize="2rem" /> | ||
| <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" | ||
| zIndex={1000} | ||
| > | ||
| <Text | ||
| textStyle="text-sm-sans-regular" | ||
| color="chocolate.200" | ||
| marginBottom="0.5rem" | ||
| > | ||
| {t('goTo')} | ||
| </Text> | ||
| {daoMetadata.links.map(link => ( | ||
| <Box key={link.url}> | ||
| <ExternalLink href={link.url}>{link.title}</ExternalLink> | ||
| </Box> | ||
| ))} | ||
| </MenuList> | ||
| </Menu> | ||
| </Box> | ||
| </Flex> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { useMemo } from 'react'; | ||
| import lizzardsDAOMetadata from '../../metadata/lizzardsDAO'; | ||
| import { useFractal } from '../../providers/App/AppProvider'; | ||
|
|
||
| export default function useDAOMetadata() { | ||
| const { | ||
| node: { daoAddress }, | ||
| } = useFractal(); | ||
|
|
||
| const daoMetadata = useMemo(() => { | ||
| switch (daoAddress) { | ||
| case lizzardsDAOMetadata.address: | ||
| return lizzardsDAOMetadata; | ||
| default: | ||
| return undefined; | ||
| } | ||
| }, [daoAddress]); | ||
|
|
||
| return daoMetadata; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| 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: '0x27feCf4E8A4394B1daC54541414b607f88c451F1', | ||
| 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', | ||
| 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: | ||
| 'Vote here for this proposal or just click on the link to learn more about the proposal', | ||
| background: undefined, | ||
| }, | ||
| { | ||
| 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. Learn more ', | ||
| background: metaSectionBackground1.src, | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export default LIZZARDS_DAO_METADATA; |
Oops, something went wrong.