Enforce a single boolean attr notation in JSX (#7465)

This changeset enables the ESLint rule enforcing a single notation for boolean
attributes in JSX—explictly setting the value to `true` is no longer allowed
(as it was never needed).[1]

From the docs for JSX:[2]

> If you pass no value for a prop, it defaults to `true`.

  [1]:https://github.com/yannickcr/eslint-plugin-react/blob/80935658/docs/rules/jsx-boolean-value.md
  [2]:https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true

I have chosen to use this default as it the most consistent with HTML (a la
`checked` and `disabled`).

.eslintrc

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

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

@@ -71,7 +71,7 @@ export default class AppHeader extends PureComponent {
         <Identicon
           address={selectedAddress}
           diameter={32}
-          addBorder={true}
+          addBorder
         />
       </div>
     )
@@ -92,7 +92,7 @@ export default class AppHeader extends PureComponent {
         className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}>
         <div className="app-header__contents">
           <MetaFoxLogo
-            unsetIconHeight={true}
+            unsetIconHeight
             onClick={() => history.push(DEFAULT_ROUTE)}
           />
           <div className="app-header__account-menu-container">

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/>
       )
     })
 

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

@@ -26,9 +26,9 @@ describe('AdvancedTabContent Component', function () {
       timeRemaining="21500"
       transactionFee="$0.25"
       insufficientBalance={false}
-      customPriceIsSafe={true}
+      customPriceIsSafe
       isSpeedUp={false}
-      isEthereumNetwork={true}
+      isEthereumNetwork
     />)
   })
 

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

@@ -23,7 +23,7 @@ export default class BasicTabContent extends Component {
         {!gasPriceButtonGroupProps.loading
           ? <GasPriceButtonGroup
             className="gas-price-button-group--alt"
-            showCheck={true}
+            showCheck
             {...gasPriceButtonGroupProps}
           />
           : <Loading />

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

@@ -204,7 +204,7 @@ export default class GasModalPageContainer extends Component {
           }}
           submitText={this.context.t('save')}
           headerCloseText={this.context.t('close')}
-          hideCancel={true}
+          hideCancel
         />
       </div>
     )

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

