feat(2298): handle lost connection with wallet during order setting (#2344)

* feat: handle lost connection with wallet during order setting

* Update libs/deal-ticket/src/components/deal-ticket/deal-ticket-manager.tsx

Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com>

* feat: handle lost connection with wallet during order setting - adjust wording

* feat: handle lost connection with wallet during order setting - adjust wording

* feat: handle lost connection with wallet during order setting - adjust wording

* fix: handle lost connection with wallet add print vega version

* fix: handle lost connection with wallet add print vega version

Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com>

.github/workflows/cypress-trading-e2e.yml

@@ -20,6 +20,8 @@ jobs:
     timeout-minutes: 30
     runs-on: self-hosted
     steps:
+      - name: check version
+        run: vega version
       # Checkout front ends
       - name: Checkout frontend mono repo
         uses: actions/checkout@v3

libs/deal-ticket/src/components/deal-ticket/deal-ticket-manager.tsx

@@ -1,10 +1,18 @@
+import { useCallback, useMemo } from 'react';
 import type { ReactNode } from 'react';
-import { VegaTxStatus } from '@vegaprotocol/wallet';
+import type { VegaTxState } from '@vegaprotocol/wallet';
+import {
+  VegaTxStatus,
+  WalletError,
+  useVegaWallet,
+  useVegaWalletDialogStore,
+  ClientErrors,
+} from '@vegaprotocol/wallet';
 import { DealTicket } from './deal-ticket';
 import type { MarketDealTicket } from '@vegaprotocol/market-list';
 import { useOrderSubmit, OrderFeedback } from '@vegaprotocol/orders';
 import * as Schema from '@vegaprotocol/types';
-import { Icon, Intent } from '@vegaprotocol/ui-toolkit';
+import { Button, Icon, Intent } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
 
 export interface DealTicketManagerProps {
@@ -12,12 +20,54 @@ export interface DealTicketManagerProps {
   children?: ReactNode | ReactNode[];
 }
 
+interface ErrorContentProps {
+  transaction: VegaTxState;
+  reset: () => void;
+}
+const ErrorContent = ({ transaction, reset }: ErrorContentProps) => {
+  const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
+    openVegaWalletDialog: store.openVegaWalletDialog,
+  }));
+  const { disconnect } = useVegaWallet();
+  const reconnect = useCallback(async () => {
+    reset();
+    await disconnect();
+    openVegaWalletDialog();
+  }, [reset, disconnect, openVegaWalletDialog]);
+  return useMemo(() => {
+    const { error } = transaction;
+    if (error) {
+      if (
+        error instanceof WalletError &&
+        error.code === ClientErrors.NO_SERVICE.code
+      ) {
+        return (
+          <ul data-testid="connectors-list" className="mb-6">
+            <li className="mb-2 last:mb-0" data-testid={transaction.status}>
+              {t('The connection to your Vega Wallet has been lost.')}
+            </li>
+            <li className="mb-0 pt-2">
+              <Button onClick={reconnect}>{t('Connect vega wallet')}</Button>
+            </li>
+          </ul>
+        );
+      }
+      return (
+        <p data-testid={transaction.status}>
+          {error.message}: {error.data}
+        </p>
+      );
+    }
+    return null;
+  }, [transaction, reconnect]);
+};
+
 export const DealTicketManager = ({
   market,
   children,
 }: DealTicketManagerProps) => {
-  const { submit, transaction, finalizedOrder, Dialog } = useOrderSubmit();
-
+  const { submit, transaction, finalizedOrder, Dialog, reset } =
+    useOrderSubmit();
   return (
     <>
       {children || (
@@ -40,6 +90,7 @@ export const DealTicketManager = ({
           Complete: (
             <OrderFeedback transaction={transaction} order={finalizedOrder} />
           ),
+          Error: <ErrorContent transaction={transaction} reset={reset} />,
         }}
       />
     </>

libs/orders/src/lib/order-hooks/use-order-submit.tsx

@@ -1,9 +1,12 @@
 import { useCallback, useState } from 'react';
 import type { ReactNode } from 'react';
 import type { OrderEventFieldsFragment } from './__generated__/OrderEvent';
-import { useVegaWallet } from '@vegaprotocol/wallet';
 import { toNanoSeconds } from '@vegaprotocol/react-helpers';
-import { useVegaTransaction, determineId } from '@vegaprotocol/wallet';
+import {
+  useVegaWallet,
+  useVegaTransaction,
+  determineId,
+} from '@vegaprotocol/wallet';
 import * as Sentry from '@sentry/react';
 import { useOrderEvent } from './use-order-event';
 import * as Schema from '@vegaprotocol/types';

libs/wallet/src/provider.tsx

@@ -68,6 +68,13 @@ export const VegaWalletProvider = ({ children }: VegaWalletProviderProps) => {
       return true;
     } catch (err) {
       console.error(err);
+      if (err instanceof WalletError && err.code === 100) {
+        setPubKeys(null);
+        setPubKey(null);
+        connector.current = null;
+        LocalStorage.removeItem(WALLET_KEY);
+        return true;
+      }
       return false;
     }
   }, []);