use available node version

Co-authored-by: Dariusz Majcherczyk <dariusz.majcherczyk@gmail.com>

README.md

@@ -136,7 +136,7 @@ The [`docker`](./docker) subfolder has some docker configurations for easily set
 Using multistage dockerfile dist is compiled using [node](https://hub.docker.com/_/node) image and later packed to nginx as in [dist build](#dist-build). The multistage builds ensures consistent CPU architecture and build toolchains are used so that the result will be identical.
 
 ```bash
-docker build --build-arg APP=[YOUR APP] --build-arg NODE_VERSION=20.9.1 --build-arg ENV_NAME=mainnet -t [TAG] -f docker/node-inside-docker.Dockerfile .
+docker build --build-arg APP=[YOUR APP] --build-arg NODE_VERSION=20.11 --build-arg ENV_NAME=mainnet -t [TAG] -f docker/node-inside-docker.Dockerfile .
 ```
 
 ### Computing ipfs-hash of the build

apps/trading/assets/manifest.json

@@ -1,22 +0,0 @@
-{
-  "name": "Vega Protocol - Trading",
-  "short_name": "Console",
-  "description": "Vega Protocol - Trading dApp",
-  "start_url": "/",
-  "display": "standalone",
-  "orientation": "portrait",
-  "theme_color": "#000000",
-  "background_color": "#ffffff",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    }
-  ]
-}

apps/trading/components/bootstrapper/bootstrapper.tsx

@@ -1,63 +1,126 @@
 import type { InMemoryCacheConfig } from '@apollo/client';
 import {
-  AppFailure,
   AppLoader,
   NetworkLoader,
-  NodeFailure,
-  NodeGuard,
   useEnvironment,
+  useNodeSwitcherStore,
 } from '@vegaprotocol/environment';
-import { type ReactNode } from 'react';
+import { useEffect, type ReactNode, useState } from 'react';
 import { Web3Provider } from './web3-provider';
 import { useT } from '../../lib/use-t';
 import { DataLoader } from './data-loader';
 import { WalletProvider } from '@vegaprotocol/wallet-react';
 import { useVegaWalletConfig } from '../../lib/hooks/use-vega-wallet-config';
