Merge pull request #1500 from 0xProject/update-prettier-version

Update prettier to version ^1.15.3

56 files changed, 268 insertions, 365 deletions

diff --git a/packages/website/ts/components/aboutPageLayout.tsx b/packages/website/ts/components/aboutPageLayout.tsx
index a2fd9dd72..51c1a661e 100644
--- a/packages/website/ts/components/aboutPageLayout.tsx
+++ b/packages/website/ts/components/aboutPageLayout.tsx
@@ -38,18 +38,17 @@ export const AboutPageLayout = (props: Props) => (
                         {props.description}
                     </AnimatedParagraph>
 
-                    {props.linkLabel &&
-                        (props.href || props.to) && (
-                            <AnimatedLink
-                                to={props.to}
-                                href={props.href}
-                                target={!_.isUndefined(props.href) ? '_blank' : undefined}
-                                isWithArrow={true}
-                                isAccentColor={true}
-                            >
-                                {props.linkLabel}
-                            </AnimatedLink>
-                        )}
+                    {props.linkLabel && (props.href || props.to) && (
+                        <AnimatedLink
+                            to={props.to}
+                            href={props.href}
+                            target={!_.isUndefined(props.href) ? '_blank' : undefined}
+                            isWithArrow={true}
+                            isAccentColor={true}
+                        >
+                            {props.linkLabel}
+                        </AnimatedLink>
+                    )}
                 </Column>
             </Column>
         </Section>
diff --git a/packages/website/ts/components/animatedChatIcon.tsx b/packages/website/ts/components/animatedChatIcon.tsx
index 9a86e244c..770536259 100644
--- a/packages/website/ts/components/animatedChatIcon.tsx
+++ b/packages/website/ts/components/animatedChatIcon.tsx
@@ -98,9 +98,6 @@ const Rays = styled.g`
     transform-origin: 50% 50%;
 `;
 
-const Dot =
-    styled.circle <
-    { delay: number } >
-    `
+const Dot = styled.circle<{ delay: number }>`
     animation: ${fadeInOut} 4s ${props => `${props.delay}s`} infinite;
 `;
diff --git a/packages/website/ts/components/banner.tsx b/packages/website/ts/components/banner.tsx
index 76fc1d09e..ce3fd499a 100644
--- a/packages/website/ts/components/banner.tsx
+++ b/packages/website/ts/components/banner.tsx
@@ -123,10 +123,7 @@ const ButtonWrap = styled.div`
 // Note let's refactor this
 // is it absolutely necessary to have a stateless component
 // to pass props down into the styled icon?
-const Border =
-    styled.div <
-    BorderProps >
-    `
+const Border = styled.div<BorderProps>`
     position: absolute;
     background-image: ${props =>
         props.isBottom ? 'url(/images/banner/bottomofcta.png);' : 'url(/images/banner/topofcta.png);'};
diff --git a/packages/website/ts/components/button.tsx b/packages/website/ts/components/button.tsx
index 569038ae0..31a74e599 100644
--- a/packages/website/ts/components/button.tsx
+++ b/packages/website/ts/components/button.tsx
@@ -58,10 +58,7 @@ Button.defaultProps = {
     borderColor: 'rgba(255, 255, 255, .4)',
 };
 
-const ButtonBase =
-    styled.button <
-    ButtonInterface >
-    `
+const ButtonBase = styled.button<ButtonInterface>`
     appearance: none;
     border: 1px solid transparent;
     display: inline-block;
diff --git a/packages/website/ts/components/definition.tsx b/packages/website/ts/components/definition.tsx
index 92fe54f38..bd7a40425 100644
--- a/packages/website/ts/components/definition.tsx
+++ b/packages/website/ts/components/definition.tsx
@@ -69,10 +69,7 @@ export const Definition = (props: Props) => (
     </Wrap>
 );
 
-const Wrap =
-    styled.div <
-    Props >
-    `
+const Wrap = styled.div<Props>`
     max-width: ${props => props.isInline && '354px'};
 
     & + & {
@@ -97,10 +94,7 @@ const Wrap =
     }
 `;
 
-const TextWrap =
-    styled.div <
-    Props >
-    `
+const TextWrap = styled.div<Props>`
     width: 100%;
     max-width: 560px;
 
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index a0114d898..1c47903db 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -148,15 +148,17 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
                     If you are using{' '}
                     <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
                         Metamask
-                    </a>, you can switch networks in the top left corner of the extension popover.
+                    </a>
+                    , you can switch networks in the top left corner of the extension popover.
                 </div>
                 <h4>Parity Signer</h4>
                 <div>
                     If using the{' '}
                     <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">
                         Parity Signer Chrome extension
-                    </a>, make sure to start your local Parity node with `parity ui` or `parity --chain Kovan ui` in
-                    order to connect to mainnet \ or Kovan respectively.
+                    </a>
+                    , make sure to start your local Parity node with `parity ui` or `parity --chain Kovan ui` in order
+                    to connect to mainnet \ or Kovan respectively.
                 </div>
             </div>
         );
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index 9b9421f1a..5ca272b1a 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -111,20 +111,19 @@ export class EthWethConversionDialog extends React.Component<
                         )}
                         <div className="pt1" style={{ fontSize: 12 }}>
                             <div className="left">1 ETH = 1 WETH</div>
-                            {this.props.direction === Side.Receive &&
-                                this.state.isEthTokenBalanceLoaded && (
-                                    <div
-                                        className="right"
-                                        onClick={this._onMaxClick.bind(this)}
-                                        style={{
-                                            color: colors.darkBlue,
-                                            textDecoration: 'underline',
-                                            cursor: 'pointer',
-                                        }}
-                                    >
-                                        Max
-                                    </div>
-                                )}
+                            {this.props.direction === Side.Receive && this.state.isEthTokenBalanceLoaded && (
+                                <div
+                                    className="right"
+                                    onClick={this._onMaxClick.bind(this)}
+                                    style={{
+                                        color: colors.darkBlue,
+                                        textDecoration: 'underline',
+                                        cursor: 'pointer',
+                                    }}
+                                >
+                                    Max
+                                </div>
+                            )}
                         </div>
                     </div>
                 </div>
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 3d0203573..2fa2b94a0 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -173,15 +173,14 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
     private _renderOrderJsonNotices(): React.ReactNode {
         return (
             <div>
-                {!_.isUndefined(this.props.initialOrder) &&
-                    !this.state.didOrderValidationRun && (
-                        <div className="pt2">
-                            <span className="pr1">
-                                <i className="zmdi zmdi-spinner zmdi-hc-spin" />
-                            </span>
-                            <span>Validating order...</span>
-                        </div>
-                    )}
+                {!_.isUndefined(this.props.initialOrder) && !this.state.didOrderValidationRun && (
+                    <div className="pt2">
+                        <span className="pr1">
+                            <i className="zmdi zmdi-spinner zmdi-hc-spin" />
+                        </span>
+                        <span>Validating order...</span>
+                    </div>
+                )}
                 {!_.isEmpty(this.state.orderJSONErrMsg) && (
                     <Alert type={AlertTypes.ERROR} message={this.state.orderJSONErrMsg} />
                 )}
diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx
index feb72c2ee..5be09e6c2 100644
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -37,7 +37,8 @@ export const FillWarningDialog = (props: FillWarningDialogProps) => {
                     be counterfeit. It is your responsibility to verify the token addresses on Etherscan (
                     <a href="https://0x.org/wiki#Verifying-Custom-Tokens" target="_blank">
                         See this how-to guide
-                    </a>) before filling an order. <b>This action may result in the loss of funds</b>.
+                    </a>
+                    ) before filling an order. <b>This action may result in the loss of funds</b>.
                 </div>
             </div>
         </Dialog>
diff --git a/packages/website/ts/components/hamburger.tsx b/packages/website/ts/components/hamburger.tsx
index 435d206cd..34d4ccc46 100644
--- a/packages/website/ts/components/hamburger.tsx
+++ b/packages/website/ts/components/hamburger.tsx
@@ -16,10 +16,7 @@ export const Hamburger: React.FunctionComponent<Props> = (props: Props) => {
     );
 };
 
-const StyledHamburger =
-    styled.button <
-    Props >
-    `
+const StyledHamburger = styled.button<Props>`
     background: none;
     border: 0;
     width: 22px;
@@ -41,9 +38,8 @@ const StyledHamburger =
         height: 2px;
         margin-bottom: 5px;
         transform-origin: 4px 0px;
-        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
-            background-color 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
-            opacity 0.55s ease;
+        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
+            background-color 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
 
         &:first-child {
             //transform-origin: 0% 0%;
diff --git a/packages/website/ts/components/header.tsx b/packages/website/ts/components/header.tsx
index 90e097070..088f41048 100644
--- a/packages/website/ts/components/header.tsx
+++ b/packages/website/ts/components/header.tsx
@@ -87,7 +87,9 @@ class HeaderBase extends React.Component<HeaderProps> {
                         </Link>
 
                         <NavLinks>
-                            {_.map(navItems, (link, index) => <NavItem key={`navlink-${index}`} link={link} />)}
+                            {_.map(navItems, (link, index) => (
+                                <NavItem key={`navlink-${index}`} link={link} />
+                            ))}
                         </NavLinks>
 
                         <MediaQuery minWidth={990}>
@@ -130,10 +132,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => {
     );
 };
 
-const StyledHeader =
-    styled.header <
-    HeaderProps >
-    `
+const StyledHeader = styled.header<HeaderProps>`
     padding: 30px;
     background-color: ${props => props.theme.bgColor};
 `;
@@ -200,10 +199,7 @@ const NavLinks = styled.ul`
     }
 `;
 
-const DropdownWrap =
-    styled.div <
-    DropdownWrapInterface >
-    `
+const DropdownWrap = styled.div<DropdownWrapInterface>`
     width: ${props => props.width || 280}px;
     padding: 15px 0;
     border: 1px solid transparent;
@@ -219,27 +215,28 @@ const DropdownWrap =
     transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
     z-index: 20;
 
-    &:after, &:before {
-    	bottom: 100%;
-    	left: 50%;
-    	border: solid transparent;
-    	content: " ";
-    	height: 0;
-    	width: 0;
-    	position: absolute;
-    	pointer-events: none;
+    &:after,
+    &:before {
+        bottom: 100%;
+        left: 50%;
+        border: solid transparent;
+        content: ' ';
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
     }
     &:after {
-    	border-color: rgba(255, 255, 255, 0);
-    	border-bottom-color: ${props => props.theme.dropdownBg};
-    	border-width: 10px;
-    	margin-left: -10px;
+        border-color: rgba(255, 255, 255, 0);
+        border-bottom-color: ${props => props.theme.dropdownBg};
+        border-width: 10px;
+        margin-left: -10px;
     }
     &:before {
-    	border-color: rgba(255, 0, 0, 0);
-    	border-bottom-color: ${props => props.theme.dropdownBorderColor};
-    	border-width: 11px;
-    	margin-left: -11px;
+        border-color: rgba(255, 0, 0, 0);
+        border-bottom-color: ${props => props.theme.dropdownBorderColor};
+        border-width: 11px;
+        margin-left: -11px;
     }
 
     @media (max-width: 768px) {
diff --git a/packages/website/ts/components/hero.tsx b/packages/website/ts/components/hero.tsx
index a662ee3a5..c326e0292 100644
--- a/packages/website/ts/components/hero.tsx
+++ b/packages/website/ts/components/hero.tsx
@@ -28,10 +28,7 @@ interface WrapProps {
     isFullWidth?: boolean;
     isCenteredMobile?: boolean;
 }
-const Wrap =
-    styled.div <
-    WrapProps >
-    `
+const Wrap = styled.div<WrapProps>`
     width: calc(100% - 60px);
     margin: 0 auto;
 
@@ -53,10 +50,7 @@ interface TitleProps {
     isLarge?: any;
     maxWidth?: string;
 }
-const Title =
-    styled.h1 <
-    TitleProps >
-    `
+const Title = styled.h1<TitleProps>`
     font-size: ${props => (props.isLarge ? '80px' : '50px')};
     font-weight: 300;
     line-height: 1.1;
@@ -87,10 +81,7 @@ const Description = styled.p`
     }
 `;
 
-const Content =
-    styled.div <
-    { width: string } >
-    `
+const Content = styled.div<{ width: string }>`
     width: 100%;
 
     @media (min-width: 768px) {
diff --git a/packages/website/ts/components/icon.tsx b/packages/website/ts/components/icon.tsx
index 165e999b9..60e4d04ee 100644
--- a/packages/website/ts/components/icon.tsx
+++ b/packages/website/ts/components/icon.tsx
@@ -32,10 +32,7 @@ export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => {
     return null;
 };
 
-export const InlineIconWrap =
-    styled.div <
-    PaddingInterface >
-    `
+export const InlineIconWrap = styled.div<PaddingInterface>`
     margin: ${props => getCSSPadding(props.margin)};
     display: flex;
     align-items: center;
@@ -54,10 +51,7 @@ const _getSize = (size: string | number = 'small'): string => {
     return `${size}px`;
 };
 
-const StyledIcon =
-    styled.figure <
-    IconProps >
-    `
+const StyledIcon = styled.figure<IconProps>`
     width: ${props => _getSize(props.size)};
     height: ${props => _getSize(props.size)};
     margin: ${props => getCSSPadding(props.margin)};
diff --git a/packages/website/ts/components/image.tsx b/packages/website/ts/components/image.tsx
index 65b2a9705..0137cfc97 100644
--- a/packages/website/ts/components/image.tsx
+++ b/packages/website/ts/components/image.tsx
@@ -12,9 +12,6 @@ const ImageClass: React.FunctionComponent<Props> = (props: Props) => {
     return <img {...props} />;
 };
 
-export const Image =
-    styled(ImageClass) <
-    Props >
-    `
+export const Image = styled(ImageClass)<Props>`
     margin: ${props => props.isCentered && `0 auto`};
 `;
diff --git a/packages/website/ts/components/link.tsx b/packages/website/ts/components/link.tsx
index 080a0abcc..a66985acc 100644
--- a/packages/website/ts/components/link.tsx
+++ b/packages/website/ts/components/link.tsx
@@ -44,10 +44,7 @@ export const LinkWrap = styled.div`
     }
 `;
 
-const StyledLink =
-    styled(SmartLink) <
-    LinkInterface >
-    `
+const StyledLink = styled(SmartLink)<LinkInterface>`
     display: ${props => !props.isBlock && 'inline-flex'};
     color: ${props => props.color || props.theme.linkColor};
     text-align: center;
diff --git a/packages/website/ts/components/logo.tsx b/packages/website/ts/components/logo.tsx
index 19aeb901e..f89be0711 100644
--- a/packages/website/ts/components/logo.tsx
+++ b/packages/website/ts/components/logo.tsx
@@ -23,10 +23,7 @@ const StyledLogo = styled.div`
     }
 `;
 
-const Icon =
-    styled(LogoIcon) <
-    LogoInterface >
-    `
+const Icon = styled(LogoIcon)<LogoInterface>`
     flex-shrink: 0;
 
     path {
diff --git a/packages/website/ts/components/mobileNav.tsx b/packages/website/ts/components/mobileNav.tsx
index 573d21596..d43bbe50e 100644
--- a/packages/website/ts/components/mobileNav.tsx
+++ b/packages/website/ts/components/mobileNav.tsx
@@ -55,10 +55,7 @@ export class MobileNav extends React.PureComponent<Props> {
     }
 }
 
-const Wrap =
-    styled.nav <
-    { isToggled: boolean } >
-    `
+const Wrap = styled.nav<{ isToggled: boolean }>`
     width: 100%;
     height: 357px;
     background-color: ${props => props.theme.mobileNavBgUpper};
@@ -99,19 +96,13 @@ const Overlay = styled.div`
 interface SectionProps {
     isDark?: boolean;
 }
-const Section =
-    styled.div <
-    SectionProps >
-    `
+const Section = styled.div<SectionProps>`
     width: 100%;
     padding: 15px 30px;
     background-color: ${props => (props.isDark ? props.theme.mobileNavBgLower : 'transparent')};
 `;
 
-const Grid =
-    styled(WrapGrid) <
-    WrapProps >
-    `
+const Grid = styled(WrapGrid)<WrapProps>`
     justify-content: flex-start;
 
     li {
diff --git a/packages/website/ts/components/modals/input.tsx b/packages/website/ts/components/modals/input.tsx
index 8cfcc9763..c72e53aa0 100644
--- a/packages/website/ts/components/modals/input.tsx
+++ b/packages/website/ts/components/modals/input.tsx
@@ -60,10 +60,7 @@ const StyledInput = styled.input`
     }
 `;
 
-const InputWrapper =
-    styled.div <
-    InputProps >
-    `
+const InputWrapper = styled.div<InputProps>`
     position: relative;
     flex-grow: ${props => props.width === InputWidth.Full && 1};
     width: ${props => props.width === InputWidth.Half && `calc(50% - 15px)`};
diff --git a/packages/website/ts/components/modals/modal_contact.tsx b/packages/website/ts/components/modals/modal_contact.tsx
index 7414df7d9..62c1062a3 100644
--- a/packages/website/ts/components/modals/modal_contact.tsx
+++ b/packages/website/ts/components/modals/modal_contact.tsx
@@ -361,28 +361,22 @@ const StyledDialogContent = styled(DialogContent)`
     }
 `;
 
-const Form =
-    styled.form <
-    FormProps >
-    `
+const Form = styled.form<FormProps>`
     position: relative;
-    transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out;
+    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
 
     opacity: ${props => props.isSuccessful && `0`};
     visibility: ${props => props.isSuccessful && `hidden`};
 `;
 
