Use optional chaining for functions (#9799)

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

@@ -16,7 +16,7 @@ export default function AccountListItem({
   return (
     <div
       className={`account-list-item ${className}`}
-      onClick={() => handleClick && handleClick({ name, address, balance })}
+      onClick={() => handleClick?.({ name, address, balance })}
     >
       <div className="account-list-item__top-row">
         <Identicon

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

@@ -26,7 +26,7 @@ const ConfirmDetailRow = (props) => {
               'confirm-detail-row__header-text',
               headerTextClassName,
             )}
-            onClick={() => onHeaderClick && onHeaderClick()}
+            onClick={() => onHeaderClick?.()}
           >
             {headerText}
           </div>

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

@@ -37,7 +37,7 @@ export default class AccountDetailsModal extends Component {
 
     let exportPrivateKeyFeatureEnabled = true
     // This feature is disabled for hardware wallets
-    if (keyring && keyring.type.search('Hardware') !== -1) {
+    if (keyring?.type?.search('Hardware') !== -1) {
       exportPrivateKeyFeatureEnabled = false
     }
 

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

@@ -21,7 +21,7 @@ export default class Sidebar extends Component {
       <div
         className="sidebar-overlay"
         onClick={() => {
-          onOverlayClose && onOverlayClose()
+          onOverlayClose?.()
           this.props.hideSidebar()
         }}
       />

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

@@ -63,7 +63,7 @@ export default class ButtonGroup extends PureComponent {
             )}
             onClick={() => {
               this.handleButtonClick(index)
-              child.props.onClick && child.props.onClick()
+              child.props.onClick?.()
             }}
             disabled={disabled || child.props.disabled}
             key={index}

ui/app/ducks/confirm-transaction/confirm-transaction.duck.test.js

@@ -468,9 +468,7 @@ describe('Confirm Transaction Duck', function () {
         getCode: sinon
           .stub()
           .callsFake((address) =>
-            Promise.resolve(
-              address && address.match(/isContract/u) ? 'not-0x' : '0x',
-            ),
+            Promise.resolve(address?.match(/isContract/u) ? 'not-0x' : '0x'),
           ),
       }
     })

ui/app/helpers/utils/token-util.js

@@ -36,7 +36,7 @@ async function getDecimalsFromContract(tokenAddress) {
   try {
     const result = await token.decimals()
     const decimalsBN = result[0]
-    return decimalsBN && decimalsBN.toString()
+    return decimalsBN?.toString()
   } catch (error) {
     log.warn(
       `decimals() call for token at address ${tokenAddress} resulted in error:`,

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

@@ -30,7 +30,7 @@ const mapDispatchToProps = (dispatch) => {
           to,
           amount,
           errors: { to: null, amount: null },
-          editingTransactionId: id && id.toString(),
+          editingTransactionId: id?.toString(),
         }),
       )
 

ui/app/pages/confirm-send-token/confirm-send-token.container.js

@@ -44,7 +44,7 @@ const mapDispatchToProps = (dispatch) => {
           to,
           amount: tokenAmountInHex,
           errors: { to: null, amount: null },
-          editingTransactionId: id && id.toString(),
+          editingTransactionId: id?.toString(),
           token: {
             ...tokenProps,
             address: tokenAddress,

ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js

@@ -41,8 +41,7 @@ const mapStateToProps = (state, ownProps) => {
     transaction,
   )
   const tokens = getTokens(state)
-  const currentToken =
-    tokens && tokens.find(({ address }) => tokenAddress === address)
+  const currentToken = tokens?.find(({ address }) => tokenAddress === address)
   const { decimals, symbol: tokenSymbol } = currentToken || {}
 
   const tokenData = getTokenData(data)

ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.container.js

@@ -9,7 +9,7 @@ const mapStateToProps = (state, ownProps) => {
   const {
     match: { params = {}, url },
   } = ownProps
-  const urlId = url && url.match(/\d+/u) && url.match(/\d+/u)[0]
+  const urlId = url?.match(/\d+/u) && url?.match(/\d+/u)[0]
   const { id: paramsId } = params
   const transactionId = paramsId || urlId
 

ui/app/pages/send/send.component.js

@@ -161,7 +161,7 @@ export default class SendTransactionScreen extends Component {
     if (qrCodeData) {
       if (qrCodeData.type === 'address') {
         scannedAddress = qrCodeData.values.address.toLowerCase()
-        const currentAddress = prevTo && prevTo.toLowerCase()
+        const currentAddress = prevTo?.toLowerCase()
         if (currentAddress !== scannedAddress) {
           updateSendTo(scannedAddress)
           updateGas = true

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

@@ -291,7 +291,7 @@ export default class NetworkForm extends PureComponent {
 
   setStateWithValue = (stateKey, validator) => {
     return (e) => {
-      validator && validator(e.target.value, stateKey)
+      validator?.(e.target.value, stateKey)
       this.setState({ [stateKey]: e.target.value })
     }
   }

ui/app/pages/swaps/dropdown-search-list/dropdown-search-list.js

@@ -37,12 +37,12 @@ export default function DropdownSearchList({
   const [selectedItem, setSelectedItem] = useState(startingItem)
   const close = useCallback(() => {
     setIsOpen(false)
-    onClose && onClose()
+    onClose?.()
   }, [onClose])
 
   const onClickItem = useCallback(
     (item) => {
-      onSelect && onSelect(item)
+      onSelect?.(item)
       setSelectedItem(item)
       close()
     },
@@ -52,7 +52,7 @@ export default function DropdownSearchList({
   const onClickSelector = useCallback(() => {
     if (!isOpen) {
       setIsOpen(true)
-      onOpen && onOpen()
+      onOpen?.()
     }
   }, [isOpen, onOpen])
 
@@ -165,7 +165,7 @@ export default function DropdownSearchList({
             onClick={(event) => {
               event.stopPropagation()
               setIsOpen(false)
-              onClose && onClose()
+              onClose?.()
             }}
           />
         </>

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

@@ -31,11 +31,11 @@ export default function ItemList({
         ref={containerRef}
       >
         {results.slice(0, maxListItems).map((result, i) => {
-          if (hideItemIf && hideItemIf(result)) {
+          if (hideItemIf?.(result)) {
             return null
           }
 
-          const onClick = () => onClickItem && onClickItem(result)
+          const onClick = () => onClickItem?.(result)
           const {
             iconUrl,
             identiconAddress,