From 40ad879986dbce3e1d76607a5d1bd850f4f216dc Mon Sep 17 00:00:00 2001
From: makkelie_dev <makkelie@protonmail.com>
Date: Wed, 11 Dec 2024 23:25:20 +0100
Subject: [PATCH] Fixed useDepositPending

---
 .../@widgets/MakeWidget/MakeWidget.tsx        |  2 +-
 .../ApprovalSubmittedScreen.tsx               |  2 +-
 .../DepositSubmittedScreen.tsx                |  2 +-
 .../transactions/transactionsSlice.ts         |  5 ++
 src/hooks/useDepositPending.ts                | 47 +++++++++++++++++--
 5 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/src/components/@widgets/MakeWidget/MakeWidget.tsx b/src/components/@widgets/MakeWidget/MakeWidget.tsx
index 9fc57c5f..4e0744ce 100644
--- a/src/components/@widgets/MakeWidget/MakeWidget.tsx
+++ b/src/components/@widgets/MakeWidget/MakeWidget.tsx
@@ -157,7 +157,7 @@ const MakeWidget: FC = () => {
     makerTokenInfo?.address === ADDRESS_ZERO &&
     !!nativeCurrencySafeTransactionFee[makerTokenInfo.chainId];
   const approvalTransaction = useApprovalPending(makerTokenInfo?.address, true);
-  const depositTransaction = useDepositPending();
+  const depositTransaction = useDepositPending(true);
   const wrappedNativeToken = useNativeWrappedToken(chainId);
   const shouldDepositNativeTokenAmount = useShouldDepositNativeToken(
     makerTokenInfo?.address,
diff --git a/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx b/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx
index f37bdfae..8bd0a35d 100644
--- a/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx
+++ b/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx
@@ -42,7 +42,7 @@ const ApprovalSubmittedScreen: FC<ApprovalSubmittedScreenProps> = ({
     <OverlayContainer
       className={className}
       style={{
-        transform: isAnimatedToCenter ? "translateY(5rem)" : "translateY(0)",
+        transform: isAnimatedToCenter ? "translateY(2.5rem)" : "translateY(0)",
       }}
     >
       <OverlayLoader isSucceeded={isSucceeded} />
diff --git a/src/components/DepositSubmittedScreen/DepositSubmittedScreen.tsx b/src/components/DepositSubmittedScreen/DepositSubmittedScreen.tsx
index 21d4bdb6..4e504c85 100644
--- a/src/components/DepositSubmittedScreen/DepositSubmittedScreen.tsx
+++ b/src/components/DepositSubmittedScreen/DepositSubmittedScreen.tsx
@@ -42,7 +42,7 @@ const DepositSubmittedScreen: FC<DepositSubmittedScreenProps> = ({
     <OverlayContainer
       className={className}
       style={{
-        transform: isAnimatedToCenter ? "translateY(5rem)" : "translateY(0)",
+        transform: isAnimatedToCenter ? "translateY(2.5rem)" : "translateY(0)",
       }}
     >
       <OverlayLoader isSucceeded={isSucceeded} />
diff --git a/src/features/transactions/transactionsSlice.ts b/src/features/transactions/transactionsSlice.ts
index 52685b73..22191abb 100644
--- a/src/features/transactions/transactionsSlice.ts
+++ b/src/features/transactions/transactionsSlice.ts
@@ -173,6 +173,11 @@ export const selectSuccessfulTransactions = (
     (tx) => tx.status === TransactionStatusType.succeeded
   ) as SubmittedTransaction[];
 
+export const selectAllDeposits = (state: RootState) =>
+  state.transactions.transactions.filter(
+    (tx) => tx.type === TransactionTypes.deposit
+  ) as SubmittedDepositTransaction[];
+
 export const selectPendingDeposits = (
   state: RootState
 ): SubmittedDepositTransaction[] =>
diff --git a/src/hooks/useDepositPending.ts b/src/hooks/useDepositPending.ts
index 36c6bea3..2244352c 100644
--- a/src/hooks/useDepositPending.ts
+++ b/src/hooks/useDepositPending.ts
@@ -1,11 +1,52 @@
+import { useEffect, useMemo, useState } from "react";
+import { useDebounce } from "react-use";
+
 import { useAppSelector } from "../app/hooks";
 import { SubmittedDepositTransaction } from "../entities/SubmittedTransaction/SubmittedTransaction";
-import { selectPendingDeposits } from "../features/transactions/transactionsSlice";
+import {
+  selectAllDeposits,
+  selectPendingDeposits,
+} from "../features/transactions/transactionsSlice";
 
-const useDepositPending = (): SubmittedDepositTransaction | undefined => {
+const useDepositPending = (
+  showResolvedDeposit: boolean = false
+): SubmittedDepositTransaction | undefined => {
   const pendingDeposits = useAppSelector(selectPendingDeposits);
+  const allDeposits = useAppSelector(selectAllDeposits);
+
+  const [debouncedDeposit, setDebouncedDeposit] = useState<
+    SubmittedDepositTransaction | undefined
+  >(undefined);
+
+  const pendingDeposit = pendingDeposits.length
+    ? pendingDeposits[0]
+    : undefined;
+
+  const resolvedDeposit = useMemo(() => {
+    if (debouncedDeposit) {
+      return allDeposits.find((tx) => tx.hash === debouncedDeposit.hash);
+    }
+
+    return undefined;
+  }, [debouncedDeposit, allDeposits]);
+
+  useEffect(() => {
+    if (pendingDeposit) {
+      setDebouncedDeposit(pendingDeposit);
+    }
+  }, [pendingDeposit]);
+
+  useDebounce(
+    () => {
+      if (pendingDeposit === undefined) {
+        setDebouncedDeposit(undefined);
+      }
+    },
+    3000,
+    [pendingDeposit]
+  );
 
-  return pendingDeposits.length ? pendingDeposits[0] : undefined;
+  return pendingDeposit || (showResolvedDeposit ? resolvedDeposit : undefined);
 };
 
 export default useDepositPending;