fix: feedback for insufficient ETH to cover transaction fees (#1683)

- Closes #1676

---

| 📷 Demo |
| --- |
| <img width="367" alt="Screenshot 2024-12-05 at 16 23 13"
src="https://github.com/user-attachments/assets/08ed04e2-d97b-42b6-8802-8a25b7c5d66b">
|

.changeset/long-jobs-kiss.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Fix feedback when user has insufficient ETH to cover fees.

.changeset/tender-mails-crash.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Fix large amounts breaking the UI on the homescreen.

packages/app/src/systems/Asset/components/AssetItem/AssetItem.tsx

@@ -14,19 +14,14 @@ import {
 } from '@fuel-ui/react';
 import { type FC, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import {
-  AmountVisibility,
-  Pages,
-  formatBalance,
-  shortAddress,
-} from '~/systems/Core';
-import { useBalanceVisibility } from '~/systems/Core/hooks/useVisibility';
+import { Pages, shortAddress } from '~/systems/Core';
 
 import { AssetRemoveDialog } from '../AssetRemoveDialog';
 
 import type { AssetData, AssetFuelData } from '@fuel-wallet/types';
 import type { BNInput } from 'fuels';
 import useFuelAsset from '../../hooks/useFuelAsset';
+import { AssetItemAmount } from './AssetItemAmount';
 import { AssetItemLoader } from './AssetItemLoader';
 
 export type AssetItemProps = {
@@ -55,7 +50,6 @@ export const AssetItem: AssetItemComponent = ({
   shouldShowCopyAssetAddress,
 }) => {
   const navigate = useNavigate();
-  const { visibility } = useBalanceVisibility();
 
   const fuelAssetFromInputAsset = useFuelAsset({ asset: inputAsset });
   const asset = useMemo(() => {
@@ -123,25 +117,8 @@ export const AssetItem: AssetItemComponent = ({
     }
 
     if (amount) {
-      const { original, tooltip } = formatBalance(amount, decimals);
-
       return (
-        <Tooltip
-          content={original.display}
-          delayDuration={0}
-          open={visibility && tooltip ? undefined : false}
-        >
-          <Text
-            css={{ fontSize: '$sm', fontWeight: '$normal', textAlign: 'right' }}
-          >
-            <AmountVisibility
-              value={amount}
-              units={decimals}
-              visibility={visibility}
-            />{' '}
-            {symbol}
-          </Text>
-        </Tooltip>
+        <AssetItemAmount amount={amount} decimals={decimals} symbol={symbol} />
       );
     }
 

packages/app/src/systems/Asset/components/AssetItem/AssetItemAmount.tsx

@@ -0,0 +1,75 @@
+import { cssObj } from '@fuel-ui/css';
+import { Box, Text, Tooltip } from '@fuel-ui/react';
+import type { BNInput } from 'fuels';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { AmountVisibility, formatBalance } from '~/systems/Core';
+import { useBalanceVisibility } from '~/systems/Core/hooks/useVisibility';
+
+type AssetItemAmountProps = {
+  amount: BNInput;
+  decimals: number | undefined;
+  symbol: string | undefined;
+};
+
+export const AssetItemAmount = ({
+  amount,
+  decimals,
+  symbol,
+}: AssetItemAmountProps) => {
+  const { visibility } = useBalanceVisibility();
+  const { original, tooltip } = formatBalance(amount, decimals);
+
+  const amountRef = useRef<HTMLSpanElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  const open = useMemo<boolean | undefined>(() => {
+    if (visibility && (tooltip || isTruncated)) return undefined;
+    return false;
+  }, [tooltip, visibility, isTruncated]);
+
+  useEffect(() => {
+    if (!tooltip && amountRef.current) {
+      const amountEl = amountRef.current;
+      setIsTruncated(amountEl.scrollWidth > amountEl.clientWidth);
+    }
+  }, [tooltip]);
+
+  return (
+    <Tooltip content={original.display} delayDuration={0} open={open}>
+      <Box css={styles.root}>
+        <Text as="span" ref={amountRef} css={styles.amount}>
+          <AmountVisibility
+            value={amount}
+            units={decimals}
+            visibility={visibility}
+          />
+        </Text>
+        <Text as="span" css={styles.symbol}>
+          {symbol}
+        </Text>
+      </Box>
+    </Tooltip>
+  );
+};
+
+const styles = {
+  root: cssObj({
+    display: 'inline-flex',
+    columnGap: '$1',
+    minWidth: 0,
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+    fontSize: '$sm',
+    fontWeight: '$normal',
+    textAlign: 'right',
+    paddingLeft: '$2',
+  }),
+  amount: cssObj({
+    display: 'inline-block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  }),
+  symbol: cssObj({
+    flexShrink: 0,
+  }),
+};

packages/app/src/systems/Transaction/services/transaction.tsx

@@ -449,9 +449,18 @@ export class TxService {
         if (e instanceof FuelError) {
           const error = e.toObject();
 
+          // If the gas limit is too low, we cannot move forward
           if (error.code === ErrorCode.GAS_LIMIT_TOO_LOW) {
             throw e;
           }
+
+          // If this is the last attempt and we still don't have funds, we cannot move forward
+          if (
+            attempts === maxAttempts &&
+            error.code === ErrorCode.NOT_ENOUGH_FUNDS
+          ) {
+            throw e;
+          }
         }
       }
     }