From f390040e4b4915db9aca9077971276f70b9b77e4 Mon Sep 17 00:00:00 2001 From: Alex Date: Sat, 30 Nov 2024 08:33:52 +0200 Subject: [PATCH] fix: balances for proposals list screen --- src/components/ProposalsList/ActiveItem.tsx | 70 ++++++++++++++----- src/components/ProposalsList/VotingPower.tsx | 10 ++- .../Transactions/TransactionInfoItem.tsx | 4 +- src/components/Web3Icons/ChainIcon.tsx | 1 + src/components/primitives/CustomSkeleton.tsx | 6 +- src/store/proposalsListSlice.ts | 13 ++-- src/store/proposalsSlice.ts | 11 ++- src/store/selectors/proposalsSelector.ts | 15 ++++ 8 files changed, 101 insertions(+), 29 deletions(-) diff --git a/src/components/ProposalsList/ActiveItem.tsx b/src/components/ProposalsList/ActiveItem.tsx index bd811e0b..5e34af05 100644 --- 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 ? ( + + ) : proposalData.title === + `Proposal ${proposalData.proposalId}` && + !proposalData.isFinished ? ( + + ) : ( + proposalData.title + )} diff --git a/src/components/ProposalsList/VotingPower.tsx b/src/components/ProposalsList/VotingPower.tsx index d2067a90..67d5ea56 100644 --- a/src/components/ProposalsList/VotingPower.tsx +++ b/src/components/ProposalsList/VotingPower.tsx @@ -58,7 +58,15 @@ export function VotingPower({ {balanceLoading && !isVoted ? ( - + ) : ( { diff --git a/src/components/Transactions/TransactionInfoItem.tsx b/src/components/Transactions/TransactionInfoItem.tsx index dbfbc88c..207f7492 100644 --- 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 index ff8f9f01..a5454069 100644 --- 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 ( + ({ diff --git a/src/store/proposalsListSlice.ts b/src/store/proposalsListSlice.ts index b4025dcd..7d3e56d5 100644 --- 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 index 5a54f3e3..7b098123 100644 --- 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 index 18a14bba..dfaadfb7 100644 --- 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) => { + return votingBalances[`${walletAddress}_${snapshotBlockHash}`] + ? votingBalances[`${walletAddress}_${snapshotBlockHash}`] + .map((power) => power.votingPower) + .reduce((acc, num) => acc + num, 0n) + : 0n; +};