From ecb92a44bc5a4b433f2a673fc77199c7b8a6dc18 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 7 Nov 2018 21:38:54 -0800 Subject: feat: create PaymentMethodDropdown --- .../src/components/erc20_token_selector.tsx | 2 +- packages/instant/src/components/payment_method.tsx | 4 +- .../src/components/payment_method_dropdown.tsx | 33 ++++++++++++ packages/instant/src/components/ui/button.tsx | 62 +++++++++++++--------- packages/instant/src/components/ui/dropdown.tsx | 21 +++----- packages/instant/src/components/ui/overlay.tsx | 1 - .../src/components/zero_ex_instant_container.tsx | 1 - .../src/components/zero_ex_instant_overlay.tsx | 2 +- packages/instant/src/util/format.ts | 3 ++ 9 files changed, 86 insertions(+), 43 deletions(-) create mode 100644 packages/instant/src/components/payment_method_dropdown.tsx (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index 365995905..c10b1492e 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -35,7 +35,7 @@ export class ERC20TokenSelector extends React.Component value={this.state.searchQuery} onChange={this._handleSearchInputChange} /> - + {_.map(tokens, token => { if (!this._isTokenQueryMatch(token)) { return null; diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 125b54bad..4d3daff62 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -3,8 +3,8 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; +import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Container } from './ui/container'; -import { Dropdown } from './ui/dropdown'; import { Text } from './ui/text'; export interface PaymentMethodProps {} @@ -24,7 +24,7 @@ export class PaymentMethod extends React.Component { Payment Method - + ); } diff --git a/packages/instant/src/components/payment_method_dropdown.tsx b/packages/instant/src/components/payment_method_dropdown.tsx new file mode 100644 index 000000000..09d21e384 --- /dev/null +++ b/packages/instant/src/components/payment_method_dropdown.tsx @@ -0,0 +1,33 @@ +import { BigNumber } from '@0x/utils'; +import * as React from 'react'; + +import { format } from '../util/format'; + +import { Dropdown, DropdownItemConfig } from './ui/dropdown'; + +export interface PaymentMethodDropdownProps { + selectedEthAddress: string; + addressEthBaseAmount: BigNumber; +} + +export class PaymentMethodDropdown extends React.Component { + public static defaultProps = { + selectedEthAddress: '0xa1b2c3d4e5f6g7h8j9k10', + addressEthBaseAmount: new BigNumber(10500000000000000000), + }; + public render(): React.ReactNode { + const { selectedEthAddress, addressEthBaseAmount } = this.props; + const value = format.ethAddress(selectedEthAddress); + const label = format.ethBaseAmount(addressEthBaseAmount) as string; + return ; + } + private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => { + const viewOnEtherscan = { + text: 'View on Etherscan', + }; + const copyAddressToClipboard = { + text: 'Copy address to clipboard', + }; + return [viewOnEtherscan, copyAddressToClipboard]; + }; +} diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx index 5274d835b..61a0f23a8 100644 --- a/packages/instant/src/components/ui/button.tsx +++ b/packages/instant/src/components/ui/button.tsx @@ -6,6 +6,8 @@ import { ColorOption, styled } from '../../style/theme'; export interface ButtonProps { backgroundColor?: ColorOption; borderColor?: ColorOption; + fontColor?: ColorOption; + fontSize?: string; width?: string; padding?: string; type?: string; @@ -24,38 +26,50 @@ const darkenOnHoverAmount = 0.1; const darkenOnActiveAmount = 0.2; const saturateOnFocusAmount = 0.2; export const Button = styled(PlainButton)` - cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; - transition: background-color, opacity 0.5s ease; - padding: ${props => props.padding}; - border-radius: 3px; - outline: none; - width: ${props => props.width}; - background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; - border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; - &:hover { - background-color: ${props => - !props.isDisabled - ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white']) - : ''} !important; - } - &:active { - background-color: ${props => - !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; - } - &:disabled { - opacity: 0.5; - } - &:focus { - background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])}; + && { + all: initial; + box-sizing: border-box; + font-size: ${props => props.fontSize}; + font-family: 'Inter UI', sans-serif; + font-weight: 600; + color: ${props => props.fontColor && props.theme[props.fontColor]}; + cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; + transition: background-color, opacity 0.5s ease; + padding: ${props => props.padding}; + border-radius: 3px; + text-align: center; + outline: none; + width: ${props => props.width}; + background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; + border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; + &:hover { + background-color: ${props => + !props.isDisabled + ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white']) + : ''} !important; + } + &:active { + background-color: ${props => + !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; + } + &:disabled { + opacity: 0.5; + } + &:focus { + background-color: ${props => + saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])}; + } } `; Button.defaultProps = { backgroundColor: ColorOption.primaryColor, borderColor: ColorOption.primaryColor, + fontColor: ColorOption.white, width: 'auto', isDisabled: false, - padding: '1em 2.2em', + padding: '.6em 1.2em', + fontSize: '15px', }; Button.displayName = 'Button'; diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx index ae4731b6f..d51060c05 100644 --- a/packages/instant/src/components/ui/dropdown.tsx +++ b/packages/instant/src/components/ui/dropdown.tsx @@ -17,7 +17,7 @@ export interface DropdownItemConfig { export interface DropdownProps { value: string; - label: string; + label?: string; items: DropdownItemConfig[]; } @@ -27,14 +27,7 @@ export interface DropdownState { export class Dropdown extends React.Component { public static defaultProps = { - items: [ - { - text: 'Item 1', - }, - { - text: 'Item 2', - }, - ], + items: [], }; public state: DropdownState = { isOpen: false, @@ -57,7 +50,7 @@ export class Dropdown extends React.Component { { {value} - - {label} - + {label && ( + + {label} + + )} {hasItems && ( diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index 64090a6b3..7c941d294 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -1,5 +1,4 @@ import * as _ from 'lodash'; -import * as React from 'react'; import { overlayBlack, styled } from '../../style/theme'; import { zIndex } from '../../style/z_index'; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 0543a8e4e..7a33c9203 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -6,7 +6,6 @@ import { LatestError } from '../containers/latest_error'; import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress'; import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; - import { ColorOption } from '../style/theme'; import { zIndex } from '../style/z_index'; diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx index d2b41d27f..734747b57 100644 --- a/packages/instant/src/components/zero_ex_instant_overlay.tsx +++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { ColorOption, overlayBlack, styled } from '../style/theme'; +import { ColorOption } from '../style/theme'; import { Container } from './ui/container'; import { Flex } from './ui/flex'; diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts index 4a48dec9d..44661d697 100644 --- a/packages/instant/src/util/format.ts +++ b/packages/instant/src/util/format.ts @@ -50,4 +50,7 @@ export const format = { } return `$${ethUnitAmount.mul(ethUsdPrice).toFixed(decimalPlaces)}`; }, + ethAddress: (address: string): string => { + return `0x${address.slice(2, 7)}…${address.slice(-5)}`; + }, }; -- cgit