Apply prettier config

1 files changed, 188 insertions, 239 deletions

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}