fix(governance): rewards pagination and columns (#5879)

apps/governance/.env

@@ -14,7 +14,6 @@ NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/m
 
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
-NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json
 NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72

apps/governance/.env.capsule

@@ -15,7 +15,6 @@ NX_ETH_WALLET_MNEMONIC=ozone access unlock valid olympic save include omit suppl
 NX_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
-NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
 NX_VEGA_REST_URL=http://localhost:3008/api/v2/
 

apps/governance/.env.devnet

@@ -8,7 +8,6 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_EXPLORER_URL=#
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
-NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-devnet1-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api.n00.devnet1.vega.xyz/api/v2/

apps/governance/.env.mainnet

@@ -10,7 +10,6 @@ NX_SENTRY_DSN=https://[email protected]/
 NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40:[email protected]/5882996
-NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_REST_URL=https://api.vega.community/api/v2/

apps/governance/.env.mainnet-mirror

@@ -9,7 +9,6 @@ NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_SENTRY_DSN=https://[email protected]/5882996
 NX_VEGA_EXPLORER_URL=https://explorer.mainnet-mirror.vega.rocks
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
-NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-mirror-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_REST_URL=https://api.mainnet-mirror.vega.rocks/api/v2/

apps/governance/.env.stagnet1

@@ -5,7 +5,6 @@ NX_VEGA_NETWORKS='{"DEVNET":"https://dev.governance.vega.xyz","STAGNET1":"https:
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
 NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
-NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/

apps/governance/.env.testnet

@@ -9,7 +9,6 @@ NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
-NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-testnet-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api.n07.testnet.vega.xyz/api/v2/

apps/governance/src/components/vega-wallet/hooks.ts

@@ -4,7 +4,6 @@ import keyBy from 'lodash/keyBy';
 import uniq from 'lodash/uniq';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ENV } from '../../config';
 
 import noIcon from '../../images/token-no-icon.png';
 import vegaBlack from '../../images/vega_black.png';
@@ -37,7 +36,6 @@ export const usePollForDelegations = () => {
   const { t } = useTranslation();
   const { pubKey } = useVegaWallet();
   const client = useApolloClient();
-  const { delegationsPagination } = ENV;
   const [delegations, setDelegations] = React.useState<
     WalletDelegationFieldsFragment[]
   >([]);
@@ -68,11 +66,9 @@ export const usePollForDelegations = () => {
             query: DelegationsDocument,
             variables: {
               partyId: pubKey,
-              delegationsPagination: delegationsPagination
-                ? {
-                    first: Number(delegationsPagination),
-                  }
-                : undefined,
+              delegationsPagination: {
+                first: 50,
+              },
             },
             fetchPolicy: 'network-only',
           })
@@ -236,14 +232,14 @@ export const usePollForDelegations = () => {
             // will just continue to fail
             clearInterval(interval);
           });
-      }, 1000);
+      }, 20000);
     }
 
     return () => {
       clearInterval(interval);
       mounted = false;
     };
-  }, [delegationsPagination, client, decimals, pubKey, t, vegaToken.address]);
+  }, [client, decimals, pubKey, t, vegaToken.address]);
 
   return { delegations, currentStakeAvailable, delegatedNodes, accounts };
 };

apps/governance/src/config/env.ts

@@ -65,7 +65,6 @@ export const ENV = {
   docsUrl: windowOrDefault('NX_VEGA_DOCS_URL'),
   ethWalletMnemonic: windowOrDefault('NX_ETH_WALLET_MNEMONIC'),
   localProviderUrl: windowOrDefault('NX_LOCAL_PROVIDER_URL'),
-  delegationsPagination: windowOrDefault('NX_DELEGATIONS_PAGINATION'),
   rest: windowOrDefault('NX_VEGA_REST_URL'),
   addresses:
     ContractAddresses[(envName === 'local' ? 'CUSTOM' : envName) as Networks],

apps/governance/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards.tsx

@@ -1,10 +1,9 @@
-import { useMemo, useEffect, useState, useCallback, useRef } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AsyncRenderer, Pagination } from '@vegaprotocol/ui-toolkit';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
 import type { EpochFieldsFragment } from '../home/__generated__/Rewards';
 import { useRewardsQuery } from '../home/__generated__/Rewards';
-import { ENV } from '../../../config';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { EpochIndividualRewardsTable } from './epoch-individual-rewards-table';
 import { generateEpochIndividualRewardsList } from './generate-epoch-individual-rewards-list';
@@ -27,22 +26,16 @@ export const EpochIndividualRewards = ({
   const [page, setPage] = useState(1);
   const { t } = useTranslation();
   const { pubKey } = useVegaWallet();
-  const { delegationsPagination } = ENV;
   const { param: marketCreationQuantumMultiple } = useNetworkParam(
     'rewards_marketCreationQuantumMultiple'
   );
 
-  const { data, loading, error, refetch } = useRewardsQuery({
+  const { data, loading, error } = useRewardsQuery({
     notifyOnNetworkStatusChange: true,
     variables: {
       partyId: pubKey || '',
-      fromEpoch: epochId - EPOCHS_PAGE_SIZE,
-      toEpoch: epochId,
-      delegationsPagination: delegationsPagination
-        ? {
-            first: Number(delegationsPagination),
-          }
-        : undefined,
+      ...calculateEpochOffset({ epochId, page, size: EPOCHS_PAGE_SIZE }),
+      delegationsPagination: { first: 50 },
     },
     skip: !pubKey,
   });
@@ -70,36 +63,6 @@ export const EpochIndividualRewards = ({
     });
   }, [data?.party, epochId, epochRewardSummaries, page, rewards]);
 
-  const refetchData = useCallback(
-    async (toPage?: number) => {
-      const targetPage = toPage ?? page;
-      await refetch({
-        partyId: pubKey || '',
-        ...calculateEpochOffset({ epochId, page, size: EPOCHS_PAGE_SIZE }),
-        delegationsPagination: delegationsPagination
-          ? {
-              first: Number(delegationsPagination),
-            }
-          : undefined,
-      });
-      setPage(targetPage);
-    },
-    [epochId, page, refetch, delegationsPagination, pubKey]
-  );
-
-  const prevEpochIdRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    if (prevEpochIdRef.current === null) {
-      prevEpochIdRef.current = epochId;
-    } else if (epochId !== prevEpochIdRef.current) {
-      // When the epoch changes, we want to refetch the data to update the current page
-      refetchData();
-    }
-
-    prevEpochIdRef.current = epochId;
-  }, [epochId, refetchData]);
-
   // Workarounds for the error handling of AsyncRenderer
   const filteredErrors = filterAcceptableGraphqlErrors(error);
   const filteredData = data || [];
@@ -131,10 +94,10 @@ export const EpochIndividualRewards = ({
               isLoading={loading}
               hasPrevPage={page > 1}
               hasNextPage={page < totalPages}
-              onBack={() => refetchData(page - 1)}
-              onNext={() => refetchData(page + 1)}
-              onFirst={() => refetchData(1)}
-              onLast={() => refetchData(totalPages)}
+              onBack={() => setPage((x) => x - 1)}
+              onNext={() => setPage((x) => x + 1)}
+              onFirst={() => setPage(1)}
+              onLast={() => setPage(totalPages)}
             >
               {t('Page')} {page}
             </Pagination>