-const Confirmation =
-    styled.div <
-    FormProps >
-    `
+const Confirmation = styled.div<FormProps>`
     position: absolute;
     top: 50%;
     text-align: center;
     width: 100%;
     left: 0;
-    transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out;
-    transition-delay: 0.40s;
+    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+    transition-delay: 0.4s;
     padding: 60px 60px;
     transform: translateY(-50%);
     opacity: ${props => (props.isSuccessful ? `1` : `0`)};
diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
index 4d4bc4617..56df880f3 100644
--- a/packages/website/ts/components/nested_sidebar_menu.tsx
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -77,8 +77,8 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
                         isActive
                             ? colors.lightLinkBlue
                             : this.props.screenWidth === ScreenWidths.Sm
-                                ? 'white'
-                                : colors.grey100
+                            ? 'white'
+                            : colors.grey100
                     }
                     fontSize="14px"
                     textAlign="left"
diff --git a/packages/website/ts/components/newLayout.tsx b/packages/website/ts/components/newLayout.tsx
index 28e7653c5..07691a02a 100644
--- a/packages/website/ts/components/newLayout.tsx
+++ b/packages/website/ts/components/newLayout.tsx
@@ -54,10 +54,7 @@ export const Section: React.FunctionComponent<SectionProps> = (props: SectionPro
     );
 };
 
