add to maxamountbuttons

components/BorrowForm.tsx

@@ -21,7 +21,11 @@ import {
   INPUT_TOKEN_DEFAULT,
 } from './../utils/constants'
 import { notify } from './../utils/notifications'
-import { floorToDecimal, formatDecimal } from './../utils/numbers'
+import {
+  floorToDecimal,
+  formatDecimal,
+  formatNumericValue,
+} from './../utils/numbers'
 import ActionTokenList from './account/ActionTokenList'
 import ButtonGroup from './forms/ButtonGroup'
 import Label from './forms/Label'
@@ -109,9 +113,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
 
   const setMax = useCallback(() => {
     if (!bank) return
-    setInputAmount(
-      floorToDecimal(Number(tokenMax), bank.mintDecimals).toFixed()
-    )
+    setInputAmount(formatNumericValue(tokenMax, bank.mintDecimals))
     handleSizePercentage('100')
   }, [bank, tokenMax, handleSizePercentage])
 
@@ -251,12 +253,10 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
                 {bank ? (
                   <MaxAmountButton
                     className="mb-2"
+                    decimals={bank.mintDecimals}
                     label={t('max')}
                     onClick={setMax}
-                    value={floorToDecimal(
-                      Number(tokenMax),
-                      bank.mintDecimals
-                    ).toFixed()}
+                    value={tokenMax}
                   />
                 ) : null}
               </div>

components/DepositForm.tsx

@@ -19,7 +19,11 @@ import {
   INPUT_TOKEN_DEFAULT,
 } from './../utils/constants'
 import { notify } from './../utils/notifications'
-import { floorToDecimal, formatFixedDecimals } from './../utils/numbers'
+import {
+  floorToDecimal,
+  formatFixedDecimals,
+  formatNumericValue,
+} from './../utils/numbers'
 import { TokenAccount } from './../utils/tokens'
 import ActionTokenList from './account/ActionTokenList'
 import ButtonGroup from './forms/ButtonGroup'
@@ -124,9 +128,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
   }, [walletTokens, selectedToken])
 
   const setMax = useCallback(() => {
-    setInputAmount(
-      floorToDecimal(tokenMax.maxAmount, tokenMax.maxDecimals).toFixed()
-    )
+    setInputAmount(formatNumericValue(tokenMax.maxAmount, tokenMax.maxDecimals))
     setSizePercentage('100')
   }, [tokenMax])
 
@@ -264,12 +266,10 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
                 <Label text={`${t('deposit')} ${t('token')}`} />
                 <MaxAmountButton
                   className="mb-2"
+                  decimals={tokenMax.maxDecimals}
                   label={t('wallet-balance')}
                   onClick={setMax}
-                  value={floorToDecimal(
-                    tokenMax.maxAmount,
-                    tokenMax.maxDecimals
-                  ).toFixed()}
+                  value={tokenMax.maxAmount}
                 />
               </div>
               <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">

components/RepayForm.tsx

@@ -13,7 +13,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
 import mangoStore from '@store/mangoStore'
 import { notify } from './../utils/notifications'
-import { floorToDecimal, formatDecimal } from './../utils/numbers'
+import { floorToDecimal, formatNumericValue } from './../utils/numbers'
 import ActionTokenList from './account/ActionTokenList'
 import ButtonGroup from './forms/ButtonGroup'
 import Label from './forms/Label'
@@ -80,15 +80,12 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
 
   const borrowAmount = useMemo(() => {
     if (!mangoAccount || !bank) return '0'
-    return formatDecimal(
-      mangoAccount.getTokenBorrowsUi(bank),
-      bank.mintDecimals
-    )
+    return mangoAccount.getTokenBorrowsUi(bank)
   }, [bank, mangoAccount])
 
   const setMax = useCallback(() => {
     if (!bank) return
-    setInputAmount(borrowAmount)
+    setInputAmount(formatNumericValue(borrowAmount, bank.mintDecimals))
     setSizePercentage('100')
   }, [bank, borrowAmount])
 
@@ -236,12 +233,15 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
             <div className="grid grid-cols-2">
               <div className="col-span-2 flex justify-between">
                 <Label text={`${t('repay')} ${t('token')}`} />
