fix: re-designs signatures, continue to use old designs when signing with hardware wallets

app/components/Views/confirmations/hooks/useConfirmationRedesignEnabled.ts

@@ -2,26 +2,43 @@ import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
 import { ApprovalTypes } from '../../../../core/RPCMethods/RPCMethodMiddleware';
+import { isExternalHardwareAccount } from '../../../../util/address';
 import { selectRemoteFeatureFlags } from '../../../../selectors/featureFlagController';
 import useApprovalRequest from './useApprovalRequest';
+import useQRHardwareAwareness from './useQRHardwareAwareness';
 
 const useConfirmationRedesignEnabled = () => {
   const { approvalRequest } = useApprovalRequest();
+  const { isSigningQRObject, isSyncingQRHardware } = useQRHardwareAwareness();
   const { confirmation_redesign } = useSelector(selectRemoteFeatureFlags);
 
-  const { type: approvalRequestType } = approvalRequest ?? {
+  const {
+    type: approvalRequestType,
+    requestData: { from: fromAddress },
+  } = approvalRequest ?? {
     requestData: {},
   };
 
   const isRedesignedEnabled = useMemo(
     () =>
       (confirmation_redesign as Record<string, string>)?.signatures &&
       process.env.REDESIGNED_SIGNATURE_REQUEST === 'true' &&
+      // following condition will ensure that user is redirected to old designs is using QR scan aware hardware
+      !isSyncingQRHardware &&
+      !isSigningQRObject &&
+      // following condition will ensure that user is redirected to old designs for hardware wallets
+      !isExternalHardwareAccount(fromAddress) &&
       approvalRequestType &&
       [ApprovalTypes.PERSONAL_SIGN, ApprovalTypes.ETH_SIGN_TYPED_DATA].includes(
         approvalRequestType as ApprovalTypes,
       ),
-    [approvalRequestType, confirmation_redesign],
+    [
+      approvalRequestType,
+      confirmation_redesign,
+      fromAddress,
+      isSigningQRObject,
+      isSyncingQRHardware,
+    ],
   );
 
   return { isRedesignedEnabled };

app/components/Views/confirmations/hooks/useQRHardwareAwareness.ts

@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+
+import Engine from '../../../../core/Engine';
+import { IQRState } from '../../../UI/QRHardware/types';
+
+const useQRHardwareAwareness = () => {
+  const [QRState, SetQRState] = useState<IQRState>({
+    sync: {
+      reading: false,
+    },
+    sign: {},
+  });
+
+  // TODO: Replace "any" with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const subscribeKeyringState = (value: any) => {
+    SetQRState(value);
+  };
+
+  useEffect(() => {
+    // This ensures that a QR keyring gets created if it doesn't already exist.
+    // This is intentionally not awaited (the subscription still gets setup correctly if called
+    // before the keyring is created).
+    // TODO: Stop automatically creating keyrings
+    Engine.context.KeyringController.getOrAddQRKeyring();
+    Engine.controllerMessenger.subscribe(
+      'KeyringController:qrKeyringStateChange',
+      subscribeKeyringState,
+    );
+    return () => {
+      Engine.controllerMessenger.unsubscribe(
+        'KeyringController:qrKeyringStateChange',
+        subscribeKeyringState,
+      );
+    };
+  }, []);
+
+  return {
+    isSigningQRObject: !!QRState.sign?.request,
+    isSyncingQRHardware: QRState.sync.reading,
+    QRState,
+  };
+};
+
+export default useQRHardwareAwareness;