From 700b7068a157a0f9d3d6ce3f61150c2961d81617 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 3 Oct 2018 14:08:08 -0700
Subject: Add styled-components with theme

---
 packages/instant/package.json                      |  5 +++-
 .../instant/src/components/zero_ex_instant.tsx     |  8 ++++++-
 packages/instant/src/style/theme.ts                | 27 ++++++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 packages/instant/src/style/theme.ts

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 365312a70..9f97b1caa 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -51,7 +51,10 @@
         "ethereum-types": "^1.0.8",
         "lodash": "^4.17.10",
         "react": "^16.5.2",
-        "react-dom": "^16.5.2"
+        "react-dom": "^16.5.2",
+        "react-redux": "^5.0.7",
+        "redux": "^4.0.0",
+        "styled-components": "^3.4.9"
     },
     "devDependencies": {
         "@0xproject/tslint-config": "^1.0.7",
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 67e1b683d..43398cf3b 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
 
+import { ThemeProvider } from '../style/theme';
+
 export interface ZeroExInstantProps {}
 
-export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = () => <div>ZeroExInstant</div>;
+export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = () => (
+    <ThemeProvider>
+        <div> ZeroExInstant </div>
+    </ThemeProvider>
+);
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
new file mode 100644
index 000000000..838378c99
--- /dev/null
+++ b/packages/instant/src/style/theme.ts
@@ -0,0 +1,27 @@
+import * as styledComponents from 'styled-components';
+
+const {
+    default: styled,
+    css,
+    injectGlobal,
+    keyframes,
+    ThemeProvider,
+} = styledComponents as styledComponents.ThemedStyledComponentsModule<IThemeInterface>;
+
+export interface IThemeInterface {
+    primaryColor: string;
+    black: string;
+    white: string;
+    darkGrey: string;
+    lightGrey: string;
+}
+
+export const theme: IThemeInterface = {
+    primaryColor: '#512D80',
+    black: 'black',
+    lightGrey: '#999999',
+    darkGrey: '#333333',
+    white: 'white',
+};
+
+export { styled, css, injectGlobal, keyframes, ThemeProvider };
-- 
cgit v1.2.3


From 15f20cc18e45d2971be7274bc3c0be36b02091c8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 3 Oct 2018 14:28:07 -0700
Subject: Add redux to 0x instant

---
 packages/instant/package.json                      |  2 ++
 .../instant/src/components/zero_ex_instant.tsx     | 12 +++++++----
 packages/instant/src/redux/reducer.ts              | 23 ++++++++++++++++++++++
 packages/instant/src/redux/store.ts                |  8 ++++++++
 packages/instant/src/types.ts                      |  8 ++++++++
 5 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 packages/instant/src/redux/reducer.ts
 create mode 100644 packages/instant/src/redux/store.ts
 create mode 100644 packages/instant/src/types.ts

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 9f97b1caa..2a1c05f2a 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -64,6 +64,8 @@
         "@types/node": "*",
         "@types/react": "16.4.7",
         "@types/react-dom": "^16.0.8",
+        "@types/react-redux": "^6.0.9",
+        "@types/redux": "^3.6.0",
         "awesome-typescript-loader": "^5.2.1",
         "copyfiles": "^1.2.0",
         "enzyme": "^3.6.0",
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 43398cf3b..9ba390be9 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,11 +1,15 @@
 import * as React from 'react';
+import { Provider } from 'react-redux';
 
-import { ThemeProvider } from '../style/theme';
+import { store } from '../redux/store';
+import { theme, ThemeProvider } from '../style/theme';
 
 export interface ZeroExInstantProps {}
 
 export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = () => (
-    <ThemeProvider>
-        <div> ZeroExInstant </div>
-    </ThemeProvider>
+    <Provider store={store}>
+        <ThemeProvider theme={theme}>
+            <div> ZeroExInstant </div>
+        </ThemeProvider>
+    </Provider>
 );
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
new file mode 100644
index 000000000..7efe8aeb0
--- /dev/null
+++ b/packages/instant/src/redux/reducer.ts
@@ -0,0 +1,23 @@
+import * as _ from 'lodash';
+
+import { Action, ActionTypes } from '../types';
+
+export interface State {
+    ethUsdPrice?: string;
+}
+
+export const INITIAL_STATE: State = {
+    ethUsdPrice: undefined,
+};
+
+export function reducer(state: State = INITIAL_STATE, action: Action): State {
+    switch (action.type) {
+        case ActionTypes.UPDATE_ETH_USD_PRICE:
+            return {
+                ...state,
+                ethUsdPrice: action.data,
+            };
+        default:
+            return state;
+    }
+}
diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts
new file mode 100644
index 000000000..4d80c0383
--- /dev/null
+++ b/packages/instant/src/redux/store.ts
@@ -0,0 +1,8 @@
+import * as _ from 'lodash';
+import { applyMiddleware, createStore, Store as ReduxStore } from 'redux';
+
+import { reducer, State } from './reducer';
+
+const ONE_SECOND = 1000;
+
+export const store: ReduxStore<State> = createStore(reducer);
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
new file mode 100644
index 000000000..3ba5a9b94
--- /dev/null
+++ b/packages/instant/src/types.ts
@@ -0,0 +1,8 @@
+export enum ActionTypes {
+    UPDATE_ETH_USD_PRICE,
+}
+
+export interface Action {
+    type: ActionTypes;
+    data?: any;
+}
-- 
cgit v1.2.3


From 48e7aa6e77a71f694f75ab8b2fc86f337700113d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 3 Oct 2018 15:16:59 -0700
Subject: Add Inter UI font

---
 packages/instant/src/redux/store.ts | 2 --
 packages/instant/src/style/theme.ts | 7 +++++++
 2 files changed, 7 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts
index 4d80c0383..46c4350b0 100644
--- a/packages/instant/src/redux/store.ts
+++ b/packages/instant/src/redux/store.ts
@@ -3,6 +3,4 @@ import { applyMiddleware, createStore, Store as ReduxStore } from 'redux';
 
 import { reducer, State } from './reducer';
 
-const ONE_SECOND = 1000;
-
 export const store: ReduxStore<State> = createStore(reducer);
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 838378c99..0af233db2 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -8,12 +8,18 @@ const {
     ThemeProvider,
 } = styledComponents as styledComponents.ThemedStyledComponentsModule<IThemeInterface>;
 
+// Inject the inter-ui font into the page
+styledComponents.injectGlobal`
+    @import url('https://rsms.me/inter/inter-ui.css');
+`;
+
 export interface IThemeInterface {
     primaryColor: string;
     black: string;
     white: string;
     darkGrey: string;
     lightGrey: string;
+    fontFamily: string;
 }
 
 export const theme: IThemeInterface = {
@@ -22,6 +28,7 @@ export const theme: IThemeInterface = {
     lightGrey: '#999999',
     darkGrey: '#333333',
     white: 'white',
+    fontFamily: 'Inter UI, sans-serif',
 };
 
 export { styled, css, injectGlobal, keyframes, ThemeProvider };
-- 
cgit v1.2.3


From 4b8348da8cc50ef0da6e6b2bb7d276f1246437cf Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 3 Oct 2018 16:20:39 -0700
Subject: Add some ui components

---
 packages/instant/package.json                      |  1 +
 packages/instant/src/components/ui/button.tsx      | 68 ++++++++++++++++++++
 packages/instant/src/components/ui/text.tsx        | 75 ++++++++++++++++++++++
 .../instant/src/components/zero_ex_instant.tsx     |  3 +
 packages/instant/src/style/fonts.ts                | 10 +++
 packages/instant/src/style/theme.ts                | 23 +++----
 6 files changed, 166 insertions(+), 14 deletions(-)
 create mode 100644 packages/instant/src/components/ui/button.tsx
 create mode 100644 packages/instant/src/components/ui/text.tsx
 create mode 100644 packages/instant/src/style/fonts.ts

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 2a1c05f2a..57b094626 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -50,6 +50,7 @@
         "@0xproject/web3-wrapper": "^3.0.1",
         "ethereum-types": "^1.0.8",
         "lodash": "^4.17.10",
+        "polished": "^2.2.0",
         "react": "^16.5.2",
         "react-dom": "^16.5.2",
         "react-redux": "^5.0.7",
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
new file mode 100644
index 000000000..ec0a87345
--- /dev/null
+++ b/packages/instant/src/components/ui/button.tsx
@@ -0,0 +1,68 @@
+import { darken, saturate } from 'polished';
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+
+export interface ButtonProps {
+    fontColor: ColorOption;
+    backgroundColor: ColorOption;
+    borderColor?: ColorOption;
+    fontSize?: string;
+    fontFamily?: string;
+    width?: string;
+    padding?: string;
+    type?: string;
+    isDisabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    className?: string;
+}
+
+const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
+    <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
+        {children}
+    </button>
+);
+
+const darkenOnHoverAmount = 0.1;
+const darkenOnActiveAmount = 0.2;
+const saturateOnFocusAmount = 0.2;
+export const Button = styled(PlainButton)`
+    cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
+    font-size: ${props => props.fontSize};
+    color: ${props => props.fontColor};
+    transition: background-color, opacity 0.5s ease;
+    padding: ${props => props.padding};
+    border-radius: 6px;
+    font-weight: 500;
+    outline: none;
+    font-family: ${props => props.fontFamily};
+    width: ${props => props.width};
+    background-color: ${props => props.backgroundColor};
+    border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')};
+    &:hover {
+        background-color: ${props =>
+            !props.isDisabled ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor]) : ''} !important;
+    }
+    &:active {
+        background-color: ${props =>
+            !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor]) : ''};
+    }
+    &:disabled {
+        opacity: 0.5;
+    }
+    &:focus {
+        background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor])};
+    }
+`;
+
+Button.defaultProps = {
+    fontSize: '12px',
+    fontColor: ColorOption.white,
+    backgroundColor: ColorOption.primaryColor,
+    width: 'auto',
+    fontFamily: 'Inter UI',
+    isDisabled: false,
+    padding: '0.8em 2.2em',
+};
+
+Button.displayName = 'Button';
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
new file mode 100644
index 000000000..a4b9d60d7
--- /dev/null
+++ b/packages/instant/src/components/ui/text.tsx
@@ -0,0 +1,75 @@
+import { darken } from 'polished';
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+
+export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
+
+export interface TextProps {
+    fontColor: ColorOption;
+    fontFamily: string;
+    fontStyle: string;
+    fontSize: string;
+    lineHeight: string;
+    className?: string;
+    Tag?: TextTag;
+    minHeight?: string;
+    center?: boolean;
+    fontWeight?: number | string;
+    textDecorationLine?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    hoverColor?: string;
+    noWrap?: boolean;
+    display?: string;
+}
+
+const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
+    <Tag className={className} onClick={onClick}>
+        {children}
+    </Tag>
+);
+
+const darkenOnHoverAmount = 0.3;
+export const Text = styled(PlainText)`
+    font-family: ${props => props.fontFamily};
+    font-style: ${props => props.fontStyle};
+    font-weight: ${props => props.fontWeight};
+    font-size: ${props => props.fontSize};
+    text-decoration-line: ${props => props.textDecorationLine};
+    ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
+    ${props => (props.center ? 'text-align: center' : '')};
+    color: ${props => 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}` : '')};
+    &:hover {
+        ${props => (props.onClick ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.fontColor)}` : '')};
+    }
+`;
+
+Text.defaultProps = {
+    fontFamily: 'Inter UI',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    fontColor: ColorOption.black,
+    fontSize: '15px',
+    lineHeight: '1.5em',
+    textDecorationLine: 'none',
+    Tag: 'div',
+    noWrap: false,
+};
+
+Text.displayName = 'Text';
+
+export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
+
+Title.defaultProps = {
+    Tag: 'h2',
+    fontSize: '20px',
+    fontWeight: 600,
+    fontColor: ColorOption.primaryColor,
+};
+
+Title.displayName = 'Title';
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 9ba390be9..99f9bb3ba 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -2,8 +2,11 @@ import * as React from 'react';
 import { Provider } from 'react-redux';
 
 import { store } from '../redux/store';
+import { fonts } from '../style/fonts';
 import { theme, ThemeProvider } from '../style/theme';
 
+fonts.include();
+
 export interface ZeroExInstantProps {}
 
 export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = () => (
diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts
new file mode 100644
index 000000000..975a30a61
--- /dev/null
+++ b/packages/instant/src/style/fonts.ts
@@ -0,0 +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');
+        `;
+    },
+};
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 0af233db2..3bced9071 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -6,29 +6,24 @@ const {
     injectGlobal,
     keyframes,
     ThemeProvider,
-} = styledComponents as styledComponents.ThemedStyledComponentsModule<IThemeInterface>;
+} = styledComponents as styledComponents.ThemedStyledComponentsModule<Theme>;
 
-// Inject the inter-ui font into the page
-styledComponents.injectGlobal`
-    @import url('https://rsms.me/inter/inter-ui.css');
-`;
+export type Theme = { [key in ColorOption]: string };
 
-export interface IThemeInterface {
-    primaryColor: string;
-    black: string;
-    white: string;
-    darkGrey: string;
-    lightGrey: string;
-    fontFamily: string;
+export enum ColorOption {
+    primaryColor = 'primaryColor',
+    black = 'black',
+    lightGrey = 'lightGrey',
+    darkGrey = 'darkGrey',
+    white = 'white',
 }
 
-export const theme: IThemeInterface = {
+export const theme: Theme = {
     primaryColor: '#512D80',
     black: 'black',
     lightGrey: '#999999',
     darkGrey: '#333333',
     white: 'white',
-    fontFamily: 'Inter UI, sans-serif',
 };
 
 export { styled, css, injectGlobal, keyframes, ThemeProvider };
-- 
cgit v1.2.3


From 85c34b17aa074e67ed9263094cc0ee75a8f00e60 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 14:04:56 -0700
Subject: Add Flex and Container component

---
 packages/instant/src/components/ui/container.tsx | 47 ++++++++++++++++++++++++
 packages/instant/src/components/ui/flex.tsx      | 34 +++++++++++++++++
 packages/instant/src/style/util.ts               | 10 +++++
 3 files changed, 91 insertions(+)
 create mode 100644 packages/instant/src/components/ui/container.tsx
 create mode 100644 packages/instant/src/components/ui/flex.tsx
 create mode 100644 packages/instant/src/style/util.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
new file mode 100644
index 000000000..f928ed25b
--- /dev/null
+++ b/packages/instant/src/components/ui/container.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+import { cssRuleIfExists } from '../../style/util';
+
+export interface ContainerProps {
+    display?: string;
+    position?: string;
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    maxWidth?: string;
+    margin: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    padding?: string;
+    className?: string;
+    backgroundColor?: ColorOption;
+}
+
+const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => (
+    <div className={className}>{children}</div>
+);
+
+export const Container = styled(PlainContainer)`
+    ${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, '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')}
+    background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+`;
+
+Container.defaultProps = {
+    display: 'inline-block',
+};
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
new file mode 100644
index 000000000..544d9fe23
--- /dev/null
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+
+export interface FlexProps {
+    direction: 'row' | 'column';
+    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';
+    backgroundColor?: ColorOption;
+    className?: string;
+}
+
+const PlainFlex: React.StatelessComponent<FlexProps> = ({ children, className }) => (
+    <div className={className}>{children}</div>
+);
+
+export const Flex = styled(PlainFlex)`
+    display: flex;
+    direction: ${props => props.direction};
+    flex-wrap: ${props => props.flexWrap};
+    justify-content: ${props => props.justify};
+    align-items: ${props => props.align};
+    background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+`;
+
+Flex.defaultProps = {
+    direction: 'row',
+    flexWrap: 'nowrap',
+    justify: 'center',
+    align: 'center',
+};
+
+Flex.displayName = 'Flex';
diff --git a/packages/instant/src/style/util.ts b/packages/instant/src/style/util.ts
new file mode 100644
index 000000000..7cf13133f
--- /dev/null
+++ b/packages/instant/src/style/util.ts
@@ -0,0 +1,10 @@
+import * as _ from 'lodash';
+
+export const cssRuleIfExists = (props: any, rule: string): string => {
+    const camelCaseRule = _.camelCase(rule);
+    const ruleValueIfExists = props[camelCaseRule];
+    if (!_.isUndefined(ruleValueIfExists)) {
+        return `${rule}: ${ruleValueIfExists};`;
+    }
+    return '';
+};
-- 
cgit v1.2.3


From a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 14:59:07 -0700
Subject: Improve utilities and try to use them in simple form component

---
 packages/instant/public/index.html                 |  6 ++++
 packages/instant/src/components/ui/container.tsx   | 10 +++++-
 packages/instant/src/components/ui/flex.tsx        | 10 +++---
 packages/instant/src/components/ui/index.ts        |  4 +++
 packages/instant/src/components/ui/text.tsx        | 35 +++++++++++---------
 .../instant/src/components/zero_ex_instant.tsx     |  4 ++-
 .../src/components/zero_ex_instant_container.tsx   | 38 ++++++++++++++++++++++
 packages/instant/tslint.json                       |  5 ++-
 8 files changed, 89 insertions(+), 23 deletions(-)
 create mode 100644 packages/instant/src/components/ui/index.ts
 create mode 100644 packages/instant/src/components/zero_ex_instant_container.tsx

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 45968a3c9..d673dafd8 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -6,6 +6,12 @@
     <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>
+    <style>
+        #zeroExInstantContainer {
+            margin-left: 30px;
+            margin-top: 30px;
+        }
+    </style>
 </head>
 
 <body>
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index f928ed25b..8366d5748 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -10,13 +10,16 @@ export interface ContainerProps {
     right?: string;
     bottom?: string;
     left?: string;
+    width?: string;
     maxWidth?: string;
-    margin: string;
+    margin?: string;
     marginTop?: string;
     marginRight?: string;
     marginBottom?: string;
     marginLeft?: string;
     padding?: string;
+    boxShadow?: string;
+    borderRadius?: string;
     className?: string;
     backgroundColor?: ColorOption;
 }
@@ -32,6 +35,7 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'right')}
     ${props => cssRuleIfExists(props, 'bottom')}
     ${props => cssRuleIfExists(props, 'left')}
+    ${props => cssRuleIfExists(props, 'width')}
     ${props => cssRuleIfExists(props, 'max-width')}
     ${props => cssRuleIfExists(props, 'margin')}
     ${props => cssRuleIfExists(props, 'margin-top')}
@@ -39,9 +43,13 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'margin-bottom')}
     ${props => cssRuleIfExists(props, 'margin-left')}
     ${props => cssRuleIfExists(props, 'padding')}
+    ${props => cssRuleIfExists(props, 'box-shadow')}
+    ${props => cssRuleIfExists(props, 'border-radius')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
 `;
 
 Container.defaultProps = {
     display: 'inline-block',
 };
+
+Container.displayName = 'Container';
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 544d9fe23..f55f5f8ba 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -3,10 +3,10 @@ import * as React from 'react';
 import { ColorOption, styled } from '../../style/theme';
 
 export interface FlexProps {
-    direction: 'row' | 'column';
-    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';
+    direction?: 'row' | 'column';
+    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';
     backgroundColor?: ColorOption;
     className?: string;
 }
@@ -17,7 +17,7 @@ const PlainFlex: React.StatelessComponent<FlexProps> = ({ children, className })
 
 export const Flex = styled(PlainFlex)`
     display: flex;
-    direction: ${props => props.direction};
+    flex-direction: ${props => props.direction};
     flex-wrap: ${props => props.flexWrap};
     justify-content: ${props => props.justify};
     align-items: ${props => props.align};
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
new file mode 100644
index 000000000..dca63b65c
--- /dev/null
+++ b/packages/instant/src/components/ui/index.ts
@@ -0,0 +1,4 @@
+export { Text, Title } from './text';
+export { Button } from './button';
+export { Flex } from './flex';
+export { Container } from './container';
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index a4b9d60d7..0bc387644 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -3,16 +3,16 @@ import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
 
-export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
-
 export interface TextProps {
-    fontColor: ColorOption;
-    fontFamily: string;
-    fontStyle: string;
-    fontSize: string;
-    lineHeight: string;
+    fontColor?: ColorOption;
+    fontFamily?: string;
+    fontStyle?: string;
+    fontSize?: string;
+    opacity?: number;
+    letterSpacing?: string;
+    textTransform?: string;
+    lineHeight?: string;
     className?: string;
-    Tag?: TextTag;
     minHeight?: string;
     center?: boolean;
     fontWeight?: number | string;
@@ -23,10 +23,10 @@ export interface TextProps {
     display?: string;
 }
 
-const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
-    <Tag className={className} onClick={onClick}>
+const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick }) => (
+    <p className={className} onClick={onClick}>
         {children}
-    </Tag>
+    </p>
 );
 
 const darkenOnHoverAmount = 0.3;
@@ -35,17 +35,23 @@ export const Text = styled(PlainText)`
     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.theme[props.fontColor]};
+    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: ${props.hoverColor || darken(darkenOnHoverAmount, props.fontColor)}` : '')};
+        ${props =>
+            props.onClick
+                ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}`
+                : ''};
     }
 `;
 
@@ -57,7 +63,6 @@ Text.defaultProps = {
     fontSize: '15px',
     lineHeight: '1.5em',
     textDecorationLine: 'none',
-    Tag: 'div',
     noWrap: false,
 };
 
@@ -66,9 +71,9 @@ Text.displayName = 'Text';
 export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
 
 Title.defaultProps = {
-    Tag: 'h2',
     fontSize: '20px',
     fontWeight: 600,
+    opacity: 1,
     fontColor: ColorOption.primaryColor,
 };
 
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 99f9bb3ba..0e6230d1b 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -5,6 +5,8 @@ import { store } from '../redux/store';
 import { fonts } from '../style/fonts';
 import { theme, ThemeProvider } from '../style/theme';
 
+import { ZeroExInstantContainer } from './zero_ex_instant_container';
+
 fonts.include();
 
 export interface ZeroExInstantProps {}
@@ -12,7 +14,7 @@ export interface ZeroExInstantProps {}
 export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = () => (
     <Provider store={store}>
         <ThemeProvider theme={theme}>
-            <div> ZeroExInstant </div>
+            <ZeroExInstantContainer />
         </ThemeProvider>
     </Provider>
 );
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
new file mode 100644
index 000000000..fc936c3f2
--- /dev/null
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container, Flex, Text } from './ui';
+
+export interface ZeroExInstantContainerProps {}
+
+export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
+    <Container width="350px" borderRadius="3px">
+        <Flex direction="column">
+            <Container backgroundColor={ColorOption.primaryColor} padding="20px">
+                <Text
+                    letterSpacing="1px"
+                    fontColor={ColorOption.white}
+                    opacity={0.7}
+                    fontWeight={600}
+                    textTransform="uppercase"
+                >
+                    I want to buy
+                </Text>
+                <Flex direction="row" justify="space-between">
+                    <Container>
+                        <Text textTransform="uppercase">0.00</Text>
+                        <Text textTransform="uppercase"> rep </Text>
+                    </Container>
+                    <Flex direction="column">
+                        <Text> 0 ETH </Text>
+                        <Text> $0.00 </Text>
+                    </Flex>
+                </Flex>
+            </Container>
+            <Container padding="20px" backgroundColor={ColorOption.white}>
+                <Text>hey</Text>
+            </Container>
+        </Flex>
+    </Container>
+);
diff --git a/packages/instant/tslint.json b/packages/instant/tslint.json
index ffaefe83a..1ab924e47 100644
--- a/packages/instant/tslint.json
+++ b/packages/instant/tslint.json
@@ -1,3 +1,6 @@
 {
-    "extends": ["@0xproject/tslint-config"]
+    "extends": ["@0xproject/tslint-config"],
+    "rules": {
+        "custom-no-magic-numbers": false
+    }
 }
-- 
cgit v1.2.3


From ba2ba628e815c996582c6ead81f657a14a00abd0 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 15:02:06 -0700
Subject: Fix linting problems

---
 packages/instant/src/redux/reducer.ts | 4 ++--
 packages/instant/src/redux/store.ts   | 2 +-
 packages/instant/src/style/theme.ts   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 7efe8aeb0..e4578d620 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -10,7 +10,7 @@ export const INITIAL_STATE: State = {
     ethUsdPrice: undefined,
 };
 
-export function reducer(state: State = INITIAL_STATE, action: Action): State {
+export const reducer = (state: State = INITIAL_STATE, action: Action): State => {
     switch (action.type) {
         case ActionTypes.UPDATE_ETH_USD_PRICE:
             return {
@@ -20,4 +20,4 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
         default:
             return state;
     }
-}
+};
diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts
index 46c4350b0..fcd19f9a8 100644
--- a/packages/instant/src/redux/store.ts
+++ b/packages/instant/src/redux/store.ts
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import { applyMiddleware, createStore, Store as ReduxStore } from 'redux';
+import { createStore, Store as ReduxStore } from 'redux';
 
 import { reducer, State } from './reducer';
 
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 3bced9071..9eb6ccb56 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -6,7 +6,7 @@ const {
     injectGlobal,
     keyframes,
     ThemeProvider,
-} = styledComponents as styledComponents.ThemedStyledComponentsModule<Theme>;
+} = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
-- 
cgit v1.2.3


From 00eb3211c9909bcdcb354c55bf33ed3f988030eb Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 15:20:06 -0700
Subject: Remove deps we probably dont need

---
 packages/instant/package.json | 2 --
 1 file changed, 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 57b094626..01b1dc6c5 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -43,10 +43,8 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
     "dependencies": {
-        "@0xproject/connect": "^2.0.4",
         "@0xproject/types": "^1.1.1",
         "@0xproject/typescript-typings": "^2.0.2",
-        "@0xproject/utils": "^1.0.11",
         "@0xproject/web3-wrapper": "^3.0.1",
         "ethereum-types": "^1.0.8",
         "lodash": "^4.17.10",
-- 
cgit v1.2.3


From 831b4a119393ba6884796ef9b45b7e47965ec046 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 15:57:48 -0700
Subject: apply prettier

---
 packages/instant/src/style/theme.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 9eb6ccb56..02f890492 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,12 +1,6 @@
 import * as styledComponents from 'styled-components';
 
-const {
-    default: styled,
-    css,
-    injectGlobal,
-    keyframes,
-    ThemeProvider,
-} = styledComponents;
+const { default: styled, css, injectGlobal, keyframes, ThemeProvider } = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
-- 
cgit v1.2.3


From 0cfe5637c048091c9502d49c8526e17cefb1a525 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 16:27:04 -0700
Subject: Create zrx instant container heading

---
 packages/instant/src/components/ui/flex.tsx        |  3 ++
 packages/instant/src/components/ui/text.tsx        |  6 +--
 .../src/components/zero_ex_instant_container.tsx   | 49 ++++++++++++++--------
 3 files changed, 37 insertions(+), 21 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index f55f5f8ba..327e91926 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
+import { cssRuleIfExists } from '../../style/util';
 
 export interface FlexProps {
     direction?: 'row' | 'column';
     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;
     backgroundColor?: ColorOption;
     className?: string;
 }
@@ -21,6 +23,7 @@ export const Flex = styled(PlainFlex)`
     flex-wrap: ${props => props.flexWrap};
     justify-content: ${props => props.justify};
     align-items: ${props => props.align};
+    ${props => cssRuleIfExists(props, 'width')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
 `;
 
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index 0bc387644..9fb8ea26f 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -24,9 +24,9 @@ export interface TextProps {
 }
 
 const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick }) => (
-    <p className={className} onClick={onClick}>
+    <div className={className} onClick={onClick}>
         {children}
-    </p>
+    </div>
 );
 
 const darkenOnHoverAmount = 0.3;
@@ -61,9 +61,9 @@ Text.defaultProps = {
     fontWeight: 400,
     fontColor: ColorOption.black,
     fontSize: '15px',
-    lineHeight: '1.5em',
     textDecorationLine: 'none',
     noWrap: false,
+    display: 'inline-block',
 };
 
 Text.displayName = 'Text';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index fc936c3f2..b5853594f 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -7,32 +7,45 @@ import { Container, Flex, Text } from './ui';
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
-    <Container width="350px" borderRadius="3px">
-        <Flex direction="column">
-            <Container backgroundColor={ColorOption.primaryColor} padding="20px">
+    <Flex direction="column" width="350px" justify="flex-start">
+        <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%">
+            <Container marginBottom="5px">
                 <Text
                     letterSpacing="1px"
                     fontColor={ColorOption.white}
                     opacity={0.7}
-                    fontWeight={600}
+                    fontWeight={500}
                     textTransform="uppercase"
+                    fontSize="12px"
                 >
                     I want to buy
                 </Text>
-                <Flex direction="row" justify="space-between">
-                    <Container>
-                        <Text textTransform="uppercase">0.00</Text>
-                        <Text textTransform="uppercase"> rep </Text>
+            </Container>
+            <Flex direction="row" justify="space-between">
+                <Container>
+                    <Text fontSize="45px" fontColor={ColorOption.white} opacity={0.7} textTransform="uppercase">
+                        0.00
+                    </Text>
+                    <Container display="inline-block" marginLeft="10px">
+                        <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
+                            rep
+                        </Text>
+                    </Container>
+                </Container>
+                <Flex direction="column" justify="space-between">
+                    <Container marginBottom="5px">
+                        <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
+                            0 ETH
+                        </Text>
                     </Container>
-                    <Flex direction="column">
-                        <Text> 0 ETH </Text>
-                        <Text> $0.00 </Text>
-                    </Flex>
+                    <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
+                        $0.00
+                    </Text>
                 </Flex>
-            </Container>
-            <Container padding="20px" backgroundColor={ColorOption.white}>
-                <Text>hey</Text>
-            </Container>
-        </Flex>
-    </Container>
+            </Flex>
+        </Container>
+        <Container padding="20px" backgroundColor={ColorOption.white} width="100%">
+            <Text>hey</Text>
+        </Container>
+    </Flex>
 );
-- 
cgit v1.2.3


From d9b7aa2e4ba088b4dda1b1d2956de5d267a0674e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 17:22:36 -0700
Subject: Add faux order details section

---
 packages/instant/src/components/ui/container.tsx   |  8 +++-
 .../src/components/zero_ex_instant_container.tsx   | 43 ++--------------------
 packages/instant/src/style/theme.ts                |  4 ++
 3 files changed, 15 insertions(+), 40 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 8366d5748..4ebaf2af3 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -20,6 +20,9 @@ export interface ContainerProps {
     padding?: string;
     boxShadow?: string;
     borderRadius?: string;
+    border?: string;
+    borderColor?: ColorOption;
+    borderTop?: string;
     className?: string;
     backgroundColor?: ColorOption;
 }
@@ -45,11 +48,14 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'padding')}
     ${props => cssRuleIfExists(props, 'box-shadow')}
     ${props => cssRuleIfExists(props, 'border-radius')}
+    ${props => cssRuleIfExists(props, 'border')}
+    ${props => cssRuleIfExists(props, 'border-top')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+    border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
 `;
 
 Container.defaultProps = {
-    display: 'inline-block',
+    display: 'block',
 };
 
 Container.displayName = 'Container';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index b5853594f..efda6ecaf 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -2,50 +2,15 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
+import { InstantHeading } from './instant_heading';
+import { OrderDetails } from './order_details';
 import { Container, Flex, Text } from './ui';
 
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
     <Flex direction="column" width="350px" justify="flex-start">
-        <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%">
-            <Container marginBottom="5px">
-                <Text
-                    letterSpacing="1px"
-                    fontColor={ColorOption.white}
-                    opacity={0.7}
-                    fontWeight={500}
-                    textTransform="uppercase"
-                    fontSize="12px"
-                >
-                    I want to buy
-                </Text>
-            </Container>
-            <Flex direction="row" justify="space-between">
-                <Container>
-                    <Text fontSize="45px" fontColor={ColorOption.white} opacity={0.7} textTransform="uppercase">
-                        0.00
-                    </Text>
-                    <Container display="inline-block" marginLeft="10px">
-                        <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
-                            rep
-                        </Text>
-                    </Container>
-                </Container>
-                <Flex direction="column" justify="space-between">
-                    <Container marginBottom="5px">
-                        <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
-                            0 ETH
-                        </Text>
-                    </Container>
-                    <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
-                        $0.00
-                    </Text>
-                </Flex>
-            </Flex>
-        </Container>
-        <Container padding="20px" backgroundColor={ColorOption.white} width="100%">
-            <Text>hey</Text>
-        </Container>
+        <InstantHeading />
+        <OrderDetails />
     </Flex>
 );
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 02f890492..cf9da5378 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -8,6 +8,8 @@ export enum ColorOption {
     primaryColor = 'primaryColor',
     black = 'black',
     lightGrey = 'lightGrey',
+    grey = 'grey',
+    feintGrey = 'feintGrey',
     darkGrey = 'darkGrey',
     white = 'white',
 }
@@ -16,6 +18,8 @@ export const theme: Theme = {
     primaryColor: '#512D80',
     black: 'black',
     lightGrey: '#999999',
+    grey: '#666666',
+    feintGrey: '#DEDEDE',
     darkGrey: '#333333',
     white: 'white',
 };
-- 
cgit v1.2.3


From 98f8c7749433e63d7fea3c4e932db1f251607e4d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 17:47:32 -0700
Subject: Add BuyButton and other small improvement

---
 packages/instant/public/index.html                 |  9 +++-
 packages/instant/src/components/buy_button.tsx     | 19 +++++++
 .../instant/src/components/instant_heading.tsx     | 46 ++++++++++++++++
 packages/instant/src/components/order_details.tsx  | 62 ++++++++++++++++++++++
 packages/instant/src/components/ui/button.tsx      | 26 ++++-----
 packages/instant/src/components/ui/container.tsx   |  2 +
 .../src/components/zero_ex_instant_container.tsx   |  2 +
 7 files changed, 147 insertions(+), 19 deletions(-)
 create mode 100644 packages/instant/src/components/buy_button.tsx
 create mode 100644 packages/instant/src/components/instant_heading.tsx
 create mode 100644 packages/instant/src/components/order_details.tsx

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index d673dafd8..851d155a9 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -8,8 +8,13 @@
     <script type="text/javascript" src="/main.bundle.js" charset="utf-8"></script>
     <style>
         #zeroExInstantContainer {
-            margin-left: 30px;
-            margin-top: 30px;
+            position: relative;
+            left: 40px;
+            top: 30px;
+        }
+
+        body {
+            background-color: rgba(0, 0, 0, 0.2);
         }
     </style>
 </head>
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
new file mode 100644
index 000000000..9a70d127f
--- /dev/null
+++ b/packages/instant/src/components/buy_button.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Button, Container, Text } from './ui';
+
+export interface BuyButtonProps {}
+
+export const BuyButton: React.StatelessComponent<BuyButtonProps> = props => (
+    <Container backgroundColor={ColorOption.white} padding="20px" width="100%">
+        <Button width="100%">
+            <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
+                Buy
+            </Text>
+        </Button>
+    </Container>
+);
+
+BuyButton.displayName = 'BuyButton';
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
new file mode 100644
index 000000000..5aa82bcda
--- /dev/null
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container, Flex, Text } from './ui';
+
+export interface InstantHeadingProps {}
+
+export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => (
+    <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%">
+        <Container marginBottom="5px">
+            <Text
+                letterSpacing="1px"
+                fontColor={ColorOption.white}
+                opacity={0.7}
+                fontWeight={500}
+                textTransform="uppercase"
+                fontSize="12px"
+            >
+                I want to buy
+            </Text>
+        </Container>
+        <Flex direction="row" justify="space-between">
+            <Container>
+                <Text fontSize="45px" fontColor={ColorOption.white} opacity={0.7} textTransform="uppercase">
+                    0.00
+                </Text>
+                <Container display="inline-block" marginLeft="10px">
+                    <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
+                        rep
+                    </Text>
+                </Container>
+            </Container>
+            <Flex direction="column" justify="space-between">
+                <Container marginBottom="5px">
+                    <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
+                        0 ETH
+                    </Text>
+                </Container>
+                <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
+                    $0.00
+                </Text>
+            </Flex>
+        </Flex>
+    </Container>
+);
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
new file mode 100644
index 000000000..f90ee9f6f
--- /dev/null
+++ b/packages/instant/src/components/order_details.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container, Flex, Text } from './ui';
+
+export interface OrderDetailsProps {}
+
+export const OrderDetails: React.StatelessComponent<OrderDetailsProps> = props => (
+    <Container backgroundColor={ColorOption.white} padding="20px" width="100%">
+        <Container marginBottom="10px">
+            <Text
+                letterSpacing="1px"
+                fontColor={ColorOption.primaryColor}
+                fontWeight={600}
+                textTransform="uppercase"
+                fontSize="14px"
+            >
+                Order Details
+            </Text>
+        </Container>
+        <OrderDetailsRow name="Token Price" primaryValue=".013 ETH" secondaryValue="$24.32" />
+        <OrderDetailsRow name="Fee" primaryValue=".005 ETH" secondaryValue="$1.04" />
+        <OrderDetailsRow name="Total Cost" primaryValue="1.66 ETH" secondaryValue="$589.56" shouldEmphasize={true} />
+    </Container>
+);
+
+OrderDetails.displayName = 'OrderDetails';
+
+export interface OrderDetailsRowProps {
+    name: string;
+    primaryValue: string;
+    secondaryValue: string;
+    shouldEmphasize?: boolean;
+}
+
+export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = props => {
+    const fontWeight = props.shouldEmphasize ? 700 : 400;
+    return (
+        <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
+            <Flex justify="space-between">
+                <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
+                    {props.name}
+                </Text>
+                <Container>
+                    <Container marginRight="3px" display="inline-block">
+                        <Text fontColor={ColorOption.lightGrey}>({props.secondaryValue}) </Text>
+                    </Container>
+                    <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
+                        {props.primaryValue}
+                    </Text>
+                </Container>
+            </Flex>
+        </Container>
+    );
+};
+
+OrderDetailsRow.defaultProps = {
+    shouldEmphasize: false,
+};
+
+OrderDetailsRow.displayName = 'OrderDetailsRow';
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index ec0a87345..1fcb2591c 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -4,11 +4,8 @@ import * as React from 'react';
 import { ColorOption, styled } from '../../style/theme';
 
 export interface ButtonProps {
-    fontColor: ColorOption;
-    backgroundColor: ColorOption;
+    backgroundColor?: ColorOption;
     borderColor?: ColorOption;
-    fontSize?: string;
-    fontFamily?: string;
     width?: string;
     padding?: string;
     type?: string;
@@ -28,41 +25,36 @@ const darkenOnActiveAmount = 0.2;
 const saturateOnFocusAmount = 0.2;
 export const Button = styled(PlainButton)`
     cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
-    font-size: ${props => props.fontSize};
-    color: ${props => props.fontColor};
     transition: background-color, opacity 0.5s ease;
     padding: ${props => props.padding};
-    border-radius: 6px;
-    font-weight: 500;
+    border-radius: 3px;
     outline: none;
-    font-family: ${props => props.fontFamily};
     width: ${props => props.width};
-    background-color: ${props => props.backgroundColor};
+    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]) : ''} !important;
+            !props.isDisabled
+                ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
+                : ''} !important;
     }
     &:active {
         background-color: ${props =>
-            !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor]) : ''};
+            !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
     }
     &:disabled {
         opacity: 0.5;
     }
     &:focus {
-        background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor])};
+        background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
     }
 `;
 
 Button.defaultProps = {
-    fontSize: '12px',
-    fontColor: ColorOption.white,
     backgroundColor: ColorOption.primaryColor,
     width: 'auto',
-    fontFamily: 'Inter UI',
     isDisabled: false,
-    padding: '0.8em 2.2em',
+    padding: '1em 2.2em',
 };
 
 Button.displayName = 'Button';
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 4ebaf2af3..bc47ba0aa 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -25,6 +25,7 @@ export interface ContainerProps {
     borderTop?: string;
     className?: string;
     backgroundColor?: ColorOption;
+    hasBoxShadow?: boolean;
 }
 
 const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => (
@@ -50,6 +51,7 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'border-radius')}
     ${props => cssRuleIfExists(props, 'border')}
     ${props => cssRuleIfExists(props, 'border-top')}
+    ${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 efda6ecaf..d6df3ccc0 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
+import { BuyButton } from './buy_button';
 import { InstantHeading } from './instant_heading';
 import { OrderDetails } from './order_details';
 import { Container, Flex, Text } from './ui';
@@ -12,5 +13,6 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
     <Flex direction="column" width="350px" justify="flex-start">
         <InstantHeading />
         <OrderDetails />
+        <BuyButton />
     </Flex>
 );
-- 
cgit v1.2.3


From 1001dfcc30d9e7a049cc0d7719131adec6344f6c Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 18:02:42 -0700
Subject: Add box shadow and default box-sizing: border-box to container

---
 packages/instant/public/index.html                           |  1 +
 packages/instant/src/components/buy_button.tsx               |  2 +-
 packages/instant/src/components/order_details.tsx            |  2 +-
 packages/instant/src/components/ui/container.tsx             |  3 +--
 .../instant/src/components/zero_ex_instant_container.tsx     | 12 +++++++-----
 5 files changed, 11 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 851d155a9..044a9137b 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -14,6 +14,7 @@
         }
 
         body {
+            margin: 0;
             background-color: rgba(0, 0, 0, 0.2);
         }
     </style>
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 9a70d127f..5a32b9575 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -7,7 +7,7 @@ import { Button, Container, Text } from './ui';
 export interface BuyButtonProps {}
 
 export const BuyButton: React.StatelessComponent<BuyButtonProps> = props => (
-    <Container backgroundColor={ColorOption.white} padding="20px" width="100%">
+    <Container padding="20px" width="100%">
         <Button width="100%">
             <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
                 Buy
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index f90ee9f6f..dbf2c1f0b 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -7,7 +7,7 @@ import { Container, Flex, Text } from './ui';
 export interface OrderDetailsProps {}
 
 export const OrderDetails: React.StatelessComponent<OrderDetailsProps> = props => (
-    <Container backgroundColor={ColorOption.white} padding="20px" width="100%">
+    <Container padding="20px" width="100%">
         <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 bc47ba0aa..64b5d4129 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -18,7 +18,6 @@ export interface ContainerProps {
     marginBottom?: string;
     marginLeft?: string;
     padding?: string;
-    boxShadow?: string;
     borderRadius?: string;
     border?: string;
     borderColor?: ColorOption;
@@ -33,6 +32,7 @@ const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, cl
 );
 
 export const Container = styled(PlainContainer)`
+    box-sizing: border-box;
     ${props => cssRuleIfExists(props, 'display')}
     ${props => cssRuleIfExists(props, 'position')}
     ${props => cssRuleIfExists(props, 'top')}
@@ -47,7 +47,6 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'margin-bottom')}
     ${props => cssRuleIfExists(props, 'margin-left')}
     ${props => cssRuleIfExists(props, 'padding')}
-    ${props => cssRuleIfExists(props, 'box-shadow')}
     ${props => cssRuleIfExists(props, 'border-radius')}
     ${props => cssRuleIfExists(props, 'border')}
     ${props => cssRuleIfExists(props, 'border-top')}
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index d6df3ccc0..d33b4bfd5 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -10,9 +10,11 @@ import { Container, Flex, Text } from './ui';
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
-    <Flex direction="column" width="350px" justify="flex-start">
-        <InstantHeading />
-        <OrderDetails />
-        <BuyButton />
-    </Flex>
+    <Container hasBoxShadow={true} width="350px" backgroundColor={ColorOption.white}>
+        <Flex direction="column" justify="flex-start">
+            <InstantHeading />
+            <OrderDetails />
+            <BuyButton />
+        </Flex>
+    </Container>
 );
-- 
cgit v1.2.3


From bf0437324d3499dbb516e85a4eb1fbdceb91707c Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 18:06:19 -0700
Subject: Add border radios

---
 packages/instant/src/components/instant_heading.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/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 5aa82bcda..52c4bb2db 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -7,7 +7,7 @@ import { Container, Flex, Text } from './ui';
 export interface InstantHeadingProps {}
 
 export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => (
-    <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%">
+    <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%" borderRadius="3px 3px 0px 0px">
         <Container marginBottom="5px">
             <Text
                 letterSpacing="1px"
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index d33b4bfd5..6075a5b21 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -10,7 +10,7 @@ import { Container, Flex, Text } from './ui';
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
-    <Container hasBoxShadow={true} width="350px" backgroundColor={ColorOption.white}>
+    <Container hasBoxShadow={true} width="350px" backgroundColor={ColorOption.white} borderRadius="3px">
         <Flex direction="column" justify="flex-start">
             <InstantHeading />
             <OrderDetails />
-- 
cgit v1.2.3


From c5084f023ac0356660b9480f9e1f477001a61284 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 18:57:40 -0700
Subject: Add Input and AmountInput component

---
 packages/instant/src/components/amount_input.tsx   | 27 ++++++++++++++
 .../instant/src/components/instant_heading.tsx     |  6 ++--
 packages/instant/src/components/ui/container.tsx   |  2 ++
 packages/instant/src/components/ui/index.ts        |  1 +
 packages/instant/src/components/ui/input.tsx       | 42 ++++++++++++++++++++++
 5 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 packages/instant/src/components/amount_input.tsx
 create mode 100644 packages/instant/src/components/ui/input.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
new file mode 100644
index 000000000..699541bfb
--- /dev/null
+++ b/packages/instant/src/components/amount_input.tsx
@@ -0,0 +1,27 @@
+import { BigNumber } from '@0xproject/utils';
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container, Flex, Input, Text } from './ui';
+
+export interface AmountInputProps {
+    fontColor?: ColorOption;
+    fontSize?: string;
+    value?: BigNumber;
+    onChange?: (value: BigNumber) => void;
+}
+
+export const AmountInput: React.StatelessComponent<AmountInputProps> = props => (
+    <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
+        <Input
+            fontColor={props.fontColor}
+            fontSize={props.fontSize}
+            value={props.value ? props.value.toString() : undefined}
+            placeholder="0.00"
+            width="2em"
+        />
+    </Container>
+);
+
+AmountInput.defaultProps = {};
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 52c4bb2db..3da280652 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -1,7 +1,9 @@
+import { BigNumber } from '@0xproject/utils';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
+import { AmountInput } from './amount_input';
 import { Container, Flex, Text } from './ui';
 
 export interface InstantHeadingProps {}
@@ -22,9 +24,7 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
         </Container>
         <Flex direction="row" justify="space-between">
             <Container>
-                <Text fontSize="45px" fontColor={ColorOption.white} opacity={0.7} textTransform="uppercase">
-                    0.00
-                </Text>
+                <AmountInput fontSize="45px" />
                 <Container display="inline-block" marginLeft="10px">
                     <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
                         rep
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 64b5d4129..c45f6e5e9 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -22,6 +22,7 @@ export interface ContainerProps {
     border?: string;
     borderColor?: ColorOption;
     borderTop?: string;
+    borderBottom?: string;
     className?: string;
     backgroundColor?: ColorOption;
     hasBoxShadow?: boolean;
@@ -50,6 +51,7 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'border-radius')}
     ${props => cssRuleIfExists(props, 'border')}
     ${props => cssRuleIfExists(props, 'border-top')}
+    ${props => cssRuleIfExists(props, 'border-bottom')}
     ${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/index.ts b/packages/instant/src/components/ui/index.ts
index dca63b65c..bf5f6c700 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -2,3 +2,4 @@ export { Text, Title } from './text';
 export { Button } from './button';
 export { Flex } from './flex';
 export { Container } from './container';
+export { Input } from './input';
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
new file mode 100644
index 000000000..fc4fed14e
--- /dev/null
+++ b/packages/instant/src/components/ui/input.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+
+import { Container, Flex, Text } from '../ui';
+
+export interface InputProps {
+    className?: string;
+    value?: string;
+    width?: string;
+    fontSize?: string;
+    fontColor?: ColorOption;
+    placeholder?: string;
+    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)`
+    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 {
+        color: ${props => props.theme[props.fontColor || 'white']};
+        opacity: 0.5;
+    }
+`;
+
+Input.defaultProps = {
+    width: 'auto',
+    fontColor: ColorOption.white,
+    fontSize: '12px',
+};
+
+Input.displayName = 'Input';
-- 
cgit v1.2.3


From adcfaa2e80389f69e196b602955cee858a1eb40f Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Mon, 1 Oct 2018 20:37:13 +1000
Subject: Expose eth_signTypedData functionality for order signing

---
 packages/json-schemas/schemas/eip712_typed_data.ts | 28 +++++++++++
 packages/json-schemas/src/schemas.ts               |  2 +
 packages/order-utils/src/eip712_utils.ts           |  6 +--
 packages/order-utils/src/order_hash.ts             |  2 +-
 packages/order-utils/src/signature_utils.ts        | 50 +++++++++++++++++++-
 packages/order-utils/test/signature_utils_test.ts  | 55 ++++++++++++++++++----
 packages/subproviders/package.json                 |  2 +-
 packages/web3-wrapper/src/web3_wrapper.ts          | 15 ++++++
 8 files changed, 144 insertions(+), 16 deletions(-)
 create mode 100644 packages/json-schemas/schemas/eip712_typed_data.ts

(limited to 'packages')

diff --git a/packages/json-schemas/schemas/eip712_typed_data.ts b/packages/json-schemas/schemas/eip712_typed_data.ts
new file mode 100644
index 000000000..4c4664878
--- /dev/null
+++ b/packages/json-schemas/schemas/eip712_typed_data.ts
@@ -0,0 +1,28 @@
+export const eip712TypedData = {
+    id: 'eip712TypedData',
+    type: 'object',
+    properties: {
+        types: {
+            type: 'object',
+            properties: {
+                EIP712Domain: { type: 'array' },
+            },
+            additionalProperties: {
+                type: 'array',
+                items: {
+                    type: 'object',
+                    properties: {
+                        name: { type: 'string' },
+                        type: { type: 'string' },
+                    },
+                    required: ['name', 'type'],
+                },
+            },
+            required: ['EIP712Domain'],
+        },
+        primaryType: { type: 'string' },
+        domain: { type: 'object' },
+        message: { type: 'object' },
+    },
+    required: ['types', 'primaryType', 'domain', 'message'],
+};
diff --git a/packages/json-schemas/src/schemas.ts b/packages/json-schemas/src/schemas.ts
index 3bc37f96b..50dc8d091 100644
--- a/packages/json-schemas/src/schemas.ts
+++ b/packages/json-schemas/src/schemas.ts
@@ -2,6 +2,7 @@ import { addressSchema, hexSchema, numberSchema } from '../schemas/basic_type_sc
 import { blockParamSchema, blockRangeSchema } from '../schemas/block_range_schema';
 import { callDataSchema } from '../schemas/call_data_schema';
 import { ecSignatureParameterSchema, ecSignatureSchema } from '../schemas/ec_signature_schema';
+import { eip712TypedData } from '../schemas/eip712_typed_data';
 import { indexFilterValuesSchema } from '../schemas/index_filter_values_schema';
 import { orderCancellationRequestsSchema } from '../schemas/order_cancel_schema';
 import { orderFillOrKillRequestsSchema } from '../schemas/order_fill_or_kill_requests_schema';
@@ -39,6 +40,7 @@ export const schemas = {
     hexSchema,
     ecSignatureParameterSchema,
     ecSignatureSchema,
+    eip712TypedData,
     indexFilterValuesSchema,
     orderCancellationRequestsSchema,
     orderFillOrKillRequestsSchema,
diff --git a/packages/order-utils/src/eip712_utils.ts b/packages/order-utils/src/eip712_utils.ts
index b303c93dc..01f1e930e 100644
--- a/packages/order-utils/src/eip712_utils.ts
+++ b/packages/order-utils/src/eip712_utils.ts
@@ -5,11 +5,11 @@ import { crypto } from './crypto';
 import { EIP712Schema, EIP712Types } from './types';
 
 const EIP191_PREFIX = '\x19\x01';
-const EIP712_DOMAIN_NAME = '0x Protocol';
-const EIP712_DOMAIN_VERSION = '2';
 const EIP712_VALUE_LENGTH = 32;
+export const EIP712_DOMAIN_NAME = '0x Protocol';
+export const EIP712_DOMAIN_VERSION = '2';
 
-const EIP712_DOMAIN_SCHEMA: EIP712Schema = {
+export const EIP712_DOMAIN_SCHEMA: EIP712Schema = {
     name: 'EIP712Domain',
     parameters: [
         { name: 'name', type: EIP712Types.String },
diff --git a/packages/order-utils/src/order_hash.ts b/packages/order-utils/src/order_hash.ts
index 8e98f8767..151c1f801 100644
--- a/packages/order-utils/src/order_hash.ts
+++ b/packages/order-utils/src/order_hash.ts
@@ -8,7 +8,7 @@ import { EIP712Schema, EIP712Types } from './types';
 
 const INVALID_TAKER_FORMAT = 'instance.takerAddress is not of a type(s) string';
 
-const EIP712_ORDER_SCHEMA: EIP712Schema = {
+export const EIP712_ORDER_SCHEMA: EIP712Schema = {
     name: 'Order',
     parameters: [
         { name: 'makerAddress', type: EIP712Types.Address },
diff --git a/packages/order-utils/src/signature_utils.ts b/packages/order-utils/src/signature_utils.ts
index 3b656d3fc..05c673ae2 100644
--- a/packages/order-utils/src/signature_utils.ts
+++ b/packages/order-utils/src/signature_utils.ts
@@ -1,5 +1,5 @@
 import { schemas } from '@0xproject/json-schemas';
-import { ECSignature, SignatureType, SignerType, ValidatorSignature } from '@0xproject/types';
+import { ECSignature, Order, SignatureType, SignerType, ValidatorSignature } from '@0xproject/types';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import { Provider } from 'ethereum-types';
 import * as ethUtil from 'ethereumjs-util';
@@ -7,9 +7,11 @@ import * as _ from 'lodash';
 
 import { artifacts } from './artifacts';
 import { assert } from './assert';
+import { EIP712_DOMAIN_NAME, EIP712_DOMAIN_SCHEMA, EIP712_DOMAIN_VERSION } from './eip712_utils';
 import { ExchangeContract } from './generated_contract_wrappers/exchange';
 import { IValidatorContract } from './generated_contract_wrappers/i_validator';
 import { IWalletContract } from './generated_contract_wrappers/i_wallet';
+import { EIP712_ORDER_SCHEMA } from './order_hash';
 import { OrderError } from './types';
 import { utils } from './utils';
 
@@ -191,6 +193,52 @@ export const signatureUtils = {
             return false;
         }
     },
+    /**
+     * Signs an order using `eth_signTypedData` and returns it's elliptic curve signature and signature type.
+     * This method currently supports Ganache.
+     * @param   order The Order to sign.
+     * @param   signerAddress   The hex encoded Ethereum address you wish to sign it with. This address
+     *          must be available via the Provider supplied to 0x.js.
+     * @return  A hex encoded string containing the Elliptic curve signature generated by signing the orderHash and the Signature Type.
+     */
+    async ecSignOrderAsync(provider: Provider, order: Order, signerAddress: string): Promise<string> {
+        assert.isWeb3Provider('provider', provider);
+        assert.isETHAddressHex('signerAddress', signerAddress);
+        const web3Wrapper = new Web3Wrapper(provider);
+        await assert.isSenderAddressAsync('signerAddress', signerAddress, web3Wrapper);
+        const normalizedSignerAddress = signerAddress.toLowerCase();
+        const typedData = {
+            types: {
+                EIP712Domain: EIP712_DOMAIN_SCHEMA.parameters,
+                Order: EIP712_ORDER_SCHEMA.parameters,
+            },
+            domain: {
+                name: EIP712_DOMAIN_NAME,
+                version: EIP712_DOMAIN_VERSION,
+                verifyingContract: order.exchangeAddress,
+            },
+            message: {
+                ...order,
+                salt: order.salt.toString(),
+                makerFee: order.makerFee.toString(),
+                takerFee: order.takerFee.toString(),
+                makerAssetAmount: order.makerAssetAmount.toString(),
+                takerAssetAmount: order.takerAssetAmount.toString(),
+                expirationTimeSeconds: order.expirationTimeSeconds.toString(),
+            },
+            primaryType: 'Order',
+        };
+        const signature = await web3Wrapper.signTypedDataAsync(normalizedSignerAddress, typedData);
+        const ecSignatureRSV = parseSignatureHexAsRSV(signature);
+        const signatureBuffer = Buffer.concat([
+            ethUtil.toBuffer(ecSignatureRSV.v),
+            ethUtil.toBuffer(ecSignatureRSV.r),
+            ethUtil.toBuffer(ecSignatureRSV.s),
+            ethUtil.toBuffer(SignatureType.EIP712),
+        ]);
+        const signatureHex = `0x${signatureBuffer.toString('hex')}`;
+        return signatureHex;
+    },
     /**
      * Signs an orderHash and returns it's elliptic curve signature and signature type.
      * This method currently supports TestRPC, Geth and Parity above and below V1.6.6
diff --git a/packages/order-utils/test/signature_utils_test.ts b/packages/order-utils/test/signature_utils_test.ts
index 2ca1109a1..40ce16165 100644
--- a/packages/order-utils/test/signature_utils_test.ts
+++ b/packages/order-utils/test/signature_utils_test.ts
@@ -1,12 +1,13 @@
-import { SignerType } from '@0xproject/types';
+import { Order, SignatureType, SignerType } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import * as chai from 'chai';
 import { JSONRPCErrorCallback, JSONRPCRequestPayload } from 'ethereum-types';
+import * as ethUtil from 'ethereumjs-util';
 import * as _ from 'lodash';
 import 'mocha';
-import * as Sinon from 'sinon';
 
-import { generatePseudoRandomSalt } from '../src';
+import { generatePseudoRandomSalt, orderHashUtils } from '../src';
+import { constants } from '../src/constants';
 import { signatureUtils } from '../src/signature_utils';
 
 import { chaiSetup } from './utils/chai_setup';
@@ -115,19 +116,53 @@ describe('Signature utils', () => {
             expect(salt.lessThan(twoPow256)).to.be.true();
         });
     });
-    describe('#ecSignOrderHashAsync', () => {
-        let stubs: Sinon.SinonStub[] = [];
+    describe('#ecSignOrderAsync', () => {
         let makerAddress: string;
+        const fakeExchangeContractAddress = '0x1dc4c1cefef38a777b15aa20260a54e584b16c48';
+        let order: Order;
         before(async () => {
             const availableAddreses = await web3Wrapper.getAvailableAddressesAsync();
             makerAddress = availableAddreses[0];
+            order = {
+                makerAddress,
+                takerAddress: constants.NULL_ADDRESS,
+                senderAddress: constants.NULL_ADDRESS,
+                feeRecipientAddress: constants.NULL_ADDRESS,
+                makerAssetData: constants.NULL_ADDRESS,
+                takerAssetData: constants.NULL_ADDRESS,
+                exchangeAddress: fakeExchangeContractAddress,
+                salt: new BigNumber(0),
+                makerFee: new BigNumber(0),
+                takerFee: new BigNumber(0),
+                makerAssetAmount: new BigNumber(0),
+                takerAssetAmount: new BigNumber(0),
+                expirationTimeSeconds: new BigNumber(0),
+            };
         });
-        afterEach(() => {
-            // clean up any stubs after the test has completed
-            _.each(stubs, s => s.restore());
-            stubs = [];
+        it('should result in the same signature as signing order hash without prefix', async () => {
+            const orderHashHex = orderHashUtils.getOrderHashHex(order);
+            const sig = ethUtil.ecsign(
+                ethUtil.toBuffer(orderHashHex),
+                Buffer.from('F2F48EE19680706196E2E339E5DA3491186E0C4C5030670656B0E0164837257D', 'hex'),
+            );
+            const signatureBuffer = Buffer.concat([
+                ethUtil.toBuffer(sig.v),
+                ethUtil.toBuffer(sig.r),
+                ethUtil.toBuffer(sig.s),
+                ethUtil.toBuffer(SignatureType.EIP712),
+            ]);
+            const signatureHex = `0x${signatureBuffer.toString('hex')}`;
+            const eip712Signature = await signatureUtils.ecSignOrderAsync(provider, order, makerAddress);
+            expect(signatureHex).to.eq(eip712Signature);
+        });
+    });
+    describe('#ecSignOrderHashAsync', () => {
+        let makerAddress: string;
+        before(async () => {
+            const availableAddreses = await web3Wrapper.getAvailableAddressesAsync();
+            makerAddress = availableAddreses[0];
         });
-        it('Should return the correct Signature', async () => {
+        it('should return the correct Signature', async () => {
             const orderHash = '0x6927e990021d23b1eb7b8789f6a6feaf98fe104bb0cf8259421b79f9a34222b0';
             const expectedSignature =
                 '0x1b61a3ed31b43c8780e905a260a35faefcc527be7516aa11c0256729b5b351bc3340349190569279751135161d22529dc25add4f6069af05be04cacbda2ace225403';
diff --git a/packages/subproviders/package.json b/packages/subproviders/package.json
index fad478349..ff3ab7ed5 100644
--- a/packages/subproviders/package.json
+++ b/packages/subproviders/package.json
@@ -45,7 +45,7 @@
         "ethereum-types": "^1.0.11",
         "ethereumjs-tx": "^1.3.5",
         "ethereumjs-util": "^5.1.1",
-        "ganache-core": "0xProject/ganache-core#monorepo-dep",
+        "ganache-core": "^2.2.1",
         "hdkey": "^0.7.1",
         "json-rpc-error": "2.0.0",
         "lodash": "^4.17.5",
diff --git a/packages/web3-wrapper/src/web3_wrapper.ts b/packages/web3-wrapper/src/web3_wrapper.ts
index d52c1cb6e..df6879a48 100644
--- a/packages/web3-wrapper/src/web3_wrapper.ts
+++ b/packages/web3-wrapper/src/web3_wrapper.ts
@@ -314,6 +314,21 @@ export class Web3Wrapper {
         });
         return signData;
     }
+    /**
+     * Sign an EIP712 typed data message with a specific address's private key (`eth_signTypedData`)
+     * @param address Address of signer
+     * @param typedData Typed data message to sign
+     * @returns Signature string (might be VRS or RSV depending on the Signer)
+     */
+    public async signTypedDataAsync(address: string, typedData: object): Promise<string> {
+        assert.isETHAddressHex('address', address);
+        assert.doesConformToSchema('typedData', typedData, schemas.eip712TypedData);
+        const signData = await this.sendRawPayloadAsync<string>({
+            method: 'eth_signTypedData',
+            params: [address, typedData],
+        });
+        return signData;
+    }
     /**
      * Fetches the latest block number
      * @returns Block number
-- 
cgit v1.2.3


From 07926ded6ef194969ffe26e3879d6e86a0eb9c50 Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Tue, 2 Oct 2018 17:32:28 +1000
Subject: Introduce Metamask Subprovider.

MM has a number of inconsistencies with other providers when implementing the JSON RPC interface. This subprovider wraps those nuances so they do not leak into the rest of our code
---
 packages/0x.js/src/index.ts                        |   9 +-
 .../test/transaction_encoder_test.ts               |   9 +-
 .../contracts/test/exchange/signature_validator.ts |  12 +-
 packages/order-utils/src/index.ts                  |   1 -
 packages/order-utils/src/order_factory.ts          |   9 +-
 packages/order-utils/src/signature_utils.ts        | 120 ++++++++------------
 packages/order-utils/test/signature_utils_test.ts  | 104 +++--------------
 packages/subproviders/CHANGELOG.json               |   8 ++
 packages/subproviders/src/index.ts                 |   1 +
 .../src/subproviders/metamask_subprovider.ts       | 124 +++++++++++++++++++++
 .../src/subproviders/private_key_wallet.ts         |   2 +-
 packages/subproviders/src/subproviders/signer.ts   |  13 ++-
 packages/types/src/index.ts                        |  10 --
 packages/website/ts/blockchain.ts                  |  22 +---
 14 files changed, 225 insertions(+), 219 deletions(-)
 create mode 100644 packages/subproviders/src/subproviders/metamask_subprovider.ts

(limited to 'packages')

diff --git a/packages/0x.js/src/index.ts b/packages/0x.js/src/index.ts
index d07bfcfc8..228bcecdb 100644
--- a/packages/0x.js/src/index.ts
+++ b/packages/0x.js/src/index.ts
@@ -53,7 +53,13 @@ export { OrderWatcher, OnOrderStateChangeCallback, OrderWatcherConfig } from '@0
 
 export import Web3ProviderEngine = require('web3-provider-engine');
 
-export { RPCSubprovider, Callback, JSONRPCRequestPayloadWithMethod, ErrorCallback } from '@0xproject/subproviders';
+export {
+    RPCSubprovider,
+    Callback,
+    JSONRPCRequestPayloadWithMethod,
+    ErrorCallback,
+    MetamaskSubprovider,
+} from '@0xproject/subproviders';
 
 export { AbiDecoder } from '@0xproject/utils';
 
@@ -68,7 +74,6 @@ export {
     OrderStateInvalid,
     OrderState,
     AssetProxyId,
-    SignerType,
     ERC20AssetData,
     ERC721AssetData,
     SignatureType,
diff --git a/packages/contract-wrappers/test/transaction_encoder_test.ts b/packages/contract-wrappers/test/transaction_encoder_test.ts
index a397e43a8..9da8fe2ca 100644
--- a/packages/contract-wrappers/test/transaction_encoder_test.ts
+++ b/packages/contract-wrappers/test/transaction_encoder_test.ts
@@ -1,7 +1,7 @@
 import { BlockchainLifecycle } from '@0xproject/dev-utils';
 import { FillScenarios } from '@0xproject/fill-scenarios';
 import { assetDataUtils, generatePseudoRandomSalt, orderHashUtils, signatureUtils } from '@0xproject/order-utils';
-import { SignedOrder, SignerType } from '@0xproject/types';
+import { SignedOrder } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import 'mocha';
 
@@ -80,12 +80,7 @@ describe('TransactionEncoder', () => {
         ): Promise<void> => {
             const salt = generatePseudoRandomSalt();
             const encodedTransaction = encoder.getTransactionHex(data, salt, signerAddress);
-            const signature = await signatureUtils.ecSignOrderHashAsync(
-                provider,
-                encodedTransaction,
-                signerAddress,
-                SignerType.Default,
-            );
+            const signature = await signatureUtils.ecSignHashAsync(provider, encodedTransaction, signerAddress);
             txHash = await contractWrappers.exchange.executeTransactionAsync(
                 salt,
                 signerAddress,
diff --git a/packages/contracts/test/exchange/signature_validator.ts b/packages/contracts/test/exchange/signature_validator.ts
index 5cc62e777..192ed3ca9 100644
--- a/packages/contracts/test/exchange/signature_validator.ts
+++ b/packages/contracts/test/exchange/signature_validator.ts
@@ -1,6 +1,6 @@
 import { BlockchainLifecycle } from '@0xproject/dev-utils';
 import { assetDataUtils, orderHashUtils, signatureUtils } from '@0xproject/order-utils';
-import { RevertReason, SignatureType, SignedOrder, SignerType } from '@0xproject/types';
+import { RevertReason, SignatureType, SignedOrder } from '@0xproject/types';
 import * as chai from 'chai';
 import { LogWithDecodedArgs } from 'ethereum-types';
 import ethUtil = require('ethereumjs-util');
@@ -231,10 +231,7 @@ describe('MixinSignatureValidator', () => {
         it('should return true when SignatureType=EthSign and signature is valid', async () => {
             // Create EthSign signature
             const orderHashHex = orderHashUtils.getOrderHashHex(signedOrder);
-            const orderHashWithEthSignPrefixHex = signatureUtils.addSignedMessagePrefix(
-                orderHashHex,
-                SignerType.Default,
-            );
+            const orderHashWithEthSignPrefixHex = signatureUtils.addSignedMessagePrefix(orderHashHex);
             const orderHashWithEthSignPrefixBuffer = ethUtil.toBuffer(orderHashWithEthSignPrefixHex);
             const ecSignature = ethUtil.ecsign(orderHashWithEthSignPrefixBuffer, signerPrivateKey);
             // Create 0x signature from EthSign signature
@@ -257,10 +254,7 @@ describe('MixinSignatureValidator', () => {
         it('should return false when SignatureType=EthSign and signature is invalid', async () => {
             // Create EthSign signature
             const orderHashHex = orderHashUtils.getOrderHashHex(signedOrder);
-            const orderHashWithEthSignPrefixHex = signatureUtils.addSignedMessagePrefix(
-                orderHashHex,
-                SignerType.Default,
-            );
+            const orderHashWithEthSignPrefixHex = signatureUtils.addSignedMessagePrefix(orderHashHex);
             const orderHashWithEthSignPrefixBuffer = ethUtil.toBuffer(orderHashWithEthSignPrefixHex);
             const ecSignature = ethUtil.ecsign(orderHashWithEthSignPrefixBuffer, signerPrivateKey);
             // Create 0x signature from EthSign signature
diff --git a/packages/order-utils/src/index.ts b/packages/order-utils/src/index.ts
index 1553647c6..e7a23682c 100644
--- a/packages/order-utils/src/index.ts
+++ b/packages/order-utils/src/index.ts
@@ -29,7 +29,6 @@ export {
     ERC20AssetData,
     ERC721AssetData,
     AssetProxyId,
-    SignerType,
     SignatureType,
     OrderStateValid,
     OrderStateInvalid,
diff --git a/packages/order-utils/src/order_factory.ts b/packages/order-utils/src/order_factory.ts
index b1292903a..0f0cd6046 100644
--- a/packages/order-utils/src/order_factory.ts
+++ b/packages/order-utils/src/order_factory.ts
@@ -1,4 +1,4 @@
-import { Order, SignedOrder, SignerType } from '@0xproject/types';
+import { Order, SignedOrder } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import { Provider } from 'ethereum-types';
 import * as _ from 'lodash';
@@ -71,12 +71,7 @@ export const orderFactory = {
             createOrderOpts,
         );
         const orderHash = orderHashUtils.getOrderHashHex(order);
-        const signature = await signatureUtils.ecSignOrderHashAsync(
-            provider,
-            orderHash,
-            makerAddress,
-            SignerType.Default,
-        );
+        const signature = await signatureUtils.ecSignHashAsync(provider, orderHash, makerAddress);
         const signedOrder: SignedOrder = _.assign(order, { signature });
         return signedOrder;
     },
diff --git a/packages/order-utils/src/signature_utils.ts b/packages/order-utils/src/signature_utils.ts
index 05c673ae2..8e0fd702b 100644
--- a/packages/order-utils/src/signature_utils.ts
+++ b/packages/order-utils/src/signature_utils.ts
@@ -1,5 +1,5 @@
 import { schemas } from '@0xproject/json-schemas';
-import { ECSignature, Order, SignatureType, SignerType, ValidatorSignature } from '@0xproject/types';
+import { ECSignature, Order, SignatureType, ValidatorSignature } from '@0xproject/types';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import { Provider } from 'ethereum-types';
 import * as ethUtil from 'ethereumjs-util';
@@ -11,7 +11,7 @@ import { EIP712_DOMAIN_NAME, EIP712_DOMAIN_SCHEMA, EIP712_DOMAIN_VERSION } from
 import { ExchangeContract } from './generated_contract_wrappers/exchange';
 import { IValidatorContract } from './generated_contract_wrappers/i_validator';
 import { IWalletContract } from './generated_contract_wrappers/i_wallet';
-import { EIP712_ORDER_SCHEMA } from './order_hash';
+import { EIP712_ORDER_SCHEMA, orderHashUtils } from './order_hash';
 import { OrderError } from './types';
 import { utils } from './utils';
 
@@ -51,7 +51,7 @@ export const signatureUtils = {
 
             case SignatureType.EthSign: {
                 const ecSignature = signatureUtils.parseECSignature(signature);
-                const prefixedMessageHex = signatureUtils.addSignedMessagePrefix(data, SignerType.Default);
+                const prefixedMessageHex = signatureUtils.addSignedMessagePrefix(data);
                 return signatureUtils.isValidECSignature(prefixedMessageHex, ecSignature, signerAddress);
             }
 
@@ -194,19 +194,41 @@ export const signatureUtils = {
         }
     },
     /**
-     * Signs an order using `eth_signTypedData` and returns it's elliptic curve signature and signature type.
-     * This method currently supports Ganache.
+     * Signs an order and returns its elliptic curve signature and signature type. First `eth_signTypedData` is requested
+     * then a fallback to `eth_sign` if not available on this provider.
      * @param   order The Order to sign.
      * @param   signerAddress   The hex encoded Ethereum address you wish to sign it with. This address
      *          must be available via the Provider supplied to 0x.js.
      * @return  A hex encoded string containing the Elliptic curve signature generated by signing the orderHash and the Signature Type.
      */
     async ecSignOrderAsync(provider: Provider, order: Order, signerAddress: string): Promise<string> {
+        try {
+            const signatureHex = signatureUtils.ecSignTypedDataOrderAsync(provider, order, signerAddress);
+            return signatureHex;
+        } catch (err) {
+            // Fallback to using EthSign when ethSignTypedData is not supported
+            const orderHash = orderHashUtils.getOrderHashHex(order);
+            const signatureHex = await signatureUtils.ecSignHashAsync(provider, orderHash, signerAddress);
+            return signatureHex;
+        }
+    },
+    /**
+     * Signs an order using `eth_signTypedData` and returns its elliptic curve signature and signature type.
+     * @param   order The Order to sign.
+     * @param   signerAddress   The hex encoded Ethereum address you wish to sign it with. This address
+     *          must be available via the Provider supplied to 0x.js.
+     * @return  A hex encoded string containing the Elliptic curve signature generated by signing the order with `eth_signTypedData`
+     *          and the Signature Type.
+     */
+    async ecSignTypedDataOrderAsync(provider: Provider, order: Order, signerAddress: string): Promise<string> {
         assert.isWeb3Provider('provider', provider);
         assert.isETHAddressHex('signerAddress', signerAddress);
         const web3Wrapper = new Web3Wrapper(provider);
         await assert.isSenderAddressAsync('signerAddress', signerAddress, web3Wrapper);
         const normalizedSignerAddress = signerAddress.toLowerCase();
+        const normalizedOrder = _.mapValues(order, value => {
+            return _.isObject(value) ? value.toString() : value;
+        });
         const typedData = {
             types: {
                 EIP712Domain: EIP712_DOMAIN_SCHEMA.parameters,
@@ -217,15 +239,7 @@ export const signatureUtils = {
                 version: EIP712_DOMAIN_VERSION,
                 verifyingContract: order.exchangeAddress,
             },
-            message: {
-                ...order,
-                salt: order.salt.toString(),
-                makerFee: order.makerFee.toString(),
-                takerFee: order.takerFee.toString(),
-                makerAssetAmount: order.makerAssetAmount.toString(),
-                takerAssetAmount: order.takerAssetAmount.toString(),
-                expirationTimeSeconds: order.expirationTimeSeconds.toString(),
-            },
+            message: normalizedOrder,
             primaryType: 'Order',
         };
         const signature = await web3Wrapper.signTypedDataAsync(normalizedSignerAddress, typedData);
@@ -240,36 +254,23 @@ export const signatureUtils = {
         return signatureHex;
     },
     /**
-     * Signs an orderHash and returns it's elliptic curve signature and signature type.
+     * Signs a hash and returns its elliptic curve signature and signature type.
      * This method currently supports TestRPC, Geth and Parity above and below V1.6.6
-     * @param   orderHash       Hex encoded orderHash to sign.
+     * @param   msgHash       Hex encoded message to sign.
      * @param   signerAddress   The hex encoded Ethereum address you wish to sign it with. This address
      *          must be available via the Provider supplied to 0x.js.
-     * @param   signerType Different signers add/require different prefixes to be prepended to the message being signed.
-     *          Since we cannot know ahead of time which signer you are using, you must supply a SignerType.
-     * @return  A hex encoded string containing the Elliptic curve signature generated by signing the orderHash and the Signature Type.
+     * @return  A hex encoded string containing the Elliptic curve signature generated by signing the msgHash and the Signature Type.
      */
-    async ecSignOrderHashAsync(
-        provider: Provider,
-        orderHash: string,
-        signerAddress: string,
-        signerType: SignerType,
-    ): Promise<string> {
+    async ecSignHashAsync(provider: Provider, msgHash: string, signerAddress: string): Promise<string> {
         assert.isWeb3Provider('provider', provider);
-        assert.isHexString('orderHash', orderHash);
+        assert.isHexString('msgHash', msgHash);
         assert.isETHAddressHex('signerAddress', signerAddress);
         const web3Wrapper = new Web3Wrapper(provider);
         await assert.isSenderAddressAsync('signerAddress', signerAddress, web3Wrapper);
         const normalizedSignerAddress = signerAddress.toLowerCase();
 
-        let msgHashHex = orderHash;
-        const prefixedMsgHashHex = signatureUtils.addSignedMessagePrefix(orderHash, signerType);
-        // Metamask incorrectly implements eth_sign and does not prefix the message as per the spec
-        // Source: https://github.com/MetaMask/metamask-extension/commit/a9d36860bec424dcee8db043d3e7da6a5ff5672e
-        if (signerType === SignerType.Metamask) {
-            msgHashHex = prefixedMsgHashHex;
-        }
-        const signature = await web3Wrapper.signMessageAsync(normalizedSignerAddress, msgHashHex);
+        const signature = await web3Wrapper.signMessageAsync(normalizedSignerAddress, msgHash);
+        const prefixedMsgHashHex = signatureUtils.addSignedMessagePrefix(msgHash);
 
         // HACK: There is no consensus on whether the signatureHex string should be formatted as
         // v + r + s OR r + s + v, and different clients (even different versions of the same client)
@@ -286,10 +287,7 @@ export const signatureUtils = {
                 normalizedSignerAddress,
             );
             if (isValidRSVSignature) {
-                const convertedSignatureHex = signatureUtils.convertECSignatureToSignatureHex(
-                    ecSignatureRSV,
-                    signerType,
-                );
+                const convertedSignatureHex = signatureUtils.convertECSignatureToSignatureHex(ecSignatureRSV);
                 return convertedSignatureHex;
             }
         }
@@ -301,10 +299,7 @@ export const signatureUtils = {
                 normalizedSignerAddress,
             );
             if (isValidVRSSignature) {
-                const convertedSignatureHex = signatureUtils.convertECSignatureToSignatureHex(
-                    ecSignatureVRS,
-                    signerType,
-                );
+                const convertedSignatureHex = signatureUtils.convertECSignatureToSignatureHex(ecSignatureVRS);
                 return convertedSignatureHex;
             }
         }
@@ -312,30 +307,18 @@ export const signatureUtils = {
         throw new Error(OrderError.InvalidSignature);
     },
     /**
-     * Combines ECSignature with V,R,S and the relevant signature type for use in 0x protocol
+     * Combines ECSignature with V,R,S and the EthSign signature type for use in 0x protocol
      * @param ecSignature The ECSignature of the signed data
-     * @param signerType The SignerType of the signed data
      * @return Hex encoded string of signature (v,r,s) with Signature Type
      */
-    convertECSignatureToSignatureHex(ecSignature: ECSignature, signerType: SignerType): string {
+    convertECSignatureToSignatureHex(ecSignature: ECSignature): string {
         const signatureBuffer = Buffer.concat([
             ethUtil.toBuffer(ecSignature.v),
             ethUtil.toBuffer(ecSignature.r),
             ethUtil.toBuffer(ecSignature.s),
         ]);
         const signatureHex = `0x${signatureBuffer.toString('hex')}`;
-        let signatureType;
-        switch (signerType) {
-            case SignerType.Metamask:
-            case SignerType.Ledger:
-            case SignerType.Default: {
-                signatureType = SignatureType.EthSign;
-                break;
-            }
-            default:
-                throw new Error(`Unrecognized SignerType: ${signerType}`);
-        }
-        const signatureWithType = signatureUtils.convertToSignatureWithType(signatureHex, signatureType);
+        const signatureWithType = signatureUtils.convertToSignatureWithType(signatureHex, SignatureType.EthSign);
         return signatureWithType;
     },
     /**
@@ -352,28 +335,17 @@ export const signatureUtils = {
     /**
      * Adds the relevant prefix to the message being signed.
      * @param message Message to sign
-     * @param signerType The type of message prefix to add for a given SignerType. Different signers expect
-     *                          specific message prefixes.
      * @return Prefixed message
      */
-    addSignedMessagePrefix(message: string, signerType: SignerType = SignerType.Default): string {
+    addSignedMessagePrefix(message: string): string {
         assert.isString('message', message);
-        assert.doesBelongToStringEnum('signerType', signerType, SignerType);
-        switch (signerType) {
-            case SignerType.Metamask:
-            case SignerType.Ledger:
-            case SignerType.Default: {
-                const msgBuff = ethUtil.toBuffer(message);
-                const prefixedMsgBuff = ethUtil.hashPersonalMessage(msgBuff);
-                const prefixedMsgHex = ethUtil.bufferToHex(prefixedMsgBuff);
-                return prefixedMsgHex;
-            }
-            default:
-                throw new Error(`Unrecognized SignerType: ${signerType}`);
-        }
+        const msgBuff = ethUtil.toBuffer(message);
+        const prefixedMsgBuff = ethUtil.hashPersonalMessage(msgBuff);
+        const prefixedMsgHex = ethUtil.bufferToHex(prefixedMsgBuff);
+        return prefixedMsgHex;
     },
     /**
-     * Parse a 0x protocol hex-encoded signature string into it's ECSignature components
+     * Parse a 0x protocol hex-encoded signature string into its ECSignature components
      * @param signature A hex encoded ecSignature 0x Protocol signature
      * @return An ECSignature object with r,s,v parameters
      */
diff --git a/packages/order-utils/test/signature_utils_test.ts b/packages/order-utils/test/signature_utils_test.ts
index 40ce16165..03354cd65 100644
--- a/packages/order-utils/test/signature_utils_test.ts
+++ b/packages/order-utils/test/signature_utils_test.ts
@@ -1,4 +1,4 @@
-import { Order, SignatureType, SignerType } from '@0xproject/types';
+import { Order, SignatureType } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import * as chai from 'chai';
 import { JSONRPCErrorCallback, JSONRPCRequestPayload } from 'ethereum-types';
@@ -153,10 +153,17 @@ describe('Signature utils', () => {
             ]);
             const signatureHex = `0x${signatureBuffer.toString('hex')}`;
             const eip712Signature = await signatureUtils.ecSignOrderAsync(provider, order, makerAddress);
+            const isValidSignature = await signatureUtils.isValidSignatureAsync(
+                provider,
+                orderHashHex,
+                eip712Signature,
+                makerAddress,
+            );
             expect(signatureHex).to.eq(eip712Signature);
+            expect(isValidSignature).to.eq(true);
         });
     });
-    describe('#ecSignOrderHashAsync', () => {
+    describe('#ecSignHashAsync', () => {
         let makerAddress: string;
         before(async () => {
             const availableAddreses = await web3Wrapper.getAvailableAddressesAsync();
@@ -166,12 +173,7 @@ describe('Signature utils', () => {
             const orderHash = '0x6927e990021d23b1eb7b8789f6a6feaf98fe104bb0cf8259421b79f9a34222b0';
             const expectedSignature =
                 '0x1b61a3ed31b43c8780e905a260a35faefcc527be7516aa11c0256729b5b351bc3340349190569279751135161d22529dc25add4f6069af05be04cacbda2ace225403';
-            const ecSignature = await signatureUtils.ecSignOrderHashAsync(
-                provider,
-                orderHash,
-                makerAddress,
-                SignerType.Default,
-            );
+            const ecSignature = await signatureUtils.ecSignHashAsync(provider, orderHash, makerAddress);
             expect(ecSignature).to.equal(expectedSignature);
         });
         it('should return the correct Signature for signatureHex concatenated as R + S + V', async () => {
@@ -197,12 +199,7 @@ describe('Signature utils', () => {
                     }
                 },
             };
-            const ecSignature = await signatureUtils.ecSignOrderHashAsync(
-                fakeProvider,
-                orderHash,
-                makerAddress,
-                SignerType.Default,
-            );
+            const ecSignature = await signatureUtils.ecSignHashAsync(fakeProvider, orderHash, makerAddress);
             expect(ecSignature).to.equal(expectedSignature);
         });
         it('should return the correct Signature for signatureHex concatenated as V + R + S', async () => {
@@ -225,56 +222,12 @@ describe('Signature utils', () => {
                 },
             };
 
-            const ecSignature = await signatureUtils.ecSignOrderHashAsync(
-                fakeProvider,
-                orderHash,
-                makerAddress,
-                SignerType.Default,
-            );
-            expect(ecSignature).to.equal(expectedSignature);
-        });
-        // Note this is due to a bug in Metamask where it does not prefix before signing, this is a known issue and is to be fixed in the future
-        // Source: https://github.com/MetaMask/metamask-extension/commit/a9d36860bec424dcee8db043d3e7da6a5ff5672e
-        it('should receive a payload modified with a prefix when Metamask is SignerType', async () => {
-            const orderHash = '0x34decbedc118904df65f379a175bb39ca18209d6ce41d5ed549d54e6e0a95004';
-            const orderHashPrefixed = '0xae70f31d26096291aa681b26cb7574563956221d0b4213631e1ef9df675d4cba';
-            const expectedSignature =
-                '0x1b117902c86dfb95fe0d1badd983ee166ad259b27acb220174cbb4460d872871137feabdfe76e05924b484789f79af4ee7fa29ec006cedce1bbf369320d034e10b03';
-            // Generated from a MM eth_sign request from 0x5409ed021d9299bf6814279a6a1411a7e866a631 signing 0xae70f31d26096291aa681b26cb7574563956221d0b4213631e1ef9df675d4cba
-            const metamaskSignature =
-                '0x117902c86dfb95fe0d1badd983ee166ad259b27acb220174cbb4460d872871137feabdfe76e05924b484789f79af4ee7fa29ec006cedce1bbf369320d034e10b1b';
-            const fakeProvider = {
-                async sendAsync(payload: JSONRPCRequestPayload, callback: JSONRPCErrorCallback): Promise<void> {
-                    if (payload.method === 'eth_sign') {
-                        const [, message] = payload.params;
-                        expect(message).to.equal(orderHashPrefixed);
-                        callback(null, {
-                            id: 42,
-                            jsonrpc: '2.0',
-                            result: metamaskSignature,
-                        });
-                    } else {
-                        callback(null, { id: 42, jsonrpc: '2.0', result: [makerAddress] });
-                    }
-                },
-            };
-
-            const ecSignature = await signatureUtils.ecSignOrderHashAsync(
-                fakeProvider,
-                orderHash,
-                makerAddress,
-                SignerType.Metamask,
-            );
+            const ecSignature = await signatureUtils.ecSignHashAsync(fakeProvider, orderHash, makerAddress);
             expect(ecSignature).to.equal(expectedSignature);
         });
         it('should return a valid signature', async () => {
             const orderHash = '0x34decbedc118904df65f379a175bb39ca18209d6ce41d5ed549d54e6e0a95004';
-            const ecSignature = await signatureUtils.ecSignOrderHashAsync(
-                provider,
-                orderHash,
-                makerAddress,
-                SignerType.Default,
-            );
+            const ecSignature = await signatureUtils.ecSignHashAsync(provider, orderHash, makerAddress);
 
             const isValidSignature = await signatureUtils.isValidSignatureAsync(
                 provider,
@@ -291,38 +244,11 @@ describe('Signature utils', () => {
             r: '0xaca7da997ad177f040240cdccf6905b71ab16b74434388c3a72f34fd25d64393',
             s: '0x46b2bac274ff29b48b3ea6e2d04c1336eaceafda3c53ab483fc3ff12fac3ebf2',
         };
-        it('should concatenate v,r,s and append the EthSign signature type when SignerType is Default', async () => {
+        it('should concatenate v,r,s and append the EthSign signature type', async () => {
             const expectedSignatureWithSignatureType =
                 '0x1baca7da997ad177f040240cdccf6905b71ab16b74434388c3a72f34fd25d6439346b2bac274ff29b48b3ea6e2d04c1336eaceafda3c53ab483fc3ff12fac3ebf203';
-            const signatureWithSignatureType = signatureUtils.convertECSignatureToSignatureHex(
-                ecSignature,
-                SignerType.Default,
-            );
+            const signatureWithSignatureType = signatureUtils.convertECSignatureToSignatureHex(ecSignature);
             expect(signatureWithSignatureType).to.equal(expectedSignatureWithSignatureType);
         });
-        it('should concatenate v,r,s and append the EthSign signature type when SignerType is Ledger', async () => {
-            const expectedSignatureWithSignatureType =
-                '0x1baca7da997ad177f040240cdccf6905b71ab16b74434388c3a72f34fd25d6439346b2bac274ff29b48b3ea6e2d04c1336eaceafda3c53ab483fc3ff12fac3ebf203';
-            const signatureWithSignatureType = signatureUtils.convertECSignatureToSignatureHex(
-                ecSignature,
-                SignerType.Ledger,
-            );
-            expect(signatureWithSignatureType).to.equal(expectedSignatureWithSignatureType);
-        });
-        it('should concatenate v,r,s and append the EthSign signature type when SignerType is Metamask', async () => {
-            const expectedSignatureWithSignatureType =
-                '0x1baca7da997ad177f040240cdccf6905b71ab16b74434388c3a72f34fd25d6439346b2bac274ff29b48b3ea6e2d04c1336eaceafda3c53ab483fc3ff12fac3ebf203';
-            const signatureWithSignatureType = signatureUtils.convertECSignatureToSignatureHex(
-                ecSignature,
-                SignerType.Metamask,
-            );
-            expect(signatureWithSignatureType).to.equal(expectedSignatureWithSignatureType);
-        });
-        it('should throw if the SignerType is invalid', async () => {
-            const expectedMessage = 'Unrecognized SignerType: INVALID_SIGNER';
-            expect(() =>
-                signatureUtils.convertECSignatureToSignatureHex(ecSignature, 'INVALID_SIGNER' as SignerType),
-            ).to.throw(expectedMessage);
-        });
     });
 });
diff --git a/packages/subproviders/CHANGELOG.json b/packages/subproviders/CHANGELOG.json
index 97f886f64..30887c6fe 100644
--- a/packages/subproviders/CHANGELOG.json
+++ b/packages/subproviders/CHANGELOG.json
@@ -1,4 +1,12 @@
 [
+    {
+        "version": "2.1.0",
+        "changes": [
+            {
+                "note": "Add Metamask Subprovider to handle inconsistent JSON RPC behaviour"
+            }
+        ]
+    },
     {
         "version": "2.0.7",
         "changes": [
diff --git a/packages/subproviders/src/index.ts b/packages/subproviders/src/index.ts
index b5f9b3f90..8b5446007 100644
--- a/packages/subproviders/src/index.ts
+++ b/packages/subproviders/src/index.ts
@@ -27,6 +27,7 @@ export { Subprovider } from './subproviders/subprovider';
 export { NonceTrackerSubprovider } from './subproviders/nonce_tracker';
 export { PrivateKeyWalletSubprovider } from './subproviders/private_key_wallet';
 export { MnemonicWalletSubprovider } from './subproviders/mnemonic_wallet';
+export { MetamaskSubprovider } from './subproviders/metamask_subprovider';
 export { EthLightwalletSubprovider } from './subproviders/eth_lightwallet_subprovider';
 
 export {
diff --git a/packages/subproviders/src/subproviders/metamask_subprovider.ts b/packages/subproviders/src/subproviders/metamask_subprovider.ts
new file mode 100644
index 000000000..724edd574
--- /dev/null
+++ b/packages/subproviders/src/subproviders/metamask_subprovider.ts
@@ -0,0 +1,124 @@
+import { marshaller, Web3Wrapper } from '@0xproject/web3-wrapper';
+import { JSONRPCRequestPayload, Provider } from 'ethereum-types';
+import * as ethUtil from 'ethereumjs-util';
+
+import { Callback, ErrorCallback } from '../types';
+
+import { Subprovider } from './subprovider';
+
+/**
+ * This class implements the [web3-provider-engine](https://github.com/MetaMask/provider-engine)
+ * subprovider interface and the provider sendAsync interface.
+ * It handles inconsistencies with Metamask implementations of various JSON RPC methods.
+ * It forwards JSON RPC requests involving the domain of a signer (getAccounts,
+ * sendTransaction, signMessage etc...) to the provider instance supplied at instantiation. All other requests
+ * are passed onwards for subsequent subproviders to handle.
+ */
+export class MetamaskSubprovider extends Subprovider {
+    private readonly _web3Wrapper: Web3Wrapper;
+    private readonly _provider: Provider;
+    /**
+     * Instantiates a new SignerSubprovider
+     * @param provider Web3 provider that should handle  all user account related requests
+     */
+    constructor(provider: Provider) {
+        super();
+        this._web3Wrapper = new Web3Wrapper(provider);
+        this._provider = provider;
+    }
+    /**
+     * This method conforms to the web3-provider-engine interface.
+     * It is called internally by the ProviderEngine when it is this subproviders
+     * turn to handle a JSON RPC request.
+     * @param payload JSON RPC payload
+     * @param next Callback to call if this subprovider decides not to handle the request
+     * @param end Callback to call if subprovider handled the request and wants to pass back the request.
+     */
+    // tslint:disable-next-line:prefer-function-over-method async-suffix
+    public async handleRequest(payload: JSONRPCRequestPayload, next: Callback, end: ErrorCallback): Promise<void> {
+        let message;
+        let address;
+        switch (payload.method) {
+            case 'web3_clientVersion':
+                try {
+                    const nodeVersion = await this._web3Wrapper.getNodeVersionAsync();
+                    end(null, nodeVersion);
+                } catch (err) {
+                    end(err);
+                }
+                return;
+            case 'eth_accounts':
+                try {
+                    const accounts = await this._web3Wrapper.getAvailableAddressesAsync();
+                    end(null, accounts);
+                } catch (err) {
+                    end(err);
+                }
+                return;
+            case 'eth_sendTransaction':
+                const [txParams] = payload.params;
+                try {
+                    const txData = marshaller.unmarshalTxData(txParams);
+                    const txHash = await this._web3Wrapper.sendTransactionAsync(txData);
+                    end(null, txHash);
+                } catch (err) {
+                    end(err);
+                }
+                return;
+            case 'eth_sign':
+                [address, message] = payload.params;
+                try {
+                    // Metamask incorrectly implements eth_sign and does not prefix the message as per the spec
+                    // Source: https://github.com/MetaMask/metamask-extension/commit/a9d36860bec424dcee8db043d3e7da6a5ff5672e
+                    const msgBuff = ethUtil.toBuffer(message);
+                    const prefixedMsgBuff = ethUtil.hashPersonalMessage(msgBuff);
+                    const prefixedMsgHex = ethUtil.bufferToHex(prefixedMsgBuff);
+                    const signature = await this._web3Wrapper.signMessageAsync(address, prefixedMsgHex);
+                    signature ? end(null, signature) : end(new Error('Error performing eth_sign'), null);
+                } catch (err) {
+                    end(err);
+                }
+                return;
+            case 'eth_signTypedData':
+            case 'eth_signTypedData_v3':
+                [address, message] = payload.params;
+                try {
+                    // Metamask has namespaced signTypedData to v3 for an indeterminate period of time.
+                    // and expects message to be serialised as JSON
+                    const messageJSON = JSON.stringify(message);
+                    const signature = await this._web3Wrapper.sendRawPayloadAsync<string>({
+                        method: 'eth_signTypedData_v3',
+                        params: [address, messageJSON],
+                    });
+                    signature ? end(null, signature) : end(new Error('Error performing eth_signTypedData'), null);
+                } catch (err) {
+                    end(err);
+                }
+                return;
+            default:
+                next();
+                return;
+        }
+    }
+    /**
+     * This method conforms to the provider sendAsync interface.
+     * Allowing the MetamaskSubprovider to be used as a generic provider (outside of Web3ProviderEngine) with the
+     * addition of wrapping the inconsistent Metamask behaviour
+     * @param payload JSON RPC payload
+     * @return The contents nested under the result key of the response body
+     */
+    public sendAsync(payload: JSONRPCRequestPayload, callback: ErrorCallback): void {
+        void this.handleRequest(
+            payload,
+            // handleRequest has decided to not handle this, so fall through to the provider
+            () => {
+                const sendAsync = this._provider.sendAsync.bind(this._provider);
+                sendAsync(payload, callback);
+            },
+            // handleRequest has called end and will handle this
+            (err, data) => {
+                err ? callback(err) : callback(null, { ...payload, result: data });
+            },
+        );
+    }
+}
diff --git a/packages/subproviders/src/subproviders/private_key_wallet.ts b/packages/subproviders/src/subproviders/private_key_wallet.ts
index 9d6fc487e..dbd51e8d7 100644
--- a/packages/subproviders/src/subproviders/private_key_wallet.ts
+++ b/packages/subproviders/src/subproviders/private_key_wallet.ts
@@ -23,7 +23,7 @@ export class PrivateKeyWalletSubprovider extends BaseWalletSubprovider {
     constructor(privateKey: string) {
         assert.isString('privateKey', privateKey);
         super();
-        this._privateKeyBuffer = new Buffer(privateKey, 'hex');
+        this._privateKeyBuffer = Buffer.from(privateKey, 'hex');
         this._address = `0x${ethUtil.privateToAddress(this._privateKeyBuffer).toString('hex')}`;
     }
     /**
diff --git a/packages/subproviders/src/subproviders/signer.ts b/packages/subproviders/src/subproviders/signer.ts
index d5fd86897..6b519865f 100644
--- a/packages/subproviders/src/subproviders/signer.ts
+++ b/packages/subproviders/src/subproviders/signer.ts
@@ -31,6 +31,8 @@ export class SignerSubprovider extends Subprovider {
      */
     // tslint:disable-next-line:prefer-function-over-method async-suffix
     public async handleRequest(payload: JSONRPCRequestPayload, next: Callback, end: ErrorCallback): Promise<void> {
+        let message;
+        let address;
         switch (payload.method) {
             case 'web3_clientVersion':
                 try {
@@ -59,7 +61,7 @@ export class SignerSubprovider extends Subprovider {
                 }
                 return;
             case 'eth_sign':
-                const [address, message] = payload.params;
+                [address, message] = payload.params;
                 try {
                     const signature = await this._web3Wrapper.signMessageAsync(address, message);
                     end(null, signature);
@@ -67,6 +69,15 @@ export class SignerSubprovider extends Subprovider {
                     end(err);
                 }
                 return;
+            case 'eth_signTypedData':
+                [address, message] = payload.params;
+                try {
+                    const signature = await this._web3Wrapper.signTypedDataAsync(address, message);
+                    end(null, signature);
+                } catch (err) {
+                    end(err);
+                }
+                return;
             default:
                 next();
                 return;
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 3ae0536d5..2f148f0e6 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -143,16 +143,6 @@ export enum SignatureType {
     NSignatureTypes,
 }
 
-/**
- * The type of the Signer implementation. Some signer implementations use different message prefixes or implement different
- * eth_sign behaviour (e.g Metamask). Default assumes a spec compliant `eth_sign`.
- */
-export enum SignerType {
-    Default = 'DEFAULT',
-    Ledger = 'LEDGER',
-    Metamask = 'METAMASK',
-}
-
 export enum AssetProxyId {
     ERC20 = '0xf47261b0',
     ERC721 = '0x02571792',
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index c420bbf3a..652f2eb1d 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -9,14 +9,14 @@ import {
     ExchangeFillEventArgs,
     IndexedFilterValues,
 } from '@0xproject/contract-wrappers';
-import { assetDataUtils, orderHashUtils, signatureUtils, SignerType } from '@0xproject/order-utils';
+import { assetDataUtils, orderHashUtils, signatureUtils } from '@0xproject/order-utils';
 import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import {
     ledgerEthereumBrowserClientFactoryAsync,
     LedgerSubprovider,
+    MetamaskSubprovider,
     RedundantSubprovider,
     RPCSubprovider,
-    SignerSubprovider,
     Web3ProviderEngine,
 } from '@0xproject/subproviders';
 import { SignedOrder, Token as ZeroExToken } from '@0xproject/types';
@@ -161,7 +161,7 @@ export class Blockchain {
             // 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();
-            provider.addProvider(new SignerSubprovider(injectedWeb3.currentProvider));
+            provider.addProvider(new MetamaskSubprovider(injectedWeb3.currentProvider));
             provider.addProvider(new FilterSubprovider());
             const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => {
                 return new RPCSubprovider(publicNodeUrl);
@@ -432,21 +432,7 @@ export class Blockchain {
         }
         this._showFlashMessageIfLedger();
         const provider = this._contractWrappers.getProvider();
-        const isLedgerSigner = !_.isUndefined(this._ledgerSubprovider);
-        const injectedProvider = Blockchain._getInjectedWeb3().currentProvider;
-        const isMetaMaskSigner = utils.getProviderType(injectedProvider) === Providers.Metamask;
-        let signerType = SignerType.Default;
-        if (isLedgerSigner) {
-            signerType = SignerType.Ledger;
-        } else if (isMetaMaskSigner) {
-            signerType = SignerType.Metamask;
-        }
-        const ecSignatureString = await signatureUtils.ecSignOrderHashAsync(
-            provider,
-            orderHash,
-            makerAddress,
-            signerType,
-        );
+        const ecSignatureString = await signatureUtils.ecSignHashAsync(provider, orderHash, makerAddress);
         this._dispatcher.updateSignature(ecSignatureString);
         return ecSignatureString;
     }
-- 
cgit v1.2.3


From 2a82ff48c061eacb3b6f9fb36eeae7f515b6d11d Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Thu, 4 Oct 2018 17:12:35 +1000
Subject: Move SignTypedData to utils package

---
 packages/order-utils/src/constants.ts             |  12 +++
 packages/order-utils/src/eip712_utils.ts          | 109 ----------------------
 packages/order-utils/src/index.ts                 |   4 -
 packages/order-utils/src/order_hash.ts            |  52 +++++++----
 packages/order-utils/src/signature_utils.ts       |   2 +-
 packages/order-utils/src/types.ts                 |  18 ----
 packages/utils/src/index.ts                       |   1 +
 packages/utils/src/sign_typed_data_utils.ts       |  81 ++++++++++++++++
 packages/utils/test/sign_typed_data_utils_test.ts | 107 +++++++++++++++++++++
 9 files changed, 234 insertions(+), 152 deletions(-)
 delete mode 100644 packages/order-utils/src/eip712_utils.ts
 create mode 100644 packages/utils/src/sign_typed_data_utils.ts
 create mode 100644 packages/utils/test/sign_typed_data_utils_test.ts

(limited to 'packages')

diff --git a/packages/order-utils/src/constants.ts b/packages/order-utils/src/constants.ts
index c23578c20..cc03755c3 100644
--- a/packages/order-utils/src/constants.ts
+++ b/packages/order-utils/src/constants.ts
@@ -14,3 +14,15 @@ export const constants = {
     INFINITE_TIMESTAMP_SEC: new BigNumber(2524604400), // Close to infinite
     ZERO_AMOUNT: new BigNumber(0),
 };
+
+export const EIP712_DOMAIN_NAME = '0x Protocol';
+export const EIP712_DOMAIN_VERSION = '2';
+
+export const EIP712_DOMAIN_SCHEMA = {
+    name: 'EIP712Domain',
+    parameters: [
+        { name: 'name', type: 'string' },
+        { name: 'version', type: 'string ' },
+        { name: 'verifyingContract', type: 'address' },
+    ],
+};
diff --git a/packages/order-utils/src/eip712_utils.ts b/packages/order-utils/src/eip712_utils.ts
deleted file mode 100644
index 01f1e930e..000000000
--- a/packages/order-utils/src/eip712_utils.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import ethUtil = require('ethereumjs-util');
-import * as _ from 'lodash';
-
-import { crypto } from './crypto';
-import { EIP712Schema, EIP712Types } from './types';
-
-const EIP191_PREFIX = '\x19\x01';
-const EIP712_VALUE_LENGTH = 32;
-export const EIP712_DOMAIN_NAME = '0x Protocol';
-export const EIP712_DOMAIN_VERSION = '2';
-
-export const EIP712_DOMAIN_SCHEMA: EIP712Schema = {
-    name: 'EIP712Domain',
-    parameters: [
-        { name: 'name', type: EIP712Types.String },
-        { name: 'version', type: EIP712Types.String },
-        { name: 'verifyingContract', type: EIP712Types.Address },
-    ],
-};
-
-export const eip712Utils = {
-    /**
-     * Compiles the EIP712Schema and returns the hash of the schema.
-     * @param   schema The EIP712 schema.
-     * @return  The hash of the compiled schema
-     */
-    compileSchema(schema: EIP712Schema): Buffer {
-        const eip712Schema = eip712Utils._encodeType(schema);
-        const eip712SchemaHashBuffer = crypto.solSHA3([eip712Schema]);
-        return eip712SchemaHashBuffer;
-    },
-    /**
-     * Merges the EIP712 hash of a struct with the DomainSeparator for 0x v2.
-     * @param   hashStruct the EIP712 hash of a struct
-     * @param   contractAddress the exchange contract address
-     * @return  The hash of an EIP712 message with domain separator prefixed
-     */
-    createEIP712Message(hashStruct: Buffer, contractAddress: string): Buffer {
-        const domainSeparatorHashBuffer = eip712Utils._getDomainSeparatorHashBuffer(contractAddress);
-        const messageBuff = crypto.solSHA3([EIP191_PREFIX, domainSeparatorHashBuffer, hashStruct]);
-        return messageBuff;
-    },
-    /**
-     * Pad an address to 32 bytes
-     * @param address Address to pad
-     * @return padded address
-     */
-    pad32Address(address: string): Buffer {
-        const addressBuffer = ethUtil.toBuffer(address);
-        const addressPadded = eip712Utils.pad32Buffer(addressBuffer);
-        return addressPadded;
-    },
-    /**
-     * Pad an buffer to 32 bytes
-     * @param buffer Address to pad
-     * @return padded buffer
-     */
-    pad32Buffer(buffer: Buffer): Buffer {
-        const bufferPadded = ethUtil.setLengthLeft(buffer, EIP712_VALUE_LENGTH);
-        return bufferPadded;
-    },
-    /**
-     * Hash together a EIP712 schema with the corresponding data
-     * @param schema EIP712-compliant schema
-     * @param data Data the complies to the schema
-     * @return A buffer containing the SHA256 hash of the schema and encoded data
-     */
-    structHash(schema: EIP712Schema, data: { [key: string]: any }): Buffer {
-        const encodedData = eip712Utils._encodeData(schema, data);
-        const schemaHash = eip712Utils.compileSchema(schema);
-        const hashBuffer = crypto.solSHA3([schemaHash, ...encodedData]);
-        return hashBuffer;
-    },
-    _getDomainSeparatorSchemaBuffer(): Buffer {
-        return eip712Utils.compileSchema(EIP712_DOMAIN_SCHEMA);
-    },
-    _getDomainSeparatorHashBuffer(exchangeAddress: string): Buffer {
-        const domainSeparatorSchemaBuffer = eip712Utils._getDomainSeparatorSchemaBuffer();
-        const encodedData = eip712Utils._encodeData(EIP712_DOMAIN_SCHEMA, {
-            name: EIP712_DOMAIN_NAME,
-            version: EIP712_DOMAIN_VERSION,
-            verifyingContract: exchangeAddress,
-        });
-        const domainSeparatorHashBuff2 = crypto.solSHA3([domainSeparatorSchemaBuffer, ...encodedData]);
-        return domainSeparatorHashBuff2;
-    },
-    _encodeType(schema: EIP712Schema): string {
-        const namedTypes = _.map(schema.parameters, ({ name, type }) => `${type} ${name}`);
-        const namedTypesJoined = namedTypes.join(',');
-        const encodedType = `${schema.name}(${namedTypesJoined})`;
-        return encodedType;
-    },
-    _encodeData(schema: EIP712Schema, data: { [key: string]: any }): any {
-        const encodedValues = [];
-        for (const parameter of schema.parameters) {
-            const value = data[parameter.name];
-            if (parameter.type === EIP712Types.String || parameter.type === EIP712Types.Bytes) {
-                encodedValues.push(crypto.solSHA3([ethUtil.toBuffer(value)]));
-            } else if (parameter.type === EIP712Types.Uint256) {
-                encodedValues.push(value);
-            } else if (parameter.type === EIP712Types.Address) {
-                encodedValues.push(eip712Utils.pad32Address(value));
-            } else {
-                throw new Error(`Unable to encode ${parameter.type}`);
-            }
-        }
-        return encodedValues;
-    },
-};
diff --git a/packages/order-utils/src/index.ts b/packages/order-utils/src/index.ts
index e7a23682c..7194b9780 100644
--- a/packages/order-utils/src/index.ts
+++ b/packages/order-utils/src/index.ts
@@ -2,7 +2,6 @@ export { orderHashUtils } from './order_hash';
 export { signatureUtils } from './signature_utils';
 export { generatePseudoRandomSalt } from './salt';
 export { assetDataUtils } from './asset_data_utils';
-export { eip712Utils } from './eip712_utils';
 export { marketUtils } from './market_utils';
 export { rateUtils } from './rate_utils';
 export { sortingUtils } from './sorting_utils';
@@ -36,9 +35,6 @@ export {
 } from '@0xproject/types';
 export {
     OrderError,
-    EIP712Parameter,
-    EIP712Schema,
-    EIP712Types,
     TradeSide,
     TransferType,
     FindFeeOrdersThatCoverFeesForTargetOrdersOpts,
diff --git a/packages/order-utils/src/order_hash.ts b/packages/order-utils/src/order_hash.ts
index 151c1f801..37b9da811 100644
--- a/packages/order-utils/src/order_hash.ts
+++ b/packages/order-utils/src/order_hash.ts
@@ -1,28 +1,28 @@
 import { schemas, SchemaValidator } from '@0xproject/json-schemas';
 import { Order, SignedOrder } from '@0xproject/types';
+import { signTypedDataUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 
 import { assert } from './assert';
-import { eip712Utils } from './eip712_utils';
-import { EIP712Schema, EIP712Types } from './types';
+import { EIP712_DOMAIN_NAME, EIP712_DOMAIN_SCHEMA, EIP712_DOMAIN_VERSION } from './constants';
 
 const INVALID_TAKER_FORMAT = 'instance.takerAddress is not of a type(s) string';
 
-export const EIP712_ORDER_SCHEMA: EIP712Schema = {
+export const EIP712_ORDER_SCHEMA = {
     name: 'Order',
     parameters: [
-        { name: 'makerAddress', type: EIP712Types.Address },
-        { name: 'takerAddress', type: EIP712Types.Address },
-        { name: 'feeRecipientAddress', type: EIP712Types.Address },
-        { name: 'senderAddress', type: EIP712Types.Address },
-        { name: 'makerAssetAmount', type: EIP712Types.Uint256 },
-        { name: 'takerAssetAmount', type: EIP712Types.Uint256 },
-        { name: 'makerFee', type: EIP712Types.Uint256 },
-        { name: 'takerFee', type: EIP712Types.Uint256 },
-        { name: 'expirationTimeSeconds', type: EIP712Types.Uint256 },
-        { name: 'salt', type: EIP712Types.Uint256 },
-        { name: 'makerAssetData', type: EIP712Types.Bytes },
-        { name: 'takerAssetData', type: EIP712Types.Bytes },
+        { 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' },
     ],
 };
 
@@ -69,11 +69,23 @@ export const orderHashUtils = {
      * @return  The resulting orderHash from hashing the supplied order as a Buffer
      */
     getOrderHashBuffer(order: SignedOrder | Order): Buffer {
-        const orderParamsHashBuff = eip712Utils.structHash(EIP712_ORDER_SCHEMA, order);
-        const orderHashBuff = eip712Utils.createEIP712Message(orderParamsHashBuff, order.exchangeAddress);
+        const normalizedOrder = _.mapValues(order, value => {
+            return _.isObject(value) ? value.toString() : value;
+        });
+        const typedData = {
+            types: {
+                EIP712Domain: EIP712_DOMAIN_SCHEMA.parameters,
+                Order: EIP712_ORDER_SCHEMA.parameters,
+            },
+            domain: {
+                name: EIP712_DOMAIN_NAME,
+                version: EIP712_DOMAIN_VERSION,
+                verifyingContract: order.exchangeAddress,
+            },
+            message: normalizedOrder,
+            primaryType: EIP712_ORDER_SCHEMA.name,
+        };
+        const orderHashBuff = signTypedDataUtils.signTypedDataHash(typedData);
         return orderHashBuff;
     },
-    _getOrderSchemaBuffer(): Buffer {
-        return eip712Utils.compileSchema(EIP712_ORDER_SCHEMA);
-    },
 };
diff --git a/packages/order-utils/src/signature_utils.ts b/packages/order-utils/src/signature_utils.ts
index 8e0fd702b..2d7fcfc9e 100644
--- a/packages/order-utils/src/signature_utils.ts
+++ b/packages/order-utils/src/signature_utils.ts
@@ -7,7 +7,7 @@ import * as _ from 'lodash';
 
 import { artifacts } from './artifacts';
 import { assert } from './assert';
-import { EIP712_DOMAIN_NAME, EIP712_DOMAIN_SCHEMA, EIP712_DOMAIN_VERSION } from './eip712_utils';
+import { EIP712_DOMAIN_NAME, EIP712_DOMAIN_SCHEMA, EIP712_DOMAIN_VERSION } from './constants';
 import { ExchangeContract } from './generated_contract_wrappers/exchange';
 import { IValidatorContract } from './generated_contract_wrappers/i_validator';
 import { IWalletContract } from './generated_contract_wrappers/i_wallet';
diff --git a/packages/order-utils/src/types.ts b/packages/order-utils/src/types.ts
index a843efaa4..80075270e 100644
--- a/packages/order-utils/src/types.ts
+++ b/packages/order-utils/src/types.ts
@@ -14,24 +14,6 @@ export enum TransferType {
     Fee = 'fee',
 }
 
-export interface EIP712Parameter {
-    name: string;
-    type: EIP712Types;
-}
-
-export interface EIP712Schema {
-    name: string;
-    parameters: EIP712Parameter[];
-}
-
-export enum EIP712Types {
-    Address = 'address',
-    Bytes = 'bytes',
-    Bytes32 = 'bytes32',
-    String = 'string',
-    Uint256 = 'uint256',
-}
-
 export interface CreateOrderOpts {
     takerAddress?: string;
     senderAddress?: string;
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 9d01e5bc5..0723e5788 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -9,3 +9,4 @@ export { abiUtils } from './abi_utils';
 export { NULL_BYTES } from './constants';
 export { errorUtils } from './error_utils';
 export { fetchAsync } from './fetch_async';
+export { signTypedDataUtils } from './sign_typed_data_utils';
diff --git a/packages/utils/src/sign_typed_data_utils.ts b/packages/utils/src/sign_typed_data_utils.ts
new file mode 100644
index 000000000..902d8530c
--- /dev/null
+++ b/packages/utils/src/sign_typed_data_utils.ts
@@ -0,0 +1,81 @@
+import * as ethUtil from 'ethereumjs-util';
+import * as ethers from 'ethers';
+
+export interface EIP712Parameter {
+    name: string;
+    type: string;
+}
+
+export interface EIP712Types {
+    [key: string]: EIP712Parameter[];
+}
+export interface EIP712TypedData {
+    types: EIP712Types;
+    domain: any;
+    message: any;
+    primaryType: string;
+}
+
+export const signTypedDataUtils = {
+    findDependencies(primaryType: string, types: EIP712Types, found: string[] = []): string[] {
+        if (found.includes(primaryType) || types[primaryType] === undefined) {
+            return found;
+        }
+        found.push(primaryType);
+        for (const field of types[primaryType]) {
+            for (const dep of signTypedDataUtils.findDependencies(field.type, types, found)) {
+                if (!found.includes(dep)) {
+                    found.push(dep);
+                }
+            }
+        }
+        return found;
+    },
+    encodeType(primaryType: string, types: EIP712Types): string {
+        let deps = signTypedDataUtils.findDependencies(primaryType, types);
+        deps = deps.filter(d => d !== primaryType);
+        deps = [primaryType].concat(deps.sort());
+        let result = '';
+        for (const dep of deps) {
+            result += `${dep}(${types[dep].map(({ name, type }) => `${type} ${name}`).join(',')})`;
+        }
+        return result;
+    },
+    encodeData(primaryType: string, data: any, types: EIP712Types): string {
+        const encodedTypes = ['bytes32'];
+        const encodedValues = [signTypedDataUtils.typeHash(primaryType, types)];
+        for (const field of types[primaryType]) {
+            let value = data[field.name];
+            if (field.type === 'string' || field.type === 'bytes') {
+                value = ethUtil.sha3(value);
+                encodedTypes.push('bytes32');
+                encodedValues.push(value);
+            } else if (types[field.type] !== undefined) {
+                encodedTypes.push('bytes32');
+                value = ethUtil.sha3(signTypedDataUtils.encodeData(field.type, value, types));
+                encodedValues.push(value);
+            } else if (field.type.lastIndexOf(']') === field.type.length - 1) {
+                throw new Error('Arrays currently unimplemented in encodeData');
+            } else {
+                encodedTypes.push(field.type);
+                encodedValues.push(value);
+            }
+        }
+        return ethers.utils.defaultAbiCoder.encode(encodedTypes, encodedValues);
+    },
+    typeHash(primaryType: string, types: EIP712Types): Buffer {
+        return ethUtil.sha3(signTypedDataUtils.encodeType(primaryType, types));
+    },
+    structHash(primaryType: string, data: any, types: EIP712Types): Buffer {
+        return ethUtil.sha3(signTypedDataUtils.encodeData(primaryType, data, types));
+    },
+    signTypedDataHash(typedData: EIP712TypedData): Buffer {
+        return ethUtil.sha3(
+            Buffer.concat([
+                Buffer.from('1901', 'hex'),
+                signTypedDataUtils.structHash('EIP712Domain', typedData.domain, typedData.types),
+                signTypedDataUtils.structHash(typedData.primaryType, typedData.message, typedData.types),
+            ]),
+        );
+    },
+};
diff --git a/packages/utils/test/sign_typed_data_utils_test.ts b/packages/utils/test/sign_typed_data_utils_test.ts
new file mode 100644
index 000000000..b21ffefa0
--- /dev/null
+++ b/packages/utils/test/sign_typed_data_utils_test.ts
@@ -0,0 +1,107 @@
+import * as chai from 'chai';
+import 'mocha';
+
+import { signTypedDataUtils } from '../src/sign_typed_data_utils';
+
+const expect = chai.expect;
+
+describe('signTypedDataUtils', () => {
+    describe('signTypedDataHash', () => {
+        const signTypedDataHashHex = '0x55eaa6ec02f3224d30873577e9ddd069a288c16d6fb407210eecbc501fa76692';
+        const signTypedData = {
+            types: {
+                EIP712Domain: [
+                    {
+                        name: 'name',
+                        type: 'string',
+                    },
+                    {
+                        name: 'version',
+                        type: 'string',
+                    },
+                    {
+                        name: 'verifyingContract',
+                        type: 'address',
+                    },
+                ],
+                Order: [
+                    {
+                        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',
+                    },
+                ],
+            },
+            domain: {
+                name: '0x Protocol',
+                version: '2',
+                verifyingContract: '0x0000000000000000000000000000000000000000',
+            },
+            message: {
+                makerAddress: '0x0000000000000000000000000000000000000000',
+                takerAddress: '0x0000000000000000000000000000000000000000',
+                makerAssetAmount: '1000000000000000000',
+                takerAssetAmount: '1000000000000000000',
+                expirationTimeSeconds: '12345',
+                makerFee: '0',
+                takerFee: '0',
+                feeRecipientAddress: '0x0000000000000000000000000000000000000000',
+                senderAddress: '0x0000000000000000000000000000000000000000',
+                salt: '12345',
+                makerAssetData: '0x0000000000000000000000000000000000000000',
+                takerAssetData: '0x0000000000000000000000000000000000000000',
+                exchangeAddress: '0x0000000000000000000000000000000000000000',
+            },
+            primaryType: 'Order',
+        };
+        it.only('creates a known hash of the sign typed data', () => {
+            const hash = signTypedDataUtils.signTypedDataHash(signTypedData).toString('hex');
+            const hashHex = `0x${hash}`;
+            expect(hashHex).to.be.eq(signTypedDataHashHex);
+            console.log(hash);
+        });
+    });
+});
-- 
cgit v1.2.3


From 3e2fe40a11919f09f1f454c71f02aaa147b46b0c Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Thu, 4 Oct 2018 17:32:54 +1000
Subject: Add eth_signTypedData support to our wallet subproviders

---
 .../src/utils/transaction_encoder.ts               | 35 ++++++++-----
 packages/contracts/test/exchange/libs.ts           | 18 +------
 .../contracts/test/utils/transaction_factory.ts    | 40 ++++++++++-----
 packages/order-utils/CHANGELOG.json                | 17 ++++++
 packages/order-utils/src/constants.ts              |  2 +-
 packages/order-utils/src/index.ts                  |  2 +
 packages/subproviders/CHANGELOG.json               |  7 ++-
 .../src/subproviders/base_wallet_subprovider.ts    | 14 ++++-
 .../subproviders/eth_lightwallet_subprovider.ts    | 18 ++++++-
 packages/subproviders/src/subproviders/ledger.ts   | 10 ++++
 .../src/subproviders/mnemonic_wallet.ts            | 19 +++++++
 .../src/subproviders/private_key_wallet.ts         | 26 ++++++++++
 packages/subproviders/src/types.ts                 |  2 +
 .../test/unit/mnemonic_wallet_subprovider_test.ts  | 21 ++++++++
 .../unit/private_key_wallet_subprovider_test.ts    | 21 ++++++++
 packages/subproviders/test/utils/fixture_data.ts   | 31 +++++++++++
 packages/types/CHANGELOG.json                      |  9 ++++
 packages/types/src/index.ts                        | 15 ++++++
 packages/utils/src/sign_typed_data_utils.ts        | 60 ++++++++++------------
 packages/utils/test/sign_typed_data_utils_test.ts  | 45 +++++++++++++---
 20 files changed, 326 insertions(+), 86 deletions(-)

(limited to 'packages')

diff --git a/packages/contract-wrappers/src/utils/transaction_encoder.ts b/packages/contract-wrappers/src/utils/transaction_encoder.ts
index 87cbb43fd..1800f49ad 100644
--- a/packages/contract-wrappers/src/utils/transaction_encoder.ts
+++ b/packages/contract-wrappers/src/utils/transaction_encoder.ts
@@ -1,19 +1,19 @@
 import { schemas } from '@0xproject/json-schemas';
-import { EIP712Schema, EIP712Types, eip712Utils } from '@0xproject/order-utils';
+import { EIP712_DOMAIN_NAME, EIP712_DOMAIN_SCHEMA, EIP712_DOMAIN_VERSION } from '@0xproject/order-utils';
 import { Order, SignedOrder } from '@0xproject/types';
-import { BigNumber } from '@0xproject/utils';
+import { BigNumber, signTypedDataUtils } from '@0xproject/utils';
 import _ = require('lodash');
 
 import { ExchangeContract } from '../contract_wrappers/generated/exchange';
 
 import { assert } from './assert';
 
-const EIP712_ZEROEX_TRANSACTION_SCHEMA: EIP712Schema = {
+const EIP712_ZEROEX_TRANSACTION_SCHEMA = {
     name: 'ZeroExTransaction',
     parameters: [
-        { name: 'salt', type: EIP712Types.Uint256 },
-        { name: 'signerAddress', type: EIP712Types.Address },
-        { name: 'data', type: EIP712Types.Bytes },
+        { name: 'salt', type: 'uint256' },
+        { name: 'signerAddress', type: 'address' },
+        { name: 'data', type: 'bytes' },
     ],
 };
 
@@ -37,16 +37,25 @@ export class TransactionEncoder {
     public getTransactionHex(data: string, salt: BigNumber, signerAddress: string): string {
         const exchangeAddress = this._getExchangeContract().address;
         const executeTransactionData = {
-            salt,
+            salt: salt.toString(),
             signerAddress,
             data,
         };
-        const executeTransactionHashBuff = eip712Utils.structHash(
-            EIP712_ZEROEX_TRANSACTION_SCHEMA,
-            executeTransactionData,
-        );
-        const eip721MessageBuffer = eip712Utils.createEIP712Message(executeTransactionHashBuff, exchangeAddress);
-        const messageHex = `0x${eip721MessageBuffer.toString('hex')}`;
+        const typedData = {
+            types: {
+                EIP712Domain: EIP712_DOMAIN_SCHEMA.parameters,
+                ZeroExTransaction: EIP712_ZEROEX_TRANSACTION_SCHEMA.parameters,
+            },
+            domain: {
+                name: EIP712_DOMAIN_NAME,
+                version: EIP712_DOMAIN_VERSION,
+                verifyingContract: exchangeAddress,
+            },
+            message: executeTransactionData,
+            primaryType: EIP712_ZEROEX_TRANSACTION_SCHEMA.name,
+        };
+        const eip712MessageBuffer = signTypedDataUtils.signTypedDataHash(typedData);
+        const messageHex = `0x${eip712MessageBuffer.toString('hex')}`;
         return messageHex;
     }
     /**
diff --git a/packages/contracts/test/exchange/libs.ts b/packages/contracts/test/exchange/libs.ts
index 37234489e..049b7f37a 100644
--- a/packages/contracts/test/exchange/libs.ts
+++ b/packages/contracts/test/exchange/libs.ts
@@ -1,5 +1,5 @@
 import { BlockchainLifecycle } from '@0xproject/dev-utils';
-import { assetDataUtils, eip712Utils, orderHashUtils } from '@0xproject/order-utils';
+import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils';
 import { SignedOrder } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import * as chai from 'chai';
@@ -126,22 +126,6 @@ describe('Exchange libs', () => {
     });
 
     describe('LibOrder', () => {
-        describe('getOrderSchema', () => {
-            it('should output the correct order schema hash', async () => {
-                const orderSchema = await libs.getOrderSchemaHash.callAsync();
-                const schemaHashBuffer = orderHashUtils._getOrderSchemaBuffer();
-                const schemaHashHex = `0x${schemaHashBuffer.toString('hex')}`;
-                expect(schemaHashHex).to.be.equal(orderSchema);
-            });
-        });
-        describe('getDomainSeparatorSchema', () => {
-            it('should output the correct domain separator schema hash', async () => {
-                const domainSeparatorSchema = await libs.getDomainSeparatorSchemaHash.callAsync();
-                const domainSchemaBuffer = eip712Utils._getDomainSeparatorSchemaBuffer();
-                const schemaHashHex = `0x${domainSchemaBuffer.toString('hex')}`;
-                expect(schemaHashHex).to.be.equal(domainSeparatorSchema);
-            });
-        });
         describe('getOrderHash', () => {
             it('should output the correct orderHash', async () => {
                 signedOrder = await orderFactory.newSignedOrderAsync();
diff --git a/packages/contracts/test/utils/transaction_factory.ts b/packages/contracts/test/utils/transaction_factory.ts
index 8465a6a30..47880cca5 100644
--- a/packages/contracts/test/utils/transaction_factory.ts
+++ b/packages/contracts/test/utils/transaction_factory.ts
@@ -1,16 +1,22 @@
-import { EIP712Schema, EIP712Types, eip712Utils, generatePseudoRandomSalt } from '@0xproject/order-utils';
+import {
+    EIP712_DOMAIN_NAME,
+    EIP712_DOMAIN_SCHEMA,
+    EIP712_DOMAIN_VERSION,
+    generatePseudoRandomSalt,
+} from '@0xproject/order-utils';
 import { SignatureType } from '@0xproject/types';
+import { signTypedDataUtils } from '@0xproject/utils';
 import * as ethUtil from 'ethereumjs-util';
 
 import { signingUtils } from './signing_utils';
 import { SignedTransaction } from './types';
 
-const EIP712_ZEROEX_TRANSACTION_SCHEMA: EIP712Schema = {
+const EIP712_ZEROEX_TRANSACTION_SCHEMA = {
     name: 'ZeroExTransaction',
     parameters: [
-        { name: 'salt', type: EIP712Types.Uint256 },
-        { name: 'signerAddress', type: EIP712Types.Address },
-        { name: 'data', type: EIP712Types.Bytes },
+        { name: 'salt', type: 'uint256' },
+        { name: 'signerAddress', type: 'address' },
+        { name: 'data', type: 'bytes' },
     ],
 };
 
@@ -27,20 +33,30 @@ export class TransactionFactory {
         const salt = generatePseudoRandomSalt();
         const signerAddress = `0x${this._signerBuff.toString('hex')}`;
         const executeTransactionData = {
-            salt,
+            salt: salt.toString(),
             signerAddress,
             data,
         };
-        const executeTransactionHashBuff = eip712Utils.structHash(
-            EIP712_ZEROEX_TRANSACTION_SCHEMA,
-            executeTransactionData,
-        );
-        const txHash = eip712Utils.createEIP712Message(executeTransactionHashBuff, this._exchangeAddress);
-        const signature = signingUtils.signMessage(txHash, this._privateKey, signatureType);
+        const typedData = {
+            types: {
+                EIP712Domain: EIP712_DOMAIN_SCHEMA.parameters,
+                ZeroExTransaction: EIP712_ZEROEX_TRANSACTION_SCHEMA.parameters,
+            },
+            domain: {
+                name: EIP712_DOMAIN_NAME,
+                version: EIP712_DOMAIN_VERSION,
+                verifyingContract: this._exchangeAddress,
+            },
+            message: executeTransactionData,
+            primaryType: EIP712_ZEROEX_TRANSACTION_SCHEMA.name,
+        };
+        const eip712MessageBuffer = signTypedDataUtils.signTypedDataHash(typedData);
+        const signature = signingUtils.signMessage(eip712MessageBuffer, this._privateKey, signatureType);
         const signedTx = {
             exchangeAddress: this._exchangeAddress,
             signature: `0x${signature.toString('hex')}`,
             ...executeTransactionData,
+            salt,
         };
         return signedTx;
     }
diff --git a/packages/order-utils/CHANGELOG.json b/packages/order-utils/CHANGELOG.json
index 3e841c43c..a9d2fde8b 100644
--- a/packages/order-utils/CHANGELOG.json
+++ b/packages/order-utils/CHANGELOG.json
@@ -1,4 +1,21 @@
 [
+    {
+        "version": "2.0.0",
+        "changes": [
+            {
+                "note": "Added ecSignOrderAsync to first sign an order as EIP712 and fallback to EthSign",
+                "pr": 1102
+            },
+            {
+                "note": "Added ecSignTypedDataOrderAsync to sign an order exclusively as EIP712",
+                "pr": 1102
+            },
+            {
+                "note": "Rename ecSignOrderHashAsync to ecSignHashAsync removing SignerType parameter",
+                "pr": 1102
+            }
+        ]
+    },
     {
         "version": "1.0.7",
         "changes": [
diff --git a/packages/order-utils/src/constants.ts b/packages/order-utils/src/constants.ts
index cc03755c3..5403606c3 100644
--- a/packages/order-utils/src/constants.ts
+++ b/packages/order-utils/src/constants.ts
@@ -22,7 +22,7 @@ export const EIP712_DOMAIN_SCHEMA = {
     name: 'EIP712Domain',
     parameters: [
         { name: 'name', type: 'string' },
-        { name: 'version', type: 'string ' },
+        { name: 'version', type: 'string' },
         { name: 'verifyingContract', type: 'address' },
     ],
 };
diff --git a/packages/order-utils/src/index.ts b/packages/order-utils/src/index.ts
index 7194b9780..89a843d8f 100644
--- a/packages/order-utils/src/index.ts
+++ b/packages/order-utils/src/index.ts
@@ -18,6 +18,8 @@ export { ExchangeTransferSimulator } from './exchange_transfer_simulator';
 export { BalanceAndProxyAllowanceLazyStore } from './store/balance_and_proxy_allowance_lazy_store';
 export { OrderFilledCancelledLazyStore } from './store/order_filled_cancelled_lazy_store';
 
+export { EIP712_DOMAIN_NAME, EIP712_DOMAIN_SCHEMA, EIP712_DOMAIN_VERSION } from './constants';
+
 export { Provider, JSONRPCRequestPayload, JSONRPCErrorCallback, JSONRPCResponsePayload } from 'ethereum-types';
 export {
     SignedOrder,
diff --git a/packages/subproviders/CHANGELOG.json b/packages/subproviders/CHANGELOG.json
index 30887c6fe..6a6f7848b 100644
--- a/packages/subproviders/CHANGELOG.json
+++ b/packages/subproviders/CHANGELOG.json
@@ -3,7 +3,12 @@
         "version": "2.1.0",
         "changes": [
             {
-                "note": "Add Metamask Subprovider to handle inconsistent JSON RPC behaviour"
+                "note": "Add Metamask Subprovider to handle inconsistent JSON RPC behaviour",
+                "pr": 1102
+            },
+            {
+                "note": "Add support for eth_signTypedData in Mnemonic, Private and EthLightWallet",
+                "pr": 1102
             }
         ]
     },
diff --git a/packages/subproviders/src/subproviders/base_wallet_subprovider.ts b/packages/subproviders/src/subproviders/base_wallet_subprovider.ts
index 4342e47e9..409a0d330 100644
--- a/packages/subproviders/src/subproviders/base_wallet_subprovider.ts
+++ b/packages/subproviders/src/subproviders/base_wallet_subprovider.ts
@@ -23,6 +23,7 @@ export abstract class BaseWalletSubprovider extends Subprovider {
     public abstract async getAccountsAsync(): Promise<string[]>;
     public abstract async signTransactionAsync(txParams: PartialTxParams): Promise<string>;
     public abstract async signPersonalMessageAsync(data: string, address: string): Promise<string>;
+    public abstract async signTypedDataAsync(address: string, typedData: any): Promise<string>;
 
     /**
      * This method conforms to the web3-provider-engine interface.
@@ -36,6 +37,8 @@ export abstract class BaseWalletSubprovider extends Subprovider {
     public async handleRequest(payload: JSONRPCRequestPayload, next: Callback, end: ErrorCallback): Promise<void> {
         let accounts;
         let txParams;
+        let address;
+        let typedData;
         switch (payload.method) {
             case 'eth_coinbase':
                 try {
@@ -86,7 +89,7 @@ export abstract class BaseWalletSubprovider extends Subprovider {
             case 'eth_sign':
             case 'personal_sign':
                 const data = payload.method === 'eth_sign' ? payload.params[1] : payload.params[0];
-                const address = payload.method === 'eth_sign' ? payload.params[0] : payload.params[1];
+                address = payload.method === 'eth_sign' ? payload.params[0] : payload.params[1];
                 try {
                     const ecSignatureHex = await this.signPersonalMessageAsync(data, address);
                     end(null, ecSignatureHex);
@@ -94,6 +97,15 @@ export abstract class BaseWalletSubprovider extends Subprovider {
                     end(err);
                 }
                 return;
+            case 'eth_signTypedData':
+                [address, typedData] = payload.params;
+                try {
+                    const signature = await this.signTypedDataAsync(address, typedData);
+                    end(null, signature);
+                } catch (err) {
+                    end(err);
+                }
+                return;
 
             default:
                 next();
diff --git a/packages/subproviders/src/subproviders/eth_lightwallet_subprovider.ts b/packages/subproviders/src/subproviders/eth_lightwallet_subprovider.ts
index 6afd71422..e3afeff1b 100644
--- a/packages/subproviders/src/subproviders/eth_lightwallet_subprovider.ts
+++ b/packages/subproviders/src/subproviders/eth_lightwallet_subprovider.ts
@@ -57,7 +57,7 @@ export class EthLightwalletSubprovider extends BaseWalletSubprovider {
     /**
      * Sign a personal Ethereum signed message. The signing account will be the account
      * associated with the provided address.
-     * If you've added the MnemonicWalletSubprovider to your app's provider, you can simply send an `eth_sign`
+     * If you've added the this Subprovider to your app's provider, you can simply send an `eth_sign`
      * or `personal_sign` JSON RPC request, and this method will be called auto-magically.
      * If you are not using this via a ProviderEngine instance, you can call it directly.
      * @param data Hex string message to sign
@@ -71,4 +71,20 @@ export class EthLightwalletSubprovider extends BaseWalletSubprovider {
         const result = privKeyWallet.signPersonalMessageAsync(data, address);
         return result;
     }
+    /**
+     * Sign an EIP712 Typed Data message. The signing address will associated with the provided address.
+     * If you've added this Subprovider to your app's provider, you can simply send an `eth_signTypedData`
+     * JSON RPC request, and this method will be called auto-magically.
+     * If you are not using this via a ProviderEngine instance, you can call it directly.
+     * @param address Address of the account to sign with
+     * @param data the typed data object
+     * @return Signature hex string (order: rsv)
+     */
+    public async signTypedDataAsync(address: string, typedData: any): Promise<string> {
+        let privKey = this._keystore.exportPrivateKey(address, this._pwDerivedKey);
+        const privKeyWallet = new PrivateKeyWalletSubprovider(privKey);
+        privKey = '';
+        const result = privKeyWallet.signTypedDataAsync(address, typedData);
+        return result;
+    }
 }
diff --git a/packages/subproviders/src/subproviders/ledger.ts b/packages/subproviders/src/subproviders/ledger.ts
index 6ad5de2e2..ee8edde92 100644
--- a/packages/subproviders/src/subproviders/ledger.ts
+++ b/packages/subproviders/src/subproviders/ledger.ts
@@ -187,6 +187,16 @@ export class LedgerSubprovider extends BaseWalletSubprovider {
             throw err;
         }
     }
+    /**
+     * eth_signTypedData is currently not supported on Ledger devices.
+     * @param address Address of the account to sign with
+     * @param data the typed data object
+     * @return Signature hex string (order: rsv)
+     */
+    // tslint:disable-next-line:prefer-function-over-method
+    public async signTypedDataAsync(address: string, typedData: any): Promise<string> {
+        throw new Error(WalletSubproviderErrors.MethodNotSupported);
+    }
     private async _createLedgerClientAsync(): Promise<LedgerEthereumClient> {
         await this._connectionLock.acquire();
         if (!_.isUndefined(this._ledgerClientIfExists)) {
diff --git a/packages/subproviders/src/subproviders/mnemonic_wallet.ts b/packages/subproviders/src/subproviders/mnemonic_wallet.ts
index 1495112b6..de99b632a 100644
--- a/packages/subproviders/src/subproviders/mnemonic_wallet.ts
+++ b/packages/subproviders/src/subproviders/mnemonic_wallet.ts
@@ -108,6 +108,25 @@ export class MnemonicWalletSubprovider extends BaseWalletSubprovider {
         const sig = await privateKeyWallet.signPersonalMessageAsync(data, address);
         return sig;
     }
+    /**
+     * Sign an EIP712 Typed Data message.  The signing account will be the account
+     * associated with the provided address.
+     * If you've added this MnemonicWalletSubprovider to your app's provider, you can simply send an `eth_signTypedData`
+     * JSON RPC request, and this method will be called auto-magically.
+     * If you are not using this via a ProviderEngine instance, you can call it directly.
+     * @param address Address of the account to sign with
+     * @param data the typed data object
+     * @return Signature hex string (order: rsv)
+     */
+    public async signTypedDataAsync(address: string, typedData: any): Promise<string> {
+        if (_.isUndefined(typedData)) {
+            throw new Error(WalletSubproviderErrors.DataMissingForSignPersonalMessage);
+        }
+        assert.isETHAddressHex('address', address);
+        const privateKeyWallet = this._privateKeyWalletForAddress(address);
+        const sig = await privateKeyWallet.signTypedDataAsync(address, typedData);
+        return sig;
+    }
     private _privateKeyWalletForAddress(address: string): PrivateKeyWalletSubprovider {
         const derivedKeyInfo = this._findDerivedKeyInfoForAddress(address);
         const privateKeyHex = derivedKeyInfo.hdKey.privateKey.toString('hex');
diff --git a/packages/subproviders/src/subproviders/private_key_wallet.ts b/packages/subproviders/src/subproviders/private_key_wallet.ts
index dbd51e8d7..51409077d 100644
--- a/packages/subproviders/src/subproviders/private_key_wallet.ts
+++ b/packages/subproviders/src/subproviders/private_key_wallet.ts
@@ -1,4 +1,5 @@
 import { assert } from '@0xproject/assert';
+import { signTypedDataUtils } from '@0xproject/utils';
 import EthereumTx = require('ethereumjs-tx');
 import * as ethUtil from 'ethereumjs-util';
 import * as _ from 'lodash';
@@ -84,4 +85,29 @@ export class PrivateKeyWalletSubprovider extends BaseWalletSubprovider {
         const rpcSig = ethUtil.toRpcSig(sig.v, sig.r, sig.s);
         return rpcSig;
     }
+    /**
+     * Sign an EIP712 Typed Data message. The signing address will be calculated from the private key.
+     * The address must be provided it must match the address calculated from the private key.
+     * If you've added this Subprovider to your app's provider, you can simply send an `eth_signTypedData`
+     * JSON RPC request, and this method will be called auto-magically.
+     * If you are not using this via a ProviderEngine instance, you can call it directly.
+     * @param address Address of the account to sign with
+     * @param data the typed data object
+     * @return Signature hex string (order: rsv)
+     */
+    public async signTypedDataAsync(address: string, typedData: any): Promise<string> {
+        if (_.isUndefined(typedData)) {
+            throw new Error(WalletSubproviderErrors.DataMissingForSignTypedData);
+        }
+        assert.isETHAddressHex('address', address);
+        if (address !== this._address) {
+            throw new Error(
+                `Requested to sign message with address: ${address}, instantiated with address: ${this._address}`,
+            );
+        }
+        const dataBuff = signTypedDataUtils.signTypedDataHash(typedData);
+        const sig = ethUtil.ecsign(dataBuff, this._privateKeyBuffer);
+        const rpcSig = ethUtil.toRpcSig(sig.v, sig.r, sig.s);
+        return rpcSig;
+    }
 }
diff --git a/packages/subproviders/src/types.ts b/packages/subproviders/src/types.ts
index fe58bffa5..e8a47ad34 100644
--- a/packages/subproviders/src/types.ts
+++ b/packages/subproviders/src/types.ts
@@ -107,8 +107,10 @@ export interface ResponseWithTxParams {
 export enum WalletSubproviderErrors {
     AddressNotFound = 'ADDRESS_NOT_FOUND',
     DataMissingForSignPersonalMessage = 'DATA_MISSING_FOR_SIGN_PERSONAL_MESSAGE',
+    DataMissingForSignTypedData = 'DATA_MISSING_FOR_SIGN_TYPED_DATA',
     SenderInvalidOrNotSupplied = 'SENDER_INVALID_OR_NOT_SUPPLIED',
     FromAddressMissingOrInvalid = 'FROM_ADDRESS_MISSING_OR_INVALID',
+    MethodNotSupported = 'METHOD_NOT_SUPPORTED',
 }
 export enum LedgerSubproviderErrors {
     TooOldLedgerFirmware = 'TOO_OLD_LEDGER_FIRMWARE',
diff --git a/packages/subproviders/test/unit/mnemonic_wallet_subprovider_test.ts b/packages/subproviders/test/unit/mnemonic_wallet_subprovider_test.ts
index f2bdda3cd..61dcbf6da 100644
--- a/packages/subproviders/test/unit/mnemonic_wallet_subprovider_test.ts
+++ b/packages/subproviders/test/unit/mnemonic_wallet_subprovider_test.ts
@@ -47,6 +47,13 @@ describe('MnemonicWalletSubprovider', () => {
                 const txHex = await subprovider.signTransactionAsync(txData);
                 expect(txHex).to.be.equal(fixtureData.TX_DATA_ACCOUNT_1_SIGNED_RESULT);
             });
+            it('signs an EIP712 sign typed data message', async () => {
+                const signature = await subprovider.signTypedDataAsync(
+                    fixtureData.TEST_RPC_ACCOUNT_0,
+                    fixtureData.EIP712_TEST_TYPED_DATA,
+                );
+                expect(signature).to.be.equal(fixtureData.EIP712_TEST_TYPED_DATA_SIGNED_RESULT);
+            });
         });
         describe('failure cases', () => {
             it('throws an error if address is invalid ', async () => {
@@ -118,6 +125,20 @@ describe('MnemonicWalletSubprovider', () => {
                 });
                 provider.sendAsync(payload, callback);
             });
+            it('signs an EIP712 sign typed data message with eth_signTypedData', (done: DoneCallback) => {
+                const payload = {
+                    jsonrpc: '2.0',
+                    method: 'eth_signTypedData',
+                    params: [fixtureData.TEST_RPC_ACCOUNT_0, fixtureData.EIP712_TEST_TYPED_DATA],
+                    id: 1,
+                };
+                const callback = reportCallbackErrors(done)((err: Error, response: JSONRPCResponsePayload) => {
+                    expect(err).to.be.a('null');
+                    expect(response.result).to.be.equal(fixtureData.EIP712_TEST_TYPED_DATA_SIGNED_RESULT);
+                    done();
+                });
+                provider.sendAsync(payload, callback);
+            });
         });
         describe('failure cases', () => {
             it('should throw if `data` param not hex when calling eth_sign', (done: DoneCallback) => {
diff --git a/packages/subproviders/test/unit/private_key_wallet_subprovider_test.ts b/packages/subproviders/test/unit/private_key_wallet_subprovider_test.ts
index 95773145f..4cd70e5ed 100644
--- a/packages/subproviders/test/unit/private_key_wallet_subprovider_test.ts
+++ b/packages/subproviders/test/unit/private_key_wallet_subprovider_test.ts
@@ -32,6 +32,13 @@ describe('PrivateKeyWalletSubprovider', () => {
                 const txHex = await subprovider.signTransactionAsync(fixtureData.TX_DATA);
                 expect(txHex).to.be.equal(fixtureData.TX_DATA_SIGNED_RESULT);
             });
+            it('signs an EIP712 sign typed data message', async () => {
+                const signature = await subprovider.signTypedDataAsync(
+                    fixtureData.TEST_RPC_ACCOUNT_0,
+                    fixtureData.EIP712_TEST_TYPED_DATA,
+                );
+                expect(signature).to.be.equal(fixtureData.EIP712_TEST_TYPED_DATA_SIGNED_RESULT);
+            });
         });
     });
     describe('calls through a provider', () => {
@@ -103,6 +110,20 @@ describe('PrivateKeyWalletSubprovider', () => {
                 });
                 provider.sendAsync(payload, callback);
             });
+            it('signs an EIP712 sign typed data message with eth_signTypedData', (done: DoneCallback) => {
+                const payload = {
+                    jsonrpc: '2.0',
+                    method: 'eth_signTypedData',
+                    params: [fixtureData.TEST_RPC_ACCOUNT_0, fixtureData.EIP712_TEST_TYPED_DATA],
+                    id: 1,
+                };
+                const callback = reportCallbackErrors(done)((err: Error, response: JSONRPCResponsePayload) => {
+                    expect(err).to.be.a('null');
+                    expect(response.result).to.be.equal(fixtureData.EIP712_TEST_TYPED_DATA_SIGNED_RESULT);
+                    done();
+                });
+                provider.sendAsync(payload, callback);
+            });
         });
         describe('failure cases', () => {
             it('should throw if `data` param not hex when calling eth_sign', (done: DoneCallback) => {
diff --git a/packages/subproviders/test/utils/fixture_data.ts b/packages/subproviders/test/utils/fixture_data.ts
index 7cf502c97..3eb4493b5 100644
--- a/packages/subproviders/test/utils/fixture_data.ts
+++ b/packages/subproviders/test/utils/fixture_data.ts
@@ -30,4 +30,35 @@ export const fixtureData = {
         '0xf85f8080822710940000000000000000000000000000000000000000808078a0712854c73c69445cc1b22a7c3d7312ff9a97fe4ffba35fd636e8236b211b6e7ca0647cee031615e52d916c7c707025bc64ad525d8f1b9876c3435a863b42743178',
     TX_DATA_ACCOUNT_1_SIGNED_RESULT:
         '0xf85f8080822710940000000000000000000000000000000000000000808078a04b02af7ff3f18ce114b601542cc8ebdc50921354f75dd510d31793453a0710e6a0540082a01e475465801b8186a2edc79ec1a2dcf169b9781c25a58a417023c9ca',
+    EIP712_TEST_TYPED_DATA: {
+        types: {
+            EIP712Domain: [
+                {
+                    name: 'name',
+                    type: 'string',
+                },
+            ],
+            Test: [
+                {
+                    name: 'testAddress',
+                    type: 'address',
+                },
+                {
+                    name: 'testNumber',
+                    type: 'uint256',
+                },
+            ],
+        },
+        domain: {
+            name: 'Test',
+        },
+        message: {
+            testAddress: '0x0000000000000000000000000000000000000000',
+            testNumber: '12345',
+        },
+        primaryType: 'Test',
+    },
+    EIP712_TEST_TYPED_DATA_HASH: '0xb460d69ca60383293877cd765c0f97bd832d66bca720f7e32222ce1118832493',
+    EIP712_TEST_TYPED_DATA_SIGNED_RESULT:
+        '0x20af5b6bfc3658942198d6eeda159b4ed589f90cee6eac3ba117818ffba5fd7e354a353aad93faabd6eb6c66e17921c92bd1cd09c92a770f554470dc3e254ce701',
 };
diff --git a/packages/types/CHANGELOG.json b/packages/types/CHANGELOG.json
index 6bb6ced70..65dd75101 100644
--- a/packages/types/CHANGELOG.json
+++ b/packages/types/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.2.0",
+        "changes": [
+            {
+                "note": "Added `EIP712Parameter` `EIP712Types` `EIP712TypedData` for EIP712 signing",
+                "pr": 1102
+            }
+        ]
+    },
     {
         "timestamp": 1538693146,
         "version": "1.1.4",
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 2f148f0e6..d57bdfb6f 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -589,3 +589,18 @@ export interface Metadata {
     externalTypeToLink: ExternalTypeToLink;
     externalExportToLink: ExternalExportToLink;
 }
+
+export interface EIP712Parameter {
+    name: string;
+    type: string;
+}
+
+export interface EIP712Types {
+    [key: string]: EIP712Parameter[];
+}
+export interface EIP712TypedData {
+    types: EIP712Types;
+    domain: any;
+    message: any;
+    primaryType: string;
+}
diff --git a/packages/utils/src/sign_typed_data_utils.ts b/packages/utils/src/sign_typed_data_utils.ts
index 902d8530c..b72fd099b 100644
--- a/packages/utils/src/sign_typed_data_utils.ts
+++ b/packages/utils/src/sign_typed_data_utils.ts
@@ -1,29 +1,30 @@
 import * as ethUtil from 'ethereumjs-util';
 import * as ethers from 'ethers';
 
-export interface EIP712Parameter {
-    name: string;
-    type: string;
-}
-
-export interface EIP712Types {
-    [key: string]: EIP712Parameter[];
-}
-export interface EIP712TypedData {
-    types: EIP712Types;
-    domain: any;
-    message: any;
-    primaryType: string;
-}
+import { EIP712TypedData, EIP712Types } from '@0xproject/types';
 
 export const signTypedDataUtils = {
-    findDependencies(primaryType: string, types: EIP712Types, found: string[] = []): string[] {
+    /**
+     * Computes the Sign Typed Data hash
+     * @param   typedData An object that conforms to the EIP712TypedData interface
+     * @return  A Buffer containing the hash of the sign typed data.
+     */
+    signTypedDataHash(typedData: EIP712TypedData): Buffer {
+        return ethUtil.sha3(
+            Buffer.concat([
+                Buffer.from('1901', 'hex'),
+                signTypedDataUtils._structHash('EIP712Domain', typedData.domain, typedData.types),
+                signTypedDataUtils._structHash(typedData.primaryType, typedData.message, typedData.types),
+            ]),
+        );
+    },
+    _findDependencies(primaryType: string, types: EIP712Types, found: string[] = []): string[] {
         if (found.includes(primaryType) || types[primaryType] === undefined) {
             return found;
         }
         found.push(primaryType);
         for (const field of types[primaryType]) {
-            for (const dep of signTypedDataUtils.findDependencies(field.type, types, found)) {
+            for (const dep of signTypedDataUtils._findDependencies(field.type, types, found)) {
                 if (!found.includes(dep)) {
                     found.push(dep);
                 }
@@ -31,8 +32,8 @@ export const signTypedDataUtils = {
         }
         return found;
     },
-    encodeType(primaryType: string, types: EIP712Types): string {
-        let deps = signTypedDataUtils.findDependencies(primaryType, types);
+    _encodeType(primaryType: string, types: EIP712Types): string {
+        let deps = signTypedDataUtils._findDependencies(primaryType, types);
         deps = deps.filter(d => d !== primaryType);
         deps = [primaryType].concat(deps.sort());
         let result = '';
@@ -41,9 +42,9 @@ export const signTypedDataUtils = {
         }
         return result;
     },
-    encodeData(primaryType: string, data: any, types: EIP712Types): string {
+    _encodeData(primaryType: string, data: any, types: EIP712Types): string {
         const encodedTypes = ['bytes32'];
-        const encodedValues = [signTypedDataUtils.typeHash(primaryType, types)];
+        const encodedValues = [signTypedDataUtils._typeHash(primaryType, types)];
         for (const field of types[primaryType]) {
             let value = data[field.name];
             if (field.type === 'string' || field.type === 'bytes') {
@@ -52,7 +53,7 @@ export const signTypedDataUtils = {
                 encodedValues.push(value);
             } else if (types[field.type] !== undefined) {
                 encodedTypes.push('bytes32');
-                value = ethUtil.sha3(signTypedDataUtils.encodeData(field.type, value, types));
+                value = ethUtil.sha3(signTypedDataUtils._encodeData(field.type, value, types));
                 encodedValues.push(value);
             } else if (field.type.lastIndexOf(']') === field.type.length - 1) {
                 throw new Error('Arrays currently unimplemented in encodeData');
@@ -63,19 +64,10 @@ export const signTypedDataUtils = {
         }
         return ethers.utils.defaultAbiCoder.encode(encodedTypes, encodedValues);
     },
-    typeHash(primaryType: string, types: EIP712Types): Buffer {
-        return ethUtil.sha3(signTypedDataUtils.encodeType(primaryType, types));
+    _typeHash(primaryType: string, types: EIP712Types): Buffer {
+        return ethUtil.sha3(signTypedDataUtils._encodeType(primaryType, types));
     },
-    structHash(primaryType: string, data: any, types: EIP712Types): Buffer {
-        return ethUtil.sha3(signTypedDataUtils.encodeData(primaryType, data, types));
-    },
-    signTypedDataHash(typedData: EIP712TypedData): Buffer {
-        return ethUtil.sha3(
-            Buffer.concat([
-                Buffer.from('1901', 'hex'),
-                signTypedDataUtils.structHash('EIP712Domain', typedData.domain, typedData.types),
-                signTypedDataUtils.structHash(typedData.primaryType, typedData.message, typedData.types),
-            ]),
-        );
+    _structHash(primaryType: string, data: any, types: EIP712Types): Buffer {
+        return ethUtil.sha3(signTypedDataUtils._encodeData(primaryType, data, types));
     },
 };
diff --git a/packages/utils/test/sign_typed_data_utils_test.ts b/packages/utils/test/sign_typed_data_utils_test.ts
index b21ffefa0..e1cb4f6e1 100644
--- a/packages/utils/test/sign_typed_data_utils_test.ts
+++ b/packages/utils/test/sign_typed_data_utils_test.ts
@@ -7,8 +7,37 @@ const expect = chai.expect;
 
 describe('signTypedDataUtils', () => {
     describe('signTypedDataHash', () => {
-        const signTypedDataHashHex = '0x55eaa6ec02f3224d30873577e9ddd069a288c16d6fb407210eecbc501fa76692';
-        const signTypedData = {
+        const simpleSignTypedDataHashHex = '0xb460d69ca60383293877cd765c0f97bd832d66bca720f7e32222ce1118832493';
+        const simpleSignTypedData = {
+            types: {
+                EIP712Domain: [
+                    {
+                        name: 'name',
+                        type: 'string',
+                    },
+                ],
+                Test: [
+                    {
+                        name: 'testAddress',
+                        type: 'address',
+                    },
+                    {
+                        name: 'testNumber',
+                        type: 'uint256',
+                    },
+                ],
+            },
+            domain: {
+                name: 'Test',
+            },
+            message: {
+                testAddress: '0x0000000000000000000000000000000000000000',
+                testNumber: '12345',
+            },
+            primaryType: 'Test',
+        };
+        const orderSignTypedDataHashHex = '0x55eaa6ec02f3224d30873577e9ddd069a288c16d6fb407210eecbc501fa76692';
+        const orderSignTypedData = {
             types: {
                 EIP712Domain: [
                     {
@@ -97,11 +126,15 @@ describe('signTypedDataUtils', () => {
             },
             primaryType: 'Order',
         };
-        it.only('creates a known hash of the sign typed data', () => {
-            const hash = signTypedDataUtils.signTypedDataHash(signTypedData).toString('hex');
+        it('creates a hash of the test sign typed data', () => {
+            const hash = signTypedDataUtils.signTypedDataHash(simpleSignTypedData).toString('hex');
+            const hashHex = `0x${hash}`;
+            expect(hashHex).to.be.eq(simpleSignTypedDataHashHex);
+        });
+        it('creates a hash of the order sign typed data', () => {
+            const hash = signTypedDataUtils.signTypedDataHash(orderSignTypedData).toString('hex');
             const hashHex = `0x${hash}`;
-            expect(hashHex).to.be.eq(signTypedDataHashHex);
-            console.log(hash);
+            expect(hashHex).to.be.eq(orderSignTypedDataHashHex);
         });
     });
 });
-- 
cgit v1.2.3


From 6e462b7dba61611a5347c9aa181d4ae69294d7af Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Thu, 4 Oct 2018 19:23:39 +1000
Subject: Update 0x.js Changelog

---
 packages/0x.js/CHANGELOG.json | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

(limited to 'packages')

diff --git a/packages/0x.js/CHANGELOG.json b/packages/0x.js/CHANGELOG.json
index 1d6f08760..c25acd3bf 100644
--- a/packages/0x.js/CHANGELOG.json
+++ b/packages/0x.js/CHANGELOG.json
@@ -1,4 +1,22 @@
 [
+    {
+        "version": "2.0.0",
+        "changes": [
+            {
+                "note": "Add support for `eth_signTypedData`.",
+                "pr": 1102
+            },
+            {
+                "note": "Added `MetamaskSubprovider` to handle inconsistencies with signing.",
+                "pr": 1102
+            },
+            {
+                "note":
+                    "Removed `SignerType` (including `SignerType.Metamask`). Please use the `MetamaskSubprovider` to wrap web3.currentProvider.",
+                "pr": 1102
+            }
+        ]
+    },
     {
         "version": "1.0.8",
         "changes": [
-- 
cgit v1.2.3


From 1eb8d17ce36274093583069aab0025768a4a91ce Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 19:24:10 -0700
Subject: Create SelectedAssetInputAmount

---
 packages/instant/package.json                      |  1 +
 packages/instant/src/components/amount_input.tsx   | 37 ++++++++++++++--------
 .../instant/src/components/instant_heading.tsx     |  4 +--
 .../src/containers/selected_asset_amount_input.tsx | 36 +++++++++++++++++++++
 packages/instant/src/redux/reducer.ts              |  8 +++++
 packages/instant/src/types.ts                      |  1 +
 6 files changed, 72 insertions(+), 15 deletions(-)
 create mode 100644 packages/instant/src/containers/selected_asset_amount_input.tsx

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 557a7f00f..949854197 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -45,6 +45,7 @@
     "dependencies": {
         "@0xproject/types": "^1.1.1",
         "@0xproject/typescript-typings": "^2.0.2",
+        "@0xproject/utils": "^2.0.2",
         "@0xproject/web3-wrapper": "^3.0.1",
         "ethereum-types": "^1.0.8",
         "lodash": "^4.17.10",
diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index 699541bfb..8fead78ca 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -1,4 +1,5 @@
 import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
@@ -12,16 +13,26 @@ export interface AmountInputProps {
     onChange?: (value: BigNumber) => void;
 }
 
-export const AmountInput: React.StatelessComponent<AmountInputProps> = props => (
-    <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
-        <Input
-            fontColor={props.fontColor}
-            fontSize={props.fontSize}
-            value={props.value ? props.value.toString() : undefined}
-            placeholder="0.00"
-            width="2em"
-        />
-    </Container>
-);
-
-AmountInput.defaultProps = {};
+export class AmountInput extends React.Component<AmountInputProps> {
+    public render(): React.ReactNode {
+        const { fontColor, fontSize, value } = this.props;
+        return (
+            <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
+                <Input
+                    fontColor={fontColor}
+                    fontSize={fontSize}
+                    onChange={this._handleChange}
+                    value={value ? value.toString() : undefined}
+                    placeholder="0.00"
+                    width="2em"
+                />
+            </Container>
+        );
+    }
+    private _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        const bigNumberValue = new BigNumber(event.target.value);
+        if (!_.isUndefined(this.props.onChange)) {
+            this.props.onChange(bigNumberValue);
+        }
+    };
+}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 3da280652..2b07ef666 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -1,9 +1,9 @@
 import { BigNumber } from '@0xproject/utils';
 import * as React from 'react';
 
+import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
 import { ColorOption } from '../style/theme';
 
-import { AmountInput } from './amount_input';
 import { Container, Flex, Text } from './ui';
 
 export interface InstantHeadingProps {}
@@ -24,7 +24,7 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
         </Container>
         <Flex direction="row" justify="space-between">
             <Container>
-                <AmountInput fontSize="45px" />
+                <SelectedAssetAmountInput fontSize="45px" />
                 <Container display="inline-block" marginLeft="10px">
                     <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
                         rep
diff --git a/packages/instant/src/containers/selected_asset_amount_input.tsx b/packages/instant/src/containers/selected_asset_amount_input.tsx
new file mode 100644
index 000000000..f5e1e134a
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_amount_input.tsx
@@ -0,0 +1,36 @@
+import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { State } from '../redux/reducer';
+import { ColorOption } from '../style/theme';
+import { Action, ActionTypes } from '../types';
+
+import { AmountInput, AmountInputProps } from '../components/amount_input';
+
+export interface SelectedAssetAmountInputProps {
+    fontColor?: ColorOption;
+    fontSize?: string;
+}
+
+interface ConnectedState {
+    value?: BigNumber;
+}
+
+interface ConnectedDispatch {
+    onChange?: (value: BigNumber) => void;
+}
+
+const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps): ConnectedState => ({
+    value: state.selectedAssetAmount,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<Action>): ConnectedDispatch => ({
+    onChange: value => dispatch({ type: ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, data: value }),
+});
+
+export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect(mapStateToProps)(
+    AmountInput,
+);
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index e4578d620..5026895ae 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -1,13 +1,16 @@
+import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 
 import { Action, ActionTypes } from '../types';
 
 export interface State {
     ethUsdPrice?: string;
+    selectedAssetAmount?: BigNumber;
 }
 
 export const INITIAL_STATE: State = {
     ethUsdPrice: undefined,
+    selectedAssetAmount: undefined,
 };
 
 export const reducer = (state: State = INITIAL_STATE, action: Action): State => {
@@ -17,6 +20,11 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 ethUsdPrice: action.data,
             };
+        case ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT:
+            return {
+                ...state,
+                selectedAssetAmount: action.data,
+            };
         default:
             return state;
     }
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 3ba5a9b94..d150bd8ab 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -1,5 +1,6 @@
 export enum ActionTypes {
     UPDATE_ETH_USD_PRICE,
+    UPDATE_SELECTED_ASSET_AMOUNT,
 }
 
 export interface Action {
-- 
cgit v1.2.3


From d7b6d8222f459942f82338fee752d03fe2d1547a Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 19:32:33 -0700
Subject: Apply linter

---
 packages/instant/package.json                                  |  1 +
 packages/instant/src/components/amount_input.tsx               |  6 +++---
 packages/instant/src/components/instant_heading.tsx            |  1 -
 packages/instant/src/components/ui/input.tsx                   |  2 --
 packages/instant/src/components/zero_ex_instant_container.tsx  |  2 +-
 .../instant/src/containers/selected_asset_amount_input.tsx     | 10 +++++-----
 6 files changed, 10 insertions(+), 12 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 949854197..8cac481db 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -43,6 +43,7 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
     "dependencies": {
+        "@0xproject/asset-buyer": "^2.0.0",
         "@0xproject/types": "^1.1.1",
         "@0xproject/typescript-typings": "^2.0.2",
         "@0xproject/utils": "^2.0.2",
diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index 8fead78ca..2b64469f6 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { Container, Flex, Input, Text } from './ui';
+import { Container, Input } from './ui';
 
 export interface AmountInputProps {
     fontColor?: ColorOption;
@@ -29,10 +29,10 @@ export class AmountInput extends React.Component<AmountInputProps> {
             </Container>
         );
     }
-    private _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
         const bigNumberValue = new BigNumber(event.target.value);
         if (!_.isUndefined(this.props.onChange)) {
             this.props.onChange(bigNumberValue);
         }
-    };
+    }
 }
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 2b07ef666..be0414b8d 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -1,4 +1,3 @@
-import { BigNumber } from '@0xproject/utils';
 import * as React from 'react';
 
 import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index fc4fed14e..f8c6b6ef6 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -2,8 +2,6 @@ import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
 
-import { Container, Flex, Text } from '../ui';
-
 export interface InputProps {
     className?: string;
     value?: string;
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 6075a5b21..716227b51 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 { ColorOption } from '../style/theme';
 import { BuyButton } from './buy_button';
 import { InstantHeading } from './instant_heading';
 import { OrderDetails } from './order_details';
-import { Container, Flex, Text } from './ui';
+import { Container, Flex } from './ui';
 
 export interface ZeroExInstantContainerProps {}
 
diff --git a/packages/instant/src/containers/selected_asset_amount_input.tsx b/packages/instant/src/containers/selected_asset_amount_input.tsx
index f5e1e134a..818caa965 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.tsx
+++ b/packages/instant/src/containers/selected_asset_amount_input.tsx
@@ -1,5 +1,4 @@
 import { BigNumber } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
@@ -8,7 +7,7 @@ import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
 import { Action, ActionTypes } from '../types';
 
-import { AmountInput, AmountInputProps } from '../components/amount_input';
+import { AmountInput } from '../components/amount_input';
 
 export interface SelectedAssetAmountInputProps {
     fontColor?: ColorOption;
@@ -31,6 +30,7 @@ const mapDispatchToProps = (dispatch: Dispatch<Action>): ConnectedDispatch => ({
     onChange: value => dispatch({ type: ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, data: value }),
 });
 
-export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect(mapStateToProps)(
-    AmountInput,
-);
+export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(AmountInput);
-- 
cgit v1.2.3


From 75d274f330dc0c18577e764ca77ffb36d5a3f27e Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Fri, 5 Oct 2018 11:45:53 +1000
Subject: Return SignedOrder from signing utils.

Create a helper back in EIP712Utils for code cleanup.
Moved constants in order-utils into the constants object
---
 packages/0x.js/CHANGELOG.json                      |  2 +-
 .../src/utils/transaction_encoder.ts               | 27 +-------
 .../contracts/test/utils/transaction_factory.ts    | 34 ++--------
 packages/json-schemas/schemas/eip712_typed_data.ts |  2 +-
 packages/order-utils/CHANGELOG.json                |  6 +-
 packages/order-utils/src/constants.ts              | 47 ++++++++++----
 packages/order-utils/src/eip712_utils.ts           | 75 ++++++++++++++++++++++
 packages/order-utils/src/index.ts                  |  9 ++-
 packages/order-utils/src/order_hash.ts             | 43 ++-----------
 packages/order-utils/src/signature_utils.ts        | 64 +++++++++---------
 packages/order-utils/test/eip712_utils_test.ts     | 44 +++++++++++++
 packages/order-utils/test/order_hash_test.ts       | 14 ++++
 packages/order-utils/test/signature_utils_test.ts  | 51 ++++++++++++++-
 packages/subproviders/CHANGELOG.json               |  4 +-
 packages/subproviders/src/index.ts                 |  9 ++-
 .../subproviders/eth_lightwallet_subprovider.ts    | 31 ++++-----
 .../src/subproviders/metamask_subprovider.ts       |  6 +-
 .../src/subproviders/mnemonic_wallet.ts            | 21 +++---
 .../src/subproviders/private_key_wallet.ts         |  3 +-
 packages/subproviders/src/subproviders/signer.ts   |  2 +-
 .../test/unit/eth_lightwallet_subprovider_test.ts  | 21 ++++++
 packages/types/CHANGELOG.json                      |  4 ++
 packages/types/src/index.ts                        | 20 +++++-
 packages/utils/src/sign_typed_data_utils.ts        | 29 ++++++---
 packages/web3-wrapper/src/web3_wrapper.ts          |  4 +-
 25 files changed, 380 insertions(+), 192 deletions(-)
 create mode 100644 packages/order-utils/src/eip712_utils.ts
 create mode 100644 packages/order-utils/test/eip712_utils_test.ts

(limited to 'packages')

diff --git a/packages/0x.js/CHANGELOG.json b/packages/0x.js/CHANGELOG.json
index c25acd3bf..3a184382c 100644
--- a/packages/0x.js/CHANGELOG.json
+++ b/packages/0x.js/CHANGELOG.json
@@ -12,7 +12,7 @@
             },
             {
                 "note":
-                    "Removed `SignerType` (including `SignerType.Metamask`). Please use the `MetamaskSubprovider` to wrap web3.currentProvider.",
+                    "Removed `SignerType` (including `SignerType.Metamask`). Please use the `MetamaskSubprovider` to wrap `web3.currentProvider`.",
                 "pr": 1102
             }
         ]
diff --git a/packages/contract-wrappers/src/utils/transaction_encoder.ts b/packages/contract-wrappers/src/utils/transaction_encoder.ts
index 1800f49ad..d9735778e 100644
--- a/packages/contract-wrappers/src/utils/transaction_encoder.ts
+++ b/packages/contract-wrappers/src/utils/transaction_encoder.ts
@@ -1,5 +1,5 @@
 import { schemas } from '@0xproject/json-schemas';
-import { EIP712_DOMAIN_NAME, EIP712_DOMAIN_SCHEMA, EIP712_DOMAIN_VERSION } from '@0xproject/order-utils';
+import { eip712Utils } from '@0xproject/order-utils';
 import { Order, SignedOrder } from '@0xproject/types';
 import { BigNumber, signTypedDataUtils } from '@0xproject/utils';
 import _ = require('lodash');
@@ -8,15 +8,6 @@ import { ExchangeContract } from '../contract_wrappers/generated/exchange';
 
 import { assert } from './assert';
 
-const EIP712_ZEROEX_TRANSACTION_SCHEMA = {
-    name: 'ZeroExTransaction',
-    parameters: [
-        { name: 'salt', type: 'uint256' },
-        { name: 'signerAddress', type: 'address' },
-        { name: 'data', type: 'bytes' },
-    ],
-};
-
 /**
  * Transaction Encoder. Transaction messages exist for the purpose of calling methods on the Exchange contract
  * in the context of another address. For example, UserA can encode and sign a fillOrder transaction and UserB
@@ -37,23 +28,11 @@ export class TransactionEncoder {
     public getTransactionHex(data: string, salt: BigNumber, signerAddress: string): string {
         const exchangeAddress = this._getExchangeContract().address;
         const executeTransactionData = {
-            salt: salt.toString(),
+            salt,
             signerAddress,
             data,
         };
-        const typedData = {
-            types: {
-                EIP712Domain: EIP712_DOMAIN_SCHEMA.parameters,
-                ZeroExTransaction: EIP712_ZEROEX_TRANSACTION_SCHEMA.parameters,
-            },
-            domain: {
-                name: EIP712_DOMAIN_NAME,
-                version: EIP712_DOMAIN_VERSION,
-                verifyingContract: exchangeAddress,
-            },
-            message: executeTransactionData,
-            primaryType: EIP712_ZEROEX_TRANSACTION_SCHEMA.name,
-        };
+        const typedData = eip712Utils.createZeroExTransactionTypedData(executeTransactionData, exchangeAddress);
         const eip712MessageBuffer = signTypedDataUtils.signTypedDataHash(typedData);
         const messageHex = `0x${eip712MessageBuffer.toString('hex')}`;
         return messageHex;
diff --git a/packages/contracts/test/utils/transaction_factory.ts b/packages/contracts/test/utils/transaction_factory.ts
index 47880cca5..6e4cc4b2f 100644
--- a/packages/contracts/test/utils/transaction_factory.ts
+++ b/packages/contracts/test/utils/transaction_factory.ts
@@ -1,9 +1,4 @@
-import {
-    EIP712_DOMAIN_NAME,
-    EIP712_DOMAIN_SCHEMA,
-    EIP712_DOMAIN_VERSION,
-    generatePseudoRandomSalt,
-} from '@0xproject/order-utils';
+import { eip712Utils, generatePseudoRandomSalt } from '@0xproject/order-utils';
 import { SignatureType } from '@0xproject/types';
 import { signTypedDataUtils } from '@0xproject/utils';
 import * as ethUtil from 'ethereumjs-util';
@@ -11,15 +6,6 @@ import * as ethUtil from 'ethereumjs-util';
 import { signingUtils } from './signing_utils';
 import { SignedTransaction } from './types';
 
-const EIP712_ZEROEX_TRANSACTION_SCHEMA = {
-    name: 'ZeroExTransaction',
-    parameters: [
-        { name: 'salt', type: 'uint256' },
-        { name: 'signerAddress', type: 'address' },
-        { name: 'data', type: 'bytes' },
-    ],
-};
-
 export class TransactionFactory {
     private readonly _signerBuff: Buffer;
     private readonly _exchangeAddress: string;
@@ -33,30 +19,18 @@ export class TransactionFactory {
         const salt = generatePseudoRandomSalt();
         const signerAddress = `0x${this._signerBuff.toString('hex')}`;
         const executeTransactionData = {
-            salt: salt.toString(),
+            salt,
             signerAddress,
             data,
         };
-        const typedData = {
-            types: {
-                EIP712Domain: EIP712_DOMAIN_SCHEMA.parameters,
-                ZeroExTransaction: EIP712_ZEROEX_TRANSACTION_SCHEMA.parameters,
-            },
-            domain: {
-                name: EIP712_DOMAIN_NAME,
-                version: EIP712_DOMAIN_VERSION,
-                verifyingContract: this._exchangeAddress,
-            },
-            message: executeTransactionData,
-            primaryType: EIP712_ZEROEX_TRANSACTION_SCHEMA.name,
-        };
+
+        const typedData = eip712Utils.createZeroExTransactionTypedData(executeTransactionData, this._exchangeAddress);
         const eip712MessageBuffer = signTypedDataUtils.signTypedDataHash(typedData);
         const signature = signingUtils.signMessage(eip712MessageBuffer, this._privateKey, signatureType);
         const signedTx = {
             exchangeAddress: this._exchangeAddress,
             signature: `0x${signature.toString('hex')}`,
             ...executeTransactionData,
-            salt,
         };
         return signedTx;
     }
diff --git a/packages/json-schemas/schemas/eip712_typed_data.ts b/packages/json-schemas/schemas/eip712_typed_data.ts
index 4c4664878..371ff8a78 100644
--- a/packages/json-schemas/schemas/eip712_typed_data.ts
+++ b/packages/json-schemas/schemas/eip712_typed_data.ts
@@ -1,5 +1,5 @@
 export const eip712TypedData = {
-    id: 'eip712TypedData',
+    id: '/eip712TypedData',
     type: 'object',
     properties: {
         types: {
diff --git a/packages/order-utils/CHANGELOG.json b/packages/order-utils/CHANGELOG.json
index a9d2fde8b..2555ad350 100644
--- a/packages/order-utils/CHANGELOG.json
+++ b/packages/order-utils/CHANGELOG.json
@@ -3,15 +3,15 @@
         "version": "2.0.0",
         "changes": [
             {
-                "note": "Added ecSignOrderAsync to first sign an order as EIP712 and fallback to EthSign",
+                "note": "Added `ecSignOrderAsync` to first sign an order as EIP712 and fallback to EthSign",
                 "pr": 1102
             },
             {
-                "note": "Added ecSignTypedDataOrderAsync to sign an order exclusively as EIP712",
+                "note": "Added `ecSignTypedDataOrderAsync` to sign an order exclusively as EIP712",
                 "pr": 1102
             },
             {
-                "note": "Rename ecSignOrderHashAsync to ecSignHashAsync removing SignerType parameter",
+                "note": "Rename `ecSignOrderHashAsync` to `ecSignHashAsync` removing `SignerType` parameter",
                 "pr": 1102
             }
         ]
diff --git a/packages/order-utils/src/constants.ts b/packages/order-utils/src/constants.ts
index 5403606c3..7de20a696 100644
--- a/packages/order-utils/src/constants.ts
+++ b/packages/order-utils/src/constants.ts
@@ -13,16 +13,39 @@ export const constants = {
     BASE_16: 16,
     INFINITE_TIMESTAMP_SEC: new BigNumber(2524604400), // Close to infinite
     ZERO_AMOUNT: new BigNumber(0),
-};
-
-export const EIP712_DOMAIN_NAME = '0x Protocol';
-export const EIP712_DOMAIN_VERSION = '2';
-
-export const EIP712_DOMAIN_SCHEMA = {
-    name: 'EIP712Domain',
-    parameters: [
-        { name: 'name', type: 'string' },
-        { name: 'version', type: 'string' },
-        { name: 'verifyingContract', type: 'address' },
-    ],
+    EIP712_DOMAIN_NAME: '0x Protocol',
+    EIP712_DOMAIN_VERSION: '2',
+    EIP712_DOMAIN_SCHEMA: {
+        name: 'EIP712Domain',
+        parameters: [
+            { name: 'name', type: 'string' },
+            { name: 'version', type: 'string' },
+            { name: 'verifyingContract', type: 'address' },
+        ],
+    },
+    EIP712_ORDER_SCHEMA: {
+        name: 'Order',
+        parameters: [
+            { 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' },
+        ],
+    },
+    EIP712_ZEROEX_TRANSACTION_SCHEMA: {
+        name: 'ZeroExTransaction',
+        parameters: [
+            { name: 'salt', type: 'uint256' },
+            { name: 'signerAddress', type: 'address' },
+            { name: 'data', type: 'bytes' },
+        ],
+    },
 };
diff --git a/packages/order-utils/src/eip712_utils.ts b/packages/order-utils/src/eip712_utils.ts
new file mode 100644
index 000000000..43b421de7
--- /dev/null
+++ b/packages/order-utils/src/eip712_utils.ts
@@ -0,0 +1,75 @@
+import { EIP712Object, EIP712TypedData, EIP712Types, Order, ZeroExTransaction } from '@0xproject/types';
+import * as _ from 'lodash';
+
+import { constants } from './constants';
+
+export const eip712Utils = {
+    /**
+     * Creates a EIP712TypedData object specific to the 0x protocol for use with signTypedData.
+     * @param   primaryType The primary type found in message
+     * @param   types The additional types for the data in message
+     * @param   message The contents of the message
+     * @param   exchangeAddress The address of the exchange contract
+     * @return  A typed data object
+     */
+    createTypedData: (
+        primaryType: string,
+        types: EIP712Types,
+        message: EIP712Object,
+        exchangeAddress: string,
+    ): EIP712TypedData => {
+        const typedData = {
+            types: {
+                EIP712Domain: constants.EIP712_DOMAIN_SCHEMA.parameters,
+                ...types,
+            },
+            domain: {
+                name: constants.EIP712_DOMAIN_NAME,
+                version: constants.EIP712_DOMAIN_VERSION,
+                verifyingContract: exchangeAddress,
+            },
+            message,
+            primaryType,
+        };
+        return typedData;
+    },
+    /**
+     * Creates an Order EIP712TypedData object for use with signTypedData.
+     * @param   Order the order
+     * @return  A typed data object
+     */
+    createOrderTypedData: (order: Order): EIP712TypedData => {
+        const normalizedOrder = _.mapValues(order, value => {
+            return !_.isString(value) ? value.toString() : value;
+        });
+        const typedData = eip712Utils.createTypedData(
+            constants.EIP712_ORDER_SCHEMA.name,
+            { Order: constants.EIP712_ORDER_SCHEMA.parameters },
+            normalizedOrder,
+            order.exchangeAddress,
+        );
+        return typedData;
+    },
+    /**
+     * Creates an ExecuteTransaction EIP712TypedData object for use with signTypedData and
+     * 0x Exchange executeTransaction.
+     * @param   ZeroExTransaction the 0x transaction
+     * @param   exchangeAddress The address of the exchange contract
+     * @return  A typed data object
+     */
+    createZeroExTransactionTypedData: (
+        zeroExTransaction: ZeroExTransaction,
+        exchangeAddress: string,
+    ): EIP712TypedData => {
+        const normalizedTransaction = _.mapValues(zeroExTransaction, value => {
+            return !_.isString(value) ? value.toString() : value;
+        });
+        const typedData = eip712Utils.createTypedData(
+            constants.EIP712_ZEROEX_TRANSACTION_SCHEMA.name,
+            { ZeroExTransaction: constants.EIP712_ZEROEX_TRANSACTION_SCHEMA.parameters },
+            normalizedTransaction,
+            exchangeAddress,
+        );
+        return typedData;
+    },
+};
diff --git a/packages/order-utils/src/index.ts b/packages/order-utils/src/index.ts
index 89a843d8f..2e05fdf2b 100644
--- a/packages/order-utils/src/index.ts
+++ b/packages/order-utils/src/index.ts
@@ -18,7 +18,8 @@ export { ExchangeTransferSimulator } from './exchange_transfer_simulator';
 export { BalanceAndProxyAllowanceLazyStore } from './store/balance_and_proxy_allowance_lazy_store';
 export { OrderFilledCancelledLazyStore } from './store/order_filled_cancelled_lazy_store';
 
-export { EIP712_DOMAIN_NAME, EIP712_DOMAIN_SCHEMA, EIP712_DOMAIN_VERSION } from './constants';
+export { constants } from './constants';
+export { eip712Utils } from './eip712_utils';
 
 export { Provider, JSONRPCRequestPayload, JSONRPCErrorCallback, JSONRPCResponsePayload } from 'ethereum-types';
 export {
@@ -34,6 +35,12 @@ export {
     OrderStateValid,
     OrderStateInvalid,
     ExchangeContractErrs,
+    EIP712Parameter,
+    EIP712TypedData,
+    EIP712Types,
+    EIP712Object,
+    EIP712ObjectValue,
+    ZeroExTransaction,
 } from '@0xproject/types';
 export {
     OrderError,
diff --git a/packages/order-utils/src/order_hash.ts b/packages/order-utils/src/order_hash.ts
index 37b9da811..a6dd6688c 100644
--- a/packages/order-utils/src/order_hash.ts
+++ b/packages/order-utils/src/order_hash.ts
@@ -4,28 +4,10 @@ import { signTypedDataUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 
 import { assert } from './assert';
-import { EIP712_DOMAIN_NAME, EIP712_DOMAIN_SCHEMA, EIP712_DOMAIN_VERSION } from './constants';
+import { eip712Utils } from './eip712_utils';
 
 const INVALID_TAKER_FORMAT = 'instance.takerAddress is not of a type(s) string';
 
-export const EIP712_ORDER_SCHEMA = {
-    name: 'Order',
-    parameters: [
-        { 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' },
-    ],
-};
-
 export const orderHashUtils = {
     /**
      * Checks if the supplied hex encoded order hash is valid.
@@ -45,7 +27,7 @@ export const orderHashUtils = {
     /**
      * Computes the orderHash for a supplied order.
      * @param   order   An object that conforms to the Order or SignedOrder interface definitions.
-     * @return  The resulting orderHash from hashing the supplied order.
+     * @return  Hex encoded string orderHash from hashing the supplied order.
      */
     getOrderHashHex(order: SignedOrder | Order): string {
         try {
@@ -64,27 +46,12 @@ export const orderHashUtils = {
         return orderHashHex;
     },
     /**
-     * Computes the orderHash for a supplied order and returns it as a Buffer
+     * Computes the orderHash for a supplied order
      * @param   order   An object that conforms to the Order or SignedOrder interface definitions.
-     * @return  The resulting orderHash from hashing the supplied order as a Buffer
+     * @return  A Buffer containing the resulting orderHash from hashing the supplied order
      */
     getOrderHashBuffer(order: SignedOrder | Order): Buffer {
-        const normalizedOrder = _.mapValues(order, value => {
-            return _.isObject(value) ? value.toString() : value;
-        });
-        const typedData = {
-            types: {
-                EIP712Domain: EIP712_DOMAIN_SCHEMA.parameters,
-                Order: EIP712_ORDER_SCHEMA.parameters,
-            },
-            domain: {
-                name: EIP712_DOMAIN_NAME,
-                version: EIP712_DOMAIN_VERSION,
-                verifyingContract: order.exchangeAddress,
-            },
-            message: normalizedOrder,
-            primaryType: EIP712_ORDER_SCHEMA.name,
-        };
+        const typedData = eip712Utils.createOrderTypedData(order);
         const orderHashBuff = signTypedDataUtils.signTypedDataHash(typedData);
         return orderHashBuff;
     },
diff --git a/packages/order-utils/src/signature_utils.ts b/packages/order-utils/src/signature_utils.ts
index 2d7fcfc9e..8c92b87dd 100644
--- a/packages/order-utils/src/signature_utils.ts
+++ b/packages/order-utils/src/signature_utils.ts
@@ -1,5 +1,5 @@
 import { schemas } from '@0xproject/json-schemas';
-import { ECSignature, Order, SignatureType, ValidatorSignature } from '@0xproject/types';
+import { ECSignature, Order, SignatureType, SignedOrder, ValidatorSignature } from '@0xproject/types';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import { Provider } from 'ethereum-types';
 import * as ethUtil from 'ethereumjs-util';
@@ -7,11 +7,11 @@ import * as _ from 'lodash';
 
 import { artifacts } from './artifacts';
 import { assert } from './assert';
-import { EIP712_DOMAIN_NAME, EIP712_DOMAIN_SCHEMA, EIP712_DOMAIN_VERSION } from './constants';
+import { eip712Utils } from './eip712_utils';
 import { ExchangeContract } from './generated_contract_wrappers/exchange';
 import { IValidatorContract } from './generated_contract_wrappers/i_validator';
 import { IWalletContract } from './generated_contract_wrappers/i_wallet';
-import { EIP712_ORDER_SCHEMA, orderHashUtils } from './order_hash';
+import { orderHashUtils } from './order_hash';
 import { OrderError } from './types';
 import { utils } from './utils';
 
@@ -195,53 +195,45 @@ export const signatureUtils = {
     },
     /**
      * Signs an order and returns its elliptic curve signature and signature type. First `eth_signTypedData` is requested
-     * then a fallback to `eth_sign` if not available on this provider.
+     * then a fallback to `eth_sign` if not available on the supplied provider.
      * @param   order The Order to sign.
      * @param   signerAddress   The hex encoded Ethereum address you wish to sign it with. This address
-     *          must be available via the Provider supplied to 0x.js.
-     * @return  A hex encoded string containing the Elliptic curve signature generated by signing the orderHash and the Signature Type.
+     *          must be available via the supplied Provider.
+     * @return  A SignedOrder containing the order and Elliptic curve signature with Signature Type.
      */
-    async ecSignOrderAsync(provider: Provider, order: Order, signerAddress: string): Promise<string> {
+    async ecSignOrderAsync(provider: Provider, order: Order, signerAddress: string): Promise<SignedOrder> {
         try {
-            const signatureHex = signatureUtils.ecSignTypedDataOrderAsync(provider, order, signerAddress);
-            return signatureHex;
+            const signedOrder = signatureUtils.ecSignTypedDataOrderAsync(provider, order, signerAddress);
+            return signedOrder;
         } catch (err) {
             // Fallback to using EthSign when ethSignTypedData is not supported
             const orderHash = orderHashUtils.getOrderHashHex(order);
             const signatureHex = await signatureUtils.ecSignHashAsync(provider, orderHash, signerAddress);
-            return signatureHex;
+            const signedOrder = {
+                ...order,
+                signature: signatureHex,
+            };
+            return signedOrder;
         }
     },
     /**
      * Signs an order using `eth_signTypedData` and returns its elliptic curve signature and signature type.
      * @param   order The Order to sign.
      * @param   signerAddress   The hex encoded Ethereum address you wish to sign it with. This address
-     *          must be available via the Provider supplied to 0x.js.
-     * @return  A hex encoded string containing the Elliptic curve signature generated by signing the order with `eth_signTypedData`
-     *          and the Signature Type.
+     *          must be available via the supplied Provider.
+     * @return  A SignedOrder containing the order and Elliptic curve signature with Signature Type.
      */
-    async ecSignTypedDataOrderAsync(provider: Provider, order: Order, signerAddress: string): Promise<string> {
+    async ecSignTypedDataOrderAsync(provider: Provider, order: Order, signerAddress: string): Promise<SignedOrder> {
         assert.isWeb3Provider('provider', provider);
         assert.isETHAddressHex('signerAddress', signerAddress);
         const web3Wrapper = new Web3Wrapper(provider);
         await assert.isSenderAddressAsync('signerAddress', signerAddress, web3Wrapper);
+        // Detect if Metamask to transition users to the MetamaskSubprovider
+        if ((provider as any).isMetaMask) {
+            throw new Error('Unsupported Provider, please use MetamaskSubprovider.');
+        }
         const normalizedSignerAddress = signerAddress.toLowerCase();
-        const normalizedOrder = _.mapValues(order, value => {
-            return _.isObject(value) ? value.toString() : value;
-        });
-        const typedData = {
-            types: {
-                EIP712Domain: EIP712_DOMAIN_SCHEMA.parameters,
-                Order: EIP712_ORDER_SCHEMA.parameters,
-            },
-            domain: {
-                name: EIP712_DOMAIN_NAME,
-                version: EIP712_DOMAIN_VERSION,
-                verifyingContract: order.exchangeAddress,
-            },
-            message: normalizedOrder,
-            primaryType: 'Order',
-        };
+        const typedData = eip712Utils.createOrderTypedData(order);
         const signature = await web3Wrapper.signTypedDataAsync(normalizedSignerAddress, typedData);
         const ecSignatureRSV = parseSignatureHexAsRSV(signature);
         const signatureBuffer = Buffer.concat([
@@ -251,14 +243,16 @@ export const signatureUtils = {
             ethUtil.toBuffer(SignatureType.EIP712),
         ]);
         const signatureHex = `0x${signatureBuffer.toString('hex')}`;
-        return signatureHex;
+        return {
+            ...order,
+            signature: signatureHex,
+        };
     },
     /**
      * Signs a hash and returns its elliptic curve signature and signature type.
-     * This method currently supports TestRPC, Geth and Parity above and below V1.6.6
      * @param   msgHash       Hex encoded message to sign.
      * @param   signerAddress   The hex encoded Ethereum address you wish to sign it with. This address
-     *          must be available via the Provider supplied to 0x.js.
+     *          must be available via the supplied Provider.
      * @return  A hex encoded string containing the Elliptic curve signature generated by signing the msgHash and the Signature Type.
      */
     async ecSignHashAsync(provider: Provider, msgHash: string, signerAddress: string): Promise<string> {
@@ -268,6 +262,10 @@ export const signatureUtils = {
         const web3Wrapper = new Web3Wrapper(provider);
         await assert.isSenderAddressAsync('signerAddress', signerAddress, web3Wrapper);
         const normalizedSignerAddress = signerAddress.toLowerCase();
+        // Detect if Metamask to transition users to the MetamaskSubprovider
+        if ((provider as any).isMetaMask) {
+            throw new Error('Unsupported Provider, please use MetamaskSubprovider.');
+        }
 
         const signature = await web3Wrapper.signMessageAsync(normalizedSignerAddress, msgHash);
         const prefixedMsgHashHex = signatureUtils.addSignedMessagePrefix(msgHash);
diff --git a/packages/order-utils/test/eip712_utils_test.ts b/packages/order-utils/test/eip712_utils_test.ts
new file mode 100644
index 000000000..dc76595db
--- /dev/null
+++ b/packages/order-utils/test/eip712_utils_test.ts
@@ -0,0 +1,44 @@
+import { BigNumber } from '@0xproject/utils';
+import * as chai from 'chai';
+import 'mocha';
+
+import { constants } from '../src/constants';
+import { eip712Utils } from '../src/eip712_utils';
+
+import { chaiSetup } from './utils/chai_setup';
+
+chaiSetup.configure();
+const expect = chai.expect;
+
+describe('EIP712 Utils', () => {
+    describe('createTypedData', () => {
+        it('adds in the EIP712DomainSeparator', () => {
+            const primaryType = 'Test';
+            const typedData = eip712Utils.createTypedData(
+                primaryType,
+                { Test: [{ name: 'testValue', type: 'uint256' }] },
+                { testValue: '1' },
+                constants.NULL_ADDRESS,
+            );
+            expect(typedData.domain).to.not.be.undefined();
+            expect(typedData.types.EIP712Domain).to.not.be.undefined();
+            const domainObject = typedData.domain;
+            expect(domainObject.name).to.eq(constants.EIP712_DOMAIN_NAME);
+            expect(typedData.primaryType).to.eq(primaryType);
+        });
+    });
+    describe('createTypedData', () => {
+        it('adds in the EIP712DomainSeparator', () => {
+            const typedData = eip712Utils.createZeroExTransactionTypedData(
+                {
+                    salt: new BigNumber('0'),
+                    data: constants.NULL_BYTES,
+                    signerAddress: constants.NULL_BYTES,
+                },
+                constants.NULL_ADDRESS,
+            );
+            expect(typedData.primaryType).to.eq(constants.EIP712_ZEROEX_TRANSACTION_SCHEMA.name);
+            expect(typedData.types.EIP712Domain).to.not.be.undefined();
+        });
+    });
+});
diff --git a/packages/order-utils/test/order_hash_test.ts b/packages/order-utils/test/order_hash_test.ts
index 3fdbbad21..fe44218d6 100644
--- a/packages/order-utils/test/order_hash_test.ts
+++ b/packages/order-utils/test/order_hash_test.ts
@@ -35,6 +35,20 @@ describe('Order hashing', () => {
             const orderHash = orderHashUtils.getOrderHashHex(order);
             expect(orderHash).to.be.equal(expectedOrderHash);
         });
+        it('calculates the order hash if amounts are strings', async () => {
+            // It's common for developers using javascript to provide the amounts
+            // as strings. Since we eventually toString() the BigNumber
+            // before encoding we should result in the same orderHash in this scenario
+            // tslint:disable-next-line:no-unnecessary-type-assertion
+            const orderHash = orderHashUtils.getOrderHashHex({
+                ...order,
+                makerAssetAmount: '0',
+                takerAssetAmount: '0',
+                makerFee: '0',
+                takerFee: '0',
+            } as any);
+            expect(orderHash).to.be.equal(expectedOrderHash);
+        });
         it('throws a readable error message if taker format is invalid', async () => {
             const orderWithInvalidtakerFormat = {
                 ...order,
diff --git a/packages/order-utils/test/signature_utils_test.ts b/packages/order-utils/test/signature_utils_test.ts
index 03354cd65..7f6987f6a 100644
--- a/packages/order-utils/test/signature_utils_test.ts
+++ b/packages/order-utils/test/signature_utils_test.ts
@@ -152,14 +152,14 @@ describe('Signature utils', () => {
                 ethUtil.toBuffer(SignatureType.EIP712),
             ]);
             const signatureHex = `0x${signatureBuffer.toString('hex')}`;
-            const eip712Signature = await signatureUtils.ecSignOrderAsync(provider, order, makerAddress);
+            const signedOrder = await signatureUtils.ecSignOrderAsync(provider, order, makerAddress);
             const isValidSignature = await signatureUtils.isValidSignatureAsync(
                 provider,
                 orderHashHex,
-                eip712Signature,
+                signedOrder.signature,
                 makerAddress,
             );
-            expect(signatureHex).to.eq(eip712Signature);
+            expect(signatureHex).to.eq(signedOrder.signature);
             expect(isValidSignature).to.eq(true);
         });
     });
@@ -238,6 +238,51 @@ describe('Signature utils', () => {
             expect(isValidSignature).to.be.true();
         });
     });
+    describe('#ecSignTypedDataOrderAsync', () => {
+        let makerAddress: string;
+        const fakeExchangeContractAddress = '0x1dc4c1cefef38a777b15aa20260a54e584b16c48';
+        let order: Order;
+        before(async () => {
+            const availableAddreses = await web3Wrapper.getAvailableAddressesAsync();
+            makerAddress = availableAddreses[0];
+            order = {
+                makerAddress,
+                takerAddress: constants.NULL_ADDRESS,
+                senderAddress: constants.NULL_ADDRESS,
+                feeRecipientAddress: constants.NULL_ADDRESS,
+                makerAssetData: constants.NULL_ADDRESS,
+                takerAssetData: constants.NULL_ADDRESS,
+                exchangeAddress: fakeExchangeContractAddress,
+                salt: new BigNumber(0),
+                makerFee: new BigNumber(0),
+                takerFee: new BigNumber(0),
+                makerAssetAmount: new BigNumber(0),
+                takerAssetAmount: new BigNumber(0),
+                expirationTimeSeconds: new BigNumber(0),
+            };
+        });
+        it('should return the correct Signature for signatureHex concatenated as R + S + V', async () => {
+            const expectedSignature =
+                '0x1cd472c439833774b55d248c31b6585f21aea1b9363ebb4ec58549e46b62eb5a6f696f5781f62de008ee7f77650ef940d99c97ec1dee67b3f5cea1bbfdfeb2eba602';
+            const fakeProvider = {
+                async sendAsync(payload: JSONRPCRequestPayload, callback: JSONRPCErrorCallback): Promise<void> {
+                    if (payload.method === 'eth_signTypedData') {
+                        const [address, typedData] = payload.params;
+                        const signature = await web3Wrapper.signTypedDataAsync(address, typedData);
+                        callback(null, {
+                            id: 42,
+                            jsonrpc: '2.0',
+                            result: signature,
+                        });
+                    } else {
+                        callback(null, { id: 42, jsonrpc: '2.0', result: [makerAddress] });
+                    }
+                },
+            };
+            const signedOrder = await signatureUtils.ecSignTypedDataOrderAsync(fakeProvider, order, makerAddress);
+            expect(signedOrder.signature).to.equal(expectedSignature);
+        });
+    });
     describe('#convertECSignatureToSignatureHex', () => {
         const ecSignature: ECSignature = {
             v: 27,
diff --git a/packages/subproviders/CHANGELOG.json b/packages/subproviders/CHANGELOG.json
index 6a6f7848b..387207b01 100644
--- a/packages/subproviders/CHANGELOG.json
+++ b/packages/subproviders/CHANGELOG.json
@@ -3,11 +3,11 @@
         "version": "2.1.0",
         "changes": [
             {
-                "note": "Add Metamask Subprovider to handle inconsistent JSON RPC behaviour",
+                "note": "Add `MetamaskSubprovider` to handle inconsistent JSON RPC behaviour",
                 "pr": 1102
             },
             {
-                "note": "Add support for eth_signTypedData in Mnemonic, Private and EthLightWallet",
+                "note": "Add support for `eth_signTypedData` in wallets Mnemonic, Private and EthLightWallet",
                 "pr": 1102
             }
         ]
diff --git a/packages/subproviders/src/index.ts b/packages/subproviders/src/index.ts
index 8b5446007..6a8100e68 100644
--- a/packages/subproviders/src/index.ts
+++ b/packages/subproviders/src/index.ts
@@ -48,6 +48,13 @@ export {
     LedgerGetAddressResult,
 } from './types';
 
-export { ECSignature } from '@0xproject/types';
+export {
+    ECSignature,
+    EIP712Object,
+    EIP712ObjectValue,
+    EIP712TypedData,
+    EIP712Types,
+    EIP712Parameter,
+} from '@0xproject/types';
 
 export { JSONRPCRequestPayload, Provider, JSONRPCResponsePayload, JSONRPCErrorCallback } from 'ethereum-types';
diff --git a/packages/subproviders/src/subproviders/eth_lightwallet_subprovider.ts b/packages/subproviders/src/subproviders/eth_lightwallet_subprovider.ts
index e3afeff1b..a1d93ac49 100644
--- a/packages/subproviders/src/subproviders/eth_lightwallet_subprovider.ts
+++ b/packages/subproviders/src/subproviders/eth_lightwallet_subprovider.ts
@@ -1,3 +1,4 @@
+import { EIP712TypedData } from '@0xproject/types';
 import * as lightwallet from 'eth-lightwallet';
 
 import { PartialTxParams } from '../types';
@@ -48,16 +49,16 @@ export class EthLightwalletSubprovider extends BaseWalletSubprovider {
         // Lightwallet loses the chain id information when hex encoding the transaction
         // this results in a different signature on certain networks. PrivateKeyWallet
         // respects this as it uses the parameters passed in
-        let privKey = this._keystore.exportPrivateKey(txParams.from, this._pwDerivedKey);
-        const privKeyWallet = new PrivateKeyWalletSubprovider(privKey);
-        privKey = '';
-        const privKeySignature = await privKeyWallet.signTransactionAsync(txParams);
-        return privKeySignature;
+        let privateKey = this._keystore.exportPrivateKey(txParams.from, this._pwDerivedKey);
+        const privateKeyWallet = new PrivateKeyWalletSubprovider(privateKey);
+        privateKey = '';
+        const privateKeySignature = await privateKeyWallet.signTransactionAsync(txParams);
+        return privateKeySignature;
     }
     /**
      * Sign a personal Ethereum signed message. The signing account will be the account
      * associated with the provided address.
-     * If you've added the this Subprovider to your app's provider, you can simply send an `eth_sign`
+     * If you've added this Subprovider to your app's provider, you can simply send an `eth_sign`
      * or `personal_sign` JSON RPC request, and this method will be called auto-magically.
      * If you are not using this via a ProviderEngine instance, you can call it directly.
      * @param data Hex string message to sign
@@ -65,10 +66,10 @@ export class EthLightwalletSubprovider extends BaseWalletSubprovider {
      * @return Signature hex string (order: rsv)
      */
     public async signPersonalMessageAsync(data: string, address: string): Promise<string> {
-        let privKey = this._keystore.exportPrivateKey(address, this._pwDerivedKey);
-        const privKeyWallet = new PrivateKeyWalletSubprovider(privKey);
-        privKey = '';
-        const result = privKeyWallet.signPersonalMessageAsync(data, address);
+        let privateKey = this._keystore.exportPrivateKey(address, this._pwDerivedKey);
+        const privateKeyWallet = new PrivateKeyWalletSubprovider(privateKey);
+        privateKey = '';
+        const result = privateKeyWallet.signPersonalMessageAsync(data, address);
         return result;
     }
     /**
@@ -80,11 +81,11 @@ export class EthLightwalletSubprovider extends BaseWalletSubprovider {
      * @param data the typed data object
      * @return Signature hex string (order: rsv)
      */
-    public async signTypedDataAsync(address: string, typedData: any): Promise<string> {
-        let privKey = this._keystore.exportPrivateKey(address, this._pwDerivedKey);
-        const privKeyWallet = new PrivateKeyWalletSubprovider(privKey);
-        privKey = '';
-        const result = privKeyWallet.signTypedDataAsync(address, typedData);
+    public async signTypedDataAsync(address: string, typedData: EIP712TypedData): Promise<string> {
+        let privateKey = this._keystore.exportPrivateKey(address, this._pwDerivedKey);
+        const privateKeyWallet = new PrivateKeyWalletSubprovider(privateKey);
+        privateKey = '';
+        const result = privateKeyWallet.signTypedDataAsync(address, typedData);
         return result;
     }
 }
diff --git a/packages/subproviders/src/subproviders/metamask_subprovider.ts b/packages/subproviders/src/subproviders/metamask_subprovider.ts
index 724edd574..46fc2a9cd 100644
--- a/packages/subproviders/src/subproviders/metamask_subprovider.ts
+++ b/packages/subproviders/src/subproviders/metamask_subprovider.ts
@@ -18,7 +18,7 @@ export class MetamaskSubprovider extends Subprovider {
     private readonly _web3Wrapper: Web3Wrapper;
     private readonly _provider: Provider;
     /**
-     * Instantiates a new SignerSubprovider
+     * Instantiates a new MetamaskSubprovider
      * @param provider Web3 provider that should handle  all user account related requests
      */
     constructor(provider: Provider) {
@@ -83,7 +83,9 @@ export class MetamaskSubprovider extends Subprovider {
             case 'eth_signTypedData_v3':
                 [address, message] = payload.params;
                 try {
-                    // Metamask has namespaced signTypedData to v3 for an indeterminate period of time.
+                    // Metamask supports multiple versions and has namespaced signTypedData to v3 for an indeterminate period of time.
+                    // eth_signTypedData is mapped to an older implementation before the spec was finalized.
+                    // Source: https://github.com/MetaMask/metamask-extension/blob/c49d854b55b3efd34c7fd0414b76f7feaa2eec7c/app/scripts/metamask-controller.js#L1262
                     // and expects message to be serialised as JSON
                     const messageJSON = JSON.stringify(message);
                     const signature = await this._web3Wrapper.sendRawPayloadAsync<string>({
diff --git a/packages/subproviders/src/subproviders/mnemonic_wallet.ts b/packages/subproviders/src/subproviders/mnemonic_wallet.ts
index de99b632a..04a11c7be 100644
--- a/packages/subproviders/src/subproviders/mnemonic_wallet.ts
+++ b/packages/subproviders/src/subproviders/mnemonic_wallet.ts
@@ -1,4 +1,5 @@
 import { assert } from '@0xproject/assert';
+import { EIP712TypedData } from '@0xproject/types';
 import { addressUtils } from '@0xproject/utils';
 import * as bip39 from 'bip39';
 import HDNode = require('hdkey');
@@ -90,10 +91,10 @@ export class MnemonicWalletSubprovider extends BaseWalletSubprovider {
     }
     /**
      * Sign a personal Ethereum signed message. The signing account will be the account
-     * associated with the provided address.
-     * If you've added the MnemonicWalletSubprovider to your app's provider, you can simply send an `eth_sign`
-     * or `personal_sign` JSON RPC request, and this method will be called auto-magically.
-     * If you are not using this via a ProviderEngine instance, you can call it directly.
+     * associated with the provided address. If you've added the MnemonicWalletSubprovider to
+     * your app's provider, you can simply send an `eth_sign` or `personal_sign` JSON RPC request,
+     * and this method will be called auto-magically. If you are not using this via a ProviderEngine
+     * instance, you can call it directly.
      * @param data Hex string message to sign
      * @param address Address of the account to sign with
      * @return Signature hex string (order: rsv)
@@ -109,16 +110,16 @@ export class MnemonicWalletSubprovider extends BaseWalletSubprovider {
         return sig;
     }
     /**
-     * Sign an EIP712 Typed Data message.  The signing account will be the account
-     * associated with the provided address.
-     * If you've added this MnemonicWalletSubprovider to your app's provider, you can simply send an `eth_signTypedData`
-     * JSON RPC request, and this method will be called auto-magically.
-     * If you are not using this via a ProviderEngine instance, you can call it directly.
+     * Sign an EIP712 Typed Data message. The signing account will be the account
+     * associated with the provided address. If you've added this MnemonicWalletSubprovider to
+     * your app's provider, you can simply send an `eth_signTypedData` JSON RPC request, and
+     * this method will be called auto-magically. If you are not using this via a ProviderEngine
+     *  instance, you can call it directly.
      * @param address Address of the account to sign with
      * @param data the typed data object
      * @return Signature hex string (order: rsv)
      */
-    public async signTypedDataAsync(address: string, typedData: any): Promise<string> {
+    public async signTypedDataAsync(address: string, typedData: EIP712TypedData): Promise<string> {
         if (_.isUndefined(typedData)) {
             throw new Error(WalletSubproviderErrors.DataMissingForSignPersonalMessage);
         }
diff --git a/packages/subproviders/src/subproviders/private_key_wallet.ts b/packages/subproviders/src/subproviders/private_key_wallet.ts
index 51409077d..96e4190ed 100644
--- a/packages/subproviders/src/subproviders/private_key_wallet.ts
+++ b/packages/subproviders/src/subproviders/private_key_wallet.ts
@@ -1,4 +1,5 @@
 import { assert } from '@0xproject/assert';
+import { EIP712TypedData } from '@0xproject/types';
 import { signTypedDataUtils } from '@0xproject/utils';
 import EthereumTx = require('ethereumjs-tx');
 import * as ethUtil from 'ethereumjs-util';
@@ -95,7 +96,7 @@ export class PrivateKeyWalletSubprovider extends BaseWalletSubprovider {
      * @param data the typed data object
      * @return Signature hex string (order: rsv)
      */
-    public async signTypedDataAsync(address: string, typedData: any): Promise<string> {
+    public async signTypedDataAsync(address: string, typedData: EIP712TypedData): Promise<string> {
         if (_.isUndefined(typedData)) {
             throw new Error(WalletSubproviderErrors.DataMissingForSignTypedData);
         }
diff --git a/packages/subproviders/src/subproviders/signer.ts b/packages/subproviders/src/subproviders/signer.ts
index 6b519865f..eda7db42e 100644
--- a/packages/subproviders/src/subproviders/signer.ts
+++ b/packages/subproviders/src/subproviders/signer.ts
@@ -14,7 +14,7 @@ import { Subprovider } from './subprovider';
 export class SignerSubprovider extends Subprovider {
     private readonly _web3Wrapper: Web3Wrapper;
     /**
-     * Instantiates a new SignerSubprovider
+     * Instantiates a new SignerSubprovider.
      * @param provider Web3 provider that should handle  all user account related requests
      */
     constructor(provider: Provider) {
diff --git a/packages/subproviders/test/unit/eth_lightwallet_subprovider_test.ts b/packages/subproviders/test/unit/eth_lightwallet_subprovider_test.ts
index 063817a95..49698ce9e 100644
--- a/packages/subproviders/test/unit/eth_lightwallet_subprovider_test.ts
+++ b/packages/subproviders/test/unit/eth_lightwallet_subprovider_test.ts
@@ -73,6 +73,13 @@ describe('EthLightwalletSubprovider', () => {
                 const txHex = await ethLightwalletSubprovider.signTransactionAsync(fixtureData.TX_DATA);
                 expect(txHex).to.be.equal(fixtureData.TX_DATA_SIGNED_RESULT);
             });
+            it('signs an EIP712 sign typed data message', async () => {
+                const signature = await ethLightwalletSubprovider.signTypedDataAsync(
+                    fixtureData.TEST_RPC_ACCOUNT_0,
+                    fixtureData.EIP712_TEST_TYPED_DATA,
+                );
+                expect(signature).to.be.equal(fixtureData.EIP712_TEST_TYPED_DATA_SIGNED_RESULT);
+            });
         });
     });
     describe('calls through a provider', () => {
@@ -129,6 +136,20 @@ describe('EthLightwalletSubprovider', () => {
                 });
                 provider.sendAsync(payload, callback);
             });
+            it('signs an EIP712 sign typed data message with eth_signTypedData', (done: DoneCallback) => {
+                const payload = {
+                    jsonrpc: '2.0',
+                    method: 'eth_signTypedData',
+                    params: [fixtureData.TEST_RPC_ACCOUNT_0, fixtureData.EIP712_TEST_TYPED_DATA],
+                    id: 1,
+                };
+                const callback = reportCallbackErrors(done)((err: Error, response: JSONRPCResponsePayload) => {
+                    expect(err).to.be.a('null');
+                    expect(response.result).to.be.equal(fixtureData.EIP712_TEST_TYPED_DATA_SIGNED_RESULT);
+                    done();
+                });
+                provider.sendAsync(payload, callback);
+            });
         });
         describe('failure cases', () => {
             it('should throw if `data` param not hex when calling eth_sign', (done: DoneCallback) => {
diff --git a/packages/types/CHANGELOG.json b/packages/types/CHANGELOG.json
index 65dd75101..53e1f3716 100644
--- a/packages/types/CHANGELOG.json
+++ b/packages/types/CHANGELOG.json
@@ -5,6 +5,10 @@
             {
                 "note": "Added `EIP712Parameter` `EIP712Types` `EIP712TypedData` for EIP712 signing",
                 "pr": 1102
+            },
+            {
+                "note": "Added `ZeroExTransaction` type for Exchange executeTransaction",
+                "pr": 1102
             }
         ]
     },
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index d57bdfb6f..6bc966ba1 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -41,6 +41,15 @@ export interface SignedOrder extends Order {
     signature: string;
 }
 
+/**
+ * ZeroExTransaction for use with 0x Exchange executeTransaction
+ */
+export interface ZeroExTransaction {
+    salt: BigNumber;
+    signerAddress: string;
+    data: string;
+}
+
 /**
  * Elliptic Curve signature
  */
@@ -598,9 +607,16 @@ export interface EIP712Parameter {
 export interface EIP712Types {
     [key: string]: EIP712Parameter[];
 }
+
+export type EIP712ObjectValue = string | number | EIP712Object;
+
+export interface EIP712Object {
+    [key: string]: EIP712ObjectValue;
+}
+
 export interface EIP712TypedData {
     types: EIP712Types;
-    domain: any;
-    message: any;
+    domain: EIP712Object;
+    message: EIP712Object;
     primaryType: string;
 }
diff --git a/packages/utils/src/sign_typed_data_utils.ts b/packages/utils/src/sign_typed_data_utils.ts
index b72fd099b..657a59ed0 100644
--- a/packages/utils/src/sign_typed_data_utils.ts
+++ b/packages/utils/src/sign_typed_data_utils.ts
@@ -1,7 +1,8 @@
 import * as ethUtil from 'ethereumjs-util';
 import * as ethers from 'ethers';
+import * as _ from 'lodash';
 
-import { EIP712TypedData, EIP712Types } from '@0xproject/types';
+import { EIP712Object, EIP712ObjectValue, EIP712TypedData, EIP712Types } from '@0xproject/types';
 
 export const signTypedDataUtils = {
     /**
@@ -42,32 +43,40 @@ export const signTypedDataUtils = {
         }
         return result;
     },
-    _encodeData(primaryType: string, data: any, types: EIP712Types): string {
+    _encodeData(primaryType: string, data: EIP712Object, types: EIP712Types): string {
         const encodedTypes = ['bytes32'];
-        const encodedValues = [signTypedDataUtils._typeHash(primaryType, types)];
+        const encodedValues: Array<Buffer | EIP712ObjectValue> = [signTypedDataUtils._typeHash(primaryType, types)];
         for (const field of types[primaryType]) {
-            let value = data[field.name];
+            const value = data[field.name];
             if (field.type === 'string' || field.type === 'bytes') {
-                value = ethUtil.sha3(value);
+                const hashValue = ethUtil.sha3(value as string);
                 encodedTypes.push('bytes32');
-                encodedValues.push(value);
+                encodedValues.push(hashValue);
             } else if (types[field.type] !== undefined) {
                 encodedTypes.push('bytes32');
-                value = ethUtil.sha3(signTypedDataUtils._encodeData(field.type, value, types));
-                encodedValues.push(value);
+                const hashValue = ethUtil.sha3(
+                    // tslint:disable-next-line:no-unnecessary-type-assertion
+                    signTypedDataUtils._encodeData(field.type, value as EIP712Object, types),
+                );
+                encodedValues.push(hashValue);
             } else if (field.type.lastIndexOf(']') === field.type.length - 1) {
                 throw new Error('Arrays currently unimplemented in encodeData');
             } else {
                 encodedTypes.push(field.type);
-                encodedValues.push(value);
+                const normalizedValue = signTypedDataUtils._normalizeValue(field.type, value);
+                encodedValues.push(normalizedValue);
             }
         }
         return ethers.utils.defaultAbiCoder.encode(encodedTypes, encodedValues);
     },
+    _normalizeValue(type: string, value: any): EIP712ObjectValue {
+        const normalizedValue = type === 'uint256' && _.isObject(value) && value.isBigNumber ? value.toString() : value;
+        return normalizedValue;
+    },
     _typeHash(primaryType: string, types: EIP712Types): Buffer {
         return ethUtil.sha3(signTypedDataUtils._encodeType(primaryType, types));
     },
-    _structHash(primaryType: string, data: any, types: EIP712Types): Buffer {
+    _structHash(primaryType: string, data: EIP712Object, types: EIP712Types): Buffer {
         return ethUtil.sha3(signTypedDataUtils._encodeData(primaryType, data, types));
     },
 };
diff --git a/packages/web3-wrapper/src/web3_wrapper.ts b/packages/web3-wrapper/src/web3_wrapper.ts
index df6879a48..034bafb5f 100644
--- a/packages/web3-wrapper/src/web3_wrapper.ts
+++ b/packages/web3-wrapper/src/web3_wrapper.ts
@@ -318,9 +318,9 @@ export class Web3Wrapper {
      * Sign an EIP712 typed data message with a specific address's private key (`eth_signTypedData`)
      * @param address Address of signer
      * @param typedData Typed data message to sign
-     * @returns Signature string (might be VRS or RSV depending on the Signer)
+     * @returns Signature string (as RSV)
      */
-    public async signTypedDataAsync(address: string, typedData: object): Promise<string> {
+    public async signTypedDataAsync(address: string, typedData: any): Promise<string> {
         assert.isETHAddressHex('address', address);
         assert.doesConformToSchema('typedData', typedData, schemas.eip712TypedData);
         const signData = await this.sendRawPayloadAsync<string>({
-- 
cgit v1.2.3


From 405234133b784bf563a4220cc6380d25c901e453 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 5 Oct 2018 13:40:26 -0700
Subject: Fix order expiration calc bug and expose gas options to
 executeBuyQuote

---
 packages/asset-buyer/src/asset_buyer.ts       | 6 +++++-
 packages/asset-buyer/src/types.ts             | 2 ++
 packages/asset-buyer/src/utils/order_utils.ts | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/asset-buyer/src/asset_buyer.ts b/packages/asset-buyer/src/asset_buyer.ts
index 7ec39e012..50343efde 100644
--- a/packages/asset-buyer/src/asset_buyer.ts
+++ b/packages/asset-buyer/src/asset_buyer.ts
@@ -183,7 +183,7 @@ export class AssetBuyer {
         buyQuote: BuyQuote,
         options: Partial<BuyQuoteExecutionOpts> = {},
     ): Promise<string> {
-        const { ethAmount, takerAddress, feeRecipient } = {
+        const { ethAmount, takerAddress, feeRecipient, gasLimit, gasPrice } = {
             ...constants.DEFAULT_BUY_QUOTE_EXECUTION_OPTS,
             ...options,
         };
@@ -219,6 +219,10 @@ export class AssetBuyer {
             feeOrders,
             feePercentage,
             feeRecipient,
+            {
+                gasLimit,
+                gasPrice,
+            },
         );
         return txHash;
     }
diff --git a/packages/asset-buyer/src/types.ts b/packages/asset-buyer/src/types.ts
index b96795bb6..f779d123f 100644
--- a/packages/asset-buyer/src/types.ts
+++ b/packages/asset-buyer/src/types.ts
@@ -82,6 +82,8 @@ export interface BuyQuoteRequestOpts {
 export interface BuyQuoteExecutionOpts {
     ethAmount?: BigNumber;
     takerAddress?: string;
+    gasLimit?: number;
+    gasPrice?: BigNumber;
     feeRecipient: string;
 }
 
diff --git a/packages/asset-buyer/src/utils/order_utils.ts b/packages/asset-buyer/src/utils/order_utils.ts
index 62166eb76..cfc13a8a1 100644
--- a/packages/asset-buyer/src/utils/order_utils.ts
+++ b/packages/asset-buyer/src/utils/order_utils.ts
@@ -10,7 +10,7 @@ export const orderUtils = {
     willOrderExpire(order: SignedOrder, secondsFromNow: number): boolean {
         const millisecondsInSecond = 1000;
         const currentUnixTimestampSec = new BigNumber(Date.now() / millisecondsInSecond).round();
-        return order.expirationTimeSeconds.lessThan(currentUnixTimestampSec.minus(secondsFromNow));
+        return order.expirationTimeSeconds.lessThan(currentUnixTimestampSec.plus(secondsFromNow));
     },
     calculateRemainingMakerAssetAmount(order: SignedOrder, remainingTakerAssetAmount: BigNumber): BigNumber {
         if (remainingTakerAssetAmount.eq(0)) {
-- 
cgit v1.2.3


From 9ba00a1077ba53f00e7b75f650289dfc3aff47ff Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 5 Oct 2018 15:24:11 -0700
Subject: Add comments for gasPrice and gasLimit

---
 packages/asset-buyer/src/types.ts | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'packages')

diff --git a/packages/asset-buyer/src/types.ts b/packages/asset-buyer/src/types.ts
index f779d123f..90502ac69 100644
--- a/packages/asset-buyer/src/types.ts
+++ b/packages/asset-buyer/src/types.ts
@@ -77,6 +77,8 @@ export interface BuyQuoteRequestOpts {
 /**
  * ethAmount: The desired amount of eth to spend. Defaults to buyQuote.worstCaseQuoteInfo.totalEthAmount.
  * takerAddress: The address to perform the buy. Defaults to the first available address from the provider.
+ * gasLimit: The amount of gas to send with a transaction (in Gwei). Defaults to an eth_estimateGas rpc call.
+ * gasPrice: Gas price in Wei to use for a transaction
  * feeRecipient: The address where affiliate fees are sent. Defaults to null address (0x000...000).
  */
 export interface BuyQuoteExecutionOpts {
-- 
cgit v1.2.3


From cb1311ecc5889a0fd81b61f3ab7b66605d75960f Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 5 Oct 2018 15:25:54 -0700
Subject: Increase default expiryBufferSeconds from 15 to 300 (5 minutes)

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

(limited to 'packages')

diff --git a/packages/asset-buyer/src/constants.ts b/packages/asset-buyer/src/constants.ts
index e1056e39b..bc168e462 100644
--- a/packages/asset-buyer/src/constants.ts
+++ b/packages/asset-buyer/src/constants.ts
@@ -8,7 +8,7 @@ const MAINNET_NETWORK_ID = 1;
 const DEFAULT_ASSET_BUYER_OPTS: AssetBuyerOpts = {
     networkId: MAINNET_NETWORK_ID,
     orderRefreshIntervalMs: 10000, // 10 seconds
-    expiryBufferSeconds: 15,
+    expiryBufferSeconds: 300,
 };
 
 const DEFAULT_BUY_QUOTE_REQUEST_OPTS: BuyQuoteRequestOpts = {
-- 
cgit v1.2.3


From f9f8e06c1c8ac5b254dfae08e216ea199a77ff02 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 5 Oct 2018 15:42:19 -0700
Subject: Fix incorrect affiliate fee calculations and associated tests

---
 .../asset-buyer/src/utils/buy_quote_calculator.ts  | 10 ++++-----
 .../asset-buyer/test/buy_quote_calculator_test.ts  | 24 ++++++++++++++--------
 2 files changed, 20 insertions(+), 14 deletions(-)

(limited to 'packages')

diff --git a/packages/asset-buyer/src/utils/buy_quote_calculator.ts b/packages/asset-buyer/src/utils/buy_quote_calculator.ts
index cb0fd128c..a1d334eef 100644
--- a/packages/asset-buyer/src/utils/buy_quote_calculator.ts
+++ b/packages/asset-buyer/src/utils/buy_quote_calculator.ts
@@ -72,7 +72,6 @@ export const buyQuoteCalculator = {
             assetBuyAmount,
             feePercentage,
         );
-
         return {
             assetData,
             orders: resultOrders,
@@ -98,13 +97,14 @@ function calculateQuoteInfo(
     );
     // find the total eth needed to buy fees
     const ethAmountToBuyFees = findEthAmountNeededToBuyFees(feeOrdersAndFillableAmounts, zrxAmountToBuyAsset);
-    const ethAmountBeforeAffiliateFee = ethAmountToBuyAsset.plus(ethAmountToBuyFees);
-    const totalEthAmount = ethAmountBeforeAffiliateFee.mul(feePercentage + 1);
+    const affiliateFeeEthAmount = ethAmountToBuyAsset.mul(feePercentage);
+    const totalEthAmountWithoutAffiliateFee = ethAmountToBuyAsset.plus(ethAmountToBuyFees);
+    const totalEthAmount = totalEthAmountWithoutAffiliateFee.plus(affiliateFeeEthAmount);
     // divide into the assetBuyAmount in order to find rate of makerAsset / WETH
-    const ethPerAssetPrice = ethAmountBeforeAffiliateFee.div(assetBuyAmount);
+    const ethPerAssetPrice = totalEthAmountWithoutAffiliateFee.div(assetBuyAmount);
     return {
         totalEthAmount,
-        feeEthAmount: totalEthAmount.minus(ethAmountBeforeAffiliateFee),
+        feeEthAmount: affiliateFeeEthAmount,
         ethPerAssetPrice,
     };
 }
diff --git a/packages/asset-buyer/test/buy_quote_calculator_test.ts b/packages/asset-buyer/test/buy_quote_calculator_test.ts
index b987b45a8..fda6958cd 100644
--- a/packages/asset-buyer/test/buy_quote_calculator_test.ts
+++ b/packages/asset-buyer/test/buy_quote_calculator_test.ts
@@ -103,9 +103,11 @@ describe('buyQuoteCalculator', () => {
             expect(buyQuote.feeOrders).to.deep.equal([smallFeeOrderAndFillableAmount.orders[0]]);
             // test if rates are correct
             // 50 eth to fill the first order + 100 eth for fees
-            const expectedFillEthAmount = new BigNumber(150);
-            const expectedTotalEthAmount = expectedFillEthAmount.mul(feePercentage + 1);
-            const expectedFeeEthAmount = expectedTotalEthAmount.minus(expectedFillEthAmount);
+            const expectedEthAmountForAsset = new BigNumber(50);
+            const expectedEthAmountForZrxFees = new BigNumber(100);
+            const expectedFillEthAmount = expectedEthAmountForAsset.plus(expectedEthAmountForZrxFees);
+            const expectedFeeEthAmount = expectedEthAmountForAsset.mul(feePercentage);
+            const expectedTotalEthAmount = expectedFillEthAmount.plus(expectedFeeEthAmount);
             const expectedEthPerAssetPrice = expectedFillEthAmount.div(assetBuyAmount);
             expect(buyQuote.bestCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedFeeEthAmount);
             expect(buyQuote.bestCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedTotalEthAmount);
@@ -138,17 +140,21 @@ describe('buyQuoteCalculator', () => {
             expect(buyQuote.feeOrders).to.deep.equal(allFeeOrdersAndFillableAmounts.orders);
             // test if rates are correct
             // 50 eth to fill the first order + 100 eth for fees
-            const expectedFillEthAmount = new BigNumber(150);
-            const expectedTotalEthAmount = expectedFillEthAmount.mul(feePercentage + 1);
-            const expectedFeeEthAmount = expectedTotalEthAmount.minus(expectedFillEthAmount);
+            const expectedEthAmountForAsset = new BigNumber(50);
+            const expectedEthAmountForZrxFees = new BigNumber(100);
+            const expectedFillEthAmount = expectedEthAmountForAsset.plus(expectedEthAmountForZrxFees);
+            const expectedFeeEthAmount = expectedEthAmountForAsset.mul(feePercentage);
+            const expectedTotalEthAmount = expectedFillEthAmount.plus(expectedFeeEthAmount);
             const expectedEthPerAssetPrice = expectedFillEthAmount.div(assetBuyAmount);
             expect(buyQuote.bestCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedFeeEthAmount);
             expect(buyQuote.bestCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedTotalEthAmount);
             expect(buyQuote.bestCaseQuoteInfo.ethPerAssetPrice).to.bignumber.equal(expectedEthPerAssetPrice);
             // 100 eth to fill the first order + 200 eth for fees
-            const expectedWorstFillEthAmount = new BigNumber(300);
-            const expectedWorstTotalEthAmount = expectedWorstFillEthAmount.mul(feePercentage + 1);
-            const expectedWorstFeeEthAmount = expectedWorstTotalEthAmount.minus(expectedWorstFillEthAmount);
+            const expectedWorstEthAmountForAsset = new BigNumber(100);
+            const expectedWorstEthAmountForZrxFees = new BigNumber(200);
+            const expectedWorstFillEthAmount = expectedWorstEthAmountForAsset.plus(expectedWorstEthAmountForZrxFees);
+            const expectedWorstFeeEthAmount = expectedWorstEthAmountForAsset.mul(feePercentage);
+            const expectedWorstTotalEthAmount = expectedWorstFillEthAmount.plus(expectedWorstFeeEthAmount);
             const expectedWorstEthPerAssetPrice = expectedWorstFillEthAmount.div(assetBuyAmount);
             expect(buyQuote.worstCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedWorstFeeEthAmount);
             expect(buyQuote.worstCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedWorstTotalEthAmount);
-- 
cgit v1.2.3


From e1236a484623e9d2caab823c476175cb255ae816 Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Mon, 8 Oct 2018 11:13:04 +1100
Subject: Detect MM on signature validation failure.

Report a developer friendly error in this event to educate them on the compatability wrapper MetamaskSubprovider
---
 packages/order-utils/src/signature_utils.ts | 52 ++++++++++++++++-------------
 1 file changed, 28 insertions(+), 24 deletions(-)

(limited to 'packages')

diff --git a/packages/order-utils/src/signature_utils.ts b/packages/order-utils/src/signature_utils.ts
index 8c92b87dd..e518b29a0 100644
--- a/packages/order-utils/src/signature_utils.ts
+++ b/packages/order-utils/src/signature_utils.ts
@@ -228,25 +228,30 @@ export const signatureUtils = {
         assert.isETHAddressHex('signerAddress', signerAddress);
         const web3Wrapper = new Web3Wrapper(provider);
         await assert.isSenderAddressAsync('signerAddress', signerAddress, web3Wrapper);
-        // Detect if Metamask to transition users to the MetamaskSubprovider
-        if ((provider as any).isMetaMask) {
-            throw new Error('Unsupported Provider, please use MetamaskSubprovider.');
-        }
         const normalizedSignerAddress = signerAddress.toLowerCase();
         const typedData = eip712Utils.createOrderTypedData(order);
-        const signature = await web3Wrapper.signTypedDataAsync(normalizedSignerAddress, typedData);
-        const ecSignatureRSV = parseSignatureHexAsRSV(signature);
-        const signatureBuffer = Buffer.concat([
-            ethUtil.toBuffer(ecSignatureRSV.v),
-            ethUtil.toBuffer(ecSignatureRSV.r),
-            ethUtil.toBuffer(ecSignatureRSV.s),
-            ethUtil.toBuffer(SignatureType.EIP712),
-        ]);
-        const signatureHex = `0x${signatureBuffer.toString('hex')}`;
-        return {
-            ...order,
-            signature: signatureHex,
-        };
+        try {
+            const signature = await web3Wrapper.signTypedDataAsync(normalizedSignerAddress, typedData);
+            const ecSignatureRSV = parseSignatureHexAsRSV(signature);
+            const signatureBuffer = Buffer.concat([
+                ethUtil.toBuffer(ecSignatureRSV.v),
+                ethUtil.toBuffer(ecSignatureRSV.r),
+                ethUtil.toBuffer(ecSignatureRSV.s),
+                ethUtil.toBuffer(SignatureType.EIP712),
+            ]);
+            const signatureHex = `0x${signatureBuffer.toString('hex')}`;
+            return {
+                ...order,
+                signature: signatureHex,
+            };
+        } catch (err) {
+            // Detect if Metamask to transition users to the MetamaskSubprovider
+            if ((provider as any).isMetaMask) {
+                throw new Error(`Unsupported Provider, please use MetamaskSubprovider: ${err.message}`);
+            } else {
+                throw err;
+            }
+        }
     },
     /**
      * Signs a hash and returns its elliptic curve signature and signature type.
@@ -262,11 +267,6 @@ export const signatureUtils = {
         const web3Wrapper = new Web3Wrapper(provider);
         await assert.isSenderAddressAsync('signerAddress', signerAddress, web3Wrapper);
         const normalizedSignerAddress = signerAddress.toLowerCase();
-        // Detect if Metamask to transition users to the MetamaskSubprovider
-        if ((provider as any).isMetaMask) {
-            throw new Error('Unsupported Provider, please use MetamaskSubprovider.');
-        }
-
         const signature = await web3Wrapper.signMessageAsync(normalizedSignerAddress, msgHash);
         const prefixedMsgHashHex = signatureUtils.addSignedMessagePrefix(msgHash);
 
@@ -301,8 +301,12 @@ export const signatureUtils = {
                 return convertedSignatureHex;
             }
         }
-
-        throw new Error(OrderError.InvalidSignature);
+        // Detect if Metamask to transition users to the MetamaskSubprovider
+        if ((provider as any).isMetaMask) {
+            throw new Error('Unsupported Provider, please use MetamaskSubprovider.');
+        } else {
+            throw new Error(OrderError.InvalidSignature);
+        }
     },
     /**
      * Combines ECSignature with V,R,S and the EthSign signature type for use in 0x protocol
-- 
cgit v1.2.3


From 9e8031d5e3cf94cabe07685be510397367e90413 Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Tue, 9 Oct 2018 18:26:13 +1100
Subject: Throw and handle errors from Providers.

In web3 wrapper when a response contains an error field we throw this rather than return response.result which is often undefined.
In Signature Utils we handle the error thrown when a user rejects the signing dialogue to prevent double signing.
Exposed the ZeroExTransaction JSON schema.
In Website only use the MetamaskSubprovider if we can detect the provider is Metamask
---
 packages/0x.js/CHANGELOG.json                      |   3 +-
 packages/0x.js/src/index.ts                        |   1 +
 .../src/utils/transaction_encoder.ts               |   2 +-
 .../contracts/test/utils/transaction_factory.ts    |   2 +-
 packages/ethereum-types/CHANGELOG.json             |   9 ++
 packages/ethereum-types/src/index.ts               |   6 +
 packages/json-schemas/schemas/eip712_typed_data.ts |   2 +-
 .../schemas/zero_ex_transaction_schema.ts          |  10 ++
 packages/json-schemas/src/schemas.ts               |   6 +-
 packages/order-utils/src/eip712_utils.ts           |   8 ++
 packages/order-utils/src/order_hash.ts             |   2 +-
 packages/order-utils/src/signature_utils.ts        |  26 +++-
 packages/order-utils/test/eip712_utils_test.ts     |   2 +-
 packages/order-utils/test/signature_utils_test.ts  | 149 ++++++++++++---------
 packages/subproviders/src/index.ts                 |   8 +-
 .../src/subproviders/private_key_wallet.ts         |   2 +-
 packages/utils/src/sign_typed_data_utils.ts        |   6 +-
 packages/utils/test/sign_typed_data_utils_test.ts  |   4 +-
 packages/web3-wrapper/CHANGELOG.json               |  14 ++
 packages/web3-wrapper/src/web3_wrapper.ts          |   5 +-
 packages/web3-wrapper/test/web3_wrapper_test.ts    |  15 ++-
 packages/website/ts/blockchain.ts                  |  12 +-
 22 files changed, 205 insertions(+), 89 deletions(-)
 create mode 100644 packages/json-schemas/schemas/zero_ex_transaction_schema.ts

(limited to 'packages')

diff --git a/packages/0x.js/CHANGELOG.json b/packages/0x.js/CHANGELOG.json
index 3a184382c..6dfcc3d33 100644
--- a/packages/0x.js/CHANGELOG.json
+++ b/packages/0x.js/CHANGELOG.json
@@ -7,7 +7,8 @@
                 "pr": 1102
             },
             {
-                "note": "Added `MetamaskSubprovider` to handle inconsistencies with signing.",
+                "note":
+                    "Added `MetamaskSubprovider` to handle inconsistencies in Metamask's signing JSON RPC endpoints.",
                 "pr": 1102
             },
             {
diff --git a/packages/0x.js/src/index.ts b/packages/0x.js/src/index.ts
index 228bcecdb..6eb1fd8ee 100644
--- a/packages/0x.js/src/index.ts
+++ b/packages/0x.js/src/index.ts
@@ -90,6 +90,7 @@ export {
     JSONRPCRequestPayload,
     JSONRPCResponsePayload,
     JSONRPCErrorCallback,
+    JSONRPCResponseError,
     LogEntry,
     DecodedLogArgs,
     LogEntryEvent,
diff --git a/packages/contract-wrappers/src/utils/transaction_encoder.ts b/packages/contract-wrappers/src/utils/transaction_encoder.ts
index d9735778e..33086944b 100644
--- a/packages/contract-wrappers/src/utils/transaction_encoder.ts
+++ b/packages/contract-wrappers/src/utils/transaction_encoder.ts
@@ -33,7 +33,7 @@ export class TransactionEncoder {
             data,
         };
         const typedData = eip712Utils.createZeroExTransactionTypedData(executeTransactionData, exchangeAddress);
-        const eip712MessageBuffer = signTypedDataUtils.signTypedDataHash(typedData);
+        const eip712MessageBuffer = signTypedDataUtils.generateTypedDataHash(typedData);
         const messageHex = `0x${eip712MessageBuffer.toString('hex')}`;
         return messageHex;
     }
diff --git a/packages/contracts/test/utils/transaction_factory.ts b/packages/contracts/test/utils/transaction_factory.ts
index 6e4cc4b2f..9ed4c5a31 100644
--- a/packages/contracts/test/utils/transaction_factory.ts
+++ b/packages/contracts/test/utils/transaction_factory.ts
@@ -25,7 +25,7 @@ export class TransactionFactory {
         };
 
         const typedData = eip712Utils.createZeroExTransactionTypedData(executeTransactionData, this._exchangeAddress);
-        const eip712MessageBuffer = signTypedDataUtils.signTypedDataHash(typedData);
+        const eip712MessageBuffer = signTypedDataUtils.generateTypedDataHash(typedData);
         const signature = signingUtils.signMessage(eip712MessageBuffer, this._privateKey, signatureType);
         const signedTx = {
             exchangeAddress: this._exchangeAddress,
diff --git a/packages/ethereum-types/CHANGELOG.json b/packages/ethereum-types/CHANGELOG.json
index e955f4d04..60fb8c806 100644
--- a/packages/ethereum-types/CHANGELOG.json
+++ b/packages/ethereum-types/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "1.1.0",
+        "changes": [
+            {
+                "note": "Add `JSONRPCResponseError` and error field on `JSONRPCResponsePayload`.",
+                "pr": 1102
+            }
+        ]
+    },
     {
         "timestamp": 1538693146,
         "version": "1.0.11",
diff --git a/packages/ethereum-types/src/index.ts b/packages/ethereum-types/src/index.ts
index 7e8b9de3e..ddd472010 100644
--- a/packages/ethereum-types/src/index.ts
+++ b/packages/ethereum-types/src/index.ts
@@ -113,10 +113,16 @@ export interface JSONRPCRequestPayload {
     jsonrpc: string;
 }
 
+export interface JSONRPCResponseError {
+    message: string;
+    code: number;
+}
+
 export interface JSONRPCResponsePayload {
     result: any;
     id: number;
     jsonrpc: string;
+    error?: JSONRPCResponseError;
 }
 
 export interface AbstractBlock {
diff --git a/packages/json-schemas/schemas/eip712_typed_data.ts b/packages/json-schemas/schemas/eip712_typed_data.ts
index 371ff8a78..31ad74610 100644
--- a/packages/json-schemas/schemas/eip712_typed_data.ts
+++ b/packages/json-schemas/schemas/eip712_typed_data.ts
@@ -1,4 +1,4 @@
-export const eip712TypedData = {
+export const eip712TypedDataSchema = {
     id: '/eip712TypedData',
     type: 'object',
     properties: {
diff --git a/packages/json-schemas/schemas/zero_ex_transaction_schema.ts b/packages/json-schemas/schemas/zero_ex_transaction_schema.ts
new file mode 100644
index 000000000..7f729b724
--- /dev/null
+++ b/packages/json-schemas/schemas/zero_ex_transaction_schema.ts
@@ -0,0 +1,10 @@
+export const zeroExTransactionSchema = {
+    id: '/zeroExTransactionSchema',
+    properties: {
+        data: { $ref: '/hexSchema' },
+        signerAddress: { $ref: '/addressSchema' },
+        salt: { $ref: '/numberSchema' },
+    },
+    required: ['data', 'salt', 'signerAddress'],
+    type: 'object',
+};
diff --git a/packages/json-schemas/src/schemas.ts b/packages/json-schemas/src/schemas.ts
index 50dc8d091..4eb96092d 100644
--- a/packages/json-schemas/src/schemas.ts
+++ b/packages/json-schemas/src/schemas.ts
@@ -2,7 +2,7 @@ import { addressSchema, hexSchema, numberSchema } from '../schemas/basic_type_sc
 import { blockParamSchema, blockRangeSchema } from '../schemas/block_range_schema';
 import { callDataSchema } from '../schemas/call_data_schema';
 import { ecSignatureParameterSchema, ecSignatureSchema } from '../schemas/ec_signature_schema';
-import { eip712TypedData } from '../schemas/eip712_typed_data';
+import { eip712TypedDataSchema } from '../schemas/eip712_typed_data';
 import { indexFilterValuesSchema } from '../schemas/index_filter_values_schema';
 import { orderCancellationRequestsSchema } from '../schemas/order_cancel_schema';
 import { orderFillOrKillRequestsSchema } from '../schemas/order_fill_or_kill_requests_schema';
@@ -32,6 +32,7 @@ import { relayerApiOrdersSchema } from '../schemas/relayer_api_orders_schema';
 import { signedOrdersSchema } from '../schemas/signed_orders_schema';
 import { tokenSchema } from '../schemas/token_schema';
 import { jsNumber, txDataSchema } from '../schemas/tx_data_schema';
+import { zeroExTransactionSchema } from '../schemas/zero_ex_transaction_schema';
 
 export const schemas = {
     numberSchema,
@@ -40,7 +41,7 @@ export const schemas = {
     hexSchema,
     ecSignatureParameterSchema,
     ecSignatureSchema,
-    eip712TypedData,
+    eip712TypedDataSchema,
     indexFilterValuesSchema,
     orderCancellationRequestsSchema,
     orderFillOrKillRequestsSchema,
@@ -70,4 +71,5 @@ export const schemas = {
     relayerApiOrdersChannelUpdateSchema,
     relayerApiOrdersResponseSchema,
     relayerApiAssetDataPairsSchema,
+    zeroExTransactionSchema,
 };
diff --git a/packages/order-utils/src/eip712_utils.ts b/packages/order-utils/src/eip712_utils.ts
index 43b421de7..56f736500 100644
--- a/packages/order-utils/src/eip712_utils.ts
+++ b/packages/order-utils/src/eip712_utils.ts
@@ -1,3 +1,5 @@
+import { assert } from '@0xproject/assert';
+import { schemas } from '@0xproject/json-schemas';
 import { EIP712Object, EIP712TypedData, EIP712Types, Order, ZeroExTransaction } from '@0xproject/types';
 import * as _ from 'lodash';
 
@@ -18,6 +20,8 @@ export const eip712Utils = {
         message: EIP712Object,
         exchangeAddress: string,
     ): EIP712TypedData => {
+        assert.isETHAddressHex('exchangeAddress', exchangeAddress);
+        assert.isString('primaryType', primaryType);
         const typedData = {
             types: {
                 EIP712Domain: constants.EIP712_DOMAIN_SCHEMA.parameters,
@@ -31,6 +35,7 @@ export const eip712Utils = {
             message,
             primaryType,
         };
+        assert.doesConformToSchema('typedData', typedData, schemas.eip712TypedDataSchema);
         return typedData;
     },
     /**
@@ -39,6 +44,7 @@ export const eip712Utils = {
      * @return  A typed data object
      */
     createOrderTypedData: (order: Order): EIP712TypedData => {
+        assert.doesConformToSchema('order', order, schemas.orderSchema, [schemas.hexSchema]);
         const normalizedOrder = _.mapValues(order, value => {
             return !_.isString(value) ? value.toString() : value;
         });
@@ -61,6 +67,8 @@ export const eip712Utils = {
         zeroExTransaction: ZeroExTransaction,
         exchangeAddress: string,
     ): EIP712TypedData => {
+        assert.isETHAddressHex('exchangeAddress', exchangeAddress);
+        assert.doesConformToSchema('zeroExTransaction', zeroExTransaction, schemas.zeroExTransactionSchema);
         const normalizedTransaction = _.mapValues(zeroExTransaction, value => {
             return !_.isString(value) ? value.toString() : value;
         });
diff --git a/packages/order-utils/src/order_hash.ts b/packages/order-utils/src/order_hash.ts
index a6dd6688c..b523a3523 100644
--- a/packages/order-utils/src/order_hash.ts
+++ b/packages/order-utils/src/order_hash.ts
@@ -52,7 +52,7 @@ export const orderHashUtils = {
      */
     getOrderHashBuffer(order: SignedOrder | Order): Buffer {
         const typedData = eip712Utils.createOrderTypedData(order);
-        const orderHashBuff = signTypedDataUtils.signTypedDataHash(typedData);
+        const orderHashBuff = signTypedDataUtils.generateTypedDataHash(typedData);
         return orderHashBuff;
     },
 };
diff --git a/packages/order-utils/src/signature_utils.ts b/packages/order-utils/src/signature_utils.ts
index e518b29a0..2605ccd32 100644
--- a/packages/order-utils/src/signature_utils.ts
+++ b/packages/order-utils/src/signature_utils.ts
@@ -194,7 +194,7 @@ export const signatureUtils = {
         }
     },
     /**
-     * Signs an order and returns its elliptic curve signature and signature type. First `eth_signTypedData` is requested
+     * Signs an order and returns a SignedOrder. First `eth_signTypedData` is requested
      * then a fallback to `eth_sign` if not available on the supplied provider.
      * @param   order The Order to sign.
      * @param   signerAddress   The hex encoded Ethereum address you wish to sign it with. This address
@@ -202,11 +202,18 @@ export const signatureUtils = {
      * @return  A SignedOrder containing the order and Elliptic curve signature with Signature Type.
      */
     async ecSignOrderAsync(provider: Provider, order: Order, signerAddress: string): Promise<SignedOrder> {
+        assert.doesConformToSchema('order', order, schemas.orderSchema, [schemas.hexSchema]);
         try {
-            const signedOrder = signatureUtils.ecSignTypedDataOrderAsync(provider, order, signerAddress);
+            const signedOrder = await signatureUtils.ecSignTypedDataOrderAsync(provider, order, signerAddress);
             return signedOrder;
         } catch (err) {
-            // Fallback to using EthSign when ethSignTypedData is not supported
+            // HACK: We are unable to handle specific errors thrown since provider is not an object
+            //       under our control. It could be Metamask Web3, Ethers, or any general RPC provider.
+            //       We check for a user denying the signature request in a way that supports Metamask and
+            //       Coinbase Wallet
+            if (err.message.includes('User denied message signature')) {
+                throw err;
+            }
             const orderHash = orderHashUtils.getOrderHashHex(order);
             const signatureHex = await signatureUtils.ecSignHashAsync(provider, orderHash, signerAddress);
             const signedOrder = {
@@ -217,7 +224,7 @@ export const signatureUtils = {
         }
     },
     /**
-     * Signs an order using `eth_signTypedData` and returns its elliptic curve signature and signature type.
+     * Signs an order using `eth_signTypedData` and returns a SignedOrder.
      * @param   order The Order to sign.
      * @param   signerAddress   The hex encoded Ethereum address you wish to sign it with. This address
      *          must be available via the supplied Provider.
@@ -226,6 +233,7 @@ export const signatureUtils = {
     async ecSignTypedDataOrderAsync(provider: Provider, order: Order, signerAddress: string): Promise<SignedOrder> {
         assert.isWeb3Provider('provider', provider);
         assert.isETHAddressHex('signerAddress', signerAddress);
+        assert.doesConformToSchema('order', order, schemas.orderSchema, [schemas.hexSchema]);
         const web3Wrapper = new Web3Wrapper(provider);
         await assert.isSenderAddressAsync('signerAddress', signerAddress, web3Wrapper);
         const normalizedSignerAddress = signerAddress.toLowerCase();
@@ -247,14 +255,16 @@ export const signatureUtils = {
         } catch (err) {
             // Detect if Metamask to transition users to the MetamaskSubprovider
             if ((provider as any).isMetaMask) {
-                throw new Error(`Unsupported Provider, please use MetamaskSubprovider: ${err.message}`);
+                throw new Error(
+                    `MetaMask provider must be wrapped in a MetamaskSubprovider (from the '@0xproject/subproviders' package) in order to work with this method.`,
+                );
             } else {
                 throw err;
             }
         }
     },
     /**
-     * Signs a hash and returns its elliptic curve signature and signature type.
+     * Signs a hash using `eth_sign` and returns its elliptic curve signature and signature type.
      * @param   msgHash       Hex encoded message to sign.
      * @param   signerAddress   The hex encoded Ethereum address you wish to sign it with. This address
      *          must be available via the supplied Provider.
@@ -303,7 +313,9 @@ export const signatureUtils = {
         }
         // Detect if Metamask to transition users to the MetamaskSubprovider
         if ((provider as any).isMetaMask) {
-            throw new Error('Unsupported Provider, please use MetamaskSubprovider.');
+            throw new Error(
+                `MetaMask provider must be wrapped in a MetamaskSubprovider (from the '@0xproject/subproviders' package) in order to work with this method.`,
+            );
         } else {
             throw new Error(OrderError.InvalidSignature);
         }
diff --git a/packages/order-utils/test/eip712_utils_test.ts b/packages/order-utils/test/eip712_utils_test.ts
index dc76595db..d65cabe9c 100644
--- a/packages/order-utils/test/eip712_utils_test.ts
+++ b/packages/order-utils/test/eip712_utils_test.ts
@@ -33,7 +33,7 @@ describe('EIP712 Utils', () => {
                 {
                     salt: new BigNumber('0'),
                     data: constants.NULL_BYTES,
-                    signerAddress: constants.NULL_BYTES,
+                    signerAddress: constants.NULL_ADDRESS,
                 },
                 constants.NULL_ADDRESS,
             );
diff --git a/packages/order-utils/test/signature_utils_test.ts b/packages/order-utils/test/signature_utils_test.ts
index 7f6987f6a..f2d6790fb 100644
--- a/packages/order-utils/test/signature_utils_test.ts
+++ b/packages/order-utils/test/signature_utils_test.ts
@@ -17,6 +17,28 @@ chaiSetup.configure();
 const expect = chai.expect;
 
 describe('Signature utils', () => {
+    let makerAddress: string;
+    const fakeExchangeContractAddress = '0x1dc4c1cefef38a777b15aa20260a54e584b16c48';
+    let order: Order;
+    before(async () => {
+        const availableAddreses = await web3Wrapper.getAvailableAddressesAsync();
+        makerAddress = availableAddreses[0];
+        order = {
+            makerAddress,
+            takerAddress: constants.NULL_ADDRESS,
+            senderAddress: constants.NULL_ADDRESS,
+            feeRecipientAddress: constants.NULL_ADDRESS,
+            makerAssetData: constants.NULL_ADDRESS,
+            takerAssetData: constants.NULL_ADDRESS,
+            exchangeAddress: fakeExchangeContractAddress,
+            salt: new BigNumber(0),
+            makerFee: new BigNumber(0),
+            takerFee: new BigNumber(0),
+            makerAssetAmount: new BigNumber(0),
+            takerAssetAmount: new BigNumber(0),
+            expirationTimeSeconds: new BigNumber(0),
+        };
+    });
     describe('#isValidSignatureAsync', () => {
         let dataHex = '0x6927e990021d23b1eb7b8789f6a6feaf98fe104bb0cf8259421b79f9a34222b0';
         const ethSignSignature =
@@ -117,54 +139,54 @@ describe('Signature utils', () => {
         });
     });
     describe('#ecSignOrderAsync', () => {
-        let makerAddress: string;
-        const fakeExchangeContractAddress = '0x1dc4c1cefef38a777b15aa20260a54e584b16c48';
-        let order: Order;
-        before(async () => {
-            const availableAddreses = await web3Wrapper.getAvailableAddressesAsync();
-            makerAddress = availableAddreses[0];
-            order = {
-                makerAddress,
-                takerAddress: constants.NULL_ADDRESS,
-                senderAddress: constants.NULL_ADDRESS,
-                feeRecipientAddress: constants.NULL_ADDRESS,
-                makerAssetData: constants.NULL_ADDRESS,
-                takerAssetData: constants.NULL_ADDRESS,
-                exchangeAddress: fakeExchangeContractAddress,
-                salt: new BigNumber(0),
-                makerFee: new BigNumber(0),
-                takerFee: new BigNumber(0),
-                makerAssetAmount: new BigNumber(0),
-                takerAssetAmount: new BigNumber(0),
-                expirationTimeSeconds: new BigNumber(0),
+        it('should default to eth_sign if eth_signTypedData is unavailable', async () => {
+            const expectedSignature =
+                '0x1c3582f06356a1314dbf1c0e534c4d8e92e59b056ee607a7ff5a825f5f2cc5e6151c5cc7fdd420f5608e4d5bef108e42ad90c7a4b408caef32e24374cf387b0d7603';
+
+            const fakeProvider = {
+                async sendAsync(payload: JSONRPCRequestPayload, callback: JSONRPCErrorCallback): Promise<void> {
+                    if (payload.method === 'eth_signTypedData') {
+                        callback(new Error('Internal RPC Error'));
+                    } else if (payload.method === 'eth_sign') {
+                        const [address, message] = payload.params;
+                        const signature = await web3Wrapper.signMessageAsync(address, message);
+                        callback(null, {
+                            id: 42,
+                            jsonrpc: '2.0',
+                            result: signature,
+                        });
+                    } else {
+                        callback(null, { id: 42, jsonrpc: '2.0', result: [makerAddress] });
+                    }
+                },
             };
+            const signedOrder = await signatureUtils.ecSignOrderAsync(fakeProvider, order, makerAddress);
+            expect(signedOrder.signature).to.equal(expectedSignature);
         });
-        it('should result in the same signature as signing order hash without prefix', async () => {
-            const orderHashHex = orderHashUtils.getOrderHashHex(order);
-            const sig = ethUtil.ecsign(
-                ethUtil.toBuffer(orderHashHex),
-                Buffer.from('F2F48EE19680706196E2E339E5DA3491186E0C4C5030670656B0E0164837257D', 'hex'),
-            );
-            const signatureBuffer = Buffer.concat([
-                ethUtil.toBuffer(sig.v),
-                ethUtil.toBuffer(sig.r),
-                ethUtil.toBuffer(sig.s),
-                ethUtil.toBuffer(SignatureType.EIP712),
-            ]);
-            const signatureHex = `0x${signatureBuffer.toString('hex')}`;
-            const signedOrder = await signatureUtils.ecSignOrderAsync(provider, order, makerAddress);
-            const isValidSignature = await signatureUtils.isValidSignatureAsync(
-                provider,
-                orderHashHex,
-                signedOrder.signature,
-                makerAddress,
+        it('should throw if the user denies the signing request', async () => {
+            const fakeProvider = {
+                async sendAsync(payload: JSONRPCRequestPayload, callback: JSONRPCErrorCallback): Promise<void> {
+                    if (payload.method === 'eth_signTypedData') {
+                        callback(new Error('User denied message signature'));
+                    } else if (payload.method === 'eth_sign') {
+                        const [address, message] = payload.params;
+                        const signature = await web3Wrapper.signMessageAsync(address, message);
+                        callback(null, {
+                            id: 42,
+                            jsonrpc: '2.0',
+                            result: signature,
+                        });
+                    } else {
+                        callback(null, { id: 42, jsonrpc: '2.0', result: [makerAddress] });
+                    }
+                },
+            };
+            expect(signatureUtils.ecSignOrderAsync(fakeProvider, order, makerAddress)).to.to.be.rejectedWith(
+                'User denied message signature',
             );
-            expect(signatureHex).to.eq(signedOrder.signature);
-            expect(isValidSignature).to.eq(true);
         });
     });
     describe('#ecSignHashAsync', () => {
-        let makerAddress: string;
         before(async () => {
             const availableAddreses = await web3Wrapper.getAvailableAddressesAsync();
             makerAddress = availableAddreses[0];
@@ -239,27 +261,30 @@ describe('Signature utils', () => {
         });
     });
     describe('#ecSignTypedDataOrderAsync', () => {
-        let makerAddress: string;
-        const fakeExchangeContractAddress = '0x1dc4c1cefef38a777b15aa20260a54e584b16c48';
-        let order: Order;
-        before(async () => {
-            const availableAddreses = await web3Wrapper.getAvailableAddressesAsync();
-            makerAddress = availableAddreses[0];
-            order = {
+        it('should result in the same signature as signing the order hash without an ethereum message prefix', async () => {
+            // Note: Since order hash is an EIP712 hash the result of a valid EIP712 signature
+            //       of order hash is the same as signing the order without the Ethereum Message prefix.
+            const orderHashHex = orderHashUtils.getOrderHashHex(order);
+            const sig = ethUtil.ecsign(
+                ethUtil.toBuffer(orderHashHex),
+                Buffer.from('F2F48EE19680706196E2E339E5DA3491186E0C4C5030670656B0E0164837257D', 'hex'),
+            );
+            const signatureBuffer = Buffer.concat([
+                ethUtil.toBuffer(sig.v),
+                ethUtil.toBuffer(sig.r),
+                ethUtil.toBuffer(sig.s),
+                ethUtil.toBuffer(SignatureType.EIP712),
+            ]);
+            const signatureHex = `0x${signatureBuffer.toString('hex')}`;
+            const signedOrder = await signatureUtils.ecSignTypedDataOrderAsync(provider, order, makerAddress);
+            const isValidSignature = await signatureUtils.isValidSignatureAsync(
+                provider,
+                orderHashHex,
+                signedOrder.signature,
                 makerAddress,
-                takerAddress: constants.NULL_ADDRESS,
-                senderAddress: constants.NULL_ADDRESS,
-                feeRecipientAddress: constants.NULL_ADDRESS,
-                makerAssetData: constants.NULL_ADDRESS,
-                takerAssetData: constants.NULL_ADDRESS,
-                exchangeAddress: fakeExchangeContractAddress,
-                salt: new BigNumber(0),
-                makerFee: new BigNumber(0),
-                takerFee: new BigNumber(0),
-                makerAssetAmount: new BigNumber(0),
-                takerAssetAmount: new BigNumber(0),
-                expirationTimeSeconds: new BigNumber(0),
-            };
+            );
+            expect(signatureHex).to.eq(signedOrder.signature);
+            expect(isValidSignature).to.eq(true);
         });
         it('should return the correct Signature for signatureHex concatenated as R + S + V', async () => {
             const expectedSignature =
diff --git a/packages/subproviders/src/index.ts b/packages/subproviders/src/index.ts
index 6a8100e68..9f4dac58b 100644
--- a/packages/subproviders/src/index.ts
+++ b/packages/subproviders/src/index.ts
@@ -57,4 +57,10 @@ export {
     EIP712Parameter,
 } from '@0xproject/types';
 
-export { JSONRPCRequestPayload, Provider, JSONRPCResponsePayload, JSONRPCErrorCallback } from 'ethereum-types';
+export {
+    JSONRPCRequestPayload,
+    Provider,
+    JSONRPCResponsePayload,
+    JSONRPCErrorCallback,
+    JSONRPCResponseError,
+} from 'ethereum-types';
diff --git a/packages/subproviders/src/subproviders/private_key_wallet.ts b/packages/subproviders/src/subproviders/private_key_wallet.ts
index 96e4190ed..e89c4c186 100644
--- a/packages/subproviders/src/subproviders/private_key_wallet.ts
+++ b/packages/subproviders/src/subproviders/private_key_wallet.ts
@@ -106,7 +106,7 @@ export class PrivateKeyWalletSubprovider extends BaseWalletSubprovider {
                 `Requested to sign message with address: ${address}, instantiated with address: ${this._address}`,
             );
         }
-        const dataBuff = signTypedDataUtils.signTypedDataHash(typedData);
+        const dataBuff = signTypedDataUtils.generateTypedDataHash(typedData);
         const sig = ethUtil.ecsign(dataBuff, this._privateKeyBuffer);
         const rpcSig = ethUtil.toRpcSig(sig.v, sig.r, sig.s);
         return rpcSig;
diff --git a/packages/utils/src/sign_typed_data_utils.ts b/packages/utils/src/sign_typed_data_utils.ts
index 657a59ed0..cd5bcb42f 100644
--- a/packages/utils/src/sign_typed_data_utils.ts
+++ b/packages/utils/src/sign_typed_data_utils.ts
@@ -6,11 +6,11 @@ import { EIP712Object, EIP712ObjectValue, EIP712TypedData, EIP712Types } from '@
 
 export const signTypedDataUtils = {
     /**
-     * Computes the Sign Typed Data hash
+     * Generates the EIP712 Typed Data hash for signing
      * @param   typedData An object that conforms to the EIP712TypedData interface
-     * @return  A Buffer containing the hash of the sign typed data.
+     * @return  A Buffer containing the hash of the typed data.
      */
-    signTypedDataHash(typedData: EIP712TypedData): Buffer {
+    generateTypedDataHash(typedData: EIP712TypedData): Buffer {
         return ethUtil.sha3(
             Buffer.concat([
                 Buffer.from('1901', 'hex'),
diff --git a/packages/utils/test/sign_typed_data_utils_test.ts b/packages/utils/test/sign_typed_data_utils_test.ts
index e1cb4f6e1..dcba08b04 100644
--- a/packages/utils/test/sign_typed_data_utils_test.ts
+++ b/packages/utils/test/sign_typed_data_utils_test.ts
@@ -127,12 +127,12 @@ describe('signTypedDataUtils', () => {
             primaryType: 'Order',
         };
         it('creates a hash of the test sign typed data', () => {
-            const hash = signTypedDataUtils.signTypedDataHash(simpleSignTypedData).toString('hex');
+            const hash = signTypedDataUtils.generateTypedDataHash(simpleSignTypedData).toString('hex');
             const hashHex = `0x${hash}`;
             expect(hashHex).to.be.eq(simpleSignTypedDataHashHex);
         });
         it('creates a hash of the order sign typed data', () => {
-            const hash = signTypedDataUtils.signTypedDataHash(orderSignTypedData).toString('hex');
+            const hash = signTypedDataUtils.generateTypedDataHash(orderSignTypedData).toString('hex');
             const hashHex = `0x${hash}`;
             expect(hashHex).to.be.eq(orderSignTypedDataHashHex);
         });
diff --git a/packages/web3-wrapper/CHANGELOG.json b/packages/web3-wrapper/CHANGELOG.json
index 47f054300..be5c1fef6 100644
--- a/packages/web3-wrapper/CHANGELOG.json
+++ b/packages/web3-wrapper/CHANGELOG.json
@@ -1,4 +1,18 @@
 [
+    {
+        "version": "3.1.0",
+        "changes": [
+            {
+                "note": "Add `signTypedData` to perform EIP712 `eth_signTypedData`.",
+                "pr": 1102
+            },
+            {
+                "note":
+                    "Web3Wrapper now throws when an RPC request contains an error field in the response. Previously errors could be swallowed and undefined returned.",
+                "pr": 1102
+            }
+        ]
+    },
     {
         "version": "3.0.3",
         "changes": [
diff --git a/packages/web3-wrapper/src/web3_wrapper.ts b/packages/web3-wrapper/src/web3_wrapper.ts
index 034bafb5f..726246f1a 100644
--- a/packages/web3-wrapper/src/web3_wrapper.ts
+++ b/packages/web3-wrapper/src/web3_wrapper.ts
@@ -322,7 +322,7 @@ export class Web3Wrapper {
      */
     public async signTypedDataAsync(address: string, typedData: any): Promise<string> {
         assert.isETHAddressHex('address', address);
-        assert.doesConformToSchema('typedData', typedData, schemas.eip712TypedData);
+        assert.doesConformToSchema('typedData', typedData, schemas.eip712TypedDataSchema);
         const signData = await this.sendRawPayloadAsync<string>({
             method: 'eth_signTypedData',
             params: [address, typedData],
@@ -669,6 +669,9 @@ export class Web3Wrapper {
             ...payload,
         };
         const response = await promisify<JSONRPCResponsePayload>(sendAsync)(payloadWithDefaults);
+        if (response.error) {
+            throw new Error(response.error.message);
+        }
         const result = response.result;
         return result;
     }
diff --git a/packages/web3-wrapper/test/web3_wrapper_test.ts b/packages/web3-wrapper/test/web3_wrapper_test.ts
index 385c469bf..164253777 100644
--- a/packages/web3-wrapper/test/web3_wrapper_test.ts
+++ b/packages/web3-wrapper/test/web3_wrapper_test.ts
@@ -1,5 +1,5 @@
 import * as chai from 'chai';
-import { BlockParamLiteral } from 'ethereum-types';
+import { BlockParamLiteral, JSONRPCErrorCallback, JSONRPCRequestPayload } from 'ethereum-types';
 import * as Ganache from 'ganache-core';
 import * as _ from 'lodash';
 import 'mocha';
@@ -78,6 +78,19 @@ describe('Web3Wrapper tests', () => {
             const signatureLength = 132;
             expect(signature.length).to.be.equal(signatureLength);
         });
+        it('should throw if the provider returns an error', async () => {
+            const message = '0xdeadbeef';
+            const signer = addresses[1];
+            const fakeProvider = {
+                async sendAsync(payload: JSONRPCRequestPayload, callback: JSONRPCErrorCallback): Promise<void> {
+                    callback(new Error('User denied message signature'));
+                },
+            };
+            const errorWeb3Wrapper = new Web3Wrapper(fakeProvider);
+            expect(errorWeb3Wrapper.signMessageAsync(signer, message)).to.be.rejectedWith(
+                'User denied message signature',
+            );
+        });
     });
     describe('#getBlockNumberAsync', () => {
         it('get block number', async () => {
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 652f2eb1d..b1181e4c6 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -17,6 +17,7 @@ import {
     MetamaskSubprovider,
     RedundantSubprovider,
     RPCSubprovider,
+    SignerSubprovider,
     Web3ProviderEngine,
 } from '@0xproject/subproviders';
 import { SignedOrder, Token as ZeroExToken } from '@0xproject/types';
@@ -27,8 +28,6 @@ import * as _ from 'lodash';
 import * as moment from 'moment';
 import * as React from 'react';
 import contract = require('truffle-contract');
-import { tokenAddressOverrides } from 'ts/utils/token_address_overrides';
-
 import { BlockchainWatcher } from 'ts/blockchain_watcher';
 import { AssetSendCompleted } from 'ts/components/flash_messages/asset_send_completed';
 import { TransactionSubmitted } from 'ts/components/flash_messages/transaction_submitted';
@@ -54,6 +53,7 @@ import { backendClient } from 'ts/utils/backend_client';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
+import { tokenAddressOverrides } from 'ts/utils/token_address_overrides';
 import { utils } from 'ts/utils/utils';
 import FilterSubprovider = require('web3-provider-engine/subproviders/filters');
 
@@ -161,7 +161,13 @@ export class Blockchain {
             // 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();
-            provider.addProvider(new MetamaskSubprovider(injectedWeb3.currentProvider));
+            const providerName = this._getNameGivenProvider(injectedWeb3.currentProvider);
+            // Wrap Metamask in a compatability wrapper MetamaskSubprovider (to handle inconsistencies)
+            const signerSubprovider =
+                providerName === Providers.Metamask
+                    ? new MetamaskSubprovider(injectedWeb3.currentProvider)
+                    : new SignerSubprovider(injectedWeb3.currentProvider);
+            provider.addProvider(signerSubprovider);
             provider.addProvider(new FilterSubprovider());
             const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => {
                 return new RPCSubprovider(publicNodeUrl);
-- 
cgit v1.2.3


From 7f554303b4333b083102eb17cd9acb6f6b73cc75 Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Tue, 9 Oct 2018 20:29:41 +1100
Subject: Update the exported types for the packages which touch RPC providers

---
 packages/contract-wrappers/src/index.ts | 1 +
 packages/order-utils/src/index.ts       | 9 ++++++++-
 packages/order-watcher/src/index.ts     | 8 +++++++-
 packages/sol-cov/src/index.ts           | 8 +++++++-
 packages/web3-wrapper/src/index.ts      | 1 +
 5 files changed, 24 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/contract-wrappers/src/index.ts b/packages/contract-wrappers/src/index.ts
index 2fcdd2ddb..e8a53170e 100644
--- a/packages/contract-wrappers/src/index.ts
+++ b/packages/contract-wrappers/src/index.ts
@@ -39,6 +39,7 @@ export {
     JSONRPCRequestPayload,
     JSONRPCResponsePayload,
     JSONRPCErrorCallback,
+    JSONRPCResponseError,
     AbiDefinition,
     LogWithDecodedArgs,
     FunctionAbi,
diff --git a/packages/order-utils/src/index.ts b/packages/order-utils/src/index.ts
index 2e05fdf2b..dbb782b85 100644
--- a/packages/order-utils/src/index.ts
+++ b/packages/order-utils/src/index.ts
@@ -21,7 +21,14 @@ export { OrderFilledCancelledLazyStore } from './store/order_filled_cancelled_la
 export { constants } from './constants';
 export { eip712Utils } from './eip712_utils';
 
-export { Provider, JSONRPCRequestPayload, JSONRPCErrorCallback, JSONRPCResponsePayload } from 'ethereum-types';
+export {
+    Provider,
+    JSONRPCRequestPayload,
+    JSONRPCErrorCallback,
+    JSONRPCResponsePayload,
+    JSONRPCResponseError,
+} from 'ethereum-types';
+
 export {
     SignedOrder,
     Order,
diff --git a/packages/order-watcher/src/index.ts b/packages/order-watcher/src/index.ts
index d7ad4fba7..d2f91eab1 100644
--- a/packages/order-watcher/src/index.ts
+++ b/packages/order-watcher/src/index.ts
@@ -12,4 +12,10 @@ export {
 export { OnOrderStateChangeCallback, OrderWatcherConfig } from './types';
 
 export { SignedOrder } from '@0xproject/types';
-export { JSONRPCRequestPayload, JSONRPCErrorCallback, Provider, JSONRPCResponsePayload } from 'ethereum-types';
+export {
+    JSONRPCRequestPayload,
+    JSONRPCErrorCallback,
+    Provider,
+    JSONRPCResponsePayload,
+    JSONRPCResponseError,
+} from 'ethereum-types';
diff --git a/packages/sol-cov/src/index.ts b/packages/sol-cov/src/index.ts
index 15be86a9d..612d0869a 100644
--- a/packages/sol-cov/src/index.ts
+++ b/packages/sol-cov/src/index.ts
@@ -8,7 +8,13 @@ export { ProfilerSubprovider } from './profiler_subprovider';
 export { RevertTraceSubprovider } from './revert_trace_subprovider';
 
 export { ContractData } from './types';
-export { JSONRPCRequestPayload, Provider, JSONRPCErrorCallback, JSONRPCResponsePayload } from 'ethereum-types';
+export {
+    JSONRPCRequestPayload,
+    Provider,
+    JSONRPCErrorCallback,
+    JSONRPCResponsePayload,
+    JSONRPCResponseError,
+} from 'ethereum-types';
 
 export {
     JSONRPCRequestPayloadWithMethod,
diff --git a/packages/web3-wrapper/src/index.ts b/packages/web3-wrapper/src/index.ts
index 7cdd25e55..9bef06fd4 100644
--- a/packages/web3-wrapper/src/index.ts
+++ b/packages/web3-wrapper/src/index.ts
@@ -30,6 +30,7 @@ export {
     OpCode,
     TxDataPayable,
     JSONRPCResponsePayload,
+    JSONRPCResponseError,
     RawLogEntry,
     DecodedLogEntryEvent,
     LogWithDecodedArgs,
-- 
cgit v1.2.3


From 75b9e639194e98febf8e378619afef2d578cbc7e Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Tue, 9 Oct 2018 20:58:30 +1100
Subject: Move Metamask Error to OrderErrors

---
 packages/order-utils/CHANGELOG.json         |  7 ++++---
 packages/order-utils/src/signature_utils.ts | 11 ++++-------
 packages/order-utils/src/types.ts           |  1 +
 3 files changed, 9 insertions(+), 10 deletions(-)

(limited to 'packages')

diff --git a/packages/order-utils/CHANGELOG.json b/packages/order-utils/CHANGELOG.json
index 2555ad350..5a0c0db47 100644
--- a/packages/order-utils/CHANGELOG.json
+++ b/packages/order-utils/CHANGELOG.json
@@ -3,15 +3,16 @@
         "version": "2.0.0",
         "changes": [
             {
-                "note": "Added `ecSignOrderAsync` to first sign an order as EIP712 and fallback to EthSign",
+                "note":
+                    "Added `ecSignOrderAsync` to first sign an order using `eth_signTypedData` and fallback to `eth_sign`.",
                 "pr": 1102
             },
             {
-                "note": "Added `ecSignTypedDataOrderAsync` to sign an order exclusively as EIP712",
+                "note": "Added `ecSignTypedDataOrderAsync` to sign an order exclusively using `eth_signTypedData`.",
                 "pr": 1102
             },
             {
-                "note": "Rename `ecSignOrderHashAsync` to `ecSignHashAsync` removing `SignerType` parameter",
+                "note": "Rename `ecSignOrderHashAsync` to `ecSignHashAsync` removing `SignerType` parameter.",
                 "pr": 1102
             }
         ]
diff --git a/packages/order-utils/src/signature_utils.ts b/packages/order-utils/src/signature_utils.ts
index 2605ccd32..372d210d0 100644
--- a/packages/order-utils/src/signature_utils.ts
+++ b/packages/order-utils/src/signature_utils.ts
@@ -210,7 +210,8 @@ export const signatureUtils = {
             // HACK: We are unable to handle specific errors thrown since provider is not an object
             //       under our control. It could be Metamask Web3, Ethers, or any general RPC provider.
             //       We check for a user denying the signature request in a way that supports Metamask and
-            //       Coinbase Wallet
+            //       Coinbase Wallet. Unfortunately for signers with a different error message,
+            //       they will receive two signature requests.
             if (err.message.includes('User denied message signature')) {
                 throw err;
             }
@@ -255,9 +256,7 @@ export const signatureUtils = {
         } catch (err) {
             // Detect if Metamask to transition users to the MetamaskSubprovider
             if ((provider as any).isMetaMask) {
-                throw new Error(
-                    `MetaMask provider must be wrapped in a MetamaskSubprovider (from the '@0xproject/subproviders' package) in order to work with this method.`,
-                );
+                throw new Error(OrderError.InvalidMetamaskSigner);
             } else {
                 throw err;
             }
@@ -313,9 +312,7 @@ export const signatureUtils = {
         }
         // Detect if Metamask to transition users to the MetamaskSubprovider
         if ((provider as any).isMetaMask) {
-            throw new Error(
-                `MetaMask provider must be wrapped in a MetamaskSubprovider (from the '@0xproject/subproviders' package) in order to work with this method.`,
-            );
+            throw new Error(OrderError.InvalidMetamaskSigner);
         } else {
             throw new Error(OrderError.InvalidSignature);
         }
diff --git a/packages/order-utils/src/types.ts b/packages/order-utils/src/types.ts
index 80075270e..5b13dd754 100644
--- a/packages/order-utils/src/types.ts
+++ b/packages/order-utils/src/types.ts
@@ -2,6 +2,7 @@ import { BigNumber } from '@0xproject/utils';
 
 export enum OrderError {
     InvalidSignature = 'INVALID_SIGNATURE',
+    InvalidMetamaskSigner = "MetaMask provider must be wrapped in a MetamaskSubprovider (from the '@0xproject/subproviders' package) in order to work with this method.",
 }
 
 export enum TradeSide {
-- 
cgit v1.2.3


From 31ee8870b80579caf3762c1178043bb5bb6fe4fb Mon Sep 17 00:00:00 2001
From: Leonid Logvinov <logvinov.leon@gmail.com>
Date: Tue, 9 Oct 2018 12:15:42 +0200
Subject: Upgrade ethers.js version

---
 packages/0x.js/package.json             | 2 +-
 packages/base-contract/package.json     | 2 +-
 packages/contract-wrappers/package.json | 2 +-
 packages/contracts/package.json         | 2 +-
 packages/fill-scenarios/package.json    | 2 +-
 packages/metacoin/package.json          | 2 +-
 packages/migrations/package.json        | 2 +-
 packages/order-utils/package.json       | 2 +-
 packages/order-watcher/package.json     | 2 +-
 packages/utils/package.json             | 2 +-
 packages/web3-wrapper/package.json      | 2 +-
 11 files changed, 11 insertions(+), 11 deletions(-)

(limited to 'packages')

diff --git a/packages/0x.js/package.json b/packages/0x.js/package.json
index 6a3074d26..1a57edd45 100644
--- a/packages/0x.js/package.json
+++ b/packages/0x.js/package.json
@@ -84,7 +84,7 @@
         "@0xproject/utils": "^2.0.2",
         "@0xproject/web3-wrapper": "^3.0.3",
         "ethereum-types": "^1.0.11",
-        "ethers": "4.0.0-beta.14",
+        "ethers": "~4.0.4",
         "lodash": "^4.17.5",
         "web3-provider-engine": "14.0.6"
     },
diff --git a/packages/base-contract/package.json b/packages/base-contract/package.json
index 7aac46ab9..4ee471219 100644
--- a/packages/base-contract/package.json
+++ b/packages/base-contract/package.json
@@ -45,7 +45,7 @@
         "@0xproject/utils": "^2.0.2",
         "@0xproject/web3-wrapper": "^3.0.3",
         "ethereum-types": "^1.0.11",
-        "ethers": "4.0.0-beta.14",
+        "ethers": "~4.0.4",
         "lodash": "^4.17.5"
     },
     "publishConfig": {
diff --git a/packages/contract-wrappers/package.json b/packages/contract-wrappers/package.json
index e83caad97..35f27d77c 100644
--- a/packages/contract-wrappers/package.json
+++ b/packages/contract-wrappers/package.json
@@ -84,7 +84,7 @@
         "ethereum-types": "^1.0.11",
         "ethereumjs-blockstream": "6.0.0",
         "ethereumjs-util": "^5.1.1",
-        "ethers": "4.0.0-beta.14",
+        "ethers": "~4.0.4",
         "js-sha3": "^0.7.0",
         "lodash": "^4.17.5",
         "uuid": "^3.1.0"
diff --git a/packages/contracts/package.json b/packages/contracts/package.json
index 081e5f8ee..01d04e645 100644
--- a/packages/contracts/package.json
+++ b/packages/contracts/package.json
@@ -84,7 +84,7 @@
         "ethereum-types": "^1.0.11",
         "ethereumjs-abi": "0.6.5",
         "ethereumjs-util": "^5.1.1",
-        "ethers": "4.0.0-beta.14",
+        "ethers": "~4.0.4",
         "js-combinatorics": "^0.5.3",
         "lodash": "^4.17.5"
     }
diff --git a/packages/fill-scenarios/package.json b/packages/fill-scenarios/package.json
index 0616454d6..dd6ede3e0 100644
--- a/packages/fill-scenarios/package.json
+++ b/packages/fill-scenarios/package.json
@@ -45,7 +45,7 @@
         "@0xproject/utils": "^2.0.2",
         "@0xproject/web3-wrapper": "^3.0.3",
         "ethereum-types": "^1.0.11",
-        "ethers": "4.0.0-beta.14",
+        "ethers": "~4.0.4",
         "lodash": "^4.17.5"
     },
     "publishConfig": {
diff --git a/packages/metacoin/package.json b/packages/metacoin/package.json
index 83082d964..58fc0b848 100644
--- a/packages/metacoin/package.json
+++ b/packages/metacoin/package.json
@@ -41,7 +41,7 @@
         "@types/mocha": "^5.2.2",
         "copyfiles": "^2.0.0",
         "ethereum-types": "^1.0.11",
-        "ethers": "4.0.0-beta.14",
+        "ethers": "~4.0.4",
         "lodash": "^4.17.5",
         "run-s": "^0.0.0"
     },
diff --git a/packages/migrations/package.json b/packages/migrations/package.json
index dcae2c562..2d1b7bfc2 100644
--- a/packages/migrations/package.json
+++ b/packages/migrations/package.json
@@ -54,7 +54,7 @@
         "@0xproject/web3-wrapper": "^3.0.3",
         "@ledgerhq/hw-app-eth": "^4.3.0",
         "ethereum-types": "^1.0.11",
-        "ethers": "4.0.0-beta.14",
+        "ethers": "~4.0.4",
         "lodash": "^4.17.5"
     },
     "optionalDependencies": {
diff --git a/packages/order-utils/package.json b/packages/order-utils/package.json
index 23ed9ca12..6471de9f5 100644
--- a/packages/order-utils/package.json
+++ b/packages/order-utils/package.json
@@ -70,7 +70,7 @@
         "ethereum-types": "^1.0.11",
         "ethereumjs-abi": "0.6.5",
         "ethereumjs-util": "^5.1.1",
-        "ethers": "4.0.0-beta.14",
+        "ethers": "~4.0.4",
         "lodash": "^4.17.5"
     },
     "publishConfig": {
diff --git a/packages/order-watcher/package.json b/packages/order-watcher/package.json
index 1b075b8ea..9bdaef5b1 100644
--- a/packages/order-watcher/package.json
+++ b/packages/order-watcher/package.json
@@ -82,7 +82,7 @@
         "bintrees": "^1.0.2",
         "ethereum-types": "^1.0.11",
         "ethereumjs-blockstream": "6.0.0",
-        "ethers": "4.0.0-beta.14",
+        "ethers": "~4.0.4",
         "lodash": "^4.17.5"
     },
     "publishConfig": {
diff --git a/packages/utils/package.json b/packages/utils/package.json
index f1017f84d..20b0f0c86 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -50,7 +50,7 @@
         "detect-node": "2.0.3",
         "ethereum-types": "^1.0.11",
         "ethereumjs-util": "^5.1.1",
-        "ethers": "4.0.0-beta.14",
+        "ethers": "~4.0.4",
         "isomorphic-fetch": "^2.2.1",
         "js-sha3": "^0.7.0",
         "lodash": "^4.17.5"
diff --git a/packages/web3-wrapper/package.json b/packages/web3-wrapper/package.json
index ef31a68dc..a3f82c87e 100644
--- a/packages/web3-wrapper/package.json
+++ b/packages/web3-wrapper/package.json
@@ -60,7 +60,7 @@
         "@0xproject/utils": "^2.0.2",
         "ethereum-types": "^1.0.11",
         "ethereumjs-util": "^5.1.1",
-        "ethers": "4.0.0-beta.14",
+        "ethers": "~4.0.4",
         "lodash": "^4.17.5"
     },
     "publishConfig": {
-- 
cgit v1.2.3


From 22160df2d2d5aef63c3e2c3f502ac15119b18e07 Mon Sep 17 00:00:00 2001
From: Leonid Logvinov <logvinov.leon@gmail.com>
Date: Tue, 9 Oct 2018 12:55:10 +0200
Subject: Fix ethers build issue

---
 packages/base-contract/src/index.ts             | 9 +++++----
 packages/contract_templates/contract.handlebars | 4 ++--
 packages/utils/src/abi_decoder.ts               | 7 ++++---
 3 files changed, 11 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/base-contract/src/index.ts b/packages/base-contract/src/index.ts
index 981e6fca6..7e0428d92 100644
--- a/packages/base-contract/src/index.ts
+++ b/packages/base-contract/src/index.ts
@@ -12,12 +12,13 @@ import {
     TxDataPayable,
 } from 'ethereum-types';
 import * as ethers from 'ethers';
+import { Interface } from 'ethers/utils/interface';
 import * as _ from 'lodash';
 
 import { formatABIDataItem } from './utils';
 
 export interface EthersInterfaceByFunctionSignature {
-    [key: string]: ethers.Interface;
+    [key: string]: Interface;
 }
 
 const REVERT_ERROR_SELECTOR = '08c379a0';
@@ -101,7 +102,7 @@ export class BaseContract {
     // if it overflows the corresponding Solidity type, there is a bug in the
     // encoder, or the encoder performs unsafe type coercion.
     public static strictArgumentEncodingCheck(inputAbi: DataItem[], args: any[]): void {
-        const coder = new ethers.AbiCoder();
+        const coder = new ethers.utils.AbiCoder();
         const params = abiUtils.parseEthersParams(inputAbi);
         const rawEncoded = coder.encode(inputAbi, args);
         const rawDecoded = coder.decode(inputAbi, rawEncoded);
@@ -117,7 +118,7 @@ export class BaseContract {
             }
         }
     }
-    protected _lookupEthersInterface(functionSignature: string): ethers.Interface {
+    protected _lookupEthersInterface(functionSignature: string): Interface {
         const ethersInterface = this._ethersInterfacesByFunctionSignature[functionSignature];
         if (_.isUndefined(ethersInterface)) {
             throw new Error(`Failed to lookup method with function signature '${functionSignature}'`);
@@ -154,7 +155,7 @@ export class BaseContract {
         this._ethersInterfacesByFunctionSignature = {};
         _.each(methodAbis, methodAbi => {
             const functionSignature = abiUtils.getFunctionSignature(methodAbi);
-            this._ethersInterfacesByFunctionSignature[functionSignature] = new ethers.Interface([methodAbi]);
+            this._ethersInterfacesByFunctionSignature[functionSignature] = new Interface([methodAbi]);
         });
     }
 }
diff --git a/packages/contract_templates/contract.handlebars b/packages/contract_templates/contract.handlebars
index 9ae39f44f..de48779d3 100644
--- a/packages/contract_templates/contract.handlebars
+++ b/packages/contract_templates/contract.handlebars
@@ -5,7 +5,7 @@ import { BaseContract } from '@0xproject/base-contract';
 import { BlockParam, BlockParamLiteral, CallData, ContractAbi, ContractArtifact, DecodedLogArgs, MethodAbi, Provider, TxData, TxDataPayable } from 'ethereum-types';
 import { BigNumber, classUtils, logUtils } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
-import * as ethers from 'ethers';
+import { Interface } from 'ethers/utils/interface';
 import * as _ from 'lodash';
 // tslint:enable:no-unused-variable
 
@@ -65,7 +65,7 @@ export class {{contractName}}Contract extends BaseContract {
             [{{> params inputs=ctor.inputs}}],
             BaseContract._bigNumberToString,
         );
-        const iface = new ethers.Interface(abi);
+        const iface = new Interface(abi);
         const deployInfo = iface.deployFunction;
         const txData = deployInfo.encode(bytecode, [{{> params inputs=ctor.inputs}}]);
         const web3Wrapper = new Web3Wrapper(provider);
diff --git a/packages/utils/src/abi_decoder.ts b/packages/utils/src/abi_decoder.ts
index ea8c91d10..836037f30 100644
--- a/packages/utils/src/abi_decoder.ts
+++ b/packages/utils/src/abi_decoder.ts
@@ -9,7 +9,8 @@ import {
     RawLog,
     SolidityTypes,
 } from 'ethereum-types';
-import * as ethers from 'ethers';
+import { ethers } from 'ethers';
+import { Interface } from 'ethers/utils/interface';
 import * as _ from 'lodash';
 
 import { addressUtils } from './address_utils';
@@ -41,7 +42,7 @@ export class AbiDecoder {
             return log;
         }
         const event = this._methodIds[methodId][numIndexedArgs];
-        const ethersInterface = new ethers.Interface([event]);
+        const ethersInterface = new Interface([event]);
         const decodedParams: DecodedLogArgs = {};
         let topicsIndex = 1;
 
@@ -96,7 +97,7 @@ export class AbiDecoder {
         if (_.isUndefined(abiArray)) {
             return;
         }
-        const ethersInterface = new ethers.Interface(abiArray);
+        const ethersInterface = new Interface(abiArray);
         _.map(abiArray, (abi: AbiDefinition) => {
             if (abi.type === AbiType.Event) {
                 const topic = ethersInterface.events[abi.name].topic;
-- 
cgit v1.2.3


From f93774f855d5735aff975cdb87c61aad624b4c9a Mon Sep 17 00:00:00 2001
From: Leonid Logvinov <logvinov.leon@gmail.com>
Date: Tue, 9 Oct 2018 15:46:13 +0200
Subject: Stop accesing ethers private methods

---
 packages/base-contract/src/index.ts             | 7 +++----
 packages/contract_templates/contract.handlebars | 4 ++--
 packages/utils/src/abi_decoder.ts               | 5 ++---
 3 files changed, 7 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/base-contract/src/index.ts b/packages/base-contract/src/index.ts
index 7e0428d92..a8e4ad2e2 100644
--- a/packages/base-contract/src/index.ts
+++ b/packages/base-contract/src/index.ts
@@ -12,13 +12,12 @@ import {
     TxDataPayable,
 } from 'ethereum-types';
 import * as ethers from 'ethers';
-import { Interface } from 'ethers/utils/interface';
 import * as _ from 'lodash';
 
 import { formatABIDataItem } from './utils';
 
 export interface EthersInterfaceByFunctionSignature {
-    [key: string]: Interface;
+    [key: string]: ethers.utils.Interface;
 }
 
 const REVERT_ERROR_SELECTOR = '08c379a0';
@@ -118,7 +117,7 @@ export class BaseContract {
             }
         }
     }
-    protected _lookupEthersInterface(functionSignature: string): Interface {
+    protected _lookupEthersInterface(functionSignature: string): ethers.utils.Interface {
         const ethersInterface = this._ethersInterfacesByFunctionSignature[functionSignature];
         if (_.isUndefined(ethersInterface)) {
             throw new Error(`Failed to lookup method with function signature '${functionSignature}'`);
@@ -155,7 +154,7 @@ export class BaseContract {
         this._ethersInterfacesByFunctionSignature = {};
         _.each(methodAbis, methodAbi => {
             const functionSignature = abiUtils.getFunctionSignature(methodAbi);
-            this._ethersInterfacesByFunctionSignature[functionSignature] = new Interface([methodAbi]);
+            this._ethersInterfacesByFunctionSignature[functionSignature] = new ethers.utils.Interface([methodAbi]);
         });
     }
 }
diff --git a/packages/contract_templates/contract.handlebars b/packages/contract_templates/contract.handlebars
index de48779d3..41e5c8630 100644
--- a/packages/contract_templates/contract.handlebars
+++ b/packages/contract_templates/contract.handlebars
@@ -5,7 +5,7 @@ import { BaseContract } from '@0xproject/base-contract';
 import { BlockParam, BlockParamLiteral, CallData, ContractAbi, ContractArtifact, DecodedLogArgs, MethodAbi, Provider, TxData, TxDataPayable } from 'ethereum-types';
 import { BigNumber, classUtils, logUtils } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
-import { Interface } from 'ethers/utils/interface';
+import * as ethers from 'ethers';
 import * as _ from 'lodash';
 // tslint:enable:no-unused-variable
 
@@ -65,7 +65,7 @@ export class {{contractName}}Contract extends BaseContract {
             [{{> params inputs=ctor.inputs}}],
             BaseContract._bigNumberToString,
         );
-        const iface = new Interface(abi);
+        const iface = new ethers.utils.Interface(abi);
         const deployInfo = iface.deployFunction;
         const txData = deployInfo.encode(bytecode, [{{> params inputs=ctor.inputs}}]);
         const web3Wrapper = new Web3Wrapper(provider);
diff --git a/packages/utils/src/abi_decoder.ts b/packages/utils/src/abi_decoder.ts
index 836037f30..ac3e54efb 100644
--- a/packages/utils/src/abi_decoder.ts
+++ b/packages/utils/src/abi_decoder.ts
@@ -10,7 +10,6 @@ import {
     SolidityTypes,
 } from 'ethereum-types';
 import { ethers } from 'ethers';
-import { Interface } from 'ethers/utils/interface';
 import * as _ from 'lodash';
 
 import { addressUtils } from './address_utils';
@@ -42,7 +41,7 @@ export class AbiDecoder {
             return log;
         }
         const event = this._methodIds[methodId][numIndexedArgs];
-        const ethersInterface = new Interface([event]);
+        const ethersInterface = new ethers.utils.Interface([event]);
         const decodedParams: DecodedLogArgs = {};
         let topicsIndex = 1;
 
@@ -97,7 +96,7 @@ export class AbiDecoder {
         if (_.isUndefined(abiArray)) {
             return;
         }
-        const ethersInterface = new Interface(abiArray);
+        const ethersInterface = new ethers.utils.Interface(abiArray);
         _.map(abiArray, (abi: AbiDefinition) => {
             if (abi.type === AbiType.Event) {
                 const topic = ethersInterface.events[abi.name].topic;
-- 
cgit v1.2.3


From 764f402eb9bae2131a5eda52fd8d203f8e4bdecf Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 9 Oct 2018 12:00:55 -0700
Subject: Center 0x instant

---
 packages/instant/public/index.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 044a9137b..fb041745e 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -8,9 +8,10 @@
     <script type="text/javascript" src="/main.bundle.js" charset="utf-8"></script>
     <style>
         #zeroExInstantContainer {
-            position: relative;
-            left: 40px;
-            top: 30px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
         }
 
         body {
-- 
cgit v1.2.3


From 941448d65cc42870a93e0430158bfd7ab52fd2cd Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 9 Oct 2018 12:11:12 -0700
Subject: Fix empty input bug

---
 packages/instant/src/components/amount_input.tsx             | 12 ++++++++----
 .../instant/src/containers/selected_asset_amount_input.tsx   |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index 2b64469f6..29d1bf161 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -10,7 +10,7 @@ export interface AmountInputProps {
     fontColor?: ColorOption;
     fontSize?: string;
     value?: BigNumber;
-    onChange?: (value: BigNumber) => void;
+    onChange?: (value?: BigNumber) => void;
 }
 
 export class AmountInput extends React.Component<AmountInputProps> {
@@ -22,7 +22,7 @@ export class AmountInput extends React.Component<AmountInputProps> {
                     fontColor={fontColor}
                     fontSize={fontSize}
                     onChange={this._handleChange}
-                    value={value ? value.toString() : undefined}
+                    value={value ? value.toString() : ''}
                     placeholder="0.00"
                     width="2em"
                 />
@@ -30,9 +30,13 @@ export class AmountInput extends React.Component<AmountInputProps> {
         );
     }
     private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        const bigNumberValue = new BigNumber(event.target.value);
+        const value = event.target.value;
+        let bigNumberValue;
+        if (!_.isEmpty(value)) {
+            bigNumberValue = new BigNumber(event.target.value);
+        }
         if (!_.isUndefined(this.props.onChange)) {
             this.props.onChange(bigNumberValue);
         }
-    }
+    };
 }
diff --git a/packages/instant/src/containers/selected_asset_amount_input.tsx b/packages/instant/src/containers/selected_asset_amount_input.tsx
index 818caa965..800a4c568 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.tsx
+++ b/packages/instant/src/containers/selected_asset_amount_input.tsx
@@ -19,7 +19,7 @@ interface ConnectedState {
 }
 
 interface ConnectedDispatch {
-    onChange?: (value: BigNumber) => void;
+    onChange?: (value?: BigNumber) => void;
 }
 
 const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps): ConnectedState => ({
-- 
cgit v1.2.3


From f2fdb6e47dd07a034d5be4fc3e0edca863e38aaa Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 9 Oct 2018 14:28:54 -0700
Subject: Add comments for expiryBuffer

---
 packages/asset-buyer/src/constants.ts | 2 +-
 packages/asset-buyer/src/types.ts     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/asset-buyer/src/constants.ts b/packages/asset-buyer/src/constants.ts
index bc168e462..e095dee06 100644
--- a/packages/asset-buyer/src/constants.ts
+++ b/packages/asset-buyer/src/constants.ts
@@ -8,7 +8,7 @@ const MAINNET_NETWORK_ID = 1;
 const DEFAULT_ASSET_BUYER_OPTS: AssetBuyerOpts = {
     networkId: MAINNET_NETWORK_ID,
     orderRefreshIntervalMs: 10000, // 10 seconds
-    expiryBufferSeconds: 300,
+    expiryBufferSeconds: 300, // 5 minutes
 };
 
 const DEFAULT_BUY_QUOTE_REQUEST_OPTS: BuyQuoteRequestOpts = {
diff --git a/packages/asset-buyer/src/types.ts b/packages/asset-buyer/src/types.ts
index 90502ac69..6218f4ba4 100644
--- a/packages/asset-buyer/src/types.ts
+++ b/packages/asset-buyer/src/types.ts
@@ -92,7 +92,7 @@ export interface BuyQuoteExecutionOpts {
 /**
  * networkId: The ethereum network id. Defaults to 1 (mainnet).
  * orderRefreshIntervalMs: The interval in ms that getBuyQuoteAsync should trigger an refresh of orders and order states. Defaults to 10000ms (10s).
- * expiryBufferSeconds: The number of seconds to add when calculating whether an order is expired or not. Defaults to 15s.
+ * expiryBufferSeconds: The number of seconds to add when calculating whether an order is expired or not. Defaults to 300s (5m).
  */
 export interface AssetBuyerOpts {
     networkId: number;
-- 
cgit v1.2.3


From cd8e6d9cdf7d6aa1e811bb7d9d7017da342907ed Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 9 Oct 2018 16:36:19 -0700
Subject: Update the CHANGELOG

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

(limited to 'packages')

diff --git a/packages/asset-buyer/CHANGELOG.json b/packages/asset-buyer/CHANGELOG.json
index d50a564dc..dbb801b69 100644
--- a/packages/asset-buyer/CHANGELOG.json
+++ b/packages/asset-buyer/CHANGELOG.json
@@ -1,4 +1,12 @@
 [
+    {
+        "version": "2.1.0",
+        "changes": [
+            {
+                "note": "Add `gasLimit` and `gasPrice` as optional properties on `BuyQuoteExecutionOpts`"
+            }
+        ]
+    },
     {
         "version": "2.0.0",
         "changes": [
-- 
cgit v1.2.3


From 402089db4e1776c826119ed3555c05f61c198953 Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Wed, 10 Oct 2018 11:31:27 +1100
Subject: fix: [testnet-faucet] Signing of orders

Signing of orders changed in order-utils but forgot to update testnet faucet
---
 packages/testnet-faucets/src/ts/handler.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/testnet-faucets/src/ts/handler.ts b/packages/testnet-faucets/src/ts/handler.ts
index e73eb1744..be42ebde8 100644
--- a/packages/testnet-faucets/src/ts/handler.ts
+++ b/packages/testnet-faucets/src/ts/handler.ts
@@ -9,7 +9,6 @@ import {
     RPCSubprovider,
     signatureUtils,
     SignedOrder,
-    SignerType,
     Web3ProviderEngine,
 } from '0x.js';
 import { NonceTrackerSubprovider, PrivateKeyWalletSubprovider } from '@0xproject/subproviders';
@@ -180,11 +179,10 @@ export class Handler {
             expirationTimeSeconds: new BigNumber(Date.now() + FIVE_DAYS_IN_MS).div(1000).floor(),
         };
         const orderHash = orderHashUtils.getOrderHashHex(order);
-        const signature = await signatureUtils.ecSignOrderHashAsync(
+        const signature = await signatureUtils.ecSignHashAsync(
             networkConfig.web3Wrapper.getProvider(),
             orderHash,
             configs.DISPENSER_ADDRESS,
-            SignerType.Default,
         );
         const signedOrder: SignedOrder = {
             ...order,
-- 
cgit v1.2.3


From a165f5d25b84586f5b9079d523828df9ef3f1f8c Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 9 Oct 2018 18:41:31 -0700
Subject: Change tslint config to remove conflicts with prettier

---
 packages/instant/tslint.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/tslint.json b/packages/instant/tslint.json
index 1ab924e47..f71532e5d 100644
--- a/packages/instant/tslint.json
+++ b/packages/instant/tslint.json
@@ -1,6 +1,7 @@
 {
     "extends": ["@0xproject/tslint-config"],
     "rules": {
-        "custom-no-magic-numbers": false
+        "custom-no-magic-numbers": false,
+        "semicolon": [true, "always", "ignore-bound-class-methods"]
     }
 }
-- 
cgit v1.2.3


From 6c0d31738062b113bd34b5438a2e3c8bfbfb385b Mon Sep 17 00:00:00 2001
From: Leonid Logvinov <logvinov.leon@gmail.com>
Date: Wed, 10 Oct 2018 14:44:50 +0200
Subject: Initial project scaffolding

---
 packages/dev-tools-pages/README.md                 |  59 ++++++++++++++++
 packages/dev-tools-pages/less/all.less             |   0
 packages/dev-tools-pages/package.json              |  54 +++++++++++++++
 .../public/images/favicon/favicon-2-16x16.png      | Bin 0 -> 684 bytes
 .../public/images/favicon/favicon-2-32x32.png      | Bin 0 -> 1567 bytes
 .../public/images/favicon/favicon.ico              | Bin 0 -> 5430 bytes
 packages/dev-tools-pages/public/index.html         |  22 ++++++
 .../dev-tools-pages/ts/components/meta_tags.tsx    |  25 +++++++
 packages/dev-tools-pages/ts/globals.d.ts           |   9 +++
 packages/dev-tools-pages/ts/index.tsx              |  15 ++++
 .../dev-tools-pages/ts/pages/landing/landing.tsx   |  15 ++++
 packages/dev-tools-pages/ts/utils/utils.ts         |  32 +++++++++
 packages/dev-tools-pages/tsconfig.json             |  21 ++++++
 packages/dev-tools-pages/tslint.json               |  10 +++
 packages/dev-tools-pages/webpack.config.js         |  77 +++++++++++++++++++++
 15 files changed, 339 insertions(+)
 create mode 100644 packages/dev-tools-pages/README.md
 create mode 100644 packages/dev-tools-pages/less/all.less
 create mode 100644 packages/dev-tools-pages/package.json
 create mode 100755 packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png
 create mode 100755 packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png
 create mode 100755 packages/dev-tools-pages/public/images/favicon/favicon.ico
 create mode 100644 packages/dev-tools-pages/public/index.html
 create mode 100644 packages/dev-tools-pages/ts/components/meta_tags.tsx
 create mode 100644 packages/dev-tools-pages/ts/globals.d.ts
 create mode 100644 packages/dev-tools-pages/ts/index.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/landing/landing.tsx
 create mode 100644 packages/dev-tools-pages/ts/utils/utils.ts
 create mode 100644 packages/dev-tools-pages/tsconfig.json
 create mode 100644 packages/dev-tools-pages/tslint.json
 create mode 100644 packages/dev-tools-pages/webpack.config.js

(limited to 'packages')

diff --git a/packages/dev-tools-pages/README.md b/packages/dev-tools-pages/README.md
new file mode 100644
index 000000000..ce8edc103
--- /dev/null
+++ b/packages/dev-tools-pages/README.md
@@ -0,0 +1,59 @@
+## Dev tools pages
+
+This repository contains our dev tools pages.
+
+## Contributing
+
+We strongly recommend that the community help us make improvements and determine the future direction of the protocol. To report bugs within this package, please create an issue in this repository.
+
+Please read our [contribution guidelines](../../CONTRIBUTING.md) before getting started.
+
+## Local Dev Setup
+
+Requires Node version 6.9.5 or higher
+
+### Install dependencies:
+
+```bash
+yarn install
+```
+
+### Initial setup
+
+To build this package and all other monorepo packages that it depends on, run the following from the monorepo root directory:
+
+```bash
+PKG=@0xproject/dev-tools-pages yarn build
+```
+
+### Run dev server
+
+```bash
+PKG=@0xproject/dev-tools-pages yarn watch
+```
+
+Visit [http://localhost:3572/](http://localhost:3572/) in your browser.
+
+### Clean
+
+```bash
+yarn clean
+```
+
+### Lint
+
+```bash
+yarn lint
+```
+
+### Resources
+
+##### Toolkit
+
+*   [Styled Components](https://www.styled-components.com/)
+*   [Rebass](https://rebassjs.org/)
+
+##### Recommended Atom packages:
+
+*   [atom-typescript](https://atom.io/packages/atom-typescript)
+*   [linter-tslint](https://atom.io/packages/linter-tslint)
diff --git a/packages/dev-tools-pages/less/all.less b/packages/dev-tools-pages/less/all.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json
new file mode 100644
index 000000000..436f2f5b1
--- /dev/null
+++ b/packages/dev-tools-pages/package.json
@@ -0,0 +1,54 @@
+{
+    "name": "@0xproject/dev-tools-pages",
+    "version": "0.0.1",
+    "engines": {
+        "node": ">=6.12"
+    },
+    "private": true,
+    "description": "0x Dev tools pages",
+    "scripts": {
+        "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production",
+        "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'",
+        "dev": "webpack-dev-server --mode development --content-base public"
+    },
+    "license": "Apache-2.0",
+    "dependencies": {
+        "basscss": "^8.0.3",
+        "less": "^2.7.2",
+        "lodash": "^4.17.5",
+        "react": "^16.4.2",
+        "react-document-title": "^2.0.3",
+        "react-dom": "^16.4.2",
+        "react-helmet": "^5.2.0",
+        "styled-components": "^3.3.0"
+    },
+    "devDependencies": {
+        "@types/lodash": "4.14.104",
+        "@types/node": "*",
+        "@types/react": "^16.4.2",
+        "@types/react-dom": "^16.0.7",
+        "@types/react-helmet": "^5.0.6",
+        "@types/react-router-dom": "^4.0.4",
+        "@types/react-tap-event-plugin": "0.0.30",
+        "awesome-typescript-loader": "^5.2.1",
+        "copyfiles": "^2.0.0",
+        "css-loader": "0.23.x",
+        "less-loader": "^4.1.0",
+        "make-promises-safe": "^1.1.0",
+        "raw-loader": "^0.5.1",
+        "shx": "^0.2.2",
+        "source-map-loader": "^0.2.4",
+        "style-loader": "0.23.x",
+        "terser-webpack-plugin": "^1.1.0",
+        "tslint": "5.11.0",
+        "tslint-config-0xproject": "^0.0.2",
+        "typescript": "3.0.1",
+        "uglifyjs-webpack-plugin": "^2.0.1",
+        "webpack": "^4.20.2",
+        "webpack-cli": "3.1.2",
+        "webpack-dev-server": "^3.1.9"
+    }
+}
diff --git a/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png b/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png
new file mode 100755
index 000000000..68c493c4f
Binary files /dev/null and b/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png differ
diff --git a/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png b/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png
new file mode 100755
index 000000000..a5abb0eb3
Binary files /dev/null and b/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png differ
diff --git a/packages/dev-tools-pages/public/images/favicon/favicon.ico b/packages/dev-tools-pages/public/images/favicon/favicon.ico
new file mode 100755
index 000000000..b7ada2a1c
Binary files /dev/null and b/packages/dev-tools-pages/public/images/favicon/favicon.ico differ
diff --git a/packages/dev-tools-pages/public/index.html b/packages/dev-tools-pages/public/index.html
new file mode 100644
index 000000000..5137eed95
--- /dev/null
+++ b/packages/dev-tools-pages/public/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="0x" />
+    <meta property="og:description" content="" />
+    <meta property="og:image" content="/images/og_image.png" />
+    <title>0x: The Protocol for Trading Tokens</title>
+    <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" />
+</head>
+
+<body style="margin: 0px; min-width: 355px;">
+    <div id="app"></div>
+    <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/meta_tags.tsx b/packages/dev-tools-pages/ts/components/meta_tags.tsx
new file mode 100644
index 000000000..f6c43d23f
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/meta_tags.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+export interface MetaTagsProps {
+    title: string;
+    description: string;
+    imgSrc?: string;
+}
+
+export const MetaTags: React.StatelessComponent<MetaTagsProps> = ({ title, description, imgSrc }) => (
+    <Helmet>
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        <meta property="og:type" content="website" />
+        <meta property="og:image" content={imgSrc} />
+        <meta name="twitter:site" content="@0xproject" />
+        <meta name="twitter:image" content={imgSrc} />
+    </Helmet>
+);
+
+MetaTags.defaultProps = {
+    imgSrc: '/images/og_image.png',
+};
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
new file mode 100644
index 000000000..d0890161c
--- /dev/null
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -0,0 +1,9 @@
+declare module 'whatwg-fetch';
+declare module 'react-document-title';
+
+declare module '*.json' {
+    const json: any;
+    /* tslint:disable */
+    export default json;
+    /* tslint:enable */
+}
diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx
new file mode 100644
index 000000000..f4db2ea3c
--- /dev/null
+++ b/packages/dev-tools-pages/ts/index.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { render } from 'react-dom';
+import { MetaTags } from 'ts/components/meta_tags';
+import { Landing } from 'ts/pages/landing/landing';
+
+const DOCUMENT_TITLE = '';
+const DOCUMENT_DESCRIPTION = '';
+
+render(
+    <div>
+        <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} />
+        <Landing />
+    </div>,
+    document.getElementById('app'),
+);
diff --git a/packages/dev-tools-pages/ts/pages/landing/landing.tsx b/packages/dev-tools-pages/ts/pages/landing/landing.tsx
new file mode 100644
index 000000000..a6cb89a7b
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/landing/landing.tsx
@@ -0,0 +1,15 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+interface LandingProps {}
+
+interface LandingState {}
+
+export class Landing extends React.Component<LandingProps, LandingState> {
+    constructor(props: LandingProps) {
+        super(props);
+    }
+    public render(): React.ReactNode {
+        return <div id="landing" className="clearfix" />;
+    }
+}
diff --git a/packages/dev-tools-pages/ts/utils/utils.ts b/packages/dev-tools-pages/ts/utils/utils.ts
new file mode 100644
index 000000000..b274706a2
--- /dev/null
+++ b/packages/dev-tools-pages/ts/utils/utils.ts
@@ -0,0 +1,32 @@
+import * as bowser from 'bowser';
+import * as _ from 'lodash';
+
+export const utils = {
+    getColSize(items: number): number {
+        const bassCssGridSize = 12; // Source: http://basscss.com/#basscss-grid
+        const colSize = bassCssGridSize / items;
+        if (!_.isInteger(colSize)) {
+            throw new Error(`Number of cols must be divisible by ${bassCssGridSize}`);
+        }
+        return colSize;
+    },
+    getCurrentBaseUrl(): string {
+        const port = window.location.port;
+        const hasPort = !_.isUndefined(port);
+        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
+        return baseUrl;
+    },
+    onPageLoadPromise: new Promise<void>((resolve, _reject) => {
+        if (document.readyState === 'complete') {
+            resolve();
+            return;
+        }
+        window.onload = () => resolve();
+    }),
+    openUrl(url: string): void {
+        window.open(url, '_blank');
+    },
+    isMobileOperatingSystem(): boolean {
+        return bowser.mobile;
+    },
+};
diff --git a/packages/dev-tools-pages/tsconfig.json b/packages/dev-tools-pages/tsconfig.json
new file mode 100644
index 000000000..f5d4f62c2
--- /dev/null
+++ b/packages/dev-tools-pages/tsconfig.json
@@ -0,0 +1,21 @@
+{
+    "extends": "../../tsconfig",
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "outDir": "./transpiled/",
+        "jsx": "react",
+        "baseUrl": "./",
+        // tsconfig.json at the monorepo root contains some options required for
+        // project references which do not work for website. We override those
+        // options here.
+        "declaration": false,
+        "declarationMap": false,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "composite": false,
+        "paths": {
+            "*": ["node_modules/@types/*", "*"]
+        }
+    },
+    "include": ["./ts/**/*"]
+}
diff --git a/packages/dev-tools-pages/tslint.json b/packages/dev-tools-pages/tslint.json
new file mode 100644
index 000000000..b55ffe90f
--- /dev/null
+++ b/packages/dev-tools-pages/tslint.json
@@ -0,0 +1,10 @@
+{
+    "extends": ["@0xproject/tslint-config"],
+    "rules": {
+        "no-implicit-dependencies": false,
+        "no-object-literal-type-assertion": false,
+        "completed-docs": false,
+        "prefer-function-over-method": false,
+        "custom-no-magic-numbers": false
+    }
+}
diff --git a/packages/dev-tools-pages/webpack.config.js b/packages/dev-tools-pages/webpack.config.js
new file mode 100644
index 000000000..1df41212f
--- /dev/null
+++ b/packages/dev-tools-pages/webpack.config.js
@@ -0,0 +1,77 @@
+const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const childProcess = require('child_process');
+
+const config = {
+    entry: ['./ts/index.tsx'],
+    output: {
+        path: path.join(__dirname, '/public'),
+        filename: 'bundle.js',
+        chunkFilename: 'bundle-[name].js',
+        publicPath: '/',
+    },
+    devtool: 'source-map',
+    resolve: {
+        modules: [path.join(__dirname, '/ts'), 'node_modules'],
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+        alias: {
+            ts: path.join(__dirname, '/ts'),
+            less: path.join(__dirname, '/less'),
+        },
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [
+                    // instead of /\/node_modules\//
+                    path.join(process.cwd(), 'node_modules'),
+                    path.join(process.cwd(), '../..', 'node_modules'),
+                ],
+            },
+            {
+                test: /\.tsx?$/,
+                loader: 'awesome-typescript-loader',
+            },
+            {
+                test: /\.md$/,
+                use: 'raw-loader',
+            },
+        ],
+    },
+    optimization: {
+        minimizer: [
+            new TerserPlugin({
+                sourceMap: true,
+            }),
+        ],
+    },
+    devServer: {
+        port: 3572,
+        disableHostCheck: true,
+    },
+};
+
+module.exports = (_env, argv) => {
+    let plugins = [];
+    if (argv.mode === 'development') {
+        config.mode = 'development';
+    } else {
+        config.mode = 'production';
+        plugins = plugins.concat([
+            new webpack.DefinePlugin({
+                'process.env': {
+                    NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+                },
+            }),
+        ]);
+    }
+    console.log('i ｢atl｣: Mode: ', config.mode);
+
+    config.plugins = plugins;
+    console.log('i ｢atl｣: Plugin Count: ', config.plugins.length);
+
+    return config;
+};
-- 
cgit v1.2.3


From fb882b0c7710151af7024c510d853f828a54f43a Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 10 Oct 2018 17:22:31 +0200
Subject: Add stuff

---
 packages/dev-tools-pages/package.json              |   4 +
 .../public/css/basscss_responsive_custom.css       |  85 ++++
 .../public/css/basscss_responsive_margin.css       | 453 +++++++++++++++++++++
 .../public/css/basscss_responsive_padding.css      | 134 ++++++
 .../public/css/basscss_responsive_type_scale.css   |  35 ++
 packages/dev-tools-pages/public/index.html         |   4 +
 .../dev-tools-pages/ts/components/ui/button.tsx    |  60 +++
 .../dev-tools-pages/ts/components/ui/container.tsx |  55 +++
 packages/dev-tools-pages/ts/components/ui/text.tsx |  74 ++++
 packages/dev-tools-pages/ts/index.tsx              |   4 +-
 packages/dev-tools-pages/ts/pages/landing.tsx      |  22 +
 .../dev-tools-pages/ts/pages/landing/landing.tsx   |  15 -
 packages/dev-tools-pages/tsconfig.json             |   5 +-
 packages/dev-tools-pages/webpack.config.js         |   9 +
 14 files changed, 941 insertions(+), 18 deletions(-)
 create mode 100644 packages/dev-tools-pages/public/css/basscss_responsive_custom.css
 create mode 100644 packages/dev-tools-pages/public/css/basscss_responsive_margin.css
 create mode 100644 packages/dev-tools-pages/public/css/basscss_responsive_padding.css
 create mode 100644 packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css
 create mode 100644 packages/dev-tools-pages/ts/components/ui/button.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/ui/container.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/ui/text.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/landing.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/landing/landing.tsx

(limited to 'packages')

diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json
index 436f2f5b1..f73260544 100644
--- a/packages/dev-tools-pages/package.json
+++ b/packages/dev-tools-pages/package.json
@@ -16,9 +16,12 @@
     },
     "license": "Apache-2.0",
     "dependencies": {
+        "@0xproject/react-shared": "^1.0.15",
         "basscss": "^8.0.3",
+        "bowser": "^1.9.3",
         "less": "^2.7.2",
         "lodash": "^4.17.5",
+        "polished": "^1.9.2",
         "react": "^16.4.2",
         "react-document-title": "^2.0.3",
         "react-dom": "^16.4.2",
@@ -33,6 +36,7 @@
         "@types/react-helmet": "^5.0.6",
         "@types/react-router-dom": "^4.0.4",
         "@types/react-tap-event-plugin": "0.0.30",
+        "@types/styled-components": "^4.0.0",
         "awesome-typescript-loader": "^5.2.1",
         "copyfiles": "^2.0.0",
         "css-loader": "0.23.x",
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_custom.css b/packages/dev-tools-pages/public/css/basscss_responsive_custom.css
new file mode 100644
index 000000000..5f8bd9117
--- /dev/null
+++ b/packages/dev-tools-pages/public/css/basscss_responsive_custom.css
@@ -0,0 +1,85 @@
+/* Custom Basscss Responsive Utilities */
+
+@media (max-width: 52em) {
+    .sm-center {
+        text-align: center;
+    }
+    .sm-align-middle {
+        vertical-align: middle;
+    }
+    .sm-align-top {
+        vertical-align: top;
+    }
+    .sm-left-align {
+        text-align: left;
+    }
+    .sm-right-align {
+        text-align: right;
+    }
+    .sm-table-cell {
+        display: table-cell;
+    }
+    .sm-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .sm-right {
+        float: right;
+    }
+}
+
+@media (min-width: 52em) {
+    .md-center {
+        text-align: center;
+    }
+    .md-align-middle {
+        vertical-align: middle;
+    }
+    .md-align-top {
+        vertical-align: top;
+    }
+    .md-left-align {
+        text-align: left;
+    }
+    .md-right-align {
+        text-align: right;
+    }
+    .md-table-cell {
+        display: table-cell;
+    }
+    .md-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .md-right {
+        float: right;
+    }
+}
+
+@media (min-width: 64em) {
+    .lg-center {
+        text-align: center;
+    }
+    .lg-align-middle {
+        vertical-align: middle;
+    }
+    .lg-align-top {
+        vertical-align: top;
+    }
+    .lg-left-align {
+        text-align: left;
+    }
+    .lg-right-align {
+        text-align: right;
+    }
+    .lg-table-cell {
+        display: table-cell;
+    }
+    .lg-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .lg-right {
+        float: right;
+    }
+}
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_margin.css b/packages/dev-tools-pages/public/css/basscss_responsive_margin.css
new file mode 100644
index 000000000..c9f3e855c
--- /dev/null
+++ b/packages/dev-tools-pages/public/css/basscss_responsive_margin.css
@@ -0,0 +1,453 @@
+/* Basscss Responsive Margin */
+
+@media (max-width: 52em) {
+    /* Modified by Fabio Berger to max-width from min-width */
+
+    .sm-m0 {
+        margin: 0;
+    }
+    .sm-mt0 {
+        margin-top: 0;
+    }
+    .sm-mr0 {
+        margin-right: 0;
+    }
+    .sm-mb0 {
+        margin-bottom: 0;
+    }
+    .sm-ml0 {
+        margin-left: 0;
+    }
+    .sm-mx0 {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .sm-my0 {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .sm-m1 {
+        margin: 0.5rem;
+    }
+    .sm-mt1 {
+        margin-top: 0.5rem;
+    }
+    .sm-mr1 {
+        margin-right: 0.5rem;
+    }
+    .sm-mb1 {
+        margin-bottom: 0.5rem;
+    }
+    .sm-ml1 {
+        margin-left: 0.5rem;
+    }
+    .sm-mx1 {
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+    }
+    .sm-my1 {
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .sm-m2 {
+        margin: 1rem;
+    }
+    .sm-mt2 {
+        margin-top: 1rem;
+    }
+    .sm-mr2 {
+        margin-right: 1rem;
+    }
+    .sm-mb2 {
+        margin-bottom: 1rem;
+    }
+    .sm-ml2 {
+        margin-left: 1rem;
+    }
+    .sm-mx2 {
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+    .sm-my2 {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    .sm-m3 {
+        margin: 2rem;
+    }
+    .sm-mt3 {
+        margin-top: 2rem;
+    }
+    .sm-mr3 {
+        margin-right: 2rem;
+    }
+    .sm-mb3 {
+        margin-bottom: 2rem;
+    }
+    .sm-ml3 {
+        margin-left: 2rem;
+    }
+    .sm-mx3 {
+        margin-left: 2rem;
+        margin-right: 2rem;
+    }
+    .sm-my3 {
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    .sm-m4 {
+        margin: 4rem;
+    }
+    .sm-mt4 {
+        margin-top: 4rem;
+    }
+    .sm-mr4 {
+        margin-right: 4rem;
+    }
+    .sm-mb4 {
+        margin-bottom: 4rem;
+    }
+    .sm-ml4 {
+        margin-left: 4rem;
+    }
+    .sm-mx4 {
+        margin-left: 4rem;
+        margin-right: 4rem;
+    }
+    .sm-my4 {
+        margin-top: 4rem;
+        margin-bottom: 4rem;
+    }
+
+    .sm-mxn1 {
+        margin-left: -0.5rem;
+        margin-right: -0.5rem;
+    }
+    .sm-mxn2 {
+        margin-left: -1rem;
+        margin-right: -1rem;
+    }
+    .sm-mxn3 {
+        margin-left: -2rem;
+        margin-right: -2rem;
+    }
+    .sm-mxn4 {
+        margin-left: -4rem;
+        margin-right: -4rem;
+    }
+
+    .sm-ml-auto {
+        margin-left: auto;
+    }
+    .sm-mr-auto {
+        margin-right: auto;
+    }
+    .sm-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+@media (min-width: 52em) {
+    .md-m0 {
+        margin: 0;
+    }
+    .md-mt0 {
+        margin-top: 0;
+    }
+    .md-mr0 {
+        margin-right: 0;
+    }
+    .md-mb0 {
+        margin-bottom: 0;
+    }
+    .md-ml0 {
+        margin-left: 0;
+    }
+    .md-mx0 {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .md-my0 {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .md-m1 {
+        margin: 0.5rem;
+    }
+    .md-mt1 {
+        margin-top: 0.5rem;
+    }
+    .md-mr1 {
+        margin-right: 0.5rem;
+    }
+    .md-mb1 {
+        margin-bottom: 0.5rem;
+    }
+    .md-ml1 {
+        margin-left: 0.5rem;
+    }
+    .md-mx1 {
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+    }
+    .md-my1 {
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .md-m2 {
+        margin: 1rem;
+    }
+    .md-mt2 {
+        margin-top: 1rem;
+    }
+    .md-mr2 {
+        margin-right: 1rem;
+    }
+    .md-mb2 {
+        margin-bottom: 1rem;
+    }
+    .md-ml2 {
+        margin-left: 1rem;
+    }
+    .md-mx2 {
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+    .md-my2 {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    .md-m3 {
+        margin: 2rem;
+    }
+    .md-mt3 {
+        margin-top: 2rem;
+    }
+    .md-mr3 {
+        margin-right: 2rem;
+    }
+    .md-mb3 {
+        margin-bottom: 2rem;
+    }
+    .md-ml3 {
+        margin-left: 2rem;
+    }
+    .md-mx3 {
+        margin-left: 2rem;
+        margin-right: 2rem;
+    }
+    .md-my3 {
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    .md-m4 {
+        margin: 4rem;
+    }
+    .md-mt4 {
+        margin-top: 4rem;
+    }
+    .md-mr4 {
+        margin-right: 4rem;
+    }
+    .md-mb4 {
+        margin-bottom: 4rem;
+    }
+    .md-ml4 {
+        margin-left: 4rem;
+    }
+    .md-mx4 {
+        margin-left: 4rem;
+        margin-right: 4rem;
+    }
+    .md-my4 {
+        margin-top: 4rem;
+        margin-bottom: 4rem;
+    }
+
+    .md-mxn1 {
+        margin-left: -0.5rem;
+        margin-right: -0.5rem;
+    }
+    .md-mxn2 {
+        margin-left: -1rem;
+        margin-right: -1rem;
+    }
+    .md-mxn3 {
+        margin-left: -2rem;
+        margin-right: -2rem;
+    }
+    .md-mxn4 {
+        margin-left: -4rem;
+        margin-right: -4rem;
+    }
+
+    .md-ml-auto {
+        margin-left: auto;
+    }
+    .md-mr-auto {
+        margin-right: auto;
+    }
+    .md-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+@media (min-width: 64em) {
+    .lg-m0 {
+        margin: 0;
+    }
+    .lg-mt0 {
+        margin-top: 0;
+    }
+    .lg-mr0 {
+        margin-right: 0;
+    }
+    .lg-mb0 {
+        margin-bottom: 0;
+    }
+    .lg-ml0 {
+        margin-left: 0;
+    }
+    .lg-mx0 {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .lg-my0 {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .lg-m1 {
+        margin: 0.5rem;
+    }
+    .lg-mt1 {
+        margin-top: 0.5rem;
+    }
+    .lg-mr1 {
+        margin-right: 0.5rem;
+    }
+    .lg-mb1 {
+        margin-bottom: 0.5rem;
+    }
+    .lg-ml1 {
+        margin-left: 0.5rem;
+    }
+    .lg-mx1 {
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+    }
+    .lg-my1 {
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .lg-m2 {
+        margin: 1rem;
+    }
+    .lg-mt2 {
+        margin-top: 1rem;
+    }
+    .lg-mr2 {
+        margin-right: 1rem;
+    }
+    .lg-mb2 {
+        margin-bottom: 1rem;
+    }
+    .lg-ml2 {
+        margin-left: 1rem;
+    }
+    .lg-mx2 {
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+    .lg-my2 {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    .lg-m3 {
+        margin: 2rem;
+    }
+    .lg-mt3 {
+        margin-top: 2rem;
+    }
+    .lg-mr3 {
+        margin-right: 2rem;
+    }
+    .lg-mb3 {
+        margin-bottom: 2rem;
+    }
+    .lg-ml3 {
+        margin-left: 2rem;
+    }
+    .lg-mx3 {
+        margin-left: 2rem;
+        margin-right: 2rem;
+    }
+    .lg-my3 {
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    .lg-m4 {
+        margin: 4rem;
+    }
+    .lg-mt4 {
+        margin-top: 4rem;
+    }
+    .lg-mr4 {
+        margin-right: 4rem;
+    }
+    .lg-mb4 {
+        margin-bottom: 4rem;
+    }
+    .lg-ml4 {
+        margin-left: 4rem;
+    }
+    .lg-mx4 {
+        margin-left: 4rem;
+        margin-right: 4rem;
+    }
+    .lg-my4 {
+        margin-top: 4rem;
+        margin-bottom: 4rem;
+    }
+
+    .lg-mxn1 {
+        margin-left: -0.5rem;
+        margin-right: -0.5rem;
+    }
+    .lg-mxn2 {
+        margin-left: -1rem;
+        margin-right: -1rem;
+    }
+    .lg-mxn3 {
+        margin-left: -2rem;
+        margin-right: -2rem;
+    }
+    .lg-mxn4 {
+        margin-left: -4rem;
+        margin-right: -4rem;
+    }
+
+    .lg-ml-auto {
+        margin-left: auto;
+    }
+    .lg-mr-auto {
+        margin-right: auto;
+    }
+    .lg-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_padding.css b/packages/dev-tools-pages/public/css/basscss_responsive_padding.css
new file mode 100644
index 000000000..e027c2d65
--- /dev/null
+++ b/packages/dev-tools-pages/public/css/basscss_responsive_padding.css
@@ -0,0 +1,134 @@
+/* Basscss Responsive Padding */
+/* Modified by Fabio Berger to include xs prefix */
+
+@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
+
+  .sm-p0  { padding:        0 }
+  .sm-pt0 { padding-top:    0 }
+  .sm-pr0 { padding-right:  0 }
+  .sm-pb0 { padding-bottom: 0 }
+  .sm-pl0 { padding-left:   0 }
+  .sm-px0 { padding-left:   0; padding-right:  0 }
+  .sm-py0 { padding-top:    0; padding-bottom: 0 }
+
+  .sm-p1  { padding:        .5rem }
+  .sm-pt1 { padding-top:        .5rem }
+  .sm-pr1 { padding-right:        .5rem }
+  .sm-pb1 { padding-bottom:        .5rem }
+  .sm-pl1 { padding-left:        .5rem }
+  .sm-px1 { padding-left:        .5rem; padding-right:        .5rem }
+  .sm-py1 { padding-top:        .5rem; padding-bottom:        .5rem }
+
+  .sm-p2  { padding:        1rem }
+  .sm-pt2 { padding-top:        1rem }
+  .sm-pr2 { padding-right:        1rem }
+  .sm-pb2 { padding-bottom:        1rem }
+  .sm-pl2 { padding-left:        1rem }
+  .sm-px2 { padding-left:        1rem; padding-right:        1rem }
+  .sm-py2 { padding-top:        1rem; padding-bottom:        1rem }
+
+  .sm-p3  { padding:        2rem }
+  .sm-pt3 { padding-top:        2rem }
+  .sm-pr3 { padding-right:        2rem }
+  .sm-pb3 { padding-bottom:        2rem }
+  .sm-pl3 { padding-left:        2rem }
+  .sm-px3 { padding-left:        2rem; padding-right:        2rem }
+  .sm-py3 { padding-top:        2rem; padding-bottom:        2rem }
+
+  .sm-p4  { padding:        4rem }
+  .sm-pt4 { padding-top:        4rem }
+  .sm-pr4 { padding-right:        4rem }
+  .sm-pb4 { padding-bottom:        4rem }
+  .sm-pl4 { padding-left:        4rem }
+  .sm-px4 { padding-left:        4rem; padding-right:        4rem }
+  .sm-py4 { padding-top:        4rem; padding-bottom:        4rem }
+
+}
+
+@media (min-width: 52em) {
+
+  .md-p0  { padding:        0 }
+  .md-pt0 { padding-top:    0 }
+  .md-pr0 { padding-right:  0 }
+  .md-pb0 { padding-bottom: 0 }
+  .md-pl0 { padding-left:   0 }
+  .md-px0 { padding-left:   0; padding-right:  0 }
+  .md-py0 { padding-top:    0; padding-bottom: 0 }
+
+  .md-p1  { padding:        .5rem }
+  .md-pt1 { padding-top:        .5rem }
+  .md-pr1 { padding-right:        .5rem }
+  .md-pb1 { padding-bottom:        .5rem }
+  .md-pl1 { padding-left:        .5rem }
+  .md-px1 { padding-left:        .5rem; padding-right:        .5rem }
+  .md-py1 { padding-top:        .5rem; padding-bottom:        .5rem }
+
+  .md-p2  { padding:        1rem }
+  .md-pt2 { padding-top:        1rem }
+  .md-pr2 { padding-right:        1rem }
+  .md-pb2 { padding-bottom:        1rem }
+  .md-pl2 { padding-left:        1rem }
+  .md-px2 { padding-left:        1rem; padding-right:        1rem }
+  .md-py2 { padding-top:        1rem; padding-bottom:        1rem }
+
+  .md-p3  { padding:        2rem }
+  .md-pt3 { padding-top:        2rem }
+  .md-pr3 { padding-right:        2rem }
+  .md-pb3 { padding-bottom:        2rem }
+  .md-pl3 { padding-left:        2rem }
+  .md-px3 { padding-left:        2rem; padding-right:        2rem }
+  .md-py3 { padding-top:        2rem; padding-bottom:        2rem }
+
+  .md-p4  { padding:        4rem }
+  .md-pt4 { padding-top:        4rem }
+  .md-pr4 { padding-right:        4rem }
+  .md-pb4 { padding-bottom:        4rem }
+  .md-pl4 { padding-left:        4rem }
+  .md-px4 { padding-left:        4rem; padding-right:        4rem }
+  .md-py4 { padding-top:        4rem; padding-bottom:        4rem }
+
+}
+
+@media (min-width: 64em) {
+
+  .lg-p0  { padding:        0 }
+  .lg-pt0 { padding-top:    0 }
+  .lg-pr0 { padding-right:  0 }
+  .lg-pb0 { padding-bottom: 0 }
+  .lg-pl0 { padding-left:   0 }
+  .lg-px0 { padding-left:   0; padding-right:  0 }
+  .lg-py0 { padding-top:    0; padding-bottom: 0 }
+
+  .lg-p1  { padding:        .5rem }
+  .lg-pt1 { padding-top:        .5rem }
+  .lg-pr1 { padding-right:        .5rem }
+  .lg-pb1 { padding-bottom:        .5rem }
+  .lg-pl1 { padding-left:        .5rem }
+  .lg-px1 { padding-left:        .5rem; padding-right:        .5rem }
+  .lg-py1 { padding-top:        .5rem; padding-bottom:        .5rem }
+
+  .lg-p2  { padding:        1rem }
+  .lg-pt2 { padding-top:        1rem }
+  .lg-pr2 { padding-right:        1rem }
+  .lg-pb2 { padding-bottom:        1rem }
+  .lg-pl2 { padding-left:        1rem }
+  .lg-px2 { padding-left:        1rem; padding-right:        1rem }
+  .lg-py2 { padding-top:        1rem; padding-bottom:        1rem }
+
+  .lg-p3  { padding:        2rem }
+  .lg-pt3 { padding-top:        2rem }
+  .lg-pr3 { padding-right:        2rem }
+  .lg-pb3 { padding-bottom:        2rem }
+  .lg-pl3 { padding-left:        2rem }
+  .lg-px3 { padding-left:        2rem; padding-right:        2rem }
+  .lg-py3 { padding-top:        2rem; padding-bottom:        2rem }
+
+  .lg-p4  { padding:        4rem }
+  .lg-pt4 { padding-top:        4rem }
+  .lg-pr4 { padding-right:        4rem }
+  .lg-pb4 { padding-bottom:        4rem }
+  .lg-pl4 { padding-left:        4rem }
+  .lg-px4 { padding-left:        4rem; padding-right:        4rem }
+  .lg-py4 { padding-top:        4rem; padding-bottom:        4rem }
+
+}
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css b/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css
new file mode 100644
index 000000000..cae23b4e7
--- /dev/null
+++ b/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css
@@ -0,0 +1,35 @@
+/* Basscss Responsive Type Scale */
+/* Modified by Fabio Berger to include xs prefix */
+
+@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
+  .sm-h00 { font-size: 4rem }
+  .sm-h0 { font-size: 3rem }
+  .sm-h1 { font-size: 2rem }
+  .sm-h2 { font-size: 1.5rem }
+  .sm-h3 { font-size: 1.25rem }
+  .sm-h4 { font-size: 1rem }
+  .sm-h5 { font-size: .875rem }
+  .sm-h6 { font-size: .75rem }
+}
+
+@media (min-width: 52em) {
+  .md-h00 { font-size: 4rem }
+  .md-h0 { font-size: 3rem }
+  .md-h1 { font-size: 2rem }
+  .md-h2 { font-size: 1.5rem }
+  .md-h3 { font-size: 1.25rem }
+  .md-h4 { font-size: 1rem }
+  .md-h5 { font-size: .875rem }
+  .md-h6 { font-size: .75rem }
+}
+
+@media (min-width: 64em) {
+  .lg-h00 { font-size: 4rem }
+  .lg-h0 { font-size: 3rem }
+  .lg-h1 { font-size: 2rem }
+  .lg-h2 { font-size: 1.5rem }
+  .lg-h3 { font-size: 1.25rem }
+  .lg-h4 { font-size: 1rem }
+  .lg-h5 { font-size: .875rem }
+  .lg-h6 { font-size: .75rem }
+}
diff --git a/packages/dev-tools-pages/public/index.html b/packages/dev-tools-pages/public/index.html
index 5137eed95..f62d7b255 100644
--- a/packages/dev-tools-pages/public/index.html
+++ b/packages/dev-tools-pages/public/index.html
@@ -12,6 +12,10 @@
     <title>0x: The Protocol for Trading Tokens</title>
     <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" />
     <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" />
+    <link rel="stylesheet" href="/css/basscss_responsive_custom.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_padding.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_margin.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_type_scale.css">
 </head>
 
 <body style="margin: 0px; min-width: 355px;">
diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx
new file mode 100644
index 000000000..7b2e33141
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import { darken, saturate } from 'polished';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Container } from './container';
+
+export interface ButtonProps {
+    backgroundColor?: string;
+    borderColor?: string;
+    width?: string;
+    padding?: string;
+    type?: string;
+    isDisabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    className?: string;
+}
+
+const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
+    <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
+        {children}
+    </button>
+);
+
+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'])};
+    }
+`;
+
+Button.defaultProps = {
+    backgroundColor: 'black',
+    width: 'auto',
+    isDisabled: false,
+    padding: '1em 2.2em',
+};
+Button.displayName = 'Button';
diff --git a/packages/dev-tools-pages/ts/components/ui/container.tsx b/packages/dev-tools-pages/ts/components/ui/container.tsx
new file mode 100644
index 000000000..f2ae68b70
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/ui/container.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+type StringOrNum = string | number;
+
+export type ContainerTag = 'div' | 'span';
+
+export interface ContainerProps {
+    marginTop?: StringOrNum;
+    marginBottom?: StringOrNum;
+    marginRight?: StringOrNum;
+    marginLeft?: StringOrNum;
+    padding?: StringOrNum;
+    paddingTop?: StringOrNum;
+    paddingBottom?: StringOrNum;
+    paddingRight?: StringOrNum;
+    paddingLeft?: StringOrNum;
+    backgroundColor?: string;
+    borderRadius?: StringOrNum;
+    maxWidth?: StringOrNum;
+    maxHeight?: StringOrNum;
+    width?: StringOrNum;
+    height?: StringOrNum;
+    minWidth?: StringOrNum;
+    minHeight?: StringOrNum;
+    isHidden?: boolean;
+    className?: string;
+    position?: 'absolute' | 'fixed' | 'relative' | 'unset';
+    display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
+    top?: string;
+    left?: string;
+    right?: string;
+    bottom?: string;
+    zIndex?: number;
+    Tag?: ContainerTag;
+    cursor?: string;
+    id?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
+}
+
+export const Container: React.StatelessComponent<ContainerProps> = props => {
+    const { children, className, Tag, isHidden, id, onClick, ...style } = props;
+    const visibility = isHidden ? 'hidden' : undefined;
+    return (
+        <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
+            {children}
+        </Tag>
+    );
+};
+
+Container.defaultProps = {
+    Tag: 'div',
+};
+
+Container.displayName = 'Container';
diff --git a/packages/dev-tools-pages/ts/components/ui/text.tsx b/packages/dev-tools-pages/ts/components/ui/text.tsx
new file mode 100644
index 000000000..8e314beae
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/ui/text.tsx
@@ -0,0 +1,74 @@
+import { colors } from '@0xproject/react-shared';
+import { darken } from 'polished';
+import * as React from 'react';
+import styled from 'styled-components';
+
+export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
+
+export interface TextProps {
+    className?: string;
+    Tag?: TextTag;
+    fontSize?: string;
+    fontFamily?: string;
+    fontStyle?: string;
+    fontColor?: string;
+    lineHeight?: string;
+    minHeight?: string;
+    center?: boolean;
+    fontWeight?: number | string;
+    textDecorationLine?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    hoverColor?: string;
+    noWrap?: boolean;
+    display?: string;
+}
+
+const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
+    <Tag className={className} onClick={onClick}>
+        {children}
+    </Tag>
+);
+
+export const Text = styled(PlainText)`
+    font-family: ${props => props.fontFamily};
+    font-style: ${props => props.fontStyle};
+    font-weight: ${props => props.fontWeight};
+    font-size: ${props => props.fontSize};
+    text-decoration-line: ${props => props.textDecorationLine};
+    ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
+    ${props => (props.center ? 'text-align: center' : '')};
+    color: ${props => 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}` : '')};
+    &:hover {
+        ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor || 'black')}` : '')};
+    }
+`;
+
+Text.defaultProps = {
+    fontFamily: 'Roboto',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    fontColor: colors.black,
+    fontSize: '15px',
+    lineHeight: '1.5em',
+    textDecorationLine: 'none',
+    Tag: 'div',
+    noWrap: false,
+};
+
+Text.displayName = 'Text';
+
+export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
+
+Title.defaultProps = {
+    Tag: 'h2',
+    fontSize: '20px',
+    fontWeight: 600,
+    fontColor: colors.black,
+};
+
+Title.displayName = 'Title';
diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx
index f4db2ea3c..4591c6d76 100644
--- a/packages/dev-tools-pages/ts/index.tsx
+++ b/packages/dev-tools-pages/ts/index.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { render } from 'react-dom';
 import { MetaTags } from 'ts/components/meta_tags';
-import { Landing } from 'ts/pages/landing/landing';
+import { Landing } from 'ts/pages/landing';
+
+import 'basscss/css/basscss.css';
 
 const DOCUMENT_TITLE = '';
 const DOCUMENT_DESCRIPTION = '';
diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx
new file mode 100644
index 000000000..e89cfa665
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/landing.tsx
@@ -0,0 +1,22 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Button } from '../components/ui/button';
+import { Container } from '../components/ui/container';
+
+interface LandingProps {}
+
+interface LandingState {}
+
+export class Landing extends React.Component<LandingProps, LandingState> {
+    constructor(props: LandingProps) {
+        super(props);
+    }
+    public render(): React.ReactNode {
+        return (
+            <Container id="landing" className="clearfix">
+                <Button>Click me!</Button>
+            </Container>
+        );
+    }
+}
diff --git a/packages/dev-tools-pages/ts/pages/landing/landing.tsx b/packages/dev-tools-pages/ts/pages/landing/landing.tsx
deleted file mode 100644
index a6cb89a7b..000000000
--- a/packages/dev-tools-pages/ts/pages/landing/landing.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-interface LandingProps {}
-
-interface LandingState {}
-
-export class Landing extends React.Component<LandingProps, LandingState> {
-    constructor(props: LandingProps) {
-        super(props);
-    }
-    public render(): React.ReactNode {
-        return <div id="landing" className="clearfix" />;
-    }
-}
diff --git a/packages/dev-tools-pages/tsconfig.json b/packages/dev-tools-pages/tsconfig.json
index f5d4f62c2..6421cd459 100644
--- a/packages/dev-tools-pages/tsconfig.json
+++ b/packages/dev-tools-pages/tsconfig.json
@@ -5,13 +5,14 @@
         "outDir": "./transpiled/",
         "jsx": "react",
         "baseUrl": "./",
+        "allowJs": true,
+        "strictNullChecks": false,
+        "noImplicitThis": false,
         // tsconfig.json at the monorepo root contains some options required for
         // project references which do not work for website. We override those
         // options here.
         "declaration": false,
         "declarationMap": false,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
         "composite": false,
         "paths": {
             "*": ["node_modules/@types/*", "*"]
diff --git a/packages/dev-tools-pages/webpack.config.js b/packages/dev-tools-pages/webpack.config.js
index 1df41212f..6dfcf74e7 100644
--- a/packages/dev-tools-pages/webpack.config.js
+++ b/packages/dev-tools-pages/webpack.config.js
@@ -39,6 +39,15 @@ const config = {
                 test: /\.md$/,
                 use: 'raw-loader',
             },
+            {
+                test: /\.less$/,
+                loader: 'style-loader!css-loader!less-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                loaders: ['style-loader', 'css-loader'],
+            },
         ],
     },
     optimization: {
-- 
cgit v1.2.3


From 7418932432de53300ba276da1ca9a33fb2f1d8b1 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 10 Oct 2018 22:31:18 +0200
Subject: Fix button and center

---
 packages/dev-tools-pages/ts/components/ui/button.tsx | 15 ++++++---------
 packages/dev-tools-pages/ts/pages/landing.tsx        |  7 ++++++-
 2 files changed, 12 insertions(+), 10 deletions(-)

(limited to 'packages')

diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx
index 7b2e33141..9ffd87e91 100644
--- a/packages/dev-tools-pages/ts/components/ui/button.tsx
+++ b/packages/dev-tools-pages/ts/components/ui/button.tsx
@@ -31,28 +31,25 @@ export const Button = styled(PlainButton)`
     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')};
+    background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')};
+    border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')};
     &:hover {
         background-color: ${props =>
-            !props.isDisabled
-                ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
-                : ''} !important;
+            !props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important;
     }
     &:active {
-        background-color: ${props =>
-            !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
+        background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')};
     }
     &:disabled {
         opacity: 0.5;
     }
     &:focus {
-        background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
+        background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)};
     }
 `;
 
 Button.defaultProps = {
-    backgroundColor: 'black',
+    backgroundColor: 'red',
     width: 'auto',
     isDisabled: false,
     padding: '1em 2.2em',
diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx
index e89cfa665..a70a9de46 100644
--- a/packages/dev-tools-pages/ts/pages/landing.tsx
+++ b/packages/dev-tools-pages/ts/pages/landing.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { Button } from '../components/ui/button';
 import { Container } from '../components/ui/container';
+import { Text } from '../components/ui/text';
 
 interface LandingProps {}
 
@@ -15,7 +16,11 @@ export class Landing extends React.Component<LandingProps, LandingState> {
     public render(): React.ReactNode {
         return (
             <Container id="landing" className="clearfix">
-                <Button>Click me!</Button>
+                <Container className="mx-auto p4" width="200px">
+                    <Button>
+                        <Text fontColor="white">Click me!</Text>
+                    </Button>
+                </Container>
             </Container>
         );
     }
-- 
cgit v1.2.3


From 19a657c38b9fbe49ad8f4605d238f113d384941a Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 10 Oct 2018 22:40:14 +0200
Subject: Improve README

---
 packages/dev-tools-pages/README.md | 39 ++++++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 12 deletions(-)

(limited to 'packages')

diff --git a/packages/dev-tools-pages/README.md b/packages/dev-tools-pages/README.md
index ce8edc103..b7bdf3bc3 100644
--- a/packages/dev-tools-pages/README.md
+++ b/packages/dev-tools-pages/README.md
@@ -2,23 +2,19 @@
 
 This repository contains our dev tools pages.
 
-## Contributing
-
-We strongly recommend that the community help us make improvements and determine the future direction of the protocol. To report bugs within this package, please create an issue in this repository.
-
-Please read our [contribution guidelines](../../CONTRIBUTING.md) before getting started.
-
 ## Local Dev Setup
 
-Requires Node version 6.9.5 or higher
+Requires Node version 6.9.5 or higher & yarn v1.9.4
+
+### 1. Install dependencies for monorepo:
 
-### Install dependencies:
+Make sure you install Yarn v1.9.4 (npm won't work!). We rely on our `yarn.lock` file and on Yarn's support for `workspaces` in our monorepo setup.
 
 ```bash
 yarn install
 ```
 
-### Initial setup
+### 2. Initial setup
 
 To build this package and all other monorepo packages that it depends on, run the following from the monorepo root directory:
 
@@ -26,14 +22,19 @@ To build this package and all other monorepo packages that it depends on, run th
 PKG=@0xproject/dev-tools-pages yarn build
 ```
 
-### Run dev server
+Note: Ignore the `WARNING in asset size limit` and `WARNING in entrypoint size limit` warnings.
+
+### 3. Run dev server
 
 ```bash
-PKG=@0xproject/dev-tools-pages yarn watch
+cd packages/dev-tools-pages
+yarn dev
 ```
 
 Visit [http://localhost:3572/](http://localhost:3572/) in your browser.
 
+The webpage will refresh when source code is changed.
+
 ### Clean
 
 ```bash
@@ -46,14 +47,28 @@ yarn clean
 yarn lint
 ```
 
+### Prettier
+
+Run from the monorepo root directory:
+
+```
+yarn prettier
+```
+
 ### Resources
 
 ##### Toolkit
 
 *   [Styled Components](https://www.styled-components.com/)
-*   [Rebass](https://rebassjs.org/)
+*   [BassCSS](http://basscss.com/)
 
 ##### Recommended Atom packages:
 
 *   [atom-typescript](https://atom.io/packages/atom-typescript)
 *   [linter-tslint](https://atom.io/packages/linter-tslint)
+
+## Contributing
+
+We strongly recommend that the community help us make improvements and determine the future direction of the protocol. To report bugs within this package, please create an issue in this repository.
+
+Please read our [contribution guidelines](../../CONTRIBUTING.md) before getting started.
-- 
cgit v1.2.3


From 2a95d3269d0df4afc777e2e97d3544f625f2f27c Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 10 Oct 2018 22:44:03 +0200
Subject: Add note about button

---
 packages/dev-tools-pages/ts/components/ui/button.tsx | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'packages')

diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx
index 9ffd87e91..4fe1b3644 100644
--- a/packages/dev-tools-pages/ts/components/ui/button.tsx
+++ b/packages/dev-tools-pages/ts/components/ui/button.tsx
@@ -4,6 +4,10 @@ import styled from 'styled-components';
 
 import { Container } from './container';
 
+/**
+ * AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS
+ * SEE: https://www.styled-components.com/docs/basics#coming-from-css
+ */
 export interface ButtonProps {
     backgroundColor?: string;
     borderColor?: string;
-- 
cgit v1.2.3


From a300a451c85b664a9a5c9c813f1d516d1cd6ecba Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 10 Oct 2018 22:50:20 +0200
Subject: Explains tools we want them to use

---
 packages/dev-tools-pages/README.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

(limited to 'packages')

diff --git a/packages/dev-tools-pages/README.md b/packages/dev-tools-pages/README.md
index b7bdf3bc3..39fe70a25 100644
--- a/packages/dev-tools-pages/README.md
+++ b/packages/dev-tools-pages/README.md
@@ -35,6 +35,20 @@ Visit [http://localhost:3572/](http://localhost:3572/) in your browser.
 
 The webpage will refresh when source code is changed.
 
+### 4. Code!
+
+There are some basic primitives we'd like you to use:
+
+1.  `<Container>Stuff</Container>`: Use containers instead of divs,spans,etc... and use it's props instead of inline styles (e.g `style={{margin: 3}}` should be `margin="3px"`
+
+2.  `<Text>Look ma, text!</Text>`: Use text components whenever rendering text. It has props for manipulating texts, so again no in-line styles. Use `fontColor="red"`, not `style={{color: 'red'}}`.
+
+3.  Styled-components: See the `ui/button.tsx` file for an example of how to use these.
+
+4.  BassCss: This library gives you access to a bunch of [classes](http://basscss.com/) that apply styles in a browser-compatible way, has affordances for responsiveness and alleviates the need for inline styles or LESS/CSS files.
+
+With the above 4 tools and following the React paradigm, you shouldn't need CSS/LESS files. IF there are special occasions where you do, these is a `all.less` file, but this is a solution of last resort. Use it sparingly.
+
 ### Clean
 
 ```bash
-- 
cgit v1.2.3


From 01ccd8ff1a995f6b74f52533bc595cbc428b9eef Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Thu, 11 Oct 2018 09:56:49 +1100
Subject: [fix]: [testnet-faucet] Exit 1 on build fail

If we detect any compilation errors then exit with 1
---
 packages/testnet-faucets/gulpfile.js | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

(limited to 'packages')

diff --git a/packages/testnet-faucets/gulpfile.js b/packages/testnet-faucets/gulpfile.js
index 7c4e25e0f..839ef851b 100644
--- a/packages/testnet-faucets/gulpfile.js
+++ b/packages/testnet-faucets/gulpfile.js
@@ -14,10 +14,7 @@ const config = {
     },
     devtool: 'source-map',
     resolve: {
-        modules: [
-            path.join(__dirname, '/src/ts'),
-            'node_modules',
-        ],
+        modules: [path.join(__dirname, '/src/ts'), 'node_modules'],
         extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
         alias: {
             ts: path.join(__dirname, '/src/ts'),
@@ -44,10 +41,10 @@ const config = {
         }),
     ],
     externals: nodeExternals({
-        modulesDir: path.join(__dirname, '../../node_modules')
+        modulesDir: path.join(__dirname, '../../node_modules'),
     }),
     watchOptions: {
-        ignored: /server|node_modules|transpiled/
+        ignored: /server|node_modules|transpiled/,
     },
 };
 
@@ -77,16 +74,18 @@ gulp.task('run', ['watch'], function() {
 });
 
 function onBuild(done) {
-  return function(err, stats) {
-    if(err) {
-      console.log('Error', err);
-    }
-    else {
-      console.log(stats.toString());
-    }
-
-    if(done) {
-      done();
-    }
-  }
+    return function(err, stats) {
+        if (err) {
+            console.log('Error', err);
+            process.exit(1);
+        } else {
+            console.log(stats.toString());
+        }
+        if (done) {
+            if (stats.compilation.errors && stats.compilation.errors.length > 0) {
+                process.exit(1);
+            }
+            done();
+        }
+    };
 }
-- 
cgit v1.2.3


From 0a3c543d5d59f1fbc244fb796d6f9fb6826266a0 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 10 Oct 2018 16:31:14 -0700
Subject: Upgrade to more recent types, fix yarn.lock

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

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 8cac481db..cc7d8c9eb 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -63,7 +63,7 @@
         "@types/enzyme-adapter-react-16": "^1.0.3",
         "@types/lodash": "^4.14.116",
         "@types/node": "*",
-        "@types/react": "16.4.7",
+        "@types/react": "^16.4.16",
         "@types/react-dom": "^16.0.8",
         "@types/react-redux": "^6.0.9",
         "@types/redux": "^3.6.0",
-- 
cgit v1.2.3


From 7bc9cd8c943972b2800e70fc6eaaf9c01ff5c488 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 10 Oct 2018 16:43:55 -0700
Subject: Fix issue where we throw if non-numeric characters are used in input

---
 packages/instant/src/components/amount_input.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index 29d1bf161..12cb9a48c 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -29,11 +29,16 @@ export class AmountInput extends React.Component<AmountInputProps> {
             </Container>
         );
     }
-    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    private _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
         const value = event.target.value;
         let bigNumberValue;
         if (!_.isEmpty(value)) {
-            bigNumberValue = new BigNumber(event.target.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;
+            }
         }
         if (!_.isUndefined(this.props.onChange)) {
             this.props.onChange(bigNumberValue);
-- 
cgit v1.2.3


From 0aa7bfab0d62a11e84b81044e6af6e2c5ec6b981 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 10 Oct 2018 16:48:27 -0700
Subject: Add type to cssRuleIfExists

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

(limited to 'packages')

diff --git a/packages/instant/src/style/util.ts b/packages/instant/src/style/util.ts
index 7cf13133f..c9df0f834 100644
--- a/packages/instant/src/style/util.ts
+++ b/packages/instant/src/style/util.ts
@@ -1,6 +1,7 @@
+import { ObjectMap } from '@0xproject/types';
 import * as _ from 'lodash';
 
-export const cssRuleIfExists = (props: any, rule: string): string => {
+export const cssRuleIfExists = (props: ObjectMap<any>, rule: string): string => {
     const camelCaseRule = _.camelCase(rule);
     const ruleValueIfExists = props[camelCaseRule];
     if (!_.isUndefined(ruleValueIfExists)) {
-- 
cgit v1.2.3


From c8e7d225ca4bc9774b4f902c01668873cbdce6a1 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 10 Oct 2018 16:55:59 -0700
Subject: Be more explicit with falsiness

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

(limited to 'packages')

diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index 12cb9a48c..3f16869b4 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -22,7 +22,7 @@ export class AmountInput extends React.Component<AmountInputProps> {
                     fontColor={fontColor}
                     fontSize={fontSize}
                     onChange={this._handleChange}
-                    value={value ? value.toString() : ''}
+                    value={!_.isUndefined(value) ? value.toString() : ''}
                     placeholder="0.00"
                     width="2em"
                 />
-- 
cgit v1.2.3


From 9fe88b214653f39f63266198f426a68dafbe7890 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 10 Oct 2018 17:14:17 -0700
Subject: Lint and update deps

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

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index cc7d8c9eb..9ceefdc0e 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -44,10 +44,10 @@
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
     "dependencies": {
         "@0xproject/asset-buyer": "^2.0.0",
-        "@0xproject/types": "^1.1.1",
+        "@0xproject/types": "^1.1.4",
         "@0xproject/typescript-typings": "^2.0.2",
         "@0xproject/utils": "^2.0.2",
-        "@0xproject/web3-wrapper": "^3.0.1",
+        "@0xproject/web3-wrapper": "^3.0.3",
         "ethereum-types": "^1.0.8",
         "lodash": "^4.17.10",
         "polished": "^2.2.0",
diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index 3f16869b4..38810063d 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -29,7 +29,7 @@ export class AmountInput extends React.Component<AmountInputProps> {
             </Container>
         );
     }
-    private _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
         const value = event.target.value;
         let bigNumberValue;
         if (!_.isEmpty(value)) {
-- 
cgit v1.2.3


From 50442c3ebbf7a27e49f04a7f0512dcfed9686857 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 10 Oct 2018 17:25:17 -0700
Subject: Upgrade ethereum-types

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

(limited to 'packages')

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 9ceefdc0e..ff40ba2ea 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -48,7 +48,7 @@
         "@0xproject/typescript-typings": "^2.0.2",
         "@0xproject/utils": "^2.0.2",
         "@0xproject/web3-wrapper": "^3.0.3",
-        "ethereum-types": "^1.0.8",
+        "ethereum-types": "^1.0.11",
         "lodash": "^4.17.10",
         "polished": "^2.2.0",
         "react": "^16.5.2",
-- 
cgit v1.2.3


From e4351789d20df12ab8d70021acb5674bb59cae0c Mon Sep 17 00:00:00 2001
From: Leonid Logvinov <logvinov.leon@gmail.com>
Date: Thu, 11 Oct 2018 12:23:19 +0200
Subject: Fix linter error

---
 packages/dev-tools-pages/ts/components/ui/button.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'packages')

diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx
index 4fe1b3644..754eca40e 100644
--- a/packages/dev-tools-pages/ts/components/ui/button.tsx
+++ b/packages/dev-tools-pages/ts/components/ui/button.tsx
@@ -2,8 +2,6 @@ import { darken, saturate } from 'polished';
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Container } from './container';
-
 /**
  * AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS
  * SEE: https://www.styled-components.com/docs/basics#coming-from-css
-- 
cgit v1.2.3