Fix voting power row (#443)

* fix: parsing number

* fix: vote row component

* fix: row

* ref: remove error in toast

* fix: overflow

* fix: crashing site

* fix: sorting

* fix: my vote row

* fix

* ci: fix

* remove consolelog

governance/cypress/cypress/e2e/Councils - Voting.e2e.js

@@ -34,10 +34,7 @@ it('Councils - Administration', () => {
   cy.get(
     '[data-cy="user-blockies-council-tabs-0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"]'
   ).should('exist');
-  cy.reload();
-  cy.get(
-    '[data-cy="user-blockies-council-tabs-0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"]'
-  ).should('exist');
+
   cy.get('[data-cy="selected-badge-my-row"]').should('exist');
   cy.wait(3000);
   cy.get('[data-cy="my-votes-voting-power"]').contains('30.00');

governance/ui/src/components/CouncilNominees/CouncilNominees.tsx

@@ -49,7 +49,8 @@ export default function CouncilNominees({ activeCouncil }: { activeCouncil: Coun
   const { state } = useVoteContext();
   const currentSelectedUser = getVoteSelectionState(
     state,
-    epochId,
+    activeWallet?.address,
+    epochId?.toString(),
     network?.id.toString(),
     activeCouncil
   );

governance/ui/src/components/CouncilTabs/CouncilTabs.tsx

@@ -11,6 +11,7 @@ import {
   useGetUserBallot,
   useNetwork,
   useGetEpochIndex,
+  useWallet,
 } from '../../queries';
 import { ProfilePicture } from '../UserProfileCard/ProfilePicture';
 import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
@@ -21,14 +22,20 @@ import { getVoteSelectionState } from '../../utils/localstorage';
 export default function CouncilTabs({ activeCouncil }: { activeCouncil: CouncilSlugs }) {
   const { data: councilPeriod } = useGetCurrentPeriod(activeCouncil);
   const location = useLocation();
+  const { activeWallet } = useWallet();
   const isInMyVotesPage = location.pathname.includes('my-votes');
   const isInMyProfilePage = location.pathname.includes('profile');
   const { data: schedule, isLoading } = useGetEpochSchedule(activeCouncil);
   const { network } = useNetwork();
   const { data: epochId } = useGetEpochIndex(activeCouncil);
   const { state } = useVoteContext();
   // @dev dont put activeCounil in here cause its always spartan for the timer
-  const networkForState = getVoteSelectionState(state, epochId, network?.id.toString());
+  const networkForState = getVoteSelectionState(
+    state,
+    activeWallet?.address,
+    epochId?.toString(),
+    network?.id.toString()
+  );
 
   const votedNomineesData = [
     useGetUserBallot('spartan'),
@@ -88,7 +95,6 @@ export default function CouncilTabs({ activeCouncil }: { activeCouncil: CouncilS
               Back to Councils
             </Button>
           ) : (
-            // If on my votes page, spartan council is active by default for navigation
             <>
               <CouncilsSelect activeCouncil={activeCouncil || councils[0].slug} />
               <MyVotesSummary
@@ -164,12 +170,28 @@ export default function CouncilTabs({ activeCouncil }: { activeCouncil: CouncilS
                     {council.title}
                   </Text>
                   {councilPeriod === '2' && utils.isAddress(newVoteCast || '') ? (
-                    <ProfilePicture
-                      address={userInformation[index].userInformation?.address}
-                      size={9}
-                      newVoteCast={newVoteCast}
-                      isCouncilTabs={true}
-                    />
+                    <>
+                      <ProfilePicture
+                        address={userInformation[index].userInformation?.address}
+                        size={9}
+                        newVoteCast={newVoteCast}
+                        isCouncilTabs
+                      />
+                      {userInformation[index]?.userInformation?.address
+                        ? newVoteCast?.toLowerCase() !==
+                            userInformation[index]?.userInformation?.address?.toLowerCase() && (
+                            <>
+                              <ArrowForwardIcon mx="2" />
+                              <ProfilePicture
+                                address={newVoteCast}
+                                size={9}
+                                newVoteCast={newVoteCast}
+                                isCouncilTabs
+                              />
+                            </>
+                          )
+                        : null}
+                    </>
                   ) : (
                     councilPeriod === '2' && (
                       <>
@@ -178,6 +200,7 @@ export default function CouncilTabs({ activeCouncil }: { activeCouncil: CouncilS
                             address={userInformation[index].userInformation?.address}
                             size={9}
                             newVoteCast={newVoteCast}
+                            isCouncilTabs
                           />
                         )}
 

governance/ui/src/components/MyVoteRow/MyVoteRow.tsx

@@ -4,7 +4,7 @@ import { AddIcon, ArrowForwardIcon, CloseIcon } from '@chakra-ui/icons';
 import { useNavigate } from 'react-router-dom';
 import CouncilUser from '../CouncilUser/CouncilUser';
 import { useVoteContext } from '../../context/VoteContext';
-import { useGetEpochIndex, useGetUserBallot, useNetwork } from '../../queries';
+import { useGetEpochIndex, useGetUserBallot, useNetwork, useWallet } from '../../queries';
 import { getVoteSelectionState } from '../../utils/localstorage';
 import { Badge } from '../Badge';
 
@@ -18,20 +18,21 @@ export default function MyVoteRow({
   isLast: boolean;
 }) {
   const navigate = useNavigate();
+  const { activeWallet } = useWallet();
   const { data: ballot } = useGetUserBallot(councilSlug);
   const { data: epochId } = useGetEpochIndex(councilSlug);
   const { dispatch, state } = useVoteContext();
   const { network } = useNetwork();
 
   const networkForState = getVoteSelectionState(
     state,
-    epochId,
+    activeWallet?.address,
+    epochId?.toString(),
     network?.id.toString(),
     councilSlug
   );
 
   const voteAddressState = typeof networkForState === 'string' ? networkForState : '';
-
   return (
     <Flex
       key={`vote-${councilSlug}-cart`}
@@ -47,15 +48,17 @@ export default function MyVoteRow({
       <Flex ml="4" alignItems="center" mr="auto">
         <CouncilUser
           councilSlug={councilSlug}
-          address={ballot?.votedCandidates[0] || voteAddressState}
-          hideName={!!(ballot?.votedCandidates[0] && networkForState === 'remove')}
+          address={ballot?.votedCandidates[0] ? ballot?.votedCandidates[0] : voteAddressState}
+          hideName={!!(ballot?.votedCandidates[0] && voteAddressState)}
         />
-        {ballot?.votedCandidates[0] && networkForState === 'remove' && (
-          <>
-            <ArrowForwardIcon mx="2" />
-            <CouncilUser councilSlug={councilSlug} address={networkForState} hideName />
-          </>
-        )}
+        {ballot?.votedCandidates[0] &&
+          voteAddressState &&
+          ballot.votedCandidates[0].toLowerCase() !== voteAddressState.toLowerCase() && (
+            <>
+              <ArrowForwardIcon mx="2" />
+              <CouncilUser councilSlug={councilSlug} address={voteAddressState} hideName />
+            </>
+          )}
       </Flex>
       {ballot?.votedCandidates.includes(voteAddressState) ? (
         <Badge mr="2">Your Vote</Badge>
@@ -95,7 +98,8 @@ export default function MyVoteRow({
                   payload: {
                     action: 'remove',
                     network: network.id.toString(),
-                    epochId,
+                    epochId: epochId?.toString(),
+                    wallet: activeWallet?.address,
                   },
                 });
               } else {
@@ -104,7 +108,8 @@ export default function MyVoteRow({
                   payload: {
                     action: networkForState === 'remove' ? 'remove' : undefined,
                     network: network.id.toString(),
-                    epochId,
+                    epochId: epochId?.toString(),
+                    wallet: activeWallet?.address,
                   },
                 });
               }

governance/ui/src/components/MyVotesSummary/MyVotesSummary.tsx

@@ -5,7 +5,7 @@ import MyVotesBox from '../MyVotesBox/MyVotesBox';
 import { useNavigate } from 'react-router-dom';
 import councils from '../../utils/councils';
 import { useVoteContext, VoteStateForNetwork } from '../../context/VoteContext';
-import { useGetEpochIndex, useNetwork } from '../../queries';
+import { useGetEpochIndex, useNetwork, useWallet } from '../../queries';
 import { voteCardState } from '../../state/vote-card';
 import { useRecoilState } from 'recoil';
 import { getVoteSelectionState } from '../../utils/localstorage';
@@ -36,7 +36,13 @@ export const MyVotesSummary = ({
   const { network } = useNetwork();
   const { data: epochId } = useGetEpochIndex('spartan');
   const { state } = useVoteContext();
-  const networkForState = getVoteSelectionState(state, epochId, network?.id.toString());
+  const { activeWallet } = useWallet();
+  const networkForState = getVoteSelectionState(
+    state,
+    activeWallet?.address,
+    epochId?.toString(),
+    network?.id.toString()
+  );
   const stateFromCouncils = (
     typeof networkForState !== 'string' ? networkForState : { spartan: networkForState }
   ) as VoteStateForNetwork;

governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx

@@ -8,7 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import { useVoteContext } from '../../context/VoteContext';
 import { ProfilePicture } from './ProfilePicture';
 import { EditIcon, ShareIcon } from '../Icons';
-import { useGetEpochIndex, useGetUserBallot, useNetwork } from '../../queries';
+import { useGetEpochIndex, useGetUserBallot, useNetwork, useWallet } from '../../queries';
 import { useEffect, useRef, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { voteCardState } from '../../state/vote-card';
@@ -32,6 +32,7 @@ export const UserProfileDetails = ({
   councilPeriod,
 }: UserProfileDetailsProps) => {
   const [_, setVoteCard] = useRecoilState(voteCardState);
+  const { activeWallet } = useWallet();
   const [tooltipLabel, setTooltipLabel] = useState('Copy Profile Link');
   const [walletToolTipLabel, setWalletTooltipLabel] = useState('Copy');
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
@@ -43,11 +44,16 @@ export const UserProfileDetails = ({
   const { data: ballot } = useGetUserBallot(activeCouncil);
   const elementRef = useRef<HTMLParagraphElement | null>(null);
   const [isOverflowing, setIsOverflowing] = useState(false);
-  const networkForState = getVoteSelectionState(state, epochId, network?.id.toString());
+  const networkForState = getVoteSelectionState(
+    state,
+    activeWallet?.address,
+    epochId?.toString(),
+    network?.id.toString(),
+    activeCouncil
+  );
   const voteAddressState = typeof networkForState === 'string' ? networkForState : '';
-
   const isSelected = voteAddressState
-    ? voteAddressState?.toLowerCase() === userData?.address?.toLowerCase()
+    ? voteAddressState?.toLowerCase().trim() === userData?.address?.toLowerCase().trim()
     : false;
 
   const isAlreadyVoted =
@@ -293,20 +299,31 @@ export const UserProfileDetails = ({
               if (isAlreadyVoted) {
                 dispatch({
                   type: activeCouncil.toUpperCase(),
-                  payload: { action: 'remove', network: parsedNetwork, epochId },
+                  payload: {
+                    action: 'remove',
+                    network: parsedNetwork,
+                    epochId: epochId?.toString(),
+                    wallet: activeWallet?.address,
+                  },
                 });
               } else if (isSelected) {
                 dispatch({
                   type: activeCouncil.toUpperCase(),
-                  payload: { action: undefined, network: parsedNetwork, epochId },
+                  payload: {
+                    action: undefined,
+                    network: parsedNetwork,
+                    epochId: epochId?.toString(),
+                    wallet: activeWallet?.address,
+                  },
                 });
               } else {
                 dispatch({
                   type: activeCouncil.toUpperCase(),
                   payload: {
                     action: userData?.address.toLowerCase(),
                     network: parsedNetwork,
-                    epochId,
+                    epochId: epochId?.toString(),
+                    wallet: activeWallet?.address,
                   },
                 });
               }

governance/ui/src/components/UserTableView/UserTableView.tsx

@@ -6,10 +6,9 @@ import { useGetCurrentPeriod } from '../../queries/useGetCurrentPeriod';
 import { CouncilSlugs } from '../../utils/councils';
 import { ProfilePicture } from '../UserProfileCard/ProfilePicture';
 import { prettyString } from '@snx-v3/format';
-import { useGetEpochIndex, useGetUserBallot, useNetwork } from '../../queries';
-import { getVoteSelectionState } from '../../utils/localstorage';
-import { useVoteContext } from '../../context/VoteContext';
-import { BigNumber } from 'ethers';
+import { useGetUserBallot } from '../../queries';
+import { BigNumber, utils } from 'ethers';
+import { formatNumber } from '@snx-v3/formatters';
 import { renderCorrectBorder } from '../../utils/table-border';
 
 export default function UserTableView({
@@ -31,20 +30,11 @@ export default function UserTableView({
   const { data: ballot } = useGetUserBallot(activeCouncil);
   const { data: councilPeriod } = useGetCurrentPeriod(activeCouncil);
   const isSelected = searchParams.get('view') === user.address;
-  const { network } = useNetwork();
-  const { data: epochId } = useGetEpochIndex(activeCouncil);
-  const { state } = useVoteContext();
   const councilIsInAdminOrVoting = councilPeriod === '2' || councilPeriod === '0';
-  const networkForState = getVoteSelectionState(
-    state,
-    epochId,
-    network?.id.toString(),
-    activeCouncil
-  );
-  const voteAddressState = typeof networkForState === 'string' ? networkForState : '';
-  const totalVotingPowerPercentage = totalVotingPower
-    ? user.voteResult?.votePower.mul(100).div(totalVotingPower).toNumber().toFixed(2)
-    : 'N/A';
+  const totalVotingPowerPercentage =
+    totalVotingPower && user.voteResult
+      ? formatNumber(user.voteResult?.votePower.mul(100).div(totalVotingPower).toString())
+      : 'N/A';
 
   return (
     <Tr
@@ -129,7 +119,9 @@ export default function UserTableView({
         >
           {totalVotingPowerPercentage ? totalVotingPowerPercentage + '%' : 'N/A'}
           <Text color="gray.500" fontSize="x-small">
-            {totalVotingPowerPercentage ? user.voteResult?.votePower.toString() : '—'}
+            {totalVotingPowerPercentage && user.voteResult
+              ? formatNumber(utils.formatEther(user.voteResult.votePower || '0'))
+              : '—'}
           </Text>
         </Td>
       )}
@@ -144,7 +136,7 @@ export default function UserTableView({
           fontSize="sm"
           fontWeight={700}
         >
-          {ballot?.votedCandidates.includes(voteAddressState) ? (
+          {ballot?.votedCandidates.includes(user.address) ? (
             <Badge w="fit-content" data-cy="your-vote-badge-table">
               Your Vote
             </Badge>