diff options
| -rw-r--r-- | packages/instant/src/components/erc20_asset_amount_input.tsx | 6 | ||||
| -rw-r--r-- | packages/instant/src/containers/selected_erc20_asset_amount_input.ts | 8 |
2 files changed, 11 insertions, 3 deletions
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index 371e0b0d5..e675d3fc5 100644 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -23,6 +23,7 @@ export interface ERC20AssetAmountInputProps { startingFontSizePx: number; fontColor?: ColorOption; isDisabled: boolean; + canSelectOtherAsset: boolean; numberOfAssetsAvailable?: number; } @@ -53,7 +54,6 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput const { onChange, ...rest } = this.props; const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`; const onSymbolClick = this._generateSelectAssetClickHandler(); - const isEnabled = !this.props.isDisabled; return ( <React.Fragment> <Container borderBottom={amountBorderBottom} display="inline-block"> @@ -75,11 +75,11 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput fontSize={`${this.state.currentFontSizePx}px`} fontColor={ColorOption.white} textTransform="uppercase" - onClick={isEnabled ? onSymbolClick : undefined} + onClick={this.props.canSelectOtherAsset ? onSymbolClick : undefined} > {assetUtils.formattedSymbolForAsset(asset)} </Text> - {isEnabled && this._renderChevronIcon()} + {this.props.canSelectOtherAsset && this._renderChevronIcon()} </Flex> </Container> </React.Fragment> 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 2c2661e1a..bbc103566 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -26,6 +26,7 @@ interface ConnectedState { isDisabled: boolean; numberOfAssetsAvailable?: number; affiliateInfo?: AffiliateInfo; + canSelectOtherAsset: boolean; } interface ConnectedDispatch { @@ -50,6 +51,11 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP ? (state.selectedAsset as ERC20Asset) : undefined; const numberOfAssetsAvailable = _.isUndefined(state.availableAssets) ? undefined : state.availableAssets.length; + const canSelectOtherAsset = + numberOfAssetsAvailable && numberOfAssetsAvailable > 1 + ? isEnabled || processState === OrderProcessState.Success + : false; + const assetBuyer = state.providerState.assetBuyer; return { assetBuyer, @@ -58,6 +64,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP isDisabled, numberOfAssetsAvailable, affiliateInfo: state.affiliateInfo, + canSelectOtherAsset, }; }; @@ -104,6 +111,7 @@ const mergeProps = ( }, isDisabled: connectedState.isDisabled, numberOfAssetsAvailable: connectedState.numberOfAssetsAvailable, + canSelectOtherAsset: connectedState.canSelectOtherAsset, }; }; |