feat: formatting of the PNK balance, stake and amount in input field

Author: jaybuidl

cspell.json

@@ -34,6 +34,7 @@
     "repartitions",
     "solhint",
     "typechain",
+    "uncommify",
     "Unslashed",
     "viem",
     "wagmi"

web/src/components/NumberInputField.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { Field } from "@kleros/ui-components-library";
+
+const Container = styled.div`
+  width: 100%;
+  height: fit-content;
+`;
+
+const StyledField = styled(Field)`
+  width: 100%;
+  height: fit-content;
+`;
+
+interface INumberInputField {
+  placeholder?: string;
+  message?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  formatter?: (value: string) => string;
+}
+
+export const NumberInputField: React.FunctionComponent<INumberInputField> = ({
+  placeholder,
+  message,
+  value,
+  onChange,
+  formatter,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+
+  const toggleEditing = () => {
+    setIsEditing(!isEditing);
+  };
+
+  return (
+    <Container>
+      {isEditing ? (
+        <StyledField
+          type="number"
+          value={value}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            onChange && onChange(event.target.value);
+          }}
+          placeholder={placeholder}
+          message={message}
+          variant="info"
+          onBlur={toggleEditing}
+        />
+      ) : (
+        <StyledField
+          type="text"
+          value={formatter ? formatter(value ?? "0") : value}
+          placeholder={placeholder}
+          message={message}
+          variant="info"
+          onFocus={toggleEditing}
+          readOnly
+        />
+      )}
+    </Container>
+  );
+};

web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx

@@ -4,15 +4,17 @@ import { useParams } from "react-router-dom";
 import { formatEther } from "viem";
 import { useDebounce } from "react-use";
 import { useAccount } from "wagmi";
-import { Field } from "@kleros/ui-components-library";
+import { NumberInputField } from "components/NumberInputField";
 import { useParsedAmount } from "hooks/useParsedAmount";
 import { useCourtDetails } from "hooks/queries/useCourtDetails";
 import { useKlerosCoreGetJurorBalance, usePnkBalanceOf } from "hooks/contracts/generated";
 import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton";
+import { formatPNK, roundNumberDown } from "utils/format";
 import { isUndefined } from "utils/index";
+import { commify, uncommify } from "utils/commify";
 import { EnsureChain } from "components/EnsureChain";
 
-const StyledField = styled(Field)`
+const StyledField = styled(NumberInputField)`
   width: 100%;
   height: fit-content;
 `;
@@ -53,7 +55,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({
 }) => {
   const [debouncedAmount, setDebouncedAmount] = useState("");
   useDebounce(() => setDebouncedAmount(amount), 500, [amount]);
-  const parsedAmount = useParsedAmount(debouncedAmount);
+  const parsedAmount = useParsedAmount(uncommify(debouncedAmount));
 
   const { id } = useParams();
   const { data: courtDetails } = useCourtDetails(id);
@@ -63,13 +65,13 @@ const InputDisplay: React.FC<IInputDisplay> = ({
     args: [address ?? "0x"],
     watch: true,
   });
-  const parsedBalance = formatEther(balance ?? 0n);
+  const parsedBalance = formatPNK(balance ?? 0n, 0, true);
   const { data: jurorBalance } = useKlerosCoreGetJurorBalance({
     enabled: !isUndefined(address),
     args: [address, id],
     watch: true,
   });
-  const parsedStake = formatEther(jurorBalance?.[0] || 0n);
+  const parsedStake = formatPNK(jurorBalance?.[0] || 0n, 0, true);
   const isStaking = action === ActionType.stake;
 
   return (
@@ -87,10 +89,9 @@ const InputDisplay: React.FC<IInputDisplay> = ({
       </LabelArea>
       <InputArea>
         <StyledField
-          type="number"
-          value={amount}
+          value={uncommify(amount)}
           onChange={(e) => {
-            setAmount(e.target.value);
+            setAmount(e);
           }}
           placeholder={isStaking ? "Amount to stake" : "Amount to withdraw"}
           message={
@@ -101,7 +102,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({
                   courtDetails?.court.minStake ?? 0n
                 )} PNK.`
           }