+import { Trans } from 'react-i18next';
+import { Button, Loader, Splash, VLogo } from '@vegaprotocol/ui-toolkit';
+
+const Failure = ({ reason }: { reason?: ReactNode }) => {
+  const t = useT();
+  const setNodeSwitcher = useNodeSwitcherStore((store) => store.setDialogOpen);
+  return (
+    <Splash>
+      <div className="border border-vega-red m-10 mx-auto w-4/5 max-w-3xl rounded-lg overflow-hidden animate-shake">
+        <div className="bg-vega-red text-white px-2 py-2 flex gap-1 items-center font-alpha calt uppercase">
+          <VLogo className="h-4" />
+          <span className="text-lg">{t('Failed to initialize the app')}</span>
+        </div>
+        <div className="p-4 text-left text-sm">
+          <p className="mb-4">{reason}</p>
+          <div className="text-center">
+            <Button className="border-2" onClick={() => setNodeSwitcher(true)}>
+              {t('Change node')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Splash>
+  );
+};
+
+const Loading = () => {
+  const [showSlowNotification, setShowSlowNotification] = useState(false);
+  const t = useT();
+  const setNodeSwitcher = useNodeSwitcherStore((store) => store.setDialogOpen);
+  useEffect(() => {
+    const to = setTimeout(() => {
+      if (!showSlowNotification) setShowSlowNotification(true);
+    }, 5000);
+    return () => {
+      clearTimeout(to);
+    };
+  }, [showSlowNotification]);
+  return (
+    <Splash>
+      <div className="border border-transparent m-10 mx-auto w-4/5 max-w-3xl rounded-lg overflow-hidden">
+        <div className="mt-11 p-4 text-left text-sm">
+          <Loader />
+          {showSlowNotification && (
+            <>
+              <p className="mt-4 text-center">
+                {t(
+                  "It looks like you're connection is slow, try switching to another node."
+                )}
+              </p>
+              <div className="mt-4 text-center">
+                <Button
+                  className="border-2"
+                  onClick={() => setNodeSwitcher(true)}
+                >
+                  {t('Change node')}
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </Splash>
+  );
+};
 
 export const Bootstrapper = ({ children }: { children: ReactNode }) => {
   const t = useT();
-  const { error, VEGA_URL } = useEnvironment();
+
+  const { error, VEGA_URL } = useEnvironment((state) => ({
+    error: state.error,
+    VEGA_URL: state.VEGA_URL,
+  }));
   const config = useVegaWalletConfig();
 
   if (!config) {
     return <AppLoader />;
   }
 
+  const ERR_DATA_LOADER = (
+    <Trans
+      i18nKey="It appears that the connection to the node <0>{{VEGA_URL}}</0> does not return necessary data, try switching to another node."
+      components={[
+        <span key="vega" className="text-muted">
+          {VEGA_URL}
+        </span>,
+      ]}
+      values={{
+        VEGA_URL,
+      }}
+    />
+  );
+
   return (
     <NetworkLoader
       cache={cacheConfig}
-      skeleton={<AppLoader />}
-      failure={
-        <AppFailure title={t('Could not initialize app')} error={error} />
-      }
+      skeleton={<Loading />}
+      failure={<Failure reason={error} />}
     >
-      <NodeGuard
-        skeleton={<AppLoader />}
-        failure={
-          <NodeFailure
-            title={t('Node: {{VEGA_URL}} is unsuitable', { VEGA_URL })}
-          />
-        }
+      <DataLoader
+        skeleton={<Loading />}
+        failure={<Failure reason={ERR_DATA_LOADER} />}
       >
-        <DataLoader
-          skeleton={<AppLoader />}
-          failure={
-            <AppFailure
-              title={t('Could not load market data or asset data')}
-              error={error}
-            />
-          }
+        <Web3Provider
+          skeleton={<Loading />}
+          failure={<Failure reason={t('Could not configure web3 provider')} />}
         >
-          <Web3Provider
-            skeleton={<AppLoader />}
-            failure={
-              <AppFailure title={t('Could not configure web3 provider')} />
-            }
-          >
-            <WalletProvider config={config}>{children}</WalletProvider>
-          </Web3Provider>
-        </DataLoader>
-      </NodeGuard>
+          <WalletProvider config={config}>{children}</WalletProvider>
+        </Web3Provider>
+      </DataLoader>
     </NetworkLoader>
   );
 };
@@ -107,6 +170,9 @@ const cacheConfig: InMemoryCacheConfig = {
     Fees: {
       keyFields: false,
     },
+    PartyProfile: {
+      keyFields: ['partyId'],
+    },
     // The folling types are cached by the data provider and not by apollo
     PositionUpdate: {
       keyFields: false,

apps/trading/components/navbar/navbar.spec.tsx

@@ -8,6 +8,12 @@ import {
   mockConfig,
   MockedWalletProvider,
 } from '@vegaprotocol/wallet-react/testing';
+import { MockedProvider, type MockedResponse } from '@apollo/react-testing';
+import {
+  PartyProfilesDocument,
+  type PartyProfilesQuery,
+  type PartyProfilesQueryVariables,
+} from '../vega-wallet-connect-button/__generated__/PartyProfiles';
 
 jest.mock('@vegaprotocol/proposals', () => ({
   ProtocolUpgradeCountdown: () => null,
@@ -24,15 +30,45 @@ describe('Navbar', () => {
       publicKey: '2'.repeat(64),
     },
   ];
+  const key1Alias = 'key 1 alias';
   const marketId = 'abc';
   const navbarContent = 'navbar-menu-content';
 
+  const partyProfilesMock: MockedResponse<
+    PartyProfilesQuery,
+    PartyProfilesQueryVariables
+  > = {
+    request: {
+      query: PartyProfilesDocument,
+      variables: {
+        partyIds: mockKeys.map((k) => k.publicKey),
+      },
+    },
+    result: {
+      data: {
+        partiesProfilesConnection: {
+          edges: [
+            {
+              node: {
+                partyId: mockKeys[0].publicKey,
+                alias: key1Alias,
+                metadata: [],
+              },
+            },
+          ],
+        },
+      },
+    },
+  };
+
   const renderComponent = (initialEntries?: string[]) => {
     return render(
       <MemoryRouter initialEntries={initialEntries}>
-        <MockedWalletProvider>
-          <Navbar />
-        </MockedWalletProvider>
+        <MockedProvider mocks={[partyProfilesMock]}>
+          <MockedWalletProvider>
+            <Navbar />
+          </MockedWalletProvider>
+        </MockedProvider>
       </MemoryRouter>
     );
   };
@@ -140,6 +176,7 @@ describe('Navbar', () => {
     const activeKey = within(menu.getByTestId(/key-1+-mobile/));
     expect(activeKey.getByText(mockKeys[0].name)).toBeInTheDocument();
     expect(activeKey.getByTestId('icon-tick')).toBeInTheDocument();
+    expect(screen.getByText(key1Alias)).toBeInTheDocument();
 
     const inactiveKey = within(menu.getByTestId(/key-2+-mobile/));
     await userEvent.click(inactiveKey.getByText(mockKeys[1].name));

apps/trading/components/profile-dialog/profile-dialog.tsx

@@ -31,39 +31,27 @@ export const ProfileDialog = () => {
   const pubKey = useProfileDialogStore((store) => store.pubKey);
   const setOpen = useProfileDialogStore((store) => store.setOpen);
 
-  const { send, status, error, reset } = useSimpleTransaction({
-    onSuccess: () => {
-      refetch();
-    },
-  });
-
   const profileEdge = data?.partiesProfilesConnection?.edges.find(
     (e) => e.node.partyId === pubKey
   );
 
-  const sendTx = (field: FormFields) => {
-    send({
-      updatePartyProfile: {
-        alias: field.alias,
-        metadata: [],
-      },
-    });
-  };
-
   return (
     <Dialog
       open={open}
       onChange={() => {
         setOpen(undefined);
-        reset();
       }}
       title={t('Edit profile')}
     >
-      <ProfileForm
+      <ProfileFormContainer
         profile={profileEdge?.node}
-        status={status}
-        error={error}
-        onSubmit={sendTx}
+        onSuccess={() => {
+          refetch();
+
+          setTimeout(() => {
+            setOpen(undefined);
+          }, 1000);
+        }}
       />
     </Dialog>
   );
@@ -77,6 +65,32 @@ type Profile = NonNullable<
   PartyProfilesQuery['partiesProfilesConnection']
 >['edges'][number]['node'];
 
+const ProfileFormContainer = ({
+  profile,
+  onSuccess,
+}: {
+  profile: Profile | undefined;
+  onSuccess: () => void;
+}) => {
+  const { send, status, error } = useSimpleTransaction({ onSuccess });
+  const sendTx = (field: FormFields) => {
+    send({
+      updatePartyProfile: {
+        alias: field.alias,
+        metadata: [],
+      },
+    });
+  };
+  return (
+    <ProfileForm
+      profile={profile}
+      status={status}
+      error={error}
+      onSubmit={sendTx}
+    />
+  );
+};
+
 const ProfileForm = ({
   profile,
   onSubmit,
@@ -114,6 +128,14 @@ const ProfileForm = ({
 
   const errorMessage = errors.alias?.message || error;
 
+  if (status === 'confirmed') {
+    return (
+      <p className="mt-2 mb-4 text-sm text-vega-green-600 dark:text-vega-green">
+        {t('Profile updated')}
+      </p>
+    );
+  }
+
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="mt-3">
       <FormGroup label="Alias" labelFor="alias">
@@ -131,12 +153,6 @@ const ProfileForm = ({
             </p>
           </InputError>
         )}
-
-        {status === 'confirmed' && (
-          <p className="mt-2 mb-4 text-sm text-success">
-            {t('Profile updated')}
-          </p>
-        )}
       </FormGroup>
       <TradingButton
         type="submit"

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx

@@ -94,6 +94,7 @@ export const VegaWalletConnectButton = ({
             <KeypairRadioGroup
               pubKey={pubKey}
               pubKeys={pubKeys}
+              activeKey={activeKey?.publicKey}
               onSelect={selectPubKey}
             />
             <TradingDropdownSeparator />
@@ -138,15 +139,18 @@ export const VegaWalletConnectButton = ({
 const KeypairRadioGroup = ({
   pubKey,
   pubKeys,
+  activeKey,
   onSelect,
 }: {
   pubKey: string | undefined;
   pubKeys: Key[];
+  activeKey: string | undefined;
   onSelect: (pubKey: string) => void;
 }) => {
   const { data } = usePartyProfilesQuery({
     variables: { partyIds: pubKeys.map((pk) => pk.publicKey) },
     skip: pubKeys.length <= 0,
+    fetchPolicy: 'cache-and-network',
   });
 
   return (
@@ -156,14 +160,27 @@ const KeypairRadioGroup = ({
           (e) => e.node.partyId === pk.publicKey
         );
         return (
-          <KeypairItem key={pk.publicKey} pk={pk} alias={profile?.node.alias} />
+          <KeypairItem
+            key={pk.publicKey}
+            pk={pk}
+            isActive={activeKey === pk.publicKey}
+            alias={profile?.node.alias}
+          />
         );
       })}
     </TradingDropdownRadioGroup>
   );
 };
 
-const KeypairItem = ({ pk, alias }: { pk: Key; alias: string | undefined }) => {
+const KeypairItem = ({
+  pk,
+  isActive,
+  alias,
+}: {
+  pk: Key;
+  alias: string | undefined;
+  isActive: boolean;
+}) => {
   const t = useT();
   const [copied, setCopied] = useCopyTimeout();
   const setOpen = useProfileDialogStore((store) => store.setOpen);
@@ -194,8 +211,13 @@ const KeypairItem = ({ pk, alias }: { pk: Key; alias: string | undefined }) => {
           data-testid={`key-${pk.publicKey}`}
         >
           <Tooltip description={t('Public facing key alias. Click to edit')}>
-            <button data-testid="alias" onClick={() => setOpen(pk.publicKey)}>
+            <button
+              data-testid="alias"
+              onClick={() => setOpen(pk.publicKey)}
+              className="flex items-center gap-1"
+            >
               {alias ? alias : t('No alias')}
+              {isActive && <VegaIcon name={VegaIconNames.EDIT} />}
             </button>
           </Tooltip>
         </div>

apps/trading/components/vega-wallet/vega-wallet-menu.tsx

@@ -12,6 +12,8 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { ViewType, useSidebar } from '../sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
+import { usePartyProfilesQuery } from '../vega-wallet-connect-button/__generated__/PartyProfiles';
+import { useProfileDialogStore } from '../../stores/profile-dialog-store';
 
 export const VegaWalletMenu = ({
   setMenu,
@@ -23,6 +25,12 @@ export const VegaWalletMenu = ({
   const currentRouteId = useGetCurrentRouteId();
   const setViews = useSidebar((store) => store.setViews);
 
+  const { data } = usePartyProfilesQuery({
+    variables: { partyIds: pubKeys.map((pk) => pk.publicKey) },
+    skip: pubKeys.length <= 0,
+    fetchPolicy: 'cache-and-network',
+  });
+
   const activeKey = useMemo(() => {
     return pubKeys?.find((pk) => pk.publicKey === pubKey);
   }, [pubKey, pubKeys]);
@@ -37,14 +45,21 @@ export const VegaWalletMenu = ({
   return (
     <div>
       <div className="grow my-4" role="list">
-        {(pubKeys || []).map((pk) => (
-          <KeypairListItem
-            key={pk.publicKey}
-            pk={pk}
-            isActive={activeKey?.publicKey === pk.publicKey}
-            onSelectItem={onSelectItem}
-          />
-        ))}
+        {(pubKeys || []).map((pk) => {
+          const profile = data?.partiesProfilesConnection?.edges.find(
+            (e) => e.node.partyId === pk.publicKey
+          );
+          return (
+            <KeypairListItem
+              key={pk.publicKey}
+              pk={pk}
+              isActive={activeKey?.publicKey === pk.publicKey}
+              onSelectItem={onSelectItem}
+              alias={profile?.node.alias}
+              setMenu={setMenu}
+            />
+          );
+        })}
       </div>
 
       <div className="flex flex-col gap-2 m-4">
@@ -72,18 +87,23 @@ export const VegaWalletMenu = ({
 const KeypairListItem = ({
   pk,
   isActive,
+  alias,
   onSelectItem,
+  setMenu,
 }: {
   pk: Key;
   isActive: boolean;
+  alias: string | undefined;
   onSelectItem: (pk: string) => void;
+  setMenu: (open: 'nav' | 'wallet' | null) => void;
 }) => {
   const t = useT();
   const [copied, setCopied] = useCopyTimeout();
+  const setOpen = useProfileDialogStore((store) => store.setOpen);
 
   return (
     <div
-      className="flex flex-col w-full ml-4 mr-2 mb-4"
+      className="flex flex-col w-full px-4 mb-4"
       data-testid={`key-${pk.publicKey}-mobile`}
     >
       <span className="flex gap-2 items-center mr-2">
@@ -106,6 +126,24 @@ const KeypairListItem = ({
         </CopyToClipboard>
         {copied && <span className="text-xs">{t('Copied')}</span>}
       </span>
+      <span
+        className="flex gap-2 items-center"
+        data-testid={`key-${pk.publicKey}`}
+      >
+        <span className="truncate">{alias ? alias : t('No alias')}</span>
+        {isActive && (
+          <button
+            data-testid="alias"
+            onClick={() => {
+              setOpen(pk.publicKey);
+              setMenu(null);
+            }}
+            className="flex items-center gap-1"
+          >
+            <VegaIcon name={VegaIconNames.EDIT} />
+          </button>
+        )}
+      </span>
     </div>
   );
 };

apps/trading/e2e/tests/rewards/test_rewards_combo_tier_1.py

@@ -186,7 +186,7 @@ def test_reward_history(
 
 def test_staking_reward(
     setup_environment: Tuple[Page, str, str],
-) -> None:
+):
     page, tDAI_market, tDAI_asset_id = setup_environment
     expect(page.get_by_test_id("active-rewards-card")).to_have_count(2)
     staking_reward_card = page.get_by_test_id("active-rewards-card").nth(1)

apps/trading/pages/_document.page.tsx

@@ -4,11 +4,10 @@ export default function Document() {
   return (
     <>
       <Head>
-        {/*
-          meta tags
-          - next advised against using _document for this, so they exist in our
-          - single page index.page.tsx
-        */}
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, user-scalable=no"
+        />
 
         {/* preload fonts */}
         <link
@@ -18,15 +17,38 @@ export default function Document() {
           type="font/woff"
         />
 
+        <link
+          rel="preload"
+          href="/AlphaLyrae.woff2"
+          as="font"
+          type="font/woff2"
+        />
+
         {/* icons */}
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-        <link rel="apple-touch-icon" content="/favicon.ico" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
 
         {/* scripts */}
         <script src="/theme-setter.js" type="text/javascript" async />
 
         {/* manifest */}
-        <link rel="manifest" href="/apps/trading/public/manifest.json" />
+        <link rel="manifest" href="/manifest.json" />
       </Head>
       <Html>
         <body

apps/trading/public/manifest.json

@@ -9,14 +9,14 @@
   "background_color": "#ffffff",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
     },
     {
-      "src": "cover.png",
-      "type": "image/png",
-      "sizes": "192x192"
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ]
 }

docker/node-inside-docker.Dockerfile

@@ -1,14 +1,15 @@
 # Build container
 ARG NODE_VERSION
-FROM --platform=amd64 node:${NODE_VERSION}-alpine3.16 as build
+FROM --platform=amd64 node:${NODE_VERSION}-alpine3.18 as build
 WORKDIR /app
 # Argument to allow building of different apps
 ARG APP
 ARG ENV_NAME=""
 RUN apk add --update --no-cache \
-  make==4.3-r0 \
-  gcc==11.2.1_git20220219-r2 \
-  g++==11.2.1_git20220219-r2
+  git \
+  make==4.4.1-r1 \
+  gcc==12.2.1_git20220924-r10 \
+  g++==12.2.1_git20220924-r10
 COPY . ./
 RUN yarn --pure-lockfile
 # work around for different build process in trading

libs/environment/src/components/app-failure/app-failure.tsx

@@ -1,16 +0,0 @@
-import { Splash } from '@vegaprotocol/ui-toolkit';
-
-export const AppFailure = ({
-  title,
-  error,
-}: {
-  title: string;
-  error?: string | null;
-}) => {
-  return (
-    <Splash>
-      <p className="mb-4 text-xl">{title}</p>
-      {error && <p className="mb-8 text-sm">{error}</p>}
-    </Splash>
-  );
-};

libs/environment/src/components/app-failure/index.ts

@@ -1 +0,0 @@
-export * from './app-failure';

libs/environment/src/components/index.ts

@@ -1,4 +1,3 @@
-export * from './app-failure';
 export * from './app-loader';
 export * from './network-loader';
 export * from './network-switcher';

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

@@ -40,6 +40,16 @@ const mockStatsQuery = (
         vegaTime: new Date().toISOString(),
         chainId: 'test-chain-id',
       },
+      networkParametersConnection: {
+        edges: [
+          {
+            node: {
+              key: 'a',
+              value: '1',
+            },
+          },
+        ],
+      },
     },
   },
 });
@@ -335,6 +345,16 @@ describe('RowData', () => {
               vegaTime: new Date().toISOString(),
               chainId: 'test-chain-id',
             },
+            networkParametersConnection: {
+              edges: [
+                {
+                  node: {
+                    key: 'a',
+                    value: '1',
+                  },
+                },
+              ],
+            },
           },
         },
       };

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

@@ -1,4 +1,9 @@
-import { TradingRadio } from '@vegaprotocol/ui-toolkit';
+import {
+  CopyWithTooltip,
+  TradingRadio,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import { useEffect, useState } from 'react';
 import { CUSTOM_NODE_KEY } from '../../types';
 import {
@@ -127,8 +132,17 @@ export const RowData = ({
   return (
     <>
       {id !== CUSTOM_NODE_KEY && (
-        <div className="break-all" data-testid="node">
+        <div className="break-all flex gap-2" data-testid="node">
           <TradingRadio id={`node-url-${id}`} value={url} label={url} />
+          {url.length > 0 && url !== 'custom' && (
+            <span className="text-muted">
+              <CopyWithTooltip text={url}>
+                <button>
+                  <VegaIcon name={VegaIconNames.COPY} />
+                </button>
+              </CopyWithTooltip>
+            </span>
+          )}
         </div>
       )}
       <LayoutCell

libs/environment/src/hooks/mocks/apollo-client.tsx

@@ -39,6 +39,19 @@ export const getMockStatisticsResult = (
     blockHeight: '11',
     vegaTime: new Date().toISOString(),
   },
+  networkParametersConnection: {
+    __typename: 'NetworkParametersConnection',
+    edges: [
+      {
+        __typename: 'NetworkParameterEdge',
+        node: {
+          __typename: 'NetworkParameter',
+          key: 'a',
+          value: '1',
+        },
+      },
+    ],
+  },
 });
 
 export const getMockQueryResult = (env: Networks): NodeCheckQuery => ({
@@ -48,6 +61,19 @@ export const getMockQueryResult = (env: Networks): NodeCheckQuery => ({
     blockHeight: '11',
     vegaTime: new Date().toISOString(),
   },
+  networkParametersConnection: {
+    __typename: 'NetworkParametersConnection',
+    edges: [
+      {
+        __typename: 'NetworkParameterEdge',
+        node: {
+          __typename: 'NetworkParameter',
+          key: 'a',
+          value: '1',
+        },
+      },
+    ],
+  },
 });
 
 function getHandler<T>(

libs/environment/src/hooks/use-environment.spec.ts

@@ -34,6 +34,16 @@ const createDefaultMockClient = () => {
             blockHeight: '100',
             vegaTime: new Date().toISOString(),
           },
+          networkParametersConnection: {
+            edges: [
+              {
+                node: {
+                  key: 'something',
+                  value: 123,
+                },
+              },
+            ],
+          },
         },
       }),
     subscribe: () => ({
@@ -183,6 +193,16 @@ describe('useEnvironment', () => {
                   blockHeight: '100',
                   vegaTime: new Date(1).toISOString(),
                 },
+                networkParametersConnection: {
+                  edges: [
+                    {
+                      node: {
+                        key: 'something',
+                        value: 123,
+                      },
+                    },
+                  ],
+                },
               },
             });
           }, wait);
@@ -244,6 +264,16 @@ describe('useEnvironment', () => {
               blockHeight: '100',
               vegaTime: new Date().toISOString(),
             },
+            networkParametersConnection: {
+              edges: [
+                {
+                  node: {
+                    key: 'something',
+                    value: 123,
+                  },
+                },
+              ],
+            },
           },
         }),
       subscribe: () => ({

libs/environment/src/hooks/use-environment.ts

@@ -1,5 +1,5 @@
 import { parse as tomlParse } from 'toml';
-import { isValidUrl, LocalStorage } from '@vegaprotocol/utils';
+import { LocalStorage, isValidUrl } from '@vegaprotocol/utils';
 import { useEffect } from 'react';
 import { create } from 'zustand';
 import { createClient } from '@vegaprotocol/apollo-client';
@@ -22,6 +22,7 @@ import uniq from 'lodash/uniq';
 import orderBy from 'lodash/orderBy';
 import first from 'lodash/first';
 import { canMeasureResponseTime, measureResponseTime } from '../utils/time';
+import compact from 'lodash/compact';
 
 type Client = ReturnType<typeof createClient>;
 type ClientCollection = {
@@ -70,10 +71,19 @@ const fetchConfig = async (url?: string) => {
 };
 
 /**
- * Find a suitable node by running a test query and test
+ * Find a suitable nodes by running a test query and test
  * subscription, against a list of clients, first to resolve wins
  */
-const findNode = async (clients: ClientCollection): Promise<string | null> => {
+const findHealthyNodes = async (nodes: string[]) => {
+  const clients: ClientCollection = {};
+  nodes.forEach((url) => {
+    clients[url] = createClient({
+      url,
+      cacheConfig: undefined,
+      retry: false,
+      connectToDevTools: false,
+    });
+  });
   const tests = Object.entries(clients).map((args) => testNode(...args));
   try {
     const nodes = await Promise.all(tests);
@@ -93,11 +103,10 @@ const findNode = async (clients: ClientCollection): Promise<string | null> => {
       ['desc', 'desc', 'asc']
     );
 
-    const best = first(ordered);
-    return best ? best.url : null;
+    return ordered;
   } catch (err) {
     // All tests rejected, no suitable node found
-    return null;
+    return [];
   }
 };
 
@@ -142,6 +151,15 @@ const testQuery = (
       })
       .then((result) => {
         if (result && !result.error) {
+          const netParams = compact(
+            result.data.networkParametersConnection.edges?.map((n) => n?.node)
+          );
+          if (netParams.length === 0) {
+            // any node that doesn't return the network parameters is considered
+            // failed
+            resolve(false);
+            return;
+          }
           const res = {
             blockHeight: Number(result.data.statistics.blockHeight),
             vegaTime: new Date(result.data.statistics.vegaTime),
@@ -600,32 +618,34 @@ export const useEnvironment = create<EnvStore>()((set, get) => ({
     }
 
     const state = get();
-    const storedUrl = LocalStorage.getItem(STORAGE_KEY);
+
+    let storedUrl = LocalStorage.getItem(STORAGE_KEY);
+    if (!isValidUrl(storedUrl)) {
+      // remove invalid data from local storage
+      LocalStorage.removeItem(STORAGE_KEY);
+      storedUrl = null;
+    }
 
     let nodes: string[] | undefined;
     try {
-      nodes = await fetchConfig(state.VEGA_CONFIG_URL);
-      const enrichedNodes = uniq(
-        [...nodes, state.VEGA_URL, storedUrl].filter(Boolean) as string[]
+      nodes = uniq(
+        compact([
+          // url from local storage
+          storedUrl,
+          // url from state (if set via env var)
+          state.VEGA_URL,
+          // urls from network configuration
+          ...(await fetchConfig(state.VEGA_CONFIG_URL)),
+        ])
       );
-      set({ nodes: enrichedNodes });
+      set({ nodes });
     } catch (err) {
       console.warn(`Could not fetch node config from ${state.VEGA_CONFIG_URL}`);
     }
 
-    // Node url found in localStorage, if its valid attempt to connect
-    if (storedUrl) {
-      if (isValidUrl(storedUrl)) {
-        set({ VEGA_URL: storedUrl, status: 'success' });
-        return;
-      } else {
-        LocalStorage.removeItem(STORAGE_KEY);
-      }
-    }
-
-    // VEGA_URL env var is set and is a valid url no need to proceed
-    if (state.VEGA_URL) {
-      set({ status: 'success' });
+    // skip picking up the best node if VEGA_URL env variable is set
+    if (state.VEGA_URL && isValidUrl(state.VEGA_URL)) {
+      state.setUrl(state.VEGA_URL);
       return;
     }
 
@@ -639,37 +659,35 @@ export const useEnvironment = create<EnvStore>()((set, get) => ({
       return;
     }
 
-    // Create a map of node urls to client instances
-    const clients: ClientCollection = {};
-    nodes.forEach((url) => {
-      clients[url] = createClient({
-        url,
-        cacheConfig: undefined,
-        retry: false,
-        connectToDevTools: false,
-      });
+    const healthyNodes = await findHealthyNodes(nodes);
+
+    // A requested node is a node to which the app was previously connected
+    // or the one set via env variable.
+    const requestedNodeUrl = storedUrl || state.VEGA_URL;
+
+    const bestNode = first(healthyNodes);
+    const requestedNode = healthyNodes.find(
+      (n) => requestedNodeUrl && n.url === requestedNodeUrl
+    );
+    if (!requestedNode) {
+      // remove unhealthy node url from local storage
+      LocalStorage.removeItem(STORAGE_KEY);
+    }
+    // A node's url (VEGA_URL) is either the requested node (previously
+    // connected or taken form env variable) or the currently best available
+    // node.
+    const url = requestedNode?.url || bestNode?.url;
+
+    if (url != null) {
+      state.setUrl(url);
+      return;
+    }
+
+    set({
+      status: 'failed',
+      error: 'No suitable node found',
     });
-
-    // Find a suitable node to connect to by attempting a query and a
-    // subscription, first to fulfill both will be the resulting url.
-    const url = await findNode(clients);
-
-    if (url !== null) {
-      set({
-        status: 'success',
-        VEGA_URL: url,
-      });
-      LocalStorage.setItem(STORAGE_KEY, url);
-    }
-    // Every node failed either to make a query or retrieve data from
-    // a subscription
-    else {
-      set({
-        status: 'failed',
-        error: 'No node found',
-      });
-      console.warn('No suitable vega node was found');
-    }
+    console.warn('No suitable node was found');
   },
 }));
 

libs/environment/src/hooks/use-node-health.spec.tsx

@@ -28,6 +28,16 @@ const createStatsMock = (
           blockHeight: blockHeight.toString(),
           vegaTime: '12345',
         },
+        networkParametersConnection: {
+          edges: [
+            {
+              node: {
+                key: 'a',
+                value: '1',
+              },
+            },
+          ],
+        },
       },
     },
   };

libs/environment/src/utils/NodeCheck.graphql

@@ -1,9 +1,19 @@
 query NodeCheck {
+  # statistics needed to get the most recent node in terms of block height
   statistics {
     chainId
     blockHeight
     vegaTime
   }
+  # net params needed to filter out the nodes that are not suitable
+  networkParametersConnection {
+    edges {
+      node {
+        key
+        value
+      }
+    }
+  }
 }
 
 subscription NodeCheckTimeUpdate {

libs/environment/src/utils/__generated__/NodeCheck.ts

@@ -6,7 +6,7 @@ const defaultOptions = {} as const;
 export type NodeCheckQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type NodeCheckQuery = { __typename?: 'Query', statistics: { __typename?: 'Statistics', chainId: string, blockHeight: string, vegaTime: any } };
+export type NodeCheckQuery = { __typename?: 'Query', statistics: { __typename?: 'Statistics', chainId: string, blockHeight: string, vegaTime: any }, networkParametersConnection: { __typename?: 'NetworkParametersConnection', edges?: Array<{ __typename?: 'NetworkParameterEdge', node: { __typename?: 'NetworkParameter', key: string, value: string } } | null> | null } };
 
 export type NodeCheckTimeUpdateSubscriptionVariables = Types.Exact<{ [key: string]: never; }>;
 
@@ -21,6 +21,14 @@ export const NodeCheckDocument = gql`
     blockHeight
     vegaTime
   }
+  networkParametersConnection {
+    edges {
+      node {
+        key
+        value
+      }
+    }
+  }
 }
     `;
 

libs/environment/src/utils/node.mock.ts

@@ -12,6 +12,19 @@ export const statisticsQuery = (
       blockHeight: '11',
       vegaTime: new Date().toISOString(),
     },
+    networkParametersConnection: {
+      __typename: 'NetworkParametersConnection',
+      edges: [
+        {
+          __typename: 'NetworkParameterEdge',
+          node: {
+            __typename: 'NetworkParameter',
+            key: 'a',
+            value: '1',
+          },
+        },
+      ],
+    },
   };
 
   return merge(defaultResult, override);

libs/i18n/src/locales/en/trading.json

@@ -485,5 +485,7 @@
   "See all the live games on the cards below. Every on-chain game is community funded and designed. <0>Find out how to create one</0>.": "See all the live games on the cards below. Every on-chain game is community funded and designed. <0>Find out how to create one</0>.",
   "Teams can earn rewards if they meet the goals set in the on-chain trading competitions. Track your earned rewards here, and see which teams are top of the leaderboard this month.": "Teams can earn rewards if they meet the goals set in the on-chain trading competitions. Track your earned rewards here, and see which teams are top of the leaderboard this month.",
   "Currently no active games on the network.": "Currently no active games on the network.",
-  "Currently no active teams on the network.": "Currently no active teams on the network."
+  "Currently no active teams on the network.": "Currently no active teams on the network.",
+  "It looks like you're connection is slow, try switching to another node.": "It looks like you're connection is slow, try switching to another node.",
+  "It appears that the connection to the node <0>{{VEGA_URL}}</0> does not return necessary data, try switching to another node.": "It appears that the connection to the node <0>{{VEGA_URL}}</0> does not return necessary data, try switching to another node."
 }

libs/types/project.json

@@ -34,6 +34,21 @@
       "options": {
         "jestConfig": "libs/types/jest.config.ts"
       }
+    },
+    "generate": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["npx graphql-codegen --config=libs/types/codegen.yml"],
+        "parallel": false
+      }
+    },
+    "local-registry": {
+      "executor": "@nx/js:verdaccio",
+      "options": {
+        "port": 4873,
+        "config": ".verdaccio/config.yml",
+        "storage": "tmp/local-registry/storage"
+      }
     }
   },
   "tags": []

libs/utils/project.json

@@ -35,6 +35,14 @@
       "options": {
         "jestConfig": "libs/utils/jest.config.ts"
       }
+    },
+    "local-registry": {
+      "executor": "@nx/js:verdaccio",
+      "options": {
+        "port": 4873,
+        "config": ".verdaccio/config.yml",
+        "storage": "tmp/local-registry/storage"
+      }
     }
   },
   "tags": []

libs/utils/src/lib/is-valid-url.ts

@@ -1,4 +1,4 @@
-export const isValidUrl = (url?: string) => {
+export const isValidUrl = (url?: string | null) => {
   if (!url) return false;
   try {
     new URL(url);

libs/wallet/project.json

@@ -35,6 +35,14 @@
       "options": {
         "jestConfig": "libs/wallet/jest.config.ts"
       }
+    },
+    "local-registry": {
+      "executor": "@nx/js:verdaccio",
+      "options": {
+        "port": 4873,
+        "config": ".verdaccio/config.yml",
+        "storage": "tmp/local-registry/storage"
+      }
     }
   },
   "tags": []

package.json

@@ -241,8 +241,5 @@
     "graphql": "15.8.0",
     "//": "workaround storybook issue: https://github.com/storybookjs/storybook/issues/21642",
     "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
-  },
-  "nx": {
-    "includedScripts": []
   }
 }

project.json

@@ -1,14 +0,0 @@
-{
-  "name": "nx-monorepo",
-  "$schema": "node_modules/nx/schemas/project-schema.json",
-  "targets": {
-    "local-registry": {
-      "executor": "@nx/js:verdaccio",
-      "options": {
-        "port": 4873,
-        "config": ".verdaccio/config.yml",
-        "storage": "tmp/local-registry/storage"
-      }
-    }
-  }
-}