Chore/1925 network params (#1927)

* chore: remove network parameters query from token that was unused

* chore: begin migrating network parameters queries

* chore: more network parameter query migrations

* chore: more network params query migrations

* test: fix tests

* test: fix tests in web3 provider

* test: fix remaining tests

* test: fix e2e test build

* chore: move generic params helper into react helpers

* chore: missed migration

* chore: more migrations

* test: fix test

* test: final test migrations

* fix: e2e test mock

* chore: update type

* chore: update helper script

* test: fix query

* test: fix reduce logic

* test: fix query aliasing

apps/explorer/src/app/routes/network-parameters/NetworkParameters.graphql

@@ -1,6 +0,0 @@
-query NetworkParametersQuery {
-  networkParameters {
-    key
-    value
-  }
-}

apps/explorer/src/app/routes/network-parameters/__generated__/NetworkParametersQuery.ts

@@ -1,27 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: NetworkParametersQuery
-// ====================================================
-
-export interface NetworkParametersQuery_networkParameters {
-  __typename: "NetworkParameter";
-  /**
-   * The name of the network parameter
-   */
-  key: string;
-  /**
-   * The value of the network parameter
-   */
-  value: string;
-}
-
-export interface NetworkParametersQuery {
-  /**
-   * Return the full list of network parameters
-   */
-  networkParameters: NetworkParametersQuery_networkParameters[] | null;
-}

apps/explorer/src/app/routes/network-parameters/__generated___/NetworkParameters.ts

@@ -1,46 +0,0 @@
-import { Schema as Types } from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type NetworkParametersQueryQueryVariables = Types.Exact<{ [key: string]: never; }>;
-
-
-export type NetworkParametersQueryQuery = { __typename?: 'Query', networkParameters?: Array<{ __typename?: 'NetworkParameter', key: string, value: string }> | null };
-
-
-export const NetworkParametersQueryDocument = gql`
-    query NetworkParametersQuery {
-  networkParameters {
-    key
-    value
-  }
-}
-    `;
-
-/**
- * __useNetworkParametersQueryQuery__
- *
- * To run a query within a React component, call `useNetworkParametersQueryQuery` and pass it any options that fit your needs.
- * When your component renders, `useNetworkParametersQueryQuery` 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 } = useNetworkParametersQueryQuery({
- *   variables: {
- *   },
- * });
- */
-export function useNetworkParametersQueryQuery(baseOptions?: Apollo.QueryHookOptions<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>(NetworkParametersQueryDocument, options);
-      }
-export function useNetworkParametersQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>(NetworkParametersQueryDocument, options);
-        }
-export type NetworkParametersQueryQueryHookResult = ReturnType<typeof useNetworkParametersQueryQuery>;
-export type NetworkParametersQueryLazyQueryHookResult = ReturnType<typeof useNetworkParametersQueryLazyQuery>;
-export type NetworkParametersQueryQueryResult = Apollo.QueryResult<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>;

apps/explorer/src/app/routes/network-parameters/network-parameters.spec.tsx

@@ -1,22 +1,28 @@
 import { render, screen } from '@testing-library/react';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
 import { NetworkParametersTable } from './network-parameters';
