feat(2396): token delegations pagination (#2575)

apps/token/.env

@@ -11,6 +11,7 @@ NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
+NX_DELEGATIONS_PAGINATION=50
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

apps/token/.env.capsule

@@ -14,6 +14,7 @@ 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
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

apps/token/.env.devnet

@@ -8,3 +8,4 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_EXPLORER_URL=https://dev.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
+NX_DELEGATIONS_PAGINATION=50

apps/token/.env.mainnet

@@ -9,3 +9,4 @@ NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40:87edc2605e544f888305d7fc4a9141bd@o286262.ingest.sentry.io/5882996
+NX_DELEGATIONS_PAGINATION=50

apps/token/.env.mirror

@@ -8,3 +8,4 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_EXPLORER_URL=https://mirror.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
+NX_DELEGATIONS_PAGINATION=50

apps/token/.env.sandbox

@@ -5,3 +5,4 @@ NX_VEGA_NETWORKS='{"DEVNET":"https://dev.token.vega.xyz","STAGNET3":"https://sta
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/sandbox-network.json
 NX_VEGA_EXPLORER_URL=https://sandbox.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
+NX_DELEGATIONS_PAGINATION=50

apps/token/.env.stagnet1

@@ -5,3 +5,4 @@ NX_VEGA_NETWORKS='{"DEVNET":"https://dev.token.vega.xyz","STAGNET3":"https://sta
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet1-network.json
 NX_VEGA_EXPLORER_URL=https://stagnet1.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
+NX_DELEGATIONS_PAGINATION=50

apps/token/.env.stagnet3

@@ -6,3 +6,4 @@ NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
 NX_VEGA_EXPLORER_URL=https://stagnet3.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
+NX_DELEGATIONS_PAGINATION=50

apps/token/.env.testnet

@@ -9,3 +9,4 @@ 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

apps/token/src/components/vega-wallet/Delegations.graphql

@@ -7,13 +7,13 @@ fragment WalletDelegationFields on Delegation {
   epoch
 }
 
-query Delegations($partyId: ID!) {
+query Delegations($partyId: ID!, $delegationsPagination: Pagination) {
   epoch {
     id
   }
   party(id: $partyId) {
     id
-    delegationsConnection {
+    delegationsConnection(pagination: $delegationsPagination) {
       edges {
         node {
           ...WalletDelegationFields

apps/token/src/components/vega-wallet/__generated__/Delegations.ts

@@ -7,6 +7,7 @@ export type WalletDelegationFieldsFragment = { __typename?: 'Delegation', amount
 
 export type DelegationsQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
+  delegationsPagination?: Types.InputMaybe<Types.Pagination>;
 }>;
 
 
@@ -23,13 +24,13 @@ export const WalletDelegationFieldsFragmentDoc = gql`
 }
     `;
 export const DelegationsDocument = gql`
-    query Delegations($partyId: ID!) {
+    query Delegations($partyId: ID!, $delegationsPagination: Pagination) {
   epoch {
     id
   }
   party(id: $partyId) {
     id
-    delegationsConnection {
+    delegationsConnection(pagination: $delegationsPagination) {
       edges {
         node {
           ...WalletDelegationFields
@@ -76,6 +77,7 @@ export const DelegationsDocument = gql`
  * const { data, loading, error } = useDelegationsQuery({
  *   variables: {
  *      partyId: // value for 'partyId'
+ *      delegationsPagination: // value for 'delegationsPagination'
  *   },
  * });
  */

apps/token/src/components/vega-wallet/__generated___/Delegations.ts

@@ -1,92 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type WalletDelegationFieldsFragment = { __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string, name: string } };
-
-export type DelegationsQueryVariables = Types.Exact<{
-  partyId: Types.Scalars['ID'];
-}>;
-
-
-export type DelegationsQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string }, party?: { __typename?: 'Party', id: string, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string, name: string } } } | null> | null } | null, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string }, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', name: string, id: string, decimals: number, symbol: string, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string } } } } | null> | null } | null } | null };
-
-export const WalletDelegationFieldsFragmentDoc = gql`
-    fragment WalletDelegationFields on Delegation {
-  amount
-  node {
-    id
-    name
-  }
-  epoch
-}
-    `;
-export const DelegationsDocument = gql`
-    query Delegations($partyId: ID!) {
-  epoch {
-    id
-  }
-  party(id: $partyId) {
-    id
-    delegationsConnection {
-      edges {
-        node {
-          ...WalletDelegationFields
-        }
-      }
-    }
-    stakingSummary {
-      currentStakeAvailable
-    }
-    accountsConnection {
-      edges {
-        node {
-          asset {
-            name
-            id
-            decimals
-            symbol
-            source {
-              __typename
-              ... on ERC20 {
-                contractAddress
-              }
-            }
-          }
-          type
-          balance
-        }
-      }
-    }
-  }
-}
-    ${WalletDelegationFieldsFragmentDoc}`;
-
-/**
- * __useDelegationsQuery__
- *
- * To run a query within a React component, call `useDelegationsQuery` and pass it any options that fit your needs.
- * When your component renders, `useDelegationsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useDelegationsQuery({
- *   variables: {
- *      partyId: // value for 'partyId'
- *   },
- * });
- */
-export function useDelegationsQuery(baseOptions: Apollo.QueryHookOptions<DelegationsQuery, DelegationsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<DelegationsQuery, DelegationsQueryVariables>(DelegationsDocument, options);
-      }
-export function useDelegationsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DelegationsQuery, DelegationsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<DelegationsQuery, DelegationsQueryVariables>(DelegationsDocument, options);
-        }
-export type DelegationsQueryHookResult = ReturnType<typeof useDelegationsQuery>;
-export type DelegationsLazyQueryHookResult = ReturnType<typeof useDelegationsLazyQuery>;
-export type DelegationsQueryResult = Apollo.QueryResult<DelegationsQuery, DelegationsQueryVariables>;

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

@@ -4,6 +4,7 @@ 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';
@@ -23,18 +24,18 @@ import type {
   DelegationsQuery,
   DelegationsQueryVariables,
   WalletDelegationFieldsFragment,
-} from './__generated___/Delegations';
+} from './__generated__/Delegations';
-import { DelegationsDocument } from './__generated___/Delegations';
+import { DelegationsDocument } from './__generated__/Delegations';
 
 export const usePollForDelegations = () => {
   const { token: vegaToken } = useContracts();
   const {
     appState: { decimals },
   } = useAppState();
-
   const { t } = useTranslation();
   const { pubKey } = useVegaWallet();
   const client = useApolloClient();
+  const { delegationsPagination } = ENV;
   const [delegations, setDelegations] = React.useState<
     WalletDelegationFieldsFragment[]
   >([]);
@@ -62,7 +63,14 @@ export const usePollForDelegations = () => {
         client
           .query<DelegationsQuery, DelegationsQueryVariables>({
             query: DelegationsDocument,
-            variables: { partyId: pubKey },
+            variables: {
+              partyId: pubKey,
+              delegationsPagination: delegationsPagination
+                ? {
+                    first: Number(delegationsPagination),
+                  }
+                : undefined,
+            },
             fetchPolicy: 'network-only',
           })
           .then((res) => {
@@ -207,7 +215,7 @@ export const usePollForDelegations = () => {
       clearInterval(interval);
       mounted = false;
     };
-  }, [client, decimals, pubKey, t, vegaToken.address]);
+  }, [delegationsPagination, client, decimals, pubKey, t, vegaToken.address]);
 
   return { delegations, currentStakeAvailable, delegatedNodes, accounts };
 };