-          variant="info"
+          formatter={(number: string) => commify(roundNumberDown(Number(number)))}
         />
         <EnsureChain>
           <StakeWithdrawButton

web/src/pages/Courts/CourtDetails/Stats.tsx

@@ -3,7 +3,8 @@ import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
 import { useCoinPrice } from "hooks/useCoinPrice";
-import { formatETH, formatPNK, formatUnitsWei, formatUSD, isUndefined } from "utils/index";
+import { formatETH, formatPNK, formatUnitsWei, formatUSD } from "utils/format";
+import { isUndefined } from "utils/index";
 import { calculateSubtextRender } from "utils/calculateSubtextRender";
 import { CoinIds } from "consts/coingecko";
 import StatDisplay, { IStatDisplay } from "components/StatDisplay";

web/src/pages/Home/CourtOverview/Stats.tsx

@@ -8,7 +8,8 @@ import EthereumIcon from "svgs/icons/ethereum.svg";
 import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
 import JurorIcon from "svgs/icons/user.svg";
 import BalanceIcon from "svgs/icons/law-balance.svg";
-import { formatETH, formatPNK, formatUnitsWei, formatUSD, isUndefined } from "utils/index";
+import { formatETH, formatPNK, formatUnitsWei, formatUSD } from "utils/format";
+import { isUndefined } from "utils/index";
 import { calculateSubtextRender } from "utils/calculateSubtextRender";
 import { CoinIds } from "consts/coingecko";
 import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext";

web/src/utils/commify.ts

@@ -52,3 +52,7 @@ export function commify(value: string | number): string {
 
   return negative + formatted.join(",") + suffix;
 }
+
+export function uncommify(value: string): string {
+  return value.replace(/,/g, "");
+}

web/src/utils/format.ts

@@ -0,0 +1,23 @@
+import { formatEther, formatUnits } from "viem";
+import { commify } from "./commify";
+
+export const roundNumberDown = (value: number, fractionDigits = 0) => {
+  const factor = 10 ** fractionDigits;
+  return Math.floor(value * factor) / factor;
+};
+
+export const formatUnitsWei = (value: bigint) => formatUnits(value, 18);
+
+export const formatValue = (value: string, fractionDigits, roundDown) => {
+  let units = Number(value);
+  if (roundDown) units = roundNumberDown(units, fractionDigits);
+  return commify(units.toFixed(fractionDigits));
+};
+
+export const formatPNK = (value: bigint, fractionDigits = 0, roundDown = false) =>
+  formatValue(formatUnitsWei(value), fractionDigits, roundDown);
+
+export const formatETH = (value: bigint, fractionDigits = 4, roundDown = false) =>
+  formatValue(formatEther(value), fractionDigits, roundDown);
+
+export const formatUSD = (value: number, fractionDigits = 2) => "$" + commify(Number(value).toFixed(fractionDigits));

web/src/utils/index.ts

@@ -1,14 +1 @@
-import { formatEther, formatUnits } from "viem";
-import { commify } from "./commify";
-
 export const isUndefined = (maybeObject: any): maybeObject is undefined => typeof maybeObject === "undefined";
-
-export const formatUnitsWei = (value: bigint) => formatUnits(value, 18);
-
-export const formatPNK = (value: bigint, fractionDigits = 0) =>
-  commify(Number(formatUnitsWei(value)).toFixed(fractionDigits));
-
-export const formatETH = (value: bigint, fractionDigits = 4) =>
-  commify(Number(formatEther(value)).toFixed(fractionDigits));
-
-export const formatUSD = (value: number, fractionDigits = 2) => "$" + commify(Number(value).toFixed(fractionDigits));