diff options
Diffstat (limited to 'packages/instant/src/components')
5 files changed, 37 insertions, 30 deletions
diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx index 73a4d62e2..17aa46df5 100644 --- a/packages/instant/src/components/buy_order_state_button.tsx +++ b/packages/instant/src/components/buy_order_state_button.tsx @@ -1,15 +1,28 @@ +import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; import * as React from 'react'; import { Flex } from '../components/ui/flex'; +import { SecondaryButton } from '../components/secondary_button'; +import { BuyButton } from '../components/buy_button'; 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 { 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, error: Error) => 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 @@ -17,18 +30,34 @@ export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonPr if (props.buyOrderProcessingState === OrderProcessState.FAILURE) { return ( <Flex justify="space-between"> - <SelectedAssetRetryButton width="48%" /> - <SelectedAssetViewTransactionButton width="48%" /> + <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 <SelectedAssetViewTransactionButton />; + return <SecondaryButton onClick={props.onViewTransaction}>View Transaction</SecondaryButton>; } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) { return <PlacingOrderButton />; } - return <SelectedAssetBuyButton />; + 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/retry_button.tsx b/packages/instant/src/components/retry_button.tsx deleted file mode 100644 index 36ae55e72..000000000 --- a/packages/instant/src/components/retry_button.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; - -import { SecondaryButton, SecondaryButtonProps } from './secondary_button'; - -export interface RetryButtonProps extends SecondaryButtonProps { - onClick: () => void; -} - -export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => { - return <SecondaryButton {...props}>Try Again</SecondaryButton>; -}; diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx index 849003d0a..583058b5b 100644 --- a/packages/instant/src/components/secondary_button.tsx +++ b/packages/instant/src/components/secondary_button.tsx @@ -8,7 +8,6 @@ import { Text } from './ui/text'; export interface SecondaryButtonProps extends ButtonProps {} -// TODO: don't hard code this export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => { const buttonProps = _.omit(props, 'text'); return ( 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 8d11bf132..000000000 --- a/packages/instant/src/components/view_transaction_button.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; - -import { SecondaryButton, SecondaryButtonProps } from './secondary_button'; - -export interface ViewTransactionButtonProps extends SecondaryButtonProps { - onClick: () => void; -} - -export const ViewTransactionButton: React.StatelessComponent<ViewTransactionButtonProps> = props => { - return <SecondaryButton {...props}>View Transaction</SecondaryButton>; -}; |