fix handling small decimals in swap form input

components/swap/SwapForm.tsx

@@ -252,6 +252,7 @@ const SwapForm = () => {
             useMargin={useMargin}
             setAmountIn={setAmountInFormValue}
             tokenMax={tokenMax}
+            decimals={decimals}
           />
         </div>
         <div className="mb-3 grid grid-cols-2">
@@ -266,6 +267,8 @@ const SwapForm = () => {
             <NumberFormat
               inputMode="decimal"
               thousandSeparator=","
+              allowNegative={false}
+              isNumericString={true}
               decimalScale={inputTokenInfo?.decimals || 6}
               name="amountIn"
               id="amountIn"
@@ -414,27 +417,31 @@ const MaxSwapAmount = ({
   setAmountIn,
   tokenMax,
   useMargin,
+  decimals,
 }: {
   amountWithBorrow: number
-  setAmountIn: (x: any) => void
+  setAmountIn: (x: string) => void
   tokenMax: number
   useMargin: boolean
+  decimals: number
 }) => {
   const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
   const { t } = useTranslation('common')
 
   const setMaxInputAmount = () => {
     const amountIn = useMargin ? amountWithBorrow : tokenMax
-    setAmountIn(amountIn)
+    setAmountIn(amountIn.toFixed(decimals))
   }
 
   if (mangoAccountLoading) return null
 
+  const maxAmount = useMargin ? amountWithBorrow : tokenMax
+
   return (
     <LinkButton className="no-underline" onClick={setMaxInputAmount}>
       <span className="font-normal text-th-fgd-4">{t('max')}:</span>
       <span className="mx-1 text-th-fgd-3 underline">
-        {useMargin ? amountWithBorrow : tokenMax}
+        {maxAmount < 1 ? maxAmount.toFixed(decimals) : maxAmount}
       </span>
     </LinkButton>
   )
@@ -448,7 +455,7 @@ const PercentageSelectButtons = ({
 }: {
   amountIn: string
   decimals: number
-  setAmountIn: (x: any) => any
+  setAmountIn: (x: string) => any
   tokenMax: number
 }) => {
   const [sizePercentage, setSizePercentage] = useState('')

components/swap/useTokenMax.tsx

@@ -20,7 +20,6 @@ export const useTokenMax = (useMargin = true) => {
         inputBankFromGroup.mintDecimals
       )
     )
-    console.log('inputBank.mint', inputBank.mint.toString())
 
     const inputBankVaultBalance = group.getTokenVaultBalanceByMintUi(
       inputBank.mint

package.json

@@ -34,7 +34,7 @@
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-flip-numbers": "^3.0.5",
-    "react-number-format": "^4.9.3",
+    "react-number-format": "4.5.4",
     "react-window": "^1.8.7",
     "recharts": "^2.1.12",
     "zustand": "^3.7.2"

yarn.lock

@@ -4303,10 +4303,10 @@ react-native-url-polyfill@^1.3.0:
   dependencies:
     whatwg-url-without-unicode "8.0.0-3"
 
-react-number-format@^4.9.3:
-  version "4.9.3"
-  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.9.3.tgz#338500fe9c61b1ac73c8d6dff4ec97dd13fd2b50"
-  integrity sha512-am1A1xYAbENuKJ+zpM7V+B1oRTSeOHYltqVKExznIVFweBzhLmOBmyb1DfIKjHo90E0bo1p3nzVJ2NgS5xh+sQ==
+react-number-format@4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.5.4.tgz#b644d79a90fcad2f1009eb0b9a14eb0ddd6c0083"
+  integrity sha512-DZm4YhJ7B+bbOA+Jgn/ckA9DPcKxrJWHXir4nA1YIeqKZ15XYa/uVLwZohlEcGUKqqx6ZeXppOU4eZczBenHOg==
   dependencies:
     prop-types "^15.7.2"