868: Cleanup of ErrorList in review screens (#885)

airswap · Mar 14, 2024 · d651611 · d651611
1 parent 77f8d0e
commit d651611
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 25 deletions.
diff --git a/src/components/@reviewScreens/ApproveReview/ApproveReview.tsx b/src/components/@reviewScreens/ApproveReview/ApproveReview.tsx
@@ -6,14 +6,17 @@ import { useToggle } from "@react-hookz/web";
 
 import { BigNumber } from "bignumber.js";
 
+import { AppError } from "../../../errors/appError";
 import toRoundedNumberString from "../../../helpers/toRoundedNumberString";
 import { ReviewList } from "../../../styled-components/ReviewList/ReviewList";
 import {
   ReviewListItem,
   ReviewListItemLabel,
   ReviewListItemValue,
 } from "../../../styled-components/ReviewListItem/ReviewListItem";
+import { ErrorList } from "../../ErrorList/ErrorList";
 import OrderReviewToken from "../../OrderReviewToken/OrderReviewToken";
+import Overlay from "../../Overlay/Overlay";
 import ProtocolFeeOverlay from "../../ProtocolFeeOverlay/ProtocolFeeOverlay";
 import { Title } from "../../Typography/Typography";
 import { StyledIconButton } from "../MakeOrderReview/MakeOrderReview.styles";
@@ -28,10 +31,12 @@ interface ApproveReviewProps {
   amount: string;
   amountPlusFee?: string;
   backButtonText?: string;
+  errors?: AppError[];
   readableAllowance: string;
   token: TokenInfo | null;
   wrappedNativeToken: TokenInfo | null;
   onEditButtonClick: () => void;
+  onRestartButtonClick?: () => void;
   onSignButtonClick: () => void;
   className?: string;
 }
@@ -41,10 +46,12 @@ const ApproveReview: FC<ApproveReviewProps> = ({
   amount,
   amountPlusFee,
   backButtonText,
+  errors = [],
   readableAllowance,
   token,
   wrappedNativeToken,
   onEditButtonClick,
+  onRestartButtonClick,
   onSignButtonClick,
   className = "",
 }): ReactElement => {
@@ -135,6 +142,17 @@ const ApproveReview: FC<ApproveReviewProps> = ({
         isHidden={showFeeInfo}
         onCloseButtonClick={() => toggleShowFeeInfo()}
       />
+
+      {onRestartButtonClick && (
+        <Overlay
+          title={t("validatorErrors.unableSwap")}
+          subTitle={t("validatorErrors.swapFail")}
+          onCloseButtonClick={onRestartButtonClick}
+          isHidden={!errors.length}
+        >
+          <ErrorList errors={errors} onBackButtonClick={onRestartButtonClick} />
+        </Overlay>
+      )}
     </Container>
   );
 };

diff --git a/src/components/@reviewScreens/TakeOrderReview/TakeOrderReview.tsx b/src/components/@reviewScreens/TakeOrderReview/TakeOrderReview.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { ADDRESS_ZERO, TokenInfo } from "@airswap/utils";
 import { useToggle } from "@react-hookz/web";
 
+import { AppError } from "../../../errors/appError";
 import { getExpiryTranslation } from "../../../helpers/getExpiryTranslation";
 import { ReviewList } from "../../../styled-components/ReviewList/ReviewList";
 import {
@@ -12,7 +13,9 @@ import {
   ReviewListItemValue,
 } from "../../../styled-components/ReviewListItem/ReviewListItem";
 import { getTokenPairTranslation } from "../../@widgets/MakeWidget/helpers";
+import { ErrorList } from "../../ErrorList/ErrorList";
 import OrderReviewToken from "../../OrderReviewToken/OrderReviewToken";
+import Overlay from "../../Overlay/Overlay";
 import ProtocolFeeOverlay from "../../ProtocolFeeOverlay/ProtocolFeeOverlay";
 import { Title } from "../../Typography/Typography";
 import {
@@ -22,25 +25,29 @@ import {
 } from "./TakeOrderReview.styles";
 
 interface TakeOrderReviewProps {
+  errors: AppError[];
   expiry: number;
   senderAmount: string;
   senderToken: TokenInfo | null;
   signerAmount: string;
   signerToken: TokenInfo | null;
   wrappedNativeToken: TokenInfo | null;
   onEditButtonClick: () => void;
+  onRestartButtonClick: () => void;
   onSignButtonClick: () => void;
   className?: string;
 }
 
 const MakeOrderReview: FC<TakeOrderReviewProps> = ({
+  errors,
   expiry,
   senderAmount,
   senderToken,
   signerAmount,
   signerToken,
   wrappedNativeToken,
   onEditButtonClick,
+  onRestartButtonClick,
   onSignButtonClick,
   className = "",
 }): ReactElement => {
@@ -121,6 +128,15 @@ const MakeOrderReview: FC<TakeOrderReviewProps> = ({
         isHidden={showFeeInfo}
         onCloseButtonClick={() => toggleShowFeeInfo()}
       />
+
+      <Overlay
+        title={t("validatorErrors.unableSwap")}
+        subTitle={t("validatorErrors.swapFail")}
+        onCloseButtonClick={onRestartButtonClick}
+        isHidden={!errors.length}
+      >
+        <ErrorList errors={errors} onBackButtonClick={onRestartButtonClick} />
+      </Overlay>
     </Container>
   );
 };

diff --git a/src/components/@reviewScreens/WrapReview/WrapReview.tsx b/src/components/@reviewScreens/WrapReview/WrapReview.tsx
@@ -6,6 +6,7 @@ import { useToggle } from "@react-hookz/web";
 
 import { BigNumber } from "bignumber.js";
 
+import { AppError } from "../../../errors/appError";
 import toRoundedNumberString from "../../../helpers/toRoundedNumberString";
 import useShouldDepositNativeTokenAmountInfo from "../../../hooks/useShouldDepositNativeTokenAmountInfo";
 import { ReviewList } from "../../../styled-components/ReviewList/ReviewList";
@@ -14,7 +15,9 @@ import {
   ReviewListItemLabel,
   ReviewListItemValue,
 } from "../../../styled-components/ReviewListItem/ReviewListItem";
+import { ErrorList } from "../../ErrorList/ErrorList";
 import OrderReviewToken from "../../OrderReviewToken/OrderReviewToken";
+import Overlay from "../../Overlay/Overlay";
 import ProtocolFeeOverlay from "../../ProtocolFeeOverlay/ProtocolFeeOverlay";
 import { Title } from "../../Typography/Typography";
 import { StyledIconButton } from "../MakeOrderReview/MakeOrderReview.styles";
@@ -29,9 +32,11 @@ interface WrapReviewProps {
   amount: string;
   amountPlusFee?: string;
   backButtonText?: string;
+  errors?: AppError[];
   wrappedNativeToken: TokenInfo | null;
   shouldDepositNativeTokenAmount: string;
   onEditButtonClick: () => void;
+  onRestartButtonClick?: () => void;
   onSignButtonClick: () => void;
   className?: string;
 }
@@ -41,9 +46,11 @@ const ApproveReview: FC<WrapReviewProps> = ({
   amount,
   amountPlusFee,
   backButtonText,
+  errors = [],
   shouldDepositNativeTokenAmount,
   wrappedNativeToken,
   onEditButtonClick,
+  onRestartButtonClick,
   onSignButtonClick,
   className = "",
 }): ReactElement => {
@@ -139,6 +146,17 @@ const ApproveReview: FC<WrapReviewProps> = ({
         isHidden={showFeeInfo}
         onCloseButtonClick={() => toggleShowFeeInfo()}
       />
+
+      {onRestartButtonClick && (
+        <Overlay
+          title={t("validatorErrors.unableSwap")}
+          subTitle={t("validatorErrors.swapFail")}
+          onCloseButtonClick={onRestartButtonClick}
+          isHidden={!errors.length}
+        >
+          <ErrorList errors={errors} onBackButtonClick={onRestartButtonClick} />
+        </Overlay>
+      )}
     </Container>
   );
 };

diff --git a/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx b/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx
@@ -13,6 +13,7 @@ import { BigNumber } from "bignumber.js";
 
 import { useAppDispatch, useAppSelector } from "../../../app/hooks";
 import { InterfaceContext } from "../../../contexts/interface/Interface";
+import { AppErrorType } from "../../../errors/appError";
 import { selectIndexerReducer } from "../../../features/indexer/indexerSlice";
 import {
   getFilteredOrders,
@@ -33,7 +34,6 @@ import {
   selectTakeOtcErrors,
   setErrors,
 } from "../../../features/takeOtc/takeOtcSlice";
-import switchToDefaultChain from "../../../helpers/switchToDefaultChain";
 import useAllowance from "../../../hooks/useAllowance";
 import useApprovalPending from "../../../hooks/useApprovalPending";
 import useDepositPending from "../../../hooks/useDepositPending";
@@ -295,9 +295,11 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
         <WrapReview
           isLoading={hasDepositPending}
           amount={senderAmount || "0"}
+          errors={errors}
           shouldDepositNativeTokenAmount={shouldDepositNativeTokenAmount}
           wrappedNativeToken={wrappedNativeToken}
           onEditButtonClick={handleEditButtonClick}
+          onRestartButtonClick={restart}
           onSignButtonClick={depositNativeToken}
         />
       </Container>
@@ -310,10 +312,12 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
         <ApproveReview
           isLoading={hasApprovalPending}
           amount={senderAmount || "0"}
+          errors={errors}
           readableAllowance={"0"}
           token={senderToken}
           wrappedNativeToken={wrappedNativeToken}
           onEditButtonClick={handleEditButtonClick}
+          onRestartButtonClick={restart}
           onSignButtonClick={approveToken}
         />
       </Container>
@@ -324,30 +328,17 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
     return (
       <Container>
         <TakeOrderReview
+          errors={errors}
           expiry={+order.expiry}
           senderAmount={senderAmount || "0"}
           senderToken={senderToken}
           signerAmount={signerAmount || "0"}
           signerToken={signerToken}
           wrappedNativeToken={wrappedNativeToken}
           onEditButtonClick={handleEditButtonClick}
+          onRestartButtonClick={restart}
           onSignButtonClick={takeOrder}
         />
-        <Overlay
-          title={t("validatorErrors.unableSwap")}
-          subTitle={t("validatorErrors.swapFail")}
-          onCloseButtonClick={() =>
-            handleActionButtonClick(ButtonActions.restart)
-          }
-          isHidden={!errors.length}
-        >
-          <ErrorList
-            errors={errors}
-            onBackButtonClick={() =>
-              handleActionButtonClick(ButtonActions.restart)
-            }
-          />
-        </Overlay>
       </Container>
     );
   }
@@ -438,17 +429,10 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
       <Overlay
         title={t("validatorErrors.unableSwap")}
         subTitle={t("validatorErrors.swapFail")}
-        onCloseButtonClick={() =>
-          handleActionButtonClick(ButtonActions.restart)
-        }
+        onCloseButtonClick={restart}
         isHidden={!errors.length}
       >
-        <ErrorList
-          errors={errors}
-          onBackButtonClick={() =>
-            handleActionButtonClick(ButtonActions.restart)
-          }
-        />
+        <ErrorList errors={errors} onBackButtonClick={restart} />
       </Overlay>
       {signerToken && senderToken && (
         <Overlay

diff --git a/src/components/@widgets/SwapWidget/SwapWidget.tsx b/src/components/@widgets/SwapWidget/SwapWidget.tsx
@@ -790,10 +790,14 @@ const SwapWidget: FC = () => {
         <ApproveReview
           isLoading={hasApprovalPending}
           amount={baseAmount || "0"}
+          errors={ordersErrors}
           readableAllowance={readableAllowance}
           token={baseTokenInfo}
           wrappedNativeToken={wrappedNativeTokenInfo}
           onEditButtonClick={handleEditButtonClick}
+          onRestartButtonClick={() =>
+            handleActionButtonClick(ButtonActions.restart)
+          }
           onSignButtonClick={approveToken}
         />
       </Container>