refactor: replace currency input and number input #5298 (#5336)

* fix(lib): input, add `data-focus` #5298 #5327 * fix(lib): numebr input, add controls border highlight * fix(lib): number input, `controls` now default to true * fix: currency input add jsdoc * replace balance input with currency input #5928 * fix(lib): number input, historical reason, result type should be number, and add `props.stringMode` #5323 #5928 * fix(lib): number input, should handle on blur to fix min/max value #5323 * replace input number with number input #5928 * replace balance input with currency input #5928 * revert(lib): number input, remove `stringMode` * fix: convert to number input result to number
opensquare-network · Jan 7, 2025 · e62618d · e62618d
1 parent 057f801
commit e62618d
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 193 deletions.
diff --git a/packages/next-common/components/balanceInput.js b/packages/next-common/components/balanceInput.js
diff --git a/packages/next-common/components/currencyInput/index.jsx b/packages/next-common/components/currencyInput/index.jsx
@@ -1,11 +1,12 @@
-// packages/next-common/components/balanceInput.js
-
 import NumberInput from "next-common/lib/input/number";
 import { forwardRef } from "react";
 
 const CurrencyInput = forwardRef(CurrencyInputImpl);
 export default CurrencyInput;
 
+/**
+ * @param {NumberInputProps} props
+ */
 function CurrencyInputImpl(props, ref) {
   return <NumberInput ref={ref} allowDecimals controls={false} {...props} />;
 }
diff --git a/packages/next-common/components/extrinsic/params/amountParam.js b/packages/next-common/components/extrinsic/params/amountParam.js
@@ -1,4 +1,4 @@
-import InputNumber from "next-common/components/inputNumber";
+import NumberInput from "next-common/lib/input/number";
 import { useCallback } from "react";
 
 export default function AmountParam({ title, value, setValue }) {
@@ -25,7 +25,7 @@ export default function AmountParam({ title, value, setValue }) {
     <>
       {title}
 
-      <InputNumber value={data ?? ""} setValue={_setValue} min={0} step={1} />
+      <NumberInput value={data ?? ""} onValueChange={_setValue} />
     </>
   );
 }
diff --git a/packages/next-common/components/extrinsic/params/balanceParam.js b/packages/next-common/components/extrinsic/params/balanceParam.js
@@ -1,5 +1,5 @@
 import BigNumber from "bignumber.js";
-import BalanceInput from "next-common/components/balanceInput";
+import CurrencyInput from "next-common/components/currencyInput";
 import { useChainSettings } from "next-common/context/chain";
 import { useEffect, useState } from "react";
 
@@ -30,8 +30,11 @@ export default function BalanceParam({ title, setValue }) {
   return (
     <>
       {title}
-
-      <BalanceInput value={inputText} setValue={setInputText} symbol={symbol} />
+      <CurrencyInput
+        value={inputText}
+        onValueChange={setInputText}
+        symbol={symbol}
+      />
     </>
   );
 }
