diff --git a/ui/hooks/gasFeeInput/useGasFeeErrors.js b/ui/hooks/gasFeeInput/useGasFeeErrors.js index 213b66b2d..686f1d28c 100644 --- a/ui/hooks/gasFeeInput/useGasFeeErrors.js +++ b/ui/hooks/gasFeeInput/useGasFeeErrors.js @@ -1,5 +1,5 @@ import { useMemo } from 'react'; -import { useSelector } from 'react-redux'; +import { shallowEqual, useSelector } from 'react-redux'; import { GAS_ESTIMATE_TYPES, GAS_LIMITS } from '../../../shared/constants/gas'; import { conversionLessThan, @@ -249,7 +249,7 @@ export function useGasFeeErrors({ [gasErrors, gasWarnings], ); - const { balance: ethBalance } = useSelector(getSelectedAccount); + const { balance: ethBalance } = useSelector(getSelectedAccount, shallowEqual); const balanceError = hasBalanceError( minimumCostInHexWei, transaction, diff --git a/ui/hooks/useUserPreferencedCurrency.js b/ui/hooks/useUserPreferencedCurrency.js index a4716e43f..205723218 100644 --- a/ui/hooks/useUserPreferencedCurrency.js +++ b/ui/hooks/useUserPreferencedCurrency.js @@ -1,4 +1,4 @@ -import { useSelector } from 'react-redux'; +import { shallowEqual, useSelector } from 'react-redux'; import { getPreferences, getShouldShowFiat, @@ -37,7 +37,10 @@ import { PRIMARY, SECONDARY, ETH } from '../helpers/constants/common'; */ export function useUserPreferencedCurrency(type, opts = {}) { const nativeCurrency = useSelector(getNativeCurrency); - const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences); + const { useNativeCurrencyAsPrimaryCurrency } = useSelector( + getPreferences, + shallowEqual, + ); const showFiat = useSelector(getShouldShowFiat); const currentCurrency = useSelector(getCurrentCurrency); diff --git a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js index 784c990fb..e55a0867a 100644 --- a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js +++ b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js @@ -1,6 +1,7 @@ import React, { useContext, useEffect } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { shallowEqual, useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; +import isEqual from 'lodash/isEqual'; import { I18nContext } from '../../../contexts/i18n'; import { useNewMetricEvent } from '../../../hooks/useMetricEvent'; @@ -35,9 +36,9 @@ export default function AwaitingSignatures() { const t = useContext(I18nContext); const history = useHistory(); const dispatch = useDispatch(); - const fetchParams = useSelector(getFetchParams); + const fetchParams = useSelector(getFetchParams, isEqual); const { destinationTokenInfo, sourceTokenInfo } = fetchParams?.metaData || {}; - const approveTxParams = useSelector(getApproveTxParams); + const approveTxParams = useSelector(getApproveTxParams, shallowEqual); const hardwareWalletUsed = useSelector(isHardwareWallet); const hardwareWalletType = useSelector(getHardwareWalletType); const needsTwoConfirmations = Boolean(approveTxParams); diff --git a/ui/pages/swaps/awaiting-swap/awaiting-swap.js b/ui/pages/swaps/awaiting-swap/awaiting-swap.js index f3c1b5f5d..3e1a61ec4 100644 --- a/ui/pages/swaps/awaiting-swap/awaiting-swap.js +++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.js @@ -1,8 +1,9 @@ import EventEmitter from 'events'; import React, { useContext, useRef, useState, useEffect } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { shallowEqual, useDispatch, useSelector } from 'react-redux'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; +import isEqual from 'lodash/isEqual'; import { getBlockExplorerLink } from '@metamask/etherscan-link'; import { I18nContext } from '../../../contexts/i18n'; import { useNewMetricEvent } from '../../../hooks/useMetricEvent'; @@ -67,17 +68,17 @@ export default function AwaitingSwap({ const dispatch = useDispatch(); const animationEventEmitter = useRef(new EventEmitter()); - const fetchParams = useSelector(getFetchParams); + const fetchParams = useSelector(getFetchParams, isEqual); const { destinationTokenInfo, sourceTokenInfo } = fetchParams?.metaData || {}; const fromTokenInputValue = useSelector(getFromTokenInputValue); const maxSlippage = useSelector(getMaxSlippage); - const usedQuote = useSelector(getUsedQuote); - const approveTxParams = useSelector(getApproveTxParams); + const usedQuote = useSelector(getUsedQuote, isEqual); + const approveTxParams = useSelector(getApproveTxParams, shallowEqual); const swapsGasPrice = useSelector(getUsedSwapsGasPrice); const currentCurrency = useSelector(getCurrentCurrency); const usdConversionRate = useSelector(getUSDConversionRate); const chainId = useSelector(getCurrentChainId); - const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider); + const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider, shallowEqual); const [trackedQuotesExpiredEvent, setTrackedQuotesExpiredEvent] = useState( false, diff --git a/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js b/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js index 32b139c5e..e4b2b0f36 100644 --- a/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js +++ b/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js @@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'; import PropTypes from 'prop-types'; import { shuffle } from 'lodash'; import { useHistory } from 'react-router-dom'; +import isEqual from 'lodash/isEqual'; import { navigateBackToBuildQuote, getFetchParams, @@ -30,7 +31,7 @@ export default function LoadingSwapsQuotes({ const history = useHistory(); const animationEventEmitter = useRef(new EventEmitter()); - const fetchParams = useSelector(getFetchParams); + const fetchParams = useSelector(getFetchParams, isEqual); const quotesFetchStartTime = useSelector(getQuotesFetchStartTime); const hardwareWalletUsed = useSelector(isHardwareWallet); const hardwareWalletType = useSelector(getHardwareWalletType); diff --git a/ui/pages/swaps/view-quote/view-quote.js b/ui/pages/swaps/view-quote/view-quote.js index f78392473..76bfa5eb4 100644 --- a/ui/pages/swaps/view-quote/view-quote.js +++ b/ui/pages/swaps/view-quote/view-quote.js @@ -1,5 +1,5 @@ import React, { useState, useContext, useMemo, useEffect, useRef } from 'react'; -import { useSelector, useDispatch } from 'react-redux'; +import { shallowEqual, useSelector, useDispatch } from 'react-redux'; import { useHistory } from 'react-router-dom'; import BigNumber from 'bignumber.js'; import { isEqual } from 'lodash'; @@ -141,24 +141,24 @@ export default function ViewQuote() { const customMaxFeePerGas = useSelector(getCustomMaxFeePerGas); const customMaxPriorityFeePerGas = useSelector(getCustomMaxPriorityFeePerGas); const swapsUserFeeLevel = useSelector(getSwapsUserFeeLevel); - const tokenConversionRates = useSelector(getTokenExchangeRates); + const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual); const memoizedTokenConversionRates = useEqualityCheck(tokenConversionRates); - const { balance: ethBalance } = useSelector(getSelectedAccount); + const { balance: ethBalance } = useSelector(getSelectedAccount, shallowEqual); const conversionRate = useSelector(conversionRateSelector); const currentCurrency = useSelector(getCurrentCurrency); - const swapsTokens = useSelector(getTokens); + const swapsTokens = useSelector(getTokens, isEqual); const networkAndAccountSupports1559 = useSelector( checkNetworkAndAccountSupports1559, ); const balanceError = useSelector(getBalanceError); - const fetchParams = useSelector(getFetchParams); - const approveTxParams = useSelector(getApproveTxParams); - const selectedQuote = useSelector(getSelectedQuote); - const topQuote = useSelector(getTopQuote); + const fetchParams = useSelector(getFetchParams, isEqual); + const approveTxParams = useSelector(getApproveTxParams, shallowEqual); + const selectedQuote = useSelector(getSelectedQuote, isEqual); + const topQuote = useSelector(getTopQuote, isEqual); const usedQuote = selectedQuote || topQuote; const tradeValue = usedQuote?.trade?.value ?? '0x0'; const swapsQuoteRefreshTime = useSelector(getSwapsQuoteRefreshTime); - const defaultSwapsToken = useSelector(getSwapsDefaultToken); + const defaultSwapsToken = useSelector(getSwapsDefaultToken, isEqual); const chainId = useSelector(getCurrentChainId); const nativeCurrencySymbol = useSelector(getNativeCurrency); const reviewSwapClickedTimestamp = useSelector(getReviewSwapClickedTimestamp); @@ -343,7 +343,7 @@ export default function ViewQuote() { ) : null; - const destinationToken = useSelector(getDestinationTokenInfo); + const destinationToken = useSelector(getDestinationTokenInfo, isEqual); useEffect(() => { if (insufficientTokens || insufficientEth) {