Make FeeCard component specific to swaps (#9603)

* Make FeeCard component specific to swaps

* Fix some prop types

ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js

@@ -51,9 +51,9 @@ export default class GasModalPageContainer extends Component {
     isEthereumNetwork: PropTypes.bool,
     customGasLimitMessage: PropTypes.string,
     customTotalSupplement: PropTypes.string,
-    isSwap: PropTypes.boolean,
+    isSwap: PropTypes.bool,
     value: PropTypes.string,
-    conversionRate: PropTypes.string,
+    conversionRate: PropTypes.number,
   }
 
   state = {

ui/app/pages/swaps/fee-card/fee-card.js

@@ -1,21 +1,26 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
+import { I18nContext } from '../../../contexts/i18n'
 import InfoTooltip from '../../../components/ui/info-tooltip'
 
 export default function FeeCard ({
-  feeRowText,
   primaryFee,
   secondaryFee,
-  thirdRow,
-  maxFeeRow,
+  hideTokenApprovalRow,
+  onFeeCardMaxRowClick,
+  tokenApprovalTextComponent,
+  tokenApprovalSourceTokenSymbol,
+  onTokenApprovalClick,
 }) {
+  const t = useContext(I18nContext)
+
   return (
     <div className="fee-card">
       <div className="fee-card__main">
         <div className="fee-card__row-header">
           <div>
             <div className="fee-card__row-header-text--bold">
-              {feeRowText}
+              {t('swapEstimatedNetworkFee')}
             </div>
           </div>
           <div>
@@ -29,18 +34,18 @@ export default function FeeCard ({
             )}
           </div>
         </div>
-        <div className="fee-card__row-header" onClick={() => maxFeeRow.onClick()}>
+        <div className="fee-card__row-header" onClick={() => onFeeCardMaxRowClick()}>
           <div>
             <div className="fee-card__row-header-text">
-              {maxFeeRow.text}
+              {t('swapMaxNetworkFees')}
             </div>
             <div className="fee-card__link">
-              {maxFeeRow.linkText}
+              {t('edit')}
             </div>
             <div className="fee-card__row-label">
               <InfoTooltip
                 position="top"
-                contentText={maxFeeRow.tooltipText}
+                contentText={t('swapMaxNetworkFeeInfo')}
               />
             </div>
           </div>
@@ -55,18 +60,18 @@ export default function FeeCard ({
             )}
           </div>
         </div>
-        {thirdRow && !thirdRow.hide && (
+        {!hideTokenApprovalRow && (
           <div className="fee-card__top-bordered-row">
             <div className="fee-card__row-label">
               <div className="fee-card__row-header-text">
-                {thirdRow.text}
+                {t('swapThisWillAllowApprove', [tokenApprovalTextComponent])}
               </div>
-              <div className="fee-card__link" onClick={() => thirdRow.onClick()}>
-                {thirdRow.linkText}
+              <div className="fee-card__link" onClick={() => onTokenApprovalClick()}>
+                {t('swapEditLimit')}
               </div>
               <InfoTooltip
                 position="top"
-                contentText={thirdRow.tooltipText}
+                contentText={t('swapEnableDescription', [tokenApprovalSourceTokenSymbol])}
               />
             </div>
           </div>
@@ -77,7 +82,6 @@ export default function FeeCard ({
 }
 
 FeeCard.propTypes = {
-  feeRowText: PropTypes.string.isRequired,
   primaryFee: PropTypes.shape({
     fee: PropTypes.string.isRequired,
     maxFee: PropTypes.string.isRequired,
@@ -86,23 +90,9 @@ FeeCard.propTypes = {
     fee: PropTypes.string.isRequired,
     maxFee: PropTypes.string.isRequired,
   }),
-  maxFeeRow: PropTypes.shape({
-    text: PropTypes.string.isRequired,
-    linkText: PropTypes.string.isRequired,
-    tooltipText: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired,
-  }).isRequired,
-  thirdRow: PropTypes.shape({
-    text: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.node,
-    ]).isRequired,
-    linkText: PropTypes.string.isRequired,
-    tooltipText: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.node,
-    ]).isRequired,
-    onClick: PropTypes.func.isRequired,
-    hide: PropTypes.bool.isRequired,
-  }),
+  onFeeCardMaxRowClick: PropTypes.func.isRequired,
+  hideTokenApprovalRow: PropTypes.bool.isRequired,
+  tokenApprovalTextComponent: PropTypes.node,
+  tokenApprovalSourceTokenSymbol: PropTypes.string,
+  onTokenApprovalClick: PropTypes.func,
 }

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

@@ -6,7 +6,7 @@ export const QUOTE_DATA_ROWS_PROPTYPES_SHAPE = PropTypes.shape({
   destinationTokenDecimals: PropTypes.number.isRequired,
   destinationTokenSymbol: PropTypes.string.isRequired,
   destinationTokenValue: PropTypes.string.isRequired,
-  isBestQuote: PropTypes.bool.isRequired,
+  isBestQuote: PropTypes.bool,
   liquiditySource: PropTypes.string.isRequired,
   metaMaskFee: PropTypes.string.isRequired,
   networkFees: PropTypes.string.isRequired,

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

@@ -340,7 +340,7 @@ export default function ViewQuote () {
     }
   }, [sourceTokenSymbol, sourceTokenValue, destinationTokenSymbol, destinationTokenValue, fetchParams, topQuote, numberOfQuotes, feeInFiat, bestQuoteReviewedEvent, anonymousBestQuoteReviewedEvent])
 
-  const onFeeCardThirdRowClickHandler = () => {
+  const onFeeCardTokenApprovalClick = () => {
     anonymousEditSpendLimitOpened()
     editSpendLimitOpened()
     dispatch(showModal({
@@ -375,7 +375,7 @@ export default function ViewQuote () {
     }))
   }
 
-  const onFeeCardMaxRowClickHandler = () => dispatch(showModal({
+  const onFeeCardMaxRowClick = () => dispatch(showModal({
     name: 'CUSTOMIZE_GAS',
     txData: { txParams: { ...tradeTxParams, gas: maxGasLimit } },
     isSwap: true,
@@ -396,7 +396,7 @@ export default function ViewQuote () {
     useFastestButtons: true,
   }))
 
-  const thirdRowTextComponent = (
+  const tokenApprovalTextComponent = (
     <span
       key="swaps-view-quote-approve-symbol-1"
       className="view-quote__bold"
@@ -501,7 +501,6 @@ export default function ViewQuote () {
           })}
         >
           <FeeCard
-            feeRowText={t('swapEstimatedNetworkFee')}
             primaryFee={({
               fee: feeInEth,
               maxFee: maxFeeInEth,
@@ -510,19 +509,13 @@ export default function ViewQuote () {
               fee: feeInFiat,
               maxFee: maxFeeInFiat,
             })}
-            maxFeeRow={({
-              text: t('swapMaxNetworkFees'),
-              linkText: t('edit'),
-              tooltipText: t('swapMaxNetworkFeeInfo'),
-              onClick: onFeeCardMaxRowClickHandler,
-            })}
-            thirdRow={({
-              text: t('swapThisWillAllowApprove', [thirdRowTextComponent]),
-              linkText: t('swapEditLimit'),
-              tooltipText: t('swapEnableDescription', [sourceTokenSymbol]),
-              onClick: onFeeCardThirdRowClickHandler,
-              hide: !approveTxParams || (balanceError && !warningHidden),
-            })}
+            onFeeCardMaxRowClick={onFeeCardMaxRowClick}
+            hideTokenApprovalRow={
+              !approveTxParams || (balanceError && !warningHidden)
+            }
+            tokenApprovalTextComponent={tokenApprovalTextComponent}
+            tokenApprovalSourceTokenSymbol={sourceTokenSymbol}
+            onTokenApprovalClick={onFeeCardTokenApprovalClick}
           />
         </div>
       </div>