fix: Display available spending limit amount (#1346)

safe-global · Dec 16, 2022 · 2dfdb46 · 2dfdb46
1 parent 1b3a0b6
commit 2dfdb46
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/src/components/tx/SpendingLimitRow/index.tsx b/src/components/tx/SpendingLimitRow/index.tsx
@@ -1,25 +1,25 @@
 import { FormControl, FormControlLabel, Radio, RadioGroup, Typography } from '@mui/material'
 import { Controller, useFormContext } from 'react-hook-form'
-import { formatVisualAmount } from '@/utils/formatters'
+import type { BigNumber } from '@ethersproject/bignumber'
+import { safeFormatUnits } from '@/utils/formatters'
 import type { TokenInfo } from '@safe-global/safe-gateway-typescript-sdk'
-import type { SpendingLimitState } from '@/store/spendingLimitsSlice'
 import { SendAssetsField, SendTxType } from '@/components/tx/modals/TokenTransferModal/SendAssetsForm'
 
 const SpendingLimitRow = ({
-  spendingLimit,
+  availableAmount,
   selectedToken,
 }: {
-  spendingLimit: SpendingLimitState
+  availableAmount: BigNumber
   selectedToken: TokenInfo | undefined
 }) => {
   const { control } = useFormContext()
 
-  const formattedAmount = formatVisualAmount(spendingLimit.amount, selectedToken?.decimals)
+  const formattedAmount = safeFormatUnits(availableAmount, selectedToken?.decimals)
 
   return (
     <>
       <Typography>Send as</Typography>
-      <FormControl sx={{ mb: 2 }}>
+      <FormControl>
         <Controller
           rules={{ required: true }}
           control={control}

diff --git a/src/components/tx/modals/TokenTransferModal/SendAssetsForm.tsx b/src/components/tx/modals/TokenTransferModal/SendAssetsForm.tsx
@@ -13,6 +13,7 @@ import {
   SvgIcon,
 } from '@mui/material'
 import { type TokenInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import { BigNumber } from '@ethersproject/bignumber'
 
 import TokenIcon from '@/components/common/TokenIcon'
 import { formatVisualAmount, safeFormatUnits } from '@/utils/formatters'
@@ -112,12 +113,14 @@ const SendAssetsForm = ({ onSubmit, formData, disableSpendingLimit = false }: Se
 
   const isSafeTokenSelected = sameAddress(safeTokenAddress, tokenAddress)
 
+  const spendingLimitAmount = spendingLimit ? BigNumber.from(spendingLimit.amount).sub(spendingLimit.spent) : undefined
+
   const onMaxAmountClick = () => {
-    if (!selectedToken) return
+    if (!selectedToken || !spendingLimitAmount) return
 
     const amount =
-      spendingLimit && isSpendingLimitType
-        ? Math.min(+spendingLimit.amount, +selectedToken.balance).toString()
+      spendingLimit && isSpendingLimitType && spendingLimitAmount.lte(selectedToken.balance)
+        ? spendingLimitAmount.toString()
         : selectedToken.balance
 
     setValue(SendAssetsField.amount, safeFormatUnits(amount, selectedToken.tokenInfo.decimals), {
@@ -174,8 +177,10 @@ const SendAssetsForm = ({ onSubmit, formData, disableSpendingLimit = false }: Se
             </Box>
           )}
 
-          {!disableSpendingLimit && !!spendingLimit && (
-            <SpendingLimitRow spendingLimit={spendingLimit} selectedToken={selectedToken?.tokenInfo} />
+          {!disableSpendingLimit && !!spendingLimitAmount && (
+            <FormControl fullWidth sx={{ mt: 2 }}>
+              <SpendingLimitRow availableAmount={spendingLimitAmount} selectedToken={selectedToken?.tokenInfo} />
+            </FormControl>
           )}
 
           <FormControl fullWidth sx={{ mt: 2 }}>
@@ -198,7 +203,7 @@ const SendAssetsForm = ({ onSubmit, formData, disableSpendingLimit = false }: Se
                 required: true,
                 validate: (val) => {
                   const decimals = selectedToken?.tokenInfo.decimals
-                  const max = isSpendingLimitType ? spendingLimit?.amount : selectedToken?.balance
+                  const max = isSpendingLimitType ? spendingLimitAmount?.toString() : selectedToken?.balance
                   return validateLimitedAmount(val, decimals, max) || validateDecimalLength(val, decimals)
                 },
               })}