eslint: Enable more react/jsx-* rules (#7592)

.eslintrc

@@ -156,6 +156,25 @@
     "react/jsx-equals-spacing": 2,
     "react/no-deprecated": 0,
     "react/default-props-match-prop-types": 2,
+    "react/jsx-closing-tag-location": 2,
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-closing-bracket-location": 2,
+    "react/jsx-first-prop-new-line": 2,
+    "react/jsx-max-props-per-line": [2, { "maximum": 1, "when": "multiline"} ],
+    "react/jsx-tag-spacing": [2, {
+      "closingSlash": "never",
+      "beforeSelfClosing": "always",
+      "afterOpening": "never"
+    }],
+    "react/jsx-wrap-multilines": [2, {
+      "declaration": "parens-new-line",
+      "assignment": "parens-new-line",
+      "return": "parens-new-line",
+      "arrow": "parens-new-line",
+      "condition": "parens-new-line",
+      "logical": "parens-new-line",
+      "prop": "parens-new-line"
+    }],
     "semi": [2, "never"],
     "semi-spacing": [2, { "before": false, "after": true }],
     "space-before-blocks": [2, "always"],

development/mock-dev.js

@@ -135,7 +135,7 @@ function startApp () {
           margin: '20px',
         }}
       >
-        <Root store={store}/>
+        <Root store={store} />
       </div>
     </div>,
     container,

ui/app/components/app/account-menu/account-menu.component.js

@@ -253,12 +253,12 @@ export default class AccountMenu extends PureComponent {
             })
             history.push(NEW_ACCOUNT_ROUTE)
           }}
-          icon={
+          icon={(
             <img
               className="account-menu__item-icon"
               src="images/plus-btn-white.svg"
             />
-          }
+          )}
           text={t('createAccount')}
         />
         <Item
@@ -273,12 +273,12 @@ export default class AccountMenu extends PureComponent {
             })
             history.push(IMPORT_ACCOUNT_ROUTE)
           }}
-          icon={
+          icon={(
             <img
               className="account-menu__item-icon"
               src="images/import-account.svg"
             />
-          }
+          )}
           text={t('importAccount')}
         />
         <Item
@@ -297,12 +297,12 @@ export default class AccountMenu extends PureComponent {
               history.push(CONNECT_HARDWARE_ROUTE)
             }
           }}
-          icon={
+          icon={(
             <img
               className="account-menu__item-icon"
               src="images/connect-icon.svg"
             />
-          }
+          )}
           text={t('connectHardwareWallet')}
         />
         <Divider />
@@ -328,12 +328,12 @@ export default class AccountMenu extends PureComponent {
               },
             })
           }}
-          icon={
+          icon={(
             <img
               className="account-menu__item-icon"
               src="images/settings.svg"
             />
-          }
+          )}
           text={t('settings')}
         />
       </Menu>

ui/app/components/app/app-header/app-header.component.js

@@ -89,7 +89,8 @@ export default class AppHeader extends PureComponent {
 
     return (
       <div
-        className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}>
+        className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}
+      >
         <div className="app-header__contents">
           <MetaFoxLogo
             unsetIconHeight

ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js

@@ -47,9 +47,11 @@ const ConfirmPageContainerSummary = props => {
         </div>
       </div>
       {
-        hideSubtitle || <div className="confirm-page-container-summary__subtitle">
+        hideSubtitle || (
+          <div className="confirm-page-container-summary__subtitle">
             { subtitleComponent || subtitle }
           </div>
+        )
       }
     </div>
   )

ui/app/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js

