fix: ensure sub is cancelled if dialog is closed (#1472)

* fix: ensure sub is cancelled if dialog is closed

* fix: pass transaction object in use proposal hooks

libs/governance/src/lib/proposals-hooks/use-proposal-event.ts

@@ -6,6 +6,7 @@ import type {
   ProposalEvent_busEvents_event_Proposal,
 } from './__generated__/ProposalEvent';
 import type { Subscription } from 'zen-observable-ts';
+import type { VegaTxState } from '@vegaprotocol/wallet';
 
 export const PROPOSAL_EVENT_SUB = gql`
   subscription ProposalEvent($partyId: ID!) {
@@ -24,7 +25,7 @@ export const PROPOSAL_EVENT_SUB = gql`
   }
 `;
 
-export const useProposalEvent = () => {
+export const useProposalEvent = (transaction: VegaTxState) => {
   const client = useApolloClient();
   const subRef = useRef<Subscription | null>(null);
 
@@ -66,10 +67,13 @@ export const useProposalEvent = () => {
   );
 
   useEffect(() => {
+    if (!transaction.dialogOpen) {
+      subRef.current?.unsubscribe();
+    }
     return () => {
       subRef.current?.unsubscribe();
     };
-  }, []);
+  }, [transaction.dialogOpen]);
 
   return waitForProposalEvent;
 };

libs/governance/src/lib/proposals-hooks/use-proposal-submit.ts

@@ -8,9 +8,9 @@ import type { ProposalEvent_busEvents_event_Proposal } from './__generated__/Pro
 
 export const useProposalSubmit = () => {
   const { keypair } = useVegaWallet();
-  const waitForProposalEvent = useProposalEvent();
 
   const { send, transaction, setComplete, Dialog } = useVegaTransaction();
+  const waitForProposalEvent = useProposalEvent(transaction);
 
   const [finalizedProposal, setFinalizedProposal] =
     useState<ProposalEvent_busEvents_event_Proposal | null>(null);

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

@@ -11,7 +11,6 @@ export interface CancelOrderArgs {
 
 export const useOrderCancel = () => {
   const { keypair } = useVegaWallet();
-  const waitForOrderEvent = useOrderEvent();
 
   const [cancelledOrder, setCancelledOrder] =
     useState<OrderEvent_busEvents_event_Order | null>(null);
@@ -24,6 +23,8 @@ export const useOrderCancel = () => {
     Dialog,
   } = useVegaTransaction();
 
+  const waitForOrderEvent = useOrderEvent(transaction);
+
   const reset = useCallback(() => {
     resetTransaction();
     setCancelledOrder(null);

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

@@ -25,7 +25,7 @@ export const useOrderEdit = (order: OrderWithMarket | null) => {
     Dialog,
   } = useVegaTransaction();
 
-  const waitForOrderEvent = useOrderEvent();
+  const waitForOrderEvent = useOrderEvent(transaction);
 
   const reset = useCallback(() => {
     resetTransaction();

libs/orders/src/lib/order-hooks/use-order-event.ts

@@ -7,8 +7,9 @@ import type {
   OrderEvent_busEvents_event_Order,
 } from './';
 import type { Subscription } from 'zen-observable-ts';
+import type { VegaTxState } from '@vegaprotocol/wallet';
 
-export const useOrderEvent = () => {
+export const useOrderEvent = (transaction: VegaTxState) => {
   const client = useApolloClient();
   const subRef = useRef<Subscription | null>(null);
 
@@ -50,10 +51,14 @@ export const useOrderEvent = () => {
   );
 
   useEffect(() => {
+    if (!transaction.dialogOpen) {
+      subRef.current?.unsubscribe();
+    }
+
     return () => {
       subRef.current?.unsubscribe();
     };
-  }, []);
+  }, [transaction.dialogOpen]);
 
   return waitForOrderEvent;
 };

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

@@ -96,7 +96,6 @@ export const getOrderDialogIcon = (
 
 export const useOrderSubmit = () => {
   const { keypair } = useVegaWallet();
-  const waitForOrderEvent = useOrderEvent();
 
   const {
     send,
@@ -106,6 +105,8 @@ export const useOrderSubmit = () => {
     Dialog,
   } = useVegaTransaction();
 
+  const waitForOrderEvent = useOrderEvent(transaction);
+
   const [finalizedOrder, setFinalizedOrder] =
     useState<OrderEvent_busEvents_event_Order | null>(null);
 

libs/positions/src/lib/use-close-position.ts

@@ -8,7 +8,6 @@ import type { Position } from '../';
 
 export const useClosePosition = () => {
   const { keypair } = useVegaWallet();
-  const waitForPositionEvent = usePositionEvent();
 
   const {
     send,
@@ -17,6 +16,7 @@ export const useClosePosition = () => {
     setComplete,
     Dialog,
   } = useVegaTransaction();
+  const waitForPositionEvent = usePositionEvent(transaction);
 
   const reset = useCallback(() => {
     resetTransaction();

libs/positions/src/lib/use-position-event.ts

@@ -1,7 +1,8 @@
+import type { VegaTxState } from '@vegaprotocol/wallet';
 import { useCallback } from 'react';
 
 // this should be replaced by implementation of busEvents listener when it will be available
-export const usePositionEvent = () => {
+export const usePositionEvent = (transaction: VegaTxState) => {
   const waitForOrderEvent = useCallback(
     (id: string, partyId: string, callback: () => void) => {
       Promise.resolve().then(() => {

libs/withdraws/src/lib/use-create-withdraw.ts

@@ -15,7 +15,6 @@ export interface WithdrawalArgs {
 
 export const useCreateWithdraw = () => {
   const waitForWithdrawalApproval = useWithdrawalApproval();
-  const waitForWithdrawal = useWithdrawalEvent();
   const [approval, setApproval] =
     useState<Erc20Approval_erc20WithdrawalApproval | null>(null);
   const [withdrawal, setWithdrawal] = useState<WithdrawalFields | null>(null);
@@ -27,6 +26,8 @@ export const useCreateWithdraw = () => {
   const { transaction, send, setComplete, reset, Dialog } =
     useVegaTransaction();
 
+  const waitForWithdrawal = useWithdrawalEvent(transaction);
+
   const submit = useCallback(
     async (withdrawal: WithdrawalArgs) => {
       if (!keypair) {

libs/withdraws/src/lib/use-withdrawal-event.ts

@@ -1,4 +1,5 @@
 import { useApolloClient } from '@apollo/client';
+import type { VegaTxState } from '@vegaprotocol/wallet';
 import { useCallback, useEffect, useRef } from 'react';
 import type { Subscription } from 'zen-observable-ts';
 import { WITHDRAWAL_BUS_EVENT_SUB } from './use-withdrawals';
@@ -12,7 +13,8 @@ type WaitForWithdrawalEvent = (
   id: string,
   partyId: string
 ) => Promise<WithdrawalEvent_busEvents_event_Withdrawal>;
-export const useWithdrawalEvent = () => {
+
+export const useWithdrawalEvent = (transaction: VegaTxState) => {
   const client = useApolloClient();
   const subRef = useRef<Subscription | null>(null);
 
@@ -52,10 +54,13 @@ export const useWithdrawalEvent = () => {
   );
 
   useEffect(() => {
+    if (!transaction.dialogOpen) {
+      subRef.current?.unsubscribe();
+    }
     return () => {
       subRef.current?.unsubscribe();
     };
-  }, []);
+  }, [transaction.dialogOpen]);
 
   return waitForWithdrawalEvent;
 };