From bd3f101ab8735f97646d1031126fb9e55b67a93d Mon Sep 17 00:00:00 2001
From: amaurer <git@maurer.me>
Date: Sat, 6 Oct 2018 10:06:34 -0400
Subject: Added orderWatchCount to return total count of orders watched.

---
 .../order-watcher/src/order_watcher/order_watcher.ts    |  3 +++
 packages/order-watcher/test/order_watcher_test.ts       | 17 +++++++++++++++++
 2 files changed, 20 insertions(+)

(limited to 'packages')

diff --git a/packages/order-watcher/src/order_watcher/order_watcher.ts b/packages/order-watcher/src/order_watcher/order_watcher.ts
index f9a63efe3..9b2999285 100644
--- a/packages/order-watcher/src/order_watcher/order_watcher.ts
+++ b/packages/order-watcher/src/order_watcher/order_watcher.ts
@@ -213,6 +213,9 @@ export class OrderWatcher {
         this._expirationWatcher.unsubscribe();
         intervalUtils.clearAsyncExcludingInterval(this._cleanupJobIntervalIdIfExists);
     }
+    public getWatchCount(): number {
+        return _.size(this._orderByOrderHash);
+    }
     private async _cleanupAsync(): Promise<void> {
         for (const orderHash of _.keys(this._orderByOrderHash)) {
             this._cleanupOrderRelatedState(orderHash);
diff --git a/packages/order-watcher/test/order_watcher_test.ts b/packages/order-watcher/test/order_watcher_test.ts
index 60d9069e8..f504dda8e 100644
--- a/packages/order-watcher/test/order_watcher_test.ts
+++ b/packages/order-watcher/test/order_watcher_test.ts
@@ -140,6 +140,23 @@ describe('OrderWatcher', () => {
             expect(() => orderWatcher.subscribe(_.noop.bind(_))).to.throw(OrderWatcherError.SubscriptionAlreadyPresent);
         });
     });
