853: Clicking "Back" during pending transaction should reset

src/components/@reviewScreens/ApproveReview/ApproveReview.tsx

@@ -27,6 +27,7 @@ import {
 } from "./ApproveReview.styles";
 
 interface ApproveReviewProps {
+  hasEditButton?: boolean;
   isLoading: boolean;
   amount: string;
   amountPlusFee?: string;
@@ -35,17 +36,17 @@ interface ApproveReviewProps {
   readableAllowance: string;
   token: TokenInfo | null;
   wrappedNativeToken: TokenInfo | null;
-  onEditButtonClick: () => void;
+  onEditButtonClick?: () => void;
   onRestartButtonClick?: () => void;
   onSignButtonClick: () => void;
   className?: string;
 }
 
 const ApproveReview: FC<ApproveReviewProps> = ({
+  hasEditButton,
   isLoading,
   amount,
   amountPlusFee,
-  backButtonText,
   errors = [],
   readableAllowance,
   token,
@@ -78,6 +79,16 @@ const ApproveReview: FC<ApproveReviewProps> = ({
     return toRoundedNumberString(amountPlusFee, justifiedToken?.decimals);
   }, [amountPlusFee, justifiedToken]);
 
+  const handleEditOrBackButtonClick = () => {
+    if (!isLoading && hasEditButton && onEditButtonClick) {
+      onEditButtonClick();
+    }
+
+    if (onRestartButtonClick) {
+      onRestartButtonClick();
+    }
+  };
+
   return (
     <Container className={className}>
       <StyledWidgetHeader>
@@ -133,8 +144,10 @@ const ApproveReview: FC<ApproveReviewProps> = ({
 
       <StyledActionButtons
         isLoading={isLoading}
-        backButtonText={backButtonText || t("common.back")}
-        onEditButtonClick={onEditButtonClick}
+        backButtonText={
+          hasEditButton && !isLoading ? t("common.edit") : t("common.back")
+        }
+        onEditButtonClick={handleEditOrBackButtonClick}
         onSignButtonClick={onSignButtonClick}
       />
 

src/components/@reviewScreens/WrapReview/WrapReview.tsx

@@ -28,24 +28,24 @@ import {
 } from "./WrapReview.styles";
 
 interface WrapReviewProps {
+  hasEditButton?: boolean;
   isLoading: boolean;
   amount: string;
   amountPlusFee?: string;
-  backButtonText?: string;
   errors?: AppError[];
   wrappedNativeToken: TokenInfo | null;
   shouldDepositNativeTokenAmount: string;
-  onEditButtonClick: () => void;
+  onEditButtonClick?: () => void;
   onRestartButtonClick?: () => void;
   onSignButtonClick: () => void;
   className?: string;
 }
 
 const ApproveReview: FC<WrapReviewProps> = ({
+  hasEditButton,
   isLoading,
   amount,
   amountPlusFee,
-  backButtonText,
   errors = [],
   shouldDepositNativeTokenAmount,
   wrappedNativeToken,
@@ -80,6 +80,16 @@ const ApproveReview: FC<WrapReviewProps> = ({
     return toRoundedNumberString(amountPlusFee, wrappedNativeToken?.decimals);
   }, [amountPlusFee, wrappedNativeToken]);
 
+  const handleEditOrBackButtonClick = () => {
+    if (!isLoading && hasEditButton && onEditButtonClick) {
+      onEditButtonClick();
+    }
+
+    if (onRestartButtonClick) {
+      onRestartButtonClick();
+    }
+  };
+
   return (
     <Container className={className}>
       <StyledWidgetHeader>
@@ -137,8 +147,10 @@ const ApproveReview: FC<WrapReviewProps> = ({
 
       <StyledActionButtons
         isLoading={isLoading}
-        backButtonText={backButtonText || t("common.back")}
-        onEditButtonClick={onEditButtonClick}
+        backButtonText={
+          hasEditButton && !isLoading ? t("common.edit") : t("common.back")
+        }
+        onEditButtonClick={handleEditOrBackButtonClick}
         onSignButtonClick={onSignButtonClick}
       />
 

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

@@ -338,6 +338,11 @@ const MakeWidget: FC = () => {
     setState(MakeWidgetState.list);
   };
 
+  const restart = () => {
+    setState(MakeWidgetState.list);
+    dispatch(reset());
+  };
+
   const handleActionButtonClick = (action: ButtonActions) => {
     if (action === ButtonActions.connectWallet) {
       setShowWalletList(true);
@@ -352,13 +357,13 @@ const MakeWidget: FC = () => {
     }
 
     if (action === ButtonActions.restart) {
-      dispatch(reset());
+      restart();
     }
   };
 
   const handleBackButtonClick = (action: ButtonActions) => {
     if (action === ButtonActions.restart) {
-      dispatch(reset());
+      restart();
     }
 
     if (action === ButtonActions.goBack) {
@@ -385,13 +390,14 @@ const MakeWidget: FC = () => {
     return (
       <Container>
         <WrapReview
+          hasEditButton
           isLoading={hasDepositPending}
           amount={makerAmount}
           amountPlusFee={makerAmountPlusFee}
-          backButtonText={t("common.edit")}
           shouldDepositNativeTokenAmount={shouldDepositNativeTokenAmount}
           wrappedNativeToken={wrappedNativeToken}
           onEditButtonClick={handleEditButtonClick}
+          onRestartButtonClick={restart}
           onSignButtonClick={depositNativeToken}
         />
       </Container>
@@ -402,14 +408,15 @@ const MakeWidget: FC = () => {
     return (
       <Container>
         <ApproveReview
+          hasEditButton
           isLoading={hasApprovalPending}
           amount={makerAmount}
           amountPlusFee={makerAmountPlusFee}
-          backButtonText={t("common.edit")}
           readableAllowance={readableAllowance}
           token={makerTokenInfo}
           wrappedNativeToken={wrappedNativeToken}
           onEditButtonClick={handleEditButtonClick}
+          onRestartButtonClick={restart}
           onSignButtonClick={approveToken}
         />
       </Container>
@@ -509,7 +516,6 @@ const MakeWidget: FC = () => {
         hasMissingMakerToken={!makerTokenInfo}
         hasMissingTakerAmount={hasMissingTakerAmount}
         hasMissingTakerToken={!takerTokenInfo}
-        isLoading={hasApprovalPending || hasDepositPending}
         isNetworkUnsupported={
           !!web3Error && web3Error instanceof UnsupportedChainIdError
         }

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

@@ -21,7 +21,6 @@ type ActionButtonsProps = {
   hasMissingMakerToken: boolean;
   hasMissingTakerAmount: boolean;
   hasMissingTakerToken: boolean;
-  isLoading: boolean;
   isNetworkUnsupported: boolean;
   shouldDepositNativeToken: boolean;
   walletIsNotConnected: boolean;
@@ -40,7 +39,6 @@ const ActionButtons: FC<ActionButtonsProps> = ({
   hasMissingMakerToken,
   hasMissingTakerAmount,
   hasMissingTakerToken,
-  isLoading,
   isNetworkUnsupported,
   shouldDepositNativeToken,
   walletIsNotConnected,
@@ -97,7 +95,6 @@ const ActionButtons: FC<ActionButtonsProps> = ({
       <SignButton
         disabled={isDisabled}
         intent="primary"
-        loading={isLoading}
         onClick={handleSignButtonClick}
       >
         {buttonText}

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

@@ -255,7 +255,7 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
     dispatch(reset());
   };
 
-  const handleEditButtonClick = () => {
+  const backToOverview = () => {
     setState(OrderDetailWidgetState.overview);
   };
 
@@ -298,8 +298,7 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
           errors={errors}
           shouldDepositNativeTokenAmount={shouldDepositNativeTokenAmount}
           wrappedNativeToken={wrappedNativeToken}
-          onEditButtonClick={handleEditButtonClick}
-          onRestartButtonClick={restart}
+          onRestartButtonClick={backToOverview}
           onSignButtonClick={depositNativeToken}
         />
       </Container>
@@ -316,8 +315,7 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
           readableAllowance={"0"}
           token={senderToken}
           wrappedNativeToken={wrappedNativeToken}
-          onEditButtonClick={handleEditButtonClick}
-          onRestartButtonClick={restart}
+          onRestartButtonClick={backToOverview}
           onSignButtonClick={approveToken}
         />
       </Container>
@@ -335,7 +333,7 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
           signerAmount={signerAmount || "0"}
           signerToken={signerToken}
           wrappedNativeToken={wrappedNativeToken}
-          onEditButtonClick={handleEditButtonClick}
+          onEditButtonClick={backToOverview}
           onRestartButtonClick={restart}
           onSignButtonClick={takeOrder}
         />

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

@@ -776,6 +776,10 @@ const SwapWidget: FC = () => {
     dispatch(setCustomServerUrl(null));
   };
 
+  const backToOverview = () => {
+    handleActionButtonClick(ButtonActions.restart);
+  };
+
   if (ordersStatus === "signing") {
     return (
       <Container>
@@ -795,9 +799,7 @@ const SwapWidget: FC = () => {
           token={baseTokenInfo}
           wrappedNativeToken={wrappedNativeTokenInfo}
           onEditButtonClick={handleEditButtonClick}
-          onRestartButtonClick={() =>
-            handleActionButtonClick(ButtonActions.restart)
-          }
+          onRestartButtonClick={backToOverview}
           onSignButtonClick={approveToken}
         />
       </Container>
@@ -890,9 +892,7 @@ const SwapWidget: FC = () => {
               needsApproval={!!baseToken && shouldApprove}
               pairUnavailable={pairUnavailable}
               onButtonClicked={(action) => handleActionButtonClick(action)}
-              isLoading={
-                isConnecting || isRequestingQuotes || hasApprovalPending
-              }
+              isLoading={isConnecting || isRequestingQuotes}
               transactionsTabOpen={transactionsTabIsOpen}
             />
           )}
@@ -919,17 +919,10 @@ const SwapWidget: FC = () => {
       <Overlay
         title={t("validatorErrors.unableSwap")}
         subTitle={t("validatorErrors.swapFail")}
-        onCloseButtonClick={() =>
-          handleActionButtonClick(ButtonActions.restart)
-        }
+        onCloseButtonClick={backToOverview}
         isHidden={!ordersErrors.length}
       >
-        <ErrorList
-          errors={ordersErrors}
-          onBackButtonClick={() =>
-            handleActionButtonClick(ButtonActions.restart)
-          }
-        />
+        <ErrorList errors={ordersErrors} onBackButtonClick={backToOverview} />
       </Overlay>
       <Overlay
         title={t("information.gasFreeSwaps.title")}