[TTS]: Improve SignTransactionSheet CTA timing

src/hooks/useHasEnoughBalance.ts

@@ -20,11 +20,10 @@ type BalanceCheckParams = {
 };
 
 export const useHasEnoughBalance = ({ isMessageRequest, walletBalance, chainId, selectedGasFee, req }: BalanceCheckParams) => {
-  const [isBalanceEnough, setIsBalanceEnough] = useState<boolean>();
+  const [isBalanceEnough, setIsBalanceEnough] = useState<boolean>(isMessageRequest);
 
   useEffect(() => {
     if (isMessageRequest) {
-      setIsBalanceEnough(true);
       return;
     }
 

src/hooks/useSubmitTransaction.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { Dispatch, SetStateAction, useCallback } from 'react';
 import { performanceTracking, TimeToSignOperation } from '@/state/performance/performance';
 import Routes from '@/navigation/routesNames';
 import { useNavigation } from '@/navigation';
@@ -7,17 +7,22 @@ import { SCREEN_FOR_REQUEST_SOURCE } from '@/components/Transactions/constants';
 import { logger, RainbowError } from '@/logger';
 
 export const useTransactionSubmission = ({
+  isMessageRequest,
   isBalanceEnough,
   accountInfo,
+  isAuthorizing,
+  setIsAuthorizing,
   onConfirm,
   source,
 }: {
+  isMessageRequest: boolean;
   isBalanceEnough: boolean | undefined;
   accountInfo: { isHardwareWallet: boolean };
+  isAuthorizing: boolean;
+  setIsAuthorizing: Dispatch<SetStateAction<boolean>>;
   onConfirm: () => Promise<void>;
   source: RequestSource;
 }) => {
-  const [isAuthorizing, setIsAuthorizing] = useState(false);
   const { navigate } = useNavigation();
 
   const onPressSend = useCallback(async () => {
@@ -30,26 +35,26 @@ export const useTransactionSubmission = ({
     } finally {
       setIsAuthorizing(false);
     }
-  }, [isAuthorizing, onConfirm]);
+  }, [isAuthorizing, onConfirm, setIsAuthorizing]);
 
   const submitFn = useCallback(
     () =>
       performanceTracking.getState().executeFn({
         fn: async () => {
-          if (!isBalanceEnough) {
-            navigate(Routes.ADD_CASH_SHEET);
-            return;
+          if (!isBalanceEnough && !isMessageRequest) {
+            return navigate(Routes.ADD_CASH_SHEET);
           }
+
           if (accountInfo.isHardwareWallet) {
-            navigate(Routes.HARDWARE_WALLET_TX_NAVIGATOR, { submit: onPressSend });
-          } else {
-            await onPressSend();
+            return navigate(Routes.HARDWARE_WALLET_TX_NAVIGATOR, { submit: onPressSend });
           }
+
+          return onPressSend();
         },
         operation: TimeToSignOperation.CallToAction,
         screen: SCREEN_FOR_REQUEST_SOURCE[source],
       })(),
-    [accountInfo.isHardwareWallet, isBalanceEnough, navigate, onPressSend, source]
+    [accountInfo.isHardwareWallet, isBalanceEnough, isMessageRequest, navigate, onPressSend, source]
   );
 
   return { submitFn, isAuthorizing };

src/languages/en_US.json

@@ -2908,6 +2908,7 @@
         "buttons": {
           "cancel": "Cancel",
           "confirm": "􀎽 Confirm",
+          "confirming": "Confirming",
           "get_native_token": "Get %{symbol}",
           "buy_native_token": "Buy %{symbol}"
         },

src/screens/SignTransactionSheet.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { AnimatePresence, MotiView } from 'moti';
 import * as i18n from '@/languages';
 import { Image, InteractionManager, PixelRatio, ScrollView } from 'react-native';
@@ -109,6 +109,8 @@ export const SignTransactionSheet = () => {
   const provider = getProvider({ chainId });
   const nativeAsset = ethereumUtils.getNetworkNativeAsset({ chainId });
 
+  const [isAuthorizing, setIsAuthorizing] = useState(false);
+
   const isMessageRequest = isMessageDisplayType(transactionDetails.payload.method);
   const isPersonalSignRequest = isPersonalSign(transactionDetails.payload.method);
 
@@ -550,18 +552,58 @@ export const SignTransactionSheet = () => {
     handleConfirmTransaction,
   });
 
+  const canPressConfirm = useMemo(() => {
+    if (isMessageRequest) {
+      return !isAuthorizing; // Only check authorization state for message requests
+    }
+
+    return !isAuthorizing && !!walletBalance?.isLoaded && !!chainId && !!selectedGasFee?.gasFee?.estimatedFee;
+  }, [isAuthorizing, isMessageRequest, walletBalance?.isLoaded, chainId, selectedGasFee?.gasFee?.estimatedFee]);
+
   const { submitFn } = useTransactionSubmission({
+    isMessageRequest,
     isBalanceEnough,
     accountInfo,
+    isAuthorizing,
+    setIsAuthorizing,
     onConfirm,
     source,
   });
 
+  const primaryActionButtonLabel = useMemo(() => {
+    if (isAuthorizing) {
+      return i18n.t(i18n.l.walletconnect.simulation.buttons.confirming);
+    }
+
+    if (!txSimulationLoading && isBalanceEnough === false) {
+      return i18n.t(i18n.l.walletconnect.simulation.buttons.buy_native_token, { symbol: walletBalance?.symbol });
+    }
+
+    return i18n.t(i18n.l.walletconnect.simulation.buttons.confirm);
+  }, [txSimulationLoading, isBalanceEnough, isAuthorizing, walletBalance]);
+
+  const primaryActionButtonColor = useMemo(() => {
+    let color = colors.appleBlue;
+
+    if (
+      simulationResult?.simulationError ||
+      (simulationResult?.simulationScanResult && simulationResult.simulationScanResult !== TransactionScanResultType.Ok)
+    ) {
+      if (simulationResult?.simulationScanResult === TransactionScanResultType.Warning) {
+        color = colors.orange;
+      } else {
+        color = colors.red;
+      }
+    }
+
+    return colors.alpha(color, canPressConfirm ? 1 : 0.6);
+  }, [colors, simulationResult?.simulationError, simulationResult?.simulationScanResult, canPressConfirm]);
+
   const onPressCancel = useCallback(() => onCancel(), [onCancel]);
 
   const expandedCardBottomInset = EXPANDED_CARD_BOTTOM_INSET + (isMessageRequest ? 0 : GAS_BUTTON_SPACE);
 
-  const canPressConfirm = isMessageRequest || (!!walletBalance?.isLoaded && !!chainId && !!selectedGasFee?.gasFee?.estimatedFee);
+  simulationResult?.simulationError && console.log(JSON.stringify(simulationResult?.simulationError, null, 2));
 
   return (
     <PanGestureHandler enabled={IS_IOS}>
@@ -732,24 +774,13 @@ export const SignTransactionSheet = () => {
                     weight="bold"
                   />
                   <SheetActionButton
-                    label={
-                      !txSimulationLoading && isBalanceEnough === false
-                        ? i18n.t(i18n.l.walletconnect.simulation.buttons.buy_native_token, { symbol: walletBalance?.symbol })
-                        : i18n.t(i18n.l.walletconnect.simulation.buttons.confirm)
-                    }
+                    label={primaryActionButtonLabel}
                     newShadows
                     onPress={submitFn}
                     disabled={!canPressConfirm}
                     size="big"
                     weight="heavy"
-                    color={
-                      simulationResult?.simulationError ||
-                      (simulationResult?.simulationScanResult && simulationResult?.simulationScanResult !== TransactionScanResultType.Ok)
-                        ? simulationResult?.simulationScanResult === TransactionScanResultType.Warning
-                          ? 'orange'
-                          : colors.red
-                        : undefined
-                    }
+                    color={primaryActionButtonColor}
                   />
                 </Columns>
               </Box>