Upgraded react-number-format to 5.4.1 (#2462)

packages/core/package.json

@@ -37,11 +37,11 @@
     "lodash": "4.17.21",
     "match-sorter": "6.3.1",
     "moment": "2.30.1",
-    "qs": "6.12.1",
     "overlayscrollbars": "1.13.3",
     "overlayscrollbars-react": "0.3.0",
+    "qs": "6.12.1",
     "react-dropzone": "14.2.3",
-    "react-number-format": "4.9.1",
+    "react-number-format": "5.4.1",
     "react-redux": "8.1.2",
     "react-scroll-to-bottom": "4.2.0",
     "react-teleporter": "3.1.0",

packages/core/src/components/Amount/NumberFormatCustom.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import NumberFormat from 'react-number-format';
+import { NumericFormat, type OnValueChange } from 'react-number-format';
 
 interface NumberFormatCustomProps {
   onChange: (event: { target: { name: string; value: string } }) => void;
@@ -9,18 +9,21 @@ interface NumberFormatCustomProps {
 function NumberFormatCustom(props: NumberFormatCustomProps, ref: any) {
   const { onChange, ...other } = props;
 
-  function handleChange(values: any) {
-    onChange(values.value);
-  }
+  const handleChange: OnValueChange = React.useCallback(
+    (values) => {
+      onChange(values.value);
+    },
+    [onChange],
+  );
 
   return (
-    <NumberFormat
+    <NumericFormat
       {...other}
       getInputRef={ref}
       onValueChange={handleChange}
       thousandSeparator
       allowNegative={false}
-      isNumericString
+      valueIsNumericString
     />
   );
 }

packages/core/src/components/TextFieldNumber/NumberFormatCustom.tsx

@@ -1,27 +1,30 @@
 import React, { forwardRef } from 'react';
-import NumberFormat from 'react-number-format';
+import { NumericFormat, type OnValueChange } from 'react-number-format';
 
 interface NumberFormatCustomProps {
-  inputRef: (instance: NumberFormat | null) => void;
+  inputRef: (instance: typeof NumericFormat | null) => void;
   onChange: (event: { target: { name: string; value: string } }) => void;
   name: string;
 }
 
 function NumberFormatCustom(props: NumberFormatCustomProps) {
   const { inputRef, onChange, ...other } = props;
 
-  function handleChange(values: Object) {
-    onChange(values.value);
-  }
+  const handleChange: OnValueChange = React.useCallback(
+    (values) => {
+      onChange(values.value);
+    },
+    [onChange],
+  );
 
   return (
-    <NumberFormat
+    <NumericFormat
       {...other}
       getInputRef={inputRef}
       onValueChange={handleChange}
       thousandSeparator
       allowNegative={false}
-      isNumericString
+      valueIsNumericString
     />
   );
 }

packages/gui/package.json

@@ -80,7 +80,7 @@
     "react-dropzone": "14.2.3",
     "react-hook-form": "7.45.4",
     "react-hotkeys-hook": "4.5.0",
-    "react-number-format": "4.9.1",
+    "react-number-format": "5.4.1",
     "react-redux": "8.1.2",
     "react-router": "6.15.0",
     "react-router-dom": "6.15.0",

packages/gui/src/components/offers/OfferExchangeRate.tsx

@@ -3,19 +3,19 @@ import { Flex } from '@chia-network/core';
 import { ImportExport } from '@mui/icons-material';
 import { InputAdornment, TextField, Typography } from '@mui/material';
 import React, { useMemo, useState } from 'react';
-import NumberFormat from 'react-number-format';
+import { NumericFormat } from 'react-number-format';
 
 import { AssetIdMapEntry } from '../../hooks/useAssetIdName';
 
 interface OfferExchangeRateNumberFormatProps {
-  inputRef: (instance: NumberFormat | null) => void;
+  inputRef: (instance: typeof NumericFormat | null) => void;
   name: string;
 }
 
 function OfferExchangeRateNumberFormat(props: OfferExchangeRateNumberFormatProps) {
   const { inputRef, ...other } = props;
 
-  return <NumberFormat {...other} getInputRef={inputRef} allowNegative={false} isNumericString />;
+  return <NumericFormat {...other} getInputRef={inputRef} allowNegative={false} valueIsNumericString />;
 }
 
 type Props = {