Revert "feat(dev-frontend): 🎸 replace redemption details w/ plain inf…

…o text"

This reverts commit db4e103.

packages/dev-frontend/src/components/RedeemHchf/RedeemHchf.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
-import { Flex, Button, Box, Card, Heading } from "theme-ui";
-import { Decimal } from "@liquity/lib-base";
+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 { useLiquitySelector } from "@liquity/lib-react";
 
 import { ActionDescription, Amount } from "../ActionDescription";
@@ -15,6 +15,7 @@ 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";
 
@@ -91,6 +92,64 @@ 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
@@ -147,7 +206,29 @@ export const RedeemHchf: React.FC = () => {
           </ErrorDescription>
         )}
 
-        <ActionDescription>{redemptionInformation}</ActionDescription>
+        <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>
 
         <Flex variant="layout.actions">
           {needsSpenderApproval && !hchfContractHasHchfTokenAllowance ? (