+    describe('#getWatchCount', async () => {
+        it('should increment and decrement order counts', async() => {
+            signedOrder = await fillScenarios.createFillableSignedOrderAsync(
+                makerAssetData,
+                takerAssetData,
+                makerAddress,
+                takerAddress,
+                fillableAmount,
+            );
+            const orderHash = orderHashUtils.getOrderHashHex(signedOrder);
+            expect(orderWatcher.getWatchCount()).to.be.eq(0);
+            await orderWatcher.addOrderAsync(signedOrder);
+            expect(orderWatcher.getWatchCount()).to.be.eq(1);
+            orderWatcher.removeOrder(orderHash);
+            expect(orderWatcher.getWatchCount()).to.be.eq(0);
+        });
+    });
     describe('tests with cleanup', async () => {
         afterEach(async () => {
             orderWatcher.unsubscribe();
-- 
cgit v1.2.3


From c833b4f49448dacade229f9af4530020dc30a57a Mon Sep 17 00:00:00 2001
From: amaurer <git@maurer.me>
Date: Sat, 6 Oct 2018 10:23:16 -0400
Subject: Added comments to new getWatchCounts function

---
 packages/order-watcher/src/order_watcher/order_watcher.ts | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'packages')

diff --git a/packages/order-watcher/src/order_watcher/order_watcher.ts b/packages/order-watcher/src/order_watcher/order_watcher.ts
index 9b2999285..ac811a4c4 100644
--- a/packages/order-watcher/src/order_watcher/order_watcher.ts
+++ b/packages/order-watcher/src/order_watcher/order_watcher.ts
@@ -213,6 +213,10 @@ export class OrderWatcher {
         this._expirationWatcher.unsubscribe();
         intervalUtils.clearAsyncExcludingInterval(this._cleanupJobIntervalIdIfExists);
     }
+    /**
+     * Gets number of orderHashes currently being watched by the order watcher instance.
+     * @returns {number}
+     */
     public getWatchCount(): number {
         return _.size(this._orderByOrderHash);
     }
-- 
cgit v1.2.3


From ee0f2e46ee0b7c62225e09b54a3e13607214ae20 Mon Sep 17 00:00:00 2001
From: amaurer <git@maurer.me>
Date: Sat, 6 Oct 2018 10:32:07 -0400
Subject: Update order-watcher changelog

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

(limited to 'packages')

diff --git a/packages/order-watcher/CHANGELOG.json b/packages/order-watcher/CHANGELOG.json
index ce56e492c..6d1256d9e 100644
--- a/packages/order-watcher/CHANGELOG.json
+++ b/packages/order-watcher/CHANGELOG.json
@@ -1,4 +1,13 @@
 [
+    {
+        "version": "2.1.2",
+        "changes": [
+            {
+                "note": "Added getWatchCounts function"
+            }
+        ],
+        "timestamp": 1538836030
+    },
     {
         "version": "2.1.1",
         "changes": [
-- 
cgit v1.2.3


From d0fed1ae464301cb26df16053991e667598b640e Mon Sep 17 00:00:00 2001
From: amaurer <git@maurer.me>
Date: Sat, 6 Oct 2018 10:43:36 -0400
Subject: Fixed linting issue

---
 packages/order-watcher/src/order_watcher/order_watcher.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/order-watcher/src/order_watcher/order_watcher.ts b/packages/order-watcher/src/order_watcher/order_watcher.ts
index ac811a4c4..5ddfdd047 100644
--- a/packages/order-watcher/src/order_watcher/order_watcher.ts
+++ b/packages/order-watcher/src/order_watcher/order_watcher.ts
@@ -215,7 +215,7 @@ export class OrderWatcher {
     }
     /**
      * Gets number of orderHashes currently being watched by the order watcher instance.
-     * @returns {number}
+     * @returns {number} Number of hashes in _orderByOrderHash
      */
     public getWatchCount(): number {
         return _.size(this._orderByOrderHash);
-- 
cgit v1.2.3


From 9171f9ec600b04134e0f86741e60a973618839b5 Mon Sep 17 00:00:00 2001
From: amaurer <git@maurer.me>
Date: Sat, 6 Oct 2018 11:04:48 -0400
Subject: Fix lint issues

---
 packages/order-watcher/src/order_watcher/order_watcher.ts | 1 -
 packages/order-watcher/test/order_watcher_test.ts         | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/order-watcher/src/order_watcher/order_watcher.ts b/packages/order-watcher/src/order_watcher/order_watcher.ts
index 5ddfdd047..e59b56b90 100644
--- a/packages/order-watcher/src/order_watcher/order_watcher.ts
+++ b/packages/order-watcher/src/order_watcher/order_watcher.ts
@@ -215,7 +215,6 @@ export class OrderWatcher {
     }
     /**
      * Gets number of orderHashes currently being watched by the order watcher instance.
-     * @returns {number} Number of hashes in _orderByOrderHash
      */
     public getWatchCount(): number {
         return _.size(this._orderByOrderHash);
diff --git a/packages/order-watcher/test/order_watcher_test.ts b/packages/order-watcher/test/order_watcher_test.ts
index f504dda8e..f1dbe9b2f 100644
--- a/packages/order-watcher/test/order_watcher_test.ts
+++ b/packages/order-watcher/test/order_watcher_test.ts
@@ -141,7 +141,7 @@ describe('OrderWatcher', () => {
         });
     });
     describe('#getWatchCount', async () => {
-        it('should increment and decrement order counts', async() => {
+        it('should increment and decrement order counts', async () => {
             signedOrder = await fillScenarios.createFillableSignedOrderAsync(
                 makerAssetData,
                 takerAssetData,
-- 
cgit v1.2.3


From 2e1222556ff8bd3923a5e91174f7d6bd92d6a02c Mon Sep 17 00:00:00 2001
From: amaurer <git@maurer.me>
Date: Sun, 7 Oct 2018 12:24:42 -0400
Subject: Changed getWatchedOrders to getStats and returns Stats object

---
 packages/order-watcher/CHANGELOG.json                     |  2 +-
 packages/order-watcher/src/order_watcher/order_watcher.ts | 12 +++++++++---
 packages/order-watcher/test/order_watcher_test.ts         | 10 +++++-----
 packages/types/src/index.ts                               |  2 +-
 4 files changed, 16 insertions(+), 10 deletions(-)

(limited to 'packages')

diff --git a/packages/order-watcher/CHANGELOG.json b/packages/order-watcher/CHANGELOG.json
index 6d1256d9e..7b8416428 100644
--- a/packages/order-watcher/CHANGELOG.json
+++ b/packages/order-watcher/CHANGELOG.json
@@ -3,7 +3,7 @@
         "version": "2.1.2",
         "changes": [
             {
-                "note": "Added getWatchCounts function"
+                "note": "Added getStats function and returns a Stats object"
             }
         ],
         "timestamp": 1538836030
diff --git a/packages/order-watcher/src/order_watcher/order_watcher.ts b/packages/order-watcher/src/order_watcher/order_watcher.ts
index e59b56b90..4401b3f7e 100644
--- a/packages/order-watcher/src/order_watcher/order_watcher.ts
+++ b/packages/order-watcher/src/order_watcher/order_watcher.ts
@@ -57,6 +57,10 @@ interface OrderStateByOrderHash {
     [orderHash: string]: OrderState;
 }
 
+export interface Stats {
+    orderCount: number;
+}
+
 const DEFAULT_ORDER_WATCHER_CONFIG: OrderWatcherConfig = {
     orderExpirationCheckingIntervalMs: 50,
     eventPollingIntervalMs: 200,
@@ -214,10 +218,12 @@ export class OrderWatcher {
         intervalUtils.clearAsyncExcludingInterval(this._cleanupJobIntervalIdIfExists);
     }
     /**
-     * Gets number of orderHashes currently being watched by the order watcher instance.
+     * Gets statistics of the OrderWatcher Instance.
      */
-    public getWatchCount(): number {
-        return _.size(this._orderByOrderHash);
+    public getStats(): Stats {
+        return {
+            orderCount : _.size(this._orderByOrderHash),
+        };
     }
     private async _cleanupAsync(): Promise<void> {
         for (const orderHash of _.keys(this._orderByOrderHash)) {
diff --git a/packages/order-watcher/test/order_watcher_test.ts b/packages/order-watcher/test/order_watcher_test.ts
index f1dbe9b2f..4545f84bf 100644
--- a/packages/order-watcher/test/order_watcher_test.ts
+++ b/packages/order-watcher/test/order_watcher_test.ts
@@ -140,8 +140,8 @@ describe('OrderWatcher', () => {
             expect(() => orderWatcher.subscribe(_.noop.bind(_))).to.throw(OrderWatcherError.SubscriptionAlreadyPresent);
         });
     });
-    describe('#getWatchCount', async () => {
-        it('should increment and decrement order counts', async () => {
+    describe('#getStats', async () => {
+        it('orderCount should increment and decrement with order additions and removals', async () => {
             signedOrder = await fillScenarios.createFillableSignedOrderAsync(
                 makerAssetData,
                 takerAssetData,
@@ -150,11 +150,11 @@ describe('OrderWatcher', () => {
                 fillableAmount,
             );
             const orderHash = orderHashUtils.getOrderHashHex(signedOrder);
-            expect(orderWatcher.getWatchCount()).to.be.eq(0);
+            expect(orderWatcher.getStats().orderCount).to.be.eq(0);
             await orderWatcher.addOrderAsync(signedOrder);
-            expect(orderWatcher.getWatchCount()).to.be.eq(1);
+            expect(orderWatcher.getStats().orderCount).to.be.eq(1);
             orderWatcher.removeOrder(orderHash);
-            expect(orderWatcher.getWatchCount()).to.be.eq(0);
+            expect(orderWatcher.getStats().orderCount).to.be.eq(0);
         });
     });
     describe('tests with cleanup', async () => {
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 3ae0536d5..0ea7d433a 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -598,4 +598,4 @@ export interface Metadata {
     exportPathOrder: string[];
     externalTypeToLink: ExternalTypeToLink;
     externalExportToLink: ExternalExportToLink;
-}
+}
\ No newline at end of file
-- 
cgit v1.2.3


From e5192507ab6597a93c45526cca092896641610f0 Mon Sep 17 00:00:00 2001
From: amaurer <git@maurer.me>
Date: Sun, 7 Oct 2018 12:31:51 -0400
Subject: Fixed accidental carriage return removal in index.ts

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

(limited to 'packages')

diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 0ea7d433a..3ae0536d5 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -598,4 +598,4 @@ export interface Metadata {
     exportPathOrder: string[];
     externalTypeToLink: ExternalTypeToLink;
     externalExportToLink: ExternalExportToLink;
-}
\ No newline at end of file
+}
-- 
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 f73e6a75b1707aca52b1436bc66c9cad4f8e2dc3 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 10 Oct 2018 15:21:41 -0700
Subject: feat: add Steve to team page

---
 packages/website/public/images/team/steve.png | Bin 0 -> 49008 bytes
 packages/website/ts/pages/about/about.tsx     |  11 +++++++++++
 2 files changed, 11 insertions(+)
 create mode 100644 packages/website/public/images/team/steve.png

(limited to 'packages')

diff --git a/packages/website/public/images/team/steve.png b/packages/website/public/images/team/steve.png
new file mode 100644
index 000000000..751583fba
Binary files /dev/null and b/packages/website/public/images/team/steve.png differ
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 037647161..2629f8632 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -240,6 +240,16 @@ const teamRow8: ProfileInfo[] = [
     },
 ];
 
+const teamRow9: ProfileInfo[] = [
+    {
+        name: 'Steve Klebanoff',
+        title: 'Senior Engineer',
+        description: ` Full-stack engineer. Previously Staff Software Engineer at Appfolio. Computer Science & Cognitive Psychology at Northeastern University.`,
+        image: 'images/team/steve.png',
+        linkedIn: 'https://www.linkedin.com/in/steveklebanoff/',
+    },
+];
+
 const advisors1: ProfileInfo[] = [
     {
         name: 'Fred Ehrsam',
@@ -348,6 +358,7 @@ export class About extends React.Component<AboutProps, AboutState> {
                         <div className="clearfix">{this._renderProfiles(teamRow6)}</div>
                         <div className="clearfix">{this._renderProfiles(teamRow7)}</div>
                         <div className="clearfix">{this._renderProfiles(teamRow8)}</div>
+                        <div className="clearfix">{this._renderProfiles(teamRow9)}</div>
                     </div>
                     <div className="pt3 pb2">
                         <div
-- 
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


From 2e3624d88808ab1b6dcfe307243aaca047061e32 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 10 Oct 2018 16:06:32 +0200
Subject: fix(website): replace Rollbar UMD with regular npm package

---
 packages/website/package.json               | 1 +
 packages/website/ts/utils/error_reporter.ts | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/website/package.json b/packages/website/package.json
index 82109d95f..8f69460d6 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -59,6 +59,7 @@
         "react-typist": "^2.0.4",
         "redux": "^3.6.0",
         "redux-devtools-extension": "^2.13.2",
+        "rollbar": "^2.4.7",
         "semver-sort": "0.0.4",
         "styled-components": "^3.3.0",
         "thenby": "^1.2.3",
diff --git a/packages/website/ts/utils/error_reporter.ts b/packages/website/ts/utils/error_reporter.ts
index 6008fffed..bec92e829 100644
--- a/packages/website/ts/utils/error_reporter.ts
+++ b/packages/website/ts/utils/error_reporter.ts
@@ -1,4 +1,5 @@
 import { logUtils } from '@0xproject/utils';
+import Rollbar = require('rollbar');
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
@@ -36,8 +37,8 @@ const rollbarConfig = {
         'SecurityError (DOM Exception 18)',
     ],
 };
-import Rollbar = require('../../public/js/rollbar.umd.min.js');
-const rollbar = Rollbar.init(rollbarConfig);
+
+const rollbar = new Rollbar(rollbarConfig);
 
 export const errorReporter = {
     report(err: Error): void {
-- 
cgit v1.2.3


From cd04a21e29cc5713c1932b754d9a8f5c5172f960 Mon Sep 17 00:00:00 2001
From: amaurer <git@maurer.me>
Date: Fri, 12 Oct 2018 11:55:31 -0400
Subject: Fixes per converstaion, stats interface to pub

---
 packages/order-watcher/CHANGELOG.json                     | 6 +++---
 packages/order-watcher/src/order_watcher/order_watcher.ts | 8 ++------
 packages/types/src/index.ts                               | 4 ++++
 3 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/order-watcher/CHANGELOG.json b/packages/order-watcher/CHANGELOG.json
index 7b8416428..feebb9d69 100644
--- a/packages/order-watcher/CHANGELOG.json
+++ b/packages/order-watcher/CHANGELOG.json
@@ -3,10 +3,10 @@
         "version": "2.1.2",
         "changes": [
             {
-                "note": "Added getStats function and returns a Stats object"
+                "note": "Added getStats function and returns a Stats object",
+                "pr": 1118
             }
-        ],
-        "timestamp": 1538836030
+        ]
     },
     {
         "version": "2.1.1",
diff --git a/packages/order-watcher/src/order_watcher/order_watcher.ts b/packages/order-watcher/src/order_watcher/order_watcher.ts
index 4401b3f7e..eb37bd617 100644
--- a/packages/order-watcher/src/order_watcher/order_watcher.ts
+++ b/packages/order-watcher/src/order_watcher/order_watcher.ts
@@ -30,7 +30,7 @@ import {
     orderHashUtils,
     OrderStateUtils,
 } from '@0xproject/order-utils';
-import { AssetProxyId, ExchangeContractErrs, OrderState, SignedOrder } from '@0xproject/types';
+import { AssetProxyId, ExchangeContractErrs, OrderState, SignedOrder, Stats } from '@0xproject/types';
 import { errorUtils, intervalUtils } from '@0xproject/utils';
 import { BlockParamLiteral, LogEntryEvent, LogWithDecodedArgs, Provider } from 'ethereum-types';
 import * as _ from 'lodash';
@@ -57,10 +57,6 @@ interface OrderStateByOrderHash {
     [orderHash: string]: OrderState;
 }
 
-export interface Stats {
-    orderCount: number;
-}
-
 const DEFAULT_ORDER_WATCHER_CONFIG: OrderWatcherConfig = {
     orderExpirationCheckingIntervalMs: 50,
     eventPollingIntervalMs: 200,
@@ -222,7 +218,7 @@ export class OrderWatcher {
      */
     public getStats(): Stats {
         return {
-            orderCount : _.size(this._orderByOrderHash),
+            orderCount: _.size(this._orderByOrderHash),
         };
     }
     private async _cleanupAsync(): Promise<void> {
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 3ae0536d5..6f539fc1f 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -599,3 +599,7 @@ export interface Metadata {
     externalTypeToLink: ExternalTypeToLink;
     externalExportToLink: ExternalExportToLink;
 }
+
+export interface Stats {
+    orderCount: number;
+}
-- 
cgit v1.2.3


From 22abd1dfcf0ca1f7566c6ab5e0392097cf973bff Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 12 Oct 2018 13:16:36 -0700
Subject: feat(contract-wrappers): add optional validation to the forwarder
 wrapper

Similar to the approach taken in exchange wrapper, make a call to an rpc
node in order to simulate the transaction before actually sending the
transaction. The decorator will parse revert reasons and other types of
errors into canonical errors that a consumer of the library expects when
interacting with a contract wrapper.
---
 packages/contract-wrappers/CHANGELOG.json          |   8 ++
 .../src/contract_wrappers/forwarder_wrapper.ts     | 122 ++++++++++++++-------
 .../test/forwarder_wrapper_test.ts                 |  48 ++++++++
 3 files changed, 140 insertions(+), 38 deletions(-)

(limited to 'packages')

diff --git a/packages/contract-wrappers/CHANGELOG.json b/packages/contract-wrappers/CHANGELOG.json
index a96cb3a59..0770b6c0d 100644
--- a/packages/contract-wrappers/CHANGELOG.json
+++ b/packages/contract-wrappers/CHANGELOG.json
@@ -1,4 +1,12 @@
 [
+    {
+        "version": "2.1.0",
+        "changes": [
+            {
+                "note": "Add optional validation to the forwarder wrapper methods"
+            }
+        ]
+    },
     {
         "version": "2.0.2",
         "changes": [
diff --git a/packages/contract-wrappers/src/contract_wrappers/forwarder_wrapper.ts b/packages/contract-wrappers/src/contract_wrappers/forwarder_wrapper.ts
index 906222731..c19edf188 100644
--- a/packages/contract-wrappers/src/contract_wrappers/forwarder_wrapper.ts
+++ b/packages/contract-wrappers/src/contract_wrappers/forwarder_wrapper.ts
@@ -8,10 +8,11 @@ import * as _ from 'lodash';
 import { artifacts } from '../artifacts';
 import { orderTxOptsSchema } from '../schemas/order_tx_opts_schema';
 import { txOptsSchema } from '../schemas/tx_opts_schema';
-import { TransactionOpts } from '../types';
+import { OrderTransactionOpts } from '../types';
 import { assert } from '../utils/assert';
 import { calldataOptimizationUtils } from '../utils/calldata_optimization_utils';
 import { constants } from '../utils/constants';
+import { decorators } from '../utils/decorators';
 import { utils } from '../utils/utils';
 
 import { ContractWrapper } from './contract_wrapper';
@@ -40,19 +41,20 @@ export class ForwarderWrapper extends ContractWrapper {
      * Any ZRX required to pay fees for primary orders will automatically be purchased by this contract.
      * 5% of ETH value is reserved for paying fees to order feeRecipients (in ZRX) and forwarding contract feeRecipient (in ETH).
      * Any ETH not spent will be refunded to sender.
-     * @param   signedOrders         An array of objects that conform to the SignedOrder interface. All orders must specify the same makerAsset.
-     *                               All orders must specify WETH as the takerAsset
-     * @param   takerAddress         The user Ethereum address who would like to fill this order. Must be available via the supplied
-     *                               Provider provided at instantiation.
-     * @param   ethAmount            The amount of eth to send with the transaction (in wei).
-     * @param   signedFeeOrders      An array of objects that conform to the SignedOrder interface. All orders must specify ZRX as makerAsset and WETH as takerAsset.
-     *                               Used to purchase ZRX for primary order fees.
-     * @param   feePercentage        The percentage of WETH sold that will payed as fee to forwarding contract feeRecipient.
-     *                               Defaults to 0.
-     * @param   feeRecipientAddress  The address that will receive ETH when signedFeeOrders are filled.
-     * @param   txOpts               Transaction parameters.
+     * @param   signedOrders            An array of objects that conform to the SignedOrder interface. All orders must specify the same makerAsset.
+     *                                  All orders must specify WETH as the takerAsset
+     * @param   takerAddress            The user Ethereum address who would like to fill this order. Must be available via the supplied
+     *                                  Provider provided at instantiation.
+     * @param   ethAmount               The amount of eth to send with the transaction (in wei).
+     * @param   signedFeeOrders         An array of objects that conform to the SignedOrder interface. All orders must specify ZRX as makerAsset and WETH as takerAsset.
+     *                                  Used to purchase ZRX for primary order fees.
+     * @param   feePercentage           The percentage of WETH sold that will payed as fee to forwarding contract feeRecipient.
+     *                                  Defaults to 0.
+     * @param   feeRecipientAddress     The address that will receive ETH when signedFeeOrders are filled.
+     * @param   orderTransactionOpts    Transaction parameters.
      * @return  Transaction hash.
      */
+    @decorators.asyncZeroExErrorHandler
     public async marketSellOrdersWithEthAsync(
         signedOrders: SignedOrder[],
         takerAddress: string,
@@ -60,7 +62,7 @@ export class ForwarderWrapper extends ContractWrapper {
         signedFeeOrders: SignedOrder[] = [],
         feePercentage: number = 0,
         feeRecipientAddress: string = constants.NULL_ADDRESS,
-        txOpts: TransactionOpts = {},
+        orderTransactionOpts: OrderTransactionOpts = { shouldValidate: true },
     ): Promise<string> {
         // type assertions
         assert.doesConformToSchema('signedOrders', signedOrders, schemas.signedOrdersSchema);
@@ -69,7 +71,7 @@ export class ForwarderWrapper extends ContractWrapper {
         assert.doesConformToSchema('signedFeeOrders', signedFeeOrders, schemas.signedOrdersSchema);
         assert.isNumber('feePercentage', feePercentage);
         assert.isETHAddressHex('feeRecipientAddress', feeRecipientAddress);
-        assert.doesConformToSchema('txOpts', txOpts, txOptsSchema);
+        assert.doesConformToSchema('orderTransactionOpts', orderTransactionOpts, orderTxOptsSchema, [txOptsSchema]);
         // other assertions
         assert.ordersCanBeUsedForForwarderContract(signedOrders, this.getEtherTokenAddress());
         assert.feeOrdersCanBeUsedForForwarderContract(
@@ -85,20 +87,41 @@ export class ForwarderWrapper extends ContractWrapper {
         // optimize orders
         const optimizedMarketOrders = calldataOptimizationUtils.optimizeForwarderOrders(signedOrders);
         const optimizedFeeOrders = calldataOptimizationUtils.optimizeForwarderFeeOrders(signedFeeOrders);
-        // send transaction
+        // compile signatures
+        const signatures = _.map(optimizedMarketOrders, order => order.signature);
+        const feeSignatures = _.map(optimizedFeeOrders, order => order.signature);
+        // get contract
         const forwarderContractInstance = await this._getForwarderContractAsync();
+        // validate transaction
+        if (orderTransactionOpts.shouldValidate) {
+            await forwarderContractInstance.marketSellOrdersWithEth.callAsync(
+                optimizedMarketOrders,
+                signatures,
+                optimizedFeeOrders,
+                feeSignatures,
+                formattedFeePercentage,
+                feeRecipientAddress,
+                {
+                    value: ethAmount,
+                    from: normalizedTakerAddress,
+                    gas: orderTransactionOpts.gasLimit,
+                    gasPrice: orderTransactionOpts.gasPrice,
+                },
+            );
+        }
+        // send transaction
         const txHash = await forwarderContractInstance.marketSellOrdersWithEth.sendTransactionAsync(
             optimizedMarketOrders,
-            _.map(optimizedMarketOrders, order => order.signature),
+            signatures,
             optimizedFeeOrders,
-            _.map(optimizedFeeOrders, order => order.signature),
+            feeSignatures,
             formattedFeePercentage,
             feeRecipientAddress,
             {
                 value: ethAmount,
                 from: normalizedTakerAddress,
-                gas: txOpts.gasLimit,
-                gasPrice: txOpts.gasPrice,
+                gas: orderTransactionOpts.gasLimit,
+                gasPrice: orderTransactionOpts.gasPrice,
             },
         );
         return txHash;
@@ -107,20 +130,21 @@ export class ForwarderWrapper extends ContractWrapper {
      * Attempt to purchase makerAssetFillAmount of makerAsset by selling ethAmount provided with transaction.
      * Any ZRX required to pay fees for primary orders will automatically be purchased by the contract.
      * Any ETH not spent will be refunded to sender.
-     * @param   signedOrders         An array of objects that conform to the SignedOrder interface. All orders must specify the same makerAsset.
-     *                               All orders must specify WETH as the takerAsset
-     * @param   makerAssetFillAmount The amount of the order (in taker asset baseUnits) that you wish to fill.
-     * @param   takerAddress         The user Ethereum address who would like to fill this order. Must be available via the supplied
-     *                               Provider provided at instantiation.
-     * @param   ethAmount            The amount of eth to send with the transaction (in wei).
-     * @param   signedFeeOrders      An array of objects that conform to the SignedOrder interface. All orders must specify ZRX as makerAsset and WETH as takerAsset.
-     *                               Used to purchase ZRX for primary order fees.
-     * @param   feePercentage        The percentage of WETH sold that will payed as fee to forwarding contract feeRecipient.
-     *                               Defaults to 0.
-     * @param   feeRecipientAddress  The address that will receive ETH when signedFeeOrders are filled.
-     * @param   txOpts               Transaction parameters.
+     * @param   signedOrders            An array of objects that conform to the SignedOrder interface. All orders must specify the same makerAsset.
+     *                                  All orders must specify WETH as the takerAsset
+     * @param   makerAssetFillAmount    The amount of the order (in taker asset baseUnits) that you wish to fill.
+     * @param   takerAddress            The user Ethereum address who would like to fill this order. Must be available via the supplied
+     *                                  Provider provided at instantiation.
+     * @param   ethAmount               The amount of eth to send with the transaction (in wei).
+     * @param   signedFeeOrders         An array of objects that conform to the SignedOrder interface. All orders must specify ZRX as makerAsset and WETH as takerAsset.
+     *                                  Used to purchase ZRX for primary order fees.
+     * @param   feePercentage           The percentage of WETH sold that will payed as fee to forwarding contract feeRecipient.
+     *                                  Defaults to 0.
+     * @param   feeRecipientAddress     The address that will receive ETH when signedFeeOrders are filled.
+     * @param   orderTransactionOpts    Transaction parameters.
      * @return  Transaction hash.
      */
+    @decorators.asyncZeroExErrorHandler
     public async marketBuyOrdersWithEthAsync(
         signedOrders: SignedOrder[],
         makerAssetFillAmount: BigNumber,
@@ -129,7 +153,7 @@ export class ForwarderWrapper extends ContractWrapper {
         signedFeeOrders: SignedOrder[] = [],
         feePercentage: number = 0,
         feeRecipientAddress: string = constants.NULL_ADDRESS,
-        txOpts: TransactionOpts = {},
+        orderTransactionOpts: OrderTransactionOpts = { shouldValidate: true },
     ): Promise<string> {
         // type assertions
         assert.doesConformToSchema('signedOrders', signedOrders, schemas.signedOrdersSchema);
@@ -139,7 +163,7 @@ export class ForwarderWrapper extends ContractWrapper {
         assert.doesConformToSchema('signedFeeOrders', signedFeeOrders, schemas.signedOrdersSchema);
         assert.isNumber('feePercentage', feePercentage);
         assert.isETHAddressHex('feeRecipientAddress', feeRecipientAddress);
-        assert.doesConformToSchema('txOpts', txOpts, txOptsSchema);
+        assert.doesConformToSchema('orderTransactionOpts', orderTransactionOpts, orderTxOptsSchema, [txOptsSchema]);
         // other assertions
         assert.ordersCanBeUsedForForwarderContract(signedOrders, this.getEtherTokenAddress());
         assert.feeOrdersCanBeUsedForForwarderContract(
@@ -155,21 +179,43 @@ export class ForwarderWrapper extends ContractWrapper {
         // optimize orders
         const optimizedMarketOrders = calldataOptimizationUtils.optimizeForwarderOrders(signedOrders);
         const optimizedFeeOrders = calldataOptimizationUtils.optimizeForwarderFeeOrders(signedFeeOrders);
-        // send transaction
+        // compile signatures
+        const signatures = _.map(optimizedMarketOrders, order => order.signature);
+        const feeSignatures = _.map(optimizedFeeOrders, order => order.signature);
+        // get contract
         const forwarderContractInstance = await this._getForwarderContractAsync();
+        // validate transaction
+        if (orderTransactionOpts.shouldValidate) {
+            await forwarderContractInstance.marketBuyOrdersWithEth.callAsync(
+                optimizedMarketOrders,
+                makerAssetFillAmount,
+                signatures,
+                optimizedFeeOrders,
+                feeSignatures,
+                formattedFeePercentage,
+                feeRecipientAddress,
+                {
+                    value: ethAmount,
+                    from: normalizedTakerAddress,
+                    gas: orderTransactionOpts.gasLimit,
+                    gasPrice: orderTransactionOpts.gasPrice,
+                },
+            );
+        }
+        // send transaction
         const txHash = await forwarderContractInstance.marketBuyOrdersWithEth.sendTransactionAsync(
             optimizedMarketOrders,
             makerAssetFillAmount,
-            _.map(optimizedMarketOrders, order => order.signature),
+            signatures,
             optimizedFeeOrders,
-            _.map(optimizedFeeOrders, order => order.signature),
+            feeSignatures,
             formattedFeePercentage,
             feeRecipientAddress,
             {
                 value: ethAmount,
                 from: normalizedTakerAddress,
-                gas: txOpts.gasLimit,
-                gasPrice: txOpts.gasPrice,
+                gas: orderTransactionOpts.gasLimit,
+                gasPrice: orderTransactionOpts.gasPrice,
             },
         );
         return txHash;
diff --git a/packages/contract-wrappers/test/forwarder_wrapper_test.ts b/packages/contract-wrappers/test/forwarder_wrapper_test.ts
index f77b47337..4329e8770 100644
--- a/packages/contract-wrappers/test/forwarder_wrapper_test.ts
+++ b/packages/contract-wrappers/test/forwarder_wrapper_test.ts
@@ -17,6 +17,7 @@ chaiSetup.configure();
 const expect = chai.expect;
 const blockchainLifecycle = new BlockchainLifecycle(web3Wrapper);
 
+// tslint:disable:custom-no-magic-numbers
 describe('ForwarderWrapper', () => {
     const contractWrappersConfig = {
         networkId: constants.TESTRPC_NETWORK_ID,
@@ -99,6 +100,25 @@ describe('ForwarderWrapper', () => {
             expect(ordersInfo[0].orderStatus).to.be.equal(OrderStatus.FULLY_FILLED);
             expect(ordersInfo[1].orderStatus).to.be.equal(OrderStatus.FULLY_FILLED);
         });
+        it('should throw when invalid transaction and shouldValidate is true', async () => {
+            const signedOrders = [signedOrder];
+            // request more makerAsset than what is available
+            const makerAssetFillAmount = signedOrder.makerAssetAmount.plus(100);
+            return expect(
+                contractWrappers.forwarder.marketBuyOrdersWithEthAsync(
+                    signedOrders,
+                    makerAssetFillAmount,
+                    takerAddress,
+                    makerAssetFillAmount,
+                    [],
+                    0,
+                    constants.NULL_ADDRESS,
+                    {
+                        shouldValidate: true,
+                    },
+                ),
+            ).to.be.rejectedWith('COMPLETE_FILL_FAILED');
+        });
     });
     describe('#marketSellOrdersWithEthAsync', () => {
         it('should market sell orders with eth', async () => {
@@ -115,5 +135,33 @@ describe('ForwarderWrapper', () => {
             expect(ordersInfo[1].orderStatus).to.be.equal(OrderStatus.FILLABLE);
             expect(ordersInfo[1].orderTakerAssetFilledAmount).to.be.bignumber.equal(new BigNumber(4)); // only 95% of ETH is sold
         });
+        it('should throw when invalid transaction and shouldValidate is true', async () => {
+            // create an order with fees, we try to fill it but we do not provide enough ETH to cover the fees
+            const signedOrderWithFee = await fillScenarios.createFillableSignedOrderWithFeesAsync(
+                makerAssetData,
+                takerAssetData,
+                constants.ZERO_AMOUNT,
+                new BigNumber(100),
+                makerAddress,
+                constants.NULL_ADDRESS,
+                fillableAmount,
+                constants.NULL_ADDRESS,
+            );
+            const signedOrders = [signedOrderWithFee];
+            const makerAssetFillAmount = signedOrder.makerAssetAmount;
+            return expect(
+                contractWrappers.forwarder.marketSellOrdersWithEthAsync(
+                    signedOrders,
+                    takerAddress,
+                    makerAssetFillAmount,
+                    [],
+                    0,
+                    constants.NULL_ADDRESS,
+                    {
+                        shouldValidate: true,
+                    },
+                ),
+            ).to.be.rejectedWith('COMPLETE_FILL_FAILED');
+        });
     });
 });
-- 
cgit v1.2.3


From dc56ce454967d2bf0d5e8c93389c0fa71a9d1cc5 Mon Sep 17 00:00:00 2001
From: amaurer <git@maurer.me>
Date: Sat, 13 Oct 2018 08:47:37 -0400
Subject: Exported Stats in OW package

---
 packages/order-watcher/src/index.ts | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages')

diff --git a/packages/order-watcher/src/index.ts b/packages/order-watcher/src/index.ts
index d7ad4fba7..4a1b5012b 100644
--- a/packages/order-watcher/src/index.ts
+++ b/packages/order-watcher/src/index.ts
@@ -7,6 +7,7 @@ export {
     OrderState,
     ExchangeContractErrs,
     OrderRelevantState,
+    Stats,
 } from '@0xproject/types';
 
 export { OnOrderStateChangeCallback, OrderWatcherConfig } from './types';
-- 
cgit v1.2.3


From 29437c5761aa0b5d5cf1e9fba29471d2afddeefc Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 12:26:23 +0100
Subject: chore: Export stats type from 0x.js

---
 packages/0x.js/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/0x.js/src/index.ts b/packages/0x.js/src/index.ts
index 6eb1fd8ee..7301b22e2 100644
--- a/packages/0x.js/src/index.ts
+++ b/packages/0x.js/src/index.ts
@@ -49,7 +49,7 @@ export {
     ValidateOrderFillableOpts,
 } from '@0xproject/contract-wrappers';
 
-export { OrderWatcher, OnOrderStateChangeCallback, OrderWatcherConfig } from '@0xproject/order-watcher';
+export { OrderWatcher, OnOrderStateChangeCallback, OrderWatcherConfig, Stats } from '@0xproject/order-watcher';
 
 export import Web3ProviderEngine = require('web3-provider-engine');
 
-- 
cgit v1.2.3


From 40512ea608b2daa156b867390318e78d91598671 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 12:38:02 +0100
Subject: chore: Export Stats from types, not indirectly from OrderWatcher

---
 packages/0x.js/src/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/0x.js/src/index.ts b/packages/0x.js/src/index.ts
index 7301b22e2..ce3f616aa 100644
--- a/packages/0x.js/src/index.ts
+++ b/packages/0x.js/src/index.ts
@@ -49,7 +49,7 @@ export {
     ValidateOrderFillableOpts,
 } from '@0xproject/contract-wrappers';
 
-export { OrderWatcher, OnOrderStateChangeCallback, OrderWatcherConfig, Stats } from '@0xproject/order-watcher';
+export { OrderWatcher, OnOrderStateChangeCallback, OrderWatcherConfig } from '@0xproject/order-watcher';
 
 export import Web3ProviderEngine = require('web3-provider-engine');
 
@@ -78,6 +78,7 @@ export {
     ERC721AssetData,
     SignatureType,
     OrderRelevantState,
+    Stats,
 } from '@0xproject/types';
 
 export {
-- 
cgit v1.2.3