diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index c77b1229..ea94e533 100644 --- a/public/locales/en/translation.json +++ b/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", diff --git a/src/components/@widgets/MakeWidget/MakeWidget.tsx b/src/components/@widgets/MakeWidget/MakeWidget.tsx index 8c844168..9fc57c5f 100644 --- a/src/components/@widgets/MakeWidget/MakeWidget.tsx +++ b/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 = () => { <> { )} + + {depositTransaction && ( + + )} + + setShowTokenSelectModal(null)} diff --git a/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx b/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx index a8dba0ad..f62fabc5 100644 --- a/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx +++ b/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx @@ -141,7 +141,7 @@ const OrderDetailWidget: FC = ({ 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 = diff --git a/src/components/@widgets/SwapWidget/SwapWidget.tsx b/src/components/@widgets/SwapWidget/SwapWidget.tsx index ea497e2e..fbb90449 100644 --- a/src/components/@widgets/SwapWidget/SwapWidget.tsx +++ b/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; diff --git a/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx b/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx index 10b2e761..f37bdfae 100644 --- a/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx +++ b/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 = ({ transform: isAnimatedToCenter ? "translateY(5rem)" : "translateY(0)", }} > - {isSucceeded ? ( - - - - ) : ( - - )} + {isSucceeded ? t("orders.approvalComplete") diff --git a/src/components/DepositSubmittedScreen/DepositSubmittedScreen.tsx b/src/components/DepositSubmittedScreen/DepositSubmittedScreen.tsx new file mode 100644 index 00000000..21d4bdb6 --- /dev/null +++ b/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 = ({ + 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 ( + + + + {isSucceeded + ? t("orders.depositComplete") + : t("orders.depositProcessing")} + + + {transaction?.hash && chainId && ( + + )} + + + ); +}; + +export default DepositSubmittedScreen; diff --git a/src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx b/src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx index e4805914..7faf3a74 100644 --- a/src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx +++ b/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 = ({ return ( - {isSucceeded ? ( - - - - ) : ( - - )} + {isSendingOrder && ( <> {t("orders.orderSent")} diff --git a/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.styles.tsx b/src/components/OverlayLoader/OverlayLoader.styles.tsx similarity index 83% rename from src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.styles.tsx rename to src/components/OverlayLoader/OverlayLoader.styles.tsx index 57ec6730..8bb177a8 100644 --- a/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.styles.tsx +++ b/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)` diff --git a/src/components/OverlayLoader/OverlayLoader.tsx b/src/components/OverlayLoader/OverlayLoader.tsx new file mode 100644 index 00000000..698cb098 --- /dev/null +++ b/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 = ({ isSucceeded, className }) => { + return ( + + {isSucceeded ? ( + + ) : ( + + )} + + ); +}; + +export default OverlayLoader; diff --git a/src/components/WalletSignScreen/WalletSignScreen.tsx b/src/components/WalletSignScreen/WalletSignScreen.tsx index 5356fc01..97fab50e 100644 --- a/src/components/WalletSignScreen/WalletSignScreen.tsx +++ b/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" diff --git a/src/hooks/useDepositPending.ts b/src/hooks/useDepositPending.ts index 8dbd89da..36c6bea3 100644 --- a/src/hooks/useDepositPending.ts +++ b/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; diff --git a/src/styled-components/Overlay/Overlay.tsx b/src/styled-components/Overlay/Overlay.tsx index a780c7c3..58b66471 100644 --- a/src/styled-components/Overlay/Overlay.tsx +++ b/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;