diff options
| -rw-r--r-- | packages/instant/src/components/erc20_asset_amount_input.tsx | 33 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/circle.tsx | 1 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/container.tsx | 4 | ||||
| -rw-r--r-- | packages/instant/src/redux/async_data.ts | 2 | ||||
| -rw-r--r-- | packages/instant/src/types.ts | 2 |
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; |