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

Optimize rest of swaps flow (#12939)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/hooks/gasFeeInput/useGasFeeErrors.js
View File

@ -1,5 +1,5 @@
import { useMemo } from 'react'; 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 { GAS_ESTIMATE_TYPES, GAS_LIMITS } from '../../../shared/constants/gas';
import { import {
conversionLessThan, conversionLessThan,
@ -249,7 +249,7 @@ export function useGasFeeErrors({
[gasErrors, gasWarnings], [gasErrors, gasWarnings],
); );
const { balance: ethBalance } = useSelector(getSelectedAccount); const { balance: ethBalance } = useSelector(getSelectedAccount, shallowEqual);
const balanceError = hasBalanceError( const balanceError = hasBalanceError(
minimumCostInHexWei, minimumCostInHexWei,
transaction, transaction,

7
ui/hooks/useUserPreferencedCurrency.js
View File

@ -1,4 +1,4 @@
import { useSelector } from 'react-redux'; import { shallowEqual, useSelector } from 'react-redux';
import { import {
getPreferences, getPreferences,
getShouldShowFiat, getShouldShowFiat,
@ -37,7 +37,10 @@ import { PRIMARY, SECONDARY, ETH } from '../helpers/constants/common';
*/ */
export function useUserPreferencedCurrency(type, opts = {}) { export function useUserPreferencedCurrency(type, opts = {}) {
const nativeCurrency = useSelector(getNativeCurrency); const nativeCurrency = useSelector(getNativeCurrency);
const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences); const { useNativeCurrencyAsPrimaryCurrency } = useSelector(
getPreferences,
shallowEqual,
);
const showFiat = useSelector(getShouldShowFiat); const showFiat = useSelector(getShouldShowFiat);
const currentCurrency = useSelector(getCurrentCurrency); const currentCurrency = useSelector(getCurrentCurrency);

7
ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
View File

@ -1,6 +1,7 @@
import React, { useContext, useEffect } from 'react'; 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 { useHistory } from 'react-router-dom';
import isEqual from 'lodash/isEqual';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
import { useNewMetricEvent } from '../../../hooks/useMetricEvent'; import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
@ -35,9 +36,9 @@ export default function AwaitingSignatures() {
const t = useContext(I18nContext); const t = useContext(I18nContext);
const history = useHistory(); const history = useHistory();
const dispatch = useDispatch(); const dispatch = useDispatch();
const fetchParams = useSelector(getFetchParams); const fetchParams = useSelector(getFetchParams, isEqual);
const { destinationTokenInfo, sourceTokenInfo } = fetchParams?.metaData || {}; const { destinationTokenInfo, sourceTokenInfo } = fetchParams?.metaData || {};
const approveTxParams = useSelector(getApproveTxParams); const approveTxParams = useSelector(getApproveTxParams, shallowEqual);
const hardwareWalletUsed = useSelector(isHardwareWallet); const hardwareWalletUsed = useSelector(isHardwareWallet);
const hardwareWalletType = useSelector(getHardwareWalletType); const hardwareWalletType = useSelector(getHardwareWalletType);
const needsTwoConfirmations = Boolean(approveTxParams); const needsTwoConfirmations = Boolean(approveTxParams);

11
ui/pages/swaps/awaiting-swap/awaiting-swap.js
View File

@ -1,8 +1,9 @@
import EventEmitter from 'events'; import EventEmitter from 'events';
import React, { useContext, useRef, useState, useEffect } from 'react'; 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 PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import isEqual from 'lodash/isEqual';
import { getBlockExplorerLink } from '@metamask/etherscan-link'; import { getBlockExplorerLink } from '@metamask/etherscan-link';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
import { useNewMetricEvent } from '../../../hooks/useMetricEvent'; import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
@ -67,17 +68,17 @@ export default function AwaitingSwap({
const dispatch = useDispatch(); const dispatch = useDispatch();
const animationEventEmitter = useRef(new EventEmitter()); const animationEventEmitter = useRef(new EventEmitter());
const fetchParams = useSelector(getFetchParams); const fetchParams = useSelector(getFetchParams, isEqual);
const { destinationTokenInfo, sourceTokenInfo } = fetchParams?.metaData || {}; const { destinationTokenInfo, sourceTokenInfo } = fetchParams?.metaData || {};
const fromTokenInputValue = useSelector(getFromTokenInputValue); const fromTokenInputValue = useSelector(getFromTokenInputValue);
const maxSlippage = useSelector(getMaxSlippage); const maxSlippage = useSelector(getMaxSlippage);
const usedQuote = useSelector(getUsedQuote); const usedQuote = useSelector(getUsedQuote, isEqual);
const approveTxParams = useSelector(getApproveTxParams); const approveTxParams = useSelector(getApproveTxParams, shallowEqual);
const swapsGasPrice = useSelector(getUsedSwapsGasPrice); const swapsGasPrice = useSelector(getUsedSwapsGasPrice);
const currentCurrency = useSelector(getCurrentCurrency); const currentCurrency = useSelector(getCurrentCurrency);
const usdConversionRate = useSelector(getUSDConversionRate); const usdConversionRate = useSelector(getUSDConversionRate);
const chainId = useSelector(getCurrentChainId); const chainId = useSelector(getCurrentChainId);
const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider); const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider, shallowEqual);
const [trackedQuotesExpiredEvent, setTrackedQuotesExpiredEvent] = useState( const [trackedQuotesExpiredEvent, setTrackedQuotesExpiredEvent] = useState(
false, false,

3
ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js
View File

@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { shuffle } from 'lodash'; import { shuffle } from 'lodash';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import isEqual from 'lodash/isEqual';
import { import {
navigateBackToBuildQuote, navigateBackToBuildQuote,
getFetchParams, getFetchParams,
@ -30,7 +31,7 @@ export default function LoadingSwapsQuotes({
const history = useHistory(); const history = useHistory();
const animationEventEmitter = useRef(new EventEmitter()); const animationEventEmitter = useRef(new EventEmitter());
const fetchParams = useSelector(getFetchParams); const fetchParams = useSelector(getFetchParams, isEqual);
const quotesFetchStartTime = useSelector(getQuotesFetchStartTime); const quotesFetchStartTime = useSelector(getQuotesFetchStartTime);
const hardwareWalletUsed = useSelector(isHardwareWallet); const hardwareWalletUsed = useSelector(isHardwareWallet);
const hardwareWalletType = useSelector(getHardwareWalletType); const hardwareWalletType = useSelector(getHardwareWalletType);

20
ui/pages/swaps/view-quote/view-quote.js
View File

@ -1,5 +1,5 @@
import React, { useState, useContext, useMemo, useEffect, useRef } from 'react'; 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 { useHistory } from 'react-router-dom';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash';
@ -141,24 +141,24 @@ export default function ViewQuote() {
const customMaxFeePerGas = useSelector(getCustomMaxFeePerGas); const customMaxFeePerGas = useSelector(getCustomMaxFeePerGas);
const customMaxPriorityFeePerGas = useSelector(getCustomMaxPriorityFeePerGas); const customMaxPriorityFeePerGas = useSelector(getCustomMaxPriorityFeePerGas);
const swapsUserFeeLevel = useSelector(getSwapsUserFeeLevel); const swapsUserFeeLevel = useSelector(getSwapsUserFeeLevel);
const tokenConversionRates = useSelector(getTokenExchangeRates); const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual);
const memoizedTokenConversionRates = useEqualityCheck(tokenConversionRates); const memoizedTokenConversionRates = useEqualityCheck(tokenConversionRates);
const { balance: ethBalance } = useSelector(getSelectedAccount); const { balance: ethBalance } = useSelector(getSelectedAccount, shallowEqual);
const conversionRate = useSelector(conversionRateSelector); const conversionRate = useSelector(conversionRateSelector);
const currentCurrency = useSelector(getCurrentCurrency); const currentCurrency = useSelector(getCurrentCurrency);
const swapsTokens = useSelector(getTokens); const swapsTokens = useSelector(getTokens, isEqual);
const networkAndAccountSupports1559 = useSelector( const networkAndAccountSupports1559 = useSelector(
checkNetworkAndAccountSupports1559, checkNetworkAndAccountSupports1559,
); );
const balanceError = useSelector(getBalanceError); const balanceError = useSelector(getBalanceError);
const fetchParams = useSelector(getFetchParams); const fetchParams = useSelector(getFetchParams, isEqual);
const approveTxParams = useSelector(getApproveTxParams); const approveTxParams = useSelector(getApproveTxParams, shallowEqual);
const selectedQuote = useSelector(getSelectedQuote); const selectedQuote = useSelector(getSelectedQuote, isEqual);
const topQuote = useSelector(getTopQuote); const topQuote = useSelector(getTopQuote, isEqual);
const usedQuote = selectedQuote || topQuote; const usedQuote = selectedQuote || topQuote;
const tradeValue = usedQuote?.trade?.value ?? '0x0'; const tradeValue = usedQuote?.trade?.value ?? '0x0';
const swapsQuoteRefreshTime = useSelector(getSwapsQuoteRefreshTime); const swapsQuoteRefreshTime = useSelector(getSwapsQuoteRefreshTime);
const defaultSwapsToken = useSelector(getSwapsDefaultToken); const defaultSwapsToken = useSelector(getSwapsDefaultToken, isEqual);
const chainId = useSelector(getCurrentChainId); const chainId = useSelector(getCurrentChainId);
const nativeCurrencySymbol = useSelector(getNativeCurrency); const nativeCurrencySymbol = useSelector(getNativeCurrency);
const reviewSwapClickedTimestamp = useSelector(getReviewSwapClickedTimestamp); const reviewSwapClickedTimestamp = useSelector(getReviewSwapClickedTimestamp);
@ -343,7 +343,7 @@ export default function ViewQuote() {
) )
: null; : null;
const destinationToken = useSelector(getDestinationTokenInfo); const destinationToken = useSelector(getDestinationTokenInfo, isEqual);
useEffect(() => { useEffect(() => {
if (insufficientTokens || insufficientEth) { if (insufficientTokens || insufficientEth) {