From ff49c41368ebc93719ff1c2b0c811c1b69db19b4 Mon Sep 17 00:00:00 2001 From: Andrea Salvatore Date: Wed, 16 Oct 2024 12:08:09 +0200 Subject: [PATCH] chore: adds useChainId to components views --- app/components/Views/EditAccountName/EditAccountName.tsx | 4 ++-- app/components/Views/MultiRpcModal/MultiRpcModal.tsx | 8 +++----- .../SendFlow/AddressElement/AddressElement.tsx | 5 +---- .../SendFlow/AddressElement/AddressElement.types.ts | 4 ++++ .../confirmations/SendFlow/AddressFrom/AddressFrom.tsx | 8 +++----- .../confirmations/SendFlow/AddressList/AddressList.tsx | 6 ++++-- .../Confirm/components/CustomGasModal/CustomGasModal.tsx | 4 ++-- 7 files changed, 19 insertions(+), 20 deletions(-) diff --git a/app/components/Views/EditAccountName/EditAccountName.tsx b/app/components/Views/EditAccountName/EditAccountName.tsx index 8ec063648a7..ecf3788ee94 100644 --- 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 index 7925bd6c862..e970b65e0be 100644 --- 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(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 index 05a18ca4426..c50514da22e 100644 --- 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 = ({ 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 index d4da24bed24..b529a94d86a 100644 --- 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 index 8820d1ce2b5..4aebc788051 100644 --- 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 index 667f56e1e8f..ee07fc971d3 100644 --- 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 = ({ // TODO: Replace "any" with type // eslint-disable-next-line @typescript-eslint/no-explicit-any const [fuse, setFuse] = useState(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 = ({ onIconPress={onIconPress} onAccountLongPress={onAccountLongPress} testID={SendViewSelectorsIDs.MY_ACCOUNT_ELEMENT} + chainId={chainId} /> ))} @@ -211,6 +212,7 @@ const AddressList: React.FC = ({ onAccountLongPress={onAccountLongPress} testID={SendViewSelectorsIDs.ADDRESS_BOOK_ACCOUNT} isAmbiguousAddress={addressElement.isAmbiguousAddress} + chainId={chainId} /> ); }; diff --git a/app/components/Views/confirmations/SendFlow/Confirm/components/CustomGasModal/CustomGasModal.tsx b/app/components/Views/confirmations/SendFlow/Confirm/components/CustomGasModal/CustomGasModal.tsx index dae9f8604b3..fe9fd10415f 100644 --- a/app/components/Views/confirmations/SendFlow/Confirm/components/CustomGasModal/CustomGasModal.tsx +++ b/app/components/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, );