CP-10907 - setting MAX when balance is low shows negative value (#3347)

Signed-off-by: Bogdan Dobritoiu <[email protected]>

Author: bogdandobritoiu

packages/core-mobile/app/new/common/hooks/send/useEVMSend.ts

@@ -180,13 +180,10 @@ const useEVMSend: SendAdapterEVM = ({
 
     const totalFee = gasLimit * maxFee
     const maxAmountValue = nativeToken.balance - totalFee
+    const maxAmount = maxAmountValue > 0n ? maxAmountValue : 0n
 
     if (selectedToken.type === TokenType.NATIVE) {
-      return new TokenUnit(
-        maxAmountValue ?? 0n,
-        nativeToken.decimals,
-        nativeToken.symbol
-      )
+      return new TokenUnit(maxAmount, nativeToken.decimals, nativeToken.symbol)
     } else if (selectedToken.type === TokenType.ERC20) {
       return new TokenUnit(
         selectedToken.balance,

packages/core-mobile/app/new/common/hooks/send/useSVMSend.ts

@@ -69,11 +69,9 @@ const useSVMSend: SendAdapterSVM = ({
     }
 
     if (selectedToken.type === TokenType.NATIVE) {
-      return new TokenUnit(
-        selectedToken.balance - SOLANA_FIXED_BASE_FEE,
-        nativeToken.decimals,
-        nativeToken.symbol
-      )
+      const maxAmountValue = selectedToken.balance - SOLANA_FIXED_BASE_FEE
+      const maxAmount = maxAmountValue > 0n ? maxAmountValue : 0n
+      return new TokenUnit(maxAmount, nativeToken.decimals, nativeToken.symbol)
     } else {
       const splToken = selectedToken as TokenWithBalanceSPL
       return new TokenUnit(splToken.balance, splToken.decimals, splToken.symbol)

packages/core-mobile/app/new/features/send/components/SendToken.tsx

@@ -204,7 +204,7 @@ export const SendToken = ({ onSend }: { onSend: () => void }): JSX.Element => {
 
   return (
     <ScrollScreen
-      bottomOffset={150}
+      bottomOffset={maxAmount?.eq(0) ? 400 : 150}
       isModal
       title={`${'How much would\nyou like to send?'}`}
       navigationTitle="How much would you like to send?"

packages/k2-alpine/src/components/TokenUnitInput/SendTokenUnitInputWidget.tsx

@@ -1,19 +1,20 @@
+import { TokenUnit } from '@avalabs/core-utils-sdk'
+import { SxProp } from 'dripsy'
 import React, {
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
   forwardRef,
-  useImperativeHandle
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
 } from 'react'
-import { SxProp } from 'dripsy'
-import { TokenUnit } from '@avalabs/core-utils-sdk'
 import { ReturnKeyTypeOptions } from 'react-native'
-import { normalizeErrorMessage } from '../../utils/tokenUnitInput'
 import { useTheme } from '../../hooks'
-import { Text, View } from '../Primitives'
+import { Icons } from '../../theme/tokens/Icons'
 import { alpha } from '../../utils'
+import { normalizeErrorMessage } from '../../utils/tokenUnitInput'
 import { Button } from '../Button/Button'
+import { Text, View } from '../Primitives'
 import { TokenUnitInput, TokenUnitInputHandle } from './TokenUnitInput'
 
 interface PresetAmount {
@@ -214,7 +215,7 @@ export const SendTokenUnitInputWidget = forwardRef<
                 style={{
                   minWidth: 72
                 }}
-                disabled={disabled}
+                disabled={maxAmount?.eq(0)}
                 onPress={() => {
                   handlePressPresetButton(button.amount, index)
                 }}>
@@ -247,6 +248,27 @@ export const SendTokenUnitInputWidget = forwardRef<
             ? normalizeErrorMessage(errorMessage)
             : `Balance: ${balance.toDisplay()} ${token.symbol}`}
         </Text>
+
+        {/* Show additional error message if max amount is 0 */}
+        {maxAmount?.eq(0) && (
+          <View
+            sx={{
+              flexDirection: 'row',
+              gap: 8,
+              marginTop: 16,
+              alignItems: 'center'
+            }}>
+            <Icons.Alert.ErrorOutline color={colors.$textDanger} />
+            <Text
+              sx={{
+                flexShrink: 1,
+                color: '$textDanger',
+                fontFamily: 'Inter-Medium'
+              }}>
+              You don't have enough gas fees for this transaction
+            </Text>
+          </View>
+        )}
       </View>
     )
   }