diff --git a/packages/next-common/components/extrinsic/params/integerParam.js b/packages/next-common/components/extrinsic/params/integerParam.js
@@ -1,4 +1,4 @@
-import InputNumber from "next-common/components/inputNumber";
+import NumberInput from "next-common/lib/input/number";
 import { useCallback } from "react";
 
 export default function IntegerParam({ title, value, setValue }) {
@@ -24,7 +24,7 @@ export default function IntegerParam({ title, value, setValue }) {
   return (
     <>
       {title}
-      <InputNumber value={data ?? ""} setValue={_setValue} step={1} />;
+      <NumberInput value={data ?? ""} onValueChange={_setValue} />
     </>
   );
 }
diff --git a/packages/next-common/components/inputNumber.js b/packages/next-common/components/inputNumber.js
diff --git a/packages/next-common/components/publicProposal/second/popup/depositRequired.js b/packages/next-common/components/publicProposal/second/popup/depositRequired.js
@@ -1,9 +1,9 @@
 import React from "react";
-import BalanceInput from "../../../balanceInput";
 import PopupLabel from "../../../popup/label";
 import { WarningMessage } from "../../../popup/styled";
 import { toPrecision } from "../../../../utils";
 import { useChainSettings } from "../../../../context/chain";
+import CurrencyInput from "next-common/components/currencyInput";
 
 export default function DepositRequired({ deposit, balanceInsufficient }) {
   const node = useChainSettings();
@@ -17,8 +17,8 @@ export default function DepositRequired({ deposit, balanceInsufficient }) {
             "The deposit will be locked for the lifetime of the proposal"
           }
         />
-        <BalanceInput
-          disabled={true}
+        <CurrencyInput
+          disabled
           value={toPrecision(deposit, node.decimals)}
           symbol={node?.voteSymbol ?? node?.symbol}
         />

diff --git a/packages/next-common/components/publicProposal/second/popup/inputTimes.js b/packages/next-common/components/publicProposal/second/popup/inputTimes.js
@@ -1,18 +1,19 @@
 import { noop } from "lodash-es";
 import React, { useEffect, useMemo } from "react";
-import InputNumber from "../../../inputNumber";
 import { Label, WarningMessage } from "../../../popup/styled";
 import useMaxDeposits from "../useMaxDeposits";
 import { useContextApi } from "next-common/context/api";
+import NumberInput from "next-common/lib/input/number";
 
 export default function SecondPopupInputTimes({
-  times,
+  times: _times,
   setTimes = noop,
   currentTimes = 0,
   setSubmitDisabled = noop,
 }) {
   const api = useContextApi();
   const maxDeposits = useMaxDeposits();
+  const times = useMemo(() => Number(_times), [_times]);
 
   const batchCallsLimit = useMemo(
     () => api?.consts?.utility?.batchedCallsLimit?.toNumber?.(),
@@ -31,7 +32,7 @@ export default function SecondPopupInputTimes({
     <>
       <div>
         <Label>Times</Label>
-        <InputNumber value={times} setValue={setTimes} min={1} />
+        <NumberInput value={times} onValueChange={setTimes} />
       </div>
 
       {isOverLimit && (

diff --git a/...s/next-common/components/summary/newCouncilMotionProposalButton/newProposalInnerPopup.jsx b/...s/next-common/components/summary/newCouncilMotionProposalButton/newProposalInnerPopup.jsx
@@ -1,6 +1,5 @@
 import TxSubmissionButton from "next-common/components/common/tx/txSubmissionButton";
 import { useExtrinsicField } from "next-common/components/popup/fields/extrinsicField";
-import InputNumber from "next-common/components/inputNumber";
 import { LoadingContent } from "next-common/components/popup/loadingContent";
 import PopupLabel from "next-common/components/popup/label";
 import Popup from "next-common/components/popup/wrapper/Popup";
@@ -10,9 +9,10 @@ import { useCollectivePallet } from "next-common/context/collective";
 import useCollectiveMembers from "next-common/utils/hooks/collectives/useCollectiveMembers";
 import { getEventData } from "next-common/utils/sendTransaction";
 import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import Tooltip from "next-common/components/tooltip";
 import { usePopupParams } from "next-common/components/popupWithSigner/context";
+import NumberInput from "next-common/lib/input/number";
 
 export default function NewCouncilMotionProposalInnerPopup({ isMember }) {
   const { onClose } = usePopupParams();
@@ -22,7 +22,8 @@ export default function NewCouncilMotionProposalInnerPopup({ isMember }) {
   const { extrinsic: proposal, component: extrinsicComponent } =
     useExtrinsicField();
 
-  const [threshold, setThreshold] = useState(1);
+  const [_threshold, setThreshold] = useState(1);
+  const threshold = useMemo(() => Number(_threshold), [_threshold]);
   const { members } = useCollectiveMembers();
 
   const thresholdDefault = Math.floor(members?.length / 2) + 1;
@@ -55,9 +56,9 @@ export default function NewCouncilMotionProposalInnerPopup({ isMember }) {
       <LoadingContent isLoading={loading}>
         <div>
           <PopupLabel text="Threshold" />
-          <InputNumber
+          <NumberInput
             value={threshold || 1}
-            setValue={setThreshold}
+            onValueChange={setThreshold}
             min={1}
             max={members?.length}
           />

diff --git a/packages/next-common/components/treasury/proposal/popup/proposalValue.js b/packages/next-common/components/treasury/proposal/popup/proposalValue.js
@@ -1,7 +1,7 @@
 import React from "react";
-import BalanceInput from "../../../balanceInput";
 import Labeled from "../../../Labeled";
 import { useChainSettings } from "../../../../context/chain";
+import CurrencyInput from "next-common/components/currencyInput";
 
 export default function ProposalValue({ setValue }) {
   const { symbol } = useChainSettings();
@@ -11,7 +11,7 @@ export default function ProposalValue({ setValue }) {
       text={"Value"}
       tooltip={"The amount that will be allocated from the treasury pot"}
     >
-      <BalanceInput setValue={setValue} symbol={symbol} />
+      <CurrencyInput onValueChange={setValue} symbol={symbol} />
     </Labeled>
   );
 }
diff --git a/packages/next-common/components/treasury/tip/popup/tipValue.js b/packages/next-common/components/treasury/tip/popup/tipValue.js
@@ -1,14 +1,14 @@
 import React from "react";
-import BalanceInput from "../../../balanceInput";
 import Labeled from "../../../Labeled";
 import { useChainSettings } from "../../../../context/chain";
+import CurrencyInput from "next-common/components/currencyInput";
 
 export default function TipValue({ setValue }) {
   const { symbol } = useChainSettings();
 
   return (
     <Labeled text={"Value"} tooltip={"The amount of tip value"}>
-      <BalanceInput setValue={setValue} symbol={symbol} />
+      <CurrencyInput onValueChange={setValue} symbol={symbol} />
     </Labeled>
   );
 }
diff --git a/packages/next/components/gov2/sidebar/status/preparation/depositPopup.js b/packages/next/components/gov2/sidebar/status/preparation/depositPopup.js
@@ -1,7 +1,6 @@
 import PopupWithSigner from "next-common/components/popupWithSigner";
 import { usePostOnChainData } from "next-common/context/post";
 import { useChainSettings } from "next-common/context/chain";
-import BalanceInput from "next-common/components/balanceInput";
 import { toPrecision } from "next-common/utils";
 import React, { useCallback } from "react";
 import PopupLabel from "next-common/components/popup/label";
@@ -11,6 +10,7 @@ import TxSubmissionButton from "next-common/components/common/tx/txSubmissionBut
 import { usePopupParams } from "next-common/components/popupWithSigner/context";
 import { useContextApi } from "next-common/context/api";
 import { useReferendaPallet } from "next-common/context/referenda/pallet";
+import CurrencyInput from "next-common/components/currencyInput";
 
 function PopupContent() {
   const { onClose } = usePopupParams();
@@ -34,8 +34,8 @@ function PopupContent() {
       </div>
       <div>
         <PopupLabel text={"Decision Deposit"} />
-        <BalanceInput
-          disabled={true}
+        <CurrencyInput
+          disabled
           value={toPrecision(track.decisionDeposit, node.decimals)}
           symbol={node?.symbol}
         />