fix: Send screen more stable (#1783)

- Closes #1770 - Closes FE-1300
FuelLabs · Jan 20, 2025 · 5680b65 · 5680b65
1 parent 5399a35
commit 5680b65
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 28 deletions.
diff --git a/.changeset/two-starfishes-double.md b/.changeset/two-starfishes-double.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+fix: make send screen flows more stable by relying less on form changes
diff --git a/packages/app/src/systems/Core/components/InputAmount/InputAmount.tsx b/packages/app/src/systems/Core/components/InputAmount/InputAmount.tsx
@@ -51,12 +51,21 @@ export function createAmount(text: string, units = 0) {
 
   let amount: BN | undefined;
   if (isZeroUnits) {
-    const textWithoutDecimals = textAmountFixed
-      .replaceAll(',', '')
-      .split('.')[0];
-    amount = bn(textWithoutDecimals);
+    const integerPart = textAmountFixed.replaceAll(',', '').split('.')?.[0];
+    amount = bn(integerPart);
   } else {
-    amount = bn.parseUnits(textAmountFixed.replaceAll(',', ''), units);
+    // get value after fraction, remove extra decimals
+    const textWithoutComma = textAmountFixed.replaceAll(',', '');
+    const textIntegerPart = textWithoutComma.split('.')[0];
+    const fractionWithoutExtraDecimals = textWithoutComma
+      .split('.')?.[1]
+      ?.slice(0, units);
+    const textWithoutExtraDecimals = textIntegerPart
+      ? `${textIntegerPart}${
+          fractionWithoutExtraDecimals ? `.${fractionWithoutExtraDecimals}` : ''
+        }`
+      : '';
+    amount = bn.parseUnits(textWithoutExtraDecimals, units);
   }
 
   return {

diff --git a/packages/app/src/systems/Core/components/InputAmount/InputAmount.utils.ts b/packages/app/src/systems/Core/components/InputAmount/InputAmount.utils.ts
@@ -1,7 +1,6 @@
 import type { InputNumberProps } from '@fuel-ui/react';
 
 export const isAmountAllowed: InputNumberProps['isAllowed'] = ({ value }) => {
-  console.log(value);
   // Allow to clear the input
   if (!value) {
     return true;

diff --git a/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx b/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx
@@ -33,6 +33,7 @@ export function SendSelect({
   errorMessage,
   warningMessage,
   provider,
+  handlers,
 }: SendSelectProps) {
   const [watchMax, setWatchMax] = useState(false);
   const isAmountFocused = useRef<boolean>(false);
@@ -74,7 +75,9 @@ export function SendSelect({
       const maxFee = baseFee.add(tip).add(1);
       if (maxFee.gt(balanceAssetSelected)) return;
 
-      form.setValue('amount', balanceAssetSelected.sub(maxFee));
+      const newAmount = balanceAssetSelected.sub(maxFee);
+      form.setValue('amount', newAmount);
+      handlers.recalculateFromAmount(newAmount);
     }
   }, [
     watchMax,
@@ -167,6 +170,7 @@ export function SendSelect({
                   setWatchMax(true);
                 } else {
                   form.setValue('amount', balanceAssetSelected);
+                  handlers.recalculateFromAmount(balanceAssetSelected);
                 }
               }}
               inputProps={{
@@ -203,6 +207,7 @@ export function SendSelect({
                 gasLimit={gasLimit}
                 regularTip={regularTip}
                 fastTip={fastTip}
+                onRecalculate={handlers.recalculateFromTip}
               />
             </MotionStack>
           )}

diff --git a/packages/app/src/systems/Send/hooks/useSend.tsx b/packages/app/src/systems/Send/hooks/useSend.tsx
@@ -50,6 +50,9 @@ const selectors = {
 
     return state.context.error;
   },
+  input(state: SendMachineState) {
+    return state.context.input;
+  },
   status(txStatus?: TxRequestStatus) {
     return useCallback(
       (state: SendMachineState) => {
@@ -102,9 +105,10 @@ const schemaFactory = (provider?: Provider) =>
             return false;
           }
 
+          const baseAssetId = await provider?.getBaseAssetId();
+
           const isSendingBaseAssetId =
-            asset &&
-            provider?.getBaseAssetId().toLowerCase() === asset.toLowerCase();
+            asset && baseAssetId?.toLowerCase() === asset.toLowerCase();
           if (isSendingBaseAssetId) {
             // It means "baseFee" is being calculated
             if (!baseFee) {
@@ -141,7 +145,7 @@ const schemaFactory = (provider?: Provider) =>
             }
 
             const assetCached = await AssetsCache.getInstance().getAsset({
-              chainId: provider.getChainId(),
+              chainId: await provider.getChainId(),
               assetId: value,
               dbAssets: [],
               save: false,
@@ -345,6 +349,7 @@ export function useSend() {
   const sendStatusSelector = selectors.status(txRequest.txStatus);
   const sendStatus = useSelector(service, sendStatusSelector);
   const readyToSend = useSelector(service, selectors.readyToSend);
+  const input = useSelector(service, selectors.input);
 
   const balanceAssetSelected = useMemo<BN>(() => {
     const asset = account?.balances?.find(
@@ -374,9 +379,8 @@ export function useSend() {
   function tryAgain() {
     txRequest.handlers.tryAgain();
   }
-
   useEffect(() => {
-    const { unsubscribe } = form.watch(() => {
+    const { unsubscribe } = form.watch((_data, { name: _, type }) => {
       const { address, asset, amount } = form.getValues();
       if (address) {
         form.trigger('address');
@@ -385,6 +389,12 @@ export function useSend() {
         return;
       }
 
+      // skip the form trigger if the user is not directly changing the form.
+      // this is to avoid the form being used to control start of flows, other than user typing.
+      if (type !== 'change') {
+        return;
+      }
+
       form.handleSubmit((data) => {
         const { address, asset, amount, fees } = data;
 
@@ -410,6 +420,27 @@ export function useSend() {
     service.send,
   ]);
 
+  const recalculateFromTip = (tip: BN) => {
+    service.send('SET_INPUT', { input: { ...input, tip } });
+    form.trigger('amount');
+  };
+
+  const recalculateFromAmount = (amount: BN) => {
+    let previousInput = input;
+    if (!input) {
+      const { address, asset, fees } = form.getValues();
+      previousInput = {
+        to: address,
+        assetId: asset,
+        amount,
+        tip: fees.tip.amount,
+        gasLimit: fees.gasLimit.amount,
+      };
+    }
+    service.send('SET_INPUT', { input: { ...previousInput, amount } });
+    form.trigger('amount');
+  };
+
   return {
     form,
     baseFee,
@@ -431,6 +462,8 @@ export function useSend() {
       submit,
       goHome,
       tryAgain,
+      recalculateFromTip,
+      recalculateFromAmount,
     },
   };
 }

diff --git a/packages/app/src/systems/Send/machines/sendMachine.ts b/packages/app/src/systems/Send/machines/sendMachine.ts
@@ -131,7 +131,7 @@ export const sendMachine = createMachine(
             },
             {
               actions: ['assignTransactionData'],
-              target: 'waitingToAllowSending',
+              target: 'readyToSend',
             },
           ],
         },
@@ -149,20 +149,6 @@ export const sendMachine = createMachine(
           },
         },
       },
-      // @TODO: "waitingToAllowSending" only exists to allow the useEffect on useSend to trigger, avoiding an error where the review button was enabled and then in loading state right after
-      waitingToAllowSending: {
-        on: {
-          SET_INPUT: {
-            actions: ['assignInput'],
-            target: 'changingInput',
-          },
-        },
-        after: {
-          500: {
-            target: 'readyToSend',
-          },
-        },
-      },
       readyToSend: {
         on: {
           CONFIRM: { actions: ['callTransactionRequest'] },

diff --git a/packages/app/src/systems/Send/pages/SendPage/SendPage.tsx b/packages/app/src/systems/Send/pages/SendPage/SendPage.tsx
@@ -34,6 +34,8 @@ export function SendPage() {
     setWarningMessage(undefined);
   }, [address]);
 
+  const hasFormErrors = Object.keys(form.formState.errors).length > 0;
+
   return (
     <FormProvider {...form}>
       <form
@@ -58,7 +60,7 @@ export function SendPage() {
               <Button
                 type="submit"
                 intent="primary"
-                isDisabled={!readyToSend || !form.formState.isValid}
+                isDisabled={!readyToSend || hasFormErrors}
                 isLoading={status('loading') || status('loadingTx')}
               >
                 Review

diff --git a/packages/app/src/systems/Transaction/components/TxFeeOptions/TxFeeOptions.tsx b/packages/app/src/systems/Transaction/components/TxFeeOptions/TxFeeOptions.tsx
@@ -20,6 +20,7 @@ type TxFeeOptionsProps = {
   gasLimit: BN;
   regularTip: BN;
   fastTip: BN;
+  onRecalculate?: (tip: BN) => void;
 };
 
 export const TxFeeOptions = ({
@@ -28,6 +29,7 @@ export const TxFeeOptions = ({
   gasLimit: gasLimitInput,
   regularTip,
   fastTip,
+  onRecalculate,
 }: TxFeeOptionsProps) => {
   const { control, setValue, getValues } = useFormContext<SendFormValues>();
   const [isAdvanced, setIsAdvanced] = useState(initialAdvanced);
@@ -181,6 +183,7 @@ export const TxFeeOptions = ({
                     amount: option.tip,
                     text: formatTip(option.tip),
                   });
+                  onRecalculate?.(option.tip);
                 }}
               />
             ))}