feat: fees repay notice

shapeshift · Nov 22, 2023 · df4294f · df4294f
1 parent 4b1fe00
commit df4294f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
@@ -2220,6 +2220,7 @@
     "repayNoticeTitle": "Hold Up!",
     "repayNoticeCta": "I understand",
     "repayNotice": "To get back your collateral you will need to repay 100% of your debt.",
+    "feesNotice": "Fees occurred on the collateral you will receive back after repaying 100% of your debt",
     "faq": {
       "title": "FAQ",
       "lending": {

diff --git a/src/pages/Lending/Pool/components/Repay/RepayConfirm.tsx b/src/pages/Lending/Pool/components/Repay/RepayConfirm.tsx
@@ -311,7 +311,7 @@ export const RepayConfirm = ({
             </Skeleton>
             <Skeleton isLoaded={isLendingQuoteCloseSuccess}>
               <Row fontSize='sm' fontWeight='medium'>
-                <HelperTooltip label='tbd'>
+                <HelperTooltip label={translate('lending.feesNotice')}>
                   <Row.Label>{translate('common.feesPlusSlippage')}</Row.Label>
                 </HelperTooltip>
                 <Row.Value>

diff --git a/src/pages/Lending/Pool/components/Repay/RepayInput.tsx b/src/pages/Lending/Pool/components/Repay/RepayInput.tsx
@@ -19,6 +19,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router'
 import { Amount } from 'components/Amount/Amount'
+import { HelperTooltip } from 'components/HelperTooltip/HelperTooltip'
 import { TradeAssetSelect } from 'components/MultiHopTrade/components/AssetSelection'
 import { TradeAssetInput } from 'components/MultiHopTrade/components/TradeAssetInput'
 import { Row } from 'components/Row/Row'
@@ -388,14 +389,16 @@ export const RepayInput = ({
             </Skeleton>
           </Row.Value>
         </Row>
-        {bnOrZero(lendingQuoteCloseData?.quoteTotalFeesFiatUserCurrency).gt(0) && (
-          <Row fontSize='sm' fontWeight='medium'>
+        <Row fontSize='sm' fontWeight='medium'>
+          <HelperTooltip label={translate('lending.feesNotice')}>
             <Row.Label>{translate('common.fees')}</Row.Label>
-            <Row.Value>
-              <Amount.Fiat value={lendingQuoteCloseData!.quoteTotalFeesFiatUserCurrency} />
-            </Row.Value>
-          </Row>
-        )}
+          </HelperTooltip>
+          <Row.Value>
+            <Skeleton isLoaded={isLendingQuoteCloseSuccess}>
+              <Amount.Fiat value={lendingQuoteCloseData?.quoteTotalFeesFiatUserCurrency ?? 0} />
+            </Skeleton>
+          </Row.Value>
+        </Row>
         <Button
           size='lg'
           colorScheme={