1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 11:22:43 +02:00

Optimize rest of swaps flow (#12939)

This commit is contained in:
Matthew Epps 2021-12-07 10:33:13 -07:00 committed by GitHub
parent af3bdbbfc9
commit 311ea021f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 29 additions and 23 deletions

View File

@ -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,

View File

@ -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);

View File

@ -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);

View File

@ -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,

View File

@ -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);

View File

@ -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) {