Disable unnecessary curly braces in JSX (#7454)

.eslintrc

@@ -148,6 +148,7 @@
     "operator-linebreak": [2, "after", { "overrides": { "?": "ignore", ":": "ignore" } }],
     "padded-blocks": "off",
     "quotes": [2, "single", {"avoidEscape": true, "allowTemplateLiterals": true}],
+    "react/jsx-curly-brace-presence": [2, { "props": "never", "children": "never" }],
     "react/no-deprecated": 0,
     "react/default-props-match-prop-types": 2,
     "semi": [2, "never"],

test/unit/ui/app/components/token-cell.spec.js

@@ -37,12 +37,12 @@ describe('Token Cell', () => {
     wrapper = mount(
       <Provider store={store}>
         <TokenCell
-          address={'0xAnotherToken'}
-          symbol={'TEST'}
-          string={'5.000'}
+          address="0xAnotherToken"
+          symbol="TEST"
+          string="5.000"
           network={22}
-          currentCurrency={'usd'}
-          image={'./test-image'}
+          currentCurrency="usd"
+          image="./test-image"
         />
       </Provider>
     )

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

@@ -76,7 +76,7 @@ export default class AccountDetails extends Component {
           </div>
         </div>
         <Tooltip
-          position={'bottom'}
+          position="bottom"
           title={hasCopied ? t('copiedExclamation') : t('copyToClipboard')}
           wrapperClassName="account-details__tooltip"
         >

ui/app/components/app/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js

@@ -14,15 +14,15 @@ describe('Confirm Detail Row Component', function () {
   beforeEach(() => {
     wrapper = shallow(
       <ConfirmDetailRow
-        errorType={'mockErrorType'}
-        label={'mockLabel'}
+        errorType="mockErrorType"
+        label="mockLabel"
         showError={false}
-        primaryText = {'mockFiatText'}
-        secondaryText = {'mockEthText'}
-        primaryValueTextColor= {'mockColor'}
+        primaryText = "mockFiatText"
+        secondaryText = "mockEthText"
+        primaryValueTextColor= "mockColor"
         onHeaderClick= {propsMethodSpies.onHeaderClick}
-        headerText = {'mockHeaderText'}
-        headerTextClassName = {'mockHeaderClass'}
+        headerText = "mockHeaderText"
+        headerTextClassName = "mockHeaderClass"
       />
     )
   })

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 = {true}/>
+        <Menu className = "Test Class" isShowing = {true}/>
       )
     })
 
@@ -29,9 +29,9 @@ describe('Dropdown Menu Components', () => {
     beforeEach(() => {
       wrapper = shallow(
         <Item
-          icon = {'test icon'}
-          text = {'test text'}
-          className = {'test className'}
+          icon = "test icon"
+          text = "test text"
+          className = "test className"
           onClick = {onClickSpy}
         />
       )

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

@@ -8,10 +8,10 @@ describe('Network Dropdown Icon', () => {
 
   beforeEach(() => {
     wrapper = shallow(<NetworkDropdownIcon
-      backgroundColor = {'red'}
+      backgroundColor = "red"
       isSelected = {false}
-      innerBorder = {'none'}
-      diameter = {'12'}
+      innerBorder = "none"
+      diameter = "12"
     />)
   })
 

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

@@ -21,10 +21,10 @@ describe('AdvancedTabContent Component', function () {
     wrapper = shallow(<AdvancedTabContent
       updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice}
       updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit}
-      customModalGasPriceInHex={'11'}
-      customModalGasLimitInHex={'23456'}
-      timeRemaining={'21500'}
-      transactionFee={'$0.25'}
+      customModalGasPriceInHex="11"
+      customModalGasLimitInHex="23456"
+      timeRemaining="21500"
+      transactionFee="$0.25"
       insufficientBalance={false}
       customPriceIsSafe={true}
       isSpeedUp={false}

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

@@ -116,7 +116,7 @@ export default class GasModalPageContainer extends Component {
             <span className="gas-modal-content__info-row__send-info__value">{sendAmount}</span>
           </div>
           <div className="gas-modal-content__info-row__transaction-info">
-            <span className={'gas-modal-content__info-row__transaction-info__label'}>{this.context.t('transactionFee')}</span>
+            <span className="gas-modal-content__info-row__transaction-info__label">{this.context.t('transactionFee')}</span>
             <span className="gas-modal-content__info-row__transaction-info__value">{transactionFee}</span>
           </div>
           <div className="gas-modal-content__info-row__total-info">

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

@@ -74,9 +74,9 @@ describe('GasModalPageContainer Component', function () {
       customGasLimit={54321}
       gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
       infoRowProps={mockInfoRowProps}
-      currentTimeEstimate={'1 min 31 sec'}
-      customGasPriceInHex={'mockCustomGasPriceInHex'}
-      customGasLimitInHex={'mockCustomGasLimitInHex'}
+      currentTimeEstimate="1 min 31 sec"
+      customGasPriceInHex="mockCustomGasPriceInHex"
+      customGasLimitInHex="mockCustomGasLimitInHex"
       insufficientBalance={false}
       disableSave={false}
     />)
@@ -195,9 +195,9 @@ describe('GasModalPageContainer Component', function () {
         customGasLimit={54321}
         gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
         infoRowProps={mockInfoRowProps}
-        currentTimeEstimate={'1 min 31 sec'}
-        customGasPriceInHex={'mockCustomGasPriceInHex'}
-        customGasLimitInHex={'mockCustomGasLimitInHex'}
+        currentTimeEstimate="1 min 31 sec"
+        customGasPriceInHex="mockCustomGasPriceInHex"
+        customGasLimitInHex="mockCustomGasLimitInHex"
         insufficientBalance={false}
         disableSave={false}
         hideBasic={true}

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

@@ -48,7 +48,7 @@ export default class ConfirmRemoveAccount extends Component {
           <a
             className=""
             href={genAccountLink(identity.address, this.props.network)}
-            target={'_blank'}
+            target="_blank"
             title={this.context.t('etherscanView')}
           >
             <img src="images/popout.svg" />

ui/app/components/app/modals/loading-network-error/loading-network-error.component.js

@@ -12,7 +12,7 @@ const LoadingNetworkError = (props, context) => {
       submitText={t('tryAgain')}
     >
       <ModalContent
-        description={'Oops! Something went wrong.'}
+        description="Oops! Something went wrong."
       />
     </Modal>
   )

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

@@ -102,7 +102,7 @@ export default class MetaMetricsOptInModal extends Component {
                     hideModal()
                   })
               }}
-              cancelText={'No Thanks'}
+              cancelText="No Thanks"
               hideCancel={false}
               onSubmit={() => {
                 setParticipateInMetaMetrics(true)
@@ -118,8 +118,8 @@ export default class MetaMetricsOptInModal extends Component {
                     hideModal()
                   })
               }}
-              submitText={'I agree'}
-              submitButtonType={'confirm'}
+              submitText="I agree"
+              submitButtonType="confirm"
               disabled={false}
             />
           </div>

ui/app/components/app/modals/qr-scanner/qr-scanner.component.js

@@ -142,14 +142,14 @@ export default class QrScanner extends Component {
 
   renderVideo () {
     return (
-      <div className={'qr-scanner__content__video-wrapper'}>
+      <div className="qr-scanner__content__video-wrapper">
         <video
           id="video"
           style={{
             display: this.state.ready ? 'block' : 'none',
           }}
         />
-        { !this.state.ready ? <Spinner color={'#F7C06C'} /> : null}
+        { !this.state.ready ? <Spinner color="#F7C06C" /> : null}
       </div>
     )
   }
@@ -172,12 +172,12 @@ export default class QrScanner extends Component {
         <div className="qr-scanner__close" onClick={this.stopAndClose}></div>
 
         <div className="qr-scanner__image">
-          <img src={'images/webcam.svg'} width={70} height={70} />
+          <img src="images/webcam.svg" width={70} height={70} />
         </div>
         <div className="qr-scanner__title">
           { title }
         </div>
-        <div className={'qr-scanner__error'}>
+        <div className="qr-scanner__error">
           {msg}
         </div>
         <PageContainerFooter
@@ -207,7 +207,7 @@ export default class QrScanner extends Component {
         <div className="qr-scanner__content">
           { this.renderVideo() }
         </div>
-        <div className={'qr-scanner__status'}>
+        <div className="qr-scanner__status">
           {this.state.msg}
         </div>
       </div>

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

@@ -34,9 +34,9 @@ export default class Sidebar extends Component {
     const { transaction = {} } = sidebarProps
     switch (type) {
       case WALLET_VIEW_SIDEBAR:
-        return <WalletView responsiveDisplayClassname={'sidebar-right' } />
+        return <WalletView responsiveDisplayClassname="sidebar-right" />
       case 'customize-gas':
-        return <div className={'sidebar-left'}><CustomizeGas transaction={transaction} /></div>
+        return <div className="sidebar-left"><CustomizeGas transaction={transaction} /></div>
       default:
         return null
     }

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

@@ -19,8 +19,8 @@ describe('Sidebar Component', function () {
     wrapper = shallow(<Sidebar
       sidebarOpen={false}
       hideSidebar={propsMethodSpies.hideSidebar}
-      transitionName={'someTransition'}
-      type={'wallet-view'}
+      transitionName="someTransition"
+      type="wallet-view"
     />)
   })
 

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

@@ -12,9 +12,9 @@ sinon.spy(ButtonGroup.prototype, 'handleButtonClick')
 sinon.spy(ButtonGroup.prototype, 'renderButtons')
 
 const mockButtons = [
-  <button onClick={childButtonSpies.onClick} key={'a'}><div className="mockClass" /></button>,
-  <button onClick={childButtonSpies.onClick} key={'b'}></button>,
-  <button onClick={childButtonSpies.onClick} key={'c'}></button>,
+  <button onClick={childButtonSpies.onClick} key="a"><div className="mockClass" /></button>,
+  <button onClick={childButtonSpies.onClick} key="b"></button>,
+  <button onClick={childButtonSpies.onClick} key="c"></button>,
 ]
 
 describe('ButtonGroup Component', function () {

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

@@ -14,10 +14,10 @@ describe('Page Footer', () => {
     wrapper = shallow(<PageFooter
       onCancel = {onCancel}
       onSubmit = {onSubmit}
-      cancelText = {'Cancel'}
-      submitText = {'Submit'}
+      cancelText = "Cancel"
+      submitText = "Submit"
       disabled = {false}
-      submitButtonType = {'Test Type'}
+      submitButtonType = "Test Type"
     />)
   })
 

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

@@ -16,9 +16,9 @@ describe('Page Container Header', () => {
       showBackButton = {true}
       onBackButtonClick = {onBackButtonClick}
       backButtonStyles = {style}
-      title = {'Test Title'}
-      subtitle = {'Test Subtitle'}
-      tabs = {'Test Tab'}
+      title = "Test Title"
+      subtitle = "Test Subtitle"
+      tabs = "Test Tab"
       onClose = {onClose}
     />)
   })

ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js

@@ -56,7 +56,7 @@ export default class ConfirmDeployContract extends Component {
   render () {
     return (
       <ConfirmTransactionBase
-        actionKey={'contractDeployment'}
+        actionKey="contractDeployment"
         dataComponent={this.renderData()}
       />
     )

ui/app/pages/confirm-send-ether/confirm-send-ether.component.js

@@ -30,7 +30,7 @@ export default class ConfirmSendEther extends Component {
 
     return (
       <ConfirmTransactionBase
-        actionKey={'confirm'}
+        actionKey="confirm"
         hideData={hideData}
         onEdit={confirmTransactionData => this.handleEdit(confirmTransactionData)}
       />

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

@@ -104,7 +104,7 @@ export default class MetaMetricsOptIn extends Component {
                       })
                   })
               }}
-              cancelText={'No Thanks'}
+              cancelText="No Thanks"
               hideCancel={false}
               onSubmit={() => {
                 setParticipateInMetaMetrics(true)
@@ -137,8 +137,8 @@ export default class MetaMetricsOptIn extends Component {
                       })
                   })
               }}
-              submitText={'I agree'}
-              submitButtonType={'primary'}
+              submitText="I agree"
+              submitButtonType="primary"
               disabled={false}
             />
             <div className="metametrics-opt-in__bottom-text">

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

@@ -25,10 +25,10 @@ describe('AccountListItem Component', function () {
   beforeEach(() => {
     wrapper = shallow(<AccountListItem
       account={ { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' } }
-      className={'mockClassName'}
+      className="mockClassName"
       conversionRate={4}
-      currentCurrency={'mockCurrentyCurrency'}
-      nativeCurrency={'ETH'}
+      currentCurrency="mockCurrentyCurrency"
+      nativeCurrency="ETH"
       displayAddress={false}
       displayBalance={false}
       handleClick={propsMethodSpies.handleClick}

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

@@ -23,9 +23,9 @@ describe('AddRecipient Component', function () {
       closeToDropdown={propsMethodSpies.closeToDropdown}
       inError={false}
       inWarning={false}
-      network={'mockNetwork'}
+      network="mockNetwork"
       openToDropdown={propsMethodSpies.openToDropdown}
-      to={'mockTo'}
+      to="mockTo"
       toAccounts={['mockAccount']}
       toDropdownOpen={false}
       updateGas={propsMethodSpies.updateGas}

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

@@ -64,7 +64,7 @@ export default class AmountMaxButton extends Component {
     const { maxModeOn, buttonDataLoading, inError } = this.props
 
     return (
-      <div className={'send-v2__amount-max'} onClick={buttonDataLoading || inError ? null : this.onMaxClick}>
+      <div className="send-v2__amount-max" onClick={buttonDataLoading || inError ? null : this.onMaxClick}>
         <input type="checkbox" checked={maxModeOn} />
         <div className={classnames('send-v2__amount-max__button', { 'send-v2__amount-max__button__disabled': buttonDataLoading || inError })}>
           {this.context.t('max')}

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

@@ -19,13 +19,13 @@ describe('AmountMaxButton Component', function () {
 
   beforeEach(() => {
     wrapper = shallow(<AmountMaxButton
-      balance={'mockBalance'}
-      gasTotal={'mockGasTotal'}
+      balance="mockBalance"
+      gasTotal="mockGasTotal"
       maxModeOn={false}
       selectedToken={ { address: 'mockTokenAddress' } }
       setAmountToMax={propsMethodSpies.setAmountToMax}
       setMaxModeTo={propsMethodSpies.setMaxModeTo}
-      tokenBalance={'mockTokenBalance'}
+      tokenBalance="mockTokenBalance"
     />, {
       context: {
         t: str => str + '_t',

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

@@ -108,7 +108,7 @@ export default class SendAmountRow extends Component {
       <SendRowWrapper
         label={`${this.context.t('amount')}:`}
         showError={inError}
-        errorType={'amount'}
+        errorType="amount"
       >
         {gasTotal && <AmountMaxButton inError={inError} />}
         { this.renderInput() }

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

@@ -26,17 +26,17 @@ describe('SendAmountRow Component', function () {
 
   beforeEach(() => {
     wrapper = shallow(<SendAmountRow
-      amount={'mockAmount'}
-      amountConversionRate={'mockAmountConversionRate'}
-      balance={'mockBalance'}
+      amount="mockAmount"
+      amountConversionRate="mockAmountConversionRate"
+      balance="mockBalance"
       conversionRate={7}
-      convertedCurrency={'mockConvertedCurrency'}
-      gasTotal={'mockGasTotal'}
+      convertedCurrency="mockConvertedCurrency"
+      gasTotal="mockGasTotal"
       inError={false}
-      primaryCurrency={'mockPrimaryCurrency'}
+      primaryCurrency="mockPrimaryCurrency"
       selectedToken={ { address: 'mockTokenAddress' } }
       setMaxModeTo={propsMethodSpies.setMaxModeTo}
-      tokenBalance={'mockTokenBalance'}
+      tokenBalance="mockTokenBalance"
       updateGasFeeError={propsMethodSpies.updateGasFeeError}
       updateSendAmount={propsMethodSpies.updateSendAmount}
       updateSendAmountError={propsMethodSpies.updateSendAmountError}

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
   }
 

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

@@ -25,7 +25,7 @@ describe('SendDropdownList Component', function () {
       ]}
       closeDropdown={propsMethodSpies.closeDropdown}
       onSelect={propsMethodSpies.onSelect}
-      activeAddress={'mockAddress2'}
+      activeAddress="mockAddress2"
     />, { context: { t: str => str + '_t' } })
   })
 
@@ -39,7 +39,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/test/gas-fee-display.component.test.js

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

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

@@ -152,7 +152,7 @@ export default class SendGasRow extends Component {
       <SendRowWrapper
         label={`${this.context.t('transactionFee')}:`}
         showError={gasFeeError}
-        errorType={'gasFee'}
+        errorType="gasFee"
       >
         { this.renderContent() }
       </SendRowWrapper>

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

@@ -19,10 +19,10 @@ describe('SendGasRow Component', function () {
   beforeEach(() => {
     wrapper = shallow(<SendGasRow
       conversionRate={20}
-      convertedCurrency={'mockConvertedCurrency'}
-      gasFeeError={'mockGasFeeError'}
+      convertedCurrency="mockConvertedCurrency"
+      gasFeeError="mockGasFeeError"
       gasLoadingError={false}
-      gasTotal={'mockGasTotal'}
+      gasTotal="mockGasTotal"
       gasButtonGroupShown={false}
       showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
       resetGasButtons={propsMethodSpies.resetGasButtons}

ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js

@@ -29,7 +29,7 @@ export default class SendHexDataRow extends Component {
       <SendRowWrapper
         label={`${t('hexData')}:`}
         showError={inError}
-        errorType={'amount'}
+        errorType="amount"
       >
         <textarea
           onInput={this.onInput}

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

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

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

@@ -10,8 +10,8 @@ describe('SendContent Component', function () {
 
   beforeEach(() => {
     wrapper = shallow(<SendRowWrapper
-      errorType={'mockErrorType'}
-      label={'mockLabel'}
+      errorType="mockErrorType"
+      label="mockLabel"
       showError={false}
     >
       <span>Mock Form Field</span>
@@ -54,8 +54,8 @@ 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'}
+        errorType="mockErrorType"
+        label="mockLabel"
         showError={false}
       >
         <span>Mock Custom Label Content</span>
@@ -66,8 +66,8 @@ describe('SendContent Component', function () {
 
     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'}
+        errorType="mockErrorType"
+        label="mockLabel"
         showError={false}
       >
         <span>Mock Custom Label Content</span>

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

@@ -27,22 +27,22 @@ describe('SendFooter Component', function () {
   beforeEach(() => {
     wrapper = shallow(<SendFooter
       addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
-      amount={'mockAmount'}
+      amount="mockAmount"
       clearSend={propsMethodSpies.clearSend}
       disabled={true}
-      editingTransactionId={'mockEditingTransactionId'}
+      editingTransactionId="mockEditingTransactionId"
       errors={{}}
       from={ { address: 'mockAddress', balance: 'mockBalance' } }
-      gasLimit={'mockGasLimit'}
-      gasPrice={'mockGasPrice'}
-      gasTotal={'mockGasTotal'}
+      gasLimit="mockGasLimit"
+      gasPrice="mockGasPrice"
+      gasTotal="mockGasTotal"
       history={historySpies}
       inError={false}
       selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
       sign={propsMethodSpies.sign}
-      to={'mockTo'}
+      to="mockTo"
       toAccounts={['mockAccount']}
-      tokenBalance={'mockTokenBalance'}
+      tokenBalance="mockTokenBalance"
       unapprovedTxs={['mockTx']}
       update={propsMethodSpies.update}
       sendErrors={{}}
@@ -184,22 +184,22 @@ describe('SendFooter Component', function () {
       sinon.stub(SendFooter.prototype, 'formShouldBeDisabled').returns('formShouldBeDisabledReturn')
       wrapper = shallow(<SendFooter
         addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
-        amount={'mockAmount'}
+        amount="mockAmount"
         clearSend={propsMethodSpies.clearSend}
         disabled={true}
-        editingTransactionId={'mockEditingTransactionId'}
+        editingTransactionId="mockEditingTransactionId"
         errors={{}}
         from={ { address: 'mockAddress', balance: 'mockBalance' } }
-        gasLimit={'mockGasLimit'}
-        gasPrice={'mockGasPrice'}
-        gasTotal={'mockGasTotal'}
+        gasLimit="mockGasLimit"
+        gasPrice="mockGasPrice"
+        gasTotal="mockGasTotal"
         history={historySpies}
         inError={false}
         selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
         sign={propsMethodSpies.sign}
-        to={'mockTo'}
+        to="mockTo"
         toAccounts={['mockAccount']}
-        tokenBalance={'mockTokenBalance'}
+        tokenBalance="mockTokenBalance"
         unapprovedTxs={['mockTx']}
         update={propsMethodSpies.update}
       />, { context: { t: str => str, metricsEvent: () => ({}) } })

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

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

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

@@ -41,26 +41,26 @@ describe('Send Component', function () {
 
   beforeEach(() => {
     wrapper = shallow(<SendTransactionScreen
-      amount={'mockAmount'}
-      amountConversionRate={'mockAmountConversionRate'}
-      blockGasLimit={'mockBlockGasLimit'}
+      amount="mockAmount"
+      amountConversionRate="mockAmountConversionRate"
+      blockGasLimit="mockBlockGasLimit"
       conversionRate={10}
-      editingTransactionId={'mockEditingTransactionId'}
+      editingTransactionId="mockEditingTransactionId"
       fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
       fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
       from={ { address: 'mockAddress', balance: 'mockBalance' } }
-      gasLimit={'mockGasLimit'}
-      gasPrice={'mockGasPrice'}
-      gasTotal={'mockGasTotal'}
+      gasLimit="mockGasLimit"
+      gasPrice="mockGasPrice"
+      gasTotal="mockGasTotal"
       history={{ mockProp: 'history-abc'}}
-      network={'3'}
-      primaryCurrency={'mockPrimaryCurrency'}
+      network="3"
+      primaryCurrency="mockPrimaryCurrency"
       recentBlocks={['mockBlock']}
-      selectedAddress={'mockSelectedAddress'}
-      selectedToken={'mockSelectedToken'}
+      selectedAddress="mockSelectedAddress"
+      selectedToken="mockSelectedToken"
       showHexData={true}
-      tokenBalance={'mockTokenBalance'}
-      tokenContract={'mockTokenContract'}
+      tokenBalance="mockTokenBalance"
+      tokenContract="mockTokenContract"
       updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
       updateSendErrors={propsMethodSpies.updateSendErrors}
       updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}

ui/app/pages/send/to-autocomplete.component.js

@@ -26,7 +26,7 @@ export default class ToAutoComplete extends Component {
 
   getListItemIcon (listItemAddress, toAddress) {
     return toAddress && listItemAddress === toAddress
-      ? <i className={'fa fa-check fa-lg'}
+      ? <i className="fa fa-check fa-lg"
         style={{
           color: '#02c9b1',
         }}
@@ -48,13 +48,13 @@ export default class ToAutoComplete extends Component {
 
     return (
       <div>
-        <div className={'send-v2__from-dropdown__close-area'} onClick={closeDropdown} />
-        <div className={'send-v2__from-dropdown__list'}>
+        <div className="send-v2__from-dropdown__close-area" onClick={closeDropdown} />
+        <div className="send-v2__from-dropdown__list">
           {accountsToRender.map((account, i) => (
             <AccountListItem
               key={i}
               account={account}
-              className={'account-list-item__dropdown'}
+              className="account-list-item__dropdown"
               handleClick={() => {
                 onChange(account.address)
                 closeDropdown()
@@ -106,7 +106,7 @@ export default class ToAutoComplete extends Component {
     } = this.props
 
     return (
-      <div className={'send-v2__to-autocomplete'}>
+      <div className="send-v2__to-autocomplete">
         <input
           className={classnames('send-v2__to-autocomplete__input', {
             'send-v2__error-border': inError,
@@ -122,7 +122,7 @@ export default class ToAutoComplete extends Component {
         {
           to
             ? null
-            : <i className={'fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret'}
+            : <i className="fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret"
               onClick={() => this.handleInputEvent()}
               style={{
                 style: {color: '#dedede'},

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

@@ -123,7 +123,7 @@ export default class AddContact extends PureComponent {
             history.push(CONTACT_LIST_ROUTE)
           }}
           submitText={this.context.t('save')}
-          submitButtonType={'confirm'}
+          submitButtonType="confirm"
         />
       </div>
     )

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

@@ -133,7 +133,7 @@ export default class EditContact extends PureComponent {
             history.push(`${viewRoute}/${address}`)
           }}
           submitText={this.context.t('save')}
-          submitButtonType={'confirm'}
+          submitButtonType="confirm"
         />
       </div>
     )