Fix SignTransactionSheet not disabling button on authorization

src/components/DappBrowser/BrowserTab.tsx

@@ -248,6 +248,7 @@ const FreezableWebViewComponent = ({
         }
         // eslint-disable-next-line no-empty
       } catch (e) {
+        console.log(JSON.stringify(e, null, 2));
         console.error('Error parsing message', e);
       }
     },

src/hooks/useConfirmTransaction.ts

@@ -16,6 +16,7 @@ export const useConfirmTransaction = ({
   handleConfirmTransaction,
 }: UseConfirmTransactionProps) => {
   const onConfirm = useCallback(async () => {
+    console.log('onConfirm: ', isMessageRequest, isBalanceEnough, isValidGas);
     if (isMessageRequest) {
       return handleSignMessage();
     }

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';
@@ -9,15 +9,18 @@ import { logger, RainbowError } from '@/logger';
 export const useTransactionSubmission = ({
   isBalanceEnough,
   accountInfo,
+  isAuthorizing,
+  setIsAuthorizing,
   onConfirm,
   source,
 }: {
   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,19 +33,22 @@ export const useTransactionSubmission = ({
     } finally {
       setIsAuthorizing(false);
     }
-  }, [isAuthorizing, onConfirm]);
+  }, [isAuthorizing, onConfirm, setIsAuthorizing]);
 
   const submitFn = useCallback(
     () =>
       performanceTracking.getState().executeFn({
         fn: async () => {
+          console.log('submitFn: ', isBalanceEnough);
+
           if (!isBalanceEnough) {
             navigate(Routes.ADD_CASH_SHEET);
             return;
           }
           if (accountInfo.isHardwareWallet) {
             navigate(Routes.HARDWARE_WALLET_TX_NAVIGATOR, { submit: onPressSend });
           } else {
+            console.log('submitFn: sending');
             await onPressSend();
           }
         },

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);
 
@@ -473,6 +475,7 @@ export const SignTransactionSheet = () => {
   ]);
 
   const handleSignMessage = useCallback(async () => {
+    console.log('handleSignMessage: called');
     const message = transactionDetails?.payload?.params.find((p: string) => !isAddress(p));
     let response = null;
 
@@ -553,15 +556,49 @@ export const SignTransactionSheet = () => {
   const { submitFn } = useTransactionSubmission({
     isBalanceEnough,
     accountInfo,
+    isAuthorizing,
+    setIsAuthorizing,
     onConfirm,
     source,
   });
 
+  const canPressConfirm =
+    !isAuthorizing && (isMessageRequest || (!!walletBalance?.isLoaded && !!chainId && !!selectedGasFee?.gasFee?.estimatedFee));
+
+  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 +769,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>