diff options
author | Fabio Berger <me@fabioberger.com> | 2018-11-12 05:11:10 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-11-12 05:11:10 +0800 |
commit | 0391f93490cffdc69f6cb32f11762d174ed04e37 (patch) | |
tree | 3a8b30a04de1193aa21e5b84bd572db24979a8bf /packages/instant/src/components/instant_heading.tsx | |
parent | 399a7d5fec9af4f3491a77f0c2d46738f3d8ffa7 (diff) | |
parent | 397b4e289015f9bb0831c1a0ce6fee601670b487 (diff) | |
download | dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.tar dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.tar.gz dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.tar.bz2 dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.tar.lz dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.tar.xz dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.tar.zst dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.zip |
merge development
Diffstat (limited to 'packages/instant/src/components/instant_heading.tsx')
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 44 |
1 files changed, 26 insertions, 18 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 17ac65429..b07776b2c 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -2,15 +2,17 @@ import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; -import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input'; +import { SelectedERC20AssetAmountInput } from '../containers/selected_erc20_asset_amount_input'; import { ColorOption } from '../style/theme'; -import { AsyncProcessState, OrderProcessState, OrderState } from '../types'; +import { AsyncProcessState, ERC20Asset, OrderProcessState, OrderState } from '../types'; import { format } from '../util/format'; import { AmountPlaceholder } from './amount_placeholder'; -import { Container, Flex, Text } from './ui'; +import { Container } from './ui/container'; +import { Flex } from './ui/flex'; import { Icon } from './ui/icon'; import { Spinner } from './ui/spinner'; +import { Text } from './ui/text'; export interface InstantHeadingProps { selectedAssetAmount?: BigNumber; @@ -18,6 +20,7 @@ export interface InstantHeadingProps { ethUsdPrice?: BigNumber; quoteRequestState: AsyncProcessState; buyOrderState: OrderState; + onSelectAssetClick?: (asset?: ERC20Asset) => void; } const PLACEHOLDER_COLOR = ColorOption.white; @@ -48,7 +51,12 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { </Text> </Container> <Flex direction="row" justify="space-between"> - <SelectedAssetAmountInput fontSize="45px" /> + <Flex height="60px"> + <SelectedERC20AssetAmountInput + startingFontSizePx={38} + onSelectAssetClick={this.props.onSelectAssetClick} + /> + </Flex> <Flex direction="column" justify="space-between"> {iconOrAmounts} </Flex> @@ -60,8 +68,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { private _renderAmountsSection(): React.ReactNode { return ( <Container> - <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container> - <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount)}</Container> + <Container marginBottom="5px">{this._renderPlaceholderOrAmount(this._renderEthAmount)}</Container> + <Container opacity={0.7}>{this._renderPlaceholderOrAmount(this._renderDollarAmount)}</Container> </Container> ); } @@ -69,31 +77,31 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { private _renderIcon(): React.ReactNode { const processState = this.props.buyOrderState.processState; - if (processState === OrderProcessState.FAILURE) { - return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; - } else if (processState === OrderProcessState.PROCESSING) { + if (processState === OrderProcessState.Failure) { + return <Icon icon="failed" width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; + } else if (processState === OrderProcessState.Processing) { return <Spinner widthPx={ICON_HEIGHT} heightPx={ICON_HEIGHT} />; - } else if (processState === OrderProcessState.SUCCESS) { - return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; + } else if (processState === OrderProcessState.Success) { + return <Icon icon="success" width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; } return undefined; } private _renderTopText(): React.ReactNode { const processState = this.props.buyOrderState.processState; - if (processState === OrderProcessState.FAILURE) { + if (processState === OrderProcessState.Failure) { return 'Order failed'; - } else if (processState === OrderProcessState.PROCESSING) { + } else if (processState === OrderProcessState.Processing) { return 'Processing Order...'; - } else if (processState === OrderProcessState.SUCCESS) { + } else if (processState === OrderProcessState.Success) { return 'Tokens received!'; } return 'I want to buy'; } - private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { - if (this.props.quoteRequestState === AsyncProcessState.PENDING) { + private _renderPlaceholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { + if (this.props.quoteRequestState === AsyncProcessState.Pending) { return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />; } if (_.isUndefined(this.props.selectedAssetAmount)) { @@ -102,7 +110,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { return amountFunction(); } - private readonly _ethAmount = (): React.ReactNode => { + private readonly _renderEthAmount = (): React.ReactNode => { return ( <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}> {format.ethBaseAmount( @@ -114,7 +122,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { ); }; - private readonly _dollarAmount = (): React.ReactNode => { + private readonly _renderDollarAmount = (): React.ReactNode => { return ( <Text fontSize="16px" fontColor={ColorOption.white}> {format.ethBaseAmountInUsd( |