fix: inform the user his connection to wallet has been lost - adjustments

libs/wallet/src/use-vega-transaction-updater.tsx

@@ -1,25 +1,12 @@
-import type { SubscriptionResult } from '@apollo/client';
 import { useApolloClient } from '@apollo/client';
 import { useVegaWallet } from './use-vega-wallet';
-import type {
-  OrderTxUpdateSubscription,
-  OrderTxUpdateSubscriptionVariables,
-} from './__generated__/TransactionResult';
-import type {
-  WithdrawalBusEventSubscription,
-  WithdrawalBusEventSubscriptionVariables,
-  TransactionEventSubscription,
-  TransactionEventSubscriptionVariables,
-} from './__generated__/TransactionResult';
 import {
   useOrderTxUpdateSubscription,
   useWithdrawalBusEventSubscription,
   useTransactionEventSubscription,
 } from './__generated__/TransactionResult';
 import { useVegaTransactionStore } from './use-vega-transaction-store';
-
 import { waitForWithdrawalApproval } from './wait-for-withdrawal-approval';
-import { useCallback, useMemo } from 'react';
 
 export const useVegaTransactionUpdater = () => {
   const client = useApolloClient();
@@ -32,44 +19,22 @@ export const useVegaTransactionUpdater = () => {
   );
 
   const { pubKey } = useVegaWallet();
-  const variables = useMemo(() => ({ partyId: pubKey || '' }), [pubKey]);
+  const variables = { partyId: pubKey || '' };
   const skip = !pubKey;
 
-  const onOrderUpdate = useCallback(
-    ({
-      data: result,
-    }: {
-      data: SubscriptionResult<
-        OrderTxUpdateSubscription,
-        OrderTxUpdateSubscriptionVariables
-      >;
-    }) =>
+  useOrderTxUpdateSubscription({
+    variables,
+    skip,
+    onData: ({ data: result }) =>
       result.data?.orders?.forEach((order) => {
         updateOrder(order);
       }),
-    [updateOrder]
-  );
+  });
 
-  const orderSubscriptionOptions = useMemo(
-    () => ({
-      variables,
-      skip,
-      onData: onOrderUpdate,
-    }),
-    [variables, skip, onOrderUpdate]
-  );
-
-  useOrderTxUpdateSubscription(orderSubscriptionOptions);
-
-  const onWithdrawalUpdate = useCallback(
-    ({
-      data: result,
-    }: {
-      data: SubscriptionResult<
-        WithdrawalBusEventSubscription,
-        WithdrawalBusEventSubscriptionVariables
-      >;
-    }) =>
+  useWithdrawalBusEventSubscription({
+    variables,
+    skip,
+    onData: ({ data: result }) =>
       result.data?.busEvents?.forEach((event) => {
         if (event.event.__typename === 'Withdrawal') {
           const withdrawal = event.event;
@@ -78,43 +43,16 @@ export const useVegaTransactionUpdater = () => {
           );
         }
       }),
-    [waitForWithdrawalApproval, client, updateWithdrawal]
-  );
+  });
 
-  const withdrawalSubscriptionOptions = useMemo(
-    () => ({
-      variables,
-      skip,
-      onData: onWithdrawalUpdate,
-    }),
-    [variables, skip, onWithdrawalUpdate]
-  );
-  useWithdrawalBusEventSubscription(withdrawalSubscriptionOptions);
-
-  const onUpdateTransaction = useCallback(
-    ({
-      data: result,
-    }: {
-      data: SubscriptionResult<
-        TransactionEventSubscription,
-        TransactionEventSubscriptionVariables
-      >;
-    }) =>
+  useTransactionEventSubscription({
+    variables,
+    skip,
+    onData: ({ data: result }) =>
       result.data?.busEvents?.forEach((event) => {
         if (event.event.__typename === 'TransactionResult') {
           updateTransaction(event.event);
         }
       }),
-    [updateTransaction]
-  );
-  const transactionSubscriptionOption = useMemo(
-    () => ({
-      variables,
-      skip,
-      onData: onUpdateTransaction,
-    }),
-    [variables, skip, onUpdateTransaction]
-  );
-
-  useTransactionEventSubscription(transactionSubscriptionOption);
+  });
 };

libs/wallet/src/use-vega-transaction.tsx

@@ -1,5 +1,9 @@
 import type { ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
+import {
+  WalletClientError,
+  WalletHttpError,
+} from '@vegaprotocol/wallet-client';
 import { useVegaWallet } from './use-vega-wallet';
 import type { VegaTransactionContentMap } from './vega-transaction-dialog';
 import { VegaTransactionDialog } from './vega-transaction-dialog';
@@ -39,7 +43,7 @@ export const initialState = {
 };
 
 export const useVegaTransaction = () => {
-  const { sendTx } = useVegaWallet();
+  const { sendTx, disconnect } = useVegaWallet();
   const [transaction, _setTransaction] = useState<VegaTxState>(initialState);
 
   const setTransaction = useCallback((update: Partial<VegaTxState>) => {
@@ -88,7 +92,15 @@ export const useVegaTransaction = () => {
 
         return null;
       } catch (err) {
-        const error = err instanceof Error ? err : ClientErrors.UNKNOWN;
+        const error =
+          err instanceof WalletClientError
+            ? err
+            : err instanceof WalletHttpError
+            ? ClientErrors.UNKNOWN
+            : ClientErrors.NO_SERVICE;
+        if (error.code === ClientErrors.NO_SERVICE.code) {
+          disconnect();
+        }
         setTransaction({
           error,
           status: VegaTxStatus.Error,
@@ -96,7 +108,7 @@ export const useVegaTransaction = () => {
         return null;
       }
     },
-    [sendTx, setTransaction, reset]
+    [sendTx, setTransaction, reset, disconnect]
   );
 
   const Dialog = useMemo(() => {