aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/erc20_asset_amount_input.tsx33
-rw-r--r--packages/instant/src/components/ui/circle.tsx1
-rw-r--r--packages/instant/src/components/ui/container.tsx4
-rw-r--r--packages/instant/src/redux/async_data.ts2
-rw-r--r--packages/instant/src/types.ts2
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;