apps/token/src/config/env.ts

@@ -64,6 +64,7 @@ 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'),
   flags: {
     NETWORK_DOWN: TRUTHY.includes(windowOrDefault('NX_NETWORK_DOWN')),
     MOCK: TRUTHY.includes(windowOrDefault('NX_MOCKED')),

apps/token/src/routes/rewards/home/Rewards.graphql

@@ -20,7 +20,7 @@ fragment DelegationFields on Delegation {
   epoch
 }
 
-query Rewards($partyId: ID!) {
+query Rewards($partyId: ID!, $delegationsPagination: Pagination) {
   party(id: $partyId) {
     id
     rewardsConnection {
@@ -30,7 +30,7 @@ query Rewards($partyId: ID!) {
         }
       }
     }
-    delegationsConnection {
+    delegationsConnection(pagination: $delegationsPagination) {
       edges {
         node {
           ...DelegationFields

apps/token/src/routes/rewards/home/__generated__/Rewards.ts

@@ -9,6 +9,7 @@ export type DelegationFieldsFragment = { __typename?: 'Delegation', amount: stri
 
 export type RewardsQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
+  delegationsPagination?: Types.InputMaybe<Types.Pagination>;
 }>;
 
 
@@ -39,7 +40,7 @@ export const DelegationFieldsFragmentDoc = gql`
 }
     `;
 export const RewardsDocument = gql`
-    query Rewards($partyId: ID!) {
+    query Rewards($partyId: ID!, $delegationsPagination: Pagination) {
   party(id: $partyId) {
     id
     rewardsConnection {
@@ -49,7 +50,7 @@ export const RewardsDocument = gql`
         }
       }
     }
-    delegationsConnection {
+    delegationsConnection(pagination: $delegationsPagination) {
       edges {
         node {
           ...DelegationFields
@@ -82,6 +83,7 @@ ${DelegationFieldsFragmentDoc}`;
  * const { data, loading, error } = useRewardsQuery({
  *   variables: {
  *      partyId: // value for 'partyId'
+ *      delegationsPagination: // value for 'delegationsPagination'
  *   },
  * });
  */

apps/token/src/routes/rewards/home/__generated___/Rewards.ts

@@ -1,98 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type RewardFieldsFragment = { __typename?: 'Reward', rewardType: Types.AccountType, amount: string, percentageOfTotal: string, receivedAt: any, asset: { __typename?: 'Asset', id: string, symbol: string }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } };
-
-export type DelegationFieldsFragment = { __typename?: 'Delegation', amount: string, epoch: number };
-
-export type RewardsQueryVariables = Types.Exact<{
-  partyId: Types.Scalars['ID'];
-}>;
-
-
-export type RewardsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, rewardsConnection?: { __typename?: 'RewardsConnection', edges?: Array<{ __typename?: 'RewardEdge', node: { __typename?: 'Reward', rewardType: Types.AccountType, amount: string, percentageOfTotal: string, receivedAt: any, asset: { __typename?: 'Asset', id: string, symbol: string }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } } } | null> | null } | null, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number } } | null> | null } | null } | null, epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, expiry?: any | null } } };
-
-export const RewardFieldsFragmentDoc = gql`
-    fragment RewardFields on Reward {
-  rewardType
-  asset {
-    id
-    symbol
-  }
-  party {
-    id
-  }
-  epoch {
-    id
-  }
-  amount
-  percentageOfTotal
-  receivedAt
-}
-    `;
-export const DelegationFieldsFragmentDoc = gql`
-    fragment DelegationFields on Delegation {
-  amount
-  epoch
-}
-    `;
-export const RewardsDocument = gql`
-    query Rewards($partyId: ID!) {
-  party(id: $partyId) {
-    id
-    rewardsConnection {
-      edges {
-        node {
-          ...RewardFields
-        }
-      }
-    }
-    delegationsConnection {
-      edges {
-        node {
-          ...DelegationFields
-        }
-      }
-    }
-  }
-  epoch {
-    id
-    timestamps {
-      start
-      end
-      expiry
-    }
-  }
-}
-    ${RewardFieldsFragmentDoc}
-${DelegationFieldsFragmentDoc}`;
-
-/**
- * __useRewardsQuery__
- *
- * To run a query within a React component, call `useRewardsQuery` and pass it any options that fit your needs.
- * When your component renders, `useRewardsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useRewardsQuery({
- *   variables: {
- *      partyId: // value for 'partyId'
- *   },
- * });
- */
-export function useRewardsQuery(baseOptions: Apollo.QueryHookOptions<RewardsQuery, RewardsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<RewardsQuery, RewardsQueryVariables>(RewardsDocument, options);
-      }
-export function useRewardsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<RewardsQuery, RewardsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<RewardsQuery, RewardsQueryVariables>(RewardsDocument, options);
-        }
-export type RewardsQueryHookResult = ReturnType<typeof useRewardsQuery>;
-export type RewardsLazyQueryHookResult = ReturnType<typeof useRewardsLazyQuery>;
-export type RewardsQueryResult = Apollo.QueryResult<RewardsQuery, RewardsQueryVariables>;

apps/token/src/routes/rewards/home/reward-info.tsx

@@ -9,7 +9,7 @@ import type {
   RewardsQuery,
   RewardFieldsFragment,
   DelegationFieldsFragment,
-} from './__generated___/Rewards';
+} from './__generated__/Rewards';
 import {
   formatNumber,
   removePaginationWrapper,

apps/token/src/routes/rewards/home/rewards-page.tsx

@@ -4,6 +4,7 @@ import { formatDistance } from 'date-fns';
 import Duration from 'duration-js';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { ENV } from '../../../config';
 
 import { EpochCountdown } from '../../../components/epoch-countdown';
 import { Heading } from '../../../components/heading';
@@ -15,7 +16,7 @@ import {
 import { RewardInfo } from './reward-info';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { useNetworkParams, NetworkParams } from '@vegaprotocol/react-helpers';
-import { useRewardsQuery } from './__generated___/Rewards';
+import { useRewardsQuery } from './__generated__/Rewards';
 
 export const RewardsPage = () => {
   const { t } = useTranslation();
@@ -24,8 +25,16 @@ export const RewardsPage = () => {
     openVegaWalletDialog: store.openVegaWalletDialog,
   }));
   const { appDispatch } = useAppState();
+  const { delegationsPagination } = ENV;
   const { data, loading, error } = useRewardsQuery({
-    variables: { partyId: pubKey || '' },
+    variables: {
+      partyId: pubKey || '',
+      delegationsPagination: delegationsPagination
+        ? {
+            first: Number(delegationsPagination),
+          }
+        : undefined,
+    },
     skip: !pubKey,
   });
   const { params } = useNetworkParams([

apps/token/src/routes/staking/node/PartyDelegations.graphql

@@ -6,10 +6,10 @@ fragment StakingDelegationsFields on Delegation {
   epoch
 }
 
-query PartyDelegations($partyId: ID!) {
+query PartyDelegations($partyId: ID!, $delegationsPagination: Pagination) {
   party(id: $partyId) {
     id
-    delegationsConnection {
+    delegationsConnection(pagination: $delegationsPagination) {
       edges {
         node {
           ...StakingDelegationsFields

apps/token/src/routes/staking/node/Staking.graphql

@@ -23,13 +23,13 @@ fragment StakingNodeFields on Node {
   }
 }
 
-query Staking($partyId: ID!) {
+query Staking($partyId: ID!, $delegationsPagination: Pagination) {
   party(id: $partyId) {
     id
     stakingSummary {
       currentStakeAvailable
     }
-    delegationsConnection {
+    delegationsConnection(pagination: $delegationsPagination) {
       edges {
         node {
           amount

apps/token/src/routes/staking/node/__generated__/PartyDelegations.ts

@@ -7,6 +7,7 @@ export type StakingDelegationsFieldsFragment = { __typename?: 'Delegation', amou
 
 export type PartyDelegationsQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
+  delegationsPagination?: Types.InputMaybe<Types.Pagination>;
 }>;
 
 
@@ -22,10 +23,10 @@ export const StakingDelegationsFieldsFragmentDoc = gql`
 }
     `;
 export const PartyDelegationsDocument = gql`
-    query PartyDelegations($partyId: ID!) {
+    query PartyDelegations($partyId: ID!, $delegationsPagination: Pagination) {
   party(id: $partyId) {
     id
-    delegationsConnection {
+    delegationsConnection(pagination: $delegationsPagination) {
       edges {
         node {
           ...StakingDelegationsFields
@@ -52,6 +53,7 @@ export const PartyDelegationsDocument = gql`
  * const { data, loading, error } = usePartyDelegationsQuery({
  *   variables: {
  *      partyId: // value for 'partyId'
+ *      delegationsPagination: // value for 'delegationsPagination'
  *   },
  * });
  */

apps/token/src/routes/staking/node/__generated__/Staking.ts

@@ -7,6 +7,7 @@ export type StakingNodeFieldsFragment = { __typename?: 'Node', id: string, name:
 
 export type StakingQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
+  delegationsPagination?: Types.InputMaybe<Types.Pagination>;
 }>;
 
 
@@ -39,13 +40,13 @@ export const StakingNodeFieldsFragmentDoc = gql`
 }
     `;
 export const StakingDocument = gql`
-    query Staking($partyId: ID!) {
+    query Staking($partyId: ID!, $delegationsPagination: Pagination) {
   party(id: $partyId) {
     id
     stakingSummary {
       currentStakeAvailable
     }
-    delegationsConnection {
+    delegationsConnection(pagination: $delegationsPagination) {
       edges {
         node {
           amount
@@ -94,6 +95,7 @@ export const StakingDocument = gql`
  * const { data, loading, error } = useStakingQuery({
  *   variables: {
  *      partyId: // value for 'partyId'
+ *      delegationsPagination: // value for 'delegationsPagination'
  *   },
  * });
  */

apps/token/src/routes/staking/node/__generated___/PartyDelegations.ts

@@ -1,68 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type StakingDelegationsFieldsFragment = { __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string } };
-
-export type PartyDelegationsQueryVariables = Types.Exact<{
-  partyId: Types.Scalars['ID'];
-}>;
-
-
-export type PartyDelegationsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string } } } | null> | null } | null } | null, epoch: { __typename?: 'Epoch', id: string } };
-
-export const StakingDelegationsFieldsFragmentDoc = gql`
-    fragment StakingDelegationsFields on Delegation {
-  amount
-  node {
-    id
-  }
-  epoch
-}
-    `;
-export const PartyDelegationsDocument = gql`
-    query PartyDelegations($partyId: ID!) {
-  party(id: $partyId) {
-    id
-    delegationsConnection {
-      edges {
-        node {
-          ...StakingDelegationsFields
-        }
-      }
-    }
-  }
-  epoch {
-    id
-  }
-}
-    ${StakingDelegationsFieldsFragmentDoc}`;
-
-/**
- * __usePartyDelegationsQuery__
- *
- * To run a query within a React component, call `usePartyDelegationsQuery` and pass it any options that fit your needs.
- * When your component renders, `usePartyDelegationsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = usePartyDelegationsQuery({
- *   variables: {
- *      partyId: // value for 'partyId'
- *   },
- * });
- */
-export function usePartyDelegationsQuery(baseOptions: Apollo.QueryHookOptions<PartyDelegationsQuery, PartyDelegationsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<PartyDelegationsQuery, PartyDelegationsQueryVariables>(PartyDelegationsDocument, options);
-      }
-export function usePartyDelegationsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PartyDelegationsQuery, PartyDelegationsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<PartyDelegationsQuery, PartyDelegationsQueryVariables>(PartyDelegationsDocument, options);
-        }
-export type PartyDelegationsQueryHookResult = ReturnType<typeof usePartyDelegationsQuery>;
-export type PartyDelegationsLazyQueryHookResult = ReturnType<typeof usePartyDelegationsLazyQuery>;
-export type PartyDelegationsQueryResult = Apollo.QueryResult<PartyDelegationsQuery, PartyDelegationsQueryVariables>;

apps/token/src/routes/staking/node/__generated___/Staking.ts

@@ -1,110 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type StakingNodeFieldsFragment = { __typename?: 'Node', id: string, name: string, pubkey: string, infoUrl: string, location: string, ethereumAddress: string, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null, rankingScore: { __typename?: 'RankingScore', rankingScore: string, stakeScore: string, performanceScore: string, votingPower: string, status: Types.ValidatorStatus } };
-
-export type StakingQueryVariables = Types.Exact<{
-  partyId: Types.Scalars['ID'];
-}>;
-
-
-export type StakingQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string }, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string } } } | null> | null } | null } | null, epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, expiry?: any | null } }, nodesConnection: { __typename?: 'NodesConnection', edges?: Array<{ __typename?: 'NodeEdge', node: { __typename?: 'Node', id: string, name: string, pubkey: string, infoUrl: string, location: string, ethereumAddress: string, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null, rankingScore: { __typename?: 'RankingScore', rankingScore: string, stakeScore: string, performanceScore: string, votingPower: string, status: Types.ValidatorStatus } } } | null> | null }, nodeData?: { __typename?: 'NodeData', stakedTotal: string, totalNodes: number, inactiveNodes: number, uptime: number } | null };
-
-export const StakingNodeFieldsFragmentDoc = gql`
-    fragment StakingNodeFields on Node {
-  id
-  name
-  pubkey
-  infoUrl
-  location
-  ethereumAddress
-  stakedByOperator
-  stakedByDelegates
-  stakedTotal
-  pendingStake
-  epochData {
-    total
-    offline
-    online
-  }
-  rankingScore {
-    rankingScore
-    stakeScore
-    performanceScore
-    votingPower
-    status
-  }
-}
-    `;
-export const StakingDocument = gql`
-    query Staking($partyId: ID!) {
-  party(id: $partyId) {
-    id
-    stakingSummary {
-      currentStakeAvailable
-    }
-    delegationsConnection {
-      edges {
-        node {
-          amount
-          epoch
-          node {
-            id
-          }
-        }
-      }
-    }
-  }
-  epoch {
-    id
-    timestamps {
-      start
-      end
-      expiry
-    }
-  }
-  nodesConnection {
-    edges {
-      node {
-        ...StakingNodeFields
-      }
-    }
-  }
-  nodeData {
-    stakedTotal
-    totalNodes
-    inactiveNodes
-    uptime
-  }
-}
-    ${StakingNodeFieldsFragmentDoc}`;
-
-/**
- * __useStakingQuery__
- *
- * To run a query within a React component, call `useStakingQuery` and pass it any options that fit your needs.
- * When your component renders, `useStakingQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useStakingQuery({
- *   variables: {
- *      partyId: // value for 'partyId'
- *   },
- * });
- */
-export function useStakingQuery(baseOptions: Apollo.QueryHookOptions<StakingQuery, StakingQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<StakingQuery, StakingQueryVariables>(StakingDocument, options);
-      }
-export function useStakingLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<StakingQuery, StakingQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<StakingQuery, StakingQueryVariables>(StakingDocument, options);
-        }
-export type StakingQueryHookResult = ReturnType<typeof useStakingQuery>;
-export type StakingLazyQueryHookResult = ReturnType<typeof useStakingLazyQuery>;
-export type StakingQueryResult = Apollo.QueryResult<StakingQuery, StakingQueryVariables>;

apps/token/src/routes/staking/node/node.tsx

@@ -20,7 +20,7 @@ import NodeContainer from './nodes-container';
 import { useAppState } from '../../../contexts/app-state/app-state-context';
 import { Heading, SubHeading } from '../../../components/heading';
 import Routes from '../../routes';
-import type { StakingQuery } from './__generated___/Staking';
+import type { StakingQuery } from './__generated__/Staking';
 import type { PreviousEpochQuery } from '../__generated___/PreviousEpoch';
 
 interface StakingNodeProps {

apps/token/src/routes/staking/node/nodes-container.tsx

@@ -1,14 +1,14 @@
+import { ENV } from '../../../config';
 import { Callout, Intent, Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
-
-import { useStakingQuery } from './__generated___/Staking';
-import { SplashLoader } from '../../../components/splash-loader';
-import { usePreviousEpochQuery } from '../__generated___/PreviousEpoch';
-import type { StakingQuery } from './__generated___/Staking';
-import type { PreviousEpochQuery } from '../__generated___/PreviousEpoch';
 import { useRefreshValidators } from '../../../hooks/use-refresh-validators';
+import { SplashLoader } from '../../../components/splash-loader';
+import { useStakingQuery } from './__generated__/Staking';
+import { usePreviousEpochQuery } from '../__generated___/PreviousEpoch';
+import type { ReactElement } from 'react';
+import type { StakingQuery } from './__generated__/Staking';
+import type { PreviousEpochQuery } from '../__generated___/PreviousEpoch';
 
 // TODO should only request a single node. When migrating from deprecated APIs we should address this.
 
@@ -23,12 +23,20 @@ export const NodeContainer = ({
   }: {
     data?: StakingQuery;
     previousEpochData?: PreviousEpochQuery;
-  }) => React.ReactElement;
+  }) => ReactElement;
 }) => {
   const { t } = useTranslation();
   const { pubKey } = useVegaWallet();
+  const { delegationsPagination } = ENV;
   const { data, loading, error, refetch } = useStakingQuery({
-    variables: { partyId: pubKey || '' },
+    variables: {
+      partyId: pubKey || '',
+      delegationsPagination: delegationsPagination
+        ? {
+            first: Number(delegationsPagination),
+          }
+        : undefined,
+    },
   });
   const { data: previousEpochData } = usePreviousEpochQuery({
     variables: {

apps/token/src/routes/staking/node/staking-form.tsx

@@ -3,7 +3,8 @@ import * as Sentry from '@sentry/react';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { usePartyDelegationsLazyQuery } from './__generated___/PartyDelegations';
+import { ENV } from '../../../config';
+import { usePartyDelegationsLazyQuery } from './__generated__/PartyDelegations';
 import { TokenInput } from '../../../components/token-input';
 import { useAppState } from '../../../contexts/app-state/app-state-context';
 import { useSearchParams } from '../../../hooks/use-search-params';
@@ -73,6 +74,7 @@ export const StakingForm = ({
   const [error, setError] = useState<Error | null>(null);
   const [isDialogVisible, setIsDialogVisible] = useState(false);
   const { t } = useTranslation();
+  const { delegationsPagination } = ENV;
   const [action, setAction] = React.useState<StakeAction>(
     params.action as StakeAction
   );
@@ -147,6 +149,11 @@ export const StakingForm = ({
   const [delegationSearch, { data }] = usePartyDelegationsLazyQuery({
     variables: {
       partyId: pubKey,
+      delegationsPagination: delegationsPagination
+        ? {
+            first: Number(delegationsPagination),
+          }
+        : undefined,
     },
     fetchPolicy: 'network-only',
   });

apps/token/src/routes/staking/node/validator-table.tsx

@@ -25,7 +25,7 @@ import {
   getUnnormalisedVotingPower,
 } from '../shared';
 import type { ReactNode } from 'react';
-import type { StakingNodeFieldsFragment } from './__generated___/Staking';
+import type { StakingNodeFieldsFragment } from './__generated__/Staking';
 import type { PreviousEpochQuery } from '../__generated___/PreviousEpoch';
 
 const statuses = {