Show proper message when user rejects/cancel ETH wrapping

src/components/common/steps_modal/base_step_modal.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import { ComponentUnmountedException } from '../../../exceptions/component_unmounted_exception';
 import { getStepTitle, isLongStep, makeGetProgress } from '../../../util/steps';
 import { Step } from '../../../util/types';
 
-import { BaseStepModalUnmountedException } from './exceptions/unmounted_exception';
 import { StepPendingTime } from './step_pending_time';
 import {
     ModalStatusTextLight,
@@ -25,7 +25,7 @@ type RunAction = ({
 }: {
     onLoading: () => any;
     onDone: () => any;
-    onError: (err: Error | BaseStepModalUnmountedException) => any;
+    onError: (err: Error | ComponentUnmountedException) => any;
 }) => Promise<any>;
 
 interface Props {
@@ -163,8 +163,8 @@ export class BaseStepModal extends React.Component<Props, State> {
                 status: StepStatus.Done,
             });
         };
-        const onError = (err: Error | BaseStepModalUnmountedException) => {
-            if (err instanceof BaseStepModalUnmountedException) {
+        const onError = (err: Error | ComponentUnmountedException) => {
+            if (err instanceof ComponentUnmountedException) {
                 return;
             }
             this.setState({
@@ -187,7 +187,7 @@ export class BaseStepModal extends React.Component<Props, State> {
 
     private readonly _throwIfUnmounted = () => {
         if (this._isUnmounted) {
-            throw new BaseStepModalUnmountedException();
+            throw new ComponentUnmountedException('BaseStepModal');
         }
     };
 }

src/components/common/steps_modal/sign_order_step.tsx

@@ -5,13 +5,13 @@ import { connect } from 'react-redux';
 import { INSUFFICIENT_FEE_BALANCE, INSUFFICIENT_MAKER_BALANCE_ERR, SIGNATURE_ERR } from '../../../exceptions/common';
 import { InsufficientFeeBalanceException } from '../../../exceptions/insufficient_fee_balance_exception';
 import { InsufficientTokenBalanceException } from '../../../exceptions/insufficient_token_balance_exception';
+import { SignatureFailedException } from '../../../exceptions/signature_failed_exception';
 import { createSignedOrder, submitLimitOrder } from '../../../store/actions';
 import { getEstimatedTxTimeMs, getStepsModalCurrentStep } from '../../../store/selectors';
 import { tokenSymbolToDisplayString } from '../../../util/tokens';
 import { OrderSide, StepBuySellLimitOrder, StoreState } from '../../../util/types';
 
 import { BaseStepModal } from './base_step_modal';
-import { SignatureFailedException } from './exceptions/signature_failed_exception';
 import { StepItem } from './steps_progress';
 
 interface OwnProps {

src/components/common/steps_modal/wrap_eth_step.tsx

@@ -7,8 +7,13 @@ import {
     STEP_MODAL_DONE_STATUS_VISIBILITY_TIME,
     UI_DECIMALS_DISPLAYED_ON_STEP_MODALS,
 } from '../../../common/constants';
-import { INSUFFICIENT_ETH_BALANCE_FOR_DEPOSIT } from '../../../exceptions/common';
+import {
+    INSUFFICIENT_ETH_BALANCE_FOR_DEPOSIT,
+    UNEXPECTED_ERROR,
+    USER_DENIED_TRANSACTION_SIGNATURE_ERR,
+} from '../../../exceptions/common';
 import { InsufficientEthDepositBalanceException } from '../../../exceptions/insufficient_eth_deposit_balance_exception';
+import { UserDeniedTransactionSignatureException } from '../../../exceptions/user_denied_transaction_exception';
 import { getWeb3Wrapper } from '../../../services/web3_wrapper';
 import { stepsModalAdvanceStep, updateWethBalance } from '../../../store/actions';
 import { getEstimatedTxTimeMs, getEthBalance, getNetworkId, getStepsModalCurrentStep } from '../../../store/selectors';
@@ -37,9 +42,17 @@ interface DispatchProps {
 
 type Props = OwnProps & StateProps & DispatchProps;
 
-class WrapEthStep extends React.Component<Props> {
+interface State {
+    errorCaption: string;
+}
+
+class WrapEthStep extends React.Component<Props, State> {
+    public state = {
+        errorCaption: '',
+    };
+
     public render = () => {
-        const { buildStepsProgress, estimatedTxTimeMs, networkId, step, ethBalance } = this.props;
+        const { buildStepsProgress, estimatedTxTimeMs, networkId, step } = this.props;
 
         if (networkId === null) {
             return null;
@@ -78,18 +91,14 @@ class WrapEthStep extends React.Component<Props> {
         const loadingFooterCaption = `Waiting for confirmation....`;
         const doneFooterCaption = `${convertingFrom} converted!`;
 
-        const currentEthAmount = tokenAmountInUnits(ethBalance, ETH_DECIMALS);
-        const ethNeeded = tokenAmountInUnits(amount, ETH_DECIMALS);
-        const errorCaption = `You have ${currentEthAmount} ETH but you need ${ethNeeded} ETH to make this operation`;
-
         return (
             <BaseStepModal
                 step={step}
                 title={title}
                 confirmCaption={confirmCaption}
                 loadingCaption={loadingCaption}
                 doneCaption={doneCaption}
-                errorCaption={errorCaption}
+                errorCaption={this.state.errorCaption}
                 loadingFooterCaption={loadingFooterCaption}
                 doneFooterCaption={doneFooterCaption}
                 buildStepsProgress={buildStepsProgress}
@@ -107,19 +116,24 @@ class WrapEthStep extends React.Component<Props> {
             const web3Wrapper = await getWeb3Wrapper();
             const convertTxHash = await this.props.updateWeth(newWethBalance);
             onLoading();
-
             await web3Wrapper.awaitTransactionSuccessAsync(convertTxHash);
             onDone();
             await sleep(STEP_MODAL_DONE_STATUS_VISIBILITY_TIME);
             advanceStep();
         } catch (err) {
             let exception = err;
-            if (err.toString().includes(INSUFFICIENT_ETH_BALANCE_FOR_DEPOSIT)) {
+            let errorCaption = UNEXPECTED_ERROR;
+            if (err.toString().includes(USER_DENIED_TRANSACTION_SIGNATURE_ERR)) {
+                exception = new UserDeniedTransactionSignatureException();
+                errorCaption = USER_DENIED_TRANSACTION_SIGNATURE_ERR;
+            } else if (err.toString().includes(INSUFFICIENT_ETH_BALANCE_FOR_DEPOSIT)) {
                 const amount = newWethBalance.minus(currentWethBalance);
                 const currentEthAmount = tokenAmountInUnits(ethBalance, ETH_DECIMALS);
                 const ethNeeded = tokenAmountInUnits(amount, ETH_DECIMALS);
                 exception = new InsufficientEthDepositBalanceException(currentEthAmount, ethNeeded);
+                errorCaption = `You have ${currentEthAmount} ETH but you need ${ethNeeded} ETH to make this operation`;
             }
+            this.setState({ errorCaption });
             onError(exception);
         }
     };

src/exceptions/common.tsx

@@ -1,7 +1,9 @@
 export const INSUFFICIENT_MAKER_BALANCE_ERR = 'INSUFFICIENT MAKER BALANCE';
 export const SIGNATURE_ERR = 'User denied message signature';
+export const USER_DENIED_TRANSACTION_SIGNATURE_ERR = 'User denied transaction signature';
 export const INSUFFICIENT_ORDERS_TO_FILL_AMOUNT_ERR = 'There are no enough orders to fill this amount';
 export const RELAYER_ERR = 'There was an error with the relayer';
 export const INSUFFICIENT_FEE_BALANCE = 'INSUFFICIENT MAKER FEE BALANCE';
 export const INSUFFICIENT_FEE_BALANCE_MSG = `You don't have enough 0x to pay fees`;
 export const INSUFFICIENT_ETH_BALANCE_FOR_DEPOSIT = 'INSUFFICIENT_ETH_BALANCE_FOR_DEPOSIT';
+export const UNEXPECTED_ERROR = 'An unexpected error happened';

src/components/common/steps_modal/exceptions/unmounted_exception.tsx → src/exceptions/component_unmounted_exception.ts

@@ -1,6 +1,6 @@
-export class BaseStepModalUnmountedException extends Error {
-    constructor() {
-        super('BaseStepModal unmounted');
+export class ComponentUnmountedException extends Error {
+    constructor(componentName: string) {
+        super(`${componentName} unmounted`);
         // see: typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html
         Object.setPrototypeOf(this, new.target.prototype);
     }

src/exceptions/user_denied_transaction_exception.ts

@@ -0,0 +1,7 @@
+export class UserDeniedTransactionSignatureException extends Error {
+    constructor(m: string = 'User denied transaction signature') {
+        super(m);
+        // Set the prototype explicitly.
+        Object.setPrototypeOf(this, UserDeniedTransactionSignatureException.prototype);
+    }
+}