feat(dev-frontend): 🎸 replace redemption details w/ plain info text

blokk-studio · Feb 4, 2025 · db4e103 · db4e103
1 parent 9702ee4
commit db4e103
Showing 1 changed file with 4 additions and 85 deletions.
diff --git a/packages/dev-frontend/src/components/RedeemHchf/RedeemHchf.tsx b/packages/dev-frontend/src/components/RedeemHchf/RedeemHchf.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
-import { Flex, Button, Box, Card, Heading, Spinner } from "theme-ui";
-import { Decimal, getRedemptionDetails, Percent } from "@liquity/lib-base";
+import React, { useState } from "react";
+import { Flex, Button, Box, Card, Heading } from "theme-ui";
+import { Decimal } from "@liquity/lib-base";
 import { useLiquitySelector } from "@liquity/lib-react";
 
 import { ActionDescription, Amount } from "../ActionDescription";
@@ -15,7 +15,6 @@ import { LoadingButton } from "../LoadingButton";
 import { EditableRow } from "../Trove/Editor";
 import { ErrorDescription } from "../ErrorDescription";
 import { useConstants } from "../../hooks/constants";
-import { InfoIcon } from "../InfoIcon";
 
 const TRANSACTION_ID = "trove-adjustment";
 
@@ -92,64 +91,6 @@ export const RedeemHchf: React.FC = () => {
 
   const editingState = useState<string>();
 
-  const [areRedemptionDetailsLoading, setAreRedemptionDetailsLoading] = useState(false);
-  const [redemptionDetails, setRedemptionDetails] = useState<
-    | (ReturnType<typeof getRedemptionDetails> & { redemptionFeePercent: Percent<Decimal, Decimal> })
-    | null
-  >();
-  useEffect(() => {
-    let mounted = true;
-    setRedemptionDetails(null);
-    setAreRedemptionDetailsLoading(true);
-
-    if (amountOfHchfToRedeem.isZero) {
-      setRedemptionDetails(null);
-      setAreRedemptionDetailsLoading(false);
-      return;
-    }
-
-    Promise.all([
-      liquity.getFees(),
-      liquity.getTotal(),
-      liquity.getTroves({ sortedBy: "ascendingCollateralRatio", first: 1000, startingAt: 0 })
-    ])
-
-      .then(([fees, total, troves]) => {
-        if (!mounted) {
-          return;
-        }
-
-        const redeemedFractionOfSupply = amountOfHchfToRedeem.div(total.debt);
-        const redemptionFee = fees.redemptionRate(redeemedFractionOfSupply);
-        const redemptionDetails = getRedemptionDetails({
-          redeemedHchf: amountOfHchfToRedeem,
-          redemptionFee,
-          totalHbar: total.collateral,
-          totalHchf: total.debt,
-          sortedTroves: troves
-        });
-
-        if (!redemptionDetails) {
-          setRedemptionDetails(null);
-          setAreRedemptionDetailsLoading(false);
-          return;
-        }
-
-        const redemptionFeePercent = new Percent<Decimal, Decimal>(redemptionFee);
-        const extendedRedemptionDetails = {
-          ...redemptionDetails,
-          redemptionFeePercent
-        };
-
-        setRedemptionDetails(extendedRedemptionDetails);
-        setAreRedemptionDetailsLoading(false);
-      });
-
-    return () => {
-      mounted = false;
-    };
-  }, [liquity, amountOfHchfToRedeem]);
-
   return (
     <Card>
       <Heading
@@ -206,29 +147,7 @@ export const RedeemHchf: React.FC = () => {
           </ErrorDescription>
         )}
 
-        <ActionDescription
-          icon={areRedemptionDetailsLoading && <Spinner sx={{ flex: "1.3333rem 0 0" }} />}
-        >
-          {redemptionDetails ? (
-            <>
-              You will redeem {redemptionDetails.redeemedHchf.prettify(2)} HCHF for{" "}
-              {redemptionDetails.receivedHbar.prettify(2)} HBAR for a fee of{" "}
-              {redemptionDetails.redemptionFeeInHbar.prettify(2)} HBAR (
-              {redemptionDetails.redemptionFeePercent.prettify()}).
-              <InfoIcon
-                tooltip={
-                  <>
-                    These numbers are an approximation.
-                    <br />
-                    {redemptionInformation}
-                  </>
-                }
-              />
-            </>
-          ) : (
-            redemptionInformation
-          )}
-        </ActionDescription>
+        <ActionDescription>{redemptionInformation}</ActionDescription>
 
         <Flex variant="layout.actions">
           {needsSpenderApproval && !hchfContractHasHchfTokenAllowance ? (