feat(HW-477): Error on preview screen for insufficient balance

assets/locales/en/en.json

@@ -3,7 +3,7 @@
   "StakingInfoUnDelegationDay": " ({{day}} day left)",
   "StakingInfoUnDelegationDays": " ({{days}} days left)",
   "Welcome_haqq_pin": "Welcome to HAQQ Wallet",
-  "_hash": "579a47c230afa099c92a7212214fc9b7b83fe60c50b1c522dcd6fcf8210842b3",
+  "_hash": "fd73aced8b5e070cb2eafe5958aeec977ed37e96628fd0ab056d99cec4e542c8",
   "accept": "Accept",
   "accountInfoNftTabTitle": "NFTs",
   "accountInfoTokensTabTitle": "Tokens",
@@ -937,6 +937,7 @@
   "transactionStatusInProgress": "In progress",
   "transactionStatusSuccess": "Success",
   "transactionSumAddressTitle": "Address",
+  "transactionSumError": "You don't have enough {{symbol}} to pay the fee",
   "transactionSumPreview": "Preview",
   "transactionSumSend": "Send to",
   "transactionSumSendTitle": "Send",

src/components/transaction-confirmation/transaction-confirmation.tsx

@@ -22,7 +22,7 @@ import {I18N, getText} from '@app/i18n';
 import {Contact} from '@app/models/contact';
 import {Fee} from '@app/models/fee';
 import {Balance} from '@app/services/balance';
-import {IToken} from '@app/types';
+import {BalanceData, IToken} from '@app/types';
 import {splitAddress} from '@app/utils';
 import {LONG_NUM_PRECISION} from '@app/variables/common';
 
@@ -38,6 +38,7 @@ interface TransactionConfirmationProps {
   onFeePress: () => void;
   fee: Fee | null;
   token: IToken;
+  balance: BalanceData;
 }
 
 export const TransactionConfirmation = observer(
@@ -51,6 +52,7 @@ export const TransactionConfirmation = observer(
     onFeePress,
     fee,
     token,
+    balance,
   }: TransactionConfirmationProps) => {
     const splittedTo = useMemo(() => splitAddress(to), [to]);
 
@@ -66,6 +68,19 @@ export const TransactionConfirmation = observer(
       return amount;
     }, [amount, fee?.calculatedFees]);
 
+    const transactionSumError = useMemo(() => {
+      if (!fee?.calculatedFees) {
+        return null;
+      }
+
+      return (
+        fee.calculatedFees.expectedFee
+          .operate(amount, 'add')
+          .operate(balance.available, 'sub')
+          .toFloat() > 0
+      );
+    }, [amount, fee?.calculatedFees]);
+
     const sumText = useMemo(() => {
       if (transactionSum === null) {
         return getText(I18N.estimatingGas);
@@ -165,15 +180,29 @@ export const TransactionConfirmation = observer(
                 <View style={styles.feeContainer}>
                   <Text
                     variant={TextVariant.t11}
-                    color={Color.textGreen1}
+                    color={
+                      transactionSumError ? Color.graphicRed1 : Color.textGreen1
+                    }
                     onPress={onFeePress}>
                     {fee.expectedFeeString}
                   </Text>
-                  <Icon name={IconsName.tune} color={Color.textGreen1} />
+                  <Icon
+                    name={IconsName.tune}
+                    color={
+                      transactionSumError ? Color.graphicRed1 : Color.textGreen1
+                    }
+                  />
                 </View>
               )}
             </DataView>
           </View>
+          {transactionSumError && (
+            <Text
+              color={Color.graphicRed1}
+              i18n={I18N.transactionSumError}
+              i18params={{symbol: app.provider.weiDenom}}
+            />
+          )}
         </Spacer>
         <Button
           disabled={!fee?.expectedFee?.isPositive() && !disabled}

src/i18n.ts

@@ -247,6 +247,7 @@ export enum I18N {
   settingsAddressBookAlertDesc = 'settingsAddressBookAlertDesc',
   settingsAddressBookAlertTitle = 'settingsAddressBookAlertTitle',
   sent = 'sent',
+  transactionSumError = 'transactionSumError',
   signinRestoreWalletPasteClipboard = 'signinRestoreWalletPasteClipboard',
   signinRestoreWalletPhraseOrKey = 'signinRestoreWalletPhraseOrKey',
   signinRestoreWalletRecovery = 'signinRestoreWalletRecovery',

src/screens/HomeStack/TransactionStack/transaction-confirmation.tsx

@@ -11,6 +11,7 @@ import {getProviderInstanceForWallet} from '@app/helpers/provider-instance';
 import {useTypedNavigation, useTypedRoute} from '@app/hooks';
 import {useAndroidBackHandler} from '@app/hooks/use-android-back-handler';
 import {useError} from '@app/hooks/use-error';
+import {useWalletsBalance} from '@app/hooks/use-wallets-balance';
 import {Contact} from '@app/models/contact';
 import {Fee} from '@app/models/fee';
 import {Wallet} from '@app/models/wallet';
@@ -23,7 +24,7 @@ import {Balance} from '@app/services/balance';
 import {getERC20TransferData} from '@app/services/eth-network/erc20';
 import {EthSignErrorDataDetails} from '@app/services/eth-sign';
 import {EventTracker} from '@app/services/event-tracker';
-import {MarketingEvents, ModalType} from '@app/types';
+import {HaqqEthereumAddress, MarketingEvents, ModalType} from '@app/types';
 import {makeID} from '@app/utils';
 
 export const TransactionConfirmationScreen = observer(() => {
@@ -37,6 +38,8 @@ export const TransactionConfirmationScreen = observer(() => {
     TransactionStackRoutes.TransactionConfirmation
   >();
   const {token, calculatedFees} = route.params;
+  const visible = Wallet.getAllVisible();
+  const balance = useWalletsBalance(visible);
 
   const [fee, setFee] = useState<Fee>(new Fee(calculatedFees!));
 
@@ -177,6 +180,7 @@ export const TransactionConfirmationScreen = observer(() => {
 
   return (
     <TransactionConfirmation
+      balance={balance[route.params.from as HaqqEthereumAddress]}
       disabled={disabled}
       contact={contact}
       to={route.params.to}