fix(suite): hide malfunctioning cancel button in ConfirmActionModal component; workaround fix #15000

Author: mroz22

Diff for: packages/suite-web/e2e/tests/suite/passphrase-cancel.test.ts

@@ -18,7 +18,9 @@ describe('Passphrase cancel', () => {
                 mnemonic: 'mnemonic_all',
                 passphrase_protection: true,
             });
-            cy.task('startBridge');
+
+            // using specific bridge version - older versions don't support 'cancel' button
+            cy.task('startBridge', '2.0.33');
             cy.prefixedVisit('/');
             cy.passThroughInitialRun();
             cy.discoveryShouldFinish();

Diff for: packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/ConfirmActionModal.tsx

@@ -1,16 +1,12 @@
-import { useIntl } from 'react-intl';
-
 import styled from 'styled-components';
 
-import TrezorConnect from '@trezor/connect';
 import { H2, NewModal } from '@trezor/components';
 import { ConfirmOnDevice } from '@trezor/product-components';
 import { spacings } from '@trezor/theme';
 
 import { Translation } from 'src/components/suite/Translation';
 import { DeviceConfirmImage } from 'src/components/suite';
 import { TrezorDevice } from 'src/types/suite';
-import messages from 'src/support/messages';
 
 const ImageWrapper = styled.div`
     display: flex;
@@ -19,31 +15,27 @@ const ImageWrapper = styled.div`
 
 interface ConfirmActionProps {
     device: TrezorDevice;
+    onCancel?: () => void;
 }
 
-export const ConfirmActionModal = ({ device }: ConfirmActionProps) => {
-    const intl = useIntl();
-    const onCancel = () => TrezorConnect.cancel(intl.formatMessage(messages.TR_CANCELLED));
-
-    return (
-        <NewModal.Backdrop onClick={onCancel} data-testid="@suite/modal/confirm-action-on-device">
-            <ConfirmOnDevice
-                title={<Translation id="TR_CONFIRM_ON_TREZOR" />}
-                deviceModelInternal={device?.features?.internal_model}
-                deviceUnitColor={device?.features?.unit_color}
-                onCancel={onCancel}
-            />
-            <NewModal.ModalBase size="tiny">
-                <ImageWrapper>
-                    <DeviceConfirmImage device={device} />
-                </ImageWrapper>
-                <H2
-                    align="center"
-                    margin={{ left: spacings.md, right: spacings.md, bottom: spacings.md }}
-                >
-                    <Translation id="TR_CONFIRM_ACTION_ON_YOUR" />
-                </H2>
-            </NewModal.ModalBase>
-        </NewModal.Backdrop>
-    );
-};
+export const ConfirmActionModal = ({ device, onCancel }: ConfirmActionProps) => (
+    <NewModal.Backdrop onClick={onCancel} data-testid="@suite/modal/confirm-action-on-device">
+        <ConfirmOnDevice
+            title={<Translation id="TR_CONFIRM_ON_TREZOR" />}
+            deviceModelInternal={device?.features?.internal_model}
+            deviceUnitColor={device?.features?.unit_color}
+            onCancel={onCancel}
+        />
+        <NewModal.ModalBase size="tiny">
+            <ImageWrapper>
+                <DeviceConfirmImage device={device} />
+            </ImageWrapper>
+            <H2
+                align="center"
+                margin={{ left: spacings.md, right: spacings.md, bottom: spacings.md }}
+            >
+                <Translation id="TR_CONFIRM_ACTION_ON_YOUR" />
+            </H2>
+        </NewModal.ModalBase>
+    </NewModal.Backdrop>
+);

Diff for: packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/DeviceContextModal.tsx

@@ -29,10 +29,12 @@ export const DeviceContextModal = ({
     data,
 }: ReduxModalProps<typeof MODAL.CONTEXT_DEVICE>) => {
     const device = useSelector(selectSelectedDevice);
+    const transport = useSelector(state => state.suite.transport)?.transports[0];
     const intl = useIntl();
 
     if (!device) return null;
 
+    const isBridge27 = transport?.type === 'BridgeTransport' && transport.version === '2.0.27';
     const abort = () => TrezorConnect.cancel(intl.formatMessage(messages.TR_CANCELLED));
 
     switch (windowType) {
@@ -63,7 +65,7 @@ export const DeviceContextModal = ({
             return <TransactionReviewModal type="sign-transaction" />;
         }
         case 'ButtonRequest_Other': {
-            return <ConfirmActionModal device={device} />;
+            return <ConfirmActionModal device={device} onCancel={abort} />;
         }
         case 'ButtonRequest_FirmwareCheck':
             return <ConfirmFingerprintModal device={device} renderer={renderer} />;
@@ -74,14 +76,16 @@ export const DeviceContextModal = ({
         case 'ButtonRequest_RecoveryHomepage':
         case 'ButtonRequest_MnemonicWordCount':
         case 'ButtonRequest_MnemonicInput':
-        case 'ButtonRequest_ProtectCall':
         case 'ButtonRequest_ResetDevice': // dispatched on BackupDevice call for T2T1, weird but true
         case 'ButtonRequest_ConfirmWord': // dispatched on BackupDevice call for T1B1
         case 'ButtonRequest_WipeDevice':
         case 'ButtonRequest_UnknownDerivationPath':
         case 'ButtonRequest_FirmwareUpdate':
         case 'ButtonRequest_PinEntry':
-            return <ConfirmActionModal device={device} />;
+            return <ConfirmActionModal device={device} onCancel={abort} />;
+        // it appears that cancelling ButtonRequest_ProtectCall doesn't work using bridge 2.0.27.
+        case 'ButtonRequest_ProtectCall':
+            return <ConfirmActionModal device={device} onCancel={isBridge27 ? undefined : abort} />;
         case 'ButtonRequest_Address':
             return data ? (
                 <ConfirmAddressModal