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

…1318)
FuelLabs · Jul 25, 2024 · a715ad6 · a715ad6
1 parent 7ac1fed
commit a715ad6
Show file tree

Hide file tree

Showing 13 changed files with 347 additions and 198 deletions.
diff --git a/.changeset/young-jokes-dream.md b/.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
diff --git a/fuel-toolchain.toml b/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"
diff --git a/package.json b/package.json
@@ -115,7 +115,9 @@
       "@adobe/css-tools@<4.3.2": ">=4.3.2",
       "@babel/traverse@<7.23.2": ">=7.23.2",
       "braces@<3.0.3": ">=3.0.3",
-      "ws": "8.17.1"
+      "ws@>=8.0.0 <8.17.1": ">=8.17.1",
+      "ws@>=7.0.0 <7.5.10": ">=7.5.10",
+      "ws@>=6.0.0 <6.2.3": ">=6.2.3"
     }
   }
 }
diff --git a/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx b/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx
@@ -1,12 +1,13 @@
 import { cssObj } from '@fuel-ui/css';
 import { Box, Form, Input, Text } from '@fuel-ui/react';
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { type BN, DECIMAL_FUEL, bn } from 'fuels';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { AssetSelect } from '~/systems/Asset';
 import {
   ControlledField,
   Layout,
+  MotionFlex,
   MotionStack,
   animations,
 } from '~/systems/Core';
@@ -25,7 +26,7 @@ export function SendSelect({
   balanceAssets,
   balanceAssetSelected,
   baseFee = bn(0),
-  baseGasLimit = bn(0),
+  minGasLimit = bn(0),
   tip,
   regularTip,
   fastTip,
@@ -62,16 +63,15 @@ 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]);
 
   return (
     <MotionContent {...animations.slideInTop()}>
-      <Box.Stack gap="$4">
+      <Box.Stack gap="$3">
         <Box.Flex css={styles.row}>
           <Text as="span" css={styles.title}>
             Asset
@@ -146,9 +146,11 @@ export function SendSelect({
               }}
             />
             {(errorMessage || amountFieldState.error) && (
-              <Form.ErrorMessage aria-label="Error message">
-                {errorMessage || amountFieldState.error?.message}
-              </Form.ErrorMessage>
+              <MotionFlex {...animations.fadeIn()} key="error">
+                <Form.ErrorMessage aria-label="Error message">
+                  {errorMessage || amountFieldState.error?.message}
+                </Form.ErrorMessage>
+              </MotionFlex>
             )}
           </Form.Control>
         </Box.Stack>
@@ -164,7 +166,7 @@ export function SendSelect({
               </Text>
               <TxFeeOptions
                 baseFee={baseFee}
-                baseGasLimit={baseGasLimit}
+                minGasLimit={minGasLimit}
                 regularTip={regularTip}
                 fastTip={fastTip}
               />