Merge pull request #168 from ourzora/display-founders-allocation

Add founders allocation to about page

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,

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,19 +11,22 @@ 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'
 
 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 = () => {
       >
         <ExternalLinks links={{ website: parsedContractURI?.external_url }} />
       </Box>
+
+      {typeof founders !== 'undefined' && founders.length > 0 ? (
+        <>
+          <Text variant="heading-xs" mt="x16" style={{ fontWeight: 800 }}>
+            Founders
+          </Text>
+          <Grid columns={isMobile ? 1 : 2} mt="x6" gap="x4">
+            {founders.map((founder) => (
+              <Founder {...founder} />
+            ))}
+          </Grid>
+        </>
+      ) : null}
     </Box>
   )
 }

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<FounderProps> = ({ 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 (
+    <Flex
+      direction={'row'}
+      align={'center'}
+      justify={'space-between'}
+      w={'100%'}
+      borderStyle="solid"
+      borderColor="border"
+      borderWidth="normal"
+      borderRadius="curved"
+      p="x4"
+      px="x6"
+    >
+      <Flex direction={'row'} align={'center'}>
+        <Avatar address={wallet} src={ensAvatar} size={'40'} />
+        <Flex direction={'column'} ml={'x2'}>
+          <Text
+            as="a"
+            target="_blank"
+            rel="noreferrer noopener"
+            href={`${ETHERSCAN_BASE_URL}/address/${wallet}`}
+            fontWeight={'display'}
+          >
+            {displayName}
+          </Text>
+        </Flex>
+      </Flex>
+      <Flex align={'center'} justify="center">
+        <Text fontWeight={'display'} mr="x2">
+          {ownershipPct}%
+        </Text>
+        <Box
+          cursor="pointer"
+          style={{ zIndex: 102 }}
+          onMouseOver={() => setShowTooltip(true)}
+          onMouseLeave={() => setShowTooltip(false)}
+        >
+          <Icon id="info-16" size="sm" />
+        </Box>
+        <PopUp open={showTooltip} trigger={<></>}>
+          <Box>{`In effect until ${vestDate}`}</Box>
+        </PopUp>
+      </Flex>
+    </Flex>
+  )
+}