-                <MaxAmountButton
-                  className="mb-2"
-                  label={t('amount-owed')}
-                  onClick={setMax}
-                  value={borrowAmount}
-                />
+                {bank ? (
+                  <MaxAmountButton
+                    className="mb-2"
+                    decimals={bank.mintDecimals}
+                    label={t('amount-owed')}
+                    onClick={setMax}
+                    value={borrowAmount}
+                  />
+                ) : null}
               </div>
               <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
                 <button
@@ -315,7 +315,10 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
                     <p>{t('outstanding-balance')}</p>
                   </div>
                   <p className="font-mono text-th-fgd-2">
-                    {Number(borrowAmount) - Number(inputAmount)}{' '}
+                    {formatNumericValue(
+                      Number(borrowAmount) - Number(inputAmount),
+                      bank.mintDecimals
+                    )}{' '}
                     <span className="font-body text-th-fgd-4">
                       {selectedToken}
                     </span>

components/WithdrawForm.tsx

@@ -221,12 +221,10 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
                 {bank ? (
                   <MaxAmountButton
                     className="mb-2"
+                    decimals={bank.mintDecimals}
                     label={t('max')}
                     onClick={() => handleSizePercentage('100')}
-                    value={floorToDecimal(
-                      Number(tokenMax),
-                      bank.mintDecimals
-                    ).toFixed()}
+                    value={tokenMax}
                   />
                 ) : null}
               </div>

components/account/AccountPage.tsx