-export const Column =
-    styled.div <
-    ColumnProps >
-    `
+export const Column = styled.div<ColumnProps>`
     width: ${props => props.width};
     max-width: ${props => props.maxWidth};
     padding: ${props => props.padding};
@@ -71,10 +68,7 @@ export const Column =
     }
 `;
 
-export const FlexWrap =
-    styled.div <
-    FlexProps >
-    `
+export const FlexWrap = styled.div<FlexProps>`
     max-width: 1500px;
     margin: 0 auto;
     padding: ${props => props.padding};
@@ -85,18 +79,12 @@ export const FlexWrap =
     }
 `;
 
-export const WrapSticky =
-    styled.div <
-    WrapProps >
-    `
+export const WrapSticky = styled.div<WrapProps>`
     position: sticky;
     top: ${props => props.offsetTop || '60px'};
 `;
 
-const SectionBase =
-    styled.section <
-    SectionProps >
-    `
+const SectionBase = styled.section<SectionProps>`
     width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
     max-width: 1500px;
     margin: 0 auto;
@@ -110,10 +98,7 @@ const SectionBase =
     }
 `;
 
-const Wrap =
-    styled(FlexWrap) <
-    WrapProps >
-    `
+const Wrap = styled(FlexWrap)<WrapProps>`
     width: ${props => props.wrapWidth || 'calc(100% - 60px)'};
     width: ${props => props.bgColor && 'calc(100% - 60px)'};
     max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
