diff options
4 files changed, 21 insertions, 2 deletions
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index 583fad28b..5abb34c2f 100644 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -17,6 +17,7 @@ export interface ERC20AssetAmountInputProps { onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; startingFontSizePx: number; fontColor?: ColorOption; + isDisabled: boolean; } export interface ERC20AssetAmountInputState { @@ -26,6 +27,7 @@ export interface ERC20AssetAmountInputState { export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> { public static defaultProps = { onChange: util.boundNoop, + isDisabled: false, }; constructor(props: ERC20AssetAmountInputProps) { super(props); @@ -35,9 +37,10 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput } public render(): React.ReactNode { const { asset, onChange, ...rest } = this.props; + const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`; return ( <Container whiteSpace="nowrap"> - <Container borderBottom={`1px solid ${transparentWhite}`} display="inline-block"> + <Container borderBottom={amountBorderBottom} display="inline-block"> <ScalingAmountInput {...rest} textLengthThreshold={this._textLengthThresholdForAsset(asset)} diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx index 655ae2b74..cfbf3b7cc 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -8,6 +8,7 @@ import { util } from '../util/util'; import { ScalingInput } from './scaling_input'; export interface ScalingAmountInputProps { + isDisabled: boolean; maxFontSizePx: number; textLengthThreshold: number; fontColor?: ColorOption; @@ -20,6 +21,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> public static defaultProps = { onChange: util.boundNoop, onFontSizeChange: util.boundNoop, + isDisabled: false, }; public render(): React.ReactNode { const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props; @@ -33,6 +35,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> value={!_.isUndefined(value) ? value.toDisplayString() : ''} placeholder="0.00" emptyInputWidthCh={3.5} + isDisabled={this.props.isDisabled} /> ); } diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx index 34cb0b5fd..11748b729 100644 --- a/packages/instant/src/components/scaling_input.tsx +++ b/packages/instant/src/components/scaling_input.tsx @@ -27,6 +27,7 @@ export interface ScalingInputProps { placeholder?: string; maxLength?: number; scalingSettings: ScalingSettings; + isDisabled: boolean; } export interface ScalingInputState { @@ -49,6 +50,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu onFontSizeChange: util.boundNoop, maxLength: 7, scalingSettings: defaultScalingSettings, + isDisabled: false, }; public state: ScalingInputState = { inputWidthPxAtPhaseChange: undefined, @@ -121,7 +123,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu } } public render(): React.ReactNode { - const { fontColor, onChange, placeholder, value, maxLength } = this.props; + const { isDisabled, fontColor, onChange, placeholder, value, maxLength } = this.props; const phase = ScalingInput.getPhaseFromProps(this.props); return ( <Input @@ -133,6 +135,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu fontSize={`${this._calculateFontSize(phase)}px`} width={this._calculateWidth(phase)} maxLength={maxLength} + disabled={isDisabled} /> ); } 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 6536e2787..41ed974a2 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -24,6 +24,7 @@ interface ConnectedState { assetBuyer?: AssetBuyer; value?: BigNumberInput; asset?: ERC20Asset; + isDisabled: boolean; } interface ConnectedDispatch { @@ -34,21 +35,29 @@ interface ConnectedProps { value?: BigNumberInput; asset?: ERC20Asset; onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; + isDisabled: boolean; } 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 selectedAsset = state.selectedAsset; if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) { return { value: state.selectedAssetAmount, + isDisabled, }; } + return { assetBuyer: state.assetBuyer, value: state.selectedAssetAmount, asset: selectedAsset as ERC20Asset, + isDisabled, }; }; @@ -113,6 +122,7 @@ const mergeProps = ( onChange: (value, asset) => { connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset); }, + isDisabled: connectedState.isDisabled, }; }; |