add delegate components & logic

still need to resolve ENS names, which is a new function in #308 that we can recycle

components/dao-dashboard/members/Delegate.tsx

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

components/dao-dashboard/members/MemberProfile.tsx

@@ -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>
   )
 }
@@ -80,6 +82,7 @@ const MemberCard = ({ title, icon, info }: CardProps) => {
       minWidth="44"
       padding="6"
       backgroundColor={'backgroundSecondary'}
+      // backgroundColor={'yellow'}
       display="flex"
       alignItems={'center'}
       justifyContent="center"

pages/daos/[chainId]/[dao]/members.tsx

@@ -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,
@@ -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">
@@ -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>