diff options
-rw-r--r-- | packages/instant/src/components/erc20_asset_amount_input.tsx | 12 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_erc20_asset_amount_input.ts | 18 |
2 files changed, 20 insertions, 10 deletions
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index 520ac33d5..b825255c4 100644 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -22,7 +22,8 @@ export interface ERC20AssetAmountInputProps { onSelectAssetClick?: (asset?: ERC20Asset) => void; startingFontSizePx: number; fontColor?: ColorOption; - isDisabled: boolean; + isInputDisabled: boolean; + canSelectOtherAsset: boolean; numberOfAssetsAvailable?: number; } @@ -50,14 +51,15 @@ 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 { onChange, isInputDisabled, ...rest } = this.props; + const amountBorderBottom = isInputDisabled ? '' : `1px solid ${transparentWhite}`; const onSymbolClick = this._generateSelectAssetClickHandler(); return ( <React.Fragment> <Container borderBottom={amountBorderBottom} display="inline-block"> <ScalingAmountInput {...rest} + isDisabled={isInputDisabled} textLengthThreshold={this._textLengthThresholdForAsset(asset)} maxFontSizePx={this.props.startingFontSizePx} onAmountChange={this._handleChange} @@ -74,11 +76,11 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput fontSize={`${this.state.currentFontSizePx}px`} fontColor={ColorOption.white} textTransform="uppercase" - onClick={onSymbolClick} + onClick={this.props.canSelectOtherAsset ? onSymbolClick : undefined} > {assetUtils.formattedSymbolForAsset(asset)} </Text> - {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..a39bc46a2 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -23,9 +23,10 @@ interface ConnectedState { assetBuyer: AssetBuyer; value?: BigNumber; asset?: ERC20Asset; - isDisabled: boolean; + isInputDisabled: boolean; numberOfAssetsAvailable?: number; affiliateInfo?: AffiliateInfo; + canSelectOtherAsset: boolean; } interface ConnectedDispatch { @@ -43,21 +44,27 @@ type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps; const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => { const processState = state.buyOrderState.processState; - const isEnabled = processState === OrderProcessState.None || processState === OrderProcessState.Failure; - const isDisabled = !isEnabled; + const isInputEnabled = processState === OrderProcessState.None || processState === OrderProcessState.Failure; + const isInputDisabled = !isInputEnabled; const selectedAsset = !_.isUndefined(state.selectedAsset) && state.selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20 ? (state.selectedAsset as ERC20Asset) : undefined; const numberOfAssetsAvailable = _.isUndefined(state.availableAssets) ? undefined : state.availableAssets.length; + const canSelectOtherAsset = + numberOfAssetsAvailable && numberOfAssetsAvailable > 1 + ? isInputEnabled || processState === OrderProcessState.Success + : false; + const assetBuyer = state.providerState.assetBuyer; return { assetBuyer, value: state.selectedAssetUnitAmount, asset: selectedAsset, - isDisabled, + isInputDisabled, numberOfAssetsAvailable, affiliateInfo: state.affiliateInfo, + canSelectOtherAsset, }; }; @@ -102,8 +109,9 @@ const mergeProps = ( onChange: (value, asset) => { connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset, connectedState.affiliateInfo); }, - isDisabled: connectedState.isDisabled, + isInputDisabled: connectedState.isInputDisabled, numberOfAssetsAvailable: connectedState.numberOfAssetsAvailable, + canSelectOtherAsset: connectedState.canSelectOtherAsset, }; }; |