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}`}
+
+
+
+ )
+}