[Subsidy] - Show fee breakdown adjusted for subsidy! (#2590)

* show fee discount in tooltip * fix bug with fee amt * use better maths
gnosis · Mar 25, 2022 · d8df488 · d8df488
1 parent 66dcd50
commit d8df488
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 25 deletions.
diff --git a/src/custom/components/swap/FeeInformationTooltip.tsx b/src/custom/components/swap/FeeInformationTooltip.tsx
@@ -1,19 +1,20 @@
-import { useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
+import { Currency, CurrencyAmount, Fraction, Percent, Token } from '@uniswap/sdk-core'
 import TradeGp from 'state/swap/TradeGp'
 import QuestionHelper from 'components/QuestionHelper'
 import styled from 'styled-components/macro'
 import { formatMax, formatSmart } from 'utils/format'
 import useTheme from 'hooks/useTheme'
-import { FIAT_PRECISION } from 'constants/index'
-import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { AMOUNT_PRECISION, FIAT_PRECISION } from 'constants/index'
+import useCowBalanceAndSubsidy from 'hooks/useCowBalanceAndSubsidy'
 
 interface FeeInformationTooltipProps {
   trade?: TradeGp
   label: React.ReactNode
   showHelper: boolean
   amountBeforeFees?: string
   amountAfterFees?: string
-  feeAmount?: string
+  feeAmount?: CurrencyAmount<Currency>
   type: 'From' | 'To'
   fiatValue: CurrencyAmount<Token> | null
   showFiat?: boolean
@@ -31,14 +32,16 @@ export const FeeInformationTooltipWrapper = styled.div`
   height: 60px;
 `
 
-const FeeTooltipLine = styled.p`
+const FeeTooltipLine = styled.p<{ discount?: boolean }>`
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
   margin: 0;
   gap: 0 8px;
 
+  ${({ discount = false }) => discount && 'text-decoration: line-through;'}
+
   font-size: small;
 
   > .green {
@@ -75,13 +78,69 @@ const FeeInnerWrapper = styled.div`
   gap: 2px;
 `
 
+type FeeBreakdownProps = FeeInformationTooltipProps & {
+  symbol: string | undefined
+  discount: number
+}
+const ONE = new Fraction(1, 1)
+const FeeBreakdownLine = ({ feeAmount, discount, type, symbol }: FeeBreakdownProps) => {
+  const typeString = type === 'From' ? '+' : '-'
+
+  const FeeAmount = useCallback(() => {
+    const discountAsPercent = new Percent(discount, 100)
+    // we need the fee BEFORE the discount as the backend will return us the adjusted fee with discount
+    const adjustedFee = feeAmount
+      ? formatSmart(feeAmount.multiply(ONE.add(discountAsPercent)), AMOUNT_PRECISION)
+      : undefined
+
+    return (
+      <>
+        <span>Fee</span>
+        {adjustedFee ? (
+          <span>
+            {typeString}
+            {adjustedFee} {symbol}
+          </span>
+        ) : (
+          <strong className="green">Free</strong>
+        )}
+      </>
+    )
+  }, [discount, feeAmount, symbol, typeString])
+
+  const FeeDiscountedAmount = useCallback(() => {
+    const smartFee = formatSmart(feeAmount, AMOUNT_PRECISION)
+    return (
+      <>
+        <strong className="green">Fee [-{discount}%]</strong>
+        <span>
+          {typeString}
+          {smartFee} {symbol}
+        </span>
+      </>
+    )
+  }, [discount, feeAmount, symbol, typeString])
+
+  return (
+    <>
+      <FeeTooltipLine discount={!!feeAmount && !!discount}>
+        <FeeAmount />
+      </FeeTooltipLine>
+      {!!feeAmount && !!discount && (
+        <FeeTooltipLine>
+          <FeeDiscountedAmount />
+        </FeeTooltipLine>
+      )}
+    </>
+  )
+}
+
 export default function FeeInformationTooltip(props: FeeInformationTooltipProps) {
   const {
     trade,
     label,
     amountBeforeFees,
     amountAfterFees,
-    feeAmount,
     type,
     showHelper,
     fiatValue,
@@ -91,6 +150,8 @@ export default function FeeInformationTooltip(props: FeeInformationTooltipProps)
 
   const theme = useTheme()
 
+  const { subsidy } = useCowBalanceAndSubsidy()
+
   const [symbol, fullFeeAmount] = useMemo(() => {
     const amount = trade?.[type === 'From' ? 'inputAmount' : 'outputAmount']
     return amount ? [amount.currency.symbol || '', formatMax(amount, amount.currency.decimals) || '-'] : []
@@ -113,18 +174,7 @@ export default function FeeInformationTooltip(props: FeeInformationTooltipProps)
                   {amountBeforeFees} {symbol}
                 </span>{' '}
               </FeeTooltipLine>
-              <FeeTooltipLine>
-                <span>Fee</span>
-                {feeAmount ? (
-                  <span>
-                    {type === 'From' ? '+' : '-'}
-                    {feeAmount} {symbol}
-                  </span>
-                ) : (
-                  <strong className="green">Free</strong>
-                )}{' '}
-              </FeeTooltipLine>
-              {/* TODO: Add gas costs when available (wait for design) */}
+              <FeeBreakdownLine {...props} discount={subsidy.discount} symbol={symbol} />
               {allowsOffchainSigning && (
                 <FeeTooltipLine>
                   <span>Gas costs</span>

diff --git a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx
@@ -154,7 +154,7 @@ SwapModalHeaderProps) {
           <FeeInformationTooltip
             amountAfterFees={formatSmart(trade.inputAmountWithFee, AMOUNT_PRECISION)}
             amountBeforeFees={formatSmart(trade.inputAmountWithoutFee, AMOUNT_PRECISION)}
-            feeAmount={formatSmart(trade.fee.feeAsCurrency, AMOUNT_PRECISION)}
+            feeAmount={trade.fee.feeAsCurrency}
             allowsOffchainSigning={allowsOffchainSigning}
             label={exactInLabel}
             showHelper
@@ -205,7 +205,7 @@ SwapModalHeaderProps) {
           <FeeInformationTooltip
             amountAfterFees={formatSmart(trade.outputAmount, AMOUNT_PRECISION)}
             amountBeforeFees={formatSmart(trade.outputAmountWithoutFee, AMOUNT_PRECISION)}
-            feeAmount={formatSmart(trade.outputAmountWithoutFee?.subtract(trade.outputAmount), AMOUNT_PRECISION)}
+            feeAmount={trade.outputAmountWithoutFee?.subtract(trade.outputAmount)}
             label={exactOutLabel}
             allowsOffchainSigning={allowsOffchainSigning}
             showHelper

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