Merge pull request #548 from liquity/main

merge main to master

packages/dev-frontend/src/components/Trove/Adjusting.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useRef } from "react";
 import { Flex, Button, Box, Card, Heading } from "theme-ui";
 import {
   LiquityStoreState,
@@ -48,18 +48,83 @@ const feeFrom = (original: Trove, edited: Trove, borrowingRate: Decimal): Decima
   }
 };
 
+const applyUnsavedCollateralChanges = (unsavedChanges: Difference, trove: Trove) => {
+  if (unsavedChanges.absoluteValue) {
+    if (unsavedChanges.positive) {
+      return trove.collateral.add(unsavedChanges.absoluteValue);
+    }
+    if (unsavedChanges.negative) {
+      if (unsavedChanges.absoluteValue.lt(trove.collateral)) {
+        return trove.collateral.sub(unsavedChanges.absoluteValue);
+      }
+    }
+    return trove.collateral;
+  }
+  return trove.collateral;
+};
+
+const applyUnsavedNetDebtChanges = (unsavedChanges: Difference, trove: Trove) => {
+  if (unsavedChanges.absoluteValue) {
+    if (unsavedChanges.positive) {
+      return trove.netDebt.add(unsavedChanges.absoluteValue);
+    }
+    if (unsavedChanges.negative) {
+      if (unsavedChanges.absoluteValue.lt(trove.netDebt)) {
+        return trove.netDebt.sub(unsavedChanges.absoluteValue);
+      }
+    }
+    return trove.netDebt;
+  }
+  return trove.netDebt;
+};
+
 export const Adjusting: React.FC = () => {
   const { dispatchEvent } = useTroveView();
   const { trove, fees, price, accountBalance, validationContext } = useLiquitySelector(selector);
-  const borrowingRate = fees.borrowingRate();
   const editingState = useState<string>();
-  const originalNetDebt = trove.debt.sub(LUSD_LIQUIDATION_RESERVE);
-
+  const previousTrove = useRef<Trove>(trove);
   const [collateral, setCollateral] = useState<Decimal>(trove.collateral);
-  const [netDebt, setNetDebt] = useState<Decimal>(originalNetDebt);
-  const isDirty = !collateral.eq(trove.collateral) || !netDebt.eq(originalNetDebt);
-  const isDebtIncrease = netDebt.gt(originalNetDebt);
-  const debtIncreaseAmount = isDebtIncrease ? netDebt.sub(originalNetDebt) : Decimal.ZERO;
+  const [netDebt, setNetDebt] = useState<Decimal>(trove.netDebt);
+
+  const transactionState = useMyTransactionState(TRANSACTION_ID);
+  const borrowingRate = fees.borrowingRate();
+
+  useEffect(() => {
+    if (transactionState.type === "confirmedOneShot") {
+      dispatchEvent("TROVE_ADJUSTED");
+    }
+  }, [transactionState.type, dispatchEvent]);
+
+  useEffect(() => {
+    if (!previousTrove.current.collateral.eq(trove.collateral)) {
+      const unsavedChanges = Difference.between(collateral, previousTrove.current.collateral);
+      const nextCollateral = applyUnsavedCollateralChanges(unsavedChanges, trove);
+      setCollateral(nextCollateral);
+    }
+    if (!previousTrove.current.netDebt.eq(trove.netDebt)) {
+      const unsavedChanges = Difference.between(netDebt, previousTrove.current.netDebt);
+      const nextNetDebt = applyUnsavedNetDebtChanges(unsavedChanges, trove);
+      setNetDebt(nextNetDebt);
+    }
+    previousTrove.current = trove;
+  }, [trove, collateral, netDebt]);
+
+  const handleCancelPressed = useCallback(() => {
+    dispatchEvent("CANCEL_ADJUST_TROVE_PRESSED");
+  }, [dispatchEvent]);
+
+  const reset = useCallback(() => {
+    setCollateral(trove.collateral);
+    setNetDebt(trove.netDebt);
+  }, [trove.collateral, trove.netDebt]);
+
+  if (trove.status !== "open") {
+    return null;
+  }
+
+  const isDirty = !collateral.eq(trove.collateral) || !netDebt.eq(trove.netDebt);
+  const isDebtIncrease = netDebt.gt(trove.netDebt);
+  const debtIncreaseAmount = isDebtIncrease ? netDebt.sub(trove.netDebt) : Decimal.ZERO;
 
   const fee = isDebtIncrease
     ? feeFrom(trove, new Trove(trove.collateral, trove.debt.add(debtIncreaseAmount)), borrowingRate)
@@ -82,26 +147,10 @@ export const Adjusting: React.FC = () => {
     validationContext
   );
 
-  const transactionState = useMyTransactionState(TRANSACTION_ID);
   const isTransactionPending =
     transactionState.type === "waitingForApproval" ||
     transactionState.type === "waitingForConfirmation";
 
-  const handleCancelPressed = useCallback(() => {
-    dispatchEvent("CANCEL_ADJUST_TROVE_PRESSED");
-  }, [dispatchEvent]);
-
-  const reset = useCallback(() => {
-    setCollateral(trove.collateral);
-    setNetDebt(originalNetDebt);
-  }, [trove.collateral, originalNetDebt]);
-
-  useEffect(() => {
-    if (transactionState.type === "confirmedOneShot") {
-      dispatchEvent("TROVE_ADJUSTED");
-    }
-  }, [transactionState.type, dispatchEvent]);
-
   return (
     <Card>
       <Heading>

packages/dev-frontend/src/components/Trove/Opening.tsx

@@ -4,8 +4,8 @@ import {
   LiquityStoreState,
   Decimal,
   Trove,
-  LUSD_MINIMUM_DEBT,
   LUSD_LIQUIDATION_RESERVE,
+  LUSD_MINIMUM_NET_DEBT,
   Percent
 } from "@liquity/lib-base";
 import { useLiquitySelector } from "@liquity/lib-react";
@@ -35,7 +35,6 @@ const selector = (state: LiquityStoreState) => {
 };
 
 const EMPTY_TROVE = new Trove(Decimal.ZERO, Decimal.ZERO);
-const TINY_EXTRA_LUSD_TO_ALLOW_MINIMUM = 0.0001;
 const TRANSACTION_ID = "trove-creation";
 const GAS_ROOM_ETH = Decimal.from(0.1);
 
@@ -45,9 +44,6 @@ export const Opening: React.FC = () => {
   const borrowingRate = fees.borrowingRate();
   const editingState = useState<string>();
 
-  const minimumBorrowAmount = Decimal.from(LUSD_MINIMUM_DEBT.sub(LUSD_LIQUIDATION_RESERVE))
-    .div(Decimal.from(1).add(borrowingRate))
-    .add(TINY_EXTRA_LUSD_TO_ALLOW_MINIMUM);
   const [collateral, setCollateral] = useState<Decimal>(Decimal.ZERO);
   const [borrowAmount, setBorrowAmount] = useState<Decimal>(Decimal.ZERO);
 
@@ -87,9 +83,9 @@ export const Opening: React.FC = () => {
 
   useEffect(() => {
     if (!collateral.isZero && borrowAmount.isZero) {
-      setBorrowAmount(minimumBorrowAmount);
+      setBorrowAmount(LUSD_MINIMUM_NET_DEBT);
     }
-  }, [collateral, borrowAmount, minimumBorrowAmount]);
+  }, [collateral, borrowAmount]);
 
   return (
     <Card>

packages/dev-frontend/src/components/Trove/TroveEditor.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Heading, Box, Card, Button } from "theme-ui";
+import { Heading, Box, Card } from "theme-ui";
 
 import {
   Percent,
@@ -14,7 +14,6 @@ import { useLiquitySelector } from "@liquity/lib-react";
 
 import { COIN } from "../../strings";
 
-import { Icon } from "../Icon";
 import { StaticRow } from "./Editor";
 import { LoadingOverlay } from "../LoadingOverlay";
 import { CollateralRatio } from "./CollateralRatio";
@@ -39,8 +38,7 @@ export const TroveEditor: React.FC<TroveEditorProps> = ({
   edited,
   fee,
   borrowingRate,
-  changePending,
-  dispatch
+  changePending
 }) => {
   const { price } = useLiquitySelector(select);
 
@@ -50,22 +48,9 @@ export const TroveEditor: React.FC<TroveEditorProps> = ({
   const collateralRatio = !edited.isEmpty ? edited.collateralRatio(price) : undefined;
   const collateralRatioChange = Difference.between(collateralRatio, originalCollateralRatio);
 
-  const dirty = !edited.equals(original);
-
   return (
     <Card>
-      <Heading>
-        Trove
-        {dirty && !changePending && (
-          <Button
-            variant="titleIcon"
-            sx={{ ":enabled:hover": { color: "danger" } }}
-            onClick={() => dispatch({ type: "revert" })}
-          >
-            <Icon name="history" size="lg" />
-          </Button>
-        )}
-      </Heading>
+      <Heading>Trove</Heading>
 
       <Box sx={{ p: [2, 3] }}>
         <StaticRow