983: Added DepositSubmittedScreen

public/locales/en/translation.json

@@ -119,6 +119,8 @@
     "continue": "Continue",
     "copyLink": "Copy link",
     "counterPartyAddress": "Counterparty address",
+    "depositComplete": "Deposit complete",
+    "depositProcessing": "Deposit processing...",
     "dismiss": "Dismiss",
     "editCustomTokens": "Edit",
     "enterAmount": "Enter an amount",

src/components/@widgets/MakeWidget/MakeWidget.tsx

@@ -59,6 +59,7 @@ import ApproveReview from "../../@reviewScreens/ApproveReview/ApproveReview";
 import MakeOrderReview from "../../@reviewScreens/MakeOrderReview/MakeOrderReview";
 import WrapReview from "../../@reviewScreens/WrapReview/WrapReview";
 import ApprovalSubmittedScreen from "../../ApprovalSubmittedScreen/ApprovalSubmittedScreen";
+import DepositSubmittedScreen from "../../DepositSubmittedScreen/DepositSubmittedScreen";
 import { SelectOption } from "../../Dropdown/Dropdown";
 import OrderTypesModal from "../../InformationModals/subcomponents/OrderTypesModal/OrderTypesModal";
 import ModalOverlay from "../../ModalOverlay/ModalOverlay";
@@ -156,13 +157,13 @@ const MakeWidget: FC = () => {
     makerTokenInfo?.address === ADDRESS_ZERO &&
     !!nativeCurrencySafeTransactionFee[makerTokenInfo.chainId];
   const approvalTransaction = useApprovalPending(makerTokenInfo?.address, true);
+  const depositTransaction = useDepositPending();
   const wrappedNativeToken = useNativeWrappedToken(chainId);
   const shouldDepositNativeTokenAmount = useShouldDepositNativeToken(
     makerTokenInfo?.address,
     makerAmount
   );
   const shouldDepositNativeToken = !!shouldDepositNativeTokenAmount;
-  const hasDepositPending = useDepositPending();
   const isValidAddress = useValidAddress(takerAddress);
   const isAllowancesOrBalancesFailed = useAllowancesOrBalancesFailed();
   const isNetworkSupported = useNetworkSupported();
@@ -384,7 +385,7 @@ const MakeWidget: FC = () => {
         <>
           <WrapReview
             hasEditButton
-            isLoading={hasDepositPending}
+            isLoading={!!depositTransaction}
             amount={makerAmount}
             amountPlusFee={makerAmountPlusFee}
             shouldDepositNativeTokenAmount={shouldDepositNativeTokenAmount}
@@ -545,6 +546,17 @@ const MakeWidget: FC = () => {
         )}
       </TransactionOverlay>
 
+      <TransactionOverlay
+        isHidden={ordersStatus === "signing" || !depositTransaction}
+      >
+        {depositTransaction && (
+          <DepositSubmittedScreen
+            chainId={chainId}
+            transaction={depositTransaction}
+          />
+        )}
+      </TransactionOverlay>
+
       <ModalOverlay
         hasDynamicHeight
         onClose={() => setShowTokenSelectModal(null)}

src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx

@@ -141,7 +141,7 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
   );
   const isAllowancesOrBalancesFailed = useAllowancesOrBalancesFailed();
   const shouldDepositNativeToken = !!shouldDepositNativeTokenAmount;
-  const hasDepositPending = useDepositPending();
+  const hasDepositPending = !!useDepositPending();
   const orderTransactionLink = useOrderTransactionLink(order.nonce);
   const orderChainId = useMemo(() => order.chainId, [order]);
   const walletChainIdIsDifferentThanOrderChainId =

src/components/@widgets/SwapWidget/SwapWidget.tsx

