TxFlow implementations: closeLoanPosition, updateLoanInterestRate

frontend/app/src/screens/LoanScreen/LoanCard.tsx

@@ -5,7 +5,6 @@ import type { LoanLoadingState } from "./LoanScreen";
 import { INFINITY } from "@/src/characters";
 import { Spinner } from "@/src/comps/Spinner/Spinner";
 import { Value } from "@/src/comps/Value/Value";
-import { dnum18 } from "@/src/dnum-utils";
 import { formatRisk } from "@/src/formatting";
 import { fmtnum } from "@/src/formatting";
 import { getLoanDetails } from "@/src/liquity-math";
@@ -190,7 +189,7 @@ export function LoanCard({
  </Value>
  </GridItem>
  <GridItem label="Interest rate">
- {fmtnum(dn.mul(loan.interestRate, 100))}%
+ {fmtnum(loan.interestRate, 2, 100)}%
  </GridItem>
  <GridItem label="LTV" title="Loan-to-value ratio">
  <div
@@ -207,7 +206,7 @@ export function LoanCard({
  : "var(--status-negative)",
  }}
  >
- {ltv && fmtnum(dn.mul(ltv, 100))}%
+ {fmtnum(ltv, "2z", 100)}%
  </div>
  </GridItem>
  <GridItem label="Liquidation risk">
@@ -455,7 +454,6 @@ function GridItem({
 }) {
  return (
  <div
- title={title}
  className={css({
  display: "flex",
  flexDirection: "column",
@@ -464,6 +462,7 @@ function GridItem({
  })}
  >
  <div
+ title={title}
  className={css({
  color: "strongSurfaceContentAlt",
  })}

frontend/app/src/screens/LoanScreen/PanelClosePosition.tsx

@@ -4,8 +4,10 @@ import { ConnectWarningBox } from "@/src/comps/ConnectWarningBox/ConnectWarningB
 import { Field } from "@/src/comps/Field/Field";
 import { fmtnum } from "@/src/formatting";
 import { getLoanDetails } from "@/src/liquity-math";
+import { getPrefixedTroveId } from "@/src/liquity-utils";
 import { useAccount } from "@/src/services/Ethereum";
 import { usePrice } from "@/src/services/Prices";
+import { useTransactionFlow } from "@/src/services/TransactionFlow";
 import { css } from "@/styled-system/css";
 import { Button, Dropdown, TokenIcon, TOKENS_BY_SYMBOL, VFlex } from "@liquity2/uikit";
 import * as dn from "dnum";
@@ -15,6 +17,8 @@ import { useState } from "react";
 export function PanelClosePosition({ loan }: { loan: PositionLoan }) {
  const router = useRouter();
  const account = useAccount();
+ const txFlow = useTransactionFlow();
+
  const collPrice = usePrice(loan.collateral);
  const boldPriceUsd = usePrice("BOLD");
  const [tokenIndex, setTokenIndex] = useState(0);
@@ -43,7 +47,7 @@ export function PanelClosePosition({ loan }: { loan: PositionLoan }) {
  ? loan.deposit
  : dn.sub(loan.deposit, amountToRepay);
 
- const allowSubmit = account.isConnected;
+ const allowSubmit = account.isConnected && tokenIndex === 0;
 
  return (
  <>
@@ -189,7 +193,21 @@ export function PanelClosePosition({ loan }: { loan: PositionLoan }) {
  size="large"
  wide
  onClick={() => {
- router.push("/transactions/close-loan");
+ if (account.address) {
+ txFlow.start({
+ flowId: "closeLoanPosition",
+ backLink: [
+ `/loan/close?id=${loan.collIndex}:${loan.troveId}`,
+ "Back to editing",
+ ],
+ successLink: ["/", "Go to the dashboard"],
+ successMessage: "The loan position has been closed successfully.",
+
+ collIndex: loan.collIndex,
+ prefixedTroveId: getPrefixedTroveId(loan.collIndex, loan.troveId),
+ });
+ router.push("/transactions");
+ }
  }}
  />
  </div>

frontend/app/src/screens/LoanScreen/PanelUpdateBorrowPosition.tsx

@@ -46,7 +46,6 @@ export function PanelUpdateBorrowPosition({
 }) {
  const router = useRouter();
  const account = useAccount();
-
  const txFlow = useTransactionFlow();
 
  const collateral = TOKENS_BY_SYMBOL[loan.collateral];

frontend/app/src/screens/LoanScreen/PanelUpdateRate.tsx

@@ -5,21 +5,26 @@ import { Field } from "@/src/comps/Field/Field";
 import { InfoBox } from "@/src/comps/InfoBox/InfoBox";
 import { InterestRateField } from "@/src/comps/InterestRateField/InterestRateField";
 import { ValueUpdate } from "@/src/comps/ValueUpdate/ValueUpdate";
+import { dnum18 } from "@/src/dnum-utils";
 import { useInputFieldValue } from "@/src/form-utils";
 import { fmtnum, formatRisk } from "@/src/formatting";
 import { getLoanDetails } from "@/src/liquity-math";
+import { getPrefixedTroveId } from "@/src/liquity-utils";
 import { useAccount } from "@/src/services/Ethereum";
 import { usePrice } from "@/src/services/Prices";
+import { useTransactionFlow } from "@/src/services/TransactionFlow";
 import { riskLevelToStatusMode } from "@/src/uikit-utils";
 import { css } from "@/styled-system/css";
 import { Button, HFlex, InfoTooltip, StatusDot, TOKENS_BY_SYMBOL } from "@liquity2/uikit";
 import * as dn from "dnum";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { maxUint256 } from "viem";
 
 export function PanelUpdateRate({ loan }: { loan: PositionLoan }) {
  const router = useRouter();
  const account = useAccount();
+ const txFlow = useTransactionFlow();
 
  const collateral = TOKENS_BY_SYMBOL[loan.collateral];
  const collPrice = usePrice(collateral.symbol);
@@ -145,7 +150,26 @@ export function PanelUpdateRate({ loan }: { loan: PositionLoan }) {
  size="large"
  wide
  onClick={() => {
- router.push("/transactions/update-loan");
+ if (account.address) {
+ txFlow.start({
+ flowId: "updateLoanInterestRate",
+ backLink: [
+ `/loan/rate?id=${loan.collIndex}:${loan.troveId}`,
+ "Back to editing",
+ ],
+ successLink: ["/", "Go to the dashboard"],
+ successMessage: "The position interest rate has been updated successfully.",
+
+ collIndex: loan.collIndex,
+ interestRate,
+ lowerHint: dnum18(0),
+ maxUpfrontFee: dnum18(maxUint256),
+ owner: account.address,
+ prefixedTroveId: getPrefixedTroveId(loan.collIndex, loan.troveId),
+ upperHint: dnum18(0),
+ });
+ router.push("/transactions");
+ }
  }}
  />
  </div>