@@ -200,7 +200,7 @@ describe('GasModalPageContainer Component', function () {
         customGasLimitInHex="mockCustomGasLimitInHex"
         insufficientBalance={false}
         disableSave={false}
-        hideBasic={true}
+        hideBasic
       />)
       const renderTabsResult = wrapper.instance().renderTabs()
 

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

@@ -110,7 +110,7 @@ describe('Modal Component', () => {
         cancelText="Cancel"
         onSubmit={handleSubmit}
         submitText="Submit"
-        submitDisabled={true}
+        submitDisabled
         headerText="My Header"
         onClose={handleCancel}
       />

ui/app/components/app/transaction-activity-log/tests/transaction-activity-log.component.test.js

@@ -90,7 +90,7 @@ describe('TransactionActivityLog Component', () => {
         onCancel={() => {}}
         onRetry={() => {}}
         primaryTransactionStatus="pending"
-        isEarliestNonce={true}
+        isEarliestNonce
       />,
       { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
     )

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

@@ -70,7 +70,7 @@ describe('TransactionListItemDetails Component', () => {
     const wrapper = shallow(
       <TransactionListItemDetails
         transactionGroup={transactionGroup}
-        showSpeedUp={true}
+        showSpeedUp
       />,
       { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
     )

ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js

@@ -53,7 +53,7 @@ export default class TransactionViewBalance extends PureComponent {
                 value={balance}
                 type={PRIMARY}
                 ethNumberOfDecimals={4}
-                hideTitle={true}
+                hideTitle
               />
               {
                 balanceIsCached ? <span className="transaction-view-balance__cached-star">*</span> : null
@@ -69,7 +69,7 @@ export default class TransactionViewBalance extends PureComponent {
                   value={balance}
                   type={SECONDARY}
                   ethNumberOfDecimals={4}
-                  hideTitle={true}
+                  hideTitle
                 />
               )
             }

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

@@ -18,7 +18,7 @@ describe('UserPreferencedCurrencyDisplay Component', () => {
     it('should pass all props to the CurrencyDisplay child component', () => {
       const wrapper = shallow(
         <UserPreferencedCurrencyDisplay
-          prop1={true}
+          prop1
           prop2="test"
           prop3={1}
         />

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

@@ -130,7 +130,7 @@ describe('CurrencyInput Component', () => {
             fiatSuffix="USD"
             nativeSuffix="ETH"
             useFiat
-            hideFiat={true}
+            hideFiat
             nativeCurrency="ETH"
             currentCurrency="usd"
             conversionRate={231.06}

ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js

@@ -16,7 +16,7 @@ describe('MetaFoxLogo', () => {
 
   it('does not set icon height and width when unsetIconHeight is true', () => {
     const wrapper = mount(
-      <MetaFoxLogo unsetIconHeight={true} />
+      <MetaFoxLogo unsetIconHeight />
     )
 
     assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('width'), null)

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

@@ -13,7 +13,7 @@ describe('Page Container Header', () => {
     onClose = sinon.spy()
 
     wrapper = shallow(<PageContainerHeader
-      showBackButton={true}
+      showBackButton
       onBackButtonClick={onBackButtonClick}
       backButtonStyles={style}
       title="Test Title"

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

@@ -78,7 +78,7 @@ export default class ConfirmApprove extends Component {
       <ConfirmTransactionBase
         toAddress={toAddress}
         identiconAddress={tokenAddress}
-        showAccountInHeader={true}
+        showAccountInHeader
         title={tokensText}
         contentComponent={<ConfirmApproveContent
           siteImage={siteImage}
@@ -98,7 +98,7 @@ export default class ConfirmApprove extends Component {
           ethTransactionTotal={ethTransactionTotal}
           fiatTransactionTotal={fiatTransactionTotal}
         />}
-        hideSenderToRecipient={true}
+        hideSenderToRecipient
         customTxParamsData={customPermissionAmount
           ? getCustomTxParamsData(data, { customPermissionAmount, tokenAmount, decimals })
           : null

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

@@ -261,7 +261,7 @@ export default class ConfirmTransactionBase extends Component {
                 customGasPrice={customGas.gasPrice}
                 customGasLimit={customGas.gasLimit}
                 insufficientBalance={insufficientBalance}
-                customPriceIsSafe={true}
+                customPriceIsSafe
                 isSpeedUp={false}
               />
               : null

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

@@ -47,17 +47,17 @@ export default class CreateAccountPage extends Component {
         <div className="new-account__form">
           <Switch>
             <Route
-              exact={true}
+              exact
               path={NEW_ACCOUNT_ROUTE}
               component={NewAccountCreateForm}
             />
             <Route
-              exact={true}
+              exact
               path={IMPORT_ACCOUNT_ROUTE}
               component={NewAccountImportForm}
             />
             <Route
-              exact={true}
+              exact
               path={CONNECT_HARDWARE_ROUTE}
               component={ConnectHardwareForm}
             />

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

@@ -58,13 +58,13 @@ export default class NewAccountCreateForm extends Component {
         <div className="new-account-create-form__buttons">
           <Button
             type="default"
-            large={true}
+            large
             className="new-account-create-form__button"
             onClick={() => history.push(DEFAULT_ROUTE)}
           >{this.context.t('cancel')}</Button>
           <Button
             type="secondary"
-            large={true}
+            large
             className="new-account-create-form__button"
             onClick={createClick}
           >{this.context.t('create')}</Button>

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

@@ -83,7 +83,7 @@ export default class AccountListItem extends Component {
                 <UserPreferencedCurrencyDisplay
                   type={PRIMARY}
                   value={balance}
-                  hideTitle={true}
+                  hideTitle
                 />
                 {
                   balanceIsCached ? <span className="account-list-item__cached-star">*</span> : null
@@ -94,7 +94,7 @@ export default class AccountListItem extends Component {
                   <UserPreferencedCurrencyDisplay
                     type={SECONDARY}
                     value={balance}
-                    hideTitle={true}
+                    hideTitle
                   />
                 )
               }

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

@@ -130,7 +130,7 @@ export default class SendGasRow extends Component {
         customGasPrice={gasPrice}
         customGasLimit={gasLimit}
         insufficientBalance={insufficientBalance}
-        customPriceIsSafe={true}
+        customPriceIsSafe
         isSpeedUp={false}
       />
       { this.renderAdvancedOptionsButton() }

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

@@ -16,7 +16,7 @@ describe('SendContent Component', function () {
   beforeEach(() => {
     wrapper = shallow(
       <SendContent
-        showHexData={true}
+        showHexData
       />,
       { context: { t: str => str + '_t' } }
     )

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

@@ -29,7 +29,7 @@ describe('SendFooter Component', function () {
       addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
       amount="mockAmount"
       clearSend={propsMethodSpies.clearSend}
-      disabled={true}
+      disabled
       editingTransactionId="mockEditingTransactionId"
       errors={{}}
       from={ { address: 'mockAddress', balance: 'mockBalance' } }
@@ -186,7 +186,7 @@ describe('SendFooter Component', function () {
         addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
         amount="mockAmount"
         clearSend={propsMethodSpies.clearSend}
-        disabled={true}
+        disabled
         editingTransactionId="mockEditingTransactionId"
         errors={{}}
         from={ { address: 'mockAddress', balance: 'mockBalance' } }

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

@@ -58,7 +58,7 @@ describe('Send Component', function () {
       recentBlocks={['mockBlock']}
       selectedAddress="mockSelectedAddress"
       selectedToken="mockSelectedToken"
-      showHexData={true}
+      showHexData
       tokenBalance="mockTokenBalance"
       tokenContract="mockTokenContract"
       updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}

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

@@ -61,7 +61,7 @@ export default class ToAutoComplete extends Component {
               }}
               icon={this.getListItemIcon(account.address, to)}
               displayBalance={false}
-              displayAddress={true}
+              displayAddress
             />
           ))}
         </div>

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

@@ -100,7 +100,7 @@ export default class EditContact extends PureComponent {
               onChange={e => this.setState({ newMemo: e.target.value })}
               fullWidth
               margin="dense"
-              multiline={true}
+              multiline
               rows={3}
               classes={{
                 inputMultiline: 'address-book__view-contact__text-area',