@@ -440,7 +440,7 @@ const AccountPage = () => {
               </p>
             </Tooltip>
             <p className="mt-1 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
-              <FormatNumericValue value={leverage} decimals={2} />x
+              <FormatNumericValue value={leverage} decimals={2} roundUp />x
             </p>
           </div>
         </div>

components/modals/UserSetupModal.tsx

@@ -29,6 +29,7 @@ import {
   floorToDecimal,
   formatDecimal,
   formatFixedDecimals,
+  formatNumericValue,
 } from 'utils/numbers'
 import ActionTokenList from '../account/ActionTokenList'
 import ButtonGroup from '../forms/ButtonGroup'
@@ -422,20 +423,15 @@ const UserSetupModal = ({
                     <Label text={t('amount')} />
                     <MaxAmountButton
                       className="mb-2"
+                      decimals={tokenMax.decimals}
                       label="Max"
                       onClick={() => {
                         setDepositAmount(
-                          floorToDecimal(
-                            tokenMax.amount,
-                            tokenMax.decimals
-                          ).toFixed()
+                          formatNumericValue(tokenMax.amount, tokenMax.decimals)
                         )
                         setSizePercentage('100')
                       }}
-                      value={floorToDecimal(
-                        tokenMax.amount,
-                        tokenMax.decimals
-                      ).toFixed()}
+                      value={tokenMax.amount}
                     />
                   </div>
                   <div className="mb-6 grid grid-cols-2">

components/shared/MaxAmountButton.tsx

@@ -1,17 +1,21 @@
+import Decimal from 'decimal.js'
 import { LinkButton } from './Button'
+import FormatNumericValue from './FormatNumericValue'
 
 const MaxAmountButton = ({
   className,
+  decimals,
   disabled,
   label,
   onClick,
   value,
 }: {
   className?: string
+  decimals: number
   disabled?: boolean
   label: string
   onClick: () => void
-  value: string
+  value: number | string | Decimal
 }) => {
   return (
     <LinkButton
@@ -20,7 +24,9 @@ const MaxAmountButton = ({
       onClick={onClick}
     >
       <p className="mr-1 text-th-fgd-4">{label}:</p>
-      <span className="font-mono text-th-fgd-2 underline">{value}</span>
+      <span className="font-mono text-th-fgd-2 underline">
+        <FormatNumericValue value={value} decimals={decimals} />
+      </span>
     </LinkButton>
   )
 }

components/swap/MaxSwapAmount.tsx

@@ -1,7 +1,8 @@
 import MaxAmountButton from '@components/shared/MaxAmountButton'
 import mangoStore from '@store/mangoStore'
+import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
-import { floorToDecimal } from 'utils/numbers'
+import { formatNumericValue } from 'utils/numbers'
 import { useTokenMax } from './useTokenMax'
 
 const MaxSwapAmount = ({
@@ -21,29 +22,26 @@ const MaxSwapAmount = ({
 
   if (mangoAccountLoading) return null
 
-  const maxBalanceValue = floorToDecimal(
-    tokenMax.toNumber(),
-    decimals
-  ).toFixed()
-  const maxBorrowValue = floorToDecimal(
-    amountWithBorrow.toNumber(),
-    decimals
-  ).toFixed()
+  const setMax = (value: Decimal) => {
+    setAmountIn(formatNumericValue(value, decimals))
+  }
 
   return (
     <div className="flex flex-wrap justify-end pl-6 text-xs">
       <MaxAmountButton
         className="mb-0.5"
+        decimals={decimals}
         label="Bal"
-        onClick={() => setAmountIn(maxBalanceValue)}
-        value={maxBalanceValue}
+        onClick={() => setMax(tokenMax)}
+        value={tokenMax}
       />
       {useMargin ? (
         <MaxAmountButton
           className="mb-0.5 ml-2"
+          decimals={decimals}
           label={t('max')}
-          onClick={() => setAmountIn(maxBorrowValue)}
-          value={maxBorrowValue}
+          onClick={() => setMax(amountWithBorrow)}
+          value={amountWithBorrow}
         />
       ) : null}
     </div>

components/trade/MaxSizeButton.tsx

@@ -6,7 +6,7 @@ import useMangoAccount from 'hooks/useMangoAccount'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useTranslation } from 'next-i18next'
 import { useCallback, useMemo } from 'react'
-import { floorToDecimal } from 'utils/numbers'
+import { formatNumericValue } from 'utils/numbers'
 import { useSpotMarketMax } from './SpotSlider'
 
 const MaxSizeButton = ({
@@ -57,33 +57,30 @@ const MaxSizeButton = ({
     const set = mangoStore.getState().set
     set((state) => {
       if (side === 'buy') {
-        state.tradeForm.quoteSize = floorToDecimal(max, tickDecimals).toFixed()
+        state.tradeForm.quoteSize = formatNumericValue(max, tickDecimals)
         if (tradeType === 'Market' || !price) {
-          state.tradeForm.baseSize = floorToDecimal(
+          state.tradeForm.baseSize = formatNumericValue(
             max / oraclePrice,
             minOrderDecimals
-          ).toFixed()
+          )
         } else {
-          state.tradeForm.baseSize = floorToDecimal(
+          state.tradeForm.baseSize = formatNumericValue(
             max / parseFloat(price),
             minOrderDecimals
-          ).toFixed()
+          )
         }
       } else {
-        state.tradeForm.baseSize = floorToDecimal(
-          max,
-          minOrderDecimals
-        ).toFixed()
+        state.tradeForm.baseSize = formatNumericValue(max, minOrderDecimals)
         if (tradeType === 'Market' || !price) {
-          state.tradeForm.quoteSize = floorToDecimal(
+          state.tradeForm.quoteSize = formatNumericValue(
             max * oraclePrice,
             minOrderDecimals
-          ).toFixed()
+          )
         } else {
-          state.tradeForm.quoteSize = floorToDecimal(
+          state.tradeForm.quoteSize = formatNumericValue(
             max * parseFloat(price),
             minOrderDecimals
-          ).toFixed()
+          )
         }
       }
     })
@@ -102,20 +99,11 @@ const MaxSizeButton = ({
     const max = selectedMarket instanceof Serum3Market ? spotMax : perpMax || 0
     const tradePrice = tradeType === 'Market' ? oraclePrice : Number(price)
     if (side === 'buy') {
-      return floorToDecimal(max / tradePrice, minOrderDecimals).toFixed()
+      return max / tradePrice
     } else {
-      return floorToDecimal(max, minOrderDecimals).toFixed()
+      return max
     }
-  }, [
-    perpMax,
-    spotMax,
-    selectedMarket,
-    minOrderDecimals,
-    tickDecimals,
-    price,
-    side,
-    tradeType,
-  ])
+  }, [perpMax, spotMax, selectedMarket, price, side, tradeType])
 
   return (
     <div className="mb-2 mt-3 flex items-center justify-between">
@@ -123,6 +111,7 @@ const MaxSizeButton = ({
       <FadeInFadeOut show={!!price}>
         <MaxAmountButton
           className="text-xs"
+          decimals={minOrderDecimals}
           label={t('max')}
           onClick={handleMax}
           value={maxAmount}