diff options
4 files changed, 61 insertions, 17 deletions
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index 5abb34c2f..4108fd0e8 100644 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -8,13 +8,14 @@ import { BigNumberInput } from '../util/big_number_input'; import { util } from '../util/util'; import { ScalingAmountInput } from './scaling_amount_input'; -import { Container, Text } from './ui'; +import { Container, Flex, Icon, Text } from './ui'; // Asset amounts only apply to ERC20 assets export interface ERC20AssetAmountInputProps { asset?: ERC20Asset; value?: BigNumberInput; onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; + onSymbolClick: (asset?: ERC20Asset) => void; startingFontSizePx: number; fontColor?: ColorOption; isDisabled: boolean; @@ -27,6 +28,7 @@ export interface ERC20AssetAmountInputState { export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> { public static defaultProps = { onChange: util.boundNoop, + onSymbolClick: util.boundNoop, isDisabled: false, }; constructor(props: ERC20AssetAmountInputProps) { @@ -36,10 +38,18 @@ 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}`; + const { asset } = this.props; return ( <Container whiteSpace="nowrap"> + {!_.isUndefined(asset) ? this._renderContentForAsset(asset) : this._renderBackupContent()} + </Container> + ); + } + private readonly _renderContentForAsset = (asset: ERC20Asset): React.ReactNode => { + const { onChange, ...rest } = this.props; + const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`; + return ( + <React.Fragment> <Container borderBottom={amountBorderBottom} display="inline-block"> <ScalingAmountInput {...rest} @@ -49,18 +59,50 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput onFontSizeChange={this._handleFontSizeChange} /> </Container> - <Container display="inline-flex" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}> - <Text - fontSize={`${this.state.currentFontSizePx}px`} - fontColor={ColorOption.white} - textTransform="uppercase" - > - {assetUtils.formattedSymbolForAsset(asset)} - </Text> + <Container + cursor="pointer" + display="inline-block" + marginLeft="8px" + title={assetUtils.bestNameForAsset(asset, undefined)} + > + <Flex inline={true}> + <Text + fontSize={`${this.state.currentFontSizePx}px`} + fontColor={ColorOption.white} + textTransform="uppercase" + onClick={this._handleSymbolClick} + > + {assetUtils.formattedSymbolForAsset(asset)} + </Text> + {this._renderChevronIcon()} + </Flex> </Container> + </React.Fragment> + ); + }; + private readonly _renderBackupContent = (): React.ReactNode => { + return ( + <Flex> + <Text + fontSize="30px" + fontColor={ColorOption.white} + opacity={0.7} + fontWeight="500" + onClick={this._handleSymbolClick} + > + Select Token + </Text> + {this._renderChevronIcon()} + </Flex> + ); + }; + private readonly _renderChevronIcon = (): React.ReactNode => { + return ( + <Container marginLeft="5px" onClick={this._handleSymbolClick}> + <Icon icon="chevron" width={12} /> </Container> ); - } + }; private readonly _handleChange = (value?: BigNumberInput): void => { this.props.onChange(value, this.props.asset); }; @@ -69,6 +111,9 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput currentFontSizePx: fontSizePx, }); }; + private readonly _handleSymbolClick = () => { + this.props.onSymbolClick(this.props.asset); + }; // For assets with symbols of different length, // start scaling the input at different character lengths private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => { diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 00c45ba3a..0b41d44d7 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -48,9 +48,6 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { <Flex direction="row" justify="space-between"> <Flex height="60px"> <SelectedERC20AssetAmountInput startingFontSizePx={38} /> - <Container marginLeft="5px"> - <Icon icon="chevron" width={12} /> - </Container> </Flex> <Flex direction="column" justify="space-between"> {iconOrAmounts} diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 76b570de7..b6842b294 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -28,6 +28,7 @@ export interface ContainerProps { zIndex?: number; whiteSpace?: string; opacity?: number; + cursor?: string; } export const Container = @@ -57,6 +58,7 @@ export const Container = ${props => cssRuleIfExists(props, 'z-index')} ${props => cssRuleIfExists(props, 'white-space')} ${props => cssRuleIfExists(props, 'opacity')} + ${props => cssRuleIfExists(props, 'cursor')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index 5fa3fc95b..29c6511bb 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -9,14 +9,14 @@ export interface FlexProps { width?: string; height?: string; backgroundColor?: ColorOption; - className?: string; + inline?: boolean; } export const Flex = styled.div < FlexProps > ` - display: flex; + display: ${props => (props.inline ? 'inline-flex' : 'flex')}; flex-direction: ${props => props.direction}; flex-wrap: ${props => props.flexWrap}; justify-content: ${props => props.justify}; |