From 1053aed74d2dcb5018a9647f21dd05e2902528fd Mon Sep 17 00:00:00 2001
From: Remco Bloemen <remco@wicked.ventures>
Date: Thu, 16 Aug 2018 12:54:23 -0700
Subject: Set curstom inspect printer in BigNumber

---
 packages/utils/src/configured_bignumber.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

(limited to 'packages')

diff --git a/packages/utils/src/configured_bignumber.ts b/packages/utils/src/configured_bignumber.ts
index 2b22b6938..977042f1e 100644
--- a/packages/utils/src/configured_bignumber.ts
+++ b/packages/utils/src/configured_bignumber.ts
@@ -11,4 +11,15 @@ BigNumber.config({
     DECIMAL_PLACES: 78,
 });
 
+// Set a debug print function for NodeJS
+if (typeof window === 'undefined') { // Check if running in NodeJS
+    const util = require('util');
+
+    // Set a custom util.inspect function
+    (BigNumber.prototype as any)[util.inspect.custom] = function() {
+        // Return the readable string representation
+        return this.toString();
+    };
+}
+
 export { BigNumber };
-- 
cgit v1.2.3


From 71a61a4dc331912cc015347d5cd22691ef9cd51b Mon Sep 17 00:00:00 2001
From: Remco Bloemen <remco@wicked.ventures>
Date: Tue, 21 Aug 2018 14:28:21 -0700
Subject: Use detect-node

---
 packages/utils/src/configured_bignumber.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/utils/src/configured_bignumber.ts b/packages/utils/src/configured_bignumber.ts
index 977042f1e..f97452337 100644
--- a/packages/utils/src/configured_bignumber.ts
+++ b/packages/utils/src/configured_bignumber.ts
@@ -12,7 +12,8 @@ BigNumber.config({
 });
 
 // Set a debug print function for NodeJS
-if (typeof window === 'undefined') { // Check if running in NodeJS
+import isNode = require('detect-node');
+if (!isNode) {
     const util = require('util');
 
     // Set a custom util.inspect function
-- 
cgit v1.2.3


From 9b4f5dfddae9defbd797dbd416868aa381c44b2c Mon Sep 17 00:00:00 2001
From: Remco Bloemen <remco@wicked.ventures>
Date: Tue, 21 Aug 2018 14:32:31 -0700
Subject: Fix tslint issues

---
 packages/utils/src/configured_bignumber.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/utils/src/configured_bignumber.ts b/packages/utils/src/configured_bignumber.ts
index f97452337..a838b1e3b 100644
--- a/packages/utils/src/configured_bignumber.ts
+++ b/packages/utils/src/configured_bignumber.ts
@@ -14,11 +14,12 @@ BigNumber.config({
 // Set a debug print function for NodeJS
 import isNode = require('detect-node');
 if (!isNode) {
-    const util = require('util');
+    import util = require('util');
 
     // Set a custom util.inspect function
-    (BigNumber.prototype as any)[util.inspect.custom] = function() {
+    (BigNumber.prototype as any)[util.inspect.custom] = function(): string {
         // Return the readable string representation
+        // tslint:disable-next-line: no-invalid-this
         return this.toString();
     };
 }
-- 
cgit v1.2.3


From ad0fe2f0799100e305f437c38e657f668d74670b Mon Sep 17 00:00:00 2001
From: Remco Bloemen <remco@wicked.ventures>
Date: Tue, 21 Aug 2018 14:45:14 -0700
Subject: Use const require instead of import

---
 packages/utils/src/configured_bignumber.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/utils/src/configured_bignumber.ts b/packages/utils/src/configured_bignumber.ts
index a838b1e3b..b7de1b1fc 100644
--- a/packages/utils/src/configured_bignumber.ts
+++ b/packages/utils/src/configured_bignumber.ts
@@ -14,7 +14,11 @@ BigNumber.config({
 // Set a debug print function for NodeJS
 import isNode = require('detect-node');
 if (!isNode) {
-    import util = require('util');
+    // Dynamically load a NodeJS specific module.
+    // Typescript requires all imports to be global, so we need to use
+    // `const` here and disable the tslint warning.
+    // tslint:disable-next-line: no-var-requires
+    const util = require('util');
 
     // Set a custom util.inspect function
     (BigNumber.prototype as any)[util.inspect.custom] = function(): string {
-- 
cgit v1.2.3


From e40a4addc9998d637896d6f7145bef8f77a512ca Mon Sep 17 00:00:00 2001
From: Remco Bloemen <remco@wicked.ventures>
Date: Tue, 21 Aug 2018 15:00:13 -0700
Subject: Add upstream issue

---
 packages/utils/src/configured_bignumber.ts | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages')

diff --git a/packages/utils/src/configured_bignumber.ts b/packages/utils/src/configured_bignumber.ts
index b7de1b1fc..56e925c41 100644
--- a/packages/utils/src/configured_bignumber.ts
+++ b/packages/utils/src/configured_bignumber.ts
@@ -12,6 +12,7 @@ BigNumber.config({
 });
 
 // Set a debug print function for NodeJS
+// Upstream issue: https://github.com/MikeMcl/bignumber.js/issues/188
 import isNode = require('detect-node');
 if (!isNode) {
     // Dynamically load a NodeJS specific module.
-- 
cgit v1.2.3


From 43ad2fe23bec01b077f5c55a23736fdcb24781a3 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 19 Oct 2018 13:34:42 -0700
Subject: feat: upgrade to styled-components v4

---
 packages/instant/package.json                                  |  5 +++--
 .../instant/src/components/animations/slide_animations.tsx     | 10 +++++++---
 packages/instant/src/style/fonts.ts                            | 10 +++++-----
 packages/instant/src/style/theme.ts                            |  4 ++--
 4 files changed, 17 insertions(+), 12 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 1a6e9d2e9..be85b5062 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -58,12 +58,12 @@
         "react-redux": "^5.0.7",
         "redux": "^4.0.0",
         "redux-devtools-extension": "^2.13.5",
-        "styled-components": "^3.4.9",
+        "styled-components": "^4.0.2",
         "ts-optchain": "^0.1.1"
     },
     "devDependencies": {
-        "@static/discharge": "^1.2.2",
         "@0x/tslint-config": "^1.0.9",
+        "@static/discharge": "^1.2.2",
         "@types/enzyme": "^3.1.14",
         "@types/enzyme-adapter-react-16": "^1.0.3",
         "@types/jest": "^23.3.5",
@@ -73,6 +73,7 @@
         "@types/react-dom": "^16.0.8",
         "@types/react-redux": "^6.0.9",
         "@types/redux": "^3.6.0",
+        "@types/styled-components": "^4.0.1",
         "awesome-typescript-loader": "^5.2.1",
         "enzyme": "^3.6.0",
         "enzyme-adapter-react-16": "^1.5.0",
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 1f10a2ed6..84280372b 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { Keyframes } from 'styled-components';
 
-import { keyframes, styled } from '../../style/theme';
+import { css, keyframes, styled } from '../../style/theme';
 
 const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
     from {
@@ -15,7 +16,7 @@ const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
 `;
 
 export interface SlideAnimationProps {
-    keyframes: string;
+    keyframes: Keyframes;
     animationType: string;
     animationDirection?: string;
 }
@@ -24,7 +25,10 @@ export const SlideAnimation =
     styled.div <
     SlideAnimationProps >
     `
-    animation-name: ${props => props.keyframes};
+    animation-name: ${props =>
+        css`
+            ${props.keyframes};
+        `};
     animation-duration: 0.3s;
     animation-timing-function: ${props => props.animationType};
     animation-delay: 0s;
diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts
index 975a30a61..f305fd612 100644
--- a/packages/instant/src/style/fonts.ts
+++ b/packages/instant/src/style/fonts.ts
@@ -1,10 +1,10 @@
-import { injectGlobal } from './theme';
-
 export const fonts = {
     include: () => {
         // Inject the inter-ui font into the page
-        return injectGlobal`
-            @import url('https://rsms.me/inter/inter-ui.css');
-        `;
+        const head = document.head || document.getElementsByTagName('head')[0];
+        const style = document.createElement('style');
+        style.type = 'text/css';
+        style.appendChild(document.createTextNode(`@import url('https://rsms.me/inter/inter-ui.css')`));
+        head.appendChild(style);
     },
 };
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index d26c816c1..be527a12c 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,6 +1,6 @@
 import * as styledComponents from 'styled-components';
 
-const { default: styled, css, injectGlobal, keyframes, ThemeProvider } = styledComponents;
+const { default: styled, css, keyframes, ThemeProvider } = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
@@ -28,4 +28,4 @@ export const theme: Theme = {
     darkOrange: '#F2994C',
 };
 
-export { styled, css, injectGlobal, keyframes, ThemeProvider };
+export { styled, css, keyframes, ThemeProvider };
-- 
cgit v1.2.3


From d5105b5c9f74a4f52e4952b845a37692bb824fd4 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 19 Oct 2018 13:45:12 -0700
Subject: feat: user better syntax for defining ui components

---
 packages/instant/src/components/ui/container.tsx | 6 +-----
 packages/instant/src/components/ui/flex.tsx      | 2 +-
 packages/instant/src/components/ui/input.tsx     | 6 +-----
 packages/instant/src/components/ui/text.tsx      | 8 +-------
 4 files changed, 4 insertions(+), 18 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 02b16e39f..b7e17d807 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -29,11 +29,7 @@ export interface ContainerProps {
     zIndex?: number;
 }
 
-const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => (
-    <div className={className}>{children}</div>
-);
-
-export const Container = styled(PlainContainer)`
+export const Container = styled<ContainerProps, 'div'>('div')`
     box-sizing: border-box;
     ${props => cssRuleIfExists(props, 'display')}
     ${props => cssRuleIfExists(props, 'position')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 327e91926..f2013f60f 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -17,7 +17,7 @@ const PlainFlex: React.StatelessComponent<FlexProps> = ({ children, className })
     <div className={className}>{children}</div>
 );
 
-export const Flex = styled(PlainFlex)`
+export const Flex = styled<FlexProps, 'div'>('div')`
     display: flex;
     flex-direction: ${props => props.direction};
     flex-wrap: ${props => props.flexWrap};
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index f8c6b6ef6..9db7d1c4c 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -12,11 +12,7 @@ export interface InputProps {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => (
-    <input className={className} value={value} onChange={onChange} placeholder={placeholder} />
-);
-
-export const Input = styled(PlainInput)`
+export const Input = styled<InputProps, 'input'>('input')`
     font-size: ${props => props.fontSize};
     width: ${props => props.width};
     padding: 0.1em 0em;
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index 9fb8ea26f..d23b0034d 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -23,14 +23,8 @@ export interface TextProps {
     display?: string;
 }
 
-const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick }) => (
-    <div className={className} onClick={onClick}>
-        {children}
-    </div>
-);
-
 const darkenOnHoverAmount = 0.3;
-export const Text = styled(PlainText)`
+export const Text = styled<TextProps, 'div'>('div')`
     font-family: ${props => props.fontFamily};
     font-style: ${props => props.fontStyle};
     font-weight: ${props => props.fontWeight};
-- 
cgit v1.2.3


From f06541ec94c2f3b8d1924da376178a5fc3f442e6 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 19 Oct 2018 13:46:31 -0700
Subject: fix: animation component typing

---
 packages/instant/src/components/animations/slide_animations.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 84280372b..7c8666861 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -21,10 +21,7 @@ export interface SlideAnimationProps {
     animationDirection?: string;
 }
 
-export const SlideAnimation =
-    styled.div <
-    SlideAnimationProps >
-    `
+export const SlideAnimation = styled<SlideAnimationProps, 'div'>('div')`
     animation-name: ${props =>
         css`
             ${props.keyframes};
-- 
cgit v1.2.3


From 6510454337dd5add86522c0eb5621a3f55ac062d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 19 Oct 2018 14:58:12 -0700
Subject: feat: add scaling input component

---
 packages/instant/src/components/amount_input.tsx  | 10 +--
 packages/instant/src/components/scaling_input.tsx | 82 +++++++++++++++++++++++
 2 files changed, 88 insertions(+), 4 deletions(-)
 create mode 100644 packages/instant/src/components/scaling_input.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index c89fb05ad..f6f562be8 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -5,7 +5,8 @@ import * as React from 'react';
 import { ColorOption } from '../style/theme';
 import { util } from '../util/util';
 
-import { Container, Input } from './ui';
+import { ScalingInput } from './scaling_input';
+import { Container, Text } from './ui';
 
 export interface AmountInputProps {
     fontColor?: ColorOption;
@@ -22,13 +23,14 @@ export class AmountInput extends React.Component<AmountInputProps> {
         const { fontColor, fontSize, value } = this.props;
         return (
             <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
-                <Input
+                <ScalingInput
+                    startWidthCh={3.5}
+                    endWidthCh={6}
+                    startFontSizePx={45}
                     fontColor={fontColor}
-                    fontSize={fontSize}
                     onChange={this._handleChange}
                     value={!_.isUndefined(value) ? value.toString() : ''}
                     placeholder="0.00"
-                    width="2.2em"
                 />
             </Container>
         );
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
new file mode 100644
index 000000000..ea0a925d2
--- /dev/null
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -0,0 +1,82 @@
+import { BigNumber } from '@0x/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { ColorOption } from '../style/theme';
+import { util } from '../util/util';
+
+import { Container, Input } from './ui';
+
+export enum ScalingInputPhase {
+    Start,
+    Scaling,
+    End,
+}
+
+export interface ScalingInputProps {
+    startWidthCh: number;
+    endWidthCh: number;
+    startFontSizePx: number;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    fontColor?: ColorOption;
+    placeholder?: string;
+}
+// Magic value obtained via trial-and-error
+const scalingRateToMaintainSameWidth = 0.1;
+export class ScalingInput extends React.Component<ScalingInputProps> {
+    public static defaultProps = {
+        onChange: util.boundNoop,
+    };
+    public render(): React.ReactNode {
+        const { fontColor, onChange, placeholder, value } = this.props;
+        const phase = this._getPhase();
+        return (
+            <Input
+                fontColor={fontColor}
+                onChange={onChange}
+                value={value}
+                placeholder={placeholder}
+                fontSize={this._calculateFontSize(phase)}
+                width={this._calculateWidth(phase)}
+            />
+        );
+    }
+    private readonly _calculateFontSize = (phase: ScalingInputPhase): string => {
+        const { value, endWidthCh, startFontSizePx } = this.props;
+        if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
+            return `${startFontSizePx}px`;
+        }
+        const charactersOverMax = value.length - endWidthCh;
+        const pixelsToReduceFontSizeBy = charactersOverMax * 2;
+        const newFontSizePx = startFontSizePx - pixelsToReduceFontSizeBy;
+        return `${newFontSizePx}px`;
+    };
+    private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
+        const { value, startWidthCh, endWidthCh } = this.props;
+        if (_.isUndefined(value)) {
+            return `${startWidthCh}ch`;
+        }
+        switch (phase) {
+            case ScalingInputPhase.Start:
+                return `${startWidthCh}ch`;
+            case ScalingInputPhase.Scaling:
+                return `${value.length}ch`;
+            case ScalingInputPhase.End:
+                return `${endWidthCh}ch`;
+            default:
+                return `${startWidthCh}ch`;
+        }
+    };
+    private readonly _getPhase = (): ScalingInputPhase => {
+        const { value, startWidthCh, endWidthCh } = this.props;
+        if (_.isUndefined(value) || value.length <= this.props.startWidthCh) {
+            return ScalingInputPhase.Start;
+        }
+        if (value.length > startWidthCh && value.length <= endWidthCh) {
+            return ScalingInputPhase.Scaling;
+        }
+        return ScalingInputPhase.End;
+    };
+}
-- 
cgit v1.2.3


From 77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 22 Oct 2018 10:50:25 -0700
Subject: feat: have basic scaling amount input working

---
 packages/instant/src/components/amount_input.tsx   |  51 -----------
 .../instant/src/components/asset_amount_input.tsx  |  41 +++++++--
 .../instant/src/components/instant_heading.tsx     |   2 +-
 .../src/components/scaling_amount_input.tsx        |  52 +++++++++++
 packages/instant/src/components/scaling_input.tsx  | 101 +++++++++++++++------
 .../src/containers/selected_asset_amount_input.ts  |   2 +-
 6 files changed, 164 insertions(+), 85 deletions(-)
 delete mode 100644 packages/instant/src/components/amount_input.tsx
 create mode 100644 packages/instant/src/components/scaling_amount_input.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
deleted file mode 100644
index f6f562be8..000000000
--- a/packages/instant/src/components/amount_input.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { BigNumber } from '@0x/utils';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { ColorOption } from '../style/theme';
-import { util } from '../util/util';
-
-import { ScalingInput } from './scaling_input';
-import { Container, Text } from './ui';
-
-export interface AmountInputProps {
-    fontColor?: ColorOption;
-    fontSize?: string;
-    value?: BigNumber;
-    onChange: (value?: BigNumber) => void;
-}
-
-export class AmountInput extends React.Component<AmountInputProps> {
-    public static defaultProps = {
-        onChange: util.boundNoop,
-    };
-    public render(): React.ReactNode {
-        const { fontColor, fontSize, value } = this.props;
-        return (
-            <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
-                <ScalingInput
-                    startWidthCh={3.5}
-                    endWidthCh={6}
-                    startFontSizePx={45}
-                    fontColor={fontColor}
-                    onChange={this._handleChange}
-                    value={!_.isUndefined(value) ? value.toString() : ''}
-                    placeholder="0.00"
-                />
-            </Container>
-        );
-    }
-    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        const value = event.target.value;
-        let bigNumberValue;
-        if (!_.isEmpty(value)) {
-            try {
-                bigNumberValue = new BigNumber(event.target.value);
-            } catch {
-                // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
-                return;
-            }
-        }
-        this.props.onChange(bigNumberValue);
-    };
-}
diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index c03ef1cf3..0b22c889c 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -7,33 +7,62 @@ import { ERC20Asset } from '../types';
 import { assetUtils } from '../util/asset';
 import { util } from '../util/util';
 
-import { AmountInput, AmountInputProps } from './amount_input';
+import { ScalingAmountInput } from './scaling_amount_input';
 import { Container, Text } from './ui';
 
 // Asset amounts only apply to ERC20 assets
-export interface AssetAmountInputProps extends AmountInputProps {
+export interface AssetAmountInputProps {
     asset?: ERC20Asset;
     onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
+    startingFontSizePx: number;
+    fontColor?: ColorOption;
 }
 
-export class AssetAmountInput extends React.Component<AssetAmountInputProps> {
+export interface AssetAmountInputState {
+    currentFontSizePx: number;
+}
+
+export class AssetAmountInput extends React.Component<AssetAmountInputProps, AssetAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
     };
+    constructor(props: AssetAmountInputProps) {
+        super(props);
+        this.state = {
+            currentFontSizePx: props.startingFontSizePx,
+        };
+    }
     public render(): React.ReactNode {
         const { asset, onChange, ...rest } = this.props;
         return (
             <Container>
-                <AmountInput {...rest} onChange={this._handleChange} />
+                <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
+                    <ScalingAmountInput
+                        {...rest}
+                        startWidthCh={3.5}
+                        endWidthCh={5}
+                        fontSizePx={this.state.currentFontSizePx}
+                        onChange={this._handleChange}
+                    />
+                </Container>
                 <Container display="inline-block" marginLeft="10px">
-                    <Text fontSize={rest.fontSize} fontColor={ColorOption.white} textTransform="uppercase">
+                    <Text
+                        fontSize={`${this.state.currentFontSizePx}px`}
+                        fontColor={ColorOption.white}
+                        textTransform="uppercase"
+                    >
                         {assetUtils.bestNameForAsset(asset)}
                     </Text>
                 </Container>
             </Container>
         );
     }
-    private readonly _handleChange = (value?: BigNumber): void => {
+    private readonly _handleChange = (value?: BigNumber, fontSize?: number): void => {
         this.props.onChange(value, this.props.asset);
+        if (!_.isUndefined(fontSize)) {
+            this.setState({
+                currentFontSizePx: fontSize,
+            });
+        }
     };
 }
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index a36d35a93..defe3b8b1 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -69,7 +69,7 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
             </Text>
         </Container>
         <Flex direction="row" justify="space-between">
-            <SelectedAssetAmountInput fontSize="45px" />
+            <SelectedAssetAmountInput startingFontSizePx={45} />
             <Flex direction="column" justify="space-between">
                 <Container marginBottom="5px">
                     <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
new file mode 100644
index 000000000..a0b7b74af
--- /dev/null
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -0,0 +1,52 @@
+import { BigNumber } from '@0x/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+import { util } from '../util/util';
+
+import { ScalingInput } from './scaling_input';
+import { Container, Text } from './ui';
+
+export interface ScalingAmountInputProps {
+    fontSizePx: number;
+    startWidthCh: number;
+    endWidthCh: number;
+    fontColor?: ColorOption;
+    value?: BigNumber;
+    onChange: (value?: BigNumber, fontSize?: number) => void;
+}
+
+export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> {
+    public static defaultProps = {
+        onChange: util.boundNoop,
+        onFontSizeChange: util.boundNoop,
+    };
+    public render(): React.ReactNode {
+        const { startWidthCh, endWidthCh, fontColor, fontSizePx, value } = this.props;
+        return (
+            <ScalingInput
+                startWidthCh={startWidthCh}
+                endWidthCh={endWidthCh}
+                fontSizePx={fontSizePx}
+                fontColor={fontColor}
+                onChange={this._handleChange}
+                value={!_.isUndefined(value) ? value.toString() : ''}
+                placeholder="0.00"
+            />
+        );
+    }
+    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>, fontSize?: number): void => {
+        const value = event.target.value;
+        let bigNumberValue;
+        if (!_.isEmpty(value)) {
+            try {
+                bigNumberValue = new BigNumber(event.target.value);
+            } catch {
+                // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
+                return;
+            }
+        }
+        this.props.onChange(bigNumberValue, fontSize);
+    };
+}
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index ea0a925d2..a2c4ba342 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -17,47 +17,79 @@ export enum ScalingInputPhase {
 export interface ScalingInputProps {
     startWidthCh: number;
     endWidthCh: number;
-    startFontSizePx: number;
+    fontSizePx: number;
     value?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>, fontSize: number) => void;
     fontColor?: ColorOption;
     placeholder?: string;
 }
-// Magic value obtained via trial-and-error
-const scalingRateToMaintainSameWidth = 0.1;
+
+export interface ScalingInputProps {
+    fixedWidthInPxIfExists?: number;
+}
+
 export class ScalingInput extends React.Component<ScalingInputProps> {
     public static defaultProps = {
         onChange: util.boundNoop,
+        onFontSizeChange: util.boundNoop,
     };
+    public state = {
+        fixedWidthInPxIfExists: undefined,
+    };
+    private _inputRef = React.createRef();
+    public static getPhase(startWidthCh: number, endWidthCh: number, value?: string): ScalingInputPhase {
+        if (_.isUndefined(value) || value.length <= startWidthCh) {
+            return ScalingInputPhase.Start;
+        }
+        if (value.length > startWidthCh && value.length <= endWidthCh) {
+            return ScalingInputPhase.Scaling;
+        }
+        return ScalingInputPhase.End;
+    }
+    public static getPhaseFromProps(props: ScalingInputProps): ScalingInputPhase {
+        const { value, startWidthCh, endWidthCh } = props;
+        return ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+    }
+    public componentDidUpdate(prevProps: ScalingInputProps): void {
+        const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
+        const curPhase = ScalingInput.getPhaseFromProps(this.props);
+        // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
+        if (prevPhase !== ScalingInputPhase.End && curPhase === ScalingInputPhase.End) {
+            this.setState({
+                fixedWidthInPxIfExists: this._getInputWidthInPx(),
+            });
+        }
+        // if we end from end to to anything else, un-fix the width
+        if (prevPhase === ScalingInputPhase.End && curPhase !== ScalingInputPhase.End) {
+            this.setState({
+                fixedWidthInPxIfExists: undefined,
+            });
+        }
+    }
     public render(): React.ReactNode {
         const { fontColor, onChange, placeholder, value } = this.props;
-        const phase = this._getPhase();
+        const phase = ScalingInput.getPhaseFromProps(this.props);
         return (
             <Input
+                ref={this._inputRef as any}
                 fontColor={fontColor}
-                onChange={onChange}
+                onChange={this._handleChange}
                 value={value}
                 placeholder={placeholder}
-                fontSize={this._calculateFontSize(phase)}
-                width={this._calculateWidth(phase)}
+                fontSize={`${this.props.fontSizePx}px`}
+                width={this._calculateWidth()}
             />
         );
     }
-    private readonly _calculateFontSize = (phase: ScalingInputPhase): string => {
-        const { value, endWidthCh, startFontSizePx } = this.props;
-        if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
-            return `${startFontSizePx}px`;
-        }
-        const charactersOverMax = value.length - endWidthCh;
-        const pixelsToReduceFontSizeBy = charactersOverMax * 2;
-        const newFontSizePx = startFontSizePx - pixelsToReduceFontSizeBy;
-        return `${newFontSizePx}px`;
-    };
-    private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
+    private readonly _calculateWidth = (): string => {
+        const phase = ScalingInput.getPhaseFromProps(this.props);
         const { value, startWidthCh, endWidthCh } = this.props;
         if (_.isUndefined(value)) {
             return `${startWidthCh}ch`;
         }
+        if (!_.isUndefined(this.state.fixedWidthInPxIfExists)) {
+            return `${this.state.fixedWidthInPxIfExists}px`;
+        }
         switch (phase) {
             case ScalingInputPhase.Start:
                 return `${startWidthCh}ch`;
@@ -69,14 +101,31 @@ export class ScalingInput extends React.Component<ScalingInputProps> {
                 return `${startWidthCh}ch`;
         }
     };
-    private readonly _getPhase = (): ScalingInputPhase => {
-        const { value, startWidthCh, endWidthCh } = this.props;
-        if (_.isUndefined(value) || value.length <= this.props.startWidthCh) {
-            return ScalingInputPhase.Start;
+    private readonly _getInputWidthInPx = (): number => {
+        const ref = this._inputRef.current;
+        if (!ref) {
+            return 0;
         }
-        if (value.length > startWidthCh && value.length <= endWidthCh) {
-            return ScalingInputPhase.Scaling;
+        return (ref as any).getBoundingClientRect().width;
+    };
+    private readonly _calculateNextFontSize = (
+        currentFontSizePx: number,
+        value: string,
+        startWidthCh: number,
+        endWidthCh: number,
+    ): number => {
+        const phase = ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+        if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
+            return currentFontSizePx;
         }
-        return ScalingInputPhase.End;
+        const charactersOverMax = value.length - endWidthCh;
+        const pixelsToReduceFontSizeBy = charactersOverMax * 5;
+        const fontSize = currentFontSizePx - pixelsToReduceFontSizeBy;
+        return fontSize;
+    };
+    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        const { fontSizePx, startWidthCh, endWidthCh } = this.props;
+        this.props.onChange(event, this._calculateNextFontSize(fontSizePx, value, startWidthCh, endWidthCh));
     };
 }
diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
index 6cd39b855..1b5f3cd22 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -17,7 +17,7 @@ import { AssetAmountInput } from '../components/asset_amount_input';
 
 export interface SelectedAssetAmountInputProps {
     fontColor?: ColorOption;
-    fontSize?: string;
+    startingFontSizePx: number;
 }
 
 interface ConnectedState {
-- 
cgit v1.2.3


From 921492e8186697e477c27d76bd7eb58ce2454765 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 22 Oct 2018 16:45:48 -0700
Subject: feature: reduce font size by a percentage instead of a constant

---
 .../instant/src/components/asset_amount_input.tsx  | 15 ++---
 .../src/components/scaling_amount_input.tsx        |  8 ++-
 packages/instant/src/components/scaling_input.tsx  | 73 +++++++++++++---------
 3 files changed, 57 insertions(+), 39 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index 0b22c889c..beb21a4cf 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -41,8 +41,9 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
                         {...rest}
                         startWidthCh={3.5}
                         endWidthCh={5}
-                        fontSizePx={this.state.currentFontSizePx}
+                        maxFontSizePx={this.props.startingFontSizePx}
                         onChange={this._handleChange}
+                        onFontSizeChange={this._handleFontSizeChange}
                     />
                 </Container>
                 <Container display="inline-block" marginLeft="10px">
@@ -57,12 +58,12 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
             </Container>
         );
     }
-    private readonly _handleChange = (value?: BigNumber, fontSize?: number): void => {
+    private readonly _handleChange = (value?: BigNumber): void => {
         this.props.onChange(value, this.props.asset);
-        if (!_.isUndefined(fontSize)) {
-            this.setState({
-                currentFontSizePx: fontSize,
-            });
-        }
+    };
+    private readonly _handleFontSizeChange = (fontSizePx: number): void => {
+        this.setState({
+            currentFontSizePx: fontSizePx,
+        });
     };
 }
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index a0b7b74af..83375af00 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -9,12 +9,13 @@ import { ScalingInput } from './scaling_input';
 import { Container, Text } from './ui';
 
 export interface ScalingAmountInputProps {
-    fontSizePx: number;
+    maxFontSizePx: number;
     startWidthCh: number;
     endWidthCh: number;
     fontColor?: ColorOption;
     value?: BigNumber;
     onChange: (value?: BigNumber, fontSize?: number) => void;
+    onFontSizeChange: (fontSizePx: number) => void;
 }
 
 export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> {
@@ -23,12 +24,13 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         onFontSizeChange: util.boundNoop,
     };
     public render(): React.ReactNode {
-        const { startWidthCh, endWidthCh, fontColor, fontSizePx, value } = this.props;
+        const { startWidthCh, endWidthCh, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
         return (
             <ScalingInput
                 startWidthCh={startWidthCh}
                 endWidthCh={endWidthCh}
-                fontSizePx={fontSizePx}
+                maxFontSizePx={maxFontSizePx}
+                onFontSizeChange={onFontSizeChange}
                 fontColor={fontColor}
                 onChange={this._handleChange}
                 value={!_.isUndefined(value) ? value.toString() : ''}
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index a2c4ba342..7824c10f9 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -17,21 +17,29 @@ export enum ScalingInputPhase {
 export interface ScalingInputProps {
     startWidthCh: number;
     endWidthCh: number;
-    fontSizePx: number;
+    maxFontSizePx: number;
     value?: string;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>, fontSize: number) => void;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFontSizeChange: (fontSizePx: number) => void;
     fontColor?: ColorOption;
     placeholder?: string;
+    maxLength?: number;
 }
 
-export interface ScalingInputProps {
+export interface ScalingInputState {
     fixedWidthInPxIfExists?: number;
 }
 
-export class ScalingInput extends React.Component<ScalingInputProps> {
+export interface ScalingInputSnapshot {
+    inputWidthPx: number;
+}
+// This is a magic number that was determined experimentally.
+const percentageToReduceByPerCharacter = 0.15;
+export class ScalingInput extends React.Component<ScalingInputProps, ScalingInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
+        maxLength: 10,
     };
     public state = {
         fixedWidthInPxIfExists: undefined,
@@ -50,13 +58,35 @@ export class ScalingInput extends React.Component<ScalingInputProps> {
         const { value, startWidthCh, endWidthCh } = props;
         return ScalingInput.getPhase(startWidthCh, endWidthCh, value);
     }
-    public componentDidUpdate(prevProps: ScalingInputProps): void {
+    public static calculateFontSize(props: ScalingInputProps): number {
+        const { startWidthCh, endWidthCh, value, maxFontSizePx } = props;
+        const phase = ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+        if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
+            return maxFontSizePx;
+        }
+        const charactersOverMax = value.length - endWidthCh;
+        const scalingFactor = (1 - percentageToReduceByPerCharacter) ** charactersOverMax;
+        const fontSize = scalingFactor * maxFontSizePx;
+        return fontSize;
+    }
+    public getSnapshotBeforeUpdate(): ScalingInputSnapshot {
+        return {
+            inputWidthPx: this._getInputWidthInPx(),
+        };
+    }
+    public componentDidUpdate(
+        prevProps: ScalingInputProps,
+        prevState: ScalingInputState,
+        snapshot: ScalingInputSnapshot,
+    ): void {
         const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
         const curPhase = ScalingInput.getPhaseFromProps(this.props);
+        const prevFontSize = ScalingInput.calculateFontSize(prevProps);
+        const curFontSize = ScalingInput.calculateFontSize(this.props);
         // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
         if (prevPhase !== ScalingInputPhase.End && curPhase === ScalingInputPhase.End) {
             this.setState({
-                fixedWidthInPxIfExists: this._getInputWidthInPx(),
+                fixedWidthInPxIfExists: snapshot.inputWidthPx,
             });
         }
         // if we end from end to to anything else, un-fix the width
@@ -65,19 +95,24 @@ export class ScalingInput extends React.Component<ScalingInputProps> {
                 fixedWidthInPxIfExists: undefined,
             });
         }
+        // If font size has changed, notify.
+        if (prevFontSize !== curFontSize) {
+            this.props.onFontSizeChange(curFontSize);
+        }
     }
     public render(): React.ReactNode {
-        const { fontColor, onChange, placeholder, value } = this.props;
+        const { fontColor, onChange, placeholder, value, maxLength } = this.props;
         const phase = ScalingInput.getPhaseFromProps(this.props);
         return (
             <Input
                 ref={this._inputRef as any}
                 fontColor={fontColor}
-                onChange={this._handleChange}
+                onChange={onChange}
                 value={value}
                 placeholder={placeholder}
-                fontSize={`${this.props.fontSizePx}px`}
+                fontSize={`${ScalingInput.calculateFontSize(this.props)}px`}
                 width={this._calculateWidth()}
+                maxLength={maxLength}
             />
         );
     }
@@ -108,24 +143,4 @@ export class ScalingInput extends React.Component<ScalingInputProps> {
         }
         return (ref as any).getBoundingClientRect().width;
     };
-    private readonly _calculateNextFontSize = (
-        currentFontSizePx: number,
-        value: string,
-        startWidthCh: number,
-        endWidthCh: number,
-    ): number => {
-        const phase = ScalingInput.getPhase(startWidthCh, endWidthCh, value);
-        if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
-            return currentFontSizePx;
-        }
-        const charactersOverMax = value.length - endWidthCh;
-        const pixelsToReduceFontSizeBy = charactersOverMax * 5;
-        const fontSize = currentFontSizePx - pixelsToReduceFontSizeBy;
-        return fontSize;
-    };
-    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const value = event.target.value;
-        const { fontSizePx, startWidthCh, endWidthCh } = this.props;
-        this.props.onChange(event, this._calculateNextFontSize(fontSizePx, value, startWidthCh, endWidthCh));
-    };
 }
-- 
cgit v1.2.3


From bdf623dab54132f257057a6949d0a1e245d0b468 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 22 Oct 2018 16:54:08 -0700
Subject: chore: refactor ScalingInput

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

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 7824c10f9..c1111cea9 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -58,9 +58,12 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         const { value, startWidthCh, endWidthCh } = props;
         return ScalingInput.getPhase(startWidthCh, endWidthCh, value);
     }
-    public static calculateFontSize(props: ScalingInputProps): number {
-        const { startWidthCh, endWidthCh, value, maxFontSizePx } = props;
-        const phase = ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+    public static calculateFontSize(
+        endWidthCh: number,
+        maxFontSizePx: number,
+        phase: ScalingInputPhase,
+        value?: string,
+    ): number {
         if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
             return maxFontSizePx;
         }
@@ -69,6 +72,10 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         const fontSize = scalingFactor * maxFontSizePx;
         return fontSize;
     }
+    public static calculateFontSizeFromProps(props: ScalingInputProps, phase: ScalingInputPhase): number {
+        const { endWidthCh, value, maxFontSizePx } = props;
+        return ScalingInput.calculateFontSize(endWidthCh, maxFontSizePx, phase, value);
+    }
     public getSnapshotBeforeUpdate(): ScalingInputSnapshot {
         return {
             inputWidthPx: this._getInputWidthInPx(),
@@ -81,8 +88,8 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     ): void {
         const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
         const curPhase = ScalingInput.getPhaseFromProps(this.props);
-        const prevFontSize = ScalingInput.calculateFontSize(prevProps);
-        const curFontSize = ScalingInput.calculateFontSize(this.props);
+        const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase);
+        const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase);
         // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
         if (prevPhase !== ScalingInputPhase.End && curPhase === ScalingInputPhase.End) {
             this.setState({
@@ -110,14 +117,13 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 onChange={onChange}
                 value={value}
                 placeholder={placeholder}
-                fontSize={`${ScalingInput.calculateFontSize(this.props)}px`}
-                width={this._calculateWidth()}
+                fontSize={`${this._calculateFontSize(phase)}px`}
+                width={this._calculateWidth(phase)}
                 maxLength={maxLength}
             />
         );
     }
-    private readonly _calculateWidth = (): string => {
-        const phase = ScalingInput.getPhaseFromProps(this.props);
+    private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
         const { value, startWidthCh, endWidthCh } = this.props;
         if (_.isUndefined(value)) {
             return `${startWidthCh}ch`;
@@ -136,6 +142,9 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 return `${startWidthCh}ch`;
         }
     };
+    private readonly _calculateFontSize = (phase: ScalingInputPhase): number => {
+        return ScalingInput.calculateFontSizeFromProps(this.props, phase);
+    };
     private readonly _getInputWidthInPx = (): number => {
         const ref = this._inputRef.current;
         if (!ref) {
-- 
cgit v1.2.3


From 28f0deb3ebe2f78f98e79d59b8b2a3eacb1c6fef Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 22 Oct 2018 17:42:28 -0700
Subject: chore: final adjustments

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

(limited to 'packages')

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index beb21a4cf..bfa857f0e 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -40,7 +40,7 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
                     <ScalingAmountInput
                         {...rest}
                         startWidthCh={3.5}
-                        endWidthCh={5}
+                        endWidthCh={4}
                         maxFontSizePx={this.props.startingFontSizePx}
                         onChange={this._handleChange}
                         onFontSizeChange={this._handleFontSizeChange}
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index c1111cea9..57ebf93ac 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -34,12 +34,12 @@ export interface ScalingInputSnapshot {
     inputWidthPx: number;
 }
 // This is a magic number that was determined experimentally.
-const percentageToReduceByPerCharacter = 0.15;
+const percentageToReduceByPerCharacter = 0.18;
 export class ScalingInput extends React.Component<ScalingInputProps, ScalingInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
-        maxLength: 10,
+        maxLength: 9,
     };
     public state = {
         fixedWidthInPxIfExists: undefined,
-- 
cgit v1.2.3


From b7a5e40c62adfbd8732b3cd98d2c989a6a021c54 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 22 Oct 2018 17:56:50 -0700
Subject: chore: run linter

---
 packages/instant/src/components/scaling_amount_input.tsx | 1 -
 packages/instant/src/components/scaling_input.tsx        | 6 ++----
 packages/instant/src/components/ui/container.tsx         | 1 -
 packages/instant/src/components/ui/flex.tsx              | 5 -----
 4 files changed, 2 insertions(+), 11 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 83375af00..9539bfd94 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -6,7 +6,6 @@ import { ColorOption } from '../style/theme';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
-import { Container, Text } from './ui';
 
 export interface ScalingAmountInputProps {
     maxFontSizePx: number;
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 57ebf93ac..10243787a 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -1,12 +1,10 @@
-import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 
 import { ColorOption } from '../style/theme';
 import { util } from '../util/util';
 
-import { Container, Input } from './ui';
+import { Input } from './ui';
 
 export enum ScalingInputPhase {
     Start,
@@ -44,7 +42,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     public state = {
         fixedWidthInPxIfExists: undefined,
     };
-    private _inputRef = React.createRef();
+    private readonly _inputRef = React.createRef();
     public static getPhase(startWidthCh: number, endWidthCh: number, value?: string): ScalingInputPhase {
         if (_.isUndefined(value) || value.length <= startWidthCh) {
             return ScalingInputPhase.Start;
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index b7e17d807..8b204826d 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index f2013f60f..2b430129d 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
@@ -13,10 +12,6 @@ export interface FlexProps {
     className?: string;
 }
 
-const PlainFlex: React.StatelessComponent<FlexProps> = ({ children, className }) => (
-    <div className={className}>{children}</div>
-);
-
 export const Flex = styled<FlexProps, 'div'>('div')`
     display: flex;
     flex-direction: ${props => props.direction};
-- 
cgit v1.2.3


From f0c79473bdaeb87f49a9eb59fc88336f02e81546 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 15:01:22 -0700
Subject: fix: dont allow heading to change height when input size changes

---
 packages/instant/src/components/instant_heading.tsx | 4 +++-
 packages/instant/src/components/ui/container.tsx    | 3 ++-
 packages/instant/src/components/ui/flex.tsx         | 3 ++-
 3 files changed, 7 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index defe3b8b1..7664d31ae 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -69,7 +69,9 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
             </Text>
         </Container>
         <Flex direction="row" justify="space-between">
-            <SelectedAssetAmountInput startingFontSizePx={45} />
+            <Flex height="65px">
+                <SelectedAssetAmountInput startingFontSizePx={45} />
+            </Flex>
             <Flex direction="column" justify="space-between">
                 <Container marginBottom="5px">
                     <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 8b204826d..293042120 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -1,4 +1,3 @@
-
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -10,6 +9,7 @@ export interface ContainerProps {
     bottom?: string;
     left?: string;
     width?: string;
+    height?: string;
     maxWidth?: string;
     margin?: string;
     marginTop?: string;
@@ -37,6 +37,7 @@ export const Container = styled<ContainerProps, 'div'>('div')`
     ${props => cssRuleIfExists(props, 'bottom')}
     ${props => cssRuleIfExists(props, 'left')}
     ${props => cssRuleIfExists(props, 'width')}
+    ${props => cssRuleIfExists(props, 'height')}
     ${props => cssRuleIfExists(props, 'max-width')}
     ${props => cssRuleIfExists(props, 'margin')}
     ${props => cssRuleIfExists(props, 'margin-top')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 2b430129d..d4e14d979 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,4 +1,3 @@
-
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -8,6 +7,7 @@ export interface FlexProps {
     justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
     align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
     width?: string;
+    height?: string;
     backgroundColor?: ColorOption;
     className?: string;
 }
@@ -19,6 +19,7 @@ export const Flex = styled<FlexProps, 'div'>('div')`
     justify-content: ${props => props.justify};
     align-items: ${props => props.align};
     ${props => cssRuleIfExists(props, 'width')}
+    ${props => cssRuleIfExists(props, 'height')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
 `;
 
-- 
cgit v1.2.3


From 053e147afc1b8471c480a8612cb6bae4c363b21b Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 15:19:01 -0700
Subject: fix: remove the concept of initial with from scaling input and remove
 phase

---
 .../src/components/scaling_amount_input.tsx        |  2 +-
 packages/instant/src/components/scaling_input.tsx  | 46 ++++++++++------------
 2 files changed, 21 insertions(+), 27 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 9539bfd94..2baff5621 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -26,7 +26,6 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         const { startWidthCh, endWidthCh, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
         return (
             <ScalingInput
-                startWidthCh={startWidthCh}
                 endWidthCh={endWidthCh}
                 maxFontSizePx={maxFontSizePx}
                 onFontSizeChange={onFontSizeChange}
@@ -34,6 +33,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 onChange={this._handleChange}
                 value={!_.isUndefined(value) ? value.toString() : ''}
                 placeholder="0.00"
+                emptyInputWidthCh={3.5}
             />
         );
     }
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 10243787a..5db878c52 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -7,16 +7,15 @@ import { util } from '../util/util';
 import { Input } from './ui';
 
 export enum ScalingInputPhase {
-    Start,
-    Scaling,
-    End,
+    FixedFontSize,
+    ScalingFontSize,
 }
 
 export interface ScalingInputProps {
-    startWidthCh: number;
     endWidthCh: number;
     maxFontSizePx: number;
-    value?: string;
+    value: string;
+    emptyInputWidthCh: number;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onFontSizeChange: (fontSizePx: number) => void;
     fontColor?: ColorOption;
@@ -43,26 +42,23 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         fixedWidthInPxIfExists: undefined,
     };
     private readonly _inputRef = React.createRef();
-    public static getPhase(startWidthCh: number, endWidthCh: number, value?: string): ScalingInputPhase {
-        if (_.isUndefined(value) || value.length <= startWidthCh) {
-            return ScalingInputPhase.Start;
+    public static getPhase(endWidthCh: number, value: string): ScalingInputPhase {
+        if (value.length <= endWidthCh) {
+            return ScalingInputPhase.FixedFontSize;
         }
-        if (value.length > startWidthCh && value.length <= endWidthCh) {
-            return ScalingInputPhase.Scaling;
-        }
-        return ScalingInputPhase.End;
+        return ScalingInputPhase.ScalingFontSize;
     }
     public static getPhaseFromProps(props: ScalingInputProps): ScalingInputPhase {
-        const { value, startWidthCh, endWidthCh } = props;
-        return ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+        const { value, endWidthCh } = props;
+        return ScalingInput.getPhase(endWidthCh, value);
     }
     public static calculateFontSize(
         endWidthCh: number,
         maxFontSizePx: number,
         phase: ScalingInputPhase,
-        value?: string,
+        value: string,
     ): number {
-        if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
+        if (phase !== ScalingInputPhase.ScalingFontSize) {
             return maxFontSizePx;
         }
         const charactersOverMax = value.length - endWidthCh;
@@ -89,13 +85,13 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase);
         const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase);
         // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
-        if (prevPhase !== ScalingInputPhase.End && curPhase === ScalingInputPhase.End) {
+        if (prevPhase !== ScalingInputPhase.ScalingFontSize && curPhase === ScalingInputPhase.ScalingFontSize) {
             this.setState({
                 fixedWidthInPxIfExists: snapshot.inputWidthPx,
             });
         }
         // if we end from end to to anything else, un-fix the width
-        if (prevPhase === ScalingInputPhase.End && curPhase !== ScalingInputPhase.End) {
+        if (prevPhase === ScalingInputPhase.ScalingFontSize && curPhase !== ScalingInputPhase.ScalingFontSize) {
             this.setState({
                 fixedWidthInPxIfExists: undefined,
             });
@@ -122,22 +118,20 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         );
     }
     private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
-        const { value, startWidthCh, endWidthCh } = this.props;
-        if (_.isUndefined(value)) {
-            return `${startWidthCh}ch`;
+        const { value, endWidthCh } = this.props;
+        if (_.isEmpty(value)) {
+            return `${this.props.emptyInputWidthCh}ch`;
         }
         if (!_.isUndefined(this.state.fixedWidthInPxIfExists)) {
             return `${this.state.fixedWidthInPxIfExists}px`;
         }
         switch (phase) {
-            case ScalingInputPhase.Start:
-                return `${startWidthCh}ch`;
-            case ScalingInputPhase.Scaling:
+            case ScalingInputPhase.FixedFontSize:
                 return `${value.length}ch`;
-            case ScalingInputPhase.End:
+            case ScalingInputPhase.ScalingFontSize:
                 return `${endWidthCh}ch`;
             default:
-                return `${startWidthCh}ch`;
+                return '1ch';
         }
     };
     private readonly _calculateFontSize = (phase: ScalingInputPhase): number => {
-- 
cgit v1.2.3


From a5edb0b421afaaa34290dc3ada73da6bca3c556a Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 15:54:18 -0700
Subject: polish: improve scaling significantly

---
 .../instant/src/components/asset_amount_input.tsx  |  3 +-
 .../src/components/scaling_amount_input.tsx        |  7 +--
 packages/instant/src/components/scaling_input.tsx  | 68 +++++++++++++++-------
 3 files changed, 50 insertions(+), 28 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index bfa857f0e..8cbf2b37a 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -39,8 +39,7 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
                 <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
                     <ScalingAmountInput
                         {...rest}
-                        startWidthCh={3.5}
-                        endWidthCh={4}
+                        textLengthThreshold={4}
                         maxFontSizePx={this.props.startingFontSizePx}
                         onChange={this._handleChange}
                         onFontSizeChange={this._handleFontSizeChange}
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 2baff5621..db3062b57 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -9,8 +9,7 @@ import { ScalingInput } from './scaling_input';
 
 export interface ScalingAmountInputProps {
     maxFontSizePx: number;
-    startWidthCh: number;
-    endWidthCh: number;
+    textLengthThreshold: number;
     fontColor?: ColorOption;
     value?: BigNumber;
     onChange: (value?: BigNumber, fontSize?: number) => void;
@@ -23,11 +22,11 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         onFontSizeChange: util.boundNoop,
     };
     public render(): React.ReactNode {
-        const { startWidthCh, endWidthCh, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
+        const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
         return (
             <ScalingInput
-                endWidthCh={endWidthCh}
                 maxFontSizePx={maxFontSizePx}
+                textLengthThreshold={textLengthThreshold}
                 onFontSizeChange={onFontSizeChange}
                 fontColor={fontColor}
                 onChange={this._handleChange}
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 5db878c52..7f8e505de 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -11,8 +11,13 @@ export enum ScalingInputPhase {
     ScalingFontSize,
 }
 
+export interface ScalingSettings {
+    percentageToReduceFontSizePerCharacter: number;
+    percentageToIncreaseWidthPerCharacter: number;
+}
+
 export interface ScalingInputProps {
-    endWidthCh: number;
+    textLengthThreshold: number;
     maxFontSizePx: number;
     value: string;
     emptyInputWidthCh: number;
@@ -21,54 +26,68 @@ export interface ScalingInputProps {
     fontColor?: ColorOption;
     placeholder?: string;
     maxLength?: number;
+    scalingSettings: ScalingSettings;
 }
 
 export interface ScalingInputState {
-    fixedWidthInPxIfExists?: number;
+    inputWidthPxAtPhaseChange?: number;
 }
 
 export interface ScalingInputSnapshot {
     inputWidthPx: number;
 }
-// This is a magic number that was determined experimentally.
-const percentageToReduceByPerCharacter = 0.18;
+
+// These are magic numbers that were determined experimentally.
+const defaultScalingSettings: ScalingSettings = {
+    percentageToReduceFontSizePerCharacter: 0.125,
+    percentageToIncreaseWidthPerCharacter: 0.06,
+};
+
 export class ScalingInput extends React.Component<ScalingInputProps, ScalingInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
-        maxLength: 9,
+        maxLength: 8,
+        scalingSettings: defaultScalingSettings,
     };
     public state = {
-        fixedWidthInPxIfExists: undefined,
+        inputWidthPxAtPhaseChange: undefined,
     };
     private readonly _inputRef = React.createRef();
-    public static getPhase(endWidthCh: number, value: string): ScalingInputPhase {
-        if (value.length <= endWidthCh) {
+    public static getPhase(textLengthThreshold: number, value: string): ScalingInputPhase {
+        if (value.length <= textLengthThreshold) {
             return ScalingInputPhase.FixedFontSize;
         }
         return ScalingInputPhase.ScalingFontSize;
     }
     public static getPhaseFromProps(props: ScalingInputProps): ScalingInputPhase {
-        const { value, endWidthCh } = props;
-        return ScalingInput.getPhase(endWidthCh, value);
+        const { value, textLengthThreshold } = props;
+        return ScalingInput.getPhase(textLengthThreshold, value);
     }
     public static calculateFontSize(
-        endWidthCh: number,
+        textLengthThreshold: number,
         maxFontSizePx: number,
         phase: ScalingInputPhase,
         value: string,
+        percentageToReduceFontSizePerCharacter: number,
     ): number {
         if (phase !== ScalingInputPhase.ScalingFontSize) {
             return maxFontSizePx;
         }
-        const charactersOverMax = value.length - endWidthCh;
-        const scalingFactor = (1 - percentageToReduceByPerCharacter) ** charactersOverMax;
+        const charactersOverMax = value.length - textLengthThreshold;
+        const scalingFactor = (1 - percentageToReduceFontSizePerCharacter) ** charactersOverMax;
         const fontSize = scalingFactor * maxFontSizePx;
         return fontSize;
     }
     public static calculateFontSizeFromProps(props: ScalingInputProps, phase: ScalingInputPhase): number {
-        const { endWidthCh, value, maxFontSizePx } = props;
-        return ScalingInput.calculateFontSize(endWidthCh, maxFontSizePx, phase, value);
+        const { textLengthThreshold, value, maxFontSizePx, scalingSettings } = props;
+        return ScalingInput.calculateFontSize(
+            textLengthThreshold,
+            maxFontSizePx,
+            phase,
+            value,
+            scalingSettings.percentageToReduceFontSizePerCharacter,
+        );
     }
     public getSnapshotBeforeUpdate(): ScalingInputSnapshot {
         return {
@@ -87,13 +106,13 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
         if (prevPhase !== ScalingInputPhase.ScalingFontSize && curPhase === ScalingInputPhase.ScalingFontSize) {
             this.setState({
-                fixedWidthInPxIfExists: snapshot.inputWidthPx,
+                inputWidthPxAtPhaseChange: snapshot.inputWidthPx,
             });
         }
         // if we end from end to to anything else, un-fix the width
         if (prevPhase === ScalingInputPhase.ScalingFontSize && curPhase !== ScalingInputPhase.ScalingFontSize) {
             this.setState({
-                fixedWidthInPxIfExists: undefined,
+                inputWidthPxAtPhaseChange: undefined,
             });
         }
         // If font size has changed, notify.
@@ -118,18 +137,23 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         );
     }
     private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
-        const { value, endWidthCh } = this.props;
+        const { value, textLengthThreshold, scalingSettings } = this.props;
         if (_.isEmpty(value)) {
             return `${this.props.emptyInputWidthCh}ch`;
         }
-        if (!_.isUndefined(this.state.fixedWidthInPxIfExists)) {
-            return `${this.state.fixedWidthInPxIfExists}px`;
-        }
         switch (phase) {
             case ScalingInputPhase.FixedFontSize:
                 return `${value.length}ch`;
             case ScalingInputPhase.ScalingFontSize:
-                return `${endWidthCh}ch`;
+                const { inputWidthPxAtPhaseChange } = this.state;
+                if (!_.isUndefined(inputWidthPxAtPhaseChange)) {
+                    const charactersOverMax = value.length - textLengthThreshold;
+                    const scalingFactor =
+                        (scalingSettings.percentageToIncreaseWidthPerCharacter + 1) ** charactersOverMax;
+                    const width = scalingFactor * inputWidthPxAtPhaseChange;
+                    return `${width}px`;
+                }
+                return `${textLengthThreshold}ch`;
             default:
                 return '1ch';
         }
-- 
cgit v1.2.3


From 751b87af962d5b1f9f65514c10de2f7cb0b13c34 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 16:28:08 -0700
Subject: fix: remove unused callback info

---
 packages/instant/src/components/scaling_amount_input.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index db3062b57..233e29cff 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -12,7 +12,7 @@ export interface ScalingAmountInputProps {
     textLengthThreshold: number;
     fontColor?: ColorOption;
     value?: BigNumber;
-    onChange: (value?: BigNumber, fontSize?: number) => void;
+    onChange: (value?: BigNumber) => void;
     onFontSizeChange: (fontSizePx: number) => void;
 }
 
@@ -36,7 +36,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
             />
         );
     }
-    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>, fontSize?: number): void => {
+    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
         const value = event.target.value;
         let bigNumberValue;
         if (!_.isEmpty(value)) {
@@ -47,6 +47,6 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 return;
             }
         }
-        this.props.onChange(bigNumberValue, fontSize);
+        this.props.onChange(bigNumberValue);
     };
 }
-- 
cgit v1.2.3


From 7ccfa8a8afe103e1cc2920724b6f17644fe5629d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 16:59:31 -0700
Subject: feat: support half-written decimal numbers in BigNumberInput

---
 .../src/components/scaling_amount_input.tsx        |  3 ++-
 packages/instant/src/util/big_number.ts            | 29 ++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 packages/instant/src/util/big_number.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 233e29cff..23a15305a 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
+import { BigNumberInput } from '../util/big_number';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
@@ -41,7 +42,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         let bigNumberValue;
         if (!_.isEmpty(value)) {
             try {
-                bigNumberValue = new BigNumber(event.target.value);
+                bigNumberValue = new BigNumberInput(event.target.value);
             } catch {
                 // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
                 return;
diff --git a/packages/instant/src/util/big_number.ts b/packages/instant/src/util/big_number.ts
new file mode 100644
index 000000000..773eb0cb4
--- /dev/null
+++ b/packages/instant/src/util/big_number.ts
@@ -0,0 +1,29 @@
+import { BigNumber } from '@0x/utils';
+import * as _ from 'lodash';
+
+/**
+ *  A BigNumber extension that is more flexible about decimal strings.
+ *  Such as allowing:
+ *  new BigNumberInput(0.) => 0
+ *  new BigNumberInput(1.) => 1
+ *  new BigNumberInput(1..) => still throws
+ */
+export class BigNumberInput extends BigNumber {
+    private _hasDecimalPeriod: boolean;
+    constructor(bigNumberString: string) {
+        const hasDecimalPeriod = _.endsWith(bigNumberString, '.');
+        let internalString = bigNumberString;
+        if (hasDecimalPeriod) {
+            internalString = bigNumberString.slice(0, bigNumberString.length - 1);
+        }
+        super(internalString);
+        this._hasDecimalPeriod = hasDecimalPeriod;
+    }
+    public toString(): string {
+        const internalString = super.toString();
+        if (this._hasDecimalPeriod) {
+            return `${internalString}.`;
+        }
+        return internalString;
+    }
+}
-- 
cgit v1.2.3


From 8e501e5ec715da17e3319870dbde3cca87940416 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 17:08:34 -0700
Subject: feat: add formatted symbol for asset uitl

---
 packages/instant/src/util/asset.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index 4e3b2b946..ebeba948e 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -2,7 +2,7 @@ import { AssetProxyId, ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
 
 import { assetDataNetworkMapping } from '../data/asset_data_network_mapping';
-import { Asset, AssetMetaData, Network, ZeroExInstantError } from '../types';
+import { Asset, AssetMetaData, Network, ZeroExInstantError, ERC20Asset } from '../types';
 
 export const assetUtils = {
     createAssetFromAssetData: (
@@ -43,6 +43,16 @@ export const assetUtils = {
                 return defaultName;
         }
     },
+    formattedSymbolForAsset: (asset?: ERC20Asset, defaultName: string = '???'): string => {
+        if (_.isUndefined(asset)) {
+            return defaultName;
+        }
+        const symbol = asset.metaData.symbol;
+        if (symbol.length <= 5) {
+            return symbol;
+        }
+        return `${symbol.slice(0, 3)}...`;
+    },
     getAssociatedAssetDataIfExists: (assetData: string, network: Network): string | undefined => {
         const assetDataGroupIfExists = _.find(assetDataNetworkMapping, value => value[network] === assetData);
         if (_.isUndefined(assetDataGroupIfExists)) {
-- 
cgit v1.2.3


From 2e184f081e546acbc8ed3e5e05de5a9e5b56a3d8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 17:17:10 -0700
Subject: feat: add title attribute to label

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

(limited to 'packages')

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index 8cbf2b37a..368ef10c2 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -45,13 +45,13 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
                         onFontSizeChange={this._handleFontSizeChange}
                     />
                 </Container>
-                <Container display="inline-block" marginLeft="10px">
+                <Container display="inline-block" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
                     <Text
                         fontSize={`${this.state.currentFontSizePx}px`}
                         fontColor={ColorOption.white}
                         textTransform="uppercase"
                     >
-                        {assetUtils.bestNameForAsset(asset)}
+                        {assetUtils.formattedSymbolForAsset(asset)}
                     </Text>
                 </Container>
             </Container>
-- 
cgit v1.2.3


From 2c04ee3f5e4438f9ae51944e7ea6bd6b501317a7 Mon Sep 17 00:00:00 2001
From: Alex Browne <stephenalexbrowne@gmail.com>
Date: Tue, 23 Oct 2018 18:30:11 -0700
Subject: chore: Add --format stylish to tslint

---
 packages/0x.js/package.json             | 2 +-
 packages/abi-gen-wrappers/package.json  | 2 +-
 packages/abi-gen/package.json           | 2 +-
 packages/assert/package.json            | 2 +-
 packages/asset-buyer/package.json       | 2 +-
 packages/base-contract/package.json     | 2 +-
 packages/connect/package.json           | 2 +-
 packages/contract-wrappers/package.json | 2 +-
 packages/contracts/package.json         | 2 +-
 packages/dev-tools-pages/package.json   | 2 +-
 packages/dev-utils/package.json         | 2 +-
 packages/ethereum-types/package.json    | 2 +-
 packages/fill-scenarios/package.json    | 2 +-
 packages/instant/package.json           | 2 +-
 packages/json-schemas/package.json      | 2 +-
 packages/metacoin/package.json          | 2 +-
 packages/migrations/package.json        | 2 +-
 packages/monorepo-scripts/package.json  | 2 +-
 packages/order-utils/package.json       | 2 +-
 packages/order-watcher/package.json     | 2 +-
 packages/react-docs/package.json        | 2 +-
 packages/react-shared/package.json      | 2 +-
 packages/sol-compiler/package.json      | 2 +-
 packages/sol-cov/package.json           | 2 +-
 packages/sol-doc/package.json           | 2 +-
 packages/sol-resolver/package.json      | 2 +-
 packages/sra-spec/package.json          | 2 +-
 packages/subproviders/package.json      | 2 +-
 packages/testnet-faucets/package.json   | 2 +-
 packages/tslint-config/package.json     | 2 +-
 packages/types/package.json             | 2 +-
 packages/utils/package.json             | 2 +-
 packages/web3-wrapper/package.json      | 2 +-
 packages/website/package.json           | 2 +-
 34 files changed, 34 insertions(+), 34 deletions(-)

(limited to 'packages')

diff --git a/packages/0x.js/package.json b/packages/0x.js/package.json
index 56999d3e5..bfc29128c 100644
--- a/packages/0x.js/package.json
+++ b/packages/0x.js/package.json
@@ -18,7 +18,7 @@
         "build": "yarn build:all",
         "build:ci": "yarn build:commonjs",
         "build:all": "run-p build:umd:prod build:commonjs",
-        "lint": "tslint --project . --exclude **/src/generated_contract_wrappers/**/*",
+        "lint": "tslint --format stylish --project .",
         "test:circleci": "run-s test:coverage",
         "rebuild_and_test": "run-s build test",
         "test:coverage": "nyc npm run test --all && yarn coverage:report:lcov",
diff --git a/packages/abi-gen-wrappers/package.json b/packages/abi-gen-wrappers/package.json
index 313cc339d..b8010a8a7 100644
--- a/packages/abi-gen-wrappers/package.json
+++ b/packages/abi-gen-wrappers/package.json
@@ -12,7 +12,7 @@
     "scripts": {
         "build": "yarn pre_build && tsc -b",
         "build:ci": "yarn build",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "pre_build": "yarn generate_contract_wrappers",
         "clean": "shx rm -rf lib wrappers",
         "generate_contract_wrappers": "abi-gen --abis  ${npm_package_config_abis} --template ../contract_templates/contract.handlebars --partials '../contract_templates/partials/**/*.handlebars' --output src/generated-wrappers --backend ethers"
diff --git a/packages/abi-gen/package.json b/packages/abi-gen/package.json
index f32bb3a31..c78d4f269 100644
--- a/packages/abi-gen/package.json
+++ b/packages/abi-gen/package.json
@@ -8,7 +8,7 @@
     "main": "lib/src/index.js",
     "types": "lib/src/index.d.ts",
     "scripts": {
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "clean": "shx rm -rf lib",
         "build": "tsc -b",
         "build:ci": "yarn build",
diff --git a/packages/assert/package.json b/packages/assert/package.json
index 37af8979d..a96f65258 100644
--- a/packages/assert/package.json
+++ b/packages/assert/package.json
@@ -11,7 +11,7 @@
         "build": "tsc -b",
         "build:ci": "yarn build",
         "clean": "shx rm -rf lib test_temp",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "run_mocha": "mocha --require source-map-support/register --require make-promises-safe lib/test/**/*_test.js --exit",
         "test": "yarn run_mocha",
         "rebuild_and_test": "run-s clean build test",
diff --git a/packages/asset-buyer/package.json b/packages/asset-buyer/package.json
index e4b4d19c0..dd0668632 100644
--- a/packages/asset-buyer/package.json
+++ b/packages/asset-buyer/package.json
@@ -10,7 +10,7 @@
     "scripts": {
         "build": "yarn tsc -b",
         "build:ci": "yarn build",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "test": "yarn run_mocha",
         "rebuild_and_test": "run-s clean build test",
         "test:coverage": "nyc npm run test --all && yarn coverage:report:lcov",
diff --git a/packages/base-contract/package.json b/packages/base-contract/package.json
index 676e8aab9..520dff5f9 100644
--- a/packages/base-contract/package.json
+++ b/packages/base-contract/package.json
@@ -17,7 +17,7 @@
         "run_mocha": "mocha --require source-map-support/register --require make-promises-safe lib/test/**/*_test.js --bail --exit",
         "test:coverage": "nyc npm run test --all && yarn coverage:report:lcov",
         "coverage:report:lcov": "nyc report --reporter=text-lcov > coverage/lcov.info",
-        "lint": "tslint --project . --exclude **/src/contract_wrappers/**/*"
+        "lint": "tslint --format stylish --project ."
     },
     "license": "Apache-2.0",
     "repository": {
diff --git a/packages/connect/package.json b/packages/connect/package.json
index 95b1bbd7d..de846e58b 100644
--- a/packages/connect/package.json
+++ b/packages/connect/package.json
@@ -19,7 +19,7 @@
         "build:ci": "yarn build",
         "clean": "shx rm -rf lib test_temp generated_docs",
         "copy_test_fixtures": "copyfiles -u 2 './test/fixtures/**/*.json' ./lib/test/fixtures",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "run_mocha": "mocha --require source-map-support/register --require make-promises-safe lib/test/**/*_test.js --exit",
         "test": "run-s copy_test_fixtures run_mocha",
         "rebuild_and_test": "run-s clean build test",
diff --git a/packages/contract-wrappers/package.json b/packages/contract-wrappers/package.json
index d427bb628..178675763 100644
--- a/packages/contract-wrappers/package.json
+++ b/packages/contract-wrappers/package.json
@@ -13,7 +13,7 @@
     "scripts": {
         "build": "tsc -b",
         "build:ci": "yarn build",
-        "lint": "tslint --project . --exclude **/src/contract_wrappers/**/* --exclude **/lib/**/*",
+        "lint": "tslint --format stylish --project . --exclude **/lib/**/*",
         "test:circleci": "run-s test:coverage",
         "test": "yarn run_mocha",
         "rebuild_and_test": "run-s build test",
diff --git a/packages/contracts/package.json b/packages/contracts/package.json
index 3a5f12c74..4f24310e8 100644
--- a/packages/contracts/package.json
+++ b/packages/contracts/package.json
@@ -23,7 +23,7 @@
         "compile": "sol-compiler --contracts-dir contracts",
         "clean": "shx rm -rf lib generated-artifacts generated-wrappers",
         "generate_contract_wrappers": "abi-gen --abis  ${npm_package_config_abis} --template ../contract_templates/contract.handlebars --partials '../contract_templates/partials/**/*.handlebars' --output generated-wrappers --backend ethers",
-        "lint": "tslint --project . --exclude ./generated-wrappers/**/* --exclude ./generated-artifacts/**/* --exclude **/lib/**/* && yarn lint-contracts",
+        "lint": "tslint --format stylish --project . --exclude ./generated-wrappers/**/* --exclude ./generated-artifacts/**/* --exclude **/lib/**/* && yarn lint-contracts",
         "coverage:report:text": "istanbul report text",
         "coverage:report:html": "istanbul report html && open coverage/index.html",
         "profiler:report:html": "istanbul report html && open coverage/index.html",
diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json
index 3563b4bef..ca13c1cc8 100644
--- a/packages/dev-tools-pages/package.json
+++ b/packages/dev-tools-pages/package.json
@@ -11,7 +11,7 @@
         "build:ci": "yarn build",
         "build:dev": "../../node_modules/.bin/webpack --mode development",
         "clean": "shx rm -f public/bundle*",
-        "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'",
+        "lint": "tslint --format stylish --project . 'ts/**/*.ts' 'ts/**/*.tsx'",
         "dev": "webpack-dev-server --mode development --content-base public"
     },
     "license": "Apache-2.0",
diff --git a/packages/dev-utils/package.json b/packages/dev-utils/package.json
index d1b1efc87..7c6bfde90 100644
--- a/packages/dev-utils/package.json
+++ b/packages/dev-utils/package.json
@@ -17,7 +17,7 @@
         "test:coverage": "nyc npm run test --all && yarn coverage:report:lcov",
         "coverage:report:lcov": "nyc report --reporter=text-lcov > coverage/lcov.info",
         "clean": "shx rm -rf lib",
-        "lint": "tslint --project ."
+        "lint": "tslint --format stylish --project ."
     },
     "license": "Apache-2.0",
     "repository": {
diff --git a/packages/ethereum-types/package.json b/packages/ethereum-types/package.json
index d24e39dfd..49b093bdd 100644
--- a/packages/ethereum-types/package.json
+++ b/packages/ethereum-types/package.json
@@ -11,7 +11,7 @@
         "build": "tsc -b",
         "build:ci": "yarn build",
         "clean": "shx rm -rf lib generated_docs",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "docs:json": "typedoc --excludePrivate --excludeExternals --target ES5 --tsconfig typedoc-tsconfig.json --json $JSON_FILE_PATH $PROJECT_FILES"
     },
     "config": {
diff --git a/packages/fill-scenarios/package.json b/packages/fill-scenarios/package.json
index 0e1303259..ae7fa02ad 100644
--- a/packages/fill-scenarios/package.json
+++ b/packages/fill-scenarios/package.json
@@ -8,7 +8,7 @@
         "build": "yarn tsc -b",
         "build:ci": "yarn build",
         "clean": "shx rm -rf lib src/generated_contract_wrappers",
-        "lint": "tslint --project ."
+        "lint": "tslint --format stylish --project ."
     },
     "license": "Apache-2.0",
     "repository": {
diff --git a/packages/instant/package.json b/packages/instant/package.json
index 1a6e9d2e9..26c6c4e08 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -16,7 +16,7 @@
         "build:ci": "yarn build",
         "watch_without_deps": "tsc -w",
         "dev": "webpack-dev-server --mode development",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "test": "jest",
         "test:coverage": "jest --coverage",
         "rebuild_and_test": "run-s clean build test",
diff --git a/packages/json-schemas/package.json b/packages/json-schemas/package.json
index 97cf607c1..57715c601 100644
--- a/packages/json-schemas/package.json
+++ b/packages/json-schemas/package.json
@@ -10,7 +10,7 @@
     "scripts": {
         "build": "tsc -b",
         "build:ci": "yarn build",
-        "lint": "tslint --project . --exclude **/schemas/**/*",
+        "lint": "tslint --format stylish --project . --exclude **/schemas/**/*",
         "test": "yarn run_mocha",
         "rebuild_and_test": "run-s clean build test",
         "test:coverage": "nyc npm run test --all && yarn coverage:report:lcov",
diff --git a/packages/metacoin/package.json b/packages/metacoin/package.json
index 04bdeba4c..e3432c010 100644
--- a/packages/metacoin/package.json
+++ b/packages/metacoin/package.json
@@ -7,7 +7,7 @@
     "private": true,
     "description": "Example solidity project using 0x dev tools",
     "scripts": {
-        "lint": "tslint --project . --exclude **/src/contract_wrappers/**/*",
+        "lint": "tslint --format stylish --project . --exclude **/src/contract_wrappers/**/*",
         "build": "yarn pre_build && tsc -b",
         "build:ci": "yarn build",
         "pre_build": "run-s compile generate_contract_wrappers copy_artifacts",
diff --git a/packages/migrations/package.json b/packages/migrations/package.json
index 353697bfc..b610d3c6a 100644
--- a/packages/migrations/package.json
+++ b/packages/migrations/package.json
@@ -11,7 +11,7 @@
         "build": "tsc -b",
         "build:ci": "yarn build",
         "clean": "shx rm -rf lib",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "migrate:v2": "run-s build script:migrate:v2",
         "script:migrate:v2": "node ./lib/migrate.js --contracts-version 2.0.0"
     },
diff --git a/packages/monorepo-scripts/package.json b/packages/monorepo-scripts/package.json
index ba5f9ca6a..a83f90516 100644
--- a/packages/monorepo-scripts/package.json
+++ b/packages/monorepo-scripts/package.json
@@ -11,7 +11,7 @@
     "scripts": {
         "build": "tsc -b",
         "build:ci": "yarn build",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "clean": "shx rm -rf lib",
         "test:publish": "run-s build script:publish",
         "find_unused_deps": "run-s build script:find_unused_deps",
diff --git a/packages/order-utils/package.json b/packages/order-utils/package.json
index 69f14a79e..a6a84b940 100644
--- a/packages/order-utils/package.json
+++ b/packages/order-utils/package.json
@@ -17,7 +17,7 @@
         "test:coverage": "nyc npm run test --all && yarn coverage:report:lcov",
         "coverage:report:lcov": "nyc report --reporter=text-lcov > coverage/lcov.info",
         "clean": "shx rm -rf lib generated_docs",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "docs:json": "typedoc --excludePrivate --excludeExternals --target ES5 --tsconfig typedoc-tsconfig.json --json $JSON_FILE_PATH $PROJECT_FILES"
     },
     "config": {
diff --git a/packages/order-watcher/package.json b/packages/order-watcher/package.json
index acc70544e..42e3f572c 100644
--- a/packages/order-watcher/package.json
+++ b/packages/order-watcher/package.json
@@ -14,7 +14,7 @@
     "scripts": {
         "build": "yarn tsc -b",
         "build:ci": "yarn build",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "test:circleci": "run-s test:coverage",
         "test": "yarn run_mocha",
         "rebuild_and_test": "run-s build test",
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index d3ccfa8da..e234b0479 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -8,7 +8,7 @@
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "scripts": {
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "build": "tsc -b",
         "build:ci": "yarn build",
         "clean": "shx rm -rf lib"
diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json
index 7a150bf35..45220e2d2 100644
--- a/packages/react-shared/package.json
+++ b/packages/react-shared/package.json
@@ -8,7 +8,7 @@
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "scripts": {
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "build": "tsc",
         "build:ci": "yarn build",
         "watch_without_deps": "tsc -w",
diff --git a/packages/sol-compiler/package.json b/packages/sol-compiler/package.json
index 4c4370b1f..17ccb50b8 100644
--- a/packages/sol-compiler/package.json
+++ b/packages/sol-compiler/package.json
@@ -19,7 +19,7 @@
         "coverage:report:lcov": "nyc report --reporter=text-lcov > coverage/lcov.info",
         "clean": "shx rm -rf lib generated_docs",
         "migrate": "npm run build; node lib/src/cli.js migrate",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "test:circleci": "yarn test:coverage",
         "docs:json": "typedoc --excludePrivate --excludeExternals --target ES5 --tsconfig typedoc-tsconfig.json --json $JSON_FILE_PATH $PROJECT_FILES"
     },
diff --git a/packages/sol-cov/package.json b/packages/sol-cov/package.json
index a56713d69..09119321d 100644
--- a/packages/sol-cov/package.json
+++ b/packages/sol-cov/package.json
@@ -11,7 +11,7 @@
         "build": "yarn pre_build && tsc -b",
         "build:ci": "yarn build",
         "pre_build": "run-s copy_test_fixtures",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "test": "run-s compile_test run_mocha",
         "rebuild_and_test": "run-s clean build test",
         "test:coverage": "nyc npm run test --all && yarn coverage:report:lcov",
diff --git a/packages/sol-doc/package.json b/packages/sol-doc/package.json
index de10b9e17..b1e887fa5 100644
--- a/packages/sol-doc/package.json
+++ b/packages/sol-doc/package.json
@@ -11,7 +11,7 @@
         "test:circleci": "yarn test:coverage",
         "test:coverage": "nyc npm run test --all && yarn coverage:report:lcov",
         "coverage:report:lcov": "nyc report --reporter=text-lcov > coverage/lcov.info",
-        "lint": "tslint --project . --format stylish",
+        "lint": "tslint --format stylish --project .",
         "clean": "shx rm -rf lib",
         "generate-v1-protocol-docs": "(cd ../contracts/src/1.0.0; node ../../../../node_modules/.bin/sol-doc --contracts-dir . --contracts Exchange/Exchange_v1.sol TokenRegistry/TokenRegistry.sol TokenTransferProxy/TokenTransferProxy_v1.sol) > v1.0.0.json",
         "generate-v2-protocol-docs": "(cd ../contracts/src/2.0.0; node ../../../../node_modules/.bin/sol-doc --contracts-dir . --contracts Exchange/Exchange.sol AssetProxy/ERC20Proxy.sol AssetProxy/ERC721Proxy.sol OrderValidator/OrderValidator.sol Forwarder/Forwarder.sol  AssetProxyOwner/AssetProxyOwner.sol) > v2.0.0.json",
diff --git a/packages/sol-resolver/package.json b/packages/sol-resolver/package.json
index 4bd63f406..4d4d0be0e 100644
--- a/packages/sol-resolver/package.json
+++ b/packages/sol-resolver/package.json
@@ -11,7 +11,7 @@
         "build": "tsc -b",
         "build:ci": "yarn build",
         "clean": "shx rm -rf lib",
-        "lint": "tslint --project ."
+        "lint": "tslint --format stylish --project ."
     },
     "repository": {
         "type": "git",
diff --git a/packages/sra-spec/package.json b/packages/sra-spec/package.json
index 0c55465d7..2d3e7decd 100644
--- a/packages/sra-spec/package.json
+++ b/packages/sra-spec/package.json
@@ -10,7 +10,7 @@
     "scripts": {
         "serve": "redoc-cli serve lib/api.json --watch",
         "watch_without_deps": "run-p build:watch serve",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "test": "swagger-cli validate lib/api.json",
         "rebuild_and_test": "run-s clean build test",
         "test:coverage": "nyc npm run test --all && yarn coverage:report:lcov",
diff --git a/packages/subproviders/package.json b/packages/subproviders/package.json
index 4eef09fe6..32e2bae24 100644
--- a/packages/subproviders/package.json
+++ b/packages/subproviders/package.json
@@ -11,7 +11,7 @@
         "build": "tsc -b",
         "build:ci": "yarn build",
         "clean": "shx rm -rf lib generated_docs",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "run_mocha_unit": "mocha --require source-map-support/register --require make-promises-safe lib/test/unit/**/*_test.js --timeout 10000 --bail --exit",
         "run_mocha_integration": "mocha --require source-map-support/register --require make-promises-safe lib/test/integration/**/*_test.js --timeout 10000 --bail --exit",
         "test": "npm run test:unit",
diff --git a/packages/testnet-faucets/package.json b/packages/testnet-faucets/package.json
index e683ae25a..53f1b95df 100644
--- a/packages/testnet-faucets/package.json
+++ b/packages/testnet-faucets/package.json
@@ -12,7 +12,7 @@
         "build:ci": "yarn build",
         "dev": "node ../../node_modules/gulp/bin/gulp.js run",
         "start": "node ./server/server.js",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "clean": "shx rm -rf server"
     },
     "author": "Fabio Berger",
diff --git a/packages/tslint-config/package.json b/packages/tslint-config/package.json
index 0a8c1b245..a235532fb 100644
--- a/packages/tslint-config/package.json
+++ b/packages/tslint-config/package.json
@@ -10,7 +10,7 @@
         "build": "tsc -b",
         "build:ci": "yarn build",
         "clean": "shx rm -rf lib",
-        "lint": "tslint --project ."
+        "lint": "tslint --format stylish --project ."
     },
     "repository": {
         "type": "git",
diff --git a/packages/types/package.json b/packages/types/package.json
index fdd68a486..9b3ae6701 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -11,7 +11,7 @@
         "build": "tsc -b",
         "build:ci": "yarn build",
         "clean": "shx rm -rf lib",
-        "lint": "tslint --project ."
+        "lint": "tslint --format stylish --project ."
     },
     "license": "Apache-2.0",
     "repository": {
diff --git a/packages/utils/package.json b/packages/utils/package.json
index f89cfda17..4e0df9275 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -11,7 +11,7 @@
         "build": "tsc -b",
         "build:ci": "yarn build",
         "clean": "shx rm -rf lib",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "test": "yarn run_mocha",
         "test:circleci": "yarn test:coverage",
         "run_mocha": "mocha --require source-map-support/register --require make-promises-safe lib/test/**/*_test.js --bail --exit",
diff --git a/packages/web3-wrapper/package.json b/packages/web3-wrapper/package.json
index 579957747..e95245df8 100644
--- a/packages/web3-wrapper/package.json
+++ b/packages/web3-wrapper/package.json
@@ -11,7 +11,7 @@
         "build": "tsc -b",
         "build:ci": "yarn build",
         "clean": "shx rm -rf lib generated_docs",
-        "lint": "tslint --project .",
+        "lint": "tslint --format stylish --project .",
         "test": "yarn run_mocha",
         "rebuild_and_test": "run-s clean build test",
         "test:circleci": "yarn test:coverage",
diff --git a/packages/website/package.json b/packages/website/package.json
index 771b1b908..efb97d309 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -10,7 +10,7 @@
         "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production",
         "build:dev": "../../node_modules/.bin/webpack --mode development",
         "clean": "shx rm -f public/bundle*",
-        "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'",
+        "lint": "tslint --format stylish --project . 'ts/**/*.ts' 'ts/**/*.tsx'",
         "dev": "webpack-dev-server --mode development --content-base public --https",
         "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
         "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
-- 
cgit v1.2.3


From 9c26334eff75087f52db152aa2715681504cda78 Mon Sep 17 00:00:00 2001
From: Alex Browne <stephenalexbrowne@gmail.com>
Date: Tue, 23 Oct 2018 18:30:27 -0700
Subject: fix(contract-wrappers): Fix tslint errors that were lingering due to
 misconfiguration

---
 .../src/contract_wrappers/contract_wrapper.ts               |  6 +++---
 .../src/contract_wrappers/erc20_proxy_wrapper.ts            |  1 +
 .../src/contract_wrappers/erc20_token_wrapper.ts            | 13 ++++++-------
 .../src/contract_wrappers/erc721_proxy_wrapper.ts           |  1 +
 .../src/contract_wrappers/erc721_token_wrapper.ts           | 13 ++++++-------
 .../src/contract_wrappers/ether_token_wrapper.ts            | 11 +++++------
 .../src/contract_wrappers/exchange_wrapper.ts               |  4 ++--
 .../src/contract_wrappers/forwarder_wrapper.ts              |  6 +++---
 packages/contract-wrappers/src/utils/utils.ts               |  4 ++++
 9 files changed, 31 insertions(+), 28 deletions(-)

(limited to 'packages')

diff --git a/packages/contract-wrappers/src/contract_wrappers/contract_wrapper.ts b/packages/contract-wrappers/src/contract_wrappers/contract_wrapper.ts
index 7b11f35bc..749aaae10 100644
--- a/packages/contract-wrappers/src/contract_wrappers/contract_wrapper.ts
+++ b/packages/contract-wrappers/src/contract_wrappers/contract_wrapper.ts
@@ -28,10 +28,10 @@ export abstract class ContractWrapper {
     protected _networkId: number;
     protected _web3Wrapper: Web3Wrapper;
     private _blockAndLogStreamerIfExists: BlockAndLogStreamer<Block, Log> | undefined;
-    private _blockPollingIntervalMs: number;
+    private readonly _blockPollingIntervalMs: number;
     private _blockAndLogStreamIntervalIfExists?: NodeJS.Timer;
-    private _filters: { [filterToken: string]: FilterObject };
-    private _filterCallbacks: {
+    private readonly _filters: { [filterToken: string]: FilterObject };
+    private readonly _filterCallbacks: {
         [filterToken: string]: EventCallback<ContractEventArgs>;
     };
     private _onLogAddedSubscriptionToken: string | undefined;
diff --git a/packages/contract-wrappers/src/contract_wrappers/erc20_proxy_wrapper.ts b/packages/contract-wrappers/src/contract_wrappers/erc20_proxy_wrapper.ts
index adf8c7614..12433c2d7 100644
--- a/packages/contract-wrappers/src/contract_wrappers/erc20_proxy_wrapper.ts
+++ b/packages/contract-wrappers/src/contract_wrappers/erc20_proxy_wrapper.ts
@@ -34,6 +34,7 @@ export class ERC20ProxyWrapper extends ContractWrapper {
      */
     public async getProxyIdAsync(): Promise<AssetProxyId> {
         const ERC20ProxyContractInstance = this._getERC20ProxyContract();
+        /* tslint:disable-next-line:no-unnecessary-type-assertion */
         const proxyId = (await ERC20ProxyContractInstance.getProxyId.callAsync()) as AssetProxyId;
         return proxyId;
     }
diff --git a/packages/contract-wrappers/src/contract_wrappers/erc20_token_wrapper.ts b/packages/contract-wrappers/src/contract_wrappers/erc20_token_wrapper.ts
index f5fc63b42..5e0ec1951 100644
--- a/packages/contract-wrappers/src/contract_wrappers/erc20_token_wrapper.ts
+++ b/packages/contract-wrappers/src/contract_wrappers/erc20_token_wrapper.ts
@@ -18,12 +18,11 @@ import {
 } from '../types';
 import { assert } from '../utils/assert';
 import { constants } from '../utils/constants';
+import { utils } from '../utils/utils';
 
 import { ContractWrapper } from './contract_wrapper';
 import { ERC20ProxyWrapper } from './erc20_proxy_wrapper';
 
-const removeUndefinedProperties = _.pickBy;
-
 /**
  * This class includes all the functionality related to interacting with ERC20 token contracts.
  * All ERC20 method calls are supported, along with some convenience methods for getting/setting allowances
@@ -32,8 +31,8 @@ const removeUndefinedProperties = _.pickBy;
 export class ERC20TokenWrapper extends ContractWrapper {
     public abi: ContractAbi = ERC20Token.compilerOutput.abi;
     public UNLIMITED_ALLOWANCE_IN_BASE_UNITS = constants.UNLIMITED_ALLOWANCE_IN_BASE_UNITS;
-    private _tokenContractsByAddress: { [address: string]: ERC20TokenContract };
-    private _erc20ProxyWrapper: ERC20ProxyWrapper;
+    private readonly _tokenContractsByAddress: { [address: string]: ERC20TokenContract };
+    private readonly _erc20ProxyWrapper: ERC20ProxyWrapper;
     /**
      * Instantiate ERC20TokenWrapper
      * @param web3Wrapper Web3Wrapper instance to use
@@ -108,7 +107,7 @@ export class ERC20TokenWrapper extends ContractWrapper {
         const txHash = await tokenContract.approve.sendTransactionAsync(
             normalizedSpenderAddress,
             amountInBaseUnits,
-            removeUndefinedProperties({
+            utils.removeUndefinedProperties({
                 from: normalizedOwnerAddress,
                 gas: txOpts.gasLimit,
                 gasPrice: txOpts.gasPrice,
@@ -278,7 +277,7 @@ export class ERC20TokenWrapper extends ContractWrapper {
         const txHash = await tokenContract.transfer.sendTransactionAsync(
             normalizedToAddress,
             amountInBaseUnits,
-            removeUndefinedProperties({
+            utils.removeUndefinedProperties({
                 from: normalizedFromAddress,
                 gas: txOpts.gasLimit,
                 gasPrice: txOpts.gasPrice,
@@ -339,7 +338,7 @@ export class ERC20TokenWrapper extends ContractWrapper {
             normalizedFromAddress,
             normalizedToAddress,
             amountInBaseUnits,
-            removeUndefinedProperties({
+            utils.removeUndefinedProperties({
                 from: normalizedSenderAddress,
                 gas: txOpts.gasLimit,
                 gasPrice: txOpts.gasPrice,
diff --git a/packages/contract-wrappers/src/contract_wrappers/erc721_proxy_wrapper.ts b/packages/contract-wrappers/src/contract_wrappers/erc721_proxy_wrapper.ts
index 9f3a6930b..6d08619a3 100644
--- a/packages/contract-wrappers/src/contract_wrappers/erc721_proxy_wrapper.ts
+++ b/packages/contract-wrappers/src/contract_wrappers/erc721_proxy_wrapper.ts
@@ -34,6 +34,7 @@ export class ERC721ProxyWrapper extends ContractWrapper {
      */
     public async getProxyIdAsync(): Promise<AssetProxyId> {
         const ERC721ProxyContractInstance = await this._getERC721ProxyContract();
+        /* tslint:disable-next-line:no-unnecessary-type-assertion */
         const proxyId = (await ERC721ProxyContractInstance.getProxyId.callAsync()) as AssetProxyId;
         return proxyId;
     }
diff --git a/packages/contract-wrappers/src/contract_wrappers/erc721_token_wrapper.ts b/packages/contract-wrappers/src/contract_wrappers/erc721_token_wrapper.ts
index 1c4b61c0b..1610af47b 100644
--- a/packages/contract-wrappers/src/contract_wrappers/erc721_token_wrapper.ts
+++ b/packages/contract-wrappers/src/contract_wrappers/erc721_token_wrapper.ts
@@ -18,12 +18,11 @@ import {
 } from '../types';
 import { assert } from '../utils/assert';
 import { constants } from '../utils/constants';
+import { utils } from '../utils/utils';
 
 import { ContractWrapper } from './contract_wrapper';
 import { ERC721ProxyWrapper } from './erc721_proxy_wrapper';
 
-const removeUndefinedProperties = _.pickBy;
-
 /**
  * This class includes all the functionality related to interacting with ERC721 token contracts.
  * All ERC721 method calls are supported, along with some convenience methods for getting/setting allowances
@@ -31,8 +30,8 @@ const removeUndefinedProperties = _.pickBy;
  */
 export class ERC721TokenWrapper extends ContractWrapper {
     public abi: ContractAbi = ERC721Token.compilerOutput.abi;
-    private _tokenContractsByAddress: { [address: string]: ERC721TokenContract };
-    private _erc721ProxyWrapper: ERC721ProxyWrapper;
+    private readonly _tokenContractsByAddress: { [address: string]: ERC721TokenContract };
+    private readonly _erc721ProxyWrapper: ERC721ProxyWrapper;
     /**
      * Instantiate ERC721TokenWrapper
      * @param web3Wrapper Web3Wrapper instance to use
@@ -235,7 +234,7 @@ export class ERC721TokenWrapper extends ContractWrapper {
         const txHash = await tokenContract.setApprovalForAll.sendTransactionAsync(
             normalizedOperatorAddress,
             isApproved,
-            removeUndefinedProperties({
+            utils.removeUndefinedProperties({
                 gas: txOpts.gasLimit,
                 gasPrice: txOpts.gasPrice,
                 from: normalizedOwnerAddress,
@@ -295,7 +294,7 @@ export class ERC721TokenWrapper extends ContractWrapper {
         const txHash = await tokenContract.approve.sendTransactionAsync(
             normalizedApprovedAddress,
             tokenId,
-            removeUndefinedProperties({
+            utils.removeUndefinedProperties({
                 gas: txOpts.gasLimit,
                 gasPrice: txOpts.gasPrice,
                 from: tokenOwnerAddress,
@@ -366,7 +365,7 @@ export class ERC721TokenWrapper extends ContractWrapper {
             ownerAddress,
             normalizedReceiverAddress,
             tokenId,
-            removeUndefinedProperties({
+            utils.removeUndefinedProperties({
                 gas: txOpts.gasLimit,
                 gasPrice: txOpts.gasPrice,
                 from: normalizedSenderAddress,
diff --git a/packages/contract-wrappers/src/contract_wrappers/ether_token_wrapper.ts b/packages/contract-wrappers/src/contract_wrappers/ether_token_wrapper.ts
index d4a08da86..913c47cf7 100644
--- a/packages/contract-wrappers/src/contract_wrappers/ether_token_wrapper.ts
+++ b/packages/contract-wrappers/src/contract_wrappers/ether_token_wrapper.ts
@@ -8,22 +8,21 @@ import * as _ from 'lodash';
 
 import { BlockRange, ContractWrappersError, EventCallback, IndexedFilterValues, TransactionOpts } from '../types';
 import { assert } from '../utils/assert';
+import { utils } from '../utils/utils';
 
 import { ContractWrapper } from './contract_wrapper';
 import { ERC20TokenWrapper } from './erc20_token_wrapper';
 
-const removeUndefinedProperties = _.pickBy;
-
 /**
  * This class includes all the functionality related to interacting with a wrapped Ether ERC20 token contract.
  * The caller can convert ETH into the equivalent number of wrapped ETH ERC20 tokens and back.
  */
 export class EtherTokenWrapper extends ContractWrapper {
     public abi: ContractAbi = WETH9.compilerOutput.abi;
-    private _etherTokenContractsByAddress: {
+    private readonly _etherTokenContractsByAddress: {
         [address: string]: WETH9Contract;
     } = {};
-    private _erc20TokenWrapper: ERC20TokenWrapper;
+    private readonly _erc20TokenWrapper: ERC20TokenWrapper;
     /**
      * Instantiate EtherTokenWrapper.
      * @param web3Wrapper Web3Wrapper instance to use
@@ -67,7 +66,7 @@ export class EtherTokenWrapper extends ContractWrapper {
 
         const wethContract = await this._getEtherTokenContractAsync(normalizedEtherTokenAddress);
         const txHash = await wethContract.deposit.sendTransactionAsync(
-            removeUndefinedProperties({
+            utils.removeUndefinedProperties({
                 from: normalizedDepositorAddress,
                 value: amountInWei,
                 gas: txOpts.gasLimit,
@@ -109,7 +108,7 @@ export class EtherTokenWrapper extends ContractWrapper {
         const wethContract = await this._getEtherTokenContractAsync(normalizedEtherTokenAddress);
         const txHash = await wethContract.withdraw.sendTransactionAsync(
             amountInWei,
-            removeUndefinedProperties({
+            utils.removeUndefinedProperties({
                 from: normalizedWithdrawerAddress,
                 gas: txOpts.gasLimit,
                 gasPrice: txOpts.gasPrice,
diff --git a/packages/contract-wrappers/src/contract_wrappers/exchange_wrapper.ts b/packages/contract-wrappers/src/contract_wrappers/exchange_wrapper.ts
index 907d25aa0..2e978f35b 100644
--- a/packages/contract-wrappers/src/contract_wrappers/exchange_wrapper.ts
+++ b/packages/contract-wrappers/src/contract_wrappers/exchange_wrapper.ts
@@ -46,8 +46,8 @@ export class ExchangeWrapper extends ContractWrapper {
     public address: string;
     public zrxTokenAddress: string;
     private _exchangeContractIfExists?: ExchangeContract;
-    private _erc721TokenWrapper: ERC721TokenWrapper;
-    private _erc20TokenWrapper: ERC20TokenWrapper;
+    private readonly _erc721TokenWrapper: ERC721TokenWrapper;
+    private readonly _erc20TokenWrapper: ERC20TokenWrapper;
     /**
      * Instantiate ExchangeWrapper
      * @param web3Wrapper Web3Wrapper instance to use.
diff --git a/packages/contract-wrappers/src/contract_wrappers/forwarder_wrapper.ts b/packages/contract-wrappers/src/contract_wrappers/forwarder_wrapper.ts
index 9463a6849..80742e030 100644
--- a/packages/contract-wrappers/src/contract_wrappers/forwarder_wrapper.ts
+++ b/packages/contract-wrappers/src/contract_wrappers/forwarder_wrapper.ts
@@ -1,7 +1,7 @@
 import { ForwarderContract } from '@0x/abi-gen-wrappers';
 import { Forwarder } from '@0x/contract-artifacts';
 import { schemas } from '@0x/json-schemas';
-import { AssetProxyId, SignedOrder } from '@0x/types';
+import { SignedOrder } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import { ContractAbi } from 'ethereum-types';
@@ -118,7 +118,7 @@ export class ForwarderWrapper extends ContractWrapper {
                 optimizedFeeOrders,
                 feeSignatures,
                 formattedFeePercentage,
-                feeRecipientAddress,
+                normalizedFeeRecipientAddress,
                 {
                     value: ethAmount,
                     from: normalizedTakerAddress,
@@ -207,7 +207,7 @@ export class ForwarderWrapper extends ContractWrapper {
                 optimizedFeeOrders,
                 feeSignatures,
                 formattedFeePercentage,
-                feeRecipientAddress,
+                normalizedFeeRecipientAddress,
                 {
                     value: ethAmount,
                     from: normalizedTakerAddress,
diff --git a/packages/contract-wrappers/src/utils/utils.ts b/packages/contract-wrappers/src/utils/utils.ts
index fbacdaa28..0b3270e78 100644
--- a/packages/contract-wrappers/src/utils/utils.ts
+++ b/packages/contract-wrappers/src/utils/utils.ts
@@ -1,5 +1,6 @@
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
+import * as _ from 'lodash';
 
 import { constants } from './constants';
 
@@ -14,4 +15,7 @@ export const utils = {
     numberPercentageToEtherTokenAmountPercentage(percentage: number): BigNumber {
         return Web3Wrapper.toBaseUnitAmount(constants.ONE_AMOUNT, constants.ETHER_TOKEN_DECIMALS).mul(percentage);
     },
+    removeUndefinedProperties<T extends object>(obj: T): Partial<T> {
+        return _.pickBy(obj);
+    },
 };
-- 
cgit v1.2.3


From b737313d16bfc331e7dcc5b733c7503f32b0f01c Mon Sep 17 00:00:00 2001
From: Alex Browne <stephenalexbrowne@gmail.com>
Date: Tue, 23 Oct 2018 18:36:15 -0700
Subject: chore: Update contract-wrappers CHANGELOG.json

---
 packages/contract-wrappers/CHANGELOG.json | 9 +++++++++
 1 file changed, 9 insertions(+)

(limited to 'packages')

diff --git a/packages/contract-wrappers/CHANGELOG.json b/packages/contract-wrappers/CHANGELOG.json
index c3d986b4a..9ff372e33 100644
--- a/packages/contract-wrappers/CHANGELOG.json
+++ b/packages/contract-wrappers/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "3.0.1",
+        "changes": [
+            {
+                "note": "Fix bug in `ForwarderWrapper` where `feeRecipientAddress` was not correctly normalized.",
+                "pr": 1178
+            }
+        ]
+    },
     {
         "version": "3.0.0",
         "changes": [
-- 
cgit v1.2.3


From 47737d4d0fce56454c9ee2b43782b824b88cb942 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 20:02:50 -0700
Subject: feat: cover more token symbol edge cases

---
 .../instant/src/components/asset_amount_input.tsx   | 21 +++++++++++++++++----
 packages/instant/src/components/instant_heading.tsx |  4 ++--
 packages/instant/src/components/scaling_input.tsx   |  2 +-
 packages/instant/src/components/ui/container.tsx    |  2 ++
 packages/instant/src/util/format.ts                 |  2 +-
 packages/instant/test/util/format.test.ts           |  8 ++++----
 6 files changed, 27 insertions(+), 12 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index 368ef10c2..960b8bc95 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -8,7 +8,7 @@ import { assetUtils } from '../util/asset';
 import { util } from '../util/util';
 
 import { ScalingAmountInput } from './scaling_amount_input';
-import { Container, Text } from './ui';
+import { Container, Flex, Text } from './ui';
 
 // Asset amounts only apply to ERC20 assets
 export interface AssetAmountInputProps {
@@ -35,17 +35,17 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
     public render(): React.ReactNode {
         const { asset, onChange, ...rest } = this.props;
         return (
-            <Container>
+            <Container whiteSpace="nowrap">
                 <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
                     <ScalingAmountInput
                         {...rest}
-                        textLengthThreshold={4}
+                        textLengthThreshold={this._textLengthThresholdForAsset(asset)}
                         maxFontSizePx={this.props.startingFontSizePx}
                         onChange={this._handleChange}
                         onFontSizeChange={this._handleFontSizeChange}
                     />
                 </Container>
-                <Container display="inline-block" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
+                <Container display="inline-flex" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
                     <Text
                         fontSize={`${this.state.currentFontSizePx}px`}
                         fontColor={ColorOption.white}
@@ -65,4 +65,17 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
             currentFontSizePx: fontSizePx,
         });
     };
+    private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => {
+        if (_.isUndefined(asset)) {
+            return 3;
+        }
+        const symbol = asset.metaData.symbol;
+        if (symbol.length <= 3) {
+            return 5;
+        }
+        if (symbol.length === 5) {
+            return 3;
+        }
+        return 4;
+    };
 }
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 7664d31ae..c9f0ea95a 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -70,10 +70,10 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
         </Container>
         <Flex direction="row" justify="space-between">
             <Flex height="65px">
-                <SelectedAssetAmountInput startingFontSizePx={45} />
+                <SelectedAssetAmountInput startingFontSizePx={38} />
             </Flex>
             <Flex direction="column" justify="space-between">
-                <Container marginBottom="5px">
+                <Container marginBottom="5px" whiteSpace="nowrap">
                     <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
                         {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))}
                     </Text>
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 7f8e505de..fadb3466b 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -47,7 +47,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
-        maxLength: 8,
+        maxLength: 7,
         scalingSettings: defaultScalingSettings,
     };
     public state = {
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 293042120..e44cfff1e 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -26,6 +26,7 @@ export interface ContainerProps {
     backgroundColor?: ColorOption;
     hasBoxShadow?: boolean;
     zIndex?: number;
+    whiteSpace?: string;
 }
 
 export const Container = styled<ContainerProps, 'div'>('div')`
@@ -50,6 +51,7 @@ export const Container = styled<ContainerProps, 'div'>('div')`
     ${props => cssRuleIfExists(props, 'border-top')}
     ${props => cssRuleIfExists(props, 'border-bottom')}
     ${props => cssRuleIfExists(props, 'z-index')}
+    ${props => cssRuleIfExists(props, 'white-space')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts
index 8482b1526..ca7c01359 100644
--- a/packages/instant/src/util/format.ts
+++ b/packages/instant/src/util/format.ts
@@ -24,7 +24,7 @@ export const format = {
         if (_.isUndefined(ethUnitAmount)) {
             return defaultText;
         }
-        const roundedAmount = ethUnitAmount.round(decimalPlaces);
+        const roundedAmount = ethUnitAmount.round(decimalPlaces).toDigits(decimalPlaces);
         return `${roundedAmount} ETH`;
     },
     ethBaseAmountInUsd: (
diff --git a/packages/instant/test/util/format.test.ts b/packages/instant/test/util/format.test.ts
index 141df9275..2c9294c78 100644
--- a/packages/instant/test/util/format.test.ts
+++ b/packages/instant/test/util/format.test.ts
@@ -20,8 +20,8 @@ describe('format', () => {
         it('converts .432414 ETH in base units to the string `.4324 ETH`', () => {
             expect(format.ethBaseAmount(DECIMAL_ETH_IN_BASE_UNITS)).toBe('0.4324 ETH');
         });
-        it('converts 5.3014059295032 ETH in base units to the string `5.3014 ETH`', () => {
-            expect(format.ethBaseAmount(IRRATIONAL_ETH_IN_BASE_UNITS)).toBe('5.3014 ETH');
+        it('converts 5.3014059295032 ETH in base units to the string `5.301 ETH`', () => {
+            expect(format.ethBaseAmount(IRRATIONAL_ETH_IN_BASE_UNITS)).toBe('5.301 ETH');
         });
         it('returns defaultText param when ethBaseAmount is not defined', () => {
             const defaultText = 'defaultText';
@@ -38,8 +38,8 @@ describe('format', () => {
         it('converts BigNumer(.432414) to the string `.4324 ETH`', () => {
             expect(format.ethUnitAmount(BIG_NUMBER_DECIMAL)).toBe('0.4324 ETH');
         });
-        it('converts BigNumber(5.3014059295032) to the string `5.3014 ETH`', () => {
-            expect(format.ethUnitAmount(BIG_NUMBER_IRRATIONAL)).toBe('5.3014 ETH');
+        it('converts BigNumber(5.3014059295032) to the string `5.301 ETH`', () => {
+            expect(format.ethUnitAmount(BIG_NUMBER_IRRATIONAL)).toBe('5.301 ETH');
         });
         it('returns defaultText param when ethUnitAmount is not defined', () => {
             const defaultText = 'defaultText';
-- 
cgit v1.2.3


From f89b314a94f867fa905a1ce18eba9336ee4d1634 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 12:52:32 -0700
Subject: fix: address PR feedback

---
 packages/instant/src/components/scaling_input.tsx | 8 ++++----
 packages/instant/src/style/fonts.ts               | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index fadb3466b..6948c86c1 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -53,7 +53,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     public state = {
         inputWidthPxAtPhaseChange: undefined,
     };
-    private readonly _inputRef = React.createRef();
+    private readonly _inputRef = React.createRef<HTMLInputElement>();
     public static getPhase(textLengthThreshold: number, value: string): ScalingInputPhase {
         if (value.length <= textLengthThreshold) {
             return ScalingInputPhase.FixedFontSize;
@@ -101,8 +101,6 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     ): void {
         const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
         const curPhase = ScalingInput.getPhaseFromProps(this.props);
-        const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase);
-        const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase);
         // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
         if (prevPhase !== ScalingInputPhase.ScalingFontSize && curPhase === ScalingInputPhase.ScalingFontSize) {
             this.setState({
@@ -115,6 +113,8 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 inputWidthPxAtPhaseChange: undefined,
             });
         }
+        const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase);
+        const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase);
         // If font size has changed, notify.
         if (prevFontSize !== curFontSize) {
             this.props.onFontSizeChange(curFontSize);
@@ -166,6 +166,6 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         if (!ref) {
             return 0;
         }
-        return (ref as any).getBoundingClientRect().width;
+        return ref.getBoundingClientRect().width;
     };
 }
diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts
index f305fd612..92450502d 100644
--- a/packages/instant/src/style/fonts.ts
+++ b/packages/instant/src/style/fonts.ts
@@ -1,10 +1,10 @@
 export const fonts = {
     include: () => {
         // Inject the inter-ui font into the page
-        const head = document.head || document.getElementsByTagName('head')[0];
+        const appendTo = document.head || document.getElementsByTagName('head')[0] || document.body;
         const style = document.createElement('style');
         style.type = 'text/css';
         style.appendChild(document.createTextNode(`@import url('https://rsms.me/inter/inter-ui.css')`));
-        head.appendChild(style);
+        appendTo.appendChild(style);
     },
 };
-- 
cgit v1.2.3


From c5554fe30c199155d4e020028aa4aa1f808918b9 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 12:57:20 -0700
Subject: chore: run linter

---
 packages/instant/src/components/asset_amount_input.tsx | 2 +-
 packages/instant/src/util/asset.ts                     | 2 +-
 packages/instant/src/util/big_number.ts                | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index 960b8bc95..4d2dc0bd8 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -8,7 +8,7 @@ import { assetUtils } from '../util/asset';
 import { util } from '../util/util';
 
 import { ScalingAmountInput } from './scaling_amount_input';
-import { Container, Flex, Text } from './ui';
+import { Container, Text } from './ui';
 
 // Asset amounts only apply to ERC20 assets
 export interface AssetAmountInputProps {
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index ebeba948e..e42727d84 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -2,7 +2,7 @@ import { AssetProxyId, ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
 
 import { assetDataNetworkMapping } from '../data/asset_data_network_mapping';
-import { Asset, AssetMetaData, Network, ZeroExInstantError, ERC20Asset } from '../types';
+import { Asset, AssetMetaData, ERC20Asset, Network, ZeroExInstantError } from '../types';
 
 export const assetUtils = {
     createAssetFromAssetData: (
diff --git a/packages/instant/src/util/big_number.ts b/packages/instant/src/util/big_number.ts
index 773eb0cb4..a34d22d76 100644
--- a/packages/instant/src/util/big_number.ts
+++ b/packages/instant/src/util/big_number.ts
@@ -9,7 +9,7 @@ import * as _ from 'lodash';
  *  new BigNumberInput(1..) => still throws
  */
 export class BigNumberInput extends BigNumber {
-    private _hasDecimalPeriod: boolean;
+    private readonly _hasDecimalPeriod: boolean;
     constructor(bigNumberString: string) {
         const hasDecimalPeriod = _.endsWith(bigNumberString, '.');
         let internalString = bigNumberString;
-- 
cgit v1.2.3


From 2d9c961d4f0d03cfd2f3c15dd306fad47ad1f259 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 13:05:52 -0700
Subject: feat: change to increasing input width by a constant amount per
 additional character

---
 packages/instant/src/components/scaling_input.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 6948c86c1..fd517def8 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -13,7 +13,7 @@ export enum ScalingInputPhase {
 
 export interface ScalingSettings {
     percentageToReduceFontSizePerCharacter: number;
-    percentageToIncreaseWidthPerCharacter: number;
+    constantPxToIncreaseWidthPerCharacter: number;
 }
 
 export interface ScalingInputProps {
@@ -40,7 +40,7 @@ export interface ScalingInputSnapshot {
 // These are magic numbers that were determined experimentally.
 const defaultScalingSettings: ScalingSettings = {
     percentageToReduceFontSizePerCharacter: 0.125,
-    percentageToIncreaseWidthPerCharacter: 0.06,
+    constantPxToIncreaseWidthPerCharacter: 4,
 };
 
 export class ScalingInput extends React.Component<ScalingInputProps, ScalingInputState> {
@@ -148,9 +148,8 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 const { inputWidthPxAtPhaseChange } = this.state;
                 if (!_.isUndefined(inputWidthPxAtPhaseChange)) {
                     const charactersOverMax = value.length - textLengthThreshold;
-                    const scalingFactor =
-                        (scalingSettings.percentageToIncreaseWidthPerCharacter + 1) ** charactersOverMax;
-                    const width = scalingFactor * inputWidthPxAtPhaseChange;
+                    const scalingAmount = scalingSettings.constantPxToIncreaseWidthPerCharacter * charactersOverMax;
+                    const width = inputWidthPxAtPhaseChange + scalingAmount;
                     return `${width}px`;
                 }
                 return `${textLengthThreshold}ch`;
-- 
cgit v1.2.3


From c7a063ca47c3a5b62fe070ba10055b575c1707de Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 13:38:28 -0700
Subject: fix: weird linting error that depends on types

---
 packages/instant/src/components/scaling_input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index fd517def8..c927f9419 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -50,7 +50,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         maxLength: 7,
         scalingSettings: defaultScalingSettings,
     };
-    public state = {
+    public state: ScalingInputState = {
         inputWidthPxAtPhaseChange: undefined,
     };
     private readonly _inputRef = React.createRef<HTMLInputElement>();
-- 
cgit v1.2.3


From 379f7c788385cfc15fea8d0bb0a2a39f0c709b8d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 13:44:00 -0700
Subject: chore: use alternate syntax for styled

---
 packages/instant/src/components/ui/container.tsx | 5 ++++-
 packages/instant/src/components/ui/flex.tsx      | 5 ++++-
 packages/instant/src/components/ui/input.tsx     | 5 ++++-
 packages/instant/src/components/ui/text.tsx      | 5 ++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 7077d0aa3..76b570de7 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -30,7 +30,10 @@ export interface ContainerProps {
     opacity?: number;
 }
 
-export const Container = styled<ContainerProps, 'div'>('div')`
+export const Container =
+    styled.div <
+    ContainerProps >
+    `
     box-sizing: border-box;
     ${props => cssRuleIfExists(props, 'display')}
     ${props => cssRuleIfExists(props, 'position')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index d4e14d979..5fa3fc95b 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -12,7 +12,10 @@ export interface FlexProps {
     className?: string;
 }
 
-export const Flex = styled<FlexProps, 'div'>('div')`
+export const Flex =
+    styled.div <
+    FlexProps >
+    `
     display: flex;
     flex-direction: ${props => props.direction};
     flex-wrap: ${props => props.flexWrap};
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 9db7d1c4c..a884ff7cb 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -12,7 +12,10 @@ export interface InputProps {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Input = styled<InputProps, 'input'>('input')`
+export const Input =
+    styled.input <
+    InputProps >
+    `
     font-size: ${props => props.fontSize};
     width: ${props => props.width};
     padding: 0.1em 0em;
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index d23b0034d..fd72f6cc8 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -24,7 +24,10 @@ export interface TextProps {
 }
 
 const darkenOnHoverAmount = 0.3;
-export const Text = styled<TextProps, 'div'>('div')`
+export const Text =
+    styled.div <
+    TextProps >
+    `
     font-family: ${props => props.fontFamily};
     font-style: ${props => props.fontStyle};
     font-weight: ${props => props.fontWeight};
-- 
cgit v1.2.3


From ab2759f43105c0f2d441790e138840706c6759f8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 13:47:00 -0700
Subject: chore: update comments

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

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index c927f9419..34cb0b5fd 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -101,13 +101,13 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     ): void {
         const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
         const curPhase = ScalingInput.getPhaseFromProps(this.props);
-        // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
+        // if we went from fixed to scaling, save the width from the transition
         if (prevPhase !== ScalingInputPhase.ScalingFontSize && curPhase === ScalingInputPhase.ScalingFontSize) {
             this.setState({
                 inputWidthPxAtPhaseChange: snapshot.inputWidthPx,
             });
         }
-        // if we end from end to to anything else, un-fix the width
+        // if we went from scaling to fixed, revert back to scaling using `ch`
         if (prevPhase === ScalingInputPhase.ScalingFontSize && curPhase !== ScalingInputPhase.ScalingFontSize) {
             this.setState({
                 inputWidthPxAtPhaseChange: undefined,
-- 
cgit v1.2.3


From 46a8aad87a978567026881d8c1db998ac14eab4e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 14:12:24 -0700
Subject: feat: no longer require separate `orders` and `feeOrders` args in
 `getAssetBuyerForProvidedOrders`

BREAKING_CHANGE: `getAssetBuyerForProvidedOrders` factory function now takes 3 args instead of 4
---
 packages/asset-buyer/src/asset_buyer.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/asset-buyer/src/asset_buyer.ts b/packages/asset-buyer/src/asset_buyer.ts
index 2f9a3108e..80437c10e 100644
--- a/packages/asset-buyer/src/asset_buyer.ts
+++ b/packages/asset-buyer/src/asset_buyer.ts
@@ -52,16 +52,13 @@ export class AssetBuyer {
     public static getAssetBuyerForProvidedOrders(
         provider: Provider,
         orders: SignedOrder[],
-        feeOrders: SignedOrder[] = [],
         options: Partial<AssetBuyerOpts> = {},
     ): AssetBuyer {
         assert.isWeb3Provider('provider', provider);
         assert.doesConformToSchema('orders', orders, schemas.signedOrdersSchema);
-        assert.doesConformToSchema('feeOrders', feeOrders, schemas.signedOrdersSchema);
         assert.areValidProvidedOrders('orders', orders);
-        assert.areValidProvidedOrders('feeOrders', feeOrders);
         assert.assert(orders.length !== 0, `Expected orders to contain at least one order`);
-        const orderProvider = new BasicOrderProvider(_.concat(orders, feeOrders));
+        const orderProvider = new BasicOrderProvider(orders);
         const assetBuyer = new AssetBuyer(provider, orderProvider, options);
         return assetBuyer;
     }
-- 
cgit v1.2.3


From 2a1c2a55eda0f3d279aa1145b6157892d03001ae Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 25 Oct 2018 11:43:53 -0700
Subject: feat: supply render options from URL

---
 packages/contract-addresses/src/index.ts           |  2 +-
 packages/instant/public/index.html                 | 43 +++++++++++++++++++++-
 .../instant/src/components/zero_ex_instant.tsx     | 21 ++++++++---
 packages/instant/src/util/error.ts                 |  1 -
 4 files changed, 58 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/contract-addresses/src/index.ts b/packages/contract-addresses/src/index.ts
index 1ea8c61dd..8af7cd8ab 100644
--- a/packages/contract-addresses/src/index.ts
+++ b/packages/contract-addresses/src/index.ts
@@ -45,7 +45,7 @@ const networkToAddresses: { [networkId: number]: ContractAddresses } = {
         etherToken: '0xd0a1e359811322d97991e03f863a0c30c2cf029c',
         exchange: '0x35dd2932454449b14cee11a94d3674a936d5d7b2',
         assetProxyOwner: '0x2c824d2882baa668e0d5202b1e7f2922278703f8',
-        forwarder: '0xd85e2fa7e7e252b27b01bf0d65c946959d2f45b8',
+        forwarder: '0x4859339a70a63f5e32497d865ce793c38ce9c004',
         orderValidator: '0xb389da3d204b412df2f75c6afb3d0a7ce0bc283d',
     },
 };
diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 14555fc64..4c1c52afd 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>0x Instant Dev Environment</title>
     <script type="text/javascript" src="/main.bundle.js" charset="utf-8"></script>
+    <script type="text/javascript" src="https://unpkg.com/jsuri@1.3.1/Uri.js" charset="utf-8"></script>
+    <script type="text/javascript" src="https://unpkg.com/bignumber.js@4.1.0/bignumber.js" charset="utf-8"></script>
     <style>
         #zeroExInstantContainer {
             display: flex;
@@ -24,10 +26,47 @@
 <body>
     <div id="zeroExInstantContainer"></div>
     <script>
-        zeroExInstant.render({
+        const removeUndefined = (obj) => {
+            for (let k in obj) if (obj[k] === undefined) delete obj[k];
+            return obj;
+        }
+        BigNumber.config({
+            EXPONENTIAL_AT: 1000,
+            DECIMAL_PLACES: 78,
+        });
+        const providedOrder = {
+            senderAddress: '0x0000000000000000000000000000000000000000',
+            makerAddress: '0x14e2f1f157e7dd4057d02817436d628a37120fd1',
+            takerAddress: '0x0000000000000000000000000000000000000000',
+            makerFee: new BigNumber('0'),
+            takerFee: new BigNumber('0'),
+            makerAssetAmount: new BigNumber('100000000000000000000'),
+            takerAssetAmount: new BigNumber('10000000000000000'),
+            makerAssetData: '0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa',
+            takerAssetData: '0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c',
+            expirationTimeSeconds: new BigNumber('1591858800'),
+            feeRecipientAddress: '0x0000000000000000000000000000000000000000',
+            salt: new BigNumber(
+                '54983920541892966634674340965984367456810207583416050222519063020710969340046',
+            ),
+            signature:
+                '0x1b949656218421c845995457303569a656764afa2b979d41dcefff0009d57ce15001490268bc7caa4269894fd83b741465fc5a7a53eda6ece17eb91fb32655d83703',
+            exchangeAddress: '0x35dd2932454449b14cee11a94d3674a936d5d7b2',
+        };
+        const queryParams = new Uri(window.location.search);
+        const renderOptionsDefaults = {
             liquiditySource: 'https://api.radarrelay.com/0x/v2/',
             assetData: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498',
-        });
+        }
+        const liquiditySourceOverride = queryParams.getQueryParamValue('liquiditySource');
+        const renderOptionsOverrides = {
+            liquiditySource: liquiditySourceOverride === 'provided' ? [providedOrder] : liquiditySourceOverride,
+            assetData: queryParams.getQueryParamValue('assetData'),
+            network: +queryParams.getQueryParamValue('network'),
+        }
+        const renderOptions = Object.assign({}, renderOptionsDefaults, removeUndefined(renderOptionsOverrides));
+        console.log(renderOptions)
+        zeroExInstant.render(renderOptions);
     </script>
 </body>
 
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index ffa5a8250..0fe494726 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,5 +1,6 @@
 import { AssetBuyer } from '@0x/asset-buyer';
-import { ObjectMap } from '@0x/types';
+import { ObjectMap, SignedOrder } from '@0x/types';
+import * as _ from 'lodash';
 import * as React from 'react';
 import { Provider } from 'react-redux';
 
@@ -21,8 +22,7 @@ export type ZeroExInstantProps = ZeroExInstantRequiredProps & Partial<ZeroExInst
 export interface ZeroExInstantRequiredProps {
     // TODO: Change API when we allow the selection of different assetDatas
     assetData: string;
-    // TODO: Allow for a function that returns orders
-    liquiditySource: string;
+    liquiditySource: string | SignedOrder[];
 }
 
 export interface ZeroExInstantOptionalProps {
@@ -40,9 +40,20 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
         };
         const { network } = optionalPropsWithDefaults;
         // TODO: Provider needs to not be hard-coded to injected web3.
-        const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(getProvider(), props.liquiditySource, {
+        const provider = getProvider();
+        const assetBuyerOptions = {
             networkId: network,
-        });
+        };
+        let assetBuyer;
+        if (_.isString(props.liquiditySource)) {
+            assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(
+                provider,
+                props.liquiditySource,
+                assetBuyerOptions,
+            );
+        } else {
+            assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.liquiditySource, assetBuyerOptions);
+        }
         const completeAssetMetaDataMap = {
             ...props.additionalAssetMetaDataMap,
             ...state.assetMetaDataMap,
diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts
index 40fd24c7e..f5a3d2cb8 100644
--- a/packages/instant/src/util/error.ts
+++ b/packages/instant/src/util/error.ts
@@ -10,7 +10,6 @@ class ErrorFlasher {
     private _timeoutId?: number;
     public flashNewError(dispatch: Dispatch<Action>, error: any, delayMs: number = 7000): void {
         this._clearTimeout();
-
         // dispatch new message
         dispatch(actions.setError(error));
 
-- 
cgit v1.2.3


From 1a10715fcb21a89aa47cade6d796eeb677f9741d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 25 Oct 2018 14:19:40 -0700
Subject: feat: flash an error if the wrong network is detected

---
 packages/instant/src/components/sliding_error.tsx   | 16 +++++++++-------
 packages/instant/src/components/zero_ex_instant.tsx | 19 ++++++++++++++++++-
 packages/instant/src/util/error.ts                  |  4 ++++
 3 files changed, 31 insertions(+), 8 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 3865a8797..2b55597ec 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -4,7 +4,7 @@ import { ColorOption } from '../style/theme';
 
 import { SlideDownAnimation, SlideUpAnimation } from './animations/slide_animations';
 
-import { Container, Text } from './ui';
+import { Container, Flex, Text } from './ui';
 
 export interface ErrorProps {
     icon: string;
@@ -20,12 +20,14 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
         borderRadius="6px"
         marginBottom="10px"
     >
-        <Container marginRight="5px" display="inline" top="3px" position="relative">
-            <Text fontSize="20px">{props.icon}</Text>
-        </Container>
-        <Text fontWeight="500" fontColor={ColorOption.darkOrange}>
-            {props.message}
-        </Text>
+        <Flex>
+            <Container marginRight="5px" display="inline" top="3px" position="relative">
+                <Text fontSize="20px">{props.icon}</Text>
+            </Container>
+            <Text fontWeight="500" fontColor={ColorOption.darkOrange}>
+                {props.message}
+            </Text>
+        </Flex>
     </Container>
 );
 
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 0fe494726..63d944654 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -11,7 +11,9 @@ import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
 import { AssetMetaData, Network } from '../types';
 import { assetUtils } from '../util/asset';
+import { errorUtil } from '../util/error';
 import { getProvider } from '../util/provider';
+import { web3Wrapper } from '../util/web3_wrapper';
 
 import { ZeroExInstantContainer } from './zero_ex_instant_container';
 
@@ -69,9 +71,15 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
     }
     constructor(props: ZeroExInstantProps) {
         super(props);
-        this._store = store.create(ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE));
+        const initialAppState = ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE);
+        this._store = store.create(initialAppState);
+    }
+
+    public componentDidMount(): void {
         // tslint:disable-next-line:no-floating-promises
         asyncData.fetchAndDispatchToStore(this._store);
+        // tslint:disable-next-line:no-floating-promises
+        this._flashErrorIfWrongNetwork(this._store.getState().network);
     }
 
     public render(): React.ReactNode {
@@ -83,4 +91,13 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
             </Provider>
         );
     }
+
+    private readonly _flashErrorIfWrongNetwork = async (network: Network): Promise<void> => {
+        const msToShowError = 30000; // 30 seconds
+        const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
+        if (network !== networkOfProvider) {
+            const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
+            errorUtil.errorFlasher.flashNewError(this._store.dispatch, errorMessage, msToShowError);
+        }
+    };
 }
diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts
index f5a3d2cb8..0868414f0 100644
--- a/packages/instant/src/util/error.ts
+++ b/packages/instant/src/util/error.ts
@@ -1,4 +1,5 @@
 import { AssetBuyerError } from '@0x/asset-buyer';
+import * as _ from 'lodash';
 import { Dispatch } from 'redux';
 
 import { Action, actions } from '../redux/actions';
@@ -55,6 +56,9 @@ export const errorUtil = {
         if (error instanceof Error) {
             bestMessage = humanReadableMessageForError(error, asset);
         }
+        if (_.isString(error)) {
+            bestMessage = error;
+        }
         return {
             icon: '😢',
             message: bestMessage || 'Something went wrong...',
-- 
cgit v1.2.3


From de18fa0069727a754ffe53df5ca80153c977e5c1 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 25 Oct 2018 14:20:59 -0700
Subject: chore: remove console log

---
 packages/instant/public/index.html | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 4c1c52afd..038d13762 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -65,7 +65,6 @@
             network: +queryParams.getQueryParamValue('network'),
         }
         const renderOptions = Object.assign({}, renderOptionsDefaults, removeUndefined(renderOptionsOverrides));
-        console.log(renderOptions)
         zeroExInstant.render(renderOptions);
     </script>
 </body>
-- 
cgit v1.2.3


From d06b40bd8a938557ebba993afa78d20493ad71ef Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 25 Oct 2018 14:23:31 -0700
Subject: chore: use parseInt instead of +

---
 packages/instant/public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 038d13762..ba31a86ac 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -62,7 +62,7 @@
         const renderOptionsOverrides = {
             liquiditySource: liquiditySourceOverride === 'provided' ? [providedOrder] : liquiditySourceOverride,
             assetData: queryParams.getQueryParamValue('assetData'),
-            network: +queryParams.getQueryParamValue('network'),
+            network: parseInt(queryParams.getQueryParamValue('network'), 10),
         }
         const renderOptions = Object.assign({}, renderOptionsDefaults, removeUndefined(renderOptionsOverrides));
         zeroExInstant.render(renderOptions);
-- 
cgit v1.2.3


From 23b165669202c1bdf4bd7d7e509b9bfe06e3ef8a Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 25 Oct 2018 14:37:34 -0700
Subject: feat: support defaultAssetBuyAmount setting

---
 packages/instant/public/index.html                  |  3 ++-
 packages/instant/src/components/zero_ex_instant.tsx | 12 ++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index ba31a86ac..95216a929 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -62,7 +62,8 @@
         const renderOptionsOverrides = {
             liquiditySource: liquiditySourceOverride === 'provided' ? [providedOrder] : liquiditySourceOverride,
             assetData: queryParams.getQueryParamValue('assetData'),
-            network: parseInt(queryParams.getQueryParamValue('network'), 10),
+            network: +queryParams.getQueryParamValue('network'),
+            defaultAssetBuyAmount: +queryParams.getQueryParamValue('defaultAssetBuyAmount'),
         }
         const renderOptions = Object.assign({}, renderOptionsDefaults, removeUndefined(renderOptionsOverrides));
         zeroExInstant.render(renderOptions);
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 63d944654..9018c9427 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,5 +1,6 @@
 import { AssetBuyer } from '@0x/asset-buyer';
 import { ObjectMap, SignedOrder } from '@0x/types';
+import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Provider } from 'react-redux';
@@ -28,6 +29,7 @@ export interface ZeroExInstantRequiredProps {
 }
 
 export interface ZeroExInstantOptionalProps {
+    defaultAssetBuyAmount?: number;
     additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
     network: Network;
 }
@@ -35,12 +37,7 @@ export interface ZeroExInstantOptionalProps {
 export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
     private readonly _store: Store;
     private static _mergeInitialStateWithProps(props: ZeroExInstantProps, state: State = INITIAL_STATE): State {
-        // Create merged object such that properties in props override default settings
-        const optionalPropsWithDefaults: ZeroExInstantOptionalProps = {
-            additionalAssetMetaDataMap: props.additionalAssetMetaDataMap || {},
-            network: props.network || state.network,
-        };
-        const { network } = optionalPropsWithDefaults;
+        const network = props.network || state.network;
         // TODO: Provider needs to not be hard-coded to injected web3.
         const provider = getProvider();
         const assetBuyerOptions = {
@@ -65,6 +62,9 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
             assetBuyer,
             network,
             selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, network),
+            selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
+                ? state.selectedAssetAmount
+                : new BigNumber(props.defaultAssetBuyAmount),
             assetMetaDataMap: completeAssetMetaDataMap,
         };
         return storeStateFromProps;
-- 
cgit v1.2.3


From cd06c0e913bf8f4a1d7b29eecb01c87f92a76e89 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 25 Oct 2018 14:44:25 -0700
Subject: Added string to constants

---
 packages/instant/src/components/buy_button.tsx | 3 ++-
 packages/instant/src/constants.ts              | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 6fe333dc7..a7a22e3bc 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -2,6 +2,7 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
 
+import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
 import { util } from '../util/util';
 import { web3Wrapper } from '../util/web3_wrapper';
@@ -62,7 +63,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         try {
             await web3Wrapper.awaitTransactionSuccessAsync(txHash);
         } catch (e) {
-            if (e instanceof Error && e.message.startsWith('Transaction failed')) {
+            if (e instanceof Error && e.message.startsWith(WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX)) {
                 this.props.onBuyFailure(buyQuote, txHash);
                 return;
             }
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 31491c80a..48d0d4aa2 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -2,3 +2,4 @@ import { BigNumber } from '@0x/utils';
 export const BIG_NUMBER_ZERO = new BigNumber(0);
 export const ethDecimals = 18;
 export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
+export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
-- 
cgit v1.2.3


From 0515a914e0215bb40f0da4147258544c38cf282d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 25 Oct 2018 14:48:37 -0700
Subject: fix: dont fail for mainnet assetData and non-mainnet network

---
 packages/instant/public/index.html | 4 ++--
 packages/instant/src/util/asset.ts | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 95216a929..0ee144a28 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -62,8 +62,8 @@
         const renderOptionsOverrides = {
             liquiditySource: liquiditySourceOverride === 'provided' ? [providedOrder] : liquiditySourceOverride,
             assetData: queryParams.getQueryParamValue('assetData'),
-            network: +queryParams.getQueryParamValue('network'),
-            defaultAssetBuyAmount: +queryParams.getQueryParamValue('defaultAssetBuyAmount'),
+            network: +queryParams.getQueryParamValue('network') || undefined,
+            defaultAssetBuyAmount: +queryParams.getQueryParamValue('defaultAssetBuyAmount') || undefined,
         }
         const renderOptions = Object.assign({}, renderOptionsDefaults, removeUndefined(renderOptionsOverrides));
         zeroExInstant.render(renderOptions);
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index 4e3b2b946..d7e87eebb 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -18,7 +18,10 @@ export const assetUtils = {
     getMetaDataOrThrow: (assetData: string, metaDataMap: ObjectMap<AssetMetaData>, network: Network): AssetMetaData => {
         let mainnetAssetData: string | undefined = assetData;
         if (network !== Network.Mainnet) {
-            mainnetAssetData = assetUtils.getAssociatedAssetDataIfExists(assetData, network);
+            const mainnetAssetDataIfExists = assetUtils.getAssociatedAssetDataIfExists(assetData, network);
+            // Just so we don't fail in the case where we are on a non-mainnet network,
+            // but pass in a valid mainnet assetData.
+            mainnetAssetData = mainnetAssetDataIfExists || assetData;
         }
         if (_.isUndefined(mainnetAssetData)) {
             throw new Error(ZeroExInstantError.AssetMetaDataNotAvailable);
-- 
cgit v1.2.3


From 98cf046b4cec19441754481613ef53b805e03ebd Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 25 Oct 2018 14:57:08 -0700
Subject: revert: change to contract-addresses

---
 packages/contract-addresses/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/contract-addresses/src/index.ts b/packages/contract-addresses/src/index.ts
index 8af7cd8ab..1ea8c61dd 100644
--- a/packages/contract-addresses/src/index.ts
+++ b/packages/contract-addresses/src/index.ts
@@ -45,7 +45,7 @@ const networkToAddresses: { [networkId: number]: ContractAddresses } = {
         etherToken: '0xd0a1e359811322d97991e03f863a0c30c2cf029c',
         exchange: '0x35dd2932454449b14cee11a94d3674a936d5d7b2',
         assetProxyOwner: '0x2c824d2882baa668e0d5202b1e7f2922278703f8',
-        forwarder: '0x4859339a70a63f5e32497d865ce793c38ce9c004',
+        forwarder: '0xd85e2fa7e7e252b27b01bf0d65c946959d2f45b8',
         orderValidator: '0xb389da3d204b412df2f75c6afb3d0a7ce0bc283d',
     },
 };
-- 
cgit v1.2.3


From a2d09a68b0d6d20359916251e0cc795fb600360e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 25 Oct 2018 15:03:30 -0700
Subject: chore: add to asset-buyer changelog.json

---
 packages/asset-buyer/CHANGELOG.json                 | 9 +++++++++
 packages/instant/src/components/zero_ex_instant.tsx | 5 +++--
 2 files changed, 12 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/asset-buyer/CHANGELOG.json b/packages/asset-buyer/CHANGELOG.json
index 7ebcd8c2f..5d6604ea9 100644
--- a/packages/asset-buyer/CHANGELOG.json
+++ b/packages/asset-buyer/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "2.2.0",
+        "changes": [
+            {
+                "note": "`getAssetBuyerForProvidedOrders` factory function now takes 3 args instead of 4",
+                "pr": 1187
+            }
+        ]
+    },
     {
         "version": "2.1.0",
         "changes": [
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 9018c9427..bf7cc9de5 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -79,7 +79,7 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
         // tslint:disable-next-line:no-floating-promises
         asyncData.fetchAndDispatchToStore(this._store);
         // tslint:disable-next-line:no-floating-promises
-        this._flashErrorIfWrongNetwork(this._store.getState().network);
+        this._flashErrorIfWrongNetwork();
     }
 
     public render(): React.ReactNode {
@@ -92,8 +92,9 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
         );
     }
 
-    private readonly _flashErrorIfWrongNetwork = async (network: Network): Promise<void> => {
+    private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => {
         const msToShowError = 30000; // 30 seconds
+        const network = this._store.getState().network;
         const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
         if (network !== networkOfProvider) {
             const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
-- 
cgit v1.2.3


From ced4c893ba412ca401430a66694e194806d46e6b Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 25 Oct 2018 15:42:35 -0700
Subject: Show View Transaction button on failure, and allow setting of width
 for Try Again button and View Txn button

---
 packages/instant/src/components/buy_order_state_button.tsx    | 10 +++++++++-
 packages/instant/src/components/retry_button.tsx              |  6 +++---
 packages/instant/src/components/secondary_button.tsx          |  6 +++++-
 packages/instant/src/components/view_transaction_button.tsx   |  6 +++---
 .../instant/src/containers/selected_asset_retry_button.tsx    |  6 ++++--
 .../src/containers/selected_asset_view_transaction_button.tsx | 11 ++++++++---
 6 files changed, 32 insertions(+), 13 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx
index 44115e5a1..73a4d62e2 100644
--- a/packages/instant/src/components/buy_order_state_button.tsx
+++ b/packages/instant/src/components/buy_order_state_button.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { Flex } from '../components/ui/flex';
+
 import { PlacingOrderButton } from '../components/placing_order_button';
 import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
 import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button';
@@ -10,9 +12,15 @@ export interface BuyOrderStateButtonProps {
     buyOrderProcessingState: OrderProcessState;
 }
 
+// TODO: rename to buttons
 export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
     if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
-        return <SelectedAssetRetryButton />;
+        return (
+            <Flex justify="space-between">
+                <SelectedAssetRetryButton width="48%" />
+                <SelectedAssetViewTransactionButton width="48%" />
+            </Flex>
+        );
     } else if (
         props.buyOrderProcessingState === OrderProcessState.SUCCESS ||
         props.buyOrderProcessingState === OrderProcessState.PROCESSING
diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx
index 0d6188e6a..36ae55e72 100644
--- a/packages/instant/src/components/retry_button.tsx
+++ b/packages/instant/src/components/retry_button.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 
-import { SecondaryButton } from './secondary_button';
+import { SecondaryButton, SecondaryButtonProps } from './secondary_button';
 
-export interface RetryButtonProps {
+export interface RetryButtonProps extends SecondaryButtonProps {
     onClick: () => void;
 }
 
 export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => {
-    return <SecondaryButton onClick={props.onClick}>Try Again</SecondaryButton>;
+    return <SecondaryButton {...props}>Try Again</SecondaryButton>;
 };
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index 3c139a233..849003d0a 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -8,13 +8,14 @@ import { Text } from './ui/text';
 
 export interface SecondaryButtonProps extends ButtonProps {}
 
+// TODO: don't hard code this
 export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => {
     const buttonProps = _.omit(props, 'text');
     return (
         <Button
             backgroundColor={ColorOption.white}
             borderColor={ColorOption.lightGrey}
-            width="100%"
+            width={props.width}
             onClick={props.onClick}
             {...buttonProps}
         >
@@ -24,3 +25,6 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p
         </Button>
     );
 };
+SecondaryButton.defaultProps = {
+    width: '100%',
+};
diff --git a/packages/instant/src/components/view_transaction_button.tsx b/packages/instant/src/components/view_transaction_button.tsx
index 7aa44e657..8d11bf132 100644
--- a/packages/instant/src/components/view_transaction_button.tsx
+++ b/packages/instant/src/components/view_transaction_button.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 
-import { SecondaryButton } from './secondary_button';
+import { SecondaryButton, SecondaryButtonProps } from './secondary_button';
 
-export interface ViewTransactionButtonProps {
+export interface ViewTransactionButtonProps extends SecondaryButtonProps {
     onClick: () => void;
 }
 
 export const ViewTransactionButton: React.StatelessComponent<ViewTransactionButtonProps> = props => {
-    return <SecondaryButton onClick={props.onClick}>View Transaction</SecondaryButton>;
+    return <SecondaryButton {...props}>View Transaction</SecondaryButton>;
 };
diff --git a/packages/instant/src/containers/selected_asset_retry_button.tsx b/packages/instant/src/containers/selected_asset_retry_button.tsx
index b2b140be6..30e564c7b 100644
--- a/packages/instant/src/containers/selected_asset_retry_button.tsx
+++ b/packages/instant/src/containers/selected_asset_retry_button.tsx
@@ -7,7 +7,9 @@ import { Action, actions } from '../redux/actions';
 
 import { RetryButton } from '../components/retry_button';
 
-export interface SelectedAssetRetryButtonProps {}
+export interface SelectedAssetRetryButtonProps {
+    width?: string;
+}
 
 interface ConnectedDispatch {
     onClick: () => void;
@@ -21,6 +23,6 @@ const mapDispatchToProps = (
 });
 
 export const SelectedAssetRetryButton: React.ComponentClass<SelectedAssetRetryButtonProps> = connect(
-    undefined,
+    _.noop,
     mapDispatchToProps,
 )(RetryButton);
diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
index 064b877be..c74f07209 100644
--- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
+++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
@@ -8,18 +8,22 @@ import { ViewTransactionButton } from '../components/view_transaction_button';
 import { OrderProcessState } from '../types';
 import { etherscanUtil } from '../util/etherscan';
 
-export interface SelectedAssetViewTransactionButtonProps {}
+export interface SelectedAssetViewTransactionButtonProps {
+    width?: string;
+}
 
 interface ConnectedState {
     onClick: () => void;
+    width?: string;
 }
 
-const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
+const mapStateToProps = (state: State, ownProps: SelectedAssetViewTransactionButtonProps): ConnectedState => ({
     onClick: () => {
         if (
             state.assetBuyer &&
             (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
-                state.buyOrderState.processState === OrderProcessState.SUCCESS)
+                state.buyOrderState.processState === OrderProcessState.SUCCESS ||
+                state.buyOrderState.processState === OrderProcessState.FAILURE)
         ) {
             const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
                 state.buyOrderState.txHash,
@@ -31,6 +35,7 @@ const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
             }
         }
     },
+    width: ownProps.width,
 });
 
 export const SelectedAssetViewTransactionButton: React.ComponentClass<
-- 
cgit v1.2.3


From d5d99b9d2e3c793a95c68c1035246644b3ae80c6 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 25 Oct 2018 18:35:06 -0700
Subject: chore: dont override toString of BigNumber and other PR feedback

---
 .../src/components/animations/slide_animations.tsx |   5 +-
 .../instant/src/components/asset_amount_input.tsx  |  81 --------------
 .../src/components/erc20_asset_amount_input.tsx    |  84 ++++++++++++++
 .../instant/src/components/instant_heading.tsx     |   4 +-
 .../src/components/scaling_amount_input.tsx        |  11 +-
 .../src/containers/selected_asset_amount_input.ts  | 123 --------------------
 .../selected_erc20_asset_amount_input.ts           | 124 +++++++++++++++++++++
 packages/instant/src/redux/actions.ts              |   5 +-
 packages/instant/src/redux/reducer.ts              |   3 +-
 packages/instant/src/style/theme.ts                |   2 +
 packages/instant/src/util/asset.ts                 |   2 +-
 packages/instant/src/util/big_number.ts            |  29 -----
 packages/instant/src/util/big_number_input.ts      |  29 +++++
 13 files changed, 257 insertions(+), 245 deletions(-)
 delete mode 100644 packages/instant/src/components/asset_amount_input.tsx
 create mode 100644 packages/instant/src/components/erc20_asset_amount_input.tsx
 delete mode 100644 packages/instant/src/containers/selected_asset_amount_input.ts
 create mode 100644 packages/instant/src/containers/selected_erc20_asset_amount_input.ts
 delete mode 100644 packages/instant/src/util/big_number.ts
 create mode 100644 packages/instant/src/util/big_number_input.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 7c8666861..84280372b 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -21,7 +21,10 @@ export interface SlideAnimationProps {
     animationDirection?: string;
 }
 
-export const SlideAnimation = styled<SlideAnimationProps, 'div'>('div')`
+export const SlideAnimation =
+    styled.div <
+    SlideAnimationProps >
+    `
     animation-name: ${props =>
         css`
             ${props.keyframes};
diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
deleted file mode 100644
index 4d2dc0bd8..000000000
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { BigNumber } from '@0x/utils';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { ColorOption } from '../style/theme';
-import { ERC20Asset } from '../types';
-import { assetUtils } from '../util/asset';
-import { util } from '../util/util';
-
-import { ScalingAmountInput } from './scaling_amount_input';
-import { Container, Text } from './ui';
-
-// Asset amounts only apply to ERC20 assets
-export interface AssetAmountInputProps {
-    asset?: ERC20Asset;
-    onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
-    startingFontSizePx: number;
-    fontColor?: ColorOption;
-}
-
-export interface AssetAmountInputState {
-    currentFontSizePx: number;
-}
-
-export class AssetAmountInput extends React.Component<AssetAmountInputProps, AssetAmountInputState> {
-    public static defaultProps = {
-        onChange: util.boundNoop,
-    };
-    constructor(props: AssetAmountInputProps) {
-        super(props);
-        this.state = {
-            currentFontSizePx: props.startingFontSizePx,
-        };
-    }
-    public render(): React.ReactNode {
-        const { asset, onChange, ...rest } = this.props;
-        return (
-            <Container whiteSpace="nowrap">
-                <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
-                    <ScalingAmountInput
-                        {...rest}
-                        textLengthThreshold={this._textLengthThresholdForAsset(asset)}
-                        maxFontSizePx={this.props.startingFontSizePx}
-                        onChange={this._handleChange}
-                        onFontSizeChange={this._handleFontSizeChange}
-                    />
-                </Container>
-                <Container display="inline-flex" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
-                    <Text
-                        fontSize={`${this.state.currentFontSizePx}px`}
-                        fontColor={ColorOption.white}
-                        textTransform="uppercase"
-                    >
-                        {assetUtils.formattedSymbolForAsset(asset)}
-                    </Text>
-                </Container>
-            </Container>
-        );
-    }
-    private readonly _handleChange = (value?: BigNumber): void => {
-        this.props.onChange(value, this.props.asset);
-    };
-    private readonly _handleFontSizeChange = (fontSizePx: number): void => {
-        this.setState({
-            currentFontSizePx: fontSizePx,
-        });
-    };
-    private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => {
-        if (_.isUndefined(asset)) {
-            return 3;
-        }
-        const symbol = asset.metaData.symbol;
-        if (symbol.length <= 3) {
-            return 5;
-        }
-        if (symbol.length === 5) {
-            return 3;
-        }
-        return 4;
-    };
-}
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
new file mode 100644
index 000000000..583fad28b
--- /dev/null
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -0,0 +1,84 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ColorOption, transparentWhite } from '../style/theme';
+import { ERC20Asset } from '../types';
+import { assetUtils } from '../util/asset';
+import { BigNumberInput } from '../util/big_number_input';
+import { util } from '../util/util';
+
+import { ScalingAmountInput } from './scaling_amount_input';
+import { Container, Text } from './ui';
+
+// Asset amounts only apply to ERC20 assets
+export interface ERC20AssetAmountInputProps {
+    asset?: ERC20Asset;
+    value?: BigNumberInput;
+    onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+    startingFontSizePx: number;
+    fontColor?: ColorOption;
+}
+
+export interface ERC20AssetAmountInputState {
+    currentFontSizePx: number;
+}
+
+export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
+    public static defaultProps = {
+        onChange: util.boundNoop,
+    };
+    constructor(props: ERC20AssetAmountInputProps) {
+        super(props);
+        this.state = {
+            currentFontSizePx: props.startingFontSizePx,
+        };
+    }
+    public render(): React.ReactNode {
+        const { asset, onChange, ...rest } = this.props;
+        return (
+            <Container whiteSpace="nowrap">
+                <Container borderBottom={`1px solid ${transparentWhite}`} display="inline-block">
+                    <ScalingAmountInput
+                        {...rest}
+                        textLengthThreshold={this._textLengthThresholdForAsset(asset)}
+                        maxFontSizePx={this.props.startingFontSizePx}
+                        onChange={this._handleChange}
+                        onFontSizeChange={this._handleFontSizeChange}
+                    />
+                </Container>
+                <Container display="inline-flex" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
+                    <Text
+                        fontSize={`${this.state.currentFontSizePx}px`}
+                        fontColor={ColorOption.white}
+                        textTransform="uppercase"
+                    >
+                        {assetUtils.formattedSymbolForAsset(asset)}
+                    </Text>
+                </Container>
+            </Container>
+        );
+    }
+    private readonly _handleChange = (value?: BigNumberInput): void => {
+        this.props.onChange(value, this.props.asset);
+    };
+    private readonly _handleFontSizeChange = (fontSizePx: number): void => {
+        this.setState({
+            currentFontSizePx: fontSizePx,
+        });
+    };
+    // For assets with symbols of different length,
+    // start scaling the input at different character lengths
+    private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => {
+        if (_.isUndefined(asset)) {
+            return 3;
+        }
+        const symbol = asset.metaData.symbol;
+        if (symbol.length <= 3) {
+            return 5;
+        }
+        if (symbol.length === 5) {
+            return 3;
+        }
+        return 4;
+    };
+}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index f0a22bccb..df9856277 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -2,7 +2,7 @@ import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
+import { SelectedERC20AssetAmountInput } from '../containers/selected_erc20_asset_amount_input';
 import { ColorOption } from '../style/theme';
 import { AsyncProcessState, OrderState } from '../types';
 import { format } from '../util/format';
@@ -48,7 +48,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 </Container>
                 <Flex direction="row" justify="space-between">
                     <Flex height="60px">
-                        <SelectedAssetAmountInput startingFontSizePx={38} />
+                        <SelectedERC20AssetAmountInput startingFontSizePx={38} />
                     </Flex>
                     <Flex direction="column" justify="space-between">
                         {iconOrAmounts}
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 23a15305a..655ae2b74 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -1,9 +1,8 @@
-import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
-import { BigNumberInput } from '../util/big_number';
+import { BigNumberInput } from '../util/big_number_input';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
@@ -12,8 +11,8 @@ export interface ScalingAmountInputProps {
     maxFontSizePx: number;
     textLengthThreshold: number;
     fontColor?: ColorOption;
-    value?: BigNumber;
-    onChange: (value?: BigNumber) => void;
+    value?: BigNumberInput;
+    onChange: (value?: BigNumberInput) => void;
     onFontSizeChange: (fontSizePx: number) => void;
 }
 
@@ -31,7 +30,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 onFontSizeChange={onFontSizeChange}
                 fontColor={fontColor}
                 onChange={this._handleChange}
-                value={!_.isUndefined(value) ? value.toString() : ''}
+                value={!_.isUndefined(value) ? value.toDisplayString() : ''}
                 placeholder="0.00"
                 emptyInputWidthCh={3.5}
             />
@@ -42,7 +41,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         let bigNumberValue;
         if (!_.isEmpty(value)) {
             try {
-                bigNumberValue = new BigNumberInput(event.target.value);
+                bigNumberValue = new BigNumberInput(value);
             } catch {
                 // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
                 return;
diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
deleted file mode 100644
index f836c6967..000000000
--- a/packages/instant/src/containers/selected_asset_amount_input.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
-import { AssetProxyId } from '@0x/types';
-import { BigNumber } from '@0x/utils';
-import { Web3Wrapper } from '@0x/web3-wrapper';
-import * as _ from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { Action, actions } from '../redux/actions';
-import { State } from '../redux/reducer';
-import { ColorOption } from '../style/theme';
-import { AsyncProcessState, ERC20Asset } from '../types';
-import { errorUtil } from '../util/error';
-
-import { AssetAmountInput } from '../components/asset_amount_input';
-
-export interface SelectedAssetAmountInputProps {
-    fontColor?: ColorOption;
-    startingFontSizePx: number;
-}
-
-interface ConnectedState {
-    assetBuyer?: AssetBuyer;
-    value?: BigNumber;
-    asset?: ERC20Asset;
-}
-
-interface ConnectedDispatch {
-    updateBuyQuote: (assetBuyer?: AssetBuyer, value?: BigNumber, asset?: ERC20Asset) => void;
-}
-
-interface ConnectedProps {
-    value?: BigNumber;
-    asset?: ERC20Asset;
-    onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
-}
-
-type FinalProps = ConnectedProps & SelectedAssetAmountInputProps;
-
-const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps): ConnectedState => {
-    const selectedAsset = state.selectedAsset;
-    if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) {
-        return {
-            value: state.selectedAssetAmount,
-        };
-    }
-    return {
-        assetBuyer: state.assetBuyer,
-        value: state.selectedAssetAmount,
-        asset: selectedAsset as ERC20Asset,
-    };
-};
-
-const updateBuyQuoteAsync = async (
-    assetBuyer: AssetBuyer,
-    dispatch: Dispatch<Action>,
-    asset: ERC20Asset,
-    assetAmount: BigNumber,
-): Promise<void> => {
-    // get a new buy quote.
-    const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
-
-    // mark quote as pending
-    dispatch(actions.setQuoteRequestStatePending());
-
-    let newBuyQuote: BuyQuote | undefined;
-    try {
-        newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue);
-    } catch (error) {
-        dispatch(actions.setQuoteRequestStateFailure());
-        errorUtil.errorFlasher.flashNewError(dispatch, error);
-        return;
-    }
-    // We have a successful new buy quote
-    errorUtil.errorFlasher.clearError(dispatch);
-    // invalidate the last buy quote.
-    dispatch(actions.updateLatestBuyQuote(newBuyQuote));
-};
-
-const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
-
-const mapDispatchToProps = (
-    dispatch: Dispatch<Action>,
-    _ownProps: SelectedAssetAmountInputProps,
-): ConnectedDispatch => ({
-    updateBuyQuote: (assetBuyer, value, asset) => {
-        // Update the input
-        dispatch(actions.updateSelectedAssetAmount(value));
-        // invalidate the last buy quote.
-        dispatch(actions.updateLatestBuyQuote(undefined));
-        // reset our buy state
-        dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.NONE }));
-
-        if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
-            // even if it's debounced, give them the illusion it's loading
-            dispatch(actions.setQuoteRequestStatePending());
-            // tslint:disable-next-line:no-floating-promises
-            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value);
-        }
-    },
-});
-
-const mergeProps = (
-    connectedState: ConnectedState,
-    connectedDispatch: ConnectedDispatch,
-    ownProps: SelectedAssetAmountInputProps,
-): FinalProps => {
-    return {
-        ...ownProps,
-        asset: connectedState.asset,
-        value: connectedState.value,
-        onChange: (value, asset) => {
-            connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset);
-        },
-    };
-};
-
-export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect(
-    mapStateToProps,
-    mapDispatchToProps,
-    mergeProps,
-)(AssetAmountInput);
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
new file mode 100644
index 000000000..078f96cd4
--- /dev/null
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -0,0 +1,124 @@
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import { AssetProxyId } from '@0x/types';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { Action, actions } from '../redux/actions';
+import { State } from '../redux/reducer';
+import { ColorOption } from '../style/theme';
+import { AsyncProcessState, ERC20Asset } from '../types';
+import { BigNumberInput } from '../util/big_number_input';
+import { errorUtil } from '../util/error';
+
+import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
+
+export interface SelectedERC20AssetAmountInputProps {
+    fontColor?: ColorOption;
+    startingFontSizePx: number;
+}
+
+interface ConnectedState {
+    assetBuyer?: AssetBuyer;
+    value?: BigNumberInput;
+    asset?: ERC20Asset;
+}
+
+interface ConnectedDispatch {
+    updateBuyQuote: (assetBuyer?: AssetBuyer, value?: BigNumberInput, asset?: ERC20Asset) => void;
+}
+
+interface ConnectedProps {
+    value?: BigNumberInput;
+    asset?: ERC20Asset;
+    onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+}
+
+type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps;
+
+const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => {
+    const selectedAsset = state.selectedAsset;
+    if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) {
+        return {
+            value: state.selectedAssetAmount,
+        };
+    }
+    return {
+        assetBuyer: state.assetBuyer,
+        value: state.selectedAssetAmount,
+        asset: selectedAsset as ERC20Asset,
+    };
+};
+
+const updateBuyQuoteAsync = async (
+    assetBuyer: AssetBuyer,
+    dispatch: Dispatch<Action>,
+    asset: ERC20Asset,
+    assetAmount: BigNumber,
+): Promise<void> => {
+    // get a new buy quote.
+    const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
+
+    // mark quote as pending
+    dispatch(actions.setQuoteRequestStatePending());
+
+    let newBuyQuote: BuyQuote | undefined;
+    try {
+        newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue);
+    } catch (error) {
+        dispatch(actions.setQuoteRequestStateFailure());
+        errorUtil.errorFlasher.flashNewError(dispatch, error);
+        return;
+    }
+    // We have a successful new buy quote
+    errorUtil.errorFlasher.clearError(dispatch);
+    // invalidate the last buy quote.
+    dispatch(actions.updateLatestBuyQuote(newBuyQuote));
+};
+
+const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
+
+const mapDispatchToProps = (
+    dispatch: Dispatch<Action>,
+    _ownProps: SelectedERC20AssetAmountInputProps,
+): ConnectedDispatch => ({
+    updateBuyQuote: (assetBuyer, value, asset) => {
+        // Update the input
+        dispatch(actions.updateSelectedAssetAmount(value));
+        // invalidate the last buy quote.
+        dispatch(actions.updateLatestBuyQuote(undefined));
+        // reset our buy state
+        dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.NONE }));
+
+        if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
+            // even if it's debounced, give them the illusion it's loading
+            dispatch(actions.setQuoteRequestStatePending());
+            // tslint:disable-next-line:no-floating-promises
+            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value);
+        }
+    },
+});
+
+const mergeProps = (
+    connectedState: ConnectedState,
+    connectedDispatch: ConnectedDispatch,
+    ownProps: SelectedERC20AssetAmountInputProps,
+): FinalProps => {
+    return {
+        ...ownProps,
+        asset: connectedState.asset,
+        value: connectedState.value,
+        onChange: (value, asset) => {
+            connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset);
+        },
+    };
+};
+
+export const SelectedERC20AssetAmountInput: React.ComponentClass<SelectedERC20AssetAmountInputProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+    mergeProps,
+)(ERC20AssetAmountInput);
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 5a4099f15..46045024b 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -2,6 +2,8 @@ import { BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
+import { BigNumberInput } from '../util/big_number_input';
+
 import { ActionsUnion, OrderState } from '../types';
 
 export interface PlainAction<T extends string> {
@@ -36,7 +38,8 @@ export enum ActionTypes {
 
 export const actions = {
     updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
-    updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
+    updateSelectedAssetAmount: (amount?: BigNumberInput) =>
+        createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
     updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
     updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index c6a05ac52..665cba257 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -6,6 +6,7 @@ import * as _ from 'lodash';
 import { assetMetaDataMap } from '../data/asset_meta_data_map';
 import { Asset, AssetMetaData, AsyncProcessState, DisplayStatus, Network, OrderState } from '../types';
 import { assetUtils } from '../util/asset';
+import { BigNumberInput } from '../util/big_number_input';
 
 import { Action, ActionTypes } from './actions';
 
@@ -14,7 +15,7 @@ export interface State {
     assetBuyer?: AssetBuyer;
     assetMetaDataMap: ObjectMap<AssetMetaData>;
     selectedAsset?: Asset;
-    selectedAssetAmount?: BigNumber;
+    selectedAssetAmount?: BigNumberInput;
     buyOrderState: OrderState;
     ethUsdPrice?: BigNumber;
     latestBuyQuote?: BuyQuote;
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index be527a12c..6575ff9f4 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -28,4 +28,6 @@ export const theme: Theme = {
     darkOrange: '#F2994C',
 };
 
+export const transparentWhite = 'rgba(255,255,255,0.3)';
+
 export { styled, css, keyframes, ThemeProvider };
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index e42727d84..2c5b6325d 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -51,7 +51,7 @@ export const assetUtils = {
         if (symbol.length <= 5) {
             return symbol;
         }
-        return `${symbol.slice(0, 3)}...`;
+        return `${symbol.slice(0, 3)}…`;
     },
     getAssociatedAssetDataIfExists: (assetData: string, network: Network): string | undefined => {
         const assetDataGroupIfExists = _.find(assetDataNetworkMapping, value => value[network] === assetData);
diff --git a/packages/instant/src/util/big_number.ts b/packages/instant/src/util/big_number.ts
deleted file mode 100644
index a34d22d76..000000000
--- a/packages/instant/src/util/big_number.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { BigNumber } from '@0x/utils';
-import * as _ from 'lodash';
-
-/**
- *  A BigNumber extension that is more flexible about decimal strings.
- *  Such as allowing:
- *  new BigNumberInput(0.) => 0
- *  new BigNumberInput(1.) => 1
- *  new BigNumberInput(1..) => still throws
- */
-export class BigNumberInput extends BigNumber {
-    private readonly _hasDecimalPeriod: boolean;
-    constructor(bigNumberString: string) {
-        const hasDecimalPeriod = _.endsWith(bigNumberString, '.');
-        let internalString = bigNumberString;
-        if (hasDecimalPeriod) {
-            internalString = bigNumberString.slice(0, bigNumberString.length - 1);
-        }
-        super(internalString);
-        this._hasDecimalPeriod = hasDecimalPeriod;
-    }
-    public toString(): string {
-        const internalString = super.toString();
-        if (this._hasDecimalPeriod) {
-            return `${internalString}.`;
-        }
-        return internalString;
-    }
-}
diff --git a/packages/instant/src/util/big_number_input.ts b/packages/instant/src/util/big_number_input.ts
new file mode 100644
index 000000000..d2a9a8dc5
--- /dev/null
+++ b/packages/instant/src/util/big_number_input.ts
@@ -0,0 +1,29 @@
+import { BigNumber } from '@0x/utils';
+import * as _ from 'lodash';
+
+/**
+ *  A BigNumber extension that is more flexible about decimal strings.
+ *  Such as allowing:
+ *  new BigNumberInput('0.') => 0
+ *  new BigNumberInput('1.') => 1
+ *  new BigNumberInput('1..') => still throws
+ */
+export class BigNumberInput extends BigNumber {
+    private readonly _isEndingWithDecimal: boolean;
+    constructor(bigNumberString: string) {
+        const hasDecimalPeriod = _.endsWith(bigNumberString, '.');
+        let internalString = bigNumberString;
+        if (hasDecimalPeriod) {
+            internalString = bigNumberString.slice(0, -1);
+        }
+        super(internalString);
+        this._isEndingWithDecimal = hasDecimalPeriod;
+    }
+    public toDisplayString(): string {
+        const internalString = super.toString();
+        if (this._isEndingWithDecimal) {
+            return `${internalString}.`;
+        }
+        return internalString;
+    }
+}
-- 
cgit v1.2.3


From 39f92e4c958590a58ac5c48db197f98fdd9723e1 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 25 Oct 2018 18:46:33 -0700
Subject: Get BuyOrderState one big connected component, and let user view
 failure

---
 .../src/components/buy_order_state_button.tsx      | 43 +++++++++++++---
 packages/instant/src/components/retry_button.tsx   | 11 ----
 .../instant/src/components/secondary_button.tsx    |  1 -
 packages/instant/src/components/ui/button.tsx      |  1 +
 .../src/components/view_transaction_button.tsx     | 11 ----
 .../src/containers/selected_asset_buy_button.ts    | 55 --------------------
 .../selected_asset_buy_order_state_button.tsx      | 60 +++++++++++++++++++++-
 .../src/containers/selected_asset_retry_button.tsx | 28 ----------
 .../selected_asset_view_transaction_button.tsx     | 43 ----------------
 9 files changed, 96 insertions(+), 157 deletions(-)
 delete mode 100644 packages/instant/src/components/retry_button.tsx
 delete mode 100644 packages/instant/src/components/view_transaction_button.tsx
 delete mode 100644 packages/instant/src/containers/selected_asset_buy_button.ts
 delete mode 100644 packages/instant/src/containers/selected_asset_retry_button.tsx
 delete mode 100644 packages/instant/src/containers/selected_asset_view_transaction_button.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx
index 73a4d62e2..17aa46df5 100644
--- a/packages/instant/src/components/buy_order_state_button.tsx
+++ b/packages/instant/src/components/buy_order_state_button.tsx
@@ -1,15 +1,28 @@
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
 import * as React from 'react';
 
 import { Flex } from '../components/ui/flex';
+import { SecondaryButton } from '../components/secondary_button';
+import { BuyButton } from '../components/buy_button';
 
 import { PlacingOrderButton } from '../components/placing_order_button';
-import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
-import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button';
-import { SelectedAssetViewTransactionButton } from '../containers/selected_asset_view_transaction_button';
+import { ColorOption } from '../style/theme';
 import { OrderProcessState } from '../types';
 
+import { Button } from './ui/button';
+import { Text } from './ui/text';
+
 export interface BuyOrderStateButtonProps {
+    buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
+    assetBuyer?: AssetBuyer;
+    onViewTransaction: () => void;
+    onAwaitingSignature: (buyQuote: BuyQuote) => void;
+    onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+    onRetry: () => void;
 }
 
 // TODO: rename to buttons
@@ -17,18 +30,34 @@ export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonPr
     if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
         return (
             <Flex justify="space-between">
-                <SelectedAssetRetryButton width="48%" />
-                <SelectedAssetViewTransactionButton width="48%" />
+                <Button width="48%" onClick={props.onRetry}>
+                    <Text fontColor={ColorOption.white} fontWeight={600} fontSize="16px">
+                        Back
+                    </Text>
+                </Button>
+                <SecondaryButton width="48%" onClick={props.onViewTransaction}>
+                    Details
+                </SecondaryButton>
             </Flex>
         );
     } else if (
         props.buyOrderProcessingState === OrderProcessState.SUCCESS ||
         props.buyOrderProcessingState === OrderProcessState.PROCESSING
     ) {
-        return <SelectedAssetViewTransactionButton />;
+        return <SecondaryButton onClick={props.onViewTransaction}>View Transaction</SecondaryButton>;
     } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) {
         return <PlacingOrderButton />;
     }
 
-    return <SelectedAssetBuyButton />;
+    return (
+        <BuyButton
+            buyQuote={props.buyQuote}
+            assetBuyer={props.assetBuyer}
+            onAwaitingSignature={props.onAwaitingSignature}
+            onSignatureDenied={props.onSignatureDenied}
+            onBuyProcessing={props.onBuyProcessing}
+            onBuySuccess={props.onBuySuccess}
+            onBuyFailure={props.onBuyFailure}
+        />
+    );
 };
diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx
deleted file mode 100644
index 36ae55e72..000000000
--- a/packages/instant/src/components/retry_button.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { SecondaryButton, SecondaryButtonProps } from './secondary_button';
-
-export interface RetryButtonProps extends SecondaryButtonProps {
-    onClick: () => void;
-}
-
-export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => {
-    return <SecondaryButton {...props}>Try Again</SecondaryButton>;
-};
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index 849003d0a..583058b5b 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -8,7 +8,6 @@ import { Text } from './ui/text';
 
 export interface SecondaryButtonProps extends ButtonProps {}
 
-// TODO: don't hard code this
 export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => {
     const buttonProps = _.omit(props, 'text');
     return (
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index 1fcb2591c..5274d835b 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -52,6 +52,7 @@ export const Button = styled(PlainButton)`
 
 Button.defaultProps = {
     backgroundColor: ColorOption.primaryColor,
+    borderColor: ColorOption.primaryColor,
     width: 'auto',
     isDisabled: false,
     padding: '1em 2.2em',
diff --git a/packages/instant/src/components/view_transaction_button.tsx b/packages/instant/src/components/view_transaction_button.tsx
deleted file mode 100644
index 8d11bf132..000000000
--- a/packages/instant/src/components/view_transaction_button.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { SecondaryButton, SecondaryButtonProps } from './secondary_button';
-
-export interface ViewTransactionButtonProps extends SecondaryButtonProps {
-    onClick: () => void;
-}
-
-export const ViewTransactionButton: React.StatelessComponent<ViewTransactionButtonProps> = props => {
-    return <SecondaryButton {...props}>View Transaction</SecondaryButton>;
-};
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
deleted file mode 100644
index adcbd61bc..000000000
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
-import * as _ from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { Action, actions } from '../redux/actions';
-import { State } from '../redux/reducer';
-import { OrderProcessState, OrderState } from '../types';
-
-import { BuyButton } from '../components/buy_button';
-
-export interface SelectedAssetBuyButtonProps {}
-
-interface ConnectedState {
-    assetBuyer?: AssetBuyer;
-    buyQuote?: BuyQuote;
-}
-
-interface ConnectedDispatch {
-    onAwaitingSignature: (buyQuote: BuyQuote) => void;
-    onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
-}
-
-const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({
-    assetBuyer: state.assetBuyer,
-    buyQuote: state.latestBuyQuote,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
-    onAwaitingSignature: (buyQuote: BuyQuote) => {
-        const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE };
-        dispatch(actions.updateBuyOrderState(newOrderState));
-    },
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => {
-        const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash };
-        dispatch(actions.updateBuyOrderState(newOrderState));
-    },
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
-    onSignatureDenied: (buyQuote, error) => {
-        dispatch(actions.resetAmount());
-        dispatch(actions.setError(error));
-    },
-});
-
-export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(BuyButton);
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
index 7faa79912..fa5de4e68 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
@@ -1,20 +1,78 @@
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
 
+import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
-import { OrderProcessState } from '../types';
+import { OrderProcessState, OrderState } from '../types';
+import { etherscanUtil } from '../util/etherscan';
 
 import { BuyOrderStateButton } from '../components/buy_order_state_button';
 
 interface ConnectedState {
+    buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
+    assetBuyer?: AssetBuyer;
+    onViewTransaction: () => void;
+}
+
+interface ConnectedDispatch {
+    onAwaitingSignature: (buyQuote: BuyQuote) => void;
+    onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+    onRetry: () => void;
 }
 export interface SelectedAssetButtonProps {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({
     buyOrderProcessingState: state.buyOrderState.processState,
+    assetBuyer: state.assetBuyer,
+    buyQuote: state.latestBuyQuote,
+    onViewTransaction: () => {
+        if (
+            state.assetBuyer &&
+            (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
+                state.buyOrderState.processState === OrderProcessState.SUCCESS ||
+                state.buyOrderState.processState === OrderProcessState.FAILURE)
+        ) {
+            const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
+                state.buyOrderState.txHash,
+                state.assetBuyer.networkId,
+            );
+            if (etherscanUrl) {
+                window.open(etherscanUrl, '_blank');
+                return;
+            }
+        }
+    },
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetButtonProps): ConnectedDispatch => ({
+    onAwaitingSignature: (buyQuote: BuyQuote) => {
+        const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE };
+        dispatch(actions.updateBuyOrderState(newOrderState));
+    },
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => {
+        const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash };
+        dispatch(actions.updateBuyOrderState(newOrderState));
+    },
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
+        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
+        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
+    onSignatureDenied: (buyQuote, error) => {
+        dispatch(actions.resetAmount());
+        dispatch(actions.setError(error));
+    },
+    onRetry: () => {
+        dispatch(actions.resetAmount());
+    },
 });
 
 export const SelectedAssetBuyOrderStateButton: React.ComponentClass<SelectedAssetButtonProps> = connect(
     mapStateToProps,
+    mapDispatchToProps,
 )(BuyOrderStateButton);
diff --git a/packages/instant/src/containers/selected_asset_retry_button.tsx b/packages/instant/src/containers/selected_asset_retry_button.tsx
deleted file mode 100644
index 30e564c7b..000000000
--- a/packages/instant/src/containers/selected_asset_retry_button.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { Action, actions } from '../redux/actions';
-
-import { RetryButton } from '../components/retry_button';
-
-export interface SelectedAssetRetryButtonProps {
-    width?: string;
-}
-
-interface ConnectedDispatch {
-    onClick: () => void;
-}
-
-const mapDispatchToProps = (
-    dispatch: Dispatch<Action>,
-    _ownProps: SelectedAssetRetryButtonProps,
-): ConnectedDispatch => ({
-    onClick: () => dispatch(actions.resetAmount()),
-});
-
-export const SelectedAssetRetryButton: React.ComponentClass<SelectedAssetRetryButtonProps> = connect(
-    _.noop,
-    mapDispatchToProps,
-)(RetryButton);
diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
deleted file mode 100644
index c74f07209..000000000
--- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import { State } from '../redux/reducer';
-
-import { ViewTransactionButton } from '../components/view_transaction_button';
-import { OrderProcessState } from '../types';
-import { etherscanUtil } from '../util/etherscan';
-
-export interface SelectedAssetViewTransactionButtonProps {
-    width?: string;
-}
-
-interface ConnectedState {
-    onClick: () => void;
-    width?: string;
-}
-
-const mapStateToProps = (state: State, ownProps: SelectedAssetViewTransactionButtonProps): ConnectedState => ({
-    onClick: () => {
-        if (
-            state.assetBuyer &&
-            (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
-                state.buyOrderState.processState === OrderProcessState.SUCCESS ||
-                state.buyOrderState.processState === OrderProcessState.FAILURE)
-        ) {
-            const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
-                state.buyOrderState.txHash,
-                state.assetBuyer.networkId,
-            );
-            if (etherscanUrl) {
-                window.open(etherscanUrl, '_blank');
-                return;
-            }
-        }
-    },
-    width: ownProps.width,
-});
-
-export const SelectedAssetViewTransactionButton: React.ComponentClass<
-    SelectedAssetViewTransactionButtonProps
-> = connect(mapStateToProps)(ViewTransactionButton);
-- 
cgit v1.2.3


From 948d62200a23b4da59278f976e9757cfc3c9234e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 25 Oct 2018 18:53:16 -0700
Subject: feat: change network to networkId

---
 packages/instant/public/index.html                  |  2 +-
 packages/instant/src/components/zero_ex_instant.tsx | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 0ee144a28..9f1dfdb64 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -62,7 +62,7 @@
         const renderOptionsOverrides = {
             liquiditySource: liquiditySourceOverride === 'provided' ? [providedOrder] : liquiditySourceOverride,
             assetData: queryParams.getQueryParamValue('assetData'),
-            network: +queryParams.getQueryParamValue('network') || undefined,
+            networkId: +queryParams.getQueryParamValue('networkId') || undefined,
             defaultAssetBuyAmount: +queryParams.getQueryParamValue('defaultAssetBuyAmount') || undefined,
         }
         const renderOptions = Object.assign({}, renderOptionsDefaults, removeUndefined(renderOptionsOverrides));
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index bf7cc9de5..8454de43c 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -31,17 +31,17 @@ export interface ZeroExInstantRequiredProps {
 export interface ZeroExInstantOptionalProps {
     defaultAssetBuyAmount?: number;
     additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
-    network: Network;
+    networkId: Network;
 }
 
 export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
     private readonly _store: Store;
     private static _mergeInitialStateWithProps(props: ZeroExInstantProps, state: State = INITIAL_STATE): State {
-        const network = props.network || state.network;
+        const networkId = props.networkId || state.network;
         // TODO: Provider needs to not be hard-coded to injected web3.
         const provider = getProvider();
         const assetBuyerOptions = {
-            networkId: network,
+            networkId,
         };
         let assetBuyer;
         if (_.isString(props.liquiditySource)) {
@@ -60,8 +60,8 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
         const storeStateFromProps: State = {
             ...state,
             assetBuyer,
-            network,
-            selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, network),
+            network: networkId,
+            selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId),
             selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
                 ? state.selectedAssetAmount
                 : new BigNumber(props.defaultAssetBuyAmount),
-- 
cgit v1.2.3


From 22d0c76bf1d965b673f74a0f523616df7a4ea052 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 25 Oct 2018 22:49:47 -0700
Subject: fix(website): round makerAssetToken amount in FillOrder component

---
 packages/website/ts/components/fill_order.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index ec73e4199..3d0203573 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -203,7 +203,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             .tokenAddress;
         const makerToken = this.props.tokenByAddress[makerTokenAddress];
         const makerAssetToken = {
-            amount: orderMakerAmount.times(takerAssetToken.amount).div(orderTakerAmount),
+            amount: orderMakerAmount
+                .times(takerAssetToken.amount)
+                .div(orderTakerAmount)
+                .floor(),
             symbol: makerToken.symbol,
         };
         const fillAssetToken = {
-- 
cgit v1.2.3


From dcae27c1a4c15dde870bbf7579685f1d86f7211f Mon Sep 17 00:00:00 2001
From: Amir Bandeali <abandeali1@gmail.com>
Date: Fri, 26 Oct 2018 09:06:26 -0700
Subject: feat: update artifact for Forwarder

---
 .../contract-artifacts/artifacts/Forwarder.json    | 887 ++++++++++-----------
 1 file changed, 443 insertions(+), 444 deletions(-)

(limited to 'packages')

diff --git a/packages/contract-artifacts/artifacts/Forwarder.json b/packages/contract-artifacts/artifacts/Forwarder.json
index 4f93b231b..a7bd62f8e 100644
--- a/packages/contract-artifacts/artifacts/Forwarder.json
+++ b/packages/contract-artifacts/artifacts/Forwarder.json
@@ -1,448 +1,447 @@
 {
-    "schemaVersion": "2.0.0",
-    "contractName": "Forwarder",
-    "compilerOutput": {
-        "abi": [
-            {
-                "constant": false,
-                "inputs": [
-                    {
-                        "components": [
-                            {
-                                "name": "makerAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "takerAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "feeRecipientAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "senderAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "makerAssetAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerAssetAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "makerFee",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerFee",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "expirationTimeSeconds",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "salt",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "makerAssetData",
-                                "type": "bytes"
-                            },
-                            {
-                                "name": "takerAssetData",
-                                "type": "bytes"
-                            }
-                        ],
-                        "name": "orders",
-                        "type": "tuple[]"
-                    },
-                    {
-                        "name": "makerAssetFillAmount",
-                        "type": "uint256"
-                    },
-                    {
-                        "name": "signatures",
-                        "type": "bytes[]"
-                    },
-                    {
-                        "components": [
-                            {
-                                "name": "makerAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "takerAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "feeRecipientAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "senderAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "makerAssetAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerAssetAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "makerFee",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerFee",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "expirationTimeSeconds",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "salt",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "makerAssetData",
-                                "type": "bytes"
-                            },
-                            {
-                                "name": "takerAssetData",
-                                "type": "bytes"
-                            }
-                        ],
-                        "name": "feeOrders",
-                        "type": "tuple[]"
-                    },
-                    {
-                        "name": "feeSignatures",
-                        "type": "bytes[]"
-                    },
-                    {
-                        "name": "feePercentage",
-                        "type": "uint256"
-                    },
-                    {
-                        "name": "feeRecipient",
-                        "type": "address"
-                    }
-                ],
-                "name": "marketBuyOrdersWithEth",
-                "outputs": [
-                    {
-                        "components": [
-                            {
-                                "name": "makerAssetFilledAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerAssetFilledAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "makerFeePaid",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerFeePaid",
-                                "type": "uint256"
-                            }
-                        ],
-                        "name": "orderFillResults",
-                        "type": "tuple"
-                    },
-                    {
-                        "components": [
-                            {
-                                "name": "makerAssetFilledAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerAssetFilledAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "makerFeePaid",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerFeePaid",
-                                "type": "uint256"
-                            }
-                        ],
-                        "name": "feeOrderFillResults",
-                        "type": "tuple"
-                    }
-                ],
-                "payable": true,
-                "stateMutability": "payable",
-                "type": "function"
-            },
-            {
-                "constant": false,
-                "inputs": [
-                    {
-                        "name": "assetData",
-                        "type": "bytes"
-                    },
-                    {
-                        "name": "amount",
-                        "type": "uint256"
-                    }
-                ],
-                "name": "withdrawAsset",
-                "outputs": [],
-                "payable": false,
-                "stateMutability": "nonpayable",
-                "type": "function"
-            },
-            {
-                "constant": true,
-                "inputs": [],
-                "name": "owner",
-                "outputs": [
-                    {
-                        "name": "",
-                        "type": "address"
-                    }
-                ],
-                "payable": false,
-                "stateMutability": "view",
-                "type": "function"
-            },
-            {
-                "constant": false,
-                "inputs": [
-                    {
-                        "components": [
-                            {
-                                "name": "makerAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "takerAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "feeRecipientAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "senderAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "makerAssetAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerAssetAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "makerFee",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerFee",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "expirationTimeSeconds",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "salt",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "makerAssetData",
-                                "type": "bytes"
-                            },
-                            {
-                                "name": "takerAssetData",
-                                "type": "bytes"
-                            }
-                        ],
-                        "name": "orders",
-                        "type": "tuple[]"
-                    },
-                    {
-                        "name": "signatures",
-                        "type": "bytes[]"
-                    },
-                    {
-                        "components": [
-                            {
-                                "name": "makerAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "takerAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "feeRecipientAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "senderAddress",
-                                "type": "address"
-                            },
-                            {
-                                "name": "makerAssetAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerAssetAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "makerFee",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerFee",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "expirationTimeSeconds",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "salt",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "makerAssetData",
-                                "type": "bytes"
-                            },
-                            {
-                                "name": "takerAssetData",
-                                "type": "bytes"
-                            }
-                        ],
-                        "name": "feeOrders",
-                        "type": "tuple[]"
-                    },
-                    {
-                        "name": "feeSignatures",
-                        "type": "bytes[]"
-                    },
-                    {
-                        "name": "feePercentage",
-                        "type": "uint256"
-                    },
-                    {
-                        "name": "feeRecipient",
-                        "type": "address"
-                    }
-                ],
-                "name": "marketSellOrdersWithEth",
-                "outputs": [
-                    {
-                        "components": [
-                            {
-                                "name": "makerAssetFilledAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerAssetFilledAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "makerFeePaid",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerFeePaid",
-                                "type": "uint256"
-                            }
-                        ],
-                        "name": "orderFillResults",
-                        "type": "tuple"
-                    },
-                    {
-                        "components": [
-                            {
-                                "name": "makerAssetFilledAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerAssetFilledAmount",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "makerFeePaid",
-                                "type": "uint256"
-                            },
-                            {
-                                "name": "takerFeePaid",
-                                "type": "uint256"
-                            }
-                        ],
-                        "name": "feeOrderFillResults",
-                        "type": "tuple"
-                    }
-                ],
-                "payable": true,
-                "stateMutability": "payable",
-                "type": "function"
-            },
-            {
-                "constant": false,
-                "inputs": [
-                    {
-                        "name": "newOwner",
-                        "type": "address"
-                    }
-                ],
-                "name": "transferOwnership",
-                "outputs": [],
-                "payable": false,
-                "stateMutability": "nonpayable",
-                "type": "function"
-            },
-            {
-                "inputs": [
-                    {
-                        "name": "_exchange",
-                        "type": "address"
-                    },
-                    {
-                        "name": "_zrxAssetData",
-                        "type": "bytes"
-                    },
-                    {
-                        "name": "_wethAssetData",
-                        "type": "bytes"
-                    }
-                ],
-                "payable": false,
-                "stateMutability": "nonpayable",
-                "type": "constructor"
-            },
-            {
-                "payable": true,
-                "stateMutability": "payable",
-                "type": "fallback"
-            }
-        ],
-        "evm": {
-            "bytecode": {
-                "linkReferences": {},
-                "object":
-                    "0x60806040523480156200001157600080fd5b5060405162002cdb38038062002cdb83398101806040526200003791908101906200051d565b6000805433600160a060020a031991821617825560018054909116600160a060020a0386161790558251849084908490849081906200007e906004906020870190620003d0565b50825162000094906005906020860190620003d0565b50620000b0836010640100000000620018f66200036f82021704565b9150620000cd846010640100000000620018f66200036f82021704565b60028054600160a060020a03948516600160a060020a031991821617909155600380549285169290911691909117905550600154604080517f4552433230546f6b656e28616464726573732900000000000000000000000000815290519081900360130181207f6070410800000000000000000000000000000000000000000000000000000000825291909216945063607041089350620001739250906004016200068e565b602060405180830381600087803b1580156200018e57600080fd5b505af1158015620001a3573d6000803e3d6000fd5b505050506040513d601f19601f82011682018060405250620001c99190810190620004f4565b9050600160a060020a038116151562000219576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016200021090620006b0565b60405180910390fd5b6002546040517f095ea7b3000000000000000000000000000000000000000000000000000000008152600160a060020a039091169063095ea7b39062000268908490600019906004016200066f565b602060405180830381600087803b1580156200028357600080fd5b505af115801562000298573d6000803e3d6000fd5b505050506040513d601f19601f82011682018060405250620002be9190810190620005a1565b506003546040517f095ea7b3000000000000000000000000000000000000000000000000000000008152600160a060020a039091169063095ea7b3906200030e908490600019906004016200066f565b602060405180830381600087803b1580156200032957600080fd5b505af11580156200033e573d6000803e3d6000fd5b505050506040513d601f19601f82011682018060405250620003649190810190620005a1565b50505050506200077a565b600081601401835110151515620003b4576040517f08c379a000000000000000000000000000000000000000000000000000000000815260040162000210906200069e565b506014818301810151910190600160a060020a03165b92915050565b828054600181600116156101000203166002900490600052602060002090601f016020900481019282601f106200041357805160ff191683800117855562000443565b8280016001018555821562000443579182015b828111156200044357825182559160200191906001019062000426565b506200045192915062000455565b5090565b6200047291905b808211156200045157600081556001016200045c565b90565b600062000483825162000711565b9392505050565b600062000483825162000742565b6000601f82018313620004aa57600080fd5b8151620004c1620004bb82620006e9565b620006c2565b91508082526020830160208301858383011115620004de57600080fd5b620004eb83828462000747565b50505092915050565b6000602082840312156200050757600080fd5b600062000515848462000475565b949350505050565b6000806000606084860312156200053357600080fd5b600062000541868662000475565b93505060208401516001604060020a038111156200055e57600080fd5b6200056c8682870162000498565b92505060408401516001604060020a038111156200058957600080fd5b620005978682870162000498565b9150509250925092565b600060208284031215620005b457600080fd5b60006200051584846200048a565b620005cd8162000711565b82525050565b620005cd816200071d565b602681527f475245415445525f4f525f455155414c5f544f5f32305f4c454e4754485f524560208201527f5155495245440000000000000000000000000000000000000000000000000000604082015260600190565b601881527f554e524547495354455245445f41535345545f50524f58590000000000000000602082015260400190565b620005cd8162000472565b604081016200067f8285620005c2565b62000483602083018462000664565b60208101620003ca8284620005d3565b60208082528101620003ca81620005de565b60208082528101620003ca8162000634565b6040518181016001604060020a0381118282101715620006e157600080fd5b604052919050565b60006001604060020a038211156200070057600080fd5b506020601f91909101601f19160190565b600160a060020a031690565b7fffffffff000000000000000000000000000000000000000000000000000000001690565b151590565b60005b83811015620007645781810151838201526020016200074a565b8381111562000774576000848401525b50505050565b612551806200078a6000396000f30060806040526004361061006c5763ffffffff7c010000000000000000000000000000000000000000000000000000000060003504166318978e8281146100c8578063630f1e6c146100f25780638da5cb5b146101125780639395525c14610134578063f2fde38b14610147575b60025473ffffffffffffffffffffffffffffffffffffffff1633146100c6576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612337565b60405180910390fd5b005b6100db6100d6366004611da0565b610167565b6040516100e9929190612437565b60405180910390f35b3480156100fe57600080fd5b506100c661010d366004611e9b565b6102f7565b34801561011e57600080fd5b50610127610388565b6040516100e991906122e6565b6100db610142366004611cba565b6103a4565b34801561015357600080fd5b506100c6610162366004611c94565b61050a565b61016f6119a9565b6101776119a9565b6000806101826105bb565b60048054604080516020601f60027fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff610100600188161502019095169490940493840181900481028201810190925282815261025c939092909183018282801561022d5780601f106102025761010080835404028352916020019161022d565b820191906000526020600020905b81548152906001019060200180831161021057829003601f168201915b50505050508c600081518110151561024157fe5b6020908102909101015161014001519063ffffffff61069616565b156102875761026c8b8b8b6107c3565b935061028084600001518560600151610acb565b90506102ae565b6102928b8b8b610b0d565b9350836060015191506102a68883896107c3565b845190935090505b6102c2846020015184602001518888610d1f565b6102e98b60008151811015156102d457fe5b90602001906020020151610140015182610f33565b505097509795505050505050565b60005473ffffffffffffffffffffffffffffffffffffffff163314610348576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123e7565b61038383838080601f01602080910402602001604051908101604052809392919081815260200183838082843750879450610f339350505050565b505050565b60005473ffffffffffffffffffffffffffffffffffffffff1681565b6103ac6119a9565b6103b46119a9565b60008060006103c16105bb565b60048054604080516020601f60027fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff6101006001881615020190951694909404938401819004810282018101909252828152610441939092909183018282801561022d5780601f106102025761010080835404028352916020019161022d565b156104925761046a670de0b6b3a7640000610464670de0b6b3a76400008a61104f565b34611099565b92506104778b848c6110f1565b945061048b85600001518660600151610acb565b90506104d6565b6104ad670d2f13f7789f0000670de0b6b3a764000034611099565b92506104ba8b848c6110f1565b9450846060015191506104ce89838a6107c3565b855190945090505b6104ea856020015185602001518989610d1f565b6104fc8b60008151811015156102d457fe5b505050965096945050505050565b60005473ffffffffffffffffffffffffffffffffffffffff16331461055b576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123e7565b73ffffffffffffffffffffffffffffffffffffffff8116156105b857600080547fffffffffffffffffffffffff00000000000000000000000000000000000000001673ffffffffffffffffffffffffffffffffffffffff83161790555b50565b600034116105f5576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612347565b600260009054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1663d0e30db0346040518263ffffffff167c01000000000000000000000000000000000000000000000000000000000281526004016000604051808303818588803b15801561067b57600080fd5b505af115801561068f573d6000803e3d6000fd5b5050505050565b6000815183511480156107ba5750816040518082805190602001908083835b602083106106f257805182527fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffe090920191602091820191016106b5565b51815160209384036101000a7fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff0180199092169116179052604051919093018190038120885190955088945090928392508401908083835b6020831061078757805182527fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffe0909201916020918201910161074a565b6001836020036101000a038019825116818451168082178552505050505050905001915050604051809103902060001916145b90505b92915050565b6107cb6119a9565b60608060008060008060006107de6119a9565b8a15156107ea57610abc565b6004805460408051602060026001851615610100027fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff0190941693909304601f8101849004840282018401909252818152929183018282801561088e5780601f106108635761010080835404028352916020019161088e565b820191906000526020600020905b81548152906001019060200180831161087157829003601f168201915b505060058054604080516020601f60027fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff6101006001881615020190951694909404938401819004810282018101909252828152969e509194509250840190508282801561093d5780601f106109125761010080835404028352916020019161093d565b820191906000526020600020905b81548152906001019060200180831161092057829003601f168201915b50505050509650600095508b519450600093505b838514610a8257878c8581518110151561096757fe5b6020908102909101015161014001528b5187908d908690811061098657fe5b60209081029091010151610160015261099f8b87610acb565b9250610a068c858151811015156109b257fe5b9060200190602002015160a00151610a008e878151811015156109d157fe5b90602001906020020151608001518f888151811015156109ed57fe5b9060200190602002015160e00151610acb565b85611099565b9150610a4b8c85815181101515610a1957fe5b90602001906020020151610a2e84600161104f565b8c87815181101515610a3c57fe5b90602001906020020151611295565b9050610a57898261130d565b610a6989600001518a60600151610acb565b95508a8610610a7757610a82565b600190930192610951565b8a861015610abc576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123c7565b50505050505050509392505050565b600082821115610b07576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612367565b50900390565b610b156119a9565b606080600080600080610b266119a9565b60008b6000815181101515610b3757fe5b6020908102919091018101516101400151600580546040805160026001841615610100027fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff0190931692909204601f8101869004860283018601909152808252929b5092909190830182828015610bef5780601f10610bc457610100808354040283529160200191610bef565b820191906000526020600020905b815481529060010190602001808311610bd257829003601f168201915b505050505096508b519550600094505b848614610ce557878c86815181101515610c1557fe5b6020908102909101015161014001528b5187908d9087908110610c3457fe5b6020908102909101015161016001528851610c50908c90610acb565b9350610c938c86815181101515610c6357fe5b9060200190602002015160a001518d87815181101515610c7f57fe5b906020019060200201516080015186611099565b9250610cbf8c86815181101515610ca657fe5b90602001906020020151848c88815181101515610a3c57fe5b9150610ccb898361130d565b5087518a8110610cda57610ce5565b600190940193610bff565b8a811015610abc576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123c7565b600080808066b1a2bc2ec50000861115610d65576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123f7565b610d6f888861104f565b935034841115610dab576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612357565b610db53485610acb565b9250610dca86670de0b6b3a76400008a611099565b915082821115610e06576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123d7565b6000831115610f29576002546040517f2e1a7d4d00000000000000000000000000000000000000000000000000000000815273ffffffffffffffffffffffffffffffffffffffff90911690632e1a7d4d90610e65908690600401612453565b600060405180830381600087803b158015610e7f57600080fd5b505af1158015610e93573d6000803e3d6000fd5b505050506000821115610ee55760405173ffffffffffffffffffffffffffffffffffffffff86169083156108fc029084906000818181858888f19350505050158015610ee3573d6000803e3d6000fd5b505b610eef8383610acb565b90506000811115610f2957604051339082156108fc029083906000818181858888f19350505050158015610f27573d6000803e3d6000fd5b505b5050505050505050565b6000610f45838263ffffffff61136f16565b604080517f4552433230546f6b656e28616464726573732900000000000000000000000000815290519081900360130190209091507fffffffff0000000000000000000000000000000000000000000000000000000080831691161415610fb557610fb083836113dc565b610383565b604080517f455243373231546f6b656e28616464726573732c75696e7432353629000000008152905190819003601c0190207fffffffff000000000000000000000000000000000000000000000000000000008281169116141561101d57610fb083836115ca565b6040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123a7565b60008282018381101561108e576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612397565b8091505b5092915050565b60008083116110d4576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612387565b6110e76110e185846116b2565b8461170d565b90505b9392505050565b6110f96119a9565b60608060008060006111096119a9565b89600081518110151561111857fe5b6020908102919091018101516101400151600580546040805160026001841615610100027fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff0190931692909204601f8101869004860283018601909152808252929950929091908301828280156111d05780601f106111a5576101008083540402835291602001916111d0565b820191906000526020600020905b8154815290600101906020018083116111b357829003601f168201915b5050505050945089519350600092505b82841461128857858a848151811015156111f657fe5b602090810290910101516101400152895185908b908590811061121557fe5b906020019060200201516101600181905250611235898860200151610acb565b91506112618a8481518110151561124857fe5b90602001906020020151838a86815181101515610a3c57fe5b905061126d878261130d565b6020870151891161127d57611288565b6001909201916111e0565b5050505050509392505050565b61129d6119a9565b606060006112ac868686611724565b600154815191935073ffffffffffffffffffffffffffffffffffffffff1691506080908390602082016000855af1801561130357825184526020830151602085015260408301516040850152606083015160608501525b5050509392505050565b8151815161131b919061104f565b825260208083015190820151611331919061104f565b60208301526040808301519082015161134a919061104f565b604083015260608083015190820151611363919061104f565b60609092019190915250565b6000816004018351101515156113b1576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612417565b5001602001517fffffffff000000000000000000000000000000000000000000000000000000001690565b6000806113f084601063ffffffff6118f616565b604080517f7472616e7366657228616464726573732c75696e7432353629000000000000008152905190819003601901812091935073ffffffffffffffffffffffffffffffffffffffff8416919061144e903390879060240161231c565b604080517fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffe08184030181529181526020820180517bffffffffffffffffffffffffffffffffffffffffffffffffffffffff167fffffffff000000000000000000000000000000000000000000000000000000009094169390931783525181519192909182919080838360005b838110156114f25781810151838201526020016114da565b50505050905090810190601f16801561151f5780820380516001836020036101000a031916815260200191505b509150506000604051808303816000865af19250505080151561156e576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123b7565b3d1561158b575060003d6020141561158b5760206000803e506000515b8015156115c4576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123b7565b50505050565b60008060018314611607576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612427565b61161884601063ffffffff6118f616565b915061162b84602463ffffffff61195716565b6040517f23b872dd00000000000000000000000000000000000000000000000000000000815290915073ffffffffffffffffffffffffffffffffffffffff8316906323b872dd90611684903090339086906004016122f4565b600060405180830381600087803b15801561169e57600080fd5b505af1158015610f29573d6000803e3d6000fd5b6000808315156116c55760009150611092565b508282028284828115156116d557fe5b041461108e576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612397565b600080828481151561171b57fe5b04949350505050565b604080517fb4be83d5000000000000000000000000000000000000000000000000000000006020808301919091526060602483018181528751608485019081528884015160a48601529488015160c48501529087015160e4840152608087015161010484015260a087015161012484015260c087015161014484015260e08701516101648401526101008701516101848401526101208701516101a4840152610140870180516101c485019081526101608901516101e4860152610180905251805161020485018190529394919384936044870192849261022489019291820191601f82010460005b8181101561182b57835185526020948501949093019260010161180d565b50505050818103610160808401919091528a0151805180835260209283019291820191601f82010460005b81811015611874578351855260209485019490930192600101611856565b50505089845250848103602093840190815288518083529093918201918981019190601f82010460005b818110156118bc57835185526020948501949093019260010161189e565b5050507fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffe08883030188525060405250505050509392505050565b600081601401835110151515611938576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612407565b50016014015173ffffffffffffffffffffffffffffffffffffffff1690565b60006107ba83836000816020018351101515156119a0576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612377565b50016020015190565b608060405190810160405280600081526020016000815260200160008152602001600081525090565b60006107ba82356124ef565b6000601f820183136119ef57600080fd5b8135611a026119fd82612488565b612461565b81815260209384019390925082018360005b83811015611a405781358601611a2a8882611af0565b8452506020928301929190910190600101611a14565b5050505092915050565b6000601f82018313611a5b57600080fd5b8135611a696119fd82612488565b81815260209384019390925082018360005b83811015611a405781358601611a918882611b3f565b8452506020928301929190910190600101611a7b565b600080601f83018413611ab957600080fd5b50813567ffffffffffffffff811115611ad157600080fd5b602083019150836001820283011115611ae957600080fd5b9250929050565b6000601f82018313611b0157600080fd5b8135611b0f6119fd826124a9565b91508082526020830160208301858383011115611b2b57600080fd5b611b3683828461250b565b50505092915050565b60006101808284031215611b5257600080fd5b611b5d610180612461565b90506000611b6b84846119d2565b8252506020611b7c848483016119d2565b6020830152506040611b90848285016119d2565b6040830152506060611ba4848285016119d2565b6060830152506080611bb884828501611c88565b60808301525060a0611bcc84828501611c88565b60a08301525060c0611be084828501611c88565b60c08301525060e0611bf484828501611c88565b60e083015250610100611c0984828501611c88565b61010083015250610120611c1f84828501611c88565b6101208301525061014082013567ffffffffffffffff811115611c4157600080fd5b611c4d84828501611af0565b6101408301525061016082013567ffffffffffffffff811115611c6f57600080fd5b611c7b84828501611af0565b6101608301525092915050565b60006107ba8235612508565b600060208284031215611ca657600080fd5b6000611cb284846119d2565b949350505050565b60008060008060008060c08789031215611cd357600080fd5b863567ffffffffffffffff811115611cea57600080fd5b611cf689828a01611a4a565b965050602087013567ffffffffffffffff811115611d1357600080fd5b611d1f89828a016119de565b955050604087013567ffffffffffffffff811115611d3c57600080fd5b611d4889828a01611a4a565b945050606087013567ffffffffffffffff811115611d6557600080fd5b611d7189828a016119de565b9350506080611d8289828a01611c88565b92505060a0611d9389828a016119d2565b9150509295509295509295565b600080600080600080600060e0888a031215611dbb57600080fd5b873567ffffffffffffffff811115611dd257600080fd5b611dde8a828b01611a4a565b9750506020611def8a828b01611c88565b965050604088013567ffffffffffffffff811115611e0c57600080fd5b611e188a828b016119de565b955050606088013567ffffffffffffffff811115611e3557600080fd5b611e418a828b01611a4a565b945050608088013567ffffffffffffffff811115611e5e57600080fd5b611e6a8a828b016119de565b93505060a0611e7b8a828b01611c88565b92505060c0611e8c8a828b016119d2565b91505092959891949750929550565b600080600060408486031215611eb057600080fd5b833567ffffffffffffffff811115611ec757600080fd5b611ed386828701611aa7565b93509350506020611ee686828701611c88565b9150509250925092565b611ef9816124ef565b82525050565b602381527f44454641554c545f46554e4354494f4e5f574554485f434f4e54524143545f4f60208201527f4e4c590000000000000000000000000000000000000000000000000000000000604082015260600190565b601181527f494e56414c49445f4d53475f56414c5545000000000000000000000000000000602082015260400190565b600d81527f4f564552534f4c445f5745544800000000000000000000000000000000000000602082015260400190565b601181527f55494e543235365f554e444552464c4f57000000000000000000000000000000602082015260400190565b602681527f475245415445525f4f525f455155414c5f544f5f33325f4c454e4754485f524560208201527f5155495245440000000000000000000000000000000000000000000000000000604082015260600190565b601081527f4449564953494f4e5f42595f5a45524f00000000000000000000000000000000602082015260400190565b601081527f55494e543235365f4f564552464c4f5700000000000000000000000000000000602082015260400190565b601781527f554e535550504f525445445f41535345545f50524f5859000000000000000000602082015260400190565b600f81527f5452414e534645525f4641494c45440000000000000000000000000000000000602082015260400190565b601481527f434f4d504c4554455f46494c4c5f4641494c4544000000000000000000000000602082015260400190565b601a81527f494e53554646494349454e545f4554485f52454d41494e494e47000000000000602082015260400190565b601381527f4f4e4c595f434f4e54524143545f4f574e455200000000000000000000000000602082015260400190565b601881527f4645455f50455243454e544147455f544f4f5f4c415247450000000000000000602082015260400190565b602681527f475245415445525f4f525f455155414c5f544f5f32305f4c454e4754485f524560208201527f5155495245440000000000000000000000000000000000000000000000000000604082015260600190565b602581527f475245415445525f4f525f455155414c5f544f5f345f4c454e4754485f52455160208201527f5549524544000000000000000000000000000000000000000000000000000000604082015260600190565b600e81527f494e56414c49445f414d4f554e54000000000000000000000000000000000000602082015260400190565b805160808301906122a884826122dd565b5060208201516122bb60208501826122dd565b5060408201516122ce60408501826122dd565b5060608201516115c460608501825b611ef981612508565b602081016107bd8284611ef0565b606081016123028286611ef0565b61230f6020830185611ef0565b611cb260408301846122dd565b6040810161232a8285611ef0565b6110ea60208301846122dd565b602080825281016107bd81611eff565b602080825281016107bd81611f55565b602080825281016107bd81611f85565b602080825281016107bd81611fb5565b602080825281016107bd81611fe5565b602080825281016107bd8161203b565b602080825281016107bd8161206b565b602080825281016107bd8161209b565b602080825281016107bd816120cb565b602080825281016107bd816120fb565b602080825281016107bd8161212b565b602080825281016107bd8161215b565b602080825281016107bd8161218b565b602080825281016107bd816121bb565b602080825281016107bd81612211565b602080825281016107bd81612267565b61010081016124468285612297565b6110ea6080830184612297565b602081016107bd82846122dd565b60405181810167ffffffffffffffff8111828210171561248057600080fd5b604052919050565b600067ffffffffffffffff82111561249f57600080fd5b5060209081020190565b600067ffffffffffffffff8211156124c057600080fd5b506020601f919091017fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffe0160190565b73ffffffffffffffffffffffffffffffffffffffff1690565b90565b828183375060009101525600a265627a7a72305820185af4a5e8525b0c20983bf22c09773a1cab3f704716cba4c8da3b112601cd666c6578706572696d656e74616cf50037"
+	"schemaVersion": "2.0.0",
+	"contractName": "Forwarder",
+	"compilerOutput": {
+		"abi": [
+			{
+				"constant": false,
+				"inputs": [
+					{
+						"components": [
+							{
+								"name": "makerAddress",
+								"type": "address"
+							},
+							{
+								"name": "takerAddress",
+								"type": "address"
+							},
+							{
+								"name": "feeRecipientAddress",
+								"type": "address"
+							},
+							{
+								"name": "senderAddress",
+								"type": "address"
+							},
+							{
+								"name": "makerAssetAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "takerAssetAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "makerFee",
+								"type": "uint256"
+							},
+							{
+								"name": "takerFee",
+								"type": "uint256"
+							},
+							{
+								"name": "expirationTimeSeconds",
+								"type": "uint256"
+							},
+							{
+								"name": "salt",
+								"type": "uint256"
+							},
+							{
+								"name": "makerAssetData",
+								"type": "bytes"
+							},
+							{
+								"name": "takerAssetData",
+								"type": "bytes"
+							}
+						],
+						"name": "orders",
+						"type": "tuple[]"
+					},
+					{
+						"name": "makerAssetFillAmount",
+						"type": "uint256"
+					},
+					{
+						"name": "signatures",
+						"type": "bytes[]"
+					},
+					{
+						"components": [
+							{
+								"name": "makerAddress",
+								"type": "address"
+							},
+							{
+								"name": "takerAddress",
+								"type": "address"
+							},
+							{
+								"name": "feeRecipientAddress",
+								"type": "address"
+							},
+							{
+								"name": "senderAddress",
+								"type": "address"
+							},
+							{
+								"name": "makerAssetAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "takerAssetAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "makerFee",
+								"type": "uint256"
+							},
+							{
+								"name": "takerFee",
+								"type": "uint256"
+							},
+							{
+								"name": "expirationTimeSeconds",
+								"type": "uint256"
+							},
+							{
+								"name": "salt",
+								"type": "uint256"
+							},
+							{
+								"name": "makerAssetData",
+								"type": "bytes"
+							},
+							{
+								"name": "takerAssetData",
+								"type": "bytes"
+							}
+						],
+						"name": "feeOrders",
+						"type": "tuple[]"
+					},
+					{
+						"name": "feeSignatures",
+						"type": "bytes[]"
+					},
+					{
+						"name": "feePercentage",
+						"type": "uint256"
+					},
+					{
+						"name": "feeRecipient",
+						"type": "address"
+					}
+				],
+				"name": "marketBuyOrdersWithEth",
+				"outputs": [
+					{
+						"components": [
+							{
+								"name": "makerAssetFilledAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "takerAssetFilledAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "makerFeePaid",
+								"type": "uint256"
+							},
+							{
+								"name": "takerFeePaid",
+								"type": "uint256"
+							}
+						],
+						"name": "orderFillResults",
+						"type": "tuple"
+					},
+					{
+						"components": [
+							{
+								"name": "makerAssetFilledAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "takerAssetFilledAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "makerFeePaid",
+								"type": "uint256"
+							},
+							{
+								"name": "takerFeePaid",
+								"type": "uint256"
+							}
+						],
+						"name": "feeOrderFillResults",
+						"type": "tuple"
+					}
+				],
+				"payable": true,
+				"stateMutability": "payable",
+				"type": "function"
+			},
+			{
+				"constant": false,
+				"inputs": [
+					{
+						"name": "assetData",
+						"type": "bytes"
+					},
+					{
+						"name": "amount",
+						"type": "uint256"
+					}
+				],
+				"name": "withdrawAsset",
+				"outputs": [],
+				"payable": false,
+				"stateMutability": "nonpayable",
+				"type": "function"
+			},
+			{
+				"constant": true,
+				"inputs": [],
+				"name": "owner",
+				"outputs": [
+					{
+						"name": "",
+						"type": "address"
+					}
+				],
+				"payable": false,
+				"stateMutability": "view",
+				"type": "function"
+			},
+			{
+				"constant": false,
+				"inputs": [
+					{
+						"components": [
+							{
+								"name": "makerAddress",
+								"type": "address"
+							},
+							{
+								"name": "takerAddress",
+								"type": "address"
+							},
+							{
+								"name": "feeRecipientAddress",
+								"type": "address"
+							},
+							{
+								"name": "senderAddress",
+								"type": "address"
+							},
+							{
+								"name": "makerAssetAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "takerAssetAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "makerFee",
+								"type": "uint256"
+							},
+							{
+								"name": "takerFee",
+								"type": "uint256"
+							},
+							{
+								"name": "expirationTimeSeconds",
+								"type": "uint256"
+							},
+							{
+								"name": "salt",
+								"type": "uint256"
+							},
+							{
+								"name": "makerAssetData",
+								"type": "bytes"
+							},
+							{
+								"name": "takerAssetData",
+								"type": "bytes"
+							}
+						],
+						"name": "orders",
+						"type": "tuple[]"
+					},
+					{
+						"name": "signatures",
+						"type": "bytes[]"
+					},
+					{
+						"components": [
+							{
+								"name": "makerAddress",
+								"type": "address"
+							},
+							{
+								"name": "takerAddress",
+								"type": "address"
+							},
+							{
+								"name": "feeRecipientAddress",
+								"type": "address"
+							},
+							{
+								"name": "senderAddress",
+								"type": "address"
+							},
+							{
+								"name": "makerAssetAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "takerAssetAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "makerFee",
+								"type": "uint256"
+							},
+							{
+								"name": "takerFee",
+								"type": "uint256"
+							},
+							{
+								"name": "expirationTimeSeconds",
+								"type": "uint256"
+							},
+							{
+								"name": "salt",
+								"type": "uint256"
+							},
+							{
+								"name": "makerAssetData",
+								"type": "bytes"
+							},
+							{
+								"name": "takerAssetData",
+								"type": "bytes"
+							}
+						],
+						"name": "feeOrders",
+						"type": "tuple[]"
+					},
+					{
+						"name": "feeSignatures",
+						"type": "bytes[]"
+					},
+					{
+						"name": "feePercentage",
+						"type": "uint256"
+					},
+					{
+						"name": "feeRecipient",
+						"type": "address"
+					}
+				],
+				"name": "marketSellOrdersWithEth",
+				"outputs": [
+					{
+						"components": [
+							{
+								"name": "makerAssetFilledAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "takerAssetFilledAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "makerFeePaid",
+								"type": "uint256"
+							},
+							{
+								"name": "takerFeePaid",
+								"type": "uint256"
+							}
+						],
+						"name": "orderFillResults",
+						"type": "tuple"
+					},
+					{
+						"components": [
+							{
+								"name": "makerAssetFilledAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "takerAssetFilledAmount",
+								"type": "uint256"
+							},
+							{
+								"name": "makerFeePaid",
+								"type": "uint256"
+							},
+							{
+								"name": "takerFeePaid",
+								"type": "uint256"
+							}
+						],
+						"name": "feeOrderFillResults",
+						"type": "tuple"
+					}
+				],
+				"payable": true,
+				"stateMutability": "payable",
+				"type": "function"
+			},
+			{
+				"constant": false,
+				"inputs": [
+					{
+						"name": "newOwner",
+						"type": "address"
+					}
+				],
+				"name": "transferOwnership",
+				"outputs": [],
+				"payable": false,
+				"stateMutability": "nonpayable",
+				"type": "function"
+			},
+			{
+				"inputs": [
+					{
+						"name": "_exchange",
+						"type": "address"
+					},
+					{
+						"name": "_zrxAssetData",
+						"type": "bytes"
+					},
+					{
+						"name": "_wethAssetData",
+						"type": "bytes"
+					}
+				],
+				"payable": false,
+				"stateMutability": "nonpayable",
+				"type": "constructor"
+			},
+			{
+				"payable": true,
+				"stateMutability": "payable",
+				"type": "fallback"
+			}
+		],
+		"evm": {
+			"bytecode": {
+				"linkReferences": {},
+                "object": "0x60806040523480156200001157600080fd5b5060405162002d2c38038062002d2c83398101806040526200003791908101906200051d565b6000805433600160a060020a031991821617825560018054909116600160a060020a0386161790558251849084908490849081906200007e906004906020870190620003d0565b50825162000094906005906020860190620003d0565b50620000b0836010640100000000620019476200036f82021704565b9150620000cd846010640100000000620019476200036f82021704565b60028054600160a060020a03948516600160a060020a031991821617909155600380549285169290911691909117905550600154604080517f4552433230546f6b656e28616464726573732900000000000000000000000000815290519081900360130181207f6070410800000000000000000000000000000000000000000000000000000000825291909216945063607041089350620001739250906004016200068e565b602060405180830381600087803b1580156200018e57600080fd5b505af1158015620001a3573d6000803e3d6000fd5b505050506040513d601f19601f82011682018060405250620001c99190810190620004f4565b9050600160a060020a038116151562000219576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016200021090620006b0565b60405180910390fd5b6002546040517f095ea7b3000000000000000000000000000000000000000000000000000000008152600160a060020a039091169063095ea7b39062000268908490600019906004016200066f565b602060405180830381600087803b1580156200028357600080fd5b505af115801562000298573d6000803e3d6000fd5b505050506040513d601f19601f82011682018060405250620002be9190810190620005a1565b506003546040517f095ea7b3000000000000000000000000000000000000000000000000000000008152600160a060020a039091169063095ea7b3906200030e908490600019906004016200066f565b602060405180830381600087803b1580156200032957600080fd5b505af11580156200033e573d6000803e3d6000fd5b505050506040513d601f19601f82011682018060405250620003649190810190620005a1565b50505050506200077a565b600081601401835110151515620003b4576040517f08c379a000000000000000000000000000000000000000000000000000000000815260040162000210906200069e565b506014818301810151910190600160a060020a03165b92915050565b828054600181600116156101000203166002900490600052602060002090601f016020900481019282601f106200041357805160ff191683800117855562000443565b8280016001018555821562000443579182015b828111156200044357825182559160200191906001019062000426565b506200045192915062000455565b5090565b6200047291905b808211156200045157600081556001016200045c565b90565b600062000483825162000711565b9392505050565b600062000483825162000742565b6000601f82018313620004aa57600080fd5b8151620004c1620004bb82620006e9565b620006c2565b91508082526020830160208301858383011115620004de57600080fd5b620004eb83828462000747565b50505092915050565b6000602082840312156200050757600080fd5b600062000515848462000475565b949350505050565b6000806000606084860312156200053357600080fd5b600062000541868662000475565b93505060208401516001604060020a038111156200055e57600080fd5b6200056c8682870162000498565b92505060408401516001604060020a038111156200058957600080fd5b620005978682870162000498565b9150509250925092565b600060208284031215620005b457600080fd5b60006200051584846200048a565b620005cd8162000711565b82525050565b620005cd816200071d565b602681527f475245415445525f4f525f455155414c5f544f5f32305f4c454e4754485f524560208201527f5155495245440000000000000000000000000000000000000000000000000000604082015260600190565b601881527f554e524547495354455245445f41535345545f50524f58590000000000000000602082015260400190565b620005cd8162000472565b604081016200067f8285620005c2565b62000483602083018462000664565b60208101620003ca8284620005d3565b60208082528101620003ca81620005de565b60208082528101620003ca8162000634565b6040518181016001604060020a0381118282101715620006e157600080fd5b604052919050565b60006001604060020a038211156200070057600080fd5b506020601f91909101601f19160190565b600160a060020a031690565b7fffffffff000000000000000000000000000000000000000000000000000000001690565b151590565b60005b83811015620007645781810151838201526020016200074a565b8381111562000774576000848401525b50505050565b6125a2806200078a6000396000f30060806040526004361061006c5763ffffffff7c010000000000000000000000000000000000000000000000000000000060003504166318978e8281146100c8578063630f1e6c146100f25780638da5cb5b146101125780639395525c14610134578063f2fde38b14610147575b60025473ffffffffffffffffffffffffffffffffffffffff1633146100c6576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612388565b60405180910390fd5b005b6100db6100d6366004611df1565b610167565b6040516100e9929190612488565b60405180910390f35b3480156100fe57600080fd5b506100c661010d366004611eec565b6102f7565b34801561011e57600080fd5b50610127610388565b6040516100e99190612337565b6100db610142366004611d0b565b6103a4565b34801561015357600080fd5b506100c6610162366004611ce5565b61050a565b61016f6119fa565b6101776119fa565b6000806101826105bb565b60048054604080516020601f60027fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff610100600188161502019095169490940493840181900481028201810190925282815261025c939092909183018282801561022d5780601f106102025761010080835404028352916020019161022d565b820191906000526020600020905b81548152906001019060200180831161021057829003601f168201915b50505050508c600081518110151561024157fe5b6020908102909101015161014001519063ffffffff61069616565b156102875761026c8b8b8b6107c3565b935061028084600001518560600151610ac1565b90506102ae565b6102928b8b8b610b03565b9350836060015191506102a68883896107c3565b845190935090505b6102c2846020015184602001518888610d15565b6102e98b60008151811015156102d457fe5b90602001906020020151610140015182610f29565b505097509795505050505050565b60005473ffffffffffffffffffffffffffffffffffffffff163314610348576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612438565b61038383838080601f01602080910402602001604051908101604052809392919081815260200183838082843750879450610f299350505050565b505050565b60005473ffffffffffffffffffffffffffffffffffffffff1681565b6103ac6119fa565b6103b46119fa565b60008060006103c16105bb565b60048054604080516020601f60027fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff6101006001881615020190951694909404938401819004810282018101909252828152610441939092909183018282801561022d5780601f106102025761010080835404028352916020019161022d565b156104925761046a670de0b6b3a7640000610464670de0b6b3a76400008a611045565b3461108f565b92506104778b848c6110e7565b945061048b85600001518660600151610ac1565b90506104d6565b6104ad670d2f13f7789f0000670de0b6b3a76400003461108f565b92506104ba8b848c6110e7565b9450846060015191506104ce89838a6107c3565b855190945090505b6104ea856020015185602001518989610d15565b6104fc8b60008151811015156102d457fe5b505050965096945050505050565b60005473ffffffffffffffffffffffffffffffffffffffff16331461055b576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612438565b73ffffffffffffffffffffffffffffffffffffffff8116156105b857600080547fffffffffffffffffffffffff00000000000000000000000000000000000000001673ffffffffffffffffffffffffffffffffffffffff83161790555b50565b600034116105f5576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612398565b600260009054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1663d0e30db0346040518263ffffffff167c01000000000000000000000000000000000000000000000000000000000281526004016000604051808303818588803b15801561067b57600080fd5b505af115801561068f573d6000803e3d6000fd5b5050505050565b6000815183511480156107ba5750816040518082805190602001908083835b602083106106f257805182527fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffe090920191602091820191016106b5565b51815160209384036101000a7fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff0180199092169116179052604051919093018190038120885190955088945090928392508401908083835b6020831061078757805182527fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffe0909201916020918201910161074a565b6001836020036101000a038019825116818451168082178552505050505050905001915050604051809103902060001916145b90505b92915050565b6107cb6119fa565b60608060008060008060006107de6119fa565b8a15156107ea57610ab2565b6004805460408051602060026001851615610100027fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff0190941693909304601f8101849004840282018401909252818152929183018282801561088e5780601f106108635761010080835404028352916020019161088e565b820191906000526020600020905b81548152906001019060200180831161087157829003601f168201915b505060058054604080516020601f60027fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff6101006001881615020190951694909404938401819004810282018101909252828152969e509194509250840190508282801561093d5780601f106109125761010080835404028352916020019161093d565b820191906000526020600020905b81548152906001019060200180831161092057829003601f168201915b50505050509650600095508b519450600093505b838514610a7857878c8581518110151561096757fe5b6020908102909101015161014001528b5187908d908690811061098657fe5b60209081029091010151610160015261099f8b87610ac1565b9250610a068c858151811015156109b257fe5b9060200190602002015160a00151610a008e878151811015156109d157fe5b90602001906020020151608001518f888151811015156109ed57fe5b9060200190602002015160e00151610ac1565b8561128b565b9150610a418c85815181101515610a1957fe5b90602001906020020151838c87815181101515610a3257fe5b906020019060200201516112e6565b9050610a4d898261135e565b610a5f89600001518a60600151610ac1565b95508a8610610a6d57610a78565b600190930192610951565b8a861015610ab2576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612418565b50505050505050509392505050565b600082821115610afd576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123b8565b50900390565b610b0b6119fa565b606080600080600080610b1c6119fa565b60008b6000815181101515610b2d57fe5b6020908102919091018101516101400151600580546040805160026001841615610100027fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff0190931692909204601f8101869004860283018601909152808252929b5092909190830182828015610be55780601f10610bba57610100808354040283529160200191610be5565b820191906000526020600020905b815481529060010190602001808311610bc857829003601f168201915b505050505096508b519550600094505b848614610cdb57878c86815181101515610c0b57fe5b6020908102909101015161014001528b5187908d9087908110610c2a57fe5b6020908102909101015161016001528851610c46908c90610ac1565b9350610c898c86815181101515610c5957fe5b9060200190602002015160a001518d87815181101515610c7557fe5b90602001906020020151608001518661128b565b9250610cb58c86815181101515610c9c57fe5b90602001906020020151848c88815181101515610a3257fe5b9150610cc1898361135e565b5087518a8110610cd057610cdb565b600190940193610bf5565b8a811015610ab2576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612418565b600080808066b1a2bc2ec50000861115610d5b576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612448565b610d658888611045565b935034841115610da1576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123a8565b610dab3485610ac1565b9250610dc086670de0b6b3a76400008a61108f565b915082821115610dfc576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612428565b6000831115610f1f576002546040517f2e1a7d4d00000000000000000000000000000000000000000000000000000000815273ffffffffffffffffffffffffffffffffffffffff90911690632e1a7d4d90610e5b9086906004016124a4565b600060405180830381600087803b158015610e7557600080fd5b505af1158015610e89573d6000803e3d6000fd5b505050506000821115610edb5760405173ffffffffffffffffffffffffffffffffffffffff86169083156108fc029084906000818181858888f19350505050158015610ed9573d6000803e3d6000fd5b505b610ee58383610ac1565b90506000811115610f1f57604051339082156108fc029083906000818181858888f19350505050158015610f1d573d6000803e3d6000fd5b505b5050505050505050565b6000610f3b838263ffffffff6113c016565b604080517f4552433230546f6b656e28616464726573732900000000000000000000000000815290519081900360130190209091507fffffffff0000000000000000000000000000000000000000000000000000000080831691161415610fab57610fa6838361142d565b610383565b604080517f455243373231546f6b656e28616464726573732c75696e7432353629000000008152905190819003601c0190207fffffffff000000000000000000000000000000000000000000000000000000008281169116141561101357610fa6838361161b565b6040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123f8565b600082820183811015611084576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123e8565b8091505b5092915050565b60008083116110ca576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123d8565b6110dd6110d78584611703565b8461175e565b90505b9392505050565b6110ef6119fa565b60608060008060006110ff6119fa565b89600081518110151561110e57fe5b6020908102919091018101516101400151600580546040805160026001841615610100027fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff0190931692909204601f8101869004860283018601909152808252929950929091908301828280156111c65780601f1061119b576101008083540402835291602001916111c6565b820191906000526020600020905b8154815290600101906020018083116111a957829003601f168201915b5050505050945089519350600092505b82841461127e57858a848151811015156111ec57fe5b602090810290910101516101400152895185908b908590811061120b57fe5b90602001906020020151610160018190525061122b898860200151610ac1565b91506112578a8481518110151561123e57fe5b90602001906020020151838a86815181101515610a3257fe5b9050611263878261135e565b602087015189116112735761127e565b6001909201916111d6565b5050505050509392505050565b60008083116112c6576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123d8565b6110dd6110d76112d68685611703565b6112e1866001610ac1565b611045565b6112ee6119fa565b606060006112fd868686611775565b600154815191935073ffffffffffffffffffffffffffffffffffffffff1691506080908390602082016000855af1801561135457825184526020830151602085015260408301516040850152606083015160608501525b5050509392505050565b8151815161136c9190611045565b8252602080830151908201516113829190611045565b60208301526040808301519082015161139b9190611045565b6040830152606080830151908201516113b49190611045565b60609092019190915250565b600081600401835110151515611402576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612468565b5001602001517fffffffff000000000000000000000000000000000000000000000000000000001690565b60008061144184601063ffffffff61194716565b604080517f7472616e7366657228616464726573732c75696e7432353629000000000000008152905190819003601901812091935073ffffffffffffffffffffffffffffffffffffffff8416919061149f903390879060240161236d565b604080517fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffe08184030181529181526020820180517bffffffffffffffffffffffffffffffffffffffffffffffffffffffff167fffffffff000000000000000000000000000000000000000000000000000000009094169390931783525181519192909182919080838360005b8381101561154357818101518382015260200161152b565b50505050905090810190601f1680156115705780820380516001836020036101000a031916815260200191505b509150506000604051808303816000865af1925050508015156115bf576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612408565b3d156115dc575060003d602014156115dc5760206000803e506000515b801515611615576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612408565b50505050565b60008060018314611658576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612478565b61166984601063ffffffff61194716565b915061167c84602463ffffffff6119a816565b6040517f23b872dd00000000000000000000000000000000000000000000000000000000815290915073ffffffffffffffffffffffffffffffffffffffff8316906323b872dd906116d590309033908690600401612345565b600060405180830381600087803b1580156116ef57600080fd5b505af1158015610f1f573d6000803e3d6000fd5b6000808315156117165760009150611088565b5082820282848281151561172657fe5b0414611084576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123e8565b600080828481151561176c57fe5b04949350505050565b604080517fb4be83d5000000000000000000000000000000000000000000000000000000006020808301919091526060602483018181528751608485019081528884015160a48601529488015160c48501529087015160e4840152608087015161010484015260a087015161012484015260c087015161014484015260e08701516101648401526101008701516101848401526101208701516101a4840152610140870180516101c485019081526101608901516101e4860152610180905251805161020485018190529394919384936044870192849261022489019291820191601f82010460005b8181101561187c57835185526020948501949093019260010161185e565b50505050818103610160808401919091528a0151805180835260209283019291820191601f82010460005b818110156118c55783518552602094850194909301926001016118a7565b50505089845250848103602093840190815288518083529093918201918981019190601f82010460005b8181101561190d5783518552602094850194909301926001016118ef565b5050507fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffe08883030188525060405250505050509392505050565b600081601401835110151515611989576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd90612458565b50016014015173ffffffffffffffffffffffffffffffffffffffff1690565b60006107ba83836000816020018351101515156119f1576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016100bd906123c8565b50016020015190565b608060405190810160405280600081526020016000815260200160008152602001600081525090565b60006107ba8235612540565b6000601f82018313611a4057600080fd5b8135611a53611a4e826124d9565b6124b2565b81815260209384019390925082018360005b83811015611a915781358601611a7b8882611b41565b8452506020928301929190910190600101611a65565b5050505092915050565b6000601f82018313611aac57600080fd5b8135611aba611a4e826124d9565b81815260209384019390925082018360005b83811015611a915781358601611ae28882611b90565b8452506020928301929190910190600101611acc565b600080601f83018413611b0a57600080fd5b50813567ffffffffffffffff811115611b2257600080fd5b602083019150836001820283011115611b3a57600080fd5b9250929050565b6000601f82018313611b5257600080fd5b8135611b60611a4e826124fa565b91508082526020830160208301858383011115611b7c57600080fd5b611b8783828461255c565b50505092915050565b60006101808284031215611ba357600080fd5b611bae6101806124b2565b90506000611bbc8484611a23565b8252506020611bcd84848301611a23565b6020830152506040611be184828501611a23565b6040830152506060611bf584828501611a23565b6060830152506080611c0984828501611cd9565b60808301525060a0611c1d84828501611cd9565b60a08301525060c0611c3184828501611cd9565b60c08301525060e0611c4584828501611cd9565b60e083015250610100611c5a84828501611cd9565b61010083015250610120611c7084828501611cd9565b6101208301525061014082013567ffffffffffffffff811115611c9257600080fd5b611c9e84828501611b41565b6101408301525061016082013567ffffffffffffffff811115611cc057600080fd5b611ccc84828501611b41565b6101608301525092915050565b60006107ba8235612559565b600060208284031215611cf757600080fd5b6000611d038484611a23565b949350505050565b60008060008060008060c08789031215611d2457600080fd5b863567ffffffffffffffff811115611d3b57600080fd5b611d4789828a01611a9b565b965050602087013567ffffffffffffffff811115611d6457600080fd5b611d7089828a01611a2f565b955050604087013567ffffffffffffffff811115611d8d57600080fd5b611d9989828a01611a9b565b945050606087013567ffffffffffffffff811115611db657600080fd5b611dc289828a01611a2f565b9350506080611dd389828a01611cd9565b92505060a0611de489828a01611a23565b9150509295509295509295565b600080600080600080600060e0888a031215611e0c57600080fd5b873567ffffffffffffffff811115611e2357600080fd5b611e2f8a828b01611a9b565b9750506020611e408a828b01611cd9565b965050604088013567ffffffffffffffff811115611e5d57600080fd5b611e698a828b01611a2f565b955050606088013567ffffffffffffffff811115611e8657600080fd5b611e928a828b01611a9b565b945050608088013567ffffffffffffffff811115611eaf57600080fd5b611ebb8a828b01611a2f565b93505060a0611ecc8a828b01611cd9565b92505060c0611edd8a828b01611a23565b91505092959891949750929550565b600080600060408486031215611f0157600080fd5b833567ffffffffffffffff811115611f1857600080fd5b611f2486828701611af8565b93509350506020611f3786828701611cd9565b9150509250925092565b611f4a81612540565b82525050565b602381527f44454641554c545f46554e4354494f4e5f574554485f434f4e54524143545f4f60208201527f4e4c590000000000000000000000000000000000000000000000000000000000604082015260600190565b601181527f494e56414c49445f4d53475f56414c5545000000000000000000000000000000602082015260400190565b600d81527f4f564552534f4c445f5745544800000000000000000000000000000000000000602082015260400190565b601181527f55494e543235365f554e444552464c4f57000000000000000000000000000000602082015260400190565b602681527f475245415445525f4f525f455155414c5f544f5f33325f4c454e4754485f524560208201527f5155495245440000000000000000000000000000000000000000000000000000604082015260600190565b601081527f4449564953494f4e5f42595f5a45524f00000000000000000000000000000000602082015260400190565b601081527f55494e543235365f4f564552464c4f5700000000000000000000000000000000602082015260400190565b601781527f554e535550504f525445445f41535345545f50524f5859000000000000000000602082015260400190565b600f81527f5452414e534645525f4641494c45440000000000000000000000000000000000602082015260400190565b601481527f434f4d504c4554455f46494c4c5f4641494c4544000000000000000000000000602082015260400190565b601a81527f494e53554646494349454e545f4554485f52454d41494e494e47000000000000602082015260400190565b601381527f4f4e4c595f434f4e54524143545f4f574e455200000000000000000000000000602082015260400190565b601881527f4645455f50455243454e544147455f544f4f5f4c415247450000000000000000602082015260400190565b602681527f475245415445525f4f525f455155414c5f544f5f32305f4c454e4754485f524560208201527f5155495245440000000000000000000000000000000000000000000000000000604082015260600190565b602581527f475245415445525f4f525f455155414c5f544f5f345f4c454e4754485f52455160208201527f5549524544000000000000000000000000000000000000000000000000000000604082015260600190565b600e81527f494e56414c49445f414d4f554e54000000000000000000000000000000000000602082015260400190565b805160808301906122f9848261232e565b50602082015161230c602085018261232e565b50604082015161231f604085018261232e565b50606082015161161560608501825b611f4a81612559565b602081016107bd8284611f41565b606081016123538286611f41565b6123606020830185611f41565b611d03604083018461232e565b6040810161237b8285611f41565b6110e0602083018461232e565b602080825281016107bd81611f50565b602080825281016107bd81611fa6565b602080825281016107bd81611fd6565b602080825281016107bd81612006565b602080825281016107bd81612036565b602080825281016107bd8161208c565b602080825281016107bd816120bc565b602080825281016107bd816120ec565b602080825281016107bd8161211c565b602080825281016107bd8161214c565b602080825281016107bd8161217c565b602080825281016107bd816121ac565b602080825281016107bd816121dc565b602080825281016107bd8161220c565b602080825281016107bd81612262565b602080825281016107bd816122b8565b610100810161249782856122e8565b6110e060808301846122e8565b602081016107bd828461232e565b60405181810167ffffffffffffffff811182821017156124d157600080fd5b604052919050565b600067ffffffffffffffff8211156124f057600080fd5b5060209081020190565b600067ffffffffffffffff82111561251157600080fd5b506020601f919091017fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffe0160190565b73ffffffffffffffffffffffffffffffffffffffff1690565b90565b828183375060009101525600a265627a7a72305820d9f418f11e0f91f06f6f9d22924be0add925495eeb76a6388b5417adb505eeb36c6578706572696d656e74616cf50037"
             }
         }
     },
-    "networks": {}
-}
+	"networks": {}
+}
\ No newline at end of file
-- 
cgit v1.2.3


From cbe595af541f85c7546b441cb72713fda4512a86 Mon Sep 17 00:00:00 2001
From: Amir Bandeali <abandeali1@gmail.com>
Date: Fri, 26 Oct 2018 09:08:06 -0700
Subject: feat: update addresses for Forwarder

---
 packages/contract-addresses/src/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/contract-addresses/src/index.ts b/packages/contract-addresses/src/index.ts
index 1ea8c61dd..f5fd8d0be 100644
--- a/packages/contract-addresses/src/index.ts
+++ b/packages/contract-addresses/src/index.ts
@@ -25,7 +25,7 @@ const networkToAddresses: { [networkId: number]: ContractAddresses } = {
         etherToken: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
         exchange: '0x4f833a24e1f95d70f028921e27040ca56e09ab0b',
         assetProxyOwner: '0x17992e4ffb22730138e4b62aaa6367fa9d3699a6',
-        forwarder: '0x7afc2d5107af94c462a194d2c21b5bdd238709d6',
+        forwarder: '0x5468a1dc173652ee28d249c271fa9933144746b1',
         orderValidator: '0x9463e518dea6810309563c81d5266c1b1d149138',
     },
     3: {
@@ -35,7 +35,7 @@ const networkToAddresses: { [networkId: number]: ContractAddresses } = {
         etherToken: '0xc778417e063141139fce010982780140aa0cd5ab',
         exchange: '0x4530c0483a1633c7a1c97d2c53721caff2caaaaf',
         assetProxyOwner: '0xf5fa5b5fed2727a0e44ac67f6772e97977aa358b',
-        forwarder: '0x3983e204b12b3c02fb0638caf2cd406a62e0ead3',
+        forwarder: '0x2240dab907db71e64d3e0dba4800c83b5c502d4e',
         orderValidator: '0x90431a90516ab49af23a0530e04e8c7836e7122f',
     },
     42: {
@@ -45,7 +45,7 @@ const networkToAddresses: { [networkId: number]: ContractAddresses } = {
         etherToken: '0xd0a1e359811322d97991e03f863a0c30c2cf029c',
         exchange: '0x35dd2932454449b14cee11a94d3674a936d5d7b2',
         assetProxyOwner: '0x2c824d2882baa668e0d5202b1e7f2922278703f8',
-        forwarder: '0xd85e2fa7e7e252b27b01bf0d65c946959d2f45b8',
+        forwarder: '0x17992e4ffb22730138e4b62aaa6367fa9d3699a6',
         orderValidator: '0xb389da3d204b412df2f75c6afb3d0a7ce0bc283d',
     },
 };
-- 
cgit v1.2.3


From 80711eafeb7e8dae54e8dfababe80ad9f7a985cf Mon Sep 17 00:00:00 2001
From: Amir Bandeali <abandeali1@gmail.com>
Date: Fri, 26 Oct 2018 09:14:06 -0700
Subject: Update CHANGELOGs

---
 packages/contract-addresses/CHANGELOG.json | 9 +++++++++
 packages/contract-artifacts/CHANGELOG.json | 9 +++++++++
 2 files changed, 18 insertions(+)

(limited to 'packages')

diff --git a/packages/contract-addresses/CHANGELOG.json b/packages/contract-addresses/CHANGELOG.json
index c2b44ede8..2727cd42b 100644
--- a/packages/contract-addresses/CHANGELOG.json
+++ b/packages/contract-addresses/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.1.0",
+        "changes": [
+            {
+                "pr": 1192,
+                "note": "Update Forwarder addresses"
+            }
+        ]
+    },
     {
         "version": "1.0.1",
         "changes": [
diff --git a/packages/contract-artifacts/CHANGELOG.json b/packages/contract-artifacts/CHANGELOG.json
index c2b44ede8..e6a6d02c0 100644
--- a/packages/contract-artifacts/CHANGELOG.json
+++ b/packages/contract-artifacts/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.1.0",
+        "changes": [
+            {
+                "pr": 1192,
+                "note": "Update Forwarder artifact"
+            }
+        ]
+    },
     {
         "version": "1.0.1",
         "changes": [
-- 
cgit v1.2.3


From 68182fb6c41256f9886c7aa0269746b3a9ac632f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 09:17:40 -0700
Subject: tsx -> ts

---
 .../selected_asset_buy_order_state_button.ts       | 78 ++++++++++++++++++++++
 .../selected_asset_buy_order_state_button.tsx      | 78 ----------------------
 2 files changed, 78 insertions(+), 78 deletions(-)
 create mode 100644 packages/instant/src/containers/selected_asset_buy_order_state_button.ts
 delete mode 100644 packages/instant/src/containers/selected_asset_buy_order_state_button.tsx

(limited to 'packages')

diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.ts b/packages/instant/src/containers/selected_asset_buy_order_state_button.ts
new file mode 100644
index 000000000..fa5de4e68
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_button.ts
@@ -0,0 +1,78 @@
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { Action, actions } from '../redux/actions';
+import { State } from '../redux/reducer';
+import { OrderProcessState, OrderState } from '../types';
+import { etherscanUtil } from '../util/etherscan';
+
+import { BuyOrderStateButton } from '../components/buy_order_state_button';
+
+interface ConnectedState {
+    buyQuote?: BuyQuote;
+    buyOrderProcessingState: OrderProcessState;
+    assetBuyer?: AssetBuyer;
+    onViewTransaction: () => void;
+}
+
+interface ConnectedDispatch {
+    onAwaitingSignature: (buyQuote: BuyQuote) => void;
+    onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+    onRetry: () => void;
+}
+export interface SelectedAssetButtonProps {}
+const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({
+    buyOrderProcessingState: state.buyOrderState.processState,
+    assetBuyer: state.assetBuyer,
+    buyQuote: state.latestBuyQuote,
+    onViewTransaction: () => {
+        if (
+            state.assetBuyer &&
+            (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
+                state.buyOrderState.processState === OrderProcessState.SUCCESS ||
+                state.buyOrderState.processState === OrderProcessState.FAILURE)
+        ) {
+            const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
+                state.buyOrderState.txHash,
+                state.assetBuyer.networkId,
+            );
+            if (etherscanUrl) {
+                window.open(etherscanUrl, '_blank');
+                return;
+            }
+        }
+    },
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetButtonProps): ConnectedDispatch => ({
+    onAwaitingSignature: (buyQuote: BuyQuote) => {
+        const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE };
+        dispatch(actions.updateBuyOrderState(newOrderState));
+    },
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => {
+        const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash };
+        dispatch(actions.updateBuyOrderState(newOrderState));
+    },
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
+        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
+        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
+    onSignatureDenied: (buyQuote, error) => {
+        dispatch(actions.resetAmount());
+        dispatch(actions.setError(error));
+    },
+    onRetry: () => {
+        dispatch(actions.resetAmount());
+    },
+});
+
+export const SelectedAssetBuyOrderStateButton: React.ComponentClass<SelectedAssetButtonProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(BuyOrderStateButton);
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
deleted file mode 100644
index fa5de4e68..000000000
--- a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
-import * as _ from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { Action, actions } from '../redux/actions';
-import { State } from '../redux/reducer';
-import { OrderProcessState, OrderState } from '../types';
-import { etherscanUtil } from '../util/etherscan';
-
-import { BuyOrderStateButton } from '../components/buy_order_state_button';
-
-interface ConnectedState {
-    buyQuote?: BuyQuote;
-    buyOrderProcessingState: OrderProcessState;
-    assetBuyer?: AssetBuyer;
-    onViewTransaction: () => void;
-}
-
-interface ConnectedDispatch {
-    onAwaitingSignature: (buyQuote: BuyQuote) => void;
-    onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
-    onRetry: () => void;
-}
-export interface SelectedAssetButtonProps {}
-const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({
-    buyOrderProcessingState: state.buyOrderState.processState,
-    assetBuyer: state.assetBuyer,
-    buyQuote: state.latestBuyQuote,
-    onViewTransaction: () => {
-        if (
-            state.assetBuyer &&
-            (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
-                state.buyOrderState.processState === OrderProcessState.SUCCESS ||
-                state.buyOrderState.processState === OrderProcessState.FAILURE)
-        ) {
-            const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
-                state.buyOrderState.txHash,
-                state.assetBuyer.networkId,
-            );
-            if (etherscanUrl) {
-                window.open(etherscanUrl, '_blank');
-                return;
-            }
-        }
-    },
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetButtonProps): ConnectedDispatch => ({
-    onAwaitingSignature: (buyQuote: BuyQuote) => {
-        const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE };
-        dispatch(actions.updateBuyOrderState(newOrderState));
-    },
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => {
-        const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash };
-        dispatch(actions.updateBuyOrderState(newOrderState));
-    },
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
-    onSignatureDenied: (buyQuote, error) => {
-        dispatch(actions.resetAmount());
-        dispatch(actions.setError(error));
-    },
-    onRetry: () => {
-        dispatch(actions.resetAmount());
-    },
-});
-
-export const SelectedAssetBuyOrderStateButton: React.ComponentClass<SelectedAssetButtonProps> = connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(BuyOrderStateButton);
-- 
cgit v1.2.3


From 3206e1528b1f9924f3bfc191268304731448557f Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 26 Oct 2018 10:11:42 -0700
Subject: feat: add assertions to render method

---
 packages/instant/package.json       |  2 ++
 packages/instant/src/index.umd.ts   | 13 +++++++++++
 packages/instant/src/types.ts       |  2 +-
 packages/instant/src/util/assert.ts | 44 +++++++++++++++++++++++++++++++++++++
 4 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 packages/instant/src/util/assert.ts

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 421802530..4a3add2ec 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -44,7 +44,9 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
     "dependencies": {
+        "@0x/assert": "^1.0.14",
         "@0x/asset-buyer": "^2.1.0",
+        "@0x/json-schemas": "^2.0.0",
         "@0x/order-utils": "^2.0.0",
         "@0x/types": "^1.2.0",
         "@0x/typescript-typings": "^3.0.3",
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index f648b37f2..dabd45cae 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -1,9 +1,22 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR } from './constants';
 import { ZeroExInstant, ZeroExInstantProps } from './index';
+import { assert } from './util/assert';
 
 export const render = (props: ZeroExInstantProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
+    assert.isHexString('assetData', props.assetData);
+    assert.isValidLiquiditySource('liquiditySource', props.liquiditySource);
+    if (!_.isUndefined(props.additionalAssetMetaDataMap)) {
+        assert.isValidAssetMetaDataMap('additionalAssetMetaDataMap', props.additionalAssetMetaDataMap);
+    }
+    if (!_.isUndefined(props.defaultAssetBuyAmount)) {
+        assert.isNumber('defaultAssetBuyAmount', props.defaultAssetBuyAmount);
+    }
+    if (!_.isUndefined(props.networkId)) {
+        assert.isNumber('networkId', props.networkId);
+    }
     ReactDOM.render(React.createElement(ZeroExInstant, props), document.querySelector(selector));
 };
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index c63371fb4..e02a815f9 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -44,7 +44,7 @@ export interface ERC20AssetMetaData {
 export interface ERC721AssetMetaData {
     assetProxyId: AssetProxyId.ERC721;
     name: string;
-    representationUrl?: string;
+    imageUrl?: string;
     primaryColor?: string;
 }
 
diff --git a/packages/instant/src/util/assert.ts b/packages/instant/src/util/assert.ts
new file mode 100644
index 000000000..584d3d4b1
--- /dev/null
+++ b/packages/instant/src/util/assert.ts
@@ -0,0 +1,44 @@
+import { assert as sharedAssert } from '@0x/assert';
+import { schemas } from '@0x/json-schemas';
+import { assetDataUtils } from '@0x/order-utils';
+import { AssetProxyId, ObjectMap, SignedOrder } from '@0x/types';
+import * as _ from 'lodash';
+
+import { AssetMetaData } from '../types';
+
+export const assert = {
+    ...sharedAssert,
+    isValidLiquiditySource(variableName: string, liquiditySource: string | SignedOrder[]): void {
+        if (_.isString(liquiditySource)) {
+            sharedAssert.isUri(variableName, liquiditySource);
+            return;
+        }
+        sharedAssert.doesConformToSchema(variableName, liquiditySource, schemas.signedOrdersSchema);
+    },
+    isValidAssetMetaDataMap(variableName: string, metaDataMap: ObjectMap<AssetMetaData>): void {
+        _.forEach(metaDataMap, (metaData, assetData) => {
+            assert.isHexString(`key ${assetData} of ${variableName}`, assetData);
+            assert.isValidAssetMetaData(`${variableName}.${assetData}`, metaData);
+            const assetDataProxyId = assetDataUtils.decodeAssetProxyId(assetData);
+            assert.assert(
+                metaData.assetProxyId === assetDataProxyId,
+                `Expected meta data for assetData ${assetData} to have asset proxy id of ${assetDataProxyId}, but instead got ${
+                    metaData.assetProxyId
+                }`,
+            );
+        });
+    },
+    isValidAssetMetaData(variableName: string, metaData: AssetMetaData): void {
+        assert.isHexString(`${variableName}.assetProxyId`, metaData.assetProxyId);
+        if (!_.isUndefined(metaData.primaryColor)) {
+            assert.isString(`${variableName}.primaryColor`, metaData.primaryColor);
+        }
+        if (metaData.assetProxyId === AssetProxyId.ERC20) {
+            assert.isNumber(`${variableName}.decimals`, metaData.decimals);
+            assert.isString(`${variableName}.symbol`, metaData.symbol);
+        } else if (metaData.assetProxyId === AssetProxyId.ERC721) {
+            assert.isString(`${variableName}.name`, metaData.name);
+            assert.isUri(`${variableName}.imageUrl`, metaData.imageUrl);
+        }
+    },
+};
-- 
cgit v1.2.3


From e1306f55ed65278b18d05344cca1980af490e910 Mon Sep 17 00:00:00 2001
From: Alex Browne <stephenalexbrowne@gmail.com>
Date: Fri, 26 Oct 2018 10:52:12 -0700
Subject: Add note about tslint false positive

---
 packages/contract-wrappers/src/contract_wrappers/erc20_proxy_wrapper.ts | 2 ++
 .../contract-wrappers/src/contract_wrappers/erc721_proxy_wrapper.ts     | 2 ++
 2 files changed, 4 insertions(+)

(limited to 'packages')

diff --git a/packages/contract-wrappers/src/contract_wrappers/erc20_proxy_wrapper.ts b/packages/contract-wrappers/src/contract_wrappers/erc20_proxy_wrapper.ts
index 12433c2d7..45460bd6d 100644
--- a/packages/contract-wrappers/src/contract_wrappers/erc20_proxy_wrapper.ts
+++ b/packages/contract-wrappers/src/contract_wrappers/erc20_proxy_wrapper.ts
@@ -34,6 +34,8 @@ export class ERC20ProxyWrapper extends ContractWrapper {
      */
     public async getProxyIdAsync(): Promise<AssetProxyId> {
         const ERC20ProxyContractInstance = this._getERC20ProxyContract();
+        // Note(albrow): Below is a TSLint false positive. Code won't compile if
+        // you remove the type assertion.
         /* tslint:disable-next-line:no-unnecessary-type-assertion */
         const proxyId = (await ERC20ProxyContractInstance.getProxyId.callAsync()) as AssetProxyId;
         return proxyId;
diff --git a/packages/contract-wrappers/src/contract_wrappers/erc721_proxy_wrapper.ts b/packages/contract-wrappers/src/contract_wrappers/erc721_proxy_wrapper.ts
index 6d08619a3..12758e191 100644
--- a/packages/contract-wrappers/src/contract_wrappers/erc721_proxy_wrapper.ts
+++ b/packages/contract-wrappers/src/contract_wrappers/erc721_proxy_wrapper.ts
@@ -34,6 +34,8 @@ export class ERC721ProxyWrapper extends ContractWrapper {
      */
     public async getProxyIdAsync(): Promise<AssetProxyId> {
         const ERC721ProxyContractInstance = await this._getERC721ProxyContract();
+        // Note(albrow): Below is a TSLint false positive. Code won't compile if
+        // you remove the type assertion.
         /* tslint:disable-next-line:no-unnecessary-type-assertion */
         const proxyId = (await ERC721ProxyContractInstance.getProxyId.callAsync()) as AssetProxyId;
         return proxyId;
-- 
cgit v1.2.3


From 951a5271e15cebb010281de3b8cbfb3972ecec83 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 26 Oct 2018 11:22:14 -0700
Subject: fix: justify error message left

---
 packages/instant/src/components/sliding_error.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 2b55597ec..cc9abb7dd 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -20,7 +20,7 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
         borderRadius="6px"
         marginBottom="10px"
     >
-        <Flex>
+        <Flex justify="flex-start">
             <Container marginRight="5px" display="inline" top="3px" position="relative">
                 <Text fontSize="20px">{props.icon}</Text>
             </Container>
-- 
cgit v1.2.3


From 51da5311b54733540f44f938a0c953bb4ae42052 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 26 Oct 2018 11:47:46 -0700
Subject: fix: init BigNumberInput not BigNumber when initializing state

---
 packages/instant/src/components/zero_ex_instant.tsx |  4 ++--
 packages/instant/src/util/big_number_input.ts       | 19 ++++++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 8454de43c..b080f0bad 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,6 +1,5 @@
 import { AssetBuyer } from '@0x/asset-buyer';
 import { ObjectMap, SignedOrder } from '@0x/types';
-import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Provider } from 'react-redux';
@@ -12,6 +11,7 @@ import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
 import { AssetMetaData, Network } from '../types';
 import { assetUtils } from '../util/asset';
+import { BigNumberInput } from '../util/big_number_input';
 import { errorUtil } from '../util/error';
 import { getProvider } from '../util/provider';
 import { web3Wrapper } from '../util/web3_wrapper';
@@ -64,7 +64,7 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
             selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId),
             selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
                 ? state.selectedAssetAmount
-                : new BigNumber(props.defaultAssetBuyAmount),
+                : new BigNumberInput(props.defaultAssetBuyAmount),
             assetMetaDataMap: completeAssetMetaDataMap,
         };
         return storeStateFromProps;
diff --git a/packages/instant/src/util/big_number_input.ts b/packages/instant/src/util/big_number_input.ts
index d2a9a8dc5..370d91a0a 100644
--- a/packages/instant/src/util/big_number_input.ts
+++ b/packages/instant/src/util/big_number_input.ts
@@ -10,14 +10,19 @@ import * as _ from 'lodash';
  */
 export class BigNumberInput extends BigNumber {
     private readonly _isEndingWithDecimal: boolean;
-    constructor(bigNumberString: string) {
-        const hasDecimalPeriod = _.endsWith(bigNumberString, '.');
-        let internalString = bigNumberString;
-        if (hasDecimalPeriod) {
-            internalString = bigNumberString.slice(0, -1);
+    constructor(numberOrString: string | number) {
+        if (_.isString(numberOrString)) {
+            const hasDecimalPeriod = _.endsWith(numberOrString, '.');
+            let internalString = numberOrString;
+            if (hasDecimalPeriod) {
+                internalString = numberOrString.slice(0, -1);
+            }
+            super(internalString);
+            this._isEndingWithDecimal = hasDecimalPeriod;
+        } else {
+            super(numberOrString);
+            this._isEndingWithDecimal = false;
         }
-        super(internalString);
-        this._isEndingWithDecimal = hasDecimalPeriod;
     }
     public toDisplayString(): string {
         const internalString = super.toString();
-- 
cgit v1.2.3


From af91a56a5594d07d7da6caaeff79f5a7fb31ff98 Mon Sep 17 00:00:00 2001
From: "F. Eugene Aumson" <feuGeneA@users.noreply.github.com>
Date: Fri, 26 Oct 2018 15:13:42 -0400
Subject: feat(order_utils.py): ERC721 asset data codec (#1186)

---
 packages/order-utils/test/asset_data_utils_test.ts | 25 +++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/order-utils/test/asset_data_utils_test.ts b/packages/order-utils/test/asset_data_utils_test.ts
index f8b850604..f175b7a38 100644
--- a/packages/order-utils/test/asset_data_utils_test.ts
+++ b/packages/order-utils/test/asset_data_utils_test.ts
@@ -1,6 +1,7 @@
 import * as chai from 'chai';
 
-import { ERC20AssetData } from '@0x/types';
+import { ERC20AssetData, ERC721AssetData } from '@0x/types';
+import { BigNumber } from '@0x/utils';
 
 import { assetDataUtils } from '../src/asset_data_utils';
 
@@ -14,18 +15,36 @@ const KNOWN_ENCODINGS = [
         address: '0x1dc4c1cefef38a777b15aa20260a54e584b16c48',
         assetData: '0xf47261b00000000000000000000000001dc4c1cefef38a777b15aa20260a54e584b16c48',
     },
+    {
+        address: '0x1dc4c1cefef38a777b15aa20260a54e584b16c48',
+        tokenId: new BigNumber(1),
+        assetData:
+            '0x025717920000000000000000000000001dc4c1cefef38a777b15aa20260a54e584b16c480000000000000000000000000000000000000000000000000000000000000001',
+    },
 ];
 
 const ERC20_ASSET_PROXY_ID = '0xf47261b0';
+const ERC721_ASSET_PROXY_ID = '0x02571792';
 
 describe('assetDataUtils', () => {
-    it('should encode', () => {
+    it('should encode ERC20', () => {
         const assetData = assetDataUtils.encodeERC20AssetData(KNOWN_ENCODINGS[0].address);
         expect(assetData).to.equal(KNOWN_ENCODINGS[0].assetData);
     });
-    it('should decode', () => {
+    it('should decode ERC20', () => {
         const assetData: ERC20AssetData = assetDataUtils.decodeERC20AssetData(KNOWN_ENCODINGS[0].assetData);
         expect(assetData.tokenAddress).to.equal(KNOWN_ENCODINGS[0].address);
         expect(assetData.assetProxyId).to.equal(ERC20_ASSET_PROXY_ID);
     });
+    it('should encode ERC721', () => {
+        const assetData = assetDataUtils.encodeERC721AssetData(KNOWN_ENCODINGS[1].address, KNOWN_ENCODINGS[1]
+            .tokenId as BigNumber);
+        expect(assetData).to.equal(KNOWN_ENCODINGS[1].assetData);
+    });
+    it('should decode ERC721', () => {
+        const assetData: ERC721AssetData = assetDataUtils.decodeERC721AssetData(KNOWN_ENCODINGS[1].assetData);
+        expect(assetData.tokenAddress).to.equal(KNOWN_ENCODINGS[1].address);
+        expect(assetData.assetProxyId).to.equal(ERC721_ASSET_PROXY_ID);
+        expect(assetData.tokenId).to.be.bignumber.equal(KNOWN_ENCODINGS[1].tokenId);
+    });
 });
-- 
cgit v1.2.3


From ffecba21f4e9dcda961a3e8432e70e6605174de5 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 12:43:08 -0700
Subject: ethDecimals -> ETH_DECIMALS

---
 packages/instant/src/components/buy_button.tsx | 4 +++-
 packages/instant/src/constants.ts              | 2 +-
 packages/instant/src/util/format.ts            | 6 +++---
 packages/instant/test/util/format.test.ts      | 8 ++++----
 4 files changed, 11 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index a70269dde..4780b80e7 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
+import { getBestAddress } from '../util/address';
 import { util } from '../util/util';
 import { web3Wrapper } from '../util/web3_wrapper';
 
@@ -45,7 +46,8 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         let txHash: string | undefined;
         this.props.onAwaitingSignature(buyQuote);
         try {
-            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote);
+            const takerAddress = await getBestAddress();
+            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress });
         } catch (e) {
             if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) {
                 this.props.onSignatureDenied(buyQuote, e);
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 48d0d4aa2..e4281d54a 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -1,5 +1,5 @@
 import { BigNumber } from '@0x/utils';
 export const BIG_NUMBER_ZERO = new BigNumber(0);
-export const ethDecimals = 18;
+export const ETH_DECIMALS = 18;
 export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
 export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts
index 8482b1526..2e0ccc03b 100644
--- a/packages/instant/src/util/format.ts
+++ b/packages/instant/src/util/format.ts
@@ -2,7 +2,7 @@ import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 
-import { ethDecimals } from '../constants';
+import { ETH_DECIMALS } from '../constants';
 
 export const format = {
     ethBaseAmount: (
@@ -13,7 +13,7 @@ export const format = {
         if (_.isUndefined(ethBaseAmount)) {
             return defaultText;
         }
-        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ethDecimals);
+        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ETH_DECIMALS);
         return format.ethUnitAmount(ethUnitAmount, decimalPlaces);
     },
     ethUnitAmount: (
@@ -36,7 +36,7 @@ export const format = {
         if (_.isUndefined(ethBaseAmount) || _.isUndefined(ethUsdPrice)) {
             return defaultText;
         }
-        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ethDecimals);
+        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ETH_DECIMALS);
         return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces);
     },
     ethUnitAmountInUsd: (
diff --git a/packages/instant/test/util/format.test.ts b/packages/instant/test/util/format.test.ts
index 141df9275..1be226ed8 100644
--- a/packages/instant/test/util/format.test.ts
+++ b/packages/instant/test/util/format.test.ts
@@ -1,15 +1,15 @@
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 
-import { ethDecimals } from '../../src/constants';
+import { ETH_DECIMALS } from '../../src/constants';
 import { format } from '../../src/util/format';
 
 const BIG_NUMBER_ONE = new BigNumber(1);
 const BIG_NUMBER_DECIMAL = new BigNumber(0.432414);
 const BIG_NUMBER_IRRATIONAL = new BigNumber(5.3014059295032);
-const ONE_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_ONE, ethDecimals);
-const DECIMAL_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_DECIMAL, ethDecimals);
-const IRRATIONAL_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_IRRATIONAL, ethDecimals);
+const ONE_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_ONE, ETH_DECIMALS);
+const DECIMAL_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_DECIMAL, ETH_DECIMALS);
+const IRRATIONAL_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_IRRATIONAL, ETH_DECIMALS);
 const BIG_NUMBER_FAKE_ETH_USD_PRICE = new BigNumber(2.534);
 
 describe('format', () => {
-- 
cgit v1.2.3


From 9512978de9aee1953930d4f16a105ec5ef7f048e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 12:43:44 -0700
Subject: feat(instant): Show message if user doesn't have enough ETH

---
 .../instant/src/containers/selected_asset_amount_input.ts  | 14 +++++++++++++-
 packages/instant/src/types.ts                              |  1 +
 packages/instant/src/util/address.ts                       |  6 ++++++
 packages/instant/src/util/error.ts                         |  5 ++++-
 4 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 packages/instant/src/util/address.ts

(limited to 'packages')

diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
index e9dbc61ce..504f51535 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -10,11 +10,15 @@ import { Dispatch } from 'redux';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
-import { ERC20Asset, OrderProcessState } from '../types';
+import { ERC20Asset, OrderProcessState, ZeroExInstantError } from '../types';
+import { getBestAddress } from '../util/address';
 import { errorUtil } from '../util/error';
+import { web3Wrapper } from '../util/web3_wrapper';
 
 import { AssetAmountInput } from '../components/asset_amount_input';
 
+import { ETH_DECIMALS } from '../constants';
+
 export interface SelectedAssetAmountInputProps {
     fontColor?: ColorOption;
     fontSize?: string;
@@ -76,6 +80,14 @@ const updateBuyQuoteAsync = async (
     errorUtil.errorFlasher.clearError(dispatch);
     // invalidate the last buy quote.
     dispatch(actions.updateLatestBuyQuote(newBuyQuote));
+
+    // set error if user doesn't have appropriate balance
+    const takerAddress = await getBestAddress();
+    const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress);
+    if (balanceWei < newBuyQuote.worstCaseQuoteInfo.totalEthAmount) {
+        const balanceError = new Error(ZeroExInstantError.InsufficientBalance);
+        errorUtil.errorFlasher.flashNewError(dispatch, balanceError);
+    }
 };
 
 const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index c63371fb4..174ad86e6 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -72,4 +72,5 @@ export enum Network {
 
 export enum ZeroExInstantError {
     AssetMetaDataNotAvailable = 'ASSET_META_DATA_NOT_AVAILABLE',
+    InsufficientBalance = 'INSUFFICIENT_BALANCE',
 }
diff --git a/packages/instant/src/util/address.ts b/packages/instant/src/util/address.ts
new file mode 100644
index 000000000..97ed30a00
--- /dev/null
+++ b/packages/instant/src/util/address.ts
@@ -0,0 +1,6 @@
+import { web3Wrapper } from '../util/web3_wrapper';
+
+export const getBestAddress = async (): Promise<string> => {
+    const addresses = await web3Wrapper.getAvailableAddressesAsync();
+    return addresses[0];
+};
diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts
index 64c1f4885..5db0c66d2 100644
--- a/packages/instant/src/util/error.ts
+++ b/packages/instant/src/util/error.ts
@@ -2,7 +2,7 @@ import { AssetBuyerError } from '@0x/asset-buyer';
 import { Dispatch } from 'redux';
 
 import { Action, actions } from '../redux/actions';
-import { Asset } from '../types';
+import { Asset, ZeroExInstantError } from '../types';
 
 import { assetUtils } from './asset';
 
@@ -49,6 +49,9 @@ const humanReadableMessageForError = (error: Error, asset?: Asset): string | und
     if (error.message === AssetBuyerError.SignatureRequestDenied) {
         return 'You denied this transaction';
     }
+    if (error.message === ZeroExInstantError.InsufficientBalance) {
+        return "You don't have enough ETH";
+    }
 
     return undefined;
 };
-- 
cgit v1.2.3


From 7fa1f25e065c737e7589b57fb0249db5c1ceb4fb Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 12:53:04 -0700
Subject: buy order state button -> buy order state buttons

---
 .../src/components/buy_order_state_button.tsx      | 63 ----------------------
 .../src/components/buy_order_state_buttons.tsx     | 63 ++++++++++++++++++++++
 .../selected_asset_buy_order_state_button.ts       |  4 +-
 3 files changed, 65 insertions(+), 65 deletions(-)
 delete mode 100644 packages/instant/src/components/buy_order_state_button.tsx
 create mode 100644 packages/instant/src/components/buy_order_state_buttons.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx
deleted file mode 100644
index 17aa46df5..000000000
--- a/packages/instant/src/components/buy_order_state_button.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
-import * as React from 'react';
-
-import { Flex } from '../components/ui/flex';
-import { SecondaryButton } from '../components/secondary_button';
-import { BuyButton } from '../components/buy_button';
-
-import { PlacingOrderButton } from '../components/placing_order_button';
-import { ColorOption } from '../style/theme';
-import { OrderProcessState } from '../types';
-
-import { Button } from './ui/button';
-import { Text } from './ui/text';
-
-export interface BuyOrderStateButtonProps {
-    buyQuote?: BuyQuote;
-    buyOrderProcessingState: OrderProcessState;
-    assetBuyer?: AssetBuyer;
-    onViewTransaction: () => void;
-    onAwaitingSignature: (buyQuote: BuyQuote) => void;
-    onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
-    onRetry: () => void;
-}
-
-// TODO: rename to buttons
-export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
-    if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
-        return (
-            <Flex justify="space-between">
-                <Button width="48%" onClick={props.onRetry}>
-                    <Text fontColor={ColorOption.white} fontWeight={600} fontSize="16px">
-                        Back
-                    </Text>
-                </Button>
-                <SecondaryButton width="48%" onClick={props.onViewTransaction}>
-                    Details
-                </SecondaryButton>
-            </Flex>
-        );
-    } else if (
-        props.buyOrderProcessingState === OrderProcessState.SUCCESS ||
-        props.buyOrderProcessingState === OrderProcessState.PROCESSING
-    ) {
-        return <SecondaryButton onClick={props.onViewTransaction}>View Transaction</SecondaryButton>;
-    } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) {
-        return <PlacingOrderButton />;
-    }
-
-    return (
-        <BuyButton
-            buyQuote={props.buyQuote}
-            assetBuyer={props.assetBuyer}
-            onAwaitingSignature={props.onAwaitingSignature}
-            onSignatureDenied={props.onSignatureDenied}
-            onBuyProcessing={props.onBuyProcessing}
-            onBuySuccess={props.onBuySuccess}
-            onBuyFailure={props.onBuyFailure}
-        />
-    );
-};
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
new file mode 100644
index 000000000..2330f84f9
--- /dev/null
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -0,0 +1,63 @@
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import * as React from 'react';
+
+import { Flex } from '../components/ui/flex';
+import { SecondaryButton } from '../components/secondary_button';
+import { BuyButton } from '../components/buy_button';
+
+import { PlacingOrderButton } from '../components/placing_order_button';
+import { ColorOption } from '../style/theme';
+import { OrderProcessState } from '../types';
+
+import { Button } from './ui/button';
+import { Text } from './ui/text';
+
+export interface BuyOrderStateButtonProps {
+    buyQuote?: BuyQuote;
+    buyOrderProcessingState: OrderProcessState;
+    assetBuyer?: AssetBuyer;
+    onViewTransaction: () => void;
+    onAwaitingSignature: (buyQuote: BuyQuote) => void;
+    onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+    onRetry: () => void;
+}
+
+// TODO: rename to buttons
+export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
+    if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
+        return (
+            <Flex justify="space-between">
+                <Button width="48%" onClick={props.onRetry}>
+                    <Text fontColor={ColorOption.white} fontWeight={600} fontSize="16px">
+                        Back
+                    </Text>
+                </Button>
+                <SecondaryButton width="48%" onClick={props.onViewTransaction}>
+                    Details
+                </SecondaryButton>
+            </Flex>
+        );
+    } else if (
+        props.buyOrderProcessingState === OrderProcessState.SUCCESS ||
+        props.buyOrderProcessingState === OrderProcessState.PROCESSING
+    ) {
+        return <SecondaryButton onClick={props.onViewTransaction}>View Transaction</SecondaryButton>;
+    } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) {
+        return <PlacingOrderButton />;
+    }
+
+    return (
+        <BuyButton
+            buyQuote={props.buyQuote}
+            assetBuyer={props.assetBuyer}
+            onAwaitingSignature={props.onAwaitingSignature}
+            onSignatureDenied={props.onSignatureDenied}
+            onBuyProcessing={props.onBuyProcessing}
+            onBuySuccess={props.onBuySuccess}
+            onBuyFailure={props.onBuyFailure}
+        />
+    );
+};
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.ts b/packages/instant/src/containers/selected_asset_buy_order_state_button.ts
index fa5de4e68..43c62c773 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_button.ts
@@ -9,7 +9,7 @@ import { State } from '../redux/reducer';
 import { OrderProcessState, OrderState } from '../types';
 import { etherscanUtil } from '../util/etherscan';
 
-import { BuyOrderStateButton } from '../components/buy_order_state_button';
+import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
 
 interface ConnectedState {
     buyQuote?: BuyQuote;
@@ -75,4 +75,4 @@ const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetB
 export const SelectedAssetBuyOrderStateButton: React.ComponentClass<SelectedAssetButtonProps> = connect(
     mapStateToProps,
     mapDispatchToProps,
-)(BuyOrderStateButton);
+)(BuyOrderStateButtons);
-- 
cgit v1.2.3


From 03007e420cbb330fd82a28b26324658c747d3dd3 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 12:54:44 -0700
Subject: selected asset buy order state button -> selected asset buy order
 state buttons

---
 .../src/components/zero_ex_instant_container.tsx   |  4 +-
 .../selected_asset_buy_order_state_button.ts       | 78 ---------------------
 .../selected_asset_buy_order_state_buttons.ts      | 81 ++++++++++++++++++++++
 3 files changed, 83 insertions(+), 80 deletions(-)
 delete mode 100644 packages/instant/src/containers/selected_asset_buy_order_state_button.ts
 create mode 100644 packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 1d17ed12a..ff19351ff 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
 import { LatestError } from '../containers/latest_error';
-import { SelectedAssetBuyOrderStateButton } from '../containers/selected_asset_buy_order_state_button';
+import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 
 import { ColorOption } from '../style/theme';
@@ -27,7 +27,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
                 <SelectedAssetInstantHeading />
                 <LatestBuyQuoteOrderDetails />
                 <Container padding="20px" width="100%">
-                    <SelectedAssetBuyOrderStateButton />
+                    <SelectedAssetBuyOrderStateButtons />
                 </Container>
             </Flex>
         </Container>
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.ts b/packages/instant/src/containers/selected_asset_buy_order_state_button.ts
deleted file mode 100644
index 43c62c773..000000000
--- a/packages/instant/src/containers/selected_asset_buy_order_state_button.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
-import * as _ from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { Action, actions } from '../redux/actions';
-import { State } from '../redux/reducer';
-import { OrderProcessState, OrderState } from '../types';
-import { etherscanUtil } from '../util/etherscan';
-
-import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
-
-interface ConnectedState {
-    buyQuote?: BuyQuote;
-    buyOrderProcessingState: OrderProcessState;
-    assetBuyer?: AssetBuyer;
-    onViewTransaction: () => void;
-}
-
-interface ConnectedDispatch {
-    onAwaitingSignature: (buyQuote: BuyQuote) => void;
-    onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
-    onRetry: () => void;
-}
-export interface SelectedAssetButtonProps {}
-const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({
-    buyOrderProcessingState: state.buyOrderState.processState,
-    assetBuyer: state.assetBuyer,
-    buyQuote: state.latestBuyQuote,
-    onViewTransaction: () => {
-        if (
-            state.assetBuyer &&
-            (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
-                state.buyOrderState.processState === OrderProcessState.SUCCESS ||
-                state.buyOrderState.processState === OrderProcessState.FAILURE)
-        ) {
-            const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
-                state.buyOrderState.txHash,
-                state.assetBuyer.networkId,
-            );
-            if (etherscanUrl) {
-                window.open(etherscanUrl, '_blank');
-                return;
-            }
-        }
-    },
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetButtonProps): ConnectedDispatch => ({
-    onAwaitingSignature: (buyQuote: BuyQuote) => {
-        const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE };
-        dispatch(actions.updateBuyOrderState(newOrderState));
-    },
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => {
-        const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash };
-        dispatch(actions.updateBuyOrderState(newOrderState));
-    },
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
-    onSignatureDenied: (buyQuote, error) => {
-        dispatch(actions.resetAmount());
-        dispatch(actions.setError(error));
-    },
-    onRetry: () => {
-        dispatch(actions.resetAmount());
-    },
-});
-
-export const SelectedAssetBuyOrderStateButton: React.ComponentClass<SelectedAssetButtonProps> = connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(BuyOrderStateButtons);
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
new file mode 100644
index 000000000..8927b8954
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -0,0 +1,81 @@
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { Action, actions } from '../redux/actions';
+import { State } from '../redux/reducer';
+import { OrderProcessState, OrderState } from '../types';
+import { etherscanUtil } from '../util/etherscan';
+
+import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
+
+interface ConnectedState {
+    buyQuote?: BuyQuote;
+    buyOrderProcessingState: OrderProcessState;
+    assetBuyer?: AssetBuyer;
+    onViewTransaction: () => void;
+}
+
+interface ConnectedDispatch {
+    onAwaitingSignature: (buyQuote: BuyQuote) => void;
+    onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+    onRetry: () => void;
+}
+export interface SelectedAssetBuyOrderStateButtons {}
+const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => ({
+    buyOrderProcessingState: state.buyOrderState.processState,
+    assetBuyer: state.assetBuyer,
+    buyQuote: state.latestBuyQuote,
+    onViewTransaction: () => {
+        if (
+            state.assetBuyer &&
+            (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
+                state.buyOrderState.processState === OrderProcessState.SUCCESS ||
+                state.buyOrderState.processState === OrderProcessState.FAILURE)
+        ) {
+            const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
+                state.buyOrderState.txHash,
+                state.assetBuyer.networkId,
+            );
+            if (etherscanUrl) {
+                window.open(etherscanUrl, '_blank');
+                return;
+            }
+        }
+    },
+});
+
+const mapDispatchToProps = (
+    dispatch: Dispatch<Action>,
+    ownProps: SelectedAssetBuyOrderStateButtons,
+): ConnectedDispatch => ({
+    onAwaitingSignature: (buyQuote: BuyQuote) => {
+        const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE };
+        dispatch(actions.updateBuyOrderState(newOrderState));
+    },
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => {
+        const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash };
+        dispatch(actions.updateBuyOrderState(newOrderState));
+    },
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
+        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
+        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
+    onSignatureDenied: (buyQuote, error) => {
+        dispatch(actions.resetAmount());
+        dispatch(actions.setError(error));
+    },
+    onRetry: () => {
+        dispatch(actions.resetAmount());
+    },
+});
+
+export const SelectedAssetBuyOrderStateButtons: React.ComponentClass<SelectedAssetBuyOrderStateButtons> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(BuyOrderStateButtons);
-- 
cgit v1.2.3


From edfb56de6cd1f9605698f9a499016a28f6ba8754 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 25 Oct 2018 21:03:25 -0700
Subject: fix(instant): prevent outdated quote requests from overriding the
 correct quote

---
 .../selected_erc20_asset_amount_input.ts           |  4 +--
 packages/instant/src/redux/reducer.ts              | 42 ++++++++++++++++++----
 2 files changed, 37 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index ee76e9d66..828c4fcb5 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -79,8 +79,6 @@ const updateBuyQuoteAsync = async (
     dispatch(actions.updateLatestBuyQuote(newBuyQuote));
 };
 
-const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
-
 const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
     _ownProps: SelectedERC20AssetAmountInputProps,
@@ -97,7 +95,7 @@ const mapDispatchToProps = (
             // even if it's debounced, give them the illusion it's loading
             dispatch(actions.setQuoteRequestStatePending());
             // tslint:disable-next-line:no-floating-promises
-            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value);
+            updateBuyQuoteAsync(assetBuyer, dispatch, asset, value);
         }
     },
 });
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index d7e5bdfb5..4f572532a 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -1,6 +1,7 @@
 import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
-import { ObjectMap } from '@0x/types';
+import { AssetProxyId, ObjectMap } from '@0x/types';
 import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 
 import { assetMetaDataMap } from '../data/asset_meta_data_map';
@@ -57,11 +58,19 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 selectedAssetAmount: action.data,
             };
         case ActionTypes.UPDATE_LATEST_BUY_QUOTE:
-            return {
-                ...state,
-                latestBuyQuote: action.data,
-                quoteRequestState: AsyncProcessState.SUCCESS,
-            };
+            const newBuyQuoteIfExists = action.data;
+            const shouldUpdate =
+                _.isUndefined(newBuyQuoteIfExists) || doesBuyQuoteMatchState(newBuyQuoteIfExists, state);
+            if (shouldUpdate) {
+                return {
+                    ...state,
+                    latestBuyQuote: newBuyQuoteIfExists,
+                    quoteRequestState: AsyncProcessState.SUCCESS,
+                };
+            } else {
+                return state;
+            }
+
         case ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING:
             return {
                 ...state,
@@ -122,3 +131,24 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
             return state;
     }
 };
+
+const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => {
+    const selectedAssetIfExists = state.selectedAsset;
+    const selectedAssetAmountIfExists = state.selectedAssetAmount;
+    // if no selectedAsset or selectedAssetAmount exists on the current state, return false
+    if (_.isUndefined(selectedAssetIfExists) || _.isUndefined(selectedAssetAmountIfExists)) {
+        return false;
+    }
+    // if buyQuote's assetData does not match that of the current selected asset, return false
+    if (selectedAssetIfExists.assetData !== buyQuote.assetData) {
+        return false;
+    }
+    // if buyQuote's assetBuyAmount does not match selectedAssetAmount, return false
+    const selectedAssetMetaData = selectedAssetIfExists.metaData;
+    const selectedAssetAmountBaseUnits =
+        selectedAssetMetaData.assetProxyId === AssetProxyId.ERC20
+            ? Web3Wrapper.toBaseUnitAmount(selectedAssetAmountIfExists, selectedAssetMetaData.decimals)
+            : new BigNumber(1);
+    const doesAssetAmountMatch = selectedAssetAmountBaseUnits.eq(buyQuote.assetBuyAmount);
+    return doesAssetAmountMatch;
+};
-- 
cgit v1.2.3


From 4bd4ff46cf894a29bc6d4a9b58c4d6a4bd5e2ddd Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 26 Oct 2018 11:36:01 -0700
Subject: Make doesBuyQuoteMatchState in reducer less strict

---
 packages/instant/src/redux/reducer.ts | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 4f572532a..614ed21ac 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -143,12 +143,17 @@ const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => {
     if (selectedAssetIfExists.assetData !== buyQuote.assetData) {
         return false;
     }
-    // if buyQuote's assetBuyAmount does not match selectedAssetAmount, return false
+    // if ERC20 and buyQuote's assetBuyAmount does not match selectedAssetAmount, return false
+    // if ERC721, return true
     const selectedAssetMetaData = selectedAssetIfExists.metaData;
-    const selectedAssetAmountBaseUnits =
-        selectedAssetMetaData.assetProxyId === AssetProxyId.ERC20
-            ? Web3Wrapper.toBaseUnitAmount(selectedAssetAmountIfExists, selectedAssetMetaData.decimals)
-            : new BigNumber(1);
-    const doesAssetAmountMatch = selectedAssetAmountBaseUnits.eq(buyQuote.assetBuyAmount);
-    return doesAssetAmountMatch;
+    if (selectedAssetMetaData.assetProxyId === AssetProxyId.ERC20) {
+        const selectedAssetAmountBaseUnits = Web3Wrapper.toBaseUnitAmount(
+            selectedAssetAmountIfExists,
+            selectedAssetMetaData.decimals,
+        );
+        const doesAssetAmountMatch = selectedAssetAmountBaseUnits.eq(buyQuote.assetBuyAmount);
+        return doesAssetAmountMatch;
+    } else {
+        return true;
+    }
 };
-- 
cgit v1.2.3


From 6f4dbc71f223f52c16320f3c65be92f99075dfec Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 26 Oct 2018 13:11:47 -0700
Subject: Add back debounce

---
 packages/instant/src/containers/selected_erc20_asset_amount_input.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 828c4fcb5..ee76e9d66 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -79,6 +79,8 @@ const updateBuyQuoteAsync = async (
     dispatch(actions.updateLatestBuyQuote(newBuyQuote));
 };
 
+const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
+
 const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
     _ownProps: SelectedERC20AssetAmountInputProps,
@@ -95,7 +97,7 @@ const mapDispatchToProps = (
             // even if it's debounced, give them the illusion it's loading
             dispatch(actions.setQuoteRequestStatePending());
             // tslint:disable-next-line:no-floating-promises
-            updateBuyQuoteAsync(assetBuyer, dispatch, asset, value);
+            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value);
         }
     },
 });
-- 
cgit v1.2.3


From 1880c34ce066a8e33047690ef9fb90393100abd9 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 13:46:14 -0700
Subject: feat(instant): Disable input when processing

---
 packages/instant/src/components/erc20_asset_amount_input.tsx   |  5 ++++-
 packages/instant/src/components/scaling_amount_input.tsx       |  3 +++
 packages/instant/src/components/scaling_input.tsx              |  5 ++++-
 .../src/containers/selected_erc20_asset_amount_input.ts        | 10 ++++++++++
 4 files changed, 21 insertions(+), 2 deletions(-)

(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 583fad28b..9b32827e7 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -17,6 +17,7 @@ export interface ERC20AssetAmountInputProps {
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
+    disabled: boolean;
 }
 
 export interface ERC20AssetAmountInputState {
@@ -26,6 +27,7 @@ export interface ERC20AssetAmountInputState {
 export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
+        disabled: false,
     };
     constructor(props: ERC20AssetAmountInputProps) {
         super(props);
@@ -35,9 +37,10 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
     }
     public render(): React.ReactNode {
         const { asset, onChange, ...rest } = this.props;
+        const amountBorderBottom = this.props.disabled ? '' : `1px solid ${transparentWhite}`;
         return (
             <Container whiteSpace="nowrap">
-                <Container borderBottom={`1px solid ${transparentWhite}`} display="inline-block">
+                <Container borderBottom={amountBorderBottom} display="inline-block">
                     <ScalingAmountInput
                         {...rest}
                         textLengthThreshold={this._textLengthThresholdForAsset(asset)}
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 655ae2b74..8d51d27f9 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -8,6 +8,7 @@ import { util } from '../util/util';
 import { ScalingInput } from './scaling_input';
 
 export interface ScalingAmountInputProps {
+    disabled: boolean;
     maxFontSizePx: number;
     textLengthThreshold: number;
     fontColor?: ColorOption;
@@ -20,6 +21,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
+        disabled: false,
     };
     public render(): React.ReactNode {
         const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
@@ -33,6 +35,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 value={!_.isUndefined(value) ? value.toDisplayString() : ''}
                 placeholder="0.00"
                 emptyInputWidthCh={3.5}
+                disabled={this.props.disabled}
             />
         );
     }
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 34cb0b5fd..593e55035 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -27,6 +27,7 @@ export interface ScalingInputProps {
     placeholder?: string;
     maxLength?: number;
     scalingSettings: ScalingSettings;
+    disabled: boolean;
 }
 
 export interface ScalingInputState {
@@ -49,6 +50,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         onFontSizeChange: util.boundNoop,
         maxLength: 7,
         scalingSettings: defaultScalingSettings,
+        disabled: false,
     };
     public state: ScalingInputState = {
         inputWidthPxAtPhaseChange: undefined,
@@ -121,7 +123,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         }
     }
     public render(): React.ReactNode {
-        const { fontColor, onChange, placeholder, value, maxLength } = this.props;
+        const { disabled, fontColor, onChange, placeholder, value, maxLength } = this.props;
         const phase = ScalingInput.getPhaseFromProps(this.props);
         return (
             <Input
@@ -133,6 +135,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 fontSize={`${this._calculateFontSize(phase)}px`}
                 width={this._calculateWidth(phase)}
                 maxLength={maxLength}
+                disabled={disabled}
             />
         );
     }
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index ee76e9d66..6e1957a59 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -25,6 +25,7 @@ interface ConnectedState {
     assetBuyer?: AssetBuyer;
     value?: BigNumberInput;
     asset?: ERC20Asset;
+    disabled: boolean;
 }
 
 interface ConnectedDispatch {
@@ -35,21 +36,29 @@ interface ConnectedProps {
     value?: BigNumberInput;
     asset?: ERC20Asset;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+    disabled: boolean;
 }
 
 type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps;
 
 const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => {
+    const processState = state.buyOrderState.processState;
+    const isEnabled = processState === OrderProcessState.NONE || processState === OrderProcessState.FAILURE;
+    const disabled = !isEnabled;
+
     const selectedAsset = state.selectedAsset;
     if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) {
         return {
             value: state.selectedAssetAmount,
+            disabled,
         };
     }
+
     return {
         assetBuyer: state.assetBuyer,
         value: state.selectedAssetAmount,
         asset: selectedAsset as ERC20Asset,
+        disabled,
     };
 };
 
@@ -114,6 +123,7 @@ const mergeProps = (
         onChange: (value, asset) => {
             connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset);
         },
+        disabled: connectedState.disabled,
     };
 };
 
-- 
cgit v1.2.3


From 476cbbb6cb32db5ca72cc9d200b3ead152ae0e33 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 15:03:56 -0700
Subject: move imports

---
 .../instant/src/containers/selected_erc20_asset_amount_input.ts     | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 67c3ce6a5..3d0895aac 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -7,18 +7,16 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
+import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
+import { ERC20Asset, OrderProcessState, ZeroExInstantError } from '../types';
 import { getBestAddress } from '../util/address';
 import { BigNumberInput } from '../util/big_number_input';
 import { errorUtil } from '../util/error';
 import { web3Wrapper } from '../util/web3_wrapper';
 
-import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
-
-import { ERC20Asset, OrderProcessState, ZeroExInstantError } from '../types';
-
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
     startingFontSizePx: number;
-- 
cgit v1.2.3


From e1ae551560ad12501256fd5702dcd929baa84100 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 15:20:04 -0700
Subject: move funct into util

---
 .../selected_erc20_asset_amount_input.ts           |  7 ++---
 packages/instant/src/util/balance.ts               | 30 ++++++++++++++++++++++
 2 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 packages/instant/src/util/balance.ts

(limited to 'packages')

diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 3d0895aac..1fc5b6d8c 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -13,6 +13,7 @@ import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
 import { ERC20Asset, OrderProcessState, ZeroExInstantError } from '../types';
 import { getBestAddress } from '../util/address';
+import { balanceUtil } from '../util/balance';
 import { BigNumberInput } from '../util/big_number_input';
 import { errorUtil } from '../util/error';
 import { web3Wrapper } from '../util/web3_wrapper';
@@ -81,11 +82,7 @@ const updateBuyQuoteAsync = async (
 
     // set error if user doesn't have appropriate balance
     const takerAddress = await getBestAddress();
-    const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress);
-    if (balanceWei < newBuyQuote.worstCaseQuoteInfo.totalEthAmount) {
-        const balanceError = new Error(ZeroExInstantError.InsufficientBalance);
-        errorUtil.errorFlasher.flashNewError(dispatch, balanceError);
-    }
+    await balanceUtil.checkSufficientBalanceAndFlashError(takerAddress, newBuyQuote, web3Wrapper, dispatch);
 };
 
 const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
diff --git a/packages/instant/src/util/balance.ts b/packages/instant/src/util/balance.ts
new file mode 100644
index 000000000..d442da9e0
--- /dev/null
+++ b/packages/instant/src/util/balance.ts
@@ -0,0 +1,30 @@
+import { BuyQuote } from '@0x/asset-buyer';
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import { Dispatch } from 'redux';
+
+import { ZeroExInstantError } from '../types';
+
+import { errorUtil } from './error';
+
+export const balanceUtil = {
+    /**
+     * Checks to see if user has enough balance to buy assets
+     * If they do not, flash an error and return false
+     * If they do, return true
+     */
+    checkSufficientBalanceAndFlashError: async (
+        takerAddress: string,
+        buyQuote: BuyQuote,
+        web3Wrapper: Web3Wrapper,
+        dispatch: Dispatch,
+    ) => {
+        const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress);
+
+        if (balanceWei < buyQuote.worstCaseQuoteInfo.totalEthAmount) {
+            const balanceError = new Error(ZeroExInstantError.InsufficientBalance);
+            errorUtil.errorFlasher.flashNewError(dispatch, balanceError);
+            return false;
+        }
+        return true;
+    },
+};
-- 
cgit v1.2.3


From cacfcc291ac142df16866469153fb8af38606527 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 15:22:28 -0700
Subject: linting imports

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

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 2330f84f9..b9e92e763 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -1,9 +1,9 @@
 import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
 import * as React from 'react';
 
-import { Flex } from '../components/ui/flex';
-import { SecondaryButton } from '../components/secondary_button';
 import { BuyButton } from '../components/buy_button';
+import { SecondaryButton } from '../components/secondary_button';
+import { Flex } from '../components/ui/flex';
 
 import { PlacingOrderButton } from '../components/placing_order_button';
 import { ColorOption } from '../style/theme';
-- 
cgit v1.2.3


From 86febc3cce1135d2345f0048c205c3c524a66733 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 15:34:35 -0700
Subject: acccount for no address

---
 .../selected_erc20_asset_amount_input.ts           |  2 +-
 packages/instant/src/util/address.ts               |  2 +-
 packages/instant/src/util/balance.ts               | 26 ++++++++++++++--------
 3 files changed, 19 insertions(+), 11 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 1fc5b6d8c..325dc0ef2 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -82,7 +82,7 @@ const updateBuyQuoteAsync = async (
 
     // set error if user doesn't have appropriate balance
     const takerAddress = await getBestAddress();
-    await balanceUtil.checkSufficientBalanceAndFlashError(takerAddress, newBuyQuote, web3Wrapper, dispatch);
+    await balanceUtil.checkInsufficientEthBalanceAndFlashError(takerAddress, newBuyQuote, web3Wrapper, dispatch);
 };
 
 const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
diff --git a/packages/instant/src/util/address.ts b/packages/instant/src/util/address.ts
index 97ed30a00..14d42d8c0 100644
--- a/packages/instant/src/util/address.ts
+++ b/packages/instant/src/util/address.ts
@@ -1,6 +1,6 @@
 import { web3Wrapper } from '../util/web3_wrapper';
 
-export const getBestAddress = async (): Promise<string> => {
+export const getBestAddress = async (): Promise<string | undefined> => {
     const addresses = await web3Wrapper.getAvailableAddressesAsync();
     return addresses[0];
 };
diff --git a/packages/instant/src/util/balance.ts b/packages/instant/src/util/balance.ts
index d442da9e0..954dc7156 100644
--- a/packages/instant/src/util/balance.ts
+++ b/packages/instant/src/util/balance.ts
@@ -1,30 +1,38 @@
 import { BuyQuote } from '@0x/asset-buyer';
 import { Web3Wrapper } from '@0x/web3-wrapper';
+import * as _ from 'lodash';
 import { Dispatch } from 'redux';
 
 import { ZeroExInstantError } from '../types';
 
 import { errorUtil } from './error';
 
+const hasSufficientFunds = async (takerAddress: string | undefined, buyQuote: BuyQuote, web3Wrapper: Web3Wrapper) => {
+    if (_.isUndefined(takerAddress)) {
+        return false;
+    }
+    const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress);
+    return balanceWei >= buyQuote.worstCaseQuoteInfo.totalEthAmount;
+};
+
 export const balanceUtil = {
     /**
      * Checks to see if user has enough balance to buy assets
      * If they do not, flash an error and return false
      * If they do, return true
      */
-    checkSufficientBalanceAndFlashError: async (
-        takerAddress: string,
+    checkInsufficientEthBalanceAndFlashError: async (
+        takerAddress: string | undefined,
         buyQuote: BuyQuote,
         web3Wrapper: Web3Wrapper,
         dispatch: Dispatch,
     ) => {
-        const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress);
-
-        if (balanceWei < buyQuote.worstCaseQuoteInfo.totalEthAmount) {
-            const balanceError = new Error(ZeroExInstantError.InsufficientBalance);
-            errorUtil.errorFlasher.flashNewError(dispatch, balanceError);
-            return false;
+        const hasEnoughFunds = await hasSufficientFunds(takerAddress, buyQuote, web3Wrapper);
+        if (hasEnoughFunds) {
+            return true;
         }
-        return true;
+        const balanceError = new Error(ZeroExInstantError.InsufficientBalance);
+        errorUtil.errorFlasher.flashNewError(dispatch, balanceError);
+        return false;
     },
 };
-- 
cgit v1.2.3


From 4f5ab1a72d33dc6a7516d7b1d51f1aa15752a6b8 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 26 Oct 2018 15:32:04 -0700
Subject: Refactor error handling such that errorMessage lives on the top level
 state

---
 packages/instant/src/components/buy_button.tsx     |  4 +-
 .../instant/src/components/zero_ex_instant.tsx     |  4 +-
 packages/instant/src/containers/latest_error.tsx   | 14 ++---
 .../src/containers/selected_asset_buy_button.ts    |  8 ++-
 .../selected_erc20_asset_amount_input.ts           | 22 +++++--
 packages/instant/src/redux/actions.ts              |  4 +-
 packages/instant/src/redux/reducer.ts              | 20 +++---
 packages/instant/src/util/error.ts                 | 71 ----------------------
 packages/instant/src/util/error_flasher.ts         | 26 ++++++++
 packages/instant/test/util/error.test.ts           | 56 -----------------
 10 files changed, 71 insertions(+), 158 deletions(-)
 delete mode 100644 packages/instant/src/util/error.ts
 create mode 100644 packages/instant/src/util/error_flasher.ts
 delete mode 100644 packages/instant/test/util/error.test.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index a70269dde..9e06604e0 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -13,7 +13,7 @@ export interface BuyButtonProps {
     buyQuote?: BuyQuote;
     assetBuyer?: AssetBuyer;
     onAwaitingSignature: (buyQuote: BuyQuote) => void;
-    onSignatureDenied: (buyQuote: BuyQuote, preventedError: Error) => void;
+    onSignatureDenied: (buyQuote: BuyQuote) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
@@ -48,7 +48,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote);
         } catch (e) {
             if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) {
-                this.props.onSignatureDenied(buyQuote, e);
+                this.props.onSignatureDenied(buyQuote);
                 return;
             }
             throw e;
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index b080f0bad..19a2d6b9b 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -12,7 +12,7 @@ import { fonts } from '../style/fonts';
 import { AssetMetaData, Network } from '../types';
 import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
-import { errorUtil } from '../util/error';
+import { errorFlasher } from '../util/error_flasher';
 import { getProvider } from '../util/provider';
 import { web3Wrapper } from '../util/web3_wrapper';
 
@@ -98,7 +98,7 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
         const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
         if (network !== networkOfProvider) {
             const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
-            errorUtil.errorFlasher.flashNewError(this._store.dispatch, errorMessage, msToShowError);
+            errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
         }
     };
 }
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index b75ec00aa..45ca09673 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -5,32 +5,30 @@ import { connect } from 'react-redux';
 import { SlidingError } from '../components/sliding_error';
 import { State } from '../redux/reducer';
 import { Asset, DisplayStatus } from '../types';
-import { errorUtil } from '../util/error';
 
 export interface LatestErrorComponentProps {
     asset?: Asset;
-    latestError?: any;
+    latestErrorMessage?: string;
     slidingDirection: 'down' | 'up';
 }
 
 export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
-    if (!props.latestError) {
+    if (!props.latestErrorMessage) {
         return <div />;
     }
-    const { icon, message } = errorUtil.errorDescription(props.latestError, props.asset);
-    return <SlidingError direction={props.slidingDirection} icon={icon} message={message} />;
+    return <SlidingError direction={props.slidingDirection} icon="😢" message={props.latestErrorMessage} />;
 };
 
 interface ConnectedState {
     asset?: Asset;
-    latestError?: any;
+    latestErrorMessage?: string;
     slidingDirection: 'down' | 'up';
 }
 export interface LatestErrorProps {}
 const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
     asset: state.selectedAsset,
-    latestError: state.latestError,
-    slidingDirection: state.latestErrorDisplay === DisplayStatus.Present ? 'up' : 'down',
+    latestErrorMessage: state.latestErrorMessage,
+    slidingDirection: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'up' : 'down',
 });
 
 export const LatestError = connect(mapStateToProps)(LatestErrorComponent);
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index adcbd61bc..377831b43 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -7,6 +7,7 @@ import { Dispatch } from 'redux';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { OrderProcessState, OrderState } from '../types';
+import { errorFlasher } from '../util/error_flasher';
 
 import { BuyButton } from '../components/buy_button';
 
@@ -19,7 +20,7 @@ interface ConnectedState {
 
 interface ConnectedDispatch {
     onAwaitingSignature: (buyQuote: BuyQuote) => void;
-    onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
+    onSignatureDenied: (buyQuote: BuyQuote) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
@@ -43,9 +44,10 @@ const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetB
         dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
         dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
-    onSignatureDenied: (buyQuote, error) => {
+    onSignatureDenied: () => {
         dispatch(actions.resetAmount());
-        dispatch(actions.setError(error));
+        const errorMessage = 'You denied this transaction';
+        errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
     },
 });
 
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index ee76e9d66..8fcb430a7 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -1,4 +1,4 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import { AssetProxyId } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
@@ -11,8 +11,9 @@ import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
 import { ERC20Asset, OrderProcessState } from '../types';
+import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
-import { errorUtil } from '../util/error';
+import { errorFlasher } from '../util/error_flasher';
 
 import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
 
@@ -70,11 +71,24 @@ const updateBuyQuoteAsync = async (
         newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue);
     } catch (error) {
         dispatch(actions.setQuoteRequestStateFailure());
-        errorUtil.errorFlasher.flashNewError(dispatch, error);
+        let errorMessage;
+        if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
+            const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
+            errorMessage = `Not enough ${assetName} available`;
+        } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
+            errorMessage = 'Not enough ZRX available';
+        } else if (
+            error.message === AssetBuyerError.StandardRelayerApiError ||
+            error.message.startsWith(AssetBuyerError.AssetUnavailable)
+        ) {
+            const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
+            errorMessage = `${assetName} is currently unavailable`;
+        }
+        errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
         return;
     }
     // We have a successful new buy quote
-    errorUtil.errorFlasher.clearError(dispatch);
+    errorFlasher.clearError(dispatch);
     // invalidate the last buy quote.
     dispatch(actions.updateLatestBuyQuote(newBuyQuote));
 };
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 46045024b..bfae68e2b 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -30,7 +30,7 @@ export enum ActionTypes {
     UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET',
     SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING',
     SET_QUOTE_REQUEST_STATE_FAILURE = 'SET_QUOTE_REQUEST_STATE_FAILURE',
-    SET_ERROR = 'SET_ERROR',
+    SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE',
     HIDE_ERROR = 'HIDE_ERROR',
     CLEAR_ERROR = 'CLEAR_ERROR',
     RESET_AMOUNT = 'RESET_AMOUNT',
@@ -45,7 +45,7 @@ export const actions = {
     updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
     setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING),
     setQuoteRequestStateFailure: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE),
-    setError: (error?: any) => createAction(ActionTypes.SET_ERROR, error),
+    setErrorMessage: (errorMessage: string) => createAction(ActionTypes.SET_ERROR_MESSAGE, errorMessage),
     hideError: () => createAction(ActionTypes.HIDE_ERROR),
     clearError: () => createAction(ActionTypes.CLEAR_ERROR),
     resetAmount: () => createAction(ActionTypes.RESET_AMOUNT),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index d7e5bdfb5..3884eeea9 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -28,8 +28,8 @@ export interface State {
     ethUsdPrice?: BigNumber;
     latestBuyQuote?: BuyQuote;
     quoteRequestState: AsyncProcessState;
-    latestError?: any;
-    latestErrorDisplay: DisplayStatus;
+    latestErrorMessage?: string;
+    latestErrorDisplayStatus: DisplayStatus;
 }
 
 export const INITIAL_STATE: State = {
@@ -39,8 +39,8 @@ export const INITIAL_STATE: State = {
     buyOrderState: { processState: OrderProcessState.NONE },
     ethUsdPrice: undefined,
     latestBuyQuote: undefined,
-    latestError: undefined,
-    latestErrorDisplay: DisplayStatus.Hidden,
+    latestErrorMessage: undefined,
+    latestErrorDisplayStatus: DisplayStatus.Hidden,
     quoteRequestState: AsyncProcessState.NONE,
 };
 
@@ -79,22 +79,22 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 buyOrderState: action.data,
             };
-        case ActionTypes.SET_ERROR:
+        case ActionTypes.SET_ERROR_MESSAGE:
             return {
                 ...state,
-                latestError: action.data,
-                latestErrorDisplay: DisplayStatus.Present,
+                latestErrorMessage: action.data,
+                latestErrorDisplayStatus: DisplayStatus.Present,
             };
         case ActionTypes.HIDE_ERROR:
             return {
                 ...state,
-                latestErrorDisplay: DisplayStatus.Hidden,
+                latestErrorDisplayStatus: DisplayStatus.Hidden,
             };
         case ActionTypes.CLEAR_ERROR:
             return {
                 ...state,
-                latestError: undefined,
-                latestErrorDisplay: DisplayStatus.Hidden,
+                latestErrorMessage: undefined,
+                latestErrorDisplayStatus: DisplayStatus.Hidden,
             };
         case ActionTypes.UPDATE_SELECTED_ASSET:
             const newSelectedAssetData = action.data;
diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts
deleted file mode 100644
index 844a28d8b..000000000
--- a/packages/instant/src/util/error.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { AssetBuyerError } from '@0x/asset-buyer';
-import * as _ from 'lodash';
-import { Dispatch } from 'redux';
-
-import { Action, actions } from '../redux/actions';
-import { Asset } from '../types';
-
-import { assetUtils } from './asset';
-
-class ErrorFlasher {
-    private _timeoutId?: number;
-    public flashNewError(dispatch: Dispatch<Action>, error: any, delayMs: number = 7000): void {
-        this._clearTimeout();
-        // dispatch new message
-        dispatch(actions.setError(error));
-
-        this._timeoutId = window.setTimeout(() => {
-            dispatch(actions.hideError());
-        }, delayMs);
-    }
-    public clearError(dispatch: Dispatch<Action>): void {
-        this._clearTimeout();
-        dispatch(actions.hideError());
-    }
-    private _clearTimeout(): void {
-        if (this._timeoutId) {
-            window.clearTimeout(this._timeoutId);
-        }
-    }
-}
-
-const humanReadableMessageForError = (error: Error, asset?: Asset): string | undefined => {
-    const hasInsufficientLiquidity =
-        error.message === AssetBuyerError.InsufficientAssetLiquidity ||
-        error.message === AssetBuyerError.InsufficientZrxLiquidity;
-    if (hasInsufficientLiquidity) {
-        const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
-        return `Not enough ${assetName} available`;
-    }
-
-    if (
-        error.message === AssetBuyerError.StandardRelayerApiError ||
-        error.message.startsWith(AssetBuyerError.AssetUnavailable)
-    ) {
-        const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
-        return `${assetName} is currently unavailable`;
-    }
-
-    if (error.message === AssetBuyerError.SignatureRequestDenied) {
-        return 'You denied this transaction';
-    }
-
-    return undefined;
-};
-
-export const errorUtil = {
-    errorFlasher: new ErrorFlasher(),
-    errorDescription: (error?: any, asset?: Asset): { icon: string; message: string } => {
-        let bestMessage: string | undefined;
-        if (error instanceof Error) {
-            bestMessage = humanReadableMessageForError(error, asset);
-        }
-        if (_.isString(error)) {
-            bestMessage = error;
-        }
-        return {
-            icon: '😢',
-            message: bestMessage || 'Something went wrong...',
-        };
-    },
-};
diff --git a/packages/instant/src/util/error_flasher.ts b/packages/instant/src/util/error_flasher.ts
new file mode 100644
index 000000000..068c12fe2
--- /dev/null
+++ b/packages/instant/src/util/error_flasher.ts
@@ -0,0 +1,26 @@
+import { Dispatch } from 'redux';
+
+import { Action, actions } from '../redux/actions';
+
+class ErrorFlasher {
+    private _timeoutId?: number;
+    public flashNewErrorMessage(dispatch: Dispatch<Action>, errorMessage?: string, delayMs: number = 7000): void {
+        this._clearTimeout();
+        // dispatch new message
+        dispatch(actions.setErrorMessage(errorMessage || 'Something went wrong...'));
+        this._timeoutId = window.setTimeout(() => {
+            dispatch(actions.hideError());
+        }, delayMs);
+    }
+    public clearError(dispatch: Dispatch<Action>): void {
+        this._clearTimeout();
+        dispatch(actions.hideError());
+    }
+    private _clearTimeout(): void {
+        if (this._timeoutId) {
+            window.clearTimeout(this._timeoutId);
+        }
+    }
+}
+
+export const errorFlasher = new ErrorFlasher();
diff --git a/packages/instant/test/util/error.test.ts b/packages/instant/test/util/error.test.ts
deleted file mode 100644
index 90e9c5fb4..000000000
--- a/packages/instant/test/util/error.test.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AssetBuyerError } from '@0x/asset-buyer';
-import { AssetProxyId } from '@0x/types';
-
-import { Asset } from '../../src/types';
-import { errorUtil } from '../../src/util/error';
-
-const ZRX_ASSET_DATA = '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498';
-const ZRX_ASSET: Asset = {
-    assetData: ZRX_ASSET_DATA,
-    metaData: {
-        assetProxyId: AssetProxyId.ERC20,
-        symbol: 'zrx',
-        decimals: 18,
-    },
-};
-
-describe('errorUtil', () => {
-    describe('errorFlasher', () => {
-        it('should return error and asset name for InsufficientAssetLiquidity', () => {
-            const insufficientAssetError = new Error(AssetBuyerError.InsufficientAssetLiquidity);
-            expect(errorUtil.errorDescription(insufficientAssetError, ZRX_ASSET).message).toEqual(
-                'Not enough ZRX available',
-            );
-        });
-        it('should return error default name for InsufficientAssetLiquidity', () => {
-            const insufficientZrxError = new Error(AssetBuyerError.InsufficientZrxLiquidity);
-            expect(errorUtil.errorDescription(insufficientZrxError).message).toEqual(
-                'Not enough of this asset available',
-            );
-        });
-        it('should return asset name for InsufficientAssetLiquidity', () => {
-            const insufficientZrxError = new Error(AssetBuyerError.InsufficientZrxLiquidity);
-            expect(errorUtil.errorDescription(insufficientZrxError, ZRX_ASSET).message).toEqual(
-                'Not enough ZRX available',
-            );
-        });
-        it('should return unavailable error and asset name for StandardRelayerApiError', () => {
-            const standardRelayerError = new Error(AssetBuyerError.StandardRelayerApiError);
-            expect(errorUtil.errorDescription(standardRelayerError, ZRX_ASSET).message).toEqual(
-                'ZRX is currently unavailable',
-            );
-        });
-        it('should return error for AssetUnavailable error', () => {
-            const assetUnavailableError = new Error(`${AssetBuyerError.AssetUnavailable}: For assetData ${ZRX_ASSET}`);
-            expect(errorUtil.errorDescription(assetUnavailableError, ZRX_ASSET).message).toEqual(
-                'ZRX is currently unavailable',
-            );
-        });
-        it('should return default for AssetUnavailable error', () => {
-            const assetUnavailableError = new Error(`${AssetBuyerError.AssetUnavailable}: For assetData xyz`);
-            expect(errorUtil.errorDescription(assetUnavailableError, undefined).message).toEqual(
-                'This asset is currently unavailable',
-            );
-        });
-    });
-});
-- 
cgit v1.2.3


From 667b1e03ddba1a2fac16488239f6bc977fa4cb6d Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 15:51:23 -0700
Subject: Validate enough ETH when user clicks buy

---
 packages/instant/src/components/buy_button.tsx                   | 9 ++++++++-
 packages/instant/src/components/buy_order_state_buttons.tsx      | 2 ++
 .../src/containers/selected_asset_buy_order_state_buttons.ts     | 6 ++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 4780b80e7..8b2e0e1f6 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
 import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
 import { getBestAddress } from '../util/address';
+import { balanceUtil } from '../util/balance';
 import { util } from '../util/util';
 import { web3Wrapper } from '../util/web3_wrapper';
 
@@ -18,6 +19,7 @@ export interface BuyButtonProps {
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+    validateWalletBeforeBuy: (buyQuote: BuyQuote, takerAddress: string | undefined) => Promise<boolean>;
 }
 
 export class BuyButton extends React.Component<BuyButtonProps> {
@@ -43,10 +45,15 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             return;
         }
 
+        const takerAddress = await getBestAddress();
+        const validWallet = await this.props.validateWalletBeforeBuy(buyQuote, takerAddress);
+        if (!validWallet) {
+            return;
+        }
+
         let txHash: string | undefined;
         this.props.onAwaitingSignature(buyQuote);
         try {
-            const takerAddress = await getBestAddress();
             txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress });
         } catch (e) {
             if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) {
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index b9e92e763..cb5654424 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -23,6 +23,7 @@ export interface BuyOrderStateButtonProps {
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
     onRetry: () => void;
+    validateWalletBeforeBuy: (buyQuote: BuyQuote, takerAddress: string | undefined) => Promise<boolean>;
 }
 
 // TODO: rename to buttons
@@ -58,6 +59,7 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
             onBuyProcessing={props.onBuyProcessing}
             onBuySuccess={props.onBuySuccess}
             onBuyFailure={props.onBuyFailure}
+            validateWalletBeforeBuy={props.validateWalletBeforeBuy}
         />
     );
 };
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 8927b8954..49b9cf209 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -7,7 +7,9 @@ import { Dispatch } from 'redux';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { OrderProcessState, OrderState } from '../types';
+import { balanceUtil } from '../util/balance';
 import { etherscanUtil } from '../util/etherscan';
+import { web3Wrapper } from '../util/web3_wrapper';
 
 import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
 
@@ -25,6 +27,7 @@ interface ConnectedDispatch {
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
     onRetry: () => void;
+    validateWalletBeforeBuy: (buyQuote: BuyQuote, takerAddress: string | undefined) => Promise<boolean>;
 }
 export interface SelectedAssetBuyOrderStateButtons {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => ({
@@ -73,6 +76,9 @@ const mapDispatchToProps = (
     onRetry: () => {
         dispatch(actions.resetAmount());
     },
+    validateWalletBeforeBuy: async (buyQuote: BuyQuote, takerAddress: string | undefined) => {
+        return balanceUtil.checkInsufficientEthBalanceAndFlashError(takerAddress, buyQuote, web3Wrapper, dispatch);
+    },
 });
 
 export const SelectedAssetBuyOrderStateButtons: React.ComponentClass<SelectedAssetBuyOrderStateButtons> = connect(
-- 
cgit v1.2.3


From 0e55f76db860962e4ce06866cbfd3e058c0c2984 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 26 Oct 2018 16:24:16 -0700
Subject: fix(instant): refactor some props to use isDisabled instead of
 disabled

---
 packages/instant/src/components/erc20_asset_amount_input.tsx |  6 +++---
 packages/instant/src/components/scaling_amount_input.tsx     |  6 +++---
 packages/instant/src/components/scaling_input.tsx            |  8 ++++----
 .../src/containers/selected_erc20_asset_amount_input.ts      | 12 ++++++------
 4 files changed, 16 insertions(+), 16 deletions(-)

(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 9b32827e7..5abb34c2f 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -17,7 +17,7 @@ export interface ERC20AssetAmountInputProps {
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
-    disabled: boolean;
+    isDisabled: boolean;
 }
 
 export interface ERC20AssetAmountInputState {
@@ -27,7 +27,7 @@ export interface ERC20AssetAmountInputState {
 export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
-        disabled: false,
+        isDisabled: false,
     };
     constructor(props: ERC20AssetAmountInputProps) {
         super(props);
@@ -37,7 +37,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
     }
     public render(): React.ReactNode {
         const { asset, onChange, ...rest } = this.props;
-        const amountBorderBottom = this.props.disabled ? '' : `1px solid ${transparentWhite}`;
+        const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
         return (
             <Container whiteSpace="nowrap">
                 <Container borderBottom={amountBorderBottom} display="inline-block">
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 8d51d27f9..cfbf3b7cc 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -8,7 +8,7 @@ import { util } from '../util/util';
 import { ScalingInput } from './scaling_input';
 
 export interface ScalingAmountInputProps {
-    disabled: boolean;
+    isDisabled: boolean;
     maxFontSizePx: number;
     textLengthThreshold: number;
     fontColor?: ColorOption;
@@ -21,7 +21,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
-        disabled: false,
+        isDisabled: false,
     };
     public render(): React.ReactNode {
         const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
@@ -35,7 +35,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 value={!_.isUndefined(value) ? value.toDisplayString() : ''}
                 placeholder="0.00"
                 emptyInputWidthCh={3.5}
-                disabled={this.props.disabled}
+                isDisabled={this.props.isDisabled}
             />
         );
     }
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 593e55035..11748b729 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -27,7 +27,7 @@ export interface ScalingInputProps {
     placeholder?: string;
     maxLength?: number;
     scalingSettings: ScalingSettings;
-    disabled: boolean;
+    isDisabled: boolean;
 }
 
 export interface ScalingInputState {
@@ -50,7 +50,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         onFontSizeChange: util.boundNoop,
         maxLength: 7,
         scalingSettings: defaultScalingSettings,
-        disabled: false,
+        isDisabled: false,
     };
     public state: ScalingInputState = {
         inputWidthPxAtPhaseChange: undefined,
@@ -123,7 +123,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         }
     }
     public render(): React.ReactNode {
-        const { disabled, fontColor, onChange, placeholder, value, maxLength } = this.props;
+        const { isDisabled, fontColor, onChange, placeholder, value, maxLength } = this.props;
         const phase = ScalingInput.getPhaseFromProps(this.props);
         return (
             <Input
@@ -135,7 +135,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 fontSize={`${this._calculateFontSize(phase)}px`}
                 width={this._calculateWidth(phase)}
                 maxLength={maxLength}
-                disabled={disabled}
+                disabled={isDisabled}
             />
         );
     }
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 6e1957a59..3d741ae97 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -25,7 +25,7 @@ interface ConnectedState {
     assetBuyer?: AssetBuyer;
     value?: BigNumberInput;
     asset?: ERC20Asset;
-    disabled: boolean;
+    isDisabled: boolean;
 }
 
 interface ConnectedDispatch {
@@ -36,7 +36,7 @@ interface ConnectedProps {
     value?: BigNumberInput;
     asset?: ERC20Asset;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
-    disabled: boolean;
+    isDisabled: boolean;
 }
 
 type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps;
@@ -44,13 +44,13 @@ type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps;
 const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => {
     const processState = state.buyOrderState.processState;
     const isEnabled = processState === OrderProcessState.NONE || processState === OrderProcessState.FAILURE;
-    const disabled = !isEnabled;
+    const isDisabled = !isEnabled;
 
     const selectedAsset = state.selectedAsset;
     if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) {
         return {
             value: state.selectedAssetAmount,
-            disabled,
+            isDisabled,
         };
     }
 
@@ -58,7 +58,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
         assetBuyer: state.assetBuyer,
         value: state.selectedAssetAmount,
         asset: selectedAsset as ERC20Asset,
-        disabled,
+        isDisabled,
     };
 };
 
@@ -123,7 +123,7 @@ const mergeProps = (
         onChange: (value, asset) => {
             connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset);
         },
-        disabled: connectedState.disabled,
+        isDisabled: connectedState.isDisabled,
     };
 };
 
-- 
cgit v1.2.3


From bb307a55d347c34ab51144c75721860e13659ecb Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 19:23:42 -0700
Subject: questionmark syntax instead of '| undefined'

---
 packages/instant/src/components/buy_button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 8b2e0e1f6..86c55dbf9 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -19,7 +19,7 @@ export interface BuyButtonProps {
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
-    validateWalletBeforeBuy: (buyQuote: BuyQuote, takerAddress: string | undefined) => Promise<boolean>;
+    validateWalletBeforeBuy: (buyQuote: BuyQuote, takerAddress?: string) => Promise<boolean>;
 }
 
 export class BuyButton extends React.Component<BuyButtonProps> {
-- 
cgit v1.2.3


From ff295daa5c56b5c056a5faa5ca8875c317524070 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 19:53:15 -0700
Subject: Simpler way of validaitng has enough eth

---
 packages/instant/src/components/buy_button.tsx     | 13 ++++---
 .../src/components/buy_order_state_buttons.tsx     | 12 +++----
 .../selected_asset_buy_order_state_buttons.ts      | 20 ++++++-----
 .../selected_erc20_asset_amount_input.ts           |  4 ---
 packages/instant/src/types.ts                      |  4 +--
 packages/instant/src/util/balance.ts               | 40 ++++++----------------
 6 files changed, 37 insertions(+), 56 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 86c55dbf9..2f670d387 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
+import { ZeroExInstantError } from '../types';
 import { getBestAddress } from '../util/address';
 import { balanceUtil } from '../util/balance';
 import { util } from '../util/util';
@@ -14,12 +15,12 @@ import { Button, Text } from './ui';
 export interface BuyButtonProps {
     buyQuote?: BuyQuote;
     assetBuyer?: AssetBuyer;
-    onAwaitingSignature: (buyQuote: BuyQuote) => void;
+    onPendingValidation: (buyQuote: BuyQuote) => void;
+    onValidationFail: (buyQuote: BuyQuote, error: ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote, preventedError: Error) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
-    validateWalletBeforeBuy: (buyQuote: BuyQuote, takerAddress?: string) => Promise<boolean>;
 }
 
 export class BuyButton extends React.Component<BuyButtonProps> {
@@ -45,14 +46,16 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             return;
         }
 
+        this.props.onPendingValidation(buyQuote);
         const takerAddress = await getBestAddress();
-        const validWallet = await this.props.validateWalletBeforeBuy(buyQuote, takerAddress);
-        if (!validWallet) {
+
+        const hasSufficientFunds = await balanceUtil.hasSufficientFunds(takerAddress, buyQuote, web3Wrapper);
+        if (!hasSufficientFunds) {
+            this.props.onValidationFail(buyQuote, ZeroExInstantError.InsufficientBalance);
             return;
         }
 
         let txHash: string | undefined;
-        this.props.onAwaitingSignature(buyQuote);
         try {
             txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress });
         } catch (e) {
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index cb5654424..8225441f7 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -7,7 +7,7 @@ import { Flex } from '../components/ui/flex';
 
 import { PlacingOrderButton } from '../components/placing_order_button';
 import { ColorOption } from '../style/theme';
-import { OrderProcessState } from '../types';
+import { OrderProcessState, ZeroExInstantError } from '../types';
 
 import { Button } from './ui/button';
 import { Text } from './ui/text';
@@ -17,13 +17,13 @@ export interface BuyOrderStateButtonProps {
     buyOrderProcessingState: OrderProcessState;
     assetBuyer?: AssetBuyer;
     onViewTransaction: () => void;
-    onAwaitingSignature: (buyQuote: BuyQuote) => void;
+    onPendingValidation: (buyQuote: BuyQuote) => void;
     onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
     onRetry: () => void;
-    validateWalletBeforeBuy: (buyQuote: BuyQuote, takerAddress: string | undefined) => Promise<boolean>;
+    onValidationFail: (buyQuote: BuyQuote, error: ZeroExInstantError) => void;
 }
 
 // TODO: rename to buttons
@@ -46,7 +46,7 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
         props.buyOrderProcessingState === OrderProcessState.PROCESSING
     ) {
         return <SecondaryButton onClick={props.onViewTransaction}>View Transaction</SecondaryButton>;
-    } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) {
+    } else if (props.buyOrderProcessingState === OrderProcessState.VALIDATING) {
         return <PlacingOrderButton />;
     }
 
@@ -54,12 +54,12 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
         <BuyButton
             buyQuote={props.buyQuote}
             assetBuyer={props.assetBuyer}
-            onAwaitingSignature={props.onAwaitingSignature}
+            onPendingValidation={props.onPendingValidation}
             onSignatureDenied={props.onSignatureDenied}
             onBuyProcessing={props.onBuyProcessing}
             onBuySuccess={props.onBuySuccess}
             onBuyFailure={props.onBuyFailure}
-            validateWalletBeforeBuy={props.validateWalletBeforeBuy}
+            onValidationFail={props.onValidationFail}
         />
     );
 };
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 49b9cf209..dee724e15 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -6,12 +6,13 @@ import { Dispatch } from 'redux';
 
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
-import { OrderProcessState, OrderState } from '../types';
+import { OrderProcessState, OrderState, ZeroExInstantError } from '../types';
 import { balanceUtil } from '../util/balance';
 import { etherscanUtil } from '../util/etherscan';
 import { web3Wrapper } from '../util/web3_wrapper';
 
 import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
+import { errorUtil } from '../util/error';
 
 interface ConnectedState {
     buyQuote?: BuyQuote;
@@ -21,13 +22,13 @@ interface ConnectedState {
 }
 
 interface ConnectedDispatch {
-    onAwaitingSignature: (buyQuote: BuyQuote) => void;
+    onPendingValidation: (buyQuote: BuyQuote) => void;
     onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
     onRetry: () => void;
-    validateWalletBeforeBuy: (buyQuote: BuyQuote, takerAddress: string | undefined) => Promise<boolean>;
+    onValidationFail: (buyQuote: BuyQuote, error: ZeroExInstantError) => void;
 }
 export interface SelectedAssetBuyOrderStateButtons {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => ({
@@ -57,8 +58,8 @@ const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
     ownProps: SelectedAssetBuyOrderStateButtons,
 ): ConnectedDispatch => ({
-    onAwaitingSignature: (buyQuote: BuyQuote) => {
-        const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE };
+    onPendingValidation: (buyQuote: BuyQuote) => {
+        const newOrderState: OrderState = { processState: OrderProcessState.VALIDATING };
         dispatch(actions.updateBuyOrderState(newOrderState));
     },
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => {
@@ -71,14 +72,15 @@ const mapDispatchToProps = (
         dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
     onSignatureDenied: (buyQuote, error) => {
         dispatch(actions.resetAmount());
-        dispatch(actions.setError(error));
+        errorUtil.errorFlasher.flashNewError(dispatch, error);
+    },
+    onValidationFail: (buyQuote, error) => {
+        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.NONE }));
+        errorUtil.errorFlasher.flashNewError(dispatch, new Error(error));
     },
     onRetry: () => {
         dispatch(actions.resetAmount());
     },
-    validateWalletBeforeBuy: async (buyQuote: BuyQuote, takerAddress: string | undefined) => {
-        return balanceUtil.checkInsufficientEthBalanceAndFlashError(takerAddress, buyQuote, web3Wrapper, dispatch);
-    },
 });
 
 export const SelectedAssetBuyOrderStateButtons: React.ComponentClass<SelectedAssetBuyOrderStateButtons> = connect(
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 325dc0ef2..a090ad8fb 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -79,10 +79,6 @@ const updateBuyQuoteAsync = async (
     errorUtil.errorFlasher.clearError(dispatch);
     // invalidate the last buy quote.
     dispatch(actions.updateLatestBuyQuote(newBuyQuote));
-
-    // set error if user doesn't have appropriate balance
-    const takerAddress = await getBestAddress();
-    await balanceUtil.checkInsufficientEthBalanceAndFlashError(takerAddress, newBuyQuote, web3Wrapper, dispatch);
 };
 
 const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 174ad86e6..9dd5624b6 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -10,14 +10,14 @@ export enum AsyncProcessState {
 
 export enum OrderProcessState {
     NONE = 'None',
-    AWAITING_SIGNATURE = 'Awaiting Signature',
+    VALIDATING = 'Validating',
     PROCESSING = 'Processing',
     SUCCESS = 'Success',
     FAILURE = 'Failure',
 }
 
 interface OrderStatePreTx {
-    processState: OrderProcessState.NONE | OrderProcessState.AWAITING_SIGNATURE;
+    processState: OrderProcessState.NONE | OrderProcessState.VALIDATING;
 }
 interface OrderStatePostTx {
     processState: OrderProcessState.PROCESSING | OrderProcessState.SUCCESS | OrderProcessState.FAILURE;
diff --git a/packages/instant/src/util/balance.ts b/packages/instant/src/util/balance.ts
index 954dc7156..9cb8b8987 100644
--- a/packages/instant/src/util/balance.ts
+++ b/packages/instant/src/util/balance.ts
@@ -1,38 +1,18 @@
 import { BuyQuote } from '@0x/asset-buyer';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
-import { Dispatch } from 'redux';
-
-import { ZeroExInstantError } from '../types';
-
-import { errorUtil } from './error';
-
-const hasSufficientFunds = async (takerAddress: string | undefined, buyQuote: BuyQuote, web3Wrapper: Web3Wrapper) => {
-    if (_.isUndefined(takerAddress)) {
-        return false;
-    }
-    const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress);
-    return balanceWei >= buyQuote.worstCaseQuoteInfo.totalEthAmount;
-};
 
 export const balanceUtil = {
-    /**
-     * Checks to see if user has enough balance to buy assets
-     * If they do not, flash an error and return false
-     * If they do, return true
-     */
-    checkInsufficientEthBalanceAndFlashError: async (
-        takerAddress: string | undefined,
-        buyQuote: BuyQuote,
-        web3Wrapper: Web3Wrapper,
-        dispatch: Dispatch,
-    ) => {
-        const hasEnoughFunds = await hasSufficientFunds(takerAddress, buyQuote, web3Wrapper);
-        if (hasEnoughFunds) {
-            return true;
+    hasSufficientFunds: async (takerAddress: string | undefined, buyQuote: BuyQuote, web3Wrapper: Web3Wrapper) => {
+        if (_.isUndefined(takerAddress)) {
+            return false;
         }
-        const balanceError = new Error(ZeroExInstantError.InsufficientBalance);
-        errorUtil.errorFlasher.flashNewError(dispatch, balanceError);
-        return false;
+        const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress);
+        console.log('balanceWei', balanceWei.toString());
+        console.log(
+            'buyQuote.worstCaseQuoteInfo.totalEthAmount',
+            buyQuote.worstCaseQuoteInfo.totalEthAmount.toString(),
+        );
+        return balanceWei >= buyQuote.worstCaseQuoteInfo.totalEthAmount;
     },
 };
-- 
cgit v1.2.3


From 3052c8d303bdbaf57e762345d5ee8428d2194d0a Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 26 Oct 2018 19:55:42 -0700
Subject: linting

---
 .../instant/src/containers/selected_asset_buy_order_state_buttons.ts | 2 --
 packages/instant/src/containers/selected_erc20_asset_amount_input.ts | 5 +----
 packages/instant/src/util/balance.ts                                 | 5 -----
 3 files changed, 1 insertion(+), 11 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index dee724e15..d22fd7d24 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -7,9 +7,7 @@ import { Dispatch } from 'redux';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { OrderProcessState, OrderState, ZeroExInstantError } from '../types';
-import { balanceUtil } from '../util/balance';
 import { etherscanUtil } from '../util/etherscan';
-import { web3Wrapper } from '../util/web3_wrapper';
 
 import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
 import { errorUtil } from '../util/error';
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index a090ad8fb..6536e2787 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -11,12 +11,9 @@ import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
-import { ERC20Asset, OrderProcessState, ZeroExInstantError } from '../types';
-import { getBestAddress } from '../util/address';
-import { balanceUtil } from '../util/balance';
+import { ERC20Asset, OrderProcessState } from '../types';
 import { BigNumberInput } from '../util/big_number_input';
 import { errorUtil } from '../util/error';
-import { web3Wrapper } from '../util/web3_wrapper';
 
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
diff --git a/packages/instant/src/util/balance.ts b/packages/instant/src/util/balance.ts
index 9cb8b8987..24b7b99c3 100644
--- a/packages/instant/src/util/balance.ts
+++ b/packages/instant/src/util/balance.ts
@@ -8,11 +8,6 @@ export const balanceUtil = {
             return false;
         }
         const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress);
-        console.log('balanceWei', balanceWei.toString());
-        console.log(
-            'buyQuote.worstCaseQuoteInfo.totalEthAmount',
-            buyQuote.worstCaseQuoteInfo.totalEthAmount.toString(),
-        );
         return balanceWei >= buyQuote.worstCaseQuoteInfo.totalEthAmount;
     },
 };
-- 
cgit v1.2.3


From 1bb7a28690662d682f865505b6c62fe655d57316 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 29 Oct 2018 08:56:49 -0700
Subject: onPendingValidation -> onValidationPending

---
 packages/instant/src/components/buy_button.tsx                    | 4 ++--
 packages/instant/src/components/buy_order_state_buttons.tsx       | 8 ++++----
 .../src/containers/selected_asset_buy_order_state_buttons.ts      | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 2f670d387..876edd396 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -15,7 +15,7 @@ import { Button, Text } from './ui';
 export interface BuyButtonProps {
     buyQuote?: BuyQuote;
     assetBuyer?: AssetBuyer;
-    onPendingValidation: (buyQuote: BuyQuote) => void;
+    onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, error: ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote, preventedError: Error) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
@@ -46,7 +46,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             return;
         }
 
-        this.props.onPendingValidation(buyQuote);
+        this.props.onValidationPending(buyQuote);
         const takerAddress = await getBestAddress();
 
         const hasSufficientFunds = await balanceUtil.hasSufficientFunds(takerAddress, buyQuote, web3Wrapper);
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 8225441f7..f9d683be6 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -17,13 +17,13 @@ export interface BuyOrderStateButtonProps {
     buyOrderProcessingState: OrderProcessState;
     assetBuyer?: AssetBuyer;
     onViewTransaction: () => void;
-    onPendingValidation: (buyQuote: BuyQuote) => void;
+    onValidationPending: (buyQuote: BuyQuote) => void;
+    onValidationFail: (buyQuote: BuyQuote, error: ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
     onRetry: () => void;
-    onValidationFail: (buyQuote: BuyQuote, error: ZeroExInstantError) => void;
 }
 
 // TODO: rename to buttons
@@ -54,12 +54,12 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
         <BuyButton
             buyQuote={props.buyQuote}
             assetBuyer={props.assetBuyer}
-            onPendingValidation={props.onPendingValidation}
+            onValidationPending={props.onValidationPending}
+            onValidationFail={props.onValidationFail}
             onSignatureDenied={props.onSignatureDenied}
             onBuyProcessing={props.onBuyProcessing}
             onBuySuccess={props.onBuySuccess}
             onBuyFailure={props.onBuyFailure}
-            onValidationFail={props.onValidationFail}
         />
     );
 };
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index d22fd7d24..1a568c1fb 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -20,7 +20,7 @@ interface ConnectedState {
 }
 
 interface ConnectedDispatch {
-    onPendingValidation: (buyQuote: BuyQuote) => void;
+    onValidationPending: (buyQuote: BuyQuote) => void;
     onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
@@ -56,7 +56,7 @@ const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
     ownProps: SelectedAssetBuyOrderStateButtons,
 ): ConnectedDispatch => ({
-    onPendingValidation: (buyQuote: BuyQuote) => {
+    onValidationPending: (buyQuote: BuyQuote) => {
         const newOrderState: OrderState = { processState: OrderProcessState.VALIDATING };
         dispatch(actions.updateBuyOrderState(newOrderState));
     },
-- 
cgit v1.2.3


From 8288e8cce963bbd96c71b3adeb5d34bb96c30693 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 29 Oct 2018 09:03:39 -0700
Subject: When transaction too low, treat as validation error. also modify
 callback: errorMessage could be AssetBuyError as well

---
 packages/instant/src/components/buy_button.tsx              | 13 +++++++++----
 packages/instant/src/components/buy_order_state_buttons.tsx |  4 ++--
 .../containers/selected_asset_buy_order_state_buttons.ts    |  4 ++--
 3 files changed, 13 insertions(+), 8 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 876edd396..bceabbca3 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -16,7 +16,7 @@ export interface BuyButtonProps {
     buyQuote?: BuyQuote;
     assetBuyer?: AssetBuyer;
     onValidationPending: (buyQuote: BuyQuote) => void;
-    onValidationFail: (buyQuote: BuyQuote, error: ZeroExInstantError) => void;
+    onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote, preventedError: Error) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
@@ -59,9 +59,14 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         try {
             txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress });
         } catch (e) {
-            if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) {
-                this.props.onSignatureDenied(buyQuote, e);
-                return;
+            if (e instanceof Error) {
+                if (e.message === AssetBuyerError.SignatureRequestDenied) {
+                    this.props.onSignatureDenied(buyQuote, e);
+                    return;
+                } else if (e.message === AssetBuyerError.TransactionValueTooLow) {
+                    this.props.onValidationFail(buyQuote, AssetBuyerError.TransactionValueTooLow);
+                    return;
+                }
             }
             throw e;
         }
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index f9d683be6..7c06ff31b 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -1,4 +1,4 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as React from 'react';
 
 import { BuyButton } from '../components/buy_button';
@@ -18,7 +18,7 @@ export interface BuyOrderStateButtonProps {
     assetBuyer?: AssetBuyer;
     onViewTransaction: () => void;
     onValidationPending: (buyQuote: BuyQuote) => void;
-    onValidationFail: (buyQuote: BuyQuote, error: ZeroExInstantError) => void;
+    onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 1a568c1fb..241c0192c 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -1,4 +1,4 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
@@ -26,7 +26,7 @@ interface ConnectedDispatch {
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
     onRetry: () => void;
-    onValidationFail: (buyQuote: BuyQuote, error: ZeroExInstantError) => void;
+    onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
 }
 export interface SelectedAssetBuyOrderStateButtons {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => ({
-- 
cgit v1.2.3


From 7ed44f7b2f0224b4169f0a8f34bae09e8c6b986f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 29 Oct 2018 09:07:40 -0700
Subject: Has Sufficient Funds/Balance -> Has Sufficient ETH

---
 packages/instant/src/components/buy_button.tsx | 6 +++---
 packages/instant/src/types.ts                  | 2 +-
 packages/instant/src/util/balance.ts           | 2 +-
 packages/instant/src/util/error.ts             | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index bceabbca3..bcd435250 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -49,9 +49,9 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         this.props.onValidationPending(buyQuote);
         const takerAddress = await getBestAddress();
 
-        const hasSufficientFunds = await balanceUtil.hasSufficientFunds(takerAddress, buyQuote, web3Wrapper);
-        if (!hasSufficientFunds) {
-            this.props.onValidationFail(buyQuote, ZeroExInstantError.InsufficientBalance);
+        const hasSufficentEth = await balanceUtil.hasSufficentEth(takerAddress, buyQuote, web3Wrapper);
+        if (!hasSufficentEth) {
+            this.props.onValidationFail(buyQuote, ZeroExInstantError.InsufficientETH);
             return;
         }
 
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 9dd5624b6..c02b66990 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -72,5 +72,5 @@ export enum Network {
 
 export enum ZeroExInstantError {
     AssetMetaDataNotAvailable = 'ASSET_META_DATA_NOT_AVAILABLE',
-    InsufficientBalance = 'INSUFFICIENT_BALANCE',
+    InsufficientETH = 'INSUFFICIENT_ETH',
 }
diff --git a/packages/instant/src/util/balance.ts b/packages/instant/src/util/balance.ts
index 24b7b99c3..533656858 100644
--- a/packages/instant/src/util/balance.ts
+++ b/packages/instant/src/util/balance.ts
@@ -3,7 +3,7 @@ import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 
 export const balanceUtil = {
-    hasSufficientFunds: async (takerAddress: string | undefined, buyQuote: BuyQuote, web3Wrapper: Web3Wrapper) => {
+    hasSufficentEth: async (takerAddress: string | undefined, buyQuote: BuyQuote, web3Wrapper: Web3Wrapper) => {
         if (_.isUndefined(takerAddress)) {
             return false;
         }
diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts
index 5db0c66d2..39c563c75 100644
--- a/packages/instant/src/util/error.ts
+++ b/packages/instant/src/util/error.ts
@@ -49,7 +49,7 @@ const humanReadableMessageForError = (error: Error, asset?: Asset): string | und
     if (error.message === AssetBuyerError.SignatureRequestDenied) {
         return 'You denied this transaction';
     }
-    if (error.message === ZeroExInstantError.InsufficientBalance) {
+    if (error.message === ZeroExInstantError.InsufficientETH) {
         return "You don't have enough ETH";
     }
 
-- 
cgit v1.2.3


From 3f35239b27653da898218e53909982203fad6d17 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Mon, 29 Oct 2018 10:40:11 -0700
Subject: fix(instant): fix spelling error and BigNumber gte operation

---
 packages/instant/src/components/buy_button.tsx | 4 ++--
 packages/instant/src/util/balance.ts           | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 13c1dc88c..129aedaf3 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -49,8 +49,8 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         this.props.onValidationPending(buyQuote);
         const takerAddress = await getBestAddress();
 
-        const hasSufficentEth = await balanceUtil.hasSufficentEth(takerAddress, buyQuote, web3Wrapper);
-        if (!hasSufficentEth) {
+        const hasSufficientEth = await balanceUtil.hasSufficientEth(takerAddress, buyQuote, web3Wrapper);
+        if (!hasSufficientEth) {
             this.props.onValidationFail(buyQuote, ZeroExInstantError.InsufficientETH);
             return;
         }
diff --git a/packages/instant/src/util/balance.ts b/packages/instant/src/util/balance.ts
index 533656858..f2271495b 100644
--- a/packages/instant/src/util/balance.ts
+++ b/packages/instant/src/util/balance.ts
@@ -3,11 +3,11 @@ import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 
 export const balanceUtil = {
-    hasSufficentEth: async (takerAddress: string | undefined, buyQuote: BuyQuote, web3Wrapper: Web3Wrapper) => {
+    hasSufficientEth: async (takerAddress: string | undefined, buyQuote: BuyQuote, web3Wrapper: Web3Wrapper) => {
         if (_.isUndefined(takerAddress)) {
             return false;
         }
         const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress);
-        return balanceWei >= buyQuote.worstCaseQuoteInfo.totalEthAmount;
+        return balanceWei.gte(buyQuote.worstCaseQuoteInfo.totalEthAmount);
     },
 };
-- 
cgit v1.2.3


From aeec8f47ef9f72d73674f625a381f60df8a3246a Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Mon, 29 Oct 2018 12:51:38 -0700
Subject: feat(instant): add default gasPrice of 6 gwei to transactions

---
 packages/instant/src/components/buy_button.tsx | 5 +++--
 packages/instant/src/constants.ts              | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 129aedaf3..e65e62e47 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -2,7 +2,7 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
+import { DEFAULT_GAS_PRICE, WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
 import { ZeroExInstantError } from '../types';
 import { getBestAddress } from '../util/address';
@@ -57,7 +57,8 @@ export class BuyButton extends React.Component<BuyButtonProps> {
 
         let txHash: string | undefined;
         try {
-            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress });
+            const gasPrice = DEFAULT_GAS_PRICE;
+            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { gasPrice, takerAddress });
         } catch (e) {
             if (e instanceof Error) {
                 if (e.message === AssetBuyerError.SignatureRequestDenied) {
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index e4281d54a..47cb2eaeb 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -3,3 +3,5 @@ export const BIG_NUMBER_ZERO = new BigNumber(0);
 export const ETH_DECIMALS = 18;
 export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
 export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
+export const GWEI_IN_WEI = new BigNumber(1000000000);
+export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
-- 
cgit v1.2.3


From 02a975dde45ba879627975ac836956b679a1a0ac Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 29 Oct 2018 13:17:16 -0700
Subject: feat: add augur provided order

---
 packages/instant/public/index.html                 | 33 ++++++++++------------
 .../selected_erc20_asset_amount_input.ts           |  1 +
 .../instant/src/data/asset_data_network_mapping.ts |  4 +++
 packages/instant/src/data/asset_meta_data_map.ts   |  6 ++++
 4 files changed, 26 insertions(+), 18 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 9f1dfdb64..68d6c69c4 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -35,24 +35,21 @@
             DECIMAL_PLACES: 78,
         });
         const providedOrder = {
-            senderAddress: '0x0000000000000000000000000000000000000000',
-            makerAddress: '0x14e2f1f157e7dd4057d02817436d628a37120fd1',
-            takerAddress: '0x0000000000000000000000000000000000000000',
-            makerFee: new BigNumber('0'),
-            takerFee: new BigNumber('0'),
-            makerAssetAmount: new BigNumber('100000000000000000000'),
-            takerAssetAmount: new BigNumber('10000000000000000'),
-            makerAssetData: '0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa',
-            takerAssetData: '0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c',
-            expirationTimeSeconds: new BigNumber('1591858800'),
-            feeRecipientAddress: '0x0000000000000000000000000000000000000000',
-            salt: new BigNumber(
-                '54983920541892966634674340965984367456810207583416050222519063020710969340046',
-            ),
-            signature:
-                '0x1b949656218421c845995457303569a656764afa2b979d41dcefff0009d57ce15001490268bc7caa4269894fd83b741465fc5a7a53eda6ece17eb91fb32655d83703',
-            exchangeAddress: '0x35dd2932454449b14cee11a94d3674a936d5d7b2',
-        };
+            "senderAddress": "0x0000000000000000000000000000000000000000",
+            "makerAddress": "0x34a745008a643eebc58920eaa29fb1165b4a288e",
+            "takerAddress": "0x0000000000000000000000000000000000000000",
+            "makerFee": new BigNumber("0"),
+            "takerFee": new BigNumber("0"),
+            "makerAssetAmount": new BigNumber("400000000000000000000"),
+            "takerAssetAmount": new BigNumber("40000000000000000000"),
+            "makerAssetData": "0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c",
+            "takerAssetData": "0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c",
+            "expirationTimeSeconds": new BigNumber("1543046400"),
+            "feeRecipientAddress": "0x0000000000000000000000000000000000000000",
+            "salt": new BigNumber("47929252863126413473766089649682650973189811771354566206928245255479607883031"),
+            "signature": "0x1c0bf8ba709ceb5b32e6b0b5a8bb7f07e9d19aba88d8530715f8a298d12188e3862fcc0a30ddfad4062b30459f2859323c064052f12cc687466c457934b9419a1b03",
+            "exchangeAddress": "0x35dd2932454449b14cee11a94d3674a936d5d7b2"
+        }
         const queryParams = new Uri(window.location.search);
         const renderOptionsDefaults = {
             liquiditySource: 'https://api.radarrelay.com/0x/v2/',
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 4767b15d4..ad3aa9582 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -78,6 +78,7 @@ const updateBuyQuoteAsync = async (
     try {
         newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue);
     } catch (error) {
+        console.log(error);
         dispatch(actions.setQuoteRequestStateFailure());
         let errorMessage;
         if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
diff --git a/packages/instant/src/data/asset_data_network_mapping.ts b/packages/instant/src/data/asset_data_network_mapping.ts
index e8ccbf011..28a04eb8a 100644
--- a/packages/instant/src/data/asset_data_network_mapping.ts
+++ b/packages/instant/src/data/asset_data_network_mapping.ts
@@ -12,4 +12,8 @@ export const assetDataNetworkMapping: AssetDataByNetwork[] = [
         [Network.Mainnet]: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498',
         [Network.Kovan]: '0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa',
     },
+    {
+        [Network.Kovan]: '0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c',
+        [Network.Mainnet]: '0xf47261b0000000000000000000000000e94327d07fc17907b4db788e5adf2ed424addff6',
+    },
 ];
diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts
index 3a820a0c4..4e6e15d38 100644
--- a/packages/instant/src/data/asset_meta_data_map.ts
+++ b/packages/instant/src/data/asset_meta_data_map.ts
@@ -11,4 +11,10 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
         primaryColor: 'rgb(54, 50, 60)',
         symbol: 'zrx',
     },
+    '0xf47261b0000000000000000000000000e94327d07fc17907b4db788e5adf2ed424addff6': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#512D80',
+        symbol: 'rep',
+    },
 };
-- 
cgit v1.2.3


From 25ca3d4c29ad98b75e256424246a38a72e5a26da Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Mon, 29 Oct 2018 12:51:38 -0700
Subject: feat(instant): add default gasPrice of 6 gwei to transactions

---
 packages/instant/src/components/buy_button.tsx | 5 +++--
 packages/instant/src/constants.ts              | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 129aedaf3..e65e62e47 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -2,7 +2,7 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
+import { DEFAULT_GAS_PRICE, WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
 import { ZeroExInstantError } from '../types';
 import { getBestAddress } from '../util/address';
@@ -57,7 +57,8 @@ export class BuyButton extends React.Component<BuyButtonProps> {
 
         let txHash: string | undefined;
         try {
-            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress });
+            const gasPrice = DEFAULT_GAS_PRICE;
+            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { gasPrice, takerAddress });
         } catch (e) {
             if (e instanceof Error) {
                 if (e.message === AssetBuyerError.SignatureRequestDenied) {
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index e4281d54a..47cb2eaeb 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -3,3 +3,5 @@ export const BIG_NUMBER_ZERO = new BigNumber(0);
 export const ETH_DECIMALS = 18;
 export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
 export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
+export const GWEI_IN_WEI = new BigNumber(1000000000);
+export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
-- 
cgit v1.2.3


From 8ab8c279989114662d6dce4b5b998ad8fd88fc1a Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 29 Oct 2018 15:19:48 -0700
Subject: gas price estimator

---
 packages/instant/src/components/buy_button.tsx     |  5 ++-
 .../instant/src/components/zero_ex_instant.tsx     |  2 +
 packages/instant/src/util/gas_price_estimator.ts   | 45 ++++++++++++++++++++++
 3 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 packages/instant/src/util/gas_price_estimator.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index e65e62e47..58575b1b3 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -7,6 +7,7 @@ import { ColorOption } from '../style/theme';
 import { ZeroExInstantError } from '../types';
 import { getBestAddress } from '../util/address';
 import { balanceUtil } from '../util/balance';
+import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { util } from '../util/util';
 import { web3Wrapper } from '../util/web3_wrapper';
 
@@ -56,9 +57,9 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         }
 
         let txHash: string | undefined;
+        const gasPrice = await gasPriceEstimator.getFastAmountInWeiAsync();
         try {
-            const gasPrice = DEFAULT_GAS_PRICE;
-            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { gasPrice, takerAddress });
+            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress, gasPrice });
         } catch (e) {
             if (e instanceof Error) {
                 if (e.message === AssetBuyerError.SignatureRequestDenied) {
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 19a2d6b9b..6a5846963 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -13,6 +13,7 @@ import { AssetMetaData, Network } from '../types';
 import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
 import { errorFlasher } from '../util/error_flasher';
+import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { getProvider } from '../util/provider';
 import { web3Wrapper } from '../util/web3_wrapper';
 
@@ -78,6 +79,7 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
     public componentDidMount(): void {
         // tslint:disable-next-line:no-floating-promises
         asyncData.fetchAndDispatchToStore(this._store);
+        gasPriceEstimator.getFastAmountInWeiAsync();
         // tslint:disable-next-line:no-floating-promises
         this._flashErrorIfWrongNetwork();
     }
diff --git a/packages/instant/src/util/gas_price_estimator.ts b/packages/instant/src/util/gas_price_estimator.ts
new file mode 100644
index 000000000..bd81ea05f
--- /dev/null
+++ b/packages/instant/src/util/gas_price_estimator.ts
@@ -0,0 +1,45 @@
+import { BigNumber } from '@0x/utils';
+
+// TODO: merge development and move to constants
+const ENDPOINT_URL = 'https://ethgasstation.info/json/ethgasAPI.json';
+const DEFAULT_GAS_PRICE_WEI = new BigNumber(20000000000);
+
+interface GasStationResult {
+    average: number;
+    fastestWait: number;
+    fastWait: number;
+    fast: number;
+    safeLowWait: number;
+    blockNum: number;
+    avgWait: number;
+    block_time: number;
+    speed: number;
+    fastest: number;
+    safeLow: number;
+}
+
+const fetchFastAmountInWei = async () => {
+    const res = await fetch(ENDPOINT_URL);
+    const gasInfo = (await res.json()) as GasStationResult;
+    const gasPriceInGwei = new BigNumber(gasInfo.fast / 10);
+    return gasPriceInGwei.mul(1000000000);
+};
+
+export class GasPriceEstimator {
+    private _lastFetched?: BigNumber;
+    public async getFastAmountInWeiAsync(): Promise<BigNumber> {
+        let fetchedAmount: BigNumber | undefined;
+        try {
+            fetchedAmount = await fetchFastAmountInWei();
+        } catch {
+            fetchedAmount = undefined;
+        }
+
+        if (fetchedAmount) {
+            this._lastFetched = fetchedAmount;
+        }
+
+        return fetchedAmount || this._lastFetched || DEFAULT_GAS_PRICE_WEI;
+    }
+}
+export const gasPriceEstimator = new GasPriceEstimator();
-- 
cgit v1.2.3


From 9610ada4467472318db0de17f794737ada42836b Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 29 Oct 2018 15:23:16 -0700
Subject: Use constant that exists now

---
 packages/instant/src/util/gas_price_estimator.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/gas_price_estimator.ts b/packages/instant/src/util/gas_price_estimator.ts
index bd81ea05f..9eccfe510 100644
--- a/packages/instant/src/util/gas_price_estimator.ts
+++ b/packages/instant/src/util/gas_price_estimator.ts
@@ -1,8 +1,6 @@
 import { BigNumber } from '@0x/utils';
 
-// TODO: merge development and move to constants
-const ENDPOINT_URL = 'https://ethgasstation.info/json/ethgasAPI.json';
-const DEFAULT_GAS_PRICE_WEI = new BigNumber(20000000000);
+import { DEFAULT_GAS_PRICE } from '../constants';
 
 interface GasStationResult {
     average: number;
@@ -18,8 +16,9 @@ interface GasStationResult {
     safeLow: number;
 }
 
+const endpointUrl = 'https://ethgasstation.info/json/ethgasAPI.json';
 const fetchFastAmountInWei = async () => {
-    const res = await fetch(ENDPOINT_URL);
+    const res = await fetch(endpointUrl);
     const gasInfo = (await res.json()) as GasStationResult;
     const gasPriceInGwei = new BigNumber(gasInfo.fast / 10);
     return gasPriceInGwei.mul(1000000000);
@@ -39,7 +38,7 @@ export class GasPriceEstimator {
             this._lastFetched = fetchedAmount;
         }
 
-        return fetchedAmount || this._lastFetched || DEFAULT_GAS_PRICE_WEI;
+        return fetchedAmount || this._lastFetched || DEFAULT_GAS_PRICE;
     }
 }
 export const gasPriceEstimator = new GasPriceEstimator();
-- 
cgit v1.2.3


From ac72df41883af261b8661cb5f52c01567a6aad62 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 29 Oct 2018 15:30:25 -0700
Subject: chore: remove console log

---
 packages/instant/src/containers/selected_erc20_asset_amount_input.ts | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index ad3aa9582..4767b15d4 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -78,7 +78,6 @@ const updateBuyQuoteAsync = async (
     try {
         newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue);
     } catch (error) {
-        console.log(error);
         dispatch(actions.setQuoteRequestStateFailure());
         let errorMessage;
         if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
-- 
cgit v1.2.3


From cd419edf69ae13c6eb7eb1daadcfa73bd731e6f4 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 29 Oct 2018 15:37:30 -0700
Subject: linting

---
 packages/instant/src/components/buy_button.tsx      | 2 +-
 packages/instant/src/components/zero_ex_instant.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 58575b1b3..93bd8e635 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -2,7 +2,7 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { DEFAULT_GAS_PRICE, WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
+import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
 import { ZeroExInstantError } from '../types';
 import { getBestAddress } from '../util/address';
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 6a5846963..87069bb6f 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -79,6 +79,7 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
     public componentDidMount(): void {
         // tslint:disable-next-line:no-floating-promises
         asyncData.fetchAndDispatchToStore(this._store);
+        // tslint:disable-next-line:no-floating-promises
         gasPriceEstimator.getFastAmountInWeiAsync();
         // tslint:disable-next-line:no-floating-promises
         this._flashErrorIfWrongNetwork();
-- 
cgit v1.2.3


From 10e6c3cd906c6625ed0c9ae98d20ef9f32676cbe Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 29 Oct 2018 15:48:45 -0700
Subject: feat: remove isValidProvided orders validation

---
 packages/asset-buyer/src/asset_buyer.ts  |  1 -
 packages/asset-buyer/src/utils/assert.ts | 15 ---------
 packages/instant/public/index.html       | 52 +++++++++++++++++++++-----------
 3 files changed, 35 insertions(+), 33 deletions(-)

(limited to 'packages')

diff --git a/packages/asset-buyer/src/asset_buyer.ts b/packages/asset-buyer/src/asset_buyer.ts
index 34e2d9639..ed52f2d9d 100644
--- a/packages/asset-buyer/src/asset_buyer.ts
+++ b/packages/asset-buyer/src/asset_buyer.ts
@@ -56,7 +56,6 @@ export class AssetBuyer {
     ): AssetBuyer {
         assert.isWeb3Provider('provider', provider);
         assert.doesConformToSchema('orders', orders, schemas.signedOrdersSchema);
-        assert.areValidProvidedOrders('orders', orders);
         assert.assert(orders.length !== 0, `Expected orders to contain at least one order`);
         const orderProvider = new BasicOrderProvider(orders);
         const assetBuyer = new AssetBuyer(provider, orderProvider, options);
diff --git a/packages/asset-buyer/src/utils/assert.ts b/packages/asset-buyer/src/utils/assert.ts
index e8cb7f763..7e4eb7175 100644
--- a/packages/asset-buyer/src/utils/assert.ts
+++ b/packages/asset-buyer/src/utils/assert.ts
@@ -31,21 +31,6 @@ export const assert = {
         sharedAssert.isHexString(`${variableName}.takerAssetData`, orderFetcherRequest.takerAssetData);
         sharedAssert.isNumber(`${variableName}.networkId`, orderFetcherRequest.networkId);
     },
-    areValidProvidedOrders(variableName: string, orders: SignedOrder[]): void {
-        if (orders.length === 0) {
-            return;
-        }
-        const makerAssetData = orders[0].makerAssetData;
-        const takerAssetData = orders[0].takerAssetData;
-        const filteredOrders = _.filter(
-            orders,
-            order => order.makerAssetData === makerAssetData && order.takerAssetData === takerAssetData,
-        );
-        sharedAssert.assert(
-            orders.length === filteredOrders.length,
-            `Expected all orders in ${variableName} to have the same makerAssetData and takerAssetData.`,
-        );
-    },
     isValidPercentage(variableName: string, percentage: number): void {
         assert.isNumber(variableName, percentage);
         assert.assert(
diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 68d6c69c4..dc172e6e4 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -34,22 +34,40 @@
             EXPONENTIAL_AT: 1000,
             DECIMAL_PLACES: 78,
         });
-        const providedOrder = {
-            "senderAddress": "0x0000000000000000000000000000000000000000",
-            "makerAddress": "0x34a745008a643eebc58920eaa29fb1165b4a288e",
-            "takerAddress": "0x0000000000000000000000000000000000000000",
-            "makerFee": new BigNumber("0"),
-            "takerFee": new BigNumber("0"),
-            "makerAssetAmount": new BigNumber("400000000000000000000"),
-            "takerAssetAmount": new BigNumber("40000000000000000000"),
-            "makerAssetData": "0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c",
-            "takerAssetData": "0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c",
-            "expirationTimeSeconds": new BigNumber("1543046400"),
-            "feeRecipientAddress": "0x0000000000000000000000000000000000000000",
-            "salt": new BigNumber("47929252863126413473766089649682650973189811771354566206928245255479607883031"),
-            "signature": "0x1c0bf8ba709ceb5b32e6b0b5a8bb7f07e9d19aba88d8530715f8a298d12188e3862fcc0a30ddfad4062b30459f2859323c064052f12cc687466c457934b9419a1b03",
-            "exchangeAddress": "0x35dd2932454449b14cee11a94d3674a936d5d7b2"
-        }
+        const providedOrders = [
+            {
+                "senderAddress": "0x0000000000000000000000000000000000000000",
+                "makerAddress": "0x34a745008a643eebc58920eaa29fb1165b4a288e",
+                "takerAddress": "0x0000000000000000000000000000000000000000",
+                "makerFee": new BigNumber("0"),
+                "takerFee": new BigNumber("0"),
+                "makerAssetAmount": new BigNumber("400000000000000000000"),
+                "takerAssetAmount": new BigNumber("40000000000000000000"),
+                "makerAssetData": "0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c",
+                "takerAssetData": "0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c",
+                "expirationTimeSeconds": new BigNumber("1543046400"),
+                "feeRecipientAddress": "0x0000000000000000000000000000000000000000",
+                "salt": new BigNumber("47929252863126413473766089649682650973189811771354566206928245255479607883031"),
+                "signature": "0x1c0bf8ba709ceb5b32e6b0b5a8bb7f07e9d19aba88d8530715f8a298d12188e3862fcc0a30ddfad4062b30459f2859323c064052f12cc687466c457934b9419a1b03",
+                "exchangeAddress": "0x35dd2932454449b14cee11a94d3674a936d5d7b2"
+            },
+            {
+                "senderAddress": "0x0000000000000000000000000000000000000000",
+                "makerAddress": "0x34a745008a643eebc58920eaa29fb1165b4a288e",
+                "takerAddress": "0x0000000000000000000000000000000000000000",
+                "makerFee": new BigNumber("0"),
+                "takerFee": new BigNumber("0"),
+                "makerAssetAmount": new BigNumber("300000000000000000000"),
+                "takerAssetAmount": new BigNumber("31000000000000000000"),
+                "makerAssetData": "0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa",
+                "takerAssetData": "0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c",
+                "expirationTimeSeconds": new BigNumber("2524636800"),
+                "feeRecipientAddress": "0x0000000000000000000000000000000000000000",
+                "salt": new BigNumber("64592004666704945574675477805199411288137454783320798602050822322450089238268"),
+                "signature": "0x1c13cacddca8d7d8248e91f412377e68f8f1f9891a59a6c1b2eea9f7b33558c30c4fb86a448e08ab7def40a28fb3a3062dcb33bb3c45302447fce5c4288b7c7f5b03",
+                "exchangeAddress": "0x35dd2932454449b14cee11a94d3674a936d5d7b2"
+            }
+        ];
         const queryParams = new Uri(window.location.search);
         const renderOptionsDefaults = {
             liquiditySource: 'https://api.radarrelay.com/0x/v2/',
@@ -57,7 +75,7 @@
         }
         const liquiditySourceOverride = queryParams.getQueryParamValue('liquiditySource');
         const renderOptionsOverrides = {
-            liquiditySource: liquiditySourceOverride === 'provided' ? [providedOrder] : liquiditySourceOverride,
+            liquiditySource: liquiditySourceOverride === 'provided' ? providedOrders : liquiditySourceOverride,
             assetData: queryParams.getQueryParamValue('assetData'),
             networkId: +queryParams.getQueryParamValue('networkId') || undefined,
             defaultAssetBuyAmount: +queryParams.getQueryParamValue('defaultAssetBuyAmount') || undefined,
-- 
cgit v1.2.3


From 17f024056a56ae1b67a3a674f24460172ae84d27 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 29 Oct 2018 15:50:54 -0700
Subject: chore: add changelog

---
 packages/asset-buyer/CHANGELOG.json | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'packages')

diff --git a/packages/asset-buyer/CHANGELOG.json b/packages/asset-buyer/CHANGELOG.json
index 5d6604ea9..ce4effa7e 100644
--- a/packages/asset-buyer/CHANGELOG.json
+++ b/packages/asset-buyer/CHANGELOG.json
@@ -5,6 +5,10 @@
             {
                 "note": "`getAssetBuyerForProvidedOrders` factory function now takes 3 args instead of 4",
                 "pr": 1187
+            },
+            {
+                "note": "No longer require that provided orders all have the same maker and taker asset data",
+                "pr": 1197
             }
         ]
     },
-- 
cgit v1.2.3


From a49fc27042f9797f7a035e5471e572b148679456 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 29 Oct 2018 16:49:13 -0700
Subject: Comment for warming up cache

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

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 87069bb6f..63c2c9072 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -80,6 +80,8 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
         // tslint:disable-next-line:no-floating-promises
         asyncData.fetchAndDispatchToStore(this._store);
         // tslint:disable-next-line:no-floating-promises
+        // warm up the gas price estimator cache just in case we can't
+        // grab the gas price estimate when submitting the transaction
         gasPriceEstimator.getFastAmountInWeiAsync();
         // tslint:disable-next-line:no-floating-promises
         this._flashErrorIfWrongNetwork();
-- 
cgit v1.2.3


From 274e4b3bcd1633e8fe78a33528d63b7567355f9e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 29 Oct 2018 16:53:18 -0700
Subject: Introduce constants for eth gas station and coinbase

---
 packages/instant/src/constants.ts                | 2 ++
 packages/instant/src/util/coinbase_api.ts        | 5 +++--
 packages/instant/src/util/gas_price_estimator.ts | 9 ++++-----
 3 files changed, 9 insertions(+), 7 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 47cb2eaeb..424f35ecb 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -5,3 +5,5 @@ export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
 export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
 export const GWEI_IN_WEI = new BigNumber(1000000000);
 export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
+export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
+export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
diff --git a/packages/instant/src/util/coinbase_api.ts b/packages/instant/src/util/coinbase_api.ts
index 080421f98..32401e423 100644
--- a/packages/instant/src/util/coinbase_api.ts
+++ b/packages/instant/src/util/coinbase_api.ts
@@ -1,9 +1,10 @@
 import { BigNumber } from '@0x/utils';
 
-const baseEndpoint = 'https://api.coinbase.com/v2';
+import { COINBASE_API_BASE_URL } from '../constants';
+
 export const coinbaseApi = {
     getEthUsdPrice: async (): Promise<BigNumber> => {
-        const res = await fetch(`${baseEndpoint}/prices/ETH-USD/buy`);
+        const res = await fetch(`${COINBASE_API_BASE_URL}/prices/ETH-USD/buy`);
         const resJson = await res.json();
         return new BigNumber(resJson.data.amount);
     },
diff --git a/packages/instant/src/util/gas_price_estimator.ts b/packages/instant/src/util/gas_price_estimator.ts
index 9eccfe510..818bf6f92 100644
--- a/packages/instant/src/util/gas_price_estimator.ts
+++ b/packages/instant/src/util/gas_price_estimator.ts
@@ -1,8 +1,8 @@
 import { BigNumber } from '@0x/utils';
 
-import { DEFAULT_GAS_PRICE } from '../constants';
+import { DEFAULT_GAS_PRICE, ETH_GAS_STATION_API_BASE_URL } from '../constants';
 
-interface GasStationResult {
+interface EthGasStationResult {
     average: number;
     fastestWait: number;
     fastWait: number;
@@ -16,10 +16,9 @@ interface GasStationResult {
     safeLow: number;
 }
 
-const endpointUrl = 'https://ethgasstation.info/json/ethgasAPI.json';
 const fetchFastAmountInWei = async () => {
-    const res = await fetch(endpointUrl);
-    const gasInfo = (await res.json()) as GasStationResult;
+    const res = await fetch(`${ETH_GAS_STATION_API_BASE_URL}/json/ethgasAPI.json`);
+    const gasInfo = (await res.json()) as EthGasStationResult;
     const gasPriceInGwei = new BigNumber(gasInfo.fast / 10);
     return gasPriceInGwei.mul(1000000000);
 };
-- 
cgit v1.2.3


From 475698ed92dc6310591ec9d0653eaa931d7e03f6 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 29 Oct 2018 17:02:46 -0700
Subject: feat: add basic panel component and other small improvements

---
 .../instant/src/components/instant_heading.tsx     |  8 +++----
 packages/instant/src/components/panel.tsx          | 27 ++++++++++++++++++++++
 packages/instant/src/components/ui/index.ts        |  2 ++
 .../src/components/zero_ex_instant_container.tsx   |  5 ++--
 packages/instant/src/style/z_index.ts              |  5 ++++
 5 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 packages/instant/src/components/panel.tsx
 create mode 100644 packages/instant/src/style/z_index.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 1ef276ff3..81aa62a77 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -8,9 +8,7 @@ import { AsyncProcessState, OrderProcessState, OrderState } from '../types';
 import { format } from '../util/format';
 
 import { AmountPlaceholder } from './amount_placeholder';
-import { Container, Flex, Text } from './ui';
-import { Icon } from './ui/icon';
-import { Spinner } from './ui/spinner';
+import { Container, Flex, Icon, Spinner, Text } from './ui';
 
 export interface InstantHeadingProps {
     selectedAssetAmount?: BigNumber;
@@ -72,11 +70,11 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         const processState = this.props.buyOrderState.processState;
 
         if (processState === OrderProcessState.FAILURE) {
-            return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
+            return <Icon icon="failed" width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
         } else if (processState === OrderProcessState.PROCESSING) {
             return <Spinner widthPx={ICON_HEIGHT} heightPx={ICON_HEIGHT} />;
         } else if (processState === OrderProcessState.SUCCESS) {
-            return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
+            return <Icon icon="success" width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
         }
         return undefined;
     }
diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx
new file mode 100644
index 000000000..bb16ed9b1
--- /dev/null
+++ b/packages/instant/src/components/panel.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+import { zIndex } from '../style/z_index';
+
+import { Button, Container, Text } from './ui';
+
+export interface PanelProps {
+    onClose?: () => void;
+}
+
+export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
+    <Container
+        backgroundColor={ColorOption.white}
+        position="absolute"
+        top="0px"
+        left="0px"
+        width="100%"
+        height="100%"
+        zIndex={zIndex.panel}
+    >
+        <Button onClick={onClose}>
+            <Text fontColor={ColorOption.white}>Close </Text>
+        </Button>
+        {children}
+    </Container>
+);
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index bf5f6c700..7cfee2491 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -3,3 +3,5 @@ export { Button } from './button';
 export { Flex } from './flex';
 export { Container } from './container';
 export { Input } from './input';
+export { Icon } from './icon';
+export { Spinner } from './spinner';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index ff19351ff..ded0d075e 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -6,6 +6,7 @@ import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 
 import { ColorOption } from '../style/theme';
+import { zIndex } from '../style/z_index';
 
 import { Container, Flex } from './ui';
 
@@ -13,11 +14,11 @@ export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
     <Container width="350px">
-        <Container zIndex={1} position="relative">
+        <Container zIndex={zIndex.errorPopup} position="relative">
             <LatestError />
         </Container>
         <Container
-            zIndex={2}
+            zIndex={zIndex.mainContainer}
             position="relative"
             backgroundColor={ColorOption.white}
             borderRadius="3px"
diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts
new file mode 100644
index 000000000..727a5189d
--- /dev/null
+++ b/packages/instant/src/style/z_index.ts
@@ -0,0 +1,5 @@
+export const zIndex = {
+    errorPopup: 1,
+    mainContainer: 2,
+    panel: 3,
+};
-- 
cgit v1.2.3


From 30454fe46746b8c1caf47cb35f39b46d0749a224 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 29 Oct 2018 17:11:02 -0700
Subject: async suffix and use polyfill fetch util

---
 packages/instant/src/util/gas_price_estimator.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/gas_price_estimator.ts b/packages/instant/src/util/gas_price_estimator.ts
index 818bf6f92..33eeb932d 100644
--- a/packages/instant/src/util/gas_price_estimator.ts
+++ b/packages/instant/src/util/gas_price_estimator.ts
@@ -1,4 +1,4 @@
-import { BigNumber } from '@0x/utils';
+import { BigNumber, fetchAsync } from '@0x/utils';
 
 import { DEFAULT_GAS_PRICE, ETH_GAS_STATION_API_BASE_URL } from '../constants';
 
@@ -16,8 +16,8 @@ interface EthGasStationResult {
     safeLow: number;
 }
 
-const fetchFastAmountInWei = async () => {
-    const res = await fetch(`${ETH_GAS_STATION_API_BASE_URL}/json/ethgasAPI.json`);
+const fetchFastAmountInWeiAsync = async () => {
+    const res = await fetchAsync(`${ETH_GAS_STATION_API_BASE_URL}/json/ethgasAPI.json`);
     const gasInfo = (await res.json()) as EthGasStationResult;
     const gasPriceInGwei = new BigNumber(gasInfo.fast / 10);
     return gasPriceInGwei.mul(1000000000);
@@ -28,7 +28,7 @@ export class GasPriceEstimator {
     public async getFastAmountInWeiAsync(): Promise<BigNumber> {
         let fetchedAmount: BigNumber | undefined;
         try {
-            fetchedAmount = await fetchFastAmountInWei();
+            fetchedAmount = await fetchFastAmountInWeiAsync();
         } catch {
             fetchedAmount = undefined;
         }
-- 
cgit v1.2.3


From 2ad2644b6bcb3c1f4da5891d79856af46e808eab Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 29 Oct 2018 17:11:15 -0700
Subject: Use polyfilled fetch from utils

---
 packages/instant/src/util/coinbase_api.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/coinbase_api.ts b/packages/instant/src/util/coinbase_api.ts
index 32401e423..faac8d82d 100644
--- a/packages/instant/src/util/coinbase_api.ts
+++ b/packages/instant/src/util/coinbase_api.ts
@@ -1,10 +1,10 @@
-import { BigNumber } from '@0x/utils';
+import { BigNumber, fetchAsync } from '@0x/utils';
 
 import { COINBASE_API_BASE_URL } from '../constants';
 
 export const coinbaseApi = {
     getEthUsdPrice: async (): Promise<BigNumber> => {
-        const res = await fetch(`${COINBASE_API_BASE_URL}/prices/ETH-USD/buy`);
+        const res = await fetchAsync(`${COINBASE_API_BASE_URL}/prices/ETH-USD/buy`);
         const resJson = await res.json();
         return new BigNumber(resJson.data.amount);
     },
-- 
cgit v1.2.3


From 09ee7d84f70418e128a445bf3a11b813ac1c7d2e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 29 Oct 2018 17:17:04 -0700
Subject: Add comment and use constant

---
 packages/instant/src/util/gas_price_estimator.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/gas_price_estimator.ts b/packages/instant/src/util/gas_price_estimator.ts
index 33eeb932d..336c4a3fa 100644
--- a/packages/instant/src/util/gas_price_estimator.ts
+++ b/packages/instant/src/util/gas_price_estimator.ts
@@ -1,6 +1,6 @@
 import { BigNumber, fetchAsync } from '@0x/utils';
 
-import { DEFAULT_GAS_PRICE, ETH_GAS_STATION_API_BASE_URL } from '../constants';
+import { DEFAULT_GAS_PRICE, ETH_GAS_STATION_API_BASE_URL, GWEI_IN_WEI } from '../constants';
 
 interface EthGasStationResult {
     average: number;
@@ -19,8 +19,9 @@ interface EthGasStationResult {
 const fetchFastAmountInWeiAsync = async () => {
     const res = await fetchAsync(`${ETH_GAS_STATION_API_BASE_URL}/json/ethgasAPI.json`);
     const gasInfo = (await res.json()) as EthGasStationResult;
+    // Eth Gas Station result is gwei * 10
     const gasPriceInGwei = new BigNumber(gasInfo.fast / 10);
-    return gasPriceInGwei.mul(1000000000);
+    return gasPriceInGwei.mul(GWEI_IN_WEI);
 };
 
 export class GasPriceEstimator {
-- 
cgit v1.2.3


From 5901ee7e963a4413f49fffdd9477085229e7623f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 29 Oct 2018 17:18:56 -0700
Subject: Move tslint disable line

---
 packages/instant/src/components/zero_ex_instant.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 63c2c9072..d54dfc153 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -79,10 +79,12 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
     public componentDidMount(): void {
         // tslint:disable-next-line:no-floating-promises
         asyncData.fetchAndDispatchToStore(this._store);
-        // tslint:disable-next-line:no-floating-promises
+
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
+        // tslint:disable-next-line:no-floating-promises
         gasPriceEstimator.getFastAmountInWeiAsync();
+
         // tslint:disable-next-line:no-floating-promises
         this._flashErrorIfWrongNetwork();
     }
-- 
cgit v1.2.3


From 4cba70f32e4300cea7396f08687f2e53a7728e68 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 29 Oct 2018 17:48:17 -0700
Subject: feat: add chevron icon and add it to asset amount input

---
 .../instant/src/components/instant_heading.tsx     |  5 +++-
 packages/instant/src/components/ui/icon.tsx        | 28 ++++++++++++++++++----
 2 files changed, 27 insertions(+), 6 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 81aa62a77..00c45ba3a 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -21,7 +21,7 @@ export interface InstantHeadingProps {
 const PLACEHOLDER_COLOR = ColorOption.white;
 const ICON_WIDTH = 34;
 const ICON_HEIGHT = 34;
-const ICON_COLOR = ColorOption.white;
+const ICON_COLOR = 'white';
 
 export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     public render(): React.ReactNode {
@@ -48,6 +48,9 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 <Flex direction="row" justify="space-between">
                     <Flex height="60px">
                         <SelectedERC20AssetAmountInput startingFontSizePx={38} />
+                        <Container marginLeft="5px">
+                            <Icon icon="chevron" width={12} />
+                        </Container>
                     </Flex>
                     <Flex direction="column" justify="space-between">
                         {iconOrAmounts}
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 7373c3acd..61b382760 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -1,17 +1,21 @@
 import * as React from 'react';
 
-import { ColorOption } from '../../style/theme';
-
 type svgRule = 'evenodd' | 'nonzero' | 'inherit';
 interface IconInfo {
     viewBox: string;
+    path: string;
     fillRule?: svgRule;
     clipRule?: svgRule;
-    path: string;
+    stroke?: string;
+    strokeOpacity?: number;
+    strokeWidth?: number;
+    strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
 }
 interface IconInfoMapping {
     failed: IconInfo;
     success: IconInfo;
+    chevron: IconInfo;
 }
 const ICONS: IconInfoMapping = {
     failed: {
@@ -28,12 +32,21 @@ const ICONS: IconInfoMapping = {
         path:
             'M17 34C26.3887 34 34 26.3888 34 17C34 7.61121 26.3887 0 17 0C7.61133 0 0 7.61121 0 17C0 26.3888 7.61133 34 17 34ZM25.7539 13.0977C26.2969 12.4718 26.2295 11.5244 25.6035 10.9817C24.9775 10.439 24.0303 10.5063 23.4878 11.1323L15.731 20.0771L12.3936 16.7438C11.8071 16.1583 10.8574 16.1589 10.272 16.7451C9.68652 17.3313 9.6875 18.281 10.2734 18.8665L14.75 23.3373L15.8887 24.4746L16.9434 23.2587L25.7539 13.0977Z',
     },
+    chevron: {
+        viewBox: '0 0 12 7',
+        path: 'M11 1L6 6L1 1',
+        stroke: 'white',
+        strokeOpacity: 0.5,
+        strokeWidth: 1.5,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+    },
 };
 
 export interface IconProps {
     width: number;
-    height: number;
-    color: ColorOption;
+    height?: number;
+    color?: string;
     icon: keyof IconInfoMapping;
 }
 export const Icon: React.SFC<IconProps> = props => {
@@ -52,6 +65,11 @@ export const Icon: React.SFC<IconProps> = props => {
                 fill={props.color}
                 fillRule={iconInfo.fillRule || 'nonzero'}
                 clipRule={iconInfo.clipRule || 'nonzero'}
+                stroke={iconInfo.stroke}
+                strokeOpacity={iconInfo.strokeOpacity}
+                strokeWidth={iconInfo.strokeWidth}
+                strokeLinecap={iconInfo.strokeLinecap}
+                strokeLinejoin={iconInfo.strokeLinejoin}
             />
         </svg>
     );
-- 
cgit v1.2.3


From d0a0af51306bf5e5b46fd8982c70b271212af42f Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 29 Oct 2018 18:37:23 -0700
Subject: feat: add 'Select Token' UI to asset amount input

---
 .../src/components/erc20_asset_amount_input.tsx    | 69 ++++++++++++++++++----
 .../instant/src/components/instant_heading.tsx     |  3 -
 packages/instant/src/components/ui/container.tsx   |  2 +
 packages/instant/src/components/ui/flex.tsx        |  4 +-
 4 files changed, 61 insertions(+), 17 deletions(-)

(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 5abb34c2f..4108fd0e8 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -8,13 +8,14 @@ import { BigNumberInput } from '../util/big_number_input';
 import { util } from '../util/util';
 
 import { ScalingAmountInput } from './scaling_amount_input';
-import { Container, Text } from './ui';
+import { Container, Flex, Icon, Text } from './ui';
 
 // Asset amounts only apply to ERC20 assets
 export interface ERC20AssetAmountInputProps {
     asset?: ERC20Asset;
     value?: BigNumberInput;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+    onSymbolClick: (asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
     isDisabled: boolean;
@@ -27,6 +28,7 @@ export interface ERC20AssetAmountInputState {
 export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
+        onSymbolClick: util.boundNoop,
         isDisabled: false,
     };
     constructor(props: ERC20AssetAmountInputProps) {
@@ -36,10 +38,18 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         };
     }
     public render(): React.ReactNode {
-        const { asset, onChange, ...rest } = this.props;
-        const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
+        const { asset } = this.props;
         return (
             <Container whiteSpace="nowrap">
+                {!_.isUndefined(asset) ? this._renderContentForAsset(asset) : this._renderBackupContent()}
+            </Container>
+        );
+    }
+    private readonly _renderContentForAsset = (asset: ERC20Asset): React.ReactNode => {
+        const { onChange, ...rest } = this.props;
+        const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
+        return (
+            <React.Fragment>
                 <Container borderBottom={amountBorderBottom} display="inline-block">
                     <ScalingAmountInput
                         {...rest}
@@ -49,18 +59,50 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
                         onFontSizeChange={this._handleFontSizeChange}
                     />
                 </Container>
-                <Container display="inline-flex" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
-                    <Text
-                        fontSize={`${this.state.currentFontSizePx}px`}
-                        fontColor={ColorOption.white}
-                        textTransform="uppercase"
-                    >
-                        {assetUtils.formattedSymbolForAsset(asset)}
-                    </Text>
+                <Container
+                    cursor="pointer"
+                    display="inline-block"
+                    marginLeft="8px"
+                    title={assetUtils.bestNameForAsset(asset, undefined)}
+                >
+                    <Flex inline={true}>
+                        <Text
+                            fontSize={`${this.state.currentFontSizePx}px`}
+                            fontColor={ColorOption.white}
+                            textTransform="uppercase"
+                            onClick={this._handleSymbolClick}
+                        >
+                            {assetUtils.formattedSymbolForAsset(asset)}
+                        </Text>
+                        {this._renderChevronIcon()}
+                    </Flex>
                 </Container>
+            </React.Fragment>
+        );
+    };
+    private readonly _renderBackupContent = (): React.ReactNode => {
+        return (
+            <Flex>
+                <Text
+                    fontSize="30px"
+                    fontColor={ColorOption.white}
+                    opacity={0.7}
+                    fontWeight="500"
+                    onClick={this._handleSymbolClick}
+                >
+                    Select Token
+                </Text>
+                {this._renderChevronIcon()}
+            </Flex>
+        );
+    };
+    private readonly _renderChevronIcon = (): React.ReactNode => {
+        return (
+            <Container marginLeft="5px" onClick={this._handleSymbolClick}>
+                <Icon icon="chevron" width={12} />
             </Container>
         );
-    }
+    };
     private readonly _handleChange = (value?: BigNumberInput): void => {
         this.props.onChange(value, this.props.asset);
     };
@@ -69,6 +111,9 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             currentFontSizePx: fontSizePx,
         });
     };
+    private readonly _handleSymbolClick = () => {
+        this.props.onSymbolClick(this.props.asset);
+    };
     // For assets with symbols of different length,
     // start scaling the input at different character lengths
     private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => {
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 00c45ba3a..0b41d44d7 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -48,9 +48,6 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 <Flex direction="row" justify="space-between">
                     <Flex height="60px">
                         <SelectedERC20AssetAmountInput startingFontSizePx={38} />
-                        <Container marginLeft="5px">
-                            <Icon icon="chevron" width={12} />
-                        </Container>
                     </Flex>
                     <Flex direction="column" justify="space-between">
                         {iconOrAmounts}
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 76b570de7..b6842b294 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -28,6 +28,7 @@ export interface ContainerProps {
     zIndex?: number;
     whiteSpace?: string;
     opacity?: number;
+    cursor?: string;
 }
 
 export const Container =
@@ -57,6 +58,7 @@ export const Container =
     ${props => cssRuleIfExists(props, 'z-index')}
     ${props => cssRuleIfExists(props, 'white-space')}
     ${props => cssRuleIfExists(props, 'opacity')}
+    ${props => cssRuleIfExists(props, 'cursor')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 5fa3fc95b..29c6511bb 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -9,14 +9,14 @@ export interface FlexProps {
     width?: string;
     height?: string;
     backgroundColor?: ColorOption;
-    className?: string;
+    inline?: boolean;
 }
 
 export const Flex =
     styled.div <
     FlexProps >
     `
-    display: flex;
+    display: ${props => (props.inline ? 'inline-flex' : 'flex')};
     flex-direction: ${props => props.direction};
     flex-wrap: ${props => props.flexWrap};
     justify-content: ${props => props.justify};
-- 
cgit v1.2.3


From f9eba65aee8e71de609801e640de4101af9645e6 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebnaoff@gmail.com>
Date: Mon, 29 Oct 2018 20:06:31 -0700
Subject: return estimated state

---
 packages/instant/src/components/buy_button.tsx      |  4 ++--
 packages/instant/src/components/zero_ex_instant.tsx |  2 +-
 packages/instant/src/types.ts                       |  1 +
 packages/instant/src/util/gas_price_estimator.ts    | 19 +++++++++++++------
 4 files changed, 17 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 93bd8e635..36cc32dbc 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -57,9 +57,9 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         }
 
         let txHash: string | undefined;
-        const gasPrice = await gasPriceEstimator.getFastAmountInWeiAsync();
+        const gasInfo = await gasPriceEstimator.getGasInfoAsync();
         try {
-            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress, gasPrice });
+            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress, gasPrice: gasInfo.gasPriceInWei });
         } catch (e) {
             if (e instanceof Error) {
                 if (e.message === AssetBuyerError.SignatureRequestDenied) {
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index d54dfc153..365c1610f 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -83,7 +83,7 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
         // tslint:disable-next-line:no-floating-promises
-        gasPriceEstimator.getFastAmountInWeiAsync();
+        gasPriceEstimator.getGasInfoAsync();
 
         // tslint:disable-next-line:no-floating-promises
         this._flashErrorIfWrongNetwork();
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 336465e43..4631c9cae 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -22,6 +22,7 @@ interface OrderStatePreTx {
 interface OrderStatePostTx {
     processState: OrderProcessState.PROCESSING | OrderProcessState.SUCCESS | OrderProcessState.FAILURE;
     txHash: string;
+    estimatedTimeMs?: number;
 }
 export type OrderState = OrderStatePreTx | OrderStatePostTx;
 
diff --git a/packages/instant/src/util/gas_price_estimator.ts b/packages/instant/src/util/gas_price_estimator.ts
index 336c4a3fa..0552ccde1 100644
--- a/packages/instant/src/util/gas_price_estimator.ts
+++ b/packages/instant/src/util/gas_price_estimator.ts
@@ -16,18 +16,25 @@ interface EthGasStationResult {
     safeLow: number;
 }
 
-const fetchFastAmountInWeiAsync = async () => {
+interface GasInfo {
+    gasPriceInWei: BigNumber;
+    estimatedTimeMs?: number;
+}
+
+const fetchFastAmountInWeiAsync = async (): Promise<GasInfo> => {
     const res = await fetchAsync(`${ETH_GAS_STATION_API_BASE_URL}/json/ethgasAPI.json`);
     const gasInfo = (await res.json()) as EthGasStationResult;
     // Eth Gas Station result is gwei * 10
     const gasPriceInGwei = new BigNumber(gasInfo.fast / 10);
-    return gasPriceInGwei.mul(GWEI_IN_WEI);
+    // Time is in minutes
+    const estimatedTimeMs = gasInfo.fastWait * 60 * 1000; // Minutes to MS
+    return { gasPriceInWei: gasPriceInGwei.mul(GWEI_IN_WEI), estimatedTimeMs };
 };
 
 export class GasPriceEstimator {
-    private _lastFetched?: BigNumber;
-    public async getFastAmountInWeiAsync(): Promise<BigNumber> {
-        let fetchedAmount: BigNumber | undefined;
+    private _lastFetched?: GasInfo;
+    public async getGasInfoAsync(): Promise<GasInfo> {
+        let fetchedAmount: GasInfo | undefined;
         try {
             fetchedAmount = await fetchFastAmountInWeiAsync();
         } catch {
@@ -38,7 +45,7 @@ export class GasPriceEstimator {
             this._lastFetched = fetchedAmount;
         }
 
-        return fetchedAmount || this._lastFetched || DEFAULT_GAS_PRICE;
+        return fetchedAmount || this._lastFetched || { gasPriceInWei: DEFAULT_GAS_PRICE, estimatedTimeMs: undefined };
     }
 }
 export const gasPriceEstimator = new GasPriceEstimator();
-- 
cgit v1.2.3


From 728f70f51b2fe4c5037e7b74a5dfb29f1f8ca4c9 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebnaoff@gmail.com>
Date: Mon, 29 Oct 2018 20:08:46 -0700
Subject: store estimated time in Ms on state

---
 packages/instant/src/components/buy_button.tsx                      | 4 ++--
 .../src/containers/selected_asset_buy_order_state_buttons.ts        | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 36cc32dbc..ec1010fe9 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -19,7 +19,7 @@ export interface BuyButtonProps {
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
 }
@@ -73,7 +73,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             throw e;
         }
 
-        this.props.onBuyProcessing(buyQuote, txHash);
+        this.props.onBuyProcessing(buyQuote, txHash, gasInfo.estimatedTimeMs);
         try {
             await web3Wrapper.awaitTransactionSuccessAsync(txHash);
         } catch (e) {
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 500d6b88a..3750e5219 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -21,7 +21,7 @@ interface ConnectedState {
 interface ConnectedDispatch {
     onValidationPending: (buyQuote: BuyQuote) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => void;
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
     onRetry: () => void;
@@ -59,8 +59,8 @@ const mapDispatchToProps = (
         const newOrderState: OrderState = { processState: OrderProcessState.VALIDATING };
         dispatch(actions.updateBuyOrderState(newOrderState));
     },
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => {
-        const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash };
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => {
+        const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash, estimatedTimeMs };
         dispatch(actions.updateBuyOrderState(newOrderState));
     },
     onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
-- 
cgit v1.2.3


From 25039a036c13336eba82904ecb53f6517286c0b5 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 10:18:00 -0700
Subject: WIP: Progress ticker with finishing

---
 packages/instant/src/constants.ts     |  1 +
 packages/instant/src/util/progress.ts | 89 +++++++++++++++++++++++++++++++++++
 2 files changed, 90 insertions(+)
 create mode 100644 packages/instant/src/util/progress.ts

(limited to 'packages')

diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 424f35ecb..a21de2a0f 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -7,3 +7,4 @@ export const GWEI_IN_WEI = new BigNumber(1000000000);
 export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
+export const PROGRESS_TICK_INTERVAL_MS = 100;
diff --git a/packages/instant/src/util/progress.ts b/packages/instant/src/util/progress.ts
new file mode 100644
index 000000000..33b1cc313
--- /dev/null
+++ b/packages/instant/src/util/progress.ts
@@ -0,0 +1,89 @@
+import { Dispatch } from 'redux';
+
+import { PROGRESS_TICK_INTERVAL_MS } from '../constants';
+import { Action, actions } from '../redux/actions';
+
+const curTimeUnix = () => {
+    return new Date().getTime();
+};
+
+enum TickingState {
+    Ticking,
+    Finishing,
+}
+interface TickingNormalState {
+    state: TickingState.Ticking;
+}
+interface TickingFinishingState {
+    state: TickingState.Finishing;
+    increasePercentageEveryTick: number;
+}
+type TickingStatus = TickingNormalState | TickingFinishingState;
+
+const TICKS_PER_SECOND = 1000 / PROGRESS_TICK_INTERVAL_MS;
+export class Progress {
+    private _startTimeUnix: number;
+    private _expectedTimeMs: number;
+    private _intervalId: number;
+    private _percentageDone: number;
+    private _tickingStatus: TickingStatus;
+
+    // TODO: take in dispatch
+    constructor(expectedTimeMs: number) {
+        const curTime = curTimeUnix();
+        this._startTimeUnix = curTime;
+        this._expectedTimeMs = expectedTimeMs;
+        this._percentageDone = 0;
+        this._intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS); // TODO: is bind necessary?
+        this._tickingStatus = { state: TickingState.Ticking };
+        // TODO: clear interval
+    }
+
+    public setFinishing(): void {
+        const percentLeft = 100 - this._percentageDone;
+        console.log('percentLeft', percentLeft);
+        const increasePercentageEveryTick = percentLeft / TICKS_PER_SECOND;
+        console.log('increase Tick', increasePercentageEveryTick);
+        this._tickingStatus = {
+            state: TickingState.Finishing,
+            increasePercentageEveryTick,
+        };
+    }
+
+    private _tick(): void {
+        const percentageDone =
+            this._tickingStatus.state === TickingState.Finishing
+                ? this._tickFinishing(this._tickingStatus)
+                : this._tickNormal();
+
+        // TODO: max 100
+
+        this._percentageDone = percentageDone;
+        console.log('percentageDone', this._percentageDone);
+        // TODO: max 95
+        if (percentageDone >= 100) {
+            this._clearInterval();
+        }
+        return;
+    }
+
+    // TODO: take param and move out
+    private _tickNormal(): number {
+        const elapsedTimeMs = curTimeUnix() - this._startTimeUnix;
+        // TODO: zero and negative check, use mins and maxs everywhere
+        const percentageDone = elapsedTimeMs / this._expectedTimeMs * 100;
+        return percentageDone;
+    }
+
+    private _tickFinishing(finishingState: TickingFinishingState): number {
+        return this._percentageDone + finishingState.increasePercentageEveryTick;
+    }
+
+    private _clearInterval(): void {
+        return window.clearInterval(this._intervalId);
+    }
+
+    // reset function
+
+    // end function
+}
-- 
cgit v1.2.3


From 37405038e8f377b65f4dc32b09932fb9ba38efc5 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 10:56:11 -0700
Subject: Stall at 95 percent

---
 packages/instant/src/constants.ts     |  1 +
 packages/instant/src/util/progress.ts | 72 ++++++++++++++++++++++-------------
 2 files changed, 46 insertions(+), 27 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index a21de2a0f..e099044df 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -8,3 +8,4 @@ export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
 export const PROGRESS_TICK_INTERVAL_MS = 100;
+export const PROGRESS_STALL_AT_PERCENTAGE = 95;
diff --git a/packages/instant/src/util/progress.ts b/packages/instant/src/util/progress.ts
index 33b1cc313..5649a78c8 100644
--- a/packages/instant/src/util/progress.ts
+++ b/packages/instant/src/util/progress.ts
@@ -1,6 +1,7 @@
+import * as _ from 'lodash';
 import { Dispatch } from 'redux';
 
-import { PROGRESS_TICK_INTERVAL_MS } from '../constants';
+import { PROGRESS_STALL_AT_PERCENTAGE, PROGRESS_TICK_INTERVAL_MS } from '../constants';
 import { Action, actions } from '../redux/actions';
 
 const curTimeUnix = () => {
@@ -8,42 +9,51 @@ const curTimeUnix = () => {
 };
 
 enum TickingState {
-    Ticking,
+    None,
+    Running,
     Finishing,
 }
-interface TickingNormalState {
-    state: TickingState.Ticking;
+interface TickingNoneState {
+    state: TickingState.None;
 }
-interface TickingFinishingState {
+interface TickingRunningStatus {
+    state: TickingState.Running;
+}
+interface TickingFinishingStatus {
     state: TickingState.Finishing;
     increasePercentageEveryTick: number;
 }
-type TickingStatus = TickingNormalState | TickingFinishingState;
+type TickingStatus = TickingNoneState | TickingRunningStatus | TickingFinishingStatus;
 
 const TICKS_PER_SECOND = 1000 / PROGRESS_TICK_INTERVAL_MS;
 export class Progress {
-    private _startTimeUnix: number;
-    private _expectedTimeMs: number;
-    private _intervalId: number;
+    private _startTimeUnix?: number;
+    private _expectedTimeMs?: number;
+    private _intervalId?: number;
     private _percentageDone: number;
     private _tickingStatus: TickingStatus;
 
-    // TODO: take in dispatch
-    constructor(expectedTimeMs: number) {
-        const curTime = curTimeUnix();
-        this._startTimeUnix = curTime;
-        this._expectedTimeMs = expectedTimeMs;
+    constructor() {
+        this._startTimeUnix = undefined;
+        this._expectedTimeMs = undefined;
         this._percentageDone = 0;
-        this._intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS); // TODO: is bind necessary?
-        this._tickingStatus = { state: TickingState.Ticking };
+        this._intervalId = undefined;
+        this._tickingStatus = { state: TickingState.None };
         // TODO: clear interval
     }
 
+    public beginRunning(expectedTimeMs: number): void {
+        this._clearTimer();
+        this._startTimeUnix = curTimeUnix();
+        this._expectedTimeMs = expectedTimeMs;
+        this._percentageDone = 0;
+        this._intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS);
+        this._tickingStatus = { state: TickingState.Running };
+    }
+
     public setFinishing(): void {
         const percentLeft = 100 - this._percentageDone;
-        console.log('percentLeft', percentLeft);
         const increasePercentageEveryTick = percentLeft / TICKS_PER_SECOND;
-        console.log('increase Tick', increasePercentageEveryTick);
         this._tickingStatus = {
             state: TickingState.Finishing,
             increasePercentageEveryTick,
@@ -51,31 +61,39 @@ export class Progress {
     }
 
     private _tick(): void {
-        const percentageDone =
+        const rawPercentageDone =
             this._tickingStatus.state === TickingState.Finishing
                 ? this._tickFinishing(this._tickingStatus)
                 : this._tickNormal();
 
-        // TODO: max 100
-
+        const maxPercentage = this._tickingStatus.state === TickingState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE;
+        const percentageDone = Math.min(rawPercentageDone, maxPercentage);
         this._percentageDone = percentageDone;
         console.log('percentageDone', this._percentageDone);
-        // TODO: max 95
         if (percentageDone >= 100) {
-            this._clearInterval();
+            this._clearTimer();
         }
         return;
     }
 
-    // TODO: take param and move out
+    private _clearTimer(): void {
+        if (this._intervalId) {
+            window.clearTimeout(this._intervalId);
+        }
+    }
+
     private _tickNormal(): number {
+        if (_.isUndefined(this._startTimeUnix) || _.isUndefined(this._expectedTimeMs)) {
+            throw new Error('Cant tick, missing var');
+        }
+
         const elapsedTimeMs = curTimeUnix() - this._startTimeUnix;
-        // TODO: zero and negative check, use mins and maxs everywhere
-        const percentageDone = elapsedTimeMs / this._expectedTimeMs * 100;
+        const safeElapsedTimeMs = Math.max(elapsedTimeMs, 1);
+        const percentageDone = safeElapsedTimeMs / this._expectedTimeMs * 100;
         return percentageDone;
     }
 
-    private _tickFinishing(finishingState: TickingFinishingState): number {
+    private _tickFinishing(finishingState: TickingFinishingStatus): number {
         return this._percentageDone + finishingState.increasePercentageEveryTick;
     }
 
-- 
cgit v1.2.3


From 9a0595a607af2d5d33ea68dae01dce1f85d13680 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 10:58:39 -0700
Subject: Rename functions and get rid of old unused function

---
 packages/instant/src/util/progress.ts | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/progress.ts b/packages/instant/src/util/progress.ts
index 5649a78c8..3c328f2f1 100644
--- a/packages/instant/src/util/progress.ts
+++ b/packages/instant/src/util/progress.ts
@@ -63,8 +63,8 @@ export class Progress {
     private _tick(): void {
         const rawPercentageDone =
             this._tickingStatus.state === TickingState.Finishing
-                ? this._tickFinishing(this._tickingStatus)
-                : this._tickNormal();
+                ? this._getNewPercentageFinishing(this._tickingStatus)
+                : this._getNewPercentageNormal();
 
         const maxPercentage = this._tickingStatus.state === TickingState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE;
         const percentageDone = Math.min(rawPercentageDone, maxPercentage);
@@ -82,7 +82,7 @@ export class Progress {
         }
     }
 
-    private _tickNormal(): number {
+    private _getNewPercentageNormal(): number {
         if (_.isUndefined(this._startTimeUnix) || _.isUndefined(this._expectedTimeMs)) {
             throw new Error('Cant tick, missing var');
         }
@@ -93,15 +93,7 @@ export class Progress {
         return percentageDone;
     }
 
-    private _tickFinishing(finishingState: TickingFinishingStatus): number {
+    private _getNewPercentageFinishing(finishingState: TickingFinishingStatus): number {
         return this._percentageDone + finishingState.increasePercentageEveryTick;
     }
-
-    private _clearInterval(): void {
-        return window.clearInterval(this._intervalId);
-    }
-
-    // reset function
-
-    // end function
 }
-- 
cgit v1.2.3


From 12dad41143c50d858edbb665d4795142a6339dd7 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 10:58:47 -0700
Subject: Remove old TODO

---
 packages/instant/src/util/progress.ts | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/progress.ts b/packages/instant/src/util/progress.ts
index 3c328f2f1..5cb6a6de9 100644
--- a/packages/instant/src/util/progress.ts
+++ b/packages/instant/src/util/progress.ts
@@ -39,7 +39,6 @@ export class Progress {
         this._percentageDone = 0;
         this._intervalId = undefined;
         this._tickingStatus = { state: TickingState.None };
-        // TODO: clear interval
     }
 
     public beginRunning(expectedTimeMs: number): void {
-- 
cgit v1.2.3


From a918e7099dbd4351150d5d6852cbd57d1b1b3875 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 24 Oct 2018 11:42:31 -0700
Subject: fix(website): prepare website for breaking MetaMask change for eip
 1102

---
 packages/website/ts/blockchain.ts | 127 ++++++++++++++++++++------------------
 packages/website/ts/types.ts      |   8 ---
 2 files changed, 66 insertions(+), 69 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 62e16dd1d..b43c41739 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -20,7 +20,7 @@ import {
     Web3ProviderEngine,
 } from '@0x/subproviders';
 import { SignedOrder, Token as ZeroExToken } from '@0x/types';
-import { BigNumber, intervalUtils, logUtils, promisify } from '@0x/utils';
+import { BigNumber, intervalUtils, logUtils } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import { BlockParam, LogWithDecodedArgs, Provider, TransactionReceiptWithDecodedLogs } from 'ethereum-types';
 import * as _ from 'lodash';
@@ -38,9 +38,9 @@ import {
     BlockchainErrs,
     ContractInstance,
     Fill,
+    InjectedProvider,
     InjectedProviderObservable,
     InjectedProviderUpdate,
-    InjectedWeb3,
     Providers,
     ProviderType,
     Side,
@@ -83,6 +83,7 @@ export class Blockchain {
     private _ledgerSubprovider: LedgerSubprovider;
     private _defaultGasPrice: BigNumber;
     private _watchGasPriceIntervalId: NodeJS.Timer;
+    private _injectedProviderIfExists?: InjectedProvider;
     private static _getNameGivenProvider(provider: Provider): string {
         const providerType = utils.getProviderType(provider);
         const providerNameIfExists = providerToName[providerType];
@@ -91,48 +92,12 @@ export class Blockchain {
         }
         return providerNameIfExists;
     }
-    private static _getInjectedWeb3(): InjectedWeb3 {
-        const injectedWeb3IfExists = (window as any).web3;
-        // Our core assumptions about the injected web3 object is that it has the following
-        // properties and methods.
-        if (
-            _.isUndefined(injectedWeb3IfExists) ||
-            _.isUndefined(injectedWeb3IfExists.version) ||
-            _.isUndefined(injectedWeb3IfExists.version.getNetwork) ||
-            _.isUndefined(injectedWeb3IfExists.currentProvider)
-        ) {
-            return undefined;
-        }
-        return injectedWeb3IfExists;
-    }
-    private static async _getInjectedWeb3ProviderNetworkIdIfExistsAsync(): Promise<number | undefined> {
-        // Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in
-        // order to properly instantiate the web3Wrapper. Since we must use the async call, we cannot
-        // retrieve it from within the web3Wrapper constructor. This is and should remain the only
-        // call to a web3 instance outside of web3Wrapper in the entire dapp.
-        // In addition, if the user has an injectedWeb3 instance that is disconnected from a backing
-        // Ethereum node, this call will throw. We need to handle this case gracefully
-        const injectedWeb3IfExists = Blockchain._getInjectedWeb3();
-        let networkIdIfExists: number;
-        if (!_.isUndefined(injectedWeb3IfExists)) {
-            try {
-                networkIdIfExists = _.parseInt(
-                    await promisify<string>(
-                        injectedWeb3IfExists.version.getNetwork.bind(injectedWeb3IfExists.version),
-                    )(),
-                );
-            } catch (err) {
-                // Ignore error and proceed with networkId undefined
-            }
-        }
-        return networkIdIfExists;
-    }
     private static async _getProviderAsync(
-        injectedWeb3: InjectedWeb3,
-        networkIdIfExists: number,
+        injectedProviderIfExists?: InjectedProvider,
+        networkIdIfExists?: number,
         shouldUserLedgerProvider: boolean = false,
     ): Promise<[Provider, LedgerSubprovider | undefined]> {
-        const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
+        const doesInjectedProviderExist = !_.isUndefined(injectedProviderIfExists);
         const isNetworkIdAvailable = !_.isUndefined(networkIdIfExists);
         const publicNodeUrlsIfExistsForNetworkId = configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists];
         const isPublicNodeAvailableForNetworkId = !_.isUndefined(publicNodeUrlsIfExistsForNetworkId);
@@ -156,16 +121,16 @@ export class Blockchain {
             provider.addProvider(new RedundantSubprovider(rpcSubproviders));
             provider.start();
             return [provider, ledgerSubprovider];
-        } else if (doesInjectedWeb3Exist && isPublicNodeAvailableForNetworkId) {
+        } else if (doesInjectedProviderExist && isPublicNodeAvailableForNetworkId) {
             // We catch all requests involving a users account and send it to the injectedWeb3
             // instance. All other requests go to the public hosted node.
             const provider = new Web3ProviderEngine();
-            const providerName = this._getNameGivenProvider(injectedWeb3.currentProvider);
+            const providerName = this._getNameGivenProvider(injectedProviderIfExists);
             // Wrap Metamask in a compatability wrapper MetamaskSubprovider (to handle inconsistencies)
             const signerSubprovider =
                 providerName === constants.PROVIDER_NAME_METAMASK
-                    ? new MetamaskSubprovider(injectedWeb3.currentProvider)
-                    : new SignerSubprovider(injectedWeb3.currentProvider);
+                    ? new MetamaskSubprovider(injectedProviderIfExists)
+                    : new SignerSubprovider(injectedProviderIfExists);
             provider.addProvider(signerSubprovider);
             provider.addProvider(new FilterSubprovider());
             const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => {
@@ -174,9 +139,9 @@ export class Blockchain {
             provider.addProvider(new RedundantSubprovider(rpcSubproviders));
             provider.start();
             return [provider, undefined];
-        } else if (doesInjectedWeb3Exist) {
+        } else if (doesInjectedProviderExist) {
             // Since no public node for this network, all requests go to injectedWeb3 instance
-            return [injectedWeb3.currentProvider, undefined];
+            return [injectedProviderIfExists, undefined];
         } else {
             // If no injectedWeb3 instance, all requests fallback to our public hosted mainnet/testnet node
             // We do this so that users can still browse the 0x Portal DApp even if they do not have web3
@@ -261,7 +226,7 @@ export class Blockchain {
         const shouldUserLedgerProvider = false;
         this._dispatcher.updateBlockchainIsLoaded(false);
         // We don't want to be out of sync with the network the injected provider declares.
-        const networkId = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync();
+        const networkId = await this._getInjectedProviderNetworkIdIfExistsAsync();
         await this._resetOrInitializeAsync(networkId, shouldPollUserAddress, shouldUserLedgerProvider);
     }
     public async setProxyAllowanceAsync(token: Token, amountInBaseUnits: BigNumber): Promise<void> {
@@ -611,6 +576,45 @@ export class Blockchain {
 
         this._dispatcher.updateBlockchainIsLoaded(true);
     }
+    private async _getInjectedProviderIfExistsAsync(): Promise<InjectedProvider | undefined> {
+        if (!_.isUndefined(this._injectedProviderIfExists)) {
+            return this._injectedProviderIfExists;
+        }
+        let injectedProviderIfExists = (window as any).ethereum;
+        if (!_.isUndefined(injectedProviderIfExists)) {
+            if (!_.isUndefined(injectedProviderIfExists.enable)) {
+                try {
+                    await injectedProviderIfExists.enable();
+                } catch (err) {
+                    errorReporter.report(err);
+                }
+            }
+        } else {
+            const injectedWeb3IfExists = (window as any).web3;
+            if (!_.isUndefined(injectedWeb3IfExists.currentProvider)) {
+                injectedProviderIfExists = injectedWeb3IfExists.currentProvider;
+            } else {
+                return undefined;
+            }
+        }
+        this._injectedProviderIfExists = injectedProviderIfExists;
+        return injectedProviderIfExists;
+    }
+    private async _getInjectedProviderNetworkIdIfExistsAsync(): Promise<number | undefined> {
+        // If the user has an injectedWeb3 instance that is disconnected from a backing
+        // Ethereum node, this call will throw. We need to handle this case gracefully
+        const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync();
+        let networkIdIfExists: number;
+        if (!_.isUndefined(injectedProviderIfExists)) {
+            try {
+                const injectedWeb3Wrapper = new Web3Wrapper(injectedProviderIfExists);
+                networkIdIfExists = await injectedWeb3Wrapper.getNetworkIdAsync();
+            } catch (err) {
+                // Ignore error and proceed with networkId undefined
+            }
+        }
+        return networkIdIfExists;
+    }
     private async _showEtherScanLinkAndAwaitTransactionMinedAsync(
         txHash: string,
     ): Promise<TransactionReceiptWithDecodedLogs> {
@@ -804,17 +808,17 @@ export class Blockchain {
     }
     private async _onPageLoadInitFireAndForgetAsync(): Promise<void> {
         await utils.onPageLoadPromise; // wait for page to load
-        const networkIdIfExists = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync();
+        const networkIdIfExists = await this._getInjectedProviderNetworkIdIfExistsAsync();
         this.networkId = !_.isUndefined(networkIdIfExists) ? networkIdIfExists : constants.NETWORK_ID_MAINNET;
-        const injectedWeb3IfExists = Blockchain._getInjectedWeb3();
-        if (!_.isUndefined(injectedWeb3IfExists) && !_.isUndefined(injectedWeb3IfExists.currentProvider)) {
-            const injectedProviderObservable = injectedWeb3IfExists.currentProvider.publicConfigStore;
+        const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync();
+        if (!_.isUndefined(injectedProviderIfExists)) {
+            const injectedProviderObservable = injectedProviderIfExists.publicConfigStore;
             if (!_.isUndefined(injectedProviderObservable) && _.isUndefined(this._injectedProviderObservable)) {
                 this._injectedProviderObservable = injectedProviderObservable;
                 this._injectedProviderObservable.subscribe(this._injectedProviderUpdateHandler);
             }
         }
-        this._updateProviderName(injectedWeb3IfExists);
+        this._updateProviderName(injectedProviderIfExists);
         const shouldPollUserAddress = true;
         const shouldUseLedgerProvider = false;
         this._startWatchingGasPrice();
@@ -851,12 +855,14 @@ export class Blockchain {
         }
         this._dispatcher.updateUserWeiBalance(undefined);
         this.networkId = networkId;
-        const injectedWeb3IfExists = Blockchain._getInjectedWeb3();
+        const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync();
         const [provider, ledgerSubproviderIfExists] = await Blockchain._getProviderAsync(
-            injectedWeb3IfExists,
+            injectedProviderIfExists,
             networkId,
             shouldUserLedgerProvider,
         );
+        this._web3Wrapper = new Web3Wrapper(provider);
+        this.networkId = await this._web3Wrapper.getNetworkIdAsync();
         if (!_.isUndefined(this._contractWrappers)) {
             this._contractWrappers.unsubscribeAll();
         }
@@ -867,7 +873,6 @@ export class Blockchain {
         if (!_.isUndefined(this._blockchainWatcher)) {
             this._blockchainWatcher.destroy();
         }
-        this._web3Wrapper = new Web3Wrapper(provider);
         this._blockchainWatcher = new BlockchainWatcher(this._dispatcher, this._web3Wrapper, shouldPollUserAddress);
         if (shouldUserLedgerProvider && !_.isUndefined(ledgerSubproviderIfExists)) {
             delete this._userAddressIfExists;
@@ -879,7 +884,7 @@ export class Blockchain {
             const userAddresses = await this._web3Wrapper.getAvailableAddressesAsync();
             this._userAddressIfExists = userAddresses[0];
             this._dispatcher.updateUserAddress(this._userAddressIfExists);
-            if (!_.isUndefined(injectedWeb3IfExists)) {
+            if (!_.isUndefined(injectedProviderIfExists)) {
                 this._dispatcher.updateProviderType(ProviderType.Injected);
             }
             await this.fetchTokenInformationAsync();
@@ -888,10 +893,10 @@ export class Blockchain {
         this._dispatcher.updateNetworkId(networkId);
         await this._rehydrateStoreWithContractEventsAsync();
     }
-    private _updateProviderName(injectedWeb3IfExists: InjectedWeb3): void {
-        const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3IfExists);
-        const providerName = doesInjectedWeb3Exist
-            ? Blockchain._getNameGivenProvider(injectedWeb3IfExists.currentProvider)
+    private _updateProviderName(injectedProviderIfExists?: InjectedProvider): void {
+        const doesInjectedProviderExist = !_.isUndefined(injectedProviderIfExists);
+        const providerName = doesInjectedProviderExist
+            ? Blockchain._getNameGivenProvider(injectedProviderIfExists)
             : constants.PROVIDER_NAME_PUBLIC;
         this._dispatcher.updateInjectedProviderName(providerName);
     }
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 22bfd2cb4..ce4b50a58 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -616,14 +616,6 @@ export interface InjectedProvider extends Provider {
     publicConfigStore?: InjectedProviderObservable;
 }
 
-// Minimal expected interface for an injected web3 object
-export interface InjectedWeb3 {
-    currentProvider: InjectedProvider;
-    version: {
-        getNetwork(cd: (err: Error, networkId: string) => void): void;
-    };
-}
-
 export interface TutorialInfo {
     iconUrl: string;
     description: string;
-- 
cgit v1.2.3


From 05b74ba1c8b10c356d396ce9a4834d053cd791b1 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 13:27:28 -0700
Subject: Dispatching progress

---
 packages/instant/src/components/progress_bar.tsx   | 17 ++++++++++
 .../src/components/zero_ex_instant_container.tsx   |  3 +-
 .../src/containers/selected_asset_progress_bar.tsx | 37 ++++++++++++++++++++++
 packages/instant/src/redux/actions.ts              |  3 ++
 packages/instant/src/redux/reducer.ts              |  7 ++++
 packages/instant/src/types.ts                      |  5 +++
 packages/instant/src/util/progress.ts              | 16 ++++++++--
 7 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 packages/instant/src/components/progress_bar.tsx
 create mode 100644 packages/instant/src/containers/selected_asset_progress_bar.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/progress_bar.tsx b/packages/instant/src/components/progress_bar.tsx
new file mode 100644
index 000000000..b89c56ed5
--- /dev/null
+++ b/packages/instant/src/components/progress_bar.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container } from './ui/container';
+import { Text } from './ui/text';
+
+export interface ProgressBarProps {
+    percentageDone: number;
+}
+export const ProgressBar: React.StatelessComponent<ProgressBarProps> = props => (
+    <Container width="100%" backgroundColor={ColorOption.white}>
+        <Container width={`${props.percentageDone}%`} backgroundColor={ColorOption.black}>
+            <Text fontColor={ColorOption.white}>{props.percentageDone}%</Text>
+        </Container>
+    </Container>
+);
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index ff19351ff..b9f8d0d92 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -4,11 +4,11 @@ import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order
 import { LatestError } from '../containers/latest_error';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
+import { SelectedAssetProgressBar } from '../containers/selected_asset_progress_bar';
 
 import { ColorOption } from '../style/theme';
 
 import { Container, Flex } from './ui';
-
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
@@ -25,6 +25,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
         >
             <Flex direction="column" justify="flex-start">
                 <SelectedAssetInstantHeading />
+                <SelectedAssetProgressBar />
                 <LatestBuyQuoteOrderDetails />
                 <Container padding="20px" width="100%">
                     <SelectedAssetBuyOrderStateButtons />
diff --git a/packages/instant/src/containers/selected_asset_progress_bar.tsx b/packages/instant/src/containers/selected_asset_progress_bar.tsx
new file mode 100644
index 000000000..886e223d3
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_progress_bar.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import { connect } from 'react-redux';
+
+import { ProgressBar } from '../components/progress_bar';
+import { State } from '../redux/reducer';
+import { OrderProcessState, OrderState } from '../types';
+
+interface SelectedAssetProgressComponentProps {
+    buyOrderState: OrderState;
+    percentageDone?: number;
+}
+export const SelectedAssetProgressComponent: React.StatelessComponent<SelectedAssetProgressComponentProps> = props => {
+    const { buyOrderState, percentageDone } = props;
+
+    // TODO: uncomment after done testing
+    // const isOrderStateOk =
+    //     buyOrderState.processState === OrderProcessState.PROCESSING ||
+    //     buyOrderState.processState === OrderProcessState.SUCCESS;
+    const isOrderStateOk = true;
+
+    if (isOrderStateOk && percentageDone) {
+        return <ProgressBar percentageDone={percentageDone} />;
+    }
+
+    return null;
+};
+
+interface ConnectedState {
+    buyOrderState: OrderState;
+    percentageDone?: number;
+}
+const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
+    buyOrderState: state.buyOrderState,
+    percentageDone: state.orderProgress && state.orderProgress.percentageDone,
+});
+export const SelectedAssetProgressBar = connect(mapStateToProps)(SelectedAssetProgressComponent);
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index bfae68e2b..59d059b59 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -28,6 +28,7 @@ export enum ActionTypes {
     UPDATE_BUY_ORDER_STATE = 'UPDATE_BUY_ORDER_STATE',
     UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
     UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET',
+    UPDATE_ORDER_PROGRESS_PERCENTAGE = 'UPDATE_ORDER_PROGRESS_PERCENTAGE',
     SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING',
     SET_QUOTE_REQUEST_STATE_FAILURE = 'SET_QUOTE_REQUEST_STATE_FAILURE',
     SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE',
@@ -43,6 +44,8 @@ export const actions = {
     updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
     updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
+    updateOrderProgressPercentage: (percentDone: number) =>
+        createAction(ActionTypes.UPDATE_ORDER_PROGRESS_PERCENTAGE, percentDone),
     setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING),
     setQuoteRequestStateFailure: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE),
     setErrorMessage: (errorMessage: string) => createAction(ActionTypes.SET_ERROR_MESSAGE, errorMessage),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index dd9403052..be336f7c2 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -12,6 +12,7 @@ import {
     DisplayStatus,
     Network,
     OrderProcessState,
+    OrderProgress,
     OrderState,
 } from '../types';
 import { assetUtils } from '../util/asset';
@@ -31,6 +32,7 @@ export interface State {
     quoteRequestState: AsyncProcessState;
     latestErrorMessage?: string;
     latestErrorDisplayStatus: DisplayStatus;
+    orderProgress?: OrderProgress;
 }
 
 export const INITIAL_STATE: State = {
@@ -119,6 +121,11 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 selectedAsset: newSelectedAsset,
             };
+        case ActionTypes.UPDATE_ORDER_PROGRESS_PERCENTAGE:
+            return {
+                ...state,
+                orderProgress: { percentageDone: action.data },
+            };
         case ActionTypes.RESET_AMOUNT:
             return {
                 ...state,
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 4631c9cae..722590165 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -16,12 +16,17 @@ export enum OrderProcessState {
     FAILURE = 'Failure',
 }
 
+export interface OrderProgress {
+    percentageDone: number;
+}
+
 interface OrderStatePreTx {
     processState: OrderProcessState.NONE | OrderProcessState.VALIDATING;
 }
 interface OrderStatePostTx {
     processState: OrderProcessState.PROCESSING | OrderProcessState.SUCCESS | OrderProcessState.FAILURE;
     txHash: string;
+    // TODO: move/rename?
     estimatedTimeMs?: number;
 }
 export type OrderState = OrderStatePreTx | OrderStatePostTx;
diff --git a/packages/instant/src/util/progress.ts b/packages/instant/src/util/progress.ts
index 5cb6a6de9..08b813e3d 100644
--- a/packages/instant/src/util/progress.ts
+++ b/packages/instant/src/util/progress.ts
@@ -1,3 +1,4 @@
+// TODO: change filename?
 import * as _ from 'lodash';
 import { Dispatch } from 'redux';
 
@@ -26,19 +27,21 @@ interface TickingFinishingStatus {
 type TickingStatus = TickingNoneState | TickingRunningStatus | TickingFinishingStatus;
 
 const TICKS_PER_SECOND = 1000 / PROGRESS_TICK_INTERVAL_MS;
-export class Progress {
+class Progress {
     private _startTimeUnix?: number;
     private _expectedTimeMs?: number;
     private _intervalId?: number;
     private _percentageDone: number;
     private _tickingStatus: TickingStatus;
+    private _dispatcher: Dispatch<Action>;
 
-    constructor() {
+    constructor(dispatcher: Dispatch<Action>) {
         this._startTimeUnix = undefined;
         this._expectedTimeMs = undefined;
         this._percentageDone = 0;
         this._intervalId = undefined;
         this._tickingStatus = { state: TickingState.None };
+        this._dispatcher = dispatcher;
     }
 
     public beginRunning(expectedTimeMs: number): void {
@@ -66,8 +69,9 @@ export class Progress {
                 : this._getNewPercentageNormal();
 
         const maxPercentage = this._tickingStatus.state === TickingState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE;
-        const percentageDone = Math.min(rawPercentageDone, maxPercentage);
+        const percentageDone = Math.floor(Math.min(rawPercentageDone, maxPercentage));
         this._percentageDone = percentageDone;
+        this._dispatcher(actions.updateOrderProgressPercentage(this._percentageDone));
         console.log('percentageDone', this._percentageDone);
         if (percentageDone >= 100) {
             this._clearTimer();
@@ -96,3 +100,9 @@ export class Progress {
         return this._percentageDone + finishingState.increasePercentageEveryTick;
     }
 }
+
+let _currentProgress: Progress | undefined;
+export const progress = (dispatcher: Dispatch<Action>): Progress => {
+    _currentProgress = _currentProgress || new Progress(dispatcher);
+    return _currentProgress;
+};
-- 
cgit v1.2.3


From bcb633e5cbcbfdfdfe8c91170abfca7dbb003417 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 13:34:47 -0700
Subject: Making prettier

---
 packages/instant/src/components/progress_bar.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/progress_bar.tsx b/packages/instant/src/components/progress_bar.tsx
index b89c56ed5..5b5968703 100644
--- a/packages/instant/src/components/progress_bar.tsx
+++ b/packages/instant/src/components/progress_bar.tsx
@@ -3,15 +3,19 @@ import * as React from 'react';
 import { ColorOption } from '../style/theme';
 
 import { Container } from './ui/container';
-import { Text } from './ui/text';
 
 export interface ProgressBarProps {
     percentageDone: number;
 }
 export const ProgressBar: React.StatelessComponent<ProgressBarProps> = props => (
-    <Container width="100%" backgroundColor={ColorOption.white}>
-        <Container width={`${props.percentageDone}%`} backgroundColor={ColorOption.black}>
-            <Text fontColor={ColorOption.white}>{props.percentageDone}%</Text>
+    <Container padding="20px 20px 0px 20px" width="100%">
+        <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
+            <Container
+                width={`${props.percentageDone}%`}
+                backgroundColor={ColorOption.primaryColor}
+                borderRadius="6px"
+                height="10px"
+            />
         </Container>
     </Container>
 );
-- 
cgit v1.2.3


From 13b41c976b42983f5869813715313c2da22abcbc Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 13:51:18 -0700
Subject: Placeholder for estimated time

---
 packages/instant/src/components/progress_bar.tsx          | 15 ++++++++++++++-
 .../src/containers/selected_asset_progress_bar.tsx        |  2 +-
 2 files changed, 15 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/progress_bar.tsx b/packages/instant/src/components/progress_bar.tsx
index 5b5968703..d5d1f3ded 100644
--- a/packages/instant/src/components/progress_bar.tsx
+++ b/packages/instant/src/components/progress_bar.tsx
@@ -3,18 +3,31 @@ import * as React from 'react';
 import { ColorOption } from '../style/theme';
 
 import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
 
 export interface ProgressBarProps {
     percentageDone: number;
+    estTimeMs: number;
+    elapsedTimeMs: number;
 }
+
+// TODO: Est time to minutes with suffix
+// TODO: time in minutes
 export const ProgressBar: React.StatelessComponent<ProgressBarProps> = props => (
     <Container padding="20px 20px 0px 20px" width="100%">
+        <Container marginBottom="5px">
+            <Flex justify="space-between">
+                <Text>Est. Time ({props.estTimeMs / 1000} seconds)</Text>
+                <Text>{props.elapsedTimeMs / 1000}</Text>
+            </Flex>
+        </Container>
         <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
             <Container
                 width={`${props.percentageDone}%`}
                 backgroundColor={ColorOption.primaryColor}
                 borderRadius="6px"
-                height="10px"
+                height="6px"
             />
         </Container>
     </Container>
diff --git a/packages/instant/src/containers/selected_asset_progress_bar.tsx b/packages/instant/src/containers/selected_asset_progress_bar.tsx
index 886e223d3..4564c790a 100644
--- a/packages/instant/src/containers/selected_asset_progress_bar.tsx
+++ b/packages/instant/src/containers/selected_asset_progress_bar.tsx
@@ -20,7 +20,7 @@ export const SelectedAssetProgressComponent: React.StatelessComponent<SelectedAs
     const isOrderStateOk = true;
 
     if (isOrderStateOk && percentageDone) {
-        return <ProgressBar percentageDone={percentageDone} />;
+        return <ProgressBar percentageDone={percentageDone} estTimeMs={1000} elapsedTimeMs={2000} />;
     }
 
     return null;
-- 
cgit v1.2.3


From 05f059492bbc86d61946562ac8c116259ded3487 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 14:48:09 -0700
Subject: WIP: beginning of simulated progress bar component

---
 .../src/components/simulated_progress_bar.tsx      | 136 +++++++++++++++++++++
 packages/instant/src/util/progress.ts              |   2 +-
 2 files changed, 137 insertions(+), 1 deletion(-)
 create mode 100644 packages/instant/src/components/simulated_progress_bar.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx
new file mode 100644
index 000000000..3a957aca6
--- /dev/null
+++ b/packages/instant/src/components/simulated_progress_bar.tsx
@@ -0,0 +1,136 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Dispatch } from 'redux';
+
+import { PROGRESS_STALL_AT_PERCENTAGE, PROGRESS_TICK_INTERVAL_MS } from '../constants';
+import { Action, actions } from '../redux/actions';
+
+import { ColorOption } from '../style/theme';
+
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
+
+const TICKS_PER_SECOND = 1000 / PROGRESS_TICK_INTERVAL_MS;
+
+const curTimeUnix = () => {
+    return new Date().getTime();
+};
+
+export interface SimulatedProgressBarProps {
+    startTimeUnix: number;
+    expectedEndTimeUnix: number;
+    ended: boolean;
+}
+enum TickingRunState {
+    None,
+    Running,
+    Finishing,
+}
+interface TickingNoneStatus {
+    runState: TickingRunState.None;
+}
+interface TickingRunningStatus {
+    runState: TickingRunState.Running;
+}
+interface TickingFinishingStatus {
+    runState: TickingRunState.Finishing;
+    increasePercentageEveryTick: number;
+}
+type TickingStatus = TickingNoneStatus | TickingRunningStatus | TickingFinishingStatus;
+
+export interface SimulatedProgressState {
+    percentageDone: number;
+    intervalId?: number;
+    tickingStatus: TickingStatus;
+}
+export class SimulatedProgressBar extends React.Component<SimulatedProgressBarProps, SimulatedProgressState> {
+    public constructor(props: SimulatedProgressBarProps) {
+        super(props);
+
+        // TODO: look into using assert library here?
+        if (props.expectedEndTimeUnix <= props.startTimeUnix) {
+            throw new Error('End time before start time');
+        }
+
+        const intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS);
+        this.state = {
+            percentageDone: 0,
+            intervalId,
+            tickingStatus: { runState: TickingRunState.Running },
+        };
+    }
+
+    public componentDidUpdate(prevProps: SimulatedProgressBarProps, prevState: SimulatedProgressState): void {
+        const percentLeft = 100 - this.state.percentageDone;
+        const increasePercentageEveryTick = percentLeft / TICKS_PER_SECOND;
+
+        if (prevProps.ended === false && this.props.ended === true) {
+            this.setState({
+                tickingStatus: {
+                    runState: TickingRunState.Finishing,
+                    increasePercentageEveryTick,
+                },
+            });
+        }
+    }
+
+    public componentWillUnmount(): void {
+        this._clearTimer();
+    }
+
+    public render(): React.ReactNode {
+        // TODO: Consider moving to seperate component
+        return (
+            <Container padding="20px 20px 0px 20px" width="100%">
+                <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
+                    <Container
+                        width={`${this.state.percentageDone}%`}
+                        backgroundColor={ColorOption.primaryColor}
+                        borderRadius="6px"
+                        height="6px"
+                    />
+                </Container>
+            </Container>
+        );
+    }
+
+    private _tick(): void {
+        const rawPercentageDone =
+            this.state.tickingStatus.runState === TickingRunState.Finishing
+                ? this._getNewPercentageFinishing(this.state.tickingStatus)
+                : this._getNewPercentageNormal();
+
+        const maxPercentage =
+            this.state.tickingStatus.runState === TickingRunState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE;
+        const percentageDone = Math.floor(Math.min(rawPercentageDone, maxPercentage));
+
+        this.setState({
+            percentageDone,
+        });
+
+        if (percentageDone >= 100) {
+            this._clearTimer();
+        }
+    }
+
+    private _clearTimer(): void {
+        if (this.state.intervalId) {
+            window.clearTimeout(this.state.intervalId);
+        }
+    }
+
+    // TODO: consider not taking in a parameter here, might be confusing
+    private _getNewPercentageFinishing(tickingStatus: TickingFinishingStatus): number {
+        return this.state.percentageDone + tickingStatus.increasePercentageEveryTick;
+    }
+
+    private _getNewPercentageNormal(): number {
+        const elapsedTimeMs = curTimeUnix() - this.props.startTimeUnix;
+        const safeElapsedTimeMs = Math.max(elapsedTimeMs, 1);
+
+        const expectedAmountOfTimeMs = this.props.expectedEndTimeUnix - this.props.startTimeUnix;
+        const percentageDone = safeElapsedTimeMs / expectedAmountOfTimeMs * 100;
+        return percentageDone;
+    }
+}
diff --git a/packages/instant/src/util/progress.ts b/packages/instant/src/util/progress.ts
index 08b813e3d..2d74ef354 100644
--- a/packages/instant/src/util/progress.ts
+++ b/packages/instant/src/util/progress.ts
@@ -1,4 +1,4 @@
-// TODO: change filename?
+// TODO: delete!!
 import * as _ from 'lodash';
 import { Dispatch } from 'redux';
 
-- 
cgit v1.2.3


From a49bf353f85c22a029db3085a620f3c031b52d73 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 30 Oct 2018 15:21:58 -0700
Subject: feat: refactor animation code

---
 .../components/animations/position_animation.tsx   | 70 ++++++++++++++++++++++
 .../src/components/animations/slide_animations.tsx | 58 +++---------------
 .../src/components/erc20_asset_amount_input.tsx    |  7 ++-
 .../instant/src/components/instant_heading.tsx     | 10 ++--
 packages/instant/src/components/panel.tsx          |  9 +--
 packages/instant/src/components/sliding_error.tsx  | 28 ++++++---
 packages/instant/src/components/ui/container.tsx   |  2 +
 .../src/components/zero_ex_instant_container.tsx   | 10 +++-
 packages/instant/src/containers/latest_error.tsx   |  9 +--
 .../selected_erc20_asset_amount_input.ts           |  1 +
 10 files changed, 130 insertions(+), 74 deletions(-)
 create mode 100644 packages/instant/src/components/animations/position_animation.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
new file mode 100644
index 000000000..de38ee30a
--- /dev/null
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Keyframes } from 'styled-components';
+
+import { css, keyframes, styled } from '../../style/theme';
+
+const generateTransitionInfoCss = (
+    key: keyof TransitionInfo,
+    top?: TransitionInfo,
+    bottom?: TransitionInfo,
+    left?: TransitionInfo,
+    right?: TransitionInfo,
+): string => {
+    const topStringIfExists = top ? `top: ${top[key]};` : '';
+    const bottomStringIfExists = bottom ? `bottom: ${bottom[key]};` : '';
+    const leftStringIfExists = left ? `left: ${left[key]};` : '';
+    const rightStringIfExists = right ? `right: ${right[key]};` : '';
+    return `
+    ${topStringIfExists}
+    ${bottomStringIfExists}
+    ${leftStringIfExists}
+    ${rightStringIfExists}
+    `;
+};
+
+const slideKeyframeGenerator = (
+    top?: TransitionInfo,
+    bottom?: TransitionInfo,
+    left?: TransitionInfo,
+    right?: TransitionInfo,
+) => keyframes`
+    from {
+        position: relative;
+        ${generateTransitionInfoCss('from', top, bottom, left, right)}
+    }
+
+    to {
+        position: relative;
+        ${generateTransitionInfoCss('to', top, bottom, left, right)}
+    }
+`;
+
+export interface TransitionInfo {
+    from: string;
+    to: string;
+}
+
+export interface PositionAnimationProps {
+    top?: TransitionInfo;
+    bottom?: TransitionInfo;
+    left?: TransitionInfo;
+    right?: TransitionInfo;
+    timingFunction: string;
+    direction?: string;
+}
+
+export const PositionAnimation =
+    styled.div <
+    PositionAnimationProps >
+    `
+    animation-name: ${props =>
+        css`
+            ${slideKeyframeGenerator(props.top, props.bottom, props.left, props.right)};
+        `};
+    animation-duration: 0.3s;
+    animation-timing-function: ${props => props.timingFunction};
+    animation-delay: 0s;
+    animation-iteration-count: 1;
+    animation-fill-mode: ${props => props.direction || 'none'};
+    position: relative;
+`;
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 84280372b..99533a2f0 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -3,56 +3,16 @@ import { Keyframes } from 'styled-components';
 
 import { css, keyframes, styled } from '../../style/theme';
 
-const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
-    from {
-        position: relative;
-        top: ${fromY};
-    }
-
-    to {
-        position: relative;
-        top: ${toY};
-    }
-`;
+import { PositionAnimation, PositionAnimationProps } from './position_animation';
 
+export type SlideAnimationPhase = 'slideIn' | 'slideOut';
 export interface SlideAnimationProps {
-    keyframes: Keyframes;
-    animationType: string;
-    animationDirection?: string;
+    phase: SlideAnimationPhase;
+    slideIn: PositionAnimationProps;
+    slideOut: PositionAnimationProps;
 }
 
-export const SlideAnimation =
-    styled.div <
-    SlideAnimationProps >
-    `
-    animation-name: ${props =>
-        css`
-            ${props.keyframes};
-        `};
-    animation-duration: 0.3s;
-    animation-timing-function: ${props => props.animationType};
-    animation-delay: 0s;
-    animation-iteration-count: 1;
-    animation-fill-mode: ${props => props.animationDirection || 'none'};
-    position: relative;
-`;
-
-export interface SlideAnimationComponentProps {
-    downY: string;
-}
-
-export const SlideUpAnimation: React.StatelessComponent<SlideAnimationComponentProps> = props => (
-    <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
-        {props.children}
-    </SlideAnimation>
-);
-
-export const SlideDownAnimation: React.StatelessComponent<SlideAnimationComponentProps> = props => (
-    <SlideAnimation
-        animationDirection="forwards"
-        animationType="cubic-bezier(0.25, 0.1, 0.25, 1)"
-        keyframes={slideKeyframeGenerator('0px', props.downY)}
-    >
-        {props.children}
-    </SlideAnimation>
-);
+export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
+    const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
+    return <PositionAnimation {...propsToUse}>{props.children}</PositionAnimation>;
+};
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index 4108fd0e8..bed1b3b4e 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -15,7 +15,7 @@ export interface ERC20AssetAmountInputProps {
     asset?: ERC20Asset;
     value?: BigNumberInput;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
-    onSymbolClick: (asset?: ERC20Asset) => void;
+    onSymbolClick?: (asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
     isDisabled: boolean;
@@ -28,7 +28,6 @@ export interface ERC20AssetAmountInputState {
 export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
-        onSymbolClick: util.boundNoop,
         isDisabled: false,
     };
     constructor(props: ERC20AssetAmountInputProps) {
@@ -112,7 +111,9 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         });
     };
     private readonly _handleSymbolClick = () => {
-        this.props.onSymbolClick(this.props.asset);
+        if (this.props.onSymbolClick) {
+            this.props.onSymbolClick(this.props.asset);
+        }
     };
     // For assets with symbols of different length,
     // start scaling the input at different character lengths
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 0b41d44d7..e1c2f8bc3 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -60,8 +60,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private _renderAmountsSection(): React.ReactNode {
         return (
             <Container>
-                <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container>
-                <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount)}</Container>
+                <Container marginBottom="5px">{this._renderPlaceholderOrAmount(this._renderEthAmount)}</Container>
+                <Container opacity={0.7}>{this._renderPlaceholderOrAmount(this._renderDollarAmount)}</Container>
             </Container>
         );
     }
@@ -92,7 +92,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         return 'I want to buy';
     }
 
-    private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
+    private _renderPlaceholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
         if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
             return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />;
         }
@@ -102,7 +102,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         return amountFunction();
     }
 
-    private readonly _ethAmount = (): React.ReactNode => {
+    private readonly _renderEthAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
                 {format.ethBaseAmount(
@@ -114,7 +114,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         );
     };
 
-    private readonly _dollarAmount = (): React.ReactNode => {
+    private readonly _renderDollarAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white}>
                 {format.ethBaseAmountInUsd(
diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx
index bb16ed9b1..ecefadced 100644
--- a/packages/instant/src/components/panel.tsx
+++ b/packages/instant/src/components/panel.tsx
@@ -12,10 +12,11 @@ export interface PanelProps {
 export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
     <Container
         backgroundColor={ColorOption.white}
-        position="absolute"
-        top="0px"
-        left="0px"
-        width="100%"
+        // position="absolute"
+        // left="0px"
+        // bottom="0px"
+        // width="100%"
+        // height="100%"
         height="100%"
         zIndex={zIndex.panel}
     >
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index cc9abb7dd..8f209765e 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { SlideDownAnimation, SlideUpAnimation } from './animations/slide_animations';
+import { PositionAnimationProps } from './animations/position_animation';
+import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations';
 
 import { Container, Flex, Text } from './ui';
 
@@ -31,16 +32,29 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
     </Container>
 );
 
-export type SlidingDirection = 'up' | 'down';
 export interface SlidingErrorProps extends ErrorProps {
-    direction: SlidingDirection;
+    phase: SlideAnimationPhase;
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
-    const AnimationComponent = props.direction === 'up' ? SlideUpAnimation : SlideDownAnimation;
-
+    const slideAmount = '120px';
+    const slideUp: PositionAnimationProps = {
+        timingFunction: 'ease-in',
+        top: {
+            from: slideAmount,
+            to: '0px',
+        },
+    };
+    const slideDown: PositionAnimationProps = {
+        timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+        top: {
+            from: '0px',
+            to: slideAmount,
+        },
+        direction: 'forwards',
+    };
     return (
-        <AnimationComponent downY="120px">
+        <SlideAnimation slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
             <Error icon={props.icon} message={props.message} />
-        </AnimationComponent>
+        </SlideAnimation>
     );
 };
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index b6842b294..7b8642761 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -29,6 +29,7 @@ export interface ContainerProps {
     whiteSpace?: string;
     opacity?: number;
     cursor?: string;
+    overflow?: string;
 }
 
 export const Container =
@@ -59,6 +60,7 @@ export const Container =
     ${props => cssRuleIfExists(props, 'white-space')}
     ${props => cssRuleIfExists(props, 'opacity')}
     ${props => cssRuleIfExists(props, 'cursor')}
+    ${props => cssRuleIfExists(props, 'overflow')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index ded0d075e..c8d5235c8 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -4,16 +4,16 @@ import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order
 import { LatestError } from '../containers/latest_error';
 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';
 
+import { Panel } from './panel';
 import { Container, Flex } from './ui';
 
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
-    <Container width="350px">
+    <Container width="350px" position="relative">
         <Container zIndex={zIndex.errorPopup} position="relative">
             <LatestError />
         </Container>
@@ -23,6 +23,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
             backgroundColor={ColorOption.white}
             borderRadius="3px"
             hasBoxShadow={true}
+            overflow="hidden"
         >
             <Flex direction="column" justify="flex-start">
                 <SelectedAssetInstantHeading />
@@ -31,6 +32,11 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
                     <SelectedAssetBuyOrderStateButtons />
                 </Container>
             </Flex>
+            {/* <Container position="absolute" left="0px" bottom="0px" width="100%" height="100%">
+                <SlideAnimationHelper direction="up" downY="200px">
+                    <Panel> Hey </Panel>
+                </SlideAnimationHelper>
+            </Container> */}
         </Container>
     </Container>
 );
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 45ca09673..2a8d232da 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { connect } from 'react-redux';
 
+import { SlideAnimationPhase } from '../components/animations/slide_animations';
 import { SlidingError } from '../components/sliding_error';
 import { State } from '../redux/reducer';
 import { Asset, DisplayStatus } from '../types';
@@ -9,26 +10,26 @@ import { Asset, DisplayStatus } from '../types';
 export interface LatestErrorComponentProps {
     asset?: Asset;
     latestErrorMessage?: string;
-    slidingDirection: 'down' | 'up';
+    slidingPhase: SlideAnimationPhase;
 }
 
 export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
     if (!props.latestErrorMessage) {
         return <div />;
     }
-    return <SlidingError direction={props.slidingDirection} icon="😢" message={props.latestErrorMessage} />;
+    return <SlidingError phase={props.slidingPhase} icon="😢" message={props.latestErrorMessage} />;
 };
 
 interface ConnectedState {
     asset?: Asset;
     latestErrorMessage?: string;
-    slidingDirection: 'down' | 'up';
+    slidingPhase: SlideAnimationPhase;
 }
 export interface LatestErrorProps {}
 const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
     asset: state.selectedAsset,
     latestErrorMessage: state.latestErrorMessage,
-    slidingDirection: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'up' : 'down',
+    slidingPhase: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slideIn' : 'slideOut',
 });
 
 export const LatestError = connect(mapStateToProps)(LatestErrorComponent);
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 4767b15d4..4df7faab9 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -19,6 +19,7 @@ import { errorFlasher } from '../util/error_flasher';
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
     startingFontSizePx: number;
+    onSymbolClick?: (asset?: ERC20Asset) => void;
 }
 
 interface ConnectedState {
-- 
cgit v1.2.3


From 4456c3ee14f5cd778e0d16ab42a3e2e34d102f23 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 30 Oct 2018 15:32:43 -0700
Subject: feat: allow for flexible position in position animation component

---
 .../src/components/animations/position_animation.tsx      | 15 ++++++++++-----
 .../src/components/animations/slide_animations.tsx        | 13 +++++++++----
 packages/instant/src/components/sliding_error.tsx         |  8 ++++----
 3 files changed, 23 insertions(+), 13 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index de38ee30a..3d6b5f8dc 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -23,18 +23,19 @@ const generateTransitionInfoCss = (
 };
 
 const slideKeyframeGenerator = (
+    position: string,
     top?: TransitionInfo,
     bottom?: TransitionInfo,
     left?: TransitionInfo,
     right?: TransitionInfo,
 ) => keyframes`
     from {
-        position: relative;
+        position: ${position};
         ${generateTransitionInfoCss('from', top, bottom, left, right)}
     }
 
     to {
-        position: relative;
+        position: ${position};
         ${generateTransitionInfoCss('to', top, bottom, left, right)}
     }
 `;
@@ -44,7 +45,7 @@ export interface TransitionInfo {
     to: string;
 }
 
-export interface PositionAnimationProps {
+export interface PositionAnimationSettings {
     top?: TransitionInfo;
     bottom?: TransitionInfo;
     left?: TransitionInfo;
@@ -53,18 +54,22 @@ export interface PositionAnimationProps {
     direction?: string;
 }
 
+export interface PositionAnimationProps extends PositionAnimationSettings {
+    position: string;
+}
+
 export const PositionAnimation =
     styled.div <
     PositionAnimationProps >
     `
     animation-name: ${props =>
         css`
-            ${slideKeyframeGenerator(props.top, props.bottom, props.left, props.right)};
+            ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)};
         `};
     animation-duration: 0.3s;
     animation-timing-function: ${props => props.timingFunction};
     animation-delay: 0s;
     animation-iteration-count: 1;
     animation-fill-mode: ${props => props.direction || 'none'};
-    position: relative;
+    position: ${props => props.position};
 `;
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 99533a2f0..9f1535297 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -3,16 +3,21 @@ import { Keyframes } from 'styled-components';
 
 import { css, keyframes, styled } from '../../style/theme';
 
-import { PositionAnimation, PositionAnimationProps } from './position_animation';
+import { PositionAnimation, PositionAnimationSettings } from './position_animation';
 
 export type SlideAnimationPhase = 'slideIn' | 'slideOut';
 export interface SlideAnimationProps {
+    position: string;
     phase: SlideAnimationPhase;
-    slideIn: PositionAnimationProps;
-    slideOut: PositionAnimationProps;
+    slideIn: PositionAnimationSettings;
+    slideOut: PositionAnimationSettings;
 }
 
 export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
     const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
-    return <PositionAnimation {...propsToUse}>{props.children}</PositionAnimation>;
+    return (
+        <PositionAnimation position={props.position} {...propsToUse}>
+            {props.children}
+        </PositionAnimation>
+    );
 };
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 8f209765e..0ad11bbad 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { PositionAnimationProps } from './animations/position_animation';
+import { PositionAnimationSettings } from './animations/position_animation';
 import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations';
 
 import { Container, Flex, Text } from './ui';
@@ -37,14 +37,14 @@ export interface SlidingErrorProps extends ErrorProps {
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
     const slideAmount = '120px';
-    const slideUp: PositionAnimationProps = {
+    const slideUp: PositionAnimationSettings = {
         timingFunction: 'ease-in',
         top: {
             from: slideAmount,
             to: '0px',
         },
     };
-    const slideDown: PositionAnimationProps = {
+    const slideDown: PositionAnimationSettings = {
         timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
         top: {
             from: '0px',
@@ -53,7 +53,7 @@ export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props =
         direction: 'forwards',
     };
     return (
-        <SlideAnimation slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
+        <SlideAnimation position="relative" slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
             <Error icon={props.icon} message={props.message} />
         </SlideAnimation>
     );
-- 
cgit v1.2.3


From abaa39a5e24daa8a1a7ff5617a14d2f3088cb0e3 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 15:39:58 -0700
Subject: Simulated Progress component working

---
 .../src/components/simulated_progress_bar.tsx      | 34 ++++++++++++---
 .../src/components/zero_ex_instant_container.tsx   |  4 ++
 .../selected_asset_simulated_progress_bar.tsx      | 48 ++++++++++++++++++++++
 packages/instant/src/redux/actions.ts              |  6 ++-
 packages/instant/src/redux/reducer.ts              |  9 ++++
 packages/instant/src/types.ts                      |  7 ++++
 6 files changed, 102 insertions(+), 6 deletions(-)
 create mode 100644 packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx
index 3a957aca6..1fd76ead7 100644
--- a/packages/instant/src/components/simulated_progress_bar.tsx
+++ b/packages/instant/src/components/simulated_progress_bar.tsx
@@ -23,9 +23,9 @@ export interface SimulatedProgressBarProps {
     ended: boolean;
 }
 enum TickingRunState {
-    None,
-    Running,
-    Finishing,
+    None = 'None',
+    Running = 'Running',
+    Finishing = 'Finishing',
 }
 interface TickingNoneStatus {
     runState: TickingRunState.None;
@@ -53,6 +53,7 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
             throw new Error('End time before start time');
         }
 
+        // TODO: use getFreshState here
         const intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS);
         this.state = {
             percentageDone: 0,
@@ -65,6 +66,7 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
         const percentLeft = 100 - this.state.percentageDone;
         const increasePercentageEveryTick = percentLeft / TICKS_PER_SECOND;
 
+        // if we just switched to ending, having animate to end
         if (prevProps.ended === false && this.props.ended === true) {
             this.setState({
                 tickingStatus: {
@@ -72,10 +74,23 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
                     increasePercentageEveryTick,
                 },
             });
+            return;
+        }
+
+        // later TODO: the new state could be for the wrong order, attach to order state or add concurrency checking
+
+        // if anything else changes, reset internal state
+        if (
+            prevProps.startTimeUnix !== this.props.startTimeUnix ||
+            prevProps.expectedEndTimeUnix !== this.props.expectedEndTimeUnix ||
+            prevProps.ended !== this.props.ended
+        ) {
+            this.setState(this._getFreshState());
         }
     }
 
     public componentWillUnmount(): void {
+        console.log('unmount');
         this._clearTimer();
     }
 
@@ -95,15 +110,24 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
         );
     }
 
+    private _getFreshState(): SimulatedProgressState {
+        this._clearTimer();
+        const intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS);
+        return {
+            percentageDone: 0,
+            intervalId,
+            tickingStatus: { runState: TickingRunState.Running },
+        };
+    }
+
     private _tick(): void {
         const rawPercentageDone =
             this.state.tickingStatus.runState === TickingRunState.Finishing
                 ? this._getNewPercentageFinishing(this.state.tickingStatus)
                 : this._getNewPercentageNormal();
-
         const maxPercentage =
             this.state.tickingStatus.runState === TickingRunState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE;
-        const percentageDone = Math.floor(Math.min(rawPercentageDone, maxPercentage));
+        const percentageDone = Math.min(rawPercentageDone, maxPercentage);
 
         this.setState({
             percentageDone,
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index b9f8d0d92..ae315da47 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -4,7 +4,10 @@ import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order
 import { LatestError } from '../containers/latest_error';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
+
+// TODO: delete this import and this actual file
 import { SelectedAssetProgressBar } from '../containers/selected_asset_progress_bar';
+import { SelectedAssetSimulatedProgressBar } from '../containers/selected_asset_simulated_progress_bar';
 
 import { ColorOption } from '../style/theme';
 
@@ -25,6 +28,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
         >
             <Flex direction="column" justify="flex-start">
                 <SelectedAssetInstantHeading />
+                <SelectedAssetSimulatedProgressBar />
                 <SelectedAssetProgressBar />
                 <LatestBuyQuoteOrderDetails />
                 <Container padding="20px" width="100%">
diff --git a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
new file mode 100644
index 000000000..1ddb4ae66
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import { connect } from 'react-redux';
+
+import { SimulatedProgressBar } from '../components/simulated_progress_bar';
+
+import { State } from '../redux/reducer';
+import { OrderProcessState, OrderState, SimulatedProgress } from '../types';
+
+interface SelectedAssetProgressComponentProps {
+    buyOrderState: OrderState;
+    simulatedProgress?: SimulatedProgress;
+}
+export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent<
+    SelectedAssetProgressComponentProps
+> = props => {
+    const { buyOrderState, simulatedProgress } = props;
+
+    console.log('simulatedProgress', simulatedProgress);
+
+    // TODO: uncomment after done testing
+    // const isOrderStateOk =
+    //     buyOrderState.processState === OrderProcessState.PROCESSING ||
+    //     buyOrderState.processState === OrderProcessState.SUCCESS;
+    const isOrderStateOk = true;
+
+    if (isOrderStateOk && simulatedProgress) {
+        return (
+            <SimulatedProgressBar
+                startTimeUnix={simulatedProgress.startTimeUnix}
+                expectedEndTimeUnix={simulatedProgress.expectedEndTimeUnix}
+                ended={simulatedProgress.ended}
+            />
+        );
+    }
+
+    return null;
+};
+
+interface ConnectedState {
+    buyOrderState: OrderState;
+    simulatedProgress?: SimulatedProgress;
+}
+const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
+    buyOrderState: state.buyOrderState,
+    simulatedProgress: state.simulatedProgress,
+});
+export const SelectedAssetSimulatedProgressBar = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent);
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 59d059b59..e8002aa3b 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -4,7 +4,7 @@ import * as _ from 'lodash';
 
 import { BigNumberInput } from '../util/big_number_input';
 
-import { ActionsUnion, OrderState } from '../types';
+import { ActionsUnion, OrderState, SimulatedProgress } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
@@ -29,6 +29,7 @@ export enum ActionTypes {
     UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
     UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET',
     UPDATE_ORDER_PROGRESS_PERCENTAGE = 'UPDATE_ORDER_PROGRESS_PERCENTAGE',
+    UPDATE_SIMULATED_ORDER_PROGRESS = 'UPDATE_SIMULATED_ORDER_PROGRESS',
     SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING',
     SET_QUOTE_REQUEST_STATE_FAILURE = 'SET_QUOTE_REQUEST_STATE_FAILURE',
     SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE',
@@ -44,8 +45,11 @@ export const actions = {
     updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
     updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
+    // TODO: this is old, delete
     updateOrderProgressPercentage: (percentDone: number) =>
         createAction(ActionTypes.UPDATE_ORDER_PROGRESS_PERCENTAGE, percentDone),
+    updateSimulatedOrderProgress: (orderProgress: SimulatedProgress) =>
+        createAction(ActionTypes.UPDATE_SIMULATED_ORDER_PROGRESS, orderProgress),
     setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING),
     setQuoteRequestStateFailure: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE),
     setErrorMessage: (errorMessage: string) => createAction(ActionTypes.SET_ERROR_MESSAGE, errorMessage),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index be336f7c2..428cf0984 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -14,6 +14,7 @@ import {
     OrderProcessState,
     OrderProgress,
     OrderState,
+    SimulatedProgress,
 } from '../types';
 import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
@@ -32,7 +33,9 @@ export interface State {
     quoteRequestState: AsyncProcessState;
     latestErrorMessage?: string;
     latestErrorDisplayStatus: DisplayStatus;
+    // TODO: this is old, cleanup
     orderProgress?: OrderProgress;
+    simulatedProgress?: SimulatedProgress;
 }
 
 export const INITIAL_STATE: State = {
@@ -121,11 +124,17 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 selectedAsset: newSelectedAsset,
             };
+        // TODO: this is old, delete
         case ActionTypes.UPDATE_ORDER_PROGRESS_PERCENTAGE:
             return {
                 ...state,
                 orderProgress: { percentageDone: action.data },
             };
+        case ActionTypes.UPDATE_SIMULATED_ORDER_PROGRESS:
+            return {
+                ...state,
+                simulatedProgress: action.data,
+            };
         case ActionTypes.RESET_AMOUNT:
             return {
                 ...state,
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 722590165..4b63abdda 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -16,10 +16,17 @@ export enum OrderProcessState {
     FAILURE = 'Failure',
 }
 
+// TODO: this is old, delete
 export interface OrderProgress {
     percentageDone: number;
 }
 
+export interface SimulatedProgress {
+    startTimeUnix: number;
+    expectedEndTimeUnix: number;
+    ended: boolean;
+}
+
 interface OrderStatePreTx {
     processState: OrderProcessState.NONE | OrderProcessState.VALIDATING;
 }
-- 
cgit v1.2.3


From dc9013652914333bfdc3c067d9b83a71f28c7382 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 15:43:38 -0700
Subject: Remove old files

---
 packages/instant/src/components/progress_bar.tsx   |  34 -------
 .../src/components/zero_ex_instant_container.tsx   |   3 -
 .../src/containers/selected_asset_progress_bar.tsx |  37 -------
 packages/instant/src/redux/actions.ts              |   4 -
 packages/instant/src/redux/reducer.ts              |   9 --
 packages/instant/src/types.ts                      |   5 -
 packages/instant/src/util/progress.ts              | 108 ---------------------
 7 files changed, 200 deletions(-)
 delete mode 100644 packages/instant/src/components/progress_bar.tsx
 delete mode 100644 packages/instant/src/containers/selected_asset_progress_bar.tsx
 delete mode 100644 packages/instant/src/util/progress.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/progress_bar.tsx b/packages/instant/src/components/progress_bar.tsx
deleted file mode 100644
index d5d1f3ded..000000000
--- a/packages/instant/src/components/progress_bar.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { ColorOption } from '../style/theme';
-
-import { Container } from './ui/container';
-import { Flex } from './ui/flex';
-import { Text } from './ui/text';
-
-export interface ProgressBarProps {
-    percentageDone: number;
-    estTimeMs: number;
-    elapsedTimeMs: number;
-}
-
-// TODO: Est time to minutes with suffix
-// TODO: time in minutes
-export const ProgressBar: React.StatelessComponent<ProgressBarProps> = props => (
-    <Container padding="20px 20px 0px 20px" width="100%">
-        <Container marginBottom="5px">
-            <Flex justify="space-between">
-                <Text>Est. Time ({props.estTimeMs / 1000} seconds)</Text>
-                <Text>{props.elapsedTimeMs / 1000}</Text>
-            </Flex>
-        </Container>
-        <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
-            <Container
-                width={`${props.percentageDone}%`}
-                backgroundColor={ColorOption.primaryColor}
-                borderRadius="6px"
-                height="6px"
-            />
-        </Container>
-    </Container>
-);
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index ae315da47..6b1042668 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -5,8 +5,6 @@ import { LatestError } from '../containers/latest_error';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 
-// TODO: delete this import and this actual file
-import { SelectedAssetProgressBar } from '../containers/selected_asset_progress_bar';
 import { SelectedAssetSimulatedProgressBar } from '../containers/selected_asset_simulated_progress_bar';
 
 import { ColorOption } from '../style/theme';
@@ -29,7 +27,6 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
             <Flex direction="column" justify="flex-start">
                 <SelectedAssetInstantHeading />
                 <SelectedAssetSimulatedProgressBar />
-                <SelectedAssetProgressBar />
                 <LatestBuyQuoteOrderDetails />
                 <Container padding="20px" width="100%">
                     <SelectedAssetBuyOrderStateButtons />
diff --git a/packages/instant/src/containers/selected_asset_progress_bar.tsx b/packages/instant/src/containers/selected_asset_progress_bar.tsx
deleted file mode 100644
index 4564c790a..000000000
--- a/packages/instant/src/containers/selected_asset_progress_bar.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-
-import { connect } from 'react-redux';
-
-import { ProgressBar } from '../components/progress_bar';
-import { State } from '../redux/reducer';
-import { OrderProcessState, OrderState } from '../types';
-
-interface SelectedAssetProgressComponentProps {
-    buyOrderState: OrderState;
-    percentageDone?: number;
-}
-export const SelectedAssetProgressComponent: React.StatelessComponent<SelectedAssetProgressComponentProps> = props => {
-    const { buyOrderState, percentageDone } = props;
-
-    // TODO: uncomment after done testing
-    // const isOrderStateOk =
-    //     buyOrderState.processState === OrderProcessState.PROCESSING ||
-    //     buyOrderState.processState === OrderProcessState.SUCCESS;
-    const isOrderStateOk = true;
-
-    if (isOrderStateOk && percentageDone) {
-        return <ProgressBar percentageDone={percentageDone} estTimeMs={1000} elapsedTimeMs={2000} />;
-    }
-
-    return null;
-};
-
-interface ConnectedState {
-    buyOrderState: OrderState;
-    percentageDone?: number;
-}
-const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
-    buyOrderState: state.buyOrderState,
-    percentageDone: state.orderProgress && state.orderProgress.percentageDone,
-});
-export const SelectedAssetProgressBar = connect(mapStateToProps)(SelectedAssetProgressComponent);
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index e8002aa3b..c27c188bf 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -28,7 +28,6 @@ export enum ActionTypes {
     UPDATE_BUY_ORDER_STATE = 'UPDATE_BUY_ORDER_STATE',
     UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
     UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET',
-    UPDATE_ORDER_PROGRESS_PERCENTAGE = 'UPDATE_ORDER_PROGRESS_PERCENTAGE',
     UPDATE_SIMULATED_ORDER_PROGRESS = 'UPDATE_SIMULATED_ORDER_PROGRESS',
     SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING',
     SET_QUOTE_REQUEST_STATE_FAILURE = 'SET_QUOTE_REQUEST_STATE_FAILURE',
@@ -45,9 +44,6 @@ export const actions = {
     updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
     updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
-    // TODO: this is old, delete
-    updateOrderProgressPercentage: (percentDone: number) =>
-        createAction(ActionTypes.UPDATE_ORDER_PROGRESS_PERCENTAGE, percentDone),
     updateSimulatedOrderProgress: (orderProgress: SimulatedProgress) =>
         createAction(ActionTypes.UPDATE_SIMULATED_ORDER_PROGRESS, orderProgress),
     setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 428cf0984..3540bd4eb 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -12,7 +12,6 @@ import {
     DisplayStatus,
     Network,
     OrderProcessState,
-    OrderProgress,
     OrderState,
     SimulatedProgress,
 } from '../types';
@@ -33,8 +32,6 @@ export interface State {
     quoteRequestState: AsyncProcessState;
     latestErrorMessage?: string;
     latestErrorDisplayStatus: DisplayStatus;
-    // TODO: this is old, cleanup
-    orderProgress?: OrderProgress;
     simulatedProgress?: SimulatedProgress;
 }
 
@@ -124,12 +121,6 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 selectedAsset: newSelectedAsset,
             };
-        // TODO: this is old, delete
-        case ActionTypes.UPDATE_ORDER_PROGRESS_PERCENTAGE:
-            return {
-                ...state,
-                orderProgress: { percentageDone: action.data },
-            };
         case ActionTypes.UPDATE_SIMULATED_ORDER_PROGRESS:
             return {
                 ...state,
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 4b63abdda..58d6692e4 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -16,11 +16,6 @@ export enum OrderProcessState {
     FAILURE = 'Failure',
 }
 
-// TODO: this is old, delete
-export interface OrderProgress {
-    percentageDone: number;
-}
-
 export interface SimulatedProgress {
     startTimeUnix: number;
     expectedEndTimeUnix: number;
diff --git a/packages/instant/src/util/progress.ts b/packages/instant/src/util/progress.ts
deleted file mode 100644
index 2d74ef354..000000000
--- a/packages/instant/src/util/progress.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-// TODO: delete!!
-import * as _ from 'lodash';
-import { Dispatch } from 'redux';
-
-import { PROGRESS_STALL_AT_PERCENTAGE, PROGRESS_TICK_INTERVAL_MS } from '../constants';
-import { Action, actions } from '../redux/actions';
-
-const curTimeUnix = () => {
-    return new Date().getTime();
-};
-
-enum TickingState {
-    None,
-    Running,
-    Finishing,
-}
-interface TickingNoneState {
-    state: TickingState.None;
-}
-interface TickingRunningStatus {
-    state: TickingState.Running;
-}
-interface TickingFinishingStatus {
-    state: TickingState.Finishing;
-    increasePercentageEveryTick: number;
-}
-type TickingStatus = TickingNoneState | TickingRunningStatus | TickingFinishingStatus;
-
-const TICKS_PER_SECOND = 1000 / PROGRESS_TICK_INTERVAL_MS;
-class Progress {
-    private _startTimeUnix?: number;
-    private _expectedTimeMs?: number;
-    private _intervalId?: number;
-    private _percentageDone: number;
-    private _tickingStatus: TickingStatus;
-    private _dispatcher: Dispatch<Action>;
-
-    constructor(dispatcher: Dispatch<Action>) {
-        this._startTimeUnix = undefined;
-        this._expectedTimeMs = undefined;
-        this._percentageDone = 0;
-        this._intervalId = undefined;
-        this._tickingStatus = { state: TickingState.None };
-        this._dispatcher = dispatcher;
-    }
-
-    public beginRunning(expectedTimeMs: number): void {
-        this._clearTimer();
-        this._startTimeUnix = curTimeUnix();
-        this._expectedTimeMs = expectedTimeMs;
-        this._percentageDone = 0;
-        this._intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS);
-        this._tickingStatus = { state: TickingState.Running };
-    }
-
-    public setFinishing(): void {
-        const percentLeft = 100 - this._percentageDone;
-        const increasePercentageEveryTick = percentLeft / TICKS_PER_SECOND;
-        this._tickingStatus = {
-            state: TickingState.Finishing,
-            increasePercentageEveryTick,
-        };
-    }
-
-    private _tick(): void {
-        const rawPercentageDone =
-            this._tickingStatus.state === TickingState.Finishing
-                ? this._getNewPercentageFinishing(this._tickingStatus)
-                : this._getNewPercentageNormal();
-
-        const maxPercentage = this._tickingStatus.state === TickingState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE;
-        const percentageDone = Math.floor(Math.min(rawPercentageDone, maxPercentage));
-        this._percentageDone = percentageDone;
-        this._dispatcher(actions.updateOrderProgressPercentage(this._percentageDone));
-        console.log('percentageDone', this._percentageDone);
-        if (percentageDone >= 100) {
-            this._clearTimer();
-        }
-        return;
-    }
-
-    private _clearTimer(): void {
-        if (this._intervalId) {
-            window.clearTimeout(this._intervalId);
-        }
-    }
-
-    private _getNewPercentageNormal(): number {
-        if (_.isUndefined(this._startTimeUnix) || _.isUndefined(this._expectedTimeMs)) {
-            throw new Error('Cant tick, missing var');
-        }
-
-        const elapsedTimeMs = curTimeUnix() - this._startTimeUnix;
-        const safeElapsedTimeMs = Math.max(elapsedTimeMs, 1);
-        const percentageDone = safeElapsedTimeMs / this._expectedTimeMs * 100;
-        return percentageDone;
-    }
-
-    private _getNewPercentageFinishing(finishingState: TickingFinishingStatus): number {
-        return this._percentageDone + finishingState.increasePercentageEveryTick;
-    }
-}
-
-let _currentProgress: Progress | undefined;
-export const progress = (dispatcher: Dispatch<Action>): Progress => {
-    _currentProgress = _currentProgress || new Progress(dispatcher);
-    return _currentProgress;
-};
-- 
cgit v1.2.3


From d21487d0c07de307bbe9de459f8d3b00e15dc8dc Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 15:47:35 -0700
Subject: Show estimated time

---
 packages/instant/src/components/simulated_progress_bar.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

(limited to 'packages')

diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx
index 1fd76ead7..5742cd474 100644
--- a/packages/instant/src/components/simulated_progress_bar.tsx
+++ b/packages/instant/src/components/simulated_progress_bar.tsx
@@ -96,8 +96,17 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
 
     public render(): React.ReactNode {
         // TODO: Consider moving to seperate component
+
+        const estimatedTimeSeconds = Math.ceil((this.props.expectedEndTimeUnix - this.props.startTimeUnix) / 1000);
         return (
             <Container padding="20px 20px 0px 20px" width="100%">
+                <Container marginBottom="5px">
+                    {/* TODO: consider moving to separate component */}
+                    <Flex justify="space-between">
+                        <Text>Est. Time ({estimatedTimeSeconds} seconds)</Text>
+                        <Text>x</Text>
+                    </Flex>
+                </Container>
                 <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
                     <Container
                         width={`${this.state.percentageDone}%`}
-- 
cgit v1.2.3


From 96fcbeaba6cb63cb25af34a7c8264bd30ddf91be Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 15:55:53 -0700
Subject: Showing time

---
 packages/instant/src/components/simulated_progress_bar.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx
index 5742cd474..e9e547cbe 100644
--- a/packages/instant/src/components/simulated_progress_bar.tsx
+++ b/packages/instant/src/components/simulated_progress_bar.tsx
@@ -43,6 +43,7 @@ export interface SimulatedProgressState {
     percentageDone: number;
     intervalId?: number;
     tickingStatus: TickingStatus;
+    elapsedTimeMs: number;
 }
 export class SimulatedProgressBar extends React.Component<SimulatedProgressBarProps, SimulatedProgressState> {
     public constructor(props: SimulatedProgressBarProps) {
@@ -59,6 +60,7 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
             percentageDone: 0,
             intervalId,
             tickingStatus: { runState: TickingRunState.Running },
+            elapsedTimeMs: 0,
         };
     }
 
@@ -98,13 +100,15 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
         // TODO: Consider moving to seperate component
 
         const estimatedTimeSeconds = Math.ceil((this.props.expectedEndTimeUnix - this.props.startTimeUnix) / 1000);
+        const elapsedTimeSeconds = Math.floor(this.state.elapsedTimeMs / 1000);
         return (
             <Container padding="20px 20px 0px 20px" width="100%">
                 <Container marginBottom="5px">
                     {/* TODO: consider moving to separate component */}
                     <Flex justify="space-between">
+                        {/* TODO: should do nice display of these (i.e. 'minutes' and 00:xx) */}
                         <Text>Est. Time ({estimatedTimeSeconds} seconds)</Text>
-                        <Text>x</Text>
+                        <Text>Time: {elapsedTimeSeconds}</Text>
                     </Flex>
                 </Container>
                 <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
@@ -126,6 +130,7 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
             percentageDone: 0,
             intervalId,
             tickingStatus: { runState: TickingRunState.Running },
+            elapsedTimeMs: 0,
         };
     }
 
@@ -138,8 +143,11 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
             this.state.tickingStatus.runState === TickingRunState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE;
         const percentageDone = Math.min(rawPercentageDone, maxPercentage);
 
+        const elapsedTimeMs = Math.max(curTimeUnix() - this.props.startTimeUnix, 0);
+
         this.setState({
             percentageDone,
+            elapsedTimeMs,
         });
 
         if (percentageDone >= 100) {
-- 
cgit v1.2.3


From 9cc82308e504a62a2bd3b16e79173a98279fdb66 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 16:39:52 -0700
Subject: Always return estimated time, just use default if not known

---
 packages/instant/src/util/gas_price_estimator.ts | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/gas_price_estimator.ts b/packages/instant/src/util/gas_price_estimator.ts
index 0552ccde1..6b15809a3 100644
--- a/packages/instant/src/util/gas_price_estimator.ts
+++ b/packages/instant/src/util/gas_price_estimator.ts
@@ -1,6 +1,11 @@
 import { BigNumber, fetchAsync } from '@0x/utils';
 
-import { DEFAULT_GAS_PRICE, ETH_GAS_STATION_API_BASE_URL, GWEI_IN_WEI } from '../constants';
+import {
+    DEFAULT_ESTIMATED_TRANSACTION_TIME_MS,
+    DEFAULT_GAS_PRICE,
+    ETH_GAS_STATION_API_BASE_URL,
+    GWEI_IN_WEI,
+} from '../constants';
 
 interface EthGasStationResult {
     average: number;
@@ -18,7 +23,7 @@ interface EthGasStationResult {
 
 interface GasInfo {
     gasPriceInWei: BigNumber;
-    estimatedTimeMs?: number;
+    estimatedTimeMs: number;
 }
 
 const fetchFastAmountInWeiAsync = async (): Promise<GasInfo> => {
@@ -45,7 +50,13 @@ export class GasPriceEstimator {
             this._lastFetched = fetchedAmount;
         }
 
-        return fetchedAmount || this._lastFetched || { gasPriceInWei: DEFAULT_GAS_PRICE, estimatedTimeMs: undefined };
+        return (
+            fetchedAmount ||
+            this._lastFetched || {
+                gasPriceInWei: DEFAULT_GAS_PRICE,
+                estimatedTimeMs: DEFAULT_ESTIMATED_TRANSACTION_TIME_MS,
+            }
+        );
     }
 }
 export const gasPriceEstimator = new GasPriceEstimator();
-- 
cgit v1.2.3


From 1c0569cfc61d7b166d79d2d73e9bbc6d11a5b4e8 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 16:40:51 -0700
Subject: Use simulated progress bar for txn

---
 packages/instant/src/components/buy_button.tsx     | 14 +++--
 .../src/components/buy_order_state_buttons.tsx     | 39 ++++++++----
 packages/instant/src/constants.ts                  |  1 +
 .../selected_asset_buy_order_state_buttons.ts      | 70 +++++++++++++++++++---
 .../selected_asset_simulated_progress_bar.tsx      | 26 ++++----
 packages/instant/src/types.ts                      |  3 +-
 6 files changed, 108 insertions(+), 45 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index ec1010fe9..d10936d05 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -19,9 +19,9 @@ export interface BuyButtonProps {
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
 }
 
 export class BuyButton extends React.Component<BuyButtonProps> {
@@ -73,16 +73,18 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             throw e;
         }
 
-        this.props.onBuyProcessing(buyQuote, txHash, gasInfo.estimatedTimeMs);
+        const startTimeUnix = new Date().getTime();
+        const expectedEndTimeUnix = startTimeUnix + gasInfo.estimatedTimeMs;
+        this.props.onBuyProcessing(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
         try {
             await web3Wrapper.awaitTransactionSuccessAsync(txHash);
         } catch (e) {
             if (e instanceof Error && e.message.startsWith(WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX)) {
-                this.props.onBuyFailure(buyQuote, txHash);
+                this.props.onBuyFailure(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
                 return;
             }
             throw e;
         }
-        this.props.onBuySuccess(buyQuote, txHash);
+        this.props.onBuySuccess(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
     };
 }
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index d01e9ff57..6f197a772 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -6,6 +6,7 @@ import { SecondaryButton } from '../components/secondary_button';
 import { Flex } from '../components/ui/flex';
 
 import { PlacingOrderButton } from '../components/placing_order_button';
+import { SimulatedProgressBar } from '../components/simulated_progress_bar';
 import { ColorOption } from '../style/theme';
 import { OrderProcessState, ZeroExInstantError } from '../types';
 
@@ -20,10 +21,13 @@ export interface BuyOrderStateButtonProps {
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
     onRetry: () => void;
+
+    // TODO: dont commit!
+    secondaryProgressDemo: () => void;
 }
 
 // TODO: rename to buttons
@@ -50,16 +54,25 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
         return <PlacingOrderButton />;
     }
 
+    const curTime = new Date().getTime();
+    const expectedEndTime = curTime + 5000;
     return (
-        <BuyButton
-            buyQuote={props.buyQuote}
-            assetBuyer={props.assetBuyer}
-            onValidationPending={props.onValidationPending}
-            onValidationFail={props.onValidationFail}
-            onSignatureDenied={props.onSignatureDenied}
-            onBuyProcessing={props.onBuyProcessing}
-            onBuySuccess={props.onBuySuccess}
-            onBuyFailure={props.onBuyFailure}
-        />
+        <div>
+            {/* <div style={{ marginBottom: '20px' }}>
+                <SimulatedProgressBar startTimeUnix={curTime} expectedEndTimeUnix={expectedEndTime} ended={false} />
+            </div> */}
+
+            <SecondaryButton onClick={props.secondaryProgressDemo}>New progress bar demo</SecondaryButton>
+            <BuyButton
+                buyQuote={props.buyQuote}
+                assetBuyer={props.assetBuyer}
+                onValidationPending={props.onValidationPending}
+                onValidationFail={props.onValidationFail}
+                onSignatureDenied={props.onSignatureDenied}
+                onBuyProcessing={props.onBuyProcessing}
+                onBuySuccess={props.onBuySuccess}
+                onBuyFailure={props.onBuyFailure}
+            />
+        </div>
     );
 };
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index e099044df..12e592ae8 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -5,6 +5,7 @@ export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
 export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
 export const GWEI_IN_WEI = new BigNumber(1000000000);
 export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
+export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = 2 * 60 * 1000; // 2 minutes
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
 export const PROGRESS_TICK_INTERVAL_MS = 100;
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 3750e5219..5cfd1ff6c 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -21,11 +21,12 @@ interface ConnectedState {
 interface ConnectedDispatch {
     onValidationPending: (buyQuote: BuyQuote) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
     onRetry: () => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
+    secondaryProgressDemo: () => void;
 }
 export interface SelectedAssetBuyOrderStateButtons {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => ({
@@ -59,14 +60,42 @@ const mapDispatchToProps = (
         const newOrderState: OrderState = { processState: OrderProcessState.VALIDATING };
         dispatch(actions.updateBuyOrderState(newOrderState));
     },
-    onBuyProcessing: (buyQuote: BuyQuote, txHash: string, estimatedTimeMs?: number) => {
-        const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash, estimatedTimeMs };
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => {
+        const newOrderState: OrderState = {
+            processState: OrderProcessState.PROCESSING,
+            txHash,
+            progress: {
+                startTimeUnix,
+                expectedEndTimeUnix,
+                ended: false,
+            },
+        };
         dispatch(actions.updateBuyOrderState(newOrderState));
     },
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
+        dispatch(
+            actions.updateBuyOrderState({
+                processState: OrderProcessState.SUCCESS,
+                txHash,
+                progress: {
+                    startTimeUnix,
+                    expectedEndTimeUnix,
+                    ended: true,
+                },
+            }),
+        ),
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
+        dispatch(
+            actions.updateBuyOrderState({
+                processState: OrderProcessState.FAILURE,
+                txHash,
+                progress: {
+                    startTimeUnix,
+                    expectedEndTimeUnix,
+                    ended: true,
+                },
+            }),
+        ),
     onSignatureDenied: () => {
         dispatch(actions.resetAmount());
         const errorMessage = 'You denied this transaction';
@@ -84,6 +113,29 @@ const mapDispatchToProps = (
     onRetry: () => {
         dispatch(actions.resetAmount());
     },
+    secondaryProgressDemo: () => {
+        const nowTime = new Date().getTime();
+        const futureTime = nowTime + 5000;
+        dispatch(
+            actions.updateSimulatedOrderProgress({
+                startTimeUnix: nowTime,
+                expectedEndTimeUnix: futureTime,
+                ended: false,
+            }),
+        );
+
+        window.setTimeout(() => {
+            console.log('simulate finishing');
+
+            dispatch(
+                actions.updateSimulatedOrderProgress({
+                    startTimeUnix: nowTime,
+                    expectedEndTimeUnix: futureTime,
+                    ended: true,
+                }),
+            );
+        }, 2000);
+    },
 });
 
 export const SelectedAssetBuyOrderStateButtons: React.ComponentClass<SelectedAssetBuyOrderStateButtons> = connect(
diff --git a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
index 1ddb4ae66..adb5daad8 100644
--- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
+++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
@@ -9,27 +9,23 @@ import { OrderProcessState, OrderState, SimulatedProgress } from '../types';
 
 interface SelectedAssetProgressComponentProps {
     buyOrderState: OrderState;
-    simulatedProgress?: SimulatedProgress;
 }
 export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent<
     SelectedAssetProgressComponentProps
 > = props => {
-    const { buyOrderState, simulatedProgress } = props;
-
-    console.log('simulatedProgress', simulatedProgress);
-
-    // TODO: uncomment after done testing
-    // const isOrderStateOk =
-    //     buyOrderState.processState === OrderProcessState.PROCESSING ||
-    //     buyOrderState.processState === OrderProcessState.SUCCESS;
-    const isOrderStateOk = true;
-
-    if (isOrderStateOk && simulatedProgress) {
+    const { buyOrderState } = props;
+
+    if (
+        buyOrderState.processState === OrderProcessState.PROCESSING ||
+        buyOrderState.processState === OrderProcessState.SUCCESS ||
+        buyOrderState.processState === OrderProcessState.FAILURE
+    ) {
+        const progress = buyOrderState.progress;
         return (
             <SimulatedProgressBar
-                startTimeUnix={simulatedProgress.startTimeUnix}
-                expectedEndTimeUnix={simulatedProgress.expectedEndTimeUnix}
-                ended={simulatedProgress.ended}
+                startTimeUnix={progress.startTimeUnix}
+                expectedEndTimeUnix={progress.expectedEndTimeUnix}
+                ended={progress.ended}
             />
         );
     }
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 58d6692e4..34893676d 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -28,8 +28,7 @@ interface OrderStatePreTx {
 interface OrderStatePostTx {
     processState: OrderProcessState.PROCESSING | OrderProcessState.SUCCESS | OrderProcessState.FAILURE;
     txHash: string;
-    // TODO: move/rename?
-    estimatedTimeMs?: number;
+    progress: SimulatedProgress;
 }
 export type OrderState = OrderStatePreTx | OrderStatePostTx;
 
-- 
cgit v1.2.3


From 9787d1085da225ac3180983065f63d26a6bab3e6 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 16:43:58 -0700
Subject: Get rid of old demo

---
 .../src/components/buy_order_state_buttons.tsx     | 11 ----------
 .../selected_asset_buy_order_state_buttons.ts      | 24 ----------------------
 .../selected_asset_simulated_progress_bar.tsx      |  1 -
 packages/instant/src/redux/actions.ts              |  3 ---
 packages/instant/src/redux/reducer.ts              |  6 ------
 5 files changed, 45 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 6f197a772..df1664cd9 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -25,12 +25,8 @@ export interface BuyOrderStateButtonProps {
     onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
     onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
     onRetry: () => void;
-
-    // TODO: dont commit!
-    secondaryProgressDemo: () => void;
 }
 
-// TODO: rename to buttons
 export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
     if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
         return (
@@ -54,15 +50,8 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
         return <PlacingOrderButton />;
     }
 
-    const curTime = new Date().getTime();
-    const expectedEndTime = curTime + 5000;
     return (
         <div>
-            {/* <div style={{ marginBottom: '20px' }}>
-                <SimulatedProgressBar startTimeUnix={curTime} expectedEndTimeUnix={expectedEndTime} ended={false} />
-            </div> */}
-
-            <SecondaryButton onClick={props.secondaryProgressDemo}>New progress bar demo</SecondaryButton>
             <BuyButton
                 buyQuote={props.buyQuote}
                 assetBuyer={props.assetBuyer}
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 5cfd1ff6c..247d57938 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -26,7 +26,6 @@ interface ConnectedDispatch {
     onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
     onRetry: () => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
-    secondaryProgressDemo: () => void;
 }
 export interface SelectedAssetBuyOrderStateButtons {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => ({
@@ -113,29 +112,6 @@ const mapDispatchToProps = (
     onRetry: () => {
         dispatch(actions.resetAmount());
     },
-    secondaryProgressDemo: () => {
-        const nowTime = new Date().getTime();
-        const futureTime = nowTime + 5000;
-        dispatch(
-            actions.updateSimulatedOrderProgress({
-                startTimeUnix: nowTime,
-                expectedEndTimeUnix: futureTime,
-                ended: false,
-            }),
-        );
-
-        window.setTimeout(() => {
-            console.log('simulate finishing');
-
-            dispatch(
-                actions.updateSimulatedOrderProgress({
-                    startTimeUnix: nowTime,
-                    expectedEndTimeUnix: futureTime,
-                    ended: true,
-                }),
-            );
-        }, 2000);
-    },
 });
 
 export const SelectedAssetBuyOrderStateButtons: React.ComponentClass<SelectedAssetBuyOrderStateButtons> = connect(
diff --git a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
index adb5daad8..a7acc4cb7 100644
--- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
+++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
@@ -39,6 +39,5 @@ interface ConnectedState {
 }
 const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
     buyOrderState: state.buyOrderState,
-    simulatedProgress: state.simulatedProgress,
 });
 export const SelectedAssetSimulatedProgressBar = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent);
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index c27c188bf..61c273510 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -28,7 +28,6 @@ export enum ActionTypes {
     UPDATE_BUY_ORDER_STATE = 'UPDATE_BUY_ORDER_STATE',
     UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
     UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET',
-    UPDATE_SIMULATED_ORDER_PROGRESS = 'UPDATE_SIMULATED_ORDER_PROGRESS',
     SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING',
     SET_QUOTE_REQUEST_STATE_FAILURE = 'SET_QUOTE_REQUEST_STATE_FAILURE',
     SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE',
@@ -44,8 +43,6 @@ export const actions = {
     updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
     updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
-    updateSimulatedOrderProgress: (orderProgress: SimulatedProgress) =>
-        createAction(ActionTypes.UPDATE_SIMULATED_ORDER_PROGRESS, orderProgress),
     setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING),
     setQuoteRequestStateFailure: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE),
     setErrorMessage: (errorMessage: string) => createAction(ActionTypes.SET_ERROR_MESSAGE, errorMessage),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 3540bd4eb..35c0ceee6 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -32,7 +32,6 @@ export interface State {
     quoteRequestState: AsyncProcessState;
     latestErrorMessage?: string;
     latestErrorDisplayStatus: DisplayStatus;
-    simulatedProgress?: SimulatedProgress;
 }
 
 export const INITIAL_STATE: State = {
@@ -121,11 +120,6 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 selectedAsset: newSelectedAsset,
             };
-        case ActionTypes.UPDATE_SIMULATED_ORDER_PROGRESS:
-            return {
-                ...state,
-                simulatedProgress: action.data,
-            };
         case ActionTypes.RESET_AMOUNT:
             return {
                 ...state,
-- 
cgit v1.2.3


From 0e1e9b27f6f5b93e1f9b0e2833bc600836f8e757 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 16:45:04 -0700
Subject: Takeout unneeded div

---
 .../src/components/buy_order_state_buttons.tsx     | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index df1664cd9..4a6b467d2 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -51,17 +51,15 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
     }
 
     return (
-        <div>
-            <BuyButton
-                buyQuote={props.buyQuote}
-                assetBuyer={props.assetBuyer}
-                onValidationPending={props.onValidationPending}
-                onValidationFail={props.onValidationFail}
-                onSignatureDenied={props.onSignatureDenied}
-                onBuyProcessing={props.onBuyProcessing}
-                onBuySuccess={props.onBuySuccess}
-                onBuyFailure={props.onBuyFailure}
-            />
-        </div>
+        <BuyButton
+            buyQuote={props.buyQuote}
+            assetBuyer={props.assetBuyer}
+            onValidationPending={props.onValidationPending}
+            onValidationFail={props.onValidationFail}
+            onSignatureDenied={props.onSignatureDenied}
+            onBuyProcessing={props.onBuyProcessing}
+            onBuySuccess={props.onBuySuccess}
+            onBuyFailure={props.onBuyFailure}
+        />
     );
 };
-- 
cgit v1.2.3


From 91f8487947d7941b508c34d1bfc1e72c0840c33d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 30 Oct 2018 16:57:42 -0700
Subject: feat: implement sliding panel

---
 .../components/animations/position_animation.tsx   |  9 +--
 .../src/components/animations/slide_animation.tsx  | 23 +++++++
 .../src/components/animations/slide_animations.tsx | 23 -------
 .../instant/src/components/instant_heading.tsx     |  8 ++-
 packages/instant/src/components/panel.tsx          | 28 --------
 packages/instant/src/components/sliding_error.tsx  | 12 ++--
 packages/instant/src/components/sliding_panel.tsx  | 54 +++++++++++++++
 .../src/components/zero_ex_instant_container.tsx   | 78 ++++++++++++++--------
 packages/instant/src/containers/latest_error.tsx   | 10 +--
 .../containers/selected_asset_instant_heading.ts   |  6 +-
 10 files changed, 155 insertions(+), 96 deletions(-)
 create mode 100644 packages/instant/src/components/animations/slide_animation.tsx
 delete mode 100644 packages/instant/src/components/animations/slide_animations.tsx
 delete mode 100644 packages/instant/src/components/panel.tsx
 create mode 100644 packages/instant/src/components/sliding_panel.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index 3d6b5f8dc..aefd7ef30 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Keyframes } from 'styled-components';
 
 import { css, keyframes, styled } from '../../style/theme';
@@ -51,7 +50,7 @@ export interface PositionAnimationSettings {
     left?: TransitionInfo;
     right?: TransitionInfo;
     timingFunction: string;
-    direction?: string;
+    duration?: string;
 }
 
 export interface PositionAnimationProps extends PositionAnimationSettings {
@@ -66,10 +65,12 @@ export const PositionAnimation =
         css`
             ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)};
         `};
-    animation-duration: 0.3s;
+    animation-duration: ${props => props.duration || '0.3s'};
     animation-timing-function: ${props => props.timingFunction};
     animation-delay: 0s;
     animation-iteration-count: 1;
-    animation-fill-mode: ${props => props.direction || 'none'};
+    animation-fill-mode: forwards;
     position: ${props => props.position};
+    height: 100%;
+    width: 100%;
 `;
diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
new file mode 100644
index 000000000..4124e50c3
--- /dev/null
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { PositionAnimation, PositionAnimationSettings } from './position_animation';
+
+export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
+export interface SlideAnimationProps {
+    position: string;
+    animationState: SlideAnimationState;
+    slideIn: PositionAnimationSettings;
+    slideOut: PositionAnimationSettings;
+}
+
+export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
+    if (props.animationState === 'none') {
+        return <React.Fragment>{props.children}</React.Fragment>;
+    }
+    const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut;
+    return (
+        <PositionAnimation position={props.position} {...propsToUse}>
+            {props.children}
+        </PositionAnimation>
+    );
+};
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
deleted file mode 100644
index 9f1535297..000000000
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { Keyframes } from 'styled-components';
-
-import { css, keyframes, styled } from '../../style/theme';
-
-import { PositionAnimation, PositionAnimationSettings } from './position_animation';
-
-export type SlideAnimationPhase = 'slideIn' | 'slideOut';
-export interface SlideAnimationProps {
-    position: string;
-    phase: SlideAnimationPhase;
-    slideIn: PositionAnimationSettings;
-    slideOut: PositionAnimationSettings;
-}
-
-export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
-    const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
-    return (
-        <PositionAnimation position={props.position} {...propsToUse}>
-            {props.children}
-        </PositionAnimation>
-    );
-};
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index e1c2f8bc3..08efd1b64 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { SelectedERC20AssetAmountInput } from '../containers/selected_erc20_asset_amount_input';
 import { ColorOption } from '../style/theme';
-import { AsyncProcessState, OrderProcessState, OrderState } from '../types';
+import { AsyncProcessState, ERC20Asset, OrderProcessState, OrderState } from '../types';
 import { format } from '../util/format';
 
 import { AmountPlaceholder } from './amount_placeholder';
@@ -16,6 +16,7 @@ export interface InstantHeadingProps {
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
     buyOrderState: OrderState;
+    onSymbolClick?: (asset?: ERC20Asset) => void;
 }
 
 const PLACEHOLDER_COLOR = ColorOption.white;
@@ -47,7 +48,10 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 </Container>
                 <Flex direction="row" justify="space-between">
                     <Flex height="60px">
-                        <SelectedERC20AssetAmountInput startingFontSizePx={38} />
+                        <SelectedERC20AssetAmountInput
+                            startingFontSizePx={38}
+                            onSymbolClick={this.props.onSymbolClick}
+                        />
                     </Flex>
                     <Flex direction="column" justify="space-between">
                         {iconOrAmounts}
diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx
deleted file mode 100644
index ecefadced..000000000
--- a/packages/instant/src/components/panel.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-
-import { ColorOption } from '../style/theme';
-import { zIndex } from '../style/z_index';
-
-import { Button, Container, Text } from './ui';
-
-export interface PanelProps {
-    onClose?: () => void;
-}
-
-export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
-    <Container
-        backgroundColor={ColorOption.white}
-        // position="absolute"
-        // left="0px"
-        // bottom="0px"
-        // width="100%"
-        // height="100%"
-        height="100%"
-        zIndex={zIndex.panel}
-    >
-        <Button onClick={onClose}>
-            <Text fontColor={ColorOption.white}>Close </Text>
-        </Button>
-        {children}
-    </Container>
-);
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 0ad11bbad..a89e201c0 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ColorOption } from '../style/theme';
 
 import { PositionAnimationSettings } from './animations/position_animation';
-import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations';
+import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
 
 import { Container, Flex, Text } from './ui';
 
@@ -33,7 +33,7 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
 );
 
 export interface SlidingErrorProps extends ErrorProps {
-    phase: SlideAnimationPhase;
+    animationState: SlideAnimationState;
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
     const slideAmount = '120px';
@@ -50,10 +50,14 @@ export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props =
             from: '0px',
             to: slideAmount,
         },
-        direction: 'forwards',
     };
     return (
-        <SlideAnimation position="relative" slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
+        <SlideAnimation
+            position="relative"
+            slideIn={slideUp}
+            slideOut={slideDown}
+            animationState={props.animationState}
+        >
             <Error icon={props.icon} message={props.message} />
         </SlideAnimation>
     );
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
new file mode 100644
index 000000000..19034eb95
--- /dev/null
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+import { zIndex } from '../style/z_index';
+
+import { PositionAnimationSettings } from './animations/position_animation';
+import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
+import { Button, Container, Text } from './ui';
+
+export interface PanelProps {
+    onClose?: () => void;
+}
+
+export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
+    <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel}>
+        <Button onClick={onClose}>
+            <Text fontColor={ColorOption.white}>Close </Text>
+        </Button>
+        {children}
+    </Container>
+);
+
+export interface SlidingPanelProps extends PanelProps {
+    animationState: SlideAnimationState;
+}
+
+export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props => {
+    if (props.animationState === 'none') {
+        return null;
+    }
+    const { animationState, ...rest } = props;
+    const slideAmount = '100%';
+    const slideUp: PositionAnimationSettings = {
+        duration: '0.3s',
+        timingFunction: 'ease-in-out',
+        top: {
+            from: slideAmount,
+            to: '0px',
+        },
+    };
+    const slideDown: PositionAnimationSettings = {
+        duration: '0.3s',
+        timingFunction: 'ease-out',
+        top: {
+            from: '0px',
+            to: slideAmount,
+        },
+    };
+    return (
+        <SlideAnimation position="absolute" slideIn={slideUp} slideOut={slideDown} animationState={animationState}>
+            <Panel {...rest} />
+        </SlideAnimation>
+    );
+};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index c8d5235c8..818a9a957 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -7,36 +7,58 @@ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instan
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
 
-import { Panel } from './panel';
+import { SlideAnimationState } from './animations/slide_animation';
+import { SlidingPanel } from './sliding_panel';
 import { Container, Flex } from './ui';
 
 export interface ZeroExInstantContainerProps {}
+export interface ZeroExInstantContainerState {
+    tokenSelectionPanelAnimationState: SlideAnimationState;
+}
 
-export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
-    <Container width="350px" position="relative">
-        <Container zIndex={zIndex.errorPopup} position="relative">
-            <LatestError />
-        </Container>
-        <Container
-            zIndex={zIndex.mainContainer}
-            position="relative"
-            backgroundColor={ColorOption.white}
-            borderRadius="3px"
-            hasBoxShadow={true}
-            overflow="hidden"
-        >
-            <Flex direction="column" justify="flex-start">
-                <SelectedAssetInstantHeading />
-                <LatestBuyQuoteOrderDetails />
-                <Container padding="20px" width="100%">
-                    <SelectedAssetBuyOrderStateButtons />
+export class ZeroExInstantContainer extends React.Component<ZeroExInstantContainerProps, ZeroExInstantContainerState> {
+    public state = {
+        tokenSelectionPanelAnimationState: 'none' as SlideAnimationState,
+    };
+    public render(): React.ReactNode {
+        return (
+            <Container width="350px" position="relative">
+                <Container zIndex={zIndex.errorPopup} position="relative">
+                    <LatestError />
                 </Container>
-            </Flex>
-            {/* <Container position="absolute" left="0px" bottom="0px" width="100%" height="100%">
-                <SlideAnimationHelper direction="up" downY="200px">
-                    <Panel> Hey </Panel>
-                </SlideAnimationHelper>
-            </Container> */}
-        </Container>
-    </Container>
-);
+                <Container
+                    zIndex={zIndex.mainContainer}
+                    position="relative"
+                    backgroundColor={ColorOption.white}
+                    borderRadius="3px"
+                    hasBoxShadow={true}
+                    overflow="hidden"
+                >
+                    <Flex direction="column" justify="flex-start">
+                        <SelectedAssetInstantHeading onSymbolClick={this._handleSymbolClick} />
+                        <LatestBuyQuoteOrderDetails />
+                        <Container padding="20px" width="100%">
+                            <SelectedAssetBuyOrderStateButtons />
+                        </Container>
+                    </Flex>
+                    <SlidingPanel
+                        animationState={this.state.tokenSelectionPanelAnimationState}
+                        onClose={this._handlePanelClose}
+                    >
+                        Select Your Token
+                    </SlidingPanel>
+                </Container>
+            </Container>
+        );
+    }
+    private readonly _handleSymbolClick = (): void => {
+        this.setState({
+            tokenSelectionPanelAnimationState: 'slidIn',
+        });
+    };
+    private readonly _handlePanelClose = (): void => {
+        this.setState({
+            tokenSelectionPanelAnimationState: 'slidOut',
+        });
+    };
+}
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 2a8d232da..99e55a6c4 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { connect } from 'react-redux';
 
-import { SlideAnimationPhase } from '../components/animations/slide_animations';
+import { SlideAnimationState } from '../components/animations/slide_animation';
 import { SlidingError } from '../components/sliding_error';
 import { State } from '../redux/reducer';
 import { Asset, DisplayStatus } from '../types';
@@ -10,26 +10,26 @@ import { Asset, DisplayStatus } from '../types';
 export interface LatestErrorComponentProps {
     asset?: Asset;
     latestErrorMessage?: string;
-    slidingPhase: SlideAnimationPhase;
+    animationState: SlideAnimationState;
 }
 
 export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
     if (!props.latestErrorMessage) {
         return <div />;
     }
-    return <SlidingError phase={props.slidingPhase} icon="😢" message={props.latestErrorMessage} />;
+    return <SlidingError animationState={props.animationState} icon="😢" message={props.latestErrorMessage} />;
 };
 
 interface ConnectedState {
     asset?: Asset;
     latestErrorMessage?: string;
-    slidingPhase: SlideAnimationPhase;
+    animationState: SlideAnimationState;
 }
 export interface LatestErrorProps {}
 const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
     asset: state.selectedAsset,
     latestErrorMessage: state.latestErrorMessage,
-    slidingPhase: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slideIn' : 'slideOut',
+    animationState: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slidIn' : 'slidOut',
 });
 
 export const LatestError = connect(mapStateToProps)(LatestErrorComponent);
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index 6b2a29b07..e413c7ef1 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -5,11 +5,13 @@ import { connect } from 'react-redux';
 import { oc } from 'ts-optchain';
 
 import { State } from '../redux/reducer';
-import { AsyncProcessState, OrderState } from '../types';
+import { AsyncProcessState, ERC20Asset, OrderState } from '../types';
 
 import { InstantHeading } from '../components/instant_heading';
 
-export interface InstantHeadingProps {}
+export interface InstantHeadingProps {
+    onSymbolClick?: (asset?: ERC20Asset) => void;
+}
 
 interface ConnectedState {
     selectedAssetAmount?: BigNumber;
-- 
cgit v1.2.3


From 229f11f164ce5109b771295d9aee8ebb74314181 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 30 Oct 2018 20:18:21 -0700
Subject: Nice formatting of displayed time

---
 .../src/components/simulated_progress_bar.tsx      |  9 ++--
 packages/instant/src/util/time.ts                  | 39 ++++++++++++++++++
 packages/instant/test/util/time.test.ts            | 48 ++++++++++++++++++++++
 3 files changed, 90 insertions(+), 6 deletions(-)
 create mode 100644 packages/instant/src/util/time.ts
 create mode 100644 packages/instant/test/util/time.test.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx
index e9e547cbe..e4b08db8c 100644
--- a/packages/instant/src/components/simulated_progress_bar.tsx
+++ b/packages/instant/src/components/simulated_progress_bar.tsx
@@ -1,11 +1,9 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Dispatch } from 'redux';
 
 import { PROGRESS_STALL_AT_PERCENTAGE, PROGRESS_TICK_INTERVAL_MS } from '../constants';
-import { Action, actions } from '../redux/actions';
-
 import { ColorOption } from '../style/theme';
+import { timeUtil } from '../util/time';
 
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
@@ -106,9 +104,8 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
                 <Container marginBottom="5px">
                     {/* TODO: consider moving to separate component */}
                     <Flex justify="space-between">
-                        {/* TODO: should do nice display of these (i.e. 'minutes' and 00:xx) */}
-                        <Text>Est. Time ({estimatedTimeSeconds} seconds)</Text>
-                        <Text>Time: {elapsedTimeSeconds}</Text>
+                        <Text>Est. Time ({timeUtil.secondsToHumanDescription(estimatedTimeSeconds)})</Text>
+                        <Text>Time: {timeUtil.secondsToStopwatchTime(elapsedTimeSeconds)}</Text>
                     </Flex>
                 </Container>
                 <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
diff --git a/packages/instant/src/util/time.ts b/packages/instant/src/util/time.ts
new file mode 100644
index 000000000..bfe69cad5
--- /dev/null
+++ b/packages/instant/src/util/time.ts
@@ -0,0 +1,39 @@
+const secondsToMinutesAndRemainingSeconds = (seconds: number): { minutes: number; remainingSeconds: number } => {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds - minutes * 60;
+
+    return {
+        minutes,
+        remainingSeconds,
+    };
+};
+
+const padZero = (aNumber: number): string => {
+    return aNumber < 10 ? `0${aNumber}` : aNumber.toString();
+};
+
+export const timeUtil = {
+    // converts seconds to human readable version of seconds or minutes
+    secondsToHumanDescription: (seconds: number): string => {
+        const { minutes, remainingSeconds } = secondsToMinutesAndRemainingSeconds(seconds);
+
+        if (minutes === 0) {
+            const suffix = seconds > 1 ? 's' : '';
+            return `${seconds} second${suffix}`;
+        }
+
+        const minuteSuffix = minutes > 1 ? 's' : '';
+        const minuteText = `${minutes} minute${minuteSuffix}`;
+
+        const secondsSuffix = remainingSeconds > 1 ? 's' : '';
+        const secondsText = remainingSeconds === 0 ? '' : ` ${remainingSeconds} second${secondsSuffix}`;
+
+        return `${minuteText}${secondsText}`;
+    },
+    // converts seconds to stopwatch time (i.e. 05:30 and 00:30)
+    // only goes up to minutes, not hours
+    secondsToStopwatchTime: (seconds: number): string => {
+        const { minutes, remainingSeconds } = secondsToMinutesAndRemainingSeconds(seconds);
+        return `${padZero(minutes)}:${padZero(remainingSeconds)}`;
+    },
+};
diff --git a/packages/instant/test/util/time.test.ts b/packages/instant/test/util/time.test.ts
new file mode 100644
index 000000000..7165761de
--- /dev/null
+++ b/packages/instant/test/util/time.test.ts
@@ -0,0 +1,48 @@
+import { timeUtil } from '../../src/util/time';
+
+describe('assetDataUtil', () => {
+    describe('secondsToHumanDescription', () => {
+        const numsToResults: {
+            [aNumber: number]: string;
+        } = {
+            1: '1 second',
+            59: '59 seconds',
+            60: '1 minute',
+            119: '1 minute 59 seconds',
+            120: '2 minutes',
+            121: '2 minutes 1 second',
+            122: '2 minutes 2 seconds',
+        };
+
+        const nums = Object.keys(numsToResults);
+        nums.forEach(aNum => {
+            const numInt = parseInt(aNum, 10);
+            it(`should work for ${aNum} seconds`, () => {
+                const expectedResult = numsToResults[numInt];
+                expect(timeUtil.secondsToHumanDescription(numInt)).toEqual(expectedResult);
+            });
+        });
+    });
+    describe('secondsToStopwatchTime', () => {
+        const numsToResults: {
+            [aNumber: number]: string;
+        } = {
+            1: '00:01',
+            59: '00:59',
+            60: '01:00',
+            119: '01:59',
+            120: '02:00',
+            121: '02:01',
+            2701: '45:01',
+        };
+
+        const nums = Object.keys(numsToResults);
+        nums.forEach(aNum => {
+            const numInt = parseInt(aNum, 10);
+            it(`should work for ${aNum} seconds`, () => {
+                const expectedResult = numsToResults[numInt];
+                expect(timeUtil.secondsToStopwatchTime(numInt)).toEqual(expectedResult);
+            });
+        });
+    });
+});
-- 
cgit v1.2.3


From 9a5b52036b8765a6de464d8c6294b46ebcfd604e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 31 Oct 2018 08:14:44 -0700
Subject: Tick less often, and let CSS style the transition

---
 .../src/components/simulated_progress_bar.tsx      | 26 +++++++++++++++++++---
 packages/instant/src/constants.ts                  |  2 +-
 2 files changed, 24 insertions(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx
index e4b08db8c..067f4093e 100644
--- a/packages/instant/src/components/simulated_progress_bar.tsx
+++ b/packages/instant/src/components/simulated_progress_bar.tsx
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { PROGRESS_STALL_AT_PERCENTAGE, PROGRESS_TICK_INTERVAL_MS } from '../constants';
-import { ColorOption } from '../style/theme';
+import { ColorOption, styled } from '../style/theme';
 import { timeUtil } from '../util/time';
 
 import { Container } from './ui/container';
@@ -109,11 +109,12 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
                     </Flex>
                 </Container>
                 <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
-                    <Container
-                        width={`${this.state.percentageDone}%`}
+                    <InnerProgressBarElement
+                        percentageDone={this.state.percentageDone}
                         backgroundColor={ColorOption.primaryColor}
                         borderRadius="6px"
                         height="6px"
+                        transitionTimeMs={200}
                     />
                 </Container>
             </Container>
@@ -172,3 +173,22 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
         return percentageDone;
     }
 }
+
+interface InnerProgressBarElementProps {
+    percentageDone: number;
+    backgroundColor: ColorOption;
+    borderRadius: string;
+    height: string;
+    transitionTimeMs: number;
+}
+
+export const InnerProgressBarElement =
+    styled.div <
+    InnerProgressBarElementProps >
+    `
+    width: ${props => props.percentageDone}%;
+    background-color: ${props => props.theme[props.backgroundColor]};
+    border-radius: ${props => props.borderRadius};
+    height: ${props => props.height};
+    transition: width ${props => props.transitionTimeMs}ms ease-in-out;
+    `;
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 12e592ae8..3b320ed36 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -8,5 +8,5 @@ export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
 export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = 2 * 60 * 1000; // 2 minutes
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
-export const PROGRESS_TICK_INTERVAL_MS = 100;
+export const PROGRESS_TICK_INTERVAL_MS = 250;
 export const PROGRESS_STALL_AT_PERCENTAGE = 95;
-- 
cgit v1.2.3


From d938ba46061fc8d0682f356ea9aba16535466455 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 31 Oct 2018 08:37:21 -0700
Subject: Remove unused import

---
 packages/instant/src/redux/reducer.ts | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 35c0ceee6..dd9403052 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -13,7 +13,6 @@ import {
     Network,
     OrderProcessState,
     OrderState,
-    SimulatedProgress,
 } from '../types';
 import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
-- 
cgit v1.2.3


From d6755472087af76982779728db7424b1171a1b47 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 31 Oct 2018 09:14:50 -0700
Subject: Explicit actions for setting different order states

This allows us to dispatch updates with less syntax, and allows us to not have to send in progress info when setting failure and success
---
 packages/instant/src/components/buy_button.tsx     |  9 +--
 .../src/components/buy_order_state_buttons.tsx     |  5 +-
 .../selected_asset_buy_order_state_buttons.ts      | 46 +++-------------
 .../selected_erc20_asset_amount_input.ts           |  2 +-
 packages/instant/src/redux/actions.ts              | 13 ++++-
 packages/instant/src/redux/reducer.ts              | 64 +++++++++++++++++++++-
 6 files changed, 88 insertions(+), 51 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index d10936d05..c00b1678d 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -20,8 +20,8 @@ export interface BuyButtonProps {
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
 }
 
 export class BuyButton extends React.Component<BuyButtonProps> {
@@ -80,11 +80,12 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             await web3Wrapper.awaitTransactionSuccessAsync(txHash);
         } catch (e) {
             if (e instanceof Error && e.message.startsWith(WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX)) {
-                this.props.onBuyFailure(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
+                this.props.onBuyFailure(buyQuote, txHash);
                 return;
             }
             throw e;
         }
-        this.props.onBuySuccess(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
+
+        this.props.onBuySuccess(buyQuote, txHash);
     };
 }
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 4a6b467d2..3f0764062 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -6,7 +6,6 @@ import { SecondaryButton } from '../components/secondary_button';
 import { Flex } from '../components/ui/flex';
 
 import { PlacingOrderButton } from '../components/placing_order_button';
-import { SimulatedProgressBar } from '../components/simulated_progress_bar';
 import { ColorOption } from '../style/theme';
 import { OrderProcessState, ZeroExInstantError } from '../types';
 
@@ -22,8 +21,8 @@ export interface BuyOrderStateButtonProps {
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
     onRetry: () => void;
 }
 
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 247d57938..a94538ffc 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -22,8 +22,8 @@ interface ConnectedDispatch {
     onValidationPending: (buyQuote: BuyQuote) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
     onRetry: () => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
 }
@@ -56,52 +56,20 @@ const mapDispatchToProps = (
     ownProps: SelectedAssetBuyOrderStateButtons,
 ): ConnectedDispatch => ({
     onValidationPending: (buyQuote: BuyQuote) => {
-        const newOrderState: OrderState = { processState: OrderProcessState.VALIDATING };
-        dispatch(actions.updateBuyOrderState(newOrderState));
+        dispatch(actions.setBuyOrderStateValidating());
     },
     onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => {
-        const newOrderState: OrderState = {
-            processState: OrderProcessState.PROCESSING,
-            txHash,
-            progress: {
-                startTimeUnix,
-                expectedEndTimeUnix,
-                ended: false,
-            },
-        };
-        dispatch(actions.updateBuyOrderState(newOrderState));
+        dispatch(actions.setBuyOrderStateProcessing(txHash, startTimeUnix, expectedEndTimeUnix));
     },
-    onBuySuccess: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
-        dispatch(
-            actions.updateBuyOrderState({
-                processState: OrderProcessState.SUCCESS,
-                txHash,
-                progress: {
-                    startTimeUnix,
-                    expectedEndTimeUnix,
-                    ended: true,
-                },
-            }),
-        ),
-    onBuyFailure: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
-        dispatch(
-            actions.updateBuyOrderState({
-                processState: OrderProcessState.FAILURE,
-                txHash,
-                progress: {
-                    startTimeUnix,
-                    expectedEndTimeUnix,
-                    ended: true,
-                },
-            }),
-        ),
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => dispatch(actions.setBuyOrderStateSuccess(txHash)),
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => dispatch(actions.setBuyOrderStateFailure(txHash)),
     onSignatureDenied: () => {
         dispatch(actions.resetAmount());
         const errorMessage = 'You denied this transaction';
         errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
     },
     onValidationFail: (buyQuote, error) => {
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.NONE }));
+        dispatch(actions.setBuyOrderStateNone());
         if (error === ZeroExInstantError.InsufficientETH) {
             const errorMessage = "You don't have enough ETH";
             errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 4767b15d4..c0245f721 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -113,7 +113,7 @@ const mapDispatchToProps = (
         // invalidate the last buy quote.
         dispatch(actions.updateLatestBuyQuote(undefined));
         // reset our buy state
-        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.NONE }));
+        dispatch(actions.setBuyOrderStateNone());
 
         if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
             // even if it's debounced, give them the illusion it's loading
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 61c273510..627e39ffc 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -25,7 +25,11 @@ function createAction<T extends string, P>(type: T, data?: P): PlainAction<T> |
 export enum ActionTypes {
     UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE',
     UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT',
-    UPDATE_BUY_ORDER_STATE = 'UPDATE_BUY_ORDER_STATE',
+    SET_BUY_ORDER_STATE_NONE = 'SET_BUY_ORDER_STATE_NONE',
+    SET_BUY_ORDER_STATE_VALIDATING = 'SET_BUY_ORDER_STATE_VALIDATING',
+    SET_BUY_ORDER_STATE_PROCESSING = 'SET_BUY_ORDER_STATE_PROCESSING',
+    SET_BUY_ORDER_STATE_FAILURE = 'SET_BUY_ORDER_STATE_FAILURE',
+    SET_BUY_ORDER_STATE_SUCCESS = 'SET_BUY_ORDER_STATE_SUCCESS',
     UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
     UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET',
     SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING',
@@ -40,7 +44,12 @@ export const actions = {
     updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
     updateSelectedAssetAmount: (amount?: BigNumberInput) =>
         createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
-    updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
+    setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE),
+    setBuyOrderStateValidating: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_VALIDATING),
+    setBuyOrderStateProcessing: (txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
+        createAction(ActionTypes.SET_BUY_ORDER_STATE_PROCESSING, { txHash, startTimeUnix, expectedEndTimeUnix }),
+    setBuyOrderStateFailure: (txHash: string) => createAction(ActionTypes.SET_BUY_ORDER_STATE_FAILURE, txHash),
+    setBuyOrderStateSuccess: (txHash: string) => createAction(ActionTypes.SET_BUY_ORDER_STATE_SUCCESS, txHash),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
     updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
     setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index dd9403052..11980066b 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -83,11 +83,71 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 latestBuyQuote: undefined,
                 quoteRequestState: AsyncProcessState.FAILURE,
             };
-        case ActionTypes.UPDATE_BUY_ORDER_STATE:
+        case ActionTypes.SET_BUY_ORDER_STATE_NONE:
             return {
                 ...state,
-                buyOrderState: action.data,
+                buyOrderState: { processState: OrderProcessState.NONE },
+            };
+        case ActionTypes.SET_BUY_ORDER_STATE_VALIDATING:
+            return {
+                ...state,
+                buyOrderState: { processState: OrderProcessState.VALIDATING },
             };
+        case ActionTypes.SET_BUY_ORDER_STATE_PROCESSING:
+            const processingData = action.data;
+            const { startTimeUnix, expectedEndTimeUnix } = processingData;
+            return {
+                ...state,
+                buyOrderState: {
+                    processState: OrderProcessState.PROCESSING,
+                    txHash: processingData.txHash,
+                    progress: {
+                        startTimeUnix,
+                        expectedEndTimeUnix,
+                        ended: false,
+                    },
+                },
+            };
+        case ActionTypes.SET_BUY_ORDER_STATE_FAILURE:
+            const failureTxHash = action.data;
+            if ('txHash' in state.buyOrderState) {
+                if (state.buyOrderState.txHash === failureTxHash) {
+                    const failureProgress = {
+                        startTimeUnix: state.buyOrderState.progress.startTimeUnix,
+                        expectedEndTimeUnix: state.buyOrderState.progress.expectedEndTimeUnix,
+                        ended: true,
+                    };
+                    return {
+                        ...state,
+                        buyOrderState: {
+                            processState: OrderProcessState.FAILURE,
+                            txHash: state.buyOrderState.txHash,
+                            progress: failureProgress,
+                        },
+                    };
+                }
+            }
+            return state;
+        case ActionTypes.SET_BUY_ORDER_STATE_SUCCESS:
+            const successTxHash = action.data;
+            if ('txHash' in state.buyOrderState) {
+                if (state.buyOrderState.txHash === successTxHash) {
+                    const successProgress = {
+                        startTimeUnix: state.buyOrderState.progress.startTimeUnix,
+                        expectedEndTimeUnix: state.buyOrderState.progress.expectedEndTimeUnix,
+                        ended: true,
+                    };
+                    return {
+                        ...state,
+                        buyOrderState: {
+                            processState: OrderProcessState.SUCCESS,
+                            txHash: state.buyOrderState.txHash,
+                            progress: successProgress,
+                        },
+                    };
+                }
+            }
+            return state;
         case ActionTypes.SET_ERROR_MESSAGE:
             return {
                 ...state,
-- 
cgit v1.2.3


From cc2719492d72602ecd1c503cf0ecee95cd05db33 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 31 Oct 2018 09:25:18 -0700
Subject: Remove default in state reducer

This allows us to ensure that we explicitly handle every action type
---
 packages/instant/src/redux/reducer.ts | 2 --
 packages/instant/tslint.json          | 3 ++-
 2 files changed, 2 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 11980066b..a3f38c880 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -187,8 +187,6 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 buyOrderState: { processState: OrderProcessState.NONE },
                 selectedAssetAmount: undefined,
             };
-        default:
-            return state;
     }
 };
 
diff --git a/packages/instant/tslint.json b/packages/instant/tslint.json
index 08b76be97..d43ee8da7 100644
--- a/packages/instant/tslint.json
+++ b/packages/instant/tslint.json
@@ -3,6 +3,7 @@
     "rules": {
         "custom-no-magic-numbers": false,
         "semicolon": [true, "always", "ignore-bound-class-methods"],
-        "max-classes-per-file": false
+        "max-classes-per-file": false,
+        "switch-default": false
     }
 }
-- 
cgit v1.2.3


From ad0129fa025012a6a8234db69ee4fa1763d5aff8 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 31 Oct 2018 11:31:55 -0700
Subject: Revert "Remove default in state reducer"

This reverts commit cc2719492d72602ecd1c503cf0ecee95cd05db33.
---
 packages/instant/src/redux/reducer.ts | 2 ++
 packages/instant/tslint.json          | 3 +--
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index a3f38c880..11980066b 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -187,6 +187,8 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 buyOrderState: { processState: OrderProcessState.NONE },
                 selectedAssetAmount: undefined,
             };
+        default:
+            return state;
     }
 };
 
diff --git a/packages/instant/tslint.json b/packages/instant/tslint.json
index d43ee8da7..08b76be97 100644
--- a/packages/instant/tslint.json
+++ b/packages/instant/tslint.json
@@ -3,7 +3,6 @@
     "rules": {
         "custom-no-magic-numbers": false,
         "semicolon": [true, "always", "ignore-bound-class-methods"],
-        "max-classes-per-file": false,
-        "switch-default": false
+        "max-classes-per-file": false
     }
 }
-- 
cgit v1.2.3


From 27258fe3d45b8ffae81b74da43e473ae5905edc1 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 31 Oct 2018 11:55:48 -0700
Subject: chore: address PR feedback

---
 .../src/components/animations/position_animation.tsx       | 14 +++++++++-----
 .../instant/src/components/animations/slide_animation.tsx  |  6 +++---
 .../instant/src/components/buy_order_state_buttons.tsx     | 11 ++++-------
 .../instant/src/components/erc20_asset_amount_input.tsx    |  8 ++++----
 packages/instant/src/components/instant_heading.tsx        |  4 ++--
 packages/instant/src/components/placing_order_button.tsx   |  5 +----
 packages/instant/src/components/secondary_button.tsx       |  3 +--
 packages/instant/src/components/sliding_error.tsx          |  8 ++++----
 packages/instant/src/components/sliding_panel.tsx          | 11 ++++++++---
 packages/instant/src/components/ui/index.ts                | 12 ++++++------
 .../instant/src/components/zero_ex_instant_container.tsx   |  2 +-
 .../src/containers/selected_asset_instant_heading.ts       |  2 +-
 .../src/containers/selected_erc20_asset_amount_input.ts    |  2 +-
 13 files changed, 45 insertions(+), 43 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index aefd7ef30..4bb21befb 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -2,6 +2,11 @@ import { Keyframes } from 'styled-components';
 
 import { css, keyframes, styled } from '../../style/theme';
 
+export interface TransitionInfo {
+    from: string;
+    to: string;
+}
+
 const generateTransitionInfoCss = (
     key: keyof TransitionInfo,
     top?: TransitionInfo,
@@ -39,11 +44,6 @@ const slideKeyframeGenerator = (
     }
 `;
 
-export interface TransitionInfo {
-    from: string;
-    to: string;
-}
-
 export interface PositionAnimationSettings {
     top?: TransitionInfo;
     bottom?: TransitionInfo;
@@ -74,3 +74,7 @@ export const PositionAnimation =
     height: 100%;
     width: 100%;
 `;
+
+PositionAnimation.defaultProps = {
+    position: 'relative',
+};
diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index 4124e50c3..66a314c7f 100644
--- a/packages/instant/src/components/animations/slide_animation.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -6,15 +6,15 @@ export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
 export interface SlideAnimationProps {
     position: string;
     animationState: SlideAnimationState;
-    slideIn: PositionAnimationSettings;
-    slideOut: PositionAnimationSettings;
+    slideInSettings: PositionAnimationSettings;
+    slideOutSettings: PositionAnimationSettings;
 }
 
 export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
     if (props.animationState === 'none') {
         return <React.Fragment>{props.children}</React.Fragment>;
     }
-    const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut;
+    const propsToUse = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings;
     return (
         <PositionAnimation position={props.position} {...propsToUse}>
             {props.children}
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index d01e9ff57..51e06a284 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -1,16 +1,13 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as React from 'react';
 
-import { BuyButton } from '../components/buy_button';
-import { SecondaryButton } from '../components/secondary_button';
-import { Flex } from '../components/ui/flex';
-
-import { PlacingOrderButton } from '../components/placing_order_button';
 import { ColorOption } from '../style/theme';
 import { OrderProcessState, ZeroExInstantError } from '../types';
 
-import { Button } from './ui/button';
-import { Text } from './ui/text';
+import { BuyButton } from './buy_button';
+import { PlacingOrderButton } from './placing_order_button';
+import { SecondaryButton } from './secondary_button';
+import { Button, Flex, Text } from './ui';
 
 export interface BuyOrderStateButtonProps {
     buyQuote?: BuyQuote;
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index bed1b3b4e..b1fec6405 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -15,7 +15,7 @@ export interface ERC20AssetAmountInputProps {
     asset?: ERC20Asset;
     value?: BigNumberInput;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
-    onSymbolClick?: (asset?: ERC20Asset) => void;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
     isDisabled: boolean;
@@ -40,7 +40,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         const { asset } = this.props;
         return (
             <Container whiteSpace="nowrap">
-                {!_.isUndefined(asset) ? this._renderContentForAsset(asset) : this._renderBackupContent()}
+                {_.isUndefined(asset) ? this._renderBackupContent() : this._renderContentForAsset(asset)}
             </Container>
         );
     }
@@ -111,8 +111,8 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         });
     };
     private readonly _handleSymbolClick = () => {
-        if (this.props.onSymbolClick) {
-            this.props.onSymbolClick(this.props.asset);
+        if (this.props.onSelectAssetClick) {
+            this.props.onSelectAssetClick(this.props.asset);
         }
     };
     // For assets with symbols of different length,
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 08efd1b64..19c08db70 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -16,7 +16,7 @@ export interface InstantHeadingProps {
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
     buyOrderState: OrderState;
-    onSymbolClick?: (asset?: ERC20Asset) => void;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
 }
 
 const PLACEHOLDER_COLOR = ColorOption.white;
@@ -50,7 +50,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                     <Flex height="60px">
                         <SelectedERC20AssetAmountInput
                             startingFontSizePx={38}
-                            onSymbolClick={this.props.onSymbolClick}
+                            onSelectAssetClick={this.props.onSelectAssetClick}
                         />
                     </Flex>
                     <Flex direction="column" justify="space-between">
diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx
index 4232e6c22..e5a6371e6 100644
--- a/packages/instant/src/components/placing_order_button.tsx
+++ b/packages/instant/src/components/placing_order_button.tsx
@@ -2,10 +2,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { Button } from './ui/button';
-import { Container } from './ui/container';
-import { Spinner } from './ui/spinner';
-import { Text } from './ui/text';
+import { Button, Container, Spinner, Text } from './ui';
 
 export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
     <Button isDisabled={true} width="100%">
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index 583058b5b..ca698c77a 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -3,8 +3,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { Button, ButtonProps } from './ui/button';
-import { Text } from './ui/text';
+import { Button, ButtonProps, Text } from './ui';
 
 export interface SecondaryButtonProps extends ButtonProps {}
 
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index a89e201c0..17643fd7d 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -37,14 +37,14 @@ export interface SlidingErrorProps extends ErrorProps {
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
     const slideAmount = '120px';
-    const slideUp: PositionAnimationSettings = {
+    const slideUpSettings: PositionAnimationSettings = {
         timingFunction: 'ease-in',
         top: {
             from: slideAmount,
             to: '0px',
         },
     };
-    const slideDown: PositionAnimationSettings = {
+    const slideDownSettings: PositionAnimationSettings = {
         timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
         top: {
             from: '0px',
@@ -54,8 +54,8 @@ export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props =
     return (
         <SlideAnimation
             position="relative"
-            slideIn={slideUp}
-            slideOut={slideDown}
+            slideInSettings={slideUpSettings}
+            slideOutSettings={slideDownSettings}
             animationState={props.animationState}
         >
             <Error icon={props.icon} message={props.message} />
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 19034eb95..9219ad1f1 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -30,7 +30,7 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
     }
     const { animationState, ...rest } = props;
     const slideAmount = '100%';
-    const slideUp: PositionAnimationSettings = {
+    const slideUpSettings: PositionAnimationSettings = {
         duration: '0.3s',
         timingFunction: 'ease-in-out',
         top: {
@@ -38,7 +38,7 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
             to: '0px',
         },
     };
-    const slideDown: PositionAnimationSettings = {
+    const slideDownSettings: PositionAnimationSettings = {
         duration: '0.3s',
         timingFunction: 'ease-out',
         top: {
@@ -47,7 +47,12 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
         },
     };
     return (
-        <SlideAnimation position="absolute" slideIn={slideUp} slideOut={slideDown} animationState={animationState}>
+        <SlideAnimation
+            position="absolute"
+            slideInSettings={slideUpSettings}
+            slideOutSettings={slideDownSettings}
+            animationState={animationState}
+        >
             <Panel {...rest} />
         </SlideAnimation>
     );
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index 7cfee2491..28f76c262 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -1,7 +1,7 @@
 export { Text, Title } from './text';
-export { Button } from './button';
-export { Flex } from './flex';
-export { Container } from './container';
-export { Input } from './input';
-export { Icon } from './icon';
-export { Spinner } from './spinner';
+export { Button, ButtonProps } from './button';
+export { Flex, FlexProps } from './flex';
+export { Container, ContainerProps } from './container';
+export { Input, InputProps } from './input';
+export { Icon, IconProps } from './icon';
+export { Spinner, SpinnerProps } from './spinner';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 818a9a957..009ad9b2a 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -35,7 +35,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                     overflow="hidden"
                 >
                     <Flex direction="column" justify="flex-start">
-                        <SelectedAssetInstantHeading onSymbolClick={this._handleSymbolClick} />
+                        <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
                         <LatestBuyQuoteOrderDetails />
                         <Container padding="20px" width="100%">
                             <SelectedAssetBuyOrderStateButtons />
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index e413c7ef1..a407279e6 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -10,7 +10,7 @@ import { AsyncProcessState, ERC20Asset, OrderState } from '../types';
 import { InstantHeading } from '../components/instant_heading';
 
 export interface InstantHeadingProps {
-    onSymbolClick?: (asset?: ERC20Asset) => void;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
 }
 
 interface ConnectedState {
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 4df7faab9..217d603d2 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -19,7 +19,7 @@ import { errorFlasher } from '../util/error_flasher';
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
     startingFontSizePx: number;
-    onSymbolClick?: (asset?: ERC20Asset) => void;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
 }
 
 interface ConnectedState {
-- 
cgit v1.2.3


From 59ad2b75c107071d9543f70ffd60fe651134c742 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 31 Oct 2018 13:29:20 -0700
Subject: chore: remove unused import

---
 packages/asset-buyer/src/utils/assert.ts | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/asset-buyer/src/utils/assert.ts b/packages/asset-buyer/src/utils/assert.ts
index 7e4eb7175..0f39fb4a5 100644
--- a/packages/asset-buyer/src/utils/assert.ts
+++ b/packages/asset-buyer/src/utils/assert.ts
@@ -1,6 +1,5 @@
 import { assert as sharedAssert } from '@0x/assert';
 import { schemas } from '@0x/json-schemas';
-import { SignedOrder } from '@0x/types';
 import * as _ from 'lodash';
 
 import { BuyQuote, BuyQuoteInfo, OrderProvider, OrderProviderRequest } from '../types';
-- 
cgit v1.2.3


From 3061afdafb83ad90f9b9da1f22f29525961378d5 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 31 Oct 2018 14:14:12 -0700
Subject: feat: add more asestMetaDatas

---
 .../instant/src/data/asset_data_network_mapping.ts | 44 ++++++++++++++++++
 packages/instant/src/data/asset_meta_data_map.ts   | 54 ++++++++++++++++++++++
 2 files changed, 98 insertions(+)

(limited to 'packages')

diff --git a/packages/instant/src/data/asset_data_network_mapping.ts b/packages/instant/src/data/asset_data_network_mapping.ts
index e8ccbf011..45bfc2a02 100644
--- a/packages/instant/src/data/asset_data_network_mapping.ts
+++ b/packages/instant/src/data/asset_data_network_mapping.ts
@@ -8,8 +8,52 @@ interface AssetDataByNetwork {
 }
 
 export const assetDataNetworkMapping: AssetDataByNetwork[] = [
+    // ZRX
     {
         [Network.Mainnet]: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498',
         [Network.Kovan]: '0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa',
     },
+    // SPANK
+    {
+        [Network.Mainnet]: '0xf47261b000000000000000000000000042d6622dece394b54999fbd73d108123806f6a18',
+        [Network.Kovan]: '0xf47261b00000000000000000000000007c9eee8448f3a7d1193389652d863b27e543272d',
+    },
+    // OMG
+    {
+        [Network.Mainnet]: '0xf47261b000000000000000000000000042d6622dece394b54999fbd73d108123806f6a18',
+        [Network.Kovan]: '0xf47261b000000000000000000000000046096d8ec059dbaae2950b30e01634ff0dc652ec',
+    },
+    // MKR
+    {
+        [Network.Mainnet]: '0xf47261b00000000000000000000000009f8f72aa9304c8b593d555f12ef6589cc3a579a2',
+        [Network.Kovan]: '0xf47261b00000000000000000000000000xbf5e8e38659562fda594fbb3ec5a3576d02a9e0a',
+    },
+    // BAT
+    {
+        [Network.Mainnet]: '0xf47261b00000000000000000000000000d8775f648430679a709e98d2b0cb6250d2887ef',
+        [Network.Kovan]: '0xf47261b0000000000000000000000000c87faa7a58f0adf306bad9e7d892fb045a20e5af',
+    },
+    // SNT
+    {
+        [Network.Mainnet]: '0xf47261b0000000000000000000000000744d70fdbe2ba4cf95131626614a1763df805b9e',
+        [Network.Kovan]: '0xf47261b00000000000000000000000009cfe76a718ea75e3e8ce4fc7ad0fef84be70919b',
+    },
+    // MANA
+    {
+        [Network.Mainnet]: '0xf47261b00000000000000000000000000f5d2fb29fb7d3cfee444a200298f468908cc942',
+        [Network.Kovan]: '0xf47261b0000000000000000000000000c64edfc78321673435fbeebdaaa7f9d755963542',
+    },
+    // GNT
+    {
+        [Network.Mainnet]: '0xf47261b0000000000000000000000000a74476443119A942dE498590Fe1f2454d7D4aC0d',
+        [Network.Kovan]: '0xf47261b00000000000000000000000006986fa3646f408905ecb1876bfd355d25039ee3a',
+    },
+    // SUB
+    {
+        [Network.Mainnet]: '0xf47261b000000000000000000000000012480e24eb5bec1a9d4369cab6a80cad3c0a377a',
+    },
+    // Dentacoin
+    {
+        [Network.Mainnet]: '0xf47261b000000000000000000000000008d32b0da63e2C3bcF8019c9c5d849d7a9d791e6',
+    },
 ];
diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts
index 3a820a0c4..d77298d78 100644
--- a/packages/instant/src/data/asset_meta_data_map.ts
+++ b/packages/instant/src/data/asset_meta_data_map.ts
@@ -11,4 +11,58 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
         primaryColor: 'rgb(54, 50, 60)',
         symbol: 'zrx',
     },
+    '0xf47261b000000000000000000000000042d6622dece394b54999fbd73d108123806f6a18': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#ec3e6c',
+        symbol: 'spank',
+    },
+    '0xf47261b0000000000000000000000000d26114cd6EE289AccF82350c8d8487fedB8A0C07': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#2e61ea',
+        symbol: 'omg',
+    },
+    '0xf47261b00000000000000000000000009f8f72aa9304c8b593d555f12ef6589cc3a579a2': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: 'white',
+        symbol: 'mkr',
+    },
+    '0xf47261b00000000000000000000000000d8775f648430679a709e98d2b0cb6250d2887ef': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#9c326c',
+        symbol: 'bat',
+    },
+    '0xf47261b0000000000000000000000000744d70fdbe2ba4cf95131626614a1763df805b9e': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#5663b0',
+        symbol: 'snt',
+    },
+    '0xf47261b00000000000000000000000000f5d2fb29fb7d3cfee444a200298f468908cc942': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#f08839',
+        symbol: 'mana',
+    },
+    '0xf47261b0000000000000000000000000a74476443119A942dE498590Fe1f2454d7D4aC0d': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#263469',
+        symbol: 'gnt',
+    },
+    '0xf47261b000000000000000000000000012480e24eb5bec1a9d4369cab6a80cad3c0a377a': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#de5445',
+        symbol: 'sub',
+    },
+    '0xf47261b000000000000000000000000008d32b0da63e2C3bcF8019c9c5d849d7a9d791e6': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#000',
+        symbol: 'dentacoin',
+    },
 };
-- 
cgit v1.2.3


From c1ad1d203dcb9041e15bfb4f0d5fa9ab60ed9486 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 31 Oct 2018 14:15:03 -0700
Subject: chore: remove unused import

---
 packages/instant/src/components/buy_button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 58575b1b3..93bd8e635 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -2,7 +2,7 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { DEFAULT_GAS_PRICE, WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
+import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
 import { ZeroExInstantError } from '../types';
 import { getBestAddress } from '../util/address';
-- 
cgit v1.2.3


From 76f88a0a62fb4bedd63cdce07276d3fc05651831 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 31 Oct 2018 15:33:20 -0700
Subject: feat: expose new `getAvailableAssetDatasAsync` API

BREAKING CHANGE: the `OrderProvider` now requires a new method `getAvailableMakerAssetDatasAsync` and the `StandardRelayerAPIOrderProvider` requires the network id at init.
---
 packages/asset-buyer/src/asset_buyer.ts            | 12 +++++++-
 packages/asset-buyer/src/constants.ts              |  2 +-
 .../src/order_providers/basic_order_provider.ts    |  9 ++++++
 .../standard_relayer_api_order_provider.ts         | 35 ++++++++++++++++++----
 packages/asset-buyer/src/types.ts                  |  5 ++--
 packages/asset-buyer/src/utils/assert.ts           |  1 -
 6 files changed, 54 insertions(+), 10 deletions(-)

(limited to 'packages')

diff --git a/packages/asset-buyer/src/asset_buyer.ts b/packages/asset-buyer/src/asset_buyer.ts
index 34e2d9639..2bc80ac12 100644
--- a/packages/asset-buyer/src/asset_buyer.ts
+++ b/packages/asset-buyer/src/asset_buyer.ts
@@ -77,7 +77,8 @@ export class AssetBuyer {
     ): AssetBuyer {
         assert.isWeb3Provider('provider', provider);
         assert.isWebUri('sraApiUrl', sraApiUrl);
-        const orderProvider = new StandardRelayerAPIOrderProvider(sraApiUrl);
+        const networkId = options.networkId || constants.DEFAULT_ASSET_BUYER_OPTS.networkId;
+        const orderProvider = new StandardRelayerAPIOrderProvider(sraApiUrl, networkId);
         const assetBuyer = new AssetBuyer(provider, orderProvider, options);
         return assetBuyer;
     }
@@ -240,6 +241,15 @@ export class AssetBuyer {
             }
         }
     }
+    /**
+     * Get the asset data of all assets that are purchaseable with ether token (wETH) in the order provider passed in at init.
+     *
+     * @return  An array of asset data strings that can be purchased using wETH.
+     */
+    public async getAvailableAssetDatasAsync(): Promise<string[]> {
+        const etherTokenAssetData = this._getEtherTokenAssetDataOrThrow();
+        return this.orderProvider.getAvailableMakerAssetDatasAsync(etherTokenAssetData);
+    }
     /**
      * Grab orders from the map, if there is a miss or it is time to refresh, fetch and process the orders
      */
diff --git a/packages/asset-buyer/src/constants.ts b/packages/asset-buyer/src/constants.ts
index c912253bd..b2f025bdb 100644
--- a/packages/asset-buyer/src/constants.ts
+++ b/packages/asset-buyer/src/constants.ts
@@ -36,6 +36,6 @@ export const constants = {
     DEFAULT_ASSET_BUYER_OPTS,
     DEFAULT_BUY_QUOTE_EXECUTION_OPTS,
     DEFAULT_BUY_QUOTE_REQUEST_OPTS,
-    MAX_PER_PAGE: 10000,
+    MAX_PER_PAGE: 1000,
     EMPTY_ORDERS_AND_FILLABLE_AMOUNTS,
 };
diff --git a/packages/asset-buyer/src/order_providers/basic_order_provider.ts b/packages/asset-buyer/src/order_providers/basic_order_provider.ts
index 68406f19b..76685f27a 100644
--- a/packages/asset-buyer/src/order_providers/basic_order_provider.ts
+++ b/packages/asset-buyer/src/order_providers/basic_order_provider.ts
@@ -29,4 +29,13 @@ export class BasicOrderProvider implements OrderProvider {
         });
         return { orders };
     }
+    /**
+     * Given a taker asset data string, return all availabled paired maker asset data strings.
+     * @param   takerAssetData   A string representing the taker asset data.
+     * @return  An array of asset data strings that can be purchased using takerAssetData.
+     */
+    public async getAvailableMakerAssetDatasAsync(takerAssetData: string): Promise<string[]> {
+        const ordersWithTakerAssetData = _.filter(this.orders, { takerAssetData });
+        return _.map(ordersWithTakerAssetData, order => order.makerAssetData);
+    }
 }
diff --git a/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts b/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts
index 41fd1fb30..c6adcfc4a 100644
--- a/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts
+++ b/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts
@@ -1,7 +1,8 @@
 import { HttpClient } from '@0x/connect';
-import { APIOrder, OrderbookResponse } from '@0x/types';
+import { APIOrder, AssetPairsResponse, OrderbookResponse } from '@0x/types';
 import * as _ from 'lodash';
 
+import { constants } from '../constants';
 import {
     AssetBuyerError,
     OrderProvider,
@@ -14,6 +15,7 @@ import { orderUtils } from '../utils/order_utils';
 
 export class StandardRelayerAPIOrderProvider implements OrderProvider {
     public readonly apiUrl: string;
+    public readonly networkId: number;
     private readonly _sraClient: HttpClient;
     /**
      * Given an array of APIOrder objects from a standard relayer api, return an array
@@ -44,12 +46,15 @@ export class StandardRelayerAPIOrderProvider implements OrderProvider {
     }
     /**
      * Instantiates a new StandardRelayerAPIOrderProvider instance
-     * @param   apiUrl  The standard relayer API base HTTP url you would like to source orders from.
+     * @param   apiUrl      The standard relayer API base HTTP url you would like to source orders from.
+     * @param   networkId   The ethereum network id.
      * @return  An instance of StandardRelayerAPIOrderProvider
      */
-    constructor(apiUrl: string) {
+    constructor(apiUrl: string, networkId: number) {
         assert.isWebUri('apiUrl', apiUrl);
+        assert.isNumber('networkId', networkId);
         this.apiUrl = apiUrl;
+        this.networkId = networkId;
         this._sraClient = new HttpClient(apiUrl);
     }
     /**
@@ -59,9 +64,9 @@ export class StandardRelayerAPIOrderProvider implements OrderProvider {
      */
     public async getOrdersAsync(orderProviderRequest: OrderProviderRequest): Promise<OrderProviderResponse> {
         assert.isValidOrderProviderRequest('orderProviderRequest', orderProviderRequest);
-        const { makerAssetData, takerAssetData, networkId } = orderProviderRequest;
+        const { makerAssetData, takerAssetData } = orderProviderRequest;
         const orderbookRequest = { baseAssetData: makerAssetData, quoteAssetData: takerAssetData };
-        const requestOpts = { networkId };
+        const requestOpts = { networkId: this.networkId };
         let orderbook: OrderbookResponse;
         try {
             orderbook = await this._sraClient.getOrderbookAsync(orderbookRequest, requestOpts);
@@ -76,4 +81,24 @@ export class StandardRelayerAPIOrderProvider implements OrderProvider {
             orders,
         };
     }
+    /**
+     * Given a taker asset data string, return all availabled paired maker asset data strings.
+     * @param   takerAssetData   A string representing the taker asset data.
+     * @return  An array of asset data strings that can be purchased using takerAssetData.
+     */
+    public async getAvailableMakerAssetDatasAsync(takerAssetData: string): Promise<string[]> {
+        const requestOpts = { networkId: this.networkId, perPage: constants.MAX_PER_PAGE };
+        const assetPairsRequest = { assetDataA: takerAssetData };
+        const fullRequest = {
+            ...requestOpts,
+            ...assetPairsRequest,
+        };
+        let response: AssetPairsResponse;
+        try {
+            response = await this._sraClient.getAssetPairsAsync(fullRequest);
+        } catch (err) {
+            throw new Error(AssetBuyerError.StandardRelayerApiError);
+        }
+        return _.map(response.records, item => item.assetDataB.assetData);
+    }
 }
diff --git a/packages/asset-buyer/src/types.ts b/packages/asset-buyer/src/types.ts
index f15e7e934..3f1e6ff21 100644
--- a/packages/asset-buyer/src/types.ts
+++ b/packages/asset-buyer/src/types.ts
@@ -9,7 +9,6 @@ import { BigNumber } from '@0x/utils';
 export interface OrderProviderRequest {
     makerAssetData: string;
     takerAssetData: string;
-    networkId: number;
 }
 
 /**
@@ -27,10 +26,12 @@ export interface SignedOrderWithRemainingFillableMakerAssetAmount extends Signed
     remainingFillableMakerAssetAmount?: BigNumber;
 }
 /**
- * Given an OrderProviderRequest, get an OrderProviderResponse.
+ * gerOrdersAsync: Given an OrderProviderRequest, get an OrderProviderResponse.
+ * getAvailableMakerAssetDatasAsync: Given a taker asset data string, return all availabled paired maker asset data strings.
  */
 export interface OrderProvider {
     getOrdersAsync: (orderProviderRequest: OrderProviderRequest) => Promise<OrderProviderResponse>;
+    getAvailableMakerAssetDatasAsync: (takerAssetData: string) => Promise<string[]>;
 }
 
 /**
diff --git a/packages/asset-buyer/src/utils/assert.ts b/packages/asset-buyer/src/utils/assert.ts
index e8cb7f763..e5bfd2d81 100644
--- a/packages/asset-buyer/src/utils/assert.ts
+++ b/packages/asset-buyer/src/utils/assert.ts
@@ -29,7 +29,6 @@ export const assert = {
     isValidOrderProviderRequest(variableName: string, orderFetcherRequest: OrderProviderRequest): void {
         sharedAssert.isHexString(`${variableName}.makerAssetData`, orderFetcherRequest.makerAssetData);
         sharedAssert.isHexString(`${variableName}.takerAssetData`, orderFetcherRequest.takerAssetData);
-        sharedAssert.isNumber(`${variableName}.networkId`, orderFetcherRequest.networkId);
     },
     areValidProvidedOrders(variableName: string, orders: SignedOrder[]): void {
         if (orders.length === 0) {
-- 
cgit v1.2.3


From 8c336925601127c759ad4cfbca119368a2edfd56 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 31 Oct 2018 15:58:21 -0700
Subject: chore: add to changelog

---
 packages/asset-buyer/CHANGELOG.json | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'packages')

diff --git a/packages/asset-buyer/CHANGELOG.json b/packages/asset-buyer/CHANGELOG.json
index 5d6604ea9..c572ba4cf 100644
--- a/packages/asset-buyer/CHANGELOG.json
+++ b/packages/asset-buyer/CHANGELOG.json
@@ -5,6 +5,11 @@
             {
                 "note": "`getAssetBuyerForProvidedOrders` factory function now takes 3 args instead of 4",
                 "pr": 1187
+            },
+            {
+                "note":
+                    "the `OrderProvider` now requires a new method `getAvailableMakerAssetDatasAsync` and the `StandardRelayerAPIOrderProvider` requires the network id at init.",
+                "pr": 1203
             }
         ]
     },
-- 
cgit v1.2.3


From ae84dac46382258e9a59b194f8aed7184d283e6f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 31 Oct 2018 16:46:24 -0700
Subject: WIP of new timedprogressbar using CSS animations

---
 packages/instant/src/components/time_counter.tsx   |  64 +++++++++++++
 .../instant/src/components/timed_progress_bar.tsx  | 101 +++++++++++++++++++++
 packages/instant/src/constants.ts                  |   3 +-
 .../selected_asset_simulated_progress_bar.tsx      |  18 +++-
 packages/instant/src/types.ts                      |   1 -
 5 files changed, 180 insertions(+), 7 deletions(-)
 create mode 100644 packages/instant/src/components/time_counter.tsx
 create mode 100644 packages/instant/src/components/timed_progress_bar.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/time_counter.tsx b/packages/instant/src/components/time_counter.tsx
new file mode 100644
index 000000000..26deb82bd
--- /dev/null
+++ b/packages/instant/src/components/time_counter.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { timeUtil } from '../util/time';
+
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
+
+export interface TimeCounterProps {
+    estimatedTimeMs: number;
+    ended: boolean;
+}
+interface TimeCounterState {
+    elapsedSeconds: number;
+}
+
+export class TimeCounter extends React.Component<TimeCounterProps, TimeCounterState> {
+    public state = {
+        elapsedSeconds: 0,
+    };
+    private _timerId?: number;
+
+    public componentDidMount(): void {
+        this._setupTimerBasedOnProps();
+    }
+
+    public componentWillUnmount(): void {
+        this._clearTimer();
+    }
+
+    public componentDidUpdate(prevProps: TimeCounterProps): void {
+        if (prevProps.ended !== this.props.ended) {
+            this._setupTimerBasedOnProps();
+        }
+    }
+
+    public render(): React.ReactNode {
+        const estimatedTimeSeconds = this.props.estimatedTimeMs / 1000;
+        return (
+            <Flex justify="space-between">
+                <Text>Est. Time ({timeUtil.secondsToHumanDescription(estimatedTimeSeconds)})</Text>
+                <Text>Time: {timeUtil.secondsToStopwatchTime(this.state.elapsedSeconds)}</Text>
+            </Flex>
+        );
+    }
+
+    private _setupTimerBasedOnProps(): void {
+        this.props.ended ? this._clearTimer() : this._newTimer();
+    }
+
+    private _newTimer(): void {
+        this._clearTimer();
+        this._timerId = window.setInterval(() => {
+            this.setState({
+                elapsedSeconds: this.state.elapsedSeconds + 1,
+            });
+        }, 1000);
+    }
+
+    private _clearTimer(): void {
+        if (this._timerId) {
+            window.clearInterval(this._timerId);
+        }
+    }
+}
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
new file mode 100644
index 000000000..7fdfe1a25
--- /dev/null
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -0,0 +1,101 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Keyframes } from 'styled-components';
+
+import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_PERCENTAGE } from '../constants';
+import { ColorOption, keyframes, styled } from '../style/theme';
+import { timeUtil } from '../util/time';
+
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
+
+export interface TimedProgressBarProps {
+    expectedTimeMs: number;
+    ended: boolean;
+}
+
+interface TimedProgressBarState {
+    animationTimeMs: number;
+    animationStartingWidth: string;
+    maxWidthPercent: number;
+}
+
+export const beginningState = (props: TimedProgressBarProps): TimedProgressBarState => {
+    return {
+        animationTimeMs: props.expectedTimeMs,
+        animationStartingWidth: '0%',
+        maxWidthPercent: PROGRESS_STALL_AT_PERCENTAGE,
+    };
+};
+
+export class TimedProgressBar extends React.Component<TimedProgressBarProps, TimedProgressBarState> {
+    private readonly _barRef = React.createRef<HTMLDivElement>();
+
+    public constructor(props: TimedProgressBarProps) {
+        super(props);
+        this.state = beginningState(props);
+    }
+
+    public componentDidUpdate(prevProps: TimedProgressBarProps, prevState: TimedProgressBarState): void {
+        if (prevProps.ended === false && this.props.ended === true) {
+            // Show nice animation going to end
+            // barRef current should always exist, but checking for typesafety
+            if (this._barRef.current) {
+                const curProgressWidth = this._barRef.current.offsetWidth;
+                this.setState({
+                    animationTimeMs: PROGRESS_FINISH_ANIMATION_TIME_MS,
+                    animationStartingWidth: `${curProgressWidth}px`,
+                    maxWidthPercent: 100,
+                });
+            }
+            return;
+        }
+
+        if (prevProps.expectedTimeMs !== this.props.expectedTimeMs || prevProps.ended !== this.props.ended) {
+            // things changed, get fresh state
+            this.setState(beginningState(this.props));
+        }
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
+                <TimedProgress
+                    fromWidth={this.state.animationStartingWidth}
+                    timeMs={this.state.animationTimeMs}
+                    maxWidthPercent={this.state.maxWidthPercent}
+                    ref={this._barRef as any}
+                />
+            </Container>
+        );
+    }
+}
+
+const expandingWidthKeyframes = (fromWidth: string, maxWidthPercent: number) => {
+    return keyframes`
+          from {
+              width: ${fromWidth}
+          }
+          to {
+              width: ${maxWidthPercent}%;
+          }
+      `;
+};
+
+interface TimedProgressProps {
+    timeMs: number;
+    fromWidth: string;
+    maxWidthPercent: number;
+}
+// TODO use PrimaryColor instead of black
+export const TimedProgress =
+    styled.div <
+    TimedProgressProps >
+    `
+    background-color: black;
+    border-radius: 6px;
+    height: 6px;
+    animation: ${props => expandingWidthKeyframes(props.fromWidth, props.maxWidthPercent)}
+      ${props => props.timeMs}ms linear 1 forwards;
+  `;
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 3b320ed36..9fdbf2830 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -8,5 +8,6 @@ export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
 export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = 2 * 60 * 1000; // 2 minutes
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
-export const PROGRESS_TICK_INTERVAL_MS = 250;
+export const PROGRESS_TICK_INTERVAL_MS = 250; // TODO: remove
 export const PROGRESS_STALL_AT_PERCENTAGE = 95;
+export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200;
diff --git a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
index a7acc4cb7..a989407d5 100644
--- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
+++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
@@ -3,10 +3,15 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 
 import { SimulatedProgressBar } from '../components/simulated_progress_bar';
+import { TimedProgressBar } from '../components/timed_progress_bar';
 
+import { TimeCounter } from '../components/time_counter';
+import { Container } from '../components/ui';
 import { State } from '../redux/reducer';
 import { OrderProcessState, OrderState, SimulatedProgress } from '../types';
 
+// TODO: rename this
+// TODO: delete SimulatedProgressBar code and anything else remaining
 interface SelectedAssetProgressComponentProps {
     buyOrderState: OrderState;
 }
@@ -21,12 +26,15 @@ export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent<
         buyOrderState.processState === OrderProcessState.FAILURE
     ) {
         const progress = buyOrderState.progress;
+        const ended = buyOrderState.processState !== OrderProcessState.PROCESSING;
+        const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
         return (
-            <SimulatedProgressBar
-                startTimeUnix={progress.startTimeUnix}
-                expectedEndTimeUnix={progress.expectedEndTimeUnix}
-                ended={progress.ended}
-            />
+            <Container padding="20px 20px 0px 20px" width="100%">
+                <Container marginBottom="5px">
+                    <TimeCounter estimatedTimeMs={expectedTimeMs} ended={ended} key={progress.startTimeUnix} />
+                </Container>
+                <TimedProgressBar expectedTimeMs={expectedTimeMs} ended={ended} key={progress.startTimeUnix} />
+            </Container>
         );
     }
 
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 34893676d..288a6d111 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -19,7 +19,6 @@ export enum OrderProcessState {
 export interface SimulatedProgress {
     startTimeUnix: number;
     expectedEndTimeUnix: number;
-    ended: boolean;
 }
 
 interface OrderStatePreTx {
-- 
cgit v1.2.3


From 096f9deceedabff7fe90a7781271f55dfa059e1f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 31 Oct 2018 16:49:41 -0700
Subject: Removing old simulated progress bar, and adding documentation to
 TimedProgressBar

---
 .../src/components/simulated_progress_bar.tsx      | 194 ---------------------
 .../instant/src/components/timed_progress_bar.tsx  |   9 +-
 packages/instant/src/constants.ts                  |   1 -
 .../selected_asset_simulated_progress_bar.tsx      |   2 -
 4 files changed, 5 insertions(+), 201 deletions(-)
 delete mode 100644 packages/instant/src/components/simulated_progress_bar.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx
deleted file mode 100644
index 067f4093e..000000000
--- a/packages/instant/src/components/simulated_progress_bar.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { PROGRESS_STALL_AT_PERCENTAGE, PROGRESS_TICK_INTERVAL_MS } from '../constants';
-import { ColorOption, styled } from '../style/theme';
-import { timeUtil } from '../util/time';
-
-import { Container } from './ui/container';
-import { Flex } from './ui/flex';
-import { Text } from './ui/text';
-
-const TICKS_PER_SECOND = 1000 / PROGRESS_TICK_INTERVAL_MS;
-
-const curTimeUnix = () => {
-    return new Date().getTime();
-};
-
-export interface SimulatedProgressBarProps {
-    startTimeUnix: number;
-    expectedEndTimeUnix: number;
-    ended: boolean;
-}
-enum TickingRunState {
-    None = 'None',
-    Running = 'Running',
-    Finishing = 'Finishing',
-}
-interface TickingNoneStatus {
-    runState: TickingRunState.None;
-}
-interface TickingRunningStatus {
-    runState: TickingRunState.Running;
-}
-interface TickingFinishingStatus {
-    runState: TickingRunState.Finishing;
-    increasePercentageEveryTick: number;
-}
-type TickingStatus = TickingNoneStatus | TickingRunningStatus | TickingFinishingStatus;
-
-export interface SimulatedProgressState {
-    percentageDone: number;
-    intervalId?: number;
-    tickingStatus: TickingStatus;
-    elapsedTimeMs: number;
-}
-export class SimulatedProgressBar extends React.Component<SimulatedProgressBarProps, SimulatedProgressState> {
-    public constructor(props: SimulatedProgressBarProps) {
-        super(props);
-
-        // TODO: look into using assert library here?
-        if (props.expectedEndTimeUnix <= props.startTimeUnix) {
-            throw new Error('End time before start time');
-        }
-
-        // TODO: use getFreshState here
-        const intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS);
-        this.state = {
-            percentageDone: 0,
-            intervalId,
-            tickingStatus: { runState: TickingRunState.Running },
-            elapsedTimeMs: 0,
-        };
-    }
-
-    public componentDidUpdate(prevProps: SimulatedProgressBarProps, prevState: SimulatedProgressState): void {
-        const percentLeft = 100 - this.state.percentageDone;
-        const increasePercentageEveryTick = percentLeft / TICKS_PER_SECOND;
-
-        // if we just switched to ending, having animate to end
-        if (prevProps.ended === false && this.props.ended === true) {
-            this.setState({
-                tickingStatus: {
-                    runState: TickingRunState.Finishing,
-                    increasePercentageEveryTick,
-                },
-            });
-            return;
-        }
-
-        // later TODO: the new state could be for the wrong order, attach to order state or add concurrency checking
-
-        // if anything else changes, reset internal state
-        if (
-            prevProps.startTimeUnix !== this.props.startTimeUnix ||
-            prevProps.expectedEndTimeUnix !== this.props.expectedEndTimeUnix ||
-            prevProps.ended !== this.props.ended
-        ) {
-            this.setState(this._getFreshState());
-        }
-    }
-
-    public componentWillUnmount(): void {
-        console.log('unmount');
-        this._clearTimer();
-    }
-
-    public render(): React.ReactNode {
-        // TODO: Consider moving to seperate component
-
-        const estimatedTimeSeconds = Math.ceil((this.props.expectedEndTimeUnix - this.props.startTimeUnix) / 1000);
-        const elapsedTimeSeconds = Math.floor(this.state.elapsedTimeMs / 1000);
-        return (
-            <Container padding="20px 20px 0px 20px" width="100%">
-                <Container marginBottom="5px">
-                    {/* TODO: consider moving to separate component */}
-                    <Flex justify="space-between">
-                        <Text>Est. Time ({timeUtil.secondsToHumanDescription(estimatedTimeSeconds)})</Text>
-                        <Text>Time: {timeUtil.secondsToStopwatchTime(elapsedTimeSeconds)}</Text>
-                    </Flex>
-                </Container>
-                <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
-                    <InnerProgressBarElement
-                        percentageDone={this.state.percentageDone}
-                        backgroundColor={ColorOption.primaryColor}
-                        borderRadius="6px"
-                        height="6px"
-                        transitionTimeMs={200}
-                    />
-                </Container>
-            </Container>
-        );
-    }
-
-    private _getFreshState(): SimulatedProgressState {
-        this._clearTimer();
-        const intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS);
-        return {
-            percentageDone: 0,
-            intervalId,
-            tickingStatus: { runState: TickingRunState.Running },
-            elapsedTimeMs: 0,
-        };
-    }
-
-    private _tick(): void {
-        const rawPercentageDone =
-            this.state.tickingStatus.runState === TickingRunState.Finishing
-                ? this._getNewPercentageFinishing(this.state.tickingStatus)
-                : this._getNewPercentageNormal();
-        const maxPercentage =
-            this.state.tickingStatus.runState === TickingRunState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE;
-        const percentageDone = Math.min(rawPercentageDone, maxPercentage);
-
-        const elapsedTimeMs = Math.max(curTimeUnix() - this.props.startTimeUnix, 0);
-
-        this.setState({
-            percentageDone,
-            elapsedTimeMs,
-        });
-
-        if (percentageDone >= 100) {
-            this._clearTimer();
-        }
-    }
-
-    private _clearTimer(): void {
-        if (this.state.intervalId) {
-            window.clearTimeout(this.state.intervalId);
-        }
-    }
-
-    // TODO: consider not taking in a parameter here, might be confusing
-    private _getNewPercentageFinishing(tickingStatus: TickingFinishingStatus): number {
-        return this.state.percentageDone + tickingStatus.increasePercentageEveryTick;
-    }
-
-    private _getNewPercentageNormal(): number {
-        const elapsedTimeMs = curTimeUnix() - this.props.startTimeUnix;
-        const safeElapsedTimeMs = Math.max(elapsedTimeMs, 1);
-
-        const expectedAmountOfTimeMs = this.props.expectedEndTimeUnix - this.props.startTimeUnix;
-        const percentageDone = safeElapsedTimeMs / expectedAmountOfTimeMs * 100;
-        return percentageDone;
-    }
-}
-
-interface InnerProgressBarElementProps {
-    percentageDone: number;
-    backgroundColor: ColorOption;
-    borderRadius: string;
-    height: string;
-    transitionTimeMs: number;
-}
-
-export const InnerProgressBarElement =
-    styled.div <
-    InnerProgressBarElementProps >
-    `
-    width: ${props => props.percentageDone}%;
-    background-color: ${props => props.theme[props.backgroundColor]};
-    border-radius: ${props => props.borderRadius};
-    height: ${props => props.height};
-    transition: width ${props => props.transitionTimeMs}ms ease-in-out;
-    `;
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index 7fdfe1a25..a4bb2eabd 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -1,14 +1,10 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Keyframes } from 'styled-components';
 
 import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_PERCENTAGE } from '../constants';
 import { ColorOption, keyframes, styled } from '../style/theme';
-import { timeUtil } from '../util/time';
 
 import { Container } from './ui/container';
-import { Flex } from './ui/flex';
-import { Text } from './ui/text';
 
 export interface TimedProgressBarProps {
     expectedTimeMs: number;
@@ -29,6 +25,11 @@ export const beginningState = (props: TimedProgressBarProps): TimedProgressBarSt
     };
 };
 
+/**
+ * Timed Progress Bar
+ * Goes from 0% -> PROGRESS_STALL_AT_PERCENTAGE% over time of expectedTimeMs
+ * When ended set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length
+ */
 export class TimedProgressBar extends React.Component<TimedProgressBarProps, TimedProgressBarState> {
     private readonly _barRef = React.createRef<HTMLDivElement>();
 
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 9fdbf2830..fcf6e0798 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -8,6 +8,5 @@ export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
 export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = 2 * 60 * 1000; // 2 minutes
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
-export const PROGRESS_TICK_INTERVAL_MS = 250; // TODO: remove
 export const PROGRESS_STALL_AT_PERCENTAGE = 95;
 export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200;
diff --git a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
index a989407d5..ceab61175 100644
--- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
+++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import { connect } from 'react-redux';
 
-import { SimulatedProgressBar } from '../components/simulated_progress_bar';
 import { TimedProgressBar } from '../components/timed_progress_bar';
 
 import { TimeCounter } from '../components/time_counter';
@@ -11,7 +10,6 @@ import { State } from '../redux/reducer';
 import { OrderProcessState, OrderState, SimulatedProgress } from '../types';
 
 // TODO: rename this
-// TODO: delete SimulatedProgressBar code and anything else remaining
 interface SelectedAssetProgressComponentProps {
     buyOrderState: OrderState;
 }
-- 
cgit v1.2.3


From d192a7d466a6bda72ff69360454df547958601e4 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 31 Oct 2018 16:49:52 -0700
Subject: Removing old extra param

---
 packages/instant/src/redux/reducer.ts | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 11980066b..68b788be5 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -104,7 +104,6 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                     progress: {
                         startTimeUnix,
                         expectedEndTimeUnix,
-                        ended: false,
                     },
                 },
             };
-- 
cgit v1.2.3


From 906909e33fe97d49196696c528c131c1a1c66f14 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 31 Oct 2018 16:54:52 -0700
Subject: Rename to  SelectedAssetProgress

---
 .../src/components/zero_ex_instant_container.tsx   |  4 +-
 .../src/containers/selected_asset_progress.tsx     | 49 ++++++++++++++++++++++
 .../selected_asset_simulated_progress_bar.tsx      | 49 ----------------------
 3 files changed, 51 insertions(+), 51 deletions(-)
 create mode 100644 packages/instant/src/containers/selected_asset_progress.tsx
 delete mode 100644 packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 6b1042668..87a7cee88 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -5,7 +5,7 @@ import { LatestError } from '../containers/latest_error';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 
-import { SelectedAssetSimulatedProgressBar } from '../containers/selected_asset_simulated_progress_bar';
+import { SelectedAssetProgress } from '../containers/selected_asset_progress';
 
 import { ColorOption } from '../style/theme';
 
@@ -26,7 +26,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
         >
             <Flex direction="column" justify="flex-start">
                 <SelectedAssetInstantHeading />
-                <SelectedAssetSimulatedProgressBar />
+                <SelectedAssetProgress />
                 <LatestBuyQuoteOrderDetails />
                 <Container padding="20px" width="100%">
                     <SelectedAssetBuyOrderStateButtons />
diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx
new file mode 100644
index 000000000..afbb45dac
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_progress.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import { connect } from 'react-redux';
+
+import { TimedProgressBar } from '../components/timed_progress_bar';
+
+import { TimeCounter } from '../components/time_counter';
+import { Container } from '../components/ui';
+import { State } from '../redux/reducer';
+import { OrderProcessState, OrderState, SimulatedProgress } from '../types';
+
+interface SelectedAssetProgressComponentProps {
+    buyOrderState: OrderState;
+}
+// TODO: rename this component and move to seperate file, and get props using mapStateToProps
+export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent<
+    SelectedAssetProgressComponentProps
+> = props => {
+    const { buyOrderState } = props;
+
+    if (
+        buyOrderState.processState === OrderProcessState.PROCESSING ||
+        buyOrderState.processState === OrderProcessState.SUCCESS ||
+        buyOrderState.processState === OrderProcessState.FAILURE
+    ) {
+        const progress = buyOrderState.progress;
+        const ended = buyOrderState.processState !== OrderProcessState.PROCESSING;
+        const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
+        return (
+            <Container padding="20px 20px 0px 20px" width="100%">
+                <Container marginBottom="5px">
+                    <TimeCounter estimatedTimeMs={expectedTimeMs} ended={ended} key={progress.startTimeUnix} />
+                </Container>
+                <TimedProgressBar expectedTimeMs={expectedTimeMs} ended={ended} key={progress.startTimeUnix} />
+            </Container>
+        );
+    }
+
+    return null;
+};
+
+interface ConnectedState {
+    buyOrderState: OrderState;
+    simulatedProgress?: SimulatedProgress;
+}
+const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
+    buyOrderState: state.buyOrderState,
+});
+export const SelectedAssetProgress = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent);
diff --git a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
deleted file mode 100644
index ceab61175..000000000
--- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-
-import { connect } from 'react-redux';
-
-import { TimedProgressBar } from '../components/timed_progress_bar';
-
-import { TimeCounter } from '../components/time_counter';
-import { Container } from '../components/ui';
-import { State } from '../redux/reducer';
-import { OrderProcessState, OrderState, SimulatedProgress } from '../types';
-
-// TODO: rename this
-interface SelectedAssetProgressComponentProps {
-    buyOrderState: OrderState;
-}
-export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent<
-    SelectedAssetProgressComponentProps
-> = props => {
-    const { buyOrderState } = props;
-
-    if (
-        buyOrderState.processState === OrderProcessState.PROCESSING ||
-        buyOrderState.processState === OrderProcessState.SUCCESS ||
-        buyOrderState.processState === OrderProcessState.FAILURE
-    ) {
-        const progress = buyOrderState.progress;
-        const ended = buyOrderState.processState !== OrderProcessState.PROCESSING;
-        const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
-        return (
-            <Container padding="20px 20px 0px 20px" width="100%">
-                <Container marginBottom="5px">
-                    <TimeCounter estimatedTimeMs={expectedTimeMs} ended={ended} key={progress.startTimeUnix} />
-                </Container>
-                <TimedProgressBar expectedTimeMs={expectedTimeMs} ended={ended} key={progress.startTimeUnix} />
-            </Container>
-        );
-    }
-
-    return null;
-};
-
-interface ConnectedState {
-    buyOrderState: OrderState;
-    simulatedProgress?: SimulatedProgress;
-}
-const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
-    buyOrderState: state.buyOrderState,
-});
-export const SelectedAssetSimulatedProgressBar = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent);
-- 
cgit v1.2.3


From 6091ee732d208eaf9889087b8308dfd0427b9be5 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 31 Oct 2018 19:20:37 -0700
Subject: feat: modify public API to allow for passing in available assets, or
 fetch assets from SRA

---
 packages/instant/public/index.html                 |  8 +++--
 .../instant/src/components/zero_ex_instant.tsx     | 28 ++++++++++-----
 packages/instant/src/index.umd.ts                  |  6 ++--
 packages/instant/src/redux/actions.ts              |  4 ++-
 packages/instant/src/redux/async_data.ts           | 25 +++++++++----
 packages/instant/src/redux/reducer.ts              |  9 ++++-
 packages/instant/src/util/assert.ts                |  8 ++---
 packages/instant/src/util/asset.ts                 | 41 ++++++++++++++++++++--
 8 files changed, 100 insertions(+), 29 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 9f1dfdb64..74975678a 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -55,15 +55,17 @@
         };
         const queryParams = new Uri(window.location.search);
         const renderOptionsDefaults = {
-            liquiditySource: 'https://api.radarrelay.com/0x/v2/',
+            orderSource: 'https://api.radarrelay.com/0x/v2/',
             assetData: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498',
         }
-        const liquiditySourceOverride = queryParams.getQueryParamValue('liquiditySource');
+        const orderSourceOverride = queryParams.getQueryParamValue('orderSource');
         const renderOptionsOverrides = {
-            liquiditySource: liquiditySourceOverride === 'provided' ? [providedOrder] : liquiditySourceOverride,
+            orderSource: orderSourceOverride === 'provided' ? [providedOrder] : orderSourceOverride,
             assetData: queryParams.getQueryParamValue('assetData'),
             networkId: +queryParams.getQueryParamValue('networkId') || undefined,
             defaultAssetBuyAmount: +queryParams.getQueryParamValue('defaultAssetBuyAmount') || undefined,
+            availableAssetIdentifiers: JSON.parse(queryParams.getQueryParamValue('availableAssetIdentifiers') || '[]'),
+            defaultSelectedAssetIdentifier: queryParams.getQueryParamValue('defaultSelectedAssetIdentifier'),
         }
         const renderOptions = Object.assign({}, renderOptionsDefaults, removeUndefined(renderOptionsOverrides));
         zeroExInstant.render(renderOptions);
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index d54dfc153..ab6350010 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -24,13 +24,13 @@ fonts.include();
 export type ZeroExInstantProps = ZeroExInstantRequiredProps & Partial<ZeroExInstantOptionalProps>;
 
 export interface ZeroExInstantRequiredProps {
-    // TODO: Change API when we allow the selection of different assetDatas
-    assetData: string;
-    liquiditySource: string | SignedOrder[];
+    orderSource: string | SignedOrder[];
 }
 
 export interface ZeroExInstantOptionalProps {
+    availableAssetDatas: string[];
     defaultAssetBuyAmount?: number;
+    defaultSelectedAssetData?: string;
     additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
     networkId: Network;
 }
@@ -45,14 +45,14 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
             networkId,
         };
         let assetBuyer;
-        if (_.isString(props.liquiditySource)) {
+        if (_.isString(props.orderSource)) {
             assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(
                 provider,
-                props.liquiditySource,
+                props.orderSource,
                 assetBuyerOptions,
             );
         } else {
-            assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.liquiditySource, assetBuyerOptions);
+            assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.orderSource, assetBuyerOptions);
         }
         const completeAssetMetaDataMap = {
             ...props.additionalAssetMetaDataMap,
@@ -62,7 +62,13 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
             ...state,
             assetBuyer,
             network: networkId,
-            selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId),
+            selectedAsset: _.isUndefined(props.defaultSelectedAssetData)
+                ? undefined
+                : assetUtils.createAssetFromAssetDataOrThrow(
+                      props.defaultSelectedAssetData,
+                      completeAssetMetaDataMap,
+                      networkId,
+                  ),
             selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
                 ? state.selectedAssetAmount
                 : new BigNumberInput(props.defaultAssetBuyAmount),
@@ -77,8 +83,14 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
     }
 
     public componentDidMount(): void {
+        const state = this._store.getState();
         // tslint:disable-next-line:no-floating-promises
-        asyncData.fetchAndDispatchToStore(this._store);
+        asyncData.fetchEthPriceAndDispatchToStore(this._store);
+        // fetch available assets if none are specified
+        if (_.isEmpty(state.availableAssets)) {
+            // tslint:disable-next-line:no-floating-promises
+            asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
+        }
 
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index dabd45cae..77bdb66e1 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -7,8 +7,10 @@ import { ZeroExInstant, ZeroExInstantProps } from './index';
 import { assert } from './util/assert';
 
 export const render = (props: ZeroExInstantProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
-    assert.isHexString('assetData', props.assetData);
-    assert.isValidLiquiditySource('liquiditySource', props.liquiditySource);
+    assert.isValidOrderSource('orderSource', props.orderSource);
+    if (!_.isUndefined(props.defaultSelectedAssetData)) {
+        assert.isHexString('defaultSelectedAssetData', props.defaultSelectedAssetData);
+    }
     if (!_.isUndefined(props.additionalAssetMetaDataMap)) {
         assert.isValidAssetMetaDataMap('additionalAssetMetaDataMap', props.additionalAssetMetaDataMap);
     }
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index bfae68e2b..eadd8b42c 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -4,7 +4,7 @@ import * as _ from 'lodash';
 
 import { BigNumberInput } from '../util/big_number_input';
 
-import { ActionsUnion, OrderState } from '../types';
+import { ActionsUnion, Asset, OrderState } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
@@ -28,6 +28,7 @@ export enum ActionTypes {
     UPDATE_BUY_ORDER_STATE = 'UPDATE_BUY_ORDER_STATE',
     UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
     UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET',
+    SET_AVAILABLE_ASSETS = 'SET_AVAILABLE_ASSETS',
     SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING',
     SET_QUOTE_REQUEST_STATE_FAILURE = 'SET_QUOTE_REQUEST_STATE_FAILURE',
     SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE',
@@ -43,6 +44,7 @@ export const actions = {
     updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
     updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
+    setAvailableAssets: (availableAssets: Asset[]) => createAction(ActionTypes.SET_AVAILABLE_ASSETS, availableAssets),
     setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING),
     setQuoteRequestStateFailure: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE),
     setErrorMessage: (errorMessage: string) => createAction(ActionTypes.SET_ERROR_MESSAGE, errorMessage),
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index 4ed89bdc3..f8dbe9fd4 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -1,22 +1,33 @@
+import * as _ from 'lodash';
+
 import { BIG_NUMBER_ZERO } from '../constants';
+import { assetUtils } from '../util/asset';
 import { coinbaseApi } from '../util/coinbase_api';
 
-import { ActionTypes } from './actions';
-
+import { actions } from './actions';
 import { Store } from './store';
 
 export const asyncData = {
-    fetchAndDispatchToStore: async (store: Store) => {
+    fetchEthPriceAndDispatchToStore: async (store: Store) => {
         let ethUsdPrice = BIG_NUMBER_ZERO;
         try {
             ethUsdPrice = await coinbaseApi.getEthUsdPrice();
         } catch (e) {
             // ignore
         } finally {
-            store.dispatch({
-                type: ActionTypes.UPDATE_ETH_USD_PRICE,
-                data: ethUsdPrice,
-            });
+            store.dispatch(actions.updateEthUsdPrice(ethUsdPrice));
+        }
+    },
+    fetchAvailableAssetDatasAndDispatchToStore: async (store: Store) => {
+        const { assetBuyer, assetMetaDataMap, network } = store.getState();
+        if (!_.isUndefined(assetBuyer)) {
+            try {
+                const assetDatas = await assetBuyer.getAvailableAssetDatasAsync();
+                const assets = assetUtils.createAssetsFromAssetDatas(assetDatas, assetMetaDataMap, network);
+                store.dispatch(actions.setAvailableAssets(assets));
+            } catch (e) {
+                // ignore
+            }
         }
     },
 };
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index dd9403052..c0a8c1771 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -24,6 +24,7 @@ export interface State {
     assetBuyer?: AssetBuyer;
     assetMetaDataMap: ObjectMap<AssetMetaData>;
     selectedAsset?: Asset;
+    availableAssets: Asset[];
     selectedAssetAmount?: BigNumberInput;
     buyOrderState: OrderState;
     ethUsdPrice?: BigNumber;
@@ -36,6 +37,7 @@ export interface State {
 export const INITIAL_STATE: State = {
     network: Network.Mainnet,
     selectedAssetAmount: undefined,
+    availableAssets: [],
     assetMetaDataMap,
     buyOrderState: { processState: OrderProcessState.NONE },
     ethUsdPrice: undefined,
@@ -109,7 +111,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
             const newSelectedAssetData = action.data;
             let newSelectedAsset: Asset | undefined;
             if (!_.isUndefined(newSelectedAssetData)) {
-                newSelectedAsset = assetUtils.createAssetFromAssetData(
+                newSelectedAsset = assetUtils.createAssetFromAssetDataOrThrow(
                     newSelectedAssetData,
                     state.assetMetaDataMap,
                     state.network,
@@ -127,6 +129,11 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 buyOrderState: { processState: OrderProcessState.NONE },
                 selectedAssetAmount: undefined,
             };
+        case ActionTypes.SET_AVAILABLE_ASSETS:
+            return {
+                ...state,
+                availableAssets: action.data,
+            };
         default:
             return state;
     }
diff --git a/packages/instant/src/util/assert.ts b/packages/instant/src/util/assert.ts
index 584d3d4b1..1267a1d23 100644
--- a/packages/instant/src/util/assert.ts
+++ b/packages/instant/src/util/assert.ts
@@ -8,12 +8,12 @@ import { AssetMetaData } from '../types';
 
 export const assert = {
     ...sharedAssert,
-    isValidLiquiditySource(variableName: string, liquiditySource: string | SignedOrder[]): void {
-        if (_.isString(liquiditySource)) {
-            sharedAssert.isUri(variableName, liquiditySource);
+    isValidOrderSource(variableName: string, orderSource: string | SignedOrder[]): void {
+        if (_.isString(orderSource)) {
+            sharedAssert.isUri(variableName, orderSource);
             return;
         }
-        sharedAssert.doesConformToSchema(variableName, liquiditySource, schemas.signedOrdersSchema);
+        sharedAssert.doesConformToSchema(variableName, orderSource, schemas.signedOrdersSchema);
     },
     isValidAssetMetaDataMap(variableName: string, metaDataMap: ObjectMap<AssetMetaData>): void {
         _.forEach(metaDataMap, (metaData, assetData) => {
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index 630103c7b..0576a7b60 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -5,7 +5,31 @@ import { assetDataNetworkMapping } from '../data/asset_data_network_mapping';
 import { Asset, AssetMetaData, ERC20Asset, Network, ZeroExInstantError } from '../types';
 
 export const assetUtils = {
-    createAssetFromAssetData: (
+    createAssetsFromAssetDatas: (
+        assetDatas: string[],
+        assetMetaDataMap: ObjectMap<AssetMetaData>,
+        network: Network,
+    ): Asset[] => {
+        const arrayOfAssetOrUndefined = _.map(assetDatas, assetData =>
+            assetUtils.createAssetFromAssetDataIfExists(assetData, assetMetaDataMap, network),
+        );
+        return _.compact(arrayOfAssetOrUndefined);
+    },
+    createAssetFromAssetDataIfExists: (
+        assetData: string,
+        assetMetaDataMap: ObjectMap<AssetMetaData>,
+        network: Network,
+    ): Asset | undefined => {
+        const metaData = assetUtils.getMetaDataIfExists(assetData, assetMetaDataMap, network);
+        if (_.isUndefined(metaData)) {
+            return;
+        }
+        return {
+            assetData,
+            metaData,
+        };
+    },
+    createAssetFromAssetDataOrThrow: (
         assetData: string,
         assetMetaDataMap: ObjectMap<AssetMetaData>,
         network: Network,
@@ -16,6 +40,17 @@ export const assetUtils = {
         };
     },
     getMetaDataOrThrow: (assetData: string, metaDataMap: ObjectMap<AssetMetaData>, network: Network): AssetMetaData => {
+        const metaDataIfExists = assetUtils.getMetaDataIfExists(assetData, metaDataMap, network);
+        if (_.isUndefined(metaDataIfExists)) {
+            throw new Error(ZeroExInstantError.AssetMetaDataNotAvailable);
+        }
+        return metaDataIfExists;
+    },
+    getMetaDataIfExists: (
+        assetData: string,
+        metaDataMap: ObjectMap<AssetMetaData>,
+        network: Network,
+    ): AssetMetaData | undefined => {
         let mainnetAssetData: string | undefined = assetData;
         if (network !== Network.Mainnet) {
             const mainnetAssetDataIfExists = assetUtils.getAssociatedAssetDataIfExists(assetData, network);
@@ -24,11 +59,11 @@ export const assetUtils = {
             mainnetAssetData = mainnetAssetDataIfExists || assetData;
         }
         if (_.isUndefined(mainnetAssetData)) {
-            throw new Error(ZeroExInstantError.AssetMetaDataNotAvailable);
+            return;
         }
         const metaData = metaDataMap[mainnetAssetData];
         if (_.isUndefined(metaData)) {
-            throw new Error(ZeroExInstantError.AssetMetaDataNotAvailable);
+            return;
         }
         return metaData;
     },
-- 
cgit v1.2.3


From 3f918622bcce21ba104e0f13e71247796345ab0f Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 31 Oct 2018 19:50:37 -0700
Subject: feat: implement basic erc20 token selector

---
 .../src/components/erc20_token_selector.tsx        | 34 ++++++++++++++++++++
 .../src/components/zero_ex_instant_container.tsx   |  3 +-
 .../containers/available_erc20_token_selector.ts   | 36 ++++++++++++++++++++++
 packages/instant/src/redux/actions.ts              |  2 +-
 packages/instant/src/redux/reducer.ts              | 12 +-------
 packages/instant/src/util/asset.ts                 |  7 +++++
 6 files changed, 81 insertions(+), 13 deletions(-)
 create mode 100644 packages/instant/src/components/erc20_token_selector.tsx
 create mode 100644 packages/instant/src/containers/available_erc20_token_selector.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
new file mode 100644
index 000000000..a98176e9b
--- /dev/null
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -0,0 +1,34 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ERC20Asset } from '../types';
+
+import { Button, Container } from './ui';
+
+export interface ERC20TokenSelectorProps {
+    tokens: ERC20Asset[];
+    onTokenSelect: (token: ERC20Asset) => void;
+}
+
+export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => (
+    <Container>{_.map(tokens, token => <TokenSelectorRow token={token} onClick={onTokenSelect} />)}</Container>
+);
+
+interface TokenSelectorRowProps {
+    token: ERC20Asset;
+    onClick: (token: ERC20Asset) => void;
+}
+
+class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
+    public render(): React.ReactNode {
+        const { token } = this.props;
+        return (
+            <Container>
+                <Button onClick={this._handleClick}>Select {token.metaData.symbol}</Button>
+            </Container>
+        );
+    }
+    private readonly _handleClick = (): void => {
+        this.props.onClick(this.props.token);
+    };
+}
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 009ad9b2a..765ff7e3d 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -1,5 +1,6 @@
 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 { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
@@ -45,7 +46,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                         animationState={this.state.tokenSelectionPanelAnimationState}
                         onClose={this._handlePanelClose}
                     >
-                        Select Your Token
+                        <AvailableERC20TokenSelector />
                     </SlidingPanel>
                 </Container>
             </Container>
diff --git a/packages/instant/src/containers/available_erc20_token_selector.ts b/packages/instant/src/containers/available_erc20_token_selector.ts
new file mode 100644
index 000000000..6b5ecb6ac
--- /dev/null
+++ b/packages/instant/src/containers/available_erc20_token_selector.ts
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { State } from '../redux/reducer';
+import { ERC20Asset } from '../types';
+import { assetUtils } from '../util/asset';
+
+import { ERC20TokenSelector } from '../components/erc20_token_selector';
+import { Action, actions } from '../redux/actions';
+
+export interface AvailableERC20TokenSelectorProps {}
+
+interface ConnectedState {
+    tokens: ERC20Asset[];
+}
+
+interface ConnectedDispatch {
+    onTokenSelect: (token: ERC20Asset) => void;
+}
+
+const mapStateToProps = (state: State, _ownProps: AvailableERC20TokenSelectorProps): ConnectedState => ({
+    tokens: assetUtils.getERC20AssetsFromAssets(state.availableAssets),
+});
+
+const mapDispatchToProps = (
+    dispatch: Dispatch<Action>,
+    ownProps: AvailableERC20TokenSelectorProps,
+): ConnectedDispatch => ({
+    onTokenSelect: (token: ERC20Asset) => dispatch(actions.updateSelectedAsset(token)),
+});
+
+export const AvailableERC20TokenSelector: React.ComponentClass<AvailableERC20TokenSelectorProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(ERC20TokenSelector);
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index eadd8b42c..813c5e819 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -43,7 +43,7 @@ export const actions = {
         createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
     updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
-    updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
+    updateSelectedAsset: (asset: Asset) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, asset),
     setAvailableAssets: (availableAssets: Asset[]) => createAction(ActionTypes.SET_AVAILABLE_ASSETS, availableAssets),
     setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING),
     setQuoteRequestStateFailure: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index c0a8c1771..57d95167a 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -14,7 +14,6 @@ import {
     OrderProcessState,
     OrderState,
 } from '../types';
-import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
 
 import { Action, ActionTypes } from './actions';
@@ -108,18 +107,9 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 latestErrorDisplayStatus: DisplayStatus.Hidden,
             };
         case ActionTypes.UPDATE_SELECTED_ASSET:
-            const newSelectedAssetData = action.data;
-            let newSelectedAsset: Asset | undefined;
-            if (!_.isUndefined(newSelectedAssetData)) {
-                newSelectedAsset = assetUtils.createAssetFromAssetDataOrThrow(
-                    newSelectedAssetData,
-                    state.assetMetaDataMap,
-                    state.network,
-                );
-            }
             return {
                 ...state,
-                selectedAsset: newSelectedAsset,
+                selectedAsset: action.data,
             };
         case ActionTypes.RESET_AMOUNT:
             return {
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index 0576a7b60..2efaadbd2 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -98,4 +98,11 @@ export const assetUtils = {
         }
         return assetDataGroupIfExists[Network.Mainnet];
     },
+    getERC20AssetsFromAssets: (assets: Asset[]): ERC20Asset[] => {
+        const erc20sOrUndefined = _.map(
+            assets,
+            asset => (asset.metaData.assetProxyId === AssetProxyId.ERC20 ? (asset as ERC20Asset) : undefined),
+        );
+        return _.compact(erc20sOrUndefined);
+    },
 };
-- 
cgit v1.2.3


From f9a38fcb32ee4e755c7f271a1c5a116c29985a10 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 09:51:27 -0700
Subject: ended -> hasEnded

---
 packages/instant/src/components/time_counter.tsx            | 6 +++---
 packages/instant/src/components/timed_progress_bar.tsx      | 6 +++---
 packages/instant/src/containers/selected_asset_progress.tsx | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/time_counter.tsx b/packages/instant/src/components/time_counter.tsx
index 26deb82bd..7d9245b5d 100644
--- a/packages/instant/src/components/time_counter.tsx
+++ b/packages/instant/src/components/time_counter.tsx
@@ -7,7 +7,7 @@ import { Text } from './ui/text';
 
 export interface TimeCounterProps {
     estimatedTimeMs: number;
-    ended: boolean;
+    hasEnded: boolean;
 }
 interface TimeCounterState {
     elapsedSeconds: number;
@@ -28,7 +28,7 @@ export class TimeCounter extends React.Component<TimeCounterProps, TimeCounterSt
     }
 
     public componentDidUpdate(prevProps: TimeCounterProps): void {
-        if (prevProps.ended !== this.props.ended) {
+        if (prevProps.hasEnded !== this.props.hasEnded) {
             this._setupTimerBasedOnProps();
         }
     }
@@ -44,7 +44,7 @@ export class TimeCounter extends React.Component<TimeCounterProps, TimeCounterSt
     }
 
     private _setupTimerBasedOnProps(): void {
-        this.props.ended ? this._clearTimer() : this._newTimer();
+        this.props.hasEnded ? this._clearTimer() : this._newTimer();
     }
 
     private _newTimer(): void {
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index a4bb2eabd..16781b9d7 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -8,7 +8,7 @@ import { Container } from './ui/container';
 
 export interface TimedProgressBarProps {
     expectedTimeMs: number;
-    ended: boolean;
+    hasEnded: boolean;
 }
 
 interface TimedProgressBarState {
@@ -39,7 +39,7 @@ export class TimedProgressBar extends React.Component<TimedProgressBarProps, Tim
     }
 
     public componentDidUpdate(prevProps: TimedProgressBarProps, prevState: TimedProgressBarState): void {
-        if (prevProps.ended === false && this.props.ended === true) {
+        if (prevProps.hasEnded === false && this.props.hasEnded === true) {
             // Show nice animation going to end
             // barRef current should always exist, but checking for typesafety
             if (this._barRef.current) {
@@ -53,7 +53,7 @@ export class TimedProgressBar extends React.Component<TimedProgressBarProps, Tim
             return;
         }
 
-        if (prevProps.expectedTimeMs !== this.props.expectedTimeMs || prevProps.ended !== this.props.ended) {
+        if (prevProps.expectedTimeMs !== this.props.expectedTimeMs || prevProps.hasEnded !== this.props.hasEnded) {
             // things changed, get fresh state
             this.setState(beginningState(this.props));
         }
diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx
index afbb45dac..a910d8031 100644
--- a/packages/instant/src/containers/selected_asset_progress.tsx
+++ b/packages/instant/src/containers/selected_asset_progress.tsx
@@ -24,14 +24,14 @@ export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent<
         buyOrderState.processState === OrderProcessState.FAILURE
     ) {
         const progress = buyOrderState.progress;
-        const ended = buyOrderState.processState !== OrderProcessState.PROCESSING;
+        const hasEnded = buyOrderState.processState !== OrderProcessState.PROCESSING;
         const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
         return (
             <Container padding="20px 20px 0px 20px" width="100%">
                 <Container marginBottom="5px">
-                    <TimeCounter estimatedTimeMs={expectedTimeMs} ended={ended} key={progress.startTimeUnix} />
+                    <TimeCounter estimatedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
                 </Container>
-                <TimedProgressBar expectedTimeMs={expectedTimeMs} ended={ended} key={progress.startTimeUnix} />
+                <TimedProgressBar expectedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
             </Container>
         );
     }
-- 
cgit v1.2.3


From a148db5022379cdd8c0009d2f67f451dff376ad8 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 09:52:34 -0700
Subject: Fix test name

---
 packages/instant/test/util/time.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/test/util/time.test.ts b/packages/instant/test/util/time.test.ts
index 7165761de..fcb4e1875 100644
--- a/packages/instant/test/util/time.test.ts
+++ b/packages/instant/test/util/time.test.ts
@@ -1,6 +1,6 @@
 import { timeUtil } from '../../src/util/time';
 
-describe('assetDataUtil', () => {
+describe('timeUtil', () => {
     describe('secondsToHumanDescription', () => {
         const numsToResults: {
             [aNumber: number]: string;
-- 
cgit v1.2.3


From 9ef6f82a95c0faca0e6ba03ddd425271454dcfe3 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 09:59:37 -0700
Subject: Take out old ended variable

---
 packages/instant/src/redux/reducer.ts | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 68b788be5..cf24f8488 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -111,17 +111,13 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
             const failureTxHash = action.data;
             if ('txHash' in state.buyOrderState) {
                 if (state.buyOrderState.txHash === failureTxHash) {
-                    const failureProgress = {
-                        startTimeUnix: state.buyOrderState.progress.startTimeUnix,
-                        expectedEndTimeUnix: state.buyOrderState.progress.expectedEndTimeUnix,
-                        ended: true,
-                    };
+                    const { txHash, progress } = state.buyOrderState;
                     return {
                         ...state,
                         buyOrderState: {
                             processState: OrderProcessState.FAILURE,
-                            txHash: state.buyOrderState.txHash,
-                            progress: failureProgress,
+                            txHash,
+                            progress,
                         },
                     };
                 }
@@ -131,17 +127,13 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
             const successTxHash = action.data;
             if ('txHash' in state.buyOrderState) {
                 if (state.buyOrderState.txHash === successTxHash) {
-                    const successProgress = {
-                        startTimeUnix: state.buyOrderState.progress.startTimeUnix,
-                        expectedEndTimeUnix: state.buyOrderState.progress.expectedEndTimeUnix,
-                        ended: true,
-                    };
+                    const { txHash, progress } = state.buyOrderState;
                     return {
                         ...state,
                         buyOrderState: {
                             processState: OrderProcessState.SUCCESS,
-                            txHash: state.buyOrderState.txHash,
-                            progress: successProgress,
+                            txHash,
+                            progress,
                         },
                     };
                 }
-- 
cgit v1.2.3


From 66b485c7d43df3600c04e1eb565952cc7726dcb1 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 10:04:04 -0700
Subject: Minor cleanup

Don't export beginningState, and updating prop name in comment
---
 packages/instant/src/components/timed_progress_bar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index 16781b9d7..8dc95808b 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -17,7 +17,7 @@ interface TimedProgressBarState {
     maxWidthPercent: number;
 }
 
-export const beginningState = (props: TimedProgressBarProps): TimedProgressBarState => {
+const beginningState = (props: TimedProgressBarProps): TimedProgressBarState => {
     return {
         animationTimeMs: props.expectedTimeMs,
         animationStartingWidth: '0%',
@@ -28,7 +28,7 @@ export const beginningState = (props: TimedProgressBarProps): TimedProgressBarSt
 /**
  * Timed Progress Bar
  * Goes from 0% -> PROGRESS_STALL_AT_PERCENTAGE% over time of expectedTimeMs
- * When ended set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length
+ * When hasEnded set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length
  */
 export class TimedProgressBar extends React.Component<TimedProgressBarProps, TimedProgressBarState> {
     private readonly _barRef = React.createRef<HTMLDivElement>();
-- 
cgit v1.2.3


From 544ddd44a00fe7432d6d8cef44c75f9bfbc78150 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 10:46:34 -0700
Subject: Getting rid of TimedProgress state

---
 .../instant/src/components/timed_progress_bar.tsx  | 70 +++++++---------------
 1 file changed, 23 insertions(+), 47 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index 8dc95808b..694ae7e2f 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -11,66 +11,42 @@ export interface TimedProgressBarProps {
     hasEnded: boolean;
 }
 
-interface TimedProgressBarState {
-    animationTimeMs: number;
-    animationStartingWidth: string;
-    maxWidthPercent: number;
-}
-
-const beginningState = (props: TimedProgressBarProps): TimedProgressBarState => {
-    return {
-        animationTimeMs: props.expectedTimeMs,
-        animationStartingWidth: '0%',
-        maxWidthPercent: PROGRESS_STALL_AT_PERCENTAGE,
-    };
-};
-
 /**
  * Timed Progress Bar
  * Goes from 0% -> PROGRESS_STALL_AT_PERCENTAGE% over time of expectedTimeMs
  * When hasEnded set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length
  */
-export class TimedProgressBar extends React.Component<TimedProgressBarProps, TimedProgressBarState> {
+export class TimedProgressBar extends React.Component<TimedProgressBarProps, {}> {
     private readonly _barRef = React.createRef<HTMLDivElement>();
 
-    public constructor(props: TimedProgressBarProps) {
-        super(props);
-        this.state = beginningState(props);
-    }
-
-    public componentDidUpdate(prevProps: TimedProgressBarProps, prevState: TimedProgressBarState): void {
-        if (prevProps.hasEnded === false && this.props.hasEnded === true) {
-            // Show nice animation going to end
-            // barRef current should always exist, but checking for typesafety
-            if (this._barRef.current) {
-                const curProgressWidth = this._barRef.current.offsetWidth;
-                this.setState({
-                    animationTimeMs: PROGRESS_FINISH_ANIMATION_TIME_MS,
-                    animationStartingWidth: `${curProgressWidth}px`,
-                    maxWidthPercent: 100,
-                });
-            }
-            return;
-        }
-
-        if (prevProps.expectedTimeMs !== this.props.expectedTimeMs || prevProps.hasEnded !== this.props.hasEnded) {
-            // things changed, get fresh state
-            this.setState(beginningState(this.props));
-        }
-    }
-
     public render(): React.ReactNode {
+        const timedProgressProps = this._calculateTimedProgressProps();
         return (
             <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
-                <TimedProgress
-                    fromWidth={this.state.animationStartingWidth}
-                    timeMs={this.state.animationTimeMs}
-                    maxWidthPercent={this.state.maxWidthPercent}
-                    ref={this._barRef as any}
-                />
+                <TimedProgress {...timedProgressProps} ref={this._barRef as any} />
             </Container>
         );
     }
+
+    private _calculateTimedProgressProps(): TimedProgressProps {
+        if (this.props.hasEnded) {
+            if (!this._barRef.current) {
+                throw new Error('ended but no reference');
+            }
+            const fromWidth = `${this._barRef.current.offsetWidth}px`;
+            return {
+                timeMs: PROGRESS_FINISH_ANIMATION_TIME_MS,
+                fromWidth,
+                maxWidthPercent: 100,
+            };
+        }
+
+        return {
+            timeMs: this.props.expectedTimeMs,
+            fromWidth: '0px',
+            maxWidthPercent: PROGRESS_STALL_AT_PERCENTAGE,
+        };
+    }
 }
 
 const expandingWidthKeyframes = (fromWidth: string, maxWidthPercent: number) => {
-- 
cgit v1.2.3


From 9990f8720cbc04bc7a5074d6668f22af80b2a476 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 10:50:37 -0700
Subject: maxWidth -> toWidth, and make from and to width consistent units

---
 .../instant/src/components/timed_progress_bar.tsx    | 20 ++++++++++----------
 packages/instant/src/constants.ts                    |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index 694ae7e2f..78c7ee849 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_PERCENTAGE } from '../constants';
+import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_WIDTH } from '../constants';
 import { ColorOption, keyframes, styled } from '../style/theme';
 
 import { Container } from './ui/container';
@@ -13,8 +13,8 @@ export interface TimedProgressBarProps {
 
 /**
  * Timed Progress Bar
- * Goes from 0% -> PROGRESS_STALL_AT_PERCENTAGE% over time of expectedTimeMs
- * When hasEnded set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length
+ * Goes from 0% -> PROGRESS_STALL_AT_WIDTH over time of expectedTimeMs
+ * When hasEnded set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length of time
  */
 export class TimedProgressBar extends React.Component<TimedProgressBarProps, {}> {
     private readonly _barRef = React.createRef<HTMLDivElement>();
@@ -37,25 +37,25 @@ export class TimedProgressBar extends React.Component<TimedProgressBarProps, {}>
             return {
                 timeMs: PROGRESS_FINISH_ANIMATION_TIME_MS,
                 fromWidth,
-                maxWidthPercent: 100,
+                toWidth: '100%',
             };
         }
 
         return {
             timeMs: this.props.expectedTimeMs,
             fromWidth: '0px',
-            maxWidthPercent: PROGRESS_STALL_AT_PERCENTAGE,
+            toWidth: PROGRESS_STALL_AT_WIDTH,
         };
     }
 }
 
-const expandingWidthKeyframes = (fromWidth: string, maxWidthPercent: number) => {
+const expandingWidthKeyframes = (fromWidth: string, toWidth: string) => {
     return keyframes`
           from {
-              width: ${fromWidth}
+              width: ${fromWidth};
           }
           to {
-              width: ${maxWidthPercent}%;
+              width: ${toWidth};
           }
       `;
 };
@@ -63,7 +63,7 @@ const expandingWidthKeyframes = (fromWidth: string, maxWidthPercent: number) =>
 interface TimedProgressProps {
     timeMs: number;
     fromWidth: string;
-    maxWidthPercent: number;
+    toWidth: string;
 }
 // TODO use PrimaryColor instead of black
 export const TimedProgress =
@@ -73,6 +73,6 @@ export const TimedProgress =
     background-color: black;
     border-radius: 6px;
     height: 6px;
-    animation: ${props => expandingWidthKeyframes(props.fromWidth, props.maxWidthPercent)}
+    animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)}
       ${props => props.timeMs}ms linear 1 forwards;
   `;
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index fcf6e0798..df1e6f53f 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -8,5 +8,5 @@ export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
 export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = 2 * 60 * 1000; // 2 minutes
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
-export const PROGRESS_STALL_AT_PERCENTAGE = 95;
+export const PROGRESS_STALL_AT_WIDTH = '95%';
 export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200;
-- 
cgit v1.2.3


From f82d16a5b06a47f3ede917165ba75dfd73f48137 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 11:15:07 -0700
Subject: Use primary color instead of black

---
 packages/instant/src/components/timed_progress_bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index 78c7ee849..c6ba4ac19 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -70,7 +70,7 @@ export const TimedProgress =
     styled.div <
     TimedProgressProps >
     `
-    background-color: black;
+    background-color: ${props => props.theme[ColorOption.primaryColor]};
     border-radius: 6px;
     height: 6px;
     animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)}
-- 
cgit v1.2.3


From cd79a2fad1babd1d421c693208cd7de5ae980630 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 11:15:34 -0700
Subject: Use new constants

---
 packages/instant/src/components/time_counter.tsx | 5 +++--
 packages/instant/src/constants.ts                | 4 +++-
 2 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/time_counter.tsx b/packages/instant/src/components/time_counter.tsx
index 7d9245b5d..c98fd2550 100644
--- a/packages/instant/src/components/time_counter.tsx
+++ b/packages/instant/src/components/time_counter.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { ONE_SECOND_MS } from '../constants';
 import { timeUtil } from '../util/time';
 
 import { Flex } from './ui/flex';
@@ -34,7 +35,7 @@ export class TimeCounter extends React.Component<TimeCounterProps, TimeCounterSt
     }
 
     public render(): React.ReactNode {
-        const estimatedTimeSeconds = this.props.estimatedTimeMs / 1000;
+        const estimatedTimeSeconds = this.props.estimatedTimeMs / ONE_SECOND_MS;
         return (
             <Flex justify="space-between">
                 <Text>Est. Time ({timeUtil.secondsToHumanDescription(estimatedTimeSeconds)})</Text>
@@ -53,7 +54,7 @@ export class TimeCounter extends React.Component<TimeCounterProps, TimeCounterSt
             this.setState({
                 elapsedSeconds: this.state.elapsedSeconds + 1,
             });
-        }, 1000);
+        }, ONE_SECOND_MS);
     }
 
     private _clearTimer(): void {
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index df1e6f53f..e811d3d13 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -4,8 +4,10 @@ export const ETH_DECIMALS = 18;
 export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
 export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
 export const GWEI_IN_WEI = new BigNumber(1000000000);
+export const ONE_SECOND_MS = 1000;
+export const ONE_MINUTE_MS = ONE_SECOND_MS * 60;
 export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
-export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = 2 * 60 * 1000; // 2 minutes
+export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = ONE_MINUTE_MS * 2;
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
 export const PROGRESS_STALL_AT_WIDTH = '95%';
-- 
cgit v1.2.3


From 3430896eb79b68e370b68f8954b1ef1b97d86a18 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 11:17:41 -0700
Subject: Remove old TODO

---
 packages/instant/src/components/timed_progress_bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index c6ba4ac19..f2a6f5745 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -65,7 +65,7 @@ interface TimedProgressProps {
     fromWidth: string;
     toWidth: string;
 }
-// TODO use PrimaryColor instead of black
+
 export const TimedProgress =
     styled.div <
     TimedProgressProps >
-- 
cgit v1.2.3


From 61a1a0be974c8610623f2bcb9a43797532cc78d9 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 11:29:33 -0700
Subject: Move BuyOrderProgress to its own component

---
 .../instant/src/components/buy_order_progress.tsx  | 35 ++++++++++++++++++
 .../src/containers/selected_asset_progress.tsx     | 42 +++-------------------
 2 files changed, 39 insertions(+), 38 deletions(-)
 create mode 100644 packages/instant/src/components/buy_order_progress.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_order_progress.tsx b/packages/instant/src/components/buy_order_progress.tsx
new file mode 100644
index 000000000..e259e5606
--- /dev/null
+++ b/packages/instant/src/components/buy_order_progress.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { TimedProgressBar } from '../components/timed_progress_bar';
+
+import { TimeCounter } from '../components/time_counter';
+import { Container } from '../components/ui';
+import { OrderProcessState, OrderState } from '../types';
+
+export interface BuyOrderProgressProps {
+    buyOrderState: OrderState;
+}
+
+export const BuyOrderProgress: React.StatelessComponent<BuyOrderProgressProps> = props => {
+    const { buyOrderState } = props;
+
+    if (
+        buyOrderState.processState === OrderProcessState.PROCESSING ||
+        buyOrderState.processState === OrderProcessState.SUCCESS ||
+        buyOrderState.processState === OrderProcessState.FAILURE
+    ) {
+        const progress = buyOrderState.progress;
+        const hasEnded = buyOrderState.processState !== OrderProcessState.PROCESSING;
+        const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
+        return (
+            <Container padding="20px 20px 0px 20px" width="100%">
+                <Container marginBottom="5px">
+                    <TimeCounter estimatedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
+                </Container>
+                <TimedProgressBar expectedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
+            </Container>
+        );
+    }
+
+    return null;
+};
diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx
index a910d8031..354a15bf0 100644
--- a/packages/instant/src/containers/selected_asset_progress.tsx
+++ b/packages/instant/src/containers/selected_asset_progress.tsx
@@ -1,49 +1,15 @@
-import * as React from 'react';
+// TODO: rename file and props to SelectedAssetBuyOrderProgress and use .ts
 
 import { connect } from 'react-redux';
 
-import { TimedProgressBar } from '../components/timed_progress_bar';
-
-import { TimeCounter } from '../components/time_counter';
-import { Container } from '../components/ui';
+import { BuyOrderProgress } from '../components/buy_order_progress';
 import { State } from '../redux/reducer';
-import { OrderProcessState, OrderState, SimulatedProgress } from '../types';
-
-interface SelectedAssetProgressComponentProps {
-    buyOrderState: OrderState;
-}
-// TODO: rename this component and move to seperate file, and get props using mapStateToProps
-export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent<
-    SelectedAssetProgressComponentProps
-> = props => {
-    const { buyOrderState } = props;
-
-    if (
-        buyOrderState.processState === OrderProcessState.PROCESSING ||
-        buyOrderState.processState === OrderProcessState.SUCCESS ||
-        buyOrderState.processState === OrderProcessState.FAILURE
-    ) {
-        const progress = buyOrderState.progress;
-        const hasEnded = buyOrderState.processState !== OrderProcessState.PROCESSING;
-        const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
-        return (
-            <Container padding="20px 20px 0px 20px" width="100%">
-                <Container marginBottom="5px">
-                    <TimeCounter estimatedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
-                </Container>
-                <TimedProgressBar expectedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
-            </Container>
-        );
-    }
-
-    return null;
-};
+import { OrderState } from '../types';
 
 interface ConnectedState {
     buyOrderState: OrderState;
-    simulatedProgress?: SimulatedProgress;
 }
 const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
     buyOrderState: state.buyOrderState,
 });
-export const SelectedAssetProgress = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent);
+export const SelectedAssetProgress = connect(mapStateToProps)(BuyOrderProgress);
-- 
cgit v1.2.3


From 771e01162d2c1f8543d5561872fb82af9e8e7b62 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 11:30:13 -0700
Subject: Rename export

---
 packages/instant/src/components/zero_ex_instant_container.tsx | 4 ++--
 packages/instant/src/containers/selected_asset_progress.tsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 87a7cee88..efebf264c 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -5,7 +5,7 @@ import { LatestError } from '../containers/latest_error';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 
-import { SelectedAssetProgress } from '../containers/selected_asset_progress';
+import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_progress';
 
 import { ColorOption } from '../style/theme';
 
@@ -26,7 +26,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
         >
             <Flex direction="column" justify="flex-start">
                 <SelectedAssetInstantHeading />
-                <SelectedAssetProgress />
+                <SelectedAssetBuyOrderProgress />
                 <LatestBuyQuoteOrderDetails />
                 <Container padding="20px" width="100%">
                     <SelectedAssetBuyOrderStateButtons />
diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx
index 354a15bf0..726967bc7 100644
--- a/packages/instant/src/containers/selected_asset_progress.tsx
+++ b/packages/instant/src/containers/selected_asset_progress.tsx
@@ -12,4 +12,4 @@ interface ConnectedState {
 const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
     buyOrderState: state.buyOrderState,
 });
-export const SelectedAssetProgress = connect(mapStateToProps)(BuyOrderProgress);
+export const SelectedAssetBuyOrderProgress = connect(mapStateToProps)(BuyOrderProgress);
-- 
cgit v1.2.3


From f9d13cd43ae43c05558538ac3d108552c7854fee Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 11:32:18 -0700
Subject: Move file to new file to reflect the new export name

---
 .../instant/src/components/zero_ex_instant_container.tsx  |  2 +-
 .../src/containers/selected_asset_buy_order_progress.ts   | 13 +++++++++++++
 .../instant/src/containers/selected_asset_progress.tsx    | 15 ---------------
 3 files changed, 14 insertions(+), 16 deletions(-)
 create mode 100644 packages/instant/src/containers/selected_asset_buy_order_progress.ts
 delete mode 100644 packages/instant/src/containers/selected_asset_progress.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index efebf264c..c47f3af73 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -5,7 +5,7 @@ import { LatestError } from '../containers/latest_error';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 
-import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_progress';
+import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress';
 
 import { ColorOption } from '../style/theme';
 
diff --git a/packages/instant/src/containers/selected_asset_buy_order_progress.ts b/packages/instant/src/containers/selected_asset_buy_order_progress.ts
new file mode 100644
index 000000000..7c8c24676
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_buy_order_progress.ts
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+
+import { BuyOrderProgress } from '../components/buy_order_progress';
+import { State } from '../redux/reducer';
+import { OrderState } from '../types';
+
+interface ConnectedState {
+    buyOrderState: OrderState;
+}
+const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
+    buyOrderState: state.buyOrderState,
+});
+export const SelectedAssetBuyOrderProgress = connect(mapStateToProps)(BuyOrderProgress);
diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx
deleted file mode 100644
index 726967bc7..000000000
--- a/packages/instant/src/containers/selected_asset_progress.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// TODO: rename file and props to SelectedAssetBuyOrderProgress and use .ts
-
-import { connect } from 'react-redux';
-
-import { BuyOrderProgress } from '../components/buy_order_progress';
-import { State } from '../redux/reducer';
-import { OrderState } from '../types';
-
-interface ConnectedState {
-    buyOrderState: OrderState;
-}
-const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
-    buyOrderState: state.buyOrderState,
-});
-export const SelectedAssetBuyOrderProgress = connect(mapStateToProps)(BuyOrderProgress);
-- 
cgit v1.2.3


From 82b6a81a223a75040054b4578a16f88be6271440 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 11:35:53 -0700
Subject: removing unused imports

---
 .../instant/src/containers/selected_asset_buy_order_state_buttons.ts    | 2 +-
 packages/instant/src/redux/actions.ts                                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index a94538ffc..7c36fa4d0 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -7,7 +7,7 @@ import { Dispatch } from 'redux';
 import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
-import { OrderProcessState, OrderState, ZeroExInstantError } from '../types';
+import { OrderProcessState, ZeroExInstantError } from '../types';
 import { errorFlasher } from '../util/error_flasher';
 import { etherscanUtil } from '../util/etherscan';
 
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 627e39ffc..885f09c7c 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -4,7 +4,7 @@ import * as _ from 'lodash';
 
 import { BigNumberInput } from '../util/big_number_input';
 
-import { ActionsUnion, OrderState, SimulatedProgress } from '../types';
+import { ActionsUnion } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
-- 
cgit v1.2.3


From dc655fd903c5b35ea9280c5afd10b78b25fa7ca3 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 12:08:48 -0700
Subject: Better styling of estimated time

---
 packages/instant/src/components/time_counter.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/time_counter.tsx b/packages/instant/src/components/time_counter.tsx
index c98fd2550..22dc634d9 100644
--- a/packages/instant/src/components/time_counter.tsx
+++ b/packages/instant/src/components/time_counter.tsx
@@ -3,8 +3,10 @@ import * as React from 'react';
 import { ONE_SECOND_MS } from '../constants';
 import { timeUtil } from '../util/time';
 
+import { Container } from './ui/container';
 import { Flex } from './ui/flex';
 import { Text } from './ui/text';
+import { ColorOption } from '../style/theme';
 
 export interface TimeCounterProps {
     estimatedTimeMs: number;
@@ -38,8 +40,19 @@ export class TimeCounter extends React.Component<TimeCounterProps, TimeCounterSt
         const estimatedTimeSeconds = this.props.estimatedTimeMs / ONE_SECOND_MS;
         return (
             <Flex justify="space-between">
-                <Text>Est. Time ({timeUtil.secondsToHumanDescription(estimatedTimeSeconds)})</Text>
-                <Text>Time: {timeUtil.secondsToStopwatchTime(this.state.elapsedSeconds)}</Text>
+                <Container>
+                    <Container marginRight="5px" display="inline">
+                        <Text fontWeight={600} fontColor={ColorOption.grey}>
+                            Est. Time
+                        </Text>
+                    </Container>
+                    <Text fontColor={ColorOption.grey}>
+                        ({timeUtil.secondsToHumanDescription(estimatedTimeSeconds)})
+                    </Text>
+                </Container>
+                <Text fontColor={ColorOption.grey}>
+                    Time: {timeUtil.secondsToStopwatchTime(this.state.elapsedSeconds)}
+                </Text>
             </Flex>
         );
     }
-- 
cgit v1.2.3


From b55ba3a31823699fa2460fad6fd22b913c38c946 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 13:10:51 -0700
Subject: feat: add states to the erc20 input for no assets or only 1 asset

---
 packages/instant/public/index.html                 |  6 ++--
 .../src/components/erc20_asset_amount_input.tsx    | 32 ++++++++++++++++++----
 .../src/components/erc20_token_selector.tsx        |  4 ++-
 .../instant/src/components/zero_ex_instant.tsx     |  6 +++-
 .../containers/available_erc20_token_selector.ts   |  2 +-
 .../selected_erc20_asset_amount_input.ts           | 20 +++++++-------
 packages/instant/src/redux/reducer.ts              |  4 +--
 7 files changed, 50 insertions(+), 24 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 74975678a..1c08aa5a1 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -59,13 +59,13 @@
             assetData: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498',
         }
         const orderSourceOverride = queryParams.getQueryParamValue('orderSource');
+        const availableAssetDatasString = queryParams.getQueryParamValue('availableAssetDatas');
         const renderOptionsOverrides = {
             orderSource: orderSourceOverride === 'provided' ? [providedOrder] : orderSourceOverride,
-            assetData: queryParams.getQueryParamValue('assetData'),
             networkId: +queryParams.getQueryParamValue('networkId') || undefined,
             defaultAssetBuyAmount: +queryParams.getQueryParamValue('defaultAssetBuyAmount') || undefined,
-            availableAssetIdentifiers: JSON.parse(queryParams.getQueryParamValue('availableAssetIdentifiers') || '[]'),
-            defaultSelectedAssetIdentifier: queryParams.getQueryParamValue('defaultSelectedAssetIdentifier'),
+            availableAssetDatas: availableAssetDatasString ? JSON.parse(availableAssetDatasString) : undefined,
+            defaultSelectedAssetData: queryParams.getQueryParamValue('defaultSelectedAssetData'),
         }
         const renderOptions = Object.assign({}, renderOptionsDefaults, removeUndefined(renderOptionsOverrides));
         zeroExInstant.render(renderOptions);
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index b1fec6405..e222bc576 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -19,6 +19,7 @@ export interface ERC20AssetAmountInputProps {
     startingFontSizePx: number;
     fontColor?: ColorOption;
     isDisabled: boolean;
+    numberOfAssetsAvailable?: number;
 }
 
 export interface ERC20AssetAmountInputState {
@@ -47,6 +48,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
     private readonly _renderContentForAsset = (asset: ERC20Asset): React.ReactNode => {
         const { onChange, ...rest } = this.props;
         const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
+        const onSymbolClick = this._generateSelectAssetClick();
         return (
             <React.Fragment>
                 <Container borderBottom={amountBorderBottom} display="inline-block">
@@ -59,7 +61,6 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
                     />
                 </Container>
                 <Container
-                    cursor="pointer"
                     display="inline-block"
                     marginLeft="8px"
                     title={assetUtils.bestNameForAsset(asset, undefined)}
@@ -69,7 +70,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
                             fontSize={`${this.state.currentFontSizePx}px`}
                             fontColor={ColorOption.white}
                             textTransform="uppercase"
-                            onClick={this._handleSymbolClick}
+                            onClick={onSymbolClick}
                         >
                             {assetUtils.formattedSymbolForAsset(asset)}
                         </Text>
@@ -80,6 +81,13 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         );
     };
     private readonly _renderBackupContent = (): React.ReactNode => {
+        const { numberOfAssetsAvailable } = this.props;
+        let text = 'Select Token';
+        if (_.isUndefined(numberOfAssetsAvailable)) {
+            text = '...Loading';
+        } else if (numberOfAssetsAvailable === 0) {
+            text = 'Assets Unavailable';
+        }
         return (
             <Flex>
                 <Text
@@ -87,17 +95,21 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
                     fontColor={ColorOption.white}
                     opacity={0.7}
                     fontWeight="500"
-                    onClick={this._handleSymbolClick}
+                    onClick={this._generateSelectAssetClick()}
                 >
-                    Select Token
+                    {text}
                 </Text>
                 {this._renderChevronIcon()}
             </Flex>
         );
     };
     private readonly _renderChevronIcon = (): React.ReactNode => {
+        const { numberOfAssetsAvailable } = this.props;
+        if (_.isUndefined(numberOfAssetsAvailable) || numberOfAssetsAvailable <= 1) {
+            return null;
+        }
         return (
-            <Container marginLeft="5px" onClick={this._handleSymbolClick}>
+            <Container cursor="pointer" marginLeft="5px" onClick={this._generateSelectAssetClick()}>
                 <Icon icon="chevron" width={12} />
             </Container>
         );
@@ -110,7 +122,15 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             currentFontSizePx: fontSizePx,
         });
     };
-    private readonly _handleSymbolClick = () => {
+    // We don't want to allow opening the token selection panel if there are no assets.
+    private readonly _generateSelectAssetClick = (): (() => void) | undefined => {
+        const { numberOfAssetsAvailable } = this.props;
+        if (_.isUndefined(numberOfAssetsAvailable) || numberOfAssetsAvailable <= 1) {
+            return undefined;
+        }
+        return this._handleSelectAssetClick;
+    };
+    private readonly _handleSelectAssetClick = () => {
         if (this.props.onSelectAssetClick) {
             this.props.onSelectAssetClick(this.props.asset);
         }
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index a98176e9b..12051b382 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -11,7 +11,9 @@ export interface ERC20TokenSelectorProps {
 }
 
 export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => (
-    <Container>{_.map(tokens, token => <TokenSelectorRow token={token} onClick={onTokenSelect} />)}</Container>
+    <Container>
+        {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)}
+    </Container>
 );
 
 interface TokenSelectorRowProps {
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index ab6350010..e49001d12 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -37,6 +37,7 @@ export interface ZeroExInstantOptionalProps {
 
 export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
     private readonly _store: Store;
+    // TODO(fragosti): Write tests for this beast once we inject a provider.
     private static _mergeInitialStateWithProps(props: ZeroExInstantProps, state: State = INITIAL_STATE): State {
         const networkId = props.networkId || state.network;
         // TODO: Provider needs to not be hard-coded to injected web3.
@@ -72,6 +73,9 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
             selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
                 ? state.selectedAssetAmount
                 : new BigNumberInput(props.defaultAssetBuyAmount),
+            availableAssets: _.isUndefined(props.availableAssetDatas)
+                ? undefined
+                : assetUtils.createAssetsFromAssetDatas(props.availableAssetDatas, completeAssetMetaDataMap, networkId),
             assetMetaDataMap: completeAssetMetaDataMap,
         };
         return storeStateFromProps;
@@ -87,7 +91,7 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
         // tslint:disable-next-line:no-floating-promises
         asyncData.fetchEthPriceAndDispatchToStore(this._store);
         // fetch available assets if none are specified
-        if (_.isEmpty(state.availableAssets)) {
+        if (_.isUndefined(state.availableAssets)) {
             // tslint:disable-next-line:no-floating-promises
             asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
         }
diff --git a/packages/instant/src/containers/available_erc20_token_selector.ts b/packages/instant/src/containers/available_erc20_token_selector.ts
index 6b5ecb6ac..e8bacdba0 100644
--- a/packages/instant/src/containers/available_erc20_token_selector.ts
+++ b/packages/instant/src/containers/available_erc20_token_selector.ts
@@ -20,7 +20,7 @@ interface ConnectedDispatch {
 }
 
 const mapStateToProps = (state: State, _ownProps: AvailableERC20TokenSelectorProps): ConnectedState => ({
-    tokens: assetUtils.getERC20AssetsFromAssets(state.availableAssets),
+    tokens: assetUtils.getERC20AssetsFromAssets(state.availableAssets || []),
 });
 
 const mapDispatchToProps = (
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 217d603d2..64b6f4b3b 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -27,6 +27,7 @@ interface ConnectedState {
     value?: BigNumberInput;
     asset?: ERC20Asset;
     isDisabled: boolean;
+    numberOfAssetsAvailable?: number;
 }
 
 interface ConnectedDispatch {
@@ -38,6 +39,7 @@ interface ConnectedProps {
     asset?: ERC20Asset;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
     isDisabled: boolean;
+    numberOfAssetsAvailable?: number;
 }
 
 type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps;
@@ -46,20 +48,17 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
     const processState = state.buyOrderState.processState;
     const isEnabled = processState === OrderProcessState.NONE || processState === OrderProcessState.FAILURE;
     const isDisabled = !isEnabled;
-
-    const selectedAsset = state.selectedAsset;
-    if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) {
-        return {
-            value: state.selectedAssetAmount,
-            isDisabled,
-        };
-    }
-
+    const selectedAsset =
+        !_.isUndefined(state.selectedAsset) && state.selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
+            ? (state.selectedAsset as ERC20Asset)
+            : undefined;
+    const numberOfAssetsAvailable = _.isUndefined(state.availableAssets) ? undefined : state.availableAssets.length;
     return {
         assetBuyer: state.assetBuyer,
         value: state.selectedAssetAmount,
-        asset: selectedAsset as ERC20Asset,
+        asset: selectedAsset,
         isDisabled,
+        numberOfAssetsAvailable,
     };
 };
 
@@ -138,6 +137,7 @@ const mergeProps = (
             connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset);
         },
         isDisabled: connectedState.isDisabled,
+        numberOfAssetsAvailable: connectedState.numberOfAssetsAvailable,
     };
 };
 
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 57d95167a..20d927561 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -23,7 +23,7 @@ export interface State {
     assetBuyer?: AssetBuyer;
     assetMetaDataMap: ObjectMap<AssetMetaData>;
     selectedAsset?: Asset;
-    availableAssets: Asset[];
+    availableAssets?: Asset[];
     selectedAssetAmount?: BigNumberInput;
     buyOrderState: OrderState;
     ethUsdPrice?: BigNumber;
@@ -36,7 +36,7 @@ export interface State {
 export const INITIAL_STATE: State = {
     network: Network.Mainnet,
     selectedAssetAmount: undefined,
-    availableAssets: [],
+    availableAssets: undefined,
     assetMetaDataMap,
     buyOrderState: { processState: OrderProcessState.NONE },
     ethUsdPrice: undefined,
-- 
cgit v1.2.3


From bda9d4c1b099fc4db05d34a1d8dc0543a68413b8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 13:16:48 -0700
Subject: feat: auto-close panel when a token is selected

---
 .../instant/src/components/zero_ex_instant_container.tsx     |  2 +-
 .../instant/src/containers/available_erc20_token_selector.ts | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 765ff7e3d..850beb49c 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -46,7 +46,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                         animationState={this.state.tokenSelectionPanelAnimationState}
                         onClose={this._handlePanelClose}
                     >
-                        <AvailableERC20TokenSelector />
+                        <AvailableERC20TokenSelector onTokenSelect={this._handlePanelClose} />
                     </SlidingPanel>
                 </Container>
             </Container>
diff --git a/packages/instant/src/containers/available_erc20_token_selector.ts b/packages/instant/src/containers/available_erc20_token_selector.ts
index e8bacdba0..bb194cd6b 100644
--- a/packages/instant/src/containers/available_erc20_token_selector.ts
+++ b/packages/instant/src/containers/available_erc20_token_selector.ts
@@ -1,3 +1,4 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
@@ -9,7 +10,9 @@ import { assetUtils } from '../util/asset';
 import { ERC20TokenSelector } from '../components/erc20_token_selector';
 import { Action, actions } from '../redux/actions';
 
-export interface AvailableERC20TokenSelectorProps {}
+export interface AvailableERC20TokenSelectorProps {
+    onTokenSelect?: (token: ERC20Asset) => void;
+}
 
 interface ConnectedState {
     tokens: ERC20Asset[];
@@ -27,7 +30,12 @@ const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
     ownProps: AvailableERC20TokenSelectorProps,
 ): ConnectedDispatch => ({
-    onTokenSelect: (token: ERC20Asset) => dispatch(actions.updateSelectedAsset(token)),
+    onTokenSelect: (token: ERC20Asset) => {
+        if (ownProps.onTokenSelect) {
+            ownProps.onTokenSelect(token);
+        }
+        dispatch(actions.updateSelectedAsset(token));
+    },
 });
 
 export const AvailableERC20TokenSelector: React.ComponentClass<AvailableERC20TokenSelectorProps> = connect(
-- 
cgit v1.2.3


From 9f5f31d39fffa873cedc889b5cf963b294a2dcc6 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 13:24:32 -0700
Subject: feat: add asserts for new API additions

---
 packages/instant/src/index.umd.ts   | 3 +++
 packages/instant/src/util/assert.ts | 3 +++
 2 files changed, 6 insertions(+)

(limited to 'packages')

diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index 77bdb66e1..b998abe95 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -20,5 +20,8 @@ export const render = (props: ZeroExInstantProps, selector: string = DEFAULT_ZER
     if (!_.isUndefined(props.networkId)) {
         assert.isNumber('networkId', props.networkId);
     }
+    if (!_.isUndefined(props.availableAssetDatas)) {
+        assert.areValidAssetDatas('availableAssetDatas', props.availableAssetDatas);
+    }
     ReactDOM.render(React.createElement(ZeroExInstant, props), document.querySelector(selector));
 };
diff --git a/packages/instant/src/util/assert.ts b/packages/instant/src/util/assert.ts
index 1267a1d23..7c07215bf 100644
--- a/packages/instant/src/util/assert.ts
+++ b/packages/instant/src/util/assert.ts
@@ -15,6 +15,9 @@ export const assert = {
         }
         sharedAssert.doesConformToSchema(variableName, orderSource, schemas.signedOrdersSchema);
     },
+    areValidAssetDatas(variableName: string, assetDatas: string[]): void {
+        _.forEach(assetDatas, (assetData, index) => assert.isHexString(`${variableName}[${index}]`, assetData));
+    },
     isValidAssetMetaDataMap(variableName: string, metaDataMap: ObjectMap<AssetMetaData>): void {
         _.forEach(metaDataMap, (metaData, assetData) => {
             assert.isHexString(`key ${assetData} of ${variableName}`, assetData);
-- 
cgit v1.2.3


From 7fc1a88680e85c5ab1a1ef7ba5eb1bc223614493 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 13:34:23 -0700
Subject: fix: better name method

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

(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 e222bc576..05b81e93d 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -48,7 +48,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
     private readonly _renderContentForAsset = (asset: ERC20Asset): React.ReactNode => {
         const { onChange, ...rest } = this.props;
         const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
-        const onSymbolClick = this._generateSelectAssetClick();
+        const onSymbolClick = this._generateSelectAssetClickHandler();
         return (
             <React.Fragment>
                 <Container borderBottom={amountBorderBottom} display="inline-block">
@@ -95,7 +95,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
                     fontColor={ColorOption.white}
                     opacity={0.7}
                     fontWeight="500"
-                    onClick={this._generateSelectAssetClick()}
+                    onClick={this._generateSelectAssetClickHandler()}
                 >
                     {text}
                 </Text>
@@ -109,7 +109,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             return null;
         }
         return (
-            <Container cursor="pointer" marginLeft="5px" onClick={this._generateSelectAssetClick()}>
+            <Container cursor="pointer" marginLeft="5px" onClick={this._generateSelectAssetClickHandler()}>
                 <Icon icon="chevron" width={12} />
             </Container>
         );
@@ -123,7 +123,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         });
     };
     // We don't want to allow opening the token selection panel if there are no assets.
-    private readonly _generateSelectAssetClick = (): (() => void) | undefined => {
+    private readonly _generateSelectAssetClickHandler = (): (() => void) | undefined => {
         const { numberOfAssetsAvailable } = this.props;
         if (_.isUndefined(numberOfAssetsAvailable) || numberOfAssetsAvailable <= 1) {
             return undefined;
-- 
cgit v1.2.3


From 0a3af4eb224d68cfe1b3e16b912549cb52e5d0a5 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 13:37:43 -0700
Subject: chore: add clarification to _generateSelectAssetClickHandler

---
 .../src/components/erc20_asset_amount_input.tsx       | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

(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 05b81e93d..56f892328 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -122,18 +122,19 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             currentFontSizePx: fontSizePx,
         });
     };
-    // We don't want to allow opening the token selection panel if there are no assets.
     private readonly _generateSelectAssetClickHandler = (): (() => void) | undefined => {
-        const { numberOfAssetsAvailable } = this.props;
-        if (_.isUndefined(numberOfAssetsAvailable) || numberOfAssetsAvailable <= 1) {
+        // We don't want to allow opening the token selection panel if there are no assets.
+        // Since styles are inferred from the presence of a click handler, we want to return undefined
+        // instead of providing a noop.
+        const { numberOfAssetsAvailable, onSelectAssetClick } = this.props;
+        if (
+            _.isUndefined(numberOfAssetsAvailable) ||
+            numberOfAssetsAvailable <= 1 ||
+            _.isUndefined(onSelectAssetClick)
+        ) {
             return undefined;
         }
-        return this._handleSelectAssetClick;
-    };
-    private readonly _handleSelectAssetClick = () => {
-        if (this.props.onSelectAssetClick) {
-            this.props.onSelectAssetClick(this.props.asset);
-        }
+        return () => onSelectAssetClick(this.props.asset);
     };
     // For assets with symbols of different length,
     // start scaling the input at different character lengths
-- 
cgit v1.2.3


From 57fba86154451a247dc008a9080e1e65145e6778 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 13:40:23 -0700
Subject: chore: remove unneeded optional syntax

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

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index e49001d12..f3b212058 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -29,8 +29,8 @@ export interface ZeroExInstantRequiredProps {
 
 export interface ZeroExInstantOptionalProps {
     availableAssetDatas: string[];
-    defaultAssetBuyAmount?: number;
-    defaultSelectedAssetData?: string;
+    defaultAssetBuyAmount: number;
+    defaultSelectedAssetData: string;
     additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
     networkId: Network;
 }
-- 
cgit v1.2.3


From 9fd931f7991398b9a6331d7bc5b8cd7a41491be9 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 13:49:09 -0700
Subject: feat: better handle errors in async fetches

---
 packages/instant/src/redux/async_data.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index f8dbe9fd4..716558409 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -3,19 +3,20 @@ import * as _ from 'lodash';
 import { BIG_NUMBER_ZERO } from '../constants';
 import { assetUtils } from '../util/asset';
 import { coinbaseApi } from '../util/coinbase_api';
+import { errorFlasher } from '../util/error_flasher';
 
 import { actions } from './actions';
 import { Store } from './store';
 
 export const asyncData = {
     fetchEthPriceAndDispatchToStore: async (store: Store) => {
-        let ethUsdPrice = BIG_NUMBER_ZERO;
         try {
-            ethUsdPrice = await coinbaseApi.getEthUsdPrice();
-        } catch (e) {
-            // ignore
-        } finally {
+            const ethUsdPrice = await coinbaseApi.getEthUsdPrice();
             store.dispatch(actions.updateEthUsdPrice(ethUsdPrice));
+        } catch (e) {
+            const errorMessage = 'Error fetching ETH/USD price';
+            errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage);
+            store.dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO));
         }
     },
     fetchAvailableAssetDatasAndDispatchToStore: async (store: Store) => {
@@ -26,7 +27,10 @@ export const asyncData = {
                 const assets = assetUtils.createAssetsFromAssetDatas(assetDatas, assetMetaDataMap, network);
                 store.dispatch(actions.setAvailableAssets(assets));
             } catch (e) {
-                // ignore
+                const errorMessage = 'Error fetching available assets';
+                errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage);
+                // On error, just specify that none are available
+                store.dispatch(actions.setAvailableAssets([]));
             }
         }
     },
-- 
cgit v1.2.3


From 7858dafce4c9441c8205fa6ed607ca50851cc4ba Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 14:14:00 -0700
Subject: linting: moving order of imports

---
 packages/instant/src/components/time_counter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/time_counter.tsx b/packages/instant/src/components/time_counter.tsx
index 22dc634d9..f9b68163c 100644
--- a/packages/instant/src/components/time_counter.tsx
+++ b/packages/instant/src/components/time_counter.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 import { ONE_SECOND_MS } from '../constants';
+import { ColorOption } from '../style/theme';
 import { timeUtil } from '../util/time';
 
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
 import { Text } from './ui/text';
-import { ColorOption } from '../style/theme';
 
 export interface TimeCounterProps {
     estimatedTimeMs: number;
-- 
cgit v1.2.3


From ce19ec207b07696a675bdadf71ea39d933ea2715 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 14:14:39 -0700
Subject: fix: remove assetData from default params

---
 packages/instant/public/index.html | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 1c08aa5a1..4c35e6f3b 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -56,7 +56,6 @@
         const queryParams = new Uri(window.location.search);
         const renderOptionsDefaults = {
             orderSource: 'https://api.radarrelay.com/0x/v2/',
-            assetData: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498',
         }
         const orderSourceOverride = queryParams.getQueryParamValue('orderSource');
         const availableAssetDatasString = queryParams.getQueryParamValue('availableAssetDatas');
-- 
cgit v1.2.3


From c2645b26b457c66b3adcb98a5c089eba3e72f458 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 31 Oct 2018 15:09:12 -0700
Subject: feat(instant): add interactive overlay presentation to umd bundle

---
 packages/instant/public/index.html                 |   1 +
 packages/instant/src/components/ui/button.tsx      |  20 +++-
 packages/instant/src/components/ui/icon.tsx        |   8 ++
 packages/instant/src/components/ui/index.ts        |   5 +-
 packages/instant/src/components/ui/overlay.tsx     |  49 +++++++++
 .../instant/src/components/zero_ex_instant.tsx     | 115 ++-------------------
 .../src/components/zero_ex_instant_overlay.tsx     |  21 ++++
 .../src/components/zero_ex_instant_provider.tsx    | 108 +++++++++++++++++++
 packages/instant/src/constants.ts                  |   1 +
 packages/instant/src/index.ts                      |   1 +
 packages/instant/src/index.umd.ts                  |  39 +++++--
 packages/instant/src/style/theme.ts                |   3 +
 12 files changed, 251 insertions(+), 120 deletions(-)
 create mode 100644 packages/instant/src/components/ui/overlay.tsx
 create mode 100644 packages/instant/src/components/zero_ex_instant_overlay.tsx
 create mode 100644 packages/instant/src/components/zero_ex_instant_provider.tsx

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 62532dad9..7580ab132 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -74,6 +74,7 @@
         const renderOptionsDefaults = {
             liquiditySource: 'https://api.radarrelay.com/0x/v2/',
             assetData: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498',
+            onClose: () => { console.log('0x Instant Closed') }
         }
         const liquiditySourceOverride = queryParams.getQueryParamValue('liquiditySource');
         const renderOptionsOverrides = {
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index 5274d835b..0051482e7 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -3,6 +3,11 @@ import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
 
+export enum ButtonHoverStyle {
+    Darken = 0,
+    Opacity,
+}
+
 export interface ButtonProps {
     backgroundColor?: ColorOption;
     borderColor?: ColorOption;
@@ -12,6 +17,7 @@ export interface ButtonProps {
     isDisabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     className?: string;
+    hoverStyle?: ButtonHoverStyle;
 }
 
 const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
@@ -32,30 +38,38 @@ export const Button = styled(PlainButton)`
     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')};
+    opacity: ${props => (props.hoverStyle === ButtonHoverStyle.Opacity ? 0.7 : 1)};
     &:hover {
         background-color: ${props =>
-            !props.isDisabled
+            shouldDarken(props)
                 ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
                 : ''} !important;
+        opacity: 1;
     }
     &:active {
         background-color: ${props =>
-            !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
+            shouldDarken(props) ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
+        opacity: 1;
     }
     &:disabled {
-        opacity: 0.5;
+        opacity: ${props => (props.hoverStyle === ButtonHoverStyle.Darken ? 0.5 : 0.2)};
     }
     &:focus {
         background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
     }
 `;
 
+const shouldDarken = (props: ButtonProps) => {
+    return !props.isDisabled && props.hoverStyle === ButtonHoverStyle.Darken;
+};
+
 Button.defaultProps = {
     backgroundColor: ColorOption.primaryColor,
     borderColor: ColorOption.primaryColor,
     width: 'auto',
     isDisabled: false,
     padding: '1em 2.2em',
+    hoverStyle: ButtonHoverStyle.Darken,
 };
 
 Button.displayName = 'Button';
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 61b382760..a05017ba1 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -13,11 +13,19 @@ interface IconInfo {
     strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
 }
 interface IconInfoMapping {
+    closeX: IconInfo;
     failed: IconInfo;
     success: IconInfo;
     chevron: IconInfo;
 }
 const ICONS: IconInfoMapping = {
+    closeX: {
+        viewBox: '0 0 11 11',
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        path:
+            'M10.45 10.449C10.7539 10.1453 10.7539 9.65282 10.45 9.34909L6.60068 5.49999L10.45 1.65093C10.7538 1.3472 10.7538 0.854765 10.45 0.551038C10.1462 0.24731 9.65378 0.24731 9.34995 0.551038L5.50058 4.40006L1.65024 0.549939C1.34641 0.246212 0.853973 0.246212 0.550262 0.549939C0.246429 0.853667 0.246429 1.34611 0.550262 1.64983L4.40073 5.49995L0.55014 9.35019C0.246307 9.65392 0.246307 10.1464 0.55014 10.4501C0.853851 10.7538 1.34628 10.7538 1.65012 10.4501L5.5007 6.59987L9.35007 10.449C9.6539 10.7527 10.1463 10.7527 10.45 10.449Z',
+    },
     failed: {
         viewBox: '0 0 34 34',
         fillRule: 'evenodd',
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index 28f76c262..c60b9640e 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -1,7 +1,8 @@
-export { Text, Title } from './text';
-export { Button, ButtonProps } from './button';
+export { Text, TextProps, Title } from './text';
+export { Button, ButtonProps, ButtonHoverStyle } from './button';
 export { Flex, FlexProps } from './flex';
 export { Container, ContainerProps } from './container';
 export { Input, InputProps } from './input';
 export { Icon, IconProps } from './icon';
 export { Spinner, SpinnerProps } from './spinner';
+export { Overlay, OverlayProps } from './overlay';
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
new file mode 100644
index 000000000..94fa10fc5
--- /dev/null
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -0,0 +1,49 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ColorOption, overlayBlack, styled } from '../../style/theme';
+import { util } from '../../util/util';
+
+import { Button, ButtonHoverStyle } from './button';
+import { Container } from './container';
+import { Flex } from './flex';
+import { Icon } from './icon';
+
+export interface OverlayProps {
+    className?: string;
+    onClose?: () => void;
+    zIndex?: number;
+}
+
+const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
+    <Flex height="100vh" className={className}>
+        <Container position="absolute" top="0px" right="0px">
+            <Button
+                backgroundColor={ColorOption.clear}
+                borderColor={ColorOption.clear}
+                padding="2em 2em"
+                onClick={onClose}
+                hoverStyle={ButtonHoverStyle.Opacity}
+            >
+                <Icon height={18} width={18} color="white" icon="closeX" />
+            </Button>
+        </Container>
+        <div>{children}</div>
+    </Flex>
+);
+export const Overlay = styled(PlainOverlay)`
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: ${props => props.zIndex}
+    background-color: ${overlayBlack};
+`;
+
+Overlay.defaultProps = {
+    onClose: util.boundNoop,
+    zIndex: 100,
+};
+
+Overlay.displayName = 'Overlay';
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index d54dfc153..907c42e7a 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,111 +1,14 @@
-import { AssetBuyer } from '@0x/asset-buyer';
-import { ObjectMap, SignedOrder } from '@0x/types';
-import * as _ from 'lodash';
 import * as React from 'react';
-import { Provider } from 'react-redux';
-
-import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
-import { asyncData } from '../redux/async_data';
-import { INITIAL_STATE, State } from '../redux/reducer';
-import { store, Store } from '../redux/store';
-import { fonts } from '../style/fonts';
-import { AssetMetaData, Network } from '../types';
-import { assetUtils } from '../util/asset';
-import { BigNumberInput } from '../util/big_number_input';
-import { errorFlasher } from '../util/error_flasher';
-import { gasPriceEstimator } from '../util/gas_price_estimator';
-import { getProvider } from '../util/provider';
-import { web3Wrapper } from '../util/web3_wrapper';
 
 import { ZeroExInstantContainer } from './zero_ex_instant_container';
+import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
 
-fonts.include();
-
-export type ZeroExInstantProps = ZeroExInstantRequiredProps & Partial<ZeroExInstantOptionalProps>;
-
-export interface ZeroExInstantRequiredProps {
-    // TODO: Change API when we allow the selection of different assetDatas
-    assetData: string;
-    liquiditySource: string | SignedOrder[];
-}
-
-export interface ZeroExInstantOptionalProps {
-    defaultAssetBuyAmount?: number;
-    additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
-    networkId: Network;
-}
-
-export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
-    private readonly _store: Store;
-    private static _mergeInitialStateWithProps(props: ZeroExInstantProps, state: State = INITIAL_STATE): State {
-        const networkId = props.networkId || state.network;
-        // TODO: Provider needs to not be hard-coded to injected web3.
-        const provider = getProvider();
-        const assetBuyerOptions = {
-            networkId,
-        };
-        let assetBuyer;
-        if (_.isString(props.liquiditySource)) {
-            assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(
-                provider,
-                props.liquiditySource,
-                assetBuyerOptions,
-            );
-        } else {
-            assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.liquiditySource, assetBuyerOptions);
-        }
-        const completeAssetMetaDataMap = {
-            ...props.additionalAssetMetaDataMap,
-            ...state.assetMetaDataMap,
-        };
-        const storeStateFromProps: State = {
-            ...state,
-            assetBuyer,
-            network: networkId,
-            selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId),
-            selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
-                ? state.selectedAssetAmount
-                : new BigNumberInput(props.defaultAssetBuyAmount),
-            assetMetaDataMap: completeAssetMetaDataMap,
-        };
-        return storeStateFromProps;
-    }
-    constructor(props: ZeroExInstantProps) {
-        super(props);
-        const initialAppState = ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE);
-        this._store = store.create(initialAppState);
-    }
-
-    public componentDidMount(): void {
-        // tslint:disable-next-line:no-floating-promises
-        asyncData.fetchAndDispatchToStore(this._store);
-
-        // warm up the gas price estimator cache just in case we can't
-        // grab the gas price estimate when submitting the transaction
-        // tslint:disable-next-line:no-floating-promises
-        gasPriceEstimator.getFastAmountInWeiAsync();
-
-        // tslint:disable-next-line:no-floating-promises
-        this._flashErrorIfWrongNetwork();
-    }
-
-    public render(): React.ReactNode {
-        return (
-            <Provider store={this._store}>
-                <SelectedAssetThemeProvider>
-                    <ZeroExInstantContainer />
-                </SelectedAssetThemeProvider>
-            </Provider>
-        );
-    }
+export type ZeroExInstantProps = ZeroExInstantProviderProps;
 
-    private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => {
-        const msToShowError = 30000; // 30 seconds
-        const network = this._store.getState().network;
-        const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
-        if (network !== networkOfProvider) {
-            const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
-            errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
-        }
-    };
-}
+export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = props => {
+    return (
+        <ZeroExInstantProvider {...props}>
+            <ZeroExInstantContainer />
+        </ZeroExInstantProvider>
+    );
+};
diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx
new file mode 100644
index 000000000..8f872f896
--- /dev/null
+++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { Overlay } from './ui';
+import { ZeroExInstantContainer } from './zero_ex_instant_container';
+import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
+
+export interface ZeroExInstantOverlayProps extends ZeroExInstantProviderProps {
+    onClose?: () => void;
+    zIndex?: number;
+}
+
+export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlayProps> = props => {
+    const { onClose, zIndex, ...rest } = props;
+    return (
+        <ZeroExInstantProvider {...rest}>
+            <Overlay onClose={onClose} zIndex={zIndex}>
+                <ZeroExInstantContainer />
+            </Overlay>
+        </ZeroExInstantProvider>
+    );
+};
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
new file mode 100644
index 000000000..8c1025723
--- /dev/null
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -0,0 +1,108 @@
+import { AssetBuyer } from '@0x/asset-buyer';
+import { ObjectMap, SignedOrder } from '@0x/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Provider } from 'react-redux';
+
+import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
+import { asyncData } from '../redux/async_data';
+import { INITIAL_STATE, State } from '../redux/reducer';
+import { store, Store } from '../redux/store';
+import { fonts } from '../style/fonts';
+import { AssetMetaData, Network } from '../types';
+import { assetUtils } from '../util/asset';
+import { BigNumberInput } from '../util/big_number_input';
+import { errorFlasher } from '../util/error_flasher';
+import { gasPriceEstimator } from '../util/gas_price_estimator';
+import { getProvider } from '../util/provider';
+import { web3Wrapper } from '../util/web3_wrapper';
+
+fonts.include();
+
+export type ZeroExInstantProviderProps = ZeroExInstantProviderRequiredProps &
+    Partial<ZeroExInstantProviderOptionalProps>;
+
+export interface ZeroExInstantProviderRequiredProps {
+    // TODO: Change API when we allow the selection of different assetDatas
+    assetData: string;
+    liquiditySource: string | SignedOrder[];
+}
+
+export interface ZeroExInstantProviderOptionalProps {
+    defaultAssetBuyAmount?: number;
+    additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
+    networkId: Network;
+}
+
+export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
+    private readonly _store: Store;
+    private static _mergeInitialStateWithProps(props: ZeroExInstantProviderProps, state: State = INITIAL_STATE): State {
+        const networkId = props.networkId || state.network;
+        // TODO: Provider needs to not be hard-coded to injected web3.
+        const provider = getProvider();
+        const assetBuyerOptions = {
+            networkId,
+        };
+        let assetBuyer;
+        if (_.isString(props.liquiditySource)) {
+            assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(
+                provider,
+                props.liquiditySource,
+                assetBuyerOptions,
+            );
+        } else {
+            assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.liquiditySource, assetBuyerOptions);
+        }
+        const completeAssetMetaDataMap = {
+            ...props.additionalAssetMetaDataMap,
+            ...state.assetMetaDataMap,
+        };
+        const storeStateFromProps: State = {
+            ...state,
+            assetBuyer,
+            network: networkId,
+            selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId),
+            selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
+                ? state.selectedAssetAmount
+                : new BigNumberInput(props.defaultAssetBuyAmount),
+            assetMetaDataMap: completeAssetMetaDataMap,
+        };
+        return storeStateFromProps;
+    }
+    constructor(props: ZeroExInstantProviderProps) {
+        super(props);
+        const initialAppState = ZeroExInstantProvider._mergeInitialStateWithProps(this.props, INITIAL_STATE);
+        this._store = store.create(initialAppState);
+    }
+
+    public componentDidMount(): void {
+        // tslint:disable-next-line:no-floating-promises
+        asyncData.fetchAndDispatchToStore(this._store);
+
+        // warm up the gas price estimator cache just in case we can't
+        // grab the gas price estimate when submitting the transaction
+        // tslint:disable-next-line:no-floating-promises
+        gasPriceEstimator.getFastAmountInWeiAsync();
+
+        // tslint:disable-next-line:no-floating-promises
+        this._flashErrorIfWrongNetwork();
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <Provider store={this._store}>
+                <SelectedAssetThemeProvider>{this.props.children}</SelectedAssetThemeProvider>
+            </Provider>
+        );
+    }
+
+    private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => {
+        const msToShowError = 30000; // 30 seconds
+        const network = this._store.getState().network;
+        const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
+        if (network !== networkOfProvider) {
+            const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
+            errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
+        }
+    };
+}
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 424f35ecb..3e830ba00 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -2,6 +2,7 @@ import { BigNumber } from '@0x/utils';
 export const BIG_NUMBER_ZERO = new BigNumber(0);
 export const ETH_DECIMALS = 18;
 export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
+export const INJECTED_DIV_ID = 'zeroExInstant';
 export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
 export const GWEI_IN_WEI = new BigNumber(1000000000);
 export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
diff --git a/packages/instant/src/index.ts b/packages/instant/src/index.ts
index 54059cdad..6e611dae8 100644
--- a/packages/instant/src/index.ts
+++ b/packages/instant/src/index.ts
@@ -1 +1,2 @@
 export { ZeroExInstant, ZeroExInstantProps } from './components/zero_ex_instant';
+export { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './components/zero_ex_instant_overlay';
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index dabd45cae..b12e65485 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -2,21 +2,42 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR } from './constants';
-import { ZeroExInstant, ZeroExInstantProps } from './index';
+import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_ID } from './constants';
+import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index';
 import { assert } from './util/assert';
 
-export const render = (props: ZeroExInstantProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
-    assert.isHexString('assetData', props.assetData);
-    assert.isValidLiquiditySource('liquiditySource', props.liquiditySource);
+export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
+    assert.isHexString('props.assetData', props.assetData);
+    assert.isValidLiquiditySource('props.liquiditySource', props.liquiditySource);
     if (!_.isUndefined(props.additionalAssetMetaDataMap)) {
-        assert.isValidAssetMetaDataMap('additionalAssetMetaDataMap', props.additionalAssetMetaDataMap);
+        assert.isValidAssetMetaDataMap('props.additionalAssetMetaDataMap', props.additionalAssetMetaDataMap);
     }
     if (!_.isUndefined(props.defaultAssetBuyAmount)) {
-        assert.isNumber('defaultAssetBuyAmount', props.defaultAssetBuyAmount);
+        assert.isNumber('props.defaultAssetBuyAmount', props.defaultAssetBuyAmount);
     }
     if (!_.isUndefined(props.networkId)) {
-        assert.isNumber('networkId', props.networkId);
+        assert.isNumber('props.networkId', props.networkId);
     }
-    ReactDOM.render(React.createElement(ZeroExInstant, props), document.querySelector(selector));
+    if (!_.isUndefined(props.onClose)) {
+        assert.isFunction('props.onClose', props.onClose);
+    }
+    if (!_.isUndefined(props.zIndex)) {
+        assert.isNumber('props.zIndex', props.zIndex);
+    }
+    const appendToIfExists = document.querySelector(selector);
+    assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`);
+    const appendTo = appendToIfExists as Element;
+    const injectedDiv = document.createElement('div');
+    injectedDiv.setAttribute('id', INJECTED_DIV_ID);
+    appendTo.appendChild(injectedDiv);
+    const instantOverlayProps = {
+        ...props,
+        onClose: () => {
+            appendTo.removeChild(injectedDiv);
+            if (!_.isUndefined(props.onClose)) {
+                props.onClose();
+            }
+        },
+    };
+    ReactDOM.render(React.createElement(ZeroExInstantOverlay, instantOverlayProps), injectedDiv);
 };
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 6575ff9f4..c7cb0bebe 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -14,6 +14,7 @@ export enum ColorOption {
     white = 'white',
     lightOrange = 'lightOrange',
     darkOrange = 'darkOrange',
+    clear = 'clear',
 }
 
 export const theme: Theme = {
@@ -26,8 +27,10 @@ export const theme: Theme = {
     white: 'white',
     lightOrange: '#F9F2ED',
     darkOrange: '#F2994C',
+    clear: 'rgba(0, 0, 0, 0.0)',
 };
 
 export const transparentWhite = 'rgba(255,255,255,0.3)';
+export const overlayBlack = 'rgba(0, 0, 0, 0.6)';
 
 export { styled, css, keyframes, ThemeProvider };
-- 
cgit v1.2.3


From c50c4a4669d881000bb74de9a33684319ff740b9 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 15:11:03 -0700
Subject: fix: make maxPerPage for the SRA getAvailableMakerAssetDatasAsync
 call a local var

---
 packages/asset-buyer/src/constants.ts                                | 1 -
 .../src/order_providers/standard_relayer_api_order_provider.ts       | 5 +++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/asset-buyer/src/constants.ts b/packages/asset-buyer/src/constants.ts
index b2f025bdb..cc415102c 100644
--- a/packages/asset-buyer/src/constants.ts
+++ b/packages/asset-buyer/src/constants.ts
@@ -36,6 +36,5 @@ export const constants = {
     DEFAULT_ASSET_BUYER_OPTS,
     DEFAULT_BUY_QUOTE_EXECUTION_OPTS,
     DEFAULT_BUY_QUOTE_REQUEST_OPTS,
-    MAX_PER_PAGE: 1000,
     EMPTY_ORDERS_AND_FILLABLE_AMOUNTS,
 };
diff --git a/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts b/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts
index c6adcfc4a..be1fc55d6 100644
--- a/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts
+++ b/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts
@@ -2,7 +2,6 @@ import { HttpClient } from '@0x/connect';
 import { APIOrder, AssetPairsResponse, OrderbookResponse } from '@0x/types';
 import * as _ from 'lodash';
 
-import { constants } from '../constants';
 import {
     AssetBuyerError,
     OrderProvider,
@@ -87,7 +86,9 @@ export class StandardRelayerAPIOrderProvider implements OrderProvider {
      * @return  An array of asset data strings that can be purchased using takerAssetData.
      */
     public async getAvailableMakerAssetDatasAsync(takerAssetData: string): Promise<string[]> {
-        const requestOpts = { networkId: this.networkId, perPage: constants.MAX_PER_PAGE };
+        // Return a maximum of 1000 asset datas
+        const maxPerPage = 1000;
+        const requestOpts = { networkId: this.networkId, perPage: maxPerPage };
         const assetPairsRequest = { assetDataA: takerAssetData };
         const fullRequest = {
             ...requestOpts,
-- 
cgit v1.2.3


From d16499da4e0611438df7bfe226bce940beca6918 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 1 Nov 2018 15:23:42 -0700
Subject: Remove alternate hover styling from button and move into icon
 component

---
 packages/instant/src/components/ui/button.tsx  | 20 ++------
 packages/instant/src/components/ui/icon.tsx    | 69 ++++++++++++++++++--------
 packages/instant/src/components/ui/index.ts    |  2 +-
 packages/instant/src/components/ui/overlay.tsx | 15 +-----
 packages/instant/src/style/theme.ts            |  2 -
 5 files changed, 54 insertions(+), 54 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index 0051482e7..5274d835b 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -3,11 +3,6 @@ import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
 
-export enum ButtonHoverStyle {
-    Darken = 0,
-    Opacity,
-}
-
 export interface ButtonProps {
     backgroundColor?: ColorOption;
     borderColor?: ColorOption;
@@ -17,7 +12,6 @@ export interface ButtonProps {
     isDisabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     className?: string;
-    hoverStyle?: ButtonHoverStyle;
 }
 
 const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
@@ -38,38 +32,30 @@ export const Button = styled(PlainButton)`
     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')};
-    opacity: ${props => (props.hoverStyle === ButtonHoverStyle.Opacity ? 0.7 : 1)};
     &:hover {
         background-color: ${props =>
-            shouldDarken(props)
+            !props.isDisabled
                 ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
                 : ''} !important;
-        opacity: 1;
     }
     &:active {
         background-color: ${props =>
-            shouldDarken(props) ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
-        opacity: 1;
+            !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
     }
     &:disabled {
-        opacity: ${props => (props.hoverStyle === ButtonHoverStyle.Darken ? 0.5 : 0.2)};
+        opacity: 0.5;
     }
     &:focus {
         background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
     }
 `;
 
-const shouldDarken = (props: ButtonProps) => {
-    return !props.isDisabled && props.hoverStyle === ButtonHoverStyle.Darken;
-};
-
 Button.defaultProps = {
     backgroundColor: ColorOption.primaryColor,
     borderColor: ColorOption.primaryColor,
     width: 'auto',
     isDisabled: false,
     padding: '1em 2.2em',
-    hoverStyle: ButtonHoverStyle.Darken,
 };
 
 Button.displayName = 'Button';
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index a05017ba1..f12059cff 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -1,5 +1,8 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 
+import { styled } from '../../style/theme';
+
 type svgRule = 'evenodd' | 'nonzero' | 'inherit';
 interface IconInfo {
     viewBox: string;
@@ -52,33 +55,57 @@ const ICONS: IconInfoMapping = {
 };
 
 export interface IconProps {
+    className?: string;
     width: number;
     height?: number;
     color?: string;
     icon: keyof IconInfoMapping;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    padding?: string;
 }
-export const Icon: React.SFC<IconProps> = props => {
+const PlainIcon: React.SFC<IconProps> = props => {
     const iconInfo = ICONS[props.icon];
-
     return (
-        <svg
-            width={props.width}
-            height={props.height}
-            viewBox={iconInfo.viewBox}
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d={iconInfo.path}
-                fill={props.color}
-                fillRule={iconInfo.fillRule || 'nonzero'}
-                clipRule={iconInfo.clipRule || 'nonzero'}
-                stroke={iconInfo.stroke}
-                strokeOpacity={iconInfo.strokeOpacity}
-                strokeWidth={iconInfo.strokeWidth}
-                strokeLinecap={iconInfo.strokeLinecap}
-                strokeLinejoin={iconInfo.strokeLinejoin}
-            />
-        </svg>
+        <div onClick={props.onClick} className={props.className}>
+            <svg
+                width={props.width}
+                height={props.height}
+                viewBox={iconInfo.viewBox}
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d={iconInfo.path}
+                    fill={props.color}
+                    fillRule={iconInfo.fillRule || 'nonzero'}
+                    clipRule={iconInfo.clipRule || 'nonzero'}
+                    stroke={iconInfo.stroke}
+                    strokeOpacity={iconInfo.strokeOpacity}
+                    strokeWidth={iconInfo.strokeWidth}
+                    strokeLinecap={iconInfo.strokeLinecap}
+                    strokeLinejoin={iconInfo.strokeLinejoin}
+                />
+            </svg>
+        </div>
     );
 };
+
+export const Icon = styled(PlainIcon)`
+    cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')};
+    transition: opacity 0.5s ease;
+    padding: ${props => props.padding};
+    opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)};
+    &:hover {
+        opacity: 1;
+    }
+    &:active {
+        opacity: 1;
+    }
+`;
+
+Icon.defaultProps = {
+    color: 'white',
+    padding: '0em 0em',
+};
+
+Icon.displayName = 'Icon';
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index c60b9640e..0efabdb85 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -1,5 +1,5 @@
 export { Text, TextProps, Title } from './text';
-export { Button, ButtonProps, ButtonHoverStyle } from './button';
+export { Button, ButtonProps } from './button';
 export { Flex, FlexProps } from './flex';
 export { Container, ContainerProps } from './container';
 export { Input, InputProps } from './input';
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index 94fa10fc5..c5258b031 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -1,10 +1,8 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { ColorOption, overlayBlack, styled } from '../../style/theme';
-import { util } from '../../util/util';
+import { overlayBlack, styled } from '../../style/theme';
 
-import { Button, ButtonHoverStyle } from './button';
 import { Container } from './container';
 import { Flex } from './flex';
 import { Icon } from './icon';
@@ -18,15 +16,7 @@ export interface OverlayProps {
 const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
     <Flex height="100vh" className={className}>
         <Container position="absolute" top="0px" right="0px">
-            <Button
-                backgroundColor={ColorOption.clear}
-                borderColor={ColorOption.clear}
-                padding="2em 2em"
-                onClick={onClose}
-                hoverStyle={ButtonHoverStyle.Opacity}
-            >
-                <Icon height={18} width={18} color="white" icon="closeX" />
-            </Button>
+            <Icon height={18} width={18} color="white" icon="closeX" onClick={onClose} padding="2em 2em" />
         </Container>
         <div>{children}</div>
     </Flex>
@@ -42,7 +32,6 @@ export const Overlay = styled(PlainOverlay)`
 `;
 
 Overlay.defaultProps = {
-    onClose: util.boundNoop,
     zIndex: 100,
 };
 
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index c7cb0bebe..e81694620 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -14,7 +14,6 @@ export enum ColorOption {
     white = 'white',
     lightOrange = 'lightOrange',
     darkOrange = 'darkOrange',
-    clear = 'clear',
 }
 
 export const theme: Theme = {
@@ -27,7 +26,6 @@ export const theme: Theme = {
     white: 'white',
     lightOrange: '#F9F2ED',
     darkOrange: '#F2994C',
-    clear: 'rgba(0, 0, 0, 0.0)',
 };
 
 export const transparentWhite = 'rgba(255,255,255,0.3)';
-- 
cgit v1.2.3


From ad96e953ceabd9e752eb9749f12090dd9ae17b9d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 16:16:54 -0700
Subject: feat: use new Icon component functionality

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

(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 56f892328..b27f349c0 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -109,8 +109,8 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             return null;
         }
         return (
-            <Container cursor="pointer" marginLeft="5px" onClick={this._generateSelectAssetClickHandler()}>
-                <Icon icon="chevron" width={12} />
+            <Container marginLeft="5px">
+                <Icon icon="chevron" width={12} onClick={this._generateSelectAssetClickHandler()} />
             </Container>
         );
     };
-- 
cgit v1.2.3


From a2e1bf0e6287e86c226b0801311f6f4498c893ed Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 16:32:14 -0700
Subject: Getting rid of BigNumberInput in favor of BigNumber

---
 .../src/components/erc20_asset_amount_input.tsx    |  8 ++---
 .../src/components/scaling_amount_input.tsx        | 10 +++----
 .../src/components/zero_ex_instant_provider.tsx    |  4 +--
 .../selected_erc20_asset_amount_input.ts           |  9 +++---
 packages/instant/src/redux/actions.ts              |  5 +---
 packages/instant/src/redux/reducer.ts              |  3 +-
 packages/instant/src/util/big_number_input.ts      | 34 ----------------------
 7 files changed, 17 insertions(+), 56 deletions(-)
 delete mode 100644 packages/instant/src/util/big_number_input.ts

(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 b1fec6405..a67d7d5db 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -1,10 +1,10 @@
+import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption, transparentWhite } from '../style/theme';
 import { ERC20Asset } from '../types';
 import { assetUtils } from '../util/asset';
-import { BigNumberInput } from '../util/big_number_input';
 import { util } from '../util/util';
 
 import { ScalingAmountInput } from './scaling_amount_input';
@@ -13,8 +13,8 @@ import { Container, Flex, Icon, Text } from './ui';
 // Asset amounts only apply to ERC20 assets
 export interface ERC20AssetAmountInputProps {
     asset?: ERC20Asset;
-    value?: BigNumberInput;
-    onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+    value?: BigNumber;
+    onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
     onSelectAssetClick?: (asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
@@ -102,7 +102,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             </Container>
         );
     };
-    private readonly _handleChange = (value?: BigNumberInput): void => {
+    private readonly _handleChange = (value?: BigNumber): void => {
         this.props.onChange(value, this.props.asset);
     };
     private readonly _handleFontSizeChange = (fontSizePx: number): void => {
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index cfbf3b7cc..4b046e8da 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -1,8 +1,8 @@
+import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
-import { BigNumberInput } from '../util/big_number_input';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
@@ -12,8 +12,8 @@ export interface ScalingAmountInputProps {
     maxFontSizePx: number;
     textLengthThreshold: number;
     fontColor?: ColorOption;
-    value?: BigNumberInput;
-    onChange: (value?: BigNumberInput) => void;
+    value?: BigNumber;
+    onChange: (value?: BigNumber) => void;
     onFontSizeChange: (fontSizePx: number) => void;
 }
 
@@ -32,7 +32,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 onFontSizeChange={onFontSizeChange}
                 fontColor={fontColor}
                 onChange={this._handleChange}
-                value={!_.isUndefined(value) ? value.toDisplayString() : ''}
+                value={!_.isUndefined(value) ? value.toString() : ''}
                 placeholder="0.00"
                 emptyInputWidthCh={3.5}
                 isDisabled={this.props.isDisabled}
@@ -44,7 +44,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         let bigNumberValue;
         if (!_.isEmpty(value)) {
             try {
-                bigNumberValue = new BigNumberInput(value);
+                bigNumberValue = new BigNumber(value);
             } catch {
                 // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
                 return;
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 8c1025723..9391c03f7 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -1,5 +1,6 @@
 import { AssetBuyer } from '@0x/asset-buyer';
 import { ObjectMap, SignedOrder } from '@0x/types';
+import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Provider } from 'react-redux';
@@ -11,7 +12,6 @@ import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
 import { AssetMetaData, Network } from '../types';
 import { assetUtils } from '../util/asset';
-import { BigNumberInput } from '../util/big_number_input';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { getProvider } from '../util/provider';
@@ -64,7 +64,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId),
             selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
                 ? state.selectedAssetAmount
-                : new BigNumberInput(props.defaultAssetBuyAmount),
+                : new BigNumber(props.defaultAssetBuyAmount),
             assetMetaDataMap: completeAssetMetaDataMap,
         };
         return storeStateFromProps;
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 217d603d2..1a5609b12 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -13,7 +13,6 @@ import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
 import { ERC20Asset, OrderProcessState } from '../types';
 import { assetUtils } from '../util/asset';
-import { BigNumberInput } from '../util/big_number_input';
 import { errorFlasher } from '../util/error_flasher';
 
 export interface SelectedERC20AssetAmountInputProps {
@@ -24,19 +23,19 @@ export interface SelectedERC20AssetAmountInputProps {
 
 interface ConnectedState {
     assetBuyer?: AssetBuyer;
-    value?: BigNumberInput;
+    value?: BigNumber;
     asset?: ERC20Asset;
     isDisabled: boolean;
 }
 
 interface ConnectedDispatch {
-    updateBuyQuote: (assetBuyer?: AssetBuyer, value?: BigNumberInput, asset?: ERC20Asset) => void;
+    updateBuyQuote: (assetBuyer?: AssetBuyer, value?: BigNumber, asset?: ERC20Asset) => void;
 }
 
 interface ConnectedProps {
-    value?: BigNumberInput;
+    value?: BigNumber;
     asset?: ERC20Asset;
-    onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+    onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
     isDisabled: boolean;
 }
 
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index bfae68e2b..a0781db19 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -2,8 +2,6 @@ import { BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { BigNumberInput } from '../util/big_number_input';
-
 import { ActionsUnion, OrderState } from '../types';
 
 export interface PlainAction<T extends string> {
@@ -38,8 +36,7 @@ export enum ActionTypes {
 
 export const actions = {
     updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
-    updateSelectedAssetAmount: (amount?: BigNumberInput) =>
-        createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
+    updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
     updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
     updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index dd9403052..20f682787 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -15,7 +15,6 @@ import {
     OrderState,
 } from '../types';
 import { assetUtils } from '../util/asset';
-import { BigNumberInput } from '../util/big_number_input';
 
 import { Action, ActionTypes } from './actions';
 
@@ -24,7 +23,7 @@ export interface State {
     assetBuyer?: AssetBuyer;
     assetMetaDataMap: ObjectMap<AssetMetaData>;
     selectedAsset?: Asset;
-    selectedAssetAmount?: BigNumberInput;
+    selectedAssetAmount?: BigNumber;
     buyOrderState: OrderState;
     ethUsdPrice?: BigNumber;
     latestBuyQuote?: BuyQuote;
diff --git a/packages/instant/src/util/big_number_input.ts b/packages/instant/src/util/big_number_input.ts
deleted file mode 100644
index 370d91a0a..000000000
--- a/packages/instant/src/util/big_number_input.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { BigNumber } from '@0x/utils';
-import * as _ from 'lodash';
-
-/**
- *  A BigNumber extension that is more flexible about decimal strings.
- *  Such as allowing:
- *  new BigNumberInput('0.') => 0
- *  new BigNumberInput('1.') => 1
- *  new BigNumberInput('1..') => still throws
- */
-export class BigNumberInput extends BigNumber {
-    private readonly _isEndingWithDecimal: boolean;
-    constructor(numberOrString: string | number) {
-        if (_.isString(numberOrString)) {
-            const hasDecimalPeriod = _.endsWith(numberOrString, '.');
-            let internalString = numberOrString;
-            if (hasDecimalPeriod) {
-                internalString = numberOrString.slice(0, -1);
-            }
-            super(internalString);
-            this._isEndingWithDecimal = hasDecimalPeriod;
-        } else {
-            super(numberOrString);
-            this._isEndingWithDecimal = false;
-        }
-    }
-    public toDisplayString(): string {
-        const internalString = super.toString();
-        if (this._isEndingWithDecimal) {
-            return `${internalString}.`;
-        }
-        return internalString;
-    }
-}
-- 
cgit v1.2.3


From 180f176716b57d43e2988b5db3a2423c7974177e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 16:41:08 -0700
Subject: feat: use withTheme to use ColorOption to color Icon

---
 packages/instant/src/components/sliding_panel.tsx          |  6 ++----
 packages/instant/src/components/ui/icon.tsx                | 14 ++++++++------
 packages/instant/src/components/ui/overlay.tsx             |  4 ++--
 .../instant/src/components/zero_ex_instant_provider.tsx    |  2 --
 packages/instant/src/style/theme.ts                        |  4 ++--
 5 files changed, 14 insertions(+), 16 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 9219ad1f1..e83cf0fb5 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -5,7 +5,7 @@ import { zIndex } from '../style/z_index';
 
 import { PositionAnimationSettings } from './animations/position_animation';
 import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
-import { Button, Container, Text } from './ui';
+import { Container, Icon } from './ui';
 
 export interface PanelProps {
     onClose?: () => void;
@@ -13,9 +13,7 @@ export interface PanelProps {
 
 export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
     <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel}>
-        <Button onClick={onClose}>
-            <Text fontColor={ColorOption.white}>Close </Text>
-        </Button>
+        <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
         {children}
     </Container>
 );
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 574cb26b7..9b83d962a 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { styled } from '../../style/theme';
+import { ColorOption, styled, Theme, withTheme } from '../../style/theme';
 
 type svgRule = 'evenodd' | 'nonzero' | 'inherit';
 interface IconInfo {
@@ -58,13 +58,15 @@ export interface IconProps {
     className?: string;
     width: number;
     height?: number;
-    color?: string;
+    color?: ColorOption;
     icon: keyof IconInfoMapping;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     padding?: string;
+    theme: Theme;
 }
-const PlainIcon: React.SFC<IconProps> = props => {
+const PlainIcon: React.StatelessComponent<IconProps> = props => {
     const iconInfo = ICONS[props.icon];
+    const colorValue = _.isUndefined(props.color) ? undefined : props.theme[props.color];
     return (
         <div onClick={props.onClick} className={props.className}>
             <svg
@@ -76,7 +78,7 @@ const PlainIcon: React.SFC<IconProps> = props => {
             >
                 <path
                     d={iconInfo.path}
-                    fill={props.color}
+                    fill={colorValue}
                     fillRule={iconInfo.fillRule || 'nonzero'}
                     clipRule={iconInfo.clipRule || 'nonzero'}
                     stroke={iconInfo.stroke}
@@ -90,7 +92,7 @@ const PlainIcon: React.SFC<IconProps> = props => {
     );
 };
 
-export const Icon = styled(PlainIcon)`
+export const Icon = withTheme(styled(PlainIcon)`
     cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')};
     transition: opacity 0.5s ease;
     padding: ${props => props.padding};
@@ -101,7 +103,7 @@ export const Icon = styled(PlainIcon)`
     &:active {
         opacity: 1;
     }
-`;
+`);
 
 Icon.defaultProps = {
     padding: '0em 0em',
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index c5258b031..f1706c874 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { overlayBlack, styled } from '../../style/theme';
+import { ColorOption, overlayBlack, styled } from '../../style/theme';
 
 import { Container } from './container';
 import { Flex } from './flex';
@@ -16,7 +16,7 @@ export interface OverlayProps {
 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="white" icon="closeX" onClick={onClose} padding="2em 2em" />
+            <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
         </Container>
         <div>{children}</div>
     </Flex>
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 8552a7fb5..ce939c144 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -17,8 +17,6 @@ import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { getProvider } from '../util/provider';
 import { web3Wrapper } from '../util/web3_wrapper';
 
-import { ZeroExInstantContainer } from './zero_ex_instant_container';
-
 fonts.include();
 
 export type ZeroExInstantProviderProps = ZeroExInstantProviderRequiredProps &
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index e81694620..8a5d56927 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,6 +1,6 @@
 import * as styledComponents from 'styled-components';
 
-const { default: styled, css, keyframes, ThemeProvider } = styledComponents;
+const { default: styled, css, keyframes, withTheme, ThemeProvider } = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
@@ -31,4 +31,4 @@ export const theme: Theme = {
 export const transparentWhite = 'rgba(255,255,255,0.3)';
 export const overlayBlack = 'rgba(0, 0, 0, 0.6)';
 
-export { styled, css, keyframes, ThemeProvider };
+export { styled, css, keyframes, withTheme, ThemeProvider };
-- 
cgit v1.2.3


From 7de33c5dd9842ef0e83eac64c6e42c69608e4ad0 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 16:52:31 -0700
Subject: feat: implement panel title and close

---
 packages/instant/src/components/sliding_panel.tsx    | 20 +++++++++++++++-----
 .../src/components/zero_ex_instant_container.tsx     |  1 +
 2 files changed, 16 insertions(+), 5 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index e83cf0fb5..678a60cea 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -5,16 +5,26 @@ import { zIndex } from '../style/z_index';
 
 import { PositionAnimationSettings } from './animations/position_animation';
 import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
-import { Container, Icon } from './ui';
+import { Container, Flex, Icon, Text } from './ui';
 
 export interface PanelProps {
+    title?: string;
     onClose?: () => void;
 }
 
-export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
-    <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel}>
-        <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
-        {children}
+export const Panel: React.StatelessComponent<PanelProps> = ({ title, children, onClose }) => (
+    <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel} padding="20px">
+        <Flex justify="space-between">
+            {title && (
+                <Container marginTop="3px">
+                    <Text fontColor={ColorOption.darkGrey} fontSize="18px" fontWeight="600" lineHeight="22px">
+                        {title}
+                    </Text>
+                </Container>
+            )}
+            <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
+        </Flex>
+        <Container marginTop="5px">{children}</Container>
     </Container>
 );
 
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 850beb49c..f734dcbd7 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -43,6 +43,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                         </Container>
                     </Flex>
                     <SlidingPanel
+                        title="Select Token"
                         animationState={this.state.tokenSelectionPanelAnimationState}
                         onClose={this._handlePanelClose}
                     >
-- 
cgit v1.2.3


From f5623632d86504b4081ff6d102c2f9468e2dfa0d Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 17:29:59 -0700
Subject: Have ScalingAmountInput trigger onChange with MaybeBigNumber and keep
 string value as state

---
 .../src/components/scaling_amount_input.tsx        | 64 ++++++++++++++++++----
 packages/instant/src/types.ts                      |  2 +
 2 files changed, 54 insertions(+), 12 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 4b046e8da..5d06c5242 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
+import { MaybeBigNumber } from '../types';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
@@ -16,13 +17,52 @@ export interface ScalingAmountInputProps {
     onChange: (value?: BigNumber) => void;
     onFontSizeChange: (fontSizePx: number) => void;
 }
+interface ScalingAmountInputState {
+    stringValue: string;
+}
+
+const stringToMaybeBigNumber = (stringValue: string): MaybeBigNumber => {
+    let maybeBigNumber: MaybeBigNumber;
+    try {
+        maybeBigNumber = new BigNumber(stringValue);
+    } catch {
+        maybeBigNumber = undefined;
+    }
+    return _.isNaN(maybeBigNumber) ? undefined : maybeBigNumber;
+};
 
-export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> {
+const areMaybeBigNumbersEqual = (val1: MaybeBigNumber, val2: MaybeBigNumber): boolean => {
+    if (!_.isUndefined(val1) && !_.isUndefined(val2)) {
+        return val1.equals(val2);
+    }
+    return _.isUndefined(val1) && _.isUndefined(val2);
+};
+
+export class ScalingAmountInput extends React.Component<ScalingAmountInputProps, ScalingAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
         isDisabled: false,
     };
+    public constructor(props: ScalingAmountInputProps) {
+        super(props);
+        this.state = {
+            stringValue: _.isUndefined(props.value) ? '' : props.value.toString(),
+        };
+    }
+    public componentDidUpdate(prevProps: ScalingAmountInputProps): void {
+        const parsedStateValue = stringToMaybeBigNumber(this.state.stringValue);
+        const currentValue = this.props.value;
+
+        if (!areMaybeBigNumbersEqual(parsedStateValue, currentValue)) {
+            // we somehow got into the state in which the value passed in and the string value
+            // in state have differed, reset state
+            this.setState({
+                stringValue: _.isUndefined(currentValue) ? '' : currentValue.toString(),
+            });
+        }
+    }
+
     public render(): React.ReactNode {
         const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
         return (
@@ -32,7 +72,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 onFontSizeChange={onFontSizeChange}
                 fontColor={fontColor}
                 onChange={this._handleChange}
-                value={!_.isUndefined(value) ? value.toString() : ''}
+                value={this.state.stringValue}
                 placeholder="0.00"
                 emptyInputWidthCh={3.5}
                 isDisabled={this.props.isDisabled}
@@ -40,16 +80,16 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         );
     }
     private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        const value = event.target.value;
-        let bigNumberValue;
-        if (!_.isEmpty(value)) {
-            try {
-                bigNumberValue = new BigNumber(value);
-            } catch {
-                // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
-                return;
-            }
-        }
+        const sanitizedValue = event.target.value.replace(/[^0-9.]/g, ''); // only allow numbers and "."
+        this.setState({
+            stringValue: sanitizedValue,
+        });
+
+        // Trigger onChange with a valid BigNumber, or undefined if the sanitizedValue is invalid or empty
+        const bigNumberValue: MaybeBigNumber = _.isEmpty(sanitizedValue)
+            ? undefined
+            : stringToMaybeBigNumber(sanitizedValue);
+
         this.props.onChange(bigNumberValue);
     };
 }
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 336465e43..e92e96e9a 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -1,6 +1,8 @@
 import { AssetProxyId, ObjectMap } from '@0x/types';
+import { BigNumber } from '@0x/utils';
 
 // Reusable
+export type MaybeBigNumber = BigNumber | undefined;
 export enum AsyncProcessState {
     NONE = 'None',
     PENDING = 'Pending',
-- 
cgit v1.2.3


From ab245fe7dec88c509452dab75fff523c4c4a9461 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 17:52:15 -0700
Subject: feat: implement basic token selection UI

---
 .../src/components/erc20_token_selector.tsx        | 37 +++++++++++++++++++---
 .../instant/src/components/instant_heading.tsx     |  2 +-
 packages/instant/src/components/ui/circle.tsx      | 24 ++++++++++++++
 packages/instant/src/components/ui/container.tsx   |  9 ++++++
 packages/instant/src/components/ui/index.ts        |  1 +
 packages/instant/src/components/ui/text.tsx        |  5 +--
 6 files changed, 69 insertions(+), 9 deletions(-)
 create mode 100644 packages/instant/src/components/ui/circle.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 12051b382..a8bef3d61 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -1,9 +1,11 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
+import { ColorOption } from '../style/theme';
 import { ERC20Asset } from '../types';
+import { assetUtils } from '../util/asset';
 
-import { Button, Container } from './ui';
+import { Circle, Container, Flex, Text } from './ui';
 
 export interface ERC20TokenSelectorProps {
     tokens: ERC20Asset[];
@@ -12,7 +14,9 @@ export interface ERC20TokenSelectorProps {
 
 export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => (
     <Container>
-        {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)}
+        <Container overflow="scroll" height="325px">
+            {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)}
+        </Container>
     </Container>
 );
 
@@ -24,9 +28,34 @@ interface TokenSelectorRowProps {
 class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
     public render(): React.ReactNode {
         const { token } = this.props;
+        const displaySymbol = assetUtils.bestNameForAsset(token);
         return (
-            <Container>
-                <Button onClick={this._handleClick}>Select {token.metaData.symbol}</Button>
+            <Container
+                padding="12px 0px"
+                borderBottom="1px solid"
+                borderColor={ColorOption.feintGrey}
+                backgroundColor={ColorOption.white}
+                width="100%"
+                onClick={this._handleClick}
+                darkenOnHover={true}
+                cursor="pointer"
+            >
+                <Container marginLeft="10px">
+                    <Flex justify="flex-start">
+                        <Container marginRight="10px">
+                            <Circle diameter={30} fillColor={token.metaData.primaryColor}>
+                                <Flex height="100%">
+                                    <Text fontColor={ColorOption.white} fontSize="8px">
+                                        {displaySymbol}
+                                    </Text>
+                                </Flex>
+                            </Circle>
+                        </Container>
+                        <Text fontWeight={700} fontColor={ColorOption.black}>
+                            {displaySymbol}
+                        </Text>
+                    </Flex>
+                </Container>
             </Container>
         );
     }
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 19c08db70..80d7a3ee2 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -22,7 +22,7 @@ export interface InstantHeadingProps {
 const PLACEHOLDER_COLOR = ColorOption.white;
 const ICON_WIDTH = 34;
 const ICON_HEIGHT = 34;
-const ICON_COLOR = 'white';
+const ICON_COLOR = ColorOption.white;
 
 export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     public render(): React.ReactNode {
diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx
new file mode 100644
index 000000000..bd967d326
--- /dev/null
+++ b/packages/instant/src/components/ui/circle.tsx
@@ -0,0 +1,24 @@
+
+import { styled } from '../../style/theme';
+
+export interface CircleProps {
+    className?: string;
+    diameter: number;
+    fillColor?: string;
+}
+
+export const Circle =
+    styled.div <
+    CircleProps >
+    `
+    width: ${props => props.diameter}px;
+    height: ${props => props.diameter}px;
+    background-color: ${props => props.fillColor};
+    border-radius: 50%;
+`;
+
+Circle.displayName = 'Circle';
+
+Circle.defaultProps = {
+    fillColor: 'white',
+};
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 7b8642761..e228a01b6 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -1,3 +1,5 @@
+import { darken } from 'polished';
+
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -30,6 +32,7 @@ export interface ContainerProps {
     opacity?: number;
     cursor?: string;
     overflow?: string;
+    darkenOnHover?: boolean;
 }
 
 export const Container =
@@ -64,6 +67,12 @@ export const Container =
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
+    &:hover {
+        ${props =>
+            props.darkenOnHover
+                ? `background-color: ${darken(0.05, props.theme[props.backgroundColor || 'white'])}`
+                : ''};
+    }
 `;
 
 Container.defaultProps = {
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index 0efabdb85..87f5c11a1 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -1,4 +1,5 @@
 export { Text, TextProps, Title } from './text';
+export { Circle, CircleProps } from './circle';
 export { Button, ButtonProps } from './button';
 export { Flex, FlexProps } from './flex';
 export { Container, ContainerProps } from './container';
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index fd72f6cc8..cba6e7b20 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -18,7 +18,6 @@ export interface TextProps {
     fontWeight?: number | string;
     textDecorationLine?: string;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    hoverColor?: string;
     noWrap?: boolean;
     display?: string;
 }
@@ -46,9 +45,7 @@ export const Text =
     ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')};
     &:hover {
         ${props =>
-            props.onClick
-                ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}`
-                : ''};
+            props.onClick ? `color: ${darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` : ''};
     }
 `;
 
-- 
cgit v1.2.3


From 92706a4b431e0023cf21adec62635447594d8ab3 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 17:59:51 -0700
Subject: feat: add name param to all ERC20AssetMetaData

---
 packages/instant/src/components/erc20_token_selector.tsx |  4 ++++
 packages/instant/src/data/asset_meta_data_map.ts         | 11 +++++++++++
 packages/instant/src/types.ts                            |  1 +
 packages/instant/test/util/asset.test.ts                 |  1 +
 4 files changed, 17 insertions(+)

(limited to 'packages')

diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index a8bef3d61..2f637a1a6 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -54,6 +54,10 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
                         <Text fontWeight={700} fontColor={ColorOption.black}>
                             {displaySymbol}
                         </Text>
+                        <Container margin="0px 5px">
+                            <Text> - </Text>
+                        </Container>
+                        <Text>{token.metaData.name}</Text>
                     </Flex>
                 </Container>
             </Container>
diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts
index d7cf2c0d8..76df80540 100644
--- a/packages/instant/src/data/asset_meta_data_map.ts
+++ b/packages/instant/src/data/asset_meta_data_map.ts
@@ -10,65 +10,76 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
         decimals: 18,
         primaryColor: 'rgb(54, 50, 60)',
         symbol: 'zrx',
+        name: '0x',
     },
     '0xf47261b000000000000000000000000042d6622dece394b54999fbd73d108123806f6a18': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: '#ec3e6c',
         symbol: 'spank',
+        name: 'Spank',
     },
     '0xf47261b0000000000000000000000000d26114cd6EE289AccF82350c8d8487fedB8A0C07': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: '#2e61ea',
         symbol: 'omg',
+        name: 'OmiseGo',
     },
     '0xf47261b00000000000000000000000009f8f72aa9304c8b593d555f12ef6589cc3a579a2': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: 'white',
         symbol: 'mkr',
+        name: 'Maker',
     },
     '0xf47261b00000000000000000000000000d8775f648430679a709e98d2b0cb6250d2887ef': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: '#9c326c',
         symbol: 'bat',
+        name: 'Basic Attention Token',
     },
     '0xf47261b0000000000000000000000000744d70fdbe2ba4cf95131626614a1763df805b9e': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: '#5663b0',
         symbol: 'snt',
+        name: 'Status',
     },
     '0xf47261b00000000000000000000000000f5d2fb29fb7d3cfee444a200298f468908cc942': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: '#f08839',
         symbol: 'mana',
+        name: 'Decentraland',
     },
     '0xf47261b0000000000000000000000000a74476443119A942dE498590Fe1f2454d7D4aC0d': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: '#263469',
         symbol: 'gnt',
+        name: 'Golem',
     },
     '0xf47261b000000000000000000000000012480e24eb5bec1a9d4369cab6a80cad3c0a377a': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: '#de5445',
         symbol: 'sub',
+        name: 'Substratum',
     },
     '0xf47261b000000000000000000000000008d32b0da63e2C3bcF8019c9c5d849d7a9d791e6': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: '#000',
         symbol: 'dentacoin',
+        name: 'Dentacoin',
     },
     '0xf47261b0000000000000000000000000e94327d07fc17907b4db788e5adf2ed424addff6': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: '#512D80',
         symbol: 'rep',
+        name: 'Augur',
     },
 };
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 336465e43..963a5d656 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -39,6 +39,7 @@ export interface ERC20AssetMetaData {
     decimals: number;
     primaryColor?: string;
     symbol: string;
+    name: string;
 }
 
 export interface ERC721AssetMetaData {
diff --git a/packages/instant/test/util/asset.test.ts b/packages/instant/test/util/asset.test.ts
index c7db7eba7..4229b24ed 100644
--- a/packages/instant/test/util/asset.test.ts
+++ b/packages/instant/test/util/asset.test.ts
@@ -9,6 +9,7 @@ const ZRX_META_DATA: ERC20AssetMetaData = {
     assetProxyId: AssetProxyId.ERC20,
     symbol: 'zrx',
     decimals: 18,
+    name: '0x',
 };
 const ZRX_ASSET: Asset = {
     assetData: ZRX_ASSET_DATA,
-- 
cgit v1.2.3


From cdaa1407dacacc53e01a70b1e0ac46536342a4e0 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 18:36:34 -0700
Subject: feat: implement search bar UI

---
 packages/instant/src/components/erc20_token_selector.tsx | 6 ++++--
 packages/instant/src/components/sliding_panel.tsx        | 2 +-
 packages/instant/src/components/ui/icon.tsx              | 8 ++++++++
 packages/instant/src/components/ui/input.tsx             | 1 -
 packages/instant/src/style/theme.ts                      | 4 +++-
 5 files changed, 16 insertions(+), 5 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 2f637a1a6..a9728365b 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -5,6 +5,7 @@ import { ColorOption } from '../style/theme';
 import { ERC20Asset } from '../types';
 import { assetUtils } from '../util/asset';
 
+import { SearchInput } from './search_input';
 import { Circle, Container, Flex, Text } from './ui';
 
 export interface ERC20TokenSelectorProps {
@@ -14,7 +15,8 @@ export interface ERC20TokenSelectorProps {
 
 export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => (
     <Container>
-        <Container overflow="scroll" height="325px">
+        <SearchInput placeholder="Search tokens..." width="100%" />
+        <Container overflow="scroll" height="325px" marginTop="10px">
             {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)}
         </Container>
     </Container>
@@ -40,7 +42,7 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
                 darkenOnHover={true}
                 cursor="pointer"
             >
-                <Container marginLeft="10px">
+                <Container marginLeft="5px">
                     <Flex justify="flex-start">
                         <Container marginRight="10px">
                             <Circle diameter={30} fillColor={token.metaData.primaryColor}>
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 678a60cea..9064c220c 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -24,7 +24,7 @@ export const Panel: React.StatelessComponent<PanelProps> = ({ title, children, o
             )}
             <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
         </Flex>
-        <Container marginTop="5px">{children}</Container>
+        <Container marginTop="10px">{children}</Container>
     </Container>
 );
 
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 9b83d962a..94ea26900 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -20,6 +20,7 @@ interface IconInfoMapping {
     failed: IconInfo;
     success: IconInfo;
     chevron: IconInfo;
+    search: IconInfo;
 }
 const ICONS: IconInfoMapping = {
     closeX: {
@@ -52,6 +53,13 @@ const ICONS: IconInfoMapping = {
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
     },
+    search: {
+        viewBox: '0 0 14 14',
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        path:
+            'M8.39404 5.19727C8.39404 6.96289 6.96265 8.39453 5.19702 8.39453C3.4314 8.39453 2 6.96289 2 5.19727C2 3.43164 3.4314 2 5.19702 2C6.96265 2 8.39404 3.43164 8.39404 5.19727ZM8.09668 9.51074C7.26855 10.0684 6.27075 10.3945 5.19702 10.3945C2.3269 10.3945 0 8.06738 0 5.19727C0 2.32715 2.3269 0 5.19702 0C8.06738 0 10.394 2.32715 10.394 5.19727C10.394 6.27051 10.0686 7.26855 9.51074 8.09668L13.6997 12.2861L12.2854 13.7002L8.09668 9.51074Z',
+    },
 };
 
 export interface IconProps {
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index a884ff7cb..65cf838b0 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -9,7 +9,6 @@ export interface InputProps {
     fontSize?: string;
     fontColor?: ColorOption;
     placeholder?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const Input =
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 8a5d56927..d10c9b72c 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -10,6 +10,7 @@ export enum ColorOption {
     lightGrey = 'lightGrey',
     grey = 'grey',
     feintGrey = 'feintGrey',
+    lightestGrey = 'lightestGrey',
     darkGrey = 'darkGrey',
     white = 'white',
     lightOrange = 'lightOrange',
@@ -17,11 +18,12 @@ export enum ColorOption {
 }
 
 export const theme: Theme = {
-    primaryColor: '#512D80',
+    primaryColor: '#333',
     black: 'black',
     lightGrey: '#999999',
     grey: '#666666',
     feintGrey: '#DEDEDE',
+    lightestGrey: '#EEEEEE',
     darkGrey: '#333333',
     white: 'white',
     lightOrange: '#F9F2ED',
-- 
cgit v1.2.3


From 209b2c9dcb6e9e81011b64e7b8bad719dec35379 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 18:38:25 -0700
Subject: feat: improve position of close X in token selector

---
 packages/instant/src/components/sliding_panel.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 9064c220c..ea1d6b9a1 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -22,7 +22,9 @@ export const Panel: React.StatelessComponent<PanelProps> = ({ title, children, o
                     </Text>
                 </Container>
             )}
-            <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
+            <Container position="relative" bottom="7px">
+                <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
+            </Container>
         </Flex>
         <Container marginTop="10px">{children}</Container>
     </Container>
-- 
cgit v1.2.3


From e2ff7b7c846fa97b56d6bd36192329dd8f485af0 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 18:55:37 -0700
Subject: feat: add basic token search functionality

---
 .../src/components/erc20_token_selector.tsx        | 59 ++++++++++++++++++----
 packages/instant/src/components/search_input.tsx   | 26 ++++++++++
 packages/instant/src/components/ui/input.tsx       |  1 +
 3 files changed, 75 insertions(+), 11 deletions(-)
 create mode 100644 packages/instant/src/components/search_input.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 a9728365b..4a3724052 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -7,20 +7,57 @@ import { assetUtils } from '../util/asset';
 
 import { SearchInput } from './search_input';
 import { Circle, Container, Flex, Text } from './ui';
+import { bool } from 'prop-types';
 
 export interface ERC20TokenSelectorProps {
     tokens: ERC20Asset[];
     onTokenSelect: (token: ERC20Asset) => void;
 }
 
-export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => (
-    <Container>
-        <SearchInput placeholder="Search tokens..." width="100%" />
-        <Container overflow="scroll" height="325px" marginTop="10px">
-            {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)}
-        </Container>
-    </Container>
-);
+export interface ERC20TokenSelectorState {
+    searchQuery?: string;
+}
+
+export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps> {
+    public state: ERC20TokenSelectorState = {
+        searchQuery: undefined,
+    };
+    public render(): React.ReactNode {
+        const { tokens, onTokenSelect } = this.props;
+        return (
+            <Container>
+                <SearchInput
+                    placeholder="Search tokens..."
+                    width="100%"
+                    value={this.state.searchQuery}
+                    onChange={this._handleSearchInputChange}
+                />
+                <Container overflow="scroll" height="275px" marginTop="10px">
+                    {_.map(tokens, token => {
+                        if (!this._isTokenQueryMatch(token)) {
+                            return null;
+                        }
+                        return <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />;
+                    })}
+                </Container>
+            </Container>
+        );
+    }
+    private readonly _handleSearchInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        const searchQuery = event.target.value;
+        this.setState({
+            searchQuery,
+        });
+    };
+    private readonly _isTokenQueryMatch = (token: ERC20Asset): boolean => {
+        const { searchQuery } = this.state;
+        if (_.isUndefined(searchQuery)) {
+            return true;
+        }
+        const stringToSearch = `${token.metaData.name} ${token.metaData.symbol}`;
+        return _.includes(stringToSearch.toLowerCase(), searchQuery.toLowerCase());
+    };
+}
 
 interface TokenSelectorRowProps {
     token: ERC20Asset;
@@ -53,13 +90,13 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
                                 </Flex>
                             </Circle>
                         </Container>
-                        <Text fontWeight={700} fontColor={ColorOption.black}>
+                        <Text fontSize="14px" fontWeight={700} fontColor={ColorOption.black}>
                             {displaySymbol}
                         </Text>
                         <Container margin="0px 5px">
-                            <Text> - </Text>
+                            <Text fontSize="14px"> - </Text>
                         </Container>
-                        <Text>{token.metaData.name}</Text>
+                        <Text fontSize="14px">{token.metaData.name}</Text>
                     </Flex>
                 </Container>
             </Container>
diff --git a/packages/instant/src/components/search_input.tsx b/packages/instant/src/components/search_input.tsx
new file mode 100644
index 000000000..f082eaa16
--- /dev/null
+++ b/packages/instant/src/components/search_input.tsx
@@ -0,0 +1,26 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container, Flex, Icon, Input, InputProps } from './ui';
+
+export interface SearchInputProps extends InputProps {
+    backgroundColor?: ColorOption;
+}
+
+export const SearchInput: React.StatelessComponent<SearchInputProps> = props => (
+    <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .3em">
+        <Flex justify="flex-start" align="flex-end">
+            <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="0px 12px" />
+            <Input {...props} fontSize="14px" fontColor={props.fontColor} />
+        </Flex>
+    </Container>
+);
+
+SearchInput.displayName = 'SearchInput';
+
+SearchInput.defaultProps = {
+    backgroundColor: ColorOption.lightestGrey,
+    fontColor: ColorOption.grey,
+};
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 65cf838b0..a884ff7cb 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -9,6 +9,7 @@ export interface InputProps {
     fontSize?: string;
     fontColor?: ColorOption;
     placeholder?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const Input =
-- 
cgit v1.2.3


From 515b8712a11a5e9b7ea5264514f6ee8ecf25361c Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 18:59:28 -0700
Subject: chore: prettier and linter

---
 packages/instant/src/components/erc20_token_selector.tsx | 1 -
 packages/instant/src/components/ui/circle.tsx            | 1 -
 2 files changed, 2 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 4a3724052..481778495 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -7,7 +7,6 @@ import { assetUtils } from '../util/asset';
 
 import { SearchInput } from './search_input';
 import { Circle, Container, Flex, Text } from './ui';
-import { bool } from 'prop-types';
 
 export interface ERC20TokenSelectorProps {
     tokens: ERC20Asset[];
diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx
index bd967d326..e7a29d59c 100644
--- a/packages/instant/src/components/ui/circle.tsx
+++ b/packages/instant/src/components/ui/circle.tsx
@@ -1,4 +1,3 @@
-
 import { styled } from '../../style/theme';
 
 export interface CircleProps {
-- 
cgit v1.2.3


From 7619bc4f13bf22f3ec7caa9257a625331a9ff0ba Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 19:01:56 -0700
Subject: fix: dont include assetData in render options

---
 packages/instant/public/index.html | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index e1f8432be..762369d9c 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -73,7 +73,6 @@
         const queryParams = new Uri(window.location.search);
         const renderOptionsDefaults = {
             orderSource: 'https://api.radarrelay.com/0x/v2/',
-            assetData: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498',
             onClose: () => { console.log('0x Instant Closed') }
         }
         const orderSourceOverride = queryParams.getQueryParamValue('orderSource');
-- 
cgit v1.2.3


From 4fda2a2d049843db7f87b930321c11c910e40ea3 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 1 Nov 2018 18:01:06 -0700
Subject: fix(asset-buyer): fix default values being overriden and incorrect
 fee rounding

---
 packages/asset-buyer/CHANGELOG.json                | 10 +++++++
 packages/asset-buyer/src/asset_buyer.ts            | 33 ++++++++++++++--------
 .../asset-buyer/src/utils/buy_quote_calculator.ts  |  2 +-
 3 files changed, 32 insertions(+), 13 deletions(-)

(limited to 'packages')

diff --git a/packages/asset-buyer/CHANGELOG.json b/packages/asset-buyer/CHANGELOG.json
index 6ba2a0fd9..0d71bb84d 100644
--- a/packages/asset-buyer/CHANGELOG.json
+++ b/packages/asset-buyer/CHANGELOG.json
@@ -14,6 +14,16 @@
             {
                 "note": "No longer require that provided orders all have the same maker and taker asset data",
                 "pr": 1197
+            },
+            {
+                "note":
+                    "Fix bug where `BuyQuoteInfo` objects could return `totalEthAmount` and `feeEthAmount` that were not whole numbers",
+                "pr": 1207
+            },
+            {
+                "note":
+                    "Fix bug where default values for `AssetBuyer` public facing methods could get overriden by `undefined` values",
+                "pr": 1207
             }
         ]
     },
diff --git a/packages/asset-buyer/src/asset_buyer.ts b/packages/asset-buyer/src/asset_buyer.ts
index 49743404f..934410c55 100644
--- a/packages/asset-buyer/src/asset_buyer.ts
+++ b/packages/asset-buyer/src/asset_buyer.ts
@@ -90,10 +90,11 @@ export class AssetBuyer {
      * @return  An instance of AssetBuyer
      */
     constructor(provider: Provider, orderProvider: OrderProvider, options: Partial<AssetBuyerOpts> = {}) {
-        const { networkId, orderRefreshIntervalMs, expiryBufferSeconds } = {
-            ...constants.DEFAULT_ASSET_BUYER_OPTS,
-            ...options,
-        };
+        const { networkId, orderRefreshIntervalMs, expiryBufferSeconds } = _.merge(
+            {},
+            constants.DEFAULT_ASSET_BUYER_OPTS,
+            options,
+        );
         assert.isWeb3Provider('provider', provider);
         assert.isValidOrderProvider('orderProvider', orderProvider);
         assert.isNumber('networkId', networkId);
@@ -122,10 +123,11 @@ export class AssetBuyer {
         assetBuyAmount: BigNumber,
         options: Partial<BuyQuoteRequestOpts> = {},
     ): Promise<BuyQuote> {
-        const { feePercentage, shouldForceOrderRefresh, slippagePercentage } = {
-            ...constants.DEFAULT_BUY_QUOTE_REQUEST_OPTS,
-            ...options,
-        };
+        const { feePercentage, shouldForceOrderRefresh, slippagePercentage } = _.merge(
+            {},
+            constants.DEFAULT_BUY_QUOTE_REQUEST_OPTS,
+            options,
+        );
         assert.isString('assetData', assetData);
         assert.isBigNumber('assetBuyAmount', assetBuyAmount);
         assert.isValidPercentage('feePercentage', feePercentage);
@@ -186,10 +188,11 @@ export class AssetBuyer {
         buyQuote: BuyQuote,
         options: Partial<BuyQuoteExecutionOpts> = {},
     ): Promise<string> {
-        const { ethAmount, takerAddress, feeRecipient, gasLimit, gasPrice } = {
-            ...constants.DEFAULT_BUY_QUOTE_EXECUTION_OPTS,
-            ...options,
-        };
+        const { ethAmount, takerAddress, feeRecipient, gasLimit, gasPrice } = _.merge(
+            {},
+            constants.DEFAULT_BUY_QUOTE_EXECUTION_OPTS,
+            options,
+        );
         assert.isValidBuyQuote('buyQuote', buyQuote);
         if (!_.isUndefined(ethAmount)) {
             assert.isBigNumber('ethAmount', ethAmount);
@@ -198,6 +201,12 @@ export class AssetBuyer {
             assert.isETHAddressHex('takerAddress', takerAddress);
         }
         assert.isETHAddressHex('feeRecipient', feeRecipient);
+        if (!_.isUndefined(gasLimit)) {
+            assert.isNumber('gasLimit', gasLimit);
+        }
+        if (!_.isUndefined(gasPrice)) {
+            assert.isBigNumber('gasPrice', gasPrice);
+        }
         const { orders, feeOrders, feePercentage, assetBuyAmount, worstCaseQuoteInfo } = buyQuote;
         // if no takerAddress is provided, try to get one from the provider
         let finalTakerAddress;
diff --git a/packages/asset-buyer/src/utils/buy_quote_calculator.ts b/packages/asset-buyer/src/utils/buy_quote_calculator.ts
index f94ab3fa4..6a67ed1ed 100644
--- a/packages/asset-buyer/src/utils/buy_quote_calculator.ts
+++ b/packages/asset-buyer/src/utils/buy_quote_calculator.ts
@@ -119,7 +119,7 @@ function calculateQuoteInfo(
         ethAmountToBuyZrx = findEthAmountNeededToBuyZrx(feeOrdersAndFillableAmounts, zrxAmountToBuyAsset);
     }
     /// find the eth amount needed to buy the affiliate fee
-    const ethAmountToBuyAffiliateFee = ethAmountToBuyAsset.mul(feePercentage);
+    const ethAmountToBuyAffiliateFee = ethAmountToBuyAsset.mul(feePercentage).ceil();
     const totalEthAmountWithoutAffiliateFee = ethAmountToBuyAsset.plus(ethAmountToBuyZrx);
     const ethAmountTotal = totalEthAmountWithoutAffiliateFee.plus(ethAmountToBuyAffiliateFee);
     // divide into the assetBuyAmount in order to find rate of makerAsset / WETH
-- 
cgit v1.2.3


From 5e66cc8a40759658a8763f85996163e5ae013fcd Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 1 Nov 2018 18:24:32 -0700
Subject: feat(instant): implement affiliateFeeInfo prop

---
 packages/instant/src/components/buy_button.tsx     | 13 +++++++---
 .../src/components/buy_order_state_buttons.tsx     |  4 +++-
 .../src/components/zero_ex_instant_provider.tsx    |  6 +++--
 .../selected_asset_buy_order_state_buttons.ts      |  4 +++-
 .../selected_erc20_asset_amount_input.ts           | 28 ++++++++++++++++------
 packages/instant/src/index.umd.ts                  |  3 +++
 packages/instant/src/redux/reducer.ts              |  3 +++
 packages/instant/src/types.ts                      |  5 ++++
 packages/instant/src/util/assert.ts                | 10 +++++++-
 9 files changed, 61 insertions(+), 15 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index c00b1678d..12ac62601 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -1,10 +1,11 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
+import { oc } from 'ts-optchain';
 
 import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
-import { ZeroExInstantError } from '../types';
+import { AffiliateInfo, ZeroExInstantError } from '../types';
 import { getBestAddress } from '../util/address';
 import { balanceUtil } from '../util/balance';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
@@ -16,6 +17,7 @@ import { Button, Text } from './ui';
 export interface BuyButtonProps {
     buyQuote?: BuyQuote;
     assetBuyer?: AssetBuyer;
+    affiliateInfo?: AffiliateInfo;
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
     onSignatureDenied: (buyQuote: BuyQuote) => void;
@@ -42,7 +44,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
     }
     private readonly _handleClick = async () => {
         // The button is disabled when there is no buy quote anyway.
-        const { buyQuote, assetBuyer } = this.props;
+        const { buyQuote, assetBuyer, affiliateInfo } = this.props;
         if (_.isUndefined(buyQuote) || _.isUndefined(assetBuyer)) {
             return;
         }
@@ -58,8 +60,13 @@ export class BuyButton extends React.Component<BuyButtonProps> {
 
         let txHash: string | undefined;
         const gasInfo = await gasPriceEstimator.getGasInfoAsync();
+        const feeRecipient = oc(affiliateInfo).feeRecipient();
         try {
-            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress, gasPrice: gasInfo.gasPriceInWei });
+            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, {
+                feeRecipient,
+                takerAddress,
+                gasPrice: gasInfo.gasPriceInWei,
+            });
         } catch (e) {
             if (e instanceof Error) {
                 if (e.message === AssetBuyerError.SignatureRequestDenied) {
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 1d02f8cd9..5c074a67a 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -2,7 +2,7 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
-import { OrderProcessState, ZeroExInstantError } from '../types';
+import { AffiliateInfo, OrderProcessState, ZeroExInstantError } from '../types';
 
 import { BuyButton } from './buy_button';
 import { PlacingOrderButton } from './placing_order_button';
@@ -13,6 +13,7 @@ export interface BuyOrderStateButtonProps {
     buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
     assetBuyer?: AssetBuyer;
+    affiliateInfo?: AffiliateInfo;
     onViewTransaction: () => void;
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
@@ -50,6 +51,7 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
         <BuyButton
             buyQuote={props.buyQuote}
             assetBuyer={props.assetBuyer}
+            affiliateInfo={props.affiliateInfo}
             onValidationPending={props.onValidationPending}
             onValidationFail={props.onValidationFail}
             onSignatureDenied={props.onSignatureDenied}
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index a7aecab9c..fce03a280 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -9,7 +9,7 @@ import { asyncData } from '../redux/async_data';
 import { INITIAL_STATE, State } from '../redux/reducer';
 import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
-import { AssetMetaData, Network } from '../types';
+import { AffiliateInfo, AssetMetaData, Network } from '../types';
 import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
 import { errorFlasher } from '../util/error_flasher';
@@ -29,9 +29,10 @@ export interface ZeroExInstantProviderRequiredProps {
 }
 
 export interface ZeroExInstantProviderOptionalProps {
-    defaultAssetBuyAmount?: number;
+    defaultAssetBuyAmount: number;
     additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
     networkId: Network;
+    affiliateInfo: AffiliateInfo;
 }
 
 export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
@@ -66,6 +67,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
                 ? state.selectedAssetAmount
                 : new BigNumberInput(props.defaultAssetBuyAmount),
             assetMetaDataMap: completeAssetMetaDataMap,
+            affiliateInfo: props.affiliateInfo,
         };
         return storeStateFromProps;
     }
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 7c36fa4d0..72d99f844 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -7,7 +7,7 @@ import { Dispatch } from 'redux';
 import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
-import { OrderProcessState, ZeroExInstantError } from '../types';
+import { AffiliateInfo, OrderProcessState, ZeroExInstantError } from '../types';
 import { errorFlasher } from '../util/error_flasher';
 import { etherscanUtil } from '../util/etherscan';
 
@@ -15,6 +15,7 @@ interface ConnectedState {
     buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
     assetBuyer?: AssetBuyer;
+    affiliateInfo?: AffiliateInfo;
     onViewTransaction: () => void;
 }
 
@@ -32,6 +33,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButt
     buyOrderProcessingState: state.buyOrderState.processState,
     assetBuyer: state.assetBuyer,
     buyQuote: state.latestBuyQuote,
+    affiliateInfo: state.affiliateInfo,
     onViewTransaction: () => {
         if (
             state.assetBuyer &&
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index f0e792e2f..7859261dd 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -6,12 +6,13 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
+import { oc } from 'ts-optchain';
 
 import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
-import { ERC20Asset, OrderProcessState } from '../types';
+import { AffiliateInfo, ERC20Asset, OrderProcessState } from '../types';
 import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
 import { errorFlasher } from '../util/error_flasher';
@@ -27,10 +28,16 @@ interface ConnectedState {
     value?: BigNumberInput;
     asset?: ERC20Asset;
     isDisabled: boolean;
+    affiliateInfo?: AffiliateInfo;
 }
 
 interface ConnectedDispatch {
-    updateBuyQuote: (assetBuyer?: AssetBuyer, value?: BigNumberInput, asset?: ERC20Asset) => void;
+    updateBuyQuote: (
+        assetBuyer?: AssetBuyer,
+        value?: BigNumberInput,
+        asset?: ERC20Asset,
+        affiliateInfo?: AffiliateInfo,
+    ) => void;
 }
 
 interface ConnectedProps {
@@ -60,6 +67,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
         value: state.selectedAssetAmount,
         asset: selectedAsset as ERC20Asset,
         isDisabled,
+        affiliateInfo: state.affiliateInfo,
     };
 };
 
@@ -68,6 +76,7 @@ const updateBuyQuoteAsync = async (
     dispatch: Dispatch<Action>,
     asset: ERC20Asset,
     assetAmount: BigNumber,
+    affiliateInfo?: AffiliateInfo,
 ): Promise<void> => {
     // get a new buy quote.
     const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
@@ -75,9 +84,10 @@ const updateBuyQuoteAsync = async (
     // mark quote as pending
     dispatch(actions.setQuoteRequestStatePending());
 
+    const feePercentage = oc(affiliateInfo).feePercentage();
     let newBuyQuote: BuyQuote | undefined;
     try {
-        newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue);
+        newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
     } catch (error) {
         dispatch(actions.setQuoteRequestStateFailure());
         let errorMessage;
@@ -93,7 +103,11 @@ const updateBuyQuoteAsync = async (
             const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
             errorMessage = `${assetName} is currently unavailable`;
         }
-        errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
+        if (!_.isUndefined(errorMessage)) {
+            errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
+        } else {
+            throw error;
+        }
         return;
     }
     // We have a successful new buy quote
@@ -108,7 +122,7 @@ const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
     _ownProps: SelectedERC20AssetAmountInputProps,
 ): ConnectedDispatch => ({
-    updateBuyQuote: (assetBuyer, value, asset) => {
+    updateBuyQuote: (assetBuyer, value, asset, affiliateInfo) => {
         // Update the input
         dispatch(actions.updateSelectedAssetAmount(value));
         // invalidate the last buy quote.
@@ -120,7 +134,7 @@ const mapDispatchToProps = (
             // even if it's debounced, give them the illusion it's loading
             dispatch(actions.setQuoteRequestStatePending());
             // tslint:disable-next-line:no-floating-promises
-            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value);
+            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, affiliateInfo);
         }
     },
 });
@@ -135,7 +149,7 @@ const mergeProps = (
         asset: connectedState.asset,
         value: connectedState.value,
         onChange: (value, asset) => {
-            connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset);
+            connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset, connectedState.affiliateInfo);
         },
         isDisabled: connectedState.isDisabled,
     };
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index b12e65485..806187a16 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -24,6 +24,9 @@ export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFA
     if (!_.isUndefined(props.zIndex)) {
         assert.isNumber('props.zIndex', props.zIndex);
     }
+    if (!_.isUndefined(props.affiliateInfo)) {
+        assert.isValidaffiliateInfo('props.affiliateInfo', props.affiliateInfo);
+    }
     const appendToIfExists = document.querySelector(selector);
     assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`);
     const appendTo = appendToIfExists as Element;
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index cf24f8488..d1537b49b 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -6,6 +6,7 @@ import * as _ from 'lodash';
 
 import { assetMetaDataMap } from '../data/asset_meta_data_map';
 import {
+    AffiliateInfo,
     Asset,
     AssetMetaData,
     AsyncProcessState,
@@ -31,6 +32,7 @@ export interface State {
     quoteRequestState: AsyncProcessState;
     latestErrorMessage?: string;
     latestErrorDisplayStatus: DisplayStatus;
+    affiliateInfo?: AffiliateInfo;
 }
 
 export const INITIAL_STATE: State = {
@@ -43,6 +45,7 @@ export const INITIAL_STATE: State = {
     latestErrorMessage: undefined,
     latestErrorDisplayStatus: DisplayStatus.Hidden,
     quoteRequestState: AsyncProcessState.NONE,
+    affiliateInfo: undefined,
 };
 
 export const reducer = (state: State = INITIAL_STATE, action: Action): State => {
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 288a6d111..82dc77d2e 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -80,3 +80,8 @@ export enum ZeroExInstantError {
     AssetMetaDataNotAvailable = 'ASSET_META_DATA_NOT_AVAILABLE',
     InsufficientETH = 'INSUFFICIENT_ETH',
 }
+
+export interface AffiliateInfo {
+    feeRecipient: string;
+    feePercentage: number;
+}
diff --git a/packages/instant/src/util/assert.ts b/packages/instant/src/util/assert.ts
index 584d3d4b1..20f8ddaee 100644
--- a/packages/instant/src/util/assert.ts
+++ b/packages/instant/src/util/assert.ts
@@ -4,7 +4,7 @@ import { assetDataUtils } from '@0x/order-utils';
 import { AssetProxyId, ObjectMap, SignedOrder } from '@0x/types';
 import * as _ from 'lodash';
 
-import { AssetMetaData } from '../types';
+import { AffiliateInfo, AssetMetaData } from '../types';
 
 export const assert = {
     ...sharedAssert,
@@ -41,4 +41,12 @@ export const assert = {
             assert.isUri(`${variableName}.imageUrl`, metaData.imageUrl);
         }
     },
+    isValidaffiliateInfo(variableName: string, affiliateInfo: AffiliateInfo): void {
+        assert.isETHAddressHex(`${variableName}.recipientAddress`, affiliateInfo.feeRecipient);
+        assert.isNumber(`${variableName}.percentage`, affiliateInfo.feePercentage);
+        assert.assert(
+            affiliateInfo.feePercentage >= 0 && affiliateInfo.feePercentage <= 0.05,
+            `Expected ${variableName}.percentage to be between 0 and 0.05, but is ${affiliateInfo.feePercentage}`,
+        );
+    },
 };
-- 
cgit v1.2.3


From a770ea56eae47c4ec840d28d1f363a017a89c69c Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 2 Nov 2018 11:48:59 -0700
Subject: fix(instant): dont get buy quote for zero value

---
 packages/instant/src/containers/selected_erc20_asset_amount_input.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index f0e792e2f..0ba0bd31f 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -116,7 +116,7 @@ const mapDispatchToProps = (
         // reset our buy state
         dispatch(actions.setBuyOrderStateNone());
 
-        if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
+        if (!_.isUndefined(value) && value.greaterThan(0) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
             // even if it's debounced, give them the illusion it's loading
             dispatch(actions.setQuoteRequestStatePending());
             // tslint:disable-next-line:no-floating-promises
-- 
cgit v1.2.3


From b895b855cbb555736be838e2630890ab6a69d884 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 2 Nov 2018 12:03:15 -0700
Subject: feat(instant): add affiliateInfo overrides to dev url

---
 packages/instant/public/index.html | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 7580ab132..96a703224 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -77,11 +77,21 @@
             onClose: () => { console.log('0x Instant Closed') }
         }
         const liquiditySourceOverride = queryParams.getQueryParamValue('liquiditySource');
+        const feeRecipientOverride = queryParams.getQueryParamValue('feeRecipient');
+        const feePercentageOverride = +queryParams.getQueryParamValue('feePercentage');
+        let affiliateInfoOverride;
+        if (feeRecipientOverride !== undefined && feePercentageOverride !== undefined) {
+            affiliateInfoOverride = {
+                feeRecipient: feeRecipientOverride,
+                feePercentage: feePercentageOverride
+            };
+        }
         const renderOptionsOverrides = {
             liquiditySource: liquiditySourceOverride === 'provided' ? providedOrders : liquiditySourceOverride,
             assetData: queryParams.getQueryParamValue('assetData'),
             networkId: +queryParams.getQueryParamValue('networkId') || undefined,
             defaultAssetBuyAmount: +queryParams.getQueryParamValue('defaultAssetBuyAmount') || undefined,
+            affiliateInfo: affiliateInfoOverride,
         }
         const renderOptions = Object.assign({}, renderOptionsDefaults, removeUndefined(renderOptionsOverrides));
         zeroExInstant.render(renderOptions);
-- 
cgit v1.2.3


From 1f3055c1bce264fb728190e7661f70db24ff6cee Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 2 Nov 2018 13:03:10 -0700
Subject: feat: reset input after token selection

---
 packages/instant/src/containers/available_erc20_token_selector.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/containers/available_erc20_token_selector.ts b/packages/instant/src/containers/available_erc20_token_selector.ts
index bb194cd6b..4d4218d22 100644
--- a/packages/instant/src/containers/available_erc20_token_selector.ts
+++ b/packages/instant/src/containers/available_erc20_token_selector.ts
@@ -31,10 +31,11 @@ const mapDispatchToProps = (
     ownProps: AvailableERC20TokenSelectorProps,
 ): ConnectedDispatch => ({
     onTokenSelect: (token: ERC20Asset) => {
+        dispatch(actions.updateSelectedAsset(token));
+        dispatch(actions.resetAmount());
         if (ownProps.onTokenSelect) {
             ownProps.onTokenSelect(token);
         }
-        dispatch(actions.updateSelectedAsset(token));
     },
 });
 
-- 
cgit v1.2.3


From 620f439816b8c62edb5f0e2e140647176b8702c8 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 2 Nov 2018 13:22:10 -0700
Subject: Move MaybeBigNumber functions into helper

---
 .../src/components/scaling_amount_input.tsx        | 21 ++++--------------
 packages/instant/src/util/maybe_big_number.ts      | 25 ++++++++++++++++++++++
 2 files changed, 29 insertions(+), 17 deletions(-)
 create mode 100644 packages/instant/src/util/maybe_big_number.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 5d06c5242..a30c64b3a 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 import { MaybeBigNumber } from '../types';
+import { maybeBigNumberUtil } from '../util/maybe_big_number';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
@@ -21,23 +22,7 @@ interface ScalingAmountInputState {
     stringValue: string;
 }
 
-const stringToMaybeBigNumber = (stringValue: string): MaybeBigNumber => {
-    let maybeBigNumber: MaybeBigNumber;
-    try {
-        maybeBigNumber = new BigNumber(stringValue);
-    } catch {
-        maybeBigNumber = undefined;
-    }
-    return _.isNaN(maybeBigNumber) ? undefined : maybeBigNumber;
-};
-
-const areMaybeBigNumbersEqual = (val1: MaybeBigNumber, val2: MaybeBigNumber): boolean => {
-    if (!_.isUndefined(val1) && !_.isUndefined(val2)) {
-        return val1.equals(val2);
-    }
-    return _.isUndefined(val1) && _.isUndefined(val2);
-};
-
+const { stringToMaybeBigNumber, areMaybeBigNumbersEqual } = maybeBigNumberUtil;
 export class ScalingAmountInput extends React.Component<ScalingAmountInputProps, ScalingAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
@@ -57,6 +42,8 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
         if (!areMaybeBigNumbersEqual(parsedStateValue, currentValue)) {
             // we somehow got into the state in which the value passed in and the string value
             // in state have differed, reset state
+            // we dont expect to ever get into this state, but let's make sure
+            // we reset if we do since we're dealing with important numbers
             this.setState({
                 stringValue: _.isUndefined(currentValue) ? '' : currentValue.toString(),
             });
diff --git a/packages/instant/src/util/maybe_big_number.ts b/packages/instant/src/util/maybe_big_number.ts
new file mode 100644
index 000000000..113ba552f
--- /dev/null
+++ b/packages/instant/src/util/maybe_big_number.ts
@@ -0,0 +1,25 @@
+import { BigNumber } from '@0x/utils';
+import * as _ from 'lodash';
+
+import { MaybeBigNumber } from '../types';
+
+export const maybeBigNumberUtil = {
+    // converts a string to a MaybeBigNumber
+    // if string is a NaN, considered undefined
+    stringToMaybeBigNumber: (stringValue: string): MaybeBigNumber => {
+        let validBigNumber: BigNumber;
+        try {
+            validBigNumber = new BigNumber(stringValue);
+        } catch {
+            return undefined;
+        }
+
+        return validBigNumber.isNaN() ? undefined : validBigNumber;
+    },
+    areMaybeBigNumbersEqual: (val1: MaybeBigNumber, val2: MaybeBigNumber): boolean => {
+        if (!_.isUndefined(val1) && !_.isUndefined(val2)) {
+            return val1.equals(val2);
+        }
+        return _.isUndefined(val1) && _.isUndefined(val2);
+    },
+};
-- 
cgit v1.2.3


From b0f2ab45e9761cc760b94d8567df8ba66956388c Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 2 Nov 2018 13:25:59 -0700
Subject: onChange -> onAmountChange

---
 packages/instant/src/components/erc20_asset_amount_input.tsx | 2 +-
 packages/instant/src/components/scaling_amount_input.tsx     | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

(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 a67d7d5db..6fb8f60f0 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -54,7 +54,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
                         {...rest}
                         textLengthThreshold={this._textLengthThresholdForAsset(asset)}
                         maxFontSizePx={this.props.startingFontSizePx}
-                        onChange={this._handleChange}
+                        onAmountChange={this._handleChange}
                         onFontSizeChange={this._handleFontSizeChange}
                     />
                 </Container>
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index a30c64b3a..ff74ccb4d 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -15,7 +15,7 @@ export interface ScalingAmountInputProps {
     textLengthThreshold: number;
     fontColor?: ColorOption;
     value?: BigNumber;
-    onChange: (value?: BigNumber) => void;
+    onAmountChange: (value?: BigNumber) => void;
     onFontSizeChange: (fontSizePx: number) => void;
 }
 interface ScalingAmountInputState {
@@ -25,7 +25,7 @@ interface ScalingAmountInputState {
 const { stringToMaybeBigNumber, areMaybeBigNumbersEqual } = maybeBigNumberUtil;
 export class ScalingAmountInput extends React.Component<ScalingAmountInputProps, ScalingAmountInputState> {
     public static defaultProps = {
-        onChange: util.boundNoop,
+        onAmountChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
         isDisabled: false,
     };
@@ -72,11 +72,11 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
             stringValue: sanitizedValue,
         });
 
-        // Trigger onChange with a valid BigNumber, or undefined if the sanitizedValue is invalid or empty
+        // Trigger onAmountChange with a valid BigNumber, or undefined if the sanitizedValue is invalid or empty
         const bigNumberValue: MaybeBigNumber = _.isEmpty(sanitizedValue)
             ? undefined
             : stringToMaybeBigNumber(sanitizedValue);
 
-        this.props.onChange(bigNumberValue);
+        this.props.onAmountChange(bigNumberValue);
     };
 }
-- 
cgit v1.2.3


From 819ba1430337d330dec05be5a4bae5651419bf63 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 2 Nov 2018 13:26:59 -0700
Subject: fix: change assetdatas for OMG and REP to be all lower case, make MKR
 blue

---
 packages/instant/src/data/asset_data_network_mapping.ts | 4 ++--
 packages/instant/src/data/asset_meta_data_map.ts        | 6 +++---
 packages/instant/src/util/asset.ts                      | 7 +++++--
 3 files changed, 10 insertions(+), 7 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/data/asset_data_network_mapping.ts b/packages/instant/src/data/asset_data_network_mapping.ts
index a7bc6a967..43bd34697 100644
--- a/packages/instant/src/data/asset_data_network_mapping.ts
+++ b/packages/instant/src/data/asset_data_network_mapping.ts
@@ -20,7 +20,7 @@ export const assetDataNetworkMapping: AssetDataByNetwork[] = [
     },
     // OMG
     {
-        [Network.Mainnet]: '0xf47261b000000000000000000000000042d6622dece394b54999fbd73d108123806f6a18',
+        [Network.Mainnet]: '0xf47261b0000000000000000000000000d26114cd6ee289accf82350c8d8487fedb8a0c07',
         [Network.Kovan]: '0xf47261b000000000000000000000000046096d8ec059dbaae2950b30e01634ff0dc652ec',
     },
     // MKR
@@ -59,6 +59,6 @@ export const assetDataNetworkMapping: AssetDataByNetwork[] = [
     // REP
     {
         [Network.Kovan]: '0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c',
-        [Network.Mainnet]: '0xf47261b0000000000000000000000000e94327d07fc17907b4db788e5adf2ed424addff6',
+        [Network.Mainnet]: '0xf47261b00000000000000000000000001985365e9f78359a9b6ad760e32412f4a445e862',
     },
 ];
diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts
index 76df80540..8a0f29e21 100644
--- a/packages/instant/src/data/asset_meta_data_map.ts
+++ b/packages/instant/src/data/asset_meta_data_map.ts
@@ -19,7 +19,7 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
         symbol: 'spank',
         name: 'Spank',
     },
-    '0xf47261b0000000000000000000000000d26114cd6EE289AccF82350c8d8487fedB8A0C07': {
+    '0xf47261b0000000000000000000000000d26114cd6ee289accf82350c8d8487fedb8a0c07': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: '#2e61ea',
@@ -29,7 +29,7 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
     '0xf47261b00000000000000000000000009f8f72aa9304c8b593d555f12ef6589cc3a579a2': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: 'white',
+        primaryColor: '#87e4ca',
         symbol: 'mkr',
         name: 'Maker',
     },
@@ -75,7 +75,7 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
         symbol: 'dentacoin',
         name: 'Dentacoin',
     },
-    '0xf47261b0000000000000000000000000e94327d07fc17907b4db788e5adf2ed424addff6': {
+    '0xf47261b00000000000000000000000001985365e9f78359a9b6ad760e32412f4a445e862': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: '#512D80',
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index 2efaadbd2..fbfbb19f3 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -53,7 +53,10 @@ export const assetUtils = {
     ): AssetMetaData | undefined => {
         let mainnetAssetData: string | undefined = assetData;
         if (network !== Network.Mainnet) {
-            const mainnetAssetDataIfExists = assetUtils.getAssociatedAssetDataIfExists(assetData, network);
+            const mainnetAssetDataIfExists = assetUtils.getAssociatedAssetDataIfExists(
+                assetData.toLowerCase(),
+                network,
+            );
             // Just so we don't fail in the case where we are on a non-mainnet network,
             // but pass in a valid mainnet assetData.
             mainnetAssetData = mainnetAssetDataIfExists || assetData;
@@ -61,7 +64,7 @@ export const assetUtils = {
         if (_.isUndefined(mainnetAssetData)) {
             return;
         }
-        const metaData = metaDataMap[mainnetAssetData];
+        const metaData = metaDataMap[mainnetAssetData.toLowerCase()];
         if (_.isUndefined(metaData)) {
             return;
         }
-- 
cgit v1.2.3


From 389665d3a1443abaa90ef5ec97e892c70610cac2 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 2 Nov 2018 13:30:34 -0700
Subject: linting

---
 packages/instant/src/components/scaling_amount_input.tsx | 2 +-
 packages/instant/src/redux/actions.ts                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index ff74ccb4d..ca8ccbe31 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -51,7 +51,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
     }
 
     public render(): React.ReactNode {
-        const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
+        const { textLengthThreshold, fontColor, maxFontSizePx, onFontSizeChange } = this.props;
         return (
             <ScalingInput
                 maxFontSizePx={maxFontSizePx}
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 16bda0208..9397dcc99 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { ActionsUnion, OrderState } from '../types';
+import { ActionsUnion } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
-- 
cgit v1.2.3


From cc4ccda6232af470b96950a37fa1d0f4b4ef7f3a Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 2 Nov 2018 14:21:04 -0700
Subject: chore: address PR comments

---
 .../src/components/erc20_asset_amount_input.tsx    | 33 ++++++++++++----------
 packages/instant/src/components/ui/circle.tsx      |  1 -
 packages/instant/src/components/ui/container.tsx   |  4 ++-
 packages/instant/src/redux/async_data.ts           |  2 +-
 packages/instant/src/types.ts                      |  2 ++
 5 files changed, 24 insertions(+), 18 deletions(-)

(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 b27f349c0..5e07dcf2f 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption, transparentWhite } from '../style/theme';
-import { ERC20Asset } from '../types';
+import { ERC20Asset, SimpleHandler } from '../types';
 import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
 import { util } from '../util/util';
@@ -41,7 +41,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         const { asset } = this.props;
         return (
             <Container whiteSpace="nowrap">
-                {_.isUndefined(asset) ? this._renderBackupContent() : this._renderContentForAsset(asset)}
+                {_.isUndefined(asset) ? this._renderTokenSelectionContent() : this._renderContentForAsset(asset)}
             </Container>
         );
     }
@@ -80,11 +80,11 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             </React.Fragment>
         );
     };
-    private readonly _renderBackupContent = (): React.ReactNode => {
+    private readonly _renderTokenSelectionContent = (): React.ReactNode => {
         const { numberOfAssetsAvailable } = this.props;
         let text = 'Select Token';
         if (_.isUndefined(numberOfAssetsAvailable)) {
-            text = '...Loading';
+            text = 'Loading...';
         } else if (numberOfAssetsAvailable === 0) {
             text = 'Assets Unavailable';
         }
@@ -104,13 +104,12 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         );
     };
     private readonly _renderChevronIcon = (): React.ReactNode => {
-        const { numberOfAssetsAvailable } = this.props;
-        if (_.isUndefined(numberOfAssetsAvailable) || numberOfAssetsAvailable <= 1) {
+        if (!this._areMultipleAssetsAvailable()) {
             return null;
         }
         return (
             <Container marginLeft="5px">
-                <Icon icon="chevron" width={12} onClick={this._generateSelectAssetClickHandler()} />
+                <Icon icon="chevron" width={12} onClick={this._handleSelectAssetClick} />
             </Container>
         );
     };
@@ -122,19 +121,23 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             currentFontSizePx: fontSizePx,
         });
     };
-    private readonly _generateSelectAssetClickHandler = (): (() => void) | undefined => {
+    private readonly _generateSelectAssetClickHandler = (): SimpleHandler | undefined => {
         // We don't want to allow opening the token selection panel if there are no assets.
         // Since styles are inferred from the presence of a click handler, we want to return undefined
         // instead of providing a noop.
-        const { numberOfAssetsAvailable, onSelectAssetClick } = this.props;
-        if (
-            _.isUndefined(numberOfAssetsAvailable) ||
-            numberOfAssetsAvailable <= 1 ||
-            _.isUndefined(onSelectAssetClick)
-        ) {
+        if (!this._areMultipleAssetsAvailable() || _.isUndefined(this.props.onSelectAssetClick)) {
             return undefined;
         }
-        return () => onSelectAssetClick(this.props.asset);
+        return this._handleSelectAssetClick;
+    };
+    private readonly _areMultipleAssetsAvailable = (): boolean => {
+        const { numberOfAssetsAvailable } = this.props;
+        return !_.isUndefined(numberOfAssetsAvailable) && numberOfAssetsAvailable > 1;
+    };
+    private readonly _handleSelectAssetClick = (): void => {
+        if (this.props.onSelectAssetClick) {
+            this.props.onSelectAssetClick();
+        }
     };
     // For assets with symbols of different length,
     // start scaling the input at different character lengths
diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx
index e7a29d59c..eec2777d2 100644
--- a/packages/instant/src/components/ui/circle.tsx
+++ b/packages/instant/src/components/ui/circle.tsx
@@ -1,7 +1,6 @@
 import { styled } from '../../style/theme';
 
 export interface CircleProps {
-    className?: string;
     diameter: number;
     fillColor?: string;
 }
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index e228a01b6..a0a187e5f 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -70,7 +70,9 @@ export const Container =
     &:hover {
         ${props =>
             props.darkenOnHover
-                ? `background-color: ${darken(0.05, props.theme[props.backgroundColor || 'white'])}`
+                ? `background-color: ${
+                      props.backgroundColor ? darken(0.05, props.theme[props.backgroundColor]) : 'none'
+                  }`
                 : ''};
     }
 `;
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index 716558409..0e05c13da 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -27,7 +27,7 @@ export const asyncData = {
                 const assets = assetUtils.createAssetsFromAssetDatas(assetDatas, assetMetaDataMap, network);
                 store.dispatch(actions.setAvailableAssets(assets));
             } catch (e) {
-                const errorMessage = 'Error fetching available assets';
+                const errorMessage = 'Could not find any assets';
                 errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage);
                 // On error, just specify that none are available
                 store.dispatch(actions.setAvailableAssets([]));
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 963a5d656..b4a3aa7c3 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -75,3 +75,5 @@ export enum ZeroExInstantError {
     AssetMetaDataNotAvailable = 'ASSET_META_DATA_NOT_AVAILABLE',
     InsufficientETH = 'INSUFFICIENT_ETH',
 }
+
+export type SimpleHandler = () => void;
-- 
cgit v1.2.3


From 5fc2483be776cab90e7ff868b27536a85d6764c9 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 2 Nov 2018 13:48:31 -0700
Subject: feat(instant): pass in provider through props, fallback to injected
 provider

---
 packages/instant/src/components/buy_button.tsx     |  5 ++--
 .../src/components/zero_ex_instant_provider.tsx    | 30 ++++++++++++++--------
 packages/instant/src/index.umd.ts                  |  6 ++++-
 packages/instant/src/util/address.ts               |  4 +--
 packages/instant/src/util/assert.ts                |  2 +-
 packages/instant/src/util/injected_provider.ts     | 16 ++++++++++++
 packages/instant/src/util/provider.ts              | 12 ---------
 packages/instant/src/util/web3_wrapper.ts          |  5 ----
 8 files changed, 46 insertions(+), 34 deletions(-)
 create mode 100644 packages/instant/src/util/injected_provider.ts
 delete mode 100644 packages/instant/src/util/provider.ts
 delete mode 100644 packages/instant/src/util/web3_wrapper.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 12ac62601..9d9a8540c 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -1,4 +1,5 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { oc } from 'ts-optchain';
@@ -10,7 +11,6 @@ import { getBestAddress } from '../util/address';
 import { balanceUtil } from '../util/balance';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { util } from '../util/util';
-import { web3Wrapper } from '../util/web3_wrapper';
 
 import { Button, Text } from './ui';
 
@@ -50,7 +50,8 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         }
 
         this.props.onValidationPending(buyQuote);
-        const takerAddress = await getBestAddress();
+        const web3Wrapper = new Web3Wrapper(assetBuyer.provider);
+        const takerAddress = await getBestAddress(web3Wrapper);
 
         const hasSufficientEth = await balanceUtil.hasSufficientEth(takerAddress, buyQuote, web3Wrapper);
         if (!hasSufficientEth) {
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index fce03a280..4bc840862 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -1,8 +1,11 @@
 import { AssetBuyer } from '@0x/asset-buyer';
 import { ObjectMap, SignedOrder } from '@0x/types';
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import { Provider } from 'ethereum-types';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Provider } from 'react-redux';
+import { Provider as ReduxProvider } from 'react-redux';
+import { oc } from 'ts-optchain';
 
 import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
 import { asyncData } from '../redux/async_data';
@@ -14,8 +17,7 @@ import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
-import { getProvider } from '../util/provider';
-import { web3Wrapper } from '../util/web3_wrapper';
+import { getInjectedProvider } from '../util/injected_provider';
 
 fonts.include();
 
@@ -29,6 +31,7 @@ export interface ZeroExInstantProviderRequiredProps {
 }
 
 export interface ZeroExInstantProviderOptionalProps {
+    provider: Provider;
     defaultAssetBuyAmount: number;
     additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
     networkId: Network;
@@ -39,8 +42,8 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
     private readonly _store: Store;
     private static _mergeInitialStateWithProps(props: ZeroExInstantProviderProps, state: State = INITIAL_STATE): State {
         const networkId = props.networkId || state.network;
-        // TODO: Provider needs to not be hard-coded to injected web3.
-        const provider = getProvider();
+        // TODO: Proper wallet connect flow
+        const provider = props.provider || getInjectedProvider();
         const assetBuyerOptions = {
             networkId,
         };
@@ -92,19 +95,24 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
 
     public render(): React.ReactNode {
         return (
-            <Provider store={this._store}>
+            <ReduxProvider store={this._store}>
                 <SelectedAssetThemeProvider>{this.props.children}</SelectedAssetThemeProvider>
-            </Provider>
+            </ReduxProvider>
         );
     }
 
     private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => {
         const msToShowError = 30000; // 30 seconds
         const network = this._store.getState().network;
-        const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
-        if (network !== networkOfProvider) {
-            const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
-            errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
+        const assetBuyerIfExists = this._store.getState().assetBuyer;
+        const providerIfExists = oc(assetBuyerIfExists).provider();
+        if (!_.isUndefined(providerIfExists)) {
+            const web3Wrapper = new Web3Wrapper(providerIfExists);
+            const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
+            if (network !== networkOfProvider) {
+                const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
+                errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
+            }
         }
     };
 }
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index 806187a16..b269ad741 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -25,8 +25,12 @@ export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFA
         assert.isNumber('props.zIndex', props.zIndex);
     }
     if (!_.isUndefined(props.affiliateInfo)) {
-        assert.isValidaffiliateInfo('props.affiliateInfo', props.affiliateInfo);
+        assert.isValidAffiliateInfo('props.affiliateInfo', props.affiliateInfo);
     }
+    if (!_.isUndefined(props.provider)) {
+        assert.isWeb3Provider('props.provider', props.provider);
+    }
+    assert.isString('selector', selector);
     const appendToIfExists = document.querySelector(selector);
     assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`);
     const appendTo = appendToIfExists as Element;
diff --git a/packages/instant/src/util/address.ts b/packages/instant/src/util/address.ts
index 14d42d8c0..b21863a8e 100644
--- a/packages/instant/src/util/address.ts
+++ b/packages/instant/src/util/address.ts
@@ -1,6 +1,6 @@
-import { web3Wrapper } from '../util/web3_wrapper';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 
-export const getBestAddress = async (): Promise<string | undefined> => {
+export const getBestAddress = async (web3Wrapper: Web3Wrapper): Promise<string | undefined> => {
     const addresses = await web3Wrapper.getAvailableAddressesAsync();
     return addresses[0];
 };
diff --git a/packages/instant/src/util/assert.ts b/packages/instant/src/util/assert.ts
index 20f8ddaee..99e177993 100644
--- a/packages/instant/src/util/assert.ts
+++ b/packages/instant/src/util/assert.ts
@@ -41,7 +41,7 @@ export const assert = {
             assert.isUri(`${variableName}.imageUrl`, metaData.imageUrl);
         }
     },
-    isValidaffiliateInfo(variableName: string, affiliateInfo: AffiliateInfo): void {
+    isValidAffiliateInfo(variableName: string, affiliateInfo: AffiliateInfo): void {
         assert.isETHAddressHex(`${variableName}.recipientAddress`, affiliateInfo.feeRecipient);
         assert.isNumber(`${variableName}.percentage`, affiliateInfo.feePercentage);
         assert.assert(
diff --git a/packages/instant/src/util/injected_provider.ts b/packages/instant/src/util/injected_provider.ts
new file mode 100644
index 000000000..40f9e2da5
--- /dev/null
+++ b/packages/instant/src/util/injected_provider.ts
@@ -0,0 +1,16 @@
+import { Provider } from 'ethereum-types';
+import * as _ from 'lodash';
+
+export const getInjectedProvider = (): Provider => {
+    const injectedProviderIfExists = (window as any).ethereum;
+    if (!_.isUndefined(injectedProviderIfExists)) {
+        // TODO: call enable here when implementing wallet connection flow
+        return injectedProviderIfExists;
+    }
+    const injectedWeb3IfExists = (window as any).web3;
+    if (!_.isUndefined(injectedWeb3IfExists.currentProvider)) {
+        return injectedWeb3IfExists.currentProvider;
+    } else {
+        throw new Error(`No injected web3 found`);
+    }
+};
diff --git a/packages/instant/src/util/provider.ts b/packages/instant/src/util/provider.ts
deleted file mode 100644
index 49705fd11..000000000
--- a/packages/instant/src/util/provider.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Provider } from 'ethereum-types';
-
-export const getProvider = (): Provider => {
-    const injectedWeb3 = (window as any).web3 || undefined;
-    try {
-        // Use MetaMask/Mist provider
-        return injectedWeb3.currentProvider;
-    } catch (err) {
-        // Throws when user doesn't have MetaMask/Mist running
-        throw new Error(`No injected web3 found: ${err}`);
-    }
-};
diff --git a/packages/instant/src/util/web3_wrapper.ts b/packages/instant/src/util/web3_wrapper.ts
deleted file mode 100644
index 24dcd9076..000000000
--- a/packages/instant/src/util/web3_wrapper.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Web3Wrapper } from '@0x/web3-wrapper';
-
-import { getProvider } from './provider';
-
-export const web3Wrapper = new Web3Wrapper(getProvider());
-- 
cgit v1.2.3


From 8284f9c2ba80992609149333f8feb70fbe9b1bd1 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 2 Nov 2018 15:33:00 -0700
Subject: Use generic Maybe

---
 packages/instant/src/components/scaling_amount_input.tsx | 7 ++++---
 packages/instant/src/types.ts                            | 2 +-
 packages/instant/src/util/maybe_big_number.ts            | 8 ++++----
 3 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index ca8ccbe31..5dc719293 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -2,8 +2,9 @@ import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
+import { Maybe } from '../types';
+
 import { ColorOption } from '../style/theme';
-import { MaybeBigNumber } from '../types';
 import { maybeBigNumberUtil } from '../util/maybe_big_number';
 import { util } from '../util/util';
 
@@ -35,7 +36,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
             stringValue: _.isUndefined(props.value) ? '' : props.value.toString(),
         };
     }
-    public componentDidUpdate(prevProps: ScalingAmountInputProps): void {
+    public componentDidUpdate(): void {
         const parsedStateValue = stringToMaybeBigNumber(this.state.stringValue);
         const currentValue = this.props.value;
 
@@ -73,7 +74,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
         });
 
         // Trigger onAmountChange with a valid BigNumber, or undefined if the sanitizedValue is invalid or empty
-        const bigNumberValue: MaybeBigNumber = _.isEmpty(sanitizedValue)
+        const bigNumberValue: Maybe<BigNumber> = _.isEmpty(sanitizedValue)
             ? undefined
             : stringToMaybeBigNumber(sanitizedValue);
 
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 739556801..c03d269f5 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -2,7 +2,7 @@ import { AssetProxyId, ObjectMap } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 
 // Reusable
-export type MaybeBigNumber = BigNumber | undefined;
+export type Maybe<T> = T | undefined;
 export enum AsyncProcessState {
     NONE = 'None',
     PENDING = 'Pending',
diff --git a/packages/instant/src/util/maybe_big_number.ts b/packages/instant/src/util/maybe_big_number.ts
index 113ba552f..9d3746e10 100644
--- a/packages/instant/src/util/maybe_big_number.ts
+++ b/packages/instant/src/util/maybe_big_number.ts
@@ -1,12 +1,12 @@
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { MaybeBigNumber } from '../types';
+import { Maybe } from '../types';
 
 export const maybeBigNumberUtil = {
-    // converts a string to a MaybeBigNumber
+    // converts a string to a Maybe<BigNumber>
     // if string is a NaN, considered undefined
-    stringToMaybeBigNumber: (stringValue: string): MaybeBigNumber => {
+    stringToMaybeBigNumber: (stringValue: string): Maybe<BigNumber> => {
         let validBigNumber: BigNumber;
         try {
             validBigNumber = new BigNumber(stringValue);
@@ -16,7 +16,7 @@ export const maybeBigNumberUtil = {
 
         return validBigNumber.isNaN() ? undefined : validBigNumber;
     },
-    areMaybeBigNumbersEqual: (val1: MaybeBigNumber, val2: MaybeBigNumber): boolean => {
+    areMaybeBigNumbersEqual: (val1: Maybe<BigNumber>, val2: Maybe<BigNumber>): boolean => {
         if (!_.isUndefined(val1) && !_.isUndefined(val2)) {
             return val1.equals(val2);
         }
-- 
cgit v1.2.3


From f5c7a3c26a4a1ddb6ba7692cee0d332f2dedb738 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 2 Nov 2018 15:34:44 -0700
Subject: linting

---
 packages/instant/src/types.ts | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index c03d269f5..834127994 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -1,5 +1,4 @@
 import { AssetProxyId, ObjectMap } from '@0x/types';
-import { BigNumber } from '@0x/utils';
 
 // Reusable
 export type Maybe<T> = T | undefined;
-- 
cgit v1.2.3


From 16fa0fdda1751d675aa4fc0abf1c77ae4ff95550 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 2 Nov 2018 17:12:33 -0700
Subject: feat: break up deploy into deploy-dogfood and deploy-staging

---
 packages/instant/.discharge.json         | 13 -------------
 packages/instant/.dogfood.discharge.json | 13 +++++++++++++
 packages/instant/.staging.discharge.json | 13 +++++++++++++
 packages/instant/README.md               | 10 +++++++++-
 packages/instant/package.json            |  5 +++--
 5 files changed, 38 insertions(+), 16 deletions(-)
 delete mode 100644 packages/instant/.discharge.json
 create mode 100644 packages/instant/.dogfood.discharge.json
 create mode 100644 packages/instant/.staging.discharge.json

(limited to 'packages')

diff --git a/packages/instant/.discharge.json b/packages/instant/.discharge.json
deleted file mode 100644
index 9ade97d01..000000000
--- a/packages/instant/.discharge.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-    "domain": "0x-instant-dogfood",
-    "build_command": "yarn build:umd:prod",
-    "upload_directory": "public",
-    "index_key": "index.html",
-    "error_key": "index.html",
-    "trailing_slashes": true,
-    "cache": 3600,
-    "aws_profile": "default",
-    "aws_region": "us-east-1",
-    "cdn": false,
-    "dns_configured": true
-}
diff --git a/packages/instant/.dogfood.discharge.json b/packages/instant/.dogfood.discharge.json
new file mode 100644
index 000000000..9ade97d01
--- /dev/null
+++ b/packages/instant/.dogfood.discharge.json
@@ -0,0 +1,13 @@
+{
+    "domain": "0x-instant-dogfood",
+    "build_command": "yarn build:umd:prod",
+    "upload_directory": "public",
+    "index_key": "index.html",
+    "error_key": "index.html",
+    "trailing_slashes": true,
+    "cache": 3600,
+    "aws_profile": "default",
+    "aws_region": "us-east-1",
+    "cdn": false,
+    "dns_configured": true
+}
diff --git a/packages/instant/.staging.discharge.json b/packages/instant/.staging.discharge.json
new file mode 100644
index 000000000..e36d256de
--- /dev/null
+++ b/packages/instant/.staging.discharge.json
@@ -0,0 +1,13 @@
+{
+  "domain": "0x-instant-staging",
+  "build_command": "yarn build:umd:prod",
+  "upload_directory": "public",
+  "index_key": "index.html",
+  "error_key": "index.html",
+  "trailing_slashes": true,
+  "cache": 3600,
+  "aws_profile": "default",
+  "aws_region": "us-east-1",
+  "cdn": false,
+  "dns_configured": true
+}
diff --git a/packages/instant/README.md b/packages/instant/README.md
index 07b01ac95..0638c1824 100644
--- a/packages/instant/README.md
+++ b/packages/instant/README.md
@@ -53,7 +53,15 @@ You can deploy a work-in-progress version of 0x Instant at http://0x-instant-dog
 To build and deploy the site run
 
 ```
-yarn deploy
+yarn deploy-dogfood
+```
+
+We also have a staging bucket that is to be updated less frequently can be used to share instant externally: http://0x-instant-staging.s3-website-us-east-1.amazonaws.com/
+
+To build and deploy to this bucket, rub
+
+```
+yarn deploy-staging
 ```
 
 **NOTE: On deploying the site, it will say the site is available at a non-existent URL. Please ignore and use the (now updated) URL above.**
diff --git a/packages/instant/package.json b/packages/instant/package.json
index 81d2e4c7b..a7fc09805 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -22,7 +22,8 @@
         "rebuild_and_test": "run-s clean build test",
         "test:circleci": "yarn test:coverage",
         "clean": "shx rm -rf lib coverage scripts",
-        "deploy": "discharge deploy",
+        "deploy-dogfood": "discharge deploy -c .dogfood.discharge.json",
+        "deploy-staging": "discharge deploy -c .staging.discharge.json",
         "manual:postpublish": "yarn build; node ./scripts/postpublish.js"
     },
     "config": {
@@ -65,7 +66,7 @@
     },
     "devDependencies": {
         "@0x/tslint-config": "^1.0.9",
-        "@static/discharge": "^1.2.2",
+        "@static/discharge": "https://github.com/0xProject/discharge.git",
         "@types/enzyme": "^3.1.14",
         "@types/enzyme-adapter-react-16": "^1.0.3",
         "@types/jest": "^23.3.5",
-- 
cgit v1.2.3


From 245fa954246e32c973a92e7474aacf74ab8940d8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 2 Nov 2018 17:16:49 -0700
Subject: fix: typo in README

---
 packages/instant/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/README.md b/packages/instant/README.md
index 0638c1824..3fd6efbea 100644
--- a/packages/instant/README.md
+++ b/packages/instant/README.md
@@ -58,7 +58,7 @@ yarn deploy-dogfood
 
 We also have a staging bucket that is to be updated less frequently can be used to share instant externally: http://0x-instant-staging.s3-website-us-east-1.amazonaws.com/
 
-To build and deploy to this bucket, rub
+To build and deploy to this bucket, run
 
 ```
 yarn deploy-staging
-- 
cgit v1.2.3


From bb9c21fb14a87b4d9eeed8b45815d22bee8be203 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 2 Nov 2018 17:26:04 -0700
Subject: chore: prettier and linter

---
 packages/instant/.staging.discharge.json | 22 +++++++++++-----------
 packages/instant/src/redux/reducer.ts    |  1 -
 2 files changed, 11 insertions(+), 12 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/.staging.discharge.json b/packages/instant/.staging.discharge.json
index e36d256de..1026b9986 100644
--- a/packages/instant/.staging.discharge.json
+++ b/packages/instant/.staging.discharge.json
@@ -1,13 +1,13 @@
 {
-  "domain": "0x-instant-staging",
-  "build_command": "yarn build:umd:prod",
-  "upload_directory": "public",
-  "index_key": "index.html",
-  "error_key": "index.html",
-  "trailing_slashes": true,
-  "cache": 3600,
-  "aws_profile": "default",
-  "aws_region": "us-east-1",
-  "cdn": false,
-  "dns_configured": true
+    "domain": "0x-instant-staging",
+    "build_command": "yarn build:umd:prod",
+    "upload_directory": "public",
+    "index_key": "index.html",
+    "error_key": "index.html",
+    "trailing_slashes": true,
+    "cache": 3600,
+    "aws_profile": "default",
+    "aws_region": "us-east-1",
+    "cdn": false,
+    "dns_configured": true
 }
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 8c1902bb8..bc435d069 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -15,7 +15,6 @@ import {
     OrderProcessState,
     OrderState,
 } from '../types';
-import { assetUtils } from '../util/asset';
 
 import { Action, ActionTypes } from './actions';
 
-- 
cgit v1.2.3


From eb46570a38c0c2b698ec1fe23806c2ff4c8e7bfa Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 5 Nov 2018 09:42:22 -0800
Subject: chore(instant): import UI components directly

---
 packages/instant/src/components/amount_placeholder.tsx        | 2 +-
 packages/instant/src/components/buy_button.tsx                | 3 ++-
 packages/instant/src/components/buy_order_progress.tsx        | 2 +-
 packages/instant/src/components/buy_order_state_buttons.tsx   | 5 ++++-
 packages/instant/src/components/erc20_asset_amount_input.tsx  | 6 +++++-
 packages/instant/src/components/erc20_token_selector.tsx      | 6 +++++-
 packages/instant/src/components/instant_heading.tsx           | 6 +++++-
 packages/instant/src/components/order_details.tsx             | 5 ++++-
 packages/instant/src/components/placing_order_button.tsx      | 5 ++++-
 packages/instant/src/components/scaling_input.tsx             | 2 +-
 packages/instant/src/components/search_input.tsx              | 5 ++++-
 packages/instant/src/components/secondary_button.tsx          | 3 ++-
 packages/instant/src/components/sliding_error.tsx             | 4 +++-
 packages/instant/src/components/sliding_panel.tsx             | 6 +++++-
 packages/instant/src/components/ui/index.ts                   | 9 ---------
 packages/instant/src/components/zero_ex_instant_container.tsx | 3 ++-
 packages/instant/src/components/zero_ex_instant_overlay.tsx   | 2 +-
 17 files changed, 49 insertions(+), 25 deletions(-)
 delete mode 100644 packages/instant/src/components/ui/index.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx
index 6ef8f0ac3..29ce8fafb 100644
--- a/packages/instant/src/components/amount_placeholder.tsx
+++ b/packages/instant/src/components/amount_placeholder.tsx
@@ -4,7 +4,7 @@ import { ColorOption } from '../style/theme';
 
 import { Pulse } from './animations/pulse';
 
-import { Text } from './ui';
+import { Text } from './ui/text';
 
 interface PlainPlaceholder {
     color: ColorOption;
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 9d9a8540c..e6d50de96 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -12,7 +12,8 @@ import { balanceUtil } from '../util/balance';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { util } from '../util/util';
 
-import { Button, Text } from './ui';
+import { Button } from './ui/button';
+import { Text } from './ui/text';
 
 export interface BuyButtonProps {
     buyQuote?: BuyQuote;
diff --git a/packages/instant/src/components/buy_order_progress.tsx b/packages/instant/src/components/buy_order_progress.tsx
index e259e5606..7fe4e77e9 100644
--- a/packages/instant/src/components/buy_order_progress.tsx
+++ b/packages/instant/src/components/buy_order_progress.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { TimedProgressBar } from '../components/timed_progress_bar';
 
 import { TimeCounter } from '../components/time_counter';
-import { Container } from '../components/ui';
+import { Container } from '../components/ui/container';
 import { OrderProcessState, OrderState } from '../types';
 
 export interface BuyOrderProgressProps {
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 5c074a67a..0d54d3187 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -7,7 +7,10 @@ import { AffiliateInfo, OrderProcessState, ZeroExInstantError } from '../types';
 import { BuyButton } from './buy_button';
 import { PlacingOrderButton } from './placing_order_button';
 import { SecondaryButton } from './secondary_button';
-import { Button, Flex, Text } from './ui';
+
+import { Button } from './ui/button';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
 
 export interface BuyOrderStateButtonProps {
     buyQuote?: BuyQuote;
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index 6ad0e92e7..f21c21b87 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -8,7 +8,11 @@ import { assetUtils } from '../util/asset';
 import { util } from '../util/util';
 
 import { ScalingAmountInput } from './scaling_amount_input';
-import { Container, Flex, Icon, Text } from './ui';
+
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Icon } from './ui/icon';
+import { Text } from './ui/text';
 
 // Asset amounts only apply to ERC20 assets
 export interface ERC20AssetAmountInputProps {
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index 481778495..41b0b44b0 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -6,7 +6,11 @@ import { ERC20Asset } from '../types';
 import { assetUtils } from '../util/asset';
 
 import { SearchInput } from './search_input';
-import { Circle, Container, Flex, Text } from './ui';
+
+import { Circle } from './ui/circle';
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
 
 export interface ERC20TokenSelectorProps {
     tokens: ERC20Asset[];
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 80d7a3ee2..6d87bc292 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -8,7 +8,11 @@ import { AsyncProcessState, ERC20Asset, OrderProcessState, OrderState } from '..
 import { format } from '../util/format';
 
 import { AmountPlaceholder } from './amount_placeholder';
-import { Container, Flex, Icon, Spinner, Text } from './ui';
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Icon } from './ui/icon';
+import { Spinner } from './ui/spinner';
+import { Text } from './ui/text';
 
 export interface InstantHeadingProps {
     selectedAssetAmount?: BigNumber;
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index 704009d89..f1029d70c 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -8,7 +8,10 @@ import { ColorOption } from '../style/theme';
 import { format } from '../util/format';
 
 import { AmountPlaceholder } from './amount_placeholder';
-import { Container, Flex, Text } from './ui';
+
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
 
 export interface OrderDetailsProps {
     buyQuoteInfo?: BuyQuoteInfo;
diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx
index e5a6371e6..4232e6c22 100644
--- a/packages/instant/src/components/placing_order_button.tsx
+++ b/packages/instant/src/components/placing_order_button.tsx
@@ -2,7 +2,10 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { Button, Container, Spinner, Text } from './ui';
+import { Button } from './ui/button';
+import { Container } from './ui/container';
+import { Spinner } from './ui/spinner';
+import { Text } from './ui/text';
 
 export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
     <Button isDisabled={true} width="100%">
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 11748b729..1abadb78b 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { ColorOption } from '../style/theme';
 import { util } from '../util/util';
 
-import { Input } from './ui';
+import { Input } from './ui/input';
 
 export enum ScalingInputPhase {
     FixedFontSize,
diff --git a/packages/instant/src/components/search_input.tsx b/packages/instant/src/components/search_input.tsx
index f082eaa16..3a693b9f8 100644
--- a/packages/instant/src/components/search_input.tsx
+++ b/packages/instant/src/components/search_input.tsx
@@ -3,7 +3,10 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { Container, Flex, Icon, Input, InputProps } from './ui';
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Icon } from './ui/icon';
+import { Input, InputProps } from './ui/input';
 
 export interface SearchInputProps extends InputProps {
     backgroundColor?: ColorOption;
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index ca698c77a..583058b5b 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -3,7 +3,8 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { Button, ButtonProps, Text } from './ui';
+import { Button, ButtonProps } from './ui/button';
+import { Text } from './ui/text';
 
 export interface SecondaryButtonProps extends ButtonProps {}
 
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 17643fd7d..a923b9932 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -5,7 +5,9 @@ import { ColorOption } from '../style/theme';
 import { PositionAnimationSettings } from './animations/position_animation';
 import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
 
-import { Container, Flex, Text } from './ui';
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
 
 export interface ErrorProps {
     icon: string;
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index ea1d6b9a1..7ef28e09c 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -5,7 +5,11 @@ import { zIndex } from '../style/z_index';
 
 import { PositionAnimationSettings } from './animations/position_animation';
 import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
-import { Container, Flex, Icon, Text } from './ui';
+
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Icon } from './ui/icon';
+import { Text } from './ui/text';
 
 export interface PanelProps {
     title?: string;
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
deleted file mode 100644
index 87f5c11a1..000000000
--- a/packages/instant/src/components/ui/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export { Text, TextProps, Title } from './text';
-export { Circle, CircleProps } from './circle';
-export { Button, ButtonProps } from './button';
-export { Flex, FlexProps } from './flex';
-export { Container, ContainerProps } from './container';
-export { Input, InputProps } from './input';
-export { Icon, IconProps } from './icon';
-export { Spinner, SpinnerProps } from './spinner';
-export { Overlay, OverlayProps } from './overlay';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index c1bd17502..3667ab90f 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -13,7 +13,8 @@ import { zIndex } from '../style/z_index';
 
 import { SlideAnimationState } from './animations/slide_animation';
 import { SlidingPanel } from './sliding_panel';
-import { Container, Flex } from './ui';
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
 export interface ZeroExInstantContainerProps {}
 export interface ZeroExInstantContainerState {
     tokenSelectionPanelAnimationState: SlideAnimationState;
diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx
index 8f872f896..3461600e1 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 { Overlay } from './ui';
+import { Overlay } from './ui/overlay';
 import { ZeroExInstantContainer } from './zero_ex_instant_container';
 import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
 
-- 
cgit v1.2.3


From 04e70df330d0de0e4e70420cd82399c321ddd34e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 5 Nov 2018 10:06:22 -0800
Subject: remove unused import

---
 packages/instant/src/redux/reducer.ts | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 8c1902bb8..bc435d069 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -15,7 +15,6 @@ import {
     OrderProcessState,
     OrderState,
 } from '../types';
-import { assetUtils } from '../util/asset';
 
 import { Action, ActionTypes } from './actions';
 
-- 
cgit v1.2.3


From 7e2acb6e7e8b6efa8c5c938c28b54c578f513531 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 5 Nov 2018 13:35:23 -0800
Subject: add extra space

---
 packages/instant/src/components/zero_ex_instant_container.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 3667ab90f..851dfa2db 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -15,6 +15,7 @@ import { SlideAnimationState } from './animations/slide_animation';
 import { SlidingPanel } from './sliding_panel';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
+
 export interface ZeroExInstantContainerProps {}
 export interface ZeroExInstantContainerState {
     tokenSelectionPanelAnimationState: SlideAnimationState;
-- 
cgit v1.2.3


From e4f9ae6ad5a3d6040e4f8c9c8b7a4a05cf22fb51 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 5 Nov 2018 16:29:44 -0800
Subject: fix(instant): fix provided orders

---
 packages/instant/public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 92c8a6c21..cf9e0eda0 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -87,7 +87,7 @@
             };
         }
         const renderOptionsOverrides = {
-            orderSource: orderSourceOverride === 'provided' ? [providedOrder] : orderSourceOverride,
+            orderSource: orderSourceOverride === 'provided' ? providedOrders : orderSourceOverride,
             networkId: +queryParams.getQueryParamValue('networkId') || undefined,
             defaultAssetBuyAmount: +queryParams.getQueryParamValue('defaultAssetBuyAmount') || undefined,
             availableAssetDatas: availableAssetDatasString ? JSON.parse(availableAssetDatasString) : undefined,
-- 
cgit v1.2.3


From 338594d3e5b499c7dbc1d976bc7d9aafd12b58b4 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 5 Nov 2018 16:37:49 -0800
Subject: feat: add GNT and MKR testnet orders, fix typo

---
 packages/instant/public/index.html                 | 46 +++++++++++++++++++---
 .../instant/src/data/asset_data_network_mapping.ts |  8 ++--
 packages/instant/src/data/asset_meta_data_map.ts   |  2 +-
 3 files changed, 46 insertions(+), 10 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 92c8a6c21..033a125a4 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -42,14 +42,14 @@
                 takerAddress: '0x0000000000000000000000000000000000000000',
                 makerFee: new BigNumber('0'),
                 takerFee: new BigNumber('0'),
-                makerAssetAmount: new BigNumber('400000000000000000000'),
-                takerAssetAmount: new BigNumber('40000000000000000000'),
+                makerAssetAmount: new BigNumber('200000000000000000000'),
+                takerAssetAmount: new BigNumber('10000000000000000000'),
                 makerAssetData: '0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c',
                 takerAssetData: '0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c',
-                expirationTimeSeconds: new BigNumber('1543046400'),
+                expirationTimeSeconds: new BigNumber('1601535600'),
                 feeRecipientAddress: '0x0000000000000000000000000000000000000000',
-                salt: new BigNumber('47929252863126413473766089649682650973189811771354566206928245255479607883031'),
-                signature: '0x1c0bf8ba709ceb5b32e6b0b5a8bb7f07e9d19aba88d8530715f8a298d12188e3862fcc0a30ddfad4062b30459f2859323c064052f12cc687466c457934b9419a1b03',
+                salt: new BigNumber('3101985707338942582579795423923841749956600670712030922928319824580764688653'),
+                signature: '0x1bd4d5686fea801fe33c68c4944356085e7e6cb553eb7073160abd815609f714e85fb47f44b7ffd0a2a1321ac40d72d55163869d0a50fdb5a402132150fe33a08403',
                 exchangeAddress: '0x35dd2932454449b14cee11a94d3674a936d5d7b2'
             },
             // Order selling ZRX
@@ -68,6 +68,40 @@
                 salt: new BigNumber('64592004666704945574675477805199411288137454783320798602050822322450089238268'),
                 signature: '0x1c13cacddca8d7d8248e91f412377e68f8f1f9891a59a6c1b2eea9f7b33558c30c4fb86a448e08ab7def40a28fb3a3062dcb33bb3c45302447fce5c4288b7c7f5b03',
                 exchangeAddress: '0x35dd2932454449b14cee11a94d3674a936d5d7b2'
+            },
+            // Order selling GNT
+            {
+                senderAddress: '0x0000000000000000000000000000000000000000',
+                makerAddress: '0x34a745008a643eebc58920eaa29fb1165b4a288e',
+                takerAddress: '0x0000000000000000000000000000000000000000',
+                makerFee: new BigNumber('0'),
+                takerFee: new BigNumber('0'),
+                makerAssetAmount: new BigNumber('250000000000000000000'),
+                takerAssetAmount: new BigNumber('10000000000000000000'),
+                makerAssetData: '0xf47261b000000000000000000000000031fb614e223706f15d0d3c5f4b08bdf0d5c78623',
+                takerAssetData: '0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c',
+                expirationTimeSeconds: new BigNumber('1601535600'),
+                feeRecipientAddress: '0x0000000000000000000000000000000000000000',
+                salt: new BigNumber('40204378562212615907903051460421336779451270522691667164301816101569427926606'),
+                signature: '0x1c788bf4b93769da1e8f195f52f0f59b4a298ac6da30cf6d05a87ed4be5ee974f61352ed1bc6a0844d0962b8c894c9ca08e452431255958a4e98dd93cbe1fbc73803',
+                exchangeAddress: '0x35dd2932454449b14cee11a94d3674a936d5d7b2'
+            },
+            // Order selling MKR
+            {
+                senderAddress: '0x0000000000000000000000000000000000000000',
+                makerAddress: '0x34a745008a643eebc58920eaa29fb1165b4a288e',
+                takerAddress: '0x0000000000000000000000000000000000000000',
+                makerFee: new BigNumber('0'),
+                takerFee: new BigNumber('0'),
+                makerAssetAmount: new BigNumber('200000000000000000000'),
+                takerAssetAmount: new BigNumber('5000000000000000000'),
+                makerAssetData: '0xf47261b00000000000000000000000007b6b10caa9e8e9552ba72638ea5b47c25afea1f3',
+                takerAssetData: '0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c',
+                expirationTimeSeconds: new BigNumber('1601535600'),
+                feeRecipientAddress: '0x0000000000000000000000000000000000000000',
+                salt: new BigNumber('71338269924068280039932133924198049371838034090153601678083172009862985793828'),
+                signature: '0x1bb3151d57ee1e8fa697767ce83ee4ba77d1ceb8cc1e79c7d77126b3687517704c50c6b3d9cb42c7e7d4478d574b297dfbd1626c5c18a7bc9c2a792c4c07f0797c03',
+                exchangeAddress: '0x35dd2932454449b14cee11a94d3674a936d5d7b2'
             }
         ];
         const queryParams = new Uri(window.location.search);
@@ -87,7 +121,7 @@
             };
         }
         const renderOptionsOverrides = {
-            orderSource: orderSourceOverride === 'provided' ? [providedOrder] : orderSourceOverride,
+            orderSource: orderSourceOverride === 'provided' ? providedOrders : orderSourceOverride,
             networkId: +queryParams.getQueryParamValue('networkId') || undefined,
             defaultAssetBuyAmount: +queryParams.getQueryParamValue('defaultAssetBuyAmount') || undefined,
             availableAssetDatas: availableAssetDatasString ? JSON.parse(availableAssetDatasString) : undefined,
diff --git a/packages/instant/src/data/asset_data_network_mapping.ts b/packages/instant/src/data/asset_data_network_mapping.ts
index 43bd34697..0b266b7f8 100644
--- a/packages/instant/src/data/asset_data_network_mapping.ts
+++ b/packages/instant/src/data/asset_data_network_mapping.ts
@@ -26,7 +26,8 @@ export const assetDataNetworkMapping: AssetDataByNetwork[] = [
     // MKR
     {
         [Network.Mainnet]: '0xf47261b00000000000000000000000009f8f72aa9304c8b593d555f12ef6589cc3a579a2',
-        [Network.Kovan]: '0xf47261b00000000000000000000000000xbf5e8e38659562fda594fbb3ec5a3576d02a9e0a',
+        // ZRX Kovan MKR
+        [Network.Kovan]: '0xf47261b00000000000000000000000007b6b10caa9e8e9552ba72638ea5b47c25afea1f3',
     },
     // BAT
     {
@@ -45,8 +46,9 @@ export const assetDataNetworkMapping: AssetDataByNetwork[] = [
     },
     // GNT
     {
-        [Network.Mainnet]: '0xf47261b0000000000000000000000000a74476443119A942dE498590Fe1f2454d7D4aC0d',
-        [Network.Kovan]: '0xf47261b00000000000000000000000006986fa3646f408905ecb1876bfd355d25039ee3a',
+        [Network.Mainnet]: '0xf47261b0000000000000000000000000a74476443119a942de498590fe1f2454d7d4ac0d',
+        // ZRX Kovan GNT
+        [Network.Kovan]: '0xf47261b000000000000000000000000031fb614e223706f15d0d3c5f4b08bdf0d5c78623',
     },
     // SUB
     {
diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts
index 8a0f29e21..970b6c383 100644
--- a/packages/instant/src/data/asset_meta_data_map.ts
+++ b/packages/instant/src/data/asset_meta_data_map.ts
@@ -54,7 +54,7 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
         symbol: 'mana',
         name: 'Decentraland',
     },
-    '0xf47261b0000000000000000000000000a74476443119A942dE498590Fe1f2454d7D4aC0d': {
+    '0xf47261b0000000000000000000000000a74476443119a942de498590fe1f2454d7d4ac0d': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
         primaryColor: '#263469',
-- 
cgit v1.2.3


From 58a65d0ed93e3d4a50542e03f0ee08af7ee64ecd Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 5 Nov 2018 16:43:35 -0800
Subject: chore: clarify a comment

---
 packages/instant/src/data/asset_data_network_mapping.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/data/asset_data_network_mapping.ts b/packages/instant/src/data/asset_data_network_mapping.ts
index 0b266b7f8..4fd0a25ed 100644
--- a/packages/instant/src/data/asset_data_network_mapping.ts
+++ b/packages/instant/src/data/asset_data_network_mapping.ts
@@ -26,7 +26,7 @@ export const assetDataNetworkMapping: AssetDataByNetwork[] = [
     // MKR
     {
         [Network.Mainnet]: '0xf47261b00000000000000000000000009f8f72aa9304c8b593d555f12ef6589cc3a579a2',
-        // ZRX Kovan MKR
+        // 0x Kovan MKR
         [Network.Kovan]: '0xf47261b00000000000000000000000007b6b10caa9e8e9552ba72638ea5b47c25afea1f3',
     },
     // BAT
@@ -47,7 +47,7 @@ export const assetDataNetworkMapping: AssetDataByNetwork[] = [
     // GNT
     {
         [Network.Mainnet]: '0xf47261b0000000000000000000000000a74476443119a942de498590fe1f2454d7d4ac0d',
-        // ZRX Kovan GNT
+        // 0x Kovan GNT
         [Network.Kovan]: '0xf47261b000000000000000000000000031fb614e223706f15d0d3c5f4b08bdf0d5c78623',
     },
     // SUB
-- 
cgit v1.2.3


From 18d24f8db19d0216044e2069cd67f1edce9b76a9 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 5 Nov 2018 16:47:52 -0800
Subject: chore: move to underscores

---
 packages/instant/README.md    | 4 ++--
 packages/instant/package.json | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/README.md b/packages/instant/README.md
index 3fd6efbea..b83a10508 100644
--- a/packages/instant/README.md
+++ b/packages/instant/README.md
@@ -53,7 +53,7 @@ You can deploy a work-in-progress version of 0x Instant at http://0x-instant-dog
 To build and deploy the site run
 
 ```
-yarn deploy-dogfood
+yarn deploy_dogfood
 ```
 
 We also have a staging bucket that is to be updated less frequently can be used to share instant externally: http://0x-instant-staging.s3-website-us-east-1.amazonaws.com/
@@ -61,7 +61,7 @@ We also have a staging bucket that is to be updated less frequently can be used
 To build and deploy to this bucket, run
 
 ```
-yarn deploy-staging
+yarn deploy_staging
 ```
 
 **NOTE: On deploying the site, it will say the site is available at a non-existent URL. Please ignore and use the (now updated) URL above.**
diff --git a/packages/instant/package.json b/packages/instant/package.json
index a7fc09805..f90990649 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -22,8 +22,8 @@
         "rebuild_and_test": "run-s clean build test",
         "test:circleci": "yarn test:coverage",
         "clean": "shx rm -rf lib coverage scripts",
-        "deploy-dogfood": "discharge deploy -c .dogfood.discharge.json",
-        "deploy-staging": "discharge deploy -c .staging.discharge.json",
+        "deploy_dogfood": "discharge deploy -c .dogfood.discharge.json",
+        "deploy_staging": "discharge deploy -c .staging.discharge.json",
         "manual:postpublish": "yarn build; node ./scripts/postpublish.js"
     },
     "config": {
-- 
cgit v1.2.3


From 543ff7739a7acace60b09d37e38c11708043a5ff Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 5 Nov 2018 16:58:54 -0800
Subject: fix: remove unused import

---
 packages/instant/src/redux/reducer.ts | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 8c1902bb8..bc435d069 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -15,7 +15,6 @@ import {
     OrderProcessState,
     OrderState,
 } from '../types';
-import { assetUtils } from '../util/asset';
 
 import { Action, ActionTypes } from './actions';
 
-- 
cgit v1.2.3


From ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 5 Nov 2018 17:19:37 -0800
Subject: wip: full display of mobile hard coded

---
 packages/instant/public/index.html                            | 2 +-
 packages/instant/src/components/order_details.tsx             | 2 +-
 packages/instant/src/components/ui/container.tsx              | 3 +++
 packages/instant/src/components/ui/flex.tsx                   | 2 ++
 packages/instant/src/components/ui/overlay.tsx                | 4 ++--
 packages/instant/src/components/zero_ex_instant_container.tsx | 6 ++++--
 6 files changed, 13 insertions(+), 6 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index cf9e0eda0..418e6261f 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -13,7 +13,7 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 100vh;
+            /*height: 100vh;*/
         }
 
         body {
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index 704009d89..2d98adf7e 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -23,7 +23,7 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
         const ethTokenFee = buyQuoteAccessor.feeEthAmount();
         const totalEthAmount = buyQuoteAccessor.totalEthAmount();
         return (
-            <Container padding="20px" width="100%">
+            <Container padding="20px" width="100%" flexGrow={1}>
                 <Container marginBottom="10px">
                     <Text
                         letterSpacing="1px"
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index a0a187e5f..228085f51 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -33,13 +33,16 @@ export interface ContainerProps {
     cursor?: string;
     overflow?: string;
     darkenOnHover?: boolean;
+    flexGrow?: string | number;
 }
 
+// TODO Dont commit flex grow
 export const Container =
     styled.div <
     ContainerProps >
     `
     box-sizing: border-box;
+    ${props => cssRuleIfExists(props, 'flex-grow')}
     ${props => cssRuleIfExists(props, 'display')}
     ${props => cssRuleIfExists(props, 'position')}
     ${props => cssRuleIfExists(props, 'top')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 29c6511bb..57abd8b5b 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -10,6 +10,7 @@ export interface FlexProps {
     height?: string;
     backgroundColor?: ColorOption;
     inline?: boolean;
+    flexGrow?: number | string;
 }
 
 export const Flex =
@@ -19,6 +20,7 @@ export const Flex =
     display: ${props => (props.inline ? 'inline-flex' : 'flex')};
     flex-direction: ${props => props.direction};
     flex-wrap: ${props => props.flexWrap};
+    ${props => cssRuleIfExists(props, 'flexGrow')}
     justify-content: ${props => props.justify};
     align-items: ${props => props.align};
     ${props => cssRuleIfExists(props, 'width')}
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index f1706c874..e930ffacd 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -14,11 +14,11 @@ export interface OverlayProps {
 }
 
 const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
-    <Flex height="100vh" className={className}>
+    <Flex 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>
+        <Container height="100%">{children}</Container>
     </Flex>
 );
 export const Overlay = styled(PlainOverlay)`
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index c1bd17502..cf7a04554 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -14,6 +14,7 @@ import { zIndex } from '../style/z_index';
 import { SlideAnimationState } from './animations/slide_animation';
 import { SlidingPanel } from './sliding_panel';
 import { Container, Flex } from './ui';
+
 export interface ZeroExInstantContainerProps {}
 export interface ZeroExInstantContainerState {
     tokenSelectionPanelAnimationState: SlideAnimationState;
@@ -25,7 +26,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
     };
     public render(): React.ReactNode {
         return (
-            <Container width="350px" position="relative">
+            <Container width="350px" height="100%" position="relative">
                 <Container zIndex={zIndex.errorPopup} position="relative">
                     <LatestError />
                 </Container>
@@ -36,8 +37,9 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                     borderRadius="3px"
                     hasBoxShadow={true}
                     overflow="hidden"
+                    height="100%"
                 >
-                    <Flex direction="column" justify="flex-start">
+                    <Flex direction="column" height="100%" justify="flex-start">
                         <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
                         <SelectedAssetBuyOrderProgress />
                         <LatestBuyQuoteOrderDetails />
-- 
cgit v1.2.3


From 188e317504ba788c8a287d4b8da2ed2d6745f97e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 5 Nov 2018 17:23:09 -0800
Subject: wip: height 100%

---
 packages/instant/src/components/ui/overlay.tsx                | 4 +++-
 packages/instant/src/components/zero_ex_instant_container.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index e930ffacd..c4778363d 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -18,7 +18,9 @@ const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, classN
         <Container position="absolute" top="0px" right="0px">
             <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
         </Container>
-        <Container height="100%">{children}</Container>
+        <Container width="100%" height="100%">
+            {children}
+        </Container>
     </Flex>
 );
 export const Overlay = styled(PlainOverlay)`
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index cf7a04554..39b2c9c05 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -26,7 +26,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
     };
     public render(): React.ReactNode {
         return (
-            <Container width="350px" height="100%" position="relative">
+            <Container width="100%" height="100%" position="relative">
                 <Container zIndex={zIndex.errorPopup} position="relative">
                     <LatestError />
                 </Container>
-- 
cgit v1.2.3


From f6487122d1ed3dea731adcb6a08165b44c887282 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 09:26:45 -0800
Subject: Putting back in old heights as not necessary for full bleed

---
 packages/instant/public/index.html             | 2 +-
 packages/instant/src/components/ui/overlay.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 418e6261f..cf9e0eda0 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -13,7 +13,7 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            /*height: 100vh;*/
+            height: 100vh;
         }
 
         body {
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index c4778363d..11496e895 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -14,7 +14,7 @@ export interface OverlayProps {
 }
 
 const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
-    <Flex className={className}>
+    <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>
-- 
cgit v1.2.3


From a2bc62b17a773625220817c79265c017cb61979f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 10:26:39 -0800
Subject: feat(instant): when on mobile, show mobile specific styling that
 takes up whole screen

---
 packages/instant/src/components/ui/container.tsx      | 17 +++++++++++++++++
 packages/instant/src/components/ui/flex.tsx           | 18 ++++++++++++++++++
 packages/instant/src/components/ui/overlay.tsx        |  2 +-
 .../src/components/zero_ex_instant_container.tsx      |  6 +++---
 packages/instant/src/style/media.ts                   | 19 +++++++++++++++++++
 5 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 packages/instant/src/style/media.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 228085f51..36d7cf2ec 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -1,5 +1,7 @@
+import * as _ from 'lodash';
 import { darken } from 'polished';
 
+import { media } from '../../style/media';
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -34,8 +36,22 @@ export interface ContainerProps {
     overflow?: string;
     darkenOnHover?: boolean;
     flexGrow?: string | number;
+
+    smallWidth?: string;
+    smallHeight?: string;
 }
 
+const mediaStyles = (props: ContainerProps) => {
+    if (!_.some([props.smallWidth, props.smallHeight])) {
+        return '';
+    }
+
+    return media.small`
+        width: ${props.smallWidth || props.width || 'auto'}
+        height: ${props.smallHeight || props.height || 'auto'}
+    `;
+};
+
 // TODO Dont commit flex grow
 export const Container =
     styled.div <
@@ -68,6 +84,7 @@ export const Container =
     ${props => cssRuleIfExists(props, 'cursor')}
     ${props => cssRuleIfExists(props, 'overflow')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
+    ${props => mediaStyles(props)}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
     &:hover {
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 57abd8b5b..f85d45e36 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,3 +1,6 @@
+import * as _ from 'lodash';
+
+import { media } from '../../style/media';
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -11,8 +14,22 @@ export interface FlexProps {
     backgroundColor?: ColorOption;
     inline?: boolean;
     flexGrow?: number | string;
+
+    smallWidth?: string;
+    smallHeight?: string;
 }
 
+const mediaStyles = (props: FlexProps) => {
+    if (!_.some([props.smallWidth, props.smallHeight])) {
+        return '';
+    }
+
+    return media.small`
+        width: ${props.smallWidth || props.width || 'auto'}
+        height: ${props.smallHeight || props.height || 'auto'}
+    `;
+};
+
 export const Flex =
     styled.div <
     FlexProps >
@@ -26,6 +43,7 @@ export const Flex =
     ${props => cssRuleIfExists(props, 'width')}
     ${props => cssRuleIfExists(props, 'height')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+    ${props => mediaStyles(props)}
 `;
 
 Flex.defaultProps = {
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index 11496e895..12bde1f2b 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -18,7 +18,7 @@ const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, classN
         <Container position="absolute" top="0px" right="0px">
             <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
         </Container>
-        <Container width="100%" height="100%">
+        <Container smallWidth="100%" smallHeight="100%">
             {children}
         </Container>
     </Flex>
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 39b2c9c05..88c838567 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -26,7 +26,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
     };
     public render(): React.ReactNode {
         return (
-            <Container width="100%" height="100%" position="relative">
+            <Container width="350px" smallWidth="100%" smallHeight="100%" position="relative">
                 <Container zIndex={zIndex.errorPopup} position="relative">
                     <LatestError />
                 </Container>
@@ -37,9 +37,9 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                     borderRadius="3px"
                     hasBoxShadow={true}
                     overflow="hidden"
-                    height="100%"
+                    smallHeight="100%"
                 >
-                    <Flex direction="column" height="100%" justify="flex-start">
+                    <Flex direction="column" smallHeight="100%" justify="flex-start">
                         <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
                         <SelectedAssetBuyOrderProgress />
                         <LatestBuyQuoteOrderDetails />
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
new file mode 100644
index 000000000..fa7571077
--- /dev/null
+++ b/packages/instant/src/style/media.ts
@@ -0,0 +1,19 @@
+import { css } from './theme';
+
+export enum ScreenWidths {
+    Sm = 40,
+    Md = 52,
+    Lg = 64,
+}
+
+const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css`
+    @media (max-width: ${screenWidth}em) {
+        ${css.apply(css, args)};
+    }
+`;
+
+export const media = {
+    small: generateMediaWrapper(ScreenWidths.Sm),
+    medium: generateMediaWrapper(ScreenWidths.Md),
+    large: generateMediaWrapper(ScreenWidths.Lg),
+};
-- 
cgit v1.2.3


From f90486c99c7acf95f3b95fdc73ee125dd3f9086e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 11:34:04 -0800
Subject: wip: mediachoice experiment

---
 packages/instant/src/components/sandbox.tsx        | 22 ++++++++++++++++++++++
 .../src/components/zero_ex_instant_container.tsx   |  2 ++
 packages/instant/src/style/media.ts                | 13 +++++++++++++
 3 files changed, 37 insertions(+)
 create mode 100644 packages/instant/src/components/sandbox.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/sandbox.tsx b/packages/instant/src/components/sandbox.tsx
new file mode 100644
index 000000000..04e4c7935
--- /dev/null
+++ b/packages/instant/src/components/sandbox.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { MediaChoice, stylesForMedia } from '../style/media';
+import { styled } from '../style/theme';
+
+// export const Sandbox: React.StatelessComponent<{}> = props => {
+//     return <div>Hi</div>;
+// };
+
+// TODO: handle string too
+interface SandboxProps {
+    width: MediaChoice;
+}
+export const Sandbox =
+    styled.div <
+    SandboxProps >
+    `
+    display: block;
+    border: 1px solid black;
+    background-color: yellow;
+    ${props => stylesForMedia(props.width)}
+    `;
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 88c838567..8fd4d56c3 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -12,6 +12,7 @@ import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
 
 import { SlideAnimationState } from './animations/slide_animation';
+import { Sandbox } from './sandbox';
 import { SlidingPanel } from './sliding_panel';
 import { Container, Flex } from './ui';
 
@@ -27,6 +28,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
     public render(): React.ReactNode {
         return (
             <Container width="350px" smallWidth="100%" smallHeight="100%" position="relative">
+                <Sandbox width={{ sm: '10px' }}>Test</Sandbox>
                 <Container zIndex={zIndex.errorPopup} position="relative">
                     <LatestError />
                 </Container>
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index fa7571077..5a0cba668 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -1,3 +1,5 @@
+import { InterpolationValue } from 'styled-components';
+
 import { css } from './theme';
 
 export enum ScreenWidths {
@@ -17,3 +19,14 @@ export const media = {
     medium: generateMediaWrapper(ScreenWidths.Md),
     large: generateMediaWrapper(ScreenWidths.Lg),
 };
+
+/// media helper
+export interface MediaChoice {
+    sm: string;
+    md?: string;
+    lg?: string;
+}
+// TODO: handle string too
+export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
+    return media.small`width: ${choice.sm}`;
+};
-- 
cgit v1.2.3


From e8814ecbe70b97dfa0de0f51b6a3b7e7fcd89ea2 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 13:52:16 -0800
Subject: proof of concept working

---
 packages/instant/src/components/sandbox.tsx        |  5 -----
 .../src/components/zero_ex_instant_container.tsx   |  3 ++-
 packages/instant/src/style/media.ts                | 23 +++++++++++++++++++---
 3 files changed, 22 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/sandbox.tsx b/packages/instant/src/components/sandbox.tsx
index 04e4c7935..b574fd35c 100644
--- a/packages/instant/src/components/sandbox.tsx
+++ b/packages/instant/src/components/sandbox.tsx
@@ -3,11 +3,6 @@ import * as React from 'react';
 import { MediaChoice, stylesForMedia } from '../style/media';
 import { styled } from '../style/theme';
 
-// export const Sandbox: React.StatelessComponent<{}> = props => {
-//     return <div>Hi</div>;
-// };
-
-// TODO: handle string too
 interface SandboxProps {
     width: MediaChoice;
 }
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 8fd4d56c3..c60a9c40e 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -28,7 +28,8 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
     public render(): React.ReactNode {
         return (
             <Container width="350px" smallWidth="100%" smallHeight="100%" position="relative">
-                <Sandbox width={{ sm: '10px' }}>Test</Sandbox>
+                {/* <Sandbox width={{ default: '300px', sm: '5px', md: '900px' }}>Test</Sandbox> */}
+                <Sandbox width="100px">Test</Sandbox>
                 <Container zIndex={zIndex.errorPopup} position="relative">
                     <LatestError />
                 </Container>
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index 5a0cba668..84b85a2a8 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -21,12 +21,29 @@ export const media = {
 };
 
 /// media helper
-export interface MediaChoice {
-    sm: string;
+export interface ScreenSpecifications {
+    default: string;
+    sm?: string;
     md?: string;
     lg?: string;
 }
+export type MediaChoice = string | ScreenSpecifications;
 // TODO: handle string too
 export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
-    return media.small`width: ${choice.sm}`;
+    let res: InterpolationValue[];
+    if (typeof choice === 'string') {
+        res = css`
+            width: ${choice};
+        `;
+    } else {
+        res = css`
+            width: ${choice.default};
+            ${choice.lg && media.large`width: ${choice.lg}`}
+            ${choice.md && media.medium`width: ${choice.md}`}
+            ${choice.sm && media.small`width: ${choice.sm}`}
+        `;
+    }
+
+    console.log(res.toString());
+    return res;
 };
-- 
cgit v1.2.3


From 88c7d907fa97f7918b82df8c1759b43c28c7273b Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 13:56:29 -0800
Subject: better function definiton

---
 packages/instant/src/components/sandbox.tsx        |  2 +-
 .../src/components/zero_ex_instant_container.tsx   |  3 +--
 packages/instant/src/style/media.ts                | 23 +++++++++-------------
 3 files changed, 11 insertions(+), 17 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/sandbox.tsx b/packages/instant/src/components/sandbox.tsx
index b574fd35c..b2c64efd3 100644
--- a/packages/instant/src/components/sandbox.tsx
+++ b/packages/instant/src/components/sandbox.tsx
@@ -13,5 +13,5 @@ export const Sandbox =
     display: block;
     border: 1px solid black;
     background-color: yellow;
-    ${props => stylesForMedia(props.width)}
+    ${props => stylesForMedia('width', props.width)}
     `;
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index c60a9c40e..2d8c5bdb0 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -28,8 +28,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
     public render(): React.ReactNode {
         return (
             <Container width="350px" smallWidth="100%" smallHeight="100%" position="relative">
-                {/* <Sandbox width={{ default: '300px', sm: '5px', md: '900px' }}>Test</Sandbox> */}
-                <Sandbox width="100px">Test</Sandbox>
+                <Sandbox width={{ default: '300px', sm: '5px', md: '900px' }}>Test</Sandbox>
                 <Container zIndex={zIndex.errorPopup} position="relative">
                     <LatestError />
                 </Container>
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index 84b85a2a8..4bcbd608f 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -28,22 +28,17 @@ export interface ScreenSpecifications {
     lg?: string;
 }
 export type MediaChoice = string | ScreenSpecifications;
-// TODO: handle string too
-export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
-    let res: InterpolationValue[];
+export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => {
     if (typeof choice === 'string') {
-        res = css`
-            width: ${choice};
-        `;
-    } else {
-        res = css`
-            width: ${choice.default};
-            ${choice.lg && media.large`width: ${choice.lg}`}
-            ${choice.md && media.medium`width: ${choice.md}`}
-            ${choice.sm && media.small`width: ${choice.sm}`}
+        return css`
+            ${cssPropertyName}: ${choice};
         `;
     }
 
-    console.log(res.toString());
-    return res;
+    return css`
+        ${cssPropertyName}: ${choice.default};
+        ${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`}
+        ${choice.md && media.medium`${cssPropertyName}: ${choice.md}`}
+        ${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`}
+    `;
 };
-- 
cgit v1.2.3


From 006a13448fc5d79aa8f6d04ac3f471e430dcfa89 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 14:05:49 -0800
Subject: new MediaChoice approach for setting conditional css properties

---
 packages/instant/src/components/sandbox.tsx        | 17 ----------------
 packages/instant/src/components/ui/container.tsx   | 23 +++++-----------------
 packages/instant/src/components/ui/flex.tsx        | 23 +++++-----------------
 packages/instant/src/components/ui/overlay.tsx     |  2 +-
 .../src/components/zero_ex_instant_container.tsx   | 12 ++++++-----
 packages/instant/src/style/media.ts                |  3 +--
 6 files changed, 19 insertions(+), 61 deletions(-)
 delete mode 100644 packages/instant/src/components/sandbox.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/sandbox.tsx b/packages/instant/src/components/sandbox.tsx
deleted file mode 100644
index b2c64efd3..000000000
--- a/packages/instant/src/components/sandbox.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-import { MediaChoice, stylesForMedia } from '../style/media';
-import { styled } from '../style/theme';
-
-interface SandboxProps {
-    width: MediaChoice;
-}
-export const Sandbox =
-    styled.div <
-    SandboxProps >
-    `
-    display: block;
-    border: 1px solid black;
-    background-color: yellow;
-    ${props => stylesForMedia('width', props.width)}
-    `;
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 36d7cf2ec..0e518be88 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import { darken } from 'polished';
 
-import { media } from '../../style/media';
+import { MediaChoice, stylesForMedia } from '../../style/media';
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -12,8 +12,8 @@ export interface ContainerProps {
     right?: string;
     bottom?: string;
     left?: string;
-    width?: string;
-    height?: string;
+    width?: MediaChoice;
+    height?: MediaChoice;
     maxWidth?: string;
     margin?: string;
     marginTop?: string;
@@ -36,22 +36,8 @@ export interface ContainerProps {
     overflow?: string;
     darkenOnHover?: boolean;
     flexGrow?: string | number;
-
-    smallWidth?: string;
-    smallHeight?: string;
 }
 
-const mediaStyles = (props: ContainerProps) => {
-    if (!_.some([props.smallWidth, props.smallHeight])) {
-        return '';
-    }
-
-    return media.small`
-        width: ${props.smallWidth || props.width || 'auto'}
-        height: ${props.smallHeight || props.height || 'auto'}
-    `;
-};
-
 // TODO Dont commit flex grow
 export const Container =
     styled.div <
@@ -84,7 +70,8 @@ export const Container =
     ${props => cssRuleIfExists(props, 'cursor')}
     ${props => cssRuleIfExists(props, 'overflow')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
-    ${props => mediaStyles(props)}
+    ${props => stylesForMedia('width', props.width || 'auto')}
+    ${props => stylesForMedia('height', props.height || 'auto')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
     &:hover {
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index f85d45e36..c3d643a79 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 
-import { media } from '../../style/media';
+import { MediaChoice, stylesForMedia } from '../../style/media';
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -9,27 +9,13 @@ export interface FlexProps {
     flexWrap?: 'wrap' | 'nowrap';
     justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
     align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
-    width?: string;
-    height?: string;
+    width?: MediaChoice;
+    height?: MediaChoice;
     backgroundColor?: ColorOption;
     inline?: boolean;
     flexGrow?: number | string;
-
-    smallWidth?: string;
-    smallHeight?: string;
 }
 
-const mediaStyles = (props: FlexProps) => {
-    if (!_.some([props.smallWidth, props.smallHeight])) {
-        return '';
-    }
-
-    return media.small`
-        width: ${props.smallWidth || props.width || 'auto'}
-        height: ${props.smallHeight || props.height || 'auto'}
-    `;
-};
-
 export const Flex =
     styled.div <
     FlexProps >
@@ -43,7 +29,8 @@ export const Flex =
     ${props => cssRuleIfExists(props, 'width')}
     ${props => cssRuleIfExists(props, 'height')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
-    ${props => mediaStyles(props)}
+    ${props => stylesForMedia('width', props.width || 'auto')}
+    ${props => stylesForMedia('height', props.height || 'auto')}
 `;
 
 Flex.defaultProps = {
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index 12bde1f2b..0fde995e0 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -18,7 +18,7 @@ const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, classN
         <Container position="absolute" top="0px" right="0px">
             <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
         </Container>
-        <Container smallWidth="100%" smallHeight="100%">
+        <Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}>
             {children}
         </Container>
     </Flex>
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 2d8c5bdb0..679ca793f 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -12,7 +12,6 @@ import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
 
 import { SlideAnimationState } from './animations/slide_animation';
-import { Sandbox } from './sandbox';
 import { SlidingPanel } from './sliding_panel';
 import { Container, Flex } from './ui';
 
@@ -27,8 +26,11 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
     };
     public render(): React.ReactNode {
         return (
-            <Container width="350px" smallWidth="100%" smallHeight="100%" position="relative">
-                <Sandbox width={{ default: '300px', sm: '5px', md: '900px' }}>Test</Sandbox>
+            <Container
+                width={{ default: '350px', sm: '100%' }}
+                height={{ default: 'auto', sm: '100%' }}
+                position="relative"
+            >
                 <Container zIndex={zIndex.errorPopup} position="relative">
                     <LatestError />
                 </Container>
@@ -39,9 +41,9 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                     borderRadius="3px"
                     hasBoxShadow={true}
                     overflow="hidden"
-                    smallHeight="100%"
+                    height={{ default: 'auto', sm: '100%' }}
                 >
-                    <Flex direction="column" smallHeight="100%" justify="flex-start">
+                    <Flex direction="column" height={{ default: 'auto', sm: '100%' }} justify="flex-start">
                         <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
                         <SelectedAssetBuyOrderProgress />
                         <LatestBuyQuoteOrderDetails />
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index 4bcbd608f..beabbac46 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -14,13 +14,12 @@ const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) =>
     }
 `;
 
-export const media = {
+const media = {
     small: generateMediaWrapper(ScreenWidths.Sm),
     medium: generateMediaWrapper(ScreenWidths.Md),
     large: generateMediaWrapper(ScreenWidths.Lg),
 };
 
-/// media helper
 export interface ScreenSpecifications {
     default: string;
     sm?: string;
-- 
cgit v1.2.3


From 897c15fd2850d987e7fae8e578cf86e85b697e1f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 14:07:55 -0800
Subject: Get rid of unused properties

---
 packages/instant/src/components/ui/container.tsx | 2 --
 packages/instant/src/components/ui/flex.tsx      | 2 --
 2 files changed, 4 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 0e518be88..d276e0603 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -51,8 +51,6 @@ export const Container =
     ${props => cssRuleIfExists(props, 'right')}
     ${props => cssRuleIfExists(props, 'bottom')}
     ${props => cssRuleIfExists(props, 'left')}
-    ${props => cssRuleIfExists(props, 'width')}
-    ${props => cssRuleIfExists(props, 'height')}
     ${props => cssRuleIfExists(props, 'max-width')}
     ${props => cssRuleIfExists(props, 'margin')}
     ${props => cssRuleIfExists(props, 'margin-top')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index c3d643a79..ef005db40 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -26,8 +26,6 @@ export const Flex =
     ${props => cssRuleIfExists(props, 'flexGrow')}
     justify-content: ${props => props.justify};
     align-items: ${props => props.align};
-    ${props => cssRuleIfExists(props, 'width')}
-    ${props => cssRuleIfExists(props, 'height')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     ${props => stylesForMedia('width', props.width || 'auto')}
     ${props => stylesForMedia('height', props.height || 'auto')}
-- 
cgit v1.2.3


From 0823bd24d6e6a69fcd8638852f1b93eebd7d68b3 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 6 Nov 2018 14:04:45 -0800
Subject: fix(asset-buyer): lower default expiryBuffer from 5 minutes to 2
 minutes

---
 packages/asset-buyer/CHANGELOG.json   | 4 ++++
 packages/asset-buyer/src/constants.ts | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/asset-buyer/CHANGELOG.json b/packages/asset-buyer/CHANGELOG.json
index 0d71bb84d..2a775075f 100644
--- a/packages/asset-buyer/CHANGELOG.json
+++ b/packages/asset-buyer/CHANGELOG.json
@@ -24,6 +24,10 @@
                 "note":
                     "Fix bug where default values for `AssetBuyer` public facing methods could get overriden by `undefined` values",
                 "pr": 1207
+            },
+            {
+                "note": "Lower default expiry buffer from 5 minutes to 2 minutes",
+                "pr": 1217
             }
         ]
     },
diff --git a/packages/asset-buyer/src/constants.ts b/packages/asset-buyer/src/constants.ts
index cc415102c..c0e1bf27d 100644
--- a/packages/asset-buyer/src/constants.ts
+++ b/packages/asset-buyer/src/constants.ts
@@ -9,7 +9,7 @@ const MAINNET_NETWORK_ID = 1;
 const DEFAULT_ASSET_BUYER_OPTS: AssetBuyerOpts = {
     networkId: MAINNET_NETWORK_ID,
     orderRefreshIntervalMs: 10000, // 10 seconds
-    expiryBufferSeconds: 300, // 5 minutes
+    expiryBufferSeconds: 120, // 2 minutes
 };
 
 const DEFAULT_BUY_QUOTE_REQUEST_OPTS: BuyQuoteRequestOpts = {
-- 
cgit v1.2.3


From eb3fda059a2d72ee9bfeb1bae39a3c4f6a724e99 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 14:21:23 -0800
Subject: Fix mobile view of selecting assets

---
 packages/instant/src/components/erc20_token_selector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index 481778495..6960f89e7 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -31,7 +31,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={{ default: '275px', sm: '75vh' }} marginTop="10px">
                     {_.map(tokens, token => {
                         if (!this._isTokenQueryMatch(token)) {
                             return null;
-- 
cgit v1.2.3


From d941901e3281fdb2fd0f9a9b3b23947f05b1c56e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 14:26:15 -0800
Subject: Hide X when small

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

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index d276e0603..9ec875cf3 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -6,7 +6,7 @@ import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
 export interface ContainerProps {
-    display?: string;
+    display?: MediaChoice;
     position?: string;
     top?: string;
     right?: string;
@@ -45,7 +45,6 @@ export const Container =
     `
     box-sizing: border-box;
     ${props => cssRuleIfExists(props, 'flex-grow')}
-    ${props => cssRuleIfExists(props, 'display')}
     ${props => cssRuleIfExists(props, 'position')}
     ${props => cssRuleIfExists(props, 'top')}
     ${props => cssRuleIfExists(props, 'right')}
@@ -68,6 +67,7 @@ export const Container =
     ${props => cssRuleIfExists(props, 'cursor')}
     ${props => cssRuleIfExists(props, 'overflow')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
+    ${props => stylesForMedia('display', props.display || 'initial')}
     ${props => stylesForMedia('width', props.width || 'auto')}
     ${props => stylesForMedia('height', props.height || 'auto')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index 0fde995e0..7110ee70f 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -15,7 +15,7 @@ export interface OverlayProps {
 
 const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
     <Flex height="100vh" className={className}>
-        <Container position="absolute" top="0px" right="0px">
+        <Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}>
             <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
         </Container>
         <Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}>
-- 
cgit v1.2.3


From 9cc7090e28e3b26886f11d8e894073f69f30b854 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 14:56:42 -0800
Subject: remove old comment

---
 packages/instant/src/components/ui/container.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 9ec875cf3..ce35971f1 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -38,7 +38,6 @@ export interface ContainerProps {
     flexGrow?: string | number;
 }
 
-// TODO Dont commit flex grow
 export const Container =
     styled.div <
     ContainerProps >
-- 
cgit v1.2.3


From d1444f228d20807382d7ae2eb87db998f5b878fc Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 14:57:15 -0800
Subject: remove unused import

---
 packages/instant/src/components/ui/flex.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index ef005db40..fd218b0cd 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,5 +1,3 @@
-import * as _ from 'lodash';
-
 import { MediaChoice, stylesForMedia } from '../../style/media';
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
-- 
cgit v1.2.3


From d59027f0bc3a906ba2ba542eaa6aa98042993216 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 15:02:44 -0800
Subject: remove unused dependecny

---
 packages/instant/src/components/ui/container.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index ce35971f1..cbb6a3a15 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -1,4 +1,3 @@
-import * as _ from 'lodash';
 import { darken } from 'polished';
 
 import { MediaChoice, stylesForMedia } from '../../style/media';
-- 
cgit v1.2.3


From 6861cd746290c076f066cb6e56ecd3ef3f60f607 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 15:09:00 -0800
Subject: Take out unneeded conditionals

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

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index f73f9db8b..6d3c6cb27 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -42,9 +42,9 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                     borderRadius="3px"
                     hasBoxShadow={true}
                     overflow="hidden"
-                    height={{ default: 'auto', sm: '100%' }}
+                    height="100%"
                 >
-                    <Flex direction="column" height={{ default: 'auto', sm: '100%' }} justify="flex-start">
+                    <Flex direction="column" height={'100%'} justify="flex-start">
                         <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
                         <SelectedAssetBuyOrderProgress />
                         <LatestBuyQuoteOrderDetails />
-- 
cgit v1.2.3


From 42c441fafa0a0c2de45904a2f67293152dd954b2 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 6 Nov 2018 15:12:25 -0800
Subject: feat: add faux externall css file

---
 packages/instant/public/external.css | 21 +++++++++++++++++++++
 packages/instant/public/index.html   |  1 +
 2 files changed, 22 insertions(+)
 create mode 100644 packages/instant/public/external.css

(limited to 'packages')

diff --git a/packages/instant/public/external.css b/packages/instant/public/external.css
new file mode 100644
index 000000000..b0d05f618
--- /dev/null
+++ b/packages/instant/public/external.css
@@ -0,0 +1,21 @@
+/*
+  CSS file meant to represent an external (integrators) stylesheet and 
+  help ensure that instant looks consistent accross environments. 
+*/
+
+button {
+    font-size: 50px;
+    height: 200px;
+    background-color: red;
+}
+
+input {
+    padding: 100px;
+    font-size: 50px;
+    height: 100px;
+}
+
+p {
+    background-color: green;
+    margin: 10px;
+}
diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 033a125a4..f6c809e33 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>0x Instant Dev Environment</title>
+    <link rel="stylesheet" href="/external.css">
     <script type="text/javascript" src="/main.bundle.js" charset="utf-8"></script>
     <script type="text/javascript" src="https://unpkg.com/jsuri@1.3.1/Uri.js" charset="utf-8"></script>
     <script type="text/javascript" src="https://unpkg.com/bignumber.js@4.1.0/bignumber.js" charset="utf-8"></script>
-- 
cgit v1.2.3


From c30dca69619bf87ed198cf375d21593213798113 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 6 Nov 2018 15:42:54 -0800
Subject: chore(instant): update OrderState enum to follow capitalization
 conventions

---
 .../instant/src/components/buy_order_progress.tsx  |  8 ++++----
 .../src/components/buy_order_state_buttons.tsx     |  8 ++++----
 .../instant/src/components/instant_heading.tsx     | 14 ++++++-------
 .../containers/latest_buy_quote_order_details.ts   |  2 +-
 .../selected_asset_buy_order_state_buttons.ts      |  6 +++---
 .../selected_erc20_asset_amount_input.ts           |  2 +-
 packages/instant/src/redux/reducer.ts              | 24 +++++++++++-----------
 packages/instant/src/types.ts                      | 22 ++++++++++----------
 8 files changed, 43 insertions(+), 43 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_order_progress.tsx b/packages/instant/src/components/buy_order_progress.tsx
index 7fe4e77e9..bc7319423 100644
--- a/packages/instant/src/components/buy_order_progress.tsx
+++ b/packages/instant/src/components/buy_order_progress.tsx
@@ -14,12 +14,12 @@ export const BuyOrderProgress: React.StatelessComponent<BuyOrderProgressProps> =
     const { buyOrderState } = props;
 
     if (
-        buyOrderState.processState === OrderProcessState.PROCESSING ||
-        buyOrderState.processState === OrderProcessState.SUCCESS ||
-        buyOrderState.processState === OrderProcessState.FAILURE
+        buyOrderState.processState === OrderProcessState.Processing ||
+        buyOrderState.processState === OrderProcessState.Success ||
+        buyOrderState.processState === OrderProcessState.Failure
     ) {
         const progress = buyOrderState.progress;
-        const hasEnded = buyOrderState.processState !== OrderProcessState.PROCESSING;
+        const hasEnded = buyOrderState.processState !== OrderProcessState.Processing;
         const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
         return (
             <Container padding="20px 20px 0px 20px" width="100%">
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 0d54d3187..2759ba341 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -28,7 +28,7 @@ export interface BuyOrderStateButtonProps {
 }
 
 export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
-    if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
+    if (props.buyOrderProcessingState === OrderProcessState.Failure) {
         return (
             <Flex justify="space-between">
                 <Button width="48%" onClick={props.onRetry}>
@@ -42,11 +42,11 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
             </Flex>
         );
     } else if (
-        props.buyOrderProcessingState === OrderProcessState.SUCCESS ||
-        props.buyOrderProcessingState === OrderProcessState.PROCESSING
+        props.buyOrderProcessingState === OrderProcessState.Success ||
+        props.buyOrderProcessingState === OrderProcessState.Processing
     ) {
         return <SecondaryButton onClick={props.onViewTransaction}>View Transaction</SecondaryButton>;
-    } else if (props.buyOrderProcessingState === OrderProcessState.VALIDATING) {
+    } else if (props.buyOrderProcessingState === OrderProcessState.Validating) {
         return <PlacingOrderButton />;
     }
 
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 6d87bc292..b07776b2c 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -77,11 +77,11 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private _renderIcon(): React.ReactNode {
         const processState = this.props.buyOrderState.processState;
 
-        if (processState === OrderProcessState.FAILURE) {
+        if (processState === OrderProcessState.Failure) {
             return <Icon icon="failed" width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
-        } else if (processState === OrderProcessState.PROCESSING) {
+        } else if (processState === OrderProcessState.Processing) {
             return <Spinner widthPx={ICON_HEIGHT} heightPx={ICON_HEIGHT} />;
-        } else if (processState === OrderProcessState.SUCCESS) {
+        } else if (processState === OrderProcessState.Success) {
             return <Icon icon="success" width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
         }
         return undefined;
@@ -89,11 +89,11 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
 
     private _renderTopText(): React.ReactNode {
         const processState = this.props.buyOrderState.processState;
-        if (processState === OrderProcessState.FAILURE) {
+        if (processState === OrderProcessState.Failure) {
             return 'Order failed';
-        } else if (processState === OrderProcessState.PROCESSING) {
+        } else if (processState === OrderProcessState.Processing) {
             return 'Processing Order...';
-        } else if (processState === OrderProcessState.SUCCESS) {
+        } else if (processState === OrderProcessState.Success) {
             return 'Tokens received!';
         }
 
@@ -101,7 +101,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     }
 
     private _renderPlaceholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
-        if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
+        if (this.props.quoteRequestState === AsyncProcessState.Pending) {
             return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />;
         }
         if (_.isUndefined(this.props.selectedAssetAmount)) {
diff --git a/packages/instant/src/containers/latest_buy_quote_order_details.ts b/packages/instant/src/containers/latest_buy_quote_order_details.ts
index 092aaaf20..2b59ed3ae 100644
--- a/packages/instant/src/containers/latest_buy_quote_order_details.ts
+++ b/packages/instant/src/containers/latest_buy_quote_order_details.ts
@@ -22,7 +22,7 @@ const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProp
     // use the worst case quote info
     buyQuoteInfo: oc(state).latestBuyQuote.worstCaseQuoteInfo(),
     ethUsdPrice: state.ethUsdPrice,
-    isLoading: state.quoteRequestState === AsyncProcessState.PENDING,
+    isLoading: state.quoteRequestState === AsyncProcessState.Pending,
 });
 
 export const LatestBuyQuoteOrderDetails: React.ComponentClass<LatestBuyQuoteOrderDetailsProps> = connect(
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 72d99f844..1f9bb2cc2 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -37,9 +37,9 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButt
     onViewTransaction: () => {
         if (
             state.assetBuyer &&
-            (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
-                state.buyOrderState.processState === OrderProcessState.SUCCESS ||
-                state.buyOrderState.processState === OrderProcessState.FAILURE)
+            (state.buyOrderState.processState === OrderProcessState.Processing ||
+                state.buyOrderState.processState === OrderProcessState.Success ||
+                state.buyOrderState.processState === OrderProcessState.Failure)
         ) {
             const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
                 state.buyOrderState.txHash,
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index f7d56c564..58257cd27 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -52,7 +52,7 @@ type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps;
 
 const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => {
     const processState = state.buyOrderState.processState;
-    const isEnabled = processState === OrderProcessState.NONE || processState === OrderProcessState.FAILURE;
+    const isEnabled = processState === OrderProcessState.None || processState === OrderProcessState.Failure;
     const isDisabled = !isEnabled;
     const selectedAsset =
         !_.isUndefined(state.selectedAsset) && state.selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index bc435d069..1e4d7549e 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -39,12 +39,12 @@ export const INITIAL_STATE: State = {
     selectedAssetAmount: undefined,
     availableAssets: undefined,
     assetMetaDataMap,
-    buyOrderState: { processState: OrderProcessState.NONE },
+    buyOrderState: { processState: OrderProcessState.None },
     ethUsdPrice: undefined,
     latestBuyQuote: undefined,
     latestErrorMessage: undefined,
     latestErrorDisplayStatus: DisplayStatus.Hidden,
-    quoteRequestState: AsyncProcessState.NONE,
+    quoteRequestState: AsyncProcessState.None,
     affiliateInfo: undefined,
 };
 
@@ -68,7 +68,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 return {
                     ...state,
                     latestBuyQuote: newBuyQuoteIfExists,
-                    quoteRequestState: AsyncProcessState.SUCCESS,
+                    quoteRequestState: AsyncProcessState.Success,
                 };
             } else {
                 return state;
@@ -78,23 +78,23 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
             return {
                 ...state,
                 latestBuyQuote: undefined,
-                quoteRequestState: AsyncProcessState.PENDING,
+                quoteRequestState: AsyncProcessState.Pending,
             };
         case ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE:
             return {
                 ...state,
                 latestBuyQuote: undefined,
-                quoteRequestState: AsyncProcessState.FAILURE,
+                quoteRequestState: AsyncProcessState.Failure,
             };
         case ActionTypes.SET_BUY_ORDER_STATE_NONE:
             return {
                 ...state,
-                buyOrderState: { processState: OrderProcessState.NONE },
+                buyOrderState: { processState: OrderProcessState.None },
             };
         case ActionTypes.SET_BUY_ORDER_STATE_VALIDATING:
             return {
                 ...state,
-                buyOrderState: { processState: OrderProcessState.VALIDATING },
+                buyOrderState: { processState: OrderProcessState.Validating },
             };
         case ActionTypes.SET_BUY_ORDER_STATE_PROCESSING:
             const processingData = action.data;
@@ -102,7 +102,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
             return {
                 ...state,
                 buyOrderState: {
-                    processState: OrderProcessState.PROCESSING,
+                    processState: OrderProcessState.Processing,
                     txHash: processingData.txHash,
                     progress: {
                         startTimeUnix,
@@ -118,7 +118,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                     return {
                         ...state,
                         buyOrderState: {
-                            processState: OrderProcessState.FAILURE,
+                            processState: OrderProcessState.Failure,
                             txHash,
                             progress,
                         },
@@ -134,7 +134,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                     return {
                         ...state,
                         buyOrderState: {
-                            processState: OrderProcessState.SUCCESS,
+                            processState: OrderProcessState.Success,
                             txHash,
                             progress,
                         },
@@ -168,8 +168,8 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
             return {
                 ...state,
                 latestBuyQuote: undefined,
-                quoteRequestState: AsyncProcessState.NONE,
-                buyOrderState: { processState: OrderProcessState.NONE },
+                quoteRequestState: AsyncProcessState.None,
+                buyOrderState: { processState: OrderProcessState.None },
                 selectedAssetAmount: undefined,
             };
         case ActionTypes.SET_AVAILABLE_ASSETS:
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 449bc0f31..04469f8b9 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -3,18 +3,18 @@ import { AssetProxyId, ObjectMap } from '@0x/types';
 // Reusable
 export type Maybe<T> = T | undefined;
 export enum AsyncProcessState {
-    NONE = 'None',
-    PENDING = 'Pending',
-    SUCCESS = 'Success',
-    FAILURE = 'Failure',
+    None = 'NONE',
+    Pending = 'PENDING',
+    Success = 'SUCCESS',
+    Failure = 'FAILURE',
 }
 
 export enum OrderProcessState {
-    NONE = 'None',
-    VALIDATING = 'Validating',
-    PROCESSING = 'Processing',
-    SUCCESS = 'Success',
-    FAILURE = 'Failure',
+    None = 'NONE',
+    Validating = 'VALIDATING',
+    Processing = 'PROCESSING',
+    Success = 'SUCCESS',
+    Failure = 'FAILURE',
 }
 
 export interface SimulatedProgress {
@@ -23,10 +23,10 @@ export interface SimulatedProgress {
 }
 
 interface OrderStatePreTx {
-    processState: OrderProcessState.NONE | OrderProcessState.VALIDATING;
+    processState: OrderProcessState.None | OrderProcessState.Validating;
 }
 interface OrderStatePostTx {
-    processState: OrderProcessState.PROCESSING | OrderProcessState.SUCCESS | OrderProcessState.FAILURE;
+    processState: OrderProcessState.Processing | OrderProcessState.Success | OrderProcessState.Failure;
     txHash: string;
     progress: SimulatedProgress;
 }
-- 
cgit v1.2.3


From 10da1e24e13b728c2837e5360a48fcb2913855a5 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 6 Nov 2018 15:59:16 -0800
Subject: feat: make instant resistant to external styles

---
 packages/instant/public/external.css               |  4 ++
 packages/instant/src/components/buy_button.tsx     | 12 ++--
 .../src/components/buy_order_state_buttons.tsx     |  6 +-
 packages/instant/src/components/css_reset.tsx      | 34 ++++++++++
 .../src/components/placing_order_button.tsx        |  6 +-
 .../instant/src/components/secondary_button.tsx    |  6 +-
 packages/instant/src/components/ui/button.tsx      | 62 +++++++++++-------
 packages/instant/src/components/ui/circle.tsx      | 10 +--
 packages/instant/src/components/ui/container.tsx   | 73 +++++++++++-----------
 packages/instant/src/components/ui/flex.tsx        | 19 +++---
 packages/instant/src/components/ui/icon.tsx        | 20 +++---
 packages/instant/src/components/ui/input.tsx       | 23 ++++---
 packages/instant/src/components/ui/overlay.tsx     | 16 ++---
 packages/instant/src/components/ui/text.tsx        | 52 +++++++--------
 .../src/components/zero_ex_instant_container.tsx   | 57 +++++++++--------
 packages/instant/src/style/theme.ts                |  4 +-
 16 files changed, 233 insertions(+), 171 deletions(-)
 create mode 100644 packages/instant/src/components/css_reset.tsx

(limited to 'packages')

diff --git a/packages/instant/public/external.css b/packages/instant/public/external.css
index b0d05f618..c8b3df0d5 100644
--- a/packages/instant/public/external.css
+++ b/packages/instant/public/external.css
@@ -15,6 +15,10 @@ input {
     height: 100px;
 }
 
+div {
+    padding: 3px;
+}
+
 p {
     background-color: green;
     margin: 10px;
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index e6d50de96..803cdf18d 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -36,10 +36,14 @@ export class BuyButton extends React.Component<BuyButtonProps> {
     public render(): React.ReactNode {
         const shouldDisableButton = _.isUndefined(this.props.buyQuote) || _.isUndefined(this.props.assetBuyer);
         return (
-            <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
-                <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
-                    Buy
-                </Text>
+            <Button
+                width="100%"
+                onClick={this._handleClick}
+                isDisabled={shouldDisableButton}
+                fontColor={ColorOption.white}
+                fontSize="20px"
+            >
+                Buy
             </Button>
         );
     }
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 0d54d3187..dcac3b62f 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -31,10 +31,8 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
     if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
         return (
             <Flex justify="space-between">
-                <Button width="48%" onClick={props.onRetry}>
-                    <Text fontColor={ColorOption.white} fontWeight={600} fontSize="16px">
-                        Back
-                    </Text>
+                <Button width="48%" onClick={props.onRetry} fontColor={ColorOption.white} fontSize="16px">
+                    Back
                 </Button>
                 <SecondaryButton width="48%" onClick={props.onViewTransaction}>
                     Details
diff --git a/packages/instant/src/components/css_reset.tsx b/packages/instant/src/components/css_reset.tsx
new file mode 100644
index 000000000..1e47a244a
--- /dev/null
+++ b/packages/instant/src/components/css_reset.tsx
@@ -0,0 +1,34 @@
+import { styled } from '../style/theme';
+
+export interface CSSResetProps {}
+
+export const CSSReset =
+    styled.div <
+    CSSResetProps >
+    `
+    /* 
+    * Derived from
+    * https://github.com/jtrost/Complete-CSS-Reset
+    */
+
+    a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button, 
+    canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, 
+    details, dialog, dfn, div, dl, dt, em, embed, fieldset, figure, form,
+    h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, 
+    input, ins, keygen, kbd, label, legend, li, map, mark, menu, meter, nav,
+    noscript, object, ol, optgroup, option, output, p, param, pre, progress,
+    q, rp, rt, ruby, samp, section, select, small, span, strong, sub, sup, 
+    table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video {
+        background: transparent;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        margin: 0;
+        outline: none;
+        padding: 0;
+        text-align: left;
+        text-decoration: none;
+        vertical-align: baseline;
+        z-index: 1;
+    }
+`;
diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx
index 4232e6c22..1aa73c428 100644
--- a/packages/instant/src/components/placing_order_button.tsx
+++ b/packages/instant/src/components/placing_order_button.tsx
@@ -8,12 +8,10 @@ import { Spinner } from './ui/spinner';
 import { Text } from './ui/text';
 
 export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
-    <Button isDisabled={true} width="100%">
+    <Button isDisabled={true} width="100%" fontColor={ColorOption.white} fontSize="20px">
         <Container display="inline-block" position="relative" top="3px" marginRight="8px">
             <Spinner widthPx={20} heightPx={20} />
         </Container>
-        <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
-            Placing Order&hellip;
-        </Text>
+        Placing Order&hellip;
     </Button>
 );
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index 583058b5b..a6ba0cf9e 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -16,11 +16,11 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p
             borderColor={ColorOption.lightGrey}
             width={props.width}
             onClick={props.onClick}
+            fontColor={ColorOption.primaryColor}
+            fontSize="16px"
             {...buttonProps}
         >
-            <Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px">
-                {props.children}
-            </Text>
+            {props.children}
         </Button>
     );
 };
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index 5274d835b..fe0b7e6c7 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,29 +26,40 @@ 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: 15px;
+        font-family: 'Inter UI', sans-serif;
+        font-weight: 600;
+        font-size: ${props => props.fontSize};
+        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'])};
+        }
     }
 `;
 
@@ -55,7 +68,8 @@ Button.defaultProps = {
     borderColor: ColorOption.primaryColor,
     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/circle.tsx b/packages/instant/src/components/ui/circle.tsx
index eec2777d2..26764ec71 100644
--- a/packages/instant/src/components/ui/circle.tsx
+++ b/packages/instant/src/components/ui/circle.tsx
@@ -9,10 +9,12 @@ export const Circle =
     styled.div <
     CircleProps >
     `
-    width: ${props => props.diameter}px;
-    height: ${props => props.diameter}px;
-    background-color: ${props => props.fillColor};
-    border-radius: 50%;
+    && {
+        width: ${props => props.diameter}px;
+        height: ${props => props.diameter}px;
+        background-color: ${props => props.fillColor};
+        border-radius: 50%;
+    }
 `;
 
 Circle.displayName = 'Circle';
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index a0a187e5f..db3f32f92 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -39,41 +39,44 @@ export const Container =
     styled.div <
     ContainerProps >
     `
-    box-sizing: border-box;
-    ${props => cssRuleIfExists(props, 'display')}
-    ${props => cssRuleIfExists(props, 'position')}
-    ${props => cssRuleIfExists(props, 'top')}
-    ${props => cssRuleIfExists(props, 'right')}
-    ${props => cssRuleIfExists(props, 'bottom')}
-    ${props => cssRuleIfExists(props, 'left')}
-    ${props => cssRuleIfExists(props, 'width')}
-    ${props => cssRuleIfExists(props, 'height')}
-    ${props => cssRuleIfExists(props, 'max-width')}
-    ${props => cssRuleIfExists(props, 'margin')}
-    ${props => cssRuleIfExists(props, 'margin-top')}
-    ${props => cssRuleIfExists(props, 'margin-right')}
-    ${props => cssRuleIfExists(props, 'margin-bottom')}
-    ${props => cssRuleIfExists(props, 'margin-left')}
-    ${props => cssRuleIfExists(props, 'padding')}
-    ${props => cssRuleIfExists(props, 'border-radius')}
-    ${props => cssRuleIfExists(props, 'border')}
-    ${props => cssRuleIfExists(props, 'border-top')}
-    ${props => cssRuleIfExists(props, 'border-bottom')}
-    ${props => cssRuleIfExists(props, 'z-index')}
-    ${props => cssRuleIfExists(props, 'white-space')}
-    ${props => cssRuleIfExists(props, 'opacity')}
-    ${props => cssRuleIfExists(props, 'cursor')}
-    ${props => cssRuleIfExists(props, 'overflow')}
-    ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
-    background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
-    border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
-    &:hover {
-        ${props =>
-            props.darkenOnHover
-                ? `background-color: ${
-                      props.backgroundColor ? darken(0.05, props.theme[props.backgroundColor]) : 'none'
-                  }`
-                : ''};
+    && {
+        all: initial;
+        box-sizing: border-box;
+        ${props => cssRuleIfExists(props, 'display')}
+        ${props => cssRuleIfExists(props, 'position')}
+        ${props => cssRuleIfExists(props, 'top')}
+        ${props => cssRuleIfExists(props, 'right')}
+        ${props => cssRuleIfExists(props, 'bottom')}
+        ${props => cssRuleIfExists(props, 'left')}
+        ${props => cssRuleIfExists(props, 'width')}
+        ${props => cssRuleIfExists(props, 'height')}
+        ${props => cssRuleIfExists(props, 'max-width')}
+        ${props => cssRuleIfExists(props, 'margin')}
+        ${props => cssRuleIfExists(props, 'margin-top')}
+        ${props => cssRuleIfExists(props, 'margin-right')}
+        ${props => cssRuleIfExists(props, 'margin-bottom')}
+        ${props => cssRuleIfExists(props, 'margin-left')}
+        ${props => cssRuleIfExists(props, 'padding')}
+        ${props => cssRuleIfExists(props, 'border-radius')}
+        ${props => cssRuleIfExists(props, 'border')}
+        ${props => cssRuleIfExists(props, 'border-top')}
+        ${props => cssRuleIfExists(props, 'border-bottom')}
+        ${props => cssRuleIfExists(props, 'z-index')}
+        ${props => cssRuleIfExists(props, 'white-space')}
+        ${props => cssRuleIfExists(props, 'opacity')}
+        ${props => cssRuleIfExists(props, 'cursor')}
+        ${props => cssRuleIfExists(props, 'overflow')}
+        ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
+        background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+        border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
+        &:hover {
+            ${props =>
+                props.darkenOnHover
+                    ? `background-color: ${
+                          props.backgroundColor ? darken(0.05, props.theme[props.backgroundColor]) : 'none'
+                      }`
+                    : ''};
+        }
     }
 `;
 
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 29c6511bb..1ec8d1f92 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -16,14 +16,17 @@ export const Flex =
     styled.div <
     FlexProps >
     `
-    display: ${props => (props.inline ? 'inline-flex' : 'flex')};
-    flex-direction: ${props => props.direction};
-    flex-wrap: ${props => props.flexWrap};
-    justify-content: ${props => props.justify};
-    align-items: ${props => props.align};
-    ${props => cssRuleIfExists(props, 'width')}
-    ${props => cssRuleIfExists(props, 'height')}
-    background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+    && {
+        all: initial;
+        display: ${props => (props.inline ? 'inline-flex' : 'flex')};
+        flex-direction: ${props => props.direction};
+        flex-wrap: ${props => props.flexWrap};
+        justify-content: ${props => props.justify};
+        align-items: ${props => props.align};
+        ${props => cssRuleIfExists(props, 'width')}
+        ${props => cssRuleIfExists(props, 'height')}
+        background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+    }
 `;
 
 Flex.defaultProps = {
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 94ea26900..2679dad1a 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -101,15 +101,17 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => {
 };
 
 export const Icon = withTheme(styled(PlainIcon)`
-    cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')};
-    transition: opacity 0.5s ease;
-    padding: ${props => props.padding};
-    opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)};
-    &:hover {
-        opacity: 1;
-    }
-    &:active {
-        opacity: 1;
+    && {
+        cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')};
+        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/input.tsx b/packages/instant/src/components/ui/input.tsx
index a884ff7cb..2fb408db4 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -16,17 +16,20 @@ export const Input =
     styled.input <
     InputProps >
     `
-    font-size: ${props => props.fontSize};
-    width: ${props => props.width};
-    padding: 0.1em 0em;
-    font-family: 'Inter UI';
-    color: ${props => props.theme[props.fontColor || 'white']};
-    background: transparent;
-    outline: none;
-    border: none;
-    &::placeholder {
+    && {
+        all: initial;
+        font-size: ${props => props.fontSize};
+        width: ${props => props.width};
+        padding: 0.1em 0em;
+        font-family: 'Inter UI';
         color: ${props => props.theme[props.fontColor || 'white']};
-        opacity: 0.5;
+        background: transparent;
+        outline: none;
+        border: none;
+        &::placeholder {
+            color: ${props => props.theme[props.fontColor || 'white']};
+            opacity: 0.5;
+        }
     }
 `;
 
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index f1706c874..deb16a0e8 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -22,13 +22,15 @@ const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, classN
     </Flex>
 );
 export const Overlay = styled(PlainOverlay)`
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: ${props => props.zIndex}
-    background-color: ${overlayBlack};
+    && {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: ${props => props.zIndex}
+        background-color: ${overlayBlack};
+    }
 `;
 
 Overlay.defaultProps = {
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index cba6e7b20..c6a76ff18 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -27,25 +27,28 @@ export const Text =
     styled.div <
     TextProps >
     `
-    font-family: ${props => props.fontFamily};
-    font-style: ${props => props.fontStyle};
-    font-weight: ${props => props.fontWeight};
-    font-size: ${props => props.fontSize};
-    opacity: ${props => props.opacity};
-    text-decoration-line: ${props => props.textDecorationLine};
-    ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
-    ${props => (props.center ? 'text-align: center' : '')};
-    color: ${props => props.fontColor && props.theme[props.fontColor]};
-    ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
-    ${props => (props.onClick ? 'cursor: pointer' : '')};
-    transition: color 0.5s ease;
-    ${props => (props.noWrap ? 'white-space: nowrap' : '')};
-    ${props => (props.display ? `display: ${props.display}` : '')};
-    ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')};
-    ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')};
-    &:hover {
-        ${props =>
-            props.onClick ? `color: ${darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` : ''};
+    && {
+        all: initial;
+        font-family: 'Inter UI', sans-serif;
+        font-style: ${props => props.fontStyle};
+        font-weight: ${props => props.fontWeight};
+        font-size: ${props => props.fontSize};
+        opacity: ${props => props.opacity};
+        text-decoration-line: ${props => props.textDecorationLine};
+        ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
+        ${props => (props.center ? 'text-align: center' : '')};
+        color: ${props => props.fontColor && props.theme[props.fontColor]};
+        ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
+        ${props => (props.onClick ? 'cursor: pointer' : '')};
+        transition: color 0.5s ease;
+        ${props => (props.noWrap ? 'white-space: nowrap' : '')};
+        ${props => (props.display ? `display: ${props.display}` : '')};
+        ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')};
+        ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')};
+        &:hover {
+            ${props =>
+                props.onClick ? `color: ${darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` : ''};
+        }
     }
 `;
 
@@ -61,14 +64,3 @@ Text.defaultProps = {
 };
 
 Text.displayName = 'Text';
-
-export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
-
-Title.defaultProps = {
-    fontSize: '20px',
-    fontWeight: 600,
-    opacity: 1,
-    fontColor: ColorOption.primaryColor,
-};
-
-Title.displayName = 'Title';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 851dfa2db..efcb263ba 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -12,6 +12,7 @@ import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
 
 import { SlideAnimationState } from './animations/slide_animation';
+import { CSSReset } from './css_reset';
 import { SlidingPanel } from './sliding_panel';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
@@ -27,35 +28,37 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
     };
     public render(): React.ReactNode {
         return (
-            <Container width="350px" position="relative">
-                <Container zIndex={zIndex.errorPopup} position="relative">
-                    <LatestError />
-                </Container>
-                <Container
-                    zIndex={zIndex.mainContainer}
-                    position="relative"
-                    backgroundColor={ColorOption.white}
-                    borderRadius="3px"
-                    hasBoxShadow={true}
-                    overflow="hidden"
-                >
-                    <Flex direction="column" justify="flex-start">
-                        <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
-                        <SelectedAssetBuyOrderProgress />
-                        <LatestBuyQuoteOrderDetails />
-                        <Container padding="20px" width="100%">
-                            <SelectedAssetBuyOrderStateButtons />
-                        </Container>
-                    </Flex>
-                    <SlidingPanel
-                        title="Select Token"
-                        animationState={this.state.tokenSelectionPanelAnimationState}
-                        onClose={this._handlePanelClose}
+            <CSSReset>
+                <Container width="350px" position="relative">
+                    <Container zIndex={zIndex.errorPopup} position="relative">
+                        <LatestError />
+                    </Container>
+                    <Container
+                        zIndex={zIndex.mainContainer}
+                        position="relative"
+                        backgroundColor={ColorOption.white}
+                        borderRadius="3px"
+                        hasBoxShadow={true}
+                        overflow="hidden"
                     >
-                        <AvailableERC20TokenSelector onTokenSelect={this._handlePanelClose} />
-                    </SlidingPanel>
+                        <Flex direction="column" justify="flex-start">
+                            <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
+                            <SelectedAssetBuyOrderProgress />
+                            <LatestBuyQuoteOrderDetails />
+                            <Container padding="20px" width="100%">
+                                <SelectedAssetBuyOrderStateButtons />
+                            </Container>
+                        </Flex>
+                        <SlidingPanel
+                            title="Select Token"
+                            animationState={this.state.tokenSelectionPanelAnimationState}
+                            onClose={this._handlePanelClose}
+                        >
+                            <AvailableERC20TokenSelector onTokenSelect={this._handlePanelClose} />
+                        </SlidingPanel>
+                    </Container>
                 </Container>
-            </Container>
+            </CSSReset>
         );
     }
     private readonly _handleSymbolClick = (): void => {
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index d10c9b72c..8dada2d28 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,6 +1,6 @@
 import * as styledComponents from 'styled-components';
 
-const { default: styled, css, keyframes, withTheme, ThemeProvider } = styledComponents;
+const { default: styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider } = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
@@ -33,4 +33,4 @@ export const theme: Theme = {
 export const transparentWhite = 'rgba(255,255,255,0.3)';
 export const overlayBlack = 'rgba(0, 0, 0, 0.6)';
 
-export { styled, css, keyframes, withTheme, ThemeProvider };
+export { styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider };
-- 
cgit v1.2.3


From 4cf6fbc6a3638d21a3e5631cdd7260e12e02e221 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 6 Nov 2018 16:05:12 -0800
Subject: fix: use fontSize prop in button

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

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index fe0b7e6c7..b90221bf4 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -29,10 +29,9 @@ export const Button = styled(PlainButton)`
     && {
         all: initial;
         box-sizing: border-box;
-        font-size: 15px;
+        font-size: ${props => props.fontSize};
         font-family: 'Inter UI', sans-serif;
         font-weight: 600;
-        font-size: ${props => props.fontSize};
         color: ${props => props.fontColor && props.theme[props.fontColor]};
         cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
         transition: background-color, opacity 0.5s ease;
-- 
cgit v1.2.3


From cab71fd4d177dc89431a36e33a43e9cd7f0e7071 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 6 Nov 2018 16:16:01 -0800
Subject: fix: progress bar

---
 packages/instant/public/external.css                   |  2 +-
 packages/instant/src/components/timed_progress_bar.tsx | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/public/external.css b/packages/instant/public/external.css
index c8b3df0d5..cab11112a 100644
--- a/packages/instant/public/external.css
+++ b/packages/instant/public/external.css
@@ -1,6 +1,6 @@
 /*
   CSS file meant to represent an external (integrators) stylesheet and 
-  help ensure that instant looks consistent accross environments. 
+  help ensure that instant looks consistent across environments. 
 */
 
 button {
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index f2a6f5745..aee97eea5 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -70,9 +70,11 @@ export const TimedProgress =
     styled.div <
     TimedProgressProps >
     `
-    background-color: ${props => props.theme[ColorOption.primaryColor]};
-    border-radius: 6px;
-    height: 6px;
-    animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)}
-      ${props => props.timeMs}ms linear 1 forwards;
-  `;
+    && {
+        background-color: ${props => props.theme[ColorOption.primaryColor]};
+        border-radius: 6px;
+        height: 6px;
+        animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)}
+          ${props => props.timeMs}ms linear 1 forwards;
+      `;
+    }
-- 
cgit v1.2.3


From d1186e08b458191f578e406997c2b51567a5b49f Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 6 Nov 2018 16:31:52 -0800
Subject: chore: linter

---
 packages/instant/src/components/buy_button.tsx              |  1 -
 packages/instant/src/components/buy_order_state_buttons.tsx |  1 -
 packages/instant/src/components/css_reset.tsx               | 10 +++++-----
 packages/instant/src/components/placing_order_button.tsx    |  1 -
 packages/instant/src/components/secondary_button.tsx        |  1 -
 packages/instant/src/components/timed_progress_bar.tsx      |  2 +-
 6 files changed, 6 insertions(+), 10 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 803cdf18d..57b3d108e 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -13,7 +13,6 @@ import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { util } from '../util/util';
 
 import { Button } from './ui/button';
-import { Text } from './ui/text';
 
 export interface BuyButtonProps {
     buyQuote?: BuyQuote;
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index dcac3b62f..45ff890b4 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -10,7 +10,6 @@ import { SecondaryButton } from './secondary_button';
 
 import { Button } from './ui/button';
 import { Flex } from './ui/flex';
-import { Text } from './ui/text';
 
 export interface BuyOrderStateButtonProps {
     buyQuote?: BuyQuote;
diff --git a/packages/instant/src/components/css_reset.tsx b/packages/instant/src/components/css_reset.tsx
index 1e47a244a..891c95e4d 100644
--- a/packages/instant/src/components/css_reset.tsx
+++ b/packages/instant/src/components/css_reset.tsx
@@ -6,18 +6,18 @@ export const CSSReset =
     styled.div <
     CSSResetProps >
     `
-    /* 
+    /*
     * Derived from
     * https://github.com/jtrost/Complete-CSS-Reset
     */
 
-    a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button, 
-    canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, 
+    a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button,
+    canvas, caption, cite, code, col, colgroup, command, datalist, dd, del,
     details, dialog, dfn, div, dl, dt, em, embed, fieldset, figure, form,
-    h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, 
+    h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img,
     input, ins, keygen, kbd, label, legend, li, map, mark, menu, meter, nav,
     noscript, object, ol, optgroup, option, output, p, param, pre, progress,
-    q, rp, rt, ruby, samp, section, select, small, span, strong, sub, sup, 
+    q, rp, rt, ruby, samp, section, select, small, span, strong, sub, sup,
     table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video {
         background: transparent;
         border: 0;
diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx
index 1aa73c428..d774d7d27 100644
--- a/packages/instant/src/components/placing_order_button.tsx
+++ b/packages/instant/src/components/placing_order_button.tsx
@@ -5,7 +5,6 @@ import { ColorOption } from '../style/theme';
 import { Button } from './ui/button';
 import { Container } from './ui/container';
 import { Spinner } from './ui/spinner';
-import { Text } from './ui/text';
 
 export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
     <Button isDisabled={true} width="100%" fontColor={ColorOption.white} fontSize="20px">
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index a6ba0cf9e..df0539606 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { ColorOption } from '../style/theme';
 
 import { Button, ButtonProps } from './ui/button';
-import { Text } from './ui/text';
 
 export interface SecondaryButtonProps extends ButtonProps {}
 
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index aee97eea5..59aaa33a1 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -76,5 +76,5 @@ export const TimedProgress =
         height: 6px;
         animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)}
           ${props => props.timeMs}ms linear 1 forwards;
-      `;
     }
+`;
-- 
cgit v1.2.3


From dfbf10c94bfbbdbca353531c5cae6707e05981f0 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 6 Nov 2018 20:25:30 -0800
Subject: feat(instant): fallback to an empty wallet provider when none is
 injected

---
 packages/instant/package.json                      |   1 +
 packages/instant/src/components/buy_button.tsx     |   8 +-
 .../src/components/buy_order_state_buttons.tsx     |   2 +-
 .../src/components/zero_ex_instant_provider.tsx    |  86 +++---
 packages/instant/src/constants.ts                  |   8 +
 .../selected_asset_buy_order_state_buttons.ts      |  46 ++--
 .../selected_erc20_asset_amount_input.ts           |   9 +-
 packages/instant/src/redux/async_data.ts           |  23 +-
 packages/instant/src/redux/reducer.ts              | 291 +++++++++++----------
 packages/instant/src/redux/store.ts                |   7 +-
 packages/instant/src/types.ts                      |  26 +-
 packages/instant/src/util/asset_buyer_factory.ts   |  17 ++
 packages/instant/src/util/injected_provider.ts     |  16 --
 packages/instant/src/util/provider_factory.ts      |  34 +++
 14 files changed, 331 insertions(+), 243 deletions(-)
 create mode 100644 packages/instant/src/util/asset_buyer_factory.ts
 delete mode 100644 packages/instant/src/util/injected_provider.ts
 create mode 100644 packages/instant/src/util/provider_factory.ts

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index f90990649..0f6f125fa 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -49,6 +49,7 @@
         "@0x/asset-buyer": "^2.1.0",
         "@0x/json-schemas": "^2.0.0",
         "@0x/order-utils": "^2.0.0",
+        "@0x/subproviders": "^2.1.0",
         "@0x/types": "^1.2.0",
         "@0x/typescript-typings": "^3.0.3",
         "@0x/utils": "^2.0.3",
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index e6d50de96..515cd18e9 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -17,7 +17,7 @@ import { Text } from './ui/text';
 
 export interface BuyButtonProps {
     buyQuote?: BuyQuote;
-    assetBuyer?: AssetBuyer;
+    assetBuyer: AssetBuyer;
     affiliateInfo?: AffiliateInfo;
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
@@ -34,7 +34,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         onBuyFailure: util.boundNoop,
     };
     public render(): React.ReactNode {
-        const shouldDisableButton = _.isUndefined(this.props.buyQuote) || _.isUndefined(this.props.assetBuyer);
+        const shouldDisableButton = _.isUndefined(this.props.buyQuote);
         return (
             <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
                 <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
@@ -46,11 +46,13 @@ export class BuyButton extends React.Component<BuyButtonProps> {
     private readonly _handleClick = async () => {
         // The button is disabled when there is no buy quote anyway.
         const { buyQuote, assetBuyer, affiliateInfo } = this.props;
-        if (_.isUndefined(buyQuote) || _.isUndefined(assetBuyer)) {
+        if (_.isUndefined(buyQuote)) {
             return;
         }
 
         this.props.onValidationPending(buyQuote);
+
+        // TODO(bmillman): move address and balance fetching to the async state
         const web3Wrapper = new Web3Wrapper(assetBuyer.provider);
         const takerAddress = await getBestAddress(web3Wrapper);
 
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 2759ba341..3d0ede7b1 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -15,7 +15,7 @@ import { Text } from './ui/text';
 export interface BuyOrderStateButtonProps {
     buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
-    assetBuyer?: AssetBuyer;
+    assetBuyer: AssetBuyer;
     affiliateInfo?: AffiliateInfo;
     onViewTransaction: () => void;
     onValidationPending: (buyQuote: BuyQuote) => void;
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 0b9408329..ed0fabdf3 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -1,23 +1,22 @@
-import { AssetBuyer } from '@0x/asset-buyer';
-import { ObjectMap, SignedOrder } from '@0x/types';
+import { ObjectMap } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import { Provider } from 'ethereum-types';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
-import { oc } from 'ts-optchain';
 
 import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
 import { asyncData } from '../redux/async_data';
-import { INITIAL_STATE, State } from '../redux/reducer';
+import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer';
 import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
-import { AffiliateInfo, AssetMetaData, Network } from '../types';
+import { AffiliateInfo, AssetMetaData, Network, OrderSource, ProviderState, ProviderType } from '../types';
 import { assetUtils } from '../util/asset';
+import { assetBuyerFactory } from '../util/asset_buyer_factory';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
-import { getInjectedProvider } from '../util/injected_provider';
+import { providerFactory } from '../util/provider_factory';
 
 fonts.include();
 
@@ -25,7 +24,7 @@ export type ZeroExInstantProviderProps = ZeroExInstantProviderRequiredProps &
     Partial<ZeroExInstantProviderOptionalProps>;
 
 export interface ZeroExInstantProviderRequiredProps {
-    orderSource: string | SignedOrder[];
+    orderSource: OrderSource;
 }
 
 export interface ZeroExInstantProviderOptionalProps {
@@ -41,30 +40,43 @@ export interface ZeroExInstantProviderOptionalProps {
 export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
     private readonly _store: Store;
     // TODO(fragosti): Write tests for this beast once we inject a provider.
-    private static _mergeInitialStateWithProps(props: ZeroExInstantProviderProps, state: State = INITIAL_STATE): State {
-        const networkId = props.networkId || state.network;
-        // TODO: Proper wallet connect flow
-        const provider = props.provider || getInjectedProvider();
-        const assetBuyerOptions = {
-            networkId,
-        };
-        let assetBuyer;
-        if (_.isString(props.orderSource)) {
-            assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(
-                provider,
-                props.orderSource,
-                assetBuyerOptions,
-            );
+    private static _mergeDefaultStateWithProps(
+        props: ZeroExInstantProviderProps,
+        defaultState: DefaultState = DEFAULT_STATE,
+    ): State {
+        // use the networkId passed in with the props, otherwise default to that of the default state (1, mainnet)
+        const networkId = props.networkId || defaultState.network;
+        // construct the ProviderState
+        let provider: Provider;
+        let providerType: ProviderType;
+        if (!_.isUndefined(props.provider)) {
+            provider = props.provider;
+            providerType = ProviderType.Props;
         } else {
-            assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.orderSource, assetBuyerOptions);
+            const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists();
+            if (!_.isUndefined(injectedProviderIfExists)) {
+                provider = injectedProviderIfExists;
+                providerType = ProviderType.Injected;
+            } else {
+                provider = providerFactory.getFallbackNoSigningProvider(networkId);
+                providerType = ProviderType.FallbackEmptyWallet;
+            }
         }
+        const providerState: ProviderState = {
+            provider,
+            type: providerType,
+            web3Wrapper: new Web3Wrapper(provider),
+            assetBuyer: assetBuyerFactory.getAssetBuyer(provider, props.orderSource, networkId),
+        };
+        // merge the additional additionalAssetMetaDataMap with our default map
         const completeAssetMetaDataMap = {
             ...props.additionalAssetMetaDataMap,
-            ...state.assetMetaDataMap,
+            ...defaultState.assetMetaDataMap,
         };
+        // construct the final state
         const storeStateFromProps: State = {
-            ...state,
-            assetBuyer,
+            ...defaultState,
+            providerState,
             network: networkId,
             selectedAsset: _.isUndefined(props.defaultSelectedAssetData)
                 ? undefined
@@ -74,7 +86,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
                       networkId,
                   ),
             selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
-                ? state.selectedAssetAmount
+                ? undefined
                 : new BigNumber(props.defaultAssetBuyAmount),
             availableAssets: _.isUndefined(props.availableAssetDatas)
                 ? undefined
@@ -86,10 +98,9 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
     }
     constructor(props: ZeroExInstantProviderProps) {
         super(props);
-        const initialAppState = ZeroExInstantProvider._mergeInitialStateWithProps(this.props, INITIAL_STATE);
+        const initialAppState = ZeroExInstantProvider._mergeDefaultStateWithProps(this.props);
         this._store = store.create(initialAppState);
     }
-
     public componentDidMount(): void {
         const state = this._store.getState();
         // tslint:disable-next-line:no-floating-promises
@@ -108,7 +119,6 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
         // tslint:disable-next-line:no-floating-promises
         this._flashErrorIfWrongNetwork();
     }
-
     public render(): React.ReactNode {
         return (
             <ReduxProvider store={this._store}>
@@ -116,19 +126,15 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             </ReduxProvider>
         );
     }
-
     private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => {
         const msToShowError = 30000; // 30 seconds
-        const network = this._store.getState().network;
-        const assetBuyerIfExists = this._store.getState().assetBuyer;
-        const providerIfExists = oc(assetBuyerIfExists).provider();
-        if (!_.isUndefined(providerIfExists)) {
-            const web3Wrapper = new Web3Wrapper(providerIfExists);
-            const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
-            if (network !== networkOfProvider) {
-                const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
-                errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
-            }
+        const state = this._store.getState();
+        const network = state.network;
+        const web3Wrapper = state.providerState.web3Wrapper;
+        const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
+        if (network !== networkOfProvider) {
+            const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
+            errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
         }
     };
 }
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 15105b65c..00521b56e 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -1,4 +1,7 @@
 import { BigNumber } from '@0x/utils';
+
+import { Network } from './types';
+
 export const BIG_NUMBER_ZERO = new BigNumber(0);
 export const ETH_DECIMALS = 18;
 export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
@@ -13,3 +16,8 @@ export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
 export const PROGRESS_STALL_AT_WIDTH = '95%';
 export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200;
+export const ETHEREUM_NODE_URL_BY_NETWORK = {
+    [Network.Mainnet]: 'https://mainnet.infura.io/',
+    [Network.Kovan]: 'https://kovan.infura.io/',
+};
+export const BLOCK_POLLING_INTERVAL_MS = 10000; // 10s
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 1f9bb2cc2..c3a5e88b9 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -14,7 +14,7 @@ import { etherscanUtil } from '../util/etherscan';
 interface ConnectedState {
     buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
-    assetBuyer?: AssetBuyer;
+    assetBuyer: AssetBuyer;
     affiliateInfo?: AffiliateInfo;
     onViewTransaction: () => void;
 }
@@ -29,29 +29,31 @@ interface ConnectedDispatch {
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
 }
 export interface SelectedAssetBuyOrderStateButtons {}
-const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => ({
-    buyOrderProcessingState: state.buyOrderState.processState,
-    assetBuyer: state.assetBuyer,
-    buyQuote: state.latestBuyQuote,
-    affiliateInfo: state.affiliateInfo,
-    onViewTransaction: () => {
-        if (
-            state.assetBuyer &&
-            (state.buyOrderState.processState === OrderProcessState.Processing ||
+const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => {
+    const assetBuyer = state.providerState.assetBuyer;
+    return {
+        buyOrderProcessingState: state.buyOrderState.processState,
+        assetBuyer,
+        buyQuote: state.latestBuyQuote,
+        affiliateInfo: state.affiliateInfo,
+        onViewTransaction: () => {
+            if (
+                state.buyOrderState.processState === OrderProcessState.Processing ||
                 state.buyOrderState.processState === OrderProcessState.Success ||
-                state.buyOrderState.processState === OrderProcessState.Failure)
-        ) {
-            const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
-                state.buyOrderState.txHash,
-                state.assetBuyer.networkId,
-            );
-            if (etherscanUrl) {
-                window.open(etherscanUrl, '_blank');
-                return;
+                state.buyOrderState.processState === OrderProcessState.Failure
+            ) {
+                const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
+                    state.buyOrderState.txHash,
+                    assetBuyer.networkId,
+                );
+                if (etherscanUrl) {
+                    window.open(etherscanUrl, '_blank');
+                    return;
+                }
             }
-        }
-    },
-});
+        },
+    };
+};
 
 const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 58257cd27..784eb4bd0 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -23,7 +23,7 @@ export interface SelectedERC20AssetAmountInputProps {
 }
 
 interface ConnectedState {
-    assetBuyer?: AssetBuyer;
+    assetBuyer: AssetBuyer;
     value?: BigNumber;
     asset?: ERC20Asset;
     isDisabled: boolean;
@@ -33,7 +33,7 @@ interface ConnectedState {
 
 interface ConnectedDispatch {
     updateBuyQuote: (
-        assetBuyer?: AssetBuyer,
+        assetBuyer: AssetBuyer,
         value?: BigNumber,
         asset?: ERC20Asset,
         affiliateInfo?: AffiliateInfo,
@@ -59,8 +59,9 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
             ? (state.selectedAsset as ERC20Asset)
             : undefined;
     const numberOfAssetsAvailable = _.isUndefined(state.availableAssets) ? undefined : state.availableAssets.length;
+    const assetBuyer = state.providerState.assetBuyer;
     return {
-        assetBuyer: state.assetBuyer,
+        assetBuyer,
         value: state.selectedAssetAmount,
         asset: selectedAsset,
         isDisabled,
@@ -128,7 +129,7 @@ const mapDispatchToProps = (
         // reset our buy state
         dispatch(actions.setBuyOrderStateNone());
 
-        if (!_.isUndefined(value) && value.greaterThan(0) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
+        if (!_.isUndefined(value) && value.greaterThan(0) && !_.isUndefined(asset)) {
             // even if it's debounced, give them the illusion it's loading
             dispatch(actions.setQuoteRequestStatePending());
             // tslint:disable-next-line:no-floating-promises
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index 0e05c13da..c3d190af2 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -20,18 +20,17 @@ export const asyncData = {
         }
     },
     fetchAvailableAssetDatasAndDispatchToStore: async (store: Store) => {
-        const { assetBuyer, assetMetaDataMap, network } = store.getState();
-        if (!_.isUndefined(assetBuyer)) {
-            try {
-                const assetDatas = await assetBuyer.getAvailableAssetDatasAsync();
-                const assets = assetUtils.createAssetsFromAssetDatas(assetDatas, assetMetaDataMap, network);
-                store.dispatch(actions.setAvailableAssets(assets));
-            } catch (e) {
-                const errorMessage = 'Could not find any assets';
-                errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage);
-                // On error, just specify that none are available
-                store.dispatch(actions.setAvailableAssets([]));
-            }
+        const { providerState, assetMetaDataMap, network } = store.getState();
+        const assetBuyer = providerState.assetBuyer;
+        try {
+            const assetDatas = await assetBuyer.getAvailableAssetDatasAsync();
+            const assets = assetUtils.createAssetsFromAssetDatas(assetDatas, assetMetaDataMap, network);
+            store.dispatch(actions.setAvailableAssets(assets));
+        } catch (e) {
+            const errorMessage = 'Could not find any assets';
+            errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage);
+            // On error, just specify that none are available
+            store.dispatch(actions.setAvailableAssets([]));
         }
     },
 };
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 1e4d7549e..4a939839a 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -1,4 +1,4 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import { BuyQuote } from '@0x/asset-buyer';
 import { AssetProxyId, ObjectMap } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
@@ -14,172 +14,181 @@ import {
     Network,
     OrderProcessState,
     OrderState,
+    ProviderState,
 } from '../types';
 
 import { Action, ActionTypes } from './actions';
 
-export interface State {
+// State that is required and we have defaults for, before props are passed in
+export interface DefaultState {
     network: Network;
-    assetBuyer?: AssetBuyer;
     assetMetaDataMap: ObjectMap<AssetMetaData>;
-    selectedAsset?: Asset;
-    availableAssets?: Asset[];
-    selectedAssetAmount?: BigNumber;
     buyOrderState: OrderState;
-    ethUsdPrice?: BigNumber;
-    latestBuyQuote?: BuyQuote;
-    quoteRequestState: AsyncProcessState;
-    latestErrorMessage?: string;
     latestErrorDisplayStatus: DisplayStatus;
-    affiliateInfo?: AffiliateInfo;
+    quoteRequestState: AsyncProcessState;
+}
+
+// State that is required but needs to be derived from the props
+interface PropsDerivedState {
+    providerState: ProviderState;
 }
 
-export const INITIAL_STATE: State = {
+// State that is optional
+interface OptionalState {
+    selectedAsset: Asset;
+    availableAssets: Asset[];
+    selectedAssetAmount: BigNumber;
+    ethUsdPrice: BigNumber;
+    latestBuyQuote: BuyQuote;
+    latestErrorMessage: string;
+    affiliateInfo: AffiliateInfo;
+}
+
+export type State = DefaultState & PropsDerivedState & Partial<OptionalState>;
+
+export const DEFAULT_STATE: DefaultState = {
     network: Network.Mainnet,
-    selectedAssetAmount: undefined,
-    availableAssets: undefined,
     assetMetaDataMap,
     buyOrderState: { processState: OrderProcessState.None },
-    ethUsdPrice: undefined,
-    latestBuyQuote: undefined,
-    latestErrorMessage: undefined,
     latestErrorDisplayStatus: DisplayStatus.Hidden,
     quoteRequestState: AsyncProcessState.None,
-    affiliateInfo: undefined,
 };
 
-export const reducer = (state: State = INITIAL_STATE, action: Action): State => {
-    switch (action.type) {
-        case ActionTypes.UPDATE_ETH_USD_PRICE:
-            return {
-                ...state,
-                ethUsdPrice: action.data,
-            };
-        case ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT:
-            return {
-                ...state,
-                selectedAssetAmount: action.data,
-            };
-        case ActionTypes.UPDATE_LATEST_BUY_QUOTE:
-            const newBuyQuoteIfExists = action.data;
-            const shouldUpdate =
-                _.isUndefined(newBuyQuoteIfExists) || doesBuyQuoteMatchState(newBuyQuoteIfExists, state);
-            if (shouldUpdate) {
+export const createReducer = (initialState: State) => {
+    const reducer = (state: State = initialState, action: Action): State => {
+        switch (action.type) {
+            case ActionTypes.UPDATE_ETH_USD_PRICE:
                 return {
                     ...state,
-                    latestBuyQuote: newBuyQuoteIfExists,
-                    quoteRequestState: AsyncProcessState.Success,
+                    ethUsdPrice: action.data,
                 };
-            } else {
-                return state;
-            }
-
-        case ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING:
-            return {
-                ...state,
-                latestBuyQuote: undefined,
-                quoteRequestState: AsyncProcessState.Pending,
-            };
-        case ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE:
-            return {
-                ...state,
-                latestBuyQuote: undefined,
-                quoteRequestState: AsyncProcessState.Failure,
-            };
-        case ActionTypes.SET_BUY_ORDER_STATE_NONE:
-            return {
-                ...state,
-                buyOrderState: { processState: OrderProcessState.None },
-            };
-        case ActionTypes.SET_BUY_ORDER_STATE_VALIDATING:
-            return {
-                ...state,
-                buyOrderState: { processState: OrderProcessState.Validating },
-            };
-        case ActionTypes.SET_BUY_ORDER_STATE_PROCESSING:
-            const processingData = action.data;
-            const { startTimeUnix, expectedEndTimeUnix } = processingData;
-            return {
-                ...state,
-                buyOrderState: {
-                    processState: OrderProcessState.Processing,
-                    txHash: processingData.txHash,
-                    progress: {
-                        startTimeUnix,
-                        expectedEndTimeUnix,
-                    },
-                },
-            };
-        case ActionTypes.SET_BUY_ORDER_STATE_FAILURE:
-            const failureTxHash = action.data;
-            if ('txHash' in state.buyOrderState) {
-                if (state.buyOrderState.txHash === failureTxHash) {
-                    const { txHash, progress } = state.buyOrderState;
+            case ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT:
+                return {
+                    ...state,
+                    selectedAssetAmount: action.data,
+                };
+            case ActionTypes.UPDATE_LATEST_BUY_QUOTE:
+                const newBuyQuoteIfExists = action.data;
+                const shouldUpdate =
+                    _.isUndefined(newBuyQuoteIfExists) || doesBuyQuoteMatchState(newBuyQuoteIfExists, state);
+                if (shouldUpdate) {
                     return {
                         ...state,
-                        buyOrderState: {
-                            processState: OrderProcessState.Failure,
-                            txHash,
-                            progress,
-                        },
+                        latestBuyQuote: newBuyQuoteIfExists,
+                        quoteRequestState: AsyncProcessState.Success,
                     };
+                } else {
+                    return state;
                 }
-            }
-            return state;
-        case ActionTypes.SET_BUY_ORDER_STATE_SUCCESS:
-            const successTxHash = action.data;
-            if ('txHash' in state.buyOrderState) {
-                if (state.buyOrderState.txHash === successTxHash) {
-                    const { txHash, progress } = state.buyOrderState;
-                    return {
-                        ...state,
-                        buyOrderState: {
-                            processState: OrderProcessState.Success,
-                            txHash,
-                            progress,
+
+            case ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING:
+                return {
+                    ...state,
+                    latestBuyQuote: undefined,
+                    quoteRequestState: AsyncProcessState.Pending,
+                };
+            case ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE:
+                return {
+                    ...state,
+                    latestBuyQuote: undefined,
+                    quoteRequestState: AsyncProcessState.Failure,
+                };
+            case ActionTypes.SET_BUY_ORDER_STATE_NONE:
+                return {
+                    ...state,
+                    buyOrderState: { processState: OrderProcessState.None },
+                };
+            case ActionTypes.SET_BUY_ORDER_STATE_VALIDATING:
+                return {
+                    ...state,
+                    buyOrderState: { processState: OrderProcessState.Validating },
+                };
+            case ActionTypes.SET_BUY_ORDER_STATE_PROCESSING:
+                const processingData = action.data;
+                const { startTimeUnix, expectedEndTimeUnix } = processingData;
+                return {
+                    ...state,
+                    buyOrderState: {
+                        processState: OrderProcessState.Processing,
+                        txHash: processingData.txHash,
+                        progress: {
+                            startTimeUnix,
+                            expectedEndTimeUnix,
                         },
-                    };
+                    },
+                };
+            case ActionTypes.SET_BUY_ORDER_STATE_FAILURE:
+                const failureTxHash = action.data;
+                if ('txHash' in state.buyOrderState) {
+                    if (state.buyOrderState.txHash === failureTxHash) {
+                        const { txHash, progress } = state.buyOrderState;
+                        return {
+                            ...state,
+                            buyOrderState: {
+                                processState: OrderProcessState.Failure,
+                                txHash,
+                                progress,
+                            },
+                        };
+                    }
                 }
-            }
-            return state;
-        case ActionTypes.SET_ERROR_MESSAGE:
-            return {
-                ...state,
-                latestErrorMessage: action.data,
-                latestErrorDisplayStatus: DisplayStatus.Present,
-            };
-        case ActionTypes.HIDE_ERROR:
-            return {
-                ...state,
-                latestErrorDisplayStatus: DisplayStatus.Hidden,
-            };
-        case ActionTypes.CLEAR_ERROR:
-            return {
-                ...state,
-                latestErrorMessage: undefined,
-                latestErrorDisplayStatus: DisplayStatus.Hidden,
-            };
-        case ActionTypes.UPDATE_SELECTED_ASSET:
-            return {
-                ...state,
-                selectedAsset: action.data,
-            };
-        case ActionTypes.RESET_AMOUNT:
-            return {
-                ...state,
-                latestBuyQuote: undefined,
-                quoteRequestState: AsyncProcessState.None,
-                buyOrderState: { processState: OrderProcessState.None },
-                selectedAssetAmount: undefined,
-            };
-        case ActionTypes.SET_AVAILABLE_ASSETS:
-            return {
-                ...state,
-                availableAssets: action.data,
-            };
-        default:
-            return state;
-    }
+                return state;
+            case ActionTypes.SET_BUY_ORDER_STATE_SUCCESS:
+                const successTxHash = action.data;
+                if ('txHash' in state.buyOrderState) {
+                    if (state.buyOrderState.txHash === successTxHash) {
+                        const { txHash, progress } = state.buyOrderState;
+                        return {
+                            ...state,
+                            buyOrderState: {
+                                processState: OrderProcessState.Success,
+                                txHash,
+                                progress,
+                            },
+                        };
+                    }
+                }
+                return state;
+            case ActionTypes.SET_ERROR_MESSAGE:
+                return {
+                    ...state,
+                    latestErrorMessage: action.data,
+                    latestErrorDisplayStatus: DisplayStatus.Present,
+                };
+            case ActionTypes.HIDE_ERROR:
+                return {
+                    ...state,
+                    latestErrorDisplayStatus: DisplayStatus.Hidden,
+                };
+            case ActionTypes.CLEAR_ERROR:
+                return {
+                    ...state,
+                    latestErrorMessage: undefined,
+                    latestErrorDisplayStatus: DisplayStatus.Hidden,
+                };
+            case ActionTypes.UPDATE_SELECTED_ASSET:
+                return {
+                    ...state,
+                    selectedAsset: action.data,
+                };
+            case ActionTypes.RESET_AMOUNT:
+                return {
+                    ...state,
+                    latestBuyQuote: undefined,
+                    quoteRequestState: AsyncProcessState.None,
+                    buyOrderState: { processState: OrderProcessState.None },
+                    selectedAssetAmount: undefined,
+                };
+            case ActionTypes.SET_AVAILABLE_ASSETS:
+                return {
+                    ...state,
+                    availableAssets: action.data,
+                };
+            default:
+                return state;
+        }
+    };
+    return reducer;
 };
 
 const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => {
diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts
index 01deb8690..20710765d 100644
--- a/packages/instant/src/redux/store.ts
+++ b/packages/instant/src/redux/store.ts
@@ -2,12 +2,13 @@ import * as _ from 'lodash';
 import { createStore, Store as ReduxStore } from 'redux';
 import { devToolsEnhancer } from 'redux-devtools-extension/developmentOnly';
 
-import { reducer, State } from './reducer';
+import { createReducer, State } from './reducer';
 
 export type Store = ReduxStore<State>;
 
 export const store = {
-    create: (state: State): Store => {
-        return createStore(reducer, state, devToolsEnhancer({}));
+    create: (initialState: State): Store => {
+        const reducer = createReducer(initialState);
+        return createStore(reducer, initialState, devToolsEnhancer({}));
     },
 };
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 04469f8b9..0ab227310 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -1,4 +1,7 @@
-import { AssetProxyId, ObjectMap } from '@0x/types';
+import { AssetBuyer } from '@0x/asset-buyer';
+import { AssetProxyId, ObjectMap, SignedOrder } from '@0x/types';
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import { Provider } from 'ethereum-types';
 
 // Reusable
 export type Maybe<T> = T | undefined;
@@ -89,3 +92,24 @@ export interface AffiliateInfo {
     feeRecipient: string;
     feePercentage: number;
 }
+
+/**
+ * Our provider may be of 3 different types:
+ * Props: the provider was passed in a prop to the component
+ * Injected: the provider was injected into `window`
+ * FallbackEmptyWallet: the provider has no wallet but responds to data requests using infura
+ */
+export enum ProviderType {
+    Props = 'PROPS',
+    Injected = 'INJECTED',
+    FallbackEmptyWallet = 'FALLBACK_EMPTY_WALLET',
+}
+
+export interface ProviderState {
+    type: ProviderType;
+    provider: Provider;
+    assetBuyer: AssetBuyer;
+    web3Wrapper: Web3Wrapper;
+}
+
+export type OrderSource = string | SignedOrder[];
diff --git a/packages/instant/src/util/asset_buyer_factory.ts b/packages/instant/src/util/asset_buyer_factory.ts
new file mode 100644
index 000000000..5ba46223c
--- /dev/null
+++ b/packages/instant/src/util/asset_buyer_factory.ts
@@ -0,0 +1,17 @@
+import { AssetBuyer, AssetBuyerOpts } from '@0x/asset-buyer';
+import { Provider } from 'ethereum-types';
+import * as _ from 'lodash';
+
+import { Network, OrderSource } from '../types';
+
+export const assetBuyerFactory = {
+    getAssetBuyer: (provider: Provider, orderSource: OrderSource, network: Network): AssetBuyer => {
+        const assetBuyerOptions: Partial<AssetBuyerOpts> = {
+            networkId: network,
+        };
+        const assetBuyer = _.isString(orderSource)
+            ? AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(provider, orderSource, assetBuyerOptions)
+            : AssetBuyer.getAssetBuyerForProvidedOrders(provider, orderSource, assetBuyerOptions);
+        return assetBuyer;
+    },
+};
diff --git a/packages/instant/src/util/injected_provider.ts b/packages/instant/src/util/injected_provider.ts
deleted file mode 100644
index 40f9e2da5..000000000
--- a/packages/instant/src/util/injected_provider.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Provider } from 'ethereum-types';
-import * as _ from 'lodash';
-
-export const getInjectedProvider = (): Provider => {
-    const injectedProviderIfExists = (window as any).ethereum;
-    if (!_.isUndefined(injectedProviderIfExists)) {
-        // TODO: call enable here when implementing wallet connection flow
-        return injectedProviderIfExists;
-    }
-    const injectedWeb3IfExists = (window as any).web3;
-    if (!_.isUndefined(injectedWeb3IfExists.currentProvider)) {
-        return injectedWeb3IfExists.currentProvider;
-    } else {
-        throw new Error(`No injected web3 found`);
-    }
-};
diff --git a/packages/instant/src/util/provider_factory.ts b/packages/instant/src/util/provider_factory.ts
new file mode 100644
index 000000000..603f7674d
--- /dev/null
+++ b/packages/instant/src/util/provider_factory.ts
@@ -0,0 +1,34 @@
+import { EmptyWalletSubprovider, RPCSubprovider, Web3ProviderEngine } from '@0x/subproviders';
+import { Provider } from 'ethereum-types';
+import * as _ from 'lodash';
+
+import { BLOCK_POLLING_INTERVAL_MS, ETHEREUM_NODE_URL_BY_NETWORK } from '../constants';
+import { Maybe, Network } from '../types';
+
+export const providerFactory = {
+    getInjectedProviderIfExists: (): Maybe<Provider> => {
+        const injectedProviderIfExists = (window as any).ethereum;
+        if (!_.isUndefined(injectedProviderIfExists)) {
+            return injectedProviderIfExists;
+        }
+        const injectedWeb3IfExists = (window as any).web3;
+        if (!_.isUndefined(injectedWeb3IfExists) && !_.isUndefined(injectedWeb3IfExists.currentProvider)) {
+            return injectedWeb3IfExists.currentProvider;
+        }
+        return undefined;
+    },
+    getFallbackNoSigningProvider: (network: Network): Provider => {
+        const providerEngine = new Web3ProviderEngine({
+            pollingInterval: BLOCK_POLLING_INTERVAL_MS,
+        });
+        // Intercept calls to `eth_accounts` and always return empty
+        providerEngine.addProvider(new EmptyWalletSubprovider());
+        // Construct an RPC subprovider, all data based requests will be sent via the RPCSubprovider
+        // TODO(bmillman): make this more resilient to infura failures
+        const rpcUrl = ETHEREUM_NODE_URL_BY_NETWORK[network];
+        providerEngine.addProvider(new RPCSubprovider(rpcUrl));
+        // // Start the Provider Engine
+        providerEngine.start();
+        return providerEngine;
+    },
+};
-- 
cgit v1.2.3


From 28df5bfd94e817cb90689059d7255495ca6522ad Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 6 Nov 2018 22:33:58 -0800
Subject: feat(instant): add Account to the ProviderState

---
 .../src/components/zero_ex_instant_provider.tsx    | 32 +++-------
 packages/instant/src/types.ts                      | 35 ++++++-----
 .../instant/src/util/provider_state_factory.ts     | 69 ++++++++++++++++++++++
 3 files changed, 97 insertions(+), 39 deletions(-)
 create mode 100644 packages/instant/src/util/provider_state_factory.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index ed0fabdf3..1fb5cf64f 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -1,6 +1,5 @@
 import { ObjectMap } from '@0x/types';
 import { BigNumber } from '@0x/utils';
-import { Web3Wrapper } from '@0x/web3-wrapper';
 import { Provider } from 'ethereum-types';
 import * as _ from 'lodash';
 import * as React from 'react';
@@ -11,12 +10,11 @@ import { asyncData } from '../redux/async_data';
 import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer';
 import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
-import { AffiliateInfo, AssetMetaData, Network, OrderSource, ProviderState, ProviderType } from '../types';
+import { AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types';
 import { assetUtils } from '../util/asset';
-import { assetBuyerFactory } from '../util/asset_buyer_factory';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
-import { providerFactory } from '../util/provider_factory';
+import { providerStateFactory } from '../util/provider_state_factory';
 
 fonts.include();
 
@@ -47,27 +45,11 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
         // use the networkId passed in with the props, otherwise default to that of the default state (1, mainnet)
         const networkId = props.networkId || defaultState.network;
         // construct the ProviderState
-        let provider: Provider;
-        let providerType: ProviderType;
-        if (!_.isUndefined(props.provider)) {
-            provider = props.provider;
-            providerType = ProviderType.Props;
-        } else {
-            const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists();
-            if (!_.isUndefined(injectedProviderIfExists)) {
-                provider = injectedProviderIfExists;
-                providerType = ProviderType.Injected;
-            } else {
-                provider = providerFactory.getFallbackNoSigningProvider(networkId);
-                providerType = ProviderType.FallbackEmptyWallet;
-            }
-        }
-        const providerState: ProviderState = {
-            provider,
-            type: providerType,
-            web3Wrapper: new Web3Wrapper(provider),
-            assetBuyer: assetBuyerFactory.getAssetBuyer(provider, props.orderSource, networkId),
-        };
+        const providerState = providerStateFactory.getInitialProviderState(
+            props.orderSource,
+            networkId,
+            props.provider,
+        );
         // merge the additional additionalAssetMetaDataMap with our default map
         const completeAssetMetaDataMap = {
             ...props.additionalAssetMetaDataMap,
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 0ab227310..d65f70008 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -1,4 +1,4 @@
-import { AssetBuyer } from '@0x/asset-buyer';
+import { AssetBuyer, BigNumber } from '@0x/asset-buyer';
 import { AssetProxyId, ObjectMap, SignedOrder } from '@0x/types';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import { Provider } from 'ethereum-types';
@@ -93,23 +93,30 @@ export interface AffiliateInfo {
     feePercentage: number;
 }
 
-/**
- * Our provider may be of 3 different types:
- * Props: the provider was passed in a prop to the component
- * Injected: the provider was injected into `window`
- * FallbackEmptyWallet: the provider has no wallet but responds to data requests using infura
- */
-export enum ProviderType {
-    Props = 'PROPS',
-    Injected = 'INJECTED',
-    FallbackEmptyWallet = 'FALLBACK_EMPTY_WALLET',
-}
-
 export interface ProviderState {
-    type: ProviderType;
     provider: Provider;
     assetBuyer: AssetBuyer;
     web3Wrapper: Web3Wrapper;
+    account: Account;
+}
+
+export enum AccountState {
+    Loading = 'LOADING',
+    Ready = 'READY',
+    Locked = 'LOCKED', // TODO(bmillman): break this up into locked / privacy mode enabled
+    Error = 'ERROR',
+    None = 'NONE,',
 }
 
+export interface AccountReady {
+    state: AccountState.Ready;
+    address: string;
+    ethBalanceInWei?: BigNumber;
+}
+export interface AccountNotReady {
+    state: AccountState.None | AccountState.Loading | AccountState.Locked | AccountState.Error;
+}
+
+export type Account = AccountReady | AccountNotReady;
+
 export type OrderSource = string | SignedOrder[];
diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts
new file mode 100644
index 000000000..18b188d89
--- /dev/null
+++ b/packages/instant/src/util/provider_state_factory.ts
@@ -0,0 +1,69 @@
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import { Provider } from 'ethereum-types';
+import * as _ from 'lodash';
+
+import { AccountNotReady, AccountState, Maybe, Network, OrderSource, ProviderState } from '../types';
+
+import { assetBuyerFactory } from './asset_buyer_factory';
+import { providerFactory } from './provider_factory';
+
+const LOADING_ACCOUNT: AccountNotReady = {
+    state: AccountState.Loading,
+};
+const NO_ACCOUNT: AccountNotReady = {
+    state: AccountState.None,
+};
+
+export const providerStateFactory = {
+    getInitialProviderState: (orderSource: OrderSource, network: Network, provider?: Provider): ProviderState => {
+        if (!_.isUndefined(provider)) {
+            return providerStateFactory.getInitialProviderStateFromProvider(orderSource, network, provider);
+        }
+        const providerStateFromWindowIfExits = providerStateFactory.getInitialProviderStateFromWindowIfExists(
+            orderSource,
+            network,
+        );
+        if (providerStateFromWindowIfExits) {
+            return providerStateFromWindowIfExits;
+        } else {
+            return providerStateFactory.getInitialProviderStateFallback(orderSource, network);
+        }
+    },
+    getInitialProviderStateFromProvider: (
+        orderSource: OrderSource,
+        network: Network,
+        provider: Provider,
+    ): ProviderState => {
+        const providerState: ProviderState = {
+            provider,
+            web3Wrapper: new Web3Wrapper(provider),
+            assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),
+            account: LOADING_ACCOUNT,
+        };
+        return providerState;
+    },
+    getInitialProviderStateFromWindowIfExists: (orderSource: OrderSource, network: Network): Maybe<ProviderState> => {
+        const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists();
+        if (!_.isUndefined(injectedProviderIfExists)) {
+            const providerState: ProviderState = {
+                provider: injectedProviderIfExists,
+                web3Wrapper: new Web3Wrapper(injectedProviderIfExists),
+                assetBuyer: assetBuyerFactory.getAssetBuyer(injectedProviderIfExists, orderSource, network),
+                account: LOADING_ACCOUNT,
+            };
+            return providerState;
+        } else {
+            return undefined;
+        }
+    },
+    getInitialProviderStateFallback: (orderSource: OrderSource, network: Network): ProviderState => {
+        const provider = providerFactory.getFallbackNoSigningProvider(network);
+        const providerState: ProviderState = {
+            provider,
+            web3Wrapper: new Web3Wrapper(provider),
+            assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),
+            account: NO_ACCOUNT,
+        };
+        return providerState;
+    },
+};
-- 
cgit v1.2.3


From 370452238f0cb221ee80f71939a7049ea3de7add Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 7 Nov 2018 15:26:01 -0800
Subject: fix(website): turn off production flag when building locally

---
 packages/website/package.json | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/website/package.json b/packages/website/package.json
index efb97d309..dd14d4b17 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -7,14 +7,15 @@
     "private": true,
     "description": "Website and 0x portal dapp",
     "scripts": {
-        "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production",
+        "build": "yarn build:dev",
+        "build:prod": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production",
         "build:dev": "../../node_modules/.bin/webpack --mode development",
         "clean": "shx rm -f public/bundle*",
         "lint": "tslint --format stylish --project . 'ts/**/*.ts' 'ts/**/*.tsx'",
         "dev": "webpack-dev-server --mode development --content-base public --https",
-        "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
-        "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
-        "deploy_live": "DEPLOY_ROLLBAR_SOURCEMAPS=true npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude *.map.js"
+        "deploy_dogfood": "npm run build:prod; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
+        "deploy_staging": "npm run build:prod; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
+        "deploy_live": "DEPLOY_ROLLBAR_SOURCEMAPS=true npm run build:prod; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude *.map.js"
     },
     "author": "Fabio Berger",
     "license": "Apache-2.0",
-- 
cgit v1.2.3


From 6d5f65b77ede962b96ca59f30df1679a8216bd06 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 7 Nov 2018 15:42:48 -0800
Subject: fix: apply css reset to overlay as well

---
 packages/instant/src/components/css_reset.tsx      | 57 +++++++++++-----------
 .../instant/src/components/zero_ex_instant.tsx     | 10 ++--
 .../src/components/zero_ex_instant_container.tsx   |  5 +-
 packages/instant/src/constants.ts                  |  1 +
 packages/instant/src/index.umd.ts                  |  3 +-
 5 files changed, 41 insertions(+), 35 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/css_reset.tsx b/packages/instant/src/components/css_reset.tsx
index 891c95e4d..a1dd2e05c 100644
--- a/packages/instant/src/components/css_reset.tsx
+++ b/packages/instant/src/components/css_reset.tsx
@@ -1,34 +1,33 @@
-import { styled } from '../style/theme';
+import { INJECTED_DIV_CLASS } from '../constants';
+import { createGlobalStyle } from '../style/theme';
 
 export interface CSSResetProps {}
 
-export const CSSReset =
-    styled.div <
-    CSSResetProps >
-    `
-    /*
-    * Derived from
-    * https://github.com/jtrost/Complete-CSS-Reset
-    */
-
-    a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button,
-    canvas, caption, cite, code, col, colgroup, command, datalist, dd, del,
-    details, dialog, dfn, div, dl, dt, em, embed, fieldset, figure, form,
-    h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img,
-    input, ins, keygen, kbd, label, legend, li, map, mark, menu, meter, nav,
-    noscript, object, ol, optgroup, option, output, p, param, pre, progress,
-    q, rp, rt, ruby, samp, section, select, small, span, strong, sub, sup,
-    table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video {
-        background: transparent;
-        border: 0;
-        font-size: 100%;
-        font: inherit;
-        margin: 0;
-        outline: none;
-        padding: 0;
-        text-align: left;
-        text-decoration: none;
-        vertical-align: baseline;
-        z-index: 1;
+/*
+* Derived from
+* https://github.com/jtrost/Complete-CSS-Reset
+*/
+export const CSSReset = createGlobalStyle`
+    .${INJECTED_DIV_CLASS} {
+        a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button,
+        canvas, caption, cite, code, col, colgroup, command, datalist, dd, del,
+        details, dialog, dfn, div, dl, dt, em, embed, fieldset, figure, form,
+        h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img,
+        input, ins, keygen, kbd, label, legend, li, map, mark, menu, meter, nav,
+        noscript, object, ol, optgroup, option, output, p, param, pre, progress,
+        q, rp, rt, ruby, samp, section, select, small, span, strong, sub, sup,
+        table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video {
+            background: transparent;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            margin: 0;
+            outline: none;
+            padding: 0;
+            text-align: left;
+            text-decoration: none;
+            vertical-align: baseline;
+            z-index: 1;
+        }
     }
 `;
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 907c42e7a..b945f9908 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { INJECTED_DIV_CLASS } from '../constants';
+
 import { ZeroExInstantContainer } from './zero_ex_instant_container';
 import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
 
@@ -7,8 +9,10 @@ export type ZeroExInstantProps = ZeroExInstantProviderProps;
 
 export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = props => {
     return (
-        <ZeroExInstantProvider {...props}>
-            <ZeroExInstantContainer />
-        </ZeroExInstantProvider>
+        <div className={INJECTED_DIV_CLASS}>
+            <ZeroExInstantProvider {...props}>
+                <ZeroExInstantContainer />
+            </ZeroExInstantProvider>
+        </div>
     );
 };
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index efcb263ba..3f270f2f4 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -28,7 +28,8 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
     };
     public render(): React.ReactNode {
         return (
-            <CSSReset>
+            <React.Fragment>
+                <CSSReset />
                 <Container width="350px" position="relative">
                     <Container zIndex={zIndex.errorPopup} position="relative">
                         <LatestError />
@@ -58,7 +59,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                         </SlidingPanel>
                     </Container>
                 </Container>
-            </CSSReset>
+            </React.Fragment>
         );
     }
     private readonly _handleSymbolClick = (): void => {
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 15105b65c..12cbe3a70 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -2,6 +2,7 @@ import { BigNumber } from '@0x/utils';
 export const BIG_NUMBER_ZERO = new BigNumber(0);
 export const ETH_DECIMALS = 18;
 export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
+export const INJECTED_DIV_CLASS = 'zeroExInstantResetRoot';
 export const INJECTED_DIV_ID = 'zeroExInstant';
 export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
 export const GWEI_IN_WEI = new BigNumber(1000000000);
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index 59d1e646f..0274db30c 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_ID } from './constants';
+import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_CLASS, INJECTED_DIV_ID } from './constants';
 import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index';
 import { assert } from './util/assert';
 
@@ -41,6 +41,7 @@ export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFA
     const appendTo = appendToIfExists as Element;
     const injectedDiv = document.createElement('div');
     injectedDiv.setAttribute('id', INJECTED_DIV_ID);
+    injectedDiv.setAttribute('class', INJECTED_DIV_CLASS);
     appendTo.appendChild(injectedDiv);
     const instantOverlayProps = {
         ...props,
-- 
cgit v1.2.3


From c6e7ad5a53a267dfe1ca6ecf2b9d2252fbad18ea Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 7 Nov 2018 16:06:41 -0800
Subject: Small code review tweaks

---
 packages/instant/src/components/ui/container.tsx              | 2 +-
 packages/instant/src/components/zero_ex_instant_container.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index cbb6a3a15..403751210 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -65,7 +65,7 @@ export const Container =
     ${props => cssRuleIfExists(props, 'cursor')}
     ${props => cssRuleIfExists(props, 'overflow')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
-    ${props => stylesForMedia('display', props.display || 'initial')}
+    ${props => props.display && stylesForMedia('display', props.display)}
     ${props => stylesForMedia('width', props.width || 'auto')}
     ${props => stylesForMedia('height', props.height || 'auto')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 6d3c6cb27..ef6adf384 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -44,7 +44,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                     overflow="hidden"
                     height="100%"
                 >
-                    <Flex direction="column" height={'100%'} justify="flex-start">
+                    <Flex direction="column" height="100%" justify="flex-start">
                         <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
                         <SelectedAssetBuyOrderProgress />
                         <LatestBuyQuoteOrderDetails />
-- 
cgit v1.2.3


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 v1.2.3


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 v1.2.3


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 v1.2.3


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 v1.2.3


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 v1.2.3


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 v1.2.3


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 v1.2.3


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 v1.2.3


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 v1.2.3


From d0c009adff53d94414cf51028eff490e0452a3c9 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 7 Nov 2018 18:02:24 -0800
Subject: feat(instant): fetch account address at startup and drive account
 state changes

---
 packages/instant/src/components/buy_button.tsx     | 21 ++++++----------
 .../src/components/buy_order_state_buttons.tsx     |  2 ++
 .../src/components/zero_ex_instant_provider.tsx    |  4 +--
 packages/instant/src/constants.ts                  | 14 ++++++++++-
 .../selected_asset_buy_order_state_buttons.ts      |  6 ++++-
 packages/instant/src/redux/actions.ts              |  8 ++++++
 packages/instant/src/redux/async_data.ts           | 21 ++++++++++++++++
 packages/instant/src/redux/reducer.ts              | 29 +++++++++++++++++++++-
 .../instant/src/util/provider_state_factory.ts     |  8 +-----
 9 files changed, 88 insertions(+), 25 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 515cd18e9..f24bb57ee 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -16,6 +16,7 @@ import { Button } from './ui/button';
 import { Text } from './ui/text';
 
 export interface BuyButtonProps {
+    accountAddress?: string;
     buyQuote?: BuyQuote;
     assetBuyer: AssetBuyer;
     affiliateInfo?: AffiliateInfo;
@@ -34,7 +35,8 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         onBuyFailure: util.boundNoop,
     };
     public render(): React.ReactNode {
-        const shouldDisableButton = _.isUndefined(this.props.buyQuote);
+        const { buyQuote, accountAddress } = this.props;
+        const shouldDisableButton = _.isUndefined(buyQuote) || _.isUndefined(accountAddress);
         return (
             <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
                 <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
@@ -45,30 +47,25 @@ export class BuyButton extends React.Component<BuyButtonProps> {
     }
     private readonly _handleClick = async () => {
         // The button is disabled when there is no buy quote anyway.
-        const { buyQuote, assetBuyer, affiliateInfo } = this.props;
-        if (_.isUndefined(buyQuote)) {
+        const { buyQuote, assetBuyer, affiliateInfo, accountAddress } = this.props;
+        if (_.isUndefined(buyQuote) || _.isUndefined(accountAddress)) {
             return;
         }
-
         this.props.onValidationPending(buyQuote);
-
-        // TODO(bmillman): move address and balance fetching to the async state
+        // TODO(bmillman): move balance fetching to the async state and get rid of web3 wrapper here
         const web3Wrapper = new Web3Wrapper(assetBuyer.provider);
-        const takerAddress = await getBestAddress(web3Wrapper);
-
-        const hasSufficientEth = await balanceUtil.hasSufficientEth(takerAddress, buyQuote, web3Wrapper);
+        const hasSufficientEth = await balanceUtil.hasSufficientEth(accountAddress, buyQuote, web3Wrapper);
         if (!hasSufficientEth) {
             this.props.onValidationFail(buyQuote, ZeroExInstantError.InsufficientETH);
             return;
         }
-
         let txHash: string | undefined;
         const gasInfo = await gasPriceEstimator.getGasInfoAsync();
         const feeRecipient = oc(affiliateInfo).feeRecipient();
         try {
             txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, {
                 feeRecipient,
-                takerAddress,
+                takerAddress: accountAddress,
                 gasPrice: gasInfo.gasPriceInWei,
             });
         } catch (e) {
@@ -83,7 +80,6 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             }
             throw e;
         }
-
         const startTimeUnix = new Date().getTime();
         const expectedEndTimeUnix = startTimeUnix + gasInfo.estimatedTimeMs;
         this.props.onBuyProcessing(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
@@ -96,7 +92,6 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             }
             throw e;
         }
-
         this.props.onBuySuccess(buyQuote, txHash);
     };
 }
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 3d0ede7b1..b15415e71 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -13,6 +13,7 @@ import { Flex } from './ui/flex';
 import { Text } from './ui/text';
 
 export interface BuyOrderStateButtonProps {
+    accountAddress?: string;
     buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
     assetBuyer: AssetBuyer;
@@ -52,6 +53,7 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
 
     return (
         <BuyButton
+            accountAddress={props.accountAddress}
             buyQuote={props.buyQuote}
             assetBuyer={props.assetBuyer}
             affiliateInfo={props.affiliateInfo}
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 1fb5cf64f..fa0588b71 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -92,12 +92,12 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             // tslint:disable-next-line:no-floating-promises
             asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
         }
-
+        // tslint:disable-next-line:no-floating-promises
+        asyncData.fetchAccountInfoAndDispatchToStore(this._store);
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
         // tslint:disable-next-line:no-floating-promises
         gasPriceEstimator.getGasInfoAsync();
-
         // tslint:disable-next-line:no-floating-promises
         this._flashErrorIfWrongNetwork();
     }
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 00521b56e..705313ce7 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -1,6 +1,6 @@
 import { BigNumber } from '@0x/utils';
 
-import { Network } from './types';
+import { AccountNotReady, AccountState, Network } from './types';
 
 export const BIG_NUMBER_ZERO = new BigNumber(0);
 export const ETH_DECIMALS = 18;
@@ -21,3 +21,15 @@ export const ETHEREUM_NODE_URL_BY_NETWORK = {
     [Network.Kovan]: 'https://kovan.infura.io/',
 };
 export const BLOCK_POLLING_INTERVAL_MS = 10000; // 10s
+export const NO_ACCOUNT: AccountNotReady = {
+    state: AccountState.None,
+};
+export const LOADING_ACCOUNT: AccountNotReady = {
+    state: AccountState.Loading,
+};
+export const LOCKED_ACCOUNT: AccountNotReady = {
+    state: AccountState.Locked,
+};
+export const ERROR_ACCOUNT: AccountNotReady = {
+    state: AccountState.Error,
+};
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index c3a5e88b9..2678d4a36 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -7,11 +7,12 @@ import { Dispatch } from 'redux';
 import { BuyOrderStateButtons } from '../components/buy_order_state_buttons';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
-import { AffiliateInfo, OrderProcessState, ZeroExInstantError } from '../types';
+import { AccountState, AffiliateInfo, OrderProcessState, ZeroExInstantError } from '../types';
 import { errorFlasher } from '../util/error_flasher';
 import { etherscanUtil } from '../util/etherscan';
 
 interface ConnectedState {
+    accountAddress?: string;
     buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
     assetBuyer: AssetBuyer;
@@ -31,7 +32,10 @@ interface ConnectedDispatch {
 export interface SelectedAssetBuyOrderStateButtons {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => {
     const assetBuyer = state.providerState.assetBuyer;
+    const account = state.providerState.account;
+    const accountAddress = account.state === AccountState.Ready ? account.address : undefined;
     return {
+        accountAddress,
         buyOrderProcessingState: state.buyOrderState.processState,
         assetBuyer,
         buyQuote: state.latestBuyQuote,
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index c41c5054b..084360629 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -21,6 +21,10 @@ function createAction<T extends string, P>(type: T, data?: P): PlainAction<T> |
 }
 
 export enum ActionTypes {
+    SET_ACCOUNT_STATE_LOADING = 'SET_ACCOUNT_STATE_LOADING',
+    SET_ACCOUNT_STATE_LOCKED = 'SET_ACCOUNT_STATE_LOCKED',
+    SET_ACCOUNT_STATE_ERROR = 'SET_ACCOUNT_STATE_ERROR',
+    SET_ACCOUNT_STATE_READY = 'SET_ACCOUNT_STATE_READY',
     UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE',
     UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT',
     SET_BUY_ORDER_STATE_NONE = 'SET_BUY_ORDER_STATE_NONE',
@@ -40,6 +44,10 @@ export enum ActionTypes {
 }
 
 export const actions = {
+    setAccountStateLoading: () => createAction(ActionTypes.SET_ACCOUNT_STATE_LOADING),
+    setAccountStateLocked: () => createAction(ActionTypes.SET_ACCOUNT_STATE_LOCKED),
+    setAccountStateError: () => createAction(ActionTypes.SET_ACCOUNT_STATE_ERROR),
+    setAccountStateReady: (address: string) => createAction(ActionTypes.SET_ACCOUNT_STATE_READY, address),
     updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
     updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
     setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE),
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index c3d190af2..e27ec1dc3 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 
 import { BIG_NUMBER_ZERO } from '../constants';
+import { AccountState } from '../types';
 import { assetUtils } from '../util/asset';
 import { coinbaseApi } from '../util/coinbase_api';
 import { errorFlasher } from '../util/error_flasher';
@@ -33,4 +34,24 @@ export const asyncData = {
             store.dispatch(actions.setAvailableAssets([]));
         }
     },
+    fetchAccountInfoAndDispatchToStore: async (store: Store) => {
+        const { providerState } = store.getState();
+        const web3Wrapper = providerState.web3Wrapper;
+        if (providerState.account.state !== AccountState.Loading) {
+            store.dispatch(actions.setAccountStateLoading());
+        }
+        let availableAddresses: string[];
+        try {
+            availableAddresses = await web3Wrapper.getAvailableAddressesAsync();
+        } catch (e) {
+            store.dispatch(actions.setAccountStateError());
+            return;
+        }
+        if (!_.isEmpty(availableAddresses)) {
+            const activeAddress = availableAddresses[0];
+            store.dispatch(actions.setAccountStateReady(activeAddress));
+        } else {
+            store.dispatch(actions.setAccountStateLocked());
+        }
+    },
 };
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 4a939839a..9bbd114a2 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -4,8 +4,12 @@ import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 
+import { ERROR_ACCOUNT, LOADING_ACCOUNT, LOCKED_ACCOUNT } from '../constants';
 import { assetMetaDataMap } from '../data/asset_meta_data_map';
 import {
+    Account,
+    AccountReady,
+    AccountState,
     AffiliateInfo,
     Asset,
     AssetMetaData,
@@ -57,6 +61,18 @@ export const DEFAULT_STATE: DefaultState = {
 export const createReducer = (initialState: State) => {
     const reducer = (state: State = initialState, action: Action): State => {
         switch (action.type) {
+            case ActionTypes.SET_ACCOUNT_STATE_LOADING:
+                return reduceStateWithAccount(state, LOADING_ACCOUNT);
+            case ActionTypes.SET_ACCOUNT_STATE_LOCKED:
+                return reduceStateWithAccount(state, LOCKED_ACCOUNT);
+            case ActionTypes.SET_ACCOUNT_STATE_ERROR:
+                return reduceStateWithAccount(state, ERROR_ACCOUNT);
+            case ActionTypes.SET_ACCOUNT_STATE_READY:
+                const account: AccountReady = {
+                    state: AccountState.Ready,
+                    address: action.data,
+                };
+                return reduceStateWithAccount(state, account);
             case ActionTypes.UPDATE_ETH_USD_PRICE:
                 return {
                     ...state,
@@ -80,7 +96,6 @@ export const createReducer = (initialState: State) => {
                 } else {
                     return state;
                 }
-
             case ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING:
                 return {
                     ...state,
@@ -191,6 +206,18 @@ export const createReducer = (initialState: State) => {
     return reducer;
 };
 
+const reduceStateWithAccount = (state: State, account: Account) => {
+    const oldProviderState = state.providerState;
+    const newProviderState: ProviderState = {
+        ...oldProviderState,
+        account,
+    };
+    return {
+        ...state,
+        providerState: newProviderState,
+    };
+};
+
 const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => {
     const selectedAssetIfExists = state.selectedAsset;
     const selectedAssetAmountIfExists = state.selectedAssetAmount;
diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts
index 18b188d89..3006c5e14 100644
--- a/packages/instant/src/util/provider_state_factory.ts
+++ b/packages/instant/src/util/provider_state_factory.ts
@@ -2,18 +2,12 @@ import { Web3Wrapper } from '@0x/web3-wrapper';
 import { Provider } from 'ethereum-types';
 import * as _ from 'lodash';
 
+import { LOADING_ACCOUNT, NO_ACCOUNT } from '../constants';
 import { AccountNotReady, AccountState, Maybe, Network, OrderSource, ProviderState } from '../types';
 
 import { assetBuyerFactory } from './asset_buyer_factory';
 import { providerFactory } from './provider_factory';
 
-const LOADING_ACCOUNT: AccountNotReady = {
-    state: AccountState.Loading,
-};
-const NO_ACCOUNT: AccountNotReady = {
-    state: AccountState.None,
-};
-
 export const providerStateFactory = {
     getInitialProviderState: (orderSource: OrderSource, network: Network, provider?: Provider): ProviderState => {
         if (!_.isUndefined(provider)) {
-- 
cgit v1.2.3


From cde192df0d48bb45f57c319179dbd9f64abd13e9 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 7 Nov 2018 23:36:00 -0800
Subject: feat(instant): fetch balance at startup

---
 packages/instant/src/components/buy_button.tsx           | 13 +++++++------
 .../instant/src/components/buy_order_state_buttons.tsx   |  6 ++++++
 .../containers/selected_asset_buy_order_state_buttons.ts |  8 ++++++++
 packages/instant/src/redux/actions.ts                    |  2 ++
 packages/instant/src/redux/async_data.ts                 | 16 ++++++++++++++++
 packages/instant/src/redux/reducer.ts                    | 15 ++++++++++++++-
 packages/instant/src/util/balance.ts                     | 13 -------------
 7 files changed, 53 insertions(+), 20 deletions(-)
 delete mode 100644 packages/instant/src/util/balance.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index f24bb57ee..9a6e22ea9 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -1,4 +1,5 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
@@ -7,8 +8,6 @@ import { oc } from 'ts-optchain';
 import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
 import { AffiliateInfo, ZeroExInstantError } from '../types';
-import { getBestAddress } from '../util/address';
-import { balanceUtil } from '../util/balance';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { util } from '../util/util';
 
@@ -17,8 +16,10 @@ import { Text } from './ui/text';
 
 export interface BuyButtonProps {
     accountAddress?: string;
+    accountEthBalanceInWei?: BigNumber;
     buyQuote?: BuyQuote;
     assetBuyer: AssetBuyer;
+    web3Wrapper: Web3Wrapper;
     affiliateInfo?: AffiliateInfo;
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
@@ -47,14 +48,14 @@ export class BuyButton extends React.Component<BuyButtonProps> {
     }
     private readonly _handleClick = async () => {
         // The button is disabled when there is no buy quote anyway.
-        const { buyQuote, assetBuyer, affiliateInfo, accountAddress } = this.props;
+        const { buyQuote, assetBuyer, affiliateInfo, accountAddress, accountEthBalanceInWei, web3Wrapper } = this.props;
         if (_.isUndefined(buyQuote) || _.isUndefined(accountAddress)) {
             return;
         }
         this.props.onValidationPending(buyQuote);
-        // TODO(bmillman): move balance fetching to the async state and get rid of web3 wrapper here
-        const web3Wrapper = new Web3Wrapper(assetBuyer.provider);
-        const hasSufficientEth = await balanceUtil.hasSufficientEth(accountAddress, buyQuote, web3Wrapper);
+        const ethNeededForBuy = buyQuote.worstCaseQuoteInfo.totalEthAmount;
+        // if we don't have a balance for the user, let the transaction through, it will be handled by the wallet
+        const hasSufficientEth = _.isUndefined(accountEthBalanceInWei) || accountEthBalanceInWei.gte(ethNeededForBuy);
         if (!hasSufficientEth) {
             this.props.onValidationFail(buyQuote, ZeroExInstantError.InsufficientETH);
             return;
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index b15415e71..b46ff7714 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -1,4 +1,6 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
@@ -14,9 +16,11 @@ import { Text } from './ui/text';
 
 export interface BuyOrderStateButtonProps {
     accountAddress?: string;
+    accountEthBalanceInWei?: BigNumber;
     buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
     assetBuyer: AssetBuyer;
+    web3Wrapper: Web3Wrapper;
     affiliateInfo?: AffiliateInfo;
     onViewTransaction: () => void;
     onValidationPending: (buyQuote: BuyQuote) => void;
@@ -54,8 +58,10 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
     return (
         <BuyButton
             accountAddress={props.accountAddress}
+            accountEthBalanceInWei={props.accountEthBalanceInWei}
             buyQuote={props.buyQuote}
             assetBuyer={props.assetBuyer}
+            web3Wrapper={props.web3Wrapper}
             affiliateInfo={props.affiliateInfo}
             onValidationPending={props.onValidationPending}
             onValidationFail={props.onValidationFail}
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
index 2678d4a36..610335243 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
@@ -1,4 +1,6 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
@@ -13,9 +15,11 @@ import { etherscanUtil } from '../util/etherscan';
 
 interface ConnectedState {
     accountAddress?: string;
+    accountEthBalanceInWei?: BigNumber;
     buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
     assetBuyer: AssetBuyer;
+    web3Wrapper: Web3Wrapper;
     affiliateInfo?: AffiliateInfo;
     onViewTransaction: () => void;
 }
@@ -32,12 +36,16 @@ interface ConnectedDispatch {
 export interface SelectedAssetBuyOrderStateButtons {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => {
     const assetBuyer = state.providerState.assetBuyer;
+    const web3Wrapper = state.providerState.web3Wrapper;
     const account = state.providerState.account;
     const accountAddress = account.state === AccountState.Ready ? account.address : undefined;
+    const accountEthBalanceInWei = account.state === AccountState.Ready ? account.ethBalanceInWei : undefined;
     return {
         accountAddress,
+        accountEthBalanceInWei,
         buyOrderProcessingState: state.buyOrderState.processState,
         assetBuyer,
+        web3Wrapper,
         buyQuote: state.latestBuyQuote,
         affiliateInfo: state.affiliateInfo,
         onViewTransaction: () => {
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 084360629..9b0d80152 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -25,6 +25,7 @@ export enum ActionTypes {
     SET_ACCOUNT_STATE_LOCKED = 'SET_ACCOUNT_STATE_LOCKED',
     SET_ACCOUNT_STATE_ERROR = 'SET_ACCOUNT_STATE_ERROR',
     SET_ACCOUNT_STATE_READY = 'SET_ACCOUNT_STATE_READY',
+    UPDATE_ACCOUNT_ETH_BALANCE = 'UPDATE_ACCOUNT_ETH_BALANCE',
     UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE',
     UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT',
     SET_BUY_ORDER_STATE_NONE = 'SET_BUY_ORDER_STATE_NONE',
@@ -48,6 +49,7 @@ export const actions = {
     setAccountStateLocked: () => createAction(ActionTypes.SET_ACCOUNT_STATE_LOCKED),
     setAccountStateError: () => createAction(ActionTypes.SET_ACCOUNT_STATE_ERROR),
     setAccountStateReady: (address: string) => createAction(ActionTypes.SET_ACCOUNT_STATE_READY, address),
+    updateAccountEthBalance: (balance: BigNumber) => createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, balance),
     updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
     updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
     setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE),
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index e27ec1dc3..862f60e78 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -50,8 +50,24 @@ export const asyncData = {
         if (!_.isEmpty(availableAddresses)) {
             const activeAddress = availableAddresses[0];
             store.dispatch(actions.setAccountStateReady(activeAddress));
+            await asyncData.fetchAccountBalanceAndDispatchToStore(store);
         } else {
             store.dispatch(actions.setAccountStateLocked());
         }
     },
+    fetchAccountBalanceAndDispatchToStore: async (store: Store) => {
+        const { providerState } = store.getState();
+        const web3Wrapper = providerState.web3Wrapper;
+        const account = providerState.account;
+        if (account.state !== AccountState.Ready) {
+            return;
+        }
+        try {
+            const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(account.address);
+            store.dispatch(actions.updateAccountEthBalance(ethBalanceInWei));
+        } catch (e) {
+            // leave balance as is
+            return;
+        }
+    },
 };
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 9bbd114a2..961e29619 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -67,12 +67,25 @@ export const createReducer = (initialState: State) => {
                 return reduceStateWithAccount(state, LOCKED_ACCOUNT);
             case ActionTypes.SET_ACCOUNT_STATE_ERROR:
                 return reduceStateWithAccount(state, ERROR_ACCOUNT);
-            case ActionTypes.SET_ACCOUNT_STATE_READY:
+            case ActionTypes.SET_ACCOUNT_STATE_READY: {
                 const account: AccountReady = {
                     state: AccountState.Ready,
                     address: action.data,
                 };
                 return reduceStateWithAccount(state, account);
+            }
+            case ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE: {
+                const account = state.providerState.account;
+                if (account.state !== AccountState.Ready) {
+                    return state;
+                } else {
+                    const newAccount: AccountReady = {
+                        ...account,
+                        ethBalanceInWei: action.data,
+                    };
+                    return reduceStateWithAccount(state, newAccount);
+                }
+            }
             case ActionTypes.UPDATE_ETH_USD_PRICE:
                 return {
                     ...state,
diff --git a/packages/instant/src/util/balance.ts b/packages/instant/src/util/balance.ts
deleted file mode 100644
index f2271495b..000000000
--- a/packages/instant/src/util/balance.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { BuyQuote } from '@0x/asset-buyer';
-import { Web3Wrapper } from '@0x/web3-wrapper';
-import * as _ from 'lodash';
-
-export const balanceUtil = {
-    hasSufficientEth: async (takerAddress: string | undefined, buyQuote: BuyQuote, web3Wrapper: Web3Wrapper) => {
-        if (_.isUndefined(takerAddress)) {
-            return false;
-        }
-        const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress);
-        return balanceWei.gte(buyQuote.worstCaseQuoteInfo.totalEthAmount);
-    },
-};
-- 
cgit v1.2.3


From c84e163edb329b478749cad09f222cc12e3698fe Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 7 Nov 2018 23:43:37 -0800
Subject: chore(instant): fix lint errors

---
 packages/instant/src/util/provider_state_factory.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts
index 3006c5e14..3281f6bfb 100644
--- a/packages/instant/src/util/provider_state_factory.ts
+++ b/packages/instant/src/util/provider_state_factory.ts
@@ -3,7 +3,7 @@ import { Provider } from 'ethereum-types';
 import * as _ from 'lodash';
 
 import { LOADING_ACCOUNT, NO_ACCOUNT } from '../constants';
-import { AccountNotReady, AccountState, Maybe, Network, OrderSource, ProviderState } from '../types';
+import { Maybe, Network, OrderSource, ProviderState } from '../types';
 
 import { assetBuyerFactory } from './asset_buyer_factory';
 import { providerFactory } from './provider_factory';
-- 
cgit v1.2.3


From 7a99b2099d38906c7b42e96557499cf4cb39985f Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 8 Nov 2018 00:16:46 -0800
Subject: fix(instant): update buy quote at start up in the case of default
 amount

---
 .../src/components/zero_ex_instant_provider.tsx    |  3 +-
 .../selected_erc20_asset_amount_input.ts           | 56 ++--------------------
 packages/instant/src/redux/async_data.ts           | 20 ++++++++
 packages/instant/src/util/buy_quote_updater.ts     | 56 ++++++++++++++++++++++
 4 files changed, 82 insertions(+), 53 deletions(-)
 create mode 100644 packages/instant/src/util/buy_quote_updater.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 1fb5cf64f..cd23014a8 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -92,12 +92,11 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             // tslint:disable-next-line:no-floating-promises
             asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
         }
-
+        asyncData.fetchCurrentBuyQuoteAndDispatchToStore(this._store);
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
         // tslint:disable-next-line:no-floating-promises
         gasPriceEstimator.getGasInfoAsync();
-
         // tslint:disable-next-line:no-floating-promises
         this._flashErrorIfWrongNetwork();
     }
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 784eb4bd0..c550aef04 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -1,20 +1,17 @@
-import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer } from '@0x/asset-buyer';
 import { AssetProxyId } from '@0x/types';
 import { BigNumber } from '@0x/utils';
-import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { oc } from 'ts-optchain';
 
 import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
 import { AffiliateInfo, ERC20Asset, OrderProcessState } from '../types';
-import { assetUtils } from '../util/asset';
-import { errorFlasher } from '../util/error_flasher';
+import { buyQuoteUpdater } from '../util/buy_quote_updater';
 
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
@@ -70,52 +67,9 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
     };
 };
 
-const updateBuyQuoteAsync = async (
-    assetBuyer: AssetBuyer,
-    dispatch: Dispatch<Action>,
-    asset: ERC20Asset,
-    assetAmount: BigNumber,
-    affiliateInfo?: AffiliateInfo,
-): Promise<void> => {
-    // get a new buy quote.
-    const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
-
-    // mark quote as pending
-    dispatch(actions.setQuoteRequestStatePending());
-
-    const feePercentage = oc(affiliateInfo).feePercentage();
-    let newBuyQuote: BuyQuote | undefined;
-    try {
-        newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
-    } catch (error) {
-        dispatch(actions.setQuoteRequestStateFailure());
-        let errorMessage;
-        if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
-            const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
-            errorMessage = `Not enough ${assetName} available`;
-        } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
-            errorMessage = 'Not enough ZRX available';
-        } else if (
-            error.message === AssetBuyerError.StandardRelayerApiError ||
-            error.message.startsWith(AssetBuyerError.AssetUnavailable)
-        ) {
-            const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
-            errorMessage = `${assetName} is currently unavailable`;
-        }
-        if (!_.isUndefined(errorMessage)) {
-            errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
-        } else {
-            throw error;
-        }
-        return;
-    }
-    // We have a successful new buy quote
-    errorFlasher.clearError(dispatch);
-    // invalidate the last buy quote.
-    dispatch(actions.updateLatestBuyQuote(newBuyQuote));
-};
-
-const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
+const debouncedUpdateBuyQuoteAsync = _.debounce(buyQuoteUpdater.updateBuyQuoteAsync.bind(buyQuoteUpdater), 200, {
+    trailing: true,
+});
 
 const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index c3d190af2..839a90778 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -1,7 +1,10 @@
+import { AssetProxyId } from '@0x/types';
 import * as _ from 'lodash';
 
 import { BIG_NUMBER_ZERO } from '../constants';
+import { ERC20Asset } from '../types';
 import { assetUtils } from '../util/asset';
+import { buyQuoteUpdater } from '../util/buy_quote_updater';
 import { coinbaseApi } from '../util/coinbase_api';
 import { errorFlasher } from '../util/error_flasher';
 
@@ -33,4 +36,21 @@ export const asyncData = {
             store.dispatch(actions.setAvailableAssets([]));
         }
     },
+    fetchCurrentBuyQuoteAndDispatchToStore: async (store: Store) => {
+        const { providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
+        const assetBuyer = providerState.assetBuyer;
+        if (
+            !_.isUndefined(selectedAssetAmount) &&
+            !_.isUndefined(selectedAsset) &&
+            selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
+        ) {
+            await buyQuoteUpdater.updateBuyQuoteAsync(
+                assetBuyer,
+                store.dispatch,
+                selectedAsset as ERC20Asset,
+                selectedAssetAmount,
+                affiliateInfo,
+            );
+        }
+    },
 };
diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts
new file mode 100644
index 000000000..e697d3ef7
--- /dev/null
+++ b/packages/instant/src/util/buy_quote_updater.ts
@@ -0,0 +1,56 @@
+import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import * as _ from 'lodash';
+import { Dispatch } from 'redux';
+import { oc } from 'ts-optchain';
+
+import { Action, actions } from '../redux/actions';
+import { AffiliateInfo, ERC20Asset } from '../types';
+import { assetUtils } from '../util/asset';
+import { errorFlasher } from '../util/error_flasher';
+
+export const buyQuoteUpdater = {
+    updateBuyQuoteAsync: async (
+        assetBuyer: AssetBuyer,
+        dispatch: Dispatch<Action>,
+        asset: ERC20Asset,
+        assetAmount: BigNumber,
+        affiliateInfo?: AffiliateInfo,
+    ): Promise<void> => {
+        // get a new buy quote.
+        const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
+        // mark quote as pending
+        dispatch(actions.setQuoteRequestStatePending());
+        const feePercentage = oc(affiliateInfo).feePercentage();
+        let newBuyQuote: BuyQuote | undefined;
+        try {
+            newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
+        } catch (error) {
+            dispatch(actions.setQuoteRequestStateFailure());
+            let errorMessage;
+            if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
+                const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
+                errorMessage = `Not enough ${assetName} available`;
+            } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
+                errorMessage = 'Not enough ZRX available';
+            } else if (
+                error.message === AssetBuyerError.StandardRelayerApiError ||
+                error.message.startsWith(AssetBuyerError.AssetUnavailable)
+            ) {
+                const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
+                errorMessage = `${assetName} is currently unavailable`;
+            }
+            if (!_.isUndefined(errorMessage)) {
+                errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
+            } else {
+                throw error;
+            }
+            return;
+        }
+        // We have a successful new buy quote
+        errorFlasher.clearError(dispatch);
+        // invalidate the last buy quote.
+        dispatch(actions.updateLatestBuyQuote(newBuyQuote));
+    },
+};
-- 
cgit v1.2.3


From a5665a68756c905637c551fc48c9b7011a55c237 Mon Sep 17 00:00:00 2001
From: Remco Bloemen <remco@wicked.ventures>
Date: Thu, 8 Nov 2018 18:31:22 +0100
Subject: Fix isNode

---
 packages/utils/src/configured_bignumber.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/utils/src/configured_bignumber.ts b/packages/utils/src/configured_bignumber.ts
index 56e925c41..8e1491796 100644
--- a/packages/utils/src/configured_bignumber.ts
+++ b/packages/utils/src/configured_bignumber.ts
@@ -14,7 +14,7 @@ BigNumber.config({
 // Set a debug print function for NodeJS
 // Upstream issue: https://github.com/MikeMcl/bignumber.js/issues/188
 import isNode = require('detect-node');
-if (!isNode) {
+if (isNode) {
     // Dynamically load a NodeJS specific module.
     // Typescript requires all imports to be global, so we need to use
     // `const` here and disable the tslint warning.
-- 
cgit v1.2.3


From 8493d619b45d84eedf9f8d349e45a4d3e759c538 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 8 Nov 2018 10:34:36 -0800
Subject: chore(instant): fix linter

---
 packages/instant/src/components/zero_ex_instant_provider.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index cd23014a8..58e78c522 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -92,6 +92,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             // tslint:disable-next-line:no-floating-promises
             asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
         }
+        // tslint:disable-next-line:no-floating-promises
         asyncData.fetchCurrentBuyQuoteAndDispatchToStore(this._store);
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
-- 
cgit v1.2.3


From 689f8f1fbc34b6fa976f95419804f9eee7e637f6 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Thu, 8 Nov 2018 23:48:19 +0100
Subject: Include wholeNumberSchema in sra-spec schemas

---
 packages/sra-spec/src/json-schemas.ts | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'packages')

diff --git a/packages/sra-spec/src/json-schemas.ts b/packages/sra-spec/src/json-schemas.ts
index 9eb32de59..f9342ca9e 100644
--- a/packages/sra-spec/src/json-schemas.ts
+++ b/packages/sra-spec/src/json-schemas.ts
@@ -2,6 +2,7 @@ import { schemas as jsonSchemas } from '@0x/json-schemas';
 
 // Only include schemas we actually need
 const {
+    wholeNumberSchema,
     numberSchema,
     addressSchema,
     hexSchema,
@@ -28,6 +29,7 @@ const {
 } = jsonSchemas;
 
 const usedSchemas = {
+    wholeNumberSchema,
     numberSchema,
     addressSchema,
     hexSchema,
-- 
cgit v1.2.3


From 7acaae37a969339d1b4971f80d7fd842266bb60b Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 8 Nov 2018 14:57:39 -0800
Subject: feat(instant): Heartbeat for updating account info

---
 .../src/components/zero_ex_instant_provider.tsx    | 13 +++++-
 packages/instant/src/constants.ts                  |  1 +
 packages/instant/src/redux/async_data.ts           |  4 +-
 packages/instant/src/util/hearbeats.ts             | 47 ++++++++++++++++++++++
 4 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 packages/instant/src/util/hearbeats.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index fa0588b71..02f14c5b6 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -5,6 +5,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 
+import { ACCOUNT_UPDATE_INTERVAL_TIME_MS } from '../constants';
 import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
 import { asyncData } from '../redux/async_data';
 import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer';
@@ -14,6 +15,7 @@ import { AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
+import { AccountUpdateHeartbeat } from '../util/hearbeats';
 import { providerStateFactory } from '../util/provider_state_factory';
 
 fonts.include();
@@ -37,6 +39,7 @@ export interface ZeroExInstantProviderOptionalProps {
 
 export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
     private readonly _store: Store;
+    private _accountUpdateHeartbeat?: AccountUpdateHeartbeat;
     // TODO(fragosti): Write tests for this beast once we inject a provider.
     private static _mergeDefaultStateWithProps(
         props: ZeroExInstantProviderProps,
@@ -93,7 +96,10 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
         }
         // tslint:disable-next-line:no-floating-promises
-        asyncData.fetchAccountInfoAndDispatchToStore(this._store);
+        // asyncData.fetchAccountInfoAndDispatchToStore(this._store);
+        this._accountUpdateHeartbeat = new AccountUpdateHeartbeat();
+        this._accountUpdateHeartbeat.start(this._store, ACCOUNT_UPDATE_INTERVAL_TIME_MS);
+
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
         // tslint:disable-next-line:no-floating-promises
@@ -101,6 +107,11 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
         // tslint:disable-next-line:no-floating-promises
         this._flashErrorIfWrongNetwork();
     }
+    public componentWillUnmount(): void {
+        if (this._accountUpdateHeartbeat) {
+            this._accountUpdateHeartbeat.stop();
+        }
+    }
     public render(): React.ReactNode {
         return (
             <ReduxProvider store={this._store}>
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 705313ce7..d0a86c780 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -10,6 +10,7 @@ export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction fa
 export const GWEI_IN_WEI = new BigNumber(1000000000);
 export const ONE_SECOND_MS = 1000;
 export const ONE_MINUTE_MS = ONE_SECOND_MS * 60;
+export const ACCOUNT_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 15;
 export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
 export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = ONE_MINUTE_MS * 2;
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index 862f60e78..055d3de20 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -34,10 +34,10 @@ export const asyncData = {
             store.dispatch(actions.setAvailableAssets([]));
         }
     },
-    fetchAccountInfoAndDispatchToStore: async (store: Store) => {
+    fetchAccountInfoAndDispatchToStore: async (store: Store, options = { setLoading: true }) => {
         const { providerState } = store.getState();
         const web3Wrapper = providerState.web3Wrapper;
-        if (providerState.account.state !== AccountState.Loading) {
+        if (options.setLoading && providerState.account.state !== AccountState.Loading) {
             store.dispatch(actions.setAccountStateLoading());
         }
         let availableAddresses: string[];
diff --git a/packages/instant/src/util/hearbeats.ts b/packages/instant/src/util/hearbeats.ts
new file mode 100644
index 000000000..19b448bef
--- /dev/null
+++ b/packages/instant/src/util/hearbeats.ts
@@ -0,0 +1,47 @@
+import * as _ from 'lodash';
+
+import { asyncData } from './../redux/async_data';
+import { Store } from './../redux/store';
+
+export class AccountUpdateHeartbeat {
+    private _intervalId?: number;
+    private _pendingRequest?: boolean;
+    private _store?: Store;
+
+    public start(store: Store, intervalTimeMs: number): void {
+        if (!_.isUndefined(this._intervalId)) {
+            throw new Error('Heartbeat is running, please stop before restarting');
+        }
+        this._store = store;
+        // Kick off initial first request
+        this._performActionAsync(true);
+        // Set interval for heartbeat
+        this._intervalId = window.setInterval(this._performActionAsync.bind(this, false), intervalTimeMs);
+    }
+
+    public stop(): void {
+        if (!_.isUndefined(this._intervalId)) {
+            window.clearInterval(this._intervalId);
+            this._resetState();
+        }
+    }
+
+    private _resetState(): void {
+        this._intervalId = undefined;
+        this._pendingRequest = false;
+        this._store = undefined;
+    }
+
+    private async _performActionAsync(setLoading: boolean): Promise<void> {
+        if (this._pendingRequest || _.isUndefined(this._store)) {
+            return;
+        }
+
+        this._pendingRequest = true;
+        try {
+            await asyncData.fetchAccountInfoAndDispatchToStore(this._store, { setLoading });
+        } finally {
+            this._pendingRequest = false;
+        }
+    }
+}
-- 
cgit v1.2.3


From 624f5cee8dd4a21e7becd5664f47f5780ade7e69 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 8 Nov 2018 15:01:59 -0800
Subject: linting

---
 packages/instant/src/util/hearbeats.ts | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages')

diff --git a/packages/instant/src/util/hearbeats.ts b/packages/instant/src/util/hearbeats.ts
index 19b448bef..78ab86360 100644
--- a/packages/instant/src/util/hearbeats.ts
+++ b/packages/instant/src/util/hearbeats.ts
@@ -14,6 +14,7 @@ export class AccountUpdateHeartbeat {
         }
         this._store = store;
         // Kick off initial first request
+        // tslint:disable-next-line:no-floating-promises
         this._performActionAsync(true);
         // Set interval for heartbeat
         this._intervalId = window.setInterval(this._performActionAsync.bind(this, false), intervalTimeMs);
-- 
cgit v1.2.3


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 v1.2.3


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 v1.2.3


From dfef33bc41221c3f0f38d7e1c3e4163455b98b79 Mon Sep 17 00:00:00 2001
From: Remco Bloemen <remco@wicked.ventures>
Date: Fri, 9 Nov 2018 00:19:11 +0100
Subject: Added more comments

---
 packages/utils/src/configured_bignumber.ts | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'packages')

diff --git a/packages/utils/src/configured_bignumber.ts b/packages/utils/src/configured_bignumber.ts
index 8e1491796..34b57d303 100644
--- a/packages/utils/src/configured_bignumber.ts
+++ b/packages/utils/src/configured_bignumber.ts
@@ -22,7 +22,12 @@ if (isNode) {
     const util = require('util');
 
     // Set a custom util.inspect function
+    // HACK: We add a function to the BigNumber class by assigning to the
+    //       prototype. The function name is a symbol provided by Node.
     (BigNumber.prototype as any)[util.inspect.custom] = function(): string {
+        // HACK: When executed, `this` will refer to the BigNumber instance.
+        //       This is also why we need a function expression instead of an
+        //       arrow function, as the latter does not have a `this`.
         // Return the readable string representation
         // tslint:disable-next-line: no-invalid-this
         return this.toString();
-- 
cgit v1.2.3


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 v1.2.3


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 v1.2.3


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 v1.2.3


From 117e2f583ff44bdb63340a2134edea0f3ecb77b3 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve@0xproject.com>
Date: Thu, 8 Nov 2018 15:37:56 -0800
Subject: [instant] Viewport specific errors (#1228)

feat(instant): Shows different error animation based on viewport
---
 .../components/animations/position_animation.tsx   | 66 +++++++++++++++-------
 .../src/components/animations/slide_animation.tsx  | 12 ++--
 packages/instant/src/components/sliding_error.tsx  | 37 ++++++++++--
 packages/instant/src/components/sliding_panel.tsx  |  3 +-
 packages/instant/src/components/ui/container.tsx   |  6 +-
 .../src/components/zero_ex_instant_container.tsx   |  2 +-
 packages/instant/src/style/media.ts                | 38 ++++++++-----
 packages/instant/src/style/z_index.ts              |  3 +-
 8 files changed, 118 insertions(+), 49 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index 4bb21befb..576d29c07 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -1,5 +1,6 @@
-import { Keyframes } from 'styled-components';
+import { InterpolationValue } from 'styled-components';
 
+import { media, OptionallyScreenSpecific, stylesForMedia } from '../../style/media';
 import { css, keyframes, styled } from '../../style/theme';
 
 export interface TransitionInfo {
@@ -51,30 +52,57 @@ export interface PositionAnimationSettings {
     right?: TransitionInfo;
     timingFunction: string;
     duration?: string;
+    position?: string;
 }
 
-export interface PositionAnimationProps extends PositionAnimationSettings {
-    position: string;
+const generatePositionAnimationCss = (positionSettings: PositionAnimationSettings) => {
+    return css`
+        animation-name: ${slideKeyframeGenerator(
+            positionSettings.position || 'relative',
+            positionSettings.top,
+            positionSettings.bottom,
+            positionSettings.left,
+            positionSettings.right,
+        )};
+        animation-duration: ${positionSettings.duration || '0.3s'};
+        animation-timing-function: ${positionSettings.timingFunction};
+        animation-delay: 0s;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+        position: ${positionSettings.position || 'relative'};
+        width: 100%;
+    `;
+};
+
+export interface PositionAnimationProps {
+    positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
+    zIndex?: OptionallyScreenSpecific<number>;
 }
 
+const defaultAnimation = (positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>) => {
+    const bestDefault = 'default' in positionSettings ? positionSettings.default : positionSettings;
+    return generatePositionAnimationCss(bestDefault);
+};
+const animationForSize = (
+    positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>,
+    sizeKey: 'sm' | 'md' | 'lg',
+    mediaFn: (...args: any[]) => InterpolationValue[],
+) => {
+    // checking default makes sure we have a PositionAnimationSettings object
+    // and then we check to see if we have a setting for the specific `sizeKey`
+    const animationSettingsForSize = 'default' in positionSettings && positionSettings[sizeKey];
+    return animationSettingsForSize && mediaFn`${generatePositionAnimationCss(animationSettingsForSize)}`;
+};
+
 export const PositionAnimation =
     styled.div <
     PositionAnimationProps >
     `
-    animation-name: ${props =>
-        css`
-            ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)};
-        `};
-    animation-duration: ${props => props.duration || '0.3s'};
-    animation-timing-function: ${props => props.timingFunction};
-    animation-delay: 0s;
-    animation-iteration-count: 1;
-    animation-fill-mode: forwards;
-    position: ${props => props.position};
-    height: 100%;
-    width: 100%;
+    && {
+        ${props => props.zIndex && stylesForMedia<number>('z-index', props.zIndex)}
+        ${props => defaultAnimation(props.positionSettings)}
+        ${props => animationForSize(props.positionSettings, 'sm', media.small)}
+        ${props => animationForSize(props.positionSettings, 'md', media.medium)}
+        ${props => animationForSize(props.positionSettings, 'lg', media.large)}
+    }
 `;
-
-PositionAnimation.defaultProps = {
-    position: 'relative',
-};
diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index 66a314c7f..122229dee 100644
--- a/packages/instant/src/components/animations/slide_animation.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -1,22 +1,24 @@
 import * as React from 'react';
 
+import { OptionallyScreenSpecific } from '../../style/media';
+
 import { PositionAnimation, PositionAnimationSettings } from './position_animation';
 
 export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
 export interface SlideAnimationProps {
-    position: string;
     animationState: SlideAnimationState;
-    slideInSettings: PositionAnimationSettings;
-    slideOutSettings: PositionAnimationSettings;
+    slideInSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
+    slideOutSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
+    zIndex?: OptionallyScreenSpecific<number>;
 }
 
 export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
     if (props.animationState === 'none') {
         return <React.Fragment>{props.children}</React.Fragment>;
     }
-    const propsToUse = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings;
+    const positionSettings = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings;
     return (
-        <PositionAnimation position={props.position} {...propsToUse}>
+        <PositionAnimation positionSettings={positionSettings} zIndex={props.zIndex}>
             {props.children}
         </PositionAnimation>
     );
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index a923b9932..462199d78 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 
+import { ScreenSpecification } from '../style/media';
 import { ColorOption } from '../style/theme';
+import { zIndex } from '../style/z_index';
 
 import { PositionAnimationSettings } from './animations/position_animation';
 import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
@@ -21,6 +23,7 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
         backgroundColor={ColorOption.lightOrange}
         width="100%"
         borderRadius="6px"
+        marginTop="10px"
         marginBottom="10px"
     >
         <Flex justify="flex-start">
@@ -39,25 +42,51 @@ export interface SlidingErrorProps extends ErrorProps {
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
     const slideAmount = '120px';
-    const slideUpSettings: PositionAnimationSettings = {
+
+    const desktopSlideIn: PositionAnimationSettings = {
         timingFunction: 'ease-in',
         top: {
             from: slideAmount,
             to: '0px',
         },
+        position: 'relative',
     };
-    const slideDownSettings: PositionAnimationSettings = {
+    const desktopSlideOut: PositionAnimationSettings = {
         timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
         top: {
             from: '0px',
             to: slideAmount,
         },
+        position: 'relative',
+    };
+
+    const mobileSlideIn: PositionAnimationSettings = {
+        duration: '0.5s',
+        timingFunction: 'ease-in',
+        top: { from: '-120px', to: '0px' },
+        position: 'fixed',
+    };
+    const moblieSlideOut: PositionAnimationSettings = {
+        duration: '0.5s',
+        timingFunction: 'ease-in',
+        top: { from: '0px', to: '-120px' },
+        position: 'fixed',
+    };
+
+    const slideUpSettings: ScreenSpecification<PositionAnimationSettings> = {
+        default: desktopSlideIn,
+        sm: mobileSlideIn,
     };
+    const slideOutSettings: ScreenSpecification<PositionAnimationSettings> = {
+        default: desktopSlideOut,
+        sm: moblieSlideOut,
+    };
+
     return (
         <SlideAnimation
-            position="relative"
             slideInSettings={slideUpSettings}
-            slideOutSettings={slideDownSettings}
+            slideOutSettings={slideOutSettings}
+            zIndex={{ sm: zIndex.errorPopUp, default: zIndex.errorPopBehind }}
             animationState={props.animationState}
         >
             <Error icon={props.icon} message={props.message} />
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 7ef28e09c..a5d15c401 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -51,6 +51,7 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
             from: slideAmount,
             to: '0px',
         },
+        position: 'absolute',
     };
     const slideDownSettings: PositionAnimationSettings = {
         duration: '0.3s',
@@ -59,10 +60,10 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
             from: '0px',
             to: slideAmount,
         },
+        position: 'absolute',
     };
     return (
         <SlideAnimation
-            position="absolute"
             slideInSettings={slideUpSettings}
             slideOutSettings={slideDownSettings}
             animationState={animationState}
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index bffa1d7d4..c42082ed5 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -67,9 +67,9 @@ export const Container =
         ${props => cssRuleIfExists(props, 'cursor')}
         ${props => cssRuleIfExists(props, 'overflow')}
         ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
-        ${props => props.display && stylesForMedia('display', props.display)}
-        ${props => (props.width ? stylesForMedia('width', props.width) : '')}
-        ${props => (props.height ? stylesForMedia('height', props.height) : '')}
+        ${props => props.display && stylesForMedia<string>('display', props.display)}
+        ${props => props.width && stylesForMedia<string>('width', props.width)}
+        ${props => props.height && stylesForMedia<string>('height', props.height)}
         background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
         border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
         &:hover {
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index f5f8adefe..d2216b54f 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -35,7 +35,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                     height={{ default: 'auto', sm: '100%' }}
                     position="relative"
                 >
-                    <Container zIndex={zIndex.errorPopup} position="relative">
+                    <Container position="relative">
                         <LatestError />
                     </Container>
                     <Container
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index beabbac46..5e7aaba37 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -14,30 +14,38 @@ const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) =>
     }
 `;
 
-const media = {
+export const media = {
     small: generateMediaWrapper(ScreenWidths.Sm),
     medium: generateMediaWrapper(ScreenWidths.Md),
     large: generateMediaWrapper(ScreenWidths.Lg),
 };
 
-export interface ScreenSpecifications {
-    default: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
+export interface ScreenSpecification<T> {
+    default: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
 }
-export type MediaChoice = string | ScreenSpecifications;
-export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => {
-    if (typeof choice === 'string') {
+export type OptionallyScreenSpecific<T> = T | ScreenSpecification<T>;
+export type MediaChoice = OptionallyScreenSpecific<string>;
+/**
+ * Given a css property name and a OptionallyScreenSpecific value,
+ * generates css properties with screen-specific viewport styling
+ */
+export function stylesForMedia<T extends string | number>(
+    cssPropertyName: string,
+    choice: OptionallyScreenSpecific<T>,
+): InterpolationValue[] {
+    if (typeof choice === 'object') {
         return css`
-            ${cssPropertyName}: ${choice};
-        `;
-    }
-
-    return css`
         ${cssPropertyName}: ${choice.default};
         ${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`}
         ${choice.md && media.medium`${cssPropertyName}: ${choice.md}`}
         ${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`}
     `;
-};
+    } else {
+        return css`
+            ${cssPropertyName}: ${choice};
+        `;
+    }
+}
diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts
index 727a5189d..03623f044 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,
+    errorPopBehind: 1,
     mainContainer: 2,
     panel: 3,
+    errorPopUp: 4,
 };
-- 
cgit v1.2.3


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 v1.2.3


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 v1.2.3


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 v1.2.3


From dd4d3b10cf8c0bb08f981128232d3663d01806eb Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 8 Nov 2018 16:14:00 -0800
Subject: wip: abstract out updating buy quote

---
 .../selected_erc20_asset_amount_input.ts           | 43 ++---------------
 packages/instant/src/util/buy_quote_fetcher.ts     | 55 ++++++++++++++++++++++
 2 files changed, 59 insertions(+), 39 deletions(-)
 create mode 100644 packages/instant/src/util/buy_quote_fetcher.ts

(limited to 'packages')

diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 784eb4bd0..97fb073aa 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -1,20 +1,17 @@
-import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer } from '@0x/asset-buyer';
 import { AssetProxyId } from '@0x/types';
 import { BigNumber } from '@0x/utils';
-import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { oc } from 'ts-optchain';
 
 import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
 import { AffiliateInfo, ERC20Asset, OrderProcessState } from '../types';
-import { assetUtils } from '../util/asset';
-import { errorFlasher } from '../util/error_flasher';
+import { updateBuyQuoteOrFlashErrorAsync } from '../util/buy_quote_fetcher';
 
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
@@ -77,42 +74,10 @@ const updateBuyQuoteAsync = async (
     assetAmount: BigNumber,
     affiliateInfo?: AffiliateInfo,
 ): Promise<void> => {
-    // get a new buy quote.
-    const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
-
     // mark quote as pending
     dispatch(actions.setQuoteRequestStatePending());
-
-    const feePercentage = oc(affiliateInfo).feePercentage();
-    let newBuyQuote: BuyQuote | undefined;
-    try {
-        newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
-    } catch (error) {
-        dispatch(actions.setQuoteRequestStateFailure());
-        let errorMessage;
-        if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
-            const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
-            errorMessage = `Not enough ${assetName} available`;
-        } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
-            errorMessage = 'Not enough ZRX available';
-        } else if (
-            error.message === AssetBuyerError.StandardRelayerApiError ||
-            error.message.startsWith(AssetBuyerError.AssetUnavailable)
-        ) {
-            const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
-            errorMessage = `${assetName} is currently unavailable`;
-        }
-        if (!_.isUndefined(errorMessage)) {
-            errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
-        } else {
-            throw error;
-        }
-        return;
-    }
-    // We have a successful new buy quote
-    errorFlasher.clearError(dispatch);
-    // invalidate the last buy quote.
-    dispatch(actions.updateLatestBuyQuote(newBuyQuote));
+    // kick of buy quote
+    updateBuyQuoteOrFlashErrorAsync(assetBuyer, asset, assetAmount, dispatch, affiliateInfo);
 };
 
 const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
diff --git a/packages/instant/src/util/buy_quote_fetcher.ts b/packages/instant/src/util/buy_quote_fetcher.ts
new file mode 100644
index 000000000..c3e65cbc3
--- /dev/null
+++ b/packages/instant/src/util/buy_quote_fetcher.ts
@@ -0,0 +1,55 @@
+// TODO: rename file and export object
+import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import * as _ from 'lodash';
+import { Dispatch } from 'redux';
+import { oc } from 'ts-optchain';
+
+import { Action, actions } from '../redux/actions';
+import { AffiliateInfo, ERC20Asset } from '../types';
+import { assetUtils } from '../util/asset';
+
+import { errorFlasher } from './error_flasher';
+
+export const updateBuyQuoteOrFlashErrorAsync = async (
+    assetBuyer: AssetBuyer,
+    asset: ERC20Asset,
+    assetAmount: BigNumber,
+    dispatch: Dispatch<Action>,
+    affiliateInfo?: AffiliateInfo,
+) => {
+    // get a new buy quote.
+    const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
+
+    const feePercentage = oc(affiliateInfo).feePercentage();
+    let newBuyQuote: BuyQuote | undefined;
+    try {
+        newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
+    } catch (error) {
+        dispatch(actions.setQuoteRequestStateFailure());
+        let errorMessage;
+        if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
+            const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
+            errorMessage = `Not enough ${assetName} available`;
+        } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
+            errorMessage = 'Not enough ZRX available';
+        } else if (
+            error.message === AssetBuyerError.StandardRelayerApiError ||
+            error.message.startsWith(AssetBuyerError.AssetUnavailable)
+        ) {
+            const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
+            errorMessage = `${assetName} is currently unavailable`;
+        }
+        if (!_.isUndefined(errorMessage)) {
+            errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
+        } else {
+            throw error;
+        }
+        return;
+    }
+    // We have a successful new buy quote
+    errorFlasher.clearError(dispatch);
+    // invalidate the last buy quote.
+    dispatch(actions.updateLatestBuyQuote(newBuyQuote));
+};
-- 
cgit v1.2.3


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 v1.2.3


From 87557373448ec71bbca9fcdee69c867052f2ad3c Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Fri, 9 Nov 2018 11:15:23 +1100
Subject: fix: Lock Ledger hw-transport to 4.24.0

---
 packages/subproviders/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/subproviders/package.json b/packages/subproviders/package.json
index 32e2bae24..3b4313004 100644
--- a/packages/subproviders/package.json
+++ b/packages/subproviders/package.json
@@ -35,7 +35,7 @@
         "@0x/utils": "^2.0.3",
         "@0x/web3-wrapper": "^3.1.0",
         "@ledgerhq/hw-app-eth": "^4.3.0",
-        "@ledgerhq/hw-transport-u2f": "^4.3.0",
+        "@ledgerhq/hw-transport-u2f": "4.24.0",
         "@types/eth-lightwallet": "^3.0.0",
         "@types/ganache-core": "^2.1.0",
         "@types/hdkey": "^0.7.0",
-- 
cgit v1.2.3


From e45b6c7e98a33de0e13f4ab7db8b630900dbb960 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 8 Nov 2018 16:54:45 -0800
Subject: Make heartbeat more generic

---
 .../src/components/zero_ex_instant_provider.tsx    |  9 +++--
 packages/instant/src/util/hearbeats.ts             | 43 ++++++++++++----------
 2 files changed, 29 insertions(+), 23 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 02f14c5b6..1805a11af 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -15,7 +15,7 @@ import { AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
-import { AccountUpdateHeartbeat } from '../util/hearbeats';
+import { generateAccountHeartbeater, Heartbeater } from '../util/hearbeats';
 import { providerStateFactory } from '../util/provider_state_factory';
 
 fonts.include();
@@ -39,7 +39,7 @@ export interface ZeroExInstantProviderOptionalProps {
 
 export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
     private readonly _store: Store;
-    private _accountUpdateHeartbeat?: AccountUpdateHeartbeat;
+    private _accountUpdateHeartbeat?: Heartbeater;
     // TODO(fragosti): Write tests for this beast once we inject a provider.
     private static _mergeDefaultStateWithProps(
         props: ZeroExInstantProviderProps,
@@ -97,8 +97,9 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
         }
         // tslint:disable-next-line:no-floating-promises
         // asyncData.fetchAccountInfoAndDispatchToStore(this._store);
-        this._accountUpdateHeartbeat = new AccountUpdateHeartbeat();
-        this._accountUpdateHeartbeat.start(this._store, ACCOUNT_UPDATE_INTERVAL_TIME_MS);
+
+        this._accountUpdateHeartbeat = generateAccountHeartbeater(this._store);
+        this._accountUpdateHeartbeat.start(ACCOUNT_UPDATE_INTERVAL_TIME_MS);
 
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
diff --git a/packages/instant/src/util/hearbeats.ts b/packages/instant/src/util/hearbeats.ts
index 78ab86360..443fd13ec 100644
--- a/packages/instant/src/util/hearbeats.ts
+++ b/packages/instant/src/util/hearbeats.ts
@@ -1,48 +1,53 @@
+// TODO: rename file
+
 import * as _ from 'lodash';
 
 import { asyncData } from './../redux/async_data';
 import { Store } from './../redux/store';
 
-export class AccountUpdateHeartbeat {
+type HeartbeatableFunction = () => Promise<void>;
+export class Heartbeater {
     private _intervalId?: number;
-    private _pendingRequest?: boolean;
-    private _store?: Store;
+    private _pendingRequest: boolean;
+    private _performingFunctionAsync: HeartbeatableFunction;
+
+    public constructor(_performingFunctionAsync: HeartbeatableFunction) {
+        this._performingFunctionAsync = _performingFunctionAsync;
+        this._pendingRequest = false;
+    }
 
-    public start(store: Store, intervalTimeMs: number): void {
+    public start(intervalTimeMs: number): void {
         if (!_.isUndefined(this._intervalId)) {
             throw new Error('Heartbeat is running, please stop before restarting');
         }
-        this._store = store;
-        // Kick off initial first request
-        // tslint:disable-next-line:no-floating-promises
-        this._performActionAsync(true);
-        // Set interval for heartbeat
-        this._intervalId = window.setInterval(this._performActionAsync.bind(this, false), intervalTimeMs);
+        this._trackAndPerformAsync();
+        this._intervalId = window.setInterval(this._trackAndPerformAsync.bind(this), intervalTimeMs);
     }
 
     public stop(): void {
-        if (!_.isUndefined(this._intervalId)) {
+        if (this._intervalId) {
             window.clearInterval(this._intervalId);
-            this._resetState();
         }
-    }
-
-    private _resetState(): void {
         this._intervalId = undefined;
         this._pendingRequest = false;
-        this._store = undefined;
     }
 
-    private async _performActionAsync(setLoading: boolean): Promise<void> {
-        if (this._pendingRequest || _.isUndefined(this._store)) {
+    private async _trackAndPerformAsync(): Promise<void> {
+        if (this._pendingRequest) {
             return;
         }
 
         this._pendingRequest = true;
         try {
-            await asyncData.fetchAccountInfoAndDispatchToStore(this._store, { setLoading });
+            this._performingFunctionAsync();
         } finally {
             this._pendingRequest = false;
         }
     }
 }
+
+export const generateAccountHeartbeater = (store: Store): Heartbeater => {
+    return new Heartbeater(async () => {
+        await asyncData.fetchAccountInfoAndDispatchToStore(store, { setLoading: false });
+    });
+};
-- 
cgit v1.2.3


From 1e39d56cf751fd922d6fec86ecc8bc70b20bc6bb Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 8 Nov 2018 17:09:26 -0800
Subject: wip: BuyQuote heartbeat

---
 .../src/components/zero_ex_instant_provider.tsx        | 13 +++++++++++--
 packages/instant/src/constants.ts                      |  1 +
 packages/instant/src/util/buy_quote_fetcher.ts         | 18 ++++++++++++++++++
 packages/instant/src/util/hearbeats.ts                 | 18 +++++++++++++++---
 4 files changed, 45 insertions(+), 5 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 1805a11af..24ae0c4b6 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -5,7 +5,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 
-import { ACCOUNT_UPDATE_INTERVAL_TIME_MS } from '../constants';
+import { ACCOUNT_UPDATE_INTERVAL_TIME_MS, BUY_QUOTE_UPDATE_INTERVAL_TIME_MS } from '../constants';
 import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
 import { asyncData } from '../redux/async_data';
 import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer';
@@ -15,7 +15,7 @@ import { AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
-import { generateAccountHeartbeater, Heartbeater } from '../util/hearbeats';
+import { generateAccountHeartbeater, Heartbeater, generateBuyQuoteHeartbeater } from '../util/hearbeats';
 import { providerStateFactory } from '../util/provider_state_factory';
 
 fonts.include();
@@ -40,6 +40,8 @@ export interface ZeroExInstantProviderOptionalProps {
 export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
     private readonly _store: Store;
     private _accountUpdateHeartbeat?: Heartbeater;
+    private _buyQuoteHeartbeat?: Heartbeater;
+
     // TODO(fragosti): Write tests for this beast once we inject a provider.
     private static _mergeDefaultStateWithProps(
         props: ZeroExInstantProviderProps,
@@ -101,6 +103,10 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
         this._accountUpdateHeartbeat = generateAccountHeartbeater(this._store);
         this._accountUpdateHeartbeat.start(ACCOUNT_UPDATE_INTERVAL_TIME_MS);
 
+        // TODO assign and stop on unmount
+        this._buyQuoteHeartbeat = generateBuyQuoteHeartbeater(this._store);
+        this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS);
+
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
         // tslint:disable-next-line:no-floating-promises
@@ -112,6 +118,9 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
         if (this._accountUpdateHeartbeat) {
             this._accountUpdateHeartbeat.stop();
         }
+        if (this._buyQuoteHeartbeat) {
+            this._buyQuoteHeartbeat.stop();
+        }
     }
     public render(): React.ReactNode {
         return (
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index d0a86c780..dfbd0ccdf 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -11,6 +11,7 @@ export const GWEI_IN_WEI = new BigNumber(1000000000);
 export const ONE_SECOND_MS = 1000;
 export const ONE_MINUTE_MS = ONE_SECOND_MS * 60;
 export const ACCOUNT_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 15;
+export const BUY_QUOTE_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 15;
 export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
 export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = ONE_MINUTE_MS * 2;
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
diff --git a/packages/instant/src/util/buy_quote_fetcher.ts b/packages/instant/src/util/buy_quote_fetcher.ts
index c3e65cbc3..cc8aac0fa 100644
--- a/packages/instant/src/util/buy_quote_fetcher.ts
+++ b/packages/instant/src/util/buy_quote_fetcher.ts
@@ -1,5 +1,6 @@
 // TODO: rename file and export object
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { AssetProxyId } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
@@ -7,6 +8,7 @@ import { Dispatch } from 'redux';
 import { oc } from 'ts-optchain';
 
 import { Action, actions } from '../redux/actions';
+import { State } from '../redux/reducer';
 import { AffiliateInfo, ERC20Asset } from '../types';
 import { assetUtils } from '../util/asset';
 
@@ -53,3 +55,19 @@ export const updateBuyQuoteOrFlashErrorAsync = async (
     // invalidate the last buy quote.
     dispatch(actions.updateLatestBuyQuote(newBuyQuote));
 };
+
+export const updateBuyQuoteOrFlashErrorAsyncForState = async (state: State, dispatch: Dispatch<Action>) => {
+    const { selectedAsset, selectedAssetAmount, affiliateInfo } = state;
+    const assetBuyer = state.providerState.assetBuyer;
+
+    if (selectedAsset && selectedAssetAmount && selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20) {
+        // TODO: maybe dont do in the case of an error showing
+        updateBuyQuoteOrFlashErrorAsync(
+            assetBuyer,
+            selectedAsset as ERC20Asset, // TODO: better way to do this?
+            selectedAssetAmount,
+            dispatch,
+            affiliateInfo,
+        );
+    }
+};
diff --git a/packages/instant/src/util/hearbeats.ts b/packages/instant/src/util/hearbeats.ts
index 443fd13ec..ecd7c5068 100644
--- a/packages/instant/src/util/hearbeats.ts
+++ b/packages/instant/src/util/hearbeats.ts
@@ -1,9 +1,14 @@
 // TODO: rename file
 
 import * as _ from 'lodash';
+import { Dispatch } from 'redux';
 
-import { asyncData } from './../redux/async_data';
-import { Store } from './../redux/store';
+import { Action } from '../redux/actions';
+import { asyncData } from '../redux/async_data';
+import { State } from '../redux/reducer';
+import { Store } from '../redux/store';
+
+import { updateBuyQuoteOrFlashErrorAsyncForState } from './buy_quote_fetcher';
 
 type HeartbeatableFunction = () => Promise<void>;
 export class Heartbeater {
@@ -39,7 +44,7 @@ export class Heartbeater {
 
         this._pendingRequest = true;
         try {
-            this._performingFunctionAsync();
+            await this._performingFunctionAsync();
         } finally {
             this._pendingRequest = false;
         }
@@ -51,3 +56,10 @@ export const generateAccountHeartbeater = (store: Store): Heartbeater => {
         await asyncData.fetchAccountInfoAndDispatchToStore(store, { setLoading: false });
     });
 };
+
+export const generateBuyQuoteHeartbeater = (store: Store): Heartbeater => {
+    return new Heartbeater(async () => {
+        await updateBuyQuoteOrFlashErrorAsyncForState(store.getState(), store.dispatch);
+        return Promise.resolve();
+    });
+};
-- 
cgit v1.2.3


From 297a62fe80142897250f6dd6fddb4cdf1d3fe3ee Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 8 Nov 2018 17:13:22 -0800
Subject: move files around and rename

---
 .../src/components/zero_ex_instant_provider.tsx    |  3 +-
 packages/instant/src/util/hearbeats.ts             | 65 ----------------------
 packages/instant/src/util/heartbeater.ts           | 42 ++++++++++++++
 packages/instant/src/util/heartbeater_factory.ts   | 18 ++++++
 4 files changed, 62 insertions(+), 66 deletions(-)
 delete mode 100644 packages/instant/src/util/hearbeats.ts
 create mode 100644 packages/instant/src/util/heartbeater.ts
 create mode 100644 packages/instant/src/util/heartbeater_factory.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 24ae0c4b6..bbc20dab6 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -15,7 +15,8 @@ import { AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
-import { generateAccountHeartbeater, Heartbeater, generateBuyQuoteHeartbeater } from '../util/hearbeats';
+import { Heartbeater } from '../util/heartbeater';
+import { generateAccountHeartbeater, generateBuyQuoteHeartbeater } from '../util/heartbeater_factory';
 import { providerStateFactory } from '../util/provider_state_factory';
 
 fonts.include();
diff --git a/packages/instant/src/util/hearbeats.ts b/packages/instant/src/util/hearbeats.ts
deleted file mode 100644
index ecd7c5068..000000000
--- a/packages/instant/src/util/hearbeats.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-// TODO: rename file
-
-import * as _ from 'lodash';
-import { Dispatch } from 'redux';
-
-import { Action } from '../redux/actions';
-import { asyncData } from '../redux/async_data';
-import { State } from '../redux/reducer';
-import { Store } from '../redux/store';
-
-import { updateBuyQuoteOrFlashErrorAsyncForState } from './buy_quote_fetcher';
-
-type HeartbeatableFunction = () => Promise<void>;
-export class Heartbeater {
-    private _intervalId?: number;
-    private _pendingRequest: boolean;
-    private _performingFunctionAsync: HeartbeatableFunction;
-
-    public constructor(_performingFunctionAsync: HeartbeatableFunction) {
-        this._performingFunctionAsync = _performingFunctionAsync;
-        this._pendingRequest = false;
-    }
-
-    public start(intervalTimeMs: number): void {
-        if (!_.isUndefined(this._intervalId)) {
-            throw new Error('Heartbeat is running, please stop before restarting');
-        }
-        this._trackAndPerformAsync();
-        this._intervalId = window.setInterval(this._trackAndPerformAsync.bind(this), intervalTimeMs);
-    }
-
-    public stop(): void {
-        if (this._intervalId) {
-            window.clearInterval(this._intervalId);
-        }
-        this._intervalId = undefined;
-        this._pendingRequest = false;
-    }
-
-    private async _trackAndPerformAsync(): Promise<void> {
-        if (this._pendingRequest) {
-            return;
-        }
-
-        this._pendingRequest = true;
-        try {
-            await this._performingFunctionAsync();
-        } finally {
-            this._pendingRequest = false;
-        }
-    }
-}
-
-export const generateAccountHeartbeater = (store: Store): Heartbeater => {
-    return new Heartbeater(async () => {
-        await asyncData.fetchAccountInfoAndDispatchToStore(store, { setLoading: false });
-    });
-};
-
-export const generateBuyQuoteHeartbeater = (store: Store): Heartbeater => {
-    return new Heartbeater(async () => {
-        await updateBuyQuoteOrFlashErrorAsyncForState(store.getState(), store.dispatch);
-        return Promise.resolve();
-    });
-};
diff --git a/packages/instant/src/util/heartbeater.ts b/packages/instant/src/util/heartbeater.ts
new file mode 100644
index 000000000..c5a823953
--- /dev/null
+++ b/packages/instant/src/util/heartbeater.ts
@@ -0,0 +1,42 @@
+import * as _ from 'lodash';
+
+type HeartbeatableFunction = () => Promise<void>;
+export class Heartbeater {
+    private _intervalId?: number;
+    private _pendingRequest: boolean;
+    private _performingFunctionAsync: HeartbeatableFunction;
+
+    public constructor(_performingFunctionAsync: HeartbeatableFunction) {
+        this._performingFunctionAsync = _performingFunctionAsync;
+        this._pendingRequest = false;
+    }
+
+    public start(intervalTimeMs: number): void {
+        if (!_.isUndefined(this._intervalId)) {
+            throw new Error('Heartbeat is running, please stop before restarting');
+        }
+        this._trackAndPerformAsync();
+        this._intervalId = window.setInterval(this._trackAndPerformAsync.bind(this), intervalTimeMs);
+    }
+
+    public stop(): void {
+        if (this._intervalId) {
+            window.clearInterval(this._intervalId);
+        }
+        this._intervalId = undefined;
+        this._pendingRequest = false;
+    }
+
+    private async _trackAndPerformAsync(): Promise<void> {
+        if (this._pendingRequest) {
+            return;
+        }
+
+        this._pendingRequest = true;
+        try {
+            await this._performingFunctionAsync();
+        } finally {
+            this._pendingRequest = false;
+        }
+    }
+}
diff --git a/packages/instant/src/util/heartbeater_factory.ts b/packages/instant/src/util/heartbeater_factory.ts
new file mode 100644
index 000000000..fc33787ee
--- /dev/null
+++ b/packages/instant/src/util/heartbeater_factory.ts
@@ -0,0 +1,18 @@
+import { asyncData } from '../redux/async_data';
+import { Store } from '../redux/store';
+
+import { updateBuyQuoteOrFlashErrorAsyncForState } from './buy_quote_fetcher';
+import { Heartbeater } from './heartbeater';
+
+export const generateAccountHeartbeater = (store: Store): Heartbeater => {
+    return new Heartbeater(async () => {
+        await asyncData.fetchAccountInfoAndDispatchToStore(store, { setLoading: false });
+    });
+};
+
+export const generateBuyQuoteHeartbeater = (store: Store): Heartbeater => {
+    return new Heartbeater(async () => {
+        await updateBuyQuoteOrFlashErrorAsyncForState(store.getState(), store.dispatch);
+        return Promise.resolve();
+    });
+};
-- 
cgit v1.2.3


From fd12bdbbd5eb52af4758fd3821c6e09617f2ecb3 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 8 Nov 2018 17:13:33 -0800
Subject: Remove old TODO

---
 packages/instant/src/components/zero_ex_instant_provider.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index bbc20dab6..34257d25f 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -104,7 +104,6 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
         this._accountUpdateHeartbeat = generateAccountHeartbeater(this._store);
         this._accountUpdateHeartbeat.start(ACCOUNT_UPDATE_INTERVAL_TIME_MS);
 
-        // TODO assign and stop on unmount
         this._buyQuoteHeartbeat = generateBuyQuoteHeartbeater(this._store);
         this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS);
 
-- 
cgit v1.2.3


From 3dacc6157bb7a70db9a281689c1af27ccc7c446f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 8 Nov 2018 17:20:15 -0800
Subject: Remove unneeded Promise.resolve

---
 packages/instant/src/util/heartbeater_factory.ts | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/heartbeater_factory.ts b/packages/instant/src/util/heartbeater_factory.ts
index fc33787ee..9fac9cf4c 100644
--- a/packages/instant/src/util/heartbeater_factory.ts
+++ b/packages/instant/src/util/heartbeater_factory.ts
@@ -13,6 +13,5 @@ export const generateAccountHeartbeater = (store: Store): Heartbeater => {
 export const generateBuyQuoteHeartbeater = (store: Store): Heartbeater => {
     return new Heartbeater(async () => {
         await updateBuyQuoteOrFlashErrorAsyncForState(store.getState(), store.dispatch);
-        return Promise.resolve();
     });
 };
-- 
cgit v1.2.3


From d703c13f8eca7f7139581468e86cf6d2fa067c1e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 8 Nov 2018 17:21:17 -0800
Subject: Variable name cleanup

---
 packages/instant/src/util/heartbeater.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/heartbeater.ts b/packages/instant/src/util/heartbeater.ts
index c5a823953..bb4e99383 100644
--- a/packages/instant/src/util/heartbeater.ts
+++ b/packages/instant/src/util/heartbeater.ts
@@ -3,12 +3,12 @@ import * as _ from 'lodash';
 type HeartbeatableFunction = () => Promise<void>;
 export class Heartbeater {
     private _intervalId?: number;
-    private _pendingRequest: boolean;
-    private _performingFunctionAsync: HeartbeatableFunction;
+    private _hasPendingRequest: boolean;
+    private _performFunction: HeartbeatableFunction;
 
     public constructor(_performingFunctionAsync: HeartbeatableFunction) {
-        this._performingFunctionAsync = _performingFunctionAsync;
-        this._pendingRequest = false;
+        this._performFunction = _performingFunctionAsync;
+        this._hasPendingRequest = false;
     }
 
     public start(intervalTimeMs: number): void {
@@ -24,19 +24,19 @@ export class Heartbeater {
             window.clearInterval(this._intervalId);
         }
         this._intervalId = undefined;
-        this._pendingRequest = false;
+        this._hasPendingRequest = false;
     }
 
     private async _trackAndPerformAsync(): Promise<void> {
-        if (this._pendingRequest) {
+        if (this._hasPendingRequest) {
             return;
         }
 
-        this._pendingRequest = true;
+        this._hasPendingRequest = true;
         try {
-            await this._performingFunctionAsync();
+            await this._performFunction();
         } finally {
-            this._pendingRequest = false;
+            this._hasPendingRequest = false;
         }
     }
 }
-- 
cgit v1.2.3


From b147cd888505443981781d200a68b949812cb3e9 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 8 Nov 2018 17:22:21 -0800
Subject: fix(instant): fix bug where we potentially fetch balance for the
 wrong account

---
 packages/instant/src/redux/actions.ts    | 5 +++--
 packages/instant/src/redux/async_data.ts | 8 +++++---
 packages/instant/src/redux/reducer.ts    | 9 +++++----
 packages/instant/src/types.ts            | 5 +++++
 4 files changed, 18 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 9b0d80152..fc89e3d0e 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { ActionsUnion, Asset } from '../types';
+import { ActionsUnion, AddressAndEthBalanceInWei, Asset } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
@@ -49,7 +49,8 @@ export const actions = {
     setAccountStateLocked: () => createAction(ActionTypes.SET_ACCOUNT_STATE_LOCKED),
     setAccountStateError: () => createAction(ActionTypes.SET_ACCOUNT_STATE_ERROR),
     setAccountStateReady: (address: string) => createAction(ActionTypes.SET_ACCOUNT_STATE_READY, address),
-    updateAccountEthBalance: (balance: BigNumber) => createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, balance),
+    updateAccountEthBalance: (addressAndBalance: AddressAndEthBalanceInWei) =>
+        createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, addressAndBalance),
     updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
     updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
     setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE),
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index bff9d8814..a8f632009 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -52,7 +52,8 @@ export const asyncData = {
         if (!_.isEmpty(availableAddresses)) {
             const activeAddress = availableAddresses[0];
             store.dispatch(actions.setAccountStateReady(activeAddress));
-            await asyncData.fetchAccountBalanceAndDispatchToStore(store);
+            // tslint:disable-next-line:no-floating-promises
+            asyncData.fetchAccountBalanceAndDispatchToStore(store);
         } else {
             store.dispatch(actions.setAccountStateLocked());
         }
@@ -65,8 +66,9 @@ export const asyncData = {
             return;
         }
         try {
-            const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(account.address);
-            store.dispatch(actions.updateAccountEthBalance(ethBalanceInWei));
+            const address = account.address;
+            const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address);
+            store.dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei }));
         } catch (e) {
             // leave balance as is
             return;
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 961e29619..a5a1b6f7d 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -75,13 +75,14 @@ export const createReducer = (initialState: State) => {
                 return reduceStateWithAccount(state, account);
             }
             case ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE: {
-                const account = state.providerState.account;
-                if (account.state !== AccountState.Ready) {
+                const { address, ethBalanceInWei } = action.data;
+                const currentAccount = state.providerState.account;
+                if (currentAccount.state !== AccountState.Ready || currentAccount.address !== address) {
                     return state;
                 } else {
                     const newAccount: AccountReady = {
-                        ...account,
-                        ethBalanceInWei: action.data,
+                        ...currentAccount,
+                        ethBalanceInWei,
                     };
                     return reduceStateWithAccount(state, newAccount);
                 }
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index d65f70008..20ad2ed95 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -120,3 +120,8 @@ export interface AccountNotReady {
 export type Account = AccountReady | AccountNotReady;
 
 export type OrderSource = string | SignedOrder[];
+
+export interface AddressAndEthBalanceInWei {
+    address: string;
+    ethBalanceInWei: BigNumber;
+}
-- 
cgit v1.2.3


From a22d78e273c0eb456d11e672376e58f122b4de0c Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Fri, 9 Nov 2018 16:28:35 +1100
Subject: Updated CHANGELOGS

---
 packages/0x.js/CHANGELOG.json              |  9 +++++++++
 packages/0x.js/CHANGELOG.md                |  4 ++++
 packages/abi-gen-wrappers/CHANGELOG.json   |  9 +++++++++
 packages/abi-gen-wrappers/CHANGELOG.md     |  4 ++++
 packages/abi-gen/CHANGELOG.json            |  9 +++++++++
 packages/abi-gen/CHANGELOG.md              |  4 ++++
 packages/assert/CHANGELOG.json             |  9 +++++++++
 packages/assert/CHANGELOG.md               |  4 ++++
 packages/asset-buyer/CHANGELOG.json        |  3 ++-
 packages/asset-buyer/CHANGELOG.md          | 10 ++++++++++
 packages/base-contract/CHANGELOG.json      |  9 +++++++++
 packages/base-contract/CHANGELOG.md        |  4 ++++
 packages/connect/CHANGELOG.json            |  9 +++++++++
 packages/connect/CHANGELOG.md              |  4 ++++
 packages/contract-addresses/CHANGELOG.json |  3 ++-
 packages/contract-addresses/CHANGELOG.md   |  4 ++++
 packages/contract-artifacts/CHANGELOG.json |  3 ++-
 packages/contract-artifacts/CHANGELOG.md   |  4 ++++
 packages/contract-wrappers/CHANGELOG.json  |  3 ++-
 packages/contract-wrappers/CHANGELOG.md    |  6 ++++++
 packages/dev-utils/CHANGELOG.json          |  9 +++++++++
 packages/dev-utils/CHANGELOG.md            |  4 ++++
 packages/ethereum-types/CHANGELOG.json     |  9 +++++++++
 packages/ethereum-types/CHANGELOG.md       |  4 ++++
 packages/fill-scenarios/CHANGELOG.json     |  9 +++++++++
 packages/fill-scenarios/CHANGELOG.md       |  4 ++++
 packages/json-schemas/CHANGELOG.json       |  3 ++-
 packages/json-schemas/CHANGELOG.md         |  4 ++++
 packages/migrations/CHANGELOG.json         |  9 +++++++++
 packages/migrations/CHANGELOG.md           |  4 ++++
 packages/order-utils/CHANGELOG.json        |  9 +++++++++
 packages/order-utils/CHANGELOG.md          |  4 ++++
 packages/order-watcher/CHANGELOG.json      |  9 +++++++++
 packages/order-watcher/CHANGELOG.md        |  4 ++++
 packages/react-docs/CHANGELOG.json         |  9 +++++++++
 packages/react-docs/CHANGELOG.md           |  4 ++++
 packages/react-shared/CHANGELOG.json       |  9 +++++++++
 packages/react-shared/CHANGELOG.md         |  4 ++++
 packages/sol-compiler/CHANGELOG.json       |  9 +++++++++
 packages/sol-compiler/CHANGELOG.md         |  4 ++++
 packages/sol-cov/CHANGELOG.json            |  9 +++++++++
 packages/sol-cov/CHANGELOG.md              |  4 ++++
 packages/sol-doc/CHANGELOG.json            |  9 +++++++++
 packages/sol-doc/CHANGELOG.md              |  4 ++++
 packages/sol-resolver/CHANGELOG.json       |  9 +++++++++
 packages/sol-resolver/CHANGELOG.md         |  4 ++++
 packages/sra-spec/CHANGELOG.json           |  9 +++++++++
 packages/sra-spec/CHANGELOG.md             |  4 ++++
 packages/subproviders/CHANGELOG.json       |  9 +++++++++
 packages/subproviders/CHANGELOG.md         |  4 ++++
 packages/tslint-config/CHANGELOG.json      |  9 +++++++++
 packages/tslint-config/CHANGELOG.md        |  4 ++++
 packages/types/CHANGELOG.json              |  9 +++++++++
 packages/types/CHANGELOG.md                |  4 ++++
 packages/typescript-typings/CHANGELOG.json |  9 +++++++++
 packages/typescript-typings/CHANGELOG.md   |  4 ++++
 packages/utils/CHANGELOG.json              |  9 +++++++++
 packages/utils/CHANGELOG.md                |  4 ++++
 packages/web3-wrapper/CHANGELOG.json       |  3 ++-
 packages/web3-wrapper/CHANGELOG.md         |  4 ++++
 60 files changed, 356 insertions(+), 6 deletions(-)

(limited to 'packages')

diff --git a/packages/0x.js/CHANGELOG.json b/packages/0x.js/CHANGELOG.json
index a404ed481..7d9cb8312 100644
--- a/packages/0x.js/CHANGELOG.json
+++ b/packages/0x.js/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "2.0.1",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "version": "2.0.0",
         "changes": [
diff --git a/packages/0x.js/CHANGELOG.md b/packages/0x.js/CHANGELOG.md
index 939ada519..d312b2c9b 100644
--- a/packages/0x.js/CHANGELOG.md
+++ b/packages/0x.js/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.0.1 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v2.0.0 - _October 18, 2018_
 
     * Add support for `eth_signTypedData`. (#1102)
diff --git a/packages/abi-gen-wrappers/CHANGELOG.json b/packages/abi-gen-wrappers/CHANGELOG.json
index 211d79d26..c3273536b 100644
--- a/packages/abi-gen-wrappers/CHANGELOG.json
+++ b/packages/abi-gen-wrappers/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.0.2",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "timestamp": 1539871071,
         "version": "1.0.1",
diff --git a/packages/abi-gen-wrappers/CHANGELOG.md b/packages/abi-gen-wrappers/CHANGELOG.md
index df72b112c..18bd28cb8 100644
--- a/packages/abi-gen-wrappers/CHANGELOG.md
+++ b/packages/abi-gen-wrappers/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.2 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.0.1 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/abi-gen/CHANGELOG.json b/packages/abi-gen/CHANGELOG.json
index 4bec24183..658a997f4 100644
--- a/packages/abi-gen/CHANGELOG.json
+++ b/packages/abi-gen/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.0.15",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "timestamp": 1539871071,
         "version": "1.0.14",
diff --git a/packages/abi-gen/CHANGELOG.md b/packages/abi-gen/CHANGELOG.md
index 61c4d8487..21fda1656 100644
--- a/packages/abi-gen/CHANGELOG.md
+++ b/packages/abi-gen/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.15 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.0.14 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/assert/CHANGELOG.json b/packages/assert/CHANGELOG.json
index f5a77103b..82c0938cf 100644
--- a/packages/assert/CHANGELOG.json
+++ b/packages/assert/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.0.15",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "timestamp": 1539871071,
         "version": "1.0.14",
diff --git a/packages/assert/CHANGELOG.md b/packages/assert/CHANGELOG.md
index 78b5da851..7d0895eca 100644
--- a/packages/assert/CHANGELOG.md
+++ b/packages/assert/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.15 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.0.14 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/asset-buyer/CHANGELOG.json b/packages/asset-buyer/CHANGELOG.json
index 2a775075f..df4531063 100644
--- a/packages/asset-buyer/CHANGELOG.json
+++ b/packages/asset-buyer/CHANGELOG.json
@@ -29,7 +29,8 @@
                 "note": "Lower default expiry buffer from 5 minutes to 2 minutes",
                 "pr": 1217
             }
-        ]
+        ],
+        "timestamp": 1541740904
     },
     {
         "version": "2.1.0",
diff --git a/packages/asset-buyer/CHANGELOG.md b/packages/asset-buyer/CHANGELOG.md
index 8845e7041..d6220767e 100644
--- a/packages/asset-buyer/CHANGELOG.md
+++ b/packages/asset-buyer/CHANGELOG.md
@@ -5,6 +5,15 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.2.0 - _November 9, 2018_
+
+    * `getAssetBuyerForProvidedOrders` factory function now takes 3 args instead of 4 (#1187)
+    * the `OrderProvider` now requires a new method `getAvailableMakerAssetDatasAsync` and the `StandardRelayerAPIOrderProvider` requires the network id at init. (#1203)
+    * No longer require that provided orders all have the same maker and taker asset data (#1197)
+    * Fix bug where `BuyQuoteInfo` objects could return `totalEthAmount` and `feeEthAmount` that were not whole numbers (#1207)
+    * Fix bug where default values for `AssetBuyer` public facing methods could get overriden by `undefined` values (#1207)
+    * Lower default expiry buffer from 5 minutes to 2 minutes (#1217)
+
 ## v2.1.0 - _October 18, 2018_
 
     * Add `gasLimit` and `gasPrice` as optional properties on `BuyQuoteExecutionOpts`
@@ -13,6 +22,7 @@ CHANGELOG
     * Add `gasLimit` and `gasPrice` as optional properties on `BuyQuoteExecutionOpts` (#1116)
     * Add `docs:json` command to package.json (#1139)
     * Add missing types to public interface (#1139)
+    * Throw `SignatureRequestDenied` and `TransactionValueTooLow` errors when executing buy (#1147)
 
 ## v2.0.0 - _October 4, 2018_
 
diff --git a/packages/base-contract/CHANGELOG.json b/packages/base-contract/CHANGELOG.json
index 166c04408..f8a1051d6 100644
--- a/packages/base-contract/CHANGELOG.json
+++ b/packages/base-contract/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "3.0.3",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "timestamp": 1539871071,
         "version": "3.0.2",
diff --git a/packages/base-contract/CHANGELOG.md b/packages/base-contract/CHANGELOG.md
index 2981b5ef8..d544f4f99 100644
--- a/packages/base-contract/CHANGELOG.md
+++ b/packages/base-contract/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v3.0.3 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v3.0.2 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/connect/CHANGELOG.json b/packages/connect/CHANGELOG.json
index 3412831d5..52ad9d575 100644
--- a/packages/connect/CHANGELOG.json
+++ b/packages/connect/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "3.0.3",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "timestamp": 1539871071,
         "version": "3.0.2",
diff --git a/packages/connect/CHANGELOG.md b/packages/connect/CHANGELOG.md
index d20b5a5f7..8e38e16de 100644
--- a/packages/connect/CHANGELOG.md
+++ b/packages/connect/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v3.0.3 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v3.0.2 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/contract-addresses/CHANGELOG.json b/packages/contract-addresses/CHANGELOG.json
index 2727cd42b..307d73545 100644
--- a/packages/contract-addresses/CHANGELOG.json
+++ b/packages/contract-addresses/CHANGELOG.json
@@ -6,7 +6,8 @@
                 "pr": 1192,
                 "note": "Update Forwarder addresses"
             }
-        ]
+        ],
+        "timestamp": 1541740904
     },
     {
         "version": "1.0.1",
diff --git a/packages/contract-addresses/CHANGELOG.md b/packages/contract-addresses/CHANGELOG.md
index 82c22f2e4..20e52cd8b 100644
--- a/packages/contract-addresses/CHANGELOG.md
+++ b/packages/contract-addresses/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.1.0 - _November 9, 2018_
+
+    * Update Forwarder addresses (#1192)
+
 ## v1.0.1 - _October 18, 2018_
 
     * Initial release (#1105)
diff --git a/packages/contract-artifacts/CHANGELOG.json b/packages/contract-artifacts/CHANGELOG.json
index e6a6d02c0..8833255ed 100644
--- a/packages/contract-artifacts/CHANGELOG.json
+++ b/packages/contract-artifacts/CHANGELOG.json
@@ -6,7 +6,8 @@
                 "pr": 1192,
                 "note": "Update Forwarder artifact"
             }
-        ]
+        ],
+        "timestamp": 1541740904
     },
     {
         "version": "1.0.1",
diff --git a/packages/contract-artifacts/CHANGELOG.md b/packages/contract-artifacts/CHANGELOG.md
index 82c22f2e4..b3c399985 100644
--- a/packages/contract-artifacts/CHANGELOG.md
+++ b/packages/contract-artifacts/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.1.0 - _November 9, 2018_
+
+    * Update Forwarder artifact (#1192)
+
 ## v1.0.1 - _October 18, 2018_
 
     * Initial release (#1105)
diff --git a/packages/contract-wrappers/CHANGELOG.json b/packages/contract-wrappers/CHANGELOG.json
index 9ff372e33..0346b79b2 100644
--- a/packages/contract-wrappers/CHANGELOG.json
+++ b/packages/contract-wrappers/CHANGELOG.json
@@ -6,7 +6,8 @@
                 "note": "Fix bug in `ForwarderWrapper` where `feeRecipientAddress` was not correctly normalized.",
                 "pr": 1178
             }
-        ]
+        ],
+        "timestamp": 1541740904
     },
     {
         "version": "3.0.0",
diff --git a/packages/contract-wrappers/CHANGELOG.md b/packages/contract-wrappers/CHANGELOG.md
index 6f3005831..1fe903dd9 100644
--- a/packages/contract-wrappers/CHANGELOG.md
+++ b/packages/contract-wrappers/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v3.0.1 - _November 9, 2018_
+
+    * Fix bug in `ForwarderWrapper` where `feeRecipientAddress` was not correctly normalized. (#1178)
+
 ## v3.0.0 - _October 18, 2018_
 
     * Add optional validation to the forwarder wrapper methods
@@ -15,6 +19,8 @@ CHANGELOG
     * Removed `setProvider` method in top-level `ContractWrapper` class and added new `unsubscribeAll` method. (#1105)
     * Some properties and methods have been renamed. For example, some methods that previously could throw no longer can, and so their names have been updated accordingly. (#1105)
     * Removed ContractNotFound errors. Checking for this error was somewhat ineffecient. Relevant methods/functions now return the default error from web3-wrapper, which we feel provides enough information. (#1105)
+    * Add `ForwarderWrapperError` to public interface (#1147)
+    * Add `ContractWrapperError.SignatureRequestDenied` to public interface (#1147)
 
 ## v2.0.2 - _October 4, 2018_
 
diff --git a/packages/dev-utils/CHANGELOG.json b/packages/dev-utils/CHANGELOG.json
index fd5a8d446..269cdc934 100644
--- a/packages/dev-utils/CHANGELOG.json
+++ b/packages/dev-utils/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.0.14",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "version": "1.0.13",
         "changes": [
diff --git a/packages/dev-utils/CHANGELOG.md b/packages/dev-utils/CHANGELOG.md
index a6b60884e..ee614a904 100644
--- a/packages/dev-utils/CHANGELOG.md
+++ b/packages/dev-utils/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.14 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.0.13 - _October 18, 2018_
 
     * Make web3-provider-engine types a 'dependency' so it's available to users of the library (#1105)
diff --git a/packages/ethereum-types/CHANGELOG.json b/packages/ethereum-types/CHANGELOG.json
index b042c4588..9db75ae9f 100644
--- a/packages/ethereum-types/CHANGELOG.json
+++ b/packages/ethereum-types/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.1.2",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "version": "1.1.1",
         "changes": [
diff --git a/packages/ethereum-types/CHANGELOG.md b/packages/ethereum-types/CHANGELOG.md
index 73ea54204..6ad7b4cc6 100644
--- a/packages/ethereum-types/CHANGELOG.md
+++ b/packages/ethereum-types/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.1.2 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.1.1 - _October 18, 2018_
 
     * Add `JSONRPCResponseError` and error field on `JSONRPCResponsePayload`. (#1102)
diff --git a/packages/fill-scenarios/CHANGELOG.json b/packages/fill-scenarios/CHANGELOG.json
index b9840957e..8aa4e78d3 100644
--- a/packages/fill-scenarios/CHANGELOG.json
+++ b/packages/fill-scenarios/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.0.9",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "version": "1.0.8",
         "changes": [
diff --git a/packages/fill-scenarios/CHANGELOG.md b/packages/fill-scenarios/CHANGELOG.md
index 20ef1322c..4ff28f82f 100644
--- a/packages/fill-scenarios/CHANGELOG.md
+++ b/packages/fill-scenarios/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.9 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.0.8 - _October 18, 2018_
 
     * Updated to use new @0xproject/contract-artifacts and @0xproject/abi-gen-wrappers packages (#1105)
diff --git a/packages/json-schemas/CHANGELOG.json b/packages/json-schemas/CHANGELOG.json
index 3bd6552e3..f25a487b8 100644
--- a/packages/json-schemas/CHANGELOG.json
+++ b/packages/json-schemas/CHANGELOG.json
@@ -7,7 +7,8 @@
                     "Improve schemas by enforcing that amounts that must be whole numbers (e.g Order asset amounts) no longer allow decimal amounts",
                 "pr": 1173
             }
-        ]
+        ],
+        "timestamp": 1541740904
     },
     {
         "version": "2.0.0",
diff --git a/packages/json-schemas/CHANGELOG.md b/packages/json-schemas/CHANGELOG.md
index 21efe1be0..a1c784640 100644
--- a/packages/json-schemas/CHANGELOG.md
+++ b/packages/json-schemas/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.0.1 - _November 9, 2018_
+
+    * Improve schemas by enforcing that amounts that must be whole numbers (e.g Order asset amounts) no longer allow decimal amounts (#1173)
+
 ## v2.0.0 - _October 18, 2018_
 
     * Convert all schemas to JSON files so that they can be used with `json-schema` implemenations in other programming languages. (#1145)
diff --git a/packages/migrations/CHANGELOG.json b/packages/migrations/CHANGELOG.json
index 6d93feb1e..b7128f8e1 100644
--- a/packages/migrations/CHANGELOG.json
+++ b/packages/migrations/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "2.0.1",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "version": "2.0.0",
         "changes": [
diff --git a/packages/migrations/CHANGELOG.md b/packages/migrations/CHANGELOG.md
index 8d3346972..387ae0abb 100644
--- a/packages/migrations/CHANGELOG.md
+++ b/packages/migrations/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.0.1 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v2.0.0 - _October 18, 2018_
 
     * Contract artifacts have been moved to the new @0xproject/contract-artifacts package. v1 migrations have been removed. `runMigrationsAsync` returns the addresses of the contracts that were deployed. (#1105)
diff --git a/packages/order-utils/CHANGELOG.json b/packages/order-utils/CHANGELOG.json
index 22af2412b..abcf3d392 100644
--- a/packages/order-utils/CHANGELOG.json
+++ b/packages/order-utils/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "2.0.1",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "version": "2.0.0",
         "changes": [
diff --git a/packages/order-utils/CHANGELOG.md b/packages/order-utils/CHANGELOG.md
index afd5c4adc..31bd02595 100644
--- a/packages/order-utils/CHANGELOG.md
+++ b/packages/order-utils/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.0.1 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v2.0.0 - _October 18, 2018_
 
     * Added `ecSignOrderAsync` to first sign an order using `eth_signTypedData` and fallback to `eth_sign`. (#1102)
diff --git a/packages/order-watcher/CHANGELOG.json b/packages/order-watcher/CHANGELOG.json
index d574f4a18..c662903a3 100644
--- a/packages/order-watcher/CHANGELOG.json
+++ b/packages/order-watcher/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "2.2.1",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "version": "2.2.0",
         "changes": [
diff --git a/packages/order-watcher/CHANGELOG.md b/packages/order-watcher/CHANGELOG.md
index 299af5437..b271956c7 100644
--- a/packages/order-watcher/CHANGELOG.md
+++ b/packages/order-watcher/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.2.1 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v2.2.0 - _October 18, 2018_
 
     * Added getStats function and returns a Stats object (#1118)
diff --git a/packages/react-docs/CHANGELOG.json b/packages/react-docs/CHANGELOG.json
index 97485be96..228dfab4f 100644
--- a/packages/react-docs/CHANGELOG.json
+++ b/packages/react-docs/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.0.15",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "timestamp": 1539871071,
         "version": "1.0.14",
diff --git a/packages/react-docs/CHANGELOG.md b/packages/react-docs/CHANGELOG.md
index 096bd8460..991b3a490 100644
--- a/packages/react-docs/CHANGELOG.md
+++ b/packages/react-docs/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.15 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.0.14 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/react-shared/CHANGELOG.json b/packages/react-shared/CHANGELOG.json
index 8578b4603..4dd11398b 100644
--- a/packages/react-shared/CHANGELOG.json
+++ b/packages/react-shared/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.0.18",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "version": "1.0.17",
         "changes": [
diff --git a/packages/react-shared/CHANGELOG.md b/packages/react-shared/CHANGELOG.md
index fc3f7e32c..54ca77b16 100644
--- a/packages/react-shared/CHANGELOG.md
+++ b/packages/react-shared/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.18 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.0.17 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/sol-compiler/CHANGELOG.json b/packages/sol-compiler/CHANGELOG.json
index d945c305b..724e68a68 100644
--- a/packages/sol-compiler/CHANGELOG.json
+++ b/packages/sol-compiler/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.1.9",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "timestamp": 1539871071,
         "version": "1.1.8",
diff --git a/packages/sol-compiler/CHANGELOG.md b/packages/sol-compiler/CHANGELOG.md
index 1a86d097d..322313f9e 100644
--- a/packages/sol-compiler/CHANGELOG.md
+++ b/packages/sol-compiler/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.1.9 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.1.8 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/sol-cov/CHANGELOG.json b/packages/sol-cov/CHANGELOG.json
index cbee0233b..e331d608f 100644
--- a/packages/sol-cov/CHANGELOG.json
+++ b/packages/sol-cov/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "2.1.9",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "version": "2.1.8",
         "changes": [
diff --git a/packages/sol-cov/CHANGELOG.md b/packages/sol-cov/CHANGELOG.md
index 11ed486e2..e9d9d6952 100644
--- a/packages/sol-cov/CHANGELOG.md
+++ b/packages/sol-cov/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.1.9 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v2.1.8 - _October 18, 2018_
 
     * Make @types/solidity-parser-antlr a 'dependency' so it's available to users of the library (#1105)
diff --git a/packages/sol-doc/CHANGELOG.json b/packages/sol-doc/CHANGELOG.json
index e117ff291..d54569a4d 100644
--- a/packages/sol-doc/CHANGELOG.json
+++ b/packages/sol-doc/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.0.4",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "timestamp": 1539871071,
         "version": "1.0.3",
diff --git a/packages/sol-doc/CHANGELOG.md b/packages/sol-doc/CHANGELOG.md
index 9adc02b19..d44af5d7f 100644
--- a/packages/sol-doc/CHANGELOG.md
+++ b/packages/sol-doc/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.4 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.0.3 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/sol-resolver/CHANGELOG.json b/packages/sol-resolver/CHANGELOG.json
index a72ca6d63..a6ff84237 100644
--- a/packages/sol-resolver/CHANGELOG.json
+++ b/packages/sol-resolver/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.0.16",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "timestamp": 1539871071,
         "version": "1.0.15",
diff --git a/packages/sol-resolver/CHANGELOG.md b/packages/sol-resolver/CHANGELOG.md
index 671d3ea84..f8c5a7692 100644
--- a/packages/sol-resolver/CHANGELOG.md
+++ b/packages/sol-resolver/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.16 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.0.15 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/sra-spec/CHANGELOG.json b/packages/sra-spec/CHANGELOG.json
index a068df3fb..e053b3163 100644
--- a/packages/sra-spec/CHANGELOG.json
+++ b/packages/sra-spec/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.0.8",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "version": "1.0.7",
         "changes": [
diff --git a/packages/sra-spec/CHANGELOG.md b/packages/sra-spec/CHANGELOG.md
index ba4cddec2..02d22431f 100644
--- a/packages/sra-spec/CHANGELOG.md
+++ b/packages/sra-spec/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.8 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.0.7 - _October 18, 2018_
 
     * Make @loopback/openapi-v3-types a 'dependency' so it's available to users of the library (#1105)
diff --git a/packages/subproviders/CHANGELOG.json b/packages/subproviders/CHANGELOG.json
index b145bbbe5..816c776a5 100644
--- a/packages/subproviders/CHANGELOG.json
+++ b/packages/subproviders/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "2.1.1",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "version": "2.1.0",
         "changes": [
diff --git a/packages/subproviders/CHANGELOG.md b/packages/subproviders/CHANGELOG.md
index f9e3e63a6..72ac9d1f7 100644
--- a/packages/subproviders/CHANGELOG.md
+++ b/packages/subproviders/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.1.1 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v2.1.0 - _October 18, 2018_
 
     * Add `MetamaskSubprovider` to handle inconsistent JSON RPC behaviour (#1102)
diff --git a/packages/tslint-config/CHANGELOG.json b/packages/tslint-config/CHANGELOG.json
index 99fbc7989..9f504216c 100644
--- a/packages/tslint-config/CHANGELOG.json
+++ b/packages/tslint-config/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.0.10",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "timestamp": 1539871071,
         "version": "1.0.9",
diff --git a/packages/tslint-config/CHANGELOG.md b/packages/tslint-config/CHANGELOG.md
index f0b429d29..f5cacb5d1 100644
--- a/packages/tslint-config/CHANGELOG.md
+++ b/packages/tslint-config/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.10 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.0.9 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/types/CHANGELOG.json b/packages/types/CHANGELOG.json
index 84a06faa8..6d9f83c57 100644
--- a/packages/types/CHANGELOG.json
+++ b/packages/types/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.2.1",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "version": "1.2.0",
         "changes": [
diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
index d1b8ea79c..556bf1799 100644
--- a/packages/types/CHANGELOG.md
+++ b/packages/types/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.2.1 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v1.2.0 - _October 18, 2018_
 
     * Added `EIP712Parameter` `EIP712Types` `EIP712TypedData` for EIP712 signing (#1102)
diff --git a/packages/typescript-typings/CHANGELOG.json b/packages/typescript-typings/CHANGELOG.json
index e21e788b5..5653b397d 100644
--- a/packages/typescript-typings/CHANGELOG.json
+++ b/packages/typescript-typings/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "3.0.4",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "timestamp": 1539871071,
         "version": "3.0.3",
diff --git a/packages/typescript-typings/CHANGELOG.md b/packages/typescript-typings/CHANGELOG.md
index df58bfc57..62e6665be 100644
--- a/packages/typescript-typings/CHANGELOG.md
+++ b/packages/typescript-typings/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v3.0.4 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v3.0.3 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/utils/CHANGELOG.json b/packages/utils/CHANGELOG.json
index 7594581d4..6c9da5f37 100644
--- a/packages/utils/CHANGELOG.json
+++ b/packages/utils/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "2.0.4",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ],
+        "timestamp": 1541740904
+    },
     {
         "timestamp": 1539871071,
         "version": "2.0.3",
diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md
index 45b2cd0c2..4fdd13d9c 100644
--- a/packages/utils/CHANGELOG.md
+++ b/packages/utils/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.0.4 - _November 9, 2018_
+
+    * Dependencies updated
+
 ## v2.0.3 - _October 18, 2018_
 
     * Dependencies updated
diff --git a/packages/web3-wrapper/CHANGELOG.json b/packages/web3-wrapper/CHANGELOG.json
index 6b554110f..7b21da73a 100644
--- a/packages/web3-wrapper/CHANGELOG.json
+++ b/packages/web3-wrapper/CHANGELOG.json
@@ -7,7 +7,8 @@
                     "Fix bug in `getTransactionByHashAsync` which was causing the return value to have the wrong type (raw fields instead of unmarshalled fields).",
                 "pr": 1177
             }
-        ]
+        ],
+        "timestamp": 1541740904
     },
     {
         "version": "3.1.0",
diff --git a/packages/web3-wrapper/CHANGELOG.md b/packages/web3-wrapper/CHANGELOG.md
index 90d62953a..ebbef2c48 100644
--- a/packages/web3-wrapper/CHANGELOG.md
+++ b/packages/web3-wrapper/CHANGELOG.md
@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v3.1.1 - _November 9, 2018_
+
+    * Fix bug in `getTransactionByHashAsync` which was causing the return value to have the wrong type (raw fields instead of unmarshalled fields). (#1177)
+
 ## v3.1.0 - _October 18, 2018_
 
     * Add `signTypedData` to perform EIP712 `eth_signTypedData`. (#1102)
-- 
cgit v1.2.3


From b4a11de097258d37fa9271e64fc28a1d012a8d26 Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Fri, 9 Nov 2018 16:28:52 +1100
Subject: Publish

 - 0x.js@2.0.1
 - @0x/abi-gen@1.0.15
 - @0x/abi-gen-wrappers@1.0.2
 - @0x/assert@1.0.15
 - @0x/asset-buyer@2.2.0
 - @0x/base-contract@3.0.3
 - @0x/connect@3.0.3
 - @0x/contract-addresses@1.1.0
 - @0x/contract-artifacts@1.1.0
 - @0x/contract-wrappers@3.0.1
 - contracts@2.1.51
 - @0x/dev-tools-pages@0.0.3
 - @0x/dev-utils@1.0.14
 - ethereum-types@1.1.2
 - @0x/fill-scenarios@1.0.9
 - @0x/instant@0.0.4
 - @0x/json-schemas@2.0.1
 - @0x/metacoin@0.0.25
 - @0x/migrations@2.0.1
 - @0x/monorepo-scripts@1.0.13
 - @0x/order-utils@2.0.1
 - @0x/order-watcher@2.2.1
 - @0x/react-docs@1.0.15
 - @0x/react-shared@1.0.18
 - @0x/sol-compiler@1.1.9
 - @0x/sol-cov@2.1.9
 - @0x/sol-doc@1.0.4
 - @0x/sol-resolver@1.0.16
 - @0x/sra-spec@1.0.8
 - @0x/subproviders@2.1.1
 - @0x/testnet-faucets@1.0.53
 - @0x/tslint-config@1.0.10
 - @0x/types@1.2.1
 - @0x/typescript-typings@3.0.4
 - @0x/utils@2.0.4
 - @0x/web3-wrapper@3.1.1
 - @0x/website@0.0.56
---
 packages/0x.js/package.json              | 36 ++++++++++++++++----------------
 packages/abi-gen-wrappers/package.json   | 14 ++++++-------
 packages/abi-gen/package.json            | 10 ++++-----
 packages/assert/package.json             | 10 ++++-----
 packages/asset-buyer/package.json        | 26 +++++++++++------------
 packages/base-contract/package.json      | 12 +++++------
 packages/connect/package.json            | 16 +++++++-------
 packages/contract-addresses/package.json |  2 +-
 packages/contract-artifacts/package.json |  2 +-
 packages/contract-wrappers/package.json  | 34 +++++++++++++++---------------
 packages/contracts/package.json          | 28 ++++++++++++-------------
 packages/dev-tools-pages/package.json    |  4 ++--
 packages/dev-utils/package.json          | 16 +++++++-------
 packages/ethereum-types/package.json     |  4 ++--
 packages/fill-scenarios/package.json     | 22 +++++++++----------
 packages/instant/package.json            | 24 ++++++++++-----------
 packages/json-schemas/package.json       |  8 +++----
 packages/metacoin/package.json           | 26 +++++++++++------------
 packages/migrations/package.json         | 30 +++++++++++++-------------
 packages/monorepo-scripts/package.json   |  2 +-
 packages/order-utils/package.json        | 26 +++++++++++------------
 packages/order-watcher/package.json      | 36 ++++++++++++++++----------------
 packages/react-docs/package.json         | 12 +++++------
 packages/react-shared/package.json       |  8 +++----
 packages/sol-compiler/package.json       | 22 +++++++++----------
 packages/sol-cov/package.json            | 18 ++++++++--------
 packages/sol-doc/package.json            | 12 +++++------
 packages/sol-resolver/package.json       |  8 +++----
 packages/sra-spec/package.json           |  6 +++---
 packages/subproviders/package.json       | 16 +++++++-------
 packages/testnet-faucets/package.json    | 16 +++++++-------
 packages/tslint-config/package.json      |  2 +-
 packages/types/package.json              |  6 +++---
 packages/typescript-typings/package.json |  4 ++--
 packages/utils/package.json              | 10 ++++-----
 packages/web3-wrapper/package.json       | 14 ++++++-------
 packages/website/package.json            | 24 ++++++++++-----------
 37 files changed, 283 insertions(+), 283 deletions(-)

(limited to 'packages')

diff --git a/packages/0x.js/package.json b/packages/0x.js/package.json
index bfc29128c..38478980f 100644
--- a/packages/0x.js/package.json
+++ b/packages/0x.js/package.json
@@ -1,6 +1,6 @@
 {
     "name": "0x.js",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "engines": {
         "node": ">=6.12"
     },
@@ -42,12 +42,12 @@
     },
     "license": "Apache-2.0",
     "devDependencies": {
-        "@0x/abi-gen": "^1.0.14",
-        "@0x/abi-gen-wrappers": "^1.0.1",
-        "@0x/contract-addresses": "^1.0.1",
-        "@0x/dev-utils": "^1.0.13",
-        "@0x/migrations": "^2.0.0",
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/abi-gen": "^1.0.15",
+        "@0x/abi-gen-wrappers": "^1.0.2",
+        "@0x/contract-addresses": "^1.1.0",
+        "@0x/dev-utils": "^1.0.14",
+        "@0x/migrations": "^2.0.1",
+        "@0x/tslint-config": "^1.0.10",
         "@types/lodash": "4.14.104",
         "@types/mocha": "^2.2.42",
         "@types/node": "*",
@@ -73,18 +73,18 @@
         "webpack": "^4.20.2"
     },
     "dependencies": {
-        "@0x/assert": "^1.0.14",
-        "@0x/base-contract": "^3.0.2",
-        "@0x/contract-wrappers": "^3.0.0",
-        "@0x/order-utils": "^2.0.0",
-        "@0x/order-watcher": "^2.2.0",
-        "@0x/subproviders": "^2.1.0",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "@0x/assert": "^1.0.15",
+        "@0x/base-contract": "^3.0.3",
+        "@0x/contract-wrappers": "^3.0.1",
+        "@0x/order-utils": "^2.0.1",
+        "@0x/order-watcher": "^2.2.1",
+        "@0x/subproviders": "^2.1.1",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "@types/web3-provider-engine": "^14.0.0",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "ethers": "~4.0.4",
         "lodash": "^4.17.5",
         "web3-provider-engine": "14.0.6"
diff --git a/packages/abi-gen-wrappers/package.json b/packages/abi-gen-wrappers/package.json
index b8010a8a7..a4316449f 100644
--- a/packages/abi-gen-wrappers/package.json
+++ b/packages/abi-gen-wrappers/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/abi-gen-wrappers",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "engines": {
         "node": ">=6.12"
     },
@@ -30,17 +30,17 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/abi-gen-wrappers/README.md",
     "devDependencies": {
-        "@0x/abi-gen": "^1.0.14",
-        "@0x/tslint-config": "^1.0.9",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
-        "ethereum-types": "^1.1.1",
+        "@0x/abi-gen": "^1.0.15",
+        "@0x/tslint-config": "^1.0.10",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
+        "ethereum-types": "^1.1.2",
         "ethers": "~4.0.4",
         "lodash": "^4.17.5",
         "shx": "^0.2.2"
     },
     "dependencies": {
-        "@0x/base-contract": "^3.0.2"
+        "@0x/base-contract": "^3.0.3"
     },
     "publishConfig": {
         "access": "public"
diff --git a/packages/abi-gen/package.json b/packages/abi-gen/package.json
index c78d4f269..5367c9c29 100644
--- a/packages/abi-gen/package.json
+++ b/packages/abi-gen/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/abi-gen",
-    "version": "1.0.14",
+    "version": "1.0.15",
     "engines": {
         "node": ">=6.12"
     },
@@ -31,10 +31,10 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/abi-gen/README.md",
     "dependencies": {
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
         "chalk": "^2.3.0",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "glob": "^7.1.2",
         "handlebars": "^4.0.11",
         "lodash": "^4.17.5",
@@ -45,7 +45,7 @@
         "yargs": "^10.0.3"
     },
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/glob": "5.0.35",
         "@types/handlebars": "^4.0.36",
         "@types/mkdirp": "^0.5.1",
diff --git a/packages/assert/package.json b/packages/assert/package.json
index a96f65258..cc2fdaae9 100644
--- a/packages/assert/package.json
+++ b/packages/assert/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/assert",
-    "version": "1.0.14",
+    "version": "1.0.15",
     "engines": {
         "node": ">=6.12"
     },
@@ -29,7 +29,7 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/assert/README.md",
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/lodash": "4.14.104",
         "@types/mocha": "^2.2.42",
         "@types/valid-url": "^1.0.2",
@@ -44,9 +44,9 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/json-schemas": "^2.0.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
+        "@0x/json-schemas": "^2.0.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
         "lodash": "^4.17.5",
         "valid-url": "^1.0.9"
     },
diff --git a/packages/asset-buyer/package.json b/packages/asset-buyer/package.json
index dd0668632..fc2414952 100644
--- a/packages/asset-buyer/package.json
+++ b/packages/asset-buyer/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/asset-buyer",
-    "version": "2.1.0",
+    "version": "2.2.0",
     "engines": {
         "node": ">=6.12"
     },
@@ -36,21 +36,21 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/asset-buyer/README.md",
     "dependencies": {
-        "@0x/assert": "^1.0.14",
-        "@0x/connect": "^3.0.2",
-        "@0x/contract-wrappers": "^3.0.0",
-        "@0x/json-schemas": "^2.0.0",
-        "@0x/order-utils": "^2.0.0",
-        "@0x/subproviders": "^2.1.0",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
-        "ethereum-types": "^1.1.1",
+        "@0x/assert": "^1.0.15",
+        "@0x/connect": "^3.0.3",
+        "@0x/contract-wrappers": "^3.0.1",
+        "@0x/json-schemas": "^2.0.1",
+        "@0x/order-utils": "^2.0.1",
+        "@0x/subproviders": "^2.1.1",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
+        "ethereum-types": "^1.1.2",
         "lodash": "^4.17.10"
     },
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/lodash": "^4.14.116",
         "@types/mocha": "^2.2.42",
         "@types/node": "*",
diff --git a/packages/base-contract/package.json b/packages/base-contract/package.json
index 520dff5f9..efa4a5c81 100644
--- a/packages/base-contract/package.json
+++ b/packages/base-contract/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/base-contract",
-    "version": "3.0.2",
+    "version": "3.0.3",
     "engines": {
         "node": ">=6.12"
     },
@@ -29,7 +29,7 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/base-contract/README.md",
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/lodash": "4.14.104",
         "chai": "^4.0.1",
         "make-promises-safe": "^1.1.0",
@@ -40,10 +40,10 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
-        "ethereum-types": "^1.1.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
+        "ethereum-types": "^1.1.2",
         "ethers": "~4.0.4",
         "lodash": "^4.17.5"
     },
diff --git a/packages/connect/package.json b/packages/connect/package.json
index de846e58b..527ac5bdc 100644
--- a/packages/connect/package.json
+++ b/packages/connect/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/connect",
-    "version": "3.0.2",
+    "version": "3.0.3",
     "engines": {
         "node": ">=6.12"
     },
@@ -44,12 +44,12 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/connect/README.md",
     "dependencies": {
-        "@0x/assert": "^1.0.14",
-        "@0x/json-schemas": "^2.0.0",
-        "@0x/order-utils": "^2.0.0",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
+        "@0x/assert": "^1.0.15",
+        "@0x/json-schemas": "^2.0.1",
+        "@0x/order-utils": "^2.0.1",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
         "lodash": "^4.17.5",
         "query-string": "^5.0.1",
         "sinon": "^4.0.0",
@@ -57,7 +57,7 @@
         "websocket": "^1.0.25"
     },
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/fetch-mock": "^6.0.3",
         "@types/lodash": "4.14.104",
         "@types/mocha": "^2.2.42",
diff --git a/packages/contract-addresses/package.json b/packages/contract-addresses/package.json
index 3136d571b..47258edef 100644
--- a/packages/contract-addresses/package.json
+++ b/packages/contract-addresses/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/contract-addresses",
-    "version": "1.0.1",
+    "version": "1.1.0",
     "engines": {
         "node": ">=6.12"
     },
diff --git a/packages/contract-artifacts/package.json b/packages/contract-artifacts/package.json
index 53f5d3c47..9c25e3ac5 100644
--- a/packages/contract-artifacts/package.json
+++ b/packages/contract-artifacts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/contract-artifacts",
-    "version": "1.0.1",
+    "version": "1.1.0",
     "engines": {
         "node": ">=6.12"
     },
diff --git a/packages/contract-wrappers/package.json b/packages/contract-wrappers/package.json
index 178675763..cb69bbd33 100644
--- a/packages/contract-wrappers/package.json
+++ b/packages/contract-wrappers/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/contract-wrappers",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "description": "Smart TS wrappers for 0x smart contracts",
     "keywords": [
         "0xproject",
@@ -37,10 +37,10 @@
         "node": ">=6.0.0"
     },
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.13",
-        "@0x/migrations": "^2.0.0",
-        "@0x/subproviders": "^2.1.0",
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/dev-utils": "^1.0.14",
+        "@0x/migrations": "^2.0.1",
+        "@0x/subproviders": "^2.1.1",
+        "@0x/tslint-config": "^1.0.10",
         "@types/lodash": "4.14.104",
         "@types/mocha": "^2.2.42",
         "@types/node": "*",
@@ -65,18 +65,18 @@
         "web3-provider-engine": "14.0.6"
     },
     "dependencies": {
-        "@0x/abi-gen-wrappers": "^1.0.1",
-        "@0x/assert": "^1.0.14",
-        "@0x/contract-addresses": "^1.0.1",
-        "@0x/contract-artifacts": "^1.0.1",
-        "@0x/fill-scenarios": "^1.0.8",
-        "@0x/json-schemas": "^2.0.0",
-        "@0x/order-utils": "^2.0.0",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
-        "ethereum-types": "^1.1.1",
+        "@0x/abi-gen-wrappers": "^1.0.2",
+        "@0x/assert": "^1.0.15",
+        "@0x/contract-addresses": "^1.1.0",
+        "@0x/contract-artifacts": "^1.1.0",
+        "@0x/fill-scenarios": "^1.0.9",
+        "@0x/json-schemas": "^2.0.1",
+        "@0x/order-utils": "^2.0.1",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
+        "ethereum-types": "^1.1.2",
         "ethereumjs-blockstream": "6.0.0",
         "ethereumjs-util": "^5.1.1",
         "ethers": "~4.0.4",
diff --git a/packages/contracts/package.json b/packages/contracts/package.json
index 4f24310e8..bf9bb4826 100644
--- a/packages/contracts/package.json
+++ b/packages/contracts/package.json
@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "contracts",
-    "version": "2.1.50",
+    "version": "2.1.51",
     "engines": {
         "node": ">=6.12"
     },
@@ -45,12 +45,12 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/contracts/README.md",
     "devDependencies": {
-        "@0x/abi-gen": "^1.0.14",
-        "@0x/dev-utils": "^1.0.13",
-        "@0x/sol-compiler": "^1.1.8",
-        "@0x/sol-cov": "^2.1.8",
-        "@0x/subproviders": "^2.1.0",
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/abi-gen": "^1.0.15",
+        "@0x/dev-utils": "^1.0.14",
+        "@0x/sol-compiler": "^1.1.9",
+        "@0x/sol-cov": "^2.1.9",
+        "@0x/subproviders": "^2.1.1",
+        "@0x/tslint-config": "^1.0.10",
         "@types/bn.js": "^4.11.0",
         "@types/ethereumjs-abi": "^0.6.0",
         "@types/lodash": "4.14.104",
@@ -71,15 +71,15 @@
         "yargs": "^10.0.3"
     },
     "dependencies": {
-        "@0x/base-contract": "^3.0.2",
-        "@0x/order-utils": "^2.0.0",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "@0x/base-contract": "^3.0.3",
+        "@0x/order-utils": "^2.0.1",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "@types/js-combinatorics": "^0.5.29",
         "bn.js": "^4.11.8",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "ethereumjs-abi": "0.6.5",
         "ethereumjs-util": "^5.1.1",
         "ethers": "~4.0.4",
diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json
index ca13c1cc8..b1b89ac99 100644
--- a/packages/dev-tools-pages/package.json
+++ b/packages/dev-tools-pages/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/dev-tools-pages",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "engines": {
         "node": ">=6.12"
     },
@@ -16,7 +16,7 @@
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "@0x/react-shared": "^1.0.17",
+        "@0x/react-shared": "^1.0.18",
         "basscss": "^8.0.3",
         "bowser": "^1.9.3",
         "less": "^2.7.2",
diff --git a/packages/dev-utils/package.json b/packages/dev-utils/package.json
index 7c6bfde90..e1b3201d3 100644
--- a/packages/dev-utils/package.json
+++ b/packages/dev-utils/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/dev-utils",
-    "version": "1.0.13",
+    "version": "1.0.14",
     "engines": {
         "node": ">=6.12"
     },
@@ -29,7 +29,7 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/dev-utils/README.md",
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/lodash": "4.14.104",
         "@types/mocha": "^2.2.42",
         "make-promises-safe": "^1.1.0",
@@ -41,14 +41,14 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/subproviders": "^2.1.0",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "@0x/subproviders": "^2.1.1",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "@types/web3-provider-engine": "^14.0.0",
         "chai": "^4.0.1",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "lodash": "^4.17.5"
     },
     "publishConfig": {
diff --git a/packages/ethereum-types/package.json b/packages/ethereum-types/package.json
index 49b093bdd..1630344db 100644
--- a/packages/ethereum-types/package.json
+++ b/packages/ethereum-types/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ethereum-types",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "engines": {
         "node": ">=6.12"
     },
@@ -29,7 +29,7 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/ethereum-types/README.md",
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "make-promises-safe": "^1.1.0",
         "shx": "^0.2.2",
         "tslint": "5.11.0",
diff --git a/packages/fill-scenarios/package.json b/packages/fill-scenarios/package.json
index ae7fa02ad..e9ca077fb 100644
--- a/packages/fill-scenarios/package.json
+++ b/packages/fill-scenarios/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/fill-scenarios",
-    "version": "1.0.8",
+    "version": "1.0.9",
     "description": "0x order fill scenario generator",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -20,7 +20,7 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/fill-scenarios/README.md",
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/lodash": "4.14.104",
         "make-promises-safe": "^1.1.0",
         "shx": "^0.2.2",
@@ -28,15 +28,15 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/abi-gen-wrappers": "^1.0.1",
-        "@0x/base-contract": "^3.0.2",
-        "@0x/contract-artifacts": "^1.0.1",
-        "@0x/order-utils": "^2.0.0",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
-        "ethereum-types": "^1.1.1",
+        "@0x/abi-gen-wrappers": "^1.0.2",
+        "@0x/base-contract": "^3.0.3",
+        "@0x/contract-artifacts": "^1.1.0",
+        "@0x/order-utils": "^2.0.1",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
+        "ethereum-types": "^1.1.2",
         "ethers": "~4.0.4",
         "lodash": "^4.17.5"
     },
diff --git a/packages/instant/package.json b/packages/instant/package.json
index 32fbe08a4..3c87743c1 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/instant",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "engines": {
         "node": ">=6.12"
     },
@@ -45,17 +45,17 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
     "dependencies": {
-        "@0x/assert": "^1.0.14",
-        "@0x/asset-buyer": "^2.1.0",
-        "@0x/json-schemas": "^2.0.0",
-        "@0x/order-utils": "^2.0.0",
-        "@0x/subproviders": "^2.1.0",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "@0x/assert": "^1.0.15",
+        "@0x/asset-buyer": "^2.2.0",
+        "@0x/json-schemas": "^2.0.1",
+        "@0x/order-utils": "^2.0.1",
+        "@0x/subproviders": "^2.1.1",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "copy-to-clipboard": "^3.0.8",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "lodash": "^4.17.10",
         "polished": "^2.2.0",
         "react": "^16.5.2",
@@ -67,7 +67,7 @@
         "ts-optchain": "^0.1.1"
     },
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@static/discharge": "https://github.com/0xProject/discharge.git",
         "@types/enzyme": "^3.1.14",
         "@types/enzyme-adapter-react-16": "^1.0.3",
diff --git a/packages/json-schemas/package.json b/packages/json-schemas/package.json
index 57715c601..c87cbb65a 100644
--- a/packages/json-schemas/package.json
+++ b/packages/json-schemas/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/json-schemas",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "engines": {
         "node": ">=6.12"
     },
@@ -39,14 +39,14 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/json-schemas/README.md",
     "dependencies": {
-        "@0x/typescript-typings": "^3.0.3",
+        "@0x/typescript-typings": "^3.0.4",
         "@types/node": "*",
         "jsonschema": "^1.2.0",
         "lodash.values": "^4.3.0"
     },
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
-        "@0x/utils": "^2.0.3",
+        "@0x/tslint-config": "^1.0.10",
+        "@0x/utils": "^2.0.4",
         "@types/lodash.foreach": "^4.5.3",
         "@types/lodash.values": "^4.3.3",
         "@types/mocha": "^2.2.42",
diff --git a/packages/metacoin/package.json b/packages/metacoin/package.json
index e3432c010..35a0834f2 100644
--- a/packages/metacoin/package.json
+++ b/packages/metacoin/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/metacoin",
-    "version": "0.0.24",
+    "version": "0.0.25",
     "engines": {
         "node": ">=6.12"
     },
@@ -29,25 +29,25 @@
     "author": "",
     "license": "Apache-2.0",
     "dependencies": {
-        "@0x/abi-gen": "^1.0.14",
-        "@0x/base-contract": "^3.0.2",
-        "@0x/sol-cov": "^2.1.8",
-        "@0x/subproviders": "^2.1.0",
-        "@0x/tslint-config": "^1.0.9",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "@0x/abi-gen": "^1.0.15",
+        "@0x/base-contract": "^3.0.3",
+        "@0x/sol-cov": "^2.1.9",
+        "@0x/subproviders": "^2.1.1",
+        "@0x/tslint-config": "^1.0.10",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "@types/mocha": "^5.2.2",
         "copyfiles": "^2.0.0",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "ethers": "~4.0.4",
         "lodash": "^4.17.5",
         "run-s": "^0.0.0"
     },
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.13",
-        "@0x/sol-compiler": "^1.1.8",
+        "@0x/dev-utils": "^1.0.14",
+        "@0x/sol-compiler": "^1.1.9",
         "chai": "^4.0.1",
         "chai-as-promised": "^7.1.0",
         "chai-bignumber": "^2.0.1",
diff --git a/packages/migrations/package.json b/packages/migrations/package.json
index b610d3c6a..d8c5fb6c2 100644
--- a/packages/migrations/package.json
+++ b/packages/migrations/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/migrations",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "engines": {
         "node": ">=6.12"
     },
@@ -17,9 +17,9 @@
     },
     "license": "Apache-2.0",
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.13",
-        "@0x/tslint-config": "^1.0.9",
-        "@0x/types": "^1.2.0",
+        "@0x/dev-utils": "^1.0.14",
+        "@0x/tslint-config": "^1.0.10",
+        "@0x/types": "^1.2.1",
         "@types/yargs": "^10.0.0",
         "make-promises-safe": "^1.1.0",
         "npm-run-all": "^4.1.2",
@@ -29,18 +29,18 @@
         "yargs": "^10.0.3"
     },
     "dependencies": {
-        "@0x/abi-gen-wrappers": "^1.0.1",
-        "@0x/base-contract": "^3.0.2",
-        "@0x/contract-addresses": "^1.0.1",
-        "@0x/contract-artifacts": "^1.0.1",
-        "@0x/order-utils": "^2.0.0",
-        "@0x/sol-compiler": "^1.1.8",
-        "@0x/subproviders": "^2.1.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "@0x/abi-gen-wrappers": "^1.0.2",
+        "@0x/base-contract": "^3.0.3",
+        "@0x/contract-addresses": "^1.1.0",
+        "@0x/contract-artifacts": "^1.1.0",
+        "@0x/order-utils": "^2.0.1",
+        "@0x/sol-compiler": "^1.1.9",
+        "@0x/subproviders": "^2.1.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "@ledgerhq/hw-app-eth": "^4.3.0",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "ethers": "~4.0.4",
         "lodash": "^4.17.5"
     },
diff --git a/packages/monorepo-scripts/package.json b/packages/monorepo-scripts/package.json
index a83f90516..a31085014 100644
--- a/packages/monorepo-scripts/package.json
+++ b/packages/monorepo-scripts/package.json
@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "@0x/monorepo-scripts",
-    "version": "1.0.12",
+    "version": "1.0.13",
     "engines": {
         "node": ">=6.12"
     },
diff --git a/packages/order-utils/package.json b/packages/order-utils/package.json
index a6a84b940..d6fb9892e 100644
--- a/packages/order-utils/package.json
+++ b/packages/order-utils/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/order-utils",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "engines": {
         "node": ">=6.12"
     },
@@ -35,8 +35,8 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/order-utils/README.md",
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.13",
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/dev-utils": "^1.0.14",
+        "@0x/tslint-config": "^1.0.10",
         "@types/bn.js": "^4.11.0",
         "@types/lodash": "4.14.104",
         "chai": "^4.0.1",
@@ -53,18 +53,18 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/abi-gen-wrappers": "^1.0.1",
-        "@0x/assert": "^1.0.14",
-        "@0x/base-contract": "^3.0.2",
-        "@0x/contract-artifacts": "^1.0.1",
-        "@0x/json-schemas": "^2.0.0",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "@0x/abi-gen-wrappers": "^1.0.2",
+        "@0x/assert": "^1.0.15",
+        "@0x/base-contract": "^3.0.3",
+        "@0x/contract-artifacts": "^1.1.0",
+        "@0x/json-schemas": "^2.0.1",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "@types/node": "*",
         "bn.js": "^4.11.8",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "ethereumjs-abi": "0.6.5",
         "ethereumjs-util": "^5.1.1",
         "ethers": "~4.0.4",
diff --git a/packages/order-watcher/package.json b/packages/order-watcher/package.json
index 42e3f572c..174e0a3a6 100644
--- a/packages/order-watcher/package.json
+++ b/packages/order-watcher/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/order-watcher",
-    "version": "2.2.0",
+    "version": "2.2.1",
     "description": "An order watcher daemon that watches for order validity",
     "keywords": [
         "0x",
@@ -33,9 +33,9 @@
         "node": ">=6.0.0"
     },
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.13",
-        "@0x/migrations": "^2.0.0",
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/dev-utils": "^1.0.14",
+        "@0x/migrations": "^2.0.1",
+        "@0x/tslint-config": "^1.0.10",
         "@types/bintrees": "^1.0.2",
         "@types/lodash": "4.14.104",
         "@types/mocha": "^2.2.42",
@@ -57,21 +57,21 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/abi-gen-wrappers": "^1.0.1",
-        "@0x/assert": "^1.0.14",
-        "@0x/base-contract": "^3.0.2",
-        "@0x/contract-addresses": "^1.0.1",
-        "@0x/contract-artifacts": "^1.0.1",
-        "@0x/contract-wrappers": "^3.0.0",
-        "@0x/fill-scenarios": "^1.0.8",
-        "@0x/json-schemas": "^2.0.0",
-        "@0x/order-utils": "^2.0.0",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "@0x/abi-gen-wrappers": "^1.0.2",
+        "@0x/assert": "^1.0.15",
+        "@0x/base-contract": "^3.0.3",
+        "@0x/contract-addresses": "^1.1.0",
+        "@0x/contract-artifacts": "^1.1.0",
+        "@0x/contract-wrappers": "^3.0.1",
+        "@0x/fill-scenarios": "^1.0.9",
+        "@0x/json-schemas": "^2.0.1",
+        "@0x/order-utils": "^2.0.1",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "bintrees": "^1.0.2",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "ethereumjs-blockstream": "6.0.0",
         "ethers": "~4.0.4",
         "lodash": "^4.17.5"
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index e234b0479..827a54fdb 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/react-docs",
-    "version": "1.0.14",
+    "version": "1.0.15",
     "engines": {
         "node": ">=6.12"
     },
@@ -24,8 +24,8 @@
         "url": "https://github.com/0xProject/0x-monorepo.git"
     },
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.13",
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/dev-utils": "^1.0.14",
+        "@0x/tslint-config": "^1.0.10",
         "@types/compare-versions": "^3.0.0",
         "@types/styled-components": "^4.0.0",
         "make-promises-safe": "^1.1.0",
@@ -34,9 +34,9 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/react-shared": "^1.0.17",
-        "@0x/types": "^1.2.0",
-        "@0x/utils": "^2.0.3",
+        "@0x/react-shared": "^1.0.18",
+        "@0x/types": "^1.2.1",
+        "@0x/utils": "^2.0.4",
         "@types/lodash": "4.14.104",
         "@types/material-ui": "^0.20.0",
         "@types/node": "*",
diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json
index 45220e2d2..35a69f105 100644
--- a/packages/react-shared/package.json
+++ b/packages/react-shared/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/react-shared",
-    "version": "1.0.17",
+    "version": "1.0.18",
     "engines": {
         "node": ">=6.12"
     },
@@ -25,15 +25,15 @@
         "url": "https://github.com/0xProject/0x-monorepo.git"
     },
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.13",
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/dev-utils": "^1.0.14",
+        "@0x/tslint-config": "^1.0.10",
         "make-promises-safe": "^1.1.0",
         "shx": "^0.2.2",
         "tslint": "^5.9.1",
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/types": "^1.2.0",
+        "@0x/types": "^1.2.1",
         "@material-ui/core": "^3.0.1",
         "@types/is-mobile": "0.3.0",
         "@types/lodash": "4.14.104",
diff --git a/packages/sol-compiler/package.json b/packages/sol-compiler/package.json
index 17ccb50b8..766c789df 100644
--- a/packages/sol-compiler/package.json
+++ b/packages/sol-compiler/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/sol-compiler",
-    "version": "1.1.8",
+    "version": "1.1.9",
     "engines": {
         "node": ">=6.12"
     },
@@ -42,8 +42,8 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/sol-compiler/README.md",
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.13",
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/dev-utils": "^1.0.14",
+        "@0x/tslint-config": "^1.0.10",
         "@types/mkdirp": "^0.5.2",
         "@types/require-from-string": "^1.2.0",
         "@types/semver": "^5.5.0",
@@ -65,16 +65,16 @@
         "zeppelin-solidity": "1.8.0"
     },
     "dependencies": {
-        "@0x/assert": "^1.0.14",
-        "@0x/json-schemas": "^2.0.0",
-        "@0x/sol-resolver": "^1.0.15",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "@0x/assert": "^1.0.15",
+        "@0x/json-schemas": "^2.0.1",
+        "@0x/sol-resolver": "^1.0.16",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "@types/yargs": "^11.0.0",
         "chalk": "^2.3.0",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "ethereumjs-util": "^5.1.1",
         "lodash": "^4.17.5",
         "mkdirp": "^0.5.1",
diff --git a/packages/sol-cov/package.json b/packages/sol-cov/package.json
index 09119321d..34e7a8559 100644
--- a/packages/sol-cov/package.json
+++ b/packages/sol-cov/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/sol-cov",
-    "version": "2.1.8",
+    "version": "2.1.9",
     "engines": {
         "node": ">=6.12"
     },
@@ -42,14 +42,14 @@
     },
     "homepage": "https://github.com/0xProject/0x.js/packages/sol-cov/README.md",
     "dependencies": {
-        "@0x/dev-utils": "^1.0.13",
-        "@0x/sol-compiler": "^1.1.8",
-        "@0x/subproviders": "^2.1.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "@0x/dev-utils": "^1.0.14",
+        "@0x/sol-compiler": "^1.1.9",
+        "@0x/subproviders": "^2.1.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "@types/solidity-parser-antlr": "^0.2.0",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "ethereumjs-util": "^5.1.1",
         "glob": "^7.1.2",
         "istanbul": "^0.4.5",
@@ -61,7 +61,7 @@
         "solidity-parser-antlr": "^0.2.12"
     },
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/istanbul": "^0.4.30",
         "@types/loglevel": "^1.5.3",
         "@types/mkdirp": "^0.5.1",
diff --git a/packages/sol-doc/package.json b/packages/sol-doc/package.json
index b1e887fa5..0eb5d6fd5 100644
--- a/packages/sol-doc/package.json
+++ b/packages/sol-doc/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/sol-doc",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "Solidity documentation generator",
     "main": "lib/src/index.js",
     "types": "lib/src/index.d.js",
@@ -25,16 +25,16 @@
     "author": "F. Eugene Aumson",
     "license": "Apache-2.0",
     "dependencies": {
-        "@0x/sol-compiler": "^1.1.8",
-        "@0x/types": "^1.2.0",
-        "@0x/utils": "^2.0.3",
-        "ethereum-types": "^1.1.1",
+        "@0x/sol-compiler": "^1.1.9",
+        "@0x/types": "^1.2.1",
+        "@0x/utils": "^2.0.4",
+        "ethereum-types": "^1.1.2",
         "ethereumjs-util": "^5.1.1",
         "lodash": "^4.17.10",
         "yargs": "^12.0.2"
     },
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "chai": "^4.1.2",
         "chai-as-promised": "^7.1.0",
         "chai-bignumber": "^2.0.2",
diff --git a/packages/sol-resolver/package.json b/packages/sol-resolver/package.json
index 4d4d0be0e..7572072c4 100644
--- a/packages/sol-resolver/package.json
+++ b/packages/sol-resolver/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/sol-resolver",
-    "version": "1.0.15",
+    "version": "1.0.16",
     "engines": {
         "node": ">=6.12"
     },
@@ -23,15 +23,15 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/resolver/README.md",
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "make-promises-safe": "^1.1.0",
         "shx": "^0.2.2",
         "tslint": "5.11.0",
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
         "lodash": "^4.17.5"
     },
     "publishConfig": {
diff --git a/packages/sra-spec/package.json b/packages/sra-spec/package.json
index 2d3e7decd..e3b6ad979 100644
--- a/packages/sra-spec/package.json
+++ b/packages/sra-spec/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/sra-spec",
-    "version": "1.0.7",
+    "version": "1.0.8",
     "engines": {
         "node": ">=6.12"
     },
@@ -35,11 +35,11 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/sra-spec/README.md",
     "dependencies": {
-        "@0x/json-schemas": "^2.0.0",
+        "@0x/json-schemas": "^2.0.1",
         "@loopback/openapi-v3-types": "^0.8.2"
     },
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/mocha": "^2.2.42",
         "@types/node": "^10.5.3",
         "chai": "^4.0.1",
diff --git a/packages/subproviders/package.json b/packages/subproviders/package.json
index 3b4313004..1a25b5e32 100644
--- a/packages/subproviders/package.json
+++ b/packages/subproviders/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/subproviders",
-    "version": "2.1.0",
+    "version": "2.1.1",
     "engines": {
         "node": ">=6.12"
     },
@@ -29,11 +29,11 @@
         }
     },
     "dependencies": {
-        "@0x/assert": "^1.0.14",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "@0x/assert": "^1.0.15",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "@ledgerhq/hw-app-eth": "^4.3.0",
         "@ledgerhq/hw-transport-u2f": "4.24.0",
         "@types/eth-lightwallet": "^3.0.0",
@@ -43,7 +43,7 @@
         "bip39": "^2.5.0",
         "bn.js": "^4.11.8",
         "eth-lightwallet": "^3.0.1",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "ethereumjs-tx": "^1.3.5",
         "ethereumjs-util": "^5.1.1",
         "ganache-core": "^2.2.1",
@@ -54,7 +54,7 @@
         "web3-provider-engine": "14.0.6"
     },
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/bip39": "^2.4.0",
         "@types/bn.js": "^4.11.0",
         "@types/ethereumjs-tx": "^1.0.0",
diff --git a/packages/testnet-faucets/package.json b/packages/testnet-faucets/package.json
index 53f1b95df..c46f5465a 100644
--- a/packages/testnet-faucets/package.json
+++ b/packages/testnet-faucets/package.json
@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "@0x/testnet-faucets",
-    "version": "1.0.52",
+    "version": "1.0.53",
     "engines": {
         "node": ">=6.12"
     },
@@ -18,13 +18,13 @@
     "author": "Fabio Berger",
     "license": "Apache-2.0",
     "dependencies": {
-        "0x.js": "^2.0.0",
-        "@0x/subproviders": "^2.1.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "0x.js": "^2.0.1",
+        "@0x/subproviders": "^2.1.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "body-parser": "^1.17.1",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "ethereumjs-tx": "^1.3.5",
         "ethereumjs-util": "^5.1.1",
         "express": "^4.15.2",
@@ -32,7 +32,7 @@
         "rollbar": "^0.6.5"
     },
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/body-parser": "^1.16.1",
         "@types/express": "^4.0.35",
         "@types/lodash": "4.14.104",
diff --git a/packages/tslint-config/package.json b/packages/tslint-config/package.json
index a235532fb..2914f31e2 100644
--- a/packages/tslint-config/package.json
+++ b/packages/tslint-config/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/tslint-config",
-    "version": "1.0.9",
+    "version": "1.0.10",
     "engines": {
         "node": ">=6.12"
     },
diff --git a/packages/types/package.json b/packages/types/package.json
index 9b3ae6701..c32e9a6f7 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/types",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "engines": {
         "node": ">=6.12"
     },
@@ -23,7 +23,7 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/types/README.md",
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "make-promises-safe": "^1.1.0",
         "shx": "^0.2.2",
         "tslint": "5.11.0",
@@ -32,7 +32,7 @@
     "dependencies": {
         "@types/node": "*",
         "bignumber.js": "~4.1.0",
-        "ethereum-types": "^1.1.1"
+        "ethereum-types": "^1.1.2"
     },
     "publishConfig": {
         "access": "public"
diff --git a/packages/typescript-typings/package.json b/packages/typescript-typings/package.json
index 6b9e67602..9dbbe1370 100644
--- a/packages/typescript-typings/package.json
+++ b/packages/typescript-typings/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/typescript-typings",
-    "version": "3.0.3",
+    "version": "3.0.4",
     "engines": {
         "node": ">=6.12"
     },
@@ -27,7 +27,7 @@
         "@types/bn.js": "^4.11.0",
         "@types/react": "*",
         "bignumber.js": "~4.1.0",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "popper.js": "1.14.3"
     },
     "devDependencies": {
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 4e0df9275..24c2496b0 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/utils",
-    "version": "2.0.3",
+    "version": "2.0.4",
     "engines": {
         "node": ">=6.12"
     },
@@ -28,7 +28,7 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/utils/README.md",
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/detect-node": "2.0.0",
         "@types/lodash": "4.14.104",
         "@types/mocha": "^2.2.42",
@@ -41,13 +41,13 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
         "@types/node": "*",
         "abortcontroller-polyfill": "^1.1.9",
         "bignumber.js": "~4.1.0",
         "detect-node": "2.0.3",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "ethereumjs-util": "^5.1.1",
         "ethers": "~4.0.4",
         "isomorphic-fetch": "^2.2.1",
diff --git a/packages/web3-wrapper/package.json b/packages/web3-wrapper/package.json
index e95245df8..2b87cc92a 100644
--- a/packages/web3-wrapper/package.json
+++ b/packages/web3-wrapper/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/web3-wrapper",
-    "version": "3.1.0",
+    "version": "3.1.1",
     "engines": {
         "node": ">=6.12"
     },
@@ -35,7 +35,7 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/web3-wrapper/README.md",
     "devDependencies": {
-        "@0x/tslint-config": "^1.0.9",
+        "@0x/tslint-config": "^1.0.10",
         "@types/ganache-core": "^2.1.0",
         "@types/lodash": "4.14.104",
         "chai": "^4.0.1",
@@ -53,11 +53,11 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/assert": "^1.0.14",
-        "@0x/json-schemas": "^2.0.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "ethereum-types": "^1.1.1",
+        "@0x/assert": "^1.0.15",
+        "@0x/json-schemas": "^2.0.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "ethereum-types": "^1.1.2",
         "ethereumjs-util": "^5.1.1",
         "ethers": "~4.0.4",
         "lodash": "^4.17.5"
diff --git a/packages/website/package.json b/packages/website/package.json
index dd14d4b17..fd671d85d 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/website",
-    "version": "0.0.55",
+    "version": "0.0.56",
     "engines": {
         "node": ">=6.12"
     },
@@ -20,22 +20,22 @@
     "author": "Fabio Berger",
     "license": "Apache-2.0",
     "dependencies": {
-        "@0x/contract-wrappers": "^3.0.0",
-        "@0x/json-schemas": "^2.0.0",
-        "@0x/order-utils": "^2.0.0",
-        "@0x/react-docs": "^1.0.14",
-        "@0x/react-shared": "^1.0.17",
-        "@0x/subproviders": "^2.1.0",
-        "@0x/types": "^1.2.0",
-        "@0x/typescript-typings": "^3.0.3",
-        "@0x/utils": "^2.0.3",
-        "@0x/web3-wrapper": "^3.1.0",
+        "@0x/contract-wrappers": "^3.0.1",
+        "@0x/json-schemas": "^2.0.1",
+        "@0x/order-utils": "^2.0.1",
+        "@0x/react-docs": "^1.0.15",
+        "@0x/react-shared": "^1.0.18",
+        "@0x/subproviders": "^2.1.1",
+        "@0x/types": "^1.2.1",
+        "@0x/typescript-typings": "^3.0.4",
+        "@0x/utils": "^2.0.4",
+        "@0x/web3-wrapper": "^3.1.1",
         "accounting": "^0.4.1",
         "basscss": "^8.0.3",
         "blockies": "^0.0.2",
         "bowser": "^1.9.3",
         "deep-equal": "^1.0.1",
-        "ethereum-types": "^1.1.1",
+        "ethereum-types": "^1.1.2",
         "ethereumjs-util": "^5.1.1",
         "find-versions": "^2.0.0",
         "jsonschema": "^1.2.0",
-- 
cgit v1.2.3


From 2e8f74abce7be3a5799bb93a0360d299de55b621 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 9 Nov 2018 10:40:47 -0800
Subject: Use existing functions instead of writing our own

---
 .../src/components/zero_ex_instant_provider.tsx    |  6 +-
 .../selected_erc20_asset_amount_input.ts           |  6 +-
 packages/instant/src/redux/async_data.ts           |  3 +-
 packages/instant/src/util/buy_quote_fetcher.ts     | 75 ----------------------
 packages/instant/src/util/buy_quote_updater.ts     |  9 ++-
 packages/instant/src/util/heartbeater.ts           | 12 +++-
 packages/instant/src/util/heartbeater_factory.ts   | 11 ++--
 7 files changed, 28 insertions(+), 94 deletions(-)
 delete mode 100644 packages/instant/src/util/buy_quote_fetcher.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 34257d25f..f5605a187 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -99,13 +99,13 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
         }
         // tslint:disable-next-line:no-floating-promises
-        // asyncData.fetchAccountInfoAndDispatchToStore(this._store);
 
-        this._accountUpdateHeartbeat = generateAccountHeartbeater(this._store);
+        this._accountUpdateHeartbeat = generateAccountHeartbeater(this._store, true);
         this._accountUpdateHeartbeat.start(ACCOUNT_UPDATE_INTERVAL_TIME_MS);
 
-        this._buyQuoteHeartbeat = generateBuyQuoteHeartbeater(this._store);
+        this._buyQuoteHeartbeat = generateBuyQuoteHeartbeater(this._store, false);
         this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS);
+        asyncData.fetchCurrentBuyQuoteAndDispatchToStore(this._store, true);
 
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 74713327c..93ff3db70 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -11,7 +11,6 @@ import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
 import { AffiliateInfo, ERC20Asset, OrderProcessState } from '../types';
-import { updateBuyQuoteOrFlashErrorAsync } from '../util/buy_quote_fetcher';
 import { buyQuoteUpdater } from '../util/buy_quote_updater';
 
 export interface SelectedERC20AssetAmountInputProps {
@@ -68,10 +67,9 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
     };
 };
 
-// TODO: change to set pending to true
 const debouncedUpdateBuyQuoteAsync = _.debounce(buyQuoteUpdater.updateBuyQuoteAsync.bind(buyQuoteUpdater), 200, {
     trailing: true,
-});
+}) as typeof buyQuoteUpdater.updateBuyQuoteAsync;
 
 const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
@@ -89,7 +87,7 @@ const mapDispatchToProps = (
             // even if it's debounced, give them the illusion it's loading
             dispatch(actions.setQuoteRequestStatePending());
             // tslint:disable-next-line:no-floating-promises
-            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, affiliateInfo);
+            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, true, affiliateInfo);
         }
     },
 });
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index a50f24cba..7af6e1e56 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -74,7 +74,7 @@ export const asyncData = {
             return;
         }
     },
-    fetchCurrentBuyQuoteAndDispatchToStore: async (store: Store) => {
+    fetchCurrentBuyQuoteAndDispatchToStore: async (store: Store, setPending: boolean) => {
         const { providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
         const assetBuyer = providerState.assetBuyer;
         if (
@@ -87,6 +87,7 @@ export const asyncData = {
                 store.dispatch,
                 selectedAsset as ERC20Asset,
                 selectedAssetAmount,
+                setPending,
                 affiliateInfo,
             );
         }
diff --git a/packages/instant/src/util/buy_quote_fetcher.ts b/packages/instant/src/util/buy_quote_fetcher.ts
deleted file mode 100644
index 22ce835e8..000000000
--- a/packages/instant/src/util/buy_quote_fetcher.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-// TODO: rename file and export object
-// TODO: delete this
-
-import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
-import { AssetProxyId } from '@0x/types';
-import { BigNumber } from '@0x/utils';
-import { Web3Wrapper } from '@0x/web3-wrapper';
-import * as _ from 'lodash';
-import { Dispatch } from 'redux';
-import { oc } from 'ts-optchain';
-
-import { Action, actions } from '../redux/actions';
-import { State } from '../redux/reducer';
-import { AffiliateInfo, ERC20Asset } from '../types';
-import { assetUtils } from '../util/asset';
-
-import { errorFlasher } from './error_flasher';
-
-export const updateBuyQuoteOrFlashErrorAsync = async (
-    assetBuyer: AssetBuyer,
-    asset: ERC20Asset,
-    assetAmount: BigNumber,
-    dispatch: Dispatch<Action>,
-    affiliateInfo?: AffiliateInfo,
-) => {
-    // get a new buy quote.
-    const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
-
-    const feePercentage = oc(affiliateInfo).feePercentage();
-    let newBuyQuote: BuyQuote | undefined;
-    try {
-        newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
-    } catch (error) {
-        dispatch(actions.setQuoteRequestStateFailure());
-        let errorMessage;
-        if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
-            const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
-            errorMessage = `Not enough ${assetName} available`;
-        } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
-            errorMessage = 'Not enough ZRX available';
-        } else if (
-            error.message === AssetBuyerError.StandardRelayerApiError ||
-            error.message.startsWith(AssetBuyerError.AssetUnavailable)
-        ) {
-            const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
-            errorMessage = `${assetName} is currently unavailable`;
-        }
-        if (!_.isUndefined(errorMessage)) {
-            errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
-        } else {
-            throw error;
-        }
-        return;
-    }
-    // We have a successful new buy quote
-    errorFlasher.clearError(dispatch);
-    // invalidate the last buy quote.
-    dispatch(actions.updateLatestBuyQuote(newBuyQuote));
-};
-
-export const updateBuyQuoteOrFlashErrorAsyncForState = async (state: State, dispatch: Dispatch<Action>) => {
-    const { selectedAsset, selectedAssetAmount, affiliateInfo } = state;
-    const assetBuyer = state.providerState.assetBuyer;
-
-    if (selectedAsset && selectedAssetAmount && selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20) {
-        // TODO: maybe dont do in the case of an error showing
-        updateBuyQuoteOrFlashErrorAsync(
-            assetBuyer,
-            selectedAsset as ERC20Asset, // TODO: better way to do this?
-            selectedAssetAmount,
-            dispatch,
-            affiliateInfo,
-        );
-    }
-};
diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts
index e697d3ef7..fb5da311d 100644
--- a/packages/instant/src/util/buy_quote_updater.ts
+++ b/packages/instant/src/util/buy_quote_updater.ts
@@ -1,4 +1,5 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { AssetProxyId } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
@@ -6,6 +7,7 @@ import { Dispatch } from 'redux';
 import { oc } from 'ts-optchain';
 
 import { Action, actions } from '../redux/actions';
+import { State } from '../redux/reducer';
 import { AffiliateInfo, ERC20Asset } from '../types';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
@@ -16,12 +18,15 @@ export const buyQuoteUpdater = {
         dispatch: Dispatch<Action>,
         asset: ERC20Asset,
         assetAmount: BigNumber,
+        setPending = true,
         affiliateInfo?: AffiliateInfo,
     ): Promise<void> => {
         // get a new buy quote.
         const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
-        // mark quote as pending
-        dispatch(actions.setQuoteRequestStatePending());
+        if (setPending) {
+            // mark quote as pending
+            dispatch(actions.setQuoteRequestStatePending());
+        }
         const feePercentage = oc(affiliateInfo).feePercentage();
         let newBuyQuote: BuyQuote | undefined;
         try {
diff --git a/packages/instant/src/util/heartbeater.ts b/packages/instant/src/util/heartbeater.ts
index bb4e99383..87af48423 100644
--- a/packages/instant/src/util/heartbeater.ts
+++ b/packages/instant/src/util/heartbeater.ts
@@ -4,18 +4,24 @@ type HeartbeatableFunction = () => Promise<void>;
 export class Heartbeater {
     private _intervalId?: number;
     private _hasPendingRequest: boolean;
+    private _performImmediatelyOnStart: boolean;
     private _performFunction: HeartbeatableFunction;
 
-    public constructor(_performingFunctionAsync: HeartbeatableFunction) {
-        this._performFunction = _performingFunctionAsync;
+    public constructor(performingFunctionAsync: HeartbeatableFunction, performImmediatelyOnStart: boolean) {
+        this._performFunction = performingFunctionAsync;
         this._hasPendingRequest = false;
+        this._performImmediatelyOnStart = performImmediatelyOnStart;
     }
 
     public start(intervalTimeMs: number): void {
         if (!_.isUndefined(this._intervalId)) {
             throw new Error('Heartbeat is running, please stop before restarting');
         }
-        this._trackAndPerformAsync();
+
+        if (this._performImmediatelyOnStart) {
+            this._trackAndPerformAsync();
+        }
+
         this._intervalId = window.setInterval(this._trackAndPerformAsync.bind(this), intervalTimeMs);
     }
 
diff --git a/packages/instant/src/util/heartbeater_factory.ts b/packages/instant/src/util/heartbeater_factory.ts
index 9fac9cf4c..beedb66c8 100644
--- a/packages/instant/src/util/heartbeater_factory.ts
+++ b/packages/instant/src/util/heartbeater_factory.ts
@@ -1,17 +1,16 @@
 import { asyncData } from '../redux/async_data';
 import { Store } from '../redux/store';
 
-import { updateBuyQuoteOrFlashErrorAsyncForState } from './buy_quote_fetcher';
 import { Heartbeater } from './heartbeater';
 
-export const generateAccountHeartbeater = (store: Store): Heartbeater => {
+export const generateAccountHeartbeater = (store: Store, performImmediatelyOnStart: boolean): Heartbeater => {
     return new Heartbeater(async () => {
         await asyncData.fetchAccountInfoAndDispatchToStore(store, { setLoading: false });
-    });
+    }, performImmediatelyOnStart);
 };
 
-export const generateBuyQuoteHeartbeater = (store: Store): Heartbeater => {
+export const generateBuyQuoteHeartbeater = (store: Store, performImmediatelyOnStart: boolean): Heartbeater => {
     return new Heartbeater(async () => {
-        await updateBuyQuoteOrFlashErrorAsyncForState(store.getState(), store.dispatch);
-    });
+        await asyncData.fetchCurrentBuyQuoteAndDispatchToStore(store, false);
+    }, performImmediatelyOnStart);
 };
-- 
cgit v1.2.3


From 39657b633bd386526f5772238cbebfb976427c07 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 9 Nov 2018 11:04:44 -0800
Subject: Make sure we only update price when they are not in the middle of an
 order

---
 packages/instant/src/redux/async_data.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index 7af6e1e56..c7fe4cd0e 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -2,7 +2,7 @@ import { AssetProxyId } from '@0x/types';
 import * as _ from 'lodash';
 
 import { BIG_NUMBER_ZERO } from '../constants';
-import { AccountState, ERC20Asset } from '../types';
+import { AccountState, ERC20Asset, OrderProcessState } from '../types';
 import { assetUtils } from '../util/asset';
 import { buyQuoteUpdater } from '../util/buy_quote_updater';
 import { coinbaseApi } from '../util/coinbase_api';
@@ -75,11 +75,12 @@ export const asyncData = {
         }
     },
     fetchCurrentBuyQuoteAndDispatchToStore: async (store: Store, setPending: boolean) => {
-        const { providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
+        const { buyOrderState, providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
         const assetBuyer = providerState.assetBuyer;
         if (
             !_.isUndefined(selectedAssetAmount) &&
             !_.isUndefined(selectedAsset) &&
+            buyOrderState.processState === OrderProcessState.None &&
             selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
         ) {
             await buyQuoteUpdater.updateBuyQuoteAsync(
-- 
cgit v1.2.3


From 474db7c18de63429f72511796291ff135c77f10b Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 9 Nov 2018 11:22:46 -0800
Subject: Emulate named parameters with interface

---
 packages/instant/src/components/zero_ex_instant_provider.tsx |  9 ++++++---
 packages/instant/src/redux/async_data.ts                     |  3 ++-
 packages/instant/src/util/heartbeater_factory.ts             | 12 +++++++++---
 3 files changed, 17 insertions(+), 7 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index f5605a187..20d677dc2 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -100,12 +100,15 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
         }
         // tslint:disable-next-line:no-floating-promises
 
-        this._accountUpdateHeartbeat = generateAccountHeartbeater(this._store, true);
+        this._accountUpdateHeartbeat = generateAccountHeartbeater({
+            store: this._store,
+            performImmediatelyOnStart: true,
+        });
         this._accountUpdateHeartbeat.start(ACCOUNT_UPDATE_INTERVAL_TIME_MS);
 
-        this._buyQuoteHeartbeat = generateBuyQuoteHeartbeater(this._store, false);
+        this._buyQuoteHeartbeat = generateBuyQuoteHeartbeater({ store: this._store, performImmediatelyOnStart: false });
         this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS);
-        asyncData.fetchCurrentBuyQuoteAndDispatchToStore(this._store, true);
+        asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store: this._store, setPending: true });
 
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index c7fe4cd0e..61de54d82 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -74,7 +74,8 @@ export const asyncData = {
             return;
         }
     },
-    fetchCurrentBuyQuoteAndDispatchToStore: async (store: Store, setPending: boolean) => {
+    fetchCurrentBuyQuoteAndDispatchToStore: async (options: { store: Store; setPending: boolean }) => {
+        const { store, setPending } = options;
         const { buyOrderState, providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
         const assetBuyer = providerState.assetBuyer;
         if (
diff --git a/packages/instant/src/util/heartbeater_factory.ts b/packages/instant/src/util/heartbeater_factory.ts
index beedb66c8..0feb05422 100644
--- a/packages/instant/src/util/heartbeater_factory.ts
+++ b/packages/instant/src/util/heartbeater_factory.ts
@@ -3,14 +3,20 @@ import { Store } from '../redux/store';
 
 import { Heartbeater } from './heartbeater';
 
-export const generateAccountHeartbeater = (store: Store, performImmediatelyOnStart: boolean): Heartbeater => {
+export interface HeartbeatFactoryOptions {
+    store: Store;
+    performImmediatelyOnStart: boolean;
+}
+export const generateAccountHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
+    const { store, performImmediatelyOnStart } = options;
     return new Heartbeater(async () => {
         await asyncData.fetchAccountInfoAndDispatchToStore(store, { setLoading: false });
     }, performImmediatelyOnStart);
 };
 
-export const generateBuyQuoteHeartbeater = (store: Store, performImmediatelyOnStart: boolean): Heartbeater => {
+export const generateBuyQuoteHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
+    const { store, performImmediatelyOnStart } = options;
     return new Heartbeater(async () => {
-        await asyncData.fetchCurrentBuyQuoteAndDispatchToStore(store, false);
+        await asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store, setPending: false });
     }, performImmediatelyOnStart);
 };
-- 
cgit v1.2.3


From 36b8c9c5dd6cc650eaed8a2a6abd8f596c189fed Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 9 Nov 2018 11:28:08 -0800
Subject: Use interface like named parameters here

---
 packages/instant/src/redux/async_data.ts         | 5 +++--
 packages/instant/src/util/heartbeater_factory.ts | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index 61de54d82..1f1cafdf3 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -36,10 +36,11 @@ export const asyncData = {
             store.dispatch(actions.setAvailableAssets([]));
         }
     },
-    fetchAccountInfoAndDispatchToStore: async (store: Store, options = { setLoading: true }) => {
+    fetchAccountInfoAndDispatchToStore: async (options: { store: Store; setLoading: boolean }) => {
+        const { store, setLoading } = options;
         const { providerState } = store.getState();
         const web3Wrapper = providerState.web3Wrapper;
-        if (options.setLoading && providerState.account.state !== AccountState.Loading) {
+        if (setLoading && providerState.account.state !== AccountState.Loading) {
             store.dispatch(actions.setAccountStateLoading());
         }
         let availableAddresses: string[];
diff --git a/packages/instant/src/util/heartbeater_factory.ts b/packages/instant/src/util/heartbeater_factory.ts
index 0feb05422..805483b71 100644
--- a/packages/instant/src/util/heartbeater_factory.ts
+++ b/packages/instant/src/util/heartbeater_factory.ts
@@ -10,7 +10,7 @@ export interface HeartbeatFactoryOptions {
 export const generateAccountHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
     const { store, performImmediatelyOnStart } = options;
     return new Heartbeater(async () => {
-        await asyncData.fetchAccountInfoAndDispatchToStore(store, { setLoading: false });
+        await asyncData.fetchAccountInfoAndDispatchToStore({ store, setLoading: false });
     }, performImmediatelyOnStart);
 };
 
-- 
cgit v1.2.3


From cc8debe53b9a6efc75b91f1b6c47f0820c3beb8c Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 9 Nov 2018 11:39:36 -0800
Subject: Linting and renaming variables

---
 .../instant/src/components/zero_ex_instant_provider.tsx    | 11 +++++++----
 packages/instant/src/redux/async_data.ts                   | 12 ++++++------
 packages/instant/src/util/buy_quote_updater.ts             |  2 --
 packages/instant/src/util/heartbeater.ts                   |  5 +++--
 packages/instant/src/util/heartbeater_factory.ts           | 14 +++++++-------
 5 files changed, 23 insertions(+), 21 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 20d677dc2..1223b477e 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -98,17 +98,20 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             // tslint:disable-next-line:no-floating-promises
             asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
         }
-        // tslint:disable-next-line:no-floating-promises
 
         this._accountUpdateHeartbeat = generateAccountHeartbeater({
             store: this._store,
-            performImmediatelyOnStart: true,
+            shouldPerformImmediatelyOnStart: true,
         });
         this._accountUpdateHeartbeat.start(ACCOUNT_UPDATE_INTERVAL_TIME_MS);
 
-        this._buyQuoteHeartbeat = generateBuyQuoteHeartbeater({ store: this._store, performImmediatelyOnStart: false });
+        this._buyQuoteHeartbeat = generateBuyQuoteHeartbeater({
+            store: this._store,
+            shouldPerformImmediatelyOnStart: false,
+        });
         this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS);
-        asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store: this._store, setPending: true });
+        // tslint:disable-next-line:no-floating-promises
+        asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store: this._store, shouldSetPending: true });
 
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index 1f1cafdf3..a47c7a605 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -36,11 +36,11 @@ export const asyncData = {
             store.dispatch(actions.setAvailableAssets([]));
         }
     },
-    fetchAccountInfoAndDispatchToStore: async (options: { store: Store; setLoading: boolean }) => {
-        const { store, setLoading } = options;
+    fetchAccountInfoAndDispatchToStore: async (options: { store: Store; shouldSetToLoading: boolean }) => {
+        const { store, shouldSetToLoading } = options;
         const { providerState } = store.getState();
         const web3Wrapper = providerState.web3Wrapper;
-        if (setLoading && providerState.account.state !== AccountState.Loading) {
+        if (shouldSetToLoading && providerState.account.state !== AccountState.Loading) {
             store.dispatch(actions.setAccountStateLoading());
         }
         let availableAddresses: string[];
@@ -75,8 +75,8 @@ export const asyncData = {
             return;
         }
     },
-    fetchCurrentBuyQuoteAndDispatchToStore: async (options: { store: Store; setPending: boolean }) => {
-        const { store, setPending } = options;
+    fetchCurrentBuyQuoteAndDispatchToStore: async (options: { store: Store; shouldSetPending: boolean }) => {
+        const { store, shouldSetPending } = options;
         const { buyOrderState, providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
         const assetBuyer = providerState.assetBuyer;
         if (
@@ -90,7 +90,7 @@ export const asyncData = {
                 store.dispatch,
                 selectedAsset as ERC20Asset,
                 selectedAssetAmount,
-                setPending,
+                shouldSetPending,
                 affiliateInfo,
             );
         }
diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts
index fb5da311d..c33e28f1c 100644
--- a/packages/instant/src/util/buy_quote_updater.ts
+++ b/packages/instant/src/util/buy_quote_updater.ts
@@ -1,5 +1,4 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
-import { AssetProxyId } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
@@ -7,7 +6,6 @@ import { Dispatch } from 'redux';
 import { oc } from 'ts-optchain';
 
 import { Action, actions } from '../redux/actions';
-import { State } from '../redux/reducer';
 import { AffiliateInfo, ERC20Asset } from '../types';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
diff --git a/packages/instant/src/util/heartbeater.ts b/packages/instant/src/util/heartbeater.ts
index 87af48423..a5b42d87f 100644
--- a/packages/instant/src/util/heartbeater.ts
+++ b/packages/instant/src/util/heartbeater.ts
@@ -4,8 +4,8 @@ type HeartbeatableFunction = () => Promise<void>;
 export class Heartbeater {
     private _intervalId?: number;
     private _hasPendingRequest: boolean;
-    private _performImmediatelyOnStart: boolean;
-    private _performFunction: HeartbeatableFunction;
+    private readonly _performImmediatelyOnStart: boolean;
+    private readonly _performFunction: HeartbeatableFunction;
 
     public constructor(performingFunctionAsync: HeartbeatableFunction, performImmediatelyOnStart: boolean) {
         this._performFunction = performingFunctionAsync;
@@ -19,6 +19,7 @@ export class Heartbeater {
         }
 
         if (this._performImmediatelyOnStart) {
+            // tslint:disable-next-line:no-floating-promises
             this._trackAndPerformAsync();
         }
 
diff --git a/packages/instant/src/util/heartbeater_factory.ts b/packages/instant/src/util/heartbeater_factory.ts
index 805483b71..96a8ac4e6 100644
--- a/packages/instant/src/util/heartbeater_factory.ts
+++ b/packages/instant/src/util/heartbeater_factory.ts
@@ -5,18 +5,18 @@ import { Heartbeater } from './heartbeater';
 
 export interface HeartbeatFactoryOptions {
     store: Store;
-    performImmediatelyOnStart: boolean;
+    shouldPerformImmediatelyOnStart: boolean;
 }
 export const generateAccountHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
-    const { store, performImmediatelyOnStart } = options;
+    const { store, shouldPerformImmediatelyOnStart } = options;
     return new Heartbeater(async () => {
-        await asyncData.fetchAccountInfoAndDispatchToStore({ store, setLoading: false });
-    }, performImmediatelyOnStart);
+        await asyncData.fetchAccountInfoAndDispatchToStore({ store, shouldSetToLoading: false });
+    }, shouldPerformImmediatelyOnStart);
 };
 
 export const generateBuyQuoteHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
-    const { store, performImmediatelyOnStart } = options;
+    const { store, shouldPerformImmediatelyOnStart } = options;
     return new Heartbeater(async () => {
-        await asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store, setPending: false });
-    }, performImmediatelyOnStart);
+        await asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store, shouldSetPending: false });
+    }, shouldPerformImmediatelyOnStart);
 };
-- 
cgit v1.2.3


From 2c585bfbdc4940e3e6089ac1cf595dd009b141d2 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve@0xproject.com>
Date: Fri, 9 Nov 2018 15:15:57 -0800
Subject: feat(instant): Dismissible overlay error messages

Adds dismissible overlay to error messages on mobile
---
 packages/instant/src/components/ui/overlay.tsx   | 12 +++++--
 packages/instant/src/containers/latest_error.tsx | 41 +++++++++++++++++++-----
 packages/instant/src/style/media.ts              |  2 +-
 packages/instant/src/style/theme.ts              |  5 ++-
 packages/instant/src/style/z_index.ts            |  1 +
 packages/instant/src/types.ts                    |  1 +
 6 files changed, 50 insertions(+), 12 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index c5f55f9c0..f67d6fb2f 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -1,11 +1,15 @@
 import * as _ from 'lodash';
 
-import { overlayBlack, styled } from '../../style/theme';
+import { generateMediaWrapper, ScreenWidths } from '../../style/media';
+import { generateOverlayBlack, styled } from '../../style/theme';
 import { zIndex } from '../../style/z_index';
 
 export interface OverlayProps {
     zIndex?: number;
     backgroundColor?: string;
+    width?: string;
+    height?: string;
+    showMaxWidth?: ScreenWidths;
 }
 
 export const Overlay =
@@ -20,12 +24,16 @@ export const Overlay =
         left: 0;
         z-index: ${props => props.zIndex}
         background-color: ${props => props.backgroundColor};
+        ${props => props.width && `width: ${props.width};`}
+        ${props => props.height && `height: ${props.height};`}
+        display: ${props => (props.showMaxWidth ? 'none' : 'block')};
+        ${props => props.showMaxWidth && generateMediaWrapper(props.showMaxWidth)`display: block;`}
     }
 `;
 
 Overlay.defaultProps = {
     zIndex: zIndex.overlayDefault,
-    backgroundColor: overlayBlack,
+    backgroundColor: generateOverlayBlack(0.6),
 };
 
 Overlay.displayName = 'Overlay';
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 99e55a6c4..c0da181f1 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -1,35 +1,60 @@
 import * as React from 'react';
 
 import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
 
 import { SlideAnimationState } from '../components/animations/slide_animation';
 import { SlidingError } from '../components/sliding_error';
+import { Overlay } from '../components/ui/overlay';
+import { Action } from '../redux/actions';
 import { State } from '../redux/reducer';
-import { Asset, DisplayStatus } from '../types';
+import { ScreenWidths } from '../style/media';
+import { generateOverlayBlack } from '../style/theme';
+import { zIndex } from '../style/z_index';
+import { Asset, DisplayStatus, Omit } from '../types';
+import { errorFlasher } from '../util/error_flasher';
 
 export interface LatestErrorComponentProps {
     asset?: Asset;
     latestErrorMessage?: string;
     animationState: SlideAnimationState;
+    shouldRenderOverlay: boolean;
+    onOverlayClick: () => void;
 }
 
 export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
     if (!props.latestErrorMessage) {
         return <div />;
     }
-    return <SlidingError animationState={props.animationState} icon="😢" message={props.latestErrorMessage} />;
+    return (
+        <React.Fragment>
+            <SlidingError animationState={props.animationState} icon="😢" message={props.latestErrorMessage} />
+            {props.shouldRenderOverlay && (
+                <Overlay
+                    onClick={props.onOverlayClick}
+                    zIndex={zIndex.containerOverlay}
+                    showMaxWidth={ScreenWidths.Sm}
+                    backgroundColor={generateOverlayBlack(0.4)}
+                />
+            )}
+        </React.Fragment>
+    );
 };
 
-interface ConnectedState {
-    asset?: Asset;
-    latestErrorMessage?: string;
-    animationState: SlideAnimationState;
-}
 export interface LatestErrorProps {}
+interface ConnectedState extends Omit<LatestErrorComponentProps, 'onOverlayClick'> {}
 const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
     asset: state.selectedAsset,
     latestErrorMessage: state.latestErrorMessage,
     animationState: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slidIn' : 'slidOut',
+    shouldRenderOverlay: state.latestErrorDisplayStatus === DisplayStatus.Present,
+});
+
+type ConnectedDispatch = Pick<LatestErrorComponentProps, 'onOverlayClick'>;
+const mapDispatchToProps = (dispatch: Dispatch<Action>, _ownProps: LatestErrorProps): ConnectedDispatch => ({
+    onOverlayClick: () => {
+        errorFlasher.clearError(dispatch);
+    },
 });
 
-export const LatestError = connect(mapStateToProps)(LatestErrorComponent);
+export const LatestError = connect(mapStateToProps, mapDispatchToProps)(LatestErrorComponent);
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index 5e7aaba37..bbf376694 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -8,7 +8,7 @@ export enum ScreenWidths {
     Lg = 64,
 }
 
-const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css`
+export const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css`
     @media (max-width: ${screenWidth}em) {
         ${css.apply(css, args)};
     }
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 2653c38f7..1e9f55e00 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -35,7 +35,10 @@ 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 const generateOverlayBlack = (opacity = 0.6) => {
+    return `rgba(0, 0, 0, ${opacity})`;
+};
+
 export { styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider };
diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts
index bd034182e..ba2d27a17 100644
--- a/packages/instant/src/style/z_index.ts
+++ b/packages/instant/src/style/z_index.ts
@@ -3,6 +3,7 @@ export const zIndex = {
     mainContainer: 20,
     dropdownItems: 30,
     panel: 40,
+    containerOverlay: 45,
     errorPopup: 50,
     overlayDefault: 100,
 };
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 20ad2ed95..62afe652d 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -4,6 +4,7 @@ import { Web3Wrapper } from '@0x/web3-wrapper';
 import { Provider } from 'ethereum-types';
 
 // Reusable
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 export type Maybe<T> = T | undefined;
 export enum AsyncProcessState {
     None = 'NONE',
-- 
cgit v1.2.3


From acb7e876b20f89cf5e1df614cb81de38a66fa6b1 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 9 Nov 2018 15:19:16 -0800
Subject: Update account more frequently

---
 packages/instant/src/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 37320e21d..6bfbc690e 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -11,7 +11,7 @@ export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction fa
 export const GWEI_IN_WEI = new BigNumber(1000000000);
 export const ONE_SECOND_MS = 1000;
 export const ONE_MINUTE_MS = ONE_SECOND_MS * 60;
-export const ACCOUNT_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 15;
+export const ACCOUNT_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 5;
 export const BUY_QUOTE_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 15;
 export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
 export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = ONE_MINUTE_MS * 2;
-- 
cgit v1.2.3


From 5c1b1a120362c1e84746d8a6695fe4de0ae6fb89 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 9 Nov 2018 15:28:08 -0800
Subject: Using built in intervalUtils instead of rolling own

---
 packages/instant/src/util/heartbeater.ts | 25 +++++--------------------
 1 file changed, 5 insertions(+), 20 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/heartbeater.ts b/packages/instant/src/util/heartbeater.ts
index a5b42d87f..dbc72da6a 100644
--- a/packages/instant/src/util/heartbeater.ts
+++ b/packages/instant/src/util/heartbeater.ts
@@ -1,15 +1,14 @@
+import { intervalUtils } from '@0x/utils';
 import * as _ from 'lodash';
 
 type HeartbeatableFunction = () => Promise<void>;
 export class Heartbeater {
-    private _intervalId?: number;
-    private _hasPendingRequest: boolean;
+    private _intervalId?: NodeJS.Timer;
     private readonly _performImmediatelyOnStart: boolean;
     private readonly _performFunction: HeartbeatableFunction;
 
     public constructor(performingFunctionAsync: HeartbeatableFunction, performImmediatelyOnStart: boolean) {
         this._performFunction = performingFunctionAsync;
-        this._hasPendingRequest = false;
         this._performImmediatelyOnStart = performImmediatelyOnStart;
     }
 
@@ -20,30 +19,16 @@ export class Heartbeater {
 
         if (this._performImmediatelyOnStart) {
             // tslint:disable-next-line:no-floating-promises
-            this._trackAndPerformAsync();
+            this._performFunction();
         }
 
-        this._intervalId = window.setInterval(this._trackAndPerformAsync.bind(this), intervalTimeMs);
+        this._intervalId = intervalUtils.setAsyncExcludingInterval(this._performFunction, intervalTimeMs, () => {});
     }
 
     public stop(): void {
         if (this._intervalId) {
-            window.clearInterval(this._intervalId);
+            intervalUtils.clearInterval(this._intervalId);
         }
         this._intervalId = undefined;
-        this._hasPendingRequest = false;
-    }
-
-    private async _trackAndPerformAsync(): Promise<void> {
-        if (this._hasPendingRequest) {
-            return;
-        }
-
-        this._hasPendingRequest = true;
-        try {
-            await this._performFunction();
-        } finally {
-            this._hasPendingRequest = false;
-        }
     }
 }
-- 
cgit v1.2.3


From 93054ae52b782a7085c482e2510e77ae8bb03520 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 9 Nov 2018 15:28:29 -0800
Subject: Lodash noop

---
 packages/instant/src/util/heartbeater.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/util/heartbeater.ts b/packages/instant/src/util/heartbeater.ts
index dbc72da6a..717098635 100644
--- a/packages/instant/src/util/heartbeater.ts
+++ b/packages/instant/src/util/heartbeater.ts
@@ -22,7 +22,7 @@ export class Heartbeater {
             this._performFunction();
         }
 
-        this._intervalId = intervalUtils.setAsyncExcludingInterval(this._performFunction, intervalTimeMs, () => {});
+        this._intervalId = intervalUtils.setAsyncExcludingInterval(this._performFunction, intervalTimeMs, _.noop);
     }
 
     public stop(): void {
-- 
cgit v1.2.3


From 4072076965fba42ee02b689db1e97d9a970620f4 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 9 Nov 2018 15:40:13 -0800
Subject: Don't start heartbeat if no account

---
 .../instant/src/components/zero_ex_instant_provider.tsx    | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 1223b477e..fbe0e977f 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -11,7 +11,7 @@ import { asyncData } from '../redux/async_data';
 import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer';
 import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
-import { AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types';
+import { AffiliateInfo, AssetMetaData, Network, OrderSource, AccountState } from '../types';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
@@ -99,11 +99,13 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
         }
 
-        this._accountUpdateHeartbeat = generateAccountHeartbeater({
-            store: this._store,
-            shouldPerformImmediatelyOnStart: true,
-        });
-        this._accountUpdateHeartbeat.start(ACCOUNT_UPDATE_INTERVAL_TIME_MS);
+        if (state.providerState.account.state !== AccountState.None) {
+            this._accountUpdateHeartbeat = generateAccountHeartbeater({
+                store: this._store,
+                shouldPerformImmediatelyOnStart: true,
+            });
+            this._accountUpdateHeartbeat.start(ACCOUNT_UPDATE_INTERVAL_TIME_MS);
+        }
 
         this._buyQuoteHeartbeat = generateBuyQuoteHeartbeater({
             store: this._store,
-- 
cgit v1.2.3


From fd83ca2cb893ab7cc027efd6829ba2eb07cdb539 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 9 Nov 2018 15:52:25 -0800
Subject: linting

---
 packages/instant/src/components/zero_ex_instant_provider.tsx | 2 +-
 packages/instant/src/util/heartbeater.ts                     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index fbe0e977f..11f867abc 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -11,7 +11,7 @@ import { asyncData } from '../redux/async_data';
 import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer';
 import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
-import { AffiliateInfo, AssetMetaData, Network, OrderSource, AccountState } from '../types';
+import { AccountState, AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
diff --git a/packages/instant/src/util/heartbeater.ts b/packages/instant/src/util/heartbeater.ts
index 717098635..e700d489e 100644
--- a/packages/instant/src/util/heartbeater.ts
+++ b/packages/instant/src/util/heartbeater.ts
@@ -22,6 +22,7 @@ export class Heartbeater {
             this._performFunction();
         }
 
+        // tslint:disable-next-line:no-unbound-method
         this._intervalId = intervalUtils.setAsyncExcludingInterval(this._performFunction, intervalTimeMs, _.noop);
     }
 
-- 
cgit v1.2.3


From 38896c9358c07d722b2a24d458e6c949b802fa37 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 9 Nov 2018 00:42:50 -0800
Subject: feat(instant): handle privacy mode in wallets

---
 packages/instant/src/components/zero_ex_instant_provider.tsx | 2 --
 packages/instant/src/constants.ts                            | 3 ---
 packages/instant/src/redux/actions.ts                        | 2 --
 packages/instant/src/redux/async_data.ts                     | 9 +++++++--
 packages/instant/src/redux/reducer.ts                        | 4 +---
 packages/instant/src/types.ts                                | 7 +++----
 6 files changed, 11 insertions(+), 16 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 11f867abc..411f118cc 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -98,7 +98,6 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             // tslint:disable-next-line:no-floating-promises
             asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
         }
-
         if (state.providerState.account.state !== AccountState.None) {
             this._accountUpdateHeartbeat = generateAccountHeartbeater({
                 store: this._store,
@@ -114,7 +113,6 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
         this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS);
         // tslint:disable-next-line:no-floating-promises
         asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store: this._store, shouldSetPending: true });
-
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
         // tslint:disable-next-line:no-floating-promises
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 6bfbc690e..110a8248a 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -33,6 +33,3 @@ export const LOADING_ACCOUNT: AccountNotReady = {
 export const LOCKED_ACCOUNT: AccountNotReady = {
     state: AccountState.Locked,
 };
-export const ERROR_ACCOUNT: AccountNotReady = {
-    state: AccountState.Error,
-};
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index fc89e3d0e..8947c6c97 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -23,7 +23,6 @@ function createAction<T extends string, P>(type: T, data?: P): PlainAction<T> |
 export enum ActionTypes {
     SET_ACCOUNT_STATE_LOADING = 'SET_ACCOUNT_STATE_LOADING',
     SET_ACCOUNT_STATE_LOCKED = 'SET_ACCOUNT_STATE_LOCKED',
-    SET_ACCOUNT_STATE_ERROR = 'SET_ACCOUNT_STATE_ERROR',
     SET_ACCOUNT_STATE_READY = 'SET_ACCOUNT_STATE_READY',
     UPDATE_ACCOUNT_ETH_BALANCE = 'UPDATE_ACCOUNT_ETH_BALANCE',
     UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE',
@@ -47,7 +46,6 @@ export enum ActionTypes {
 export const actions = {
     setAccountStateLoading: () => createAction(ActionTypes.SET_ACCOUNT_STATE_LOADING),
     setAccountStateLocked: () => createAction(ActionTypes.SET_ACCOUNT_STATE_LOCKED),
-    setAccountStateError: () => createAction(ActionTypes.SET_ACCOUNT_STATE_ERROR),
     setAccountStateReady: (address: string) => createAction(ActionTypes.SET_ACCOUNT_STATE_READY, address),
     updateAccountEthBalance: (addressAndBalance: AddressAndEthBalanceInWei) =>
         createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, addressAndBalance),
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index a47c7a605..b920ac914 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -40,14 +40,19 @@ export const asyncData = {
         const { store, shouldSetToLoading } = options;
         const { providerState } = store.getState();
         const web3Wrapper = providerState.web3Wrapper;
+        const provider = providerState.provider;
         if (shouldSetToLoading && providerState.account.state !== AccountState.Loading) {
             store.dispatch(actions.setAccountStateLoading());
         }
         let availableAddresses: string[];
         try {
-            availableAddresses = await web3Wrapper.getAvailableAddressesAsync();
+            // TODO(bmillman): Add support at the web3Wrapper level for calling `eth_requestAccounts` instead of calling enable here
+            const isPrivacyModeEnabled = !_.isUndefined((provider as any).enable);
+            availableAddresses = isPrivacyModeEnabled
+                ? await (provider as any).enable()
+                : await web3Wrapper.getAvailableAddressesAsync();
         } catch (e) {
-            store.dispatch(actions.setAccountStateError());
+            store.dispatch(actions.setAccountStateLocked());
             return;
         }
         if (!_.isEmpty(availableAddresses)) {
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index a5a1b6f7d..ef46fdd9d 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -4,7 +4,7 @@ import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 
-import { ERROR_ACCOUNT, LOADING_ACCOUNT, LOCKED_ACCOUNT } from '../constants';
+import { LOADING_ACCOUNT, LOCKED_ACCOUNT } from '../constants';
 import { assetMetaDataMap } from '../data/asset_meta_data_map';
 import {
     Account,
@@ -65,8 +65,6 @@ export const createReducer = (initialState: State) => {
                 return reduceStateWithAccount(state, LOADING_ACCOUNT);
             case ActionTypes.SET_ACCOUNT_STATE_LOCKED:
                 return reduceStateWithAccount(state, LOCKED_ACCOUNT);
-            case ActionTypes.SET_ACCOUNT_STATE_ERROR:
-                return reduceStateWithAccount(state, ERROR_ACCOUNT);
             case ActionTypes.SET_ACCOUNT_STATE_READY: {
                 const account: AccountReady = {
                     state: AccountState.Ready,
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 62afe652d..b43a82d46 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -102,11 +102,10 @@ export interface ProviderState {
 }
 
 export enum AccountState {
+    None = 'NONE,',
     Loading = 'LOADING',
     Ready = 'READY',
-    Locked = 'LOCKED', // TODO(bmillman): break this up into locked / privacy mode enabled
-    Error = 'ERROR',
-    None = 'NONE,',
+    Locked = 'LOCKED',
 }
 
 export interface AccountReady {
@@ -115,7 +114,7 @@ export interface AccountReady {
     ethBalanceInWei?: BigNumber;
 }
 export interface AccountNotReady {
-    state: AccountState.None | AccountState.Loading | AccountState.Locked | AccountState.Error;
+    state: AccountState.None | AccountState.Loading | AccountState.Locked;
 }
 
 export type Account = AccountReady | AccountNotReady;
-- 
cgit v1.2.3