Apply prettier config

25 files changed, 855 insertions, 1112 deletions

diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 722e819ff..3ff16f9fe 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,13 +1,13 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
-import {Footer} from 'ts/components/footer';
-import {TopBar} from 'ts/components/top_bar';
-import {Profile} from 'ts/pages/about/profile';
-import {ProfileInfo, Styles} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Footer } from 'ts/components/footer';
+import { TopBar } from 'ts/components/top_bar';
+import { Profile } from 'ts/pages/about/profile';
+import { ProfileInfo, Styles } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
 const teamRow1: ProfileInfo[] = [
     {
@@ -155,73 +155,61 @@ export class About extends React.Component<AboutProps, AboutState> {
     }
     public render() {
         return (
-            <div style={{backgroundColor: colors.lightestGrey}}>
-                <DocumentTitle title="0x About Us"/>
+            <div style={{ backgroundColor: colors.lightestGrey }}>
+                <DocumentTitle title="0x About Us" />
                 <TopBar
                     blockchainIsLoaded={false}
                     location={this.props.location}
-                    style={{backgroundColor: colors.lightestGrey}}
+                    style={{ backgroundColor: colors.lightestGrey }}
                 />
-                <div
-                    id="about"
-                    className="mx-auto max-width-4 py4"
-                    style={{color: colors.grey800}}
-                >
-                    <div
-                        className="mx-auto pb4 sm-px3"
-                        style={{maxWidth: 435}}
-                    >
-                        <div
-                            style={styles.header}
-                        >
-                            About us:
-                        </div>
+                <div id="about" className="mx-auto max-width-4 py4" style={{ color: colors.grey800 }}>
+                    <div className="mx-auto pb4 sm-px3" style={{ maxWidth: 435 }}>
+                        <div style={styles.header}>About us:</div>
                         <div
                             className="pt3"
-                            style={{fontSize: 17, color: colors.darkestGrey, lineHeight: 1.5}}
+                            style={{
+                                fontSize: 17,
+                                color: colors.darkestGrey,
+                                lineHeight: 1.5,
+                            }}
                         >
-                            Our team is a diverse and globally distributed group with backgrounds
-                            in engineering, research, business and design. We are passionate about
-                            decentralized technology and its potential to act as an equalizing force
-                            in the world.
+                            Our team is a diverse and globally distributed group with backgrounds in engineering,
+                            research, business and design. We are passionate about decentralized technology and its
+                            potential to act as an equalizing force in the world.
                         </div>
                     </div>
                     <div className="pt3 md-px4 lg-px0">
-                        <div className="clearfix pb3">
-                            {this._renderProfiles(teamRow1)}
-                        </div>
-                        <div className="clearfix">
-                            {this._renderProfiles(teamRow2)}
-                        </div>
+                        <div className="clearfix pb3">{this._renderProfiles(teamRow1)}</div>
+                        <div className="clearfix">{this._renderProfiles(teamRow2)}</div>
                     </div>
                     <div className="pt3 pb2">
                         <div
                             className="pt2 pb3 sm-center md-pl4 lg-pl0 md-ml3"
-                            style={{color: colors.grey, fontSize: 24, fontFamily: 'Roboto Mono'}}
+                            style={{
+                                color: colors.grey,
+                                fontSize: 24,
+                                fontFamily: 'Roboto Mono',
+                            }}
                         >
                             Advisors:
                         </div>
-                        <div className="clearfix">
-                            {this._renderProfiles(advisors)}
-                        </div>
+                        <div className="clearfix">{this._renderProfiles(advisors)}</div>
                     </div>
-                    <div className="mx-auto py4 sm-px3" style={{maxWidth: 308}}>
-                        <div
-                            className="pb2"
-                            style={styles.weAreHiring}
-                        >
+                    <div className="mx-auto py4 sm-px3" style={{ maxWidth: 308 }}>
+                        <div className="pb2" style={styles.weAreHiring}>
                             WE'RE HIRING
                         </div>
                         <div
                             className="pb4 mb4"
-                            style={{fontSize: 16, color: colors.darkestGrey, lineHeight: 1.5, letterSpacing: '0.5px'}}
+                            style={{
+                                fontSize: 16,
+                                color: colors.darkestGrey,
+                                lineHeight: 1.5,
+                                letterSpacing: '0.5px',
+                            }}
                         >
                             We are seeking outstanding candidates to{' '}
-                            <a
-                                href={constants.URL_ANGELLIST}
-                                target="_blank"
-                                style={{color: 'black'}}
-                            >
+                            <a href={constants.URL_ANGELLIST} target="_blank" style={{ color: 'black' }}>
                                 join our team
                             </a>
                             . We value passion, diversity and unique perspectives.
@@ -237,13 +225,8 @@ export class About extends React.Component<AboutProps, AboutState> {
         const colSize = utils.getColSize(numIndiv);
         return _.map(profiles, profile => {
             return (
-                <div
-                    key={`profile-${profile.name}`}
-                >
-                    <Profile
-                        colSize={colSize}
-                        profileInfo={profile}
-                    />
+                <div key={`profile-${profile.name}`}>
+                    <Profile colSize={colSize} profileInfo={profile} />
                 </div>
             );
         });
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index ef74f268a..bd2316f31 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {ProfileInfo, Styles} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { ProfileInfo, Styles } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 
 const IMAGE_DIMENSION = 149;
 const styles: Styles = {
@@ -24,43 +24,30 @@ interface ProfileProps {
 
 export function Profile(props: ProfileProps) {
     return (
-        <div
-            className={`lg-col md-col lg-col-${props.colSize} md-col-6`}
-        >
-            <div
-                style={{maxWidth: 300}}
-                className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3"
-            >
-                <div
-                    className="circle overflow-hidden mx-auto"
-                    style={styles.imageContainer}
-                >
-                    <img
-                        width={IMAGE_DIMENSION}
-                        src={props.profileInfo.image}
-                    />
+        <div className={`lg-col md-col lg-col-${props.colSize} md-col-6`}>
+            <div style={{ maxWidth: 300 }} className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3">
+                <div className="circle overflow-hidden mx-auto" style={styles.imageContainer}>
+                    <img width={IMAGE_DIMENSION} src={props.profileInfo.image} />
                 </div>
-                <div
-                    className="center"
-                    style={{fontSize: 18, fontWeight: 'bold', paddingTop: 20}}
-                >
+                <div className="center" style={{ fontSize: 18, fontWeight: 'bold', paddingTop: 20 }}>
                     {props.profileInfo.name}
                 </div>
-                {!_.isUndefined(props.profileInfo.title) &&
+                {!_.isUndefined(props.profileInfo.title) && (
                     <div
                         className="pt1 center"
-                        style={{fontSize: 14, fontFamily: 'Roboto Mono', color: colors.darkGrey}}
+                        style={{
+                            fontSize: 14,
+                            fontFamily: 'Roboto Mono',
+                            color: colors.darkGrey,
+                        }}
                     >
                         {props.profileInfo.title.toUpperCase()}
                     </div>
-                }
-                <div
-                    style={{minHeight: 60, lineHeight: 1.4}}
-                    className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center"
-                >
+                )}
+                <div style={{ minHeight: 60, lineHeight: 1.4 }} className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center">
                     {props.profileInfo.description}
                 </div>
-                <div className="flex pb3 mx-auto sm-hide xs-hide" style={{width: 180, opacity: 0.5}}>
+                <div className="flex pb3 mx-auto sm-hide xs-hide" style={{ width: 180, opacity: 0.5 }}>
                     {renderSocialMediaIcons(props.profileInfo)}
                 </div>
             </div>
@@ -84,13 +71,8 @@ function renderSocialMediaIcon(iconName: string, url: string) {
 
     return (
         <div key={url} className="pr1">
-            <a
-                href={url}
-                style={{color: 'inherit'}}
-                target="_blank"
-                className="text-decoration-none"
-            >
-                <i className={`zmdi ${iconName}`} style={{...styles.socalIcon}} />
+            <a href={url} style={{ color: 'inherit' }} target="_blank" className="text-decoration-none">
+                <i className={`zmdi ${iconName}`} style={{ ...styles.socalIcon }} />
             </a>
         </div>
     );
diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx
index 9627fdcdc..23cfd96bd 100644
--- a/packages/website/ts/pages/documentation/comment.tsx
+++ b/packages/website/ts/pages/documentation/comment.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as ReactMarkdown from 'react-markdown';
-import {MarkdownCodeBlock} from 'ts/pages/shared/markdown_code_block';
+import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
 
 interface CommentProps {
     comment: string;
@@ -15,10 +15,7 @@ const defaultProps = {
 export const Comment: React.SFC<CommentProps> = (props: CommentProps) => {
     return (
         <div className={`${props.className} comment`}>
-            <ReactMarkdown
-                source={props.comment}
-                renderers={{CodeBlock: MarkdownCodeBlock}}
-            />
+            <ReactMarkdown source={props.comment} renderers={{ CodeBlock: MarkdownCodeBlock }} />
         </div>
     );
 };
diff --git a/packages/website/ts/pages/documentation/custom_enum.tsx b/packages/website/ts/pages/documentation/custom_enum.tsx
index 7dced9b60..8d50a2f52 100644
--- a/packages/website/ts/pages/documentation/custom_enum.tsx
+++ b/packages/website/ts/pages/documentation/custom_enum.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {CustomType} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { CustomType } from 'ts/types';
+import { utils } from 'ts/utils/utils';
 
 const STRING_ENUM_CODE_PREFIX = ' strEnum(';
 
@@ -23,8 +23,9 @@ export function CustomEnum(props: CustomEnumProps) {
     return (
         <span>
             {`{`}
-                {'\t'}{enumValues}
-                <br />
+            {'\t'}
+            {enumValues}
+            <br />
             {`}`}
         </span>
     );
diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts
index b88b247e8..4b1ec122a 100644
--- a/packages/website/ts/pages/documentation/docs_info.ts
+++ b/packages/website/ts/pages/documentation/docs_info.ts
@@ -18,7 +18,7 @@ export class DocsInfo {
     public docsJsonRoot: string;
     public menu: DocsMenu;
     public sections: SectionsMap;
-    public sectionNameToMarkdown: {[sectionName: string]: string};
+    public sectionNameToMarkdown: { [sectionName: string]: string };
     private _docsInfo: DocsInfoConfig;
     constructor(config: DocsInfoConfig) {
         this.displayName = config.displayName;
@@ -41,7 +41,7 @@ export class DocsInfo {
         const modulePathsIfExists = this._docsInfo.sectionNameToModulePath[sectionName];
         return modulePathsIfExists;
     }
-    public getMenu(selectedVersion?: string): {[section: string]: string[]} {
+    public getMenu(selectedVersion?: string): { [section: string]: string[] } {
         if (_.isUndefined(selectedVersion) || _.isUndefined(this._docsInfo.menuSubsectionToVersionWhenIntroduced)) {
             return this._docsInfo.menu;
         }
@@ -55,8 +55,7 @@ export class DocsInfo {
         finalMenu.contracts = _.filter(finalMenu.contracts, (contractName: string) => {
             const versionIntroducedIfExists = this._docsInfo.menuSubsectionToVersionWhenIntroduced[contractName];
             if (!_.isUndefined(versionIntroducedIfExists)) {
-                const existsInSelectedVersion = compareVersions(selectedVersion,
-                                                                versionIntroducedIfExists) >= 0;
+                const existsInSelectedVersion = compareVersions(selectedVersion, versionIntroducedIfExists) >= 0;
                 return existsInSelectedVersion;
             } else {
                 return true;
@@ -106,7 +105,7 @@ export class DocsInfo {
     public isVisibleConstructor(sectionName: string): boolean {
         return _.includes(this._docsInfo.visibleConstructors, sectionName);
     }
-    public convertToDocAgnosticFormat(docObj: DoxityDocObj|TypeDocNode): DocAgnosticFormat {
+    public convertToDocAgnosticFormat(docObj: DoxityDocObj | TypeDocNode): DocAgnosticFormat {
         return this._docsInfo.convertToDocAgnosticFormatFn(docObj, this);
     }
 }
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 1731c19fe..2315847ad 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -3,23 +3,21 @@ import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
-import {
-    scroller,
-} from 'react-scroll';
+import { scroller } from 'react-scroll';
 import semverSort = require('semver-sort');
-import {TopBar} from 'ts/components/top_bar';
-import {Badge} from 'ts/components/ui/badge';
-import {Comment} from 'ts/pages/documentation/comment';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {EventDefinition} from 'ts/pages/documentation/event_definition';
-import {MethodBlock} from 'ts/pages/documentation/method_block';
-import {SourceLink} from 'ts/pages/documentation/source_link';
-import {Type} from 'ts/pages/documentation/type';
-import {TypeDefinition} from 'ts/pages/documentation/type_definition';
-import {MarkdownSection} from 'ts/pages/shared/markdown_section';
-import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
-import {SectionHeader} from 'ts/pages/shared/section_header';
-import {Dispatcher} from 'ts/redux/dispatcher';
+import { TopBar } from 'ts/components/top_bar';
+import { Badge } from 'ts/components/ui/badge';
+import { Comment } from 'ts/pages/documentation/comment';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { EventDefinition } from 'ts/pages/documentation/event_definition';
+import { MethodBlock } from 'ts/pages/documentation/method_block';
+import { SourceLink } from 'ts/pages/documentation/source_link';
+import { Type } from 'ts/pages/documentation/type';
+import { TypeDefinition } from 'ts/pages/documentation/type_definition';
+import { MarkdownSection } from 'ts/pages/shared/markdown_section';
+import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
+import { SectionHeader } from 'ts/pages/shared/section_header';
+import { Dispatcher } from 'ts/redux/dispatcher';
 import {
     AddressByContractName,
     DocAgnosticFormat,
@@ -33,15 +31,15 @@ import {
     TypeDefinitionByName,
     TypescriptMethod,
 } from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {docUtils} from 'ts/utils/doc_utils';
-import {utils} from 'ts/utils/utils';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { docUtils } from 'ts/utils/doc_utils';
+import { utils } from 'ts/utils/utils';
 
 const SCROLL_TOP_ID = 'docsScrollTop';
 
-const networkNameToColor: {[network: string]: string} = {
+const networkNameToColor: { [network: string]: string } = {
     [Networks.kovan]: colors.purple,
     [Networks.ropsten]: colors.red,
     [Networks.mainnet]: colors.turquois,
@@ -79,8 +77,7 @@ const styles: Styles = {
     },
 };
 
-export class Documentation extends
-    React.Component<DocumentationAllProps, DocumentationState> {
+export class Documentation extends React.Component<DocumentationAllProps, DocumentationState> {
     constructor(props: DocumentationAllProps) {
         super(props);
         this.state = {
@@ -96,12 +93,12 @@ export class Documentation extends
         this._fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists);
     }
     public render() {
-        const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) ?
-                {} :
-                this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat);
+        const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat)
+            ? {}
+            : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat);
         return (
             <div>
-                <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`}/>
+                <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} />
                 <TopBar
                     blockchainIsLoaded={false}
                     location={this.props.location}
@@ -112,29 +109,26 @@ export class Documentation extends
                     shouldFullWidth={true}
                     docsInfo={this.props.docsInfo}
                 />
-                {_.isUndefined(this.state.docAgnosticFormat) ?
-                    <div
-                        className="col col-12"
-                        style={styles.mainContainers}
-                    >
+                {_.isUndefined(this.state.docAgnosticFormat) ? (
+                    <div className="col col-12" style={styles.mainContainers}>
                         <div
                             className="relative sm-px2 sm-pt2 sm-m1"
-                            style={{height: 122, top: '50%', transform: 'translateY(-50%)'}}
+                            style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
                         >
                             <div className="center pb2">
                                 <CircularProgress size={40} thickness={5} />
                             </div>
-                            <div className="center pt2" style={{paddingBottom: 11}}>Loading documentation...</div>
+                            <div className="center pt2" style={{ paddingBottom: 11 }}>
+                                Loading documentation...
+                            </div>
                         </div>
-                    </div> :
-                    <div
-                        className="mx-auto flex"
-                        style={{color: colors.grey800, height: 43}}
-                    >
+                    </div>
+                ) : (
+                    <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}>
                         <div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide">
                             <div
                                 className="border-right absolute"
-                                style={{...styles.menuContainer, ...styles.mainContainers}}
+                                style={{ ...styles.menuContainer, ...styles.mainContainers }}
                             >
                                 <NestedSidebarMenu
                                     selectedVersion={this.props.docsVersion}
@@ -146,11 +140,7 @@ export class Documentation extends
                             </div>
                         </div>
                         <div className="relative col lg-col-9 md-col-9 sm-col-12 col-12">
-                            <div
-                                id="documentation"
-                                style={styles.mainContainers}
-                                className="absolute"
-                            >
+                            <div id="documentation" style={styles.mainContainers} className="absolute">
                                 <div id={SCROLL_TOP_ID} />
                                 <h1 className="md-pl2 sm-pl3">
                                     <a href={this.props.docsInfo.packageUrl} target="_blank">
@@ -161,7 +151,7 @@ export class Documentation extends
                             </div>
                         </div>
                     </div>
-                }
+                )}
             </div>
         );
     }
@@ -224,136 +214,120 @@ export class Documentation extends
             );
         });
         return (
-            <div
-                key={`section-${sectionName}`}
-                className="py2 pr3 md-pl2 sm-pl3"
-            >
+            <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
                 <div className="flex">
-                        <div style={{marginRight: 7}}>
-                            <SectionHeader sectionName={sectionName} />
-                        </div>
-                        {this._renderNetworkBadgesIfExists(sectionName)}
+                    <div style={{ marginRight: 7 }}>
+                        <SectionHeader sectionName={sectionName} />
+                    </div>
+                    {this._renderNetworkBadgesIfExists(sectionName)}
                 </div>
-                {docSection.comment &&
-                    <Comment
-                        comment={docSection.comment}
-                    />
-                }
+                {docSection.comment && <Comment comment={docSection.comment} />}
                 {docSection.constructors.length > 0 &&
-                 this.props.docsInfo.isVisibleConstructor(sectionName) &&
-                    <div>
-                        <h2 className="thin">Constructor</h2>
-                        {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
-                    </div>
-                }
-                {docSection.properties.length > 0 &&
+                    this.props.docsInfo.isVisibleConstructor(sectionName) && (
+                        <div>
+                            <h2 className="thin">Constructor</h2>
+                            {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
+                        </div>
+                    )}
+                {docSection.properties.length > 0 && (
                     <div>
                         <h2 className="thin">Properties</h2>
                         <div>{propertyDefs}</div>
                     </div>
-                }
-                {docSection.methods.length > 0 &&
+                )}
+                {docSection.methods.length > 0 && (
                     <div>
                         <h2 className="thin">Methods</h2>
                         <div>{methodDefs}</div>
                     </div>
-                }
-                {!_.isUndefined(docSection.events) && docSection.events.length > 0 &&
-                    <div>
-                        <h2 className="thin">Events</h2>
-                        <div>{eventDefs}</div>
-                    </div>
-                }
-                {!_.isUndefined(typeDefs) &&  typeDefs.length > 0 &&
-                    <div>
-                        <div>{typeDefs}</div>
-                    </div>
-                }
+                )}
+                {!_.isUndefined(docSection.events) &&
+                    docSection.events.length > 0 && (
+                        <div>
+                            <h2 className="thin">Events</h2>
+                            <div>{eventDefs}</div>
+                        </div>
+                    )}
+                {!_.isUndefined(typeDefs) &&
+                    typeDefs.length > 0 && (
+                        <div>
+                            <div>{typeDefs}</div>
+                        </div>
+                    )}
             </div>
         );
     }
     private _renderNetworkBadgesIfExists(sectionName: string) {
         const networkToAddressByContractName = configs.CONTRACT_ADDRESS[this.props.docsVersion];
-        const badges = _.map(networkToAddressByContractName,
+        const badges = _.map(
+            networkToAddressByContractName,
             (addressByContractName: AddressByContractName, networkName: string) => {
                 const contractAddress = addressByContractName[sectionName];
                 if (_.isUndefined(contractAddress)) {
                     return null;
                 }
                 const linkIfExists = utils.getEtherScanLinkIfExists(
-                    contractAddress, constants.NETWORK_ID_BY_NAME[networkName], EtherscanLinkSuffixes.Address,
+                    contractAddress,
+                    constants.NETWORK_ID_BY_NAME[networkName],
+                    EtherscanLinkSuffixes.Address,
                 );
                 return (
                     <a
                         key={`badge-${networkName}-${sectionName}`}
                         href={linkIfExists}
                         target="_blank"
-                        style={{color: colors.white, textDecoration: 'none'}}
+                        style={{ color: colors.white, textDecoration: 'none' }}
                     >
-                        <Badge
-                            title={networkName}
-                            backgroundColor={networkNameToColor[networkName]}
-                        />
+                        <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} />
                     </a>
                 );
-        });
+            },
+        );
         return badges;
     }
-    private _renderConstructors(constructors: SolidityMethod[]|TypescriptMethod[],
-                                sectionName: string,
-                                typeDefinitionByName: TypeDefinitionByName): React.ReactNode {
+    private _renderConstructors(
+        constructors: SolidityMethod[] | TypescriptMethod[],
+        sectionName: string,
+        typeDefinitionByName: TypeDefinitionByName,
+    ): React.ReactNode {
         const constructorDefs = _.map(constructors, constructor => {
-            return this._renderMethodBlocks(
-                constructor, sectionName, constructor.isConstructor, typeDefinitionByName,
-            );
+            return this._renderMethodBlocks(constructor, sectionName, constructor.isConstructor, typeDefinitionByName);
         });
-        return (
-            <div>
-                {constructorDefs}
-            </div>
-        );
+        return <div>{constructorDefs}</div>;
     }
     private _renderProperty(sectionName: string, property: Property): React.ReactNode {
         return (
-            <div
-                key={`property-${property.name}-${property.type.name}`}
-                className="pb3"
-            >
+            <div key={`property-${property.name}-${property.type.name}`} className="pb3">
                 <code className="hljs">
                     {property.name}:
-                    <Type
-                        type={property.type}
-                        sectionName={sectionName}
-                        docsInfo={this.props.docsInfo}
-                    />
+                    <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} />
                 </code>
-                {property.source &&
+                {property.source && (
                     <SourceLink
                         version={this.props.docsVersion}
                         source={property.source}
                         baseUrl={this.props.docsInfo.packageUrl}
                         subPackageName={this.props.docsInfo.subPackageName}
                     />
-                }
-                {property.comment &&
-                    <Comment
-                        comment={property.comment}
-                        className="py2"
-                    />
-                }
+                )}
+                {property.comment && <Comment comment={property.comment} className="py2" />}
             </div>
         );
     }
-    private _renderMethodBlocks(method: SolidityMethod|TypescriptMethod, sectionName: string,
-                                isConstructor: boolean, typeDefinitionByName: TypeDefinitionByName): React.ReactNode {
+    private _renderMethodBlocks(
+        method: SolidityMethod | TypescriptMethod,
+        sectionName: string,
+        isConstructor: boolean,
+        typeDefinitionByName: TypeDefinitionByName,
+    ): React.ReactNode {
         return (
             <MethodBlock
-               key={`method-${method.name}-${sectionName}`}
-               sectionName={sectionName}
-               method={method}
-               typeDefinitionByName={typeDefinitionByName}
-               libraryVersion={this.props.docsVersion}
-               docsInfo={this.props.docsInfo}
+                key={`method-${method.name}-${sectionName}`}
+                sectionName={sectionName}
+                method={method}
+                typeDefinitionByName={typeDefinitionByName}
+                libraryVersion={this.props.docsVersion}
+                docsInfo={this.props.docsInfo}
             />
         );
     }
@@ -364,7 +338,11 @@ export class Documentation extends
             hash = SCROLL_TOP_ID; // scroll to the top
         }
 
-        scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'});
+        scroller.scrollTo(hash, {
+            duration: 0,
+            offset: 0,
+            containerId: 'documentation',
+        });
     }
     private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> {
         const versionToFileName = await docUtils.getVersionToFileNameAsync(this.props.docsInfo.docsJsonRoot);
@@ -384,14 +362,18 @@ export class Documentation extends
 
         const versionFileNameToFetch = versionToFileName[versionToFetch];
         const versionDocObj = await docUtils.getJSONDocFileAsync(
-            versionFileNameToFetch, this.props.docsInfo.docsJsonRoot,
+            versionFileNameToFetch,
+            this.props.docsInfo.docsJsonRoot,
         );
         const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj);
 
-        this.setState({
-            docAgnosticFormat,
-        }, () => {
-            this._scrollToHash();
-        });
+        this.setState(
+            {
+                docAgnosticFormat,
+            },
+            () => {
+                this._scrollToHash();
+            },
+        );
     }
 }
diff --git a/packages/website/ts/pages/documentation/enum.tsx b/packages/website/ts/pages/documentation/enum.tsx
index b5fbc4bd2..7dfdee771 100644
--- a/packages/website/ts/pages/documentation/enum.tsx
+++ b/packages/website/ts/pages/documentation/enum.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {EnumValue} from 'ts/types';
+import { EnumValue } from 'ts/types';
 
 interface EnumProps {
     values: EnumValue[];
@@ -14,8 +14,8 @@ export function Enum(props: EnumProps) {
     return (
         <span>
             {`{`}
-                {values}
-                <br />
+            {values}
+            <br />
             {`}`}
         </span>
     );
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index 2fef019d2..0e53e38e7 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -1,10 +1,10 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {Type} from 'ts/pages/documentation/type';
-import {AnchorTitle} from 'ts/pages/shared/anchor_title';
-import {Event, EventArg, HeaderSizes} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { Type } from 'ts/pages/documentation/type';
+import { AnchorTitle } from 'ts/pages/shared/anchor_title';
+import { Event, EventArg, HeaderSizes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 
 interface EventDefinitionProps {
     event: Event;
@@ -29,7 +29,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
             <div
                 id={`${this.props.sectionName}-${event.name}`}
                 className="pb2"
-                style={{overflow: 'hidden', width: '100%'}}
+                style={{ overflow: 'hidden', width: '100%' }}
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
@@ -39,29 +39,24 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
                     id={event.name}
                     shouldShowAnchor={this.state.shouldShowAnchor}
                 />
-                <div style={{fontSize: 16}}>
+                <div style={{ fontSize: 16 }}>
                     <pre>
-                        <code className="hljs">
-                            {this._renderEventCode()}
-                        </code>
+                        <code className="hljs">{this._renderEventCode()}</code>
                     </pre>
                 </div>
             </div>
         );
     }
     private _renderEventCode() {
-        const indexed = <span style={{color: colors.green}}> indexed</span>;
+        const indexed = <span style={{ color: colors.green }}> indexed</span>;
         const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => {
             const type = (
-                <Type
-                    type={eventArg.type}
-                    sectionName={this.props.sectionName}
-                    docsInfo={this.props.docsInfo}
-                />
+                <Type type={eventArg.type} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} />
             );
             return (
                 <span key={`eventArg-${eventArg.name}`}>
-                    {eventArg.name}{eventArg.isIndexed ? indexed : ''}:  {type},
+                    {eventArg.name}
+                    {eventArg.isIndexed ? indexed : ''}: {type},
                 </span>
             );
         });
@@ -71,9 +66,10 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
         return (
             <span>
                 {`{`}
-                    <br />
-                    {'\t'}{argList}
-                    <br />
+                <br />
+                {'\t'}
+                {argList}
+                <br />
                 {`}`}
             </span>
         );
diff --git a/packages/website/ts/pages/documentation/interface.tsx b/packages/website/ts/pages/documentation/interface.tsx
index 1a6b562fe..16a772125 100644
--- a/packages/website/ts/pages/documentation/interface.tsx
+++ b/packages/website/ts/pages/documentation/interface.tsx
@@ -1,9 +1,9 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {MethodSignature} from 'ts/pages/documentation/method_signature';
-import {Type} from 'ts/pages/documentation/type';
-import {CustomType, TypeDocTypes} from 'ts/types';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { MethodSignature } from 'ts/pages/documentation/method_signature';
+import { Type } from 'ts/pages/documentation/type';
+import { CustomType, TypeDocTypes } from 'ts/types';
 
 interface InterfaceProps {
     type: CustomType;
@@ -17,12 +17,9 @@ export function Interface(props: InterfaceProps) {
         return (
             <span key={`property-${property.name}-${property.type}-${type.name}`}>
                 {property.name}:{' '}
-                {property.type.typeDocType !== TypeDocTypes.Reflection ?
-                    <Type
-                        type={property.type}
-                        sectionName={props.sectionName}
-                        docsInfo={props.docsInfo}
-                    /> :
+                {property.type.typeDocType !== TypeDocTypes.Reflection ? (
+                    <Type type={property.type} sectionName={props.sectionName} docsInfo={props.docsInfo} />
+                ) : (
                     <MethodSignature
                         method={property.type.method}
                         sectionName={props.sectionName}
@@ -30,7 +27,7 @@ export function Interface(props: InterfaceProps) {
                         shouldUseArrowSyntax={true}
                         docsInfo={props.docsInfo}
                     />
-                },
+                )},
             </span>
         );
     });
@@ -42,11 +39,11 @@ export function Interface(props: InterfaceProps) {
                 {is.keyName}: <Type type={is.keyType} sectionName={props.sectionName} docsInfo={props.docsInfo} />
             </span>
         );
-        properties.push((
+        properties.push(
             <span key={`indexSignature-${type.name}-${is.keyType.name}`}>
                 [{param}]: {is.valueName},
-            </span>
-        ));
+            </span>,
+        );
     }
     const propertyList = _.reduce(properties, (prev: React.ReactNode, curr: React.ReactNode) => {
         return [prev, '\n\t', curr];
@@ -54,9 +51,10 @@ export function Interface(props: InterfaceProps) {
     return (
         <span>
             {`{`}
-                <br />
-                {'\t'}{propertyList}
-                <br />
+            <br />
+            {'\t'}
+            {propertyList}
+            <br />
             {`}`}
         </span>
     );
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
index 147bc34d6..dfde5931b 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -1,23 +1,16 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {Comment} from 'ts/pages/documentation/comment';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {MethodSignature} from 'ts/pages/documentation/method_signature';
-import {SourceLink} from 'ts/pages/documentation/source_link';
-import {AnchorTitle} from 'ts/pages/shared/anchor_title';
-import {
-    HeaderSizes,
-    Parameter,
-    SolidityMethod,
-    Styles,
-    TypeDefinitionByName,
-    TypescriptMethod,
-} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {typeDocUtils} from 'ts/utils/typedoc_utils';
+import { Comment } from 'ts/pages/documentation/comment';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { MethodSignature } from 'ts/pages/documentation/method_signature';
+import { SourceLink } from 'ts/pages/documentation/source_link';
+import { AnchorTitle } from 'ts/pages/shared/anchor_title';
+import { HeaderSizes, Parameter, SolidityMethod, Styles, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { typeDocUtils } from 'ts/utils/typedoc_utils';
 
 interface MethodBlockProps {
-    method: SolidityMethod|TypescriptMethod;
+    method: SolidityMethod | TypescriptMethod;
     sectionName: string;
     libraryVersion: string;
     typeDefinitionByName: TypeDefinitionByName;
@@ -56,22 +49,16 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
         return (
             <div
                 id={`${this.props.sectionName}-${method.name}`}
-                style={{overflow: 'hidden', width: '100%'}}
+                style={{ overflow: 'hidden', width: '100%' }}
                 className="pb4"
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
-                {!method.isConstructor &&
+                {!method.isConstructor && (
                     <div className="flex">
-                        {(method as TypescriptMethod).isStatic &&
-                            this._renderChip('Static')
-                        }
-                        {(method as SolidityMethod).isConstant &&
-                            this._renderChip('Constant')
-                        }
-                        {(method as SolidityMethod).isPayable &&
-                            this._renderChip('Payable')
-                        }
+                        {(method as TypescriptMethod).isStatic && this._renderChip('Static')}
+                        {(method as SolidityMethod).isConstant && this._renderChip('Constant')}
+                        {(method as SolidityMethod).isPayable && this._renderChip('Payable')}
                         <AnchorTitle
                             headerSize={HeaderSizes.H3}
                             title={method.name}
@@ -79,7 +66,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
                             shouldShowAnchor={this.state.shouldShowAnchor}
                         />
                     </div>
-                }
+                )}
                 <code className="hljs">
                     <MethodSignature
                         method={method}
@@ -88,53 +75,38 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
                         docsInfo={this.props.docsInfo}
                     />
                 </code>
-                {(method as TypescriptMethod).source &&
+                {(method as TypescriptMethod).source && (
                     <SourceLink
                         version={this.props.libraryVersion}
                         source={(method as TypescriptMethod).source}
                         baseUrl={this.props.docsInfo.packageUrl}
                         subPackageName={this.props.docsInfo.subPackageName}
                     />
-                }
-                {method.comment &&
-                    <Comment
-                        comment={method.comment}
-                        className="py2"
-                    />
-                }
-                {method.parameters && !_.isEmpty(method.parameters) &&
-                    <div>
-                        <h4
-                            className="pb1 thin"
-                            style={{borderBottom: '1px solid #e1e8ed'}}
-                        >
-                            ARGUMENTS
-                        </h4>
-                        {this._renderParameterDescriptions(method.parameters)}
-                    </div>
-                }
-                {method.returnComment &&
+                )}
+                {method.comment && <Comment comment={method.comment} className="py2" />}
+                {method.parameters &&
+                    !_.isEmpty(method.parameters) && (
+                        <div>
+                            <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}>
+                                ARGUMENTS
+                            </h4>
+                            {this._renderParameterDescriptions(method.parameters)}
+                        </div>
+                    )}
+                {method.returnComment && (
                     <div className="pt1 comment">
-                        <h4
-                            className="pb1 thin"
-                            style={{borderBottom: '1px solid #e1e8ed'}}
-                        >
+                        <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}>
                             RETURNS
                         </h4>
-                        <Comment
-                            comment={method.returnComment}
-                        />
+                        <Comment comment={method.returnComment} />
                     </div>
-                }
+                )}
             </div>
         );
     }
     private _renderChip(text: string) {
         return (
-            <div
-                className="p1 mr1"
-                style={styles.chip}
-            >
+            <div className="p1 mr1" style={styles.chip}>
                 {text}
             </div>
         );
@@ -146,22 +118,16 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
                 <div
                     key={`param-description-${parameter.name}`}
                     className="flex pb1 mb2"
-                    style={{borderBottom: '1px solid #f0f4f7'}}
+                    style={{ borderBottom: '1px solid #f0f4f7' }}
                 >
                     <div className="pl2 col lg-col-4 md-col-4 sm-col-12 col-12">
-                        <div className="bold">
-                            {parameter.name}
-                        </div>
-                        <div className="pt1" style={{color: colors.grey, fontSize: 14}}>
+                        <div className="bold">{parameter.name}</div>
+                        <div className="pt1" style={{ color: colors.grey, fontSize: 14 }}>
                             {isOptional && 'optional'}
                         </div>
                     </div>
                     <div className="col lg-col-8 md-col-8 sm-col-12 col-12">
-                        {parameter.comment &&
-                            <Comment
-                                comment={parameter.comment}
-                            />
-                        }
+                        {parameter.comment && <Comment comment={parameter.comment} />}
                     </div>
                 </div>
             );
diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx
index 366d4c13e..041dcd093 100644
--- a/packages/website/ts/pages/documentation/method_signature.tsx
+++ b/packages/website/ts/pages/documentation/method_signature.tsx
@@ -1,12 +1,12 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {Type} from 'ts/pages/documentation/type';
-import {Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { Type } from 'ts/pages/documentation/type';
+import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
+import { constants } from 'ts/utils/constants';
 
 interface MethodSignatureProps {
-    method: TypescriptMethod|SolidityMethod;
+    method: TypescriptMethod | SolidityMethod;
     sectionName: string;
     shouldHideMethodName?: boolean;
     shouldUseArrowSyntax?: boolean;
@@ -21,31 +21,28 @@ const defaultProps = {
 
 export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSignatureProps) => {
     const sectionName = constants.TYPES_SECTION_NAME;
-    const parameters = renderParameters(
-        props.method, props.docsInfo, sectionName, props.typeDefinitionByName,
-    );
+    const parameters = renderParameters(props.method, props.docsInfo, sectionName, props.typeDefinitionByName);
     const paramString = _.reduce(parameters, (prev: React.ReactNode, curr: React.ReactNode) => {
         return [prev, ', ', curr];
     });
     const methodName = props.shouldHideMethodName ? '' : props.method.name;
-    const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter) ?
-                                  undefined :
-                                  renderTypeParameter(
-                                      props.method, props.docsInfo, sectionName, props.typeDefinitionByName,
-                                  );
+    const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter)
+        ? undefined
+        : renderTypeParameter(props.method, props.docsInfo, sectionName, props.typeDefinitionByName);
     return (
         <span>
-            {props.method.callPath}{methodName}{typeParameterIfExists}({paramString})
-            {props.shouldUseArrowSyntax ? ' => ' : ': '}
-            {' '}
-            {props.method.returnType &&
+            {props.method.callPath}
+            {methodName}
+            {typeParameterIfExists}({paramString})
+            {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '}
+            {props.method.returnType && (
                 <Type
                     type={props.method.returnType}
                     sectionName={sectionName}
                     typeDefinitionByName={props.typeDefinitionByName}
                     docsInfo={props.docsInfo}
                 />
-            }
+            )}
         </span>
     );
 };
@@ -53,8 +50,10 @@ export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSi
 MethodSignature.defaultProps = defaultProps;
 
 function renderParameters(
-    method: TypescriptMethod|SolidityMethod, docsInfo: DocsInfo,
-    sectionName: string, typeDefinitionByName?: TypeDefinitionByName,
+    method: TypescriptMethod | SolidityMethod,
+    docsInfo: DocsInfo,
+    sectionName: string,
+    typeDefinitionByName?: TypeDefinitionByName,
 ) {
     const parameters = method.parameters;
     const params = _.map(parameters, (p: Parameter) => {
@@ -69,7 +68,8 @@ function renderParameters(
         );
         return (
             <span key={`param-${p.type}-${p.name}`}>
-                {p.name}{isOptional && '?'}: {type}
+                {p.name}
+                {isOptional && '?'}: {type}
             </span>
         );
     });
@@ -77,19 +77,21 @@ function renderParameters(
 }
 
 function renderTypeParameter(
-    method: TypescriptMethod, docsInfo: DocsInfo,
-    sectionName: string, typeDefinitionByName?: TypeDefinitionByName,
+    method: TypescriptMethod,
+    docsInfo: DocsInfo,
+    sectionName: string,
+    typeDefinitionByName?: TypeDefinitionByName,
 ) {
     const typeParameter = method.typeParameter;
     const typeParam = (
         <span>
             {`<${typeParameter.name} extends `}
-                <Type
-                    type={typeParameter.type}
-                    sectionName={sectionName}
-                    typeDefinitionByName={typeDefinitionByName}
-                    docsInfo={docsInfo}
-                />
+            <Type
+                type={typeParameter.type}
+                sectionName={sectionName}
+                typeDefinitionByName={typeDefinitionByName}
+                docsInfo={docsInfo}
+            />
             {`>`}
         </span>
     );
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
index 1a3b58f81..6588ee39e 100644
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ b/packages/website/ts/pages/documentation/source_link.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {Source} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { Source } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 
 interface SourceLinkProps {
     source: Source;
@@ -10,9 +10,7 @@ interface SourceLinkProps {
     subPackageName: string;
 }
 
-const packagesWithNamespace = [
-    'connect',
-];
+const packagesWithNamespace = ['connect'];
 
 export function SourceLink(props: SourceLinkProps) {
     const src = props.source;
@@ -24,13 +22,8 @@ export function SourceLink(props: SourceLinkProps) {
     }
     const sourceCodeUrl = `${url}/blob/${tagPrefix}%40${props.version}/packages/${pkg}/${src.fileName}#L${src.line}`;
     return (
-        <div className="pt2" style={{fontSize: 14}}>
-            <a
-                href={sourceCodeUrl}
-                target="_blank"
-                className="underline"
-                style={{color: colors.grey}}
-            >
+        <div className="pt2" style={{ fontSize: 14 }}>
+            <a href={sourceCodeUrl} target="_blank" className="underline" style={{ color: colors.grey }}>
                 Source
             </a>
         </div>
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index 6182b147a..e989e7129 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -1,16 +1,16 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {Link as ScrollLink} from 'react-scroll';
+import { Link as ScrollLink } from 'react-scroll';
 import * as ReactTooltip from 'react-tooltip';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {TypeDefinition} from 'ts/pages/documentation/type_definition';
-import {Type as TypeDef, TypeDefinitionByName, TypeDocTypes} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { TypeDefinition } from 'ts/pages/documentation/type_definition';
+import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
 // Some types reference other libraries. For these types, we want to link the user to the relevant documentation.
-const typeToUrl: {[typeName: string]: string} = {
+const typeToUrl: { [typeName: string]: string } = {
     Web3: constants.URL_WEB3_DOCS,
     Provider: constants.URL_WEB3_PROVIDER_DOCS,
     BigNumber: constants.URL_BIGNUMBERJS_GITHUB,
@@ -18,13 +18,13 @@ const typeToUrl: {[typeName: string]: string} = {
     LogEntryEvent: constants.URL_WEB3_LOG_ENTRY_EVENT,
 };
 
-const typePrefix: {[typeName: string]: string} = {
+const typePrefix: { [typeName: string]: string } = {
     Provider: 'Web3',
     DecodedLogEntryEvent: 'Web3',
     LogEntryEvent: 'Web3',
 };
 
-const typeToSection: {[typeName: string]: string} = {
+const typeToSection: { [typeName: string]: string } = {
     ExchangeWrapper: 'exchange',
     TokenWrapper: 'token',
     TokenRegistryWrapper: 'tokenRegistry',
@@ -48,7 +48,7 @@ export function Type(props: TypeProps): any {
     const isReference = type.typeDocType === TypeDocTypes.Reference;
     const isArray = type.typeDocType === TypeDocTypes.Array;
     let typeNameColor = 'inherit';
-    let typeName: string|React.ReactNode;
+    let typeName: string | React.ReactNode;
     let typeArgs: React.ReactNode[] = [];
     switch (type.typeDocType) {
         case TypeDocTypes.Intrinsic:
@@ -130,27 +130,29 @@ export function Type(props: TypeProps): any {
         return [prev, ', ', curr];
     });
 
-    const typeNameUrlIfExists = typeToUrl[(typeName as string)];
-    const typePrefixIfExists = typePrefix[(typeName as string)];
-    const sectionNameIfExists = typeToSection[(typeName as string)];
+    const typeNameUrlIfExists = typeToUrl[typeName as string];
+    const typePrefixIfExists = typePrefix[typeName as string];
+    const sectionNameIfExists = typeToSection[typeName as string];
     if (!_.isUndefined(typeNameUrlIfExists)) {
         typeName = (
             <a
                 href={typeNameUrlIfExists}
                 target="_blank"
                 className="text-decoration-none"
-                style={{color: colors.lightBlueA700}}
+                style={{ color: colors.lightBlueA700 }}
             >
-                {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''}{typeName}
+                {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''}
+                {typeName}
             </a>
         );
-    } else if ((isReference || isArray) &&
-                (props.docsInfo.isPublicType(typeName as string) ||
-                !_.isUndefined(sectionNameIfExists))) {
+    } else if (
+        (isReference || isArray) &&
+        (props.docsInfo.isPublicType(typeName as string) || !_.isUndefined(sectionNameIfExists))
+    ) {
         const id = Math.random().toString();
-        const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists) ?
-                                       `${props.sectionName}-${typeName}` :
-                                       sectionNameIfExists;
+        const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists)
+            ? `${props.sectionName}-${typeName}`
+            : sectionNameIfExists;
         let typeDefinition;
         if (props.typeDefinitionByName) {
             typeDefinition = props.typeDefinitionByName[typeName as string];
@@ -162,46 +164,49 @@ export function Type(props: TypeProps): any {
                 duration={constants.DOCS_SCROLL_DURATION_MS}
                 containerId={constants.DOCS_CONTAINER_ID}
             >
-            {_.isUndefined(typeDefinition) || utils.isUserOnMobile() ?
-                <span
-                    onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)}
-                    style={{color: colors.lightBlueA700, cursor: 'pointer'}}
-                >
-                    {typeName}
-                </span> :
-                <span
-                    data-tip={true}
-                    data-for={id}
-                    onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)}
-                    style={{color: colors.lightBlueA700, cursor: 'pointer', display: 'inline-block'}}
-                >
-                    {typeName}
-                    <ReactTooltip
-                        type="light"
-                        effect="solid"
-                        id={id}
-                        className="typeTooltip"
+                {_.isUndefined(typeDefinition) || utils.isUserOnMobile() ? (
+                    <span
+                        onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)}
+                        style={{ color: colors.lightBlueA700, cursor: 'pointer' }}
                     >
-                        <TypeDefinition
-                            sectionName={props.sectionName}
-                            customType={typeDefinition}
-                            shouldAddId={false}
-                            docsInfo={props.docsInfo}
-                        />
-                    </ReactTooltip>
-                </span>
-            }
+                        {typeName}
+                    </span>
+                ) : (
+                    <span
+                        data-tip={true}
+                        data-for={id}
+                        onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)}
+                        style={{
+                            color: colors.lightBlueA700,
+                            cursor: 'pointer',
+                            display: 'inline-block',
+                        }}
+                    >
+                        {typeName}
+                        <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip">
+                            <TypeDefinition
+                                sectionName={props.sectionName}
+                                customType={typeDefinition}
+                                shouldAddId={false}
+                                docsInfo={props.docsInfo}
+                            />
+                        </ReactTooltip>
+                    </span>
+                )}
             </ScrollLink>
         );
     }
     return (
         <span>
-            <span style={{color: typeNameColor}}>{typeName}</span>
-            {isArray && '[]'}{!_.isEmpty(typeArgs) &&
+            <span style={{ color: typeNameColor }}>{typeName}</span>
+            {isArray && '[]'}
+            {!_.isEmpty(typeArgs) && (
                 <span>
-                    {'<'}{commaSeparatedTypeArgs}{'>'}
+                    {'<'}
+                    {commaSeparatedTypeArgs}
+                    {'>'}
                 </span>
-            }
+            )}
         </span>
     );
 }
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index 25499a6d0..d46eec76c 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -1,16 +1,16 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {Comment} from 'ts/pages/documentation/comment';
-import {CustomEnum} from 'ts/pages/documentation/custom_enum';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {Enum} from 'ts/pages/documentation/enum';
-import {Interface} from 'ts/pages/documentation/interface';
-import {MethodSignature} from 'ts/pages/documentation/method_signature';
-import {Type} from 'ts/pages/documentation/type';
-import {AnchorTitle} from 'ts/pages/shared/anchor_title';
-import {CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {utils} from 'ts/utils/utils';
+import { Comment } from 'ts/pages/documentation/comment';
+import { CustomEnum } from 'ts/pages/documentation/custom_enum';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { Enum } from 'ts/pages/documentation/enum';
+import { Interface } from 'ts/pages/documentation/interface';
+import { MethodSignature } from 'ts/pages/documentation/method_signature';
+import { Type } from 'ts/pages/documentation/type';
+import { AnchorTitle } from 'ts/pages/shared/anchor_title';
+import { CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { utils } from 'ts/utils/utils';
 
 interface TypeDefinitionProps {
     sectionName: string;
@@ -45,21 +45,13 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
             case KindString.Interface:
                 typePrefix = 'Interface';
                 codeSnippet = (
-                    <Interface
-                        type={customType}
-                        sectionName={this.props.sectionName}
-                        docsInfo={this.props.docsInfo}
-                    />
+                    <Interface type={customType} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} />
                 );
                 break;
 
             case KindString.Variable:
                 typePrefix = 'Enum';
-                codeSnippet = (
-                    <CustomEnum
-                        type={customType}
-                    />
-                );
+                codeSnippet = <CustomEnum type={customType} />;
                 break;
 
             case KindString.Enumeration:
@@ -70,28 +62,21 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                         defaultValue: c.defaultValue,
                     };
                 });
-                codeSnippet = (
-                    <Enum
-                        values={enumValues}
-                    />
-                );
+                codeSnippet = <Enum values={enumValues} />;
                 break;
 
             case KindString.TypeAlias:
                 typePrefix = 'Type Alias';
                 codeSnippet = (
                     <span>
-                        <span
-                            style={{color: colors.lightPurple}}
-                        >
-                            type
-                        </span> {customType.name} ={' '}
-                        {customType.type.typeDocType !== TypeDocTypes.Reflection ?
+                        <span style={{ color: colors.lightPurple }}>type</span> {customType.name} ={' '}
+                        {customType.type.typeDocType !== TypeDocTypes.Reflection ? (
                             <Type
                                 type={customType.type}
                                 sectionName={this.props.sectionName}
                                 docsInfo={this.props.docsInfo}
-                            /> :
+                            />
+                        ) : (
                             <MethodSignature
                                 method={customType.type.method}
                                 sectionName={this.props.sectionName}
@@ -99,7 +84,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                                 shouldUseArrowSyntax={true}
                                 docsInfo={this.props.docsInfo}
                             />
-                        }
+                        )}
                     </span>
                 );
                 break;
@@ -113,7 +98,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
             <div
                 id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
                 className="pb2"
-                style={{overflow: 'hidden', width: '100%'}}
+                style={{ overflow: 'hidden', width: '100%' }}
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
@@ -123,19 +108,12 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                     id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
                     shouldShowAnchor={this.state.shouldShowAnchor}
                 />
-                <div style={{fontSize: 16}}>
+                <div style={{ fontSize: 16 }}>
                     <pre>
-                        <code className="hljs">
-                            {codeSnippet}
-                        </code>
+                        <code className="hljs">{codeSnippet}</code>
                     </pre>
                 </div>
-                {customType.comment &&
-                    <Comment
-                        comment={customType.comment}
-                        className="py2"
-                    />
-                }
+                {customType.comment && <Comment comment={customType.comment} className="py2" />}
             </div>
         );
     }
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index c5afcb79f..b4b5214a2 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -1,13 +1,13 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
-import {Footer} from 'ts/components/footer';
-import {TopBar} from 'ts/components/top_bar';
-import {Question} from 'ts/pages/faq/question';
-import {FAQQuestion, FAQSection, Styles, WebsitePaths} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
+import { Footer } from 'ts/components/footer';
+import { TopBar } from 'ts/components/top_bar';
+import { Question } from 'ts/pages/faq/question';
+import { FAQQuestion, FAQSection, Styles, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
 
 export interface FAQProps {
     source: string;
@@ -30,14 +30,19 @@ const sections: FAQSection[] = [
                 prompt: 'What is 0x?',
                 answer: (
                     <div>
-                        At its core, 0x is an open and non-rent seeking protocol that facilitates trustless,
-                        low friction exchange of Ethereum-based assets. Developers can use 0x as a platform
-                        to build exchange applications on top of{' '}
-                        (<a href={`${configs.BASE_URL}${WebsitePaths.ZeroExJs}#introduction`} target="blank">0x.js</a>
-                        {' '}is a Javascript library for interacting with the 0x protocol). For end users, 0x will be
-                        the infrastructure of a wide variety of user-facing applications i.e.{' '}
-                        <a href={`${configs.BASE_URL}${WebsitePaths.Portal}`} target="blank">0x Portal</a>,
-                        a decentralized application that facilitates trustless trading of Ethereum-based tokens
+                        At its core, 0x is an open and non-rent seeking protocol that facilitates trustless, low
+                        friction exchange of Ethereum-based assets. Developers can use 0x as a platform to build
+                        exchange applications on top of (<a
+                            href={`${configs.BASE_URL}${WebsitePaths.ZeroExJs}#introduction`}
+                            target="blank"
+                        >
+                            0x.js
+                        </a>{' '}
+                        is a Javascript library for interacting with the 0x protocol). For end users, 0x will be the
+                        infrastructure of a wide variety of user-facing applications i.e.{' '}
+                        <a href={`${configs.BASE_URL}${WebsitePaths.Portal}`} target="blank">
+                            0x Portal
+                        </a>, a decentralized application that facilitates trustless trading of Ethereum-based tokens
                         between known counterparties.
                     </div>
                 ),
@@ -47,15 +52,14 @@ const sections: FAQSection[] = [
                 answer: (
                     <div>
                         In the two years since the Ethereum blockchain’s genesis block, numerous decentralized
-                        applications (dApps) have created Ethereum smart contracts for peer-to-peer exchange.
-                        Rapid iteration and a lack of best practices have left the blockchain scattered with
-                        proprietary and application-specific implementations. As a result, end users are
-                        exposed to numerous smart contracts of varying quality and security, with unique
-                        configuration processes and learning curves, all of which implement the same
-                        functionality. This approach imposes unnecessary costs on the network by fragmenting
-                        end users according to the particular dApp each user happens to be using, eliminating
-                        valuable network effects around liquidity. 0x is the solution to this problem by
-                        acting as modular, unopinionated building blocks that may be assembled and reconfigured.
+                        applications (dApps) have created Ethereum smart contracts for peer-to-peer exchange. Rapid
+                        iteration and a lack of best practices have left the blockchain scattered with proprietary and
+                        application-specific implementations. As a result, end users are exposed to numerous smart
+                        contracts of varying quality and security, with unique configuration processes and learning
+                        curves, all of which implement the same functionality. This approach imposes unnecessary costs
+                        on the network by fragmenting end users according to the particular dApp each user happens to be
+                        using, eliminating valuable network effects around liquidity. 0x is the solution to this problem
+                        by acting as modular, unopinionated building blocks that may be assembled and reconfigured.
                     </div>
                 ),
             },
@@ -64,20 +68,18 @@ const sections: FAQSection[] = [
                 answer: (
                     <div>
                         <ul>
+                            <li>0x is a protocol for exchange, not a user-facing exchange application.</li>
                             <li>
-                                0x is a protocol for exchange, not a user-facing exchange application.
-                            </li>
-                            <li>
-                                0x is decentralized and trustless; there is no central party which can be
-                                hacked, run away with customer funds or be subjected to government regulations.
-                                Hacks of Mt. Gox, Shapeshift and Bitfinex have demonstrated that these types of
-                                systemic risks are palpable.
+                                0x is decentralized and trustless; there is no central party which can be hacked, run
+                                away with customer funds or be subjected to government regulations. Hacks of Mt. Gox,
+                                Shapeshift and Bitfinex have demonstrated that these types of systemic risks are
+                                palpable.
                             </li>
                             <li>
-                                Rather than a proprietary system that exists to extract rent for its owners,
-                                0x is public infrastructure that is funded by a globally distributed community
-                                of stakeholders. While the protocol is free to use, it enables for-profit
-                                user-facing exchange applications to be built on top of the protocol.
+                                Rather than a proprietary system that exists to extract rent for its owners, 0x is
+                                public infrastructure that is funded by a globally distributed community of
+                                stakeholders. While the protocol is free to use, it enables for-profit user-facing
+                                exchange applications to be built on top of the protocol.
                             </li>
                         </ul>
                     </div>
@@ -87,13 +89,12 @@ const sections: FAQSection[] = [
                 prompt: 'If 0x protocol is free to use, where do transaction fees come in?',
                 answer: (
                     <div>
-                        0x protocol uses off-chain order books to massively reduce friction costs for
-                        market makers and ensure that the blockchain is only used for trade settlement.
-                        Hosting and maintaining an off-chain order book is a service; to incent “Relayers”
-                        to provide this service they must be able to charge transaction fees on trading
-                        activity. Relayers are free to set their transaction fees to any value they desire.
-                        We expect Relayers to be highly competitive and transaction fees to approach an
-                        efficient economic equilibrium over time.
+                        0x protocol uses off-chain order books to massively reduce friction costs for market makers and
+                        ensure that the blockchain is only used for trade settlement. Hosting and maintaining an
+                        off-chain order book is a service; to incent “Relayers” to provide this service they must be
+                        able to charge transaction fees on trading activity. Relayers are free to set their transaction
+                        fees to any value they desire. We expect Relayers to be highly competitive and transaction fees
+                        to approach an efficient economic equilibrium over time.
                     </div>
                 ),
             },
@@ -102,25 +103,23 @@ const sections: FAQSection[] = [
                 answer: (
                     <div>
                         <div>
-                            Participants in a state channel pass cryptographically signed messages back and
-                            forth, accumulating intermediate state changes without publishing them to the
-                            canonical chain until the channel is closed. State channels are ideal for “bar tab”
-                            applications where numerous intermediate state changes may be accumulated off-chain
-                            before being settled by a final on-chain transaction (i.e. day trading, poker,
-                            turn-based games).
+                            Participants in a state channel pass cryptographically signed messages back and forth,
+                            accumulating intermediate state changes without publishing them to the canonical chain until
+                            the channel is closed. State channels are ideal for “bar tab” applications where numerous
+                            intermediate state changes may be accumulated off-chain before being settled by a final
+                            on-chain transaction (i.e. day trading, poker, turn-based games).
                         </div>
                         <ul>
                             <li>
-                                While state channels drastically reduce the number of on-chain transactions
-                                for specific use cases, numerous on-chain transactions and a security deposit
-                                are required to open and safely close a state channel making them less efficient
-                                than 0x for executing one-time trades.
+                                While state channels drastically reduce the number of on-chain transactions for specific
+                                use cases, numerous on-chain transactions and a security deposit are required to open
+                                and safely close a state channel making them less efficient than 0x for executing
+                                one-time trades.
                             </li>
                             <li>
-                                State channels are isolated from the Ethereum blockchain meaning that
-                                they cannot interact with smart contracts. 0x is designed to be integrated
-                                directly into smart contracts so trades can be executed programmatically
-                                in a single line of Solidity code.
+                                State channels are isolated from the Ethereum blockchain meaning that they cannot
+                                interact with smart contracts. 0x is designed to be integrated directly into smart
+                                contracts so trades can be executed programmatically in a single line of Solidity code.
                             </li>
                         </ul>
                     </div>
@@ -130,16 +129,20 @@ const sections: FAQSection[] = [
                 prompt: 'What types of digital assets are supported by 0x?',
                 answer: (
                     <div>
-                        0x supports all Ethereum-based assets that adhere to the ERC20 token standard.
-                        There are many ERC20 tokens, worth a combined $2.2B, and more tokens are created
-                        each month. We believe that, by 2020, thousands of assets will be tokenized and
-                        moved onto the Ethereum blockchain including traditional securities such as equities,
-                        bonds and derivatives, fiat currencies and scarce digital goods such as video game
-                        items. In the future, cross-blockchain solutions such as{' '}
-                        <a href="https://cosmos.network/" target="_blank">Cosmos</a> and{' '}
-                        <a href="http://polkadot.io/" target="_blank">Polkadot</a> will allow cryptocurrencies
-                        to freely move between blockchains and, naturally, currencies such as Bitcoin will
-                        end up being represented as ERC20 tokens on the Ethereum blockchain.
+                        0x supports all Ethereum-based assets that adhere to the ERC20 token standard. There are many
+                        ERC20 tokens, worth a combined $2.2B, and more tokens are created each month. We believe that,
+                        by 2020, thousands of assets will be tokenized and moved onto the Ethereum blockchain including
+                        traditional securities such as equities, bonds and derivatives, fiat currencies and scarce
+                        digital goods such as video game items. In the future, cross-blockchain solutions such as{' '}
+                        <a href="https://cosmos.network/" target="_blank">
+                            Cosmos
+                        </a>{' '}
+                        and{' '}
+                        <a href="http://polkadot.io/" target="_blank">
+                            Polkadot
+                        </a>{' '}
+                        will allow cryptocurrencies to freely move between blockchains and, naturally, currencies such
+                        as Bitcoin will end up being represented as ERC20 tokens on the Ethereum blockchain.
                     </div>
                 ),
             },
@@ -147,23 +150,19 @@ const sections: FAQSection[] = [
                 prompt: '0x is open source: what prevents someone from forking the protocol?',
                 answer: (
                     <div>
-                        Ethereum and Bitcoin are both open source protocols. Each protocol has been forked,
-                        but the resulting clone networks have seen little adoption (as measured by transaction
-                        count or market cap). This is because users have little to no incentive to switch
-                        over to a clone network if the original has initial network effects and a talented
-                        developer team behind it.
-                        An exception is in the case that a protocol includes a controversial feature such as
-                        a method of rent extraction or a monetary policy that favors one group of users over
-                        another (Zcash developer subsidy - for better or worse - resulted in Zclassic).
-                        Perceived inequality can provide a strong enough incentive that users will fork the
-                        original protocol’s codebase and spin up a new network that eliminates the controversial
-                        feature. In the case of 0x, there is no rent extraction and no users are given
-                        special permissions.
-
-                        0x protocol is upgradable. Cutting-edge technical capabilities can be integrated
-                        into 0x via decentralized governance (see section below), eliminating incentives
-                        to fork off of the original protocol and sacrifice the network effects surrounding
-                        liquidity that result from the shared protocol and settlement layer.
+                        Ethereum and Bitcoin are both open source protocols. Each protocol has been forked, but the
+                        resulting clone networks have seen little adoption (as measured by transaction count or market
+                        cap). This is because users have little to no incentive to switch over to a clone network if the
+                        original has initial network effects and a talented developer team behind it. An exception is in
+                        the case that a protocol includes a controversial feature such as a method of rent extraction or
+                        a monetary policy that favors one group of users over another (Zcash developer subsidy - for
+                        better or worse - resulted in Zclassic). Perceived inequality can provide a strong enough
+                        incentive that users will fork the original protocol’s codebase and spin up a new network that
+                        eliminates the controversial feature. In the case of 0x, there is no rent extraction and no
+                        users are given special permissions. 0x protocol is upgradable. Cutting-edge technical
+                        capabilities can be integrated into 0x via decentralized governance (see section below),
+                        eliminating incentives to fork off of the original protocol and sacrifice the network effects
+                        surrounding liquidity that result from the shared protocol and settlement layer.
                     </div>
                 ),
             },
@@ -180,26 +179,25 @@ const sections: FAQSection[] = [
                             0x protocol token (ZRX) is utilized in two ways: 1) to solve the{' '}
                             <a href="https://en.wikipedia.org/wiki/Coordination_game" target="_blank">
                                 coordination problem
-                            </a> and drive network effects around liquidity, creating a feedback loop
-                            where early adopters of the protocol benefit from wider adoption and 2) to
-                            be used for decentralized governance over 0x protocol's update mechanism.
-                            In more detail:
+                            </a>{' '}
+                            and drive network effects around liquidity, creating a feedback loop where early adopters of
+                            the protocol benefit from wider adoption and 2) to be used for decentralized governance over
+                            0x protocol's update mechanism. In more detail:
                         </div>
                         <ul>
                             <li>
-                                ZRX tokens are used by Makers and Takers (market participants that generate
-                                and consume orders, respectively) to pay transaction fees to Relayers
-                                (entities that host and maintain public order books).
+                                ZRX tokens are used by Makers and Takers (market participants that generate and consume
+                                orders, respectively) to pay transaction fees to Relayers (entities that host and
+                                maintain public order books).
                             </li>
                             <li>
-                                ZRX tokens are used for decentralized governance over 0x protocol’s update
-                                mechanism which allows its underlying smart contracts to be replaced and
-                                improved over time. An update mechanism is needed because 0x is built upon
-                                Ethereum’s rapidly evolving technology stack, decentralized governance is
-                                needed because 0x protocol’s smart contracts will have access to user funds
-                                and numerous dApps will need to plug into 0x smart contracts. Decentralized
-                                governance ensures that this update process is secure and minimizes disruption
-                                to the network.
+                                ZRX tokens are used for decentralized governance over 0x protocol’s update mechanism
+                                which allows its underlying smart contracts to be replaced and improved over time. An
+                                update mechanism is needed because 0x is built upon Ethereum’s rapidly evolving
+                                technology stack, decentralized governance is needed because 0x protocol’s smart
+                                contracts will have access to user funds and numerous dApps will need to plug into 0x
+                                smart contracts. Decentralized governance ensures that this update process is secure and
+                                minimizes disruption to the network.
                             </li>
                         </ul>
                     </div>
@@ -209,9 +207,9 @@ const sections: FAQSection[] = [
                 prompt: 'Why must transaction fees be denominated in 0x token (ZRX) rather than ETH?',
                 answer: (
                     <div>
-                        0x protocol’s decentralized update mechanism is analogous to proof-of-stake.
-                        To maximize the alignment of stakeholder and end user incentives, the staked
-                        asset must provide utility within the protocol.
+                        0x protocol’s decentralized update mechanism is analogous to proof-of-stake. To maximize the
+                        alignment of stakeholder and end user incentives, the staked asset must provide utility within
+                        the protocol.
                     </div>
                 ),
             },
@@ -219,10 +217,10 @@ const sections: FAQSection[] = [
                 prompt: 'How will decentralized governance work?',
                 answer: (
                     <div>
-                        Decentralized governance is an ongoing focus of research; it will involve token
-                        voting with ZRX. Ultimately the solution will maximize security while also maximizing
-                        the protocol’s ability to absorb new innovations. Until the governance structure is
-                        formalized and encoded within 0x DAO, a multi-sig will be used as a placeholder.
+                        Decentralized governance is an ongoing focus of research; it will involve token voting with ZRX.
+                        Ultimately the solution will maximize security while also maximizing the protocol’s ability to
+                        absorb new innovations. Until the governance structure is formalized and encoded within 0x DAO,
+                        a multi-sig will be used as a placeholder.
                     </div>
                 ),
             },
@@ -233,27 +231,19 @@ const sections: FAQSection[] = [
         questions: [
             {
                 prompt: 'What is the total supply of ZRX tokens?',
-                answer: (
-                    <div>
-                        1,000,000,000 ZRX. Fixed supply.
-                    </div>
-                ),
+                answer: <div>1,000,000,000 ZRX. Fixed supply.</div>,
             },
             {
                 prompt: 'When is the Token Launch? will there be a pre-sale?',
-                answer: (
-                    <div>
-                        The token launch will be on August 15th, 2017. There will not be a pre-sale.
-                    </div>
-                ),
+                answer: <div>The token launch will be on August 15th, 2017. There will not be a pre-sale.</div>,
             },
             {
                 prompt: 'What will the token launch proceeds be used for?',
                 answer: (
                     <div>
-                        100% of the proceeds raised in the token launch will be used to fund the development
-                        of free and open source software, tools and infrastructure that support the protocol
-                        and surrounding ecosystem. Check out our{' '}
+                        100% of the proceeds raised in the token launch will be used to fund the development of free and
+                        open source software, tools and infrastructure that support the protocol and surrounding
+                        ecosystem. Check out our{' '}
                         <a
                             href="https://docs.google.com/document/d/1_RVa-_bkU92fWRsC8eNy4vYjcTt-WC8GtqyyjbTd-oY"
                             target="_blank"
@@ -267,66 +257,50 @@ const sections: FAQSection[] = [
                 prompt: 'What will be the initial distribution of ZRX tokens?',
                 answer: (
                     <div>
-                        <div className="center" style={{width: '100%'}}>
-                            <img
-                                style={{width: 350}}
-                                src="/images/zrx_pie_chart.png"
-                            />
+                        <div className="center" style={{ width: '100%' }}>
+                            <img style={{ width: 350 }} src="/images/zrx_pie_chart.png" />
                         </div>
                         <div className="py1">
-                            <div className="bold pb1">
-                                Token Launch (50%)
-                            </div>
+                            <div className="bold pb1">Token Launch (50%)</div>
                             <div>
-                                ZRX is inherently a governance token that plays a critical role in the
-                                process of upgrading 0x protocol. We are fully committed to formulating
-                                a functional and theoretically sound governance model and we plan to dedicate
-                                significant resources to R&D.
+                                ZRX is inherently a governance token that plays a critical role in the process of
+                                upgrading 0x protocol. We are fully committed to formulating a functional and
+                                theoretically sound governance model and we plan to dedicate significant resources to
+                                R&D.
                             </div>
                         </div>
                         <div className="py1">
-                            <div className="bold pb1">
-                                Retained by 0x (15%)
-                            </div>
+                            <div className="bold pb1">Retained by 0x (15%)</div>
                             <div>
-                                The 0x core development team will be able to sustain itself for approximately
-                                five years using funds raised through the token launch. If 0x protocol
-                                proves to be as foundational a technology as we believe it to be, the
-                                retained ZRX tokens will allow the 0x core development team to sustain
-                                operations beyond the first 5 years.
+                                The 0x core development team will be able to sustain itself for approximately five years
+                                using funds raised through the token launch. If 0x protocol proves to be as foundational
+                                a technology as we believe it to be, the retained ZRX tokens will allow the 0x core
+                                development team to sustain operations beyond the first 5 years.
                             </div>
                         </div>
                         <div className="py1">
-                            <div className="bold pb1">
-                                Developer Fund (15%)
-                            </div>
+                            <div className="bold pb1">Developer Fund (15%)</div>
                             <div>
-                                The Developer Fund will be used to make targeted capital injections
-                                into high potential projects and teams that are attempting to grow
-                                the 0x ecosystem, strategic partnerships, hackathon prizes and community
-                                development activities.
+                                The Developer Fund will be used to make targeted capital injections into high potential
+                                projects and teams that are attempting to grow the 0x ecosystem, strategic partnerships,
+                                hackathon prizes and community development activities.
                             </div>
                         </div>
                         <div className="py1">
-                            <div className="bold pb1">
-                                Founding Team (10%)
-                            </div>
+                            <div className="bold pb1">Founding Team (10%)</div>
                             <div>
-                                The founding team’s allocation of ZRX will vest over a traditional 4
-                                year vesting schedule with a one year cliff. We believe this should
-                                be standard practice for any team that is committed to making their
-                                project a long term success.
+                                The founding team’s allocation of ZRX will vest over a traditional 4 year vesting
+                                schedule with a one year cliff. We believe this should be standard practice for any team
+                                that is committed to making their project a long term success.
                             </div>
                         </div>
                         <div className="py1">
-                            <div className="bold pb1">
-                                Early Backers & Advisors (10%)
-                            </div>
+                            <div className="bold pb1">Early Backers & Advisors (10%)</div>
                             <div>
-                                Our backers and advisors have provided capital, resources and guidance
-                                that have allowed us to fill out our team, setup a robust legal entity
-                                and build a fully functional product before launching a token. As a result,
-                                we have a proven track record and can offer a token that holds genuine utility.
+                                Our backers and advisors have provided capital, resources and guidance that have allowed
+                                us to fill out our team, setup a robust legal entity and build a fully functional
+                                product before launching a token. As a result, we have a proven track record and can
+                                offer a token that holds genuine utility.
                             </div>
                         </div>
                     </div>
@@ -336,47 +310,39 @@ const sections: FAQSection[] = [
                 prompt: 'Can I mine ZRX tokens?',
                 answer: (
                     <div>
-                        No, the total supply of ZRX tokens is fixed and there is no continuous issuance
-                        model. Users that facilitate trading over 0x protocol by operating a Relayer
-                        earn transaction fees denominated in ZRX; as more trading activity is generated,
-                        more transaction fees are earned.
+                        No, the total supply of ZRX tokens is fixed and there is no continuous issuance model. Users
+                        that facilitate trading over 0x protocol by operating a Relayer earn transaction fees
+                        denominated in ZRX; as more trading activity is generated, more transaction fees are earned.
                     </div>
                 ),
             },
             {
                 prompt: 'Will there be a lockup period for ZRX tokens sold in the token launch?',
-                answer: (
-                    <div>
-                        No, ZRX tokens sold in the token launch will immediately be liquid.
-                    </div>
-                ),
+                answer: <div>No, ZRX tokens sold in the token launch will immediately be liquid.</div>,
             },
             {
                 prompt: 'Will there be a lockup period for tokens allocated to the founding team?',
                 answer: (
                     <div>
-                        Yes. ZRX tokens allocated to founders, advisors and staff members will be released
-                        over a 4 year vesting schedule with a 25% cliff upon completion of the initial
-                        token launch and 25% released each subsequent year in monthly installments. Staff
-                        members hired after the token launch will have a 4 year vesting schedule with a
-                        one year cliff.
+                        Yes. ZRX tokens allocated to founders, advisors and staff members will be released over a 4 year
+                        vesting schedule with a 25% cliff upon completion of the initial token launch and 25% released
+                        each subsequent year in monthly installments. Staff members hired after the token launch will
+                        have a 4 year vesting schedule with a one year cliff.
                     </div>
                 ),
             },
             {
                 prompt: 'Which cryptocurrencies will be accepted in the token launch?',
-                answer: (
-                    <div>ETH.</div>
-                ),
+                answer: <div>ETH.</div>,
             },
             {
                 prompt: 'When will 0x be live?',
                 answer: (
                     <div>
-                        An alpha version of 0x has been live on our private test network since January
-                        2017. Version 1.0 of 0x protocol will be deployed to the canonical Ethereum
-                        blockchain after a round of security audits and prior to the public token launch.
-                        0x will be using the 0x protocol during our token launch.
+                        An alpha version of 0x has been live on our private test network since January 2017. Version 1.0
+                        of 0x protocol will be deployed to the canonical Ethereum blockchain after a round of security
+                        audits and prior to the public token launch. 0x will be using the 0x protocol during our token
+                        launch.
                     </div>
                 ),
             },
@@ -401,19 +367,17 @@ const sections: FAQSection[] = [
         questions: [
             {
                 prompt: 'Where is 0x based?',
-                answer: (
-                    <div>
-                        0x was founded in SF and is driven by a diverse group of contributors.
-                    </div>
-                ),
+                answer: <div>0x was founded in SF and is driven by a diverse group of contributors.</div>,
             },
             {
                 prompt: 'How can I get involved?',
                 answer: (
                     <div>
-                        Join our <a href={constants.URL_ZEROEX_CHAT} target="_blank">Rocket.chat</a>!
-                        As an open source project, 0x will rely on a worldwide community of passionate
-                        developers to contribute proposals, ideas and code.
+                        Join our{' '}
+                        <a href={constants.URL_ZEROEX_CHAT} target="_blank">
+                            Rocket.chat
+                        </a>! As an open source project, 0x will rely on a worldwide community of passionate developers
+                        to contribute proposals, ideas and code.
                     </div>
                 ),
             },
@@ -421,20 +385,15 @@ const sections: FAQSection[] = [
                 prompt: 'Why the name 0x?',
                 answer: (
                     <div>
-                        0x is the prefix for hexadecimal numeric constants including Ethereum addresses.
-                        In a more abstract context, as the first open protocol for exchange 0x represents
-                        the beginning of the end for the exchange industry’s rent seeking oligopoly:
-                        zero exchange.
+                        0x is the prefix for hexadecimal numeric constants including Ethereum addresses. In a more
+                        abstract context, as the first open protocol for exchange 0x represents the beginning of the end
+                        for the exchange industry’s rent seeking oligopoly: zero exchange.
                     </div>
                 ),
             },
             {
                 prompt: 'How do you pronounce 0x?',
-                answer: (
-                    <div>
-                        We pronounce 0x as “zero-ex,” but you are free to pronounce it however you please.
-                    </div>
-                ),
+                answer: <div>We pronounce 0x as “zero-ex,” but you are free to pronounce it however you please.</div>,
             },
         ],
     },
@@ -447,20 +406,13 @@ export class FAQ extends React.Component<FAQProps, FAQState> {
     public render() {
         return (
             <div>
-                <DocumentTitle title="0x FAQ"/>
-                <TopBar
-                    blockchainIsLoaded={false}
-                    location={this.props.location}
-                />
-                <div
-                    id="faq"
-                    className="mx-auto max-width-4 pt4"
-                    style={{color: colors.grey800}}
-                >
-                    <h1 className="center" style={{...styles.thin}}>0x FAQ</h1>
-                    <div className="sm-px2 md-px2 lg-px0 pb4">
-                        {this._renderSections()}
-                    </div>
+                <DocumentTitle title="0x FAQ" />
+                <TopBar blockchainIsLoaded={false} location={this.props.location} />
+                <div id="faq" className="mx-auto max-width-4 pt4" style={{ color: colors.grey800 }}>
+                    <h1 className="center" style={{ ...styles.thin }}>
+                        0x FAQ
+                    </h1>
+                    <div className="sm-px2 md-px2 lg-px0 pb4">{this._renderSections()}</div>
                 </div>
                 <Footer />
             </div>
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx
index 54ae1a592..988c04bc9 100644
--- a/packages/website/ts/pages/faq/question.tsx
+++ b/packages/website/ts/pages/faq/question.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
-import {Card, CardHeader, CardText} from 'material-ui/Card';
+import { Card, CardHeader, CardText } from 'material-ui/Card';
 import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
 
 export interface QuestionProps {
     prompt: string;
@@ -22,24 +22,22 @@ export class Question extends React.Component<QuestionProps, QuestionState> {
     }
     public render() {
         return (
-            <div
-                className="py1"
-            >
+            <div className="py1">
                 <Card
                     initiallyExpanded={this.props.shouldDisplayExpanded}
                     onExpandChange={this._onExchangeChange.bind(this)}
                 >
                     <CardHeader
                         title={this.props.prompt}
-                        style={{borderBottom: this.state.isExpanded ? '1px solid rgba(0, 0, 0, 0.19)' : 'none'}}
-                        titleStyle={{color: colors.darkerGrey}}
+                        style={{
+                            borderBottom: this.state.isExpanded ? '1px solid rgba(0, 0, 0, 0.19)' : 'none',
+                        }}
+                        titleStyle={{ color: colors.darkerGrey }}
                         actAsExpander={true}
                         showExpandableButton={true}
                     />
                     <CardText expandable={true}>
-                        <div style={{lineHeight: 1.4}}>
-                            {this.props.answer}
-                        </div>
+                        <div style={{ lineHeight: 1.4 }}>{this.props.answer}</div>
                     </CardText>
                 </Card>
             </div>
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 1e97ae240..ca76497df 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -2,13 +2,13 @@ import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
-import {Link} from 'react-router-dom';
-import {Footer} from 'ts/components/footer';
-import {TopBar} from 'ts/components/top_bar';
-import {ScreenWidths, WebsitePaths} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Link } from 'react-router-dom';
+import { Footer } from 'ts/components/footer';
+import { TopBar } from 'ts/components/top_bar';
+import { ScreenWidths, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
 interface BoxContent {
     title: string;
@@ -39,22 +39,25 @@ const THROTTLE_TIMEOUT = 100;
 const boxContents: BoxContent[] = [
     {
         title: 'Trustless exchange',
-        description: 'Built on Ethereum\'s distributed network with no centralized \
+        description:
+            "Built on Ethereum's distributed network with no centralized \
                       point of failure and no down time, each trade is settled atomically \
-                      and without counterparty risk.',
+                      and without counterparty risk.",
         imageUrl: '/images/landing/distributed_network.png',
         classNames: '',
     },
     {
         title: 'Shared liquidity',
-        description: 'By sharing a standard API, relayers can easily aggregate liquidity pools, \
+        description:
+            'By sharing a standard API, relayers can easily aggregate liquidity pools, \
                       creating network effects around liquidity that compound as more relayers come online.',
         imageUrl: '/images/landing/liquidity.png',
         classNames: 'mx-auto',
     },
     {
         title: 'Open source',
-        description: '0x is open source, permissionless and free to use. Trade directly with a known \
+        description:
+            '0x is open source, permissionless and free to use. Trade directly with a known \
                       counterparty for free or pay a relayer some ZRX tokens to access their liquidity \
                       pool.',
         imageUrl: '/images/landing/open_source.png',
@@ -155,13 +158,13 @@ export class Landing extends React.Component<LandingProps, LandingState> {
     }
     public render() {
         return (
-            <div id="landing" className="clearfix" style={{color: colors.grey500}}>
-                <DocumentTitle title="0x Protocol"/>
+            <div id="landing" className="clearfix" style={{ color: colors.grey500 }}>
+                <DocumentTitle title="0x Protocol" />
                 <TopBar
                     blockchainIsLoaded={false}
                     location={this.props.location}
                     isNightVersion={true}
-                    style={{backgroundColor: colors.heroGrey, position: 'relative'}}
+                    style={{ backgroundColor: colors.heroGrey, position: 'relative' }}
                 />
                 {this._renderHero()}
                 {this._renderProjects()}
@@ -188,46 +191,43 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             lineHeight: '33px',
             height: 38,
         };
-        const left  = 'col lg-col-7 md-col-7 col-12 lg-pt4 md-pt4 sm-pt0 mt1 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center';
+        const left = 'col lg-col-7 md-col-7 col-12 lg-pt4 md-pt4 sm-pt0 mt1 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center';
         return (
-            <div
-                className="clearfix py4"
-                style={{backgroundColor: colors.heroGrey}}
-            >
-                <div
-                    className="mx-auto max-width-4 clearfix"
-                >
+            <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}>
+                <div className="mx-auto max-width-4 clearfix">
                     <div className="lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-my4 md-my4 sm-mt2 sm-mb4 clearfix">
                         <div className="col lg-col-5 md-col-5 col-12 sm-center">
-                            <img
-                                src="/images/landing/hero_chip_image.png"
-                                height={isSmallScreen ? 300 : 395}
-                            />
+                            <img src="/images/landing/hero_chip_image.png" height={isSmallScreen ? 300 : 395} />
                         </div>
-                        <div
-                            className={left}
-                            style={{color: colors.white}}
-                        >
-                            <div style={{paddingLeft: isSmallScreen ? 0 : 12}}>
+                        <div className={left} style={{ color: colors.white }}>
+                            <div style={{ paddingLeft: isSmallScreen ? 0 : 12 }}>
                                 <div
                                     className="sm-pb2"
-                                    style={{fontFamily: 'Roboto Mono', fontSize: isSmallScreen ? 26 : 34}}
+                                    style={{
+                                        fontFamily: 'Roboto Mono',
+                                        fontSize: isSmallScreen ? 26 : 34,
+                                    }}
                                 >
                                     Powering decentralized exchange
                                 </div>
                                 <div
                                     className="pt2 h5 sm-mx-auto"
-                                    style={{maxWidth: 446, fontFamily: 'Roboto Mono', lineHeight: 1.7, fontWeight: 300}}
+                                    style={{
+                                        maxWidth: 446,
+                                        fontFamily: 'Roboto Mono',
+                                        lineHeight: 1.7,
+                                        fontWeight: 300,
+                                    }}
                                 >
-                                    0x is an open, permissionless protocol allowing for ERC20 tokens to
-                                    be traded on the Ethereum blockchain.
+                                    0x is an open, permissionless protocol allowing for ERC20 tokens to be traded on the
+                                    Ethereum blockchain.
                                 </div>
-                                <div className="pt3 clearfix sm-mx-auto" style={{maxWidth: 342}}>
+                                <div className="pt3 clearfix sm-mx-auto" style={{ maxWidth: 342 }}>
                                     <div className="lg-pr2 md-pr2 col col-6 sm-center">
                                         <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
                                             <RaisedButton
-                                                style={{borderRadius: 6, minWidth: 157.36}}
-                                                buttonStyle={{borderRadius: 6}}
+                                                style={{ borderRadius: 6, minWidth: 157.36 }}
+                                                buttonStyle={{ borderRadius: 6 }}
                                                 labelStyle={buttonLabelStyle}
                                                 label="Build on 0x"
                                                 onClick={_.noop}
@@ -241,7 +241,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                             className="text-decoration-none"
                                         >
                                             <RaisedButton
-                                                style={{borderRadius: 6, minWidth: 150}}
+                                                style={{ borderRadius: 6, minWidth: 150 }}
                                                 buttonStyle={lightButtonStyle}
                                                 labelColor="white"
                                                 backgroundColor={colors.heroGrey}
@@ -263,18 +263,11 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         const isMediumScreen = this.state.screenWidth === ScreenWidths.Md;
         const projectList = _.map(projects, (project: Project, i: number) => {
-            const colWidth = isSmallScreen ? 3 : (isMediumScreen ? 4 : 2 - (i % 2));
+            const colWidth = isSmallScreen ? 3 : isMediumScreen ? 4 : 2 - i % 2;
             return (
-                <div
-                    key={`project-${project.logoFileName}`}
-                    className={`col col-${colWidth} center`}
-                >
+                <div key={`project-${project.logoFileName}`} className={`col col-${colWidth} center`}>
                     <div>
-                        <a
-                            href={project.projectUrl}
-                            target="_blank"
-                            className="text-decoration-none"
-                        >
+                        <a href={project.projectUrl} target="_blank" className="text-decoration-none">
                             <img
                                 src={`/images/landing/project_logos/${project.logoFileName}`}
                                 height={isSmallScreen ? 60 : 92}
@@ -292,29 +285,26 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             letterSpacing: 3,
         };
         return (
-            <div
-                className="clearfix py4"
-                style={{backgroundColor: colors.projectsGrey}}
-            >
+            <div className="clearfix py4" style={{ backgroundColor: colors.projectsGrey }}>
                 <div className="mx-auto max-width-4 clearfix sm-px3">
-                    <div
-                        className="h4 pb3 md-pl3 sm-pl2"
-                        style={titleStyle}
-                    >
+                    <div className="h4 pb3 md-pl3 sm-pl2" style={titleStyle}>
                         Projects building on 0x
                     </div>
-                    <div className="clearfix">
-                        {projectList}
-                    </div>
+                    <div className="clearfix">{projectList}</div>
                     <div
                         className="pt3 mx-auto center"
-                        style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}}
+                        style={{
+                            color: colors.landingLinkGrey,
+                            fontFamily: 'Roboto Mono',
+                            maxWidth: 300,
+                            fontSize: 14,
+                        }}
                     >
                         view the{' '}
                         <Link
                             to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
                             className="text-decoration-none underline"
-                            style={{color: colors.landingLinkGrey}}
+                            style={{ color: colors.landingLinkGrey }}
                         >
                             full list
                         </Link>
@@ -326,52 +316,41 @@ export class Landing extends React.Component<LandingProps, LandingState> {
     private _renderTokenizationSection() {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         return (
-            <div
-                className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2"
-                style={{backgroundColor: colors.grey100}}
-            >
+            <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.grey100 }}>
                 <div className="mx-auto max-width-4 py4 clearfix">
-                    {isSmallScreen &&
-                        this._renderTokenCloud()
-                    }
+                    {isSmallScreen && this._renderTokenCloud()}
                     <div className="col lg-col-6 md-col-6 col-12">
-                        <div className="mx-auto" style={{maxWidth: 385, paddingTop: 7}}>
-                            <div
-                                className="lg-h1 md-h1 sm-h2 sm-center sm-pt3"
-                                style={{fontFamily: 'Roboto Mono'}}
-                            >
+                        <div className="mx-auto" style={{ maxWidth: 385, paddingTop: 7 }}>
+                            <div className="lg-h1 md-h1 sm-h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
                                 The world's value is becoming tokenized
                             </div>
                             <div
                                 className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h5 sm-center"
-                                style={{fontFamily: 'Roboto Mono', lineHeight: 1.7}}
+                                style={{ fontFamily: 'Roboto Mono', lineHeight: 1.7 }}
                             >
-                                {isSmallScreen ?
+                                {isSmallScreen ? (
                                     <span>
                                         The Ethereum blockchain is an open, borderless financial system that represents
                                         a wide variety of assets as cryptographic tokens. In the future, most digital
                                         assets and goods will be tokenized.
-                                    </span> :
+                                    </span>
+                                ) : (
                                     <div>
                                         <div>
-                                            The Ethereum blockchain is an open, borderless
-                                            financial system that represents
+                                            The Ethereum blockchain is an open, borderless financial system that
+                                            represents
                                         </div>
                                         <div>
-                                            a wide variety of assets as cryptographic tokens.
-                                            In the future, most digital assets and goods will be tokenized.
+                                            a wide variety of assets as cryptographic tokens. In the future, most
+                                            digital assets and goods will be tokenized.
                                         </div>
                                     </div>
-                                }
-                            </div>
-                            <div className="flex pt1 sm-px3">
-                                {this._renderAssetTypes()}
+                                )}
                             </div>
+                            <div className="flex pt1 sm-px3">{this._renderAssetTypes()}</div>
                         </div>
                     </div>
-                    {!isSmallScreen &&
-                        this._renderTokenCloud()
-                    }
+                    {!isSmallScreen && this._renderTokenCloud()}
                 </div>
             </div>
         );
@@ -379,81 +358,84 @@ export class Landing extends React.Component<LandingProps, LandingState> {
     private _renderProtocolSection() {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         return (
-            <div
-                className="clearfix lg-py4 md-py4 sm-pt4"
-                style={{backgroundColor: colors.heroGrey}}
-            >
+            <div className="clearfix lg-py4 md-py4 sm-pt4" style={{ backgroundColor: colors.heroGrey }}>
                 <div className="mx-auto max-width-4 lg-py4 md-py4 sm-pt4 clearfix">
                     <div className="col lg-col-6 md-col-6 col-12 sm-center">
-                        <img
-                            src="/images/landing/relayer_diagram.png"
-                            height={isSmallScreen ? 326 : 426}
-                        />
+                        <img src="/images/landing/relayer_diagram.png" height={isSmallScreen ? 326 : 426} />
                     </div>
                     <div
                         className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto"
-                        style={{color: colors.beigeWhite, paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445}}
+                        style={{
+                            color: colors.beigeWhite,
+                            paddingTop: 8,
+                            maxWidth: isSmallScreen ? 'none' : 445,
+                        }}
                     >
-                        <div
-                            className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center"
-                            style={{fontFamily: 'Roboto Mono'}}
-                        >
-                            <div>
-                                Off-chain order relay
-                            </div>
-                            <div>
-                                On-chain settlement
-                            </div>
+                        <div className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center" style={{ fontFamily: 'Roboto Mono' }}>
+                            <div>Off-chain order relay</div>
+                            <div>On-chain settlement</div>
                         </div>
                         <div
                             className="pb2 pt2 h5 sm-center sm-px3 sm-mx-auto"
-                            style={{fontFamily: 'Roboto Mono', lineHeight: 1.7, fontWeight: 300, maxWidth: 445}}
+                            style={{
+                                fontFamily: 'Roboto Mono',
+                                lineHeight: 1.7,
+                                fontWeight: 300,
+                                maxWidth: 445,
+                            }}
                         >
-                            In 0x protocol, orders are transported off-chain, massively reducing gas
-                            costs and eliminating blockchain bloat. Relayers help broadcast orders and
-                            collect a fee each time they facilitate a trade. Anyone can build a relayer.
+                            In 0x protocol, orders are transported off-chain, massively reducing gas costs and
+                            eliminating blockchain bloat. Relayers help broadcast orders and collect a fee each time
+                            they facilitate a trade. Anyone can build a relayer.
                         </div>
                         <div
                             className="pt3 sm-mx-auto sm-px3"
-                            style={{color: colors.landingLinkGrey, maxWidth: isSmallScreen ? 412 : 'none'}}
+                            style={{
+                                color: colors.landingLinkGrey,
+                                maxWidth: isSmallScreen ? 412 : 'none',
+                            }}
                         >
-                            <div className="flex" style={{fontSize: 18}}>
+                            <div className="flex" style={{ fontSize: 18 }}>
                                 <div
                                     className="lg-h4 md-h4 sm-h5"
-                                    style={{letterSpacing: isSmallScreen ? 1 : 3, fontFamily: 'Roboto Mono'}}
+                                    style={{
+                                        letterSpacing: isSmallScreen ? 1 : 3,
+                                        fontFamily: 'Roboto Mono',
+                                    }}
                                 >
                                     RELAYERS BUILDING ON 0X
                                 </div>
-                                <div className="h5" style={{marginLeft: isSmallScreen ? 26 : 49}}>
+                                <div className="h5" style={{ marginLeft: isSmallScreen ? 26 : 49 }}>
                                     <Link
                                         to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
                                         className="text-decoration-none underline"
-                                        style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono'}}
+                                        style={{
+                                            color: colors.landingLinkGrey,
+                                            fontFamily: 'Roboto Mono',
+                                        }}
                                     >
                                         view all
                                     </Link>
                                 </div>
                             </div>
-                            <div className="lg-flex md-flex sm-clearfix pt3" style={{opacity: 0.4}}>
+                            <div className="lg-flex md-flex sm-clearfix pt3" style={{ opacity: 0.4 }}>
                                 <div className="col col-4 sm-center">
-                                        <img
-                                            src="/images/landing/ethfinex.png"
-                                            style={{height: isSmallScreen ? 85 : 107}}
-                                        />
+                                    <img
+                                        src="/images/landing/ethfinex.png"
+                                        style={{ height: isSmallScreen ? 85 : 107 }}
+                                    />
                                 </div>
-                                <div
-                                    className="col col-4 center"
-                                >
-                                        <img
-                                            src="/images/landing/radar_relay.png"
-                                            style={{height: isSmallScreen ? 85 : 107}}
-                                        />
+                                <div className="col col-4 center">
+                                    <img
+                                        src="/images/landing/radar_relay.png"
+                                        style={{ height: isSmallScreen ? 85 : 107 }}
+                                    />
                                 </div>
-                                <div className="col col-4 sm-center" style={{textAlign: 'right'}}>
-                                        <img
-                                            src="/images/landing/paradex.png"
-                                            style={{height: isSmallScreen ? 85 : 107}}
-                                        />
+                                <div className="col col-4 sm-center" style={{ textAlign: 'right' }}>
+                                    <img
+                                        src="/images/landing/paradex.png"
+                                        style={{ height: isSmallScreen ? 85 : 107 }}
+                                    />
                                 </div>
                             </div>
                         </div>
@@ -478,58 +460,45 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             maxWidth: isSmallScreen ? 375 : 441,
         };
         return (
-            <div
-                className="clearfix lg-pt4 md-pt4"
-                style={{backgroundColor: colors.heroGrey}}
-            >
+            <div className="clearfix lg-pt4 md-pt4" style={{ backgroundColor: colors.heroGrey }}>
                 <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix">
-                    {isSmallScreen &&
-                        this._renderBlockChipImage()
-                    }
+                    {isSmallScreen && this._renderBlockChipImage()}
                     <div
                         className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3"
-                        style={{color: colors.beigeWhite}}
+                        style={{ color: colors.beigeWhite }}
                     >
                         <div
                             className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center"
-                            style={{fontFamily: 'Roboto Mono'}}
+                            style={{ fontFamily: 'Roboto Mono' }}
                         >
                             A building block for dApps
                         </div>
-                        <div
-                            className="pb3 pt2 sm-mx-auto sm-center"
-                            style={descriptionStyle}
-                        >
+                        <div className="pb3 pt2 sm-mx-auto sm-center" style={descriptionStyle}>
                             0x protocol is a pluggable building block for dApps that require exchange functionality.
                             Join the many developers that are already using 0x in their web applications and smart
                             contracts.
                         </div>
-                        <div
-                            className="sm-mx-auto sm-center"
-                            style={callToActionStyle}
-                        >
+                        <div className="sm-mx-auto sm-center" style={callToActionStyle}>
                             Learn how in our{' '}
                             <Link
                                 to={WebsitePaths.ZeroExJs}
                                 className="text-decoration-none underline"
-                                style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}}
+                                style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
                             >
                                 0x.js
-                            </Link>
-                            {' '}and{' '}
+                            </Link>{' '}
+                            and{' '}
                             <Link
                                 to={WebsitePaths.SmartContracts}
                                 className="text-decoration-none underline"
-                                style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}}
+                                style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
                             >
                                 smart contract
-                            </Link>
-                            {' '}docs
+                            </Link>{' '}
+                            docs
                         </div>
                     </div>
-                    {!isSmallScreen &&
-                        this._renderBlockChipImage()
-                    }
+                    {!isSmallScreen && this._renderBlockChipImage()}
                 </div>
             </div>
         );
@@ -538,10 +507,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         return (
             <div className="col lg-col-6 md-col-6 col-12 sm-center">
-                <img
-                    src="/images/landing/0x_chips.png"
-                    height={isSmallScreen ? 240 : 368}
-                />
+                <img src="/images/landing/0x_chips.png" height={isSmallScreen ? 240 : 368} />
             </div>
         );
     }
@@ -549,10 +515,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         return (
             <div className="col lg-col-6 md-col-6 col-12 center">
-                <img
-                    src="/images/landing/tokenized_world.png"
-                    height={isSmallScreen ? 280 : 364.5}
-                />
+                <img src="/images/landing/tokenized_world.png" height={isSmallScreen ? 280 : 364.5} />
             </div>
         );
     }
@@ -566,7 +529,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             {
                 title: 'Traditional assets',
                 imageUrl: '/images/landing/stocks.png',
-                style: {paddingLeft: isSmallScreen ? 41 : 56, paddingRight: isSmallScreen ? 41 : 56},
+                style: {
+                    paddingLeft: isSmallScreen ? 41 : 56,
+                    paddingRight: isSmallScreen ? 41 : 56,
+                },
             },
             {
                 title: 'Digital goods',
@@ -576,18 +542,18 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         const assets = _.map(assetTypes, (assetType: AssetType) => {
             const style = _.isUndefined(assetType.style) ? {} : assetType.style;
             return (
-                <div
-                    key={`asset-${assetType.title}`}
-                    className="center"
-                    style={{opacity: 0.8, ...style}}
-                >
+                <div key={`asset-${assetType.title}`} className="center" style={{ opacity: 0.8, ...style }}>
                     <div>
-                        <img
-                            src={assetType.imageUrl}
-                            height="80"
-                        />
+                        <img src={assetType.imageUrl} height="80" />
                     </div>
-                    <div style={{fontFamily: 'Roboto Mono', fontSize: 13.5, fontWeight: 400, opacity: 0.75}}>
+                    <div
+                        style={{
+                            fontFamily: 'Roboto Mono',
+                            fontSize: 13.5,
+                            fontWeight: 400,
+                            opacity: 0.75,
+                        }}
+                    >
                         {assetType.title}
                     </div>
                 </div>
@@ -606,43 +572,24 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         };
         const boxes = _.map(boxContents, (boxContent: BoxContent) => {
             return (
-                <div
-                    key={`box-${boxContent.title}`}
-                    className="col lg-col-4 md-col-4 col-12 sm-pb4"
-                >
-                    <div
-                        className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`}
-                        style={boxStyle}
-                    >
+                <div key={`box-${boxContent.title}`} className="col lg-col-4 md-col-4 col-12 sm-pb4">
+                    <div className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`} style={boxStyle}>
                         <div>
-                            <img src={boxContent.imageUrl} style={{height: 210}} />
+                            <img src={boxContent.imageUrl} style={{ height: 210 }} />
                         </div>
-                        <div
-                            className="h3"
-                            style={{color: 'black', fontFamily: 'Roboto Mono'}}
-                        >
+                        <div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}>
                             {boxContent.title}
                         </div>
-                        <div
-                            className="pt2 pb2"
-                            style={{fontFamily: 'Roboto Mono', fontSize: 14}}
-                        >
+                        <div className="pt2 pb2" style={{ fontFamily: 'Roboto Mono', fontSize: 14 }}>
                             {boxContent.description}
                         </div>
                     </div>
                 </div>
             );
-
         });
         return (
-            <div
-                className="clearfix"
-                style={{backgroundColor: colors.heroGrey}}
-            >
-                <div
-                    className="mx-auto py4 sm-mt2 clearfix"
-                    style={{maxWidth: '60em'}}
-                >
+            <div className="clearfix" style={{ backgroundColor: colors.heroGrey }}>
+                <div className="mx-auto py4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}>
                     {boxes}
                 </div>
             </div>
@@ -655,7 +602,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             {
                 imageUrl: '/images/landing/governance_icon.png',
                 type: 'Decentralized governance',
-                description: 'Decentralized organizations use tokens to represent ownership and \
+                description:
+                    'Decentralized organizations use tokens to represent ownership and \
                               guide their governance logic. 0x allows decentralized organizations \
                               to seamlessly and safely trade ownership for startup capital.',
                 projectIconUrls: ['/images/landing/aragon.png'],
@@ -664,7 +612,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             {
                 imageUrl: '/images/landing/prediction_market_icon.png',
                 type: 'Prediction markets',
-                description: 'Decentralized prediction market platforms generate sets of tokens that \
+                description:
+                    'Decentralized prediction market platforms generate sets of tokens that \
                               represent a financial stake in the outcomes of real-world events. 0x allows \
                               these tokens to be instantly tradable.',
                 projectIconUrls: ['/images/landing/augur.png'],
@@ -673,7 +622,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             {
                 imageUrl: '/images/landing/stable_tokens_icon.png',
                 type: 'Stable tokens',
-                description: 'Novel economic constructs such as stable coins require efficient, liquid \
+                description:
+                    'Novel economic constructs such as stable coins require efficient, liquid \
                               markets to succeed. 0x will facilitate the underlying economic mechanisms \
                               that allow these tokens to remain stable.',
                 projectIconUrls: ['/images/landing/maker.png'],
@@ -682,22 +632,28 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             {
                 imageUrl: '/images/landing/loans_icon.png',
                 type: 'Decentralized loans',
-                description: 'Efficient lending requires liquid markets where investors can buy and re-sell loans. \
+                description:
+                    'Efficient lending requires liquid markets where investors can buy and re-sell loans. \
                               0x enables an ecosystem of lenders to self-organize and efficiently determine \
                               market prices for all outstanding loans.',
                 projectIconUrls: ['/images/landing/dharma.png', '/images/landing/lendroid.png'],
                 classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6',
-                style: {width: 291, float: 'right', marginTop: !isSmallScreen ? 38 : 0},
+                style: {
+                    width: 291,
+                    float: 'right',
+                    marginTop: !isSmallScreen ? 38 : 0,
+                },
             },
             {
                 imageUrl: '/images/landing/fund_management_icon.png',
                 type: 'Fund management',
-                description: 'Decentralized fund management limits fund managers to investing in pre-agreed \
+                description:
+                    'Decentralized fund management limits fund managers to investing in pre-agreed \
                               upon asset classes. Embedding 0x into fund management smart contracts enables \
                               them to enforce these security constraints.',
                 projectIconUrls: ['/images/landing/melonport.png'],
                 classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6',
-                style: {width: 291, marginTop: !isSmallScreen ? 38 : 0},
+                style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 },
             },
         ];
 
@@ -722,22 +678,21 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                     key={`useCase-${useCase.type}`}
                     className={`col lg-col-4 md-col-4 col-12 sm-pt3 sm-px3 sm-pb3 ${useCase.classNames}`}
                 >
-                    <div
-                        className="relative p2 pb2 sm-mx-auto"
-                        style={useCaseBoxStyle}
-                    >
-                        <div
-                            className="absolute center"
-                            style={{top: -35, width: 'calc(100% - 32px)'}}
-                        >
-                            <img src={useCase.imageUrl} style={{height: 50}} />
+                    <div className="relative p2 pb2 sm-mx-auto" style={useCaseBoxStyle}>
+                        <div className="absolute center" style={{ top: -35, width: 'calc(100% - 32px)' }}>
+                            <img src={useCase.imageUrl} style={{ height: 50 }} />
                         </div>
                         <div className="pt2 center" style={typeStyle}>
                             {useCase.type}
                         </div>
                         <div
                             className="pt2"
-                            style={{lineHeight: 1.5, fontSize: 14, overflow: 'hidden', height: 104}}
+                            style={{
+                                lineHeight: 1.5,
+                                fontSize: 14,
+                                overflow: 'hidden',
+                                height: 104,
+                            }}
                         >
                             {useCase.description}
                         </div>
@@ -746,14 +701,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             );
         });
         return (
-            <div
-                className="clearfix pb4 lg-pt2 md-pt2 sm-pt4"
-                style={{backgroundColor: colors.heroGrey}}
-            >
-                <div
-                    className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix"
-                    style={{maxWidth: '67em'}}
-                >
+            <div className="clearfix pb4 lg-pt2 md-pt2 sm-pt4" style={{ backgroundColor: colors.heroGrey }}>
+                <div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" style={{ maxWidth: '67em' }}>
                     {cases}
                 </div>
             </div>
@@ -772,26 +721,26 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             lineHeight: '33px',
             height: 49,
         };
-        const callToActionClassNames = 'col lg-col-8 md-col-8 col-12 lg-pr3 md-pr3 \
+        const callToActionClassNames =
+            'col lg-col-8 md-col-8 col-12 lg-pr3 md-pr3 \
                                         lg-right-align md-right-align sm-center sm-px3 h4';
         return (
-            <div
-                className="clearfix pb4"
-                style={{backgroundColor: colors.heroGrey}}
-            >
-                <div
-                    className="mx-auto max-width-4 pb4 mb3 clearfix"
-                >
+            <div className="clearfix pb4" style={{ backgroundColor: colors.heroGrey }}>
+                <div className="mx-auto max-width-4 pb4 mb3 clearfix">
                     <div
                         className={callToActionClassNames}
-                        style={{fontFamily: 'Roboto Mono', color: colors.white, lineHeight: isSmallScreen ? 1.7 : 3}}
+                        style={{
+                            fontFamily: 'Roboto Mono',
+                            color: colors.white,
+                            lineHeight: isSmallScreen ? 1.7 : 3,
+                        }}
                     >
                         Get started on building the decentralized future
                     </div>
                     <div className="col lg-col-4 md-col-4 col-12 sm-center sm-pt2">
                         <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
                             <RaisedButton
-                                style={{borderRadius: 6, minWidth: 150}}
+                                style={{ borderRadius: 6, minWidth: 150 }}
                                 buttonStyle={lightButtonStyle}
                                 labelColor={colors.white}
                                 backgroundColor={colors.heroGrey}
diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx
index bdf9ad688..ff277c377 100644
--- a/packages/website/ts/pages/not_found.tsx
+++ b/packages/website/ts/pages/not_found.tsx
@@ -1,8 +1,8 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {Footer} from 'ts/components/footer';
-import {TopBar} from 'ts/components/top_bar';
-import {Styles} from 'ts/types';
+import { Footer } from 'ts/components/footer';
+import { TopBar } from 'ts/components/top_bar';
+import { Styles } from 'ts/types';
 
 export interface NotFoundProps {
     location: Location;
@@ -20,15 +20,12 @@ export class NotFound extends React.Component<NotFoundProps, NotFoundState> {
     public render() {
         return (
             <div>
-                <TopBar
-                    blockchainIsLoaded={false}
-                    location={this.props.location}
-                />
+                <TopBar blockchainIsLoaded={false} location={this.props.location} />
                 <div className="mx-auto max-width-4 py4">
                     <div className="center py4">
                         <div className="py4">
                             <div className="py4">
-                                <h1 style={{...styles.thin}}>404 Not Found</h1>
+                                <h1 style={{ ...styles.thin }}>404 Not Found</h1>
                                 <div className="py1">
                                     <div className="py3">
                                         Hm... looks like we couldn't find what you are looking for.
diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx
index 0c1e8f4b7..db5be1f59 100644
--- a/packages/website/ts/pages/shared/anchor_title.tsx
+++ b/packages/website/ts/pages/shared/anchor_title.tsx
@@ -1,16 +1,16 @@
 import * as React from 'react';
-import {Link as ScrollLink} from 'react-scroll';
-import {HeaderSizes, Styles} from 'ts/types';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Link as ScrollLink } from 'react-scroll';
+import { HeaderSizes, Styles } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
-const headerSizeToScrollOffset: {[headerSize: string]: number} = {
+const headerSizeToScrollOffset: { [headerSize: string]: number } = {
     h2: -20,
     h3: 0,
 };
 
 interface AnchorTitleProps {
-    title: string|React.ReactNode;
+    title: string | React.ReactNode;
     id: string;
     headerSize: HeaderSizes;
     shouldShowAnchor: boolean;
@@ -62,11 +62,8 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
             opacity = this.state.isHovering ? 0.6 : 1;
         }
         return (
-            <div className="relative flex" style={{...styles[this.props.headerSize], ...styles.headers}}>
-                <div
-                    className="inline-block"
-                    style={{paddingRight: 4}}
-                >
+            <div className="relative flex" style={{ ...styles[this.props.headerSize], ...styles.headers }}>
+                <div className="inline-block" style={{ paddingRight: 4 }}>
                     {this.props.title}
                 </div>
                 <ScrollLink
@@ -78,7 +75,7 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
                     <i
                         className="zmdi zmdi-link"
                         onClick={utils.setUrlHash.bind(utils, this.props.id)}
-                        style={{...styles.anchor, opacity}}
+                        style={{ ...styles.anchor, opacity }}
                         onMouseOver={this._setHoverState.bind(this, true)}
                         onMouseOut={this._setHoverState.bind(this, false)}
                     />
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
index aded15f0c..be96fda16 100644
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_code_block.tsx
@@ -17,12 +17,8 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M
     }
     public render() {
         return (
-            <span style={{fontSize: 16}}>
-                <HighLight
-                    className={this.props.language || 'javascript'}
-                >
-                    {this.props.literal}
-                </HighLight>
+            <span style={{ fontSize: 16 }}>
+                <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight>
             </span>
         );
     }
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx
index e81920fc3..5487dc8cc 100644
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ b/packages/website/ts/pages/shared/markdown_section.tsx
@@ -2,11 +2,11 @@ import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
 import * as ReactMarkdown from 'react-markdown';
-import {Element as ScrollElement} from 'react-scroll';
-import {AnchorTitle} from 'ts/pages/shared/anchor_title';
-import {MarkdownCodeBlock} from 'ts/pages/shared/markdown_code_block';
-import {HeaderSizes} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { Element as ScrollElement } from 'react-scroll';
+import { AnchorTitle } from 'ts/pages/shared/anchor_title';
+import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
+import { HeaderSizes } from 'ts/types';
+import { utils } from 'ts/utils/utils';
 
 interface MarkdownSectionProps {
     sectionName: string;
@@ -41,7 +41,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                 <ScrollElement name={id}>
                     <div className="clearfix">
                         <div className="col lg-col-8 md-col-8 sm-col-12">
-                            <span style={{textTransform: 'capitalize'}}>
+                            <span style={{ textTransform: 'capitalize' }}>
                                 <AnchorTitle
                                     headerSize={this.props.headerSize}
                                     title={sectionName}
@@ -51,20 +51,17 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                             </span>
                         </div>
                         <div className="col col-4 sm-hide xs-hide py2 right-align">
-                            {!_.isUndefined(this.props.githubLink) &&
+                            {!_.isUndefined(this.props.githubLink) && (
                                 <RaisedButton
                                     href={this.props.githubLink}
                                     target="_blank"
                                     label="Edit on Github"
-                                    icon={<i className="zmdi zmdi-github" style={{fontSize: 23}} />}
+                                    icon={<i className="zmdi zmdi-github" style={{ fontSize: 23 }} />}
                                 />
-                            }
+                            )}
                         </div>
                     </div>
-                    <ReactMarkdown
-                        source={this.props.markdownContent}
-                        renderers={{CodeBlock: MarkdownCodeBlock}}
-                    />
+                    <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} />
                 </ScrollElement>
             </div>
         );
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 6dc194010..849c33504 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -1,15 +1,15 @@
 import * as _ from 'lodash';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
-import {Link as ScrollLink} from 'react-scroll';
-import {VersionDropDown} from 'ts/pages/shared/version_drop_down';
-import {MenuSubsectionsBySection, Styles} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Link as ScrollLink } from 'react-scroll';
+import { VersionDropDown } from 'ts/pages/shared/version_drop_down';
+import { MenuSubsectionsBySection, Styles } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
 interface NestedSidebarMenuProps {
-    topLevelMenu: {[topLevel: string]: string[]};
+    topLevelMenu: { [topLevel: string]: string[] };
     menuSubsectionsBySection: MenuSubsectionsBySection;
     shouldDisplaySectionHeaders?: boolean;
     onMenuItemClick?: () => void;
@@ -44,20 +44,14 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
             if (this.props.shouldDisplaySectionHeaders) {
                 const id = utils.getIdFromName(sectionName);
                 return (
-                    <div
-                        key={`section-${sectionName}`}
-                        className="py1"
-                    >
+                    <div key={`section-${sectionName}`} className="py1">
                         <ScrollLink
                             to={id}
                             offset={-20}
                             duration={constants.DOCS_SCROLL_DURATION_MS}
                             containerId={constants.DOCS_CONTAINER_ID}
                         >
-                            <div
-                                style={{color: colors.grey, cursor: 'pointer'}}
-                                className="pb1"
-                            >
+                            <div style={{ color: colors.grey, cursor: 'pointer' }} className="pb1">
                                 {finalSectionName.toUpperCase()}
                             </div>
                         </ScrollLink>
@@ -65,34 +59,29 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                     </div>
                 );
             } else {
-                return (
-                    <div key={`section-${sectionName}`} >
-                        {this._renderMenuItems(menuItems)}
-                    </div>
-                );
+                return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>;
             }
         });
         return (
             <div>
                 {!_.isUndefined(this.props.versions) &&
-                 !_.isUndefined(this.props.selectedVersion) &&
-                 !_.isUndefined(this.props.docPath) &&
-                    <VersionDropDown
-                        selectedVersion={this.props.selectedVersion}
-                        versions={this.props.versions}
-                        docPath={this.props.docPath}
-                    />
-                }
+                    !_.isUndefined(this.props.selectedVersion) &&
+                    !_.isUndefined(this.props.docPath) && (
+                        <VersionDropDown
+                            selectedVersion={this.props.selectedVersion}
+                            versions={this.props.versions}
+                            docPath={this.props.docPath}
+                        />
+                    )}
                 {navigation}
             </div>
         );
     }
     private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] {
-        const menuItemStyles = this.props.shouldDisplaySectionHeaders ?
-                                    styles.menuItemWithHeaders :
-                                    styles.menuItemWithoutHeaders;
-        const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ?
-                                    styles.menuItemInnerDivWithHeaders : {};
+        const menuItemStyles = this.props.shouldDisplaySectionHeaders
+            ? styles.menuItemWithHeaders
+            : styles.menuItemWithoutHeaders;
+        const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
         const menuItems = _.map(menuItemNames, menuItemName => {
             const id = utils.getIdFromName(menuItemName);
             return (
@@ -109,9 +98,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                             style={menuItemStyles}
                             innerDivStyle={menuItemInnerDivStyles}
                         >
-                            <span style={{textTransform: 'capitalize'}}>
-                                {menuItemName}
-                            </span>
+                            <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span>
                         </MenuItem>
                     </ScrollLink>
                     {this._renderMenuItemSubsections(menuItemName)}
@@ -128,30 +115,34 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
     }
     private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode {
         return (
-            <ul style={{margin: 0, listStyleType: 'none', paddingLeft: 0}} key={menuItemName}>
-            {_.map(entityNames, entityName => {
-                const name = `${menuItemName}-${entityName}`;
-                const id = utils.getIdFromName(name);
-                return (
-                    <li key={`menuItem-${entityName}`}>
-                        <ScrollLink
-                            to={id}
-                            offset={0}
-                            duration={constants.DOCS_SCROLL_DURATION_MS}
-                            containerId={constants.DOCS_CONTAINER_ID}
-                            onTouchTap={this._onMenuItemClick.bind(this, name)}
-                        >
-                            <MenuItem
+            <ul style={{ margin: 0, listStyleType: 'none', paddingLeft: 0 }} key={menuItemName}>
+                {_.map(entityNames, entityName => {
+                    const name = `${menuItemName}-${entityName}`;
+                    const id = utils.getIdFromName(name);
+                    return (
+                        <li key={`menuItem-${entityName}`}>
+                            <ScrollLink
+                                to={id}
+                                offset={0}
+                                duration={constants.DOCS_SCROLL_DURATION_MS}
+                                containerId={constants.DOCS_CONTAINER_ID}
                                 onTouchTap={this._onMenuItemClick.bind(this, name)}
-                                style={{minHeight: 35}}
-                                innerDivStyle={{paddingLeft: 36, fontSize: 14, lineHeight: '35px'}}
                             >
-                                {entityName}
-                            </MenuItem>
-                        </ScrollLink>
-                    </li>
-                );
-            })}
+                                <MenuItem
+                                    onTouchTap={this._onMenuItemClick.bind(this, name)}
+                                    style={{ minHeight: 35 }}
+                                    innerDivStyle={{
+                                        paddingLeft: 36,
+                                        fontSize: 14,
+                                        lineHeight: '35px',
+                                    }}
+                                >
+                                    {entityName}
+                                </MenuItem>
+                            </ScrollLink>
+                        </li>
+                    );
+                })}
             </ul>
         );
     }
diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx
index 5ea9fc681..a5f5f52cf 100644
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ b/packages/website/ts/pages/shared/section_header.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import {Element as ScrollElement} from 'react-scroll';
-import {AnchorTitle} from 'ts/pages/shared/anchor_title';
-import {HeaderSizes} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { Element as ScrollElement } from 'react-scroll';
+import { AnchorTitle } from 'ts/pages/shared/anchor_title';
+import { HeaderSizes } from 'ts/types';
+import { utils } from 'ts/utils/utils';
 
 interface SectionHeaderProps {
     sectionName: string;
@@ -34,7 +34,7 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe
                 <ScrollElement name={id}>
                     <AnchorTitle
                         headerSize={this.props.headerSize}
-                        title={<span style={{textTransform: 'capitalize'}}>{sectionName}</span>}
+                        title={<span style={{ textTransform: 'capitalize' }}>{sectionName}</span>}
                         id={id}
                         shouldShowAnchor={this.state.shouldShowAnchor}
                     />
diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx
index 8d3322d72..b922e1048 100644
--- a/packages/website/ts/pages/shared/version_drop_down.tsx
+++ b/packages/website/ts/pages/shared/version_drop_down.tsx
@@ -14,7 +14,7 @@ interface VersionDropDownState {}
 export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
     public render() {
         return (
-            <div className="mx-auto" style={{width: 120}}>
+            <div className="mx-auto" style={{ width: 120 }}>
                 <DropDownMenu
                     maxHeight={300}
                     value={this.props.selectedVersion}
@@ -27,13 +27,7 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
     }
     private _renderDropDownItems() {
         const items = _.map(this.props.versions, version => {
-            return (
-                <MenuItem
-                    key={version}
-                    value={version}
-                    primaryText={`v${version}`}
-                />
-            );
+            return <MenuItem key={version} value={version} primaryText={`v${version}`} />;
         });
         return items;
     }
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 72da94a20..d065614ba 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -2,18 +2,16 @@ import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
-import {
-    scroller,
-} from 'react-scroll';
-import {TopBar} from 'ts/components/top_bar';
-import {MarkdownSection} from 'ts/pages/shared/markdown_section';
-import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
-import {SectionHeader} from 'ts/pages/shared/section_header';
-import {Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { scroller } from 'react-scroll';
+import { TopBar } from 'ts/components/top_bar';
+import { MarkdownSection } from 'ts/pages/shared/markdown_section';
+import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
+import { SectionHeader } from 'ts/pages/shared/section_header';
+import { Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
 const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000;
 
@@ -62,40 +60,37 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
     }
     public render() {
         const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection)
-                                         ? {}
-                                         : this._getMenuSubsectionsBySection(this.state.articlesBySection);
+            ? {}
+            : this._getMenuSubsectionsBySection(this.state.articlesBySection);
         return (
             <div>
-                <DocumentTitle title="0x Protocol Wiki"/>
+                <DocumentTitle title="0x Protocol Wiki" />
                 <TopBar
                     blockchainIsLoaded={false}
                     location={this.props.location}
                     menuSubsectionsBySection={menuSubsectionsBySection}
                     shouldFullWidth={true}
                 />
-                {_.isUndefined(this.state.articlesBySection) ?
-                    <div
-                        className="col col-12"
-                        style={styles.mainContainers}
-                    >
+                {_.isUndefined(this.state.articlesBySection) ? (
+                    <div className="col col-12" style={styles.mainContainers}>
                         <div
                             className="relative sm-px2 sm-pt2 sm-m1"
-                            style={{height: 122, top: '50%', transform: 'translateY(-50%)'}}
+                            style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
                         >
                             <div className="center pb2">
                                 <CircularProgress size={40} thickness={5} />
                             </div>
-                            <div className="center pt2" style={{paddingBottom: 11}}>Loading wiki...</div>
+                            <div className="center pt2" style={{ paddingBottom: 11 }}>
+                                Loading wiki...
+                            </div>
                         </div>
-                    </div> :
-                    <div
-                        className="mx-auto flex"
-                        style={{color: colors.grey800, height: 43}}
-                    >
+                    </div>
+                ) : (
+                    <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}>
                         <div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide">
                             <div
                                 className="border-right absolute pt2"
-                                style={{...styles.menuContainer, ...styles.mainContainers}}
+                                style={{ ...styles.menuContainer, ...styles.mainContainers }}
                             >
                                 <NestedSidebarMenu
                                     topLevelMenu={menuSubsectionsBySection}
@@ -105,24 +100,18 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                             </div>
                         </div>
                         <div className="relative col lg-col-9 md-col-9 sm-col-12 col-12">
-                            <div
-                                id="documentation"
-                                style={styles.mainContainers}
-                                className="absolute"
-                            >
+                            <div id="documentation" style={styles.mainContainers} className="absolute">
                                 <div id="0xProtocolWiki" />
                                 <h1 className="md-pl2 sm-pl3">
                                     <a href={constants.URL_GITHUB_WIKI} target="_blank">
                                         0x Protocol Wiki
                                     </a>
                                 </h1>
-                                <div id="wiki">
-                                    {this._renderWikiArticles()}
-                                </div>
+                                <div id="wiki">{this._renderWikiArticles()}</div>
                             </div>
                         </div>
                     </div>
-                }
+                )}
             </div>
         );
     }
@@ -143,12 +132,9 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                         headerSize={HeaderSizes.H2}
                         githubLink={githubLink}
                     />
-                    <div className="mb4 mt3 p3 center" style={{backgroundColor: colors.lightestGrey}}>
+                    <div className="mb4 mt3 p3 center" style={{ backgroundColor: colors.lightestGrey }}>
                         See a way to make this article better?{' '}
-                        <a
-                            href={githubLink}
-                            target="_blank"
-                        >
+                        <a href={githubLink} target="_blank">
                             Edit here →
                         </a>
                     </div>
@@ -156,10 +142,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             );
         });
         return (
-            <div
-                key={`section-${sectionName}`}
-                className="py2 pr3 md-pl2 sm-pl3"
-            >
+            <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
                 <SectionHeader sectionName={sectionName} headerSize={HeaderSizes.H1} />
                 {renderedArticles}
             </div>
@@ -172,7 +155,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             hash = '0xProtocolWiki'; // scroll to the top
         }
 
-        scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'});
+        scroller.scrollTo(hash, {
+            duration: 0,
+            offset: 0,
+            containerId: 'documentation',
+        });
     }
     private async _fetchArticlesBySectionAsync(): Promise<void> {
         const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`;
@@ -192,15 +179,18 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             return;
         }
         const articlesBySection = await response.json();
-        this.setState({
-            articlesBySection,
-        }, () => {
-            this._scrollToHash();
-        });
+        this.setState(
+            {
+                articlesBySection,
+            },
+            () => {
+                this._scrollToHash();
+            },
+        );
     }
     private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection) {
         const sectionNames = _.keys(articlesBySection);
-        const menuSubsectionsBySection: {[section: string]: string[]} = {};
+        const menuSubsectionsBySection: { [section: string]: string[] } = {};
         for (const sectionName of sectionNames) {
             const articles = articlesBySection[sectionName];
             const articleNames = _.map(articles, article => article.title);