Merge branch 'development' into feature/instant/asset-buyer-check-liquidity

16 files changed, 115 insertions, 112 deletions

diff --git a/packages/website/package.json b/packages/website/package.json
index af43fabf9..0d2773a2c 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0x/website",
-    "version": "0.0.64",
+    "version": "0.0.66",
     "engines": {
         "node": ">=6.12"
     },
@@ -20,18 +20,18 @@
     "author": "Fabio Berger",
     "license": "Apache-2.0",
     "dependencies": {
-        "@0x/asset-buyer": "^3.0.5",
-        "@0x/contract-addresses": "^2.1.0",
-        "@0x/contract-wrappers": "^4.2.0",
-        "@0x/json-schemas": "^2.1.5",
-        "@0x/order-utils": "^3.1.0",
-        "@0x/react-docs": "^1.0.23",
-        "@0x/react-shared": "^1.1.0",
-        "@0x/subproviders": "^2.1.9",
-        "@0x/types": "^1.5.0",
-        "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.1.1",
-        "@0x/web3-wrapper": "^3.2.2",
+        "@0x/asset-buyer": "^4.0.1",
+        "@0x/contract-addresses": "^2.2.0",
+        "@0x/contract-wrappers": "^5.0.0",
+        "@0x/json-schemas": "^2.1.7",
+        "@0x/order-utils": "^3.1.2",
+        "@0x/react-docs": "^1.0.25",
+        "@0x/react-shared": "^1.1.2",
+        "@0x/subproviders": "^2.1.11",
+        "@0x/types": "^1.5.2",
+        "@0x/typescript-typings": "^3.0.8",
+        "@0x/utils": "^3.0.1",
+        "@0x/web3-wrapper": "^3.2.4",
         "@reach/dialog": "^0.1.2",
         "@types/react-lazyload": "^2.3.1",
         "@types/react-loadable": "^5.4.2",
@@ -42,7 +42,7 @@
         "blockies": "^0.0.2",
         "bowser": "^1.9.3",
         "deep-equal": "^1.0.1",
-        "ethereum-types": "^1.1.4",
+        "ethereum-types": "^1.1.6",
         "ethereumjs-util": "^5.1.1",
         "find-versions": "^2.0.0",
         "jsonschema": "^1.2.0",
@@ -54,18 +54,20 @@
         "polished": "^1.9.2",
         "query-string": "^6.0.0",
         "rc-slider": "^8.6.3",
-        "react": "^16.4.2",
+        "react": "^16.5.2",
         "react-copy-to-clipboard": "^5.0.0",
         "react-document-title": "^2.0.3",
-        "react-dom": "^16.4.2",
+        "react-dom": "^16.5.2",
         "react-flickity-component": "^3.1.0",
         "react-headroom": "2.2.2",
         "react-helmet": "^5.2.0",
         "react-lazyload": "^2.3.0",
         "react-loadable": "^5.5.0",
+        "react-markdown": "^4.0.6",
         "react-popper": "^1.0.0-beta.6",
         "react-redux": "^5.0.3",
         "react-responsive": "^6.0.1",
+        "react-router-dom": "^4.3.1",
         "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state",
         "react-scrollable-anchor": "^0.6.1",
         "react-syntax-highlighter": "^10.1.1",
diff --git a/packages/website/public/css/basscss.min.css b/packages/website/public/css/basscss.min.css
new file mode 100644
index 000000000..cb6f13198
--- /dev/null
+++ b/packages/website/public/css/basscss.min.css
@@ -0,0 +1 @@
+/*! Basscss | http://basscss.com | MIT License */.h1{font-size:2rem}.h2{font-size:1.5rem}.h3{font-size:1.25rem}.h4{font-size:1rem}.h5{font-size:.875rem}.h6{font-size:.75rem}.font-family-inherit{font-family:inherit}.font-size-inherit{font-size:inherit}.text-decoration-none{text-decoration:none}.bold{font-weight:700}.regular{font-weight:400}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.left-align{text-align:left}.center{text-align:center}.right-align{text-align:right}.justify{text-align:justify}.nowrap{white-space:nowrap}.break-word{word-wrap:break-word}.line-height-1{line-height:1}.line-height-2{line-height:1.125}.line-height-3{line-height:1.25}.line-height-4{line-height:1.5}.list-style-none{list-style:none}.underline{text-decoration:underline}.truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-reset{list-style:none;padding-left:0}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.table{display:table}.table-cell{display:table-cell}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.max-width-1{max-width:24rem}.max-width-2{max-width:32rem}.max-width-3{max-width:48rem}.max-width-4{max-width:64rem}.border-box{box-sizing:border-box}.align-baseline{vertical-align:baseline}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0,.mx0{margin-left:0}.mx0{margin-right:0}.my0{margin-top:0;margin-bottom:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1,.mx1{margin-left:.5rem}.mx1{margin-right:.5rem}.my1{margin-top:.5rem;margin-bottom:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2,.mx2{margin-left:1rem}.mx2{margin-right:1rem}.my2{margin-top:1rem;margin-bottom:1rem}.m3{margin:2rem}.mt3{margin-top:2rem}.mr3{margin-right:2rem}.mb3{margin-bottom:2rem}.ml3,.mx3{margin-left:2rem}.mx3{margin-right:2rem}.my3{margin-top:2rem;margin-bottom:2rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4,.mx4{margin-left:4rem}.mx4{margin-right:4rem}.my4{margin-top:4rem;margin-bottom:4rem}.mxn1{margin-left:-.5rem;margin-right:-.5rem}.mxn2{margin-left:-1rem;margin-right:-1rem}.mxn3{margin-left:-2rem;margin-right:-2rem}.mxn4{margin-left:-4rem;margin-right:-4rem}.ml-auto{margin-left:auto}.mr-auto,.mx-auto{margin-right:auto}.mx-auto{margin-left:auto}.p0{padding:0}.pt0{padding-top:0}.pr0{padding-right:0}.pb0{padding-bottom:0}.pl0,.px0{padding-left:0}.px0{padding-right:0}.py0{padding-top:0;padding-bottom:0}.p1{padding:.5rem}.pt1{padding-top:.5rem}.pr1{padding-right:.5rem}.pb1{padding-bottom:.5rem}.pl1{padding-left:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-left:.5rem;padding-right:.5rem}.p2{padding:1rem}.pt2{padding-top:1rem}.pr2{padding-right:1rem}.pb2{padding-bottom:1rem}.pl2{padding-left:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-left:1rem;padding-right:1rem}.p3{padding:2rem}.pt3{padding-top:2rem}.pr3{padding-right:2rem}.pb3{padding-bottom:2rem}.pl3{padding-left:2rem}.py3{padding-top:2rem;padding-bottom:2rem}.px3{padding-left:2rem;padding-right:2rem}.p4{padding:4rem}.pt4{padding-top:4rem}.pr4{padding-right:4rem}.pb4{padding-bottom:4rem}.pl4{padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.px4{padding-left:4rem;padding-right:4rem}.col{float:left}.col,.col-right{box-sizing:border-box}.col-right{float:right}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}@media (min-width:40em){.sm-col{float:left;box-sizing:border-box}.sm-col-right{float:right;box-sizing:border-box}.sm-col-1{width:8.33333%}.sm-col-2{width:16.66667%}.sm-col-3{width:25%}.sm-col-4{width:33.33333%}.sm-col-5{width:41.66667%}.sm-col-6{width:50%}.sm-col-7{width:58.33333%}.sm-col-8{width:66.66667%}.sm-col-9{width:75%}.sm-col-10{width:83.33333%}.sm-col-11{width:91.66667%}.sm-col-12{width:100%}}@media (min-width:52em){.md-col{float:left;box-sizing:border-box}.md-col-right{float:right;box-sizing:border-box}.md-col-1{width:8.33333%}.md-col-2{width:16.66667%}.md-col-3{width:25%}.md-col-4{width:33.33333%}.md-col-5{width:41.66667%}.md-col-6{width:50%}.md-col-7{width:58.33333%}.md-col-8{width:66.66667%}.md-col-9{width:75%}.md-col-10{width:83.33333%}.md-col-11{width:91.66667%}.md-col-12{width:100%}}@media (min-width:64em){.lg-col{float:left;box-sizing:border-box}.lg-col-right{float:right;box-sizing:border-box}.lg-col-1{width:8.33333%}.lg-col-2{width:16.66667%}.lg-col-3{width:25%}.lg-col-4{width:33.33333%}.lg-col-5{width:41.66667%}.lg-col-6{width:50%}.lg-col-7{width:58.33333%}.lg-col-8{width:66.66667%}.lg-col-9{width:75%}.lg-col-10{width:83.33333%}.lg-col-11{width:91.66667%}.lg-col-12{width:100%}}.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}@media (min-width:40em){.sm-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}@media (min-width:52em){.md-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}@media (min-width:64em){.lg-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}.flex-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.items-start{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;-ms-grid-row-align:flex-start;align-items:flex-start}.items-end{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;-ms-grid-row-align:flex-end;align-items:flex-end}.items-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.items-baseline{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;-ms-grid-row-align:baseline;align-items:baseline}.items-stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;-ms-grid-row-align:stretch;align-items:stretch}.self-start{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.self-end{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.self-center{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.self-baseline{-webkit-align-self:baseline;-ms-flex-item-align:baseline;align-self:baseline}.self-stretch{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}.justify-start{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.justify-end{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.justify-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.justify-between{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.justify-around{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.content-start{-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.content-end{-webkit-align-content:flex-end;-ms-flex-line-pack:end;align-content:flex-end}.content-center{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}.content-between{-webkit-align-content:space-between;-ms-flex-line-pack:justify;align-content:space-between}.content-around{-webkit-align-content:space-around;-ms-flex-line-pack:distribute;align-content:space-around}.content-stretch{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch}.flex-auto{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;min-height:0}.flex-none{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.order-0{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.order-1{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.order-2{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}.order-3{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.order-last{-webkit-box-ordinal-group:100000;-webkit-order:99999;-ms-flex-order:99999;order:99999}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.border{border-style:solid;border-width:1px}.border-top{border-top-style:solid;border-top-width:1px}.border-right{border-right-style:solid;border-right-width:1px}.border-bottom{border-bottom-style:solid;border-bottom-width:1px}.border-left{border-left-style:solid;border-left-width:1px}.border-none{border:0}.rounded{border-radius:3px}.circle{border-radius:50%}.rounded-top{border-radius:3px 3px 0 0}.rounded-right{border-radius:0 3px 3px 0}.rounded-bottom{border-radius:0 0 3px 3px}.rounded-left{border-radius:3px 0 0 3px}.not-rounded{border-radius:0}.hide{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}@media (max-width:40em){.xs-hide{display:none!important}}@media (min-width:40em) and (max-width:52em){.sm-hide{display:none!important}}@media (min-width:52em) and (max-width:64em){.md-hide{display:none!important}}@media (min-width:64em){.lg-hide{display:none!important}}.display-none{display:none!important}
\ No newline at end of file
diff --git a/packages/website/public/index.html b/packages/website/public/index.html
index 26ebcdec8..738b675e7 100644
--- a/packages/website/public/index.html
+++ b/packages/website/public/index.html
@@ -18,6 +18,7 @@
         <link rel="stylesheet" href="/css/roboto.css" />
         <link rel="stylesheet" href="/css/roboto_mono.css" />
         <link rel="stylesheet" href="/css/formular.css" />
+        <link rel="stylesheet" href="/css/basscss.min.css" />
         <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" />
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index e15a2dd94..527353aa0 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -20,8 +20,8 @@ import { utils } from 'ts/utils/utils';
 const VALID_ETHEREUM_DERIVATION_PATH_PREFIX = `44'/60'`;
 
 enum LedgerSteps {
-    CONNECT,
-    SELECT_ADDRESS,
+    Connect,
+    SelectAddress,
 }
 
 interface LedgerConfigDialogProps {
@@ -52,7 +52,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         const derivationPathIfExists = props.blockchain.getLedgerDerivationPathIfExists();
         this.state = {
             connectionErrMsg: '',
-            stepIndex: LedgerSteps.CONNECT,
+            stepIndex: LedgerSteps.Connect,
             userAddresses: [],
             addressBalances: [],
             derivationPath: _.isUndefined(derivationPathIfExists)
@@ -67,7 +67,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
             <FlatButton key="ledgerConnectCancel" label="Cancel" onClick={this._onClose.bind(this)} />,
         ];
         const dialogTitle =
-            this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address';
+            this.state.stepIndex === LedgerSteps.Connect ? 'Connect to your Ledger' : 'Select desired address';
         return (
             <Dialog
                 title={dialogTitle}
@@ -79,8 +79,8 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
                 bodyStyle={{ paddingBottom: 0 }}
             >
                 <div style={{ color: colors.grey700, paddingTop: 1 }}>
-                    {this.state.stepIndex === LedgerSteps.CONNECT && this._renderConnectStep()}
-                    {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS && this._renderSelectAddressStep()}
+                    {this.state.stepIndex === LedgerSteps.Connect && this._renderConnectStep()}
+                    {this.state.stepIndex === LedgerSteps.SelectAddress && this._renderSelectAddressStep()}
                 </div>
             </Dialog>
         );
@@ -195,7 +195,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
     private _onClose(): void {
         this.setState({
             connectionErrMsg: '',
-            stepIndex: LedgerSteps.CONNECT,
+            stepIndex: LedgerSteps.Connect,
         });
         const isOpen = false;
         this.props.toggleDialogFn(isOpen);
@@ -210,7 +210,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         this.props.blockchain.fetchTokenInformationAsync();
         this.props.dispatcher.updateUserWeiBalance(selectAddressBalance);
         this.setState({
-            stepIndex: LedgerSteps.CONNECT,
+            stepIndex: LedgerSteps.Connect,
         });
         const isOpen = false;
         this.props.toggleDialogFn(isOpen);
@@ -284,7 +284,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         const didSucceed = await this._fetchAddressesAndBalancesAsync();
         if (didSucceed) {
             this.setState({
-                stepIndex: LedgerSteps.SELECT_ADDRESS,
+                stepIndex: LedgerSteps.SelectAddress,
                 connectionErrMsg: '',
             });
         }
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 2fa2b94a0..7fee8c4df 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -182,7 +182,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                     </div>
                 )}
                 {!_.isEmpty(this.state.orderJSONErrMsg) && (
-                    <Alert type={AlertTypes.ERROR} message={this.state.orderJSONErrMsg} />
+                    <Alert type={AlertTypes.Error} message={this.state.orderJSONErrMsg} />
                 )}
             </div>
         );
@@ -298,7 +298,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                                 onClick={this._onCancelOrderClickFireAndForgetAsync.bind(this)}
                             />
                             {this.state.didCancelOrderSucceed && (
-                                <Alert type={AlertTypes.SUCCESS} message={this._renderCancelSuccessMsg()} />
+                                <Alert type={AlertTypes.Success} message={this._renderCancelSuccessMsg()} />
                             )}
                         </div>
                     ) : (
@@ -310,10 +310,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                                 onClick={this._onFillOrderClick.bind(this)}
                             />
                             {!_.isEmpty(this.state.globalErrMsg) && (
-                                <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
+                                <Alert type={AlertTypes.Error} message={this.state.globalErrMsg} />
                             )}
                             {this.state.didFillOrderSucceed && (
-                                <Alert type={AlertTypes.SUCCESS} message={this._renderFillSuccessMsg()} />
+                                <Alert type={AlertTypes.Success} message={this._renderFillSuccessMsg()} />
                             )}
                         </div>
                     )}
diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index e6ecd2ec8..d3f11f962 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -18,9 +18,9 @@ import { utils } from 'ts/utils/utils';
 const TOKEN_ICON_DIMENSION = 100;
 const TILE_DIMENSION = 146;
 enum AssetViews {
-    ASSET_PICKER = 'ASSET_PICKER',
-    NEW_TOKEN_FORM = 'NEW_TOKEN_FORM',
-    CONFIRM_TRACK_TOKEN = 'CONFIRM_TRACK_TOKEN',
+    AssetPicker = 'ASSET_PICKER',
+    NewTokenForm = 'NEW_TOKEN_FORM',
+    ConfirmTrackToken = 'CONFIRM_TRACK_TOKEN',
 }
 
 interface AssetPickerProps {
@@ -44,29 +44,29 @@ interface AssetPickerState {
 
 export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerState> {
     public static defaultProps: Partial<AssetPickerProps> = {
-        tokenVisibility: TokenVisibility.ALL,
+        tokenVisibility: TokenVisibility.All,
     };
     private readonly _dialogConfigsByAssetView: { [assetView: string]: DialogConfigs };
     constructor(props: AssetPickerProps) {
         super(props);
         this.state = {
-            assetView: AssetViews.ASSET_PICKER,
+            assetView: AssetViews.AssetPicker,
             hoveredAddress: undefined,
             chosenTrackTokenAddress: undefined,
             isAddingTokenToTracked: false,
         };
         this._dialogConfigsByAssetView = {
-            [AssetViews.ASSET_PICKER]: {
+            [AssetViews.AssetPicker]: {
                 title: 'Select token',
                 isModal: false,
                 actions: [],
             },
-            [AssetViews.NEW_TOKEN_FORM]: {
+            [AssetViews.NewTokenForm]: {
                 title: 'Add an ERC20 token',
                 isModal: false,
                 actions: [],
             },
-            [AssetViews.CONFIRM_TRACK_TOKEN]: {
+            [AssetViews.ConfirmTrackToken]: {
                 title: 'Tracking confirmation',
                 isModal: true,
                 actions: [
@@ -95,15 +95,15 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
                 autoScrollBodyContent={true}
                 onRequestClose={this._onCloseDialog.bind(this)}
             >
-                {this.state.assetView === AssetViews.ASSET_PICKER && this._renderAssetPicker()}
-                {this.state.assetView === AssetViews.NEW_TOKEN_FORM && (
+                {this.state.assetView === AssetViews.AssetPicker && this._renderAssetPicker()}
+                {this.state.assetView === AssetViews.NewTokenForm && (
                     <NewTokenForm
                         blockchain={this.props.blockchain}
                         onNewTokenSubmitted={this._onNewTokenSubmitted.bind(this)}
                         tokenByAddress={this.props.tokenByAddress}
                     />
                 )}
-                {this.state.assetView === AssetViews.CONFIRM_TRACK_TOKEN && this._renderConfirmTrackToken()}
+                {this.state.assetView === AssetViews.ConfirmTrackToken && this._renderConfirmTrackToken()}
             </Dialog>
         );
     }
@@ -138,19 +138,19 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         const allTokens = _.values(this.props.tokenByAddress);
         // filter tokens based on visibility specified in props, do not show ZRX or ETHER as tracked or untracked
         const filteredTokens =
-            this.props.tokenVisibility === TokenVisibility.ALL
+            this.props.tokenVisibility === TokenVisibility.All
                 ? allTokens
                 : _.filter(allTokens, token => {
                       return (
                           token.symbol !== constants.ZRX_TOKEN_SYMBOL &&
                           token.symbol !== constants.ETHER_TOKEN_SYMBOL &&
-                          ((this.props.tokenVisibility === TokenVisibility.TRACKED && utils.isTokenTracked(token)) ||
-                              (this.props.tokenVisibility === TokenVisibility.UNTRACKED &&
+                          ((this.props.tokenVisibility === TokenVisibility.Tracked && utils.isTokenTracked(token)) ||
+                              (this.props.tokenVisibility === TokenVisibility.Untracked &&
                                   !utils.isTokenTracked(token)))
                       );
                   });
         // if we are showing tracked tokens, sort by date added, otherwise sort by symbol
-        const sortKey = this.props.tokenVisibility === TokenVisibility.TRACKED ? 'trackedTimestamp' : 'symbol';
+        const sortKey = this.props.tokenVisibility === TokenVisibility.Tracked ? 'trackedTimestamp' : 'symbol';
         const sortedTokens = filteredTokens.sort(firstBy(sortKey));
         if (_.isEmpty(sortedTokens)) {
             return <div className="mx-auto p4 h2">No tokens to remove.</div>;
@@ -188,7 +188,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
             cursor: 'pointer',
             opacity: isHovered ? 0.6 : 1,
         };
-        if (this.props.tokenVisibility !== TokenVisibility.TRACKED) {
+        if (this.props.tokenVisibility !== TokenVisibility.Tracked) {
             gridTiles.push(
                 <div
                     key={otherTokenKey}
@@ -222,7 +222,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
     }
     private _onCloseDialog(): void {
         this.setState({
-            assetView: AssetViews.ASSET_PICKER,
+            assetView: AssetViews.AssetPicker,
         });
         this.props.onTokenChosen(this.props.currentTokenAddress);
     }
@@ -232,21 +232,21 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
             this.props.onTokenChosen(tokenAddress);
         } else {
             this.setState({
-                assetView: AssetViews.CONFIRM_TRACK_TOKEN,
+                assetView: AssetViews.ConfirmTrackToken,
                 chosenTrackTokenAddress: tokenAddress,
             });
         }
     }
     private _onCustomAssetChosen(): void {
         this.setState({
-            assetView: AssetViews.NEW_TOKEN_FORM,
+            assetView: AssetViews.NewTokenForm,
         });
     }
     private _onNewTokenSubmitted(newToken: Token): void {
         trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newToken);
         this.props.dispatcher.addTokenToTokenByAddress(newToken);
         this.setState({
-            assetView: AssetViews.ASSET_PICKER,
+            assetView: AssetViews.AssetPicker,
         });
         this.props.onTokenChosen(newToken.address);
     }
@@ -254,7 +254,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         const resetState: AssetPickerState = {
             ...this.state,
             isAddingTokenToTracked: false,
-            assetView: AssetViews.ASSET_PICKER,
+            assetView: AssetViews.AssetPicker,
             chosenTrackTokenAddress: undefined,
         };
         if (!didUserAcceptTracking) {
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx
index 8afbee977..0f70aa18f 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -36,9 +36,9 @@ import { errorReporter } from 'ts/utils/error_reporter';
 import { utils } from 'ts/utils/utils';
 
 enum SigningState {
-    UNSIGNED,
-    SIGNING,
-    SIGNED,
+    Unsigned,
+    Signing,
+    Signed,
 }
 
 interface GenerateOrderFormProps {
@@ -76,7 +76,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
         this.state = {
             globalErrMsg: '',
             shouldShowIncompleteErrs: false,
-            signingState: SigningState.UNSIGNED,
+            signingState: SigningState.Unsigned,
         };
     }
     public componentDidMount(): void {
@@ -207,7 +207,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                             />
                         </div>
                         {this.state.globalErrMsg !== '' && (
-                            <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
+                            <Alert type={AlertTypes.Error} message={this.state.globalErrMsg} />
                         )}
                     </div>
                 </div>
@@ -215,7 +215,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                     title="Order JSON"
                     titleStyle={{ fontWeight: 100 }}
                     modal={false}
-                    open={this.state.signingState === SigningState.SIGNED}
+                    open={this.state.signingState === SigningState.Signed}
                     onRequestClose={this._onCloseOrderJSONDialog.bind(this)}
                 >
                     <OrderJSON
@@ -247,7 +247,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
         // orderHash will not collide with the previously generated orderHash.
         this.props.dispatcher.updateOrderSalt(generatePseudoRandomSalt());
         this.setState({
-            signingState: SigningState.UNSIGNED,
+            signingState: SigningState.Unsigned,
         });
     }
     private async _onSignClickedAsync(): Promise<boolean> {
@@ -305,13 +305,13 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
     }
     private async _signTransactionAsync(): Promise<PortalOrder | undefined> {
         this.setState({
-            signingState: SigningState.SIGNING,
+            signingState: SigningState.Signing,
         });
         const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists();
         if (_.isUndefined(exchangeAddress)) {
             this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
             this.setState({
-                signingState: SigningState.UNSIGNED,
+                signingState: SigningState.Unsigned,
             });
             return undefined;
         }
@@ -371,7 +371,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
             }
         }
         this.setState({
-            signingState: globalErrMsg === '' ? SigningState.SIGNED : SigningState.UNSIGNED,
+            signingState: globalErrMsg === '' ? SigningState.Signed : SigningState.Unsigned,
             globalErrMsg,
         });
         return order;
diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx
index b8cd88b18..ce684d177 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -93,7 +93,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
                         onClickAsyncFn={this._onAddNewTokenClickAsync.bind(this)}
                     />
                 </div>
-                {this.state.globalErrMsg !== '' && <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />}
+                {this.state.globalErrMsg !== '' && <Alert type={AlertTypes.Error} message={this.state.globalErrMsg} />}
             </div>
         );
     }
diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
index 5396295d2..3a78d32f3 100644
--- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
@@ -150,7 +150,7 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr
             }
             logUtils.log(`Unexpected error encountered: ${err}`);
             logUtils.log(err.stack);
-            this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed);
+            this.props.onErrorOccurred(BalanceErrs.AllowanceSettingFailed);
             errorReporter.report(err);
         }
     }
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 6d7c90573..59cf2db71 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -229,8 +229,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         const isAssetPickerDialogOpen = this.state.tokenManagementState !== TokenManagementState.None;
         const tokenVisibility =
             this.state.tokenManagementState === TokenManagementState.Add
-                ? TokenVisibility.UNTRACKED
-                : TokenVisibility.TRACKED;
+                ? TokenVisibility.Untracked
+                : TokenVisibility.Tracked;
         return (
             <Container>
                 <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} />
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 2ed0229c8..e8f2a6461 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -303,7 +303,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                     currentTokenAddress={''}
                     onTokenChosen={this._onAssetTokenPicked.bind(this)}
                     tokenByAddress={this.props.tokenByAddress}
-                    tokenVisibility={this.state.isAddingToken ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED}
+                    tokenVisibility={this.state.isAddingToken ? TokenVisibility.Untracked : TokenVisibility.Tracked}
                 />
             </div>
         );
@@ -439,7 +439,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
     }
     private _onSendFailed(): void {
         this.setState({
-            errorType: BalanceErrs.sendFailed,
+            errorType: BalanceErrs.SendFailed,
         });
     }
     private _renderAmount(amount: BigNumber, decimals: number): React.ReactNode {
@@ -460,7 +460,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
     }
     private _renderErrorDialogBody(): React.ReactNode {
         switch (this.state.errorType) {
-            case BalanceErrs.incorrectNetworkForFaucet:
+            case BalanceErrs.IncorrectNetworkForFaucet:
                 return (
                     <div>
                         Our faucet can only send test Ether to addresses on testnets. Please make sure you are connected
@@ -468,7 +468,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                     </div>
                 );
 
-            case BalanceErrs.faucetRequestFailed:
+            case BalanceErrs.FaucetRequestFailed:
                 return (
                     <div>
                         An unexpected error occurred while trying to request test Ether from our faucet. Please refresh
@@ -476,13 +476,13 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                     </div>
                 );
 
-            case BalanceErrs.faucetQueueIsFull:
+            case BalanceErrs.FaucetQueueIsFull:
                 return <div>Our test Ether faucet queue is full. Please try requesting test Ether again later.</div>;
 
-            case BalanceErrs.mintingFailed:
+            case BalanceErrs.MintingFailed:
                 return <div>Minting your test tokens failed unexpectedly. Please refresh the page and try again.</div>;
 
-            case BalanceErrs.allowanceSettingFailed:
+            case BalanceErrs.AllowanceSettingFailed:
                 return (
                     <div>
                         An unexpected error occurred while trying to set your test token allowance. Please refresh the
@@ -521,7 +521,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
             logUtils.log(`Unexpected error encountered: ${err}`);
             logUtils.log(err.stack);
             this.setState({
-                errorType: BalanceErrs.mintingFailed,
+                errorType: BalanceErrs.MintingFailed,
             });
             errorReporter.report(err);
             return false;
@@ -537,7 +537,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         // from, we must show user an error message
         if (!utils.isTestNetwork(this.props.blockchain.networkId)) {
             this.setState({
-                errorType: BalanceErrs.incorrectNetworkForFaucet,
+                errorType: BalanceErrs.IncorrectNetworkForFaucet,
             });
             return false;
         }
@@ -553,8 +553,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
             logUtils.log(`Unexpected status code: ${response.status} -> ${responseBody}`);
             const errorType =
                 response.status === constants.UNAVAILABLE_STATUS
-                    ? BalanceErrs.faucetQueueIsFull
-                    : BalanceErrs.faucetRequestFailed;
+                    ? BalanceErrs.FaucetQueueIsFull
+                    : BalanceErrs.FaucetRequestFailed;
             this.setState({
                 errorType,
             });
diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx
index 32e0f1be8..c7a5b9030 100644
--- a/packages/website/ts/components/ui/alert.tsx
+++ b/packages/website/ts/components/ui/alert.tsx
@@ -8,7 +8,7 @@ interface AlertProps {
 }
 
 export const Alert = (props: AlertProps) => {
-    const isAlert = props.type === AlertTypes.ERROR;
+    const isAlert = props.type === AlertTypes.Error;
     const errMsgStyles = {
         background: isAlert ? colors.red200 : colors.lightestGreen,
         color: colors.white,
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index a8daf4102..f004dd47f 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -6,9 +6,9 @@ import * as React from 'react';
 const COMPLETE_STATE_SHOW_LENGTH_MS = 2000;
 
 enum ButtonState {
-    READY,
-    LOADING,
-    COMPLETE,
+    Ready,
+    Loading,
+    Complete,
 }
 
 interface LifeCycleRaisedButtonProps {
@@ -38,7 +38,7 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton
     constructor(props: LifeCycleRaisedButtonProps) {
         super(props);
         this.state = {
-            buttonState: ButtonState.READY,
+            buttonState: ButtonState.Ready,
         };
     }
     public componentWillUnmount(): void {
@@ -52,13 +52,13 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton
 
         let label;
         switch (this.state.buttonState) {
-            case ButtonState.READY:
+            case ButtonState.Ready:
                 label = this.props.labelReady;
                 break;
-            case ButtonState.LOADING:
+            case ButtonState.Loading:
                 label = this.props.labelLoading;
                 break;
-            case ButtonState.COMPLETE:
+            case ButtonState.Complete:
                 label = this.props.labelComplete;
                 break;
             default:
@@ -72,13 +72,13 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton
                 backgroundColor={this.props.backgroundColor}
                 labelColor={this.props.labelColor}
                 onClick={this.onClickAsync.bind(this)}
-                disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.READY}
+                disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.Ready}
             />
         );
     }
     public async onClickAsync(): Promise<void> {
         this.setState({
-            buttonState: ButtonState.LOADING,
+            buttonState: ButtonState.Loading,
         });
         const didSucceed = await this.props.onClickAsyncFn();
         if (this._didUnmount) {
@@ -86,16 +86,16 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton
         }
         if (didSucceed) {
             this.setState({
-                buttonState: ButtonState.COMPLETE,
+                buttonState: ButtonState.Complete,
             });
             this._buttonTimeoutId = window.setTimeout(() => {
                 this.setState({
-                    buttonState: ButtonState.READY,
+                    buttonState: ButtonState.Ready,
                 });
             }, COMPLETE_STATE_SHOW_LENGTH_MS);
         } else {
             this.setState({
-                buttonState: ButtonState.READY,
+                buttonState: ButtonState.Ready,
             });
         }
     }
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 4ed66c572..7bb018d17 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -31,7 +31,6 @@ import { NextWhy } from 'ts/pages/why';
 tradeHistoryStorage.clearIfRequired();
 trackedTokenStorage.clearIfRequired();
 
-import 'basscss/css/basscss.css';
 import 'less/all.less';
 
 // We pass modulePromise returning lambda instead of module promise,
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 50114e2d6..9492da5a5 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -83,12 +83,12 @@ export interface Fill {
 }
 
 export enum BalanceErrs {
-    incorrectNetworkForFaucet,
-    faucetRequestFailed,
-    faucetQueueIsFull,
-    mintingFailed,
-    sendFailed,
-    allowanceSettingFailed,
+    IncorrectNetworkForFaucet,
+    FaucetRequestFailed,
+    FaucetQueueIsFull,
+    MintingFailed,
+    SendFailed,
+    AllowanceSettingFailed,
 }
 
 export enum ActionTypes {
@@ -209,8 +209,8 @@ export enum ScreenWidths {
 }
 
 export enum AlertTypes {
-    ERROR,
-    SUCCESS,
+    Error,
+    Success,
 }
 
 export enum BlockchainErrs {
@@ -228,11 +228,11 @@ export enum BlockchainCallErrs {
 }
 
 export enum Environments {
-    DEVELOPMENT = 'DEVELOPMENT',
-    DOGFOOD = 'DOGFOOD',
-    STAGING = 'STAGING',
-    PRODUCTION = 'PRODUCTION',
-    UNKNOWN = 'UNKNOWN',
+    Development = 'DEVELOPMENT',
+    Dogfood = 'DOGFOOD',
+    Staging = 'STAGING',
+    Production = 'PRODUCTION',
+    Unknown = 'UNKNOWN',
 }
 
 export type ContractInstance = any; // TODO: add type definition for Contract
@@ -323,9 +323,9 @@ export interface DialogConfigs {
 }
 
 export enum TokenVisibility {
-    ALL = 'ALL',
-    UNTRACKED = 'UNTRACKED',
-    TRACKED = 'TRACKED',
+    All = 'ALL',
+    Untracked = 'UNTRACKED',
+    Tracked = 'TRACKED',
 }
 
 export interface VersionToFilePath {
@@ -350,7 +350,7 @@ export enum WebsitePaths {
     Docs = '/docs',
     ZeroExJs = '/docs/0x.js',
     Home = '/',
-    FAQ = '/faq',
+    FAQ = '/faq', // tslint:disable-line:enum-naming
     About = '/about',
     AboutMission = '/about/mission',
     AboutTeam = '/about/team',
@@ -629,7 +629,7 @@ export enum BrowserType {
 
 export enum OperatingSystemType {
     Android = 'Android',
-    iOS = 'iOS',
+    iOS = 'iOS', // tslint:disable-line:enum-naming
     Mac = 'Mac',
     Windows = 'Windows',
     WindowsPhone = 'WindowsPhone',
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 8cc0061de..890f1553a 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -342,18 +342,18 @@ export const utils = {
     },
     getEnvironment(): Environments {
         if (utils.isDogfood()) {
-            return Environments.DOGFOOD;
+            return Environments.Dogfood;
         }
         if (utils.isDevelopment()) {
-            return Environments.DEVELOPMENT;
+            return Environments.Development;
         }
         if (utils.isStaging()) {
-            return Environments.STAGING;
+            return Environments.Staging;
         }
         if (utils.isProduction()) {
-            return Environments.PRODUCTION;
+            return Environments.Production;
         }
-        return Environments.UNKNOWN;
+        return Environments.Unknown;
     },
     getEthToken(tokenByAddress: TokenByAddress): Token {
         return utils.getTokenBySymbol(constants.ETHER_TOKEN_SYMBOL, tokenByAddress);