fix: 15108 create a wrapper for toChecksumAddress to prevent app crash (#15202)

…dress validation

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Related issues**

Fixes: #15108 

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Nico MASSART <NicolasMassart@users.noreply.github.com>

Author: dawnseeker8

app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentageCrossChains.tsx

@@ -10,14 +10,15 @@ import {
   FORMATTED_VALUE_PRICE_TEST_ID,
   FORMATTED_PERCENTAGE_TEST_ID,
 } from './AggregatedPercentage.constants';
-import { toChecksumAddress, zeroAddress } from 'ethereumjs-util';
+import { zeroAddress } from 'ethereumjs-util';
 import { selectTokenMarketData } from '../../../../selectors/tokenRatesController';
 import {
   MarketDataMapping,
   TokensWithBalances,
 } from '../../../../components/hooks/useGetFormattedTokensPerChain';
 import { getFormattedAmountChange, getPercentageTextColor } from './utils';
 import { AggregatedPercentageCrossChainsProps } from './AggregatedPercentageCrossChains.types';
+import { safeToChecksumAddress } from '../../../../util/address';
 
 export const getCalculatedTokenAmount1dAgo = (
   tokenFiatBalance: number,
@@ -47,12 +48,14 @@ const AggregatedPercentageCrossChains = ({
     ) => {
       const totalPerChain1dAgoERC20 = tokensWithBalances.reduce(
         (total1dAgo: number, item: { address: string }, idx: number) => {
-          const found =
-            crossChainMarketData?.[chainId]?.[toChecksumAddress(item.address)];
+          const checksumAddress = item.address ? safeToChecksumAddress(item.address) : undefined;
+          const found = checksumAddress !== undefined
+            ? crossChainMarketData?.[chainId]?.[checksumAddress]
+            : undefined;
 
           const tokenFiat1dAgo = getCalculatedTokenAmount1dAgo(
             tokenFiatBalances[idx],
-            found?.pricePercentChange1d,
+            found?.pricePercentChange1d ?? 0,
           );
           return total1dAgo + Number(tokenFiat1dAgo);
         },

app/components/UI/AccountFromToInfoCard/AddressFrom.tsx

@@ -1,4 +1,3 @@
-import { toChecksumAddress } from 'ethereumjs-util';
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { useSelector } from 'react-redux';
@@ -16,6 +15,7 @@ import {
 import {
   getLabelTextByAddress,
   renderAccountName,
+  safeToChecksumAddress,
 } from '../../../util/address';
 import useAddressBalance from '../../hooks/useAddressBalance/useAddressBalance';
 import stylesheet from './AddressFrom.styles';
@@ -53,7 +53,7 @@ const AddressFrom = ({
   const accountsByChainId = useSelector(selectAccountsByChainId);
 
   const internalAccounts = useSelector(selectInternalAccounts);
-  const activeAddress = toChecksumAddress(from);
+  const activeAddress = safeToChecksumAddress(from);
 
   const networkName = useSelector(selectEvmNetworkName);
 

app/components/UI/AddCustomCollectible/index.tsx

@@ -4,7 +4,6 @@ import { Alert, Text, TextInput, View, StyleSheet } from 'react-native';
 import { fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
 import { strings } from '../../../../locales/i18n';
-import { isValidAddress } from 'ethereumjs-util';
 import ActionView from '../ActionView';
 import { isSmartContractAddress } from '../../../util/transactions';
 import Device from '../../../util/device';
@@ -16,6 +15,7 @@ import { selectChainId } from '../../../selectors/networkController';
 import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 import { getDecimalChainId } from '../../../util/networks';
 import { useMetrics } from '../../../components/hooks/useMetrics';
+import { isValidHexAddress } from '../../../util/address';
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -113,7 +113,7 @@ const AddCustomCollectible = ({
 
   const validateCustomCollectibleAddress = async (): Promise<boolean> => {
     let validated = true;
-    const isValidEthAddress = isValidAddress(address);
+    const isValidEthAddress = isValidHexAddress(address);
     if (address.length === 0) {
       setWarningAddress(strings('collectible.address_cant_be_empty'));
       validated = false;

app/components/UI/AddCustomToken/index.js

@@ -5,14 +5,12 @@ import {
   View,
   StyleSheet,
   InteractionManager,
-  Platform,
   ScrollView,
 } from 'react-native';
 import { fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
 import PropTypes from 'prop-types';
 import { strings } from '../../../../locales/i18n';
-import { isValidAddress } from 'ethereumjs-util';
 import { isSmartContractAddress } from '../../../util/transactions';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 
@@ -43,6 +41,7 @@ import Banner, {
 } from '../../../component-library/components/Banners/Banner';
 import CLText from '../../../component-library/components/Texts/Text/Text';
 import Logger from '../../../util/Logger';
+import { isValidHexAddress } from '../../../util/address';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -280,7 +279,7 @@ class AddCustomToken extends PureComponent {
 
   validateCustomTokenAddress = async (address) => {
     let validated = true;
-    const isValidTokenAddress = isValidAddress(address);
+    const isValidTokenAddress = isValidHexAddress(address);
 
     const { chainId } = this.props;
     const toSmartContract =

app/components/UI/ApprovalTagUrl/ApprovalTagUrl.tsx

@@ -1,4 +1,4 @@
-import { toChecksumAddress } from 'ethereumjs-util';
+
 import React, { useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 
@@ -12,6 +12,7 @@ import { getHost, prefixUrlWithProtocol } from '../../../util/browser';
 import useFavicon from '../../hooks/useFavicon/useFavicon';
 import stylesheet from './ApprovalTagUrl.styles';
 import { INTERNAL_ORIGINS } from '../../../constants/transaction';
+import { safeToChecksumAddress } from '../../../util/address';
 
 const { ORIGIN_DEEPLINK, ORIGIN_QR_CODE } = AppConstants.DEEPLINKS;
 export const APPROVAL_TAG_URL_ORIGIN_PILL = 'APPROVAL_TAG_URL_ORIGIN_PILL';
@@ -40,7 +41,7 @@ const ApprovalTagUrl = ({
   const accountsByChainId = useSelector(selectAccountsByChainId);
 
   const internalAccounts = useSelector(selectInternalAccounts);
-  const activeAddress = toChecksumAddress(from);
+  const activeAddress = safeToChecksumAddress(from);
 
   useEffect(() => {
     const isOriginDeepLinkVal =

app/components/UI/PaymentRequest/AssetList/index.tsx

@@ -6,10 +6,10 @@ import { fontStyles } from '../../../../styles/common';
 import Identicon from '../../Identicon';
 import NetworkMainAssetLogo from '../../NetworkMainAssetLogo';
 import { useSelector } from 'react-redux';
-import { toChecksumAddress } from 'ethereumjs-util';
 import { useTheme } from '../../../../util/theme';
 import { selectTokenList } from '../../../../selectors/tokenListController';
 import { ImportTokenViewSelectorsIDs } from '../../../../../e2e/selectors/wallet/ImportTokenView.selectors';
+import { safeToChecksumAddress } from '../../../../util/address';
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -99,9 +99,10 @@ const AssetList = ({
       if (isETH) {
         return <NetworkMainAssetLogo big style={styles.ethLogo} />;
       }
+      const checksumAddress = address ? safeToChecksumAddress(address) : undefined;
       const token =
-        tokenList?.[toChecksumAddress(address)] ||
-        tokenList?.[address.toLowerCase()];
+        (checksumAddress && tokenList?.[checksumAddress]) ||
+        (address && tokenList?.[address.toLowerCase()]);
       const iconUrl = token?.iconUrl;
       if (!iconUrl) {
         return <Identicon address={address} />;

app/components/UI/Ramp/hooks/useBalance.ts

@@ -97,7 +97,7 @@ export default function useBalance(asset?: Asset) {
     balance =
       assetAddress && assetAddress in balances
         ? renderFromTokenMinimalUnit(
-            balances[assetAddress],
+            balances[assetAddress as Hex],
             asset.decimals ?? 18,
           )
         : 0;
@@ -109,7 +109,7 @@ export default function useBalance(asset?: Asset) {
     );
     balanceBN =
       assetAddress && assetAddress in balances
-        ? hexToBN(balances[assetAddress])
+        ? hexToBN(balances[assetAddress as Hex])
         : null;
   }
 

app/components/UI/Swaps/components/TokenSelectModal.js

@@ -16,7 +16,6 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import FAIcon from 'react-native-vector-icons/FontAwesome5';
 import Fuse from 'fuse.js';
 import { connect } from 'react-redux';
-import { isValidAddress } from 'ethereumjs-util';
 
 import Device from '../../../../util/device';
 import { addCurrencySymbol } from '../../../../util/number';
@@ -52,6 +51,7 @@ import { useTheme } from '../../../../util/theme';
 import { QuoteViewSelectorIDs } from '../../../../../e2e/selectors/swaps/QuoteView.selectors';
 import { getDecimalChainId } from '../../../../util/networks';
 import { getSortedTokensByFiatValue } from '../utils/token-list-utils';
+import { isValidHexAddress } from '../../../../util/address';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -230,7 +230,7 @@ function TokenSelectModal({
   const shouldFetchToken = useMemo(
     () =>
       tokenSearchResults.length === 0 &&
-      isValidAddress(searchString) &&
+      isValidHexAddress(searchString) &&
       !excludedAddresses.includes(searchString?.toLowerCase()),
     [excludedAddresses, searchString, tokenSearchResults.length],
   );

app/components/UI/Swaps/utils/useFiatConversionRates.ts

@@ -58,7 +58,7 @@ export function useFiatConversionRates({
     return fetchTokenContractExchangeRates({
       tokenPricesService: new CodefiTokenPricesServiceV2(),
       nativeCurrency: currentCurrency,
-      tokenAddresses: [checksumAddress],
+      tokenAddresses: [checksumAddress as Hex],
       chainId,
     });
   }, [

app/components/UI/TransactionElement/utils.js

@@ -22,12 +22,10 @@ import { sumHexWEIs } from '../../../util/conversions';
 import {
   decodeTransferData,
   isCollectibleAddress,
-  getTicker,
   getActionKey,
   TRANSACTION_TYPES,
   calculateEIP1559GasFeeHexes,
 } from '../../../util/transactions';
-import { toChecksumAddress } from 'ethereumjs-util';
 import { swapsUtils } from '@metamask/swaps-controller';
 import { isSwapsNativeAsset } from '../Swaps/utils';
 import { toLowerCaseEquals } from '../../../util/general';
@@ -303,7 +301,7 @@ export function decodeIncomingTransfer(args) {
     : undefined;
   const exchangeRate =
     token && contractExchangeRates
-      ? contractExchangeRates[toChecksumAddress(token.address)]?.price
+      ? contractExchangeRates[safeToChecksumAddress(token.address)]?.price
       : undefined;
 
   let renderTokenFiatAmount, renderTokenFiatNumber;

app/components/Views/QRScanner/index.tsx

@@ -4,7 +4,6 @@
 'use strict';
 import { useNavigation } from '@react-navigation/native';
 import { parse } from 'eth-url-parser';
-import { isValidAddress } from 'ethereumjs-util';
 import React, { useCallback, useRef } from 'react';
 import { Alert, Image, InteractionManager, View, Linking } from 'react-native';
 import Text, {
@@ -20,7 +19,7 @@ import AppConstants from '../../../core/AppConstants';
 import SharedDeeplinkManager from '../../../core/DeeplinkManager/SharedDeeplinkManager';
 import Engine from '../../../core/Engine';
 import { selectChainId } from '../../../selectors/networkController';
-import { isValidAddressInputViaQRCode } from '../../../util/address';
+import { isValidAddressInputViaQRCode, isValidHexAddress } from '../../../util/address';
 import { getURLProtocol } from '../../../util/general';
 import {
   failedSeedPhraseRequirements,
@@ -183,7 +182,7 @@ const QRScanner = ({
         if (
           (content.split(`${PROTOCOLS.ETHEREUM}:`).length > 1 &&
             !parse(content).function_name) ||
-          (content.startsWith('0x') && isValidAddress(content))
+          (content.startsWith('0x') && isValidHexAddress(content))
         ) {
           const handledContent = content.startsWith('0x')
             ? `${PROTOCOLS.ETHEREUM}:${content}@${currentChainId}`

app/components/Views/Settings/Contacts/ContactForm/index.js

@@ -13,12 +13,12 @@ import PropTypes from 'prop-types';
 import { getEditableOptions } from '../../../../UI/Navbar';
 import StyledButton from '../../../../UI/StyledButton';
 import Engine from '../../../../../core/Engine';
-import { toChecksumAddress } from 'ethereumjs-util';
 import { connect } from 'react-redux';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { strings } from '../../../../../../locales/i18n';
 import {
   renderShortAddress,
+  safeToChecksumAddress,
   validateAddressOrENS,
 } from '../../../../../util/address';
 import ErrorMessage from '../../../confirmations/legacy/SendFlow/ErrorMessage';
@@ -272,7 +272,7 @@ class ContactForm extends PureComponent {
     const { AddressBookController } = Engine.context;
     if (!name || !address) return;
     AddressBookController.set(
-      toChecksumAddress(toEnsAddress || address),
+      safeToChecksumAddress(toEnsAddress || address),
       name,
       chainId,
       memo,

app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/InfoSectionOriginAndDetails/InfoSectionOriginAndDetails.tsx

@@ -13,7 +13,8 @@ import { useSignatureRequest } from '../../../../../hooks/useSignatureRequest';
 import useApprovalRequest from '../../../../../hooks/useApprovalRequest';
 import { View } from 'react-native';
 import styleSheet from './InfoSectionOriginAndDetails.styles';
-import { isValidAddress } from 'ethereumjs-util';
+import { isValidHexAddress } from '../../../../../../../../util/address';
+
 
 export const InfoSectionOriginAndDetails = () => {
   const { styles } = useStyles(styleSheet, {});
@@ -56,7 +57,7 @@ export const InfoSectionOriginAndDetails = () => {
       >
         <DisplayURL url={origin} />
       </InfoRow>
-      {isValidAddress(verifyingContract) && (
+      {isValidHexAddress(verifyingContract) && (
           <InfoRow label={strings('confirm.label.interacting_with')}>
             <InfoRowAddress
               address={verifyingContract}

app/components/Views/confirmations/hooks/useAccountInfo.ts

@@ -1,18 +1,20 @@
-import { toChecksumAddress } from 'ethereumjs-util';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
 import Engine from '../../../../core/Engine';
 import useAddressBalance from '../../../../components/hooks/useAddressBalance/useAddressBalance';
 import { selectInternalAccounts } from '../../../../selectors/accountsController';
-import { renderAccountName } from '../../../../util/address';
+import {
+  renderAccountName,
+  safeToChecksumAddress,
+} from '../../../../util/address';
 import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
 import { formatWithThreshold } from '../../../../util/assets';
 import I18n from '../../../../../locales/i18n';
 
 const useAccountInfo = (address: string) => {
   const internalAccounts = useSelector(selectInternalAccounts);
-  const activeAddress = toChecksumAddress(address);
+  const activeAddress = safeToChecksumAddress(address);
   const { addressBalance: accountBalance } = useAddressBalance(
     undefined,
     address,