Fixed useDepositPending

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,

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} />

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} />

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[] =>

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;