diff --git a/.changeset/long-jobs-kiss.md b/.changeset/long-jobs-kiss.md
new file mode 100644
index 000000000..edcf98e7c
--- /dev/null
+++ b/.changeset/long-jobs-kiss.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Fix feedback when user has insufficient ETH to cover fees.
diff --git a/.changeset/tender-mails-crash.md b/.changeset/tender-mails-crash.md
new file mode 100644
index 000000000..836a0f0a2
--- /dev/null
+++ b/.changeset/tender-mails-crash.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Fix large amounts breaking the UI on the homescreen.
diff --git a/packages/app/src/systems/Asset/components/AssetItem/AssetItem.tsx b/packages/app/src/systems/Asset/components/AssetItem/AssetItem.tsx
index 61a01df69..067469f2c 100644
--- a/packages/app/src/systems/Asset/components/AssetItem/AssetItem.tsx
+++ b/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 (
-
-
- {' '}
- {symbol}
-
-
+
);
}
diff --git a/packages/app/src/systems/Asset/components/AssetItem/AssetItemAmount.tsx b/packages/app/src/systems/Asset/components/AssetItem/AssetItemAmount.tsx
new file mode 100644
index 000000000..936c9d9c3
--- /dev/null
+++ b/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(null);
+ const [isTruncated, setIsTruncated] = useState(false);
+
+ const open = useMemo(() => {
+ 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 (
+
+
+
+
+
+
+ {symbol}
+
+
+
+ );
+};
+
+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,
+ }),
+};
diff --git a/packages/app/src/systems/Transaction/services/transaction.tsx b/packages/app/src/systems/Transaction/services/transaction.tsx
index 18ca6b967..1ec72b956 100644
--- a/packages/app/src/systems/Transaction/services/transaction.tsx
+++ b/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;
+ }
}
}
}