diff options
9 files changed, 86 insertions, 43 deletions
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<ERC20TokenSelectorProps> value={this.state.searchQuery} onChange={this._handleSearchInputChange} /> - <Container overflow="scroll" height="400px" marginTop="10px"> + <Container overflow="scroll" height="390px" marginTop="10px"> {_.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<PaymentMethodProps> { Payment Method </Text> </Container> - <Dropdown value="0x00000000000000" label="25.33 ETH" /> + <PaymentMethodDropdown /> </Container> ); } 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<PaymentMethodDropdownProps> { + 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 <Dropdown value={value} label={label} items={this._getDropdownItemConfigs()} />; + } + 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<DropdownProps, DropdownState> { 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<DropdownProps, DropdownState> { <Container cursor={hasItems ? 'pointer' : undefined} onClick={this._handleDropdownClick} - hasBoxShadow={true} + hasBoxShadow={isOpen} borderRadius={borderRadius} border="1px solid" borderColor={ColorOption.feintGrey} @@ -69,9 +62,11 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> { {value} </Text> <Container> - <Text fontSize="16px" fontColor={ColorOption.lightGrey}> - {label} - </Text> + {label && ( + <Text fontSize="16px" fontColor={ColorOption.lightGrey}> + {label} + </Text> + )} {hasItems && ( <Container marginLeft="5px" display="inline-block" position="relative" bottom="2px"> <Icon padding="3px" icon="chevron" width={12} stroke={ColorOption.grey} /> 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)}`; + }, }; |