diff options
Diffstat (limited to 'packages/instant/src/components')
10 files changed, 81 insertions, 53 deletions
diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx deleted file mode 100644 index 44115e5a1..000000000 --- a/packages/instant/src/components/buy_order_state_button.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; - -import { PlacingOrderButton } from '../components/placing_order_button'; -import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button'; -import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button'; -import { SelectedAssetViewTransactionButton } from '../containers/selected_asset_view_transaction_button'; -import { OrderProcessState } from '../types'; - -export interface BuyOrderStateButtonProps { - buyOrderProcessingState: OrderProcessState; -} - -export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => { - if (props.buyOrderProcessingState === OrderProcessState.FAILURE) { - return <SelectedAssetRetryButton />; - } else if ( - props.buyOrderProcessingState === OrderProcessState.SUCCESS || - props.buyOrderProcessingState === OrderProcessState.PROCESSING - ) { - return <SelectedAssetViewTransactionButton />; - } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) { - return <PlacingOrderButton />; - } - - return <SelectedAssetBuyButton />; -}; diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx new file mode 100644 index 000000000..758eabcb7 --- /dev/null +++ b/packages/instant/src/components/buy_order_state_buttons.tsx @@ -0,0 +1,63 @@ +import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; +import * as React from 'react'; + +import { BuyButton } from '../components/buy_button'; +import { SecondaryButton } from '../components/secondary_button'; +import { Flex } from '../components/ui/flex'; + +import { PlacingOrderButton } from '../components/placing_order_button'; +import { ColorOption } from '../style/theme'; +import { OrderProcessState } from '../types'; + +import { Button } from './ui/button'; +import { Text } from './ui/text'; + +export interface BuyOrderStateButtonProps { + buyQuote?: BuyQuote; + buyOrderProcessingState: OrderProcessState; + assetBuyer?: AssetBuyer; + onViewTransaction: () => void; + onAwaitingSignature: (buyQuote: BuyQuote) => void; + onSignatureDenied: (buyQuote: BuyQuote) => void; + onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void; + onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void; + onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void; + onRetry: () => void; +} + +// TODO: rename to buttons +export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonProps> = props => { + if (props.buyOrderProcessingState === OrderProcessState.FAILURE) { + return ( + <Flex justify="space-between"> + <Button width="48%" onClick={props.onRetry}> + <Text fontColor={ColorOption.white} fontWeight={600} fontSize="16px"> + Back + </Text> + </Button> + <SecondaryButton width="48%" onClick={props.onViewTransaction}> + Details + </SecondaryButton> + </Flex> + ); + } else if ( + props.buyOrderProcessingState === OrderProcessState.SUCCESS || + props.buyOrderProcessingState === OrderProcessState.PROCESSING + ) { + return <SecondaryButton onClick={props.onViewTransaction}>View Transaction</SecondaryButton>; + } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) { + return <PlacingOrderButton />; + } + + return ( + <BuyButton + buyQuote={props.buyQuote} + assetBuyer={props.assetBuyer} + onAwaitingSignature={props.onAwaitingSignature} + onSignatureDenied={props.onSignatureDenied} + onBuyProcessing={props.onBuyProcessing} + onBuySuccess={props.onBuySuccess} + onBuyFailure={props.onBuyFailure} + /> + ); +}; 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/retry_button.tsx b/packages/instant/src/components/retry_button.tsx deleted file mode 100644 index 0d6188e6a..000000000 --- a/packages/instant/src/components/retry_button.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; - -import { SecondaryButton } from './secondary_button'; - -export interface RetryButtonProps { - onClick: () => void; -} - -export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => { - return <SecondaryButton onClick={props.onClick}>Try Again</SecondaryButton>; -}; 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/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx index 3c139a233..583058b5b 100644 --- a/packages/instant/src/components/secondary_button.tsx +++ b/packages/instant/src/components/secondary_button.tsx @@ -14,7 +14,7 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p <Button backgroundColor={ColorOption.white} borderColor={ColorOption.lightGrey} - width="100%" + width={props.width} onClick={props.onClick} {...buttonProps} > @@ -24,3 +24,6 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p </Button> ); }; +SecondaryButton.defaultProps = { + width: '100%', +}; diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx index 1fcb2591c..5274d835b 100644 --- a/packages/instant/src/components/ui/button.tsx +++ b/packages/instant/src/components/ui/button.tsx @@ -52,6 +52,7 @@ export const Button = styled(PlainButton)` Button.defaultProps = { backgroundColor: ColorOption.primaryColor, + borderColor: ColorOption.primaryColor, width: 'auto', isDisabled: false, padding: '1em 2.2em', diff --git a/packages/instant/src/components/view_transaction_button.tsx b/packages/instant/src/components/view_transaction_button.tsx deleted file mode 100644 index 7aa44e657..000000000 --- a/packages/instant/src/components/view_transaction_button.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; - -import { SecondaryButton } from './secondary_button'; - -export interface ViewTransactionButtonProps { - onClick: () => void; -} - -export const ViewTransactionButton: React.StatelessComponent<ViewTransactionButtonProps> = props => { - return <SecondaryButton onClick={props.onClick}>View Transaction</SecondaryButton>; -}; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 1d17ed12a..ff19351ff 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details'; import { LatestError } from '../containers/latest_error'; -import { SelectedAssetBuyOrderStateButton } from '../containers/selected_asset_buy_order_state_button'; +import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; import { ColorOption } from '../style/theme'; @@ -27,7 +27,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta <SelectedAssetInstantHeading /> <LatestBuyQuoteOrderDetails /> <Container padding="20px" width="100%"> - <SelectedAssetBuyOrderStateButton /> + <SelectedAssetBuyOrderStateButtons /> </Container> </Flex> </Container> |