Skip to content

Commit

Permalink
add delegate components & logic
Browse files Browse the repository at this point in the history
still need to resolve ENS names, which is a new function in #308 that we can recycle
  • Loading branch information
audsssy committed Feb 20, 2023
1 parent 632d928 commit bef52f1
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 39 deletions.
91 changes: 91 additions & 0 deletions components/dao-dashboard/members/Delegate.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { Stack, Button, Box, Text } from '@kalidao/reality'
import { Select } from '@design/Select'
import getExplorerLink, { ExplorerType } from '@utils/getExplorerLink'
import { useRouter } from 'next/router'
import { truncateAddress } from '@utils/truncateAddress'
import { useContract, useSigner, useAccount, useContractRead } from 'wagmi'
import KALIDAO_ABI from '@abi/KaliDAO.json'
import { useState } from 'react'

export default function Delegate({ members }: any) {
const router = useRouter()
const daoAddress = router.query.dao as string
const { chainId } = router.query
const { data: signer } = useSigner()
const { address } = useAccount()

const { data: currentDelegatee } = useContractRead({
address: daoAddress as `0xstring`,
abi: KALIDAO_ABI,
functionName: 'delegates',
args: [address],
chainId: Number(chainId),
})

const kalidao = useContract({
address: daoAddress as `0xstring`,
abi: KALIDAO_ABI,
signerOrProvider: signer,
})

const [delegatee, setDelegatee] = useState<string>('')
const [status, setStatus] = useState<string>('Delegate')

const handleDelegation = async () => {
setStatus('Delegating...')
console.log(delegatee)
try {
const tx = await kalidao?.delegate(delegatee)
console.log(tx)
setStatus('Submitted!')
} catch (e) {
console.log(e)
}
}

let daoMembers = []
daoMembers.push({
value: 'select',
label: 'Select',
})
for (let i = 0; i < members.length; i++) {
daoMembers.push({
value: members[i].address,
label: members[i].address,
})
}

return (
<Stack>
<Box width={'2/3'}>
<Stack direction={'horizontal'} space={'5'} align={'flex-end'}>
<Box>
<Text>
Current Delegate:{' '}
{currentDelegatee ? (
<a
href={getExplorerLink(Number(chainId), ExplorerType.ADDRESS, currentDelegatee as string)}
target="_blank"
rel="noreferrer noopener"
>
{truncateAddress(currentDelegatee as string)}
</a>
) : (
'None'
)}
</Text>
<Box padding={'1'}></Box>
<Select
label=""
description="Is this Swap open to all or only to a select collective of addresses? Public swaps are available to anyone with an Eth address."
name="type"
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setDelegatee(e.target.value)}
options={daoMembers}
/>
</Box>
<Button onClick={handleDelegation}>{status ? status : 'Delegate'}</Button>
</Stack>
</Box>
</Stack>
)
}
79 changes: 41 additions & 38 deletions components/dao-dashboard/members/MemberProfile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,46 +23,48 @@ export default function MemberProfile({ member, proposals, votes, totalSupply }:
const { data: profile } = useQuery(['userProfile', member], () => fetcher(`/api/users/${member?.address}`))

return (
<Stack direction={'horizontal'} space={'1'} wrap>
{member && profile && (
<MemberCard
title={
profile?.handle ? (
<Stack direction={'vertical'} align="center" justify={'center'} space="1">
<Text weight="bold" size="large">
{profile?.name}
</Text>
<Tag size="small">{profile?.handle}</Tag>
</Stack>
) : (
<Text>{ensName ? ensName : truncateAddress(member?.address)}</Text>
)
}
icon={<Avatar src={profile?.picture} size="16" label="profile" />}
info={
<Stack>
<Text size="base">{profile?.bio}</Text>
<Stack direction={'horizontal'}>
<a
href={getExplorerLink(Number(chainId), ExplorerType.ADDRESS, member?.address)}
target="_blank"
rel="noreferrer"
>
<IconEth />
</a>
<Stack>
<Stack direction={'horizontal'} space={'1'} wrap>
{member && profile && (
<MemberCard
title={
profile?.handle ? (
<Stack direction={'vertical'} align="center" justify={'center'} space="1">
<Text weight="bold" size="large">
{profile?.name}
</Text>
<Tag size="small">{profile?.handle}</Tag>
</Stack>
) : (
<Text>{ensName ? ensName : truncateAddress(member?.address)}</Text>
)
}
icon={<Avatar src={profile?.picture} size="16" label="profile" />}
info={
<Stack>
<Text size="base">{profile?.bio}</Text>
<Stack direction={'horizontal'}>
<a
href={getExplorerLink(Number(chainId), ExplorerType.ADDRESS, member?.address)}
target="_blank"
rel="noreferrer"
>
<IconEth />
</a>
</Stack>
</Stack>
</Stack>
}
}
/>
)}
<MemberCard title="Proposals" icon={<IconDocumentsSolid />} info={proposals?.length} />
<MemberCard title="Votes" icon={<IconSparkles />} info={votes?.length} />
<MemberCard
title="Owns"
icon={<IconTokens />}
info={`${((Number(member?.shares) / totalSupply) * 100).toFixed(2)}%`}
/>
)}
<MemberCard title="Proposals" icon={<IconDocumentsSolid />} info={proposals?.length} />
<MemberCard title="Votes" icon={<IconSparkles />} info={votes?.length} />
<MemberCard
title="Owns"
icon={<IconTokens />}
info={`${((Number(member?.shares) / totalSupply) * 100).toFixed(2)}%`}
/>
{/* <Pie totalSupply={totalSupply} member={member} /> */}
{/* <Pie totalSupply={totalSupply} member={member} /> */}
</Stack>
</Stack>
)
}
Expand All @@ -80,6 +82,7 @@ const MemberCard = ({ title, icon, info }: CardProps) => {
minWidth="44"
padding="6"
backgroundColor={'backgroundSecondary'}
// backgroundColor={'yellow'}
display="flex"
alignItems={'center'}
justifyContent="center"
Expand Down
10 changes: 9 additions & 1 deletion pages/daos/[chainId]/[dao]/members.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { GetServerSideProps, InferGetServerSidePropsType, NextPage } from 'next'
import Layout from '@components/dao-dashboard/layout'
import { MembersList, MemberProfile } from '@components/dao-dashboard/members'
import { GRAPH_URL } from '@graph/url'
import { Box, Stack } from '@kalidao/reality'
import { Box, Heading, Stack, Divider, Text } from '@kalidao/reality'
import Delegate from '@components/dao-dashboard/members/Delegate'

const MembersPage: NextPage = ({
members,
Expand Down Expand Up @@ -31,6 +32,7 @@ const MembersPage: NextPage = ({
setMember(list[0])
}, [list])

console.log(members)
return (
<Layout title={`Members`} content="Look at the members and their analytics for the DAO.">
<Stack direction="horizontal">
Expand All @@ -42,6 +44,12 @@ const MembersPage: NextPage = ({
votes={memberVotes}
totalSupply={members?.token?.totalSupply}
/>
<Divider></Divider>
<Box padding={'6'} color="foreground">
<Heading>Delegate</Heading>
<Box padding={'2'}></Box>
<Delegate members={members.members} />
</Box>
</Box>
</Stack>
</Layout>
Expand Down

0 comments on commit bef52f1

Please sign in to comment.