aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/instant/src/components/erc20_token_selector.tsx2
-rw-r--r--packages/instant/src/components/payment_method.tsx4
-rw-r--r--packages/instant/src/components/payment_method_dropdown.tsx33
-rw-r--r--packages/instant/src/components/ui/button.tsx62
-rw-r--r--packages/instant/src/components/ui/dropdown.tsx21
-rw-r--r--packages/instant/src/components/ui/overlay.tsx1
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx1
-rw-r--r--packages/instant/src/components/zero_ex_instant_overlay.tsx2
-rw-r--r--packages/instant/src/util/format.ts3
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)}`;
+ },
};