fix: add a gas limit error msg format (#1480)

- Closes #1357

---

| 📷  Demo |
| --- |
| <img width="322" alt="Screenshot 2024-09-17 at 12 17 26"
src="https://github.com/user-attachments/assets/40f5ee7a-87a1-43e2-9aae-05215dc954c5">
|

.changeset/fair-dragons-impress.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Improve gas error message by adding number formatting for better readability.

packages/app/package.json

@@ -102,7 +102,7 @@
     "ts-jest-mock-import-meta": "1.1.0",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "5.2.2",
-    "vite": "4.5.3",
+    "vite": "4.5.5",
     "vite-plugin-clean": "1.0.0",
     "vite-plugin-static-copy": "0.17.0",
     "vite-tsconfig-paths": "4.2.1",

packages/app/src/systems/DApp/pages/TransactionRequest/TransactionRequest.FormProvider.tsx

@@ -3,6 +3,7 @@ import type { BN } from 'fuels';
 import type { ReactNode } from 'react';
 import { FormProvider as Provider, useForm } from 'react-hook-form';
 import * as yup from 'yup';
+import { formatGasLimit } from '~/systems/Transaction';
 
 export type TransactionRequestFormData = {
   fees: {
@@ -58,7 +59,9 @@ const schema = yup
 
                 return ctx.createError({
                   path: 'fees.gasLimit',
-                  message: `Gas limit must be greater than or equal to '${minGasLimit.toString()}'.`,
+                  message: `Gas limit must be greater than or equal to ${formatGasLimit(
+                    minGasLimit
+                  )}.`,
                 });
               },
             })
@@ -74,7 +77,9 @@ const schema = yup
 
                 return ctx.createError({
                   path: 'fees.gasLimit',
-                  message: `Gas limit must be lower than or equal to '${maxGasLimit.toString()}'.`,
+                  message: `Gas limit must be lower than or equal to ${formatGasLimit(
+                    maxGasLimit
+                  )}.`,
                 });
               },
             })

packages/app/src/systems/Send/hooks/useSend.tsx

@@ -1,7 +1,7 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useInterpret, useSelector } from '@xstate/react';
 import type { BN, BNInput } from 'fuels';
-import { DEFAULT_DECIMAL_UNITS, bn, isB256, isBech32 } from 'fuels';
+import { bn, isB256, isBech32 } from 'fuels';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
@@ -13,6 +13,7 @@ import { useTransactionRequest } from '~/systems/DApp';
 import { TxRequestStatus } from '~/systems/DApp/machines/transactionRequestMachine';
 import type { TxInputs } from '~/systems/Transaction/services';
 
+import { formatGasLimit } from '~/systems/Transaction';
 import { sendMachine } from '../machines/sendMachine';
 import type { SendMachineState } from '../machines/sendMachine';
 
@@ -171,7 +172,9 @@ const schema = yup
 
                 return ctx.createError({
                   path: 'fees.gasLimit',
-                  message: `Gas limit must be greater than or equal to '${minGasLimit.toString()}'.`,
+                  message: `Gas limit must be greater than or equal to ${formatGasLimit(
+                    minGasLimit
+                  )}.`,
                 });
               },
             })
@@ -187,7 +190,9 @@ const schema = yup
 
                 return ctx.createError({
                   path: 'fees.gasLimit',
-                  message: `Gas limit must be lower than or equal to '${maxGasLimit.toString()}'.`,
+                  message: `Gas limit must be lower than or equal to ${formatGasLimit(
+                    maxGasLimit
+                  )}.`,
                 });
               },
             })

packages/app/src/systems/Transaction/utils/gasLimit.ts

@@ -0,0 +1,8 @@
+import type { BN } from 'fuels';
+
+export const formatGasLimit = (value: BN) => {
+  const hex = value.toHex();
+  const gasLimit = BigInt(hex);
+
+  return gasLimit.toLocaleString('en-US');
+};

packages/app/src/systems/Transaction/utils/index.tsx

@@ -1,6 +1,7 @@
 export * from './abi';
 export * from './color';
 export * from './error';
+export * from './gasLimit';
 export * from './icon';
 export * from './text';
 export * from './date';

packages/docs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

packages/docs/package.json

@@ -17,8 +17,8 @@
     "@fuel-ui/react": "0.23.3",
     "@fuels/connectors": "0.28.0",
     "@fuels/react": "0.28.0",
-    "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "14.2.3",
+    "@mdx-js/react": "2.3.0",
+    "@next/mdx": "14.2.12",
     "@tanstack/react-query": "5.28.4",
     "acorn": "^8.10.0",
     "acorn-loose": "^8.3.0",
@@ -31,15 +31,15 @@
     "gray-matter": "^4.0.3",
     "hast-util-heading-rank": "^3.0.0",
     "hast-util-to-string": "^3.0.0",
-    "next": "14.2.3",
+    "next": "14.2.12",
     "next-mdx-remote": "4.4.1",
     "plyr-react": "^5.3.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-syntax-highlighter": "^15.5.0",
     "remark": "14.0.3",
     "remark-gfm": "3.0.1",
-    "remark-slug": "^7.0.1",
+    "remark-slug": "7.0.1",
     "sharp": "^0.32.6",
     "strip-indent": "^4.0.0",
     "unist-util-visit": "^5.0.0",