chore: adds useChainId to components views

MetaMask · Oct 16, 2024 · ff49c41 · ff49c41
1 parent 86a7dd8
commit ff49c41
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 20 deletions.
diff --git a/app/components/Views/EditAccountName/EditAccountName.tsx b/app/components/Views/EditAccountName/EditAccountName.tsx
@@ -23,7 +23,6 @@ import { useStyles } from '../../../component-library/hooks';
 import { getEditAccountNameNavBarOptions } from '../../../components/UI/Navbar';
 import Engine from '../../../core/Engine';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import { selectChainId } from '../../../selectors/networkController';
 import { selectSelectedInternalAccount } from '../../../selectors/accountsController';
 import {
   doENSReverseLookup,
@@ -36,6 +35,7 @@ import { toChecksumHexAddress } from '@metamask/controller-utils';
 import styleSheet from './EditAccountName.styles';
 import { getDecimalChainId } from '../../../util/networks';
 import { useMetrics } from '../../../components/hooks/useMetrics';
+import { useChainId } from '../../../selectors/hooks';
 
 const EditAccountName = () => {
   const { colors } = useTheme();
@@ -51,7 +51,7 @@ const EditAccountName = () => {
     ? toChecksumHexAddress(selectedInternalAccount.address)
     : undefined;
 
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
 
   const lookupEns = useCallback(async () => {
     if (selectedChecksummedAddress) {

diff --git a/app/components/Views/MultiRpcModal/MultiRpcModal.tsx b/app/components/Views/MultiRpcModal/MultiRpcModal.tsx
@@ -20,10 +20,7 @@ import { useNavigation } from '@react-navigation/native';
 import Engine from '../../../core/Engine';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import {
-  selectChainId,
-  selectNetworkConfigurations,
-} from '../../../selectors/networkController';
+import { selectNetworkConfigurations } from '../../../selectors/networkController';
 import { useSelector } from 'react-redux';
 import Cell, {
   CellVariant,
@@ -36,6 +33,7 @@ import {
 import { IconName } from '../../../component-library/components/Icons/Icon';
 import { getNetworkImageSource } from '../../../util/networks';
 import Routes from '../../../constants/navigation/Routes';
+import { useChainId } from '../../../selectors/hooks';
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, import/no-commonjs
 const networkImage = require('../../../images/networks1.png');
@@ -44,7 +42,7 @@ const MultiRpcModal = () => {
   const { styles } = useStyles(styleSheet, {});
   const sheetRef = useRef<BottomSheetRef>(null);
   const navigation = useNavigation();
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const networkConfigurations = useSelector(selectNetworkConfigurations);
   const { trackEvent } = useMetrics();
   const { navigate } = useNavigation();

diff --git a/app/components/Views/confirmations/SendFlow/AddressElement/AddressElement.tsx b/app/components/Views/confirmations/SendFlow/AddressElement/AddressElement.tsx
@@ -10,11 +10,9 @@ import {
   getLabelTextByAddress,
 } from '../../../../../util/address';
 import Identicon from '../../../../UI/Identicon';
-import { useSelector } from 'react-redux';
 import { useTheme } from '../../../../../util/theme';
 import Text from '../../../../../component-library/components/Texts/Text/Text';
 import { TextVariant } from '../../../../../component-library/components/Texts/Text';
-import { selectChainId } from '../../../../../selectors/networkController';
 import { doENSReverseLookup } from '../../../../../util/ENSUtils';
 import { strings } from '../../../../../../locales/i18n';
 import Icon, {
@@ -33,14 +31,13 @@ const AddressElement: React.FC<AddressElementProps> = ({
   onAccountLongPress,
   onIconPress,
   isAmbiguousAddress,
+  chainId,
   ...props
 }) => {
   const [displayName, setDisplayName] = useState(name);
   const { colors } = useTheme();
   const styles = styleSheet(colors);
 
-  const chainId = useSelector(selectChainId);
-
   const fetchENSName = useCallback(async () => {
     if (!displayName) {
       const ensName = await doENSReverseLookup(address, chainId);

diff --git a/app/components/Views/confirmations/SendFlow/AddressElement/AddressElement.types.ts b/app/components/Views/confirmations/SendFlow/AddressElement/AddressElement.types.ts
@@ -25,4 +25,8 @@ export interface AddressElementProps extends TouchableOpacityProps {
    * Callback for icon press
    */
   onIconPress: () => void;
+  /**
+   * Chain ID
+   */
+  chainId: string;
 }
diff --git a/app/components/Views/confirmations/SendFlow/AddressFrom/AddressFrom.tsx b/app/components/Views/confirmations/SendFlow/AddressFrom/AddressFrom.tsx
@@ -8,10 +8,7 @@ import {
   setSelectedAsset,
 } from '../../../../../actions/transaction';
 import Routes from '../../../../../constants/navigation/Routes';
-import {
-  selectChainId,
-  selectTicker,
-} from '../../../../../selectors/networkController';
+import { selectTicker } from '../../../../../selectors/networkController';
 import { selectAccounts } from '../../../../../selectors/accountTrackerController';
 import { selectSelectedInternalAccount } from '../../../../../selectors/accountsController';
 import { doENSReverseLookup } from '../../../../../util/ENSUtils';
@@ -20,6 +17,7 @@ import { getEther, getTicker } from '../../../../../util/transactions';
 import { AddressFrom } from '../../../../UI/AddressInputs';
 import { SFAddressFromProps } from './AddressFrom.types';
 import { toChecksumHexAddress } from '@metamask/controller-utils';
+import { useChainId } from '../../../../../selectors/hooks';
 
 const SendFlowAddressFrom = ({
   fromAccountBalanceState,
@@ -29,7 +27,7 @@ const SendFlowAddressFrom = ({
 
   const accounts = useSelector(selectAccounts);
 
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const ticker = useSelector(selectTicker);
 
   const selectedInternalAccount = useSelector(selectSelectedInternalAccount);

diff --git a/app/components/Views/confirmations/SendFlow/AddressList/AddressList.tsx b/app/components/Views/confirmations/SendFlow/AddressList/AddressList.tsx
@@ -17,7 +17,6 @@ import AddressElement from '../AddressElement';
 import { useTheme } from '../../../../../util/theme';
 import Text from '../../../../../component-library/components/Texts/Text/Text';
 import { TextVariant } from '../../../../../component-library/components/Texts/Text';
-import { selectChainId } from '../../../../../selectors/networkController';
 import { regex } from '../../../../../util/regex';
 import { SendViewSelectorsIDs } from '../../../../../../e2e/selectors/SendView.selectors';
 import { selectInternalAccounts } from '../../../../../selectors/accountsController';
@@ -28,6 +27,7 @@ import styleSheet from './AddressList.styles';
 import { toChecksumHexAddress } from '@metamask/controller-utils';
 import { selectAddressBook } from '../../../../../selectors/addressBookController';
 import { RootState } from '../../../../../reducers';
+import { useChainId } from '../../../../../selectors/hooks';
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -53,7 +53,7 @@ const AddressList: React.FC<AddressListProps> = ({
   // TODO: Replace "any" with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [fuse, setFuse] = useState<any>(undefined);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const internalAccounts = useSelector(selectInternalAccounts);
   const addressBook = useSelector(selectAddressBook);
   const ambiguousAddressEntries = useSelector(
@@ -188,6 +188,7 @@ const AddressList: React.FC<AddressListProps> = ({
             onIconPress={onIconPress}
             onAccountLongPress={onAccountLongPress}
             testID={SendViewSelectorsIDs.MY_ACCOUNT_ELEMENT}
+            chainId={chainId}
           />
         ))}
       </View>
@@ -211,6 +212,7 @@ const AddressList: React.FC<AddressListProps> = ({
         onAccountLongPress={onAccountLongPress}
         testID={SendViewSelectorsIDs.ADDRESS_BOOK_ACCOUNT}
         isAmbiguousAddress={addressElement.isAmbiguousAddress}
+        chainId={chainId}
       />
     );
   };

diff --git a/...ponents/Views/confirmations/SendFlow/Confirm/components/CustomGasModal/CustomGasModal.tsx b/...ponents/Views/confirmations/SendFlow/Confirm/components/CustomGasModal/CustomGasModal.tsx
@@ -5,7 +5,6 @@ import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view
 import Modal from 'react-native-modal';
 import { useSelector } from 'react-redux';
 
-import { selectChainId } from '../../../../../../../selectors/networkController';
 import { useAppThemeFromContext } from '../../../../../../../util/theme';
 import EditGasFee1559 from '../../../../components/EditGasFee1559Update';
 import EditGasFeeLegacy from '../../../../components/EditGasFeeLegacyUpdate';
@@ -15,6 +14,7 @@ import { selectGasFeeEstimates } from '../../../../../../../selectors/confirmTra
 import { selectGasFeeControllerEstimateType } from '../../../../../../..//selectors/gasFeeController';
 import { RootState } from '../../../../../../../reducers';
 import { selectPrimaryCurrency } from '../../../../../../..//selectors/settings';
+import { useChainId } from '../../../../../../../selectors/hooks';
 
 const CustomGasModal = ({
   gasSelected,
@@ -36,7 +36,7 @@ const CustomGasModal = ({
   const transaction = useSelector((state: RootState) => state.transaction);
   const gasFeeEstimate = useSelector(selectGasFeeEstimates);
   const primaryCurrency = useSelector(selectPrimaryCurrency);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const selectedAsset = useSelector(
     (state: RootState) => state.transaction.selectedAsset,
   );