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">
-          { subtitleComponent || subtitle }
-        </div>
+        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,36 +34,40 @@ export default class ConfirmPageContainerHeader extends Component {
     return (
       <div className="confirm-page-container-header__row">
         { !showAccountInHeader
-          ? <div
-            className="confirm-page-container-header__back-button-container"
-            style={{
-              visibility: showEdit ? 'initial' : 'hidden',
-            }}
-          >
-            <img
-              src="/images/caret-left.svg"
-            />
-            <span
-              className="confirm-page-container-header__back-button"
-              onClick={() => onEdit()}
+          ? (
+            <div
+              className="confirm-page-container-header__back-button-container"
+              style={{
+                visibility: showEdit ? 'initial' : 'hidden',
+              }}
             >
-              { this.context.t('edit') }
-            </span>
-          </div>
+              <img
+                src="/images/caret-left.svg"
+              />
+              <span
+                className="confirm-page-container-header__back-button"
+                onClick={() => onEdit()}
+              >
+                { this.context.t('edit') }
+              </span>
+            </div>
+          )
           : null
         }
         { showAccountInHeader
-          ? <div className="confirm-page-container-header__address-container">
-            <div className="confirm-page-container-header__address-identicon">
-              <Identicon
-                address={accountAddress}
-                diameter={24}
-              />
-            </div>
-            <div className="confirm-page-container-header__address">
-              { addressSlicer(accountAddress) }
+          ? (
+            <div className="confirm-page-container-header__address-container">
+              <div className="confirm-page-container-header__address-identicon">
+                <Identicon
+                  address={accountAddress}
+                  diameter={24}
+                />
+              </div>
+              <div className="confirm-page-container-header__address">
+                { addressSlicer(accountAddress) }
+              </div>
             </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,15 +133,17 @@ export default class ConfirmPageContainer extends Component {
         >
           { hideSenderToRecipient
             ? null
-            : <SenderToRecipient
-              senderName={fromName}
-              senderAddress={fromAddress}
-              recipientName={toName}
-              recipientAddress={toAddress}
-              recipientEns={toEns}
-              recipientNickname={toNickname}
-              assetImage={renderAssetImage ? assetImage : undefined}
-            />
+            : (
+              <SenderToRecipient
+                senderName={fromName}
+                senderAddress={fromAddress}
+                recipientName={toName}
+                recipientAddress={toAddress}
+                recipientEns={toEns}
+                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>}
+      {label && (
+        <div className="send__select-recipient-wrapper__group-label">
+          {label}
+        </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={{
-          background: backgroundColor,
-          border: innerBorder,
-          height: `${diameter}px`,
-          width: `${diameter}px`,
-        }} />
+        <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
-        onClick={onClickSpy}
-      />)
+      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', {
-            'advanced-gas-inputs__gas-edit-row__input--error': errorType === 'error',
-            'advanced-gas-inputs__gas-edit-row__input--warning': errorType === 'warning',
-          })}>
+          <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,17 +83,19 @@ export default class AdvancedTabContent extends Component {
             />
           </div>
           { isEthereumNetwork
-            ? <div>
-              <div className="advanced-tab__fee-chart__title">{ t('liveGasPricePredictions') }</div>
-              {!gasEstimatesLoading
-                ? <GasPriceChart {...gasChartProps} updateCustomGasPrice={this.onGasChartUpdate} />
-                : <Loading />
-              }
-              <div className="advanced-tab__fee-chart__speed-buttons">
-                <span>{ t('slower') }</span>
-                <span>{ t('faster') }</span>
+            ? (
+              <div>
+                <div className="advanced-tab__fee-chart__title">{ t('liveGasPricePredictions') }</div>
+                {!gasEstimatesLoading
+                  ? <GasPriceChart {...gasChartProps} updateCustomGasPrice={this.onGasChartUpdate} />
+                  : <Loading />
+                }
+                <div className="advanced-tab__fee-chart__speed-buttons">
+                  <span>{ t('slower') }</span>
+                  <span>{ t('faster') }</span>
+                </div>
               </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,18 +18,20 @@ describe('AdvancedTabContent Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<AdvancedTabContent
-      updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice}
-      updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit}
-      customModalGasPriceInHex="11"
-      customModalGasLimitInHex="23456"
-      timeRemaining="21500"
-      transactionFee="$0.25"
-      insufficientBalance={false}
-      customPriceIsSafe
-      isSpeedUp={false}
-      isEthereumNetwork
-    />)
+    wrapper = shallow((
+      <AdvancedTabContent
+        updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice}
+        updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit}
+        customModalGasPriceInHex="11"
+        customModalGasLimitInHex="23456"
+        timeRemaining="21500"
+        transactionFee="$0.25"
+        insufficientBalance={false}
+        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
-            className="gas-price-button-group--alt"
-            showCheck
-            {...gasPriceButtonGroupProps}
-          />
+          ? (
+            <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
-      gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
-    />)
+    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}`}>
-          <div className="gas-modal-content">
-            { content }
-            { this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) }
-          </div>
-        </Tab>
-        )}
+        {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,23 +63,25 @@ describe('GasModalPageContainer Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<GasModalPageContainer
-      cancelAndClose={propsMethodSpies.cancelAndClose}
-      onSubmit={propsMethodSpies.onSubmit}
-      fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
-      fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
-      updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
-      updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
-      customGasPrice={21}
-      customGasLimit={54321}
-      gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
-      infoRowProps={mockInfoRowProps}
-      currentTimeEstimate="1 min 31 sec"
-      customGasPriceInHex="mockCustomGasPriceInHex"
-      customGasLimitInHex="mockCustomGasLimitInHex"
-      insufficientBalance={false}
-      disableSave={false}
-    />)
+    wrapper = shallow((
+      <GasModalPageContainer
+        cancelAndClose={propsMethodSpies.cancelAndClose}
+        onSubmit={propsMethodSpies.onSubmit}
+        fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
+        fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
+        updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
+        updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
+        customGasPrice={21}
+        customGasLimit={54321}
+        gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
+        infoRowProps={mockInfoRowProps}
+        currentTimeEstimate="1 min 31 sec"
+        customGasPriceInHex="mockCustomGasPriceInHex"
+        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
-        fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
-        fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
-      />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+      const renderTabsWrapperTester = shallow((
+        <GasModalPageContainer
+          fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
+          fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
+        />
+      ), { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
       const { tabsComponent } = renderTabsWrapperTester.find(PageContainer).props()
       assert.equal(tabsComponent, 'mockTabs')
       GasModalPageContainer.prototype.renderTabs.restore()
@@ -184,24 +188,26 @@ describe('GasModalPageContainer Component', function () {
     })
 
     it('should not render the basic tab if hideBasic is true', () => {
-      wrapper = shallow(<GasModalPageContainer
-        cancelAndClose={propsMethodSpies.cancelAndClose}
-        onSubmit={propsMethodSpies.onSubmit}
-        fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
-        fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
-        updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
-        updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
-        customGasPrice={21}
-        customGasLimit={54321}
-        gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
-        infoRowProps={mockInfoRowProps}
-        currentTimeEstimate="1 min 31 sec"
-        customGasPriceInHex="mockCustomGasPriceInHex"
-        customGasLimitInHex="mockCustomGasLimitInHex"
-        insufficientBalance={false}
-        disableSave={false}
-        hideBasic
-      />)
+      wrapper = shallow((
+        <GasModalPageContainer
+          cancelAndClose={propsMethodSpies.cancelAndClose}
+          onSubmit={propsMethodSpies.onSubmit}
+          fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
+          fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
+          updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
+          updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
+          customGasPrice={21}
+          customGasLimit={54321}
+          gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
+          infoRowProps={mockInfoRowProps}
+          currentTimeEstimate="1 min 31 sec"
+          customGasPriceInHex="mockCustomGasPriceInHex"
+          customGasLimitInHex="mockCustomGasLimitInHex"
+          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>
-      { 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>)
+    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>
+    )
   }
 
   renderButton ({
@@ -88,14 +90,16 @@ export default class GasPriceButtonGroup extends Component {
 
     return (
       !buttonDataLoading
-        ? <ButtonGroup
-          className={buttonPropsAndFlags.className}
-          defaultActiveButtonIndex={defaultActiveButtonIndex}
-          newActiveButtonIndex={newActiveButtonIndex}
-          noButtonActiveByDefault={noButtonActiveByDefault}
-        >
-          { gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) }
-        </ButtonGroup>
+        ? (
+          <ButtonGroup
+            className={buttonPropsAndFlags.className}
+            defaultActiveButtonIndex={defaultActiveButtonIndex}
+            newActiveButtonIndex={newActiveButtonIndex}
+            noButtonActiveByDefault={noButtonActiveByDefault}
+          >
+            { 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
-      {...mockGasPriceButtonGroupProps}
-    />)
+    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,42 +61,46 @@ export default class LoadingNetworkScreen extends PureComponent {
   }
 
   renderLoadingScreenContent = () => {
-    return <div className="loading-overlay__screen-content">
-      <Spinner color="#F7C06C" />
-      {this.renderMessage()}
-    </div>
+    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">
-      <span className="loading-overlay__emoji">&#128542;</span>
-      <span>{ this.context.t('somethingWentWrong') }</span>
-      <div className="loading-overlay__error-buttons">
-        <Button
-          type="default"
-          onClick={() => {
-            window.clearTimeout(this.cancelCallTimeout)
-            showNetworkDropdown()
-          }}
-        >
-          { this.context.t('switchNetworks') }
-        </Button>
-
-        <Button
-          type="primary"
-          onClick={() => {
-            this.setState({ showErrorScreen: false })
-            setProviderType(...setProviderArgs)
-            window.clearTimeout(this.cancelCallTimeout)
-            this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
-          }}
-        >
-          { this.context.t('tryAgain') }
-        </Button>
+    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">
+          <Button
+            type="default"
+            onClick={() => {
+              window.clearTimeout(this.cancelCallTimeout)
+              showNetworkDropdown()
+            }}
+          >
+            { this.context.t('switchNetworks') }
+          </Button>
+
+          <Button
+            type="primary"
+            onClick={() => {
+              this.setState({ showErrorScreen: false })
+              setProviderType(...setProviderArgs)
+              window.clearTimeout(this.cancelCallTimeout)
+              this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
+            }}
+          >
+            { this.context.t('tryAgain') }
+          </Button>
+        </div>
       </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
-            type="secondary"
-            className="account-modal__button"
-            onClick={() => showExportPrivateKeyModal()}
-          >
-            {this.context.t('exportPrivateKey')}
-          </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({
-                'edit-approval-permission__edit-section__radio-button-outline': !selectedOptionIsUnlimited,
-                'edit-approval-permission__edit-section__radio-button-outline--selected': selectedOptionIsUnlimited,
-              })} />
+              <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({
-                'edit-approval-permission__edit-section__option-label': !selectedOptionIsUnlimited,
-                'edit-approval-permission__edit-section__option-label--selected': selectedOptionIsUnlimited,
-              })}>
+              <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({
-                'edit-approval-permission__edit-section__radio-button-outline': selectedOptionIsUnlimited,
-                'edit-approval-permission__edit-section__radio-button-outline--selected': !selectedOptionIsUnlimited,
-              })} />
+              <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({
-                'edit-approval-permission__edit-section__option-label': selectedOptionIsUnlimited,
-                'edit-approval-permission__edit-section__option-label--selected': !selectedOptionIsUnlimited,
-              })}>
+              <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', {
-            'flipped': !showAll,
-          })} /> : null}
+          {childrenToRender.length > 1 ? (
+            <i
+              className={classnames('fa fa-sm fa-sort-amount-asc', {
+                'flipped': !showAll,
+              })}
+            />
+          ) : 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
-        className="i fa fa-question-circle fa-med"
-        style={{
-          margin: '0 4px',
-          color: 'rgb(125, 128, 130)',
-        }}
-      />
+      : (
+        <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
-              className="i fa fa-question-circle fa-med"
-              style={{
-                margin: '0 4px',
-                color: 'rgb(125, 128, 130)',
-              }}
-            />
+            : (
+              <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
-      selectedAddress="0x1b82543566f41a7db9a9a75fc933c340ffb55c9d"
-      selectedIdentity={{ name: 'testName' }}
-    />, { context: { t: () => {}}})
+    const wrapper = render((
+      <SelectedAccount
+        selectedAddress="0x1b82543566f41a7db9a9a75fc933c340ffb55c9d"
+        selectedIdentity={{ name: 'testName' }}
+      />
+    ), { 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
-      className="sidebar-overlay"
-      onClick={() => {
-        onOverlayClose && onOverlayClose()
-        this.props.hideSidebar()
-      }
-      } />
+    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
-      sidebarOpen={false}
-      hideSidebar={propsMethodSpies.hideSidebar}
-      transitionName="someTransition"
-      type="wallet-view"
-    />)
+    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>
-              <h1>
-                Domain
-              </h1>
-              <ObjectInspector data={domain} expandLevel={1} name="domain" />
-            </div>
+            ? (
+              <div>
+                <h1>
+                  Domain
+                </h1>
+                <ObjectInspector data={domain} expandLevel={1} name="domain" />
+              </div>
+            )
             : ''
         }
         {
           message
-            ? <div>
-              <h1>
-                Message
-              </h1>
-              <ObjectInspector data={message} expandLevel={1} name="message" />
-            </div>
+            ? (
+              <div>
+                <h1>
+                  Message
+                </h1>
+                <ObjectInspector data={message} expandLevel={1} name="message" />
+              </div>
+            )
             : ''
         }
       </div>
@@ -221,16 +225,18 @@ export default class SignatureRequestOriginal extends Component {
           { notice }
           {
             type === 'eth_sign'
-              ? <span
-                className="request-signature__help-link"
-                onClick={() => {
-                  global.platform.openWindow({
-                    url: 'https://metamask.zendesk.com/hc/en-us/articles/360015488751',
-                  })
-                }}
-              >
-                { this.context.t('learnMore') }
-              </span>
+              ? (
+                <span
+                  className="request-signature__help-link"
+                  onClick={() => {
+                    global.platform.openWindow({
+                      url: 'https://metamask.zendesk.com/hc/en-us/articles/360015488751',
+                    })
+                  }}
+                >
+                  { 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
-            displayBalance={false}
-            account={selectedAccount}
-          />}
+          {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={{
-      msgParams: {
-        data: '{"message": {"from": {"name": "hello"}}}',
-        from: '0x123456789abcdef',
-      } }} />)
+    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={{
-        padding: '80px',
-      }}>
+      <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
-        methodData={methodData}
-        transaction={transaction}
-        className="transaction-action"
-      />, { context: { t }})
+      const wrapper = shallow((
+        <TransactionAction
+          methodData={methodData}
+          transaction={transaction}
+          className="transaction-action"
+        />
+      ), { 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
-              className="transaction-breakdown__value"
-              value={gas}
-            />
+            ? (
+              <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
-              className="transaction-breakdown__value"
-              currency={nativeCurrency}
-              denomination={GWEI}
-              value={gasPrice}
-              hideLabel
-            />
+            ? (
+              <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,15 +191,17 @@ export default class TransactionListItemDetails extends PureComponent {
               </Button>
             </Tooltip>
             {
-              showRetry && <Tooltip title={blockExplorerUrl ? t('viewOnCustomBlockExplorer', [blockExplorerUrl]) : t('retryTransaction')}>
-                <Button
-                  type="raised"
-                  onClick={this.handleRetry}
-                  className="transaction-list-item-details__header-button"
-                >
-                  <i className="fa fa-refresh"></i>
-                </Button>
-              </Tooltip>
+              showRetry && (
+                <Tooltip title={blockExplorerUrl ? t('viewOnCustomBlockExplorer', [blockExplorerUrl]) : t('retryTransaction')}>
+                  <Button
+                    type="raised"
+                    onClick={this.handleRetry}
+                    className="transaction-list-item-details__header-button"
+                  >
+                    <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
-              className="transaction-list-item__estimated-time"
-              transaction={ primaryTransaction }
-            />
+            ? (
+              <TransactionTimeRemaining
+                className="transaction-list-item__estimated-time"
+                transaction={ primaryTransaction }
+              />
+            )
             : null
           }
           { this.renderPrimaryCurrency() }
           { this.renderSecondaryCurrency() }
         </div>
-        <div className={classnames('transaction-list-item__expander', {
-          'transaction-list-item__expander--show': showTransactionDetails,
-        })}>
+        <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
-      showDepositModal={propsMethodSpies.showDepositModal}
-      history={historySpies}
-      network="3"
-      ethBalance={123}
-      fiatBalance={456}
-      currentCurrency="usd"
-    />, { context: { t, metricsEvent } })
+    const wrapper = shallow((
+      <TransactionViewBalance
+        showDepositModal={propsMethodSpies.showDepositModal}
+        history={historySpies}
+        network="3"
+        ethBalance={123}
+        fiatBalance={456}
+        currentCurrency="usd"
+      />
+    ), { context: { t, metricsEvent } })
 
     assert.equal(wrapper.find('.transaction-view-balance').length, 1)
     assert.equal(wrapper.find('.transaction-view-balance__button').length, 2)
@@ -55,15 +57,17 @@ describe('TransactionViewBalance Component', () => {
       symbol: 'ABC',
     }
 
-    const wrapper = shallow(<TransactionViewBalance
-      showDepositModal={propsMethodSpies.showDepositModal}
-      history={historySpies}
-      network="3"
-      ethBalance={123}
-      fiatBalance={456}
-      currentCurrency="usd"
-      selectedToken={token}
-    />, { context: { t } })
+    const wrapper = shallow((
+      <TransactionViewBalance
+        showDepositModal={propsMethodSpies.showDepositModal}
+        history={historySpies}
+        network="3"
+        ethBalance={123}
+        fiatBalance={456}
+        currentCurrency="usd"
+        selectedToken={token}
+      />
+    ), { 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', {
-        'wallet-balance-wrapper--active': Boolean(selectedTokenAddress),
-      })}>
+      <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
-      defaultActiveButtonIndex={1}
-      disabled={false}
-      className="someClassName"
-      style={ { color: 'red' } }
-    >{mockButtons}</ButtonGroup>)
+    wrapper = shallow((
+      <ButtonGroup
+        defaultActiveButtonIndex={1}
+        disabled={false}
+        className="someClassName"
+        style={ { color: 'red' } }
+      >
+        {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
-      displayValue="$123.45"
-      className="currency-display"
-    />)
+    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
-      displayValue="$123.45"
-      className="currency-display"
-      prefix="-"
-    />)
+    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={{
-            alignItems: 'flex-end',
-            lineHeight: lineHeight || '13px',
-            fontFamily: fontFamily || 'Montserrat Light',
-            textRendering: 'geometricPrecision',
-          }}>
-            <div style={{
-              width: '100%',
-              textAlign: 'right',
-              fontSize: fontSize || 'inherit',
-              color: color || 'inherit',
-            }}>
+          <div
+            className="flex-row"
+            style={{
+              alignItems: 'flex-end',
+              lineHeight: lineHeight || '13px',
+              fontFamily: fontFamily || 'Montserrat Light',
+              textRendering: 'geometricPrecision',
+            }}
+          >
+            <div
+              style={{
+                width: '100%',
+                textAlign: 'right',
+                fontSize: fontSize || 'inherit',
+                color: color || 'inherit',
+              }}
+            >
               {
                 incoming
                   ? `+${balanceToRender}`
                   : balanceToRender
               }
             </div>
-            <div style={{
-              color: color || '#AEAEAE',
-              fontSize: fontSize || '12px',
-              marginLeft: '5px',
-            }}>
+            <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
-      value="0x3039"
-      className="hex-to-decimal"
-    />)
+    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
-      value="1A85"
-      className="hex-to-decimal"
-    />)
+    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
-            type={cancelButtonType || 'default'}
-            large
-            className="page-container__footer-button"
-            onClick={e => onCancel(e)}
-          >
-            { cancelText || this.context.t('cancel') }
-          </Button>}
+          {!hideCancel && (
+            <Button
+              type={cancelButtonType || 'default'}
+              large
+              className="page-container__footer-button"
+              onClick={e => onCancel(e)}
+            >
+              { cancelText || this.context.t('cancel') }
+            </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
-      onCancel={onCancel}
-      onSubmit={onSubmit}
-      cancelText="Cancel"
-      submitText="Submit"
-      disabled={false}
-      submitButtonType="Test Type"
-    />)
+    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>
+          title && (
+            <div className="page-container__title">
+              { title }
+            </div>
+          )
         }
 
         {
-          subtitle && <div className="page-container__subtitle">
-            { subtitle }
-          </div>
+          subtitle && (
+            <div className="page-container__subtitle">
+              { subtitle }
+            </div>
+          )
         }
 
         {
           onClose && headerCloseText
             ? <div className="page-container__header-close-text" onClick={() => onClose()}>{ headerCloseText }</div>
-            : onClose && <div
-              className="page-container__header-close"
-              onClick={() => onClose()}
-            />
+            : 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,15 +12,17 @@ describe('Page Container Header', () => {
     onBackButtonClick = sinon.spy()
     onClose = sinon.spy()
 
-    wrapper = shallow(<PageContainerHeader
-      showBackButton
-      onBackButtonClick={onBackButtonClick}
-      backButtonStyles={style}
-      title="Test Title"
-      subtitle="Test Subtitle"
-      tabs="Test Tab"
-      onClose={onClose}
-    />)
+    wrapper = shallow((
+      <PageContainerHeader
+        showBackButton
+        onBackButtonClick={onBackButtonClick}
+        backButtonStyles={style}
+        title="Test Title"
+        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({
-        'confirm-approve-content__card': !noBorder,
-        'confirm-approve-content__card--no-border': noBorder,
-      })}>
+      <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
-            className="confirm-approve-content__small-blue-text cursor-pointer"
-            onClick={() => onEditClick()}
-          >Edit</div> }
+          {showEdit && (
+            <div
+              className="confirm-approve-content__small-blue-text cursor-pointer"
+              onClick={() => onEditClick()}
+            >
+              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', {
-        'confirm-approve-content--full': showFullTxDetails,
-      })}>
+      <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,20 +180,23 @@ export default class ConfirmApproveContent extends Component {
             onEditClick: showCustomizeGasModal,
             content: this.renderTransactionDetailsContent(),
             noBorder: !showFullTxDetails,
-            footer: <div
-              className="confirm-approve-content__view-full-tx-button-wrapper"
-              onClick={() => this.setState({ showFullTxDetails: !this.state.showFullTxDetails })}
-            >
-              <div className="confirm-approve-content__view-full-tx-button cursor-pointer">
-                <div className="confirm-approve-content__small-blue-text">
-                  View full transaction details
+            footer: (
+              <div
+                className="confirm-approve-content__view-full-tx-button-wrapper"
+                onClick={() => this.setState({ showFullTxDetails: !this.state.showFullTxDetails })}
+              >
+                <div className="confirm-approve-content__view-full-tx-button cursor-pointer">
+                  <div className="confirm-approve-content__small-blue-text">
+                    View full transaction details
+                  </div>
+                  <i className={classnames({
+                    'fa fa-caret-up': showFullTxDetails,
+                    'fa fa-caret-down': !showFullTxDetails,
+                  })}
+                  />
                 </div>
-                <i className={classnames({
-                  'fa fa-caret-up': showFullTxDetails,
-                  'fa fa-caret-down': !showFullTxDetails,
-                })} />
               </div>
-            </div>,
+            ),
           })}
         </div>
 

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

@@ -81,25 +81,27 @@ export default class ConfirmApprove extends Component {
         identiconAddress={tokenAddress}
         showAccountInHeader
         title={tokensText}
-        contentComponent={<ConfirmApproveContent
-          siteImage={siteImage}
-          tokenAddress={tokenAddress}
-          setCustomAmount={(newAmount) => {
-            this.setState({ customPermissionAmount: newAmount })
-          }}
-          customTokenAmount={String(customPermissionAmount)}
-          tokenAmount={String(tokenAmount)}
-          origin={origin}
-          tokenSymbol={tokenSymbol}
-          tokenBalance={tokenBalance}
-          showCustomizeGasModal={() => showCustomizeGasModal(txData)}
-          showEditApprovalPermissionModal={showEditApprovalPermissionModal}
-          data={data}
-          toAddress={toAddress}
-          currentCurrency={currentCurrency}
-          ethTransactionTotal={ethTransactionTotal}
-          fiatTransactionTotal={fiatTransactionTotal}
-        />}
+        contentComponent={(
+          <ConfirmApproveContent
+            siteImage={siteImage}
+            tokenAddress={tokenAddress}
+            setCustomAmount={(newAmount) => {
+              this.setState({ customPermissionAmount: newAmount })
+            }}
+            customTokenAmount={String(customPermissionAmount)}
+            tokenAmount={String(tokenAmount)}
+            origin={origin}
+            tokenSymbol={tokenSymbol}
+            tokenBalance={tokenBalance}
+            showCustomizeGasModal={() => showCustomizeGasModal(txData)}
+            showEditApprovalPermissionModal={showEditApprovalPermissionModal}
+            data={data}
+            toAddress={toAddress}
+            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,15 +255,17 @@ export default class ConfirmTransactionBase extends Component {
               secondaryText={hideFiatConversion ? this.context.t('noConversionRateAvailable') : ''}
             />
             {advancedInlineGasShown
-              ? <AdvancedGasInputs
-                updateCustomGasPrice={newGasPrice => updateGasAndCalculate({ ...customGas, gasPrice: newGasPrice })}
-                updateCustomGasLimit={newGasLimit => updateGasAndCalculate({ ...customGas, gasLimit: newGasLimit })}
-                customGasPrice={customGas.gasPrice}
-                customGasLimit={customGas.gasLimit}
-                insufficientBalance={insufficientBalance}
-                customPriceIsSafe
-                isSpeedUp={false}
-              />
+              ? (
+                <AdvancedGasInputs
+                  updateCustomGasPrice={newGasPrice => updateGasAndCalculate({ ...customGas, gasPrice: newGasPrice })}
+                  updateCustomGasLimit={newGasLimit => updateGasAndCalculate({ ...customGas, gasLimit: newGasLimit })}
+                  customGasPrice={customGas.gasPrice}
+                  customGasLimit={customGas.gasLimit}
+                  insufficientBalance={insufficientBalance}
+                  customPriceIsSafe
+                  isSpeedUp={false}
+                />
+              )
               : null
             }
           </div>
@@ -278,31 +280,33 @@ export default class ConfirmTransactionBase extends Component {
               primaryValueTextColor="#2f9ae0"
             />
           </div>
-          {useNonceField ? <div>
-            <div className="confirm-detail-row">
-              <div className="confirm-detail-row__label">
-                { this.context.t('nonceFieldHeading') }
-              </div>
-              <div className="custom-nonce-input">
-                <TextField
-                  type="number"
-                  min="0"
-                  placeholder={ nextNonce ? nextNonce.toString() : null }
-                  onChange={({ target: { value } }) => {
-                    if (!value.length || Number(value) < 0) {
-                      updateCustomNonce('')
-                    } else {
-                      updateCustomNonce(String(Math.floor(value)))
-                    }
-                    getNextNonce()
-                  }}
-                  fullWidth
-                  margin="dense"
-                  value={ customNonceValue || '' }
-                />
+          {useNonceField ? (
+            <div>
+              <div className="confirm-detail-row">
+                <div className="confirm-detail-row__label">
+                  { this.context.t('nonceFieldHeading') }
+                </div>
+                <div className="custom-nonce-input">
+                  <TextField
+                    type="number"
+                    min="0"
+                    placeholder={ nextNonce ? nextNonce.toString() : null }
+                    onChange={({ target: { value } }) => {
+                      if (!value.length || Number(value) < 0) {
+                        updateCustomNonce('')
+                      } else {
+                        updateCustomNonce(String(Math.floor(value)))
+                      }
+                      getNextNonce()
+                    }}
+                    fullWidth
+                    margin="dense"
+                    value={ customNonceValue || '' }
+                  />
+                </div>
               </div>
             </div>
-          </div> : null}
+          ) : 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])}
-            /> :
+            (
+              <Snackbar
+                content={t('onboardingReturnNotice', [t('remindMeLater'), onboardingInitiator.location])}
+              />
+            ) :
             null
         }
       </div>

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

@@ -124,56 +124,62 @@ export default class Home extends PureComponent {
                 <MultipleNotifications>
                   {
                     showPrivacyModeNotification
-                      ? <HomeNotification
-                        descriptionText={t('privacyModeDefault')}
-                        acceptText={t('learnMore')}
-                        onAccept={() => {
-                          unsetMigratedPrivacyMode()
-                          window.open('https://medium.com/metamask/42549d4870fa', '_blank', 'noopener')
-                        }}
-                        ignoreText={t('dismiss')}
-                        onIgnore={() => {
-                          unsetMigratedPrivacyMode()
-                        }}
-                        key="home-privacyModeDefault"
-                      />
+                      ? (
+                        <HomeNotification
+                          descriptionText={t('privacyModeDefault')}
+                          acceptText={t('learnMore')}
+                          onAccept={() => {
+                            unsetMigratedPrivacyMode()
+                            window.open('https://medium.com/metamask/42549d4870fa', '_blank', 'noopener')
+                          }}
+                          ignoreText={t('dismiss')}
+                          onIgnore={() => {
+                            unsetMigratedPrivacyMode()
+                          }}
+                          key="home-privacyModeDefault"
+                        />
+                      )
                       : null
                   }
                   {
                     shouldShowSeedPhraseReminder
-                      ? <HomeNotification
-                        descriptionText={t('backupApprovalNotice')}
-                        acceptText={t('backupNow')}
-                        onAccept={() => {
-                          if (isPopup) {
-                            global.platform.openExtensionInBrowser(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
-                          } else {
-                            history.push(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
-                          }
-                        }}
-                        infoText={t('backupApprovalInfo')}
-                        key="home-backupApprovalNotice"
-                      />
+                      ? (
+                        <HomeNotification
+                          descriptionText={t('backupApprovalNotice')}
+                          acceptText={t('backupNow')}
+                          onAccept={() => {
+                            if (isPopup) {
+                              global.platform.openExtensionInBrowser(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
+                            } else {
+                              history.push(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
+                            }
+                          }}
+                          infoText={t('backupApprovalInfo')}
+                          key="home-backupApprovalNotice"
+                        />
+                      )
                       : null
                   }
                   {
                     threeBoxLastUpdated && showRestorePrompt
-                      ? <HomeNotification
-                        descriptionText={t('restoreWalletPreferences', [ formatDate(threeBoxLastUpdated, 'M/d/y') ])}
-                        acceptText={t('restore')}
-                        ignoreText={t('noThanks')}
-                        infoText={t('dataBackupFoundInfo')}
-                        onAccept={() => {
-                          restoreFromThreeBox(selectedAddress)
-                            .then(() => {
-                              turnThreeBoxSyncingOn()
-                            })
-                        }}
-                        onIgnore={() => {
-                          setShowRestorePromptToFalse()
-                        }}
-                        key="home-privacyModeDefault"
-                      />
+                      ? (
+                        <HomeNotification
+                          descriptionText={t('restoreWalletPreferences', [ formatDate(threeBoxLastUpdated, 'M/d/y') ])}
+                          acceptText={t('restore')}
+                          ignoreText={t('noThanks')}
+                          infoText={t('dataBackupFoundInfo')}
+                          onAccept={() => {
+                            restoreFromThreeBox(selectedAddress)
+                              .then(() => {
+                                turnThreeBoxSyncingOn()
+                              })
+                          }}
+                          onIgnore={() => {
+                            setShowRestorePromptToFalse()
+                          }}
+                          key="home-privacyModeDefault"
+                        />
+                      )
                       : null
                   }
                   {

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

@@ -44,30 +44,32 @@ export default class AccountListItem extends Component {
 
     const { name, address, balance } = account || {}
 
-    return (<div
-      className={`account-list-item ${className}`}
-      onClick={() => handleClick && handleClick({ name, address, balance })}
-    >
+    return (
+      <div
+        className={`account-list-item ${className}`}
+        onClick={() => handleClick && handleClick({ name, address, balance })}
+      >
 
-      <div className="account-list-item__top-row">
-        <Identicon
-          address={address}
-          className="account-list-item__identicon"
-          diameter={18}
-        />
+        <div className="account-list-item__top-row">
+          <Identicon
+            address={address}
+            className="account-list-item__identicon"
+            diameter={18}
+          />
 
-        <div className="account-list-item__account-name">{ name || address }</div>
+          <div className="account-list-item__account-name">{ name || address }</div>
 
-        {icon && <div className="account-list-item__icon">{ icon }</div>}
+          {icon && <div className="account-list-item__icon">{ icon }</div>}
 
-      </div>
+        </div>
 
-      {displayAddress && name && <div className="account-list-item__account-address">
-        { checksumAddress(address) }
-      </div>}
+        {displayAddress && name && (
+          <div className="account-list-item__account-address">
+            { checksumAddress(address) }
+          </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', {
-              'account-list-item__cached-balances': balanceIsCached,
-            })}>
+            <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 && (
-                  <UserPreferencedCurrencyDisplay
-                    type={SECONDARY}
-                    value={balance}
-                    hideTitle
-                  />
-                )
-              }
+              {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,17 +23,19 @@ describe('AccountListItem Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<AccountListItem
-      account={ { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' } }
-      className="mockClassName"
-      conversionRate={4}
-      currentCurrency="mockCurrentyCurrency"
-      nativeCurrency="ETH"
-      displayAddress={false}
-      displayBalance={false}
-      handleClick={propsMethodSpies.handleClick}
-      icon={<i className="mockIcon" />}
-    />, { context: { t: str => str + '_t' } })
+    wrapper = shallow((
+      <AccountListItem
+        account={ { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' } }
+        className="mockClassName"
+        conversionRate={4}
+        currentCurrency="mockCurrentyCurrency"
+        nativeCurrency="ETH"
+        displayAddress={false}
+        displayBalance={false}
+        handleClick={propsMethodSpies.handleClick}
+        icon={<i className="mockIcon" />}
+      />
+    ), { 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,23 +19,25 @@ describe('AddRecipient Component', function () {
   let instance
 
   beforeEach(() => {
-    wrapper = shallow(<AddRecipient
-      closeToDropdown={propsMethodSpies.closeToDropdown}
-      inError={false}
-      inWarning={false}
-      network="mockNetwork"
-      openToDropdown={propsMethodSpies.openToDropdown}
-      to="mockTo"
-      toAccounts={['mockAccount']}
-      toDropdownOpen={false}
-      updateGas={propsMethodSpies.updateGas}
-      updateSendTo={propsMethodSpies.updateSendTo}
-      updateSendToError={propsMethodSpies.updateSendToError}
-      updateSendToWarning={propsMethodSpies.updateSendToWarning}
-      addressBook={[{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 5' }]}
-      nonContacts={[{ address: '0x70F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 7' }]}
-      contacts={[{ address: '0x60F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 6' }]}
-    />, { context: { t: str => str + '_t' } })
+    wrapper = shallow((
+      <AddRecipient
+        closeToDropdown={propsMethodSpies.closeToDropdown}
+        inError={false}
+        inWarning={false}
+        network="mockNetwork"
+        openToDropdown={propsMethodSpies.openToDropdown}
+        to="mockTo"
+        toAccounts={['mockAccount']}
+        toDropdownOpen={false}
+        updateGas={propsMethodSpies.updateGas}
+        updateSendTo={propsMethodSpies.updateSendTo}
+        updateSendToError={propsMethodSpies.updateSendToError}
+        updateSendToWarning={propsMethodSpies.updateSendToWarning}
+        addressBook={[{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 5' }]}
+        nonContacts={[{ address: '0x70F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 7' }]}
+        contacts={[{ address: '0x60F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 6' }]}
+      />
+    ), { 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,15 +18,17 @@ describe('AmountMaxButton Component', function () {
   let instance
 
   beforeEach(() => {
-    wrapper = shallow(<AmountMaxButton
-      balance="mockBalance"
-      gasTotal="mockGasTotal"
-      maxModeOn={false}
-      selectedToken={ { address: 'mockTokenAddress' } }
-      setAmountToMax={propsMethodSpies.setAmountToMax}
-      setMaxModeTo={propsMethodSpies.setMaxModeTo}
-      tokenBalance="mockTokenBalance"
-    />, {
+    wrapper = shallow((
+      <AmountMaxButton
+        balance="mockBalance"
+        gasTotal="mockGasTotal"
+        maxModeOn={false}
+        selectedToken={ { address: 'mockTokenAddress' } }
+        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,23 +25,25 @@ describe('SendAmountRow Component', function () {
   let instance
 
   beforeEach(() => {
-    wrapper = shallow(<SendAmountRow
-      amount="mockAmount"
-      amountConversionRate="mockAmountConversionRate"
-      balance="mockBalance"
-      conversionRate={7}
-      convertedCurrency="mockConvertedCurrency"
-      gasTotal="mockGasTotal"
-      inError={false}
-      primaryCurrency="mockPrimaryCurrency"
-      selectedToken={ { address: 'mockTokenAddress' } }
-      setMaxModeTo={propsMethodSpies.setMaxModeTo}
-      tokenBalance="mockTokenBalance"
-      updateGasFeeError={propsMethodSpies.updateGasFeeError}
-      updateSendAmount={propsMethodSpies.updateSendAmount}
-      updateSendAmountError={propsMethodSpies.updateSendAmountError}
-      updateGas={propsMethodSpies.updateGas}
-    />, { context: { t: str => str + '_t' } })
+    wrapper = shallow((
+      <SendAmountRow
+        amount="mockAmount"
+        amountConversionRate="mockAmountConversionRate"
+        balance="mockBalance"
+        conversionRate={7}
+        convertedCurrency="mockConvertedCurrency"
+        gasTotal="mockGasTotal"
+        inError={false}
+        primaryCurrency="mockPrimaryCurrency"
+        selectedToken={ { address: 'mockTokenAddress' } }
+        setMaxModeTo={propsMethodSpies.setMaxModeTo}
+        tokenBalance="mockTokenBalance"
+        updateGasFeeError={propsMethodSpies.updateGasFeeError}
+        updateSendAmount={propsMethodSpies.updateSendAmount}
+        updateSendAmountError={propsMethodSpies.updateSendAmountError}
+        updateGas={propsMethodSpies.updateGas}
+      />
+    ), { 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,24 +29,28 @@ export default class SendDropdownList extends Component {
       activeAddress,
     } = this.props
 
-    return (<div>
-      <div
-        className="send-v2__from-dropdown__close-area"
-        onClick={() => closeDropdown()}
-      />
-      <div className="send-v2__from-dropdown__list">
-        {accounts.map((account, index) => <AccountListItem
-          account={account}
-          className="account-list-item__dropdown"
-          handleClick={() => {
-            onSelect(account)
-            closeDropdown()
-          }}
-          icon={this.getListItemIcon(account.address, activeAddress)}
-          key={`send-dropdown-account-#${index}`}
-        />)}
+    return (
+      <div>
+        <div
+          className="send-v2__from-dropdown__close-area"
+          onClick={() => closeDropdown()}
+        />
+        <div className="send-v2__from-dropdown__list">
+          {accounts.map((account, index) => (
+            <AccountListItem
+              account={account}
+              className="account-list-item__dropdown"
+              handleClick={() => {
+                onSelect(account)
+                closeDropdown()
+              }}
+              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,16 +17,18 @@ describe('SendDropdownList Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendDropdownList
-      accounts={[
-        { address: 'mockAccount0' },
-        { address: 'mockAccount1' },
-        { address: 'mockAccount2' },
-      ]}
-      closeDropdown={propsMethodSpies.closeDropdown}
-      onSelect={propsMethodSpies.onSelect}
-      activeAddress="mockAddress2"
-    />, { context: { t: str => str + '_t' } })
+    wrapper = shallow((
+      <SendDropdownList
+        accounts={[
+          { address: 'mockAccount0' },
+          { address: 'mockAccount1' },
+          { address: 'mockAccount2' },
+        ]}
+        closeDropdown={propsMethodSpies.closeDropdown}
+        onSelect={propsMethodSpies.onSelect}
+        activeAddress="mockAddress2"
+      />
+    ), { 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">
-              {this.context.t('setGasPrice')}
-            </div>
-            : <div className="currency-display">
-              {this.context.t('loading')}
-            </div>
+            ? (
+              <div className="currency-display.currency-display--message">
+                {this.context.t('setGasPrice')}
+              </div>
+            )
+            : (
+              <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
-      conversionRate={20}
-      gasTotal="mockGasTotal"
-      primaryCurrency="mockPrimaryCurrency"
-      convertedCurrency="mockConvertedCurrency"
-      showGasButtonGroup={propsMethodSpies.showCustomizeGasModal}
-      onReset={propsMethodSpies.onReset}
-    />, {context: {t: str => str + '_t'}})
+    wrapper = shallow((
+      <GasFeeDisplay
+        conversionRate={20}
+        gasTotal="mockGasTotal"
+        primaryCurrency="mockPrimaryCurrency"
+        convertedCurrency="mockConvertedCurrency"
+        showGasButtonGroup={propsMethodSpies.showCustomizeGasModal}
+        onReset={propsMethodSpies.onReset}
+      />
+    ), {context: {t: str => str + '_t'}})
   })
 
   afterEach(() => {

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

@@ -38,18 +38,23 @@ export default class SendGasRow extends Component {
   renderAdvancedOptionsButton () {
     const { metricsEvent } = this.context
     const { showCustomizeGasModal } = this.props
-    return <div className="advanced-gas-options-btn" onClick={() => {
-      metricsEvent({
-        eventOpts: {
-          category: 'Transactions',
-          action: 'Edit Screen',
-          name: 'Clicked "Advanced Options"',
-        },
-      })
-      showCustomizeGasModal()
-    }}>
-      { this.context.t('advancedOptions') }
-    </div>
+    return (
+      <div
+        className="advanced-gas-options-btn"
+        onClick={() => {
+          metricsEvent({
+            eventOpts: {
+              category: 'Transactions',
+              action: 'Edit Screen',
+              name: 'Clicked "Advanced Options"',
+            },
+          })
+          showCustomizeGasModal()
+        }}
+      >
+        { this.context.t('advancedOptions') }
+      </div>
+    )
   }
 
   setMaxAmount () {
@@ -89,52 +94,58 @@ export default class SendGasRow extends Component {
     } = this.props
     const { metricsEvent } = this.context
 
-    const gasPriceButtonGroup = <div>
-      <GasPriceButtonGroup
-        className="gas-price-button-group--small"
-        showCheck={false}
-        {...gasPriceButtonGroupProps}
-        handleGasPriceSelection={async (...args) => {
-          metricsEvent({
-            eventOpts: {
-              category: 'Transactions',
-              action: 'Edit Screen',
-              name: 'Changed Gas Button',
-            },
-          })
-          await gasPriceButtonGroupProps.handleGasPriceSelection(...args)
+    const gasPriceButtonGroup = (
+      <div>
+        <GasPriceButtonGroup
+          className="gas-price-button-group--small"
+          showCheck={false}
+          {...gasPriceButtonGroupProps}
+          handleGasPriceSelection={async (...args) => {
+            metricsEvent({
+              eventOpts: {
+                category: 'Transactions',
+                action: 'Edit Screen',
+                name: 'Changed Gas Button',
+              },
+            })
+            await gasPriceButtonGroupProps.handleGasPriceSelection(...args)
+            if (maxModeOn) {
+              this.setMaxAmount()
+            }
+          }}
+        />
+        { this.renderAdvancedOptionsButton() }
+      </div>
+    )
+    const gasFeeDisplay = (
+      <GasFeeDisplay
+        conversionRate={conversionRate}
+        convertedCurrency={convertedCurrency}
+        gasLoadingError={gasLoadingError}
+        gasTotal={gasTotal}
+        onReset={() => {
+          resetGasButtons()
           if (maxModeOn) {
             this.setMaxAmount()
           }
         }}
+        onClick={() => showCustomizeGasModal()}
       />
-      { this.renderAdvancedOptionsButton() }
-    </div>
-    const gasFeeDisplay = <GasFeeDisplay
-      conversionRate={conversionRate}
-      convertedCurrency={convertedCurrency}
-      gasLoadingError={gasLoadingError}
-      gasTotal={gasTotal}
-      onReset={() => {
-        resetGasButtons()
-        if (maxModeOn) {
-          this.setMaxAmount()
-        }
-      }}
-      onClick={() => showCustomizeGasModal()}
-    />
-    const advancedGasInputs = <div>
-      <AdvancedGasInputs
-        updateCustomGasPrice={newGasPrice => setGasPrice(newGasPrice, gasLimit)}
-        updateCustomGasLimit={newGasLimit => setGasLimit(newGasLimit, gasPrice)}
-        customGasPrice={gasPrice}
-        customGasLimit={gasLimit}
-        insufficientBalance={insufficientBalance}
-        customPriceIsSafe
-        isSpeedUp={false}
-      />
-      { this.renderAdvancedOptionsButton() }
-    </div>
+    )
+    const advancedGasInputs = (
+      <div>
+        <AdvancedGasInputs
+          updateCustomGasPrice={newGasPrice => setGasPrice(newGasPrice, gasLimit)}
+          updateCustomGasLimit={newGasLimit => setGasLimit(newGasLimit, gasPrice)}
+          customGasPrice={gasPrice}
+          customGasLimit={gasLimit}
+          insufficientBalance={insufficientBalance}
+          customPriceIsSafe
+          isSpeedUp={false}
+        />
+        { this.renderAdvancedOptionsButton() }
+      </div>
+    )
 
     if (advancedInlineGasShown) {
       return advancedGasInputs

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

@@ -17,20 +17,22 @@ describe('SendGasRow Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendGasRow
-      conversionRate={20}
-      convertedCurrency="mockConvertedCurrency"
-      gasFeeError="mockGasFeeError"
-      gasLoadingError={false}
-      gasTotal="mockGasTotal"
-      gasButtonGroupShown={false}
-      showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
-      resetGasButtons={propsMethodSpies.resetGasButtons}
-      gasPriceButtonGroupProps={{
-        someGasPriceButtonGroupProp: 'foo',
-        anotherGasPriceButtonGroupProp: 'bar',
-      }}
-    />, { context: { t: str => str + '_t', metricsEvent: () => ({}) } })
+    wrapper = shallow((
+      <SendGasRow
+        conversionRate={20}
+        convertedCurrency="mockConvertedCurrency"
+        gasFeeError="mockGasFeeError"
+        gasLoadingError={false}
+        gasTotal="mockGasTotal"
+        gasButtonGroupShown={false}
+        showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
+        resetGasButtons={propsMethodSpies.resetGasButtons}
+        gasPriceButtonGroupProps={{
+          someGasPriceButtonGroupProp: 'foo',
+          anotherGasPriceButtonGroupProp: 'bar',
+        }}
+      />
+    ), { 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
-      errors={{ error1: 'abc', error2: 'def' }}
-      errorType="error3"
-    />, { context: { t: str => str + '_t' } })
+    wrapper = shallow((
+      <SendRowErrorMessage
+        errors={{ error1: 'abc', error2: 'def' }}
+        errorType="error3"
+      />
+    ), { 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
-      errorType="mockErrorType"
-      label="mockLabel"
-      showError={false}
-    >
-      <span>Mock Form Field</span>
-    </SendRowWrapper>)
+    wrapper = shallow((
+      <SendRowWrapper
+        errorType="mockErrorType"
+        label="mockLabel"
+        showError={false}
+      >
+        <span>Mock Form Field</span>
+      </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
-        errorType="mockErrorType"
-        label="mockLabel"
-        showError={false}
-      >
-        <span>Mock Custom Label Content</span>
-        <span>Mock Form Field</span>
-      </SendRowWrapper>)
+      wrapper = shallow((
+        <SendRowWrapper
+          errorType="mockErrorType"
+          label="mockLabel"
+          showError={false}
+        >
+          <span>Mock Custom Label Content</span>
+          <span>Mock Form Field</span>
+        </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
-        errorType="mockErrorType"
-        label="mockLabel"
-        showError={false}
-      >
-        <span>Mock Custom Label Content</span>
-        <span>Mock Form Field</span>
-      </SendRowWrapper>)
+      wrapper = shallow((
+        <SendRowWrapper
+          errorType="mockErrorType"
+          label="mockLabel"
+          showError={false}
+        >
+          <span>Mock Custom Label Content</span>
+          <span>Mock Form Field</span>
+        </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,28 +25,30 @@ describe('SendFooter Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendFooter
-      addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
-      amount="mockAmount"
-      clearSend={propsMethodSpies.clearSend}
-      disabled
-      editingTransactionId="mockEditingTransactionId"
-      errors={{}}
-      from={ { address: 'mockAddress', balance: 'mockBalance' } }
-      gasLimit="mockGasLimit"
-      gasPrice="mockGasPrice"
-      gasTotal="mockGasTotal"
-      history={historySpies}
-      inError={false}
-      selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
-      sign={propsMethodSpies.sign}
-      to="mockTo"
-      toAccounts={['mockAccount']}
-      tokenBalance="mockTokenBalance"
-      unapprovedTxs={['mockTx']}
-      update={propsMethodSpies.update}
-      sendErrors={{}}
-    />, { context: { t: str => str, metricsEvent: () => ({}) } })
+    wrapper = shallow((
+      <SendFooter
+        addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
+        amount="mockAmount"
+        clearSend={propsMethodSpies.clearSend}
+        disabled
+        editingTransactionId="mockEditingTransactionId"
+        errors={{}}
+        from={ { address: 'mockAddress', balance: 'mockBalance' } }
+        gasLimit="mockGasLimit"
+        gasPrice="mockGasPrice"
+        gasTotal="mockGasTotal"
+        history={historySpies}
+        inError={false}
+        selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
+        sign={propsMethodSpies.sign}
+        to="mockTo"
+        toAccounts={['mockAccount']}
+        tokenBalance="mockTokenBalance"
+        unapprovedTxs={['mockTx']}
+        update={propsMethodSpies.update}
+        sendErrors={{}}
+      />
+    ), { context: { t: str => str, metricsEvent: () => ({}) } })
   })
 
   afterEach(() => {
@@ -182,27 +184,29 @@ describe('SendFooter Component', function () {
   describe('render', () => {
     beforeEach(() => {
       sinon.stub(SendFooter.prototype, 'formShouldBeDisabled').returns('formShouldBeDisabledReturn')
-      wrapper = shallow(<SendFooter
-        addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
-        amount="mockAmount"
-        clearSend={propsMethodSpies.clearSend}
-        disabled
-        editingTransactionId="mockEditingTransactionId"
-        errors={{}}
-        from={ { address: 'mockAddress', balance: 'mockBalance' } }
-        gasLimit="mockGasLimit"
-        gasPrice="mockGasPrice"
-        gasTotal="mockGasTotal"
-        history={historySpies}
-        inError={false}
-        selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
-        sign={propsMethodSpies.sign}
-        to="mockTo"
-        toAccounts={['mockAccount']}
-        tokenBalance="mockTokenBalance"
-        unapprovedTxs={['mockTx']}
-        update={propsMethodSpies.update}
-      />, { context: { t: str => str, metricsEvent: () => ({}) } })
+      wrapper = shallow((
+        <SendFooter
+          addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
+          amount="mockAmount"
+          clearSend={propsMethodSpies.clearSend}
+          disabled
+          editingTransactionId="mockEditingTransactionId"
+          errors={{}}
+          from={ { address: 'mockAddress', balance: 'mockBalance' } }
+          gasLimit="mockGasLimit"
+          gasPrice="mockGasPrice"
+          gasTotal="mockGasTotal"
+          history={historySpies}
+          inError={false}
+          selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
+          sign={propsMethodSpies.sign}
+          to="mockTo"
+          toAccounts={['mockAccount']}
+          tokenBalance="mockTokenBalance"
+          unapprovedTxs={['mockTx']}
+          update={propsMethodSpies.update}
+        />
+      ), { 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
-      clearSend={propsMethodSpies.clearSend}
-      history={historySpies}
-      titleKey="mockTitleKey"
-    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+    wrapper = shallow((
+      <SendHeader
+        clearSend={propsMethodSpies.clearSend}
+        history={historySpies}
+        titleKey="mockTitleKey"
+      />
+    ), { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
   })
 
   afterEach(() => {

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

@@ -40,33 +40,35 @@ describe('Send Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendTransactionScreen
-      amount="mockAmount"
-      amountConversionRate="mockAmountConversionRate"
-      blockGasLimit="mockBlockGasLimit"
-      conversionRate={10}
-      editingTransactionId="mockEditingTransactionId"
-      fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
-      fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
-      from={ { address: 'mockAddress', balance: 'mockBalance' } }
-      gasLimit="mockGasLimit"
-      gasPrice="mockGasPrice"
-      gasTotal="mockGasTotal"
-      history={{ mockProp: 'history-abc'}}
-      network="3"
-      primaryCurrency="mockPrimaryCurrency"
-      recentBlocks={['mockBlock']}
-      selectedAddress="mockSelectedAddress"
-      selectedToken={{ address: 'mockTokenAddress', decimals: 18, symbol: 'TST' }}
-      showHexData
-      tokenBalance="mockTokenBalance"
-      tokenContract={{ method: 'mockTokenMethod' }}
-      updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
-      updateSendErrors={propsMethodSpies.updateSendErrors}
-      updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
-      resetSendState={propsMethodSpies.resetSendState}
-      updateToNicknameIfNecessary={propsMethodSpies.updateToNicknameIfNecessary}
-    />)
+    wrapper = shallow((
+      <SendTransactionScreen
+        amount="mockAmount"
+        amountConversionRate="mockAmountConversionRate"
+        blockGasLimit="mockBlockGasLimit"
+        conversionRate={10}
+        editingTransactionId="mockEditingTransactionId"
+        fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
+        fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
+        from={ { address: 'mockAddress', balance: 'mockBalance' } }
+        gasLimit="mockGasLimit"
+        gasPrice="mockGasPrice"
+        gasTotal="mockGasTotal"
+        history={{ mockProp: 'history-abc'}}
+        network="3"
+        primaryCurrency="mockPrimaryCurrency"
+        recentBlocks={['mockBlock']}
+        selectedAddress="mockSelectedAddress"
+        selectedToken={{ address: 'mockTokenAddress', decimals: 18, symbol: 'TST' }}
+        showHexData
+        tokenBalance="mockTokenBalance"
+        tokenContract={{ method: 'mockTokenMethod' }}
+        updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
+        updateSendErrors={propsMethodSpies.updateSendErrors}
+        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">
-          <Identicon address={this.state.ensAddress} diameter={60} />
-          <div className="address-book__view-contact__group__value">
-            { this.state.ensAddress }
+        {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
-      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>
+    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">
-      <ContactContentComponent />
-    </div>)
+    return (ContactContentComponent && (
+      <div className="address-book-contact-content">
+        <ContactContentComponent />
+      </div>
+    ))
   }
 
   renderAddressBookContent () {
     const { hideAddressBook, showingMyAccounts } = this.props
 
     if (!hideAddressBook && !showingMyAccounts) {
-      return (<div className="address-book">
-        { this.renderMyAccountsButton() }
-        { this.renderAddresses() }
-      </div>)
+      return (
+        <div className="address-book">
+          { this.renderMyAccountsButton() }
+          { this.renderAddresses() }
+        </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">
-          { this.renderAddButton() }
-        </div>}
+        {!addingContact && (
+          <div className="address-book-add-button">
+            { this.renderAddButton() }
+          </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', {
-          'networks-tab__networks-list-name--selected': displayNetworkListItemAsSelected,
-        }) }>
+        <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,18 +226,20 @@ export default class NetworksTab extends PureComponent {
         {this.renderSubHeader()}
         {this.renderNetworksTabContent()}
         {!networkIsSelected && !networksTabIsInAddMode
-          ? <div className="networks-tab__add-network-button-wrapper">
-            <Button
-              type="primary"
-              onClick={event => {
-                event.preventDefault()
-                setSelectedSettingsRpcUrl(null)
-                setNetworksTabAddMode(true)
-              }}
-            >
-              { this.context.t('addNetwork') }
-            </Button>
-          </div>
+          ? (
+            <div className="networks-tab__add-network-button-wrapper">
+              <Button
+                type="primary"
+                onClick={event => {
+                  event.preventDefault()
+                  setSelectedSettingsRpcUrl(null)
+                  setNetworksTabAddMode(true)
+                }}
+              >
+                { 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>
     )
   }