@@ -121,10 +106,7 @@ const Wrap =
     margin: 0 auto;
 `;
 
-export const WrapGrid =
-    styled(Wrap) <
-    WrapProps >
-    `
+export const WrapGrid = styled(Wrap)<WrapProps>`
     display: flex;
     flex-wrap: ${props => props.isWrapped && `wrap`};
     justify-content: ${props => (props.isCentered ? `center` : 'space-between')};
diff --git a/packages/website/ts/components/newsletter_form.tsx b/packages/website/ts/components/newsletter_form.tsx
index bd61e3f4d..e5fd95646 100644
--- a/packages/website/ts/components/newsletter_form.tsx
+++ b/packages/website/ts/components/newsletter_form.tsx
@@ -117,10 +117,7 @@ const StyledForm = styled.form`
     margin-top: 27px;
 `;
 
-const StyledInput =
-    styled.input <
-    InputProps >
-    `
+const StyledInput = styled.input<InputProps>`
     appearance: none;
     background-color: transparent;
     border: 0;
@@ -132,7 +129,7 @@ const StyledInput =
     width: 100%;
 
     &::placeholder {
-        color: #B1B1B1; // #9D9D9D on light theme
+        color: #b1b1b1; // #9D9D9D on light theme
     }
 `;
 
@@ -140,14 +137,11 @@ const InputWrapper = styled.div`
     position: relative;
 `;
 
-const InnerInputWrapper =
-    styled.div <
-    ArrowProps >
-    `
+const InnerInputWrapper = styled.div<ArrowProps>`
     opacity: ${props => props.isSubmitted && 0};
     visibility: ${props => props.isSubmitted && 'hidden'};
     transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
-    transition-delay: 0.30s;
+    transition-delay: 0.3s;
 `;
 
 const SubmitButton = styled.button`
