fix: balances for proposals list screen

bgd-labs · Nov 30, 2024 · f390040 · f390040 · github-actions · Nov 30, 2024
1 parent 5740a3e
commit f390040
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 29 deletions.
diff --git a/src/components/ProposalsList/ActiveItem.tsx b/src/components/ProposalsList/ActiveItem.tsx
@@ -1,17 +1,24 @@
 'use client';
 
+import { WalletType } from '@bgd-labs/frontend-web3-utils';
 import { Box, useTheme } from '@mui/system';
 import React, { useEffect, useState } from 'react';
 import { zeroAddress } from 'viem';
 
+import { appConfig } from '../../configs/appConfig';
+import { chainInfoHelper } from '../../configs/configs';
 import { ROUTES } from '../../configs/routes';
 import { texts } from '../../helpers/texts/texts';
 import { useStore } from '../../providers/ZustandStoreProvider';
-import { selectProposalDataByUser } from '../../store/selectors/proposalsSelector';
+import {
+  selectProposalDataByUser,
+  selectVotingBalanceByUser,
+} from '../../store/selectors/proposalsSelector';
 import { disablePageLoader } from '../../styles/disablePageLoader';
 import { ActiveProposalOnTheList } from '../../types';
 import { ChainNameWithIcon } from '../ChainNameWithIcon';
 import { Link } from '../Link';
+import { CustomSkeleton } from '../primitives/CustomSkeleton';
 import { ProposalNextState } from '../ProposalNextState';
 import { ProposalStateWithDate } from '../ProposalStateWithDate';
 import { VoteBar } from '../VoteBar';
@@ -21,7 +28,7 @@ import { ProposalListItemWrapper } from './ProposalListItemWrapper';
 import { VoteButton } from './VoteButton';
 import { VotingPower } from './VotingPower';
 
