diff --git a/apps/web/src/components/Icon/assets/info-16.svg b/apps/web/src/components/Icon/assets/info-16.svg new file mode 100644 index 000000000..743c277a2 --- /dev/null +++ b/apps/web/src/components/Icon/assets/info-16.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/apps/web/src/components/Icon/icons.ts b/apps/web/src/components/Icon/icons.ts index f82ce104b..26d8ddb1d 100644 --- a/apps/web/src/components/Icon/icons.ts +++ b/apps/web/src/components/Icon/icons.ts @@ -22,6 +22,7 @@ import External from './assets/external-16.svg' import Github from './assets/github.svg' import Globe from './assets/globe.svg' import HandlebarCircle from './assets/handlebar-circle.svg' +import Info16 from './assets/info-16.svg' import Move from './assets/move.svg' import NewWindow from './assets/new-window.svg' import NounsConnect from './assets/nouns-connect.svg' @@ -56,6 +57,7 @@ export const icons = { github: Github, eth: Eth, handlebarCircle: HandlebarCircle, + 'info-16': Info16, globe: Globe, move: Move, newWindow: NewWindow, diff --git a/apps/web/src/modules/dao/components/About/About.tsx b/apps/web/src/modules/dao/components/About/About.tsx index 400af4c41..ae29a2c9c 100644 --- a/apps/web/src/modules/dao/components/About/About.tsx +++ b/apps/web/src/modules/dao/components/About/About.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Text } from '@zoralabs/zord' +import { Box, Flex, Grid, Text } from '@zoralabs/zord' import HtmlReactParser from 'html-react-parser' import { getFetchableUrl } from 'ipfs-service' import Image from 'next/legacy/image' @@ -11,6 +11,7 @@ import { CHAIN } from 'src/constants/network' import SWR_KEYS from 'src/constants/swrKeys' import { metadataAbi, tokenAbi } from 'src/data/contract/abis' import { sdk } from 'src/data/graphql/client' +import { useLayoutStore } from 'src/stores' import { about, daoDescription, daoInfo, daoName } from 'src/styles/About.css' import { unpackOptionalArray } from 'src/utils/helpers' import { formatCryptoVal } from 'src/utils/numbers' @@ -18,12 +19,14 @@ import { formatCryptoVal } from 'src/utils/numbers' import { useDaoStore } from '../../stores' import { parseContractURI } from '../../utils' import { ExternalLinks } from './ExternalLinks' +import { Founder } from './Founder' import { Statistic } from './Statistic' export const About: React.FC = () => { const { addresses: { token, treasury, metadata }, } = useDaoStore() + const { isMobile } = useLayoutStore() const tokenContractParams = { abi: tokenAbi, @@ -38,16 +41,15 @@ export const About: React.FC = () => { contracts: [ { ...tokenContractParams, functionName: 'name' }, { ...tokenContractParams, functionName: 'totalSupply' }, + { ...tokenContractParams, functionName: 'getFounders' }, { ...metadataContractParams, functionName: 'contractImage' }, { ...metadataContractParams, functionName: 'description' }, { ...metadataContractParams, functionName: 'contractURI' }, ], }) - const [name, totalSupply, daoImage, description, contractURI] = unpackOptionalArray( - contractData, - 5 - ) + const [name, totalSupply, founders, daoImage, description, contractURI] = + unpackOptionalArray(contractData, 6) const parsedContractURI = parseContractURI(contractURI) const { data: balance } = useBalance({ address: treasury as Address }) @@ -133,6 +135,19 @@ export const About: React.FC = () => { > + + {typeof founders !== 'undefined' && founders.length > 0 ? ( + <> + + Founders + + + {founders.map((founder) => ( + + ))} + + + ) : null} ) } diff --git a/apps/web/src/modules/dao/components/About/Founder.tsx b/apps/web/src/modules/dao/components/About/Founder.tsx new file mode 100644 index 000000000..2f2dc36e0 --- /dev/null +++ b/apps/web/src/modules/dao/components/About/Founder.tsx @@ -0,0 +1,69 @@ +import { Box, Flex, PopUp, Text } from '@zoralabs/zord' +import { useState } from 'react' + +import { Avatar } from 'src/components/Avatar' +import { Icon } from 'src/components/Icon' +import { ETHERSCAN_BASE_URL } from 'src/constants/etherscan' +import { useEnsData } from 'src/hooks' +import { AddressType } from 'src/typings' + +interface FounderProps { + wallet: AddressType + ownershipPct: number + vestExpiry: number +} + +export const Founder: React.FC = ({ wallet, ownershipPct, vestExpiry }) => { + const [showTooltip, setShowTooltip] = useState(false) + const { displayName, ensAvatar } = useEnsData(wallet as string) + const vestDate = new Date(vestExpiry * 1000).toLocaleDateString(undefined, { + year: 'numeric', + month: 'short', + day: 'numeric', + }) + return ( + + + + + + {displayName} + + + + + + {ownershipPct}% + + setShowTooltip(true)} + onMouseLeave={() => setShowTooltip(false)} + > + + + }> + {`In effect until ${vestDate}`} + + + + ) +}