ref: removed 1 hour gap (#459)

* ref: removed 1 hour gap * fix: border calc * ref: moved crown icon * ref: merged useEffect * clear interval * fix: typings * fix: counciltabs state * ref: handled undefined * ref: undo changes to query * fix: nominate self in eval period * fix: members
Synthetixio · Sep 18, 2024 · 511e57c · 511e57c
1 parent ae4d415
commit 511e57c
Show file tree

Hide file tree

Showing 16 changed files with 81 additions and 86 deletions.
diff --git a/governance/cypress/cypress/e2e/Councils - Administration.e2e.js b/governance/cypress/cypress/e2e/Councils - Administration.e2e.js
@@ -23,22 +23,6 @@ it('Councils - Administration', () => {
     .should('have.css', 'width', '40px')
     .and('have.css', 'height', '40px');
   cy.get('[data-cy="council-information-spartan"]').should('have.css', 'gap', '8px');
-  cy.get('[data-cy="number-table-header"]').click();
-  cy.get('[data-cy="sort-arrow-up"]').should('exist');
-  cy.get('[data-cy="sort-arrow-up"]').click();
-  cy.get('[data-cy="sort-arrow-down"]').should('exist');
-  cy.get('[data-cy="name-table-header"]').click();
-  cy.get('[data-cy="sort-arrow-up"]').should('exist');
-  cy.get('[data-cy="sort-arrow-up"]').click();
-  cy.get('[data-cy="sort-arrow-down"]').should('exist');
-  cy.get('[data-cy="votes-table-header"]').click();
-  cy.get('[data-cy="sort-arrow-up"]').should('exist');
-  cy.get('[data-cy="sort-arrow-up"]').click();
-  cy.get('[data-cy="sort-arrow-down"]').should('exist');
-  cy.get('[data-cy="voting-power-table-header"]').click();
-  cy.get('[data-cy="sort-arrow-up"]').should('exist');
-  cy.get('[data-cy="sort-arrow-up"]').click();
-  cy.get('[data-cy="sort-arrow-down"]').should('exist');
   cy.viewport(400, 800);
   cy.visit('#/councils');
   cy.get('[data-cy="my-votes-summary-text"]').should('have.css', 'font-size', '14px');

diff --git a/governance/ui/src/components/CouncilMembers/CouncilMembers.tsx b/governance/ui/src/components/CouncilMembers/CouncilMembers.tsx
@@ -18,25 +18,26 @@ import { useGetCurrentPeriod } from '../../queries/useGetCurrentPeriod';
 import { useMemo, useState } from 'react';
 import { ArrowUpDownIcon } from '@chakra-ui/icons';
 import SortArrows from '../SortArrows/SortArrows';
-import { useGetCouncilMembers, useGetUserDetailsQuery } from '../../queries';
+import { useGetCouncilMembers, useGetHistoricalVotes, useGetUserDetailsQuery } from '../../queries';
 import TableLoading from '../TableLoading/TableLoading';
 import { sortUsers } from '../../utils/sort-users';
 
 export default function CouncilMembers({ activeCouncil }: { activeCouncil: CouncilSlugs }) {
-  const [sortConfig, setSortConfig] = useState<[boolean, string]>([false, 'start']);
+  const [sortConfig, setSortConfig] = useState<[boolean, string]>([true, 'votingPower']);
 
   const { data: councilMembers } = useGetCouncilMembers(activeCouncil);
   const { data: councilMemberDetails, isLoading: userDetailsLoading } = useGetUserDetailsQuery(
     councilMembers || []
   );
   const { data: councilSchedule } = useGetEpochSchedule(activeCouncil);
   const { data: councilPeriod } = useGetCurrentPeriod(activeCouncil);
+  const { data: votes } = useGetHistoricalVotes();
 
   const nextEpoch = calculateNextEpoch(councilSchedule);
 
   const sortedNominees = useMemo(() => {
-    return sortUsers(activeCouncil, '', sortConfig, councilMemberDetails);
-  }, [sortConfig, councilMemberDetails, activeCouncil]);
+    return sortUsers(activeCouncil, '', sortConfig, councilMemberDetails, votes);
+  }, [sortConfig, councilMemberDetails, activeCouncil, votes]);
 
   return (
     <Flex
@@ -129,9 +130,9 @@ export default function CouncilMembers({ activeCouncil }: { activeCouncil: Counc
                   {sortConfig[1] === 'votingPower' && <SortArrows up={sortConfig[0]} />}
                 </Th>
               )}
-              {councilPeriod === '0' && (
-                <Th userSelect="none" textTransform="capitalize" textAlign="center" px="0"></Th>
-              )}
+              {/*  {councilPeriod === '0' && (
+                 <Th userSelect="none" textTransform="capitalize" textAlign="center" px="0"></Th>
+               )}*/}
             </Tr>
           </Thead>
           <Tbody>
@@ -142,10 +143,11 @@ export default function CouncilMembers({ activeCouncil }: { activeCouncil: Counc
               sortedNominees.map((councilNominee, index) => {
                 return (
                   <UserTableView
-                    place={index}
+                    place={councilNominee.place}
                     user={councilNominee!}
                     isNomination
                     activeCouncil={activeCouncil}
+                    totalVotingPower={votes && votes[totalVotingPowerForCouncil(activeCouncil)]}
                     key={councilNominee?.address
                       .concat('council-nominees')
                       .concat(index.toString())}
@@ -159,3 +161,14 @@ export default function CouncilMembers({ activeCouncil }: { activeCouncil: Counc
     </Flex>
   );
 }
+
+function totalVotingPowerForCouncil(council: CouncilSlugs) {
+  switch (council) {
+    case 'spartan':
+      return 'totalVotingPowerSpartan';
+    case 'ambassador':
+      return 'totalVotingPowerAmbassador';
+    case 'treasury':
+      return 'totalVotingPowerTreasury';
+  }
+}
diff --git a/governance/ui/src/components/CouncilTabs/CouncilTabs.tsx b/governance/ui/src/components/CouncilTabs/CouncilTabs.tsx
@@ -172,22 +172,22 @@ export default function CouncilTabs({ activeCouncil }: { activeCouncil: CouncilS
                   {councilPeriod === '2' && utils.isAddress(newVoteCast || '') ? (
                     <>
                       <ProfilePicture
-                        address={userInformation[index].userInformation?.address}
+                        address={
+                          userInformation[index]?.userInformation?.address
+                            ? userInformation[index]?.userInformation?.address
+                            : newVoteCast
+                        }
                         size={9}
-                        newVoteCast={newVoteCast}
-                        isCouncilTabs={false}
+                        isCouncilTabs={
+                          !utils.isAddress(userInformation[index]?.userInformation?.address || '')
+                        }
                       />
                       {userInformation[index]?.userInformation?.address
                         ? newVoteCast?.toLowerCase() !==
                             userInformation[index]?.userInformation?.address?.toLowerCase() && (
                             <>
                               <ArrowForwardIcon mx="2" />
-                              <ProfilePicture
-                                address={newVoteCast}
-                                size={9}
-                                newVoteCast={newVoteCast}
-                                isCouncilTabs={true}
-                              />
+                              <ProfilePicture address={newVoteCast} size={9} isCouncilTabs={true} />
                             </>
                           )
                         : null}
@@ -199,15 +199,15 @@ export default function CouncilTabs({ activeCouncil }: { activeCouncil: CouncilS
                           <ProfilePicture
                             address={userInformation[index].userInformation?.address}
                             size={9}
-                            newVoteCast={newVoteCast}
                             isCouncilTabs={false}
                           />
                         )}
 
                         {newVoteCast && userInformation[index].userInformation?.address && (
                           <ArrowForwardIcon mx="2" />
                         )}
-                        {(newVoteCast === 'remove' || !newVoteCast) && (
+                        {(newVoteCast === 'remove' ||
+                          (!newVoteCast && !userInformation[index].userInformation?.address)) && (
                           <Box
                             data-cy="council-tab-vote-circle"
                             borderRadius="50%"

diff --git a/governance/ui/src/components/Icons/CrownIcon.tsx b/governance/ui/src/components/Icons/CrownIcon.tsx
@@ -0,0 +1,12 @@
+import { Icon } from '@chakra-ui/react';
+
+export const CrownIcon = () => (
+  <Icon width="20px" height="20px" viewBox="0 0 20 20" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.99494 5.06177L11.7901 8.25218L11.7932 8.25742C11.8613 8.37306 11.952 8.47394 12.06 8.55392C12.168 8.63391 12.2911 8.69133 12.422 8.72262C12.5528 8.75392 12.6887 8.75842 12.8214 8.73584C12.954 8.71327 13.0807 8.6641 13.1938 8.59139L13.2005 8.58708L15.7626 6.84578L15.075 12.2182H4.90652L4.22002 6.85415L6.79371 8.58436L6.80228 8.59002C6.91521 8.66327 7.04193 8.71278 7.17476 8.73541C7.30759 8.75804 7.44363 8.7533 7.57456 8.72149C7.70548 8.68968 7.82843 8.63149 7.93597 8.55061C8.04351 8.46973 8.13336 8.36786 8.20019 8.25133L9.99494 5.06177ZM3.64638 12.2186L2.90365 6.4152C2.88283 6.23071 2.91459 6.04397 2.9953 5.87661C3.07602 5.70923 3.20256 5.56789 3.36057 5.46931C3.51861 5.37071 3.70152 5.31903 3.88801 5.32053C4.0745 5.32203 4.25654 5.37666 4.41297 5.47778L4.42241 5.48388L7.2525 7.38658L9.1385 4.0348C9.22548 3.88514 9.35024 3.76068 9.50051 3.67403C9.65079 3.58736 9.82127 3.54166 9.99494 3.54166C10.1686 3.54166 10.3391 3.58736 10.4894 3.67403C10.6396 3.76068 10.7643 3.88517 10.8513 4.03483L10.8557 4.04237L12.739 7.38939L15.5464 5.48138C15.7026 5.37798 15.8851 5.321 16.0727 5.31724C16.2603 5.31347 16.4449 5.36312 16.6053 5.4602C16.7655 5.55726 16.8948 5.69766 16.9785 5.86486C17.0621 6.03204 17.0969 6.21939 17.0789 6.40531L17.0779 6.41489L16.3316 12.2466C16.3786 12.2583 16.4248 12.2735 16.4697 12.2922C16.5871 12.341 16.6936 12.4125 16.7832 12.5025C16.8727 12.5925 16.9436 12.6991 16.992 12.8163C17.0403 12.9335 17.0651 13.059 17.0651 13.1856V15.4909C17.0651 15.6176 17.0403 15.7431 16.992 15.8602C16.9436 15.9774 16.8727 16.0841 16.7832 16.174C16.6936 16.264 16.5871 16.3355 16.4697 16.3843C16.3523 16.4332 16.2264 16.4583 16.0992 16.4583H3.67447C3.41741 16.4583 3.17142 16.3557 2.99047 16.174C2.80962 15.9924 2.7085 15.7466 2.7085 15.4909V13.1856C2.7085 12.9299 2.80962 12.6841 2.99047 12.5025C3.16481 12.3274 3.39954 12.2258 3.64638 12.2186ZM15.8151 13.4682H3.9585V15.2083H15.8151V13.4682Z"
+      fill="white"
+    />
+  </Icon>
+);
diff --git a/governance/ui/src/components/Icons/index.ts b/governance/ui/src/components/Icons/index.ts
@@ -6,3 +6,4 @@ export * from './EditIcon';
 export * from './ShareIcon';
 export * from './Optimism';
 export * from './Ethereum';
+export * from './CrownIcon';
diff --git a/governance/ui/src/components/MyVoteRow/MyVoteRow.tsx b/governance/ui/src/components/MyVoteRow/MyVoteRow.tsx
@@ -35,10 +35,11 @@ export default function MyVoteRow({
   );
   const voteAddressState = typeof voteSelection === 'string' ? voteSelection : '';
 
-  const hasVoted =
-    utils.isAddress(votedCandidate) &&
-    utils.isAddress(voteAddressState) &&
-    votedCandidate.toLowerCase() === voteAddressState.toLowerCase();
+  const hasVoted = utils.isAddress(voteAddressState)
+    ? utils.isAddress(votedCandidate) &&
+      utils.isAddress(voteAddressState) &&
+      votedCandidate.toLowerCase() === voteAddressState.toLowerCase()
+    : utils.isAddress(votedCandidate);
   const isDisabled = period !== '2';
 
   const handleAddVote = (e: React.MouseEvent) => {
@@ -107,15 +108,15 @@ export default function MyVoteRow({
         }}
       >
         <CouncilUser councilSlug={councilSlug} address={votedCandidate || voteAddressState} />
-        {!hasVoted && votedCandidate && voteAddressState && (
+        {((!hasVoted && votedCandidate && voteAddressState) || voteAddressState === 'remove') && (
           <>
             <ArrowForwardIcon mx="2" />
             <CouncilUser councilSlug={councilSlug} address={voteAddressState} />
           </>
         )}
       </Flex>
 
-      {hasVoted ? (
+      {hasVoted && voteAddressState !== 'remove' ? (
         <Badge mr="2">Your Vote</Badge>
       ) : voteAddressState ? (
         <Badge color="gray" mr="2" data-cy="selected-badge-my-row">

diff --git a/governance/ui/src/components/MyVotesBox/MyVotesBox.tsx b/governance/ui/src/components/MyVotesBox/MyVotesBox.tsx
@@ -21,7 +21,7 @@ export default function MyVotesBox({
     <Fade in={true}>
       <Flex
         w="424px"
-        h="310px"
+        h="325px"
         position="absolute"
         bottom="-320px"
         right="0px"

diff --git a/governance/ui/src/components/UserListItem/UserListItem.tsx b/governance/ui/src/components/UserListItem/UserListItem.tsx
@@ -24,6 +24,7 @@ export default function UserListItem({
   const { data: councilPeriod } = useGetCurrentPeriod(activeCouncil);
   const { activeWallet } = useWallet();
   const isOwn = activeWallet?.address.toLowerCase() === user?.address.toLowerCase();
+  const isNominationOrVoting = councilPeriod === '1' || councilPeriod === '2';
 
   return (
     <Flex
@@ -110,7 +111,10 @@ export default function UserListItem({
             _hover={{}}
             onClick={(e) => {
               e.stopPropagation();
-              if (nominationInformation?.isNominated && isNominatedFetched) {
+              if (
+                (nominationInformation?.isNominated && isNominatedFetched) ||
+                !isNominationOrVoting
+              ) {
                 navigate({ pathname: `/councils/${activeCouncil}`, search: `view=${address}` });
               } else {
                 navigate({
@@ -121,7 +125,11 @@ export default function UserListItem({
             }}
             color="white"
           >
-            {nominationInformation?.isNominated ? 'View' : 'Nominate Self'}
+            {isNominationOrVoting
+              ? nominationInformation?.isNominated
+                ? 'View'
+                : 'Nominate Self'
+              : 'View'}
           </Button>
         )
       )}

diff --git a/governance/ui/src/components/UserProfileCard/ProfilePicture/ProfilePicture.tsx b/governance/ui/src/components/UserProfileCard/ProfilePicture/ProfilePicture.tsx
@@ -33,18 +33,11 @@ export const ProfilePicture = ({
         filter={isCouncilTabs ? 'grayscale(1)' : ''}
         zIndex={10}
         position="relative"
-        data-cy={`user-blockies-council-tabs-${address || newVoteCast}`}
+        data-cy={`user-blockies-council-tabs-${address}`}
       >
-        {!!newVoteCast && (
-          <Box h={size} w={size} borderRadius="100%" position="absolute" zIndex={11} />
-        )}
-        <Blockies
-          size={size}
-          seed={address?.toLowerCase() || newVoteCast?.toLowerCase() || ''}
-          className="fully-rounded"
-        />
+        <Blockies size={size} seed={address?.toLowerCase() || ''} className="fully-rounded" />
       </Box>
     );
   }
-  return null;
+  return <Box h={size} w={size} borderRadius="100%" position="absolute" zIndex={11} />;
 };
diff --git a/governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx b/governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx
@@ -81,12 +81,6 @@ export const UserProfileDetails = ({
     };
     checkOverflow();
     window.addEventListener('resize', checkOverflow);
-    return () => {
-      window.removeEventListener('resize', checkOverflow);
-    };
-  }, []);
-
-  useEffect(() => {
     const handleScroll = () => {
       if (elementRef.current) {
         const { scrollTop, scrollHeight, clientHeight } = elementRef.current;
@@ -107,6 +101,7 @@ export const UserProfileDetails = ({
       if (refCurrent) {
         refCurrent.removeEventListener('scroll', handleScroll);
       }
+      window.removeEventListener('resize', checkOverflow);
     };
   }, []);
 
@@ -343,7 +338,10 @@ export const UserProfileDetails = ({
                     dispatch({
                       type: activeCouncil.toUpperCase(),
                       payload: {
-                        action: 'remove',
+                        action:
+                          voteAddressState === 'remove'
+                            ? ballot?.votedCandidates[0].toLowerCase()
+                            : 'remove',
                         network: parsedNetwork,
                         epochId: epochId?.toString(),
                         wallet: activeWallet?.address,
@@ -353,7 +351,9 @@ export const UserProfileDetails = ({
                     dispatch({
                       type: activeCouncil.toUpperCase(),
                       payload: {
-                        action: undefined,
+                        action: ballot?.votedCandidates[0]?.toLowerCase()
+                          ? ballot?.votedCandidates[0].toLowerCase()
+                          : undefined,
                         network: parsedNetwork,
                         epochId: epochId?.toString(),
                         wallet: activeWallet?.address,

diff --git a/governance/ui/src/components/UserProfileForm/UserProfileEditPreview.tsx b/governance/ui/src/components/UserProfileForm/UserProfileEditPreview.tsx
@@ -31,12 +31,6 @@ export default function UserProfileEditPreview({
     };
     checkOverflow();
     window.addEventListener('resize', checkOverflow);
-    return () => {
-      window.removeEventListener('resize', checkOverflow);
-    };
-  }, []);
-
-  useEffect(() => {
     const handleScroll = () => {
       if (elementRef.current) {
         const { scrollTop, scrollHeight, clientHeight } = elementRef.current;
@@ -57,6 +51,7 @@ export default function UserProfileEditPreview({
       if (refCurrent) {
         refCurrent.removeEventListener('scroll', handleScroll);
       }
+      window.removeEventListener('resize', checkOverflow);
     };
   }, []);
 

diff --git a/governance/ui/src/components/UserTableView/UserTableView.tsx b/governance/ui/src/components/UserTableView/UserTableView.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Icon, Text, Td, Tr } from '@chakra-ui/react';
+import { Button, Flex, Text, Td, Tr } from '@chakra-ui/react';
 import { GetUserDetails } from '../../queries/useGetUserDetailsQuery';
 import { Badge } from '../Badge';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -10,6 +10,7 @@ import { useGetUserBallot } from '../../queries';
 import { BigNumber, utils } from 'ethers';
 import { formatNumber } from '@snx-v3/formatters';
 import { renderCorrectBorder } from '../../utils/table-border';
+import { CrownIcon } from '../Icons';
 
 export default function UserTableView({
   user,
@@ -180,14 +181,3 @@ export default function UserTableView({
     </Tr>
   );
 }
-
-const CrownIcon = () => (
-  <Icon width="20px" height="20px" viewBox="0 0 20 20" fill="none">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M9.99494 5.06177L11.7901 8.25218L11.7932 8.25742C11.8613 8.37306 11.952 8.47394 12.06 8.55392C12.168 8.63391 12.2911 8.69133 12.422 8.72262C12.5528 8.75392 12.6887 8.75842 12.8214 8.73584C12.954 8.71327 13.0807 8.6641 13.1938 8.59139L13.2005 8.58708L15.7626 6.84578L15.075 12.2182H4.90652L4.22002 6.85415L6.79371 8.58436L6.80228 8.59002C6.91521 8.66327 7.04193 8.71278 7.17476 8.73541C7.30759 8.75804 7.44363 8.7533 7.57456 8.72149C7.70548 8.68968 7.82843 8.63149 7.93597 8.55061C8.04351 8.46973 8.13336 8.36786 8.20019 8.25133L9.99494 5.06177ZM3.64638 12.2186L2.90365 6.4152C2.88283 6.23071 2.91459 6.04397 2.9953 5.87661C3.07602 5.70923 3.20256 5.56789 3.36057 5.46931C3.51861 5.37071 3.70152 5.31903 3.88801 5.32053C4.0745 5.32203 4.25654 5.37666 4.41297 5.47778L4.42241 5.48388L7.2525 7.38658L9.1385 4.0348C9.22548 3.88514 9.35024 3.76068 9.50051 3.67403C9.65079 3.58736 9.82127 3.54166 9.99494 3.54166C10.1686 3.54166 10.3391 3.58736 10.4894 3.67403C10.6396 3.76068 10.7643 3.88517 10.8513 4.03483L10.8557 4.04237L12.739 7.38939L15.5464 5.48138C15.7026 5.37798 15.8851 5.321 16.0727 5.31724C16.2603 5.31347 16.4449 5.36312 16.6053 5.4602C16.7655 5.55726 16.8948 5.69766 16.9785 5.86486C17.0621 6.03204 17.0969 6.21939 17.0789 6.40531L17.0779 6.41489L16.3316 12.2466C16.3786 12.2583 16.4248 12.2735 16.4697 12.2922C16.5871 12.341 16.6936 12.4125 16.7832 12.5025C16.8727 12.5925 16.9436 12.6991 16.992 12.8163C17.0403 12.9335 17.0651 13.059 17.0651 13.1856V15.4909C17.0651 15.6176 17.0403 15.7431 16.992 15.8602C16.9436 15.9774 16.8727 16.0841 16.7832 16.174C16.6936 16.264 16.5871 16.3355 16.4697 16.3843C16.3523 16.4332 16.2264 16.4583 16.0992 16.4583H3.67447C3.41741 16.4583 3.17142 16.3557 2.99047 16.174C2.80962 15.9924 2.7085 15.7466 2.7085 15.4909V13.1856C2.7085 12.9299 2.80962 12.6841 2.99047 12.5025C3.16481 12.3274 3.39954 12.2258 3.64638 12.2186ZM15.8151 13.4682H3.9585V15.2083H15.8151V13.4682Z"
-      fill="white"
-    />
-  </Icon>
-);
diff --git a/governance/ui/src/hooks/useCountdown.tsx b/governance/ui/src/hooks/useCountdown.tsx
@@ -34,7 +34,6 @@ const useCountdown = (id: string, timestamp: number) => {
       }));
     };
 
-    // Update immediately and then set an interval to update every minute
     updateCountdown();
     const timer = setInterval(updateCountdown, 60000);
 

diff --git a/governance/ui/src/queries/useGetCurrentPeriod.ts b/governance/ui/src/queries/useGetCurrentPeriod.ts
@@ -11,9 +11,6 @@ export function useGetCurrentPeriod(council?: CouncilSlugs) {
   return useQuery({
     queryKey: ['period', council, network?.id, schedule?.endDate],
     queryFn: async () => {
-      if (schedule?.endDate && schedule.endDate < 0) {
-        return '3';
-      }
       return (
         await getCouncilContract(council!)
           .connect(motherShipProvider(network?.id || 2192))

diff --git a/governance/ui/src/queries/useGetEpochSchedule.ts b/governance/ui/src/queries/useGetEpochSchedule.ts
@@ -17,8 +17,7 @@ export function useGetEpochSchedule(council?: CouncilSlugs) {
         startDate: Number(schedule.startDate.toString()),
         nominationPeriodStartDate: Number(schedule.nominationPeriodStartDate.toString()),
         votingPeriodStartDate: Number(schedule.votingPeriodStartDate.toString()),
-        // Todo @dev remove after "bug" is resolved
-        endDate: Number((schedule.endDate - 3600).toString()),
+        endDate: Number(schedule.endDate.toString()),
       } as
         | {
             startDate: number;

diff --git a/governance/ui/src/utils/table-border.ts b/governance/ui/src/utils/table-border.ts
@@ -18,6 +18,9 @@ export function renderCorrectBorder(
       if (period === '0') {
         return '';
       }
+      if (period === '3') {
+        return '';
+      }
       return isSelected ? '1px solid' : '';
     } else if (position === 'bottom') {
       return isSelected ? '1px solid' : '';