Clear transaction state on tab changes (#1852)

common/containers/Tabs/Contracts/components/Deploy.tsx

@@ -3,7 +3,7 @@ import { DataFieldFactory } from 'components/DataFieldFactory';
 import { SendButtonFactory } from 'components/SendButtonFactory';
 import WalletDecrypt, { DISABLE_WALLETS } from 'components/WalletDecrypt';
 import React, { Component } from 'react';
-import { setToField, TSetToField } from 'actions/transaction';
+import { resetTransactionRequested, TResetTransactionRequested } from 'actions/transaction';
 import { resetWallet, TResetWallet } from 'actions/wallet';
 import { connect } from 'react-redux';
 import { FullWalletOnly } from 'components/renderCbs';
@@ -13,11 +13,15 @@ import { ConfirmationModal } from 'components/ConfirmationModal';
 import { TextArea } from 'components/ui';
 
 interface DispatchProps {
-  setToField: TSetToField;
   resetWallet: TResetWallet;
+  resetTransactionRequested: TResetTransactionRequested;
 }
 
 class DeployClass extends Component<DispatchProps> {
+  public componentDidMount() {
+    this.props.resetTransactionRequested();
+  }
+
   public render() {
     const makeContent = () => (
       <main className="Deploy Tab-content-pane" role="main">
@@ -93,6 +97,6 @@ class DeployClass extends Component<DispatchProps> {
 }
 
 export const Deploy = connect(null, {
-  setToField,
-  resetWallet
+  resetWallet,
+  resetTransactionRequested
 })(DeployClass);

common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/index.tsx

@@ -8,7 +8,16 @@ import { GenerateTransaction } from 'components/GenerateTransaction';
 import { AppState } from 'reducers';
 import { connect } from 'react-redux';
 import { Fields } from './components';
-import { setDataField, TSetDataField } from 'actions/transaction';
+import {
+  setDataField,
+  resetTransactionRequested,
+  TSetDataField,
+  TResetTransactionRequested,
+  TSetAsContractInteraction,
+  TSetAsViewAndSend,
+  setAsContractInteraction,
+  setAsViewAndSend
+} from 'actions/transaction';
 import { Data } from 'libs/units';
 import { Input, Dropdown } from 'components/ui';
 import { INode } from 'libs/nodes';
@@ -23,6 +32,9 @@ interface StateProps {
 interface DispatchProps {
   showNotification: TShowNotification;
   setDataField: TSetDataField;
+  resetTransactionRequested: TResetTransactionRequested;
+  setAsContractInteraction: TSetAsContractInteraction;
+  setAsViewAndSend: TSetAsViewAndSend;
 }
 
 interface OwnProps {
@@ -64,6 +76,15 @@ class InteractExplorerClass extends Component<Props, State> {
     outputs: {}
   };
 
+  public componentDidMount() {
+    this.props.setAsContractInteraction();
+    this.props.resetTransactionRequested();
+  }
+
+  public componentWillUnmount() {
+    this.props.setAsViewAndSend();
+  }
+
   public render() {
     const { inputs, outputs, selectedFunction } = this.state;
     const contractFunctionsOptions = this.contractOptions();
@@ -296,5 +317,11 @@ export const InteractExplorer = connect(
     to: getTo(state),
     dataExists: getDataExists(state)
   }),
-  { showNotification, setDataField }
+  {
+    showNotification,
+    setDataField,
+    resetTransactionRequested,
+    setAsContractInteraction,
+    setAsViewAndSend
+  }
 )(InteractExplorerClass);

common/containers/Tabs/Contracts/index.tsx

@@ -1,13 +1,6 @@
 import translate from 'translations';
 import { Interact } from './components/Interact';
 import { Deploy } from './components/Deploy';
-import {
-  setAsContractInteraction,
-  TSetAsContractInteraction,
-  setAsViewAndSend,
-  TSetAsViewAndSend
-} from 'actions/transaction';
-
 import TabSection from 'containers/TabSection';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -15,11 +8,6 @@ import { Switch, Route, Redirect, RouteComponentProps } from 'react-router';
 import SubTabs from 'components/SubTabs';
 import { RouteNotFound } from 'components/RouteNotFound';
 
-interface DispatchProps {
-  setAsContractInteraction: TSetAsContractInteraction;
-  setAsViewAndSend: TSetAsViewAndSend;
-}
-
 const tabs = [
   {
     path: 'interact',
@@ -31,14 +19,7 @@ const tabs = [
   }
 ];
 
-class Contracts extends Component<DispatchProps & RouteComponentProps<{}>> {
-  public componentDidMount() {
-    this.props.setAsContractInteraction();
-  }
-  public componentWillUnmount() {
-    this.props.setAsViewAndSend();
-  }
-
+class Contracts extends Component<RouteComponentProps<{}>> {
   public render() {
     const { match, location, history } = this.props;
     const currentPath = match.url;
@@ -65,4 +46,4 @@ class Contracts extends Component<DispatchProps & RouteComponentProps<{}>> {
   }
 }
 
-export default connect(null, { setAsContractInteraction, setAsViewAndSend })(Contracts);
+export default connect(null, {})(Contracts);