feat(instant): Disable input when processing

1 files changed, 10 insertions, 0 deletions

diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index ee76e9d66..6e1957a59 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -25,6 +25,7 @@ interface ConnectedState {
     assetBuyer?: AssetBuyer;
     value?: BigNumberInput;
     asset?: ERC20Asset;
+    disabled: boolean;
 }
 
 interface ConnectedDispatch {
@@ -35,21 +36,29 @@ interface ConnectedProps {
     value?: BigNumberInput;
     asset?: ERC20Asset;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+    disabled: boolean;
 }
 
 type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps;
 
 const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => {
+    const processState = state.buyOrderState.processState;
+    const isEnabled = processState === OrderProcessState.NONE || processState === OrderProcessState.FAILURE;
+    const disabled = !isEnabled;
+
     const selectedAsset = state.selectedAsset;
     if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) {
         return {
             value: state.selectedAssetAmount,
+            disabled,
         };
     }
+
     return {
         assetBuyer: state.assetBuyer,
         value: state.selectedAssetAmount,
         asset: selectedAsset as ERC20Asset,
+        disabled,
     };
 };
 
@@ -114,6 +123,7 @@ const mergeProps = (
         onChange: (value, asset) => {
             connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset);
         },
+        disabled: connectedState.disabled,
     };
 };