@@ -194,7 +194,7 @@ const SwapWidget: FC = () => {
     !hasSufficientAllowance &&
     !hasApprovalSuccess &&
     swapType !== SwapType.wrapOrUnwrap;
-  const hasDepositPending = useDepositPending();
+  const hasDepositPending = !!useDepositPending();
   const hasWithdrawalPending = useWithdrawalPending();
   const hasDepositOrWithdrawalPending =
     hasDepositPending || hasWithdrawalPending;

src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx

@@ -5,13 +5,12 @@ import { SubmittedApprovalTransaction } from "../../entities/SubmittedTransactio
 import useDebounce from "../../hooks/useDebounce";
 import {
   OverlayContainer,
-  OverlayLoader,
   OverlaySubHeading,
   OverlayTitle,
   OverlayTransactionLink,
 } from "../../styled-components/Overlay/Overlay";
 import { TransactionStatusType } from "../../types/transactionTypes";
-import { IconWrapper, StyledIcon } from "./ApprovalSubmittedScreen.styles";
+import OverlayLoader from "../OverlayLoader/OverlayLoader";
 
 interface ApprovalSubmittedScreenProps {
   chainId?: number;
@@ -46,13 +45,7 @@ const ApprovalSubmittedScreen: FC<ApprovalSubmittedScreenProps> = ({
         transform: isAnimatedToCenter ? "translateY(5rem)" : "translateY(0)",
       }}
     >
-      {isSucceeded ? (
-        <IconWrapper>
-          <StyledIcon name="check-circle" />
-        </IconWrapper>
-      ) : (
-        <OverlayLoader />
-      )}
+      <OverlayLoader isSucceeded={isSucceeded} />
       <OverlayTitle type="h2">
         {isSucceeded
           ? t("orders.approvalComplete")

src/components/DepositSubmittedScreen/DepositSubmittedScreen.tsx

@@ -0,0 +1,67 @@
+import { FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { SubmittedDepositTransaction } from "../../entities/SubmittedTransaction/SubmittedTransaction";
+import useDebounce from "../../hooks/useDebounce";
+import {
+  OverlayContainer,
+  OverlaySubHeading,
+  OverlayTitle,
+  OverlayTransactionLink,
+} from "../../styled-components/Overlay/Overlay";
+import { TransactionStatusType } from "../../types/transactionTypes";
+import OverlayLoader from "../OverlayLoader/OverlayLoader";
+
+interface DepositSubmittedScreenProps {
+  chainId?: number;
+  transaction?: SubmittedDepositTransaction;
+  className?: string;
+}
+
+const DepositSubmittedScreen: FC<DepositSubmittedScreenProps> = ({
+  chainId,
+  transaction,
+  className = "",
+}) => {
+  const { t } = useTranslation();
+  const [isAnimatedToCenter, setIsAnimatedToCenter] = useState(false);
+
+  const isSucceeded = transaction?.status === TransactionStatusType.succeeded;
+
+  useDebounce(
+    () => {
+      if (isSucceeded) {
+        setIsAnimatedToCenter(true);
+      }
+    },
+    500,
+    [isSucceeded]
+  );
+
+  return (
+    <OverlayContainer
+      className={className}
+      style={{
+        transform: isAnimatedToCenter ? "translateY(5rem)" : "translateY(0)",
+      }}
+    >
+      <OverlayLoader isSucceeded={isSucceeded} />
+      <OverlayTitle type="h2">
+        {isSucceeded
+          ? t("orders.depositComplete")
+          : t("orders.depositProcessing")}
+      </OverlayTitle>
+      <OverlaySubHeading isHidden={isSucceeded}>
+        {transaction?.hash && chainId && (
+          <OverlayTransactionLink
+            isHidden={isSucceeded}
+            chainId={chainId}
+            hash={transaction.hash}
+          />
+        )}
+      </OverlaySubHeading>
+    </OverlayContainer>
+  );
+};
+
+export default DepositSubmittedScreen;

src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx

@@ -4,17 +4,15 @@ import { useTranslation } from "react-i18next";
 import { SubmittedTransaction } from "../../entities/SubmittedTransaction/SubmittedTransaction";
 import {
   OverlayContainer,
-  OverlayLoader,
   OverlaySubHeading,
   OverlayTitle,
   OverlayTransactionLink,
 } from "../../styled-components/Overlay/Overlay";
 import { TransactionStatusType } from "../../types/transactionTypes";
+import OverlayLoader from "../OverlayLoader/OverlayLoader";
 import {
   ButtonsContainer,
-  IconWrapper,
   MakeNewOrderButton,
-  StyledIcon,
   TrackTransactionButton,
 } from "./OrderSubmittedScreen.styles";
 
@@ -43,13 +41,7 @@ const OrderSubmittedScreen: FC<OrderSubmittedInfoProps> = ({
 
   return (
     <OverlayContainer className={className}>
-      {isSucceeded ? (
-        <IconWrapper>
-          <StyledIcon name="check-circle" />
-        </IconWrapper>
-      ) : (
-        <OverlayLoader />
-      )}
+      <OverlayLoader isSucceeded={isSucceeded} />
       {isSendingOrder && (
         <>
           <OverlayTitle type="h2">{t("orders.orderSent")}</OverlayTitle>

src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.styles.tsx → src/components/OverlayLoader/OverlayLoader.styles.tsx

@@ -2,13 +2,13 @@ import styled from "styled-components/macro";
 
 import Icon from "../Icon/Icon";
 
-export const IconWrapper = styled.div`
+export const Container = styled.div`
   display: flex;
   align-items: flex-end;
   justify-content: center;
   position: relative;
-  width: 3.6875rem;
-  height: 3.6875rem;
+  width: 2.375rem;
+  height: 2.375rem;
 `;
 
 export const StyledIcon = styled(Icon)`

src/components/OverlayLoader/OverlayLoader.tsx

@@ -0,0 +1,23 @@
+import { FC } from "react";
+
+import { OverlaySpinningLoader } from "../../styled-components/Overlay/Overlay";
+import { Container, StyledIcon } from "./OverlayLoader.styles";
+
+interface OverlayLoaderProps {
+  isSucceeded?: boolean;
+  className?: string;
+}
+
+const OverlayLoader: FC<OverlayLoaderProps> = ({ isSucceeded, className }) => {
+  return (
+    <Container className={className}>
+      {isSucceeded ? (
+        <StyledIcon name="check-circle" />
+      ) : (
+        <OverlaySpinningLoader />
+      )}
+    </Container>
+  );
+};
+
+export default OverlayLoader;

src/components/WalletSignScreen/WalletSignScreen.tsx

@@ -4,10 +4,11 @@ import i18n from "i18next";
 
 import {
   OverlayContainer,
-  OverlayLoader,
+  OverlaySpinningLoader,
   OverlaySubHeading,
   OverlayTitle,
 } from "../../styled-components/Overlay/Overlay";
+import OverlayLoader from "../OverlayLoader/OverlayLoader";
 
 type WalletSignScreenType =
   | "approve"

src/hooks/useDepositPending.ts

@@ -1,10 +1,11 @@
 import { useAppSelector } from "../app/hooks";
+import { SubmittedDepositTransaction } from "../entities/SubmittedTransaction/SubmittedTransaction";
 import { selectPendingDeposits } from "../features/transactions/transactionsSlice";
 
-const useDepositPending = (): boolean => {
+const useDepositPending = (): SubmittedDepositTransaction | undefined => {
   const pendingDeposits = useAppSelector(selectPendingDeposits);
 
-  return !!pendingDeposits.length;
+  return pendingDeposits.length ? pendingDeposits[0] : undefined;
 };
 
 export default useDepositPending;

src/styled-components/Overlay/Overlay.tsx

@@ -51,9 +51,9 @@ const spin = keyframes`
   }
 `;
 
-export const OverlayLoader = styled.div`
-  width: 3.6875rem;
-  height: 3.6875rem;
+export const OverlaySpinningLoader = styled.div`
+  width: 2.375rem;
+  height: 2.375rem;
   border-radius: 50%;
   border: 4px solid;
   border-color: #475777;