Get swaps fee from api (#9677)

* Use fee from quote object instead of from fee api

* Remove code related to the metaMaskFeeAmount property in state and the /fee api

ui/app/ducks/swaps/swaps.js

@@ -50,7 +50,6 @@ const initialState = {
   quotesFetchStartTime: null,
   topAssets: {},
   toToken: null,
-  metamaskFeeAmount: null,
 }
 
 const slice = createSlice({
@@ -89,9 +88,6 @@ const slice = createSlice({
     setToToken: (state, action) => {
       state.toToken = action.payload
     },
-    setMetamaskFeeAmount: (state, action) => {
-      state.metamaskFeeAmount = action.payload
-    },
   },
 })
 
@@ -111,8 +107,6 @@ export const getTopAssets = (state) => state.swaps.topAssets
 
 export const getToToken = (state) => state.swaps.toToken
 
-export const getMetaMaskFeeAmount = (state) => state.swaps.metamaskFeeAmount
-
 export const getFetchingQuotes = (state) => state.swaps.fetchingQuotes
 
 export const getQuotesFetchStartTime = (state) => state.swaps.quotesFetchStartTime
@@ -200,7 +194,6 @@ const {
   setQuotesFetchStartTime,
   setTopAssets,
   setToToken,
-  setMetamaskFeeAmount,
 } = actions
 
 export {
@@ -212,7 +205,6 @@ export {
   setQuotesFetchStartTime as setSwapQuotesFetchStartTime,
   setTopAssets,
   setToToken as setSwapToToken,
-  setMetamaskFeeAmount,
 }
 
 export const navigateBackToBuildQuote = (history) => {

ui/app/pages/swaps/index.js

@@ -20,7 +20,6 @@ import {
   getAggregatorMetadata,
   getBackgroundSwapRouteState,
   getSwapsErrorKey,
-  setMetamaskFeeAmount,
   getSwapsFeatureLiveness,
   prepareToLeaveSwaps,
   fetchAndSetSwapsGasPriceInfo,
@@ -49,7 +48,7 @@ import { useNewMetricEvent } from '../../hooks/useMetricEvent'
 import { getValueFromWeiHex } from '../../helpers/utils/conversions.util'
 
 import FeatureToggledRoute from '../../helpers/higher-order-components/feature-toggled-route'
-import { fetchTokens, fetchTopAssets, getSwapsTokensReceivedFromTxMeta, fetchAggregatorMetadata, fetchMetaMaskFeeAmount } from './swaps.util'
+import { fetchTokens, fetchTopAssets, getSwapsTokensReceivedFromTxMeta, fetchAggregatorMetadata } from './swaps.util'
 import AwaitingSwap from './awaiting-swap'
 import LoadingQuote from './loading-swaps-quotes'
 import BuildQuote from './build-quote'
@@ -155,11 +154,6 @@ export default function Swap () {
         dispatch(setAggregatorMetadata(newAggregatorMetadata))
       })
 
-    fetchMetaMaskFeeAmount()
-      .then((metaMaskFeeAmount) => {
-        dispatch(setMetamaskFeeAmount(metaMaskFeeAmount))
-      })
-
     dispatch(resetCustomGasState())
     dispatch(fetchAndSetSwapsGasPriceInfo())
 

ui/app/pages/swaps/select-quote-popover/quote-details/quote-details.js

@@ -1,8 +1,6 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { useSelector } from 'react-redux'
 import { I18nContext } from '../../../../contexts/i18n'
-import { getMetaMaskFeeAmount } from '../../../../ducks/swaps/swaps'
 import InfoTooltip from '../../../../components/ui/info-tooltip'
 import ExchangeRateDisplay from '../../exchange-rate-display'
 
@@ -16,9 +14,9 @@ const QuoteDetails = ({
   minimumAmountReceived,
   feeInEth,
   networkFees,
+  metaMaskFee,
 }) => {
   const t = useContext(I18nContext)
-  const metaMaskFee = useSelector(getMetaMaskFeeAmount)
   return (
     <div className="quote-details">
       <div className="quote-details__row">
@@ -105,6 +103,7 @@ QuoteDetails.propTypes = {
   minimumAmountReceived: PropTypes.string.isRequired,
   feeInEth: PropTypes.string.isRequired,
   networkFees: PropTypes.string.isRequired,
+  metaMaskFee: PropTypes.number.isRequired,
 }
 
 export default QuoteDetails

ui/app/pages/swaps/swaps.util.js

@@ -27,8 +27,6 @@ const getBaseApi = function (type) {
       return `https://api.metaswap.codefi.network/featureFlag`
     case 'aggregatorMetadata':
       return `https://api.metaswap.codefi.network/aggregatorMetadata`
-    case 'feeAmount':
-      return `https://api.metaswap.codefi.network/fee`
     default:
       throw new Error('getBaseApi requires an api call type')
   }
@@ -247,11 +245,6 @@ export async function fetchSwapsFeatureLiveness () {
   return status?.active
 }
 
-export async function fetchMetaMaskFeeAmount () {
-  const response = await fetchWithCache(getBaseApi('feeAmount'), { method: 'GET' }, { cacheRefreshTime: 600000 })
-  return response?.fee
-}
-
 export async function fetchTokenPrice (address) {
   const query = `contract_addresses=${address}&vs_currencies=eth`
 
@@ -294,7 +287,18 @@ export function getRenderableGasFeesForQuote (tradeGas, approveGas, gasPrice, cu
 
 export function quotesToRenderableData (quotes, gasPrice, conversionRate, currentCurrency, approveGas, tokenConversionRates) {
   return Object.values(quotes).map((quote) => {
-    const { destinationAmount = 0, sourceAmount = 0, sourceTokenInfo, destinationTokenInfo, slippage, aggType, aggregator, gasEstimateWithRefund, averageGas } = quote
+    const {
+      destinationAmount = 0,
+      sourceAmount = 0,
+      sourceTokenInfo,
+      destinationTokenInfo,
+      slippage,
+      aggType,
+      aggregator,
+      gasEstimateWithRefund,
+      averageGas,
+      fee,
+    } = quote
     const sourceValue = calcTokenAmount(sourceAmount, sourceTokenInfo.decimals || 18).toString(10)
     const destinationValue = calcTokenAmount(destinationAmount, destinationTokenInfo.decimals || 18).toPrecision(8)
 
@@ -357,6 +361,7 @@ export function quotesToRenderableData (quotes, gasPrice, conversionRate, curren
       sourceTokenValue: sourceValue,
       ethValueOfTrade,
       minimumAmountReceived,
+      metaMaskFee: fee,
     }
   })
 }

ui/app/pages/swaps/view-quote/view-quote.js

@@ -22,7 +22,6 @@ import {
   getBalanceError,
   getCustomSwapsGas,
   getDestinationTokenInfo,
-  getMetaMaskFeeAmount,
   getSwapsTradeTxParams,
   getTopQuote,
   navigateBackToBuildQuote,
@@ -341,7 +340,7 @@ export default function ViewQuote () {
     }
   }, [sourceTokenSymbol, sourceTokenValue, destinationTokenSymbol, destinationTokenValue, fetchParams, topQuote, numberOfQuotes, feeInFiat, bestQuoteReviewedEvent, anonymousBestQuoteReviewedEvent])
 
-  const metaMaskFee = useSelector(getMetaMaskFeeAmount)
+  const metaMaskFee = usedQuote.fee
 
   const onFeeCardTokenApprovalClick = () => {
     anonymousEditSpendLimitOpened()