fix(trading): withdrawal issues (#6823)

apps/trading/components/asset-activity/use-asset-activity.ts

@@ -18,6 +18,7 @@ import {
   useWithdrawals,
 } from '@vegaprotocol/withdraws';
 import { toBigNum } from '@vegaprotocol/utils';
+import { WithdrawalStatus } from '@vegaprotocol/types';
 
 export interface RowBase {
   asset: AssetFieldsFragment | undefined;
@@ -84,7 +85,11 @@ export const useAssetActivity = () => {
     // Filter out any incomplete withdrawals so they can be added as
     // pinned rows to the top
     const rows = orderedRows.filter((r) => {
-      if (r.type === 'Withdrawal' && !r.detail.txHash) {
+      if (
+        r.type === 'Withdrawal' &&
+        r.detail.status !== WithdrawalStatus.STATUS_REJECTED &&
+        !r.detail.txHash
+      ) {
         pinnedTopRows.push(r);
         return false;
       }

apps/trading/components/asset-activity/withdrawal-status-cell.tsx

@@ -1,5 +1,5 @@
 import { DAY, getDateTimeFormat, getTimeFormat } from '@vegaprotocol/utils';
-import { WithdrawalStatusMapping } from '@vegaprotocol/types';
+import { WithdrawalStatus, WithdrawalStatusMapping } from '@vegaprotocol/types';
 import {
   useEVMBridgeConfigs,
   useEthereumConfig,
@@ -20,7 +20,10 @@ type Props = {
 };
 
 export const WithdrawalStatusCell = ({ data, openDialog }: Props) => {
-  if (!data.detail.txHash) {
+  if (
+    data.detail.status !== WithdrawalStatus.STATUS_REJECTED &&
+    !data.detail.txHash
+  ) {
     return <WithdrawalStatusOpen data={data} openDialog={openDialog} />;
   }
 
@@ -39,7 +42,13 @@ const WithdrawalStatusOpen = ({ data, openDialog }: Props) => {
     },
   });
 
-  const [status, setStatus] = useState<'idle' | 'delayed' | 'ready'>(() => {
+  const [status, setStatus] = useState<
+    'idle' | 'delayed' | 'ready' | 'rejected'
+  >(() => {
+    if (data.detail.status === WithdrawalStatus.STATUS_REJECTED) {
+      return 'rejected';
+    }
+
     if (data.asset?.source.__typename === 'ERC20') {
       if (data.asset.source.withdrawThreshold === '0') {
         return 'ready';
@@ -70,6 +79,11 @@ const WithdrawalStatusOpen = ({ data, openDialog }: Props) => {
         data.asset?.source.__typename === 'ERC20' &&
         data.asset?.source.withdrawThreshold !== '0';
 
+      if (data.detail.status === WithdrawalStatus.STATUS_REJECTED) {
+        setStatus('rejected');
+        return;
+      }
+
       if (hasThreshold && delay) {
         const readyTimestamp =
           new Date(data.detail.createdTimestamp).getTime() +
@@ -86,6 +100,8 @@ const WithdrawalStatusOpen = ({ data, openDialog }: Props) => {
         } else {
           setStatus('ready');
         }
+      } else {
+        setStatus('ready');
       }
     };
 
@@ -94,7 +110,7 @@ const WithdrawalStatusOpen = ({ data, openDialog }: Props) => {
     return () => {
       clearTimeout(timeoutRef.current);
     };
-  }, [delay, data.asset, data.detail.createdTimestamp]);
+  }, [delay, data.asset, data.detail.createdTimestamp, data.detail.status]);
 
   if (status === 'idle') {
     return <>-</>;

libs/web3/src/lib/use-vega-transaction-updater.tsx

@@ -1,3 +1,4 @@
+import groupBy from 'lodash/groupBy';
 import { useApolloClient } from '@apollo/client';
 import { useVegaWallet } from '@vegaprotocol/wallet-react';
 import {
@@ -63,15 +64,24 @@ export const useVegaTransactionUpdater = () => {
     variables,
     skip,
     fetchPolicy: 'no-cache',
-    onData: ({ data: result }) =>
-      result.data?.busEvents?.forEach((event) => {
+    onData: ({ data: result }) => {
+      // If a withdrawal is rejected the subscription will get two events the first
+      // will have STATUS_OPEN and the second will have STATUS_REJECTED, so we need
+      // to take the last update for each withdrawal
+      const withdrawals = Object.values(
+        groupBy(result.data?.busEvents, 'event.id')
+      );
+
+      withdrawals.forEach((w) => {
+        const event = w[w.length - 1];
         if (event.event.__typename === 'Withdrawal') {
           const withdrawal = event.event;
           waitForWithdrawalApproval(withdrawal.id, client).then((approval) => {
             updateWithdrawal(withdrawal, approval);
           });
         }
-      }),
+      });
+    },
   });
 
   useTransactionEventSubscription({