@@ -174,11 +168,8 @@ const Text = styled.p`
     margin-top: 15px;
 `;
 
-const SuccessText =
-    styled.p <
-    ArrowProps >
-    `
-    color: #B1B1B1;
+const SuccessText = styled.p<ArrowProps>`
+    color: #b1b1b1;
     font-size: 1rem;
     font-weight: 300;
     line-height: 1.2em;
@@ -194,10 +185,7 @@ const SuccessText =
     transition-delay: 0.55s;
 `;
 
-const Arrow =
-    styled.svg <
-    ArrowProps >
-    `
+const Arrow = styled.svg<ArrowProps>`
     transform: ${props => props.isSubmitted && `translateX(44px)`};
     transition: transform 0.25s ease-in-out;
 `;
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 94ab63ac6..6d7c90573 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -447,7 +447,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                                 render={this._renderAccountManagementItem.bind(this, item)}
                             />
                         );
-                    })}}
+                    })}
+                    }
                     <Route render={this._renderNotFoundMessage.bind(this)} />
                 </Switch>
                 <PortalDisclaimerDialog
diff --git a/packages/website/ts/components/sections/landing/clients.tsx b/packages/website/ts/components/sections/landing/clients.tsx
index 9a68fbf4c..4d83a1d2f 100644
--- a/packages/website/ts/components/sections/landing/clients.tsx
+++ b/packages/website/ts/components/sections/landing/clients.tsx
@@ -86,10 +86,7 @@ export const SectionLandingClients = () => (
     </Section>
 );
 
-const StyledProject =
-    styled.div <
-    StyledProjectInterface >
-    `
+const StyledProject = styled.div<StyledProjectInterface>`
     flex-shrink: 0;
 
     img {
@@ -99,7 +96,7 @@ const StyledProject =
     }
 
     @media (min-width: 768px) {
-        width:  auto;
+        width: auto;
         height: 50px;
         margin: 30px;
     }
diff --git a/packages/website/ts/components/siteWrap.tsx b/packages/website/ts/components/siteWrap.tsx
index 316896dbb..1f0902105 100644
--- a/packages/website/ts/components/siteWrap.tsx
+++ b/packages/website/ts/components/siteWrap.tsx
@@ -140,10 +140,7 @@ export class SiteWrap extends React.Component<Props, State> {
     }
 }
 