@@ -34,7 +34,8 @@ export default class ConfirmPageContainerHeader extends Component {
     return (
       <div className="confirm-page-container-header__row">
         { !showAccountInHeader
-          ? <div
+          ? (
+            <div
               className="confirm-page-container-header__back-button-container"
               style={{
                 visibility: showEdit ? 'initial' : 'hidden',
@@ -50,10 +51,12 @@ export default class ConfirmPageContainerHeader extends Component {
                 { this.context.t('edit') }
               </span>
             </div>
+          )
           : null
         }
         { showAccountInHeader
-          ? <div className="confirm-page-container-header__address-container">
+          ? (
+            <div className="confirm-page-container-header__address-container">
               <div className="confirm-page-container-header__address-identicon">
                 <Identicon
                   address={accountAddress}
@@ -64,6 +67,7 @@ export default class ConfirmPageContainerHeader extends Component {
                 { addressSlicer(accountAddress) }
               </div>
             </div>
+          )
           : null
         }
         { !isFullScreen && <NetworkDisplay /> }

ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js

@@ -5,23 +5,28 @@ const ConfirmPageContainerNavigation = props => {
   const { onNextTx, totalTx, positionOfCurrentTx, nextTxId, prevTxId, showNavigation, firstTx, lastTx, ofText, requestsWaitingText } = props
 
   return (
-    <div className="confirm-page-container-navigation"
+    <div
+      className="confirm-page-container-navigation"
       style={{
         display: showNavigation ? 'flex' : 'none',
       }}
     >
-      <div className="confirm-page-container-navigation__container"
+      <div
+        className="confirm-page-container-navigation__container"
         style={{
           visibility: prevTxId ? 'initial' : 'hidden',
-        }}>
+        }}
+      >
         <div
           className="confirm-page-container-navigation__arrow"
-          onClick={() => onNextTx(firstTx)}>
+          onClick={() => onNextTx(firstTx)}
+        >
           <img src="/images/double-arrow.svg" />
         </div>
         <div
           className="confirm-page-container-navigation__arrow"
-          onClick={() => onNextTx(prevTxId)}>
+          onClick={() => onNextTx(prevTxId)}
+        >
           <img src="/images/single-arrow.svg" />
         </div>
       </div>
@@ -37,15 +42,18 @@ const ConfirmPageContainerNavigation = props => {
         className="confirm-page-container-navigation__container"
         style={{
           visibility: nextTxId ? 'initial' : 'hidden',
-        }}>
+        }}
+      >
         <div
           className="confirm-page-container-navigation__arrow"
-          onClick={() => onNextTx(nextTxId)}>
+          onClick={() => onNextTx(nextTxId)}
+        >
           <img className="confirm-page-container-navigation__imageflip" src="/images/single-arrow.svg" />
         </div>
         <div
           className="confirm-page-container-navigation__arrow"
-          onClick={() => onNextTx(lastTx)}>
+          onClick={() => onNextTx(lastTx)}
+        >
           <img className="confirm-page-container-navigation__imageflip" src="/images/double-arrow.svg" />
         </div>
       </div>

ui/app/components/app/confirm-page-container/confirm-page-container.component.js

@@ -133,7 +133,8 @@ export default class ConfirmPageContainer extends Component {
         >
           { hideSenderToRecipient
             ? null
-            : <SenderToRecipient
+            : (
+              <SenderToRecipient
                 senderName={fromName}
                 senderAddress={fromAddress}
                 recipientName={toName}
@@ -142,6 +143,7 @@ export default class ConfirmPageContainer extends Component {
                 recipientNickname={toNickname}
                 assetImage={renderAssetImage ? assetImage : undefined}
               />
+            )
           }
         </ConfirmPageContainerHeader>
         {

ui/app/components/app/contact-list/recipient-group/recipient-group.component.js

@@ -15,9 +15,11 @@ export default function RecipientGroup ({ label, items, onSelect, selectedAddres
 
   return (
     <div className="send__select-recipient-wrapper__group">
-      {label && <div className="send__select-recipient-wrapper__group-label">
+      {label && (
+        <div className="send__select-recipient-wrapper__group-label">
           {label}
-      </div>}
+        </div>
+      )}
       {
         items.map(({ address, name }) => (
           <div

ui/app/components/app/dropdowns/components/network-dropdown-icon.js

@@ -25,12 +25,14 @@ function NetworkDropdownIcon (props) {
     )
     : (
       <div className={`menu-icon-circle${isSelected ? '--active' : ''}`}>
-        <div style={{
+        <div
+          style={{
             background: backgroundColor,
             border: innerBorder,
             height: `${diameter}px`,
             width: `${diameter}px`,
-        }} />
+          }}
+        />
       </div>
     )
 }

ui/app/components/app/dropdowns/tests/menu.test.js

@@ -11,7 +11,7 @@ describe('Dropdown Menu Components', () => {
 
     beforeEach(() => {
       wrapper = shallow(
-        <Menu className="Test Class" isShowing/>
+        <Menu className="Test Class" isShowing />
       )
     })
 
@@ -73,9 +73,11 @@ describe('Dropdown Menu Components', () => {
     const onClickSpy = sinon.spy()
 
     beforeEach(() => {
-      wrapper = shallow(<CloseArea
+      wrapper = shallow((
+        <CloseArea
           onClick={onClickSpy}
-      />)
+        />
+      ))
     })
 
     it('simulates click', () => {

ui/app/components/app/dropdowns/tests/network-dropdown.test.js

@@ -57,7 +57,7 @@ describe('Network Dropdown', () => {
 
     beforeEach(() => {
       wrapper = mountWithRouter(
-        <NetworkDropdown store={store}/>,
+        <NetworkDropdown store={store} />,
       )
     })
 

ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js

@@ -119,10 +119,12 @@ export default class AdvancedGasInputs extends Component {
             value={value}
             onChange={onChange}
           />
-          <div className={classnames('advanced-gas-inputs__gas-edit-row__input-arrows', {
+          <div
+            className={classnames('advanced-gas-inputs__gas-edit-row__input-arrows', {
               'advanced-gas-inputs__gas-edit-row__input--error': errorType === 'error',
               'advanced-gas-inputs__gas-edit-row__input--warning': errorType === 'warning',
-          })}>
+            })}
+          >
             <div
               className="advanced-gas-inputs__gas-edit-row__input-arrows__i-wrap"
               onClick={() => onChange({ target: { value: value + 1 } })}
@@ -159,21 +161,21 @@ export default class AdvancedGasInputs extends Component {
       errorText: gasPriceErrorText,
       errorType: gasPriceErrorType,
     } = this.gasPriceError({ insufficientBalance, customPriceIsSafe, isSpeedUp, gasPrice })
-    const gasPriceErrorComponent = gasPriceErrorType ?
+    const gasPriceErrorComponent = gasPriceErrorType ? (
       <div className={`advanced-gas-inputs__gas-edit-row__${gasPriceErrorType}-text`}>
         { gasPriceErrorText }
-      </div> :
-      null
+      </div>
+    ) : null
 
     const {
       errorText: gasLimitErrorText,
       errorType: gasLimitErrorType,
     } = this.gasLimitError({ insufficientBalance, gasLimit })
-    const gasLimitErrorComponent = gasLimitErrorType ?
+    const gasLimitErrorComponent = gasLimitErrorType ? (
       <div className={`advanced-gas-inputs__gas-edit-row__${gasLimitErrorType}-text`}>
         { gasLimitErrorText }
-      </div> :
-      null
+      </div>
+    ) : null
 
     return (
       <div className="advanced-gas-inputs__gas-edit-rows">

ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js

@@ -83,7 +83,8 @@ export default class AdvancedTabContent extends Component {
             />
           </div>
           { isEthereumNetwork
-            ? <div>
+            ? (
+              <div>
                 <div className="advanced-tab__fee-chart__title">{ t('liveGasPricePredictions') }</div>
                 {!gasEstimatesLoading
                   ? <GasPriceChart {...gasChartProps} updateCustomGasPrice={this.onGasChartUpdate} />
@@ -94,6 +95,7 @@ export default class AdvancedTabContent extends Component {
                   <span>{ t('faster') }</span>
                 </div>
               </div>
+            )
             : <div className="advanced-tab__fee-chart__title">{ t('chartOnlyAvailableEth') }</div>
           }
         </div>

ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js

@@ -18,7 +18,8 @@ describe('AdvancedTabContent Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<AdvancedTabContent
+    wrapper = shallow((
+      <AdvancedTabContent
         updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice}
         updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit}
         customModalGasPriceInHex="11"
@@ -29,7 +30,8 @@ describe('AdvancedTabContent Component', function () {
         customPriceIsSafe
         isSpeedUp={false}
         isEthereumNetwork
-    />)
+      />
+    ))
   })
 
   afterEach(() => {

ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js

@@ -21,11 +21,13 @@ export default class BasicTabContent extends Component {
         <div className="basic-tab-content__title">{ t('estimatedProcessingTimes') }</div>
         <div className="basic-tab-content__blurb">{ t('selectAHigherGasFee') }</div>
         {!gasPriceButtonGroupProps.loading
-          ? <GasPriceButtonGroup
+          ? (
+            <GasPriceButtonGroup
               className="gas-price-button-group--alt"
               showCheck
               {...gasPriceButtonGroupProps}
             />
+          )
           : <Loading />
         }
         <div className="basic-tab-content__footer-blurb">{ t('acceleratingATransaction') }</div>

ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js

@@ -38,9 +38,11 @@ describe('BasicTabContent Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<BasicTabContent
+    wrapper = shallow((
+      <BasicTabContent
         gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
-    />)
+      />
+    ))
   })
 
   describe('render', () => {

ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js

@@ -160,13 +160,14 @@ export default class GasModalPageContainer extends Component {
 
     return (
       <Tabs>
-        {tabsToRender.map(({ name, content }, i) => <Tab name={name} key={`gas-modal-tab-${i}`}>
+        {tabsToRender.map(({ name, content }, i) => (
+          <Tab name={name} key={`gas-modal-tab-${i}`}>
             <div className="gas-modal-content">
               { content }
               { this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) }
             </div>
           </Tab>
-        )}
+        ))}
       </Tabs>
     )
   }

ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js

@@ -63,7 +63,8 @@ describe('GasModalPageContainer Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<GasModalPageContainer
+    wrapper = shallow((
+      <GasModalPageContainer
         cancelAndClose={propsMethodSpies.cancelAndClose}
         onSubmit={propsMethodSpies.onSubmit}
         fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
@@ -79,7 +80,8 @@ describe('GasModalPageContainer Component', function () {
         customGasLimitInHex="mockCustomGasLimitInHex"
         insufficientBalance={false}
         disableSave={false}
-    />)
+      />
+    ))
   })
 
   afterEach(() => {
@@ -134,10 +136,12 @@ describe('GasModalPageContainer Component', function () {
 
     it('should pass the correct renderTabs property to PageContainer', () => {
       sinon.stub(GP, 'renderTabs').returns('mockTabs')
-      const renderTabsWrapperTester = shallow(<GasModalPageContainer
+      const renderTabsWrapperTester = shallow((
+        <GasModalPageContainer
           fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
           fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
-      />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+        />
+      ), { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
       const { tabsComponent } = renderTabsWrapperTester.find(PageContainer).props()
       assert.equal(tabsComponent, 'mockTabs')
       GasModalPageContainer.prototype.renderTabs.restore()
@@ -184,7 +188,8 @@ describe('GasModalPageContainer Component', function () {
     })
 
     it('should not render the basic tab if hideBasic is true', () => {
-      wrapper = shallow(<GasModalPageContainer
+      wrapper = shallow((
+        <GasModalPageContainer
           cancelAndClose={propsMethodSpies.cancelAndClose}
           onSubmit={propsMethodSpies.onSubmit}
           fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
@@ -201,7 +206,8 @@ describe('GasModalPageContainer Component', function () {
           insufficientBalance={false}
           disableSave={false}
           hideBasic
-      />)
+        />
+      ))
       const renderTabsResult = wrapper.instance().renderTabs()
 
       const renderedTabs = shallow(renderTabsResult)

ui/app/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js

@@ -49,13 +49,15 @@ export default class GasPriceButtonGroup extends Component {
     className,
     showCheck,
   }) {
-    return (<div>
+    return (
+      <div>
         { gasEstimateType && <div className={`${className}__label`}>{ this.gasEstimateTypeLabel(gasEstimateType) }</div> }
         { timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> }
         { feeInPrimaryCurrency && <div className={`${className}__primary-currency`}>{ feeInPrimaryCurrency }</div> }
         { feeInSecondaryCurrency && <div className={`${className}__secondary-currency`}>{ feeInSecondaryCurrency }</div> }
         { showCheck && <div className="button-check-wrapper"><i className="fa fa-check fa-sm" /></div> }
-    </div>)
+      </div>
+    )
   }
 
   renderButton ({
@@ -88,7 +90,8 @@ export default class GasPriceButtonGroup extends Component {
 
     return (
       !buttonDataLoading
-        ? <ButtonGroup
+        ? (
+          <ButtonGroup
             className={buttonPropsAndFlags.className}
             defaultActiveButtonIndex={defaultActiveButtonIndex}
             newActiveButtonIndex={newActiveButtonIndex}
@@ -96,6 +99,7 @@ export default class GasPriceButtonGroup extends Component {
           >
             { gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) }
           </ButtonGroup>
+        )
         : <div className={`${buttonPropsAndFlags.className}__loading-container`}>{ this.context.t('loading') }</div>
     )
   }

ui/app/components/app/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js

@@ -48,9 +48,11 @@ describe('GasPriceButtonGroup Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<GasPriceButtonGroup
+    wrapper = shallow((
+      <GasPriceButtonGroup
         {...mockGasPriceButtonGroupProps}
-    />)
+      />
+    ))
   })
 
   afterEach(() => {

ui/app/components/app/gas-customization/gas-slider/gas-slider.component.js

@@ -36,7 +36,7 @@ export default class GasSlider extends Component {
           onChange={event => onChange(event.target.value)}
         />
         <div className="gas-slider__bar">
-          <div className="gas-slider__colored"/>
+          <div className="gas-slider__colored" />
         </div>
         <div className="gas-slider__labels">
           <span>{lowLabel}</span>

ui/app/components/app/input-number.js

@@ -69,7 +69,8 @@ InputNumber.prototype.render = function InputNumber () {
       />
       <span className="gas-tooltip-input-detail">{unitLabel}</span>
       <div className="gas-tooltip-input-arrows">
-        <div className="gas-tooltip-input-arrow-wrapper"
+        <div
+          className="gas-tooltip-input-arrow-wrapper"
           onClick={() => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' }))}
         >
           <i className="fa fa-angle-up" />

ui/app/components/app/loading-network-screen/loading-network-screen.component.js

@@ -61,16 +61,19 @@ export default class LoadingNetworkScreen extends PureComponent {
   }
 
   renderLoadingScreenContent = () => {
-    return <div className="loading-overlay__screen-content">
+    return (
+      <div className="loading-overlay__screen-content">
         <Spinner color="#F7C06C" />
         {this.renderMessage()}
       </div>
+    )
   }
 
   renderErrorScreenContent = () => {
     const { showNetworkDropdown, setProviderArgs, setProviderType } = this.props
 
-    return <div className="loading-overlay__error-screen">
+    return (
+      <div className="loading-overlay__error-screen">
         <span className="loading-overlay__emoji">&#128542;</span>
         <span>{ this.context.t('somethingWentWrong') }</span>
         <div className="loading-overlay__error-buttons">
@@ -97,6 +100,7 @@ export default class LoadingNetworkScreen extends PureComponent {
           </Button>
         </div>
       </div>
+    )
   }
 
   cancelCall = () => {

ui/app/components/app/modals/account-details-modal/account-details-modal.component.js

@@ -56,7 +56,7 @@ export default class AccountDetailsModal extends Component {
           }}
         />
 
-        <div className="account-modal-divider"/>
+        <div className="account-modal-divider" />
 
         <Button
           type="secondary"
@@ -72,13 +72,15 @@ export default class AccountDetailsModal extends Component {
         </Button>
 
         {exportPrivateKeyFeatureEnabled
-          ? <Button
+          ? (
+            <Button
               type="secondary"
               className="account-modal__button"
               onClick={() => showExportPrivateKeyModal()}
             >
               {this.context.t('exportPrivateKey')}
             </Button>
+          )
           : null
         }
       </AccountModalContainer>

ui/app/components/app/modals/confirm-remove-account/confirm-remove-account.component.js

@@ -78,7 +78,9 @@ export default class ConfirmRemoveAccount extends Component {
             <a
               className="confirm-remove-account__link"
               rel="noopener noreferrer"
-              target="_blank" href="https://metamask.zendesk.com/hc/en-us/articles/360015289932">
+              target="_blank"
+              href="https://metamask.zendesk.com/hc/en-us/articles/360015289932"
+            >
               { t('learnMore') }
             </a>
           </div>

ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js

@@ -84,7 +84,8 @@ export default class DepositEtherModal extends Component {
 
     return (
       <div
-        className="page-container page-container--full-width page-container--full-height">
+        className="page-container page-container--full-width page-container--full-height"
+      >
         <div className="page-container__header">
           <div className="page-container__title">
             {this.context.t('depositEther')}

ui/app/components/app/modals/edit-approval-permission/edit-approval-permission.component.js

@@ -76,18 +76,22 @@ export default class EditApprovalPermission extends PureComponent {
               className="edit-approval-permission__edit-section__radio-button"
               onClick={() => this.setState({ selectedOptionIsUnlimited: true })}
             >
-              <div className={classnames({
+              <div
+                className={classnames({
                   'edit-approval-permission__edit-section__radio-button-outline': !selectedOptionIsUnlimited,
                   'edit-approval-permission__edit-section__radio-button-outline--selected': selectedOptionIsUnlimited,
-              })} />
+                })}
+              />
               <div className="edit-approval-permission__edit-section__radio-button-fill" />
               { selectedOptionIsUnlimited && <div className="edit-approval-permission__edit-section__radio-button-dot" />}
             </div>
             <div className="edit-approval-permission__edit-section__option-text">
-              <div className={classnames({
+              <div
+                className={classnames({
                   'edit-approval-permission__edit-section__option-label': !selectedOptionIsUnlimited,
                   'edit-approval-permission__edit-section__option-label--selected': selectedOptionIsUnlimited,
-              })}>
+                })}
+              >
                 {
                   tokenAmount < tokenBalance
                     ? t('proposedApprovalLimit')
@@ -107,18 +111,22 @@ export default class EditApprovalPermission extends PureComponent {
               className="edit-approval-permission__edit-section__radio-button"
               onClick={() => this.setState({ selectedOptionIsUnlimited: false })}
             >
-              <div className={classnames({
+              <div
+                className={classnames({
                   'edit-approval-permission__edit-section__radio-button-outline': selectedOptionIsUnlimited,
                   'edit-approval-permission__edit-section__radio-button-outline--selected': !selectedOptionIsUnlimited,
-              })} />
+                })}
+              />
               <div className="edit-approval-permission__edit-section__radio-button-fill" />
               { !selectedOptionIsUnlimited && <div className="edit-approval-permission__edit-section__radio-button-dot" />}
             </div>
             <div className="edit-approval-permission__edit-section__option-text">
-              <div className={classnames({
+              <div
+                className={classnames({
                   'edit-approval-permission__edit-section__option-label': selectedOptionIsUnlimited,
                   'edit-approval-permission__edit-section__option-label--selected': !selectedOptionIsUnlimited,
-              })}>
+                })}
+              >
                 { t('customSpendLimit') }
               </div>
               <div className="edit-approval-permission__edit-section__option-description" >

ui/app/components/app/modals/export-private-key-modal/export-private-key-modal.component.js

@@ -149,7 +149,7 @@ export default class ExportPrivateKeyModal extends Component {
           inputClass="qr-ellip-address ellip-address"
           value={checksumAddress(address)}
         />
-        <div className="account-modal-divider"/>
+        <div className="account-modal-divider" />
         <span className="modal-body-title">{this.context.t('showPrivateKeys')}</span>
         <div className="private-key-password">
           {this.renderPasswordLabel(privateKey)}

ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js

@@ -75,7 +75,8 @@ export default class MetaMetricsOptInModal extends Component {
               </div>
             </div>
             <div className="metametrics-opt-in__bottom-text">
-              This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our <a
+              This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our&nbsp;
+              <a
                 href="https://metamask.io/privacy.html"
                 target="_blank"
                 rel="noopener noreferrer"

ui/app/components/app/multiple-notifications/multiple-notifications.component.js

@@ -38,9 +38,13 @@ export default class MultipleNotifications extends PureComponent {
           className="home-notification-wrapper__i-container"
           onClick={() => this.setState({ showAll: !showAll })}
         >
-          {childrenToRender.length > 1 ? <i className={classnames('fa fa-sm fa-sort-amount-asc', {
+          {childrenToRender.length > 1 ? (
+            <i
+              className={classnames('fa fa-sm fa-sort-amount-asc', {
                 'flipped': !showAll,
-          })} /> : null}
+              })}
+            />
+          ) : null}
         </div>
       </div>
     )

ui/app/components/app/network-display/network-display.component.js

@@ -38,13 +38,15 @@ export default class NetworkDisplay extends Component {
 
     return networkClass
       ? <div className={`network-display__icon network-display__icon--${networkClass}`} />
-      : <div
+      : (
+        <div
           className="i fa fa-question-circle fa-med"
           style={{
             margin: '0 4px',
             color: 'rgb(125, 128, 130)',
           }}
         />
+      )
   }
 
   render () {
@@ -61,13 +63,15 @@ export default class NetworkDisplay extends Component {
         {
           networkClass
             ? <div className={`network-display__icon network-display__icon--${networkClass}`} />
-            : <div
+            : (
+              <div
                 className="i fa fa-question-circle fa-med"
                 style={{
                   margin: '0 4px',
                   color: 'rgb(125, 128, 130)',
                 }}
               />
+            )
         }
         <div className="network-display__name">
           { type === 'rpc' && nickname ? nickname : this.context.t(type) }

ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js

@@ -68,7 +68,7 @@ export default class ProviderPageContainerContent extends PureComponent {
           <h1>{t('providerRequest', [title])}</h1>
           <p>
             {t('providerRequestInfo')}
-            <br/>
+            <br />
             <a
               href="https://medium.com/metamask/introducing-privacy-mode-42549d4870fa"
               target="_blank"

ui/app/components/app/selected-account/tests/selected-account-component.test.js

@@ -5,10 +5,12 @@ import SelectedAccount from '../selected-account.component'
 
 describe('SelectedAccount Component', () => {
   it('should render checksummed address', () => {
-    const wrapper = render(<SelectedAccount
+    const wrapper = render((
+      <SelectedAccount
         selectedAddress="0x1b82543566f41a7db9a9a75fc933c340ffb55c9d"
         selectedIdentity={{ name: 'testName' }}
-    />, { context: { t: () => {}}})
+      />
+    ), { context: { t: () => {}}})
     // Checksummed version of address is displayed
     assert.equal(wrapper.find('.selected-account__address').text(), '0x1B82...5C9D')
     assert.equal(wrapper.find('.selected-account__name').text(), 'testName')

ui/app/components/app/sidebars/sidebar.component.js

@@ -20,13 +20,15 @@ export default class Sidebar extends Component {
   renderOverlay () {
     const { onOverlayClose } = this.props
 
-    return <div
+    return (
+      <div
         className="sidebar-overlay"
         onClick={() => {
           onOverlayClose && onOverlayClose()
           this.props.hideSidebar()
-      }
-      } />
+        }}
+      />
+    )
   }
 
   renderSidebarContent () {

ui/app/components/app/sidebars/tests/sidebars-component.test.js

@@ -16,12 +16,14 @@ describe('Sidebar Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<Sidebar
+    wrapper = shallow((
+      <Sidebar
         sidebarOpen={false}
         hideSidebar={propsMethodSpies.hideSidebar}
         transitionName="someTransition"
         type="wallet-view"
-    />)
+      />
+    ))
   })
 
   afterEach(() => {

ui/app/components/app/signature-request-original/signature-request-original.component.js

@@ -171,22 +171,26 @@ export default class SignatureRequestOriginal extends Component {
       <div className="request-signature__typed-container">
         {
           domain
-            ? <div>
+            ? (
+              <div>
                 <h1>
                   Domain
                 </h1>
                 <ObjectInspector data={domain} expandLevel={1} name="domain" />
               </div>
+            )
             : ''
         }
         {
           message
-            ? <div>
+            ? (
+              <div>
                 <h1>
                   Message
                 </h1>
                 <ObjectInspector data={message} expandLevel={1} name="message" />
               </div>
+            )
             : ''
         }
       </div>
@@ -221,7 +225,8 @@ export default class SignatureRequestOriginal extends Component {
           { notice }
           {
             type === 'eth_sign'
-              ? <span
+              ? (
+                <span
                   className="request-signature__help-link"
                   onClick={() => {
                     global.platform.openWindow({
@@ -231,6 +236,7 @@ export default class SignatureRequestOriginal extends Component {
                 >
                   { this.context.t('learnMore') }
                 </span>
+              )
               : null
           }
         </div>

ui/app/components/app/signature-request/signature-request-header/signature-request-header.component.js

@@ -14,10 +14,12 @@ export default class SignatureRequestHeader extends PureComponent {
     return (
       <div className="signature-request-header">
         <div className="signature-request-header--account">
-          {selectedAccount && <AccountListItem
+          {selectedAccount && (
+            <AccountListItem
               displayBalance={false}
               account={selectedAccount}
-          />}
+            />
+          )}
           {name}
         </div>
         <div className="signature-request-header--network">

ui/app/components/app/signature-request/tests/signature-request.test.js

@@ -8,11 +8,16 @@ describe('Signature Request Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SignatureRequest txData={{
+    wrapper = shallow((
+      <SignatureRequest
+        txData={{
           msgParams: {
             data: '{"message": {"from": {"name": "hello"}}}',
             from: '0x123456789abcdef',
-      } }} />)
+          },
+        }}
+      />
+    ))
   })
 
   describe('render', () => {

ui/app/components/app/token-cell/token-cell.component.js

@@ -107,7 +107,8 @@ export default class TokenCell extends Component {
               </div>
             )}
           </div>
-          <i className="fa fa-ellipsis-h fa-lg token-list-item__ellipsis cursor-pointer"
+          <i
+            className="fa fa-ellipsis-h fa-lg token-list-item__ellipsis cursor-pointer"
             onClick={(e) => {
               e.stopPropagation()
               this.setState({ tokenMenuOpen: true })

ui/app/components/app/token-list.js

@@ -66,12 +66,16 @@ TokenList.prototype.render = function TokenList () {
   if (error) {
     log.error(error)
     return (
-      <div className="hotFix" style={{
+      <div
+        className="hotFix"
+        style={{
           padding: '80px',
-      }}>
+        }}
+      >
         {this.context.t('troubleTokenBalances')}
         <span
-          className="hotFix" style={{
+          className="hotFix"
+          style={{
             color: 'rgba(247, 134, 28, 1)',
             cursor: 'pointer',
           }}

ui/app/components/app/transaction-action/tests/transaction-action.component.test.js

@@ -35,11 +35,13 @@ describe('TransactionAction Component', () => {
         },
       }
 
-      const wrapper = shallow(<TransactionAction
+      const wrapper = shallow((
+        <TransactionAction
           methodData={methodData}
           transaction={transaction}
           className="transaction-action"
-      />, { context: { t }})
+        />
+      ), { context: { t }})
 
       assert.equal(wrapper.find('.transaction-action').length, 1)
       wrapper.setState({ transactionAction: 'sentEther' })

ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js

@@ -50,10 +50,12 @@ export default class TransactionBreakdown extends PureComponent {
           className="transaction-breakdown__row-title"
         >
           {typeof gas !== 'undefined'
-            ? <HexToDecimal
+            ? (
+              <HexToDecimal
                 className="transaction-breakdown__value"
                 value={gas}
               />
+            )
             : '?'
           }
         </TransactionBreakdownRow>
@@ -72,13 +74,15 @@ export default class TransactionBreakdown extends PureComponent {
         }
         <TransactionBreakdownRow title={t('gasPrice')}>
           {typeof gasPrice !== 'undefined'
-            ? <CurrencyDisplay
+            ? (
+              <CurrencyDisplay
                 className="transaction-breakdown__value"
                 currency={nativeCurrency}
                 denomination={GWEI}
                 value={gasPrice}
                 hideLabel
               />
+            )
             : '?'
           }
         </TransactionBreakdownRow>

ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js

@@ -191,7 +191,8 @@ export default class TransactionListItemDetails extends PureComponent {
               </Button>
             </Tooltip>
             {
-              showRetry && <Tooltip title={blockExplorerUrl ? t('viewOnCustomBlockExplorer', [blockExplorerUrl]) : t('retryTransaction')}>
+              showRetry && (
+                <Tooltip title={blockExplorerUrl ? t('viewOnCustomBlockExplorer', [blockExplorerUrl]) : t('retryTransaction')}>
                   <Button
                     type="raised"
                     onClick={this.handleRetry}
@@ -200,6 +201,7 @@ export default class TransactionListItemDetails extends PureComponent {
                     <i className="fa fa-refresh"></i>
                   </Button>
                 </Tooltip>
+              )
             }
           </div>
         </div>

ui/app/components/app/transaction-list-item/transaction-list-item.component.js

@@ -236,18 +236,22 @@ export default class TransactionListItem extends PureComponent {
             )}
           />
           { showEstimatedTime
-            ? <TransactionTimeRemaining
+            ? (
+              <TransactionTimeRemaining
                 className="transaction-list-item__estimated-time"
                 transaction={ primaryTransaction }
               />
+            )
             : null
           }
           { this.renderPrimaryCurrency() }
           { this.renderSecondaryCurrency() }
         </div>
-        <div className={classnames('transaction-list-item__expander', {
+        <div
+          className={classnames('transaction-list-item__expander', {
             'transaction-list-item__expander--show': showTransactionDetails,
-        })}>
+          })}
+        >
           {
             showTransactionDetails && (
               <div className="transaction-list-item__details-container">

ui/app/components/app/transaction-view-balance/tests/token-view-balance.component.test.js

@@ -25,14 +25,16 @@ describe('TransactionViewBalance Component', () => {
   })
 
   it('should render ETH balance properly', () => {
-    const wrapper = shallow(<TransactionViewBalance
+    const wrapper = shallow((
+      <TransactionViewBalance
         showDepositModal={propsMethodSpies.showDepositModal}
         history={historySpies}
         network="3"
         ethBalance={123}
         fiatBalance={456}
         currentCurrency="usd"
-    />, { context: { t, metricsEvent } })
+      />
+    ), { context: { t, metricsEvent } })
 
     assert.equal(wrapper.find('.transaction-view-balance').length, 1)
     assert.equal(wrapper.find('.transaction-view-balance__button').length, 2)
@@ -55,7 +57,8 @@ describe('TransactionViewBalance Component', () => {
       symbol: 'ABC',
     }
 
-    const wrapper = shallow(<TransactionViewBalance
+    const wrapper = shallow((
+      <TransactionViewBalance
         showDepositModal={propsMethodSpies.showDepositModal}
         history={historySpies}
         network="3"
@@ -63,7 +66,8 @@ describe('TransactionViewBalance Component', () => {
         fiatBalance={456}
         currentCurrency="usd"
         selectedToken={token}
-    />, { context: { t } })
+      />
+    ), { context: { t } })
 
     assert.equal(wrapper.find('.transaction-view-balance').length, 1)
     assert.equal(wrapper.find('.transaction-view-balance__button').length, 1)

ui/app/components/app/wallet-view/wallet-view.component.js

@@ -44,9 +44,11 @@ export default class WalletView extends Component {
     } = this.props
 
     return (
-      <div className={classnames('flex-column', 'wallet-balance-wrapper', {
+      <div
+        className={classnames('flex-column', 'wallet-balance-wrapper', {
           'wallet-balance-wrapper--active': Boolean(selectedTokenAddress),
-      })}>
+        })}
+      >
         <div
           className="wallet-balance"
           onClick={() => {

ui/app/components/ui/button-group/button-group.stories.js

@@ -6,7 +6,7 @@ import Button from '../button'
 import { text, boolean } from '@storybook/addon-knobs/react'
 
 storiesOf('ButtonGroup', module)
-  .add('with Buttons', () =>
+  .add('with Buttons', () => (
     <ButtonGroup
       style={{ width: '300px' }}
       disabled={boolean('Disabled', false)}
@@ -28,8 +28,8 @@ storiesOf('ButtonGroup', module)
         {text('Button3', 'Fast')}
       </Button>
     </ButtonGroup>
-  )
-  .add('with a disabled Button', () =>
+  ))
+  .add('with a disabled Button', () => (
     <ButtonGroup
       style={{ width: '300px' }}
       disabled={boolean('Disabled', false)}
@@ -46,4 +46,4 @@ storiesOf('ButtonGroup', module)
         {text('Button2', 'Disabled')}
       </Button>
     </ButtonGroup>
-  )
+  ))

ui/app/components/ui/button-group/tests/button-group-component.test.js

@@ -21,12 +21,16 @@ describe('ButtonGroup Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<ButtonGroup
+    wrapper = shallow((
+      <ButtonGroup
         defaultActiveButtonIndex={1}
         disabled={false}
         className="someClassName"
         style={ { color: 'red' } }
-    >{mockButtons}</ButtonGroup>)
+      >
+        {mockButtons}
+      </ButtonGroup>
+    ))
   })
 
   afterEach(() => {

ui/app/components/ui/button/button.stories.js

@@ -6,7 +6,7 @@ import { text, boolean } from '@storybook/addon-knobs/react'
 
 // ', 'secondary', 'default', 'warning', 'danger', 'danger-primary', 'link'], 'primary')}
 storiesOf('Button', module)
-  .add('Button - Primary', () =>
+  .add('Button - Primary', () => (
     <Button
       onClick={action('clicked')}
       type="primary"
@@ -14,8 +14,8 @@ storiesOf('Button', module)
     >
       {text('text', 'Click me')}
     </Button>
-  )
-  .add('Button - Secondary', () =>
+  ))
+  .add('Button - Secondary', () => (
     <Button
       onClick={action('clicked')}
       type="secondary"
@@ -23,8 +23,8 @@ storiesOf('Button', module)
     >
       {text('text', 'Click me')}
     </Button>
-  )
-  .add('Button - Default', () =>
+  ))
+  .add('Button - Default', () => (
     <Button
       onClick={action('clicked')}
       type="default"
@@ -32,8 +32,8 @@ storiesOf('Button', module)
     >
       {text('text', 'Click me')}
     </Button>
-  )
-  .add('Button - Warning', () =>
+  ))
+  .add('Button - Warning', () => (
     <Button
       onClick={action('clicked')}
       type="warning"
@@ -41,8 +41,8 @@ storiesOf('Button', module)
     >
       {text('text', 'Click me')}
     </Button>
-  )
-  .add('Button - Danger', () =>
+  ))
+  .add('Button - Danger', () => (
     <Button
       onClick={action('clicked')}
       type="danger"
@@ -50,8 +50,8 @@ storiesOf('Button', module)
     >
       {text('text', 'Click me')}
     </Button>
-  )
-  .add('Button - Danger Primary', () =>
+  ))
+  .add('Button - Danger Primary', () => (
     <Button
       onClick={action('clicked')}
       type="danger-primary"
@@ -59,8 +59,8 @@ storiesOf('Button', module)
     >
       {text('text', 'Click me')}
     </Button>
-  )
-  .add('Button - Link', () =>
+  ))
+  .add('Button - Link', () => (
     <Button
       onClick={action('clicked')}
       type="link"
@@ -68,4 +68,4 @@ storiesOf('Button', module)
     >
       {text('text', 'Click me')}
     </Button>
-  )
+  ))

ui/app/components/ui/currency-display/tests/currency-display.component.test.js

@@ -5,21 +5,25 @@ import CurrencyDisplay from '../currency-display.component'
 
 describe('CurrencyDisplay Component', () => {
   it('should render text with a className', () => {
-    const wrapper = shallow(<CurrencyDisplay
+    const wrapper = shallow((
+      <CurrencyDisplay
         displayValue="$123.45"
         className="currency-display"
-    />)
+      />
+    ))
 
     assert.ok(wrapper.hasClass('currency-display'))
     assert.equal(wrapper.text(), '$123.45')
   })
 
   it('should render text with a prefix', () => {
-    const wrapper = shallow(<CurrencyDisplay
+    const wrapper = shallow((
+      <CurrencyDisplay
         displayValue="$123.45"
         className="currency-display"
         prefix="-"
-    />)
+      />
+    ))
 
     assert.ok(wrapper.hasClass('currency-display'))
     assert.equal(wrapper.text(), '-$123.45')

ui/app/components/ui/eth-balance/eth-balance.component.js

@@ -67,29 +67,36 @@ export default class EthBalance extends Component {
     return (
       <TooltipComponent {...containerProps}>
         <div className="flex-column">
-          <div className="flex-row" style={{
+          <div
+            className="flex-row"
+            style={{
               alignItems: 'flex-end',
               lineHeight: lineHeight || '13px',
               fontFamily: fontFamily || 'Montserrat Light',
               textRendering: 'geometricPrecision',
-          }}>
-            <div style={{
+            }}
+          >
+            <div
+              style={{
                 width: '100%',
                 textAlign: 'right',
                 fontSize: fontSize || 'inherit',
                 color: color || 'inherit',
-            }}>
+              }}
+            >
               {
                 incoming
                   ? `+${balanceToRender}`
                   : balanceToRender
               }
             </div>
-            <div style={{
+            <div
+              style={{
                 color: color || '#AEAEAE',
                 fontSize: fontSize || '12px',
                 marginLeft: '5px',
-            }}>
+              }}
+            >
               {label}
             </div>
           </div>
@@ -120,7 +127,8 @@ export default class EthBalance extends Component {
         <div style={{
           display: 'inline',
           width,
-        }}>
+        }}
+        >
           {this.renderBalance(formattedValue)}
         </div>
       </div>

ui/app/components/ui/hex-to-decimal/tests/hex-to-decimal.component.test.js

@@ -5,20 +5,24 @@ import HexToDecimal from '../hex-to-decimal.component'
 
 describe('HexToDecimal Component', () => {
   it('should render a prefixed hex as a decimal with a className', () => {
-    const wrapper = shallow(<HexToDecimal
+    const wrapper = shallow((
+      <HexToDecimal
         value="0x3039"
         className="hex-to-decimal"
-    />)
+      />
+    ))
 
     assert.ok(wrapper.hasClass('hex-to-decimal'))
     assert.equal(wrapper.text(), '12345')
   })
 
   it('should render an unprefixed hex as a decimal with a className', () => {
-    const wrapper = shallow(<HexToDecimal
+    const wrapper = shallow((
+      <HexToDecimal
         value="1A85"
         className="hex-to-decimal"
-    />)
+      />
+    ))
 
     assert.ok(wrapper.hasClass('hex-to-decimal'))
     assert.equal(wrapper.text(), '6789')

ui/app/components/ui/identicon/tests/identicon.component.test.js

@@ -18,7 +18,7 @@ describe('Identicon', () => {
 
   it('renders default eth_logo identicon with no props', () => {
     const wrapper = mount(
-      <Identicon store={store}/>
+      <Identicon store={store} />
     )
 
     assert.equal(wrapper.find('img.balance-icon').prop('src'), './images/eth_logo.svg')

ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js

@@ -37,14 +37,16 @@ export default class PageContainerFooter extends Component {
       <div className="page-container__footer">
 
         <header>
-          {!hideCancel && <Button
+          {!hideCancel && (
+            <Button
               type={cancelButtonType || 'default'}
               large
               className="page-container__footer-button"
               onClick={e => onCancel(e)}
             >
               { cancelText || this.context.t('cancel') }
-          </Button>}
+            </Button>
+          )}
 
           <Button
             type={submitButtonType || 'secondary'}

ui/app/components/ui/page-container/page-container-footer/tests/page-container-footer.component.test.js

@@ -11,14 +11,16 @@ describe('Page Footer', () => {
   const onSubmit = sinon.spy()
 
   beforeEach(() => {
-    wrapper = shallow(<PageFooter
+    wrapper = shallow((
+      <PageFooter
         onCancel={onCancel}
         onSubmit={onSubmit}
         cancelText="Cancel"
         submitText="Submit"
         disabled={false}
         submitButtonType="Test Type"
-    />)
+      />
+    ))
   })
 
   it('renders page container footer', () => {

ui/app/components/ui/page-container/page-container-header/page-container-header.component.js

@@ -55,24 +55,30 @@ export default class PageContainerHeader extends Component {
         { this.renderHeaderRow() }
 
         {
-          title && <div className="page-container__title">
+          title && (
+            <div className="page-container__title">
               { title }
             </div>
+          )
         }
 
         {
-          subtitle && <div className="page-container__subtitle">
+          subtitle && (
+            <div className="page-container__subtitle">
               { subtitle }
             </div>
+          )
         }
 
         {
           onClose && headerCloseText
             ? <div className="page-container__header-close-text" onClick={() => onClose()}>{ headerCloseText }</div>
-            : onClose && <div
+            : onClose && (
+              <div
                 className="page-container__header-close"
                 onClick={() => onClose()}
               />
+            )
         }
 
         { this.renderTabs() }

ui/app/components/ui/page-container/page-container-header/tests/page-container-header.component.test.js

@@ -12,7 +12,8 @@ describe('Page Container Header', () => {
     onBackButtonClick = sinon.spy()
     onClose = sinon.spy()
 
-    wrapper = shallow(<PageContainerHeader
+    wrapper = shallow((
+      <PageContainerHeader
         showBackButton
         onBackButtonClick={onBackButtonClick}
         backButtonStyles={style}
@@ -20,7 +21,8 @@ describe('Page Container Header', () => {
         subtitle="Test Subtitle"
         tabs="Test Tab"
         onClose={onClose}
-    />)
+      />
+    ))
   })
 
   describe('Render Header Row', () => {

ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js

@@ -67,7 +67,7 @@ export default class SenderToRecipient extends PureComponent {
               ? <p>{t('copyAddress')}</p>
               : (
                 <p>
-                  {addressSlicer(checksummedSenderAddress)}<br/>
+                  {addressSlicer(checksummedSenderAddress)}<br />
                   {t('copyAddress')}
                 </p>
               )
@@ -127,7 +127,7 @@ export default class SenderToRecipient extends PureComponent {
                 ? <p>{t('copyAddress')}</p>
                 : (
                   <p>
-                    {addressSlicer(checksummedRecipientAddress)}<br/>
+                    {addressSlicer(checksummedRecipientAddress)}<br />
                     {t('copyAddress')}
                   </p>
                 )

ui/app/components/ui/text-field/text-field.stories.js

@@ -3,51 +3,51 @@ import { storiesOf } from '@storybook/react'
 import TextField from '.'
 
 storiesOf('TextField', module)
-  .add('text', () =>
+  .add('text', () => (
     <TextField
       label="Text"
       type="text"
     />
-  )
-  .add('password', () =>
+  ))
+  .add('password', () => (
     <TextField
       label="Password"
       type="password"
     />
-  )
-  .add('error', () =>
+  ))
+  .add('error', () => (
     <TextField
       type="text"
       label="Name"
       error="Invalid value"
     />
-  )
-  .add('Mascara text', () =>
+  ))
+  .add('Mascara text', () => (
     <TextField
       label="Text"
       type="text"
       largeLabel
     />
-  )
-  .add('Material text', () =>
+  ))
+  .add('Material text', () => (
     <TextField
       label="Text"
       type="text"
       material
     />
-  )
-  .add('Material password', () =>
+  ))
+  .add('Material password', () => (
     <TextField
       label="Password"
       type="password"
       material
     />
-  )
-  .add('Material error', () =>
+  ))
+  .add('Material error', () => (
     <TextField
       type="text"
       label="Name"
       error="Invalid value"
       material
     />
-  )
+  ))

ui/app/pages/add-token/token-list/token-list.component.js

@@ -44,7 +44,8 @@ export default class InfoBox extends Component {
                     >
                       <div
                         className="token-list__token-icon"
-                        style={{ backgroundImage: logo && `url(images/contract/${logo})` }}>
+                        style={{ backgroundImage: logo && `url(images/contract/${logo})` }}
+                      >
                       </div>
                       <div className="token-list__token-data">
                         <span className="token-list__token-name">{ `${name} (${symbol})` }</span>

ui/app/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js

@@ -46,17 +46,23 @@ export default class ConfirmApproveContent extends Component {
     noBorder,
   }) {
     return (
-      <div className={classnames({
+      <div
+        className={classnames({
           'confirm-approve-content__card': !noBorder,
           'confirm-approve-content__card--no-border': noBorder,
-      })}>
+        })}
+      >
         <div className="confirm-approve-content__card-header">
           <div className="confirm-approve-content__card-header__symbol">{ symbol }</div>
           <div className="confirm-approve-content__card-header__title">{ title }</div>
-          { showEdit && <div
+          {showEdit && (
+            <div
               className="confirm-approve-content__small-blue-text cursor-pointer"
               onClick={() => onEditClick()}
-          >Edit</div> }
+            >
+              Edit
+            </div>
+          )}
         </div>
         <div className="confirm-approve-content__card-content">
           { content }
@@ -137,9 +143,11 @@ export default class ConfirmApproveContent extends Component {
     const { showFullTxDetails } = this.state
 
     return (
-      <div className={classnames('confirm-approve-content', {
+      <div
+        className={classnames('confirm-approve-content', {
           'confirm-approve-content--full': showFullTxDetails,
-      })}>
+        })}
+      >
         <div className="confirm-approve-content__identicon-wrapper">
           <Identicon
             className="confirm-approve-content__identicon"
@@ -172,7 +180,8 @@ export default class ConfirmApproveContent extends Component {
             onEditClick: showCustomizeGasModal,
             content: this.renderTransactionDetailsContent(),
             noBorder: !showFullTxDetails,
-            footer: <div
+            footer: (
+              <div
                 className="confirm-approve-content__view-full-tx-button-wrapper"
                 onClick={() => this.setState({ showFullTxDetails: !this.state.showFullTxDetails })}
               >
@@ -183,9 +192,11 @@ export default class ConfirmApproveContent extends Component {
                   <i className={classnames({
                     'fa fa-caret-up': showFullTxDetails,
                     'fa fa-caret-down': !showFullTxDetails,
-                })} />
+                  })}
+                  />
+                </div>
               </div>
-            </div>,
+            ),
           })}
         </div>
 

ui/app/pages/confirm-approve/confirm-approve.component.js

@@ -81,7 +81,8 @@ export default class ConfirmApprove extends Component {
         identiconAddress={tokenAddress}
         showAccountInHeader
         title={tokensText}
-        contentComponent={<ConfirmApproveContent
+        contentComponent={(
+          <ConfirmApproveContent
             siteImage={siteImage}
             tokenAddress={tokenAddress}
             setCustomAmount={(newAmount) => {
@@ -99,7 +100,8 @@ export default class ConfirmApprove extends Component {
             currentCurrency={currentCurrency}
             ethTransactionTotal={ethTransactionTotal}
             fiatTransactionTotal={fiatTransactionTotal}
-        />}
+          />
+        )}
         hideSenderToRecipient
         customTxParamsData={customPermissionAmount
           ? getCustomTxParamsData(data, { customPermissionAmount, tokenAmount, decimals })

ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -255,7 +255,8 @@ export default class ConfirmTransactionBase extends Component {
               secondaryText={hideFiatConversion ? this.context.t('noConversionRateAvailable') : ''}
             />
             {advancedInlineGasShown
-              ? <AdvancedGasInputs
+              ? (
+                <AdvancedGasInputs
                   updateCustomGasPrice={newGasPrice => updateGasAndCalculate({ ...customGas, gasPrice: newGasPrice })}
                   updateCustomGasLimit={newGasLimit => updateGasAndCalculate({ ...customGas, gasLimit: newGasLimit })}
                   customGasPrice={customGas.gasPrice}
@@ -264,6 +265,7 @@ export default class ConfirmTransactionBase extends Component {
                   customPriceIsSafe
                   isSpeedUp={false}
                 />
+              )
               : null
             }
           </div>
@@ -278,7 +280,8 @@ export default class ConfirmTransactionBase extends Component {
               primaryValueTextColor="#2f9ae0"
             />
           </div>
-          {useNonceField ? <div>
+          {useNonceField ? (
+            <div>
               <div className="confirm-detail-row">
                 <div className="confirm-detail-row__label">
                   { this.context.t('nonceFieldHeading') }
@@ -302,7 +305,8 @@ export default class ConfirmTransactionBase extends Component {
                   />
                 </div>
               </div>
-          </div> : null}
+            </div>
+          ) : null}
         </div>
       )
     )

ui/app/pages/create-account/connect-hardware/connect-screen.js

@@ -176,7 +176,8 @@ class ConnectScreen extends Component {
         className="hw-tutorial"
         ref={node => {
           this.referenceNode = node
-        }}>
+        }}
+      >
         {steps.map((step, index) => (
           <div className="hw-connect" key={index}>
             <h3 className="hw-connect__title">{step.title}</h3>

ui/app/pages/create-account/create-account.component.js

@@ -23,15 +23,15 @@ export default class CreateAccountPage extends Component {
 
     return (
       <div className="new-account__tabs">
-        <div className={getClassNames(NEW_ACCOUNT_ROUTE)} onClick={() => history.push(NEW_ACCOUNT_ROUTE)}>{
-          this.context.t('create')
-        }</div>
-        <div className={getClassNames(IMPORT_ACCOUNT_ROUTE)} onClick={() => history.push(IMPORT_ACCOUNT_ROUTE)}>{
-          this.context.t('import')
-        }</div>
-        <div className={getClassNames(CONNECT_HARDWARE_ROUTE)} onClick={() => history.push(CONNECT_HARDWARE_ROUTE)}>{
-          this.context.t('connect')
-        }</div>
+        <div className={getClassNames(NEW_ACCOUNT_ROUTE)} onClick={() => history.push(NEW_ACCOUNT_ROUTE)}>
+          {this.context.t('create')}
+        </div>
+        <div className={getClassNames(IMPORT_ACCOUNT_ROUTE)} onClick={() => history.push(IMPORT_ACCOUNT_ROUTE)}>
+          {this.context.t('import')}
+        </div>
+        <div className={getClassNames(CONNECT_HARDWARE_ROUTE)} onClick={() => history.push(CONNECT_HARDWARE_ROUTE)}>
+          {this.context.t('connect')}
+        </div>
       </div>
     )
   }

ui/app/pages/create-account/import-account/index.js

@@ -46,7 +46,8 @@ AccountImportSubview.prototype.render = function () {
             global.platform.openWindow({
               url: 'https://metamask.zendesk.com/hc/en-us/articles/360015289932',
             })
-          }}>
+          }}
+        >
           {this.context.t('here')}
         </span>
       </div>

ui/app/pages/create-account/new-account.component.js

@@ -49,7 +49,8 @@ export default class NewAccountCreateForm extends Component {
           {this.context.t('accountName')}
         </div>
         <div className="new-account-create-form__input-wrapper">
-          <input className="new-account-create-form__input"
+          <input
+            className="new-account-create-form__input"
             value={newAccountName}
             placeholder={defaultAccountName}
             onChange={event => this.setState({ newAccountName: event.target.value })}
@@ -61,13 +62,17 @@ export default class NewAccountCreateForm extends Component {
             large
             className="new-account-create-form__button"
             onClick={() => history.push(DEFAULT_ROUTE)}
-          >{this.context.t('cancel')}</Button>
+          >
+            {this.context.t('cancel')}
+          </Button>
           <Button
             type="secondary"
             large
             className="new-account-create-form__button"
             onClick={createClick}
-          >{this.context.t('create')}</Button>
+          >
+            {this.context.t('create')}
+          </Button>
         </div>
       </div>
     )

ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js

@@ -283,7 +283,8 @@ export default class ImportWithSeedPhrase extends PureComponent {
             {termsChecked ? <i className="fa fa-check fa-2x" /> : null}
           </div>
           <span id="ftf-chk1-label" className="first-time-flow__checkbox-label">
-            I have read and agree to the <a
+            I have read and agree to the&nbsp;
+            <a
               href="https://metamask.io/terms.html"
               target="_blank"
               rel="noopener noreferrer"

ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js

@@ -204,7 +204,8 @@ export default class NewAccount extends PureComponent {
               {termsChecked ? <i className="fa fa-check fa-2x" /> : null}
             </div>
             <span id="ftf-chk1-label" className="first-time-flow__checkbox-label">
-              I have read and agree to the <a
+              I have read and agree to the&nbsp;
+              <a
                 href="https://metamask.io/terms.html"
                 target="_blank"
                 rel="noopener noreferrer"

ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js

@@ -73,7 +73,8 @@ export default class EndOfFlowScreen extends PureComponent {
           { '• ' + t('endOfFlowMessage7') }
         </div>
         <div className="first-time-flow__text-block end-of-flow__text-4">
-          { '*' + t('endOfFlowMessage8') } <a
+          { '*' + t('endOfFlowMessage8') }&nbsp;
+          <a
             href="https://metamask.zendesk.com/hc/en-us/articles/360015489591-Basic-Safety-Tips"
             target="_blank"
             rel="noopener noreferrer"
@@ -91,11 +92,11 @@ export default class EndOfFlowScreen extends PureComponent {
           { t('endOfFlowMessage10') }
         </Button>
         {
-          onboardingInitiator ?
+          onboardingInitiator ? (
             <Snackbar
               content={t('onboardingReturnNotice', [t('endOfFlowMessage10'), onboardingInitiator.location])}
-            /> :
-            null
+            />
+          ) : null
         }
       </div>
     )

ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js

@@ -142,7 +142,8 @@ export default class MetaMetricsOptIn extends Component {
               disabled={false}
             />
             <div className="metametrics-opt-in__bottom-text">
-              This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our <a
+              This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our&nbsp;
+              <a
                 href="https://metamask.io/privacy.html"
                 target="_blank"
                 rel="noopener noreferrer"

ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js

@@ -78,10 +78,12 @@ export default class RevealSeedPhrase extends PureComponent {
 
     return (
       <div className="reveal-seed-phrase__secret">
-        <div className={classnames(
-          'reveal-seed-phrase__secret-words notranslate',
-          { 'reveal-seed-phrase__secret-words--hidden': !isShowingSeedPhrase }
-        )}>
+        <div
+          className={classnames(
+            'reveal-seed-phrase__secret-words notranslate', {
+              'reveal-seed-phrase__secret-words--hidden': !isShowingSeedPhrase,
+            })}
+        >
           { seedPhrase }
         </div>
         {
@@ -150,7 +152,8 @@ export default class RevealSeedPhrase extends PureComponent {
             <div className="first-time-flow__text-block">
               <a
                 className="reveal-seed-phrase__export-text"
-                onClick={this.handleExport}>
+                onClick={this.handleExport}
+              >
                 { t('downloadSecretBackup') }
               </a>
             </div>
@@ -175,9 +178,11 @@ export default class RevealSeedPhrase extends PureComponent {
         </div>
         {
           onboardingInitiator ?
+            (
               <Snackbar
                 content={t('onboardingReturnNotice', [t('remindMeLater'), onboardingInitiator.location])}
-            /> :
+              />
+            ) :
             null
         }
       </div>

ui/app/pages/home/home.component.js

@@ -124,7 +124,8 @@ export default class Home extends PureComponent {
                 <MultipleNotifications>
                   {
                     showPrivacyModeNotification
-                      ? <HomeNotification
+                      ? (
+                        <HomeNotification
                           descriptionText={t('privacyModeDefault')}
                           acceptText={t('learnMore')}
                           onAccept={() => {
@@ -137,11 +138,13 @@ export default class Home extends PureComponent {
                           }}
                           key="home-privacyModeDefault"
                         />
+                      )
                       : null
                   }
                   {
                     shouldShowSeedPhraseReminder
-                      ? <HomeNotification
+                      ? (
+                        <HomeNotification
                           descriptionText={t('backupApprovalNotice')}
                           acceptText={t('backupNow')}
                           onAccept={() => {
@@ -154,11 +157,13 @@ export default class Home extends PureComponent {
                           infoText={t('backupApprovalInfo')}
                           key="home-backupApprovalNotice"
                         />
+                      )
                       : null
                   }
                   {
                     threeBoxLastUpdated && showRestorePrompt
-                      ? <HomeNotification
+                      ? (
+                        <HomeNotification
                           descriptionText={t('restoreWalletPreferences', [ formatDate(threeBoxLastUpdated, 'M/d/y') ])}
                           acceptText={t('restore')}
                           ignoreText={t('noThanks')}
@@ -174,6 +179,7 @@ export default class Home extends PureComponent {
                           }}
                           key="home-privacyModeDefault"
                         />
+                      )
                       : null
                   }
                   {

ui/app/pages/send/account-list-item/account-list-item.component.js

@@ -44,7 +44,8 @@ export default class AccountListItem extends Component {
 
     const { name, address, balance } = account || {}
 
-    return (<div
+    return (
+      <div
         className={`account-list-item ${className}`}
         onClick={() => handleClick && handleClick({ name, address, balance })}
       >
@@ -62,12 +63,13 @@ export default class AccountListItem extends Component {
 
         </div>
 
-      {displayAddress && name && <div className="account-list-item__account-address">
+        {displayAddress && name && (
+          <div className="account-list-item__account-address">
             { checksumAddress(address) }
-      </div>}
+          </div>
+        )}
 
-      {
-        displayBalance && (
+        {displayBalance && (
           <Tooltip
             position="left"
             title={this.context.t('balanceOutdated')}
@@ -76,9 +78,11 @@ export default class AccountListItem extends Component {
               left: '-20px !important',
             }}
           >
-            <div className={classnames('account-list-item__account-balances', {
+            <div
+              className={classnames('account-list-item__account-balances', {
                 'account-list-item__cached-balances': balanceIsCached,
-            })}>
+              })}
+            >
               <div className="account-list-item__primary-cached-container">
                 <UserPreferencedCurrencyDisplay
                   type={PRIMARY}
@@ -86,23 +90,23 @@ export default class AccountListItem extends Component {
                   hideTitle
                 />
                 {
-                  balanceIsCached ? <span className="account-list-item__cached-star">*</span> : null
+                  balanceIsCached
+                    ? <span className="account-list-item__cached-star">*</span>
+                    : null
                 }
               </div>
-              {
-                showFiat && (
+              {showFiat && (
                 <UserPreferencedCurrencyDisplay
                   type={SECONDARY}
                   value={balance}
                   hideTitle
                 />
-                )
-              }
+              )}
             </div>
           </Tooltip>
-        )
-      }
+        )}
 
-    </div>)
+      </div>
+    )
   }
 }

ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js

@@ -23,7 +23,8 @@ describe('AccountListItem Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<AccountListItem
+    wrapper = shallow((
+      <AccountListItem
         account={ { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' } }
         className="mockClassName"
         conversionRate={4}
@@ -33,7 +34,8 @@ describe('AccountListItem Component', function () {
         displayBalance={false}
         handleClick={propsMethodSpies.handleClick}
         icon={<i className="mockIcon" />}
-    />, { context: { t: str => str + '_t' } })
+      />
+    ), { context: { t: str => str + '_t' } })
   })
 
   afterEach(() => {

ui/app/pages/send/send-content/add-recipient/add-recipient.component.js

@@ -155,7 +155,7 @@ export default class AddRecipient extends Component {
           className="send__select-recipient-wrapper__list__link"
           onClick={() => this.setState({ isShowingTransfer: false })}
         >
-          <div className="send__select-recipient-wrapper__list__back-caret"/>
+          <div className="send__select-recipient-wrapper__list__back-caret" />
           { t('backToAll') }
         </div>
         <RecipientGroup

ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js

@@ -19,7 +19,8 @@ describe('AddRecipient Component', function () {
   let instance
 
   beforeEach(() => {
-    wrapper = shallow(<AddRecipient
+    wrapper = shallow((
+      <AddRecipient
         closeToDropdown={propsMethodSpies.closeToDropdown}
         inError={false}
         inWarning={false}
@@ -35,7 +36,8 @@ describe('AddRecipient Component', function () {
         addressBook={[{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 5' }]}
         nonContacts={[{ address: '0x70F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 7' }]}
         contacts={[{ address: '0x60F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 6' }]}
-    />, { context: { t: str => str + '_t' } })
+      />
+    ), { context: { t: str => str + '_t' } })
     instance = wrapper.instance()
   })
 

ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js

@@ -18,7 +18,8 @@ describe('AmountMaxButton Component', function () {
   let instance
 
   beforeEach(() => {
-    wrapper = shallow(<AmountMaxButton
+    wrapper = shallow((
+      <AmountMaxButton
         balance="mockBalance"
         gasTotal="mockGasTotal"
         maxModeOn={false}
@@ -26,7 +27,8 @@ describe('AmountMaxButton Component', function () {
         setAmountToMax={propsMethodSpies.setAmountToMax}
         setMaxModeTo={propsMethodSpies.setMaxModeTo}
         tokenBalance="mockTokenBalance"
-    />, {
+      />
+    ), {
       context: {
         t: str => str + '_t',
         metricsEvent: () => {},

ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js

@@ -25,7 +25,8 @@ describe('SendAmountRow Component', function () {
   let instance
 
   beforeEach(() => {
-    wrapper = shallow(<SendAmountRow
+    wrapper = shallow((
+      <SendAmountRow
         amount="mockAmount"
         amountConversionRate="mockAmountConversionRate"
         balance="mockBalance"
@@ -41,7 +42,8 @@ describe('SendAmountRow Component', function () {
         updateSendAmount={propsMethodSpies.updateSendAmount}
         updateSendAmountError={propsMethodSpies.updateSendAmountError}
         updateGas={propsMethodSpies.updateGas}
-    />, { context: { t: str => str + '_t' } })
+      />
+    ), { context: { t: str => str + '_t' } })
     instance = wrapper.instance()
   })
 

ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js

@@ -128,7 +128,8 @@ export default class SendAssetRow extends Component {
 
     return (
       <div
-        key={address} className="send-v2__asset-dropdown__asset"
+        key={address}
+        className="send-v2__asset-dropdown__asset"
         onClick={() => this.selectToken(address)}
       >
         <div className="send-v2__asset-dropdown__asset-icon">

ui/app/pages/send/send-content/send-dropdown-list/send-dropdown-list.component.js

@@ -17,7 +17,7 @@ export default class SendDropdownList extends Component {
 
   getListItemIcon (accountAddress, activeAddress) {
     return accountAddress === activeAddress
-      ? <i className="fa fa-check fa-lg" style={ { color: '#02c9b1' } }/>
+      ? <i className="fa fa-check fa-lg" style={ { color: '#02c9b1' } } />
       : null
   }
 
@@ -29,13 +29,15 @@ export default class SendDropdownList extends Component {
       activeAddress,
     } = this.props
 
-    return (<div>
+    return (
+      <div>
         <div
           className="send-v2__from-dropdown__close-area"
           onClick={() => closeDropdown()}
         />
         <div className="send-v2__from-dropdown__list">
-        {accounts.map((account, index) => <AccountListItem
+          {accounts.map((account, index) => (
+            <AccountListItem
               account={account}
               className="account-list-item__dropdown"
               handleClick={() => {
@@ -44,9 +46,11 @@ export default class SendDropdownList extends Component {
               }}
               icon={this.getListItemIcon(account.address, activeAddress)}
               key={`send-dropdown-account-#${index}`}
-        />)}
+            />
+          ))}
+        </div>
       </div>
-    </div>)
+    )
   }
 
 }

ui/app/pages/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js

@@ -17,7 +17,8 @@ describe('SendDropdownList Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendDropdownList
+    wrapper = shallow((
+      <SendDropdownList
         accounts={[
           { address: 'mockAccount0' },
           { address: 'mockAccount1' },
@@ -26,7 +27,8 @@ describe('SendDropdownList Component', function () {
         closeDropdown={propsMethodSpies.closeDropdown}
         onSelect={propsMethodSpies.onSelect}
         activeAddress="mockAddress2"
-    />, { context: { t: str => str + '_t' } })
+      />
+    ), { context: { t: str => str + '_t' } })
   })
 
   afterEach(() => {
@@ -39,7 +41,7 @@ describe('SendDropdownList Component', function () {
     it('should return check icon if the passed addresses are the same', () => {
       assert.deepEqual(
         wrapper.instance().getListItemIcon('mockAccount0', 'mockAccount0'),
-        <i className="fa fa-check fa-lg" style={ { color: '#02c9b1' } }/>
+        <i className="fa fa-check fa-lg" style={ { color: '#02c9b1' } } />
       )
     })
 

ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js

@@ -38,12 +38,16 @@ export default class GasFeeDisplay extends Component {
             </div>
           )
           : gasLoadingError
-            ? <div className="currency-display.currency-display--message">
+            ? (
+              <div className="currency-display.currency-display--message">
                 {this.context.t('setGasPrice')}
               </div>
-            : <div className="currency-display">
+            )
+            : (
+              <div className="currency-display">
                 {this.context.t('loading')}
               </div>
+            )
         }
         <button
           className="gas-fee-reset"

ui/app/pages/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js

@@ -15,14 +15,16 @@ describe('GasFeeDisplay Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<GasFeeDisplay
+    wrapper = shallow((
+      <GasFeeDisplay
         conversionRate={20}
         gasTotal="mockGasTotal"
         primaryCurrency="mockPrimaryCurrency"
         convertedCurrency="mockConvertedCurrency"
         showGasButtonGroup={propsMethodSpies.showCustomizeGasModal}
         onReset={propsMethodSpies.onReset}
-    />, {context: {t: str => str + '_t'}})
+      />
+    ), {context: {t: str => str + '_t'}})
   })
 
   afterEach(() => {

ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js

@@ -38,7 +38,10 @@ export default class SendGasRow extends Component {
   renderAdvancedOptionsButton () {
     const { metricsEvent } = this.context
     const { showCustomizeGasModal } = this.props
-    return <div className="advanced-gas-options-btn" onClick={() => {
+    return (
+      <div
+        className="advanced-gas-options-btn"
+        onClick={() => {
           metricsEvent({
             eventOpts: {
               category: 'Transactions',
@@ -47,9 +50,11 @@ export default class SendGasRow extends Component {
             },
           })
           showCustomizeGasModal()
-    }}>
+        }}
+      >
         { this.context.t('advancedOptions') }
       </div>
+    )
   }
 
   setMaxAmount () {
@@ -89,7 +94,8 @@ export default class SendGasRow extends Component {
     } = this.props
     const { metricsEvent } = this.context
 
-    const gasPriceButtonGroup = <div>
+    const gasPriceButtonGroup = (
+      <div>
         <GasPriceButtonGroup
           className="gas-price-button-group--small"
           showCheck={false}
@@ -110,7 +116,9 @@ export default class SendGasRow extends Component {
         />
         { this.renderAdvancedOptionsButton() }
       </div>
-    const gasFeeDisplay = <GasFeeDisplay
+    )
+    const gasFeeDisplay = (
+      <GasFeeDisplay
         conversionRate={conversionRate}
         convertedCurrency={convertedCurrency}
         gasLoadingError={gasLoadingError}
@@ -123,7 +131,9 @@ export default class SendGasRow extends Component {
         }}
         onClick={() => showCustomizeGasModal()}
       />
-    const advancedGasInputs = <div>
+    )
+    const advancedGasInputs = (
+      <div>
         <AdvancedGasInputs
           updateCustomGasPrice={newGasPrice => setGasPrice(newGasPrice, gasLimit)}
           updateCustomGasLimit={newGasLimit => setGasLimit(newGasLimit, gasPrice)}
@@ -135,6 +145,7 @@ export default class SendGasRow extends Component {
         />
         { this.renderAdvancedOptionsButton() }
       </div>
+    )
 
     if (advancedInlineGasShown) {
       return advancedGasInputs

ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js

@@ -17,7 +17,8 @@ describe('SendGasRow Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendGasRow
+    wrapper = shallow((
+      <SendGasRow
         conversionRate={20}
         convertedCurrency="mockConvertedCurrency"
         gasFeeError="mockGasFeeError"
@@ -30,7 +31,8 @@ describe('SendGasRow Component', function () {
           someGasPriceButtonGroupProp: 'foo',
           anotherGasPriceButtonGroupProp: 'bar',
         }}
-    />, { context: { t: str => str + '_t', metricsEvent: () => ({}) } })
+      />
+    ), { context: { t: str => str + '_t', metricsEvent: () => ({}) } })
   })
 
   afterEach(() => {

ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js

@@ -7,10 +7,12 @@ describe('SendRowErrorMessage Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendRowErrorMessage
+    wrapper = shallow((
+      <SendRowErrorMessage
         errors={{ error1: 'abc', error2: 'def' }}
         errorType="error3"
-    />, { context: { t: str => str + '_t' } })
+      />
+    ), { context: { t: str => str + '_t' } })
   })
 
   describe('render', () => {

ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js

@@ -9,13 +9,15 @@ describe('SendContent Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendRowWrapper
+    wrapper = shallow((
+      <SendRowWrapper
         errorType="mockErrorType"
         label="mockLabel"
         showError={false}
       >
         <span>Mock Form Field</span>
-    </SendRowWrapper>)
+      </SendRowWrapper>
+    ))
   })
 
   describe('render', () => {
@@ -53,26 +55,30 @@ describe('SendContent Component', function () {
     })
 
     it('should render its second child as a child of the send-v2__form-field, if it has two children', () => {
-      wrapper = shallow(<SendRowWrapper
+      wrapper = shallow((
+        <SendRowWrapper
           errorType="mockErrorType"
           label="mockLabel"
           showError={false}
         >
           <span>Mock Custom Label Content</span>
           <span>Mock Form Field</span>
-      </SendRowWrapper>)
+        </SendRowWrapper>
+      ))
       assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field')
     })
 
     it('should render its first child as the last child of the send-v2__form-label, if it has two children', () => {
-      wrapper = shallow(<SendRowWrapper
+      wrapper = shallow((
+        <SendRowWrapper
           errorType="mockErrorType"
           label="mockLabel"
           showError={false}
         >
           <span>Mock Custom Label Content</span>
           <span>Mock Form Field</span>
-      </SendRowWrapper>)
+        </SendRowWrapper>
+      ))
       assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1).text(), 'Mock Custom Label Content')
     })
   })

ui/app/pages/send/send-footer/tests/send-footer-component.test.js

@@ -25,7 +25,8 @@ describe('SendFooter Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendFooter
+    wrapper = shallow((
+      <SendFooter
         addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
         amount="mockAmount"
         clearSend={propsMethodSpies.clearSend}
@@ -46,7 +47,8 @@ describe('SendFooter Component', function () {
         unapprovedTxs={['mockTx']}
         update={propsMethodSpies.update}
         sendErrors={{}}
-    />, { context: { t: str => str, metricsEvent: () => ({}) } })
+      />
+    ), { context: { t: str => str, metricsEvent: () => ({}) } })
   })
 
   afterEach(() => {
@@ -182,7 +184,8 @@ describe('SendFooter Component', function () {
   describe('render', () => {
     beforeEach(() => {
       sinon.stub(SendFooter.prototype, 'formShouldBeDisabled').returns('formShouldBeDisabledReturn')
-      wrapper = shallow(<SendFooter
+      wrapper = shallow((
+        <SendFooter
           addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
           amount="mockAmount"
           clearSend={propsMethodSpies.clearSend}
@@ -202,7 +205,8 @@ describe('SendFooter Component', function () {
           tokenBalance="mockTokenBalance"
           unapprovedTxs={['mockTx']}
           update={propsMethodSpies.update}
-      />, { context: { t: str => str, metricsEvent: () => ({}) } })
+        />
+      ), { context: { t: str => str, metricsEvent: () => ({}) } })
     })
 
     afterEach(() => {

ui/app/pages/send/send-header/tests/send-header-component.test.js

@@ -20,11 +20,13 @@ describe('SendHeader Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendHeader
+    wrapper = shallow((
+      <SendHeader
         clearSend={propsMethodSpies.clearSend}
         history={historySpies}
         titleKey="mockTitleKey"
-    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+      />
+    ), { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
   })
 
   afterEach(() => {

ui/app/pages/send/tests/send-component.test.js

@@ -40,7 +40,8 @@ describe('Send Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendTransactionScreen
+    wrapper = shallow((
+      <SendTransactionScreen
         amount="mockAmount"
         amountConversionRate="mockAmountConversionRate"
         blockGasLimit="mockBlockGasLimit"
@@ -66,7 +67,8 @@ describe('Send Component', function () {
         updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
         resetSendState={propsMethodSpies.resetSendState}
         updateToNicknameIfNecessary={propsMethodSpies.updateToNicknameIfNecessary}
-    />)
+      />
+    ))
   })
 
   afterEach(() => {

ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js

@@ -85,12 +85,14 @@ export default class AddContact extends PureComponent {
 
     return (
       <div className="settings-page__content-row address-book__add-contact">
-        {this.state.ensAddress && <div className="address-book__view-contact__group">
+        {this.state.ensAddress && (
+          <div className="address-book__view-contact__group">
             <Identicon address={this.state.ensAddress} diameter={60} />
             <div className="address-book__view-contact__group__value">
               { this.state.ensAddress }
             </div>
-        </div>}
+          </div>
+        )}
         <div className="address-book__add-contact__content">
           <div className="address-book__view-contact__group">
             <div className="address-book__view-contact__group__label">

ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js

@@ -49,16 +49,19 @@ export default class ContactListTab extends Component {
 
   renderAddButton () {
     const { history } = this.props
-    return <div
+    return (
+      <div
         className="address-book-add-button__button"
         onClick={() => {
           history.push(CONTACT_ADD_ROUTE)
-      }}>
+        }}
+      >
         <img
           className="account-menu__item-icon"
           src="images/plus-btn-white.svg"
         />
       </div>
+    )
   }
 
   renderMyAccountsButton () {
@@ -98,19 +101,23 @@ export default class ContactListTab extends Component {
       ContactContentComponent = AddContact
     }
 
-    return (ContactContentComponent && <div className="address-book-contact-content">
+    return (ContactContentComponent && (
+      <div className="address-book-contact-content">
         <ContactContentComponent />
-    </div>)
+      </div>
+    ))
   }
 
   renderAddressBookContent () {
     const { hideAddressBook, showingMyAccounts } = this.props
 
     if (!hideAddressBook && !showingMyAccounts) {
-      return (<div className="address-book">
+      return (
+        <div className="address-book">
           { this.renderMyAccountsButton() }
           { this.renderAddresses() }
-      </div>)
+        </div>
+      )
     } else if (!hideAddressBook && showingMyAccounts) {
       return (<MyAccounts />)
     }
@@ -123,9 +130,11 @@ export default class ContactListTab extends Component {
       <div className="address-book-wrapper">
         { this.renderAddressBookContent() }
         { this.renderContactContent() }
-        {!addingContact && <div className="address-book-add-button">
+        {!addingContact && (
+          <div className="address-book-add-button">
             { this.renderAddButton() }
-        </div>}
+          </div>
+        )}
       </div>
     )
   }

ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js

@@ -45,7 +45,7 @@ export default class EditContact extends PureComponent {
     return (
       <div className="settings-page__content-row address-book__edit-contact">
         <div className="settings-page__header address-book__header--edit">
-          <Identicon address={address} diameter={60}/>
+          <Identicon address={address} diameter={60} />
           <Button
             type="link"
             className="settings-page__address-book-button"

ui/app/pages/settings/networks-tab/networks-tab.component.js

@@ -114,9 +114,11 @@ export default class NetworksTab extends PureComponent {
           backgroundColor={iconColor || 'white'}
           innerBorder={border}
         />
-        <div className={ classnames('networks-tab__networks-list-name', {
+        <div
+          className={classnames('networks-tab__networks-list-name', {
             'networks-tab__networks-list-name--selected': displayNetworkListItemAsSelected,
-        }) }>
+          })}
+        >
           { label || this.context.t(labelKey) }
         </div>
         <div className="networks-tab__networks-list-arrow" />
@@ -224,7 +226,8 @@ export default class NetworksTab extends PureComponent {
         {this.renderSubHeader()}
         {this.renderNetworksTabContent()}
         {!networkIsSelected && !networksTabIsInAddMode
-          ? <div className="networks-tab__add-network-button-wrapper">
+          ? (
+            <div className="networks-tab__add-network-button-wrapper">
               <Button
                 type="primary"
                 onClick={event => {
@@ -236,6 +239,7 @@ export default class NetworksTab extends PureComponent {
                 { this.context.t('addNetwork') }
               </Button>
             </div>
+          )
           : null
         }
       </div>

ui/app/pages/settings/settings.component.js

@@ -135,13 +135,19 @@ class SettingsPage extends PureComponent {
         <div
           className={c({ 'settings-page__subheader--link': initialBreadCrumbRoute })}
           onClick={() => initialBreadCrumbRoute && history.push(initialBreadCrumbRoute)}
-        >{subheaderText}</div>
-        {breadCrumbTextKey && <div
-          className="settings-page__subheader--break"
-        ><span>{' > '}</span>{t(breadCrumbTextKey)}</div>}
-        {isAddressEntryPage && <div
-          className="settings-page__subheader--break"
-        ><span>{' > '}</span>{addressName}</div>}
+        >
+          {subheaderText}
+        </div>
+        {breadCrumbTextKey && (
+          <div className="settings-page__subheader--break">
+            <span>{' > '}</span>{t(breadCrumbTextKey)}
+          </div>
+        )}
+        {isAddressEntryPage && (
+          <div className="settings-page__subheader--break">
+            <span>{' > '}</span>{addressName}
+          </div>
+        )}
       </div>
     )
   }