diff options
Diffstat (limited to 'packages/instant/src/components')
3 files changed, 34 insertions, 8 deletions
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index b1fec6405..e222bc576 100644 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -19,6 +19,7 @@ export interface ERC20AssetAmountInputProps { startingFontSizePx: number; fontColor?: ColorOption; isDisabled: boolean; + numberOfAssetsAvailable?: number; } export interface ERC20AssetAmountInputState { @@ -47,6 +48,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput private readonly _renderContentForAsset = (asset: ERC20Asset): React.ReactNode => { const { onChange, ...rest } = this.props; const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`; + const onSymbolClick = this._generateSelectAssetClick(); return ( <React.Fragment> <Container borderBottom={amountBorderBottom} display="inline-block"> @@ -59,7 +61,6 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput /> </Container> <Container - cursor="pointer" display="inline-block" marginLeft="8px" title={assetUtils.bestNameForAsset(asset, undefined)} @@ -69,7 +70,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput fontSize={`${this.state.currentFontSizePx}px`} fontColor={ColorOption.white} textTransform="uppercase" - onClick={this._handleSymbolClick} + onClick={onSymbolClick} > {assetUtils.formattedSymbolForAsset(asset)} </Text> @@ -80,6 +81,13 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput ); }; private readonly _renderBackupContent = (): React.ReactNode => { + const { numberOfAssetsAvailable } = this.props; + let text = 'Select Token'; + if (_.isUndefined(numberOfAssetsAvailable)) { + text = '...Loading'; + } else if (numberOfAssetsAvailable === 0) { + text = 'Assets Unavailable'; + } return ( <Flex> <Text @@ -87,17 +95,21 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput fontColor={ColorOption.white} opacity={0.7} fontWeight="500" - onClick={this._handleSymbolClick} + onClick={this._generateSelectAssetClick()} > - Select Token + {text} </Text> {this._renderChevronIcon()} </Flex> ); }; private readonly _renderChevronIcon = (): React.ReactNode => { + const { numberOfAssetsAvailable } = this.props; + if (_.isUndefined(numberOfAssetsAvailable) || numberOfAssetsAvailable <= 1) { + return null; + } return ( - <Container marginLeft="5px" onClick={this._handleSymbolClick}> + <Container cursor="pointer" marginLeft="5px" onClick={this._generateSelectAssetClick()}> <Icon icon="chevron" width={12} /> </Container> ); @@ -110,7 +122,15 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput currentFontSizePx: fontSizePx, }); }; - private readonly _handleSymbolClick = () => { + // We don't want to allow opening the token selection panel if there are no assets. + private readonly _generateSelectAssetClick = (): (() => void) | undefined => { + const { numberOfAssetsAvailable } = this.props; + if (_.isUndefined(numberOfAssetsAvailable) || numberOfAssetsAvailable <= 1) { + return undefined; + } + return this._handleSelectAssetClick; + }; + private readonly _handleSelectAssetClick = () => { if (this.props.onSelectAssetClick) { this.props.onSelectAssetClick(this.props.asset); } diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index a98176e9b..12051b382 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -11,7 +11,9 @@ export interface ERC20TokenSelectorProps { } export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => ( - <Container>{_.map(tokens, token => <TokenSelectorRow token={token} onClick={onTokenSelect} />)}</Container> + <Container> + {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)} + </Container> ); interface TokenSelectorRowProps { diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index ab6350010..e49001d12 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -37,6 +37,7 @@ export interface ZeroExInstantOptionalProps { export class ZeroExInstant extends React.Component<ZeroExInstantProps> { private readonly _store: Store; + // TODO(fragosti): Write tests for this beast once we inject a provider. private static _mergeInitialStateWithProps(props: ZeroExInstantProps, state: State = INITIAL_STATE): State { const networkId = props.networkId || state.network; // TODO: Provider needs to not be hard-coded to injected web3. @@ -72,6 +73,9 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> { selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount) ? state.selectedAssetAmount : new BigNumberInput(props.defaultAssetBuyAmount), + availableAssets: _.isUndefined(props.availableAssetDatas) + ? undefined + : assetUtils.createAssetsFromAssetDatas(props.availableAssetDatas, completeAssetMetaDataMap, networkId), assetMetaDataMap: completeAssetMetaDataMap, }; return storeStateFromProps; @@ -87,7 +91,7 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> { // tslint:disable-next-line:no-floating-promises asyncData.fetchEthPriceAndDispatchToStore(this._store); // fetch available assets if none are specified - if (_.isEmpty(state.availableAssets)) { + if (_.isUndefined(state.availableAssets)) { // tslint:disable-next-line:no-floating-promises asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store); } |