-const Main =
-    styled.main <
-    MainProps >
-    `
+const Main = styled.main<MainProps>`
     transition: transform 0.5s, opacity 0.5s;
     opacity: ${props => props.isNavToggled && '0.5'};
 `;
diff --git a/packages/website/ts/components/text.tsx b/packages/website/ts/components/text.tsx
index 10f272e73..a47e61ef3 100644
--- a/packages/website/ts/components/text.tsx
+++ b/packages/website/ts/components/text.tsx
@@ -27,10 +27,7 @@ interface ParagraphProps extends BaseTextInterface {
     fontWeight?: string | number;
 }
 
-const StyledHeading =
-    styled.h1 <
-    HeadingProps >
-    `
+const StyledHeading = styled.h1<HeadingProps>`
     max-width: ${props => props.maxWidth};
     color: ${props => props.color || props.theme.textColor};
     display: ${props => props.isFlex && `inline-flex`};
@@ -64,10 +61,7 @@ Heading.defaultProps = {
 // Note: this would be useful to be implemented the same way was "Heading"
 // and be more generic. e.g. <Text /> with a props asElement so we can use it
 // for literally anything =
-export const Paragraph =
-    styled.p <
-    ParagraphProps >
-    `
+export const Paragraph = styled.p<ParagraphProps>`
     font-size: ${props => `var(--${props.size || 'default'}Paragraph)`};
     font-weight: ${props => props.fontWeight || 300};
     margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 92aecf046..2ed0229c8 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -354,12 +354,11 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                     {tokenState.isLoaded ? (
                         <span>
                             {this._renderAmount(tokenState.balance, token.decimals)} {token.symbol}
-                            {this.state.isZRXSpinnerVisible &&
-                                token.symbol === ZRX_TOKEN_SYMBOL && (
-                                    <span className="pl1">
-                                        <i className="zmdi zmdi-spinner zmdi-hc-spin" />
-                                    </span>
-                                )}
+                            {this.state.isZRXSpinnerVisible && token.symbol === ZRX_TOKEN_SYMBOL && (
+                                <span className="pl1">
+                                    <i className="zmdi zmdi-spinner zmdi-hc-spin" />
+                                </span>
+                            )}
                         </span>
                     ) : (
                         <i className="zmdi zmdi-spinner zmdi-hc-spin" />
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index f9e0967d4..a14b94d8a 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -94,14 +94,17 @@ export class Party extends React.Component<PartyProps, PartyState> {
                                 <ReactTooltip id={registeredTooltipId}>
                                     {isRegistered ? (
                                         <div>
-                                            This token address was found in the token registry<br />
+                                            This token address was found in the token registry
+                                            <br />
                                             smart contract and is therefore believed to be a<br />
                                             legitimate token.
                                         </div>
                                     ) : (
                                         <div>
-                                            This token is not included in the token registry<br />
-                                            smart contract. We cannot guarantee the legitimacy<br />
+                                            This token is not included in the token registry
+                                            <br />
+                                            smart contract. We cannot guarantee the legitimacy
+                                            <br />
                                             of this token. Make sure to verify its address on Etherscan.
                                         </div>
                                     )}
@@ -109,27 +112,28 @@ export class Party extends React.Component<PartyProps, PartyState> {
                             </div>
                         </div>
                     )}
-                    {!_.isUndefined(this.props.hasUniqueNameAndSymbol) &&
-                        !this.props.hasUniqueNameAndSymbol && (
-                            <div>
-                                <div
-                                    data-tip={true}
-                                    data-for={uniqueNameAndSymbolTooltipId}
-                                    className="mx-auto"
-                                    style={{ fontSize: 13, width: 127 }}
-                                >
-                                    <span style={{ color: colors.red500 }}>
-                                        <i className="zmdi zmdi-alert-octagon" />
-                                    </span>{' '}
-                                    <span>Suspicious token</span>
-                                    <ReactTooltip id={uniqueNameAndSymbolTooltipId}>
-                                        This token shares it's name, symbol or both with<br />
-                                        a token in the 0x Token Registry but it has a different<br />
-                                        smart contract address. This is most likely a scam token!
-                                    </ReactTooltip>
-                                </div>
+                    {!_.isUndefined(this.props.hasUniqueNameAndSymbol) && !this.props.hasUniqueNameAndSymbol && (
+                        <div>
+                            <div
+                                data-tip={true}
+                                data-for={uniqueNameAndSymbolTooltipId}
+                                className="mx-auto"
+                                style={{ fontSize: 13, width: 127 }}
+                            >
+                                <span style={{ color: colors.red500 }}>
+                                    <i className="zmdi zmdi-alert-octagon" />
+                                </span>{' '}
+                                <span>Suspicious token</span>
+                                <ReactTooltip id={uniqueNameAndSymbolTooltipId}>
+                                    This token shares it's name, symbol or both with
+                                    <br />
+                                    a token in the 0x Token Registry but it has a different
+                                    <br />
+                                    smart contract address. This is most likely a scam token!
+                                </ReactTooltip>
                             </div>
-                        )}
+                        </div>
+                    )}
                 </div>
             </div>
         );
diff --git a/packages/website/ts/constants/globalStyle.tsx b/packages/website/ts/constants/globalStyle.tsx
index 5abb758c5..ef7ec9426 100644
--- a/packages/website/ts/constants/globalStyle.tsx
+++ b/packages/website/ts/constants/globalStyle.tsx
@@ -11,9 +11,7 @@ export interface GlobalStyle {
 }
 
 const GlobalStyles = withTheme(
-    createGlobalStyle <
-        GlobalStyle >
-        `
+    createGlobalStyle<GlobalStyle>`
     ${cssReset};
 
     html {
diff --git a/packages/website/ts/containers/asset_buyer_documentation.ts b/packages/website/ts/containers/asset_buyer_documentation.ts
index 815176e47..a75c6d861 100644
--- a/packages/website/ts/containers/asset_buyer_documentation.ts
+++ b/packages/website/ts/containers/asset_buyer_documentation.ts
@@ -40,6 +40,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts
index 19fd0ee56..1cfc0702e 100644
--- a/packages/website/ts/containers/connect_documentation.ts
+++ b/packages/website/ts/containers/connect_documentation.ts
@@ -45,6 +45,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/contract_wrappers_documentation.ts b/packages/website/ts/containers/contract_wrappers_documentation.ts
index dec95ae62..bbabce7a7 100644
--- a/packages/website/ts/containers/contract_wrappers_documentation.ts
+++ b/packages/website/ts/containers/contract_wrappers_documentation.ts
@@ -40,6 +40,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts
index e0ca439a6..2a6dac0e2 100644
--- a/packages/website/ts/containers/docs_home.ts
+++ b/packages/website/ts/containers/docs_home.ts
@@ -26,6 +26,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
     dispatcher: new Dispatcher(dispatch),
 });
 
-export const DocsHome: React.ComponentClass<DocsHomeProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocsHomeComponent,
-);
+export const DocsHome: React.ComponentClass<DocsHomeProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocsHomeComponent);
diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts
index 9b668d515..e6e4d4067 100644
--- a/packages/website/ts/containers/ethereum_types_documentation.ts
+++ b/packages/website/ts/containers/ethereum_types_documentation.ts
@@ -36,6 +36,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/faq.ts b/packages/website/ts/containers/faq.ts
index a2b5735f6..da5b71bdd 100644
--- a/packages/website/ts/containers/faq.ts
+++ b/packages/website/ts/containers/faq.ts
@@ -22,4 +22,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
     dispatcher: new Dispatcher(dispatch),
 });
 
-export const FAQ: React.ComponentClass<FAQProps> = connect(mapStateToProps, mapDispatchToProps)(FAQComponent);
+export const FAQ: React.ComponentClass<FAQProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(FAQComponent);
diff --git a/packages/website/ts/containers/json_schemas_documentation.ts b/packages/website/ts/containers/json_schemas_documentation.ts
index 3862ba878..1090265e7 100644
--- a/packages/website/ts/containers/json_schemas_documentation.ts
+++ b/packages/website/ts/containers/json_schemas_documentation.ts
@@ -65,6 +65,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/migrations_documentation.ts b/packages/website/ts/containers/migrations_documentation.ts
index dd5db3ac6..bae84dfea 100644
--- a/packages/website/ts/containers/migrations_documentation.ts
+++ b/packages/website/ts/containers/migrations_documentation.ts
@@ -61,6 +61,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
     dispatcher: new Dispatcher(dispatch),
 });
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/not_found.ts b/packages/website/ts/containers/not_found.ts
index f384dab89..825c021ec 100644
--- a/packages/website/ts/containers/not_found.ts
+++ b/packages/website/ts/containers/not_found.ts
@@ -22,6 +22,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
     dispatcher: new Dispatcher(dispatch),
 });
 
-export const NotFound: React.ComponentClass<NotFoundProps> = connect(mapStateToProps, mapDispatchToProps)(
-    NotFoundComponent,
-);
+export const NotFound: React.ComponentClass<NotFoundProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(NotFoundComponent);
diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts
index 4996c329a..8d83357ca 100644
--- a/packages/website/ts/containers/order_utils_documentation.ts
+++ b/packages/website/ts/containers/order_utils_documentation.ts
@@ -41,6 +41,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/order_watcher_documentation.ts b/packages/website/ts/containers/order_watcher_documentation.ts
index f3d3bada8..149ffdd2a 100644
--- a/packages/website/ts/containers/order_watcher_documentation.ts
+++ b/packages/website/ts/containers/order_watcher_documentation.ts
@@ -41,6 +41,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/portal.ts b/packages/website/ts/containers/portal.ts
index 5661e0a97..db41a3ec3 100644
--- a/packages/website/ts/containers/portal.ts
+++ b/packages/website/ts/containers/portal.ts
@@ -87,6 +87,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
     dispatcher: new Dispatcher(dispatch),
 });
 
-export const Portal: React.ComponentClass<PortalComponentProps> = connect(mapStateToProps, mapDispatchToProps)(
-    PortalComponent,
-);
+export const Portal: React.ComponentClass<PortalComponentProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(PortalComponent);
diff --git a/packages/website/ts/containers/smart_contracts_documentation.ts b/packages/website/ts/containers/smart_contracts_documentation.ts
index 7c0de5515..d94e285a7 100644
--- a/packages/website/ts/containers/smart_contracts_documentation.ts
+++ b/packages/website/ts/containers/smart_contracts_documentation.ts
@@ -91,6 +91,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts
index e899e9627..31117372b 100644
--- a/packages/website/ts/containers/sol_compiler_documentation.ts
+++ b/packages/website/ts/containers/sol_compiler_documentation.ts
@@ -45,6 +45,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/sol_coverage_documentation.ts b/packages/website/ts/containers/sol_coverage_documentation.ts
index 25d67e2d0..a9073b720 100644
--- a/packages/website/ts/containers/sol_coverage_documentation.ts
+++ b/packages/website/ts/containers/sol_coverage_documentation.ts
@@ -38,6 +38,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/sol_profiler_documentation.ts b/packages/website/ts/containers/sol_profiler_documentation.ts
index 14839831e..2f3936cae 100644
--- a/packages/website/ts/containers/sol_profiler_documentation.ts
+++ b/packages/website/ts/containers/sol_profiler_documentation.ts
@@ -38,6 +38,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/sol_trace_documentation.ts b/packages/website/ts/containers/sol_trace_documentation.ts
index c5286f1ff..9c2552438 100644
--- a/packages/website/ts/containers/sol_trace_documentation.ts
+++ b/packages/website/ts/containers/sol_trace_documentation.ts
@@ -38,6 +38,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts
index c7fb807a6..2ac0360ab 100644
--- a/packages/website/ts/containers/subproviders_documentation.ts
+++ b/packages/website/ts/containers/subproviders_documentation.ts
@@ -44,6 +44,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts
index ad286da1a..73fea90ed 100644
--- a/packages/website/ts/containers/web3_wrapper_documentation.ts
+++ b/packages/website/ts/containers/web3_wrapper_documentation.ts
@@ -40,6 +40,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/containers/wiki.ts b/packages/website/ts/containers/wiki.ts
index 069b0ae54..f4f2f6ec6 100644
--- a/packages/website/ts/containers/wiki.ts
+++ b/packages/website/ts/containers/wiki.ts
@@ -25,4 +25,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
     dispatcher: new Dispatcher(dispatch),
 });
 
-export const Wiki: React.ComponentClass<WikiProps> = connect(mapStateToProps, mapDispatchToProps)(WikiComponent);
+export const Wiki: React.ComponentClass<WikiProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(WikiComponent);
diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts
index 5da8d5e52..0e4765656 100644
--- a/packages/website/ts/containers/zero_ex_js_documentation.ts
+++ b/packages/website/ts/containers/zero_ex_js_documentation.ts
@@ -72,6 +72,7 @@ const docsInfoConfig: DocsInfoConfig = {
 };
 const mapStateToProps = getMapStateToProps(docsInfoConfig);
 
-export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
-    DocPageComponent,
-);
+export const Documentation: React.ComponentClass<DocPageProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DocPageComponent);
diff --git a/packages/website/ts/pages/about/jobs.tsx b/packages/website/ts/pages/about/jobs.tsx
index ee1aa6cef..85c25a75f 100644
--- a/packages/website/ts/pages/about/jobs.tsx
+++ b/packages/website/ts/pages/about/jobs.tsx
@@ -151,7 +151,9 @@ export class NextAboutJobs extends React.Component<NextAboutJobsProps, NextAbout
                 <Section id={OPEN_POSITIONS_HASH} isFlex={true} maxWidth="1170px" wrapWidth="100%">
                     <Column>
                         <Heading size="medium">
-                            Current<br />Openings
+                            Current
+                            <br />
+                            Openings
                         </Heading>
                     </Column>
 
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index 78376a0f2..0b725c514 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -68,10 +68,7 @@ interface SidebarContainerProps {
     className?: string;
 }
 
-const SidebarContainer =
-    styled.div <
-    SidebarContainerProps >
-    `
+const SidebarContainer = styled.div<SidebarContainerProps>`
     ${scrollableContainerStyles}
     padding-top: 27px;
     padding-left: ${SIDEBAR_PADDING}px;
@@ -87,10 +84,7 @@ interface MainContentContainerProps {
     className?: string;
 }
 
-const MainContentContainer =
-    styled.div <
-    MainContentContainerProps >
-    `
+const MainContentContainer = styled.div<MainContentContainerProps>`
     ${scrollableContainerStyles}
     padding-top: 0px;
     padding-left: 50px;
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index 8cde7224e..548db1d1d 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -36,17 +36,16 @@ const sections: FAQSection[] = [
                     <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"
-                        >
+                        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
+                        </a>
+                        , a decentralized application that facilitates trustless trading of Ethereum-based tokens
                         between known counterparties.
                     </div>
                 ),
@@ -253,7 +252,8 @@ const sections: FAQSection[] = [
                             target="_blank"
                         >
                             development roadmap
-                        </a>.
+                        </a>
+                        .
                     </div>
                 ),
             },
@@ -360,7 +360,8 @@ const sections: FAQSection[] = [
                             target="_blank"
                         >
                             here
-                        </a>.
+                        </a>
+                        .
                     </div>
                 ),
             },
@@ -380,8 +381,9 @@ const sections: FAQSection[] = [
                         Join our{' '}
                         <a href={constants.URL_ZEROEX_CHAT} target="_blank">
                             Discord
-                        </a>! As an open source project, 0x will rely on a worldwide community of passionate developers
-                        to contribute proposals, ideas and code.
+                        </a>
+                        ! As an open source project, 0x will rely on a worldwide community of passionate developers to
+                        contribute proposals, ideas and code.
                     </div>
                 ),
             },
diff --git a/packages/website/ts/pages/instant.tsx b/packages/website/ts/pages/instant.tsx
index b97bb35a4..586665d5b 100644
--- a/packages/website/ts/pages/instant.tsx
+++ b/packages/website/ts/pages/instant.tsx
@@ -100,7 +100,7 @@ export class Next0xInstant extends React.Component<Props> {
                         <div>
                             {[...Array(18)].map((item, index) => (
                                 <Card key={`card-${index}`} index={index}>
-                                    <img src={`/images/0x-instant/widget-${index % 6 + 1}.png`} />
+                                    <img src={`/images/0x-instant/widget-${(index % 6) + 1}.png`} />
                                 </Card>
                             ))}
                         </div>
@@ -189,13 +189,10 @@ const fadeUp = keyframes`
   }
 `;
 
-const ConfiguratorSection =
-    styled(Section) <
-    SectionProps >
-    `
-  @media (max-width: ${CONFIGURATOR_MIN_WIDTH_PX}px) {
-      display: none;
-  }
+const ConfiguratorSection = styled(Section)<SectionProps>`
+    @media (max-width: ${CONFIGURATOR_MIN_WIDTH_PX}px) {
+        display: none;
+    }
 `;
 
 // width = 370 * 12