-interface ActiveProposalListItemProps {
+interface ActiveItemProps {
   proposalData: ActiveProposalOnTheList;
   voteButtonClick?: (proposalId: number) => void;
   isForHelpModal?: boolean;
@@ -31,11 +38,12 @@ export function ActiveItem({
   proposalData,
   voteButtonClick,
   isForHelpModal,
-}: ActiveProposalListItemProps) {
+}: ActiveItemProps) {
   const theme = useTheme();
 
   const isRendered = useStore((state) => state.isRendered);
-  const activeWallet = useStore((state) => state.activeWallet);
+  const appClients = useStore((state) => state.appClients);
+  let activeWallet = useStore((state) => state.activeWallet);
   const balanceLoading = useStore(
     (state) => state.userDataLoadings[proposalData.proposalId],
   );
@@ -48,23 +56,39 @@ export function ActiveItem({
     walletAddress: activeWallet?.address ?? zeroAddress,
     snapshotBlockHash: proposalData.snapshotBlockHash,
   });
-
-  console.log(proposalData.proposalId, userProposalData);
+  const [votingPower, setVotingPower] = useState(0n);
 
   const [isClicked, setIsClicked] = useState(false);
-  const [votingPower, setVotingPower] = useState(0n);
+
+  if (isForHelpModal) {
+    activeWallet = {
+      walletType: WalletType.Injected,
+      address: zeroAddress,
+      chain: chainInfoHelper.getChainParameters(appConfig.govCoreChainId),
+      chainId: appConfig.govCoreChainId,
+      connectorClient: appClients[appConfig.govCoreChainId].instance,
+      isActive: true,
+      isContractAddress: false,
+    };
+  }
 
   useEffect(() => {
-    setVotingPower(
-      userProposalData.voted && userProposalData.voting
-        ? userProposalData.voted.isVoted
-          ? userProposalData.voted.votedInfo.votedPower
-          : userProposalData.voting
-              .map((power) => power.votingPower)
-              .reduce((acc, num) => acc + num, 0n)
-        : 0n,
-    );
-  }, [userProposalData.voting]);
+    if (userProposalData.voted) {
+      if (userProposalData.voted.isVoted) {
+        setVotingPower(userProposalData.voted.votedInfo.votedPower);
+      } else {
+        if (userProposalData.voting) {
+          setVotingPower(
+            selectVotingBalanceByUser({
+              votingBalances,
+              walletAddress: activeWallet?.address ?? zeroAddress,
+              snapshotBlockHash: proposalData.snapshotBlockHash,
+            }),
+          );
+        }
+      }
+    }
+  }, [userProposalData.voted, userProposalData.voting, activeWallet]);
 
   const handleVoteButtonClick = (proposalId: number) => {
     if (voteButtonClick) {
@@ -173,7 +197,17 @@ export function ActiveItem({
                         ? `${theme.palette.$text} !important`
                         : theme.palette.$text,
                     }}>
-                    {proposalData.title}
+                    {proposalData.ipfsError ? (
+                      'Ipfs getting error'
+                    ) : proposalData.ipfsError ? (
+                      <CustomSkeleton width={250} height={24} />
+                    ) : proposalData.title ===
+                        `Proposal ${proposalData.proposalId}` &&
+                      !proposalData.isFinished ? (
+                      <CustomSkeleton width={250} height={24} />
+                    ) : (
+                      proposalData.title
+                    )}
                   </Box>
                 </Box>
 

diff --git a/src/components/ProposalsList/VotingPower.tsx b/src/components/ProposalsList/VotingPower.tsx
@@ -58,7 +58,15 @@ export function VotingPower({
       </Box>
 
       {balanceLoading && !isVoted ? (
-        <CustomSkeleton width={60} height={19} />
+        <CustomSkeleton
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+          width={60}
+          height={19}
+        />
       ) : (
         <Box
           onClick={(e) => {

diff --git a/src/components/Transactions/TransactionInfoItem.tsx b/src/components/Transactions/TransactionInfoItem.tsx
@@ -40,7 +40,7 @@ export function TransactionInfoItem({ tx }: TransactionInfoItemProps) {
         iconSize={10}
         css={{
           display: 'inline-block',
-          '.NetworkIcon': { mr: 2 },
+          '.ChainIcon': { display: 'inline', mr: 2 },
           '.ChainNameWithIcon__text': { display: 'inline' },
         }}
       />
@@ -54,7 +54,7 @@ export function TransactionInfoItem({ tx }: TransactionInfoItemProps) {
         iconSize={10}
         css={{
           display: 'inline-block',
-          '.NetworkIcon': { mr: 2 },
+          '.ChainIcon': { display: 'inline', mr: 2 },
           '.ChainNameWithIcon__text': { display: 'inline' },
         }}
       />

diff --git a/src/components/Web3Icons/ChainIcon.tsx b/src/components/Web3Icons/ChainIcon.tsx
@@ -17,6 +17,7 @@ interface ChainIconProps extends ExternalComponentBaseProps {
 const ChainIcon = ({ chainId, size, css, ...props }: ChainIconProps) => {
   return (
     <Box
+      className="ChainIcon"
       sx={{
         lineHeight: 0,
         width: size ?? 12,

diff --git a/src/components/primitives/CustomSkeleton.tsx b/src/components/primitives/CustomSkeleton.tsx
@@ -1,21 +1,23 @@
 'use client';
 
-import { Box } from '@mui/system';
+import { Box, SxProps } from '@mui/system';
 import React from 'react';
 
 export function CustomSkeleton({
   width,
   height,
   circle,
   className,
+  sx,
 }: {
   width?: number | string;
   height?: number | string;
   circle?: boolean;
   className?: string;
+  sx?: SxProps;
 }) {
   return (
-    <Box className={className}>
+    <Box className={className} sx={sx}>
       <Box
         className="react-loading-skeleton"
         sx={(theme) => ({

diff --git a/src/store/proposalsListSlice.ts b/src/store/proposalsListSlice.ts
@@ -192,11 +192,14 @@ export const createProposalsListSlice: StoreSlice<
     const activeWallet = get().activeWallet;
     if (activeWallet) {
       proposalsData.map(async (proposal) => {
-        set((state) =>
-          produce(state, (draft) => {
-            draft.userDataLoadings[Number(proposal.id)] = true;
-          }),
-        );
+        const key = `${activeWallet.address}_${proposal.snapshotBlockHash}`;
+        if (!get().votedData[key]) {
+          set((state) =>
+            produce(state, (draft) => {
+              draft.userDataLoadings[Number(proposal.id)] = true;
+            }),
+          );
+        }
         await get().getVotedDataByUser(activeWallet.address, proposal);
         const data = selectProposalDataByUser({
           votedData: get().votedData,

diff --git a/src/store/proposalsSlice.ts b/src/store/proposalsSlice.ts
@@ -16,6 +16,7 @@ import {
   VotingDataByUser,
 } from '../types';
 import { IRpcSwitcherSlice } from './rpcSwitcherSlice';
+import { selectVotingBalanceByUser } from './selectors/proposalsSelector';
 import { selectAppClients } from './selectors/rpcSwitcherSelectors';
 
 export interface IProposalsSlice {
@@ -91,7 +92,15 @@ export const createProposalsSlice: StoreSlice<
   votedData: {},
   getVotedDataByUser: async (walletAddress, proposal) => {
     const key = `${walletAddress}_${proposal.snapshotBlockHash}`;
-    if (!get().votedData[key] || !get().votedData[key].isVoted) {
+    const votingBalance = selectVotingBalanceByUser({
+      votingBalances: get().votingBalances,
+      walletAddress,
+      snapshotBlockHash: proposal.snapshotBlockHash,
+    });
+    if (
+      !get().votedData[key] ||
+      (!get().votedData[key].isVoted && votingBalance > 0n)
+    ) {
       const input = {
         initialProposals: [proposal],
         walletAddress,

diff --git a/src/store/selectors/proposalsSelector.ts b/src/store/selectors/proposalsSelector.ts
@@ -52,3 +52,18 @@ export const selectProposalDataByUser = ({
     voting: votingBalances[`${walletAddress}_${snapshotBlockHash}`],
   };
 };
+
+export const selectVotingBalanceByUser = ({
+  votingBalances,
+  walletAddress,
+  snapshotBlockHash,
+}: {
+  walletAddress: string;
+  snapshotBlockHash: string;
+} & Pick<IProposalsSlice, 'votingBalances'>) => {
+  return votingBalances[`${walletAddress}_${snapshotBlockHash}`]
+    ? votingBalances[`${walletAddress}_${snapshotBlockHash}`]
+        .map((power) => power.votingPower)
+        .reduce((acc, num) => acc + num, 0n)
+    : 0n;
+};