feat(synapse-interface): numerical input format (#3101)

* numerical input formatter * Adds inputMode numeric to auto popup numeric keypad on mobile --------- Co-authored-by: abtestingalpha <[email protected]>
synapsecns · Sep 6, 2024 · 98c9194 · 98c9194
1 parent 79d980c
commit 98c9194
Show file tree

Hide file tree

Showing 3 changed files with 696 additions and 21 deletions.
diff --git a/packages/synapse-interface/components/ui/AmountInput.tsx b/packages/synapse-interface/components/ui/AmountInput.tsx
@@ -1,7 +1,8 @@
-import React, { useState, useEffect, useCallback } from 'react'
 import { debounce } from 'lodash'
-import LoadingDots from './tailwind/LoadingDots'
+import React, { useCallback } from 'react'
+import { NumericFormat } from 'react-number-format'
 import { joinClassNames } from '@/utils/joinClassNames'
+import LoadingDots from './tailwind/LoadingDots'
 
 interface AmountInputTypes {
   inputRef?: React.RefObject<HTMLInputElement>
@@ -44,19 +45,22 @@ export function AmountInput({
       {isLoading ? (
         <LoadingDots className="opacity-50" />
       ) : (
-        <input
-          ref={inputRef}
-          pattern={disabled ? '[0-9.]+' : '^[0-9]*[.,]?[0-9]*$'}
+        <NumericFormat
+          inputMode="numeric"
+          getInputRef={inputRef}
+          placeholder="0.0000"
+          value={showValue}
+          pattern={disabled ? '[0-9.]+' : '^[0-9]+([.,]?[0-9]+)?$'}
           disabled={disabled}
           readOnly={disabled}
-          className={joinClassNames(inputClassNames)}
-          placeholder="0.0000"
           onChange={handleInputChange}
-          value={showValue}
+          className={joinClassNames(inputClassNames)}
           name="inputRow"
-          autoComplete="off"
           minLength={1}
           maxLength={79}
+          autoComplete="off"
+          thousandSeparator={true}
+          allowNegative={false}
         />
       )}
     </>

diff --git a/packages/synapse-interface/package.json b/packages/synapse-interface/package.json
@@ -62,6 +62,7 @@
     "react-ga": "^3.3.1",
     "react-hot-toast": "^2.4.0",
     "react-input-slider": "^6.0.1",
+    "react-number-format": "^5.4.1",
     "react-redux": "^8.1.0",
     "redux-persist": "^6.0.0",
     "swr": "1.3.0",