Merge pull request #384 from jordanlesich/needsVote

Needs vote

apps/web/src/data/subgraph/queries/dashboardQuery.graphql

@@ -18,6 +18,9 @@ query dashboard($where: DAOTokenOwner_filter, $first: Int, $skip: Int) {
         voteEnd
         voteStart
         expiresAt
+        votes {
+          voter
+        }
       }
       currentAuction {
         ...CurrentAuction

apps/web/src/data/subgraph/sdk.generated.ts

@@ -2092,6 +2092,7 @@ export type DashboardQuery = {
         values: Array<any>
         snapshotBlockNumber: any
         transactionHash: any
+        votes: Array<{ __typename?: 'ProposalVote'; voter: any }>
         dao: { __typename?: 'DAO'; governorAddress: any; tokenAddress: any }
       }>
       currentAuction?: {
@@ -2230,6 +2231,24 @@ export type ProposalOgMetadataQuery = {
   }>
 }
 
+export type ProposalVotesQueryVariables = Exact<{
+  proposalId: Scalars['ID']
+}>
+
+export type ProposalVotesQuery = {
+  __typename?: 'Query'
+  proposal?: {
+    __typename?: 'Proposal'
+    votes: Array<{
+      __typename?: 'ProposalVote'
+      voter: any
+      support: ProposalVoteSupport
+      weight: number
+      reason?: string | null
+    }>
+  } | null
+}
+
 export type ProposalsQueryVariables = Exact<{
   where?: InputMaybe<Proposal_Filter>
   first: Scalars['Int']
@@ -2568,6 +2587,9 @@ export const DashboardDocument = gql`
           voteEnd
           voteStart
           expiresAt
+          votes {
+            voter
+          }
         }
         currentAuction {
           ...CurrentAuction
@@ -2646,6 +2668,16 @@ export const ProposalOgMetadataDocument = gql`
   ${ProposalFragmentDoc}
   ${ProposalVoteFragmentDoc}
 `
+export const ProposalVotesDocument = gql`
+  query proposalVotes($proposalId: ID!) {
+    proposal(id: $proposalId) {
+      votes {
+        ...ProposalVote
+      }
+    }
+  }
+  ${ProposalVoteFragmentDoc}
+`
 export const ProposalsDocument = gql`
   query proposals($where: Proposal_filter, $first: Int!, $skip: Int) {
     proposals(
@@ -2906,6 +2938,20 @@ export function getSdk(
         'query'
       )
     },
+    proposalVotes(
+      variables: ProposalVotesQueryVariables,
+      requestHeaders?: Dom.RequestInit['headers']
+    ): Promise<ProposalVotesQuery> {
+      return withWrapper(
+        (wrappedRequestHeaders) =>
+          client.request<ProposalVotesQuery>(ProposalVotesDocument, variables, {
+            ...requestHeaders,
+            ...wrappedRequestHeaders,
+          }),
+        'proposalVotes',
+        'query'
+      )
+    },
     proposals(
       variables: ProposalsQueryVariables,
       requestHeaders?: Dom.RequestInit['headers']

apps/web/src/modules/dashboard/DaoProposalCard.tsx

@@ -1,6 +1,8 @@
-import { Flex, Text } from '@zoralabs/zord'
+import { Box, Flex, PopUp, Text } from '@zoralabs/zord'
 import Link from 'next/link'
+import { useMemo, useState } from 'react'
 
+import { Icon } from 'src/components/Icon'
 import { ProposalState } from 'src/data/contract/requests/getProposalState'
 import { ProposalFragment } from 'src/data/subgraph/sdk.generated'
 import { AddressType, CHAIN_ID } from 'src/typings'
@@ -12,18 +14,25 @@ type DaoProposalCardProps = ProposalFragment & {
   tokenAddress: AddressType
   proposalState: ProposalState
   currentChainSlug?: string
+  userAddress?: AddressType
+  votes: {
+    voter: string
+  }[]
 }
 
 export const DaoProposalCard = ({
   title,
   proposalNumber,
   tokenAddress,
-  chainId,
   proposalState,
   voteEnd,
   voteStart,
   expiresAt,
   currentChainSlug,
+  userAddress,
+  chainId,
+  proposalId,
+  votes,
 }: DaoProposalCardProps) => {
   return (
     <Link
@@ -42,6 +51,7 @@ export const DaoProposalCard = ({
         cursor={'pointer'}
         py={{ '@initial': 'x3', '@768': 'x6' }}
         px={{ '@initial': 'x6', '@768': 'x3' }}
+        position={'relative'}
       >
         <Text
           fontSize={18}
@@ -52,15 +62,16 @@ export const DaoProposalCard = ({
         >
           {proposalNumber}
         </Text>
-
-        <Text
-          fontSize={18}
-          fontWeight="label"
-          mr={'auto'}
-          mb={{ '@initial': 'x2', '@768': 'x0' }}
-        >
-          {title}
-        </Text>
+        <Flex mr={'auto'} align="center" mb={{ '@initial': 'x2', '@768': 'x0' }}>
+          <Text fontSize={18} fontWeight="label" mr="x2">
+            {title}
+          </Text>
+          <NeedsVote
+            userAddress={userAddress}
+            proposalState={proposalState}
+            votes={votes}
+          />
+        </Flex>
         <Flex
           justify={'space-between'}
           width={{ '@initial': '100%', '@768': 'unset' }}
@@ -85,3 +96,44 @@ export const DaoProposalCard = ({
     </Link>
   )
 }
+
+type NeedsVoteProps = {
+  userAddress?: AddressType
+  proposalState: ProposalState
+  votes: { voter: string }[]
+}
+const NeedsVote = ({ userAddress, proposalState, votes }: NeedsVoteProps) => {
+  const [showTooltip, setShowTooltip] = useState(false)
+
+  const hasVoted = useMemo(() => {
+    if (proposalState !== ProposalState.Active) return undefined
+
+    return votes.some((vote) => vote.voter === userAddress?.toLowerCase())
+  }, [proposalState, votes, userAddress])
+
+  if (hasVoted == null) return null
+
+  return (
+    <Flex>
+      <Box
+        cursor="pointer"
+        style={{ zIndex: 102 }}
+        onMouseOver={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+      >
+        <Icon
+          id={hasVoted ? 'checkInCircle' : 'warning-16'}
+          fill={hasVoted ? 'positive' : 'warning'}
+          style={{
+            transform: hasVoted ? 'scale(0.8)' : 'scale(1)',
+          }}
+          size={hasVoted ? 'md' : 'sm'}
+        />
+      </Box>
+
+      <PopUp open={showTooltip} trigger={<></>} placement="right">
+        <Text>{hasVoted ? 'Vote Submitted' : 'Vote Needed'}</Text>
+      </PopUp>
+    </Flex>
+  )
+}

apps/web/src/modules/dashboard/DaoProposals.tsx

@@ -7,6 +7,7 @@ import React from 'react'
 
 import { Avatar } from 'src/components/Avatar'
 import { PUBLIC_ALL_CHAINS } from 'src/constants/defaultChains'
+import { AddressType } from 'src/typings'
 
 import { DaoProposalCard } from './DaoProposalCard'
 import { DashboardDaoProps } from './Dashboard'
@@ -18,7 +19,8 @@ export const DaoProposals = ({
   name,
   proposals,
   chainId,
-}: DashboardDaoProps) => {
+  userAddress,
+}: DashboardDaoProps & { userAddress?: AddressType }) => {
   const daoImageSrc = React.useMemo(() => {
     return daoImage ? getFetchableUrl(daoImage) : null
   }, [daoImage])
@@ -75,6 +77,7 @@ export const DaoProposals = ({
             currentChainSlug={currentChainSlug}
             tokenAddress={tokenAddress}
             proposalState={proposal.proposalState}
+            userAddress={userAddress}
           />
         ))}
       </Box>

apps/web/src/modules/dashboard/Dashboard.tsx

@@ -15,7 +15,7 @@ import {
   DaoFragment,
   ProposalFragment,
 } from 'src/data/subgraph/sdk.generated'
-import { CHAIN_ID } from 'src/typings'
+import { AddressType, CHAIN_ID } from 'src/typings'
 
 import { DaoFeed } from '../dao'
 import { DaoAuctionCard } from './DaoAuctionCard'
@@ -37,7 +37,12 @@ export type DashboardDaoProps = DaoFragment & {
     minimumBidIncrement: string
     reservePrice: string
   }
-  proposals: (ProposalFragment & { proposalState: ProposalState })[]
+  proposals: (ProposalFragment & {
+    proposalState: ProposalState
+    votes: {
+      voter: string
+    }[]
+  })[]
   currentAuction?: CurrentAuctionFragment | null
 }
 
@@ -111,8 +116,14 @@ const Dashboard = () => {
 
     return data
       .filter((dao) => dao.proposals.length)
-      .map((dao) => <DaoProposals key={dao.tokenAddress} {...dao} />)
-  }, [data])
+      .map((dao) => (
+        <DaoProposals
+          key={dao.tokenAddress}
+          {...dao}
+          userAddress={address as AddressType}
+        />
+      ))
+  }, [data, address])
 
   if (error) {
     return (