From c0d8ceca82a91a3a6c222e71ecb58f2cd95da62e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 7 Nov 2018 20:30:45 -0800
Subject: feat: implement basic dropdown component

---
 .../src/components/erc20_asset_amount_input.tsx    |   2 +-
 packages/instant/src/components/payment_method.tsx |  31 +++++
 packages/instant/src/components/ui/dropdown.tsx    | 127 +++++++++++++++++++++
 packages/instant/src/components/ui/icon.tsx        |   9 +-
 .../src/components/zero_ex_instant_container.tsx   |   5 +-
 packages/instant/src/style/z_index.ts              |   3 +-
 6 files changed, 169 insertions(+), 8 deletions(-)
 create mode 100644 packages/instant/src/components/payment_method.tsx
 create mode 100644 packages/instant/src/components/ui/dropdown.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index f21c21b87..520ac33d5 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -113,7 +113,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         }
         return (
             <Container marginLeft="5px">
-                <Icon icon="chevron" width={12} onClick={this._handleSelectAssetClick} />
+                <Icon icon="chevron" width={12} stroke={ColorOption.white} onClick={this._handleSelectAssetClick} />
             </Container>
         );
     };
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
new file mode 100644
index 000000000..125b54bad
--- /dev/null
+++ b/packages/instant/src/components/payment_method.tsx
@@ -0,0 +1,31 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container } from './ui/container';
+import { Dropdown } from './ui/dropdown';
+import { Text } from './ui/text';
+
+export interface PaymentMethodProps {}
+
+export class PaymentMethod extends React.Component<PaymentMethodProps> {
+    public render(): React.ReactNode {
+        return (
+            <Container padding="20px" width="100%">
+                <Container marginBottom="10px">
+                    <Text
+                        letterSpacing="1px"
+                        fontColor={ColorOption.primaryColor}
+                        fontWeight={600}
+                        textTransform="uppercase"
+                        fontSize="14px"
+                    >
+                        Payment Method
+                    </Text>
+                </Container>
+                <Dropdown value="0x00000000000000" label="25.33 ETH" />
+            </Container>
+        );
+    }
+}
diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx
new file mode 100644
index 000000000..2bc552ab4
--- /dev/null
+++ b/packages/instant/src/components/ui/dropdown.tsx
@@ -0,0 +1,127 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ColorOption } from '../../style/theme';
+import { zIndex } from '../../style/z_index';
+
+import { Container } from './container';
+import { Flex } from './flex';
+import { Icon } from './icon';
+import { Text } from './text';
+
+export interface DropdownItemConfig {
+    text: string;
+    onClick?: () => void;
+}
+
+export interface DropdownProps {
+    value: string;
+    label: string;
+    items: DropdownItemConfig[];
+}
+
+export interface DropdownState {
+    isOpen: boolean;
+}
+
+export class Dropdown extends React.Component<DropdownProps, DropdownState> {
+    public static defaultProps = {
+        items: [
+            {
+                text: 'Item 1',
+            },
+            {
+                text: 'Item 2',
+            },
+        ],
+    };
+    public state: DropdownState = {
+        isOpen: false,
+    };
+    public render(): React.ReactNode {
+        const { value, label, items } = this.props;
+        const { isOpen } = this.state;
+        const hasItems = !_.isEmpty(items);
+        const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px';
+        return (
+            <Container position="relative">
+                <Container
+                    cursor={hasItems ? 'pointer' : undefined}
+                    onClick={this._handleDropdownClick}
+                    hasBoxShadow={true}
+                    borderRadius={borderRadius}
+                    border="1px solid"
+                    borderColor={ColorOption.feintGrey}
+                    padding="0.8em"
+                    borderBottom="1px solid"
+                >
+                    <Flex justify="space-between">
+                        <Text fontSize="16px" lineHeight="19px" fontColor={ColorOption.darkGrey}>
+                            {value}
+                        </Text>
+                        <Container>
+                            <Text fontSize="16px" lineHeight="17px" 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} />
+                                </Container>
+                            )}
+                        </Container>
+                    </Flex>
+                </Container>
+                {isOpen && (
+                    <Container
+                        width="100%"
+                        position="absolute"
+                        onClick={this._closeDropdown}
+                        backgroundColor={ColorOption.white}
+                        hasBoxShadow={true}
+                        zIndex={zIndex.dropdownItems}
+                    >
+                        {_.map(items, (item, index) => (
+                            <DropdownItem key={item.text} {...item} isLast={index === items.length - 1} />
+                        ))}
+                    </Container>
+                )}
+            </Container>
+        );
+    }
+    private readonly _handleDropdownClick = (): void => {
+        if (_.isEmpty(this.props.items)) {
+            return;
+        }
+        this.setState({
+            isOpen: !this.state.isOpen,
+        });
+    };
+    private readonly _closeDropdown = (): void => {
+        this.setState({
+            isOpen: false,
+        });
+    };
+}
+
+export interface DropdownItemProps extends DropdownItemConfig {
+    text: string;
+    onClick?: () => void;
+    isLast: boolean;
+}
+
+export const DropdownItem: React.StatelessComponent<DropdownItemProps> = ({ text, onClick, isLast }) => (
+    <Container
+        onClick={onClick}
+        cursor="pointer"
+        darkenOnHover={true}
+        backgroundColor={ColorOption.white}
+        padding="0.8em"
+        borderTop="0"
+        border="1px solid"
+        borderRadius={isLast ? '0px 0px 4px 4px' : undefined}
+        width="100%"
+        borderColor={ColorOption.feintGrey}
+    >
+        <Text>{text}</Text>
+    </Container>
+);
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 94ea26900..707aee24f 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -9,7 +9,6 @@ interface IconInfo {
     path: string;
     fillRule?: svgRule;
     clipRule?: svgRule;
-    stroke?: string;
     strokeOpacity?: number;
     strokeWidth?: number;
     strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
@@ -47,7 +46,6 @@ const ICONS: IconInfoMapping = {
     chevron: {
         viewBox: '0 0 12 7',
         path: 'M11 1L6 6L1 1',
-        stroke: 'white',
         strokeOpacity: 0.5,
         strokeWidth: 1.5,
         strokeLinecap: 'round',
@@ -67,6 +65,7 @@ export interface IconProps {
     width: number;
     height?: number;
     color?: ColorOption;
+    stroke?: ColorOption;
     icon: keyof IconInfoMapping;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     padding?: string;
@@ -75,6 +74,7 @@ export interface IconProps {
 const PlainIcon: React.StatelessComponent<IconProps> = props => {
     const iconInfo = ICONS[props.icon];
     const colorValue = _.isUndefined(props.color) ? undefined : props.theme[props.color];
+    const strokeValue = _.isUndefined(props.stroke) ? undefined : props.theme[props.stroke];
     return (
         <div onClick={props.onClick} className={props.className}>
             <svg
@@ -89,7 +89,7 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => {
                     fill={colorValue}
                     fillRule={iconInfo.fillRule || 'nonzero'}
                     clipRule={iconInfo.clipRule || 'nonzero'}
-                    stroke={iconInfo.stroke}
+                    stroke={strokeValue}
                     strokeOpacity={iconInfo.strokeOpacity}
                     strokeWidth={iconInfo.strokeWidth}
                     strokeLinecap={iconInfo.strokeLinecap}
@@ -101,7 +101,8 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => {
 };
 
 export const Icon = withTheme(styled(PlainIcon)`
-    cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')};
+    display: inline-block;
+    ${props => (!_.isUndefined(props.onClick) ? 'cursor: pointer' : '')};
     transition: opacity 0.5s ease;
     padding: ${props => props.padding};
     opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 851dfa2db..0543a8e4e 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -3,15 +3,15 @@ import * as React from 'react';
 import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector';
 import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
 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 { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress';
-
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
 
 import { SlideAnimationState } from './animations/slide_animation';
+import { PaymentMethod } from './payment_method';
 import { SlidingPanel } from './sliding_panel';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
@@ -41,6 +41,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                 >
                     <Flex direction="column" justify="flex-start">
                         <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
+                        <PaymentMethod />
                         <SelectedAssetBuyOrderProgress />
                         <LatestBuyQuoteOrderDetails />
                         <Container padding="20px" width="100%">
diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts
index 727a5189d..95e6cd912 100644
--- a/packages/instant/src/style/z_index.ts
+++ b/packages/instant/src/style/z_index.ts
@@ -1,5 +1,6 @@
 export const zIndex = {
     errorPopup: 1,
     mainContainer: 2,
-    panel: 3,
+    dropdownItems: 3,
+    panel: 4,
 };
-- 
cgit 


From 4181a040b5d5ca2335556948585278133ec63bd1 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 7 Nov 2018 20:53:25 -0800
Subject: feat: refactor out overlay component and use it to implement
 click-outside

---
 packages/instant/src/components/ui/dropdown.tsx    | 98 ++++++++++++----------
 packages/instant/src/components/ui/overlay.tsx     | 28 +++----
 .../src/components/zero_ex_instant_overlay.tsx     | 21 ++++-
 packages/instant/src/style/theme.ts                |  1 +
 packages/instant/src/style/z_index.ts              |  9 +-
 5 files changed, 89 insertions(+), 68 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx
index 2bc552ab4..c69e89c0e 100644
--- a/packages/instant/src/components/ui/dropdown.tsx
+++ b/packages/instant/src/components/ui/dropdown.tsx
@@ -1,12 +1,13 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { ColorOption } from '../../style/theme';
+import { ColorOption, completelyTransparent } from '../../style/theme';
 import { zIndex } from '../../style/z_index';
 
 import { Container } from './container';
 import { Flex } from './flex';
 import { Icon } from './icon';
+import { Overlay } from './overlay';
 import { Text } from './text';
 
 export interface DropdownItemConfig {
@@ -27,12 +28,12 @@ export interface DropdownState {
 export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     public static defaultProps = {
         items: [
-            {
-                text: 'Item 1',
-            },
-            {
-                text: 'Item 2',
-            },
+            // {
+            //     text: 'Item 1',
+            // },
+            // {
+            //     text: 'Item 2',
+            // },
         ],
     };
     public state: DropdownState = {
@@ -44,48 +45,57 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
         const hasItems = !_.isEmpty(items);
         const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px';
         return (
-            <Container position="relative">
-                <Container
-                    cursor={hasItems ? 'pointer' : undefined}
-                    onClick={this._handleDropdownClick}
-                    hasBoxShadow={true}
-                    borderRadius={borderRadius}
-                    border="1px solid"
-                    borderColor={ColorOption.feintGrey}
-                    padding="0.8em"
-                    borderBottom="1px solid"
-                >
-                    <Flex justify="space-between">
-                        <Text fontSize="16px" lineHeight="19px" fontColor={ColorOption.darkGrey}>
-                            {value}
-                        </Text>
-                        <Container>
-                            <Text fontSize="16px" lineHeight="17px" 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} />
-                                </Container>
-                            )}
-                        </Container>
-                    </Flex>
-                </Container>
+            <React.Fragment>
                 {isOpen && (
-                    <Container
-                        width="100%"
-                        position="absolute"
+                    <Overlay
+                        zIndex={zIndex.dropdownItems - 1}
+                        backgroundColor={completelyTransparent}
                         onClick={this._closeDropdown}
-                        backgroundColor={ColorOption.white}
+                    />
+                )}
+                <Container position="relative">
+                    <Container
+                        cursor={hasItems ? 'pointer' : undefined}
+                        onClick={this._handleDropdownClick}
                         hasBoxShadow={true}
-                        zIndex={zIndex.dropdownItems}
+                        borderRadius={borderRadius}
+                        border="1px solid"
+                        borderColor={ColorOption.feintGrey}
+                        padding="0.8em"
+                        borderBottom="1px solid"
                     >
-                        {_.map(items, (item, index) => (
-                            <DropdownItem key={item.text} {...item} isLast={index === items.length - 1} />
-                        ))}
+                        <Flex justify="space-between">
+                            <Text fontSize="16px" lineHeight="19px" fontColor={ColorOption.darkGrey}>
+                                {value}
+                            </Text>
+                            <Container>
+                                <Text fontSize="16px" lineHeight="17px" 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} />
+                                    </Container>
+                                )}
+                            </Container>
+                        </Flex>
                     </Container>
-                )}
-            </Container>
+                    {isOpen && (
+                        <Container
+                            width="100%"
+                            position="absolute"
+                            onClick={this._closeDropdown}
+                            backgroundColor={ColorOption.white}
+                            hasBoxShadow={true}
+                            zIndex={zIndex.dropdownItems}
+                        >
+                            {_.map(items, (item, index) => (
+                                <DropdownItem key={item.text} {...item} isLast={index === items.length - 1} />
+                            ))}
+                        </Container>
+                    )}
+                </Container>
+            </React.Fragment>
         );
     }
     private readonly _handleDropdownClick = (): void => {
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index f1706c874..64090a6b3 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -1,38 +1,30 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { ColorOption, overlayBlack, styled } from '../../style/theme';
-
-import { Container } from './container';
-import { Flex } from './flex';
-import { Icon } from './icon';
+import { overlayBlack, styled } from '../../style/theme';
+import { zIndex } from '../../style/z_index';
 
 export interface OverlayProps {
-    className?: string;
-    onClose?: () => void;
     zIndex?: number;
+    backgroundColor?: string;
 }
 
-const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
-    <Flex height="100vh" className={className}>
-        <Container position="absolute" top="0px" right="0px">
-            <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
-        </Container>
-        <div>{children}</div>
-    </Flex>
-);
-export const Overlay = styled(PlainOverlay)`
+export const Overlay =
+    styled.div <
+    OverlayProps >
+    `
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: ${props => props.zIndex}
-    background-color: ${overlayBlack};
+    background-color: ${props => props.backgroundColor};
 `;
 
 Overlay.defaultProps = {
-    zIndex: 100,
+    zIndex: zIndex.overlayDefault,
+    backgroundColor: overlayBlack,
 };
 
 Overlay.displayName = 'Overlay';
diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx
index 3461600e1..d2b41d27f 100644
--- a/packages/instant/src/components/zero_ex_instant_overlay.tsx
+++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
 
+import { ColorOption, overlayBlack, styled } from '../style/theme';
+
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Icon } from './ui/icon';
 import { Overlay } from './ui/overlay';
 import { ZeroExInstantContainer } from './zero_ex_instant_container';
 import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
@@ -13,8 +18,20 @@ export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlay
     const { onClose, zIndex, ...rest } = props;
     return (
         <ZeroExInstantProvider {...rest}>
-            <Overlay onClose={onClose} zIndex={zIndex}>
-                <ZeroExInstantContainer />
+            <Overlay zIndex={zIndex}>
+                <Flex height="100vh">
+                    <Container position="absolute" top="0px" right="0px">
+                        <Icon
+                            height={18}
+                            width={18}
+                            color={ColorOption.white}
+                            icon="closeX"
+                            onClick={onClose}
+                            padding="2em 2em"
+                        />
+                    </Container>
+                    <ZeroExInstantContainer />
+                </Flex>
             </Overlay>
         </ZeroExInstantProvider>
     );
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index d10c9b72c..7917164a1 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -32,5 +32,6 @@ export const theme: Theme = {
 
 export const transparentWhite = 'rgba(255,255,255,0.3)';
 export const overlayBlack = 'rgba(0, 0, 0, 0.6)';
+export const completelyTransparent = 'rga(0, 0, 0, 0)';
 
 export { styled, css, keyframes, withTheme, ThemeProvider };
diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts
index 95e6cd912..0eedcaf29 100644
--- a/packages/instant/src/style/z_index.ts
+++ b/packages/instant/src/style/z_index.ts
@@ -1,6 +1,7 @@
 export const zIndex = {
-    errorPopup: 1,
-    mainContainer: 2,
-    dropdownItems: 3,
-    panel: 4,
+    errorPopup: 10,
+    mainContainer: 20,
+    dropdownItems: 30,
+    panel: 40,
+    overlayDefault: 100,
 };
-- 
cgit 


From 94d1e427c142fe5cad7a211d38dd9a3235d15df9 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 7 Nov 2018 20:57:57 -0800
Subject: fix: height of token selector overflow div

---
 packages/instant/src/components/erc20_token_selector.tsx |  2 +-
 packages/instant/src/components/ui/dropdown.tsx          | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index 41b0b44b0..365995905 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="275px" marginTop="10px">
+                <Container overflow="scroll" height="400px" marginTop="10px">
                     {_.map(tokens, token => {
                         if (!this._isTokenQueryMatch(token)) {
                             return null;
diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx
index c69e89c0e..bfedc0f5a 100644
--- a/packages/instant/src/components/ui/dropdown.tsx
+++ b/packages/instant/src/components/ui/dropdown.tsx
@@ -28,12 +28,12 @@ export interface DropdownState {
 export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     public static defaultProps = {
         items: [
-            // {
-            //     text: 'Item 1',
-            // },
-            // {
-            //     text: 'Item 2',
-            // },
+            {
+                text: 'Item 1',
+            },
+            {
+                text: 'Item 2',
+            },
         ],
     };
     public state: DropdownState = {
-- 
cgit 


From f7642c06f0d5662c955ec36e1549d63445a74056 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 7 Nov 2018 21:05:07 -0800
Subject: chore: remove unused props

---
 packages/instant/src/components/ui/dropdown.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx
index bfedc0f5a..ae4731b6f 100644
--- a/packages/instant/src/components/ui/dropdown.tsx
+++ b/packages/instant/src/components/ui/dropdown.tsx
@@ -65,11 +65,11 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
                         borderBottom="1px solid"
                     >
                         <Flex justify="space-between">
-                            <Text fontSize="16px" lineHeight="19px" fontColor={ColorOption.darkGrey}>
+                            <Text fontSize="16px" fontColor={ColorOption.darkGrey}>
                                 {value}
                             </Text>
                             <Container>
-                                <Text fontSize="16px" lineHeight="17px" fontColor={ColorOption.lightGrey}>
+                                <Text fontSize="16px" fontColor={ColorOption.lightGrey}>
                                     {label}
                                 </Text>
                                 {hasItems && (
-- 
cgit 


From ecb92a44bc5a4b433f2a673fc77199c7b8a6dc18 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
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')

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)}`;
+    },
 };
-- 
cgit 


From 1151371e57643662b14c0c940ec558e74a6d1120 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 7 Nov 2018 21:54:26 -0800
Subject: feat: add MetaMask sign, refactor Circle

---
 .../src/components/erc20_token_selector.tsx        |  2 +-
 packages/instant/src/components/payment_method.tsx | 30 +++++++++++++++-------
 packages/instant/src/components/ui/circle.tsx      | 19 ++++++++------
 packages/instant/src/style/theme.ts                |  4 +++
 4 files changed, 37 insertions(+), 18 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index c10b1492e..d3043438e 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -85,7 +85,7 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
                 <Container marginLeft="5px">
                     <Flex justify="flex-start">
                         <Container marginRight="10px">
-                            <Circle diameter={30} fillColor={token.metaData.primaryColor}>
+                            <Circle diameter={30} rawColor={token.metaData.primaryColor}>
                                 <Flex height="100%">
                                     <Text fontColor={ColorOption.white} fontSize="8px">
                                         {displaySymbol}
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 4d3daff62..70ad1f96e 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -4,7 +4,9 @@ import * as React from 'react';
 import { ColorOption } from '../style/theme';
 
 import { PaymentMethodDropdown } from './payment_method_dropdown';
+import { Circle } from './ui/circle';
 import { Container } from './ui/container';
+import { Flex } from './ui/flex';
 import { Text } from './ui/text';
 
 export interface PaymentMethodProps {}
@@ -14,15 +16,25 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
         return (
             <Container padding="20px" width="100%">
                 <Container marginBottom="10px">
-                    <Text
-                        letterSpacing="1px"
-                        fontColor={ColorOption.primaryColor}
-                        fontWeight={600}
-                        textTransform="uppercase"
-                        fontSize="14px"
-                    >
-                        Payment Method
-                    </Text>
+                    <Flex justify="space-between">
+                        <Text
+                            letterSpacing="1px"
+                            fontColor={ColorOption.primaryColor}
+                            fontWeight={600}
+                            textTransform="uppercase"
+                            fontSize="14px"
+                        >
+                            Payment Method
+                        </Text>
+                        <Flex>
+                            <Circle color={ColorOption.green} diameter={8} />
+                            <Container marginLeft="3px">
+                                <Text fontColor={ColorOption.darkGrey} fontSize="12px">
+                                    MetaMask
+                                </Text>
+                            </Container>
+                        </Flex>
+                    </Flex>
                 </Container>
                 <PaymentMethodDropdown />
             </Container>
diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx
index eec2777d2..cb121992f 100644
--- a/packages/instant/src/components/ui/circle.tsx
+++ b/packages/instant/src/components/ui/circle.tsx
@@ -1,22 +1,25 @@
-import { styled } from '../../style/theme';
+import { ColorOption, styled, Theme, withTheme } from '../../style/theme';
 
 export interface CircleProps {
     diameter: number;
-    fillColor?: string;
+    rawColor?: string;
+    color?: ColorOption;
+    theme: Theme;
 }
 
-export const Circle =
+export const Circle = withTheme(
     styled.div <
-    CircleProps >
-    `
+        CircleProps >
+        `
     width: ${props => props.diameter}px;
     height: ${props => props.diameter}px;
-    background-color: ${props => props.fillColor};
+    background-color: ${props => (props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white])};
     border-radius: 50%;
-`;
+`,
+);
 
 Circle.displayName = 'Circle';
 
 Circle.defaultProps = {
-    fillColor: 'white',
+    color: ColorOption.white,
 };
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 7917164a1..0bd8ce4e0 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -15,6 +15,8 @@ export enum ColorOption {
     white = 'white',
     lightOrange = 'lightOrange',
     darkOrange = 'darkOrange',
+    green = 'green',
+    red = 'red',
 }
 
 export const theme: Theme = {
@@ -28,6 +30,8 @@ export const theme: Theme = {
     white: 'white',
     lightOrange: '#F9F2ED',
     darkOrange: '#F2994C',
+    green: '#3CB34F',
+    red: '#D00000',
 };
 
 export const transparentWhite = 'rgba(255,255,255,0.3)';
-- 
cgit 


From d7742029c7ff991e60352cddeb52c2cdc1589a57 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 7 Nov 2018 22:08:40 -0800
Subject: feat: implement copy-to-clipboard

---
 packages/instant/package.json                            |  1 +
 .../instant/src/components/payment_method_dropdown.tsx   | 16 ++++++++++++++++
 packages/instant/src/util/etherscan.ts                   |  7 +++++++
 3 files changed, 24 insertions(+)

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index f90990649..2af4a799c 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -53,6 +53,7 @@
         "@0x/typescript-typings": "^3.0.3",
         "@0x/utils": "^2.0.3",
         "@0x/web3-wrapper": "^3.1.0",
+        "copy-to-clipboard": "^3.0.8",
         "ethereum-types": "^1.1.1",
         "lodash": "^4.17.10",
         "polished": "^2.2.0",
diff --git a/packages/instant/src/components/payment_method_dropdown.tsx b/packages/instant/src/components/payment_method_dropdown.tsx
index 09d21e384..d1586f2c7 100644
--- a/packages/instant/src/components/payment_method_dropdown.tsx
+++ b/packages/instant/src/components/payment_method_dropdown.tsx
@@ -1,6 +1,9 @@
 import { BigNumber } from '@0x/utils';
+import copy from 'copy-to-clipboard';
 import * as React from 'react';
 
+import { Network } from '../types';
+import { etherscanUtil } from '../util/etherscan';
 import { format } from '../util/format';
 
 import { Dropdown, DropdownItemConfig } from './ui/dropdown';
@@ -8,12 +11,14 @@ import { Dropdown, DropdownItemConfig } from './ui/dropdown';
 export interface PaymentMethodDropdownProps {
     selectedEthAddress: string;
     addressEthBaseAmount: BigNumber;
+    network: Network;
 }
 
 export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdownProps> {
     public static defaultProps = {
         selectedEthAddress: '0xa1b2c3d4e5f6g7h8j9k10',
         addressEthBaseAmount: new BigNumber(10500000000000000000),
+        network: Network.Mainnet,
     };
     public render(): React.ReactNode {
         const { selectedEthAddress, addressEthBaseAmount } = this.props;
@@ -24,10 +29,21 @@ export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdown
     private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => {
         const viewOnEtherscan = {
             text: 'View on Etherscan',
+            onClick: this._handleEtherscanClick,
         };
         const copyAddressToClipboard = {
             text: 'Copy address to clipboard',
+            onClick: this._handleCopyToClipboardClick,
         };
         return [viewOnEtherscan, copyAddressToClipboard];
     };
+    private readonly _handleEtherscanClick = (): void => {
+        const { selectedEthAddress, network } = this.props;
+        const etherscanUrl = etherscanUtil.getEtherScanEthAddressIfExists(selectedEthAddress, network);
+        window.open(etherscanUrl, '_blank');
+    };
+    private readonly _handleCopyToClipboardClick = (): void => {
+        const { selectedEthAddress } = this.props;
+        copy(selectedEthAddress);
+    };
 }
diff --git a/packages/instant/src/util/etherscan.ts b/packages/instant/src/util/etherscan.ts
index cfc2578a3..4d62c4d9f 100644
--- a/packages/instant/src/util/etherscan.ts
+++ b/packages/instant/src/util/etherscan.ts
@@ -21,4 +21,11 @@ export const etherscanUtil = {
         }
         return `https://${prefix}etherscan.io/tx/${txHash}`;
     },
+    getEtherScanEthAddressIfExists: (ethAddress: string, networkId: number) => {
+        const prefix = etherscanPrefix(networkId);
+        if (_.isUndefined(prefix)) {
+            return;
+        }
+        return `https://${prefix}etherscan.io/address/${ethAddress}`;
+    },
 };
-- 
cgit 


From 8b0928617346ae5066d2ea8185af625de5b5f577 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 7 Nov 2018 22:17:27 -0800
Subject: fix: restore button to previous state

---
 packages/instant/src/components/ui/button.tsx | 62 +++++++++++----------------
 1 file changed, 24 insertions(+), 38 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index 61a0f23a8..5274d835b 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -6,8 +6,6 @@ import { ColorOption, styled } from '../../style/theme';
 export interface ButtonProps {
     backgroundColor?: ColorOption;
     borderColor?: ColorOption;
-    fontColor?: ColorOption;
-    fontSize?: string;
     width?: string;
     padding?: string;
     type?: string;
@@ -26,50 +24,38 @@ const darkenOnHoverAmount = 0.1;
 const darkenOnActiveAmount = 0.2;
 const saturateOnFocusAmount = 0.2;
 export const Button = styled(PlainButton)`
-    && {
-        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'])};
-        }
+    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'])};
     }
 `;
 
 Button.defaultProps = {
     backgroundColor: ColorOption.primaryColor,
     borderColor: ColorOption.primaryColor,
-    fontColor: ColorOption.white,
     width: 'auto',
     isDisabled: false,
-    padding: '.6em 1.2em',
-    fontSize: '15px',
+    padding: '1em 2.2em',
 };
 
 Button.displayName = 'Button';
-- 
cgit 


From 88eb642aa543673bde52c1d14fc1f3e92d8b2137 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 7 Nov 2018 22:21:51 -0800
Subject: chore: cleanup

---
 packages/instant/src/components/ui/dropdown.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx
index d51060c05..dc413d690 100644
--- a/packages/instant/src/components/ui/dropdown.tsx
+++ b/packages/instant/src/components/ui/dropdown.tsx
@@ -55,7 +55,6 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
                         border="1px solid"
                         borderColor={ColorOption.feintGrey}
                         padding="0.8em"
-                        borderBottom="1px solid"
                     >
                         <Flex justify="space-between">
                             <Text fontSize="16px" fontColor={ColorOption.darkGrey}>
@@ -127,6 +126,8 @@ export const DropdownItem: React.StatelessComponent<DropdownItemProps> = ({ text
         width="100%"
         borderColor={ColorOption.feintGrey}
     >
-        <Text>{text}</Text>
+        <Text fontSize="14px" fontColor={ColorOption.darkGrey}>
+            {text}
+        </Text>
     </Container>
 );
-- 
cgit 


From 316f3e2e766c325bc56260ceb00c1e7a7175adf1 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 8 Nov 2018 15:04:03 -0800
Subject: fix: token selector scrolling container height

---
 packages/instant/src/components/erc20_token_selector.tsx | 4 ++--
 packages/instant/src/components/sliding_panel.tsx        | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index d3224b036..3503ff31a 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -28,14 +28,14 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps>
     public render(): React.ReactNode {
         const { tokens, onTokenSelect } = this.props;
         return (
-            <Container>
+            <Container height="100%">
                 <SearchInput
                     placeholder="Search tokens..."
                     width="100%"
                     value={this.state.searchQuery}
                     onChange={this._handleSearchInputChange}
                 />
-                <Container overflow="scroll" height={{ default: '390px', sm: '75vh' }} marginTop="10px">
+                <Container overflow="scroll" height="calc(100% - 80px)" marginTop="10px">
                     {_.map(tokens, token => {
                         if (!this._isTokenQueryMatch(token)) {
                             return null;
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 7ef28e09c..5e8a73663 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -30,7 +30,9 @@ export const Panel: React.StatelessComponent<PanelProps> = ({ title, children, o
                 <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
             </Container>
         </Flex>
-        <Container marginTop="10px">{children}</Container>
+        <Container marginTop="10px" height="100%">
+            {children}
+        </Container>
     </Container>
 );
 
-- 
cgit 


From 27ea271842c55cd09546c6bbf5b1c8d635666526 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 8 Nov 2018 15:10:32 -0800
Subject: fix: remove all:initial rule from all div based ui compoennts

---
 packages/instant/src/components/ui/container.tsx | 1 -
 packages/instant/src/components/ui/flex.tsx      | 1 -
 packages/instant/src/components/ui/text.tsx      | 1 -
 3 files changed, 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index bffa1d7d4..88b51230a 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -42,7 +42,6 @@ export const Container =
     ContainerProps >
     `
     && {
-        all: initial;
         box-sizing: border-box;
         ${props => cssRuleIfExists(props, 'flex-grow')}
         ${props => cssRuleIfExists(props, 'position')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 5b00138b8..274c46b9e 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -19,7 +19,6 @@ export const Flex =
     FlexProps >
     `
     && {
-        all: initial;
         display: ${props => (props.inline ? 'inline-flex' : 'flex')};
         flex-direction: ${props => props.direction};
         flex-wrap: ${props => props.flexWrap};
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index c6a76ff18..4fe429d25 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -28,7 +28,6 @@ export const Text =
     TextProps >
     `
     && {
-        all: initial;
         font-family: 'Inter UI', sans-serif;
         font-style: ${props => props.fontStyle};
         font-weight: ${props => props.fontWeight};
-- 
cgit 


From 15a12cfa2288a728fe2947741447b25cb2e0f5b6 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 8 Nov 2018 15:29:18 -0800
Subject: fix: various style issues

---
 packages/instant/src/components/css_reset.tsx  |  1 -
 packages/instant/src/components/ui/icon.tsx    | 22 ++++++++++++----------
 packages/instant/src/components/ui/overlay.tsx | 16 +++++++++-------
 3 files changed, 21 insertions(+), 18 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/css_reset.tsx b/packages/instant/src/components/css_reset.tsx
index a1dd2e05c..0bef85389 100644
--- a/packages/instant/src/components/css_reset.tsx
+++ b/packages/instant/src/components/css_reset.tsx
@@ -27,7 +27,6 @@ export const CSSReset = createGlobalStyle`
             text-align: left;
             text-decoration: none;
             vertical-align: baseline;
-            z-index: 1;
         }
     }
 `;
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 707aee24f..a88fa87dd 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -101,16 +101,18 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => {
 };
 
 export const Icon = withTheme(styled(PlainIcon)`
-    display: inline-block;
-    ${props => (!_.isUndefined(props.onClick) ? 'cursor: pointer' : '')};
-    transition: opacity 0.5s ease;
-    padding: ${props => props.padding};
-    opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)};
-    &:hover {
-        opacity: 1;
-    }
-    &:active {
-        opacity: 1;
+    && {
+        display: inline-block;
+        ${props => (!_.isUndefined(props.onClick) ? 'cursor: pointer' : '')};
+        transition: opacity 0.5s ease;
+        padding: ${props => props.padding};
+        opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)};
+        &:hover {
+            opacity: 1;
+        }
+        &:active {
+            opacity: 1;
+        }
     }
 `);
 
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index 7c941d294..c5f55f9c0 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -12,13 +12,15 @@ export const Overlay =
     styled.div <
     OverlayProps >
     `
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: ${props => props.zIndex}
-    background-color: ${props => props.backgroundColor};
+    && {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: ${props => props.zIndex}
+        background-color: ${props => props.backgroundColor};
+    }
 `;
 
 Overlay.defaultProps = {
-- 
cgit 


From 3dad385533476f02031fdb1a29f71fa44a375c4a Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 8 Nov 2018 15:33:32 -0800
Subject: feat: add boxShadow on dropdown hover

---
 packages/instant/src/components/ui/container.tsx | 2 ++
 packages/instant/src/components/ui/dropdown.tsx  | 1 +
 2 files changed, 3 insertions(+)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 88b51230a..172d384b4 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -34,6 +34,7 @@ export interface ContainerProps {
     cursor?: string;
     overflow?: string;
     darkenOnHover?: boolean;
+    boxShadowOnHover?: boolean;
     flexGrow?: string | number;
 }
 
@@ -78,6 +79,7 @@ export const Container =
                           props.backgroundColor ? darken(0.05, props.theme[props.backgroundColor]) : 'none'
                       }`
                     : ''};
+            ${props => (props.boxShadowOnHover ? 'box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)' : '')};
         }
     }
 `;
diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx
index dc413d690..3a23f456d 100644
--- a/packages/instant/src/components/ui/dropdown.tsx
+++ b/packages/instant/src/components/ui/dropdown.tsx
@@ -51,6 +51,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
                         cursor={hasItems ? 'pointer' : undefined}
                         onClick={this._handleDropdownClick}
                         hasBoxShadow={isOpen}
+                        boxShadowOnHover={true}
                         borderRadius={borderRadius}
                         border="1px solid"
                         borderColor={ColorOption.feintGrey}
-- 
cgit 


From b074fe2de57b07ffd9d1da373cfb0828ff8a9d5b Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 8 Nov 2018 15:34:53 -0800
Subject: chore: convert payment method to stateless component

---
 packages/instant/src/components/payment_method.tsx | 54 ++++++++++------------
 1 file changed, 25 insertions(+), 29 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 70ad1f96e..491a0bd45 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -11,33 +11,29 @@ import { Text } from './ui/text';
 
 export interface PaymentMethodProps {}
 
-export class PaymentMethod extends React.Component<PaymentMethodProps> {
-    public render(): React.ReactNode {
-        return (
-            <Container padding="20px" width="100%">
-                <Container marginBottom="10px">
-                    <Flex justify="space-between">
-                        <Text
-                            letterSpacing="1px"
-                            fontColor={ColorOption.primaryColor}
-                            fontWeight={600}
-                            textTransform="uppercase"
-                            fontSize="14px"
-                        >
-                            Payment Method
+export const PaymentMethod: React.StatelessComponent<PaymentMethodProps> = () => (
+    <Container padding="20px" width="100%">
+        <Container marginBottom="10px">
+            <Flex justify="space-between">
+                <Text
+                    letterSpacing="1px"
+                    fontColor={ColorOption.primaryColor}
+                    fontWeight={600}
+                    textTransform="uppercase"
+                    fontSize="14px"
+                >
+                    Payment Method
+                </Text>
+                <Flex>
+                    <Circle color={ColorOption.green} diameter={8} />
+                    <Container marginLeft="3px">
+                        <Text fontColor={ColorOption.darkGrey} fontSize="12px">
+                            MetaMask
                         </Text>
-                        <Flex>
-                            <Circle color={ColorOption.green} diameter={8} />
-                            <Container marginLeft="3px">
-                                <Text fontColor={ColorOption.darkGrey} fontSize="12px">
-                                    MetaMask
-                                </Text>
-                            </Container>
-                        </Flex>
-                    </Flex>
-                </Container>
-                <PaymentMethodDropdown />
-            </Container>
-        );
-    }
-}
+                    </Container>
+                </Flex>
+            </Flex>
+        </Container>
+        <PaymentMethodDropdown />
+    </Container>
+);
-- 
cgit 


From 6a84877f9aab63db1c493d1a3d73d06e65735a78 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 8 Nov 2018 15:39:30 -0800
Subject: fix: remove default props, fix lint problems

---
 packages/instant/src/components/payment_method.tsx            | 8 +++++++-
 packages/instant/src/components/payment_method_dropdown.tsx   | 5 -----
 packages/instant/src/components/zero_ex_instant_container.tsx | 2 --
 3 files changed, 7 insertions(+), 8 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 491a0bd45..a96c6297c 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -1,7 +1,9 @@
+import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
+import { Network } from '../types';
 
 import { PaymentMethodDropdown } from './payment_method_dropdown';
 import { Circle } from './ui/circle';
@@ -34,6 +36,10 @@ export const PaymentMethod: React.StatelessComponent<PaymentMethodProps> = () =>
                 </Flex>
             </Flex>
         </Container>
-        <PaymentMethodDropdown />
+        <PaymentMethodDropdown
+            selectedEthAddress="0xa1b2c3d4e5f6g7h8j9k10"
+            addressEthBaseAmount={new BigNumber(10500000000000000000)}
+            network={Network.Mainnet}
+        />
     </Container>
 );
diff --git a/packages/instant/src/components/payment_method_dropdown.tsx b/packages/instant/src/components/payment_method_dropdown.tsx
index d1586f2c7..6f3634301 100644
--- a/packages/instant/src/components/payment_method_dropdown.tsx
+++ b/packages/instant/src/components/payment_method_dropdown.tsx
@@ -15,11 +15,6 @@ export interface PaymentMethodDropdownProps {
 }
 
 export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdownProps> {
-    public static defaultProps = {
-        selectedEthAddress: '0xa1b2c3d4e5f6g7h8j9k10',
-        addressEthBaseAmount: new BigNumber(10500000000000000000),
-        network: Network.Mainnet,
-    };
     public render(): React.ReactNode {
         const { selectedEthAddress, addressEthBaseAmount } = this.props;
         const value = format.ethAddress(selectedEthAddress);
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 575093c46..2d3a1f4a8 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -11,7 +11,6 @@ import { zIndex } from '../style/z_index';
 
 import { SlideAnimationState } from './animations/slide_animation';
 import { CSSReset } from './css_reset';
-import { PaymentMethod } from './payment_method';
 import { SlidingPanel } from './sliding_panel';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
@@ -49,7 +48,6 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                         <Flex direction="column" justify="flex-start" height="100%">
                             <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
                             <SelectedAssetBuyOrderProgress />
-                            <PaymentMethod />
                             <LatestBuyQuoteOrderDetails />
                             <Container padding="20px" width="100%">
                                 <SelectedAssetBuyOrderStateButtons />
-- 
cgit 


From 5d74421e438d0b56f31344f5fc4d4abbcb190722 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 8 Nov 2018 15:53:21 -0800
Subject: fix: broken features because of merge

---
 packages/instant/src/components/animations/position_animation.tsx | 2 ++
 packages/instant/src/components/animations/slide_animation.tsx    | 3 ++-
 packages/instant/src/components/sliding_panel.tsx                 | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index 576d29c07..8b3b294b7 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -77,6 +77,7 @@ const generatePositionAnimationCss = (positionSettings: PositionAnimationSetting
 export interface PositionAnimationProps {
     positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
     zIndex?: OptionallyScreenSpecific<number>;
+    height?: string;
 }
 
 const defaultAnimation = (positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>) => {
@@ -104,5 +105,6 @@ export const PositionAnimation =
         ${props => animationForSize(props.positionSettings, 'sm', media.small)}
         ${props => animationForSize(props.positionSettings, 'md', media.medium)}
         ${props => animationForSize(props.positionSettings, 'lg', media.large)}
+        ${props => (props.height ? `height: ${props.height};` : '')}
     }
 `;
diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index 122229dee..9adb1c674 100644
--- a/packages/instant/src/components/animations/slide_animation.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -10,6 +10,7 @@ export interface SlideAnimationProps {
     slideInSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
     slideOutSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
     zIndex?: OptionallyScreenSpecific<number>;
+    height?: string;
 }
 
 export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
@@ -18,7 +19,7 @@ export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = pro
     }
     const positionSettings = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings;
     return (
-        <PositionAnimation positionSettings={positionSettings} zIndex={props.zIndex}>
+        <PositionAnimation height={props.height} positionSettings={positionSettings} zIndex={props.zIndex}>
             {props.children}
         </PositionAnimation>
     );
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 99db58e68..9d16f9560 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -69,6 +69,7 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
             slideInSettings={slideUpSettings}
             slideOutSettings={slideDownSettings}
             animationState={animationState}
+            height="100%"
         >
             <Panel {...rest} />
         </SlideAnimation>
-- 
cgit 


From f44c5b2292c8688931127e3cb582edd36edfed75 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 8 Nov 2018 16:08:20 -0800
Subject: chore: PR feedback

---
 .../instant/src/components/payment_method_dropdown.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/payment_method_dropdown.tsx b/packages/instant/src/components/payment_method_dropdown.tsx
index 6f3634301..bdce2a49d 100644
--- a/packages/instant/src/components/payment_method_dropdown.tsx
+++ b/packages/instant/src/components/payment_method_dropdown.tsx
@@ -9,16 +9,16 @@ import { format } from '../util/format';
 import { Dropdown, DropdownItemConfig } from './ui/dropdown';
 
 export interface PaymentMethodDropdownProps {
-    selectedEthAddress: string;
-    addressEthBaseAmount: BigNumber;
+    accountAddress: string;
+    accountEthBalanceInWei?: BigNumber;
     network: Network;
 }
 
 export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdownProps> {
     public render(): React.ReactNode {
-        const { selectedEthAddress, addressEthBaseAmount } = this.props;
-        const value = format.ethAddress(selectedEthAddress);
-        const label = format.ethBaseAmount(addressEthBaseAmount) as string;
+        const { accountAddress, accountEthBalanceInWei } = this.props;
+        const value = format.ethAddress(accountAddress);
+        const label = format.ethBaseAmount(accountEthBalanceInWei, 4, '') as string;
         return <Dropdown value={value} label={label} items={this._getDropdownItemConfigs()} />;
     }
     private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => {
@@ -33,12 +33,12 @@ export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdown
         return [viewOnEtherscan, copyAddressToClipboard];
     };
     private readonly _handleEtherscanClick = (): void => {
-        const { selectedEthAddress, network } = this.props;
-        const etherscanUrl = etherscanUtil.getEtherScanEthAddressIfExists(selectedEthAddress, network);
+        const { accountAddress, network } = this.props;
+        const etherscanUrl = etherscanUtil.getEtherScanEthAddressIfExists(accountAddress, network);
         window.open(etherscanUrl, '_blank');
     };
     private readonly _handleCopyToClipboardClick = (): void => {
-        const { selectedEthAddress } = this.props;
-        copy(selectedEthAddress);
+        const { accountAddress } = this.props;
+        copy(accountAddress);
     };
 }
-- 
cgit 


From cd44470a29c48275e6a2a4bba42734d8f900d387 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 8 Nov 2018 16:15:57 -0800
Subject: fix: wrong prop names used

---
 packages/instant/src/components/payment_method.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index a96c6297c..8c0b47d72 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -37,8 +37,8 @@ export const PaymentMethod: React.StatelessComponent<PaymentMethodProps> = () =>
             </Flex>
         </Container>
         <PaymentMethodDropdown
-            selectedEthAddress="0xa1b2c3d4e5f6g7h8j9k10"
-            addressEthBaseAmount={new BigNumber(10500000000000000000)}
+            accountAddress="0xa1b2c3d4e5f6g7h8j9k10"
+            accountEthBalanceInWei={new BigNumber(10500000000000000000)}
             network={Network.Mainnet}
         />
     </Container>
-- 
cgit