US-996 RIF Wallet libs - Sending a transaction should check if the user has the funds + fee before sending (RIF RELAY)

src/lib/i18n.ts

@@ -205,6 +205,7 @@ const resources = {
       transaction_summary_function_type: 'type',
       transaction_summary_plus_fees: '+ fees',
       transaction_summary_plus_fees_capitalcase: '+ Fees',
+      transaction_summary_insufficient_funds: 'Insufficient funds',
       profile_screen_title: 'Profile',
       profile_contact_details_subtitle: 'Contact Details',
       profile_phone_label: 'Phone Number',

src/screens/transactionSummary/TransactionSummaryComponent.tsx

@@ -33,8 +33,8 @@ import {
 import { TransactionSummaryScreenProps } from '.'
 
 interface Props {
-  goBack?: () => void
   wallet: RIFWallet
+  goBack?: () => void
 }
 
 type TransactionSummaryComponentProps = Omit<

src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx

@@ -5,7 +5,7 @@ import {
 import { BigNumber, constants } from 'ethers'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet, View } from 'react-native'
+import { Alert, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { balanceToDisplay, convertTokenToUSD } from 'lib/utils'
@@ -17,15 +17,22 @@ import { TransactionSummaryScreenProps } from 'screens/transactionSummary'
 import { TransactionSummaryComponent } from 'screens/transactionSummary/TransactionSummaryComponent'
 import { sharedColors } from 'shared/constants'
 import { chainTypesById } from 'shared/constants/chainConstants'
-import { errorHandler } from 'shared/utils'
+import { castStyle, errorHandler } from 'shared/utils'
 import { selectWalletState } from 'store/slices/settingsSlice'
 import { ChainTypeEnum } from 'store/slices/settingsSlice/types'
 import { selectUsdPrices } from 'store/slices/usdPricesSlice'
 import { useAppDispatch, useAppSelector } from 'store/storeUtils'
 import { addRecentContact } from 'store/slices/contactsSlice'
+import { selectBalances } from 'store/slices/balancesSlice'
 
 import useEnhancedWithGas from '../useEnhancedWithGas'
 
+const tokenToBoolMap = new Map([
+  [TokenSymbol.RIF, true],
+  [TokenSymbol.TRIF, true],
+  [undefined, false],
+])
+
 interface Props {
   request: SendTransactionRequest
   onConfirm: () => void
@@ -42,6 +49,7 @@ export const ReviewTransactionContainer = ({
   const tokenPrices = useAppSelector(selectUsdPrices)
   // enhance the transaction to understand what it is:
   const { wallet, chainId } = useAppSelector(selectWalletState)
+  const balances = useAppSelector(selectBalances)
   const [txCostInRif, setTxCostInRif] = useState<BigNumber>()
   const { t } = useTranslation()
 
@@ -136,6 +144,22 @@ export const ReviewTransactionContainer = ({
     const feeValue = txCostInRif
       ? `${balanceToDisplay(txCostInRif, 18, 0)}`
       : '0'
+
+    let insufficientFunds = false
+
+    if (tokenToBoolMap.get(symbol as TokenSymbol)) {
+      insufficientFunds =
+        Number(value) + Number(feeValue) > Number(balances[feeContract].balance)
+    } else {
+      insufficientFunds =
+        Number(feeValue) > Number(balances[feeContract].balance)
+    }
+
+    if (insufficientFunds) {
+      Alert.alert(t('transaction_summary_insufficient_funds'))
+    }
+
+    // get usd values
     const tokenUsd = convertToUSD(Number(value), tokenQuote)
     const feeUsd = convertToUSD(Number(feeValue), feeQuote)
 
@@ -166,6 +190,7 @@ export const ReviewTransactionContainer = ({
           color: sharedColors.white,
           textColor: sharedColors.black,
           accessibilityLabel: 'Confirm',
+          disabled: insufficientFunds,
         },
         {
           style: { marginTop: 10 },
@@ -178,6 +203,8 @@ export const ReviewTransactionContainer = ({
       functionName,
     }
   }, [
+    feeContract,
+    balances,
     txCostInRif,
     value,
     tokenQuote,
@@ -203,10 +230,10 @@ export const ReviewTransactionContainer = ({
 }
 
 const styles = StyleSheet.create({
-  container: {
+  container: castStyle.view({
     width: '100%',
     height: '100%',
     zIndex: 999,
     position: 'absolute',
-  },
+  }),
 })