chore: address PR comments

5 files changed, 24 insertions, 18 deletions

diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index b27f349c0..5e07dcf2f 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption, transparentWhite } from '../style/theme';
-import { ERC20Asset } from '../types';
+import { ERC20Asset, SimpleHandler } from '../types';
 import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
 import { util } from '../util/util';
@@ -41,7 +41,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         const { asset } = this.props;
         return (
             <Container whiteSpace="nowrap">
-                {_.isUndefined(asset) ? this._renderBackupContent() : this._renderContentForAsset(asset)}
+                {_.isUndefined(asset) ? this._renderTokenSelectionContent() : this._renderContentForAsset(asset)}
             </Container>
         );
     }
@@ -80,11 +80,11 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             </React.Fragment>
         );
     };
-    private readonly _renderBackupContent = (): React.ReactNode => {
+    private readonly _renderTokenSelectionContent = (): React.ReactNode => {
         const { numberOfAssetsAvailable } = this.props;
         let text = 'Select Token';
         if (_.isUndefined(numberOfAssetsAvailable)) {
-            text = '...Loading';
+            text = 'Loading...';
         } else if (numberOfAssetsAvailable === 0) {
             text = 'Assets Unavailable';
         }
@@ -104,13 +104,12 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         );
     };
     private readonly _renderChevronIcon = (): React.ReactNode => {
-        const { numberOfAssetsAvailable } = this.props;
-        if (_.isUndefined(numberOfAssetsAvailable) || numberOfAssetsAvailable <= 1) {
+        if (!this._areMultipleAssetsAvailable()) {
             return null;
         }
         return (
             <Container marginLeft="5px">
-                <Icon icon="chevron" width={12} onClick={this._generateSelectAssetClickHandler()} />
+                <Icon icon="chevron" width={12} onClick={this._handleSelectAssetClick} />
             </Container>
         );
     };
@@ -122,19 +121,23 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             currentFontSizePx: fontSizePx,
         });
     };
-    private readonly _generateSelectAssetClickHandler = (): (() => void) | undefined => {
+    private readonly _generateSelectAssetClickHandler = (): SimpleHandler | undefined => {
         // We don't want to allow opening the token selection panel if there are no assets.
         // Since styles are inferred from the presence of a click handler, we want to return undefined
         // instead of providing a noop.
-        const { numberOfAssetsAvailable, onSelectAssetClick } = this.props;
-        if (
-            _.isUndefined(numberOfAssetsAvailable) ||
-            numberOfAssetsAvailable <= 1 ||
-            _.isUndefined(onSelectAssetClick)
-        ) {
+        if (!this._areMultipleAssetsAvailable() || _.isUndefined(this.props.onSelectAssetClick)) {
             return undefined;
         }
-        return () => onSelectAssetClick(this.props.asset);
+        return this._handleSelectAssetClick;
+    };
+    private readonly _areMultipleAssetsAvailable = (): boolean => {
+        const { numberOfAssetsAvailable } = this.props;
+        return !_.isUndefined(numberOfAssetsAvailable) && numberOfAssetsAvailable > 1;
+    };
+    private readonly _handleSelectAssetClick = (): void => {
+        if (this.props.onSelectAssetClick) {
+            this.props.onSelectAssetClick();
+        }
     };
     // For assets with symbols of different length,
     // start scaling the input at different character lengths
diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx
index e7a29d59c..eec2777d2 100644
--- a/packages/instant/src/components/ui/circle.tsx
+++ b/packages/instant/src/components/ui/circle.tsx
@@ -1,7 +1,6 @@
 import { styled } from '../../style/theme';
 
 export interface CircleProps {
-    className?: string;
     diameter: number;
     fillColor?: string;
 }
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index e228a01b6..a0a187e5f 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -70,7 +70,9 @@ export const Container =
     &:hover {
         ${props =>
             props.darkenOnHover
-                ? `background-color: ${darken(0.05, props.theme[props.backgroundColor || 'white'])}`
+                ? `background-color: ${
+                      props.backgroundColor ? darken(0.05, props.theme[props.backgroundColor]) : 'none'
+                  }`
                 : ''};
     }
 `;
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index 716558409..0e05c13da 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -27,7 +27,7 @@ export const asyncData = {
                 const assets = assetUtils.createAssetsFromAssetDatas(assetDatas, assetMetaDataMap, network);
                 store.dispatch(actions.setAvailableAssets(assets));
             } catch (e) {
-                const errorMessage = 'Error fetching available assets';
+                const errorMessage = 'Could not find any assets';
                 errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage);
                 // On error, just specify that none are available
                 store.dispatch(actions.setAvailableAssets([]));
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 963a5d656..b4a3aa7c3 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -75,3 +75,5 @@ export enum ZeroExInstantError {
     AssetMetaDataNotAvailable = 'ASSET_META_DATA_NOT_AVAILABLE',
     InsufficientETH = 'INSUFFICIENT_ETH',
 }
+
+export type SimpleHandler = () => void;