-import type { NetworkParametersQuery } from './__generated__/NetworkParametersQuery';
 
 describe('NetworkParametersTable', () => {
   it('renders correctly when it has network params', () => {
-    const data: NetworkParametersQuery = {
+    const data: NetworkParamsQuery = {
-      networkParameters: [
+      networkParametersConnection: {
+        edges: [
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'market.liquidityProvision.minLpStakeQuantumMultiple',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'market.fee.factors.infrastructureFee',
               value: '0.0005',
             },
+          },
         ],
+      },
     };
     render(<NetworkParametersTable data={data} loading={false} />);
     expect(screen.getByTestId('network-param-header')).toHaveTextContent(
@@ -34,19 +40,25 @@ describe('NetworkParametersTable', () => {
   });
 
   it('renders the rows in ascending order', () => {
-    const data: NetworkParametersQuery = {
+    const data: NetworkParamsQuery = {
-      networkParameters: [
+      networkParametersConnection: {
+        edges: [
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'market.fee.factors.infrastructureFee',
               value: '0.0005',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'market.liquidityProvision.minLpStakeQuantumMultiple',
               value: '1',
             },
+          },
         ],
+      },
     };
     render(<NetworkParametersTable data={data} loading={false} />);
     expect(screen.getByTestId('network-param-header')).toHaveTextContent(

apps/explorer/src/app/routes/network-parameters/network-parameters.tsx

@@ -1,4 +1,3 @@
-import { gql, useQuery } from '@apollo/client';
 import {
   AsyncRenderer,
   KeyValueTable,
@@ -12,11 +11,10 @@ import {
 } from '@vegaprotocol/react-helpers';
 import { suitableForSyntaxHighlighter } from '@vegaprotocol/react-helpers';
 import { RouteTitle } from '../../components/route-title';
-import type {
-  NetworkParametersQuery,
-  NetworkParametersQuery_networkParameters,
-} from './__generated__/NetworkParametersQuery';
 import orderBy from 'lodash/orderBy';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
+import { useNetworkParamsQuery } from '@vegaprotocol/react-helpers';
+import compact from 'lodash/compact';
 
 const PERCENTAGE_PARAMS = [
   'governance.proposal.asset.requiredMajority',
@@ -57,7 +55,7 @@ const BIG_NUMBER_PARAMS = [
 export const NetworkParameterRow = ({
   row: { key, value },
 }: {
-  row: NetworkParametersQuery_networkParameters;
+  row: { key: string; value: string };
 }) => {
   const isSyntaxRow = suitableForSyntaxHighlighter(value);
 
@@ -86,18 +84,9 @@ export const NetworkParameterRow = ({
   );
 };
 
-export const NETWORK_PARAMETERS_QUERY = gql`
-  query NetworkParametersQuery {
-    networkParameters {
-      key
-      value
-    }
-  }
-`;
-
 export interface NetworkParametersTableProps
   extends React.HTMLAttributes<HTMLTableElement> {
-  data?: NetworkParametersQuery;
+  data?: NetworkParamsQuery | undefined;
   error?: Error;
   loading: boolean;
 }
@@ -118,7 +107,9 @@ export const NetworkParametersTable = ({
       error={error}
       render={(data) => {
         const ascParams = orderBy(
-          data.networkParameters || [],
+          compact(data.networkParametersConnection.edges).map(
+            ({ node }) => node
+          ) || [],
           (param) => param.key,
           'asc'
         );
@@ -135,8 +126,6 @@ export const NetworkParametersTable = ({
 );
 
 export const NetworkParameters = () => {
-  const { data, loading, error } = useQuery<NetworkParametersQuery>(
+  const { data, loading, error } = useNetworkParamsQuery();
-    NETWORK_PARAMETERS_QUERY
-  );
   return <NetworkParametersTable data={data} error={error} loading={loading} />;
 };

apps/token/src/hooks/NetworkParams.graphql

@@ -1,6 +0,0 @@
-query NetworkParams {
-  networkParameters {
-    key
-    value
-  }
-}

apps/token/src/hooks/__generated__/NetworkParams.ts

@@ -1,27 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: NetworkParams
-// ====================================================
-
-export interface NetworkParams_networkParameters {
-  __typename: "NetworkParameter";
-  /**
-   * The name of the network parameter
-   */
-  key: string;
-  /**
-   * The value of the network parameter
-   */
-  value: string;
-}
-
-export interface NetworkParams {
-  /**
-   * return the full list of network parameters
-   */
-  networkParameters: NetworkParams_networkParameters[] | null;
-}

apps/token/src/hooks/__generated___/NetworkParams.ts

@@ -1,46 +0,0 @@
-import { Schema as Types } from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type NetworkParamsQueryVariables = Types.Exact<{ [key: string]: never; }>;
-
-
-export type NetworkParamsQuery = { __typename?: 'Query', networkParameters?: Array<{ __typename?: 'NetworkParameter', key: string, value: string }> | null };
-
-
-export const NetworkParamsDocument = gql`
-    query NetworkParams {
-  networkParameters {
-    key
-    value
-  }
-}
-    `;
-
-/**
- * __useNetworkParamsQuery__
- *
- * To run a query within a React component, call `useNetworkParamsQuery` and pass it any options that fit your needs.
- * When your component renders, `useNetworkParamsQuery` 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 } = useNetworkParamsQuery({
- *   variables: {
- *   },
- * });
- */
-export function useNetworkParamsQuery(baseOptions?: Apollo.QueryHookOptions<NetworkParamsQuery, NetworkParamsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<NetworkParamsQuery, NetworkParamsQueryVariables>(NetworkParamsDocument, options);
-      }
-export function useNetworkParamsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NetworkParamsQuery, NetworkParamsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<NetworkParamsQuery, NetworkParamsQueryVariables>(NetworkParamsDocument, options);
-        }
-export type NetworkParamsQueryHookResult = ReturnType<typeof useNetworkParamsQuery>;
-export type NetworkParamsLazyQueryHookResult = ReturnType<typeof useNetworkParamsLazyQuery>;
-export type NetworkParamsQueryResult = Apollo.QueryResult<NetworkParamsQuery, NetworkParamsQueryVariables>;

apps/token/src/routes/governance/components/current-proposal-status/current-proposal-status.spec.tsx

@@ -1,9 +1,9 @@
 import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
 import { render, screen } from '@testing-library/react';
-import { NETWORK_PARAMETERS_QUERY } from '@vegaprotocol/react-helpers';
 import { ProposalRejectionReason, ProposalState } from '@vegaprotocol/types';
-import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
+import { NetworkParamsDocument } from '@vegaprotocol/react-helpers';
 import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
 import { generateProposal } from '../../test-helpers/generate-proposals';
 import { CurrentProposalStatus } from './current-proposal-status';
@@ -11,24 +11,30 @@ import type { Proposal_proposal } from '../../proposal/__generated__/Proposal';
 
 const networkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
   request: {
-    query: NETWORK_PARAMETERS_QUERY,
+    query: NetworkParamsDocument,
   },
   result: {
     data: {
-      networkParameters: [
+      networkParametersConnection: {
+        edges: [
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateNetParam.requiredMajority',
               value: '0.00000001',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateNetParam.requiredParticipation',
               value: '0.000000001',
             },
+          },
         ],
       },
     },
+  },
 };
 
 const renderComponent = ({ proposal }: { proposal: Proposal_proposal }) => {

apps/token/src/routes/governance/propose/freeform/propose-freeform.spec.tsx

@@ -5,9 +5,9 @@ import { mockWalletContext } from '../../test-helpers/mocks';
 import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { MemoryRouter as Router } from 'react-router-dom';
-import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
 import type { MockedResponse } from '@apollo/client/testing';
-import { NETWORK_PARAMETERS_QUERY } from '@vegaprotocol/react-helpers';
+import { NetworkParamsDocument } from '@vegaprotocol/react-helpers';
 
 jest.mock('@vegaprotocol/environment', () => ({
   useEnvironment: () => ({
@@ -17,44 +17,58 @@ jest.mock('@vegaprotocol/environment', () => ({
 
 const updateMarketNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
   request: {
-    query: NETWORK_PARAMETERS_QUERY,
+    query: NetworkParamsDocument,
   },
   result: {
     data: {
-      networkParameters: [
+      networkParametersConnection: {
+        edges: [
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.freeform.maxClose',
               value: '8760h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.freeform.maxEnact',
               value: '8760h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.freeform.minClose',
               value: '1h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.freeform.minEnact',
               value: '2h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.freeform.minProposerBalance',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'spam.protection.proposal.min.tokens',
               value: '1000000000000000000',
             },
+          },
         ],
       },
     },
+  },
 };
 
 const renderComponent = () =>

apps/token/src/routes/governance/propose/network-parameter/propose-network-parameter.spec.tsx

@@ -5,9 +5,9 @@ import { mockWalletContext } from '../../test-helpers/mocks';
 import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { MemoryRouter as Router } from 'react-router-dom';
-import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
+import { NetworkParamsDocument } from '@vegaprotocol/react-helpers';
 import type { MockedResponse } from '@apollo/client/testing';
-import { NETWORK_PARAMETERS_QUERY } from '@vegaprotocol/react-helpers';
 
 jest.mock('@vegaprotocol/environment', () => ({
   useEnvironment: () => ({
@@ -17,44 +17,58 @@ jest.mock('@vegaprotocol/environment', () => ({
 
 const updateMarketNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
   request: {
-    query: NETWORK_PARAMETERS_QUERY,
+    query: NetworkParamsDocument,
   },
   result: {
     data: {
-      networkParameters: [
+      networkParametersConnection: {
+        edges: [
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateNetParam.maxClose',
               value: '8760h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateNetParam.maxEnact',
               value: '8760h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateNetParam.minClose',
               value: '1h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateNetParam.minEnact',
               value: '2h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateNetParam.minProposerBalance',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'spam.protection.proposal.min.tokens',
               value: '1000000000000000000',
             },
+          },
         ],
       },
     },
+  },
 };
 
 const renderComponent = () =>

apps/token/src/routes/governance/propose/new-asset/propose-new-asset.spec.tsx

@@ -5,9 +5,9 @@ import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
 import { mockWalletContext } from '../../test-helpers/mocks';
 import { ProposeNewAsset } from './propose-new-asset';
-import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
 import type { MockedResponse } from '@apollo/client/testing';
-import { NETWORK_PARAMETERS_QUERY } from '@vegaprotocol/react-helpers';
+import { NetworkParamsDocument } from '@vegaprotocol/react-helpers';
 
 jest.mock('@vegaprotocol/environment', () => ({
   useEnvironment: () => ({
@@ -17,44 +17,58 @@ jest.mock('@vegaprotocol/environment', () => ({
 
 const newAssetNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
   request: {
-    query: NETWORK_PARAMETERS_QUERY,
+    query: NetworkParamsDocument,
   },
   result: {
     data: {
-      networkParameters: [
+      networkParametersConnection: {
+        edges: [
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.asset.maxClose',
               value: '8760h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.asset.maxEnact',
               value: '8760h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.asset.minClose',
               value: '1h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.asset.minEnact',
               value: '2h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.asset.minProposerBalance',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'spam.protection.proposal.min.tokens',
               value: '1000000000000000000',
             },
+          },
         ],
       },
     },
+  },
 };
 
 const renderComponent = () =>

apps/token/src/routes/governance/propose/new-market/propose-new-market.spec.tsx

@@ -6,8 +6,8 @@ import { AppStateProvider } from '../../../../contexts/app-state/app-state-provi
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { BrowserRouter as Router } from 'react-router-dom';
 import type { MockedResponse } from '@apollo/client/testing';
-import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
-import { NETWORK_PARAMETERS_QUERY } from '@vegaprotocol/react-helpers';
+import { NetworkParamsDocument } from '@vegaprotocol/react-helpers';
 
 jest.mock('@vegaprotocol/environment', () => ({
   useEnvironment: () => ({
@@ -17,44 +17,58 @@ jest.mock('@vegaprotocol/environment', () => ({
 
 const newMarketNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
   request: {
-    query: NETWORK_PARAMETERS_QUERY,
+    query: NetworkParamsDocument,
   },
   result: {
     data: {
-      networkParameters: [
+      networkParametersConnection: {
+        edges: [
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.market.maxClose',
               value: '8760h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.market.maxEnact',
               value: '8760h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.market.minClose',
               value: '1h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.market.minEnact',
               value: '2h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.market.minProposerBalance',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'spam.protection.proposal.min.tokens',
               value: '1000000000000000000',
             },
+          },
         ],
       },
     },
+  },
 };
 
 const renderComponent = () =>

apps/token/src/routes/governance/propose/raw/proposal-raw.spec.tsx

@@ -13,56 +13,73 @@ import {
 import { ProposeRaw } from './propose-raw';
 import { ProposalEventDocument } from '@vegaprotocol/governance';
 import type { ProposalEventSubscription } from '@vegaprotocol/governance';
-import { NETWORK_PARAMETERS_QUERY } from '@vegaprotocol/react-helpers';
+
-import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
+import { NetworkParamsDocument } from '@vegaprotocol/react-helpers';
 
 const paramsDelay = 20;
 
 const rawProposalNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
   request: {
-    query: NETWORK_PARAMETERS_QUERY,
+    query: NetworkParamsDocument,
   },
   result: {
     data: {
-      networkParameters: [
+      networkParametersConnection: {
+        edges: [
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.asset.minProposerBalance',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateAsset.minProposerBalance',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.market.minProposerBalance',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateMarket.minProposerBalance',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateNetParam.minProposerBalance',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.freeform.minProposerBalance',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'spam.protection.proposal.min.tokens',
               value: '1000000000000000000',
             },
+          },
         ],
       },
     },
+  },
   delay: paramsDelay,
 };
 

apps/token/src/routes/governance/propose/update-asset/propose-update-asset.spec.tsx

@@ -5,9 +5,9 @@ import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
 import { mockWalletContext } from '../../test-helpers/mocks';
 import { ProposeUpdateAsset } from './propose-update-asset';
-import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
 import type { MockedResponse } from '@apollo/client/testing';
-import { NETWORK_PARAMETERS_QUERY } from '@vegaprotocol/react-helpers';
+import { NetworkParamsDocument } from '@vegaprotocol/react-helpers';
 
 jest.mock('@vegaprotocol/environment', () => ({
   useEnvironment: () => ({
@@ -17,44 +17,58 @@ jest.mock('@vegaprotocol/environment', () => ({
 
 const updateAssetNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
   request: {
-    query: NETWORK_PARAMETERS_QUERY,
+    query: NetworkParamsDocument,
   },
   result: {
     data: {
-      networkParameters: [
+      networkParametersConnection: {
+        edges: [
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateAsset.maxClose',
               value: '8760h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateAsset.maxEnact',
               value: '8760h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateAsset.minClose',
               value: '1h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateAsset.minEnact',
               value: '2h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateAsset.minProposerBalance',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'spam.protection.proposal.min.tokens',
               value: '1000000000000000000',
             },
+          },
         ],
       },
     },
+  },
 };
 
 const renderComponent = () =>

apps/token/src/routes/governance/propose/update-market/propose-update-market.spec.tsx

@@ -6,51 +6,65 @@ import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
 import { mockWalletContext } from '../../test-helpers/mocks';
 import { ProposeUpdateMarket } from './propose-update-market';
-import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
 import { MARKETS_QUERY } from './propose-update-market';
 import type { ProposalMarketsQuery } from './__generated__/ProposalMarketsQuery';
-import { NETWORK_PARAMETERS_QUERY } from '@vegaprotocol/react-helpers';
+import { NetworkParamsDocument } from '@vegaprotocol/react-helpers';
 
 const updateMarketNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
   request: {
-    query: NETWORK_PARAMETERS_QUERY,
+    query: NetworkParamsDocument,
   },
   result: {
     data: {
-      networkParameters: [
+      networkParametersConnection: {
+        edges: [
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateMarket.maxClose',
               value: '8760h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateMarket.maxEnact',
               value: '8760h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateMarket.minClose',
               value: '1h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateMarket.minEnact',
               value: '2h0m0s',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'governance.proposal.updateMarket.minProposerBalance',
               value: '1',
             },
+          },
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'spam.protection.proposal.min.tokens',
               value: '1000000000000000000',
             },
+          },
         ],
       },
     },
+  },
 };
 
 const marketQueryMock: MockedResponse<ProposalMarketsQuery> = {

apps/token/src/routes/governance/test-helpers/mocks.ts

@@ -1,6 +1,6 @@
-import { NETWORK_PARAMS_QUERY } from '@vegaprotocol/web3';
+import { NetworkParamsDocument } from '@vegaprotocol/react-helpers';
 import type { MockedResponse } from '@apollo/client/testing';
-import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
 import type { PubKey } from '@vegaprotocol/wallet';
 
 export const mockPubkey: PubKey = {
@@ -29,19 +29,23 @@ const mockEthereumConfig = {
 
 export const networkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
   request: {
-    query: NETWORK_PARAMS_QUERY,
+    query: NetworkParamsDocument,
   },
   result: {
     data: {
-      networkParameters: [
+      networkParametersConnection: {
+        edges: [
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'blockchains.ethereumConfig',
               value: JSON.stringify(mockEthereumConfig),
             },
+          },
         ],
       },
     },
+  },
 };
 
 const oneMinute = 1000 * 60;

apps/trading-e2e/src/integration/global.cy.ts

@@ -81,7 +81,7 @@ describe('ethereum wallet', { tags: '@smoke' }, () => {
     // Using portfolio withdrawals tab is it requires Ethereum wallet connection
     cy.visit('/portfolio');
     cy.mockGQL((req) => {
-      aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters());
+      aliasQuery(req, 'NetworkParams', generateNetworkParameters());
     });
     cy.mockGQLSubscription();
     cy.get('main[data-testid="portfolio"]').should('exist');
@@ -89,7 +89,7 @@ describe('ethereum wallet', { tags: '@smoke' }, () => {
   });
 
   it('can connect', () => {
-    cy.wait('@NetworkParamsQuery');
+    cy.wait('@NetworkParams');
     cy.getByTestId('connect-eth-wallet-btn').click();
     cy.getByTestId('web3-connector-list').should('exist');
     cy.getByTestId('web3-connector-MetaMask').click();

apps/trading-e2e/src/support/mocks/generate-network-parameters.ts

@@ -1,13 +1,15 @@
 import merge from 'lodash/merge';
-import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
 import type { PartialDeep } from 'type-fest';
 
 export const generateNetworkParameters = (
   override?: PartialDeep<NetworkParamsQuery>
 ): NetworkParamsQuery => {
   const defaultResult: NetworkParamsQuery = {
-    networkParameters: [
+    networkParametersConnection: {
+      edges: [
         {
+          node: {
             __typename: 'NetworkParameter',
             key: 'blockchains.ethereumConfig',
             value: JSON.stringify({
@@ -31,7 +33,9 @@ export const generateNetworkParameters = (
               confirmations: 3,
             }),
           },
+        },
       ],
+    },
   };
   return merge(defaultResult, override);
 };

apps/trading-e2e/src/support/trading.ts

@@ -101,7 +101,7 @@ const mockTradingPage = (
   aliasQuery(req, 'Chart', generateChart());
   aliasQuery(req, 'Candles', generateCandles());
   aliasQuery(req, 'Withdrawals', generateWithdrawals());
-  aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters());
+  aliasQuery(req, 'NetworkParams', generateNetworkParameters());
   aliasQuery(req, 'EstimateOrder', generateEstimateOrder());
   aliasQuery(req, 'MarketMarkPrice', generateMarkPrice());
   aliasQuery(req, 'PartyBalance', generatePartyBalance());

libs/cypress/src/lib/commands/get-network-parameters.ts

@@ -11,7 +11,17 @@ declare global {
 export function addGetNetworkParameters() {
   // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
   Cypress.Commands.add('get_network_parameters', () => {
-    const mutation = '{networkParameters {key value}}';
+    const mutation = `
+  {
+    networkParametersConnection {
+      edges {
+        node {
+          key
+          value
+        }
+      }
+    }
+  }`;
     cy.request({
       method: 'POST',
       url: `http://localhost:3028/query`,
@@ -20,11 +30,12 @@ export function addGetNetworkParameters() {
       },
       headers: { 'content-type': 'application/json' },
     })
-      .its('body.data.networkParameters')
+      .its('body.data.networkParametersConnection.edges')
       .then(function (response) {
         // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
         const object = response.reduce(function (r, e) {
-          r[e.key] = e.value;
+          const { value, key } = e.node;
+          r[key] = value;
           return r;
         }, {});
         return object;

libs/liquidity/src/lib/liquidity-table.tsx

@@ -33,7 +33,7 @@ export interface LiquidityTableProps {
   data?: LiquidityProvisionData[];
   symbol?: string;
   assetDecimalPlaces?: number;
-  stakeToCcySiskas: string;
+  stakeToCcySiskas: string | null;
 }
 
 export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(

libs/react-helpers/src/hooks/NetworkParams.graphql

@@ -0,0 +1,17 @@
+query NetworkParams {
+  networkParametersConnection {
+    edges {
+      node {
+        key
+        value
+      }
+    }
+  }
+}
+
+query NetworkParam($key: String!) {
+  networkParameter(key: $key) {
+    key
+    value
+  }
+}

libs/react-helpers/src/hooks/__generated__/NetworkParam.ts

@@ -1,31 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: NetworkParam
-// ====================================================
-
-export interface NetworkParam_networkParameter {
-  __typename: "NetworkParameter";
-  /**
-   * The name of the network parameter
-   */
-  key: string;
-  /**
-   * The value of the network parameter
-   */
-  value: string;
-}
-
-export interface NetworkParam {
-  /**
-   * Return a single network parameter
-   */
-  networkParameter: NetworkParam_networkParameter | null;
-}
-
-export interface NetworkParamVariables {
-  key: string;
-}

libs/react-helpers/src/hooks/__generated__/NetworkParams.ts

@@ -1,27 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: NetworkParams
-// ====================================================
-
-export interface NetworkParams_networkParameters {
-  __typename: "NetworkParameter";
-  /**
-   * The name of the network parameter
-   */
-  key: string;
-  /**
-   * The value of the network parameter
-   */
-  value: string;
-}
-
-export interface NetworkParams {
-  /**
-   * Return the full list of network parameters
-   */
-  networkParameters: NetworkParams_networkParameters[] | null;
-}

libs/react-helpers/src/hooks/__generated___/NetworkParams.ts

@@ -0,0 +1,93 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type NetworkParamsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type NetworkParamsQuery = { __typename?: 'Query', networkParametersConnection: { __typename?: 'NetworkParametersConnection', edges?: Array<{ __typename?: 'NetworkParameterEdge', node: { __typename?: 'NetworkParameter', key: string, value: string } } | null> | null } };
+
+export type NetworkParamQueryVariables = Types.Exact<{
+  key: Types.Scalars['String'];
+}>;
+
+
+export type NetworkParamQuery = { __typename?: 'Query', networkParameter?: { __typename?: 'NetworkParameter', key: string, value: string } | null };
+
+
+export const NetworkParamsDocument = gql`
+    query NetworkParams {
+  networkParametersConnection {
+    edges {
+      node {
+        key
+        value
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useNetworkParamsQuery__
+ *
+ * To run a query within a React component, call `useNetworkParamsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useNetworkParamsQuery` 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 } = useNetworkParamsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useNetworkParamsQuery(baseOptions?: Apollo.QueryHookOptions<NetworkParamsQuery, NetworkParamsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NetworkParamsQuery, NetworkParamsQueryVariables>(NetworkParamsDocument, options);
+      }
+export function useNetworkParamsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NetworkParamsQuery, NetworkParamsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NetworkParamsQuery, NetworkParamsQueryVariables>(NetworkParamsDocument, options);
+        }
+export type NetworkParamsQueryHookResult = ReturnType<typeof useNetworkParamsQuery>;
+export type NetworkParamsLazyQueryHookResult = ReturnType<typeof useNetworkParamsLazyQuery>;
+export type NetworkParamsQueryResult = Apollo.QueryResult<NetworkParamsQuery, NetworkParamsQueryVariables>;
+export const NetworkParamDocument = gql`
+    query NetworkParam($key: String!) {
+  networkParameter(key: $key) {
+    key
+    value
+  }
+}
+    `;
+
+/**
+ * __useNetworkParamQuery__
+ *
+ * To run a query within a React component, call `useNetworkParamQuery` and pass it any options that fit your needs.
+ * When your component renders, `useNetworkParamQuery` 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 } = useNetworkParamQuery({
+ *   variables: {
+ *      key: // value for 'key'
+ *   },
+ * });
+ */
+export function useNetworkParamQuery(baseOptions: Apollo.QueryHookOptions<NetworkParamQuery, NetworkParamQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NetworkParamQuery, NetworkParamQueryVariables>(NetworkParamDocument, options);
+      }
+export function useNetworkParamLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NetworkParamQuery, NetworkParamQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NetworkParamQuery, NetworkParamQueryVariables>(NetworkParamDocument, options);
+        }
+export type NetworkParamQueryHookResult = ReturnType<typeof useNetworkParamQuery>;
+export type NetworkParamLazyQueryHookResult = ReturnType<typeof useNetworkParamLazyQuery>;
+export type NetworkParamQueryResult = Apollo.QueryResult<NetworkParamQuery, NetworkParamQueryVariables>;

libs/react-helpers/src/hooks/index.ts

@@ -1,4 +1,4 @@
-export * from './__generated__/NetworkParam';
+export * from './__generated___/NetworkParams';
 export * from './use-apply-grid-transaction';
 export * from './use-data-provider';
 export * from './use-fetch';

libs/react-helpers/src/hooks/use-network-params.spec.tsx

@@ -4,19 +4,19 @@ import { MockedProvider } from '@apollo/client/testing';
 import type { NetworkParamsKey } from './use-network-params';
 import {
   NetworkParams,
-  NETWORK_PARAMETERS_QUERY,
-  NETWORK_PARAMETER_QUERY,
   useNetworkParam,
   useNetworkParams,
 } from './use-network-params';
 import type { ReactNode } from 'react';
-import type { NetworkParams as NetworkParamsResponse } from './__generated__/NetworkParams';
+import type { NetworkParamsQuery } from './__generated___/NetworkParams';
+import { NetworkParamDocument } from './__generated___/NetworkParams';
+import { NetworkParamsDocument } from './__generated___/NetworkParams';
 
 describe('useNetworkParam', () => {
   const setup = (arg: NetworkParamsKey) => {
     const mock: MockedResponse = {
       request: {
-        query: NETWORK_PARAMETER_QUERY,
+        query: NetworkParamDocument,
         variables: {
           key: arg,
         },
@@ -51,31 +51,39 @@ describe('useNetworkParam', () => {
 
 describe('useNetworkParams', () => {
   const setup = (args?: NetworkParamsKey[]) => {
-    const mock: MockedResponse<NetworkParamsResponse> = {
+    const mock: MockedResponse<NetworkParamsQuery> = {
       request: {
-        query: NETWORK_PARAMETERS_QUERY,
+        query: NetworkParamsDocument,
       },
       result: {
         data: {
-          networkParameters: [
+          networkParametersConnection: {
+            edges: [
               {
+                node: {
                   __typename: 'NetworkParameter',
                   key: 'spam.protection.proposal.min.tokens',
                   value: '1',
                 },
+              },
               {
+                node: {
                   __typename: 'NetworkParameter',
                   key: 'governance.proposal.updateMarket.minProposerBalance',
                   value: '2',
                 },
+              },
               {
+                node: {
                   __typename: 'NetworkParameter',
                   key: 'reward.staking.delegation.payoutDelay',
                   value: '200',
                 },
+              },
             ],
           },
         },
+      },
     };
     const wrapper = ({ children }: { children: ReactNode }) => (
       <MockedProvider mocks={[mock]}>{children}</MockedProvider>

libs/react-helpers/src/hooks/use-network-params.ts

@@ -1,24 +1,9 @@
-import { gql, useQuery } from '@apollo/client';
+import compact from 'lodash/compact';
 import { useMemo } from 'react';
-import type { NetworkParams as NetworkParamsResponse } from './__generated__/NetworkParams';
+import {
-
+  useNetworkParamQuery,
-export const NETWORK_PARAMETERS_QUERY = gql`
+  useNetworkParamsQuery,
-  query NetworkParams {
+} from './__generated___/NetworkParams';
-    networkParameters {
-      key
-      value
-    }
-  }
-`;
-
-export const NETWORK_PARAMETER_QUERY = gql`
-  query NetworkParam($key: String!) {
-    networkParameter(key: $key) {
-      key
-      value
-    }
-  }
-`;
 
 export const NetworkParams = {
   blockchains_ethereumConfig: 'blockchains_ethereumConfig',
@@ -126,16 +111,14 @@ type Result = {
 };
 
 export const useNetworkParams = <T extends NetworkParamsKey[]>(params?: T) => {
-  const { data, loading, error } = useQuery<NetworkParamsResponse, never>(
+  const { data, loading, error } = useNetworkParamsQuery();
-    NETWORK_PARAMETERS_QUERY
-  );
 
   const paramsObj = useMemo(() => {
-    if (!data?.networkParameters) return null;
+    if (!data?.networkParametersConnection.edges) return null;
-    return data.networkParameters
+    return compact(data.networkParametersConnection.edges)
       .map((p) => ({
-        ...p,
+        ...p.node,
-        key: p.key.split('.').join('_'),
+        key: p.node.key.split('.').join('_'),
       }))
       .filter((p) => {
         if (params === undefined || params.length === 0) return true;
@@ -156,11 +139,12 @@ export const useNetworkParams = <T extends NetworkParamsKey[]>(params?: T) => {
 };
 
 export const useNetworkParam = (param: NetworkParamsKey) => {
-  const { data, loading, error } = useQuery(NETWORK_PARAMETER_QUERY, {
+  const { data, loading, error } = useNetworkParamQuery({
     variables: {
       key: param,
     },
   });
+
   return {
     param: data?.networkParameter ? data.networkParameter.value : null,
     loading,

libs/web3/src/index.ts

@@ -1,5 +1,4 @@
 export * from './lib/ethereum-error';
-export * from './lib/__generated__/NetworkParamsQuery';
 export * from './lib/use-bridge-contract';
 export * from './lib/use-token-contract';
 export * from './lib/use-token-decimals';

libs/web3/src/lib/NetworkParams.graphql

@@ -1,6 +0,0 @@
-query NetworkParamsQuery {
-  networkParameters {
-    key
-    value
-  }
-}

libs/web3/src/lib/__generated__/NetworkParamsQuery.ts

@@ -1,27 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: NetworkParamsQuery
-// ====================================================
-
-export interface NetworkParamsQuery_networkParameters {
-  __typename: "NetworkParameter";
-  /**
-   * The name of the network parameter
-   */
-  key: string;
-  /**
-   * The value of the network parameter
-   */
-  value: string;
-}
-
-export interface NetworkParamsQuery {
-  /**
-   * Return the full list of network parameters
-   */
-  networkParameters: NetworkParamsQuery_networkParameters[] | null;
-}

libs/web3/src/lib/__generated___/NetworkParams.ts

@@ -1,46 +0,0 @@
-import { Schema as Types } from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type NetworkParamsQueryQueryVariables = Types.Exact<{ [key: string]: never; }>;
-
-
-export type NetworkParamsQueryQuery = { __typename?: 'Query', networkParameters?: Array<{ __typename?: 'NetworkParameter', key: string, value: string }> | null };
-
-
-export const NetworkParamsQueryDocument = gql`
-    query NetworkParamsQuery {
-  networkParameters {
-    key
-    value
-  }
-}
-    `;
-
-/**
- * __useNetworkParamsQueryQuery__
- *
- * To run a query within a React component, call `useNetworkParamsQueryQuery` and pass it any options that fit your needs.
- * When your component renders, `useNetworkParamsQueryQuery` 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 } = useNetworkParamsQueryQuery({
- *   variables: {
- *   },
- * });
- */
-export function useNetworkParamsQueryQuery(baseOptions?: Apollo.QueryHookOptions<NetworkParamsQueryQuery, NetworkParamsQueryQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<NetworkParamsQueryQuery, NetworkParamsQueryQueryVariables>(NetworkParamsQueryDocument, options);
-      }
-export function useNetworkParamsQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NetworkParamsQueryQuery, NetworkParamsQueryQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<NetworkParamsQueryQuery, NetworkParamsQueryQueryVariables>(NetworkParamsQueryDocument, options);
-        }
-export type NetworkParamsQueryQueryHookResult = ReturnType<typeof useNetworkParamsQueryQuery>;
-export type NetworkParamsQueryLazyQueryHookResult = ReturnType<typeof useNetworkParamsQueryLazyQuery>;
-export type NetworkParamsQueryQueryResult = Apollo.QueryResult<NetworkParamsQueryQuery, NetworkParamsQueryQueryVariables>;

libs/web3/src/lib/use-ethereum-config.ts

@@ -1,6 +1,6 @@
-import { gql, useQuery } from '@apollo/client';
+import { useNetworkParamsQuery } from '@vegaprotocol/react-helpers';
+import compact from 'lodash/compact';
 import { useMemo } from 'react';
-import type { NetworkParamsQuery } from './__generated__/NetworkParamsQuery';
 
 export interface EthereumConfig {
   network_id: string;
@@ -23,27 +23,17 @@ export interface EthereumConfig {
   };
 }
 
-export const NETWORK_PARAMS_QUERY = gql`
-  query NetworkParamsQuery {
-    networkParameters {
-      key
-      value
-    }
-  }
-`;
-
 export const useEthereumConfig = () => {
-  const { data, loading, error } =
+  const { data, loading, error } = useNetworkParamsQuery();
-    useQuery<NetworkParamsQuery>(NETWORK_PARAMS_QUERY);
 
   const config = useMemo(() => {
     if (!data) {
       return null;
     }
 
-    const param = data.networkParameters?.find(
+    const param = compact(data.networkParametersConnection.edges)
-      (np) => np.key === 'blockchains.ethereumConfig'
+      .map(({ node }) => node)
-    );
+      ?.find((node) => node.key === 'blockchains.ethereumConfig');
 
     if (!param) {
       return null;

libs/web3/src/lib/web3-container.spec.tsx

@@ -3,8 +3,8 @@ import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
 import { Web3Container } from './web3-container';
 import type { useWeb3React } from '@web3-react/core';
-import type { NetworkParamsQuery } from './__generated__/NetworkParamsQuery';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
-import { NETWORK_PARAMS_QUERY } from './use-ethereum-config';
+import { NetworkParamsDocument } from '@vegaprotocol/react-helpers';
 import { EnvironmentProvider } from '@vegaprotocol/environment';
 
 const defaultHookValue = {
@@ -26,19 +26,23 @@ const mockEthereumConfig = {
 
 const networkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
   request: {
-    query: NETWORK_PARAMS_QUERY,
+    query: NetworkParamsDocument,
   },
   result: {
     data: {
-      networkParameters: [
+      networkParametersConnection: {
+        edges: [
           {
+            node: {
               __typename: 'NetworkParameter',
               key: 'blockchains.ethereumConfig',
               value: JSON.stringify(mockEthereumConfig),
             },
+          },
         ],
       },
     },
+  },
 };
 
 const mockEnvironment = {
@@ -135,19 +139,23 @@ it('Passes ethereum config to children', async () => {
 it('Shows no config found message if the network parameter doesnt exist', async () => {
   const mock: MockedResponse<NetworkParamsQuery> = {
     request: {
-      query: NETWORK_PARAMS_QUERY,
+      query: NetworkParamsDocument,
     },
     result: {
       data: {
-        networkParameters: [
+        networkParametersConnection: {
+          edges: [
             {
+              node: {
                 __typename: 'NetworkParameter',
                 key: 'nope',
                 value: 'foo',
               },
+            },
           ],
         },
       },
+    },
   };
   setup(mock);
   expect(screen.getByText('Loading...')).toBeInTheDocument();