fix: fee estimation error messages (#1479)

- Closes #1457 --- | 📷 Demo | | --- | | <img width="462" alt="Screenshot 2024-09-17 at 11 46 36" src="https://github.com/user-attachments/assets/c3ee6819-bfae-473b-840d-855f0a176101"> |
FuelLabs · Sep 18, 2024 · 14e6385 · 14e6385
1 parent 9506c6e
commit 14e6385
Show file tree

Hide file tree

Showing 12 changed files with 120 additions and 143 deletions.
diff --git a/.changeset/chilly-planets-hide.md b/.changeset/chilly-planets-hide.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": minor
+---
+
+Improve how error messages are displayed/parsed during fee estimation.
diff --git a/.changeset/giant-horses-play.md b/.changeset/giant-horses-play.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": minor
+---
+
+Display fees options even when there are tx simulation errors.
diff --git a/.changeset/swift-bugs-film.md b/.changeset/swift-bugs-film.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Allow dApps to pass account owner with `0x` address.
diff --git a/examples/cra-dapp/src/Connected.tsx b/examples/cra-dapp/src/Connected.tsx
@@ -11,9 +11,12 @@ import {
 } from '@fuels/react';
 
 import { DEVNET_NETWORK_URL, TESTNET_NETWORK_URL, bn } from 'fuels';
+import { useState } from 'react';
 import './App.css';
 
 export function Connected() {
+  const [loading, setLoading] = useState(false);
+
   const { fuel } = useFuel();
   const { disconnect } = useDisconnect();
   const { wallet } = useWallet();
@@ -60,6 +63,7 @@ export function Connected() {
         <button
           type="button"
           onClick={async () => {
+            setLoading(true);
             const txn = await wallet?.createTransfer(
               '0xed73857a06ba2a706700e4e69e59f63a012ae6663a54309043e8fdc690bed926',
               bn(100),
@@ -74,10 +78,12 @@ export function Connected() {
               console.log(result);
             } catch (e) {
               console.error(e);
+            } finally {
+              setLoading(false);
             }
           }}
         >
-          Send transaction with default fees
+          {loading ? 'Loading...' : 'Send transaction with default fees'}
         </button>
       </div>
 

diff --git a/packages/app/src/systems/CRX/background/services/BackgroundService.ts b/packages/app/src/systems/CRX/background/services/BackgroundService.ts
@@ -43,6 +43,7 @@ export class BackgroundService {
     'accounts',
     'connect',
     'network',
+    'networks',
     'disconnect',
     'signMessage',
     'sendTransaction',
@@ -302,13 +303,22 @@ export class BackgroundService {
       );
     }
 
+    const { address, provider, transaction } = input;
+
     const popupService = await PopUpService.open(
       origin,
       Pages.requestTransaction(),
       this.communicationProtocol
     );
+
+    // We need to forward bech32 addresses to the popup, regardless if we receive a b256 here
+    // our database is storing fuel addresses
+    const bech32Address = Address.fromDynamicInput(address).toString();
+
     const signedMessage = await popupService.sendTransaction({
-      ...input,
+      address: bech32Address,
+      provider,
+      transaction,
       origin,
       title,
       favIconUrl,

diff --git a/packages/app/src/systems/DApp/hooks/useTransactionRequest.tsx b/packages/app/src/systems/DApp/hooks/useTransactionRequest.tsx
@@ -29,9 +29,7 @@ const selectors = {
   errors(state: TransactionRequestState) {
     if (!state.context.errors) return {};
     const simulateTxErrors = state.context.errors?.simulateTxErrors;
-    const hasSimulateTxErrors = Boolean(
-      Object.keys(simulateTxErrors || {}).length
-    );
+    const hasSimulateTxErrors = Boolean(simulateTxErrors);
     const txApproveError = state.context.errors?.txApproveError;
     return { txApproveError, simulateTxErrors, hasSimulateTxErrors };
   },

diff --git a/packages/app/src/systems/Transaction/components/TxContent/TxContent.tsx b/packages/app/src/systems/Transaction/components/TxContent/TxContent.tsx
@@ -23,45 +23,15 @@ import {
 import { TxFeeOptions } from '../TxFeeOptions/TxFeeOptions';
 
 const ErrorHeader = ({ errors }: { errors?: GroupedErrors }) => {
-  const errorMessages = useMemo(() => {
-    const messages = [];
-    if (errors) {
-      if (errors.InsufficientInputAmount || errors.NotEnoughCoins) {
-        messages.push('Not enough funds');
-      }
-
-      // biome-ignore lint: will not be a large array
-      Object.keys(errors).forEach((key: string) => {
-        if (key === 'InsufficientInputAmount' || key === 'NotEnoughCoins') {
-          return;
-        }
-
-        let errorMessage = `${key}: `;
-        try {
-          errorMessage += JSON.stringify(errors[key]);
-        } catch (_) {
-          errorMessage += errors[key];
-        }
-        messages.push(errorMessage);
-      });
-    }
-
-    return messages;
-  }, [errors]);
-
   return (
     <Alert status="error" css={styles.alert} aria-label="Transaction Error">
-      <Alert.Description as="div">
-        {errorMessages.map((message) => (
-          <Box
-            key={message}
-            css={{
-              wordBreak: 'break-word',
-            }}
-          >
-            {message}
-          </Box>
-        ))}
+      <Alert.Description
+        as="div"
+        css={{
+          wordBreak: 'break-word',
+        }}
+      >
+        {errors}
       </Alert.Description>
     </Alert>
   );

diff --git a/packages/app/src/systems/Transaction/components/TxOperations/TxOperations.tsx b/packages/app/src/systems/Transaction/components/TxOperations/TxOperations.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@fuel-ui/react';
+import { Alert, Box } from '@fuel-ui/react';
 import type { AssetData } from '@fuel-wallet/types';
 import type { Operation, TransactionStatus } from 'fuels';
 import type { Maybe } from '~/systems/Core';
@@ -18,6 +18,16 @@ export function TxOperations({
   assets,
   isLoading,
 }: TxOperationsProps) {
+  if (operations?.length === 0) {
+    return (
+      <Alert status="error">
+        <Alert.Description>
+          No operations found in this transaction
+        </Alert.Description>
+      </Alert>
+    );
+  }
+
   return (
     <Box.Stack gap="$4">
       {operations?.map((operation, index) => (

diff --git a/packages/app/src/systems/Transaction/pages/TxApprove/TxApprove.test.tsx b/packages/app/src/systems/Transaction/pages/TxApprove/TxApprove.test.tsx
@@ -75,7 +75,7 @@ describe('TxApprove', () => {
       shouldShowTxSimulated: true,
       shouldShowTxExecuted: false,
       shouldShowActions: true,
-      simulateTxErrors: mockTxResult,
+      simulateTxErrors: 'Unknown error',
       txSummarySimulated: mockTxResult,
       approveStatus: jest.fn().mockReturnValue(TransactionStatus.success),
       handlers: {
@@ -168,15 +168,13 @@ describe('TxApprove', () => {
     setup(
       {
         errors: {
-          simulateTxErrors: {
-            InsufficientInputAmount: true,
-          },
+          simulateTxErrors: 'Insufficient Input Amount',
         },
       },
       {},
       { status: TxRequestStatus.failed, result: true }
     );
-    expect(screen.getByText('Not enough funds')).toBeDefined();
+    expect(screen.getByText('Insufficient Input Amount')).toBeDefined();
   });
 
   it('does not show the approve button show actions is false', () => {

diff --git a/packages/app/src/systems/Transaction/services/transaction.tsx b/packages/app/src/systems/Transaction/services/transaction.tsx
@@ -4,6 +4,8 @@ import type { TransactionRequest, WalletLocked } from 'fuels';
 import {
   Address,
   type BN,
+  ErrorCode,
+  FuelError,
   TransactionResponse,
   TransactionStatus,
   assembleTransactionSummary,
@@ -19,7 +21,7 @@ import { createProvider } from '@fuel-wallet/connections';
 import { AccountService } from '~/systems/Account/services/account';
 import { NetworkService } from '~/systems/Network/services/network';
 import type { Transaction } from '../types';
-import { getAbiMap, getGroupedErrors } from '../utils';
+import { type GroupedErrors, getAbiMap, getErrorMessage } from '../utils';
 import { getCurrentTips } from '../utils/fee';
 
 export type TxInputs = {
@@ -206,16 +208,11 @@ export class TxService {
         minGasLimit: customFee?.gasUsed,
         txSummary: {
           ...txSummary,
-          // if customFee was chosen, we override the txSummary fee with the customFee
           fee: feeAdaptedToSdkDiff,
           gasUsed: txSummary.gasUsed,
-          // fee: customFee?.txCost?.maxFee || feeAdaptedToSdkDiff,
-          // gasUsed: customFee?.txCost?.gasUsed || txSummary.gasUsed,
         },
       };
-
-      // biome-ignore lint/suspicious/noExplicitAny: allow any
-    } catch (e: any) {
+    } catch (e) {
       const { gasPerByte, gasPriceFactor, gasCosts, maxGasPerTx } =
         provider.getGasConfig();
       const consensusParameters = provider.getChain().consensusParameters;
@@ -228,9 +225,8 @@ export class TxService {
         inputs: transaction.inputs,
       });
 
-      const errorsToParse =
-        e.name === 'FuelError' ? [{ message: e.message }] : e.response?.errors;
-      const simulateTxErrors = getGroupedErrors(errorsToParse);
+      const simulateTxErrors: GroupedErrors =
+        e instanceof FuelError ? getErrorMessage(e) : 'Unknown error';
 
       const gasPrice = await provider.getLatestGasPrice();
       const baseAssetId = provider.getBaseAssetId();
@@ -251,9 +247,14 @@ export class TxService {
       txSummary.isStatusFailure = true;
       txSummary.status = TransactionStatus.failure;
 
+      // Fallback to the values from the transactionRequest
+      if ('gasLimit' in transactionRequest) {
+        txSummary.gasUsed = transactionRequest.gasLimit;
+      }
+
       return {
-        baseFee: undefined,
-        minGasLimit: undefined,
+        baseFee: txSummary.fee.add(1),
+        minGasLimit: txSummary.gasUsed,
         txSummary,
         simulateTxErrors,
       };
@@ -361,16 +362,10 @@ export class TxService {
       } catch (e) {
         attempts += 1;
 
-        // @TODO: Waiting to match with FuelError type and ErrorCode enum from "fuels"
-        // These types are not exported from "fuels" package, but they exists in the "@fuels-ts/errors"
-        if (
-          e instanceof Error &&
-          'toObject' in e &&
-          typeof e.toObject === 'function'
-        ) {
-          const error: { code: string } = e.toObject();
+        if (e instanceof FuelError) {
+          const error = e.toObject();
 
-          if (error.code === 'gas-limit-too-low') {
+          if (error.code === ErrorCode.GAS_LIMIT_TOO_LOW) {
             throw e;
           }
         }
@@ -386,7 +381,7 @@ export class TxService {
     };
   }
 
-  static async computeCustomFee({
+  private static async computeCustomFee({
     wallet,
     transactionRequest,
   }: TxInputs['computeCustomFee']) {
@@ -399,7 +394,10 @@ export class TxService {
 
     // funding the transaction with the required quantities (the maxFee might have changed)
     await wallet.fund(transactionRequest, {
-      ...txCost,
+      estimatedPredicates: txCost.estimatedPredicates,
+      addedSignatures: txCost.addedSignatures,
+      gasPrice: txCost.gasPrice,
+      updateMaxFee: txCost.updateMaxFee,
       requiredQuantities: [],
     });