feat: add an option to send custom gas limit when making transfers

.changeset/young-jokes-dream.md

@@ -0,0 +1,7 @@
+---
+"@fuel-wallet/connections": minor
+"@fuel-wallet/types": minor
+"fuels-wallet": minor
+---
+
+Add `Gas Limit` input to customize transaction fees when sending a transfer

fuel-toolchain.toml

@@ -2,5 +2,5 @@
 channel = "latest-2023-11-30"
 
 [components]
-fuel-core = "0.24.3"
-forc = "0.56.0"
+fuel-core = "0.26.0"
+forc = "0.59.0"

packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx

@@ -25,7 +25,7 @@ export function SendSelect({
   balanceAssets,
   balanceAssetSelected,
   baseFee = bn(0),
-  baseGasLimit = bn(0),
+  minGasLimit = bn(0),
   tip,
   regularTip,
   fastTip,
@@ -62,10 +62,9 @@ export function SendSelect({
       // Adding 2 magical units to match the fake unit that is added on TS SDK (.add(1))
       // and then removed on the "transaction" service (.sub(1))
       const maxFee = baseFee.add(tip).add(2);
+      if (maxFee.gt(balanceAssetSelected)) return;
 
-      form.setValue('amount', balanceAssetSelected.sub(maxFee), {
-        shouldValidate: true,
-      });
+      form.setValue('amount', balanceAssetSelected.sub(maxFee));
     }
   }, [watchMax, balanceAssetSelected, baseFee, tip, form.setValue]);
 
@@ -164,7 +163,7 @@ export function SendSelect({
               </Text>
               <TxFeeOptions
                 baseFee={baseFee}
-                baseGasLimit={baseGasLimit}
+                minGasLimit={minGasLimit}
                 regularTip={regularTip}
                 fastTip={fastTip}
               />

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

@@ -23,11 +23,11 @@ export enum SendStatus {
 }
 
 const selectors = {
-  baseGasLimit(state: SendMachineState) {
-    return state.context.baseGasLimit;
+  minGasLimit(state: SendMachineState) {
+    return state.context.minGasLimit;
   },
-  maxGasPerTx(state: SendMachineState) {
-    return state.context.maxGasPerTx;
+  maxGasLimit(state: SendMachineState) {
+    return state.context.maxGasLimit;
   },
   baseFee(state: SendMachineState) {
     return state.context.baseFee;
@@ -42,6 +42,10 @@ const selectors = {
     return state.matches('readyToSend');
   },
   error(state: SendMachineState) {
+    if (state.context.error?.includes('Gas limit')) {
+      return '';
+    }
+
     return state.context.error;
   },
   status(txStatus?: TxRequestStatus) {
@@ -60,13 +64,16 @@ const selectors = {
   },
 };
 
+type BalanceAsset = {
+  assetId: string;
+  amount?: BNInput;
+};
+
 type SchemaOptions = {
-  accountBalanceAssets: Array<{
-    assetId: string;
-    amount?: BNInput;
-  }>;
+  accountBalanceAssets: BalanceAsset[];
   baseFee: BN | undefined;
-  maxGasPerTx: BN | undefined;
+  minGasLimit: BN | undefined;
+  maxGasLimit: BN | undefined;
 };
 
 const schema = yup
@@ -98,7 +105,7 @@ const schema = yup
           return true;
         }
 
-        const totalAmount = value.add(baseFee.add(fees.tip));
+        const totalAmount = value.add(baseFee.add(fees.tip.amount));
         return totalAmount.lte(bn(balanceAssetSelected.amount));
       })
       .required('Amount is required'),
@@ -114,41 +121,63 @@ const schema = yup
       }),
     fees: yup
       .object({
-        tip: yup
-          .mixed<BN>()
-          .test(
-            'integer',
-            'Tip must be greater than or equal to 0',
-            (value) => {
-              return value?.gte(0);
-            }
-          )
-          .required('Tip is required'),
-        gasLimit: yup
-          .mixed<BN>()
-          .test(
-            'integer',
-            'Gas limit must be greater or equal to 0',
-            (value) => {
-              return value?.gte(0);
-            }
-          )
-          .test({
-            name: 'max',
-            test: (value, ctx) => {
-              const { maxGasPerTx } = ctx.options.context as SchemaOptions;
-              if (!maxGasPerTx) return false;
-
-              if (value?.lte(maxGasPerTx)) {
-                return true;
+        tip: yup.object({
+          amount: yup
+            .mixed<BN>()
+            .test(
+              'integer',
+              'Tip must be greater than or equal to 0',
+              (value) => {
+                return value?.gte(0);
               }
-
-              return ctx.createError({
-                message: `Gas limit must be less or equal to ${maxGasPerTx.toString()}`,
-              });
-            },
-          })
-          .required('Gas limit is required'),
+            )
+            .required('Tip is required'),
+          text: yup.string().required('Tip is required'),
+        }),
+        gasLimit: yup.object({
+          amount: yup
+            .mixed<BN>()
+            .test(
+              'integer',
+              'Gas limit must be greater or equal to 0',
+              (value) => {
+                return value?.gte(0);
+              }
+            )
+            .test({
+              name: 'min',
+              test: (value, ctx) => {
+                const { minGasLimit } = ctx.options.context as SchemaOptions;
+
+                if (!minGasLimit || value?.gte(minGasLimit)) {
+                  return true;
+                }
+
+                return ctx.createError({
+                  path: 'fees.gasLimit',
+                  message: `Gas limit '${value?.toString()}' is lower than the required: '${minGasLimit.toString()}'.`,
+                });
+              },
+            })
+            .test({
+              name: 'max',
+              test: (value, ctx) => {
+                const { maxGasLimit } = ctx.options.context as SchemaOptions;
+                if (!maxGasLimit) return false;
+
+                if (value?.lte(maxGasLimit)) {
+                  return true;
+                }
+
+                return ctx.createError({
+                  path: 'fees.gasLimit',
+                  message: `Gas limit '${value?.toString()}' is greater than the allowed: '${maxGasLimit.toString()}'.`,
+                });
+              },
+            })
+            .required('Gas limit is required'),
+          text: yup.string().required('Gas limit is required'),
+        }),
       })
       .required('Fees are required'),
   })
@@ -159,8 +188,14 @@ export type SendFormValues = {
   address: string;
   amount: BN;
   fees: {
-    tip: BN;
-    gasLimit: BN;
+    tip: {
+      amount: BN;
+      text: string;
+    };
+    gasLimit: {
+      amount: BN;
+      text: string;
+    };
   };
 };
 
@@ -169,8 +204,14 @@ const DEFAULT_VALUES: SendFormValues = {
   amount: bn(0),
   address: '',
   fees: {
-    tip: bn(0),
-    gasLimit: bn(0),
+    tip: {
+      amount: bn(0),
+      text: '0',
+    },
+    gasLimit: {
+      amount: bn(0),
+      text: '0',
+    },
   },
 };
 
@@ -203,42 +244,27 @@ export function useSend() {
   );
 
   const baseFee = useSelector(service, selectors.baseFee);
-  const baseGasLimit = useSelector(service, selectors.baseGasLimit);
-  const maxGasPerTx = useSelector(service, selectors.maxGasPerTx);
+  const minGasLimit = useSelector(service, selectors.minGasLimit);
+  const maxGasLimit = useSelector(service, selectors.maxGasLimit);
   const errorMessage = useSelector(service, selectors.error);
 
   const form = useForm<SendFormValues>({
     resolver: yupResolver(schema),
-    reValidateMode: 'onChange',
-    mode: 'onChange',
+    mode: 'onSubmit',
     defaultValues: DEFAULT_VALUES,
     context: {
       accountBalanceAssets,
       baseFee,
-      maxGasPerTx,
+      minGasLimit,
+      maxGasLimit,
     },
   });
 
   const tip = useWatch({
     control: form.control,
-    name: 'fees.tip',
+    name: 'fees.tip.amount',
   });
 
-  const gasLimit = useWatch({
-    control: form.control,
-    name: 'fees.gasLimit',
-  });
-
-  const { isValid } = form.formState;
-
-  const amount = useWatch({
-    control: form.control,
-    name: 'amount',
-  });
-  const address = useWatch({
-    control: form.control,
-    name: 'address',
-  });
   const assetIdSelected = useWatch({
     control: form.control,
     name: 'asset',
@@ -286,23 +312,41 @@ export function useSend() {
   }
 
   useEffect(() => {
-    if (isValid && address && assetIdSelected) {
-      const input: TxInputs['createTransfer'] = {
-        to: address,
-        assetId: assetIdSelected,
-        amount,
-        tip,
-        gasLimit,
-      };
-
-      service.send('SET_INPUT', { input });
-    }
-  }, [isValid, service.send, address, assetIdSelected, amount, tip, gasLimit]);
+    const { unsubscribe } = form.watch(() => {
+      const { address, asset, amount } = form.getValues();
+      if (!address || !asset || amount.eq(0)) {
+        return;
+      }
+
+      form.handleSubmit((data) => {
+        const { address, asset, amount, fees } = data;
+
+        const input: TxInputs['createTransfer'] = {
+          to: address,
+          assetId: asset,
+          amount,
+          tip: fees.tip.amount,
+          gasLimit: fees.gasLimit.amount,
+        };
+
+        service.send('SET_INPUT', { input });
+        form.trigger('amount');
+      })();
+    });
+
+    return () => unsubscribe();
+  }, [
+    form.watch,
+    form.getValues,
+    form.trigger,
+    form.handleSubmit,
+    service.send,
+  ]);
 
   return {
     form,
     baseFee,
-    baseGasLimit,
+    minGasLimit,
     tip,
     regularTip,
     fastTip,

packages/app/src/systems/Send/machines/sendMachine.ts

@@ -20,10 +20,10 @@ export type MachineContext = {
   providerUrl?: string;
   address?: string;
   baseFee?: BN;
-  baseGasLimit?: BN;
   regularTip?: BN;
   fastTip?: BN;
-  maxGasPerTx?: BN;
+  minGasLimit?: BN;
+  maxGasLimit?: BN;
   input?: TxInputs['createTransfer'];
   error?: string;
 };
@@ -34,12 +34,12 @@ type EstimateDefaultTipsReturn = {
 };
 
 type EstimateGasLimitReturn = {
-  baseGasLimit: BN;
-  maxGasPerTx: BN;
+  maxGasLimit: BN;
 };
 
 type CreateTransactionReturn = {
   baseFee?: BN;
+  minGasLimit?: BN;
   transactionRequest?: TransactionRequest;
   providerUrl: string;
   address: string;
@@ -168,19 +168,22 @@ export const sendMachine = createMachine(
       assignDefaultTips: assign((_ctx, ev) => ({
         regularTip: ev.data.regularTip,
         fastTip: ev.data.fastTip,
+        error: undefined,
       })),
       assignGasLimit: assign((_ctx, ev) => ({
-        baseGasLimit: ev.data.baseGasLimit,
-        maxGasPerTx: ev.data.maxGasPerTx,
+        maxGasLimit: ev.data.maxGasLimit,
+        error: undefined,
       })),
       assignInput: assign((_ctx, ev) => ({
         input: ev.input,
       })),
-      assignTransactionData: assign((_ctx, ev) => ({
+      assignTransactionData: assign((ctx, ev) => ({
         transactionRequest: ev.data.transactionRequest,
         providerUrl: ev.data.providerUrl,
         address: ev.data.address,
-        baseFee: ev.data.baseFee,
+        baseFee: ev.data.baseFee ?? ctx.baseFee,
+        minGasLimit: ev.data.minGasLimit ?? ctx.minGasLimit,
+        error: undefined,
       })),
     },
     services: {