smarter container

gnosis · Aug 30, 2021 · 0cbcffa · 0cbcffa
1 parent 37c2604
commit 0cbcffa
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx
@@ -150,6 +150,7 @@ SwapModalHeaderProps) {
             showHelper
             trade={trade}
             type="From"
+            fiatValue={fiatValueInput}
           />
         </AuxInformationContainer>
       )}
@@ -202,6 +203,7 @@ SwapModalHeaderProps) {
             showHelper
             trade={trade}
             type="To"
+            fiatValue={fiatValueOutput}
           />
         </AuxInformationContainer>
       )}

diff --git a/src/custom/components/swap/TradeSummary/index.tsx b/src/custom/components/swap/TradeSummary/index.tsx
@@ -9,6 +9,7 @@ import { RowFixed } from 'components/Row'
 import { RowFee } from './RowFee'
 import { RowSlippage } from './RowSlippage'
 import { RowReceivedAfterSlippage } from './RowReceivedAfterSlippage'
+import { useHigherUSDValue } from 'hooks/useUSDCPrice'
 
 const Wrapper = styled.div`
   ${RowFixed} {
@@ -22,6 +23,7 @@ export type TradeSummaryProps = Required<AdvancedSwapDetailsProps>
 
 export default function TradeSummary({ trade, allowedSlippage, showHelpers, showFee }: TradeSummaryProps) {
   const allowsOffchainSigning = true // TODO: Next PR will handle this
+  const feeFiatValue = useHigherUSDValue(trade.fee.feeAsCurrency)
 
   return (
     <Wrapper>
@@ -30,6 +32,7 @@ export default function TradeSummary({ trade, allowedSlippage, showHelpers, show
         {showFee && (
           <RowFee
             trade={trade}
+            feeFiatValue={feeFiatValue}
             allowsOffchainSigning={allowsOffchainSigning}
             showHelpers={showHelpers}
             fontSize={12}

diff --git a/src/custom/pages/Swap/SwapMod.tsx b/src/custom/pages/Swap/SwapMod.tsx
@@ -492,6 +492,7 @@ export default function Swap({
                       amountAfterFees={formatSmart(trade?.inputAmountWithFee, AMOUNT_PRECISION)}
                       type="From"
                       feeAmount={formatSmart(trade?.fee?.feeAsCurrency, AMOUNT_PRECISION)}
+                      fiatValue={fiatValueInput}
                     />
                   )
                 }
@@ -550,6 +551,7 @@ export default function Swap({
                         trade?.outputAmountWithoutFee?.subtract(trade?.outputAmount),
                         AMOUNT_PRECISION
                       )}
+                      fiatValue={fiatValueOutput}
                     />
                   )
                 }

diff --git a/src/custom/pages/Swap/index.tsx b/src/custom/pages/Swap/index.tsx
@@ -32,6 +32,7 @@ import { RowSlippage } from 'components/swap/TradeSummary/RowSlippage'
 import { RowReceivedAfterSlippage } from 'components/swap/TradeSummary/RowReceivedAfterSlippage'
 import { RowFee } from 'components/swap/TradeSummary/RowFee'
 import { useExpertModeManager, useUserSlippageToleranceWithDefault } from 'state/user/hooks'
+import { useHigherUSDValue } from 'hooks/useUSDCPrice'
 
 interface TradeBasicDetailsProp extends BoxProps {
   trade?: TradeGp
@@ -215,11 +216,21 @@ function TradeBasicDetails({ trade, fee, ...boxProps }: TradeBasicDetailsProp) {
   const [isExpertMode] = useExpertModeManager()
   const allowsOffchainSigning = true // TODO: Deal with this in next PR
 
+  // trades are null when there is a fee quote error e.g
+  // so we can take both
+  const feeFiatValue = useHigherUSDValue(trade?.fee.feeAsCurrency || fee)
+
   return (
     <LowerSectionWrapper {...boxProps}>
       {/* Fees */}
       {(trade || fee) && (
-        <RowFee trade={trade} showHelpers={true} allowsOffchainSigning={allowsOffchainSigning} fee={fee} />
+        <RowFee
+          trade={trade}
+          showHelpers={true}
+          allowsOffchainSigning={allowsOffchainSigning}
+          fee={fee}
+          feeFiatValue={feeFiatValue}
+        />
       )}
 
       {isExpertMode && trade && (