From 511e57cce2a1167613b3717173559b62a662dac1 Mon Sep 17 00:00:00 2001 From: MrX-SNX Date: Wed, 18 Sep 2024 09:40:00 +0100 Subject: [PATCH] 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 --- .../e2e/Councils - Administration.e2e.js | 16 ---------- .../CouncilMembers/CouncilMembers.tsx | 29 ++++++++++++++----- .../components/CouncilTabs/CouncilTabs.tsx | 22 +++++++------- .../ui/src/components/Icons/CrownIcon.tsx | 12 ++++++++ governance/ui/src/components/Icons/index.ts | 1 + .../ui/src/components/MyVoteRow/MyVoteRow.tsx | 13 +++++---- .../src/components/MyVotesBox/MyVotesBox.tsx | 2 +- .../components/UserListItem/UserListItem.tsx | 12 ++++++-- .../ProfilePicture/ProfilePicture.tsx | 13 ++------- .../UserProfileCard/UserProfileDetails.tsx | 16 +++++----- .../UserProfileEditPreview.tsx | 7 +---- .../UserTableView/UserTableView.tsx | 14 ++------- governance/ui/src/hooks/useCountdown.tsx | 1 - .../ui/src/queries/useGetCurrentPeriod.ts | 3 -- .../ui/src/queries/useGetEpochSchedule.ts | 3 +- governance/ui/src/utils/table-border.ts | 3 ++ 16 files changed, 81 insertions(+), 86 deletions(-) create mode 100644 governance/ui/src/components/Icons/CrownIcon.tsx diff --git a/governance/cypress/cypress/e2e/Councils - Administration.e2e.js b/governance/cypress/cypress/e2e/Councils - Administration.e2e.js index b07073bc7..1819eca45 100644 --- 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 index 3bad09517..5401814cd 100644 --- a/governance/ui/src/components/CouncilMembers/CouncilMembers.tsx +++ b/governance/ui/src/components/CouncilMembers/CouncilMembers.tsx @@ -18,12 +18,12 @@ 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( @@ -31,12 +31,13 @@ export default function CouncilMembers({ activeCouncil }: { activeCouncil: Counc ); 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 ( } )} - {councilPeriod === '0' && ( - - )} + {/* {councilPeriod === '0' && ( + + )}*/} @@ -142,10 +143,11 @@ export default function CouncilMembers({ activeCouncil }: { activeCouncil: Counc sortedNominees.map((councilNominee, index) => { return ( ); } + +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 index 90549f974..724ffb5f3 100644 --- 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 || '') ? ( <> {userInformation[index]?.userInformation?.address ? newVoteCast?.toLowerCase() !== userInformation[index]?.userInformation?.address?.toLowerCase() && ( <> - + ) : null} @@ -199,7 +199,6 @@ export default function CouncilTabs({ activeCouncil }: { activeCouncil: CouncilS )} @@ -207,7 +206,8 @@ export default function CouncilTabs({ activeCouncil }: { activeCouncil: CouncilS {newVoteCast && userInformation[index].userInformation?.address && ( )} - {(newVoteCast === 'remove' || !newVoteCast) && ( + {(newVoteCast === 'remove' || + (!newVoteCast && !userInformation[index].userInformation?.address)) && ( ( + + + +); diff --git a/governance/ui/src/components/Icons/index.ts b/governance/ui/src/components/Icons/index.ts index f0e839f40..efae798b0 100644 --- 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 index bc5f805cd..2946a5f39 100644 --- 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,7 +108,7 @@ export default function MyVoteRow({ }} > - {!hasVoted && votedCandidate && voteAddressState && ( + {((!hasVoted && votedCandidate && voteAddressState) || voteAddressState === 'remove') && ( <> @@ -115,7 +116,7 @@ export default function MyVoteRow({ )} - {hasVoted ? ( + {hasVoted && voteAddressState !== 'remove' ? ( Your Vote ) : voteAddressState ? ( diff --git a/governance/ui/src/components/MyVotesBox/MyVotesBox.tsx b/governance/ui/src/components/MyVotesBox/MyVotesBox.tsx index 043bad61a..2a040fe2a 100644 --- a/governance/ui/src/components/MyVotesBox/MyVotesBox.tsx +++ b/governance/ui/src/components/MyVotesBox/MyVotesBox.tsx @@ -21,7 +21,7 @@ export default function MyVotesBox({ { 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'} ) )} diff --git a/governance/ui/src/components/UserProfileCard/ProfilePicture/ProfilePicture.tsx b/governance/ui/src/components/UserProfileCard/ProfilePicture/ProfilePicture.tsx index 453c95664..4bcea1fc1 100644 --- 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 && ( - - )} - + ); } - return null; + return ; }; diff --git a/governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx b/governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx index f3bd9081f..67dbe7e47 100644 --- 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 index 3d9e7a447..2c799aff8 100644 --- 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 index e78b9de0c..b7b8dde79 100644 --- 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({ ); } - -const CrownIcon = () => ( - - - -); diff --git a/governance/ui/src/hooks/useCountdown.tsx b/governance/ui/src/hooks/useCountdown.tsx index e9c4b3b22..8b0badabf 100644 --- 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 index 12e6d4c1f..38a337364 100644 --- 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 index b910695c8..636e7c539 100644 --- 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 index 8bbf10591..892c329ab 100644 --- 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' : '';