chore: disabled timeouts as it's broken with browser wallet

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>

apps/governance/src/app.tsx

@@ -26,7 +26,7 @@ import {
 } from '@vegaprotocol/web3';
 import { Web3Provider } from '@vegaprotocol/web3';
 import { VegaWalletDialogs } from './components/vega-wallet-dialogs';
-import { VegaWalletProvider } from '@vegaprotocol/wallet';
+import { VegaWalletProvider, useChainId } from '@vegaprotocol/wallet';
 import {
   useVegaTransactionManager,
   useVegaTransactionUpdater,
@@ -96,7 +96,9 @@ const cache: InMemoryCacheConfig = {
 const Web3Container = ({
   chainId,
 }: {
+  /** Ethereum chain id */
   chainId: number;
+  /** Ethereum provider url */
   providerUrl: string;
 }) => {
   const InitializeHandlers = () => {
@@ -123,6 +125,9 @@ const Web3Container = ({
     MOZILLA_EXTENSION_URL,
     VEGA_WALLET_URL,
   } = useEnvironment();
+
+  const vegaChainId = useChainId(VEGA_URL);
+
   useEffect(() => {
     if (chainId) {
       return initializeConnectors(
@@ -157,7 +162,8 @@ const Web3Container = ({
     !VEGA_EXPLORER_URL ||
     !DocsLinks ||
     !CHROME_EXTENSION_URL ||
-    !MOZILLA_EXTENSION_URL
+    !MOZILLA_EXTENSION_URL ||
+    !vegaChainId
   ) {
     return null;
   }
@@ -169,6 +175,7 @@ const Web3Container = ({
           config={{
             network: VEGA_ENV,
             vegaUrl: VEGA_URL,
+            chainId: vegaChainId,
             vegaWalletServiceUrl: VEGA_WALLET_URL,
             links: {
               explorer: VEGA_EXPLORER_URL,

apps/governance/src/routes/proposals/components/proposal/proposal.spec.tsx

@@ -48,6 +48,7 @@ const vegaWalletConfig: VegaWalletConfig = {
     chromeExtensionUrl: 'chrome',
     mozillaExtensionUrl: 'mozilla',
   },
+  chainId: 'VEGA_CHAIN_ID',
 };
 
 const renderComponent = (proposal: ProposalQuery['proposal']) => {

apps/governance/src/toasts-manager.tsx

@@ -1,14 +1,50 @@
-import { ToastsContainer, useToasts } from '@vegaprotocol/ui-toolkit';
+import {
+  Intent,
+  ToastsContainer,
+  TradingButton,
+  VegaIcon,
+  VegaIconNames,
+  useToasts,
+} from '@vegaprotocol/ui-toolkit';
+import { useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import {
   useEthereumTransactionToasts,
   useEthereumWithdrawApprovalsToasts,
   useVegaTransactionToasts,
+  useWalletDisconnectToastActions,
+  useWalletDisconnectedToasts,
 } from '@vegaprotocol/web3';
+import { useTranslation } from 'react-i18next';
+
+const WalletDisconnectAdditionalContent = () => {
+  const { t } = useTranslation();
+  const { hideToast } = useWalletDisconnectToastActions();
+  const openVegaWalletDialog = useVegaWalletDialogStore(
+    (store) => store.openVegaWalletDialog
+  );
+  return (
+    <p className="mt-2">
+      <TradingButton
+        data-testid="connect-vega-wallet"
+        onClick={() => {
+          hideToast();
+          openVegaWalletDialog();
+        }}
+        size="small"
+        intent={Intent.Danger}
+        icon={<VegaIcon name={VegaIconNames.ARROW_RIGHT} size={14} />}
+      >
+        <span className="whitespace-nowrap uppercase">{t('Connect')}</span>
+      </TradingButton>
+    </p>
+  );
+};
 
 export const ToastsManager = () => {
   useVegaTransactionToasts();
   useEthereumTransactionToasts();
   useEthereumWithdrawApprovalsToasts();
+  useWalletDisconnectedToasts(<WalletDisconnectAdditionalContent />);
 
   const toasts = useToasts((store) => store.toasts);
   return <ToastsContainer order="desc" toasts={toasts} />;

apps/trading/client-pages/rewards/rewards.tsx

@@ -4,6 +4,7 @@ import { useT } from '../../lib/use-t';
 import { RewardsContainer } from '../../components/rewards-container';
 import { usePageTitleStore } from '../../stores';
 import { ErrorBoundary } from '../../components/error-boundary';
+import { TinyScroll } from '@vegaprotocol/ui-toolkit';
 
 export const Rewards = () => {
   const t = useT();
@@ -16,10 +17,10 @@ export const Rewards = () => {
   }, [updateTitle, title]);
   return (
     <ErrorBoundary feature="rewards">
-      <div className="container mx-auto p-4">
+      <TinyScroll className="p-4 max-h-full overflow-auto">
         <h1 className="px-4 pb-4 text-2xl">{title}</h1>
         <RewardsContainer />
-      </div>
+      </TinyScroll>
     </ErrorBoundary>
   );
 };

apps/trading/components/bootstrapper/bootstrapper.tsx

@@ -13,6 +13,7 @@ import type { ReactNode } from 'react';
 import { Web3Provider } from './web3-provider';
 import { useT } from '../../lib/use-t';
 import { DataLoader } from './data-loader';
+import { useChainId } from '@vegaprotocol/wallet';
 
 export const Bootstrapper = ({ children }: { children: ReactNode }) => {
   const t = useT();
@@ -26,13 +27,16 @@ export const Bootstrapper = ({ children }: { children: ReactNode }) => {
     CHROME_EXTENSION_URL,
   } = useEnvironment();
 
+  const chainId = useChainId(VEGA_URL);
+
   if (
     !VEGA_URL ||
     !VEGA_WALLET_URL ||
     !VEGA_EXPLORER_URL ||
     !CHROME_EXTENSION_URL ||
     !MOZILLA_EXTENSION_URL ||
-    !DocsLinks
+    !DocsLinks ||
+    !chainId
   ) {
     return <AppLoader />;
   }
@@ -72,6 +76,7 @@ export const Bootstrapper = ({ children }: { children: ReactNode }) => {
               config={{
                 network: VEGA_ENV,
                 vegaUrl: VEGA_URL,
+                chainId,
                 vegaWalletServiceUrl: VEGA_WALLET_URL,
                 links: {
                   explorer: VEGA_EXPLORER_URL,

apps/trading/components/market-selector/market-selector-item.tsx

@@ -97,9 +97,9 @@ const MarketData = ({
 
   return (
     <>
-      <div className="w-2/5" role="gridcell">
+      <div className="w-2/6" role="gridcell">
         <h3 className="flex items-baseline">
-          <span className="overflow-hidden text-sm lg:text-base text-ellipsis whitespace-nowrap">
+          <span className="overflow-hidden text-xs md:text-sm lg:text-base text-ellipsis whitespace-nowrap">
             {market.tradableInstrument.instrument.code}
           </span>
           {allProducts && productType && (
@@ -113,7 +113,7 @@ const MarketData = ({
         )}
       </div>
       <div
-        className="w-1/5 overflow-hidden text-xs lg:text-sm whitespace-nowrap text-ellipsis"
+        className="w-2/6 overflow-hidden text-xs lg:text-sm whitespace-nowrap text-ellipsis text-right"
         title={symbol}
         data-testid="market-selector-price"
         role="gridcell"
@@ -121,14 +121,14 @@ const MarketData = ({
         {price} {symbol}
       </div>
       <div
-        className="w-1/5 overflow-hidden text-xs text-right lg:text-sm whitespace-nowrap text-ellipsis"
+        className="w-2/6 sm:w-1/6 overflow-hidden text-xs lg:text-sm whitespace-nowrap text-ellipsis text-right"
         title={t('24h vol')}
         data-testid="market-selector-volume"
         role="gridcell"
       >
         {volume}
       </div>
-      <div className="flex justify-end w-1/5" role="gridcell">
+      <div className="hidden sm:w-1/6 sm:flex justify-end" role="gridcell">
         {oneDayCandles && (
           <Sparkline
             width={64}

apps/trading/components/market-selector/market-selector.tsx

@@ -64,7 +64,7 @@ export const MarketSelector = ({
             setFilter((curr) => ({ ...curr, product }));
           }}
         />
-        <div className="text-sm grid grid-cols-[2fr_1fr_1fr] gap-1 ">
+        <div className="text-sm flex sm:grid grid-cols-[2fr_1fr_1fr] gap-1 ">
           <div className="flex-1">
             <TradingInput
               onChange={(e) =>
@@ -182,16 +182,16 @@ const MarketList = ({
           'p-2 mx-2 border-b border-default text-xs text-secondary'
         )}
       >
-        <div className="w-2/5" role="columnheader">
+        <div className="w-2/6" role="columnheader">
           {t('Name')}
         </div>
-        <div className="w-1/5" role="columnheader">
+        <div className="w-2/6 text-right pr-4" role="columnheader">
           {t('Price')}
         </div>
-        <div className="w-1/5 text-right" role="columnheader">
+        <div className="w-2/6 sm:w-1/6 text-right" role="columnheader">
           {t('24h volume')}
         </div>
-        <div className="w-1/5" role="columnheader" />
+        <div className="hidden sm:w-1/6" role="columnheader" />
       </div>
       <div ref={listRef}>
         <List

apps/trading/components/navbar/nav-header.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { useState } from 'react';
 import { useT } from '../../lib/use-t';
+import classNames from 'classnames';
 
 /**
  * This is only rendered for the mobile navigation
@@ -30,7 +31,16 @@ export const NavHeader = () => {
       trigger={
         <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-default text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default">
           {data ? data.tradableInstrument.instrument.code : t('Select market')}
-          <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={20} />
+          <span
+            className={classNames(
+              'transition-transform ease-in-out duration-300',
+              {
+                'rotate-180': open,
+              }
+            )}
+          >
+            <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={20} />
+          </span>
         </h1>
       }
     >

apps/trading/components/rewards-container/active-rewards.tsx

@@ -14,6 +14,7 @@ import {
   VegaIconNames,
   type VegaIconSize,
   TradingInput,
+  TinyScroll,
 } from '@vegaprotocol/ui-toolkit';
 import { IconNames } from '@blueprintjs/icons';
 import {
@@ -149,47 +150,45 @@ export const ActiveRewards = ({ currentEpoch }: { currentEpoch: number }) => {
 
   return (
     <Card title={t('Active rewards')} className="lg:col-span-full">
-      <div className="">
-        {transfers.length > 1 && (
-          <TradingInput
-            onChange={(e) =>
-              setFilter((curr) => ({ ...curr, searchTerm: e.target.value }))
+      {transfers.length > 1 && (
+        <TradingInput
+          onChange={(e) =>
+            setFilter((curr) => ({ ...curr, searchTerm: e.target.value }))
+          }
+          value={filter.searchTerm}
+          type="text"
+          placeholder={t(
+            'Search by reward dispatch metric, entity scope or asset name'
+          )}
+          data-testid="search-term"
+          className="mb-4 w-20 mr-2"
+          prependElement={<VegaIcon name={VegaIconNames.SEARCH} />}
+        />
+      )}
+      <TinyScroll className="grid gap-x-8 gap-y-10 h-fit grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] md:grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] lg:grid-cols-[repeat(auto-fill,_minmax(320px,_1fr))] xl:grid-cols-[repeat(auto-fill,_minmax(335px,_1fr))] max-h-[40rem] overflow-auto pr-2">
+        {transfers
+          .filter((n) => applyFilter(n, filter))
+          .map((node, i) => {
+            const { transfer } = node;
+            if (
+              transfer.kind.__typename !== 'RecurringTransfer' ||
+              !transfer.kind.dispatchStrategy?.dispatchMetric
+            ) {
+              return null;
             }
-            value={filter.searchTerm}
-            type="text"
-            placeholder={t(
-              'Search by reward dispatch metric, entity scope or asset name'
-            )}
-            data-testid="search-term"
-            className="mb-4 w-20"
-            prependElement={<VegaIcon name={VegaIconNames.SEARCH} />}
-          />
-        )}
-        <div className="grid gap-x-8 gap-y-10 h-fit grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] md:grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] lg:grid-cols-[repeat(auto-fill,_minmax(320px,_1fr))] xl:grid-cols-[repeat(auto-fill,_minmax(343px,_1fr))] max-h-[40rem] overflow-auto">
-          {transfers
-            .filter((n) => applyFilter(n, filter))
-            .map((node, i) => {
-              const { transfer } = node;
-              if (
-                transfer.kind.__typename !== 'RecurringTransfer' ||
-                !transfer.kind.dispatchStrategy?.dispatchMetric
-              ) {
-                return null;
-              }
 
-              return (
-                node && (
-                  <ActiveRewardCard
-                    key={i}
-                    transferNode={node}
-                    kind={transfer.kind}
-                    currentEpoch={currentEpoch}
-                  />
-                )
-              );
-            })}
-        </div>
-      </div>
+            return (
+              node && (
+                <ActiveRewardCard
+                  key={i}
+                  transferNode={node}
+                  kind={transfer.kind}
+                  currentEpoch={currentEpoch}
+                />
+              )
+            );
+          })}
+      </TinyScroll>
     </Card>
   );
 };

apps/trading/e2e/conftest.py

@@ -8,7 +8,7 @@ import docker
 import http.server
 import sys
 from dotenv import load_dotenv
-
+from playwright.sync_api import Error as PlaywrightError
 from docker.models.containers import Container
 from docker.errors import APIError
 from contextlib import contextmanager
@@ -274,3 +274,18 @@ def perps_market(vega, request):
     if hasattr(request, "param"):
         kwargs.update(request.param)
     return setup_perps_market(vega, **kwargs)
+
+
+@pytest.fixture(autouse=True)
+def retry_on_http_error(request):
+    retry_count = 3 
+    for i in range(retry_count):
+        try:
+            yield
+            return 
+        except requests.exceptions.HTTPError:
+            if i < retry_count - 1:
+                print(f"Retrying due to HTTPError (attempt {i+1}/{retry_count})")
+            else:
+                raise 
+

apps/trading/e2e/tests/market/test_monitoring_auction_price_volatility_market.py

@@ -64,7 +64,6 @@ def setup_market_monitoring_auction(vega: VegaServiceNull, simple_market):
     submit_order(vega, MM_WALLET.name, simple_market, "SIDE_SELL", 1, 1 + 0.1 / 2)
     submit_order(vega, MM_WALLET2.name, simple_market, "SIDE_SELL", 1, 1)
 
-    vega.forward("10s")
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
 
@@ -75,7 +74,6 @@ def setup_market_monitoring_auction(vega: VegaServiceNull, simple_market):
     submit_order(vega, MM_WALLET2.name, simple_market, "SIDE_BUY", 100, 95)
     submit_order(vega, MM_WALLET2.name, simple_market, "SIDE_BUY", 1, 105)
 
-    vega.forward("10s")
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
 
@@ -109,7 +107,6 @@ def test_market_monitoring_auction_price_volatility_limit_order(
     page.get_by_test_id("place-order").click()
 
     wait_for_toast_confirmation(page)
-    vega.forward("10s")
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
     page.get_by_test_id("All").click()

apps/trading/lib/hooks/use-wallet-disconnected-toasts.tsx

@@ -1,62 +0,0 @@
-import {
-  Intent,
-  useToasts,
-  ToastHeading,
-  CLOSE_AFTER,
-} from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useEffect, useMemo } from 'react';
-import { useT } from '../use-t';
-import { VegaWalletConnectButton } from '../../components/vega-wallet-connect-button';
-
-const WALLET_DISCONNECTED_TOAST_ID = 'WALLET_DISCONNECTED_TOAST_ID';
-
-export const useWalletDisconnectedToasts = () => {
-  const t = useT();
-  const [hasToast, setToast, updateToast] = useToasts((state) => [
-    state.hasToast,
-    state.setToast,
-    state.update,
-  ]);
-  const { isAlive } = useVegaWallet();
-
-  const toast = useMemo(
-    () => ({
-      id: WALLET_DISCONNECTED_TOAST_ID,
-      intent: Intent.Danger,
-      content: (
-        <>
-          <ToastHeading>{t('Wallet connection lost')}</ToastHeading>
-          <p>{t('The connection to the Vega wallet has been lost.')}</p>
-          <p className="mt-2">
-            <VegaWalletConnectButton
-              intent={Intent.Danger}
-              onClick={() => {
-                updateToast(WALLET_DISCONNECTED_TOAST_ID, {
-                  hidden: true,
-                });
-              }}
-            />
-          </p>
-        </>
-      ),
-      onClose: () => {
-        updateToast(WALLET_DISCONNECTED_TOAST_ID, {
-          hidden: true,
-        });
-      },
-      closeAfter: CLOSE_AFTER,
-    }),
-    [t, updateToast]
-  );
-
-  useEffect(() => {
-    if (isAlive === false) {
-      if (hasToast(WALLET_DISCONNECTED_TOAST_ID)) {
-        updateToast(WALLET_DISCONNECTED_TOAST_ID, { hidden: false });
-      } else {
-        setToast(toast);
-      }
-    }
-  }, [hasToast, isAlive, setToast, t, toast, updateToast]);
-};

apps/trading/pages/toasts-manager.tsx

@@ -1,4 +1,4 @@
-import { ToastsContainer, useToasts } from '@vegaprotocol/ui-toolkit';
+import { Intent, ToastsContainer, useToasts } from '@vegaprotocol/ui-toolkit';
 import { useProposalToasts } from '@vegaprotocol/proposals';
 import { useVegaTransactionToasts } from '@vegaprotocol/web3';
 import { useEthereumTransactionToasts } from '@vegaprotocol/web3';
@@ -6,7 +6,26 @@ import { useEthereumWithdrawApprovalsToasts } from '@vegaprotocol/web3';
 import { useReadyToWithdrawalToasts } from '@vegaprotocol/withdraws';
 import { Links } from '../lib/links';
 import { useReferralToasts } from '../client-pages/referrals/hooks/use-referral-toasts';
-import { useWalletDisconnectedToasts } from '../lib/hooks/use-wallet-disconnected-toasts';
+import {
+  useWalletDisconnectToastActions,
+  useWalletDisconnectedToasts,
+} from '@vegaprotocol/web3';
+import { VegaWalletConnectButton } from '../components/vega-wallet-connect-button';
+
+const WalletDisconnectAdditionalContent = () => {
+  const { hideToast } = useWalletDisconnectToastActions();
+  return (
+    <p className="mt-2">
+      <VegaWalletConnectButton
+        intent={Intent.Danger}
+        onClick={() => {
+          // hide toast when clicked on `Connect`
+          hideToast();
+        }}
+      />
+    </p>
+  );
+};
 
 export const ToastsManager = () => {
   useProposalToasts();
@@ -17,7 +36,7 @@ export const ToastsManager = () => {
     withdrawalsLink: Links.PORTFOLIO(),
   });
   useReferralToasts();
-  useWalletDisconnectedToasts();
+  useWalletDisconnectedToasts(<WalletDisconnectAdditionalContent />);
 
   const toasts = useToasts((store) => store.toasts);
   return <ToastsContainer order="desc" toasts={toasts} />;

libs/wallet/src/connect-dialog/connect-dialog.spec.tsx

@@ -22,7 +22,7 @@ const mockUpdateDialogOpen = jest.fn();
 const mockCloseVegaDialog = jest.fn();
 
 let mockIsDesktopRunning = true;
-const mockChainId = 'chain-id';
+const mockChainId = 'VEGA_CHAIN_ID';
 
 jest.mock('../use-is-wallet-service-running', () => ({
   useIsWalletServiceRunning: jest
@@ -30,10 +30,6 @@ jest.mock('../use-is-wallet-service-running', () => ({
     .mockImplementation(() => mockIsDesktopRunning),
 }));
 
-jest.mock('./use-chain-id', () => ({
-  useChainId: jest.fn().mockImplementation(() => mockChainId),
-}));
-
 let defaultProps: VegaConnectDialogProps;
 
 const INITIAL_KEY = 'some-key';
@@ -71,6 +67,7 @@ const defaultConfig: VegaWalletConfig = {
     chromeExtensionUrl: 'chrome-link',
     mozillaExtensionUrl: 'mozilla-link',
   },
+  chainId: 'VEGA_CHAIN_ID',
 };
 
 function generateJSX(
@@ -209,7 +206,12 @@ describe('VegaConnectDialog', () => {
         .mockClear()
         .mockImplementation(() =>
           delayedReject(
-            new WalletError('User error', 3001, 'The user rejected the request')
+            new WalletError(
+              'User error',
+              3001,
+              'The user rejected the request'
+            ),
+            delay
           )
         );
 
@@ -314,13 +316,6 @@ describe('VegaConnectDialog', () => {
       render(generateJSX());
       await selectInjected();
 
-      // Chain check
-      expect(screen.getByText('Verifying chain')).toBeInTheDocument();
-      expect(vegaWindow.getChainId).toHaveBeenCalled();
-      await act(async () => {
-        jest.advanceTimersByTime(delay);
-      });
-
       // Await user connect
       expect(screen.getByText('Connecting...')).toBeInTheDocument();
       expect(vegaWindow.connectWallet).toHaveBeenCalled();
@@ -341,43 +336,6 @@ describe('VegaConnectDialog', () => {
       expect(mockCloseVegaDialog).toHaveBeenCalledWith();
     });
 
-    it('handles invalid chain', async () => {
-      const delay = 100;
-      const invalidChain = 'invalid chain';
-      const vegaWindow = {
-        getChainId: jest.fn(() =>
-          delayedResolve({ chainID: invalidChain }, delay)
-        ),
-        connectWallet: jest.fn(() => delayedResolve(null, delay)),
-        disconnectWallet: jest.fn(() => delayedResolve(undefined, delay)),
-        listKeys: jest.fn(() =>
-          delayedResolve(
-            {
-              keys: [{ name: 'test key', publicKey: '0x123' }],
-            },
-            100
-          )
-        ),
-      };
-      mockBrowserWallet(vegaWindow);
-      render(generateJSX());
-      await selectInjected();
-
-      // Chain check
-      expect(screen.getByText('Verifying chain')).toBeInTheDocument();
-      expect(vegaWindow.getChainId).toHaveBeenCalled();
-      await act(async () => {
-        jest.advanceTimersByTime(delay);
-      });
-
-      expect(screen.getByText('Wrong network')).toBeInTheDocument();
-      expect(
-        screen.getByText(
-          new RegExp(`set your wallet network in your app to "${mockChainId}"`)
-        )
-      ).toBeInTheDocument();
-    });
-
     async function selectInjected() {
       expect(await screen.findByRole('dialog')).toBeInTheDocument();
       fireEvent.click(await screen.findByTestId('connector-injected'));

libs/wallet/src/connect-dialog/connect-dialog.tsx

@@ -44,7 +44,6 @@ import { isBrowserWalletInstalled } from '../utils';
 import { useIsWalletServiceRunning } from '../use-is-wallet-service-running';
 import { SnapStatus, useSnapStatus } from '../use-snap-status';
 import { useVegaWalletDialogStore } from './vega-wallet-dialog-store';
-import { useChainId } from './use-chain-id';
 import { useT } from '../use-t';
 import { Trans } from 'react-i18next';
 
@@ -65,7 +64,7 @@ export const VegaConnectDialog = ({
   contentOnly,
   onClose,
 }: VegaConnectDialogProps) => {
-  const { disconnect, acknowledgeNeeded } = useVegaWallet();
+  const { chainId, disconnect, acknowledgeNeeded } = useVegaWallet();
   const vegaWalletDialogOpen = useVegaWalletDialogStore(
     (store) => store.vegaWalletDialogOpen
   );
@@ -85,10 +84,6 @@ export const VegaConnectDialog = ({
     [updateVegaWalletDialog, acknowledgeNeeded, disconnect]
   );
 
-  // Ensure we have a chain Id so we can compare with wallet chain id.
-  // This value will already be in the cache, if it failed the app wont render
-  const chainId = useChainId();
-
   const content = chainId && (
     <ConnectDialogContainer
       connectors={connectors}

libs/wallet/src/connect-dialog/use-chain-id.spec.ts

@@ -1,72 +0,0 @@
-import { renderHook, waitFor } from '@testing-library/react';
-import { useVegaWallet } from '../use-vega-wallet';
-import { useChainId } from './use-chain-id';
-
-global.fetch = jest.fn();
-const mockFetch = global.fetch as jest.Mock;
-mockFetch.mockImplementation((url: string) => {
-  return Promise.resolve({ ok: true });
-});
-
-jest.mock('../use-vega-wallet', () => {
-  const original = jest.requireActual('../use-vega-wallet');
-  return {
-    ...original,
-    useVegaWallet: jest.fn(),
-  };
-});
-
-describe('useChainId', () => {
-  it('does not call fetch when statistics url could not be determined', async () => {
-    (useVegaWallet as jest.Mock).mockReturnValue({
-      vegaUrl: '',
-    });
-    renderHook(() => useChainId());
-    await waitFor(() => {
-      expect(mockFetch).toHaveBeenCalledTimes(0);
-    });
-  });
-
-  it('calls fetch with correct statistics url', async () => {
-    (useVegaWallet as jest.Mock).mockReturnValue({
-      vegaUrl: 'http://localhost:1234/graphql',
-    });
-    renderHook(() => useChainId());
-    await waitFor(() => {
-      expect(mockFetch).toHaveBeenCalledWith(
-        'http://localhost:1234/statistics'
-      );
-    });
-  });
-
-  it('does not return chain id when chain id is not present in response', async () => {
-    (useVegaWallet as jest.Mock).mockReturnValue({
-      vegaUrl: 'http://localhost:1234/graphql',
-    });
-    const { result } = renderHook(() => useChainId());
-    await waitFor(() => {
-      expect(result.current).toBeUndefined();
-    });
-  });
-
-  it('returns chain id when chain id is present in response', async () => {
-    (useVegaWallet as jest.Mock).mockReturnValue({
-      vegaUrl: 'http://localhost:1234/graphql',
-    });
-    mockFetch.mockImplementation(() => {
-      return Promise.resolve({
-        ok: true,
-        json: () => ({
-          statistics: {
-            chainId: '1234',
-          },
-        }),
-      });
-    });
-    const { result } = renderHook(() => useChainId());
-    await waitFor(() => {
-      expect(result.current).not.toBeUndefined();
-      expect(result.current).toEqual('1234');
-    });
-  });
-});

libs/wallet/src/connectors/injected-connector.ts

@@ -1,10 +1,11 @@
 import { clearConfig, setConfig } from '../storage';
 import type { Transaction, VegaConnector } from './vega-connector';
 
+type VegaWalletEvent = 'client.disconnected';
+
 declare global {
   interface Vega {
-    getChainId: () => Promise<{ chainID: string }>;
-    connectWallet: () => Promise<null>;
+    connectWallet: (args: { chainId: string }) => Promise<null>;
     disconnectWallet: () => Promise<void>;
     listKeys: () => Promise<{
       keys: Array<{ name: string; publicKey: string }>;
@@ -34,6 +35,9 @@ declare global {
       };
       transactionHash: string;
     }>;
+
+    on: (event: VegaWalletEvent, callback: () => void) => void;
+    isConnected?: () => Promise<boolean>;
   }
 
   interface Window {
@@ -47,15 +51,60 @@ export const InjectedConnectorErrors = {
   INVALID_CHAIN: new Error('Invalid chain'),
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const wait = (ms: number) =>
+  new Promise<boolean>((_, reject) => {
+    setTimeout(() => {
+      reject(false);
+    }, ms);
+  });
+
+const INJECTED_CONNECTOR_TIMEOUT = 1000;
+
 export class InjectedConnector implements VegaConnector {
+  isConnected = false;
+  chainId: string | null = null;
   description = 'Connects using the Vega wallet browser extension';
+  alive: ReturnType<typeof setInterval> | undefined = undefined;
 
-  async getChainId() {
-    return window.vega.getChainId();
-  }
+  async connectWallet(chainId: string) {
+    this.chainId = chainId;
+    try {
+      await window.vega.connectWallet({ chainId });
+      this.isConnected = true;
+      window.vega.on('client.disconnected', () => {
+        this.isConnected = false;
+      });
 
-  connectWallet() {
-    return window.vega.connectWallet();
+      this.alive = setInterval(async () => {
+        try {
+          const connected = await Promise.race([
+            // FIXME: All of the `window.vega` initiated promises are `pending`
+            // while waiting for the user action when transaction is sent.
+            // (Probably due to the FIFO queue  of the `PortServer`?)
+            // Because of that we cannot `wait` here as while waiting for the
+            // user action in wallet this will `reject`. It'd be cool if the
+            // `window.vega` was not blocking the api calls.
+
+            // wait(INJECTED_CONNECTOR_TIMEOUT),
+
+            // `isConnected` is only available in the newer versions
+            // of the browser wallet
+            'isConnected' in window.vega &&
+            typeof window.vega.isConnected === 'function'
+              ? window.vega.isConnected()
+              : window.vega.listKeys(),
+          ]);
+          this.isConnected = Boolean(connected);
+        } catch {
+          this.isConnected = false;
+        }
+      }, INJECTED_CONNECTOR_TIMEOUT * 2);
+    } catch {
+      throw new Error(
+        `could not connect to the vega wallet on chain: ${chainId}`
+      );
+    }
   }
 
   async connect() {
@@ -69,19 +118,11 @@ export class InjectedConnector implements VegaConnector {
   }
 
   async isAlive() {
-    try {
-      const keys = await window.vega.listKeys();
-      if (keys.keys.length > 0) {
-        return true;
-      }
-    } catch (err) {
-      return false;
-    }
-
-    return false;
+    return this.isConnected;
   }
 
   disconnect() {
+    clearInterval(this.alive);
     clearConfig();
     return window.vega.disconnectWallet();
   }

libs/wallet/src/context.ts

@@ -13,6 +13,9 @@ export interface VegaWalletContextShape {
   /** Url of current connected node */
   vegaUrl: string;
 
+  /** Vega chain id */
+  chainId: string;
+
   /** Url of running wallet service */
   vegaWalletServiceUrl: string;
 

libs/wallet/src/index.ts

@@ -7,3 +7,4 @@ export * from './provider';
 export * from './connect-dialog';
 export * from './utils';
 export * from './storage';
+export * from './use-chain-id';

libs/wallet/src/provider.spec.tsx

@@ -22,6 +22,7 @@ const defaultConfig: VegaWalletConfig = {
     chromeExtensionUrl: 'chrome-link',
     mozillaExtensionUrl: 'mozilla-link',
   },
+  chainId: 'VEGA_CHAIN_ID',
 };
 
 const setup = (config?: Partial<VegaWalletConfig>) => {
@@ -68,6 +69,7 @@ describe('VegaWalletProvider', () => {
     expect(result.current).toEqual({
       network: defaultConfig.network,
       vegaUrl: defaultConfig.vegaUrl,
+      chainId: defaultConfig.chainId,
       vegaWalletServiceUrl: defaultConfig.vegaWalletServiceUrl,
       acknowledgeNeeded: false,
       pubKey: null,

libs/wallet/src/provider.tsx

@@ -39,6 +39,7 @@ interface VegaWalletLinks {
 export interface VegaWalletConfig {
   network: Networks;
   vegaUrl: string;
+  chainId: string;
   vegaWalletServiceUrl: string;
   links: VegaWalletLinks;
   keepAlive?: number;
@@ -168,6 +169,7 @@ export const VegaWalletProvider = ({
   const contextValue = useMemo<VegaWalletContextShape>(() => {
     return {
       vegaUrl: config.vegaUrl,
+      chainId: config.chainId,
       vegaWalletServiceUrl: config.vegaWalletServiceUrl,
       network: config.network,
       links: {

libs/wallet/src/test-helpers.ts

@@ -1,6 +1,5 @@
 export function mockBrowserWallet(overrides?: Partial<Vega>) {
   const vega: Vega = {
-    getChainId: jest.fn().mockReturnValue(Promise.resolve({ chainID: '1' })),
     connectWallet: jest.fn().mockReturnValue(Promise.resolve(null)),
     disconnectWallet: jest.fn().mockReturnValue(Promise.resolve()),
     listKeys: jest
@@ -14,6 +13,8 @@ export function mockBrowserWallet(overrides?: Partial<Vega>) {
       success: true,
       txHash: '0x123',
     }),
+    on: jest.fn(),
+    isConnected: jest.fn().mockRejectedValue(Promise.resolve(true)),
     ...overrides,
   };
   // @ts-ignore globalThis has no index signature

libs/wallet/src/use-chain-id.spec.ts

@@ -0,0 +1,100 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { MAX_FETCH_ATTEMPTS, useChainId } from './use-chain-id';
+
+global.fetch = jest.fn();
+const mockFetch = global.fetch as jest.Mock;
+mockFetch.mockImplementation((url: string) => {
+  return Promise.resolve({ ok: true });
+});
+
+describe('useChainId', () => {
+  it('does not call fetch when statistics url could not be determined', async () => {
+    renderHook(() => useChainId(''));
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  it('calls fetch with correct statistics url', async () => {
+    renderHook(() => useChainId('http://localhost:1234/graphql'));
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledWith(
+        'http://localhost:1234/statistics'
+      );
+    });
+  });
+
+  it('does not return chain id when chain id is not present in response', async () => {
+    const { result } = renderHook(() =>
+      useChainId('http://localhost:1234/graphql')
+    );
+    await waitFor(() => {
+      expect(result.current).toBeUndefined();
+    });
+  });
+
+  it('returns chain id when chain id is present in response', async () => {
+    mockFetch.mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        json: () => ({
+          statistics: {
+            chainId: '1234',
+          },
+        }),
+      });
+    });
+    const { result } = renderHook(() =>
+      useChainId('http://localhost:1234/graphql')
+    );
+    await waitFor(() => {
+      expect(result.current).not.toBeUndefined();
+      expect(result.current).toEqual('1234');
+    });
+  });
+
+  it('returns chain id when within max number of attempts', async () => {
+    mockFetch.mockImplementation(() => {
+      if (mockFetch.mock.calls.length < MAX_FETCH_ATTEMPTS) {
+        return Promise.reject();
+      }
+      return Promise.resolve({
+        ok: true,
+        json: () => ({
+          statistics: {
+            chainId: '1234',
+          },
+        }),
+      });
+    });
+    const { result } = renderHook(() =>
+      useChainId('http://localhost:1234/graphql')
+    );
+    await waitFor(() => {
+      expect(result.current).not.toBeUndefined();
+      expect(result.current).toEqual('1234');
+    });
+  });
+
+  it('does not return chain id when max number of attempts exceeded', async () => {
+    mockFetch.mockImplementation(() => {
+      if (mockFetch.mock.calls.length < MAX_FETCH_ATTEMPTS + 10) {
+        return Promise.reject();
+      }
+      return Promise.resolve({
+        ok: true,
+        json: () => ({
+          statistics: {
+            chainId: '1234',
+          },
+        }),
+      });
+    });
+    const { result } = renderHook(() =>
+      useChainId('http://localhost:5678/graphql')
+    );
+    await waitFor(() => {
+      expect(result.current).toBeUndefined();
+    });
+  });
+});

libs/wallet/src/use-chain-id.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useVegaWallet } from '../use-vega-wallet';
+
+export const MAX_FETCH_ATTEMPTS = 3;
 
 const cache: Record<string, string> = {};
 
@@ -18,16 +19,17 @@ const getNodeStatisticsUrl = (vegaUrl: string) => {
   }
 };
 
-export const useChainId = () => {
-  const { vegaUrl } = useVegaWallet();
-  const [chainId, setChainId] = useState<undefined | string>(cache[vegaUrl]);
-  const [fetchAttempt, setFetchAttempt] = useState(1);
+export const useChainId = (vegaUrl: string | undefined) => {
+  const [chainId, setChainId] = useState<undefined | string>(
+    vegaUrl ? cache[vegaUrl] : undefined
+  );
+  const [fetchAttempts, setFetchAttempts] = useState(1);
 
-  const statisticsUrl = getNodeStatisticsUrl(vegaUrl);
+  const statisticsUrl = vegaUrl ? getNodeStatisticsUrl(vegaUrl) : undefined;
 
   useEffect(() => {
     // abort when `/statistics` URL could not be determined
-    if (!statisticsUrl) return;
+    if (!statisticsUrl || !vegaUrl) return;
     let isCancelled = false;
     if (cache[vegaUrl]) {
       setChainId(cache[vegaUrl]);
@@ -42,16 +44,19 @@ export const useChainId = () => {
         if (!response?.statistics?.chainId) {
           throw new Error('statistics.chainId not present in fetched response');
         }
-        setChainId(response?.statistics?.chainId);
+
+        const chainId = response.statistics.chainId;
+        cache[vegaUrl] = chainId;
+        setChainId(chainId);
       })
       .catch(() => {
-        if (fetchAttempt < 3) {
-          setFetchAttempt((value) => (value += 1));
+        if (fetchAttempts < MAX_FETCH_ATTEMPTS) {
+          setFetchAttempts((value) => (value += 1));
         }
       });
     return () => {
       isCancelled = true;
     };
-  }, [fetchAttempt, statisticsUrl, vegaUrl]);
+  }, [fetchAttempts, statisticsUrl, vegaUrl]);
   return chainId;
 };

libs/wallet/src/use-eager-connect.ts

@@ -7,7 +7,7 @@ import { useVegaWallet } from './use-vega-wallet';
 
 export function useEagerConnect(connectors: Connectors) {
   const [connecting, setConnecting] = useState(true);
-  const { vegaUrl, connect, acknowledgeNeeded } = useVegaWallet();
+  const { vegaUrl, chainId, connect, acknowledgeNeeded } = useVegaWallet();
 
   useEffect(() => {
     const attemptConnect = async () => {
@@ -33,7 +33,7 @@ export function useEagerConnect(connectors: Connectors) {
 
       try {
         if (connector instanceof InjectedConnector) {
-          await connector.connectWallet();
+          await connector.connectWallet(chainId);
           await connect(connector);
         } else if (connector instanceof SnapConnector) {
           connector.nodeAddress = new URL(vegaUrl).origin;
@@ -51,7 +51,7 @@ export function useEagerConnect(connectors: Connectors) {
     if (typeof window !== 'undefined') {
       attemptConnect();
     }
-  }, [connect, connectors, acknowledgeNeeded, vegaUrl]);
+  }, [connect, connectors, acknowledgeNeeded, vegaUrl, chainId]);
 
   return connecting;
 }

libs/wallet/src/use-injected-connector.spec.tsx

@@ -16,6 +16,7 @@ const defaultConfig: VegaWalletConfig = {
     chromeExtensionUrl: 'chrome-link',
     mozillaExtensionUrl: 'mozilla-link',
   },
+  chainId: 'VEGA_CHAIN_ID',
 };
 
 const setup = (callback = jest.fn(), config?: Partial<VegaWalletConfig>) => {
@@ -46,20 +47,10 @@ describe('useInjectedConnector', () => {
     expect(result.current.status).toBe(Status.Error);
   });
 
-  it('errors if chain ids dont match', async () => {
-    mockBrowserWallet();
-    const { result } = setup();
-    await act(async () => {
-      result.current.connect(injected, '2'); // default mock chainId is '1'
-    });
-    expect(result.current.error?.message).toBe('Invalid chain');
-    expect(result.current.status).toBe(Status.Error);
-  });
-
   it('errors if connection throws', async () => {
     const callback = jest.fn();
     mockBrowserWallet({
-      getChainId: () => Promise.reject('failed'),
+      connectWallet: jest.fn().mockReturnValue(Promise.reject()),
     });
     const { result } = setup(callback);
 
@@ -67,7 +58,9 @@ describe('useInjectedConnector', () => {
       result.current.connect(injected, '1'); // default mock chainId is '1'
     });
     expect(result.current.status).toBe(Status.Error);
-    expect(result.current.error?.message).toBe('injected connection failed');
+    expect(result.current.error?.message).toBe(
+      'could not connect to the vega wallet on chain: 1'
+    );
   });
 
   it('connects', async () => {
@@ -78,7 +71,6 @@ describe('useInjectedConnector', () => {
     act(() => {
       result.current.connect(injected, '1'); // default mock chainId is '1'
     });
-    expect(result.current.status).toBe(Status.GettingChainId);
 
     await waitFor(() => {
       expect(vega.connectWallet).toHaveBeenCalled();

libs/wallet/src/use-injected-connector.ts

@@ -40,17 +40,19 @@ export const useInjectedConnector = (onConnect: () => void) => {
           connector.nodeAddress = new URL(vegaUrl).origin;
         }
 
-        setStatus(Status.GettingChainId);
-
-        const { chainID } = await connector.getChainId();
-        if (chainID !== appChainId) {
-          throw InjectedConnectorErrors.INVALID_CHAIN;
+        // check the chain id for snap connector
+        if (connector instanceof SnapConnector) {
+          setStatus(Status.GettingChainId);
+          const { chainID } = await connector.getChainId();
+          if (chainID !== appChainId) {
+            throw InjectedConnectorErrors.INVALID_CHAIN;
+          }
         }
 
         setStatus(Status.Connecting);
         if (connector instanceof InjectedConnector) {
           // extra step for injected connector - authorize wallet
-          await connector.connectWallet();
+          await connector.connectWallet(appChainId);
         }
         await connect(connector); // connect with keys
 

libs/web3/src/index.ts

@@ -1,7 +1,11 @@
+export * from './lib/__generated__/TransactionResult';
+export * from './lib/__generated__/WithdrawalApproval';
 export * from './lib/constants';
+export * from './lib/default-web3-provider';
 export * from './lib/eip-1193-custom-bridge';
 export * from './lib/ethereum-error';
 export * from './lib/ethereum-transaction-dialog';
+export * from './lib/types';
 export * from './lib/url-connector';
 export * from './lib/use-bridge-contract';
 export * from './lib/use-eager-connect';
@@ -19,7 +23,12 @@ export * from './lib/use-get-withdraw-delay';
 export * from './lib/use-get-withdraw-threshold';
 export * from './lib/use-token-contract';
 export * from './lib/use-token-decimals';
+export * from './lib/use-transaction-result';
+export * from './lib/use-vega-transaction-manager';
+export * from './lib/use-vega-transaction-store';
 export * from './lib/use-vega-transaction-toasts';
+export * from './lib/use-vega-transaction-updater';
+export * from './lib/use-wallet-disconnected-toasts';
 export * from './lib/use-web3-disconnect';
 export * from './lib/web3-connect-dialog';
 export * from './lib/web3-connect-store';
@@ -27,11 +36,3 @@ export * from './lib/web3-connectors';
 export * from './lib/web3-provider';
 export * from './lib/withdrawal-approval-dialog';
 export * from './lib/withdrawal-approval-status';
-export * from './lib/default-web3-provider';
-export * from './lib/use-vega-transaction-manager';
-export * from './lib/use-vega-transaction-store';
-export * from './lib/use-vega-transaction-updater';
-export * from './lib/use-transaction-result';
-export * from './lib/types';
-export * from './lib/__generated__/TransactionResult';
-export * from './lib/__generated__/WithdrawalApproval';

libs/web3/src/lib/use-wallet-disconnected-toasts.tsx

@@ -0,0 +1,78 @@
+import {
+  Intent,
+  useToasts,
+  ToastHeading,
+  CLOSE_AFTER,
+  type Toast,
+} from '@vegaprotocol/ui-toolkit';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { useEffect, useMemo } from 'react';
+import { useT } from './use-t';
+import { usePrevious } from '@vegaprotocol/react-helpers';
+
+export const WALLET_DISCONNECTED_TOAST_ID = 'WALLET_DISCONNECTED_TOAST_ID';
+
+export const useWalletDisconnectToastActions = () => {
+  const [hasToast, updateToast] = useToasts((state) => [
+    state.hasToast,
+    state.update,
+  ]);
+  const hideToast = () => {
+    if (!hasToast(WALLET_DISCONNECTED_TOAST_ID)) return;
+    updateToast(WALLET_DISCONNECTED_TOAST_ID, {
+      hidden: true,
+    });
+  };
+  const showToast = () => {
+    if (!hasToast(WALLET_DISCONNECTED_TOAST_ID)) return;
+    updateToast(WALLET_DISCONNECTED_TOAST_ID, {
+      hidden: false,
+    });
+  };
+  return { showToast, hideToast };
+};
+
+export const useWalletDisconnectedToasts = (
+  additionalContent?: JSX.Element
+) => {
+  const t = useT();
+  const [hasToast, setToast] = useToasts((state) => [
+    state.hasToast,
+    state.setToast,
+    state.update,
+  ]);
+  const { showToast, hideToast } = useWalletDisconnectToastActions();
+
+  const { isAlive } = useVegaWallet();
+  const wasAlive = usePrevious(isAlive);
+  const disconnected = wasAlive && !isAlive;
+
+  const toast: Toast = useMemo(
+    () => ({
+      id: WALLET_DISCONNECTED_TOAST_ID,
+      intent: Intent.Danger,
+      content: (
+        <>
+          <ToastHeading>{t('Wallet connection lost')}</ToastHeading>
+          <p>{t('The connection to the Vega wallet has been lost.')}</p>
+          {additionalContent}
+        </>
+      ),
+      onClose: () => {
+        hideToast();
+      },
+      closeAfter: CLOSE_AFTER,
+    }),
+    [additionalContent, hideToast, t]
+  );
+
+  useEffect(() => {
+    if (disconnected) {
+      if (hasToast(WALLET_DISCONNECTED_TOAST_ID)) {
+        showToast();
+      } else {
+        setToast(toast);
+      }
+    }
+  }, [disconnected, hasToast, isAlive, setToast, showToast, t, toast]);
+};