feat: add states to the erc20 input for no assets or only 1 asset

2 files changed, 11 insertions, 11 deletions

diff --git a/packages/instant/src/containers/available_erc20_token_selector.ts b/packages/instant/src/containers/available_erc20_token_selector.ts
index 6b5ecb6ac..e8bacdba0 100644
--- a/packages/instant/src/containers/available_erc20_token_selector.ts
+++ b/packages/instant/src/containers/available_erc20_token_selector.ts
@@ -20,7 +20,7 @@ interface ConnectedDispatch {
 }
 
 const mapStateToProps = (state: State, _ownProps: AvailableERC20TokenSelectorProps): ConnectedState => ({
-    tokens: assetUtils.getERC20AssetsFromAssets(state.availableAssets),
+    tokens: assetUtils.getERC20AssetsFromAssets(state.availableAssets || []),
 });
 
 const mapDispatchToProps = (
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 217d603d2..64b6f4b3b 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -27,6 +27,7 @@ interface ConnectedState {
     value?: BigNumberInput;
     asset?: ERC20Asset;
     isDisabled: boolean;
+    numberOfAssetsAvailable?: number;
 }
 
 interface ConnectedDispatch {
@@ -38,6 +39,7 @@ interface ConnectedProps {
     asset?: ERC20Asset;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
     isDisabled: boolean;
+    numberOfAssetsAvailable?: number;
 }
 
 type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps;
@@ -46,20 +48,17 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
     const processState = state.buyOrderState.processState;
     const isEnabled = processState === OrderProcessState.NONE || processState === OrderProcessState.FAILURE;
     const isDisabled = !isEnabled;
-
-    const selectedAsset = state.selectedAsset;
-    if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) {
-        return {
-            value: state.selectedAssetAmount,
-            isDisabled,
-        };
-    }
-
+    const selectedAsset =
+        !_.isUndefined(state.selectedAsset) && state.selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
+            ? (state.selectedAsset as ERC20Asset)
+            : undefined;
+    const numberOfAssetsAvailable = _.isUndefined(state.availableAssets) ? undefined : state.availableAssets.length;
     return {
         assetBuyer: state.assetBuyer,
         value: state.selectedAssetAmount,
-        asset: selectedAsset as ERC20Asset,
+        asset: selectedAsset,
         isDisabled,
+        numberOfAssetsAvailable,
     };
 };
 
@@ -138,6 +137,7 @@ const mergeProps = (
             connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset);
         },
         isDisabled: connectedState.isDisabled,
+        numberOfAssetsAvailable: connectedState.numberOfAssetsAvailable,
     };
 };