Use ternary conditionals instead of && (#12406)

ui/components/app/account-list-item/account-list-item.js

@@ -24,11 +24,8 @@ export default function AccountListItem({
           className="account-list-item__identicon"
           diameter={18}
         />
-
         <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> : null}
         <AccountMismatchWarning address={address} />
       </div>
 

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

@@ -196,7 +196,9 @@ export default class AccountMenu extends Component {
           key={identity.address}
         >
           <div className="account-menu__check-mark">
-            {isSelected && <div className="account-menu__check-mark-icon" />}
+            {isSelected ? (
+              <div className="account-menu__check-mark-icon" />
+            ) : null}
           </div>
           <Identicon address={identity.address} diameter={24} />
           <div className="account-menu__account-info">

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

@@ -93,7 +93,7 @@ export default class ConfirmPageContainerContent extends Component {
 
     return (
       <div className="confirm-page-container-content">
-        {warning && <ConfirmPageContainerWarning warning={warning} />}
+        {warning ? <ConfirmPageContainerWarning warning={warning} /> : null}
         {ethGasPriceWarning && (
           <ConfirmPageContainerWarning warning={ethGasPriceWarning} />
         )}
@@ -124,7 +124,9 @@ export default class ConfirmPageContainerContent extends Component {
           submitText={submitText}
           disabled={disabled}
         >
-          {unapprovedTxCount > 1 && <a onClick={onCancelAll}>{rejectNText}</a>}
+          {unapprovedTxCount > 1 ? (
+            <a onClick={onCancelAll}>{rejectNText}</a>
+          ) : null}
         </PageContainerFooter>
       </div>
     );

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

@@ -56,7 +56,7 @@ export default function ConfirmPageContainerHeader({
             </span>
           </div>
         )}
-        {!isFullScreen && <NetworkDisplay />}
+        {isFullScreen ? null : <NetworkDisplay />}
       </div>
       {children}
     </div>

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

@@ -106,9 +106,9 @@ export default class ContactList extends PureComponent {
     return (
       <div className="send__select-recipient-wrapper__list">
         {children || null}
-        {searchForRecents && this.renderRecents()}
-        {searchForContacts && this.renderAddressBook()}
-        {searchForMyAccounts && this.renderMyAccounts()}
+        {searchForRecents ? this.renderRecents() : null}
+        {searchForContacts ? this.renderAddressBook() : null}
+        {searchForMyAccounts ? this.renderMyAccounts() : null}
       </div>
     );
   }

ui/components/app/modal/modal-content/modal-content.component.js

@@ -12,7 +12,7 @@ export default class ModalContent extends PureComponent {
 
     return (
       <div className="modal-content">
-        {title && <div className="modal-content__title">{title}</div>}
+        {title ? <div className="modal-content__title">{title}</div> : null}
         {description && (
           <div className="modal-content__description">{description}</div>
         )}

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

@@ -14,7 +14,7 @@ export default class SignatureRequestHeader extends PureComponent {
     return (
       <div className="signature-request-header">
         <div className="signature-request-header--account">
-          {fromAccount && <AccountListItem account={fromAccount} />}
+          {fromAccount ? <AccountListItem account={fromAccount} /> : null}
         </div>
         <div className="signature-request-header--network">
           <NetworkDisplay colored={false} />

ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js

@@ -40,7 +40,7 @@ export default class TransactionActivityLogIcon extends PureComponent {
 
     return (
       <div className={classnames('transaction-activity-log-icon', className)}>
-        {imagePath && <img src={imagePath} height="9" width="9" alt="" />}
+        {imagePath ? <img src={imagePath} height="9" width="9" alt="" /> : null}
       </div>
     );
   }

ui/components/ui/actionable-message/actionable-message.js

@@ -35,7 +35,7 @@ export default function ActionableMessage({
 
   return (
     <div className={actionableMessageClassName}>
-      {useIcon && <InfoTooltipIcon fillColor={iconFillColor} />}
+      {useIcon ? <InfoTooltipIcon fillColor={iconFillColor} /> : null}
       {infoTooltipText && (
         <InfoTooltip
           position="left"

ui/components/ui/button/button.component.js

@@ -66,7 +66,7 @@ const Button = ({
       )}
       {...buttonProps}
     >
-      {icon && <span className="button__icon">{icon}</span>}
+      {icon ? <span className="button__icon">{icon}</span> : null}
       {children}
     </Tag>
   );

ui/components/ui/chip/chip.js

@@ -35,7 +35,7 @@ export default function Chip({
       role={isInteractive ? 'button' : undefined}
       tabIndex={isInteractive ? 0 : undefined}
     >
-      {leftIcon && <div className="chip__left-icon">{leftIcon}</div>}
+      {leftIcon ? <div className="chip__left-icon">{leftIcon}</div> : null}
       {children ?? (
         <Typography
           className="chip__label"
@@ -47,7 +47,7 @@ export default function Chip({
           {label}
         </Typography>
       )}
-      {rightIcon && <div className="chip__right-icon">{rightIcon}</div>}
+      {rightIcon ? <div className="chip__right-icon">{rightIcon}</div> : null}
     </div>
   );
 }

ui/components/ui/icon-with-label/icon-with-label.js

@@ -6,7 +6,7 @@ export default function IconWithLabel({ icon, label, className }) {
   return (
     <div className={classnames('icon-with-label', className)}>
       {icon}
-      {label && <span className="icon-with-label__label">{label}</span>}
+      {label ? <span className="icon-with-label__label">{label}</span> : null}
     </div>
   );
 }

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

@@ -33,7 +33,7 @@ export default function ListItem({
         }
       }}
     >
-      {icon && <div className="list-item__icon">{icon}</div>}
+      {icon ? <div className="list-item__icon">{icon}</div> : null}
       <div className="list-item__heading">
         {React.isValidElement(title) ? (
           title
@@ -44,12 +44,16 @@ export default function ListItem({
           <div className="list-item__heading-wrap">{titleIcon}</div>
         )}
       </div>
-      {subtitle && <div className="list-item__subheading">{subtitle}</div>}
-      {children && <div className="list-item__actions">{children}</div>}
-      {midContent && <div className="list-item__mid-content">{midContent}</div>}
-      {rightContent && (
+      {subtitle ? (
+        <div className="list-item__subheading">{subtitle}</div>
+      ) : null}
+      {children ? <div className="list-item__actions">{children}</div> : null}
+      {midContent ? (
+        <div className="list-item__mid-content">{midContent}</div>
+      ) : null}
+      {rightContent ? (
         <div className="list-item__right-content">{rightContent}</div>
-      )}
+      ) : null}
     </div>
   );
 }

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

@@ -21,7 +21,7 @@ export default class PageContainerHeader extends Component {
   renderTabs() {
     const { tabs } = this.props;
 
-    return tabs && <ul className="page-container__tabs">{tabs}</ul>;
+    return tabs ? <ul className="page-container__tabs">{tabs}</ul> : null;
   }
 
   renderCloseAction() {
@@ -99,7 +99,9 @@ export default class PageContainerHeader extends Component {
             {title}
           </div>
         )}
-        {subtitle && <div className="page-container__subtitle">{subtitle}</div>}
+        {subtitle ? (
+          <div className="page-container__subtitle">{subtitle}</div>
+        ) : null}
 
         {this.renderCloseAction()}
 

ui/components/ui/qr-code/qr-code.js

@@ -26,6 +26,10 @@ function QrCodeView(props) {
   qrImage.addData(address);
   qrImage.make();
 
+  const header = message ? (
+    <div className="qr-code__header">{message}</div>
+  ) : null;
+
   return (
     <div className="qr-code">
       {Array.isArray(message) ? (
@@ -37,9 +41,9 @@ function QrCodeView(props) {
           ))}
         </div>
       ) : (
-        message && <div className="qr-code__header">{message}</div>
+        header
       )}
-      {warning && <span className="qr_code__error">{warning}</span>}
+      {warning ? <span className="qr_code__error">{warning}</span> : null}
       <div
         className="qr-code__wrapper"
         dangerouslySetInnerHTML={{

ui/components/ui/unit-input/unit-input.component.js

@@ -108,7 +108,7 @@ export default class UnitInput extends PureComponent {
               }}
               autoFocus
             />
-            {suffix && <div className="unit-input__suffix">{suffix}</div>}
+            {suffix ? <div className="unit-input__suffix">{suffix}</div> : null}
           </div>
           {children}
         </div>

ui/pages/create-account/connect-hardware/account-list.js

@@ -273,7 +273,7 @@ class AccountList extends Component {
         {this.renderPagination()}
         {this.renderButtons()}
         {this.renderForgetDevice()}
-        {showPopover && this.renderSelectPathPopover()}
+        {showPopover ? this.renderSelectPathPopover() : null}
       </div>
     );
   }

ui/pages/create-account/connect-hardware/select-hardware.js

@@ -235,7 +235,7 @@ export default class SelectHardware extends Component {
       <div className="new-external-account-form">
         {this.renderHeader()}
         {this.renderButtons()}
-        {this.state.selectedDevice && this.renderTutorialsteps()}
+        {this.state.selectedDevice ? this.renderTutorialsteps() : null}
         {this.renderContinueButton()}
       </div>
     );

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

@@ -258,7 +258,9 @@ export default class ImportWithSeedPhrase extends PureComponent {
               autoComplete="off"
             />
           )}
-          {seedPhraseError && <span className="error">{seedPhraseError}</span>}
+          {seedPhraseError ? (
+            <span className="error">{seedPhraseError}</span>
+          ) : null}
           <div
             className="first-time-flow__checkbox-container"
             onClick={this.toggleShowSeedPhrase}

ui/pages/routes/routes.component.js

@@ -340,8 +340,8 @@ export default class Routes extends Component {
         />
         <AccountMenu />
         <div className="main-container-wrapper">
-          {isLoading && <Loading loadingMessage={loadMessage} />}
-          {!isLoading && isNetworkLoading && <LoadingNetwork />}
+          {isLoading ? <Loading loadingMessage={loadMessage} /> : null}
+          {!isLoading && isNetworkLoading ? <LoadingNetwork /> : null}
           {this.renderRoutes()}
         </div>
         {isUnlocked ? <Alerts history={this.props.history} /> : null}

ui/pages/send/send-content/send-content.component.js

@@ -50,17 +50,20 @@ export default class SendContent extends Component {
     return (
       <PageContainerContent>
         <div className="send-v2__form">
-          {gasError && this.renderError(gasError)}
-          {isEthGasPrice && this.renderWarning(ETH_GAS_PRICE_FETCH_WARNING_KEY)}
-          {isAssetSendable === false &&
-            this.renderError(UNSENDABLE_ASSET_ERROR_KEY)}
-          {error && this.renderError(error)}
-          {warning && this.renderWarning()}
+          {gasError ? this.renderError(gasError) : null}
+          {isEthGasPrice
+            ? this.renderWarning(ETH_GAS_PRICE_FETCH_WARNING_KEY)
+            : null}
+          {isAssetSendable === false
+            ? this.renderError(UNSENDABLE_ASSET_ERROR_KEY)
+            : null}
+          {error ? this.renderError(error) : null}
+          {warning ? this.renderWarning() : null}
           {this.maybeRenderAddContact()}
           <SendAssetRow />
           <SendAmountRow />
-          {networkOrAccountNotSupports1559 && <SendGasRow />}
-          {this.props.showHexData && <SendHexDataRow />}
+          {networkOrAccountNotSupports1559 ? <SendGasRow /> : null}
+          {this.props.showHexData ? <SendHexDataRow /> : null}
         </div>
       </PageContainerContent>
     );

ui/pages/send/send-content/send-row-wrapper/send-row-wrapper.component.js

@@ -30,7 +30,7 @@ export default class SendRowWrapper extends Component {
         <div className="send-v2__form-field-container">
           <div className="send-v2__form-field">{formField}</div>
           <div>
-            {showError && <SendRowErrorMessage errorType={errorType} />}
+            {showError ? <SendRowErrorMessage errorType={errorType} /> : null}
           </div>
         </div>
       </div>
@@ -50,7 +50,7 @@ export default class SendRowWrapper extends Component {
       <div className="send-v2__form-row">
         <div className="send-v2__form-label">
           {label}
-          {showError && <SendRowErrorMessage errorType={errorType} />}
+          {showError ? <SendRowErrorMessage errorType={errorType} /> : null}
           {customLabelContent}
         </div>
         <div className="send-v2__form-field">{formField}</div>

ui/pages/settings/advanced-tab/advanced-tab.component.js

@@ -533,7 +533,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div className="settings-page__body">
-        {warning && <div className="settings-tab__error">{warning}</div>}
+        {warning ? <div className="settings-tab__error">{warning}</div> : null}
         {this.renderStateLogs()}
         {this.renderMobileSync()}
         {this.renderResetAccount()}

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

@@ -136,7 +136,9 @@ export default class ContactListTab extends Component {
       <div className="address-book-wrapper">
         {this.renderAddressBookContent()}
         {this.renderContactContent()}
-        {!addingContact && addressBook.length > 0 && this.renderAddButton()}
+        {!addingContact && addressBook.length > 0
+          ? this.renderAddButton()
+          : null}
       </div>
     );
   }

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

@@ -244,7 +244,7 @@ export default class NetworksTab extends PureComponent {
 
     return (
       <div className="networks-tab__body">
-        {isFullScreen && this.renderSubHeader()}
+        {isFullScreen ? this.renderSubHeader() : null}
         <div className="networks-tab__content">
           {this.renderNetworksTabContent()}
           {!isFullScreen && !shouldRenderNetworkForm ? (

ui/pages/settings/security-tab/security-tab.component.js

@@ -146,7 +146,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <div className="settings-page__body">
-        {warning && <div className="settings-tab__error">{warning}</div>}
+        {warning ? <div className="settings-tab__error">{warning}</div> : null}
         {this.renderSeedWords()}
         {this.renderIncomingTransactionsOptIn()}
         {this.renderPhishingDetectionToggle()}

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

@@ -212,7 +212,7 @@ export default class SettingsTab extends PureComponent {
 
     return (
       <div className="settings-page__body">
-        {warning && <div className="settings-tab__error">{warning}</div>}
+        {warning ? <div className="settings-tab__error">{warning}</div> : null}
         {this.renderCurrentConversion()}
         {this.renderUsePrimaryCurrencyOptions()}
         {this.renderCurrentLocale()}

ui/pages/swaps/awaiting-swap/awaiting-swap.js

@@ -272,7 +272,7 @@ export default function AwaitingSwap({
         <div className="awaiting-swap__main-descrption">{descriptionText}</div>
         {content}
       </div>
-      {!errorKey && swapComplete && <MakeAnotherSwap />}
+      {!errorKey && swapComplete ? <MakeAnotherSwap /> : null}
       <SwapsFooter
         onSubmit={async () => {
           if (errorKey === OFFLINE_FOR_MAINTENANCE) {

ui/pages/swaps/searchable-item-list/item-list/item-list.component.js

@@ -52,13 +52,16 @@ export default function ItemList({
 
   // If there is a token for import based on a contract address, it's the only one in the list.
   const hasTokenForImport = results.length === 1 && results[0].notImported;
+  const placeholder = Placeholder ? (
+    <Placeholder searchQuery={searchQuery} />
+  ) : null;
   return results.length === 0 ? (
-    Placeholder && <Placeholder searchQuery={searchQuery} />
+    placeholder
   ) : (
     <div className="searchable-item-list">
-      {listTitle && (
+      {listTitle ? (
         <div className="searchable-item-list__title">{listTitle}</div>
-      )}
+      ) : null}
       <div
         className={classnames(
           'searchable-item-list__list-container',
@@ -100,43 +103,43 @@ export default function ItemList({
               onKeyUp={(e) => e.key === 'Enter' && onClick()}
               key={`searchable-item-list-item-${i}`}
             >
-              {(iconUrl || primaryLabel) && (
+              {iconUrl || primaryLabel ? (
                 <UrlIcon url={iconUrl} name={primaryLabel} />
-              )}
-              {!(iconUrl || primaryLabel) && identiconAddress && (
+              ) : null}
+              {!(iconUrl || primaryLabel) && identiconAddress ? (
                 <div className="searchable-item-list__identicon">
                   <Identicon address={identiconAddress} diameter={24} />
                 </div>
-              )}
-              {IconComponent && <IconComponent />}
+              ) : null}
+              {IconComponent ? <IconComponent /> : null}
               <div className="searchable-item-list__labels">
                 <div className="searchable-item-list__item-labels">
-                  {primaryLabel && (
+                  {primaryLabel ? (
                     <span className="searchable-item-list__primary-label">
                       {primaryLabel}
                     </span>
-                  )}
-                  {secondaryLabel && (
+                  ) : null}
+                  {secondaryLabel ? (
                     <span className="searchable-item-list__secondary-label">
                       {secondaryLabel}
                     </span>
-                  )}
+                  ) : null}
                 </div>
                 {!hideRightLabels &&
-                  (rightPrimaryLabel || rightSecondaryLabel) && (
+                (rightPrimaryLabel || rightSecondaryLabel) ? (
                   <div className="searchable-item-list__right-labels">
-                      {rightPrimaryLabel && (
+                    {rightPrimaryLabel ? (
                       <span className="searchable-item-list__right-primary-label">
                         {rightPrimaryLabel}
                       </span>
-                      )}
-                      {rightSecondaryLabel && (
+                    ) : null}
+                    {rightSecondaryLabel ? (
                       <span className="searchable-item-list__right-secondary-label">
                         {rightSecondaryLabel}
                       </span>
-                      )}
+                    ) : null}
                   </div>
-                  )}
+                ) : null}
               </div>
               {result.notImported && (
                 <Button type="confirm" onClick={onClick}>