diff --git a/govtool/frontend/src/components/atoms/VotingPowerChips.tsx b/govtool/frontend/src/components/atoms/VotingPowerChips.tsx index aad43c7d8..29efefa17 100644 --- a/govtool/frontend/src/components/atoms/VotingPowerChips.tsx +++ b/govtool/frontend/src/components/atoms/VotingPowerChips.tsx @@ -14,7 +14,7 @@ import { tooltips } from "@/consts/texts"; export const VotingPowerChips = () => { const { dRep, stakeKey, isDrepLoading } = useCardano(); - const { data: drepVotingPower, isLoading: drepPowerIsLoading } = + const { dRepVotingPower, isDRepVotingPowerLoading } = useGetDRepVotingPowerQuery(); const { votingPower, powerIsLoading } = useGetAdaHolderVotingPowerQuery(stakeKey); @@ -54,7 +54,7 @@ export const VotingPowerChips = () => { Voting power: )} - {(dRep?.isRegistered && drepPowerIsLoading) || + {(dRep?.isRegistered && isDRepVotingPowerLoading) || (!dRep?.isRegistered && powerIsLoading) || isDrepLoading ? ( @@ -67,7 +67,7 @@ export const VotingPowerChips = () => { > ₳{" "} {dRep?.isRegistered - ? correctAdaFormat(drepVotingPower) ?? 0 + ? correctAdaFormat(dRepVotingPower) ?? 0 : correctAdaFormat(votingPower) ?? 0} )} diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx index 85528c957..1c414ecf2 100644 --- a/govtool/frontend/src/components/organisms/DashboardCards.tsx +++ b/govtool/frontend/src/components/organisms/DashboardCards.tsx @@ -11,17 +11,17 @@ import { correctAdaFormat, formHexToBech32, openInNewTab } from "@utils"; export const DashboardCards = () => { const { - dRepIDBech32: drepId, - dRepID, - dRep, - stakeKey, - buildSignSubmitConwayCertTx, - delegateTransaction, buildDRepRetirementCert, - registerTransaction, + buildSignSubmitConwayCertTx, delegateTo, - isPendingTransaction, + delegateTransaction, + dRep, + dRepID, + dRepIDBech32, isDrepLoading, + isPendingTransaction, + registerTransaction, + stakeKey, } = useCardano(); const navigate = useNavigate(); const { currentDelegation, isCurrentDelegationLoading } = @@ -120,7 +120,7 @@ export const DashboardCards = () => { ); } - }, [currentDelegation, drepId, votingPower]); + }, [currentDelegation, dRepID, votingPower]); const delegationStatusTestForId = useMemo(() => { if (currentDelegation === dRepID) { @@ -134,7 +134,7 @@ export const DashboardCards = () => { } else { return "not_delegated"; } - }, [currentDelegation, drepId, votingPower]); + }, [currentDelegation, dRepID, votingPower]); const progressDescription = useMemo(() => { const correctAdaRepresentation = ( @@ -174,7 +174,7 @@ export const DashboardCards = () => { ); } - }, [delegateTo, votingPower]); + }, [delegateTo, dRepID, votingPower]); const navigateTo = useCallback( (path: string) => { @@ -341,7 +341,7 @@ export const DashboardCards = () => { : "outlined" } dataTestidSecondButton={ - dRep?.isRegistered && drepId + dRep?.isRegistered ? "change-metadata-button" : "register-learn-more-button" } @@ -376,7 +376,7 @@ export const DashboardCards = () => { secondButtonAction={ registerTransaction?.transactionHash ? () => openInNewTab("https://adanordic.com/latest_transactions") - : dRep?.isRegistered && drepId + : dRep?.isRegistered ? () => { navigateTo(PATHS.updateMetadata); } @@ -392,7 +392,7 @@ export const DashboardCards = () => { ? "Change metadata" : "Learn more" } - cardId={dRep?.isRegistered || dRep?.wasRegistered ? drepId : ""} + cardId={dRep?.isRegistered || dRep?.wasRegistered ? dRepIDBech32 : ""} cardTitle={ dRep?.isRegistered || dRep?.wasRegistered ? "My DRep ID" : "" } diff --git a/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx b/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx index 8f1a456d5..8b1893843 100644 --- a/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx +++ b/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx @@ -1,5 +1,5 @@ import { useState, useCallback, useEffect } from "react"; -import { Box, Tab, Tabs, styled } from "@mui/material"; +import { Box, CircularProgress, Tab, Tabs, styled } from "@mui/material"; import { useLocation } from "react-router-dom"; import { useCardano } from "@context"; @@ -65,7 +65,7 @@ export const DashboardGovernanceActions = () => { state && state.isVotedListOnLoad ? 1 : 0 ); - const { dRep } = useCardano(); + const { dRep, isDrepLoading } = useCardano(); const { isMobile } = useScreenDimension(); const handleChange = (_event: React.SyntheticEvent, newValue: number) => { @@ -92,69 +92,83 @@ export const DashboardGovernanceActions = () => { display="flex" flexDirection="column" > - - {dRep?.isRegistered && ( - - + + ) : ( + <> + - - + {dRep?.isRegistered && ( + + + + + )} + + + + + + + + )} - - - - - - - ); }; diff --git a/govtool/frontend/src/components/organisms/DashboardGovernanceActionsVotedOn.tsx b/govtool/frontend/src/components/organisms/DashboardGovernanceActionsVotedOn.tsx index f0143e13e..0c978c1bf 100644 --- a/govtool/frontend/src/components/organisms/DashboardGovernanceActionsVotedOn.tsx +++ b/govtool/frontend/src/components/organisms/DashboardGovernanceActionsVotedOn.tsx @@ -19,7 +19,7 @@ export const DashboardGovernanceActionsVotedOn = ({ searchPhrase, sorting, }: DashboardGovernanceActionsVotedOnProps) => { - const { data, dRepVotesAreLoading } = useGetDRepVotesQuery(filters, sorting); + const { data, areDRepVotesLoading } = useGetDRepVotesQuery(filters, sorting); const { isMobile } = useScreenDimension(); const { voteTransaction } = useCardano(); @@ -45,7 +45,7 @@ export const DashboardGovernanceActionsVotedOn = ({ } }, [data, searchPhrase, voteTransaction.transactionHash]); - return dRepVotesAreLoading ? ( + return areDRepVotesLoading ? ( diff --git a/govtool/frontend/src/components/organisms/DelegateTodRepStepTwo.tsx b/govtool/frontend/src/components/organisms/DelegateTodRepStepTwo.tsx index 03e0cacbf..857117665 100644 --- a/govtool/frontend/src/components/organisms/DelegateTodRepStepTwo.tsx +++ b/govtool/frontend/src/components/organisms/DelegateTodRepStepTwo.tsx @@ -82,7 +82,7 @@ export const DelegateTodRepStepTwo = ({ setStep }: DelegateProps) => { { - const { dRep, voteTransaction } = useCardano(); - const { data: dRepVotes, dRepVotesAreLoading } = useGetDRepVotesQuery([], ""); + const { voteTransaction } = useCardano(); const navigate = useNavigate(); const { isMobile } = useScreenDimension(); const queryFilters = filters.length > 0 ? filters : defaultCategories; - const { proposals, isLoading } = useGetProposalsQuery(queryFilters, sorting); + const { proposals, isProposalsLoading } = useGetProposalsQuery({ + filters: queryFilters, + sorting, + }); const groupedByType = (data?: ActionType[]) => { return data?.reduce((groups, item) => { @@ -59,20 +57,6 @@ export const GovernanceActionsToVote = ({ }; const mappedData = useMemo(() => { - if (onDashboard && dRep?.isRegistered && dRepVotes) { - const filteredBySearchPhrase = proposals?.filter((i) => - getFullGovActionId(i.txHash, i.index) - .toLowerCase() - .includes(searchPhrase.toLowerCase()) - ); - const filteredData = filteredBySearchPhrase?.filter((i) => { - return !dRepVotes - .flatMap((item) => item.actions.map((item) => item.proposal.id)) - .includes(i.id); - }); - const groupedData = groupedByType(filteredData); - return Object.values(groupedData ?? []) as ToVoteDataType; - } const groupedData = groupedByType( proposals?.filter((i) => getFullGovActionId(i.txHash, i.index) @@ -81,16 +65,9 @@ export const GovernanceActionsToVote = ({ ) ); return Object.values(groupedData ?? []) as ToVoteDataType; - }, [ - proposals, - onDashboard, - dRep?.isRegistered, - dRepVotes, - searchPhrase, - voteTransaction.proposalId, - ]); + }, [proposals, searchPhrase]); - return !isLoading && !dRepVotesAreLoading ? ( + return !isProposalsLoading ? ( <> {!mappedData.length ? ( @@ -156,13 +133,13 @@ export const GovernanceActionsToVote = ({ ); })} dataLength={item.actions.slice(0, 6).length} - notSlicedDataLength={item.actions.length} filters={filters} + navigateKey={item.title} + notSlicedDataLength={item.actions.length} onDashboard={onDashboard} searchPhrase={searchPhrase} sorting={sorting} title={getProposalTypeLabel(item.title)} - navigateKey={item.title} /> {index < mappedData.length - 1 && ( @@ -180,7 +157,6 @@ export const GovernanceActionsToVote = ({ flex={1} height="100%" justifyContent="center" - py={4} > diff --git a/govtool/frontend/src/context/wallet.tsx b/govtool/frontend/src/context/wallet.tsx index 3d15fb593..af9fbbe81 100644 --- a/govtool/frontend/src/context/wallet.tsx +++ b/govtool/frontend/src/context/wallet.tsx @@ -52,7 +52,7 @@ import { PATHS } from "@consts"; import { CardanoApiWallet, DRepInfo, Protocol } from "@models"; import type { StatusModalState } from "@organisms"; import { - getPubDRepId, + getPubDRepID, WALLET_LS_KEY, DELEGATE_TRANSACTION_KEY, REGISTER_TRANSACTION_KEY, @@ -107,8 +107,8 @@ interface CardanoContext { setStakeKey: (key: string) => void; stakeKeys: string[]; walletApi?: CardanoApiWallet; - delegatedDRepId?: string; - setDelegatedDRepId: (key: string) => void; + delegatedDRepID?: string; + setDelegatedDRepID: (key: string) => void; buildSignSubmitConwayCertTx: ({ certBuilder, votingBuilder, @@ -178,7 +178,7 @@ function CardanoProvider(props: Props) { const [registeredStakeKeysListState, setRegisteredPubStakeKeysState] = useState([]); const [error, setError] = useState(undefined); - const [delegatedDRepId, setDelegatedDRepId] = useState( + const [delegatedDRepID, setDelegatedDRepID] = useState( undefined ); const [delegateTo, setDelegateTo] = useState(""); @@ -640,10 +640,10 @@ function CardanoProvider(props: Props) { ); stakeKeySet = true; } - const dRepIds = await getPubDRepId(enabledApi); - setPubDRepKey(dRepIds?.dRepKey || ""); - setDRepID(dRepIds?.dRepID || ""); - setDRepIDBech32(dRepIds?.dRepIDBech32 || ""); + const dRepIDs = await getPubDRepID(enabledApi); + setPubDRepKey(dRepIDs?.dRepKey || ""); + setDRepID(dRepIDs?.dRepID || ""); + setDRepIDBech32(dRepIDs?.dRepIDBech32 || ""); setItemToLocalStorage(`${WALLET_LS_KEY}_name`, walletName); const protocol = await getEpochParams(); @@ -1139,8 +1139,8 @@ function CardanoProvider(props: Props) { stakeKeys, walletApi, error, - delegatedDRepId, - setDelegatedDRepId, + delegatedDRepID, + setDelegatedDRepID, buildSignSubmitConwayCertTx, buildDRepRegCert, buildDRepUpdateCert, @@ -1171,8 +1171,8 @@ function CardanoProvider(props: Props) { stakeKeys, walletApi, error, - delegatedDRepId, - setDelegatedDRepId, + delegatedDRepID, + setDelegatedDRepID, buildSignSubmitConwayCertTx, buildDRepRegCert, buildDRepUpdateCert, diff --git a/govtool/frontend/src/hooks/forms/useDelegateTodRepForm.tsx b/govtool/frontend/src/hooks/forms/useDelegateTodRepForm.tsx index 1493d1f34..416bcf191 100644 --- a/govtool/frontend/src/hooks/forms/useDelegateTodRepForm.tsx +++ b/govtool/frontend/src/hooks/forms/useDelegateTodRepForm.tsx @@ -8,12 +8,12 @@ import { useGetDRepListQuery } from "@hooks"; import { formHexToBech32 } from "@utils"; export interface DelegateTodrepFormValues { - dRepId: string; + dRepID: string; } export const useDelegateTodRepForm = () => { const { - setDelegatedDRepId, + setDelegatedDRepID, buildSignSubmitConwayCertTx, buildVoteDelegationCert, } = useCardano(); @@ -26,26 +26,26 @@ export const useDelegateTodRepForm = () => { const watch = useWatch({ control, - name: "dRepId", + name: "dRepID", }); const isDelegateButtonDisabled = !watch; const delegate = useCallback( - async ({ dRepId }: DelegateTodrepFormValues) => { + async ({ dRepID }: DelegateTodrepFormValues) => { setIsLoading(true); try { - setDelegatedDRepId(dRepId); + setDelegatedDRepID(dRepID); let isValidDrep = false; if (drepList?.length) { isValidDrep = drepList.some((i) => { - return i.drepId === dRepId || formHexToBech32(i.drepId) === dRepId; + return i.drepId === dRepID || formHexToBech32(i.drepId) === dRepID; }); } if (!drepList?.length || !isValidDrep) { throw new Error("DrepId not found"); } - const certBuilder = await buildVoteDelegationCert(dRepId); + const certBuilder = await buildVoteDelegationCert(dRepID); const result = await buildSignSubmitConwayCertTx({ certBuilder, type: "delegation", diff --git a/govtool/frontend/src/hooks/queries/useGetDRepInfoQuery.ts b/govtool/frontend/src/hooks/queries/useGetDRepInfoQuery.ts index 2ac0e85a2..217aecde8 100644 --- a/govtool/frontend/src/hooks/queries/useGetDRepInfoQuery.ts +++ b/govtool/frontend/src/hooks/queries/useGetDRepInfoQuery.ts @@ -5,7 +5,7 @@ import { useCardano } from "@context"; import { getDRepInfo } from "@services"; export const useGetDRepInfo = () => { - const { registerTransaction, dRepID } = useCardano(); + const { dRepID, registerTransaction } = useCardano(); const { data, isLoading } = useQuery({ queryKey: [ diff --git a/govtool/frontend/src/hooks/queries/useGetDRepVotesQuery.ts b/govtool/frontend/src/hooks/queries/useGetDRepVotesQuery.ts index 24667b2f9..cb85c8271 100644 --- a/govtool/frontend/src/hooks/queries/useGetDRepVotesQuery.ts +++ b/govtool/frontend/src/hooks/queries/useGetDRepVotesQuery.ts @@ -6,7 +6,7 @@ import { getDRepVotes } from "@services"; import { VotedProposal } from "@/models/api"; export const useGetDRepVotesQuery = (filters: string[], sorting: string) => { - const { dRepID: dRepId, voteTransaction } = useCardano(); + const { dRepID, voteTransaction } = useCardano(); const { data, isLoading, refetch, isRefetching } = useQuery({ queryKey: [ @@ -16,9 +16,9 @@ export const useGetDRepVotesQuery = (filters: string[], sorting: string) => { sorting, ], queryFn: async () => { - return await getDRepVotes({ dRepId, filters, sorting }); + return await getDRepVotes({ dRepID, filters, sorting }); }, - enabled: !!dRepId, + enabled: !!dRepID, }); const groupedByType = data?.reduce((groups, item) => { @@ -41,7 +41,7 @@ export const useGetDRepVotesQuery = (filters: string[], sorting: string) => { title: string; actions: VotedProposal[]; }[], - dRepVotesAreLoading: isLoading, + areDRepVotesLoading: isLoading, refetch, isRefetching, }; diff --git a/govtool/frontend/src/hooks/queries/useGetDRepVotingPowerQuery.ts b/govtool/frontend/src/hooks/queries/useGetDRepVotingPowerQuery.ts index 554a81688..aade95029 100644 --- a/govtool/frontend/src/hooks/queries/useGetDRepVotingPowerQuery.ts +++ b/govtool/frontend/src/hooks/queries/useGetDRepVotingPowerQuery.ts @@ -5,15 +5,15 @@ import { useCardano } from "@context"; import { getDRepVotingPower } from "@services"; export const useGetDRepVotingPowerQuery = () => { - const { dRepID: dRepId } = useCardano(); + const { dRepID } = useCardano(); const { data, isLoading } = useQuery({ queryKey: QUERY_KEYS.useGetDRepVotingPowerKey, queryFn: async () => { - return await getDRepVotingPower({ dRepId }); + return await getDRepVotingPower({ dRepID }); }, - enabled: !!dRepId, + enabled: !!dRepID, }); - return { data, isLoading }; + return { dRepVotingPower: data, isDRepVotingPowerLoading: isLoading }; }; diff --git a/govtool/frontend/src/hooks/queries/useGetProposalsInfiniteQuery.ts b/govtool/frontend/src/hooks/queries/useGetProposalsInfiniteQuery.ts index c25b04f29..897a44355 100644 --- a/govtool/frontend/src/hooks/queries/useGetProposalsInfiniteQuery.ts +++ b/govtool/frontend/src/hooks/queries/useGetProposalsInfiniteQuery.ts @@ -2,17 +2,23 @@ import { useInfiniteQuery } from "react-query"; import { QUERY_KEYS } from "@consts"; import { useCardano } from "@context"; -import { getProposals } from "@services"; +import { getProposals, getProposalsArguments } from "@services"; -export const useGetProposalsInfiniteQuery = ( - filters: string[], - sorting: string, - pageSize: number = 10 -) => { - const { voteTransaction, isEnabled } = useCardano(); +export const useGetProposalsInfiniteQuery = ({ + filters = [], + pageSize = 10, + sorting = "", +}: getProposalsArguments) => { + const { dRepID, isEnabled, voteTransaction } = useCardano(); const fetchProposals = async ({ pageParam = 0 }) => { - return await getProposals(filters, sorting, pageParam, pageSize); + return await getProposals({ + dRepID, + filters, + page: pageParam, + pageSize, + sorting, + }); }; const { @@ -29,6 +35,7 @@ export const useGetProposalsInfiniteQuery = ( sorting, voteTransaction.proposalId, isEnabled, + dRepID, ], fetchProposals, { @@ -47,11 +54,11 @@ export const useGetProposalsInfiniteQuery = ( ) as ActionType[]; return { + proposalsfetchNextPage: fetchNextPage, + proposalsHaveNextPage: hasNextPage, + isProposalsFetching: isFetching, + isProposalsFetchingNextPage: isFetchingNextPage, + isProposalsLoading: isLoading, proposals, - isLoading, - fetchNextPage, - hasNextPage, - isFetching, - isFetchingNextPage, }; }; diff --git a/govtool/frontend/src/hooks/queries/useGetProposalsQuery.ts b/govtool/frontend/src/hooks/queries/useGetProposalsQuery.ts index 8273dc1b3..88c4a301e 100644 --- a/govtool/frontend/src/hooks/queries/useGetProposalsQuery.ts +++ b/govtool/frontend/src/hooks/queries/useGetProposalsQuery.ts @@ -2,40 +2,38 @@ import { useQuery } from "react-query"; import { QUERY_KEYS } from "@consts"; import { useCardano } from "@context"; -import { getProposals } from "@services"; +import { getProposals, getProposalsArguments } from "@services"; -export const useGetProposalsQuery = ( - filters: string[], - sorting: string -): { - proposals: ActionType[]; - isLoading: boolean; -} => { - const { voteTransaction, isEnabled } = useCardano(); +export const useGetProposalsQuery = ({ + filters = [], + sorting, +}: getProposalsArguments) => { + const { dRepID, isEnabled, voteTransaction } = useCardano(); - const fetchProposals = async () => { + const fetchProposals = async (): Promise => { const allProposals = await Promise.all( - filters.map((filter) => getProposals([filter], sorting)) + filters.map((filter) => + getProposals({ dRepID, filters: [filter], sorting }) + ) ); - return allProposals.flatMap((proposal) => proposal.elements || []); + return allProposals.flatMap((proposal) => proposal.elements); }; - const request = useQuery( + const { data, isLoading } = useQuery( [ QUERY_KEYS.useGetProposalsKey, filters, sorting, voteTransaction.proposalId, isEnabled, + dRepID, ], fetchProposals ); - const proposals = request.data as ActionType[]; - return { - proposals, - isLoading: request.isLoading, + isProposalsLoading: isLoading, + proposals: data, }; }; diff --git a/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx b/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx index c6b27dadc..a2184fae4 100644 --- a/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx +++ b/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx @@ -1,7 +1,7 @@ -import { useState, useCallback, useMemo, useRef } from "react"; +import { useCallback, useMemo, useRef, useState } from "react"; import { - NavLink, generatePath, + NavLink, useNavigate, useParams, } from "react-router-dom"; @@ -18,58 +18,58 @@ import { ICONS, PATHS } from "@consts"; import { useCardano } from "@context"; import { DataActionsBar, GovernanceActionCard } from "@molecules"; import { - useGetDRepVotesQuery, - useGetProposalsInfiniteQuery, useFetchNextPageDetector, + useGetProposalsInfiniteQuery, useSaveScrollPosition, useScreenDimension, } from "@hooks"; import { getFullGovActionId, - openInNewTab, getProposalTypeLabel, + openInNewTab, removeDuplicatedProposals, } from "@utils"; -export const DashboardGovernanceActionsCategory = ({}) => { +export const DashboardGovernanceActionsCategory = () => { const { category } = useParams(); const [searchText, setSearchText] = useState(""); const [sortOpen, setSortOpen] = useState(false); const [chosenSorting, setChosenSorting] = useState(""); const { isMobile, screenWidth } = useScreenDimension(); const navigate = useNavigate(); - const { dRep, voteTransaction } = useCardano(); - - const { data: dRepVotes } = useGetDRepVotesQuery([], ""); + const { dRep, isDrepLoading, voteTransaction } = useCardano(); const { + isProposalsFetching, + isProposalsFetchingNextPage, + isProposalsLoading, proposals, - fetchNextPage, - hasNextPage, - isFetching, - isFetchingNextPage, - isLoading, - } = useGetProposalsInfiniteQuery( - [category?.replace(/ /g, "") ?? ""], - chosenSorting - ); + proposalsfetchNextPage, + proposalsHaveNextPage, + } = useGetProposalsInfiniteQuery({ + filters: [category?.replace(/ /g, "") ?? ""], + sorting: chosenSorting, + }); const loadNextPageRef = useRef(null); useFetchNextPageDetector( - fetchNextPage, - isLoading || isFetchingNextPage, - hasNextPage + proposalsfetchNextPage, + isProposalsLoading || isProposalsFetchingNextPage, + proposalsHaveNextPage ); - const saveScrollPosition = useSaveScrollPosition(isLoading, isFetching); + const saveScrollPosition = useSaveScrollPosition( + isProposalsLoading, + isProposalsFetching + ); const breadcrumbs = [ - + Governance Actions , @@ -81,33 +81,12 @@ export const DashboardGovernanceActionsCategory = ({}) => { const mappedData = useMemo(() => { const uniqueProposals = removeDuplicatedProposals(proposals); - if (dRep?.isRegistered && dRepVotes) { - const filteredBySearchPhrase = uniqueProposals?.filter((i) => - getFullGovActionId(i.txHash, i.index) - .toLowerCase() - .includes(searchText.toLowerCase()) - ); - - const filteredData = filteredBySearchPhrase?.filter((i) => { - return !dRepVotes - .flatMap((item) => item.actions.map((item) => item.proposal.id)) - .includes(i.id); - }); - - return filteredData; - } return uniqueProposals?.filter((i) => getFullGovActionId(i.txHash, i.index) .toLowerCase() .includes(searchText.toLowerCase()) ); - }, [ - proposals, - dRep?.isRegistered, - dRepVotes, - searchText, - isFetchingNextPage, - ]); + }, [proposals, dRep?.isRegistered, searchText, isProposalsFetchingNextPage]); const closeSorts = useCallback(() => { setSortOpen(false); @@ -116,16 +95,16 @@ export const DashboardGovernanceActionsCategory = ({}) => { return ( { alt="arrow" style={{ marginRight: "12px", transform: "rotate(180deg)" }} /> - + Back to the list - {!isLoading ? ( - !mappedData?.length ? ( - - - - Governnance actions with category  - - {` ${category} `} -  don't exist. - - - ) : ( - - {mappedData.map((item) => ( - - { - saveScrollPosition(); + {isProposalsLoading || isDrepLoading ? ( + + + + ) : !mappedData?.length ? ( + + + + Governnance actions with category  + + {` ${category} `} +  don't exist. + + + ) : ( + + {mappedData.map((item) => ( + + { + saveScrollPosition(); - voteTransaction.proposalId === - item.txHash + item.index - ? openInNewTab( - "https://adanordic.com/latest_transactions" - ) - : navigate( - generatePath( - PATHS.dashboard_governance_actions_action, - { - proposalId: getFullGovActionId( - item.txHash, - item.index - ), - } - ), + voteTransaction.proposalId === item.txHash + item.index + ? openInNewTab( + "https://adanordic.com/latest_transactions" + ) + : navigate( + generatePath( + PATHS.dashboard_governance_actions_action, { - state: { - ...item, - openedFromCategoryPage: true, - }, + proposalId: getFullGovActionId( + item.txHash, + item.index + ), } - ); - }} - /> - - ))} - {hasNextPage && isFetchingNextPage && ( - - - - )} - - ) - ) : ( - - + ), + { + state: { + ...item, + openedFromCategoryPage: true, + }, + } + ); + }} + txHash={item.txHash} + /> + + ))} + {proposalsHaveNextPage && isProposalsFetchingNextPage && ( + + + + )} )} diff --git a/govtool/frontend/src/pages/GovernanceActionsCategory.tsx b/govtool/frontend/src/pages/GovernanceActionsCategory.tsx index 5ef9b4e6a..bd9c0d40f 100644 --- a/govtool/frontend/src/pages/GovernanceActionsCategory.tsx +++ b/govtool/frontend/src/pages/GovernanceActionsCategory.tsx @@ -14,7 +14,6 @@ import { useCardano } from "@context"; import { DataActionsBar, GovernanceActionCard } from "@molecules"; import { Footer, TopNav } from "@organisms"; import { - useGetDRepVotesQuery, useGetProposalsInfiniteQuery, useFetchNextPageDetector, useSaveScrollPosition, @@ -28,7 +27,7 @@ import { removeDuplicatedProposals, } from "@utils"; -export const GovernanceActionsCategory = ({}) => { +export const GovernanceActionsCategory = () => { const { category } = useParams(); const [searchText, setSearchText] = useState(""); const [sortOpen, setSortOpen] = useState(false); @@ -39,31 +38,28 @@ export const GovernanceActionsCategory = ({}) => { const { dRep } = useCardano(); const { - data: dRepVotes, - dRepVotesAreLoading, - isRefetching: votesRefetching, - } = useGetDRepVotesQuery([], ""); - - const { + isProposalsFetching, + isProposalsFetchingNextPage, + isProposalsLoading, proposals, - fetchNextPage, - hasNextPage, - isFetching, - isFetchingNextPage, - isLoading, - } = useGetProposalsInfiniteQuery( - [category?.replace(/ /g, "") ?? ""], - chosenSorting - ); + proposalsfetchNextPage, + proposalsHaveNextPage, + } = useGetProposalsInfiniteQuery({ + filters: [category?.replace(/ /g, "") ?? ""], + sorting: chosenSorting, + }); const loadNextPageRef = useRef(null); useFetchNextPageDetector( - fetchNextPage, - isLoading || isFetchingNextPage, - hasNextPage + proposalsfetchNextPage, + isProposalsLoading || isProposalsFetchingNextPage, + proposalsHaveNextPage ); - const saveScrollPosition = useSaveScrollPosition(isLoading, isFetching); + const saveScrollPosition = useSaveScrollPosition( + isProposalsLoading, + isProposalsFetching + ); const breadcrumbs = [ { .toLowerCase() .includes(searchText.toLowerCase()) ); - }, [ - proposals, - dRep?.isRegistered, - dRepVotes, - searchText, - isFetchingNextPage, - ]); + }, [dRep?.isRegistered, isProposalsFetchingNextPage, proposals, searchText]); useEffect(() => { if (isEnabled && getItemFromLocalStorage(`${WALLET_LS_KEY}_stake_key`)) { @@ -174,7 +164,7 @@ export const GovernanceActionsCategory = ({}) => { setChosenSorting={setChosenSorting} /> - {!isLoading && !dRepVotesAreLoading && !votesRefetching ? ( + {!isProposalsLoading ? ( !mappedData?.length ? ( @@ -230,7 +220,7 @@ export const GovernanceActionsCategory = ({}) => { /> ))} - {hasNextPage && isFetchingNextPage && ( + {proposalsHaveNextPage && isProposalsFetchingNextPage && ( { - let urlBase = `/drep/getVotes/${dRepId}`; + let urlBase = `/drep/getVotes/${dRepID}`; let urlParameters = ""; if (filters.length > 0) { filters.forEach((item) => { diff --git a/govtool/frontend/src/services/requests/getDRepVotingPower.ts b/govtool/frontend/src/services/requests/getDRepVotingPower.ts index c732749cf..5fff469d5 100644 --- a/govtool/frontend/src/services/requests/getDRepVotingPower.ts +++ b/govtool/frontend/src/services/requests/getDRepVotingPower.ts @@ -1,6 +1,6 @@ import { API } from "../API"; -export const getDRepVotingPower = async ({ dRepId }: { dRepId: string }) => { - const response = await API.get(`/drep/get-voting-power/${dRepId}`); +export const getDRepVotingPower = async ({ dRepID }: { dRepID: string }) => { + const response = await API.get(`/drep/get-voting-power/${dRepID}`); return response.data; }; diff --git a/govtool/frontend/src/services/requests/getProposals.ts b/govtool/frontend/src/services/requests/getProposals.ts index a0a7a5af5..3ad5082bf 100644 --- a/govtool/frontend/src/services/requests/getProposals.ts +++ b/govtool/frontend/src/services/requests/getProposals.ts @@ -1,11 +1,21 @@ import { API } from "../API"; -export const getProposals = async ( - filters: string[], - sorting: string, - page: number = 0, - pageSize: number = 7 -) => { +export type getProposalsArguments = { + dRepID?: string; + filters?: string[]; + page?: number; + pageSize?: number; + sorting?: string; +}; + +export const getProposals = async ({ + dRepID = "", + filters = [], + page = 0, + // It allows fetch proposals and if we have 7 items, display 6 cards and "view all" button + pageSize = 7, + sorting = "", +}: getProposalsArguments) => { let urlBase = "/proposal/list"; let urlParameters = `?page=${page}&pageSize=${pageSize}`; @@ -17,6 +27,9 @@ export const getProposals = async ( if (sorting.length) { urlParameters += `&sort=${sorting}`; } + if (dRepID) { + urlParameters += `&drepId=${dRepID}`; + } const response = await API.get(`${urlBase}${urlParameters}`); return response.data; diff --git a/govtool/frontend/src/utils/getDRepId.ts b/govtool/frontend/src/utils/getDRepId.ts index f643f91a7..05561eaf5 100644 --- a/govtool/frontend/src/utils/getDRepId.ts +++ b/govtool/frontend/src/utils/getDRepId.ts @@ -11,7 +11,7 @@ export const formHexToBech32 = (dRepID?: string) => { return dRepIDBech32; }; -export const getPubDRepId = async (walletApi: CardanoApiWallet) => { +export const getPubDRepID = async (walletApi: CardanoApiWallet) => { try { // From wallet get pub DRep key const raw = await walletApi.cip95.getPubDRepKey(); diff --git a/govtool/frontend/src/utils/index.ts b/govtool/frontend/src/utils/index.ts index f28259282..266a15aa1 100644 --- a/govtool/frontend/src/utils/index.ts +++ b/govtool/frontend/src/utils/index.ts @@ -2,7 +2,7 @@ export * from "./adaFormat"; export * from "./basicReducer"; export * from "./callAll"; export * from "./formatDate"; -export * from "./getDRepId"; +export * from "./getDRepID"; export * from "./getLengthInBytes"; export * from "./getProposalTypeLabel"; export * from "./isValidFormat";