chore: stop poll of query errors

apps/trading/components/app-loader/index.tsx

@@ -9,6 +9,7 @@ import {
   useWeb3ConnectStore,
 } from '@vegaprotocol/web3';
 import { AsyncRenderer, Loader } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/react-helpers';
 
 interface AppLoaderProps {
   children: ReactNode;
@@ -64,6 +65,7 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => {
         if (!d) return true;
         return d.length < 1;
       }}
+      noDataMessage={t('Could not fetch Ethereum configuration')}
     >
       <Web3ProviderInternal connectors={connectors}>
         <>{children}</>

libs/environment/src/components/node-switcher-2/node-switcher.tsx

@@ -95,6 +95,9 @@ export const NodeSwitcherContainer = ({
             </span>
             {t(' chain ID')}
           </p>
+          <p className="text-lg mt-4">
+            {t('Select a GraphQL node to connect to:')}
+          </p>
           <RadioGroup
             value={nodeRadio}
             onChange={(value) => setNodeRadio(value)}
@@ -154,6 +157,15 @@ export const NodeSwitcherContainer = ({
   );
 };
 
+interface CustomRowWrapperProps {
+  inputText: string;
+  setInputText: (text: string) => void;
+  nodes: string[];
+  highestBlock: number | null;
+  nodeRadio: string;
+  onBlockHeight: (blockHeight: number) => void;
+}
+
 const CustomRowWrapper = ({
   inputText,
   setInputText,
@@ -161,20 +173,13 @@ const CustomRowWrapper = ({
   highestBlock,
   nodeRadio,
   onBlockHeight,
-}: {
-  inputText: string;
-  setInputText: (text: string) => void;
-  nodes: string[];
-  highestBlock: number | null;
-  nodeRadio: string;
-  onBlockHeight: (blockHeight: number) => void;
-}) => {
+}: CustomRowWrapperProps) => {
   const [displayCustom, setDisplayCustom] = useState(false);
-  const showInput = nodeRadio === CUSTOM_NODE_KEY || nodes.length <= 0;
   const [error, setError] = useState<string | null>(null);
+  const showInput = nodeRadio === CUSTOM_NODE_KEY || nodes.length <= 0;
 
   return (
-    <LayoutRow>
+    <LayoutRow dataTestId="custom-row">
       <div className="flex w-full mb-2">
         {nodes.length > 0 && (
           <Radio

libs/environment/src/components/node-switcher-2/node-swticher.spec.tsx

@@ -16,8 +16,7 @@ jest.mock('./apollo-wrapper', () => ({
 global.performance.getEntriesByName = jest.fn().mockReturnValue([]);
 
 const mockEnv = (env: Partial<EnvStore>) => {
-  // @ts-ignore typescript not playing nice with mocks
-  useEnvironment.mockImplementation(() => env);
+  (useEnvironment as unknown as jest.Mock).mockImplementation(() => env);
 };
 
 describe('NodeSwitcherContainer', () => {
@@ -104,17 +103,10 @@ describe('NodeSwitcherContainer', () => {
     ).toHaveAttribute('disabled');
   });
 
-  it.todo('disables nodes based on state');
-  it.todo('allows connecting to a valid node');
-
   it('allows setting a custom node', () => {
     const mockSetUrl = jest.fn();
     const mockUrl = 'https://custom.url';
-    const nodes = [
-      'https://n00.api.vega.xyz',
-      'https://n01.api.vega.xyz',
-      'https://n02.api.vega.xyz',
-    ];
+    const nodes = ['https://n00.api.vega.xyz'];
     mockEnv({
       VEGA_ENV: Networks.TESTNET,
       nodes,
@@ -132,18 +124,22 @@ describe('NodeSwitcherContainer', () => {
         value: mockUrl,
       },
     });
+
+    expect(screen.getByRole('textbox')).toHaveValue(mockUrl);
     expect(screen.getByRole('button', { name: 'Check' })).not.toBeDisabled();
 
+    fireEvent.click(screen.getByRole('button', { name: 'Check' }));
+
+    const customRow = within(screen.getByTestId('custom-row'));
+    expect(customRow.getByTestId('block-height-cell')).toBeInTheDocument();
+
     fireEvent.click(
       screen.getByRole('button', { name: 'Connect to this node' })
     );
-
     expect(mockSetUrl).toHaveBeenCalledWith(mockUrl);
   });
 
-  it.todo('disables a custom node');
-
-  it('disables a custom with an invalid url', () => {
+  it('disables a custom node with an invalid url', () => {
     const mockSetUrl = jest.fn();
     const mockUrl = 'invalid-url';
     const nodes = [
@@ -173,5 +169,6 @@ describe('NodeSwitcherContainer', () => {
       })
     ).toBeDisabled();
   });
+
   it.todo('displays errors');
 });

libs/environment/src/components/node-switcher-2/row-data.tsx

@@ -25,29 +25,38 @@ export const RowData = ({
 }: RowDataProps) => {
   const [time, setTime] = useState<number>();
   // no use of data here as we need the data nodes reference to block height
-  const { data, error, loading } = useStatisticsQuery({
-    pollInterval: POLL_INTERVAL,
-    // fix for pollInterval
-    // https://github.com/apollographql/apollo-client/issues/9819
-    ssr: false,
-  });
+  const { data, error, loading, startPolling, stopPolling } =
+    useStatisticsQuery({
+      pollInterval: POLL_INTERVAL,
+      // fix for pollInterval
+      // https://github.com/apollographql/apollo-client/issues/9819
+      ssr: false,
+    });
   const headerStore = useHeaderStore();
   const headers = headerStore[url];
 
-  // useEffect(() => {
-  //   const handleStartPoll = () => startPolling(POLL_INTERVAL);
-  //   const handleStopPoll = () => stopPolling();
+  useEffect(() => {
+    // stop polling if row has errored
+  }, [error, stopPolling]);
 
-  //   // TODO: possibly remove blur focus handling.
+  useEffect(() => {
+    const handleStartPoll = () => startPolling(POLL_INTERVAL);
+    const handleStopPoll = () => stopPolling();
 
-  //   window.addEventListener('blur', handleStopPoll);
-  //   window.addEventListener('focus', handleStartPoll);
-  //   handleStartPoll();
-  //   return () => {
-  //     window.removeEventListener('blur', handleStopPoll);
-  //     window.removeEventListener('focus', handleStartPoll);
-  //   };
-  // }, [startPolling, stopPolling]);
+    window.addEventListener('blur', handleStopPoll);
+    window.addEventListener('focus', handleStartPoll);
+
+    handleStartPoll();
+
+    if (error) {
+      stopPolling();
+    }
+
+    return () => {
+      window.removeEventListener('blur', handleStopPoll);
+      window.removeEventListener('focus', handleStartPoll);
+    };
+  }, [startPolling, stopPolling, error]);
 
   useEffect(() => {
     if (!isValidUrl(url)) return;
@@ -122,7 +131,7 @@ export const RowData = ({
       )}
       <LayoutCell
         label={t('Response time')}
-        isLoading={loading || time === undefined}
+        isLoading={!error && loading}
         hasError={Boolean(error)}
         dataTestId="response-time-cell"
       >