@@ -233,29 +230,26 @@ const MarqueeWrap = styled.div`
     }
 `;
 
-const Card =
-    styled.div <
-    { index: number } >
-    `
-  opacity: 0;
-  flex-shrink: 0;
-  transform: translateY(10px);
-  will-change: opacity, transform;
-  animation: ${fadeUp} 0.75s ${props => `${props.index * 0.05}s`} forwards;
-
-  img {
-    height: auto;
-  }
+const Card = styled.div<{ index: number }>`
+    opacity: 0;
+    flex-shrink: 0;
+    transform: translateY(10px);
+    will-change: opacity, transform;
+    animation: ${fadeUp} 0.75s ${props => `${props.index * 0.05}s`} forwards;
 
-  @media (min-width: 768px) {
     img {
-      width: 370px;
+        height: auto;
     }
-  }
 
-  @media (max-width: 768px) {
-    img {
-      width: 300px;
+    @media (min-width: 768px) {
+        img {
+            width: 370px;
+        }
+    }
+
+    @media (max-width: 768px) {
+        img {
+            width: 300px;
+        }
     }
-  }
 `;
diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx
index e43d47119..29fce85db 100644
--- a/packages/website/ts/pages/instant/config_generator.tsx
+++ b/packages/website/ts/pages/instant/config_generator.tsx
@@ -318,13 +318,10 @@ interface CheckboxTextProps {
     isSelected?: boolean;
 }
 
-const CheckboxText =
-    styled.span <
-    CheckboxTextProps >
-    `
+const CheckboxText = styled.span<CheckboxTextProps>`
     font-size: 14px;
     line-height: 18px;
-    color: ${props => (props.isSelected ? colors.brandDark : '#666666')}
+    color: ${props => (props.isSelected ? colors.brandDark : '#666666')};
 `;
 
 const OptionalAction = styled(OptionalText)`
diff --git a/packages/website/ts/pages/why.tsx b/packages/website/ts/pages/why.tsx
index 197ce5fc9..a0ed5f95a 100644
--- a/packages/website/ts/pages/why.tsx
+++ b/packages/website/ts/pages/why.tsx
@@ -229,10 +229,7 @@ interface SectionProps {
     isNotRelative?: boolean;
 }
 
-const SectionWrap =
-    styled.div <
-    SectionProps >
-    `
+const SectionWrap = styled.div<SectionProps>`
     position: ${props => !props.isNotRelative && 'relative'};
 
     & + & {
@@ -258,10 +255,7 @@ const SectionWrap =
 interface SectionTitleProps {
     isNoBorder?: boolean;
 }
-const SectionTitle =
-    styled(Heading) <
-    SectionTitleProps >
-    `
+const SectionTitle = styled(Heading)<SectionTitleProps>`
     position: relative;
 
     ${props =>
@@ -278,7 +272,6 @@ const SectionTitle =
         }
     `}
 
-
     @media (max-width: 768px) {
         &:before {
             width: calc(100vw - 60px);