From b31816d6f7c78253f1b6dbc7172a60e8f462dadc Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 14 Oct 2020 10:06:17 -0700
Subject: [PATCH 1/3] Make FeeCard component specific to swaps

---
 .../gas-modal-page-container.component.js     |  4 +-
 ui/app/pages/swaps/fee-card/fee-card.js       | 58 ++++++++-----------
 ui/app/pages/swaps/view-quote/view-quote.js   | 27 ++++-----
 3 files changed, 36 insertions(+), 53 deletions(-)

diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
index 9c8969085..061f43a95 100644
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ b/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 = {
diff --git a/ui/app/pages/swaps/fee-card/fee-card.js b/ui/app/pages/swaps/fee-card/fee-card.js
index d8caf51ad..f62f87120 100644
--- a/ui/app/pages/swaps/fee-card/fee-card.js
+++ b/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,
+  sourceTokenSymbol,
+  onFeeCardTokenApprovalClick,
 }) {
+  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={() => onFeeCardTokenApprovalClick()}>
+                {t('swapEditLimit')}
               </div>
               <InfoTooltip
                 position="top"
-                contentText={thirdRow.tooltipText}
+                contentText={t('swapEnableDescription', [sourceTokenSymbol])}
               />
             </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,
+  sourceTokenSymbol: PropTypes.string,
+  onFeeCardTokenApprovalClick: PropTypes.func,
 }
diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js
index 19a19125f..f4c9d48b3 100644
--- a/ui/app/pages/swaps/view-quote/view-quote.js
+++ b/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}
+            sourceTokenSymbol={sourceTokenSymbol}
+            onFeeCardTokenApprovalClick={onFeeCardTokenApprovalClick}
           />
         </div>
       </div>

From 799df99bd0fb0758dbfe3c5e8d5af249b5fa17f4 Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 14 Oct 2020 10:12:35 -0700
Subject: [PATCH 2/3] Rename some props

---
 ui/app/pages/swaps/fee-card/fee-card.js     | 12 ++++++------
 ui/app/pages/swaps/view-quote/view-quote.js |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/app/pages/swaps/fee-card/fee-card.js b/ui/app/pages/swaps/fee-card/fee-card.js
index f62f87120..61c173015 100644
--- a/ui/app/pages/swaps/fee-card/fee-card.js
+++ b/ui/app/pages/swaps/fee-card/fee-card.js
@@ -9,8 +9,8 @@ export default function FeeCard ({
   hideTokenApprovalRow,
   onFeeCardMaxRowClick,
   tokenApprovalTextComponent,
-  sourceTokenSymbol,
-  onFeeCardTokenApprovalClick,
+  tokenApprovalSourceTokenSymbol,
+  onTokenApprovalClick,
 }) {
   const t = useContext(I18nContext)
 
@@ -66,12 +66,12 @@ export default function FeeCard ({
               <div className="fee-card__row-header-text">
                 {t('swapThisWillAllowApprove', [tokenApprovalTextComponent])}
               </div>
-              <div className="fee-card__link" onClick={() => onFeeCardTokenApprovalClick()}>
+              <div className="fee-card__link" onClick={() => onTokenApprovalClick()}>
                 {t('swapEditLimit')}
               </div>
               <InfoTooltip
                 position="top"
-                contentText={t('swapEnableDescription', [sourceTokenSymbol])}
+                contentText={t('swapEnableDescription', [tokenApprovalSourceTokenSymbol])}
               />
             </div>
           </div>
@@ -93,6 +93,6 @@ FeeCard.propTypes = {
   onFeeCardMaxRowClick: PropTypes.func.isRequired,
   hideTokenApprovalRow: PropTypes.bool.isRequired,
   tokenApprovalTextComponent: PropTypes.node,
-  sourceTokenSymbol: PropTypes.string,
-  onFeeCardTokenApprovalClick: PropTypes.func,
+  tokenApprovalSourceTokenSymbol: PropTypes.string,
+  onTokenApprovalClick: PropTypes.func,
 }
diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js
index f4c9d48b3..a94b2319b 100644
--- a/ui/app/pages/swaps/view-quote/view-quote.js
+++ b/ui/app/pages/swaps/view-quote/view-quote.js
@@ -514,8 +514,8 @@ export default function ViewQuote () {
               !approveTxParams || (balanceError && !warningHidden)
             }
             tokenApprovalTextComponent={tokenApprovalTextComponent}
-            sourceTokenSymbol={sourceTokenSymbol}
-            onFeeCardTokenApprovalClick={onFeeCardTokenApprovalClick}
+            tokenApprovalSourceTokenSymbol={sourceTokenSymbol}
+            onTokenApprovalClick={onFeeCardTokenApprovalClick}
           />
         </div>
       </div>

From a0d7aa56aaf8c47a1fc610b099cd107653378721 Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 14 Oct 2020 10:17:41 -0700
Subject: [PATCH 3/3] Loosen isBestQuote PropType

---
 .../select-quote-popover/select-quote-popover-constants.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/pages/swaps/select-quote-popover/select-quote-popover-constants.js b/ui/app/pages/swaps/select-quote-popover/select-quote-popover-constants.js
index 2812b68d5..27f99be04 100644
--- a/ui/app/pages/swaps/select-quote-popover/select-quote-popover-constants.js
+++ b/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,