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

Update prettier to version ^1.15.3

28 files changed, 141 insertions, 243 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>
         );