From 878f77f2b845bf2a5290992fba37b22d594bcfdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Thu, 5 Dec 2024 16:26:11 +0700 Subject: [PATCH 1/3] fix: prevent to allow the user to move forward if he doesn't have funds to cover the fees --- .changeset/long-jobs-kiss.md | 5 +++++ .../app/src/systems/Transaction/services/transaction.tsx | 9 +++++++++ 2 files changed, 14 insertions(+) create mode 100644 .changeset/long-jobs-kiss.md 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/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; + } } } } From 716e8cb556d3a9003ba5343edef7026d44695805 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Thu, 5 Dec 2024 17:00:46 +0700 Subject: [PATCH 2/3] feat: truncate balance amount in the home screen too --- .../Asset/components/AssetItem/AssetItem.tsx | 29 +------ .../components/AssetItem/AssetItemAmount.tsx | 75 +++++++++++++++++++ 2 files changed, 78 insertions(+), 26 deletions(-) create mode 100644 packages/app/src/systems/Asset/components/AssetItem/AssetItemAmount.tsx 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, + }), +}; From a8a1e2342248d94b289a3d79cc74cfbb3a42df37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Thu, 5 Dec 2024 17:02:20 +0700 Subject: [PATCH 3/3] docs: add changeset for that --- .changeset/tender-mails-crash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tender-mails-crash.md 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.