WIP

packages/components/src/components/HotkeyBadge/HotkeyBadge.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { HotkeyBadge as HotkeyBadgeComponent, HotkeyBadgeProps } from './HotkeyBadge';
+
+const meta: Meta = {
+    title: 'Form/HotkeyBadge',
+    component: HotkeyBadgeComponent,
+} as Meta;
+export default meta;
+
+const Component = ({ children, ...args }: HotkeyBadgeProps) => {
+    return <HotkeyBadgeComponent {...args}>{children}</HotkeyBadgeComponent>;
+};
+
+export const HotkeyBadge: StoryObj<HotkeyBadgeProps> = {
+    render: Component,
+    args: {
+        children: 'CMD + P',
+        isActive: true,
+    },
+};

packages/components/src/components/HotkeyBadge/HotkeyBadge.tsx

@@ -0,0 +1,56 @@
+import {
+    Elevation,
+    borders,
+    mapElevationToBackground,
+    spacingsPx,
+    typography,
+} from '@trezor/theme';
+import styled from 'styled-components';
+import { ElevationDown, useElevation } from '../ElevationContext/ElevationContext';
+
+export const Container = styled.div<{ $elevation: Elevation; $isActive: boolean }>`
+    display: flex;
+    gap: ${spacingsPx.xxs};
+    align-items: center;
+    justify-content: center;
+    background: ${mapElevationToBackground};
+    border-radius: ${borders.radii.xs};
+    color: ${({ theme }) => theme.textSubdued};
+    opacity: ${({ $isActive }) => ($isActive ? 1 : 0.5)};
+    user-select: none;
+    padding: 0 ${spacingsPx.xxs};
+    ${typography.label}
+    position: relative;
+`;
+
+export interface HotkeyBadgeProps {
+    isActive?: boolean;
+    children: string;
+}
+const Component = ({ isActive = true, children }: HotkeyBadgeProps) => {
+    const { elevation } = useElevation();
+    console.log('______elevation', elevation);
+
+    const isMac = navigator.userAgent.includes('Macintosh');
+
+    const split = children.split(/(\+)/g).map(x => x.trim());
+    const hotkeyReplaces: Record<string, string> = {
+        MOD: isMac ? '⌘' : 'CTRL',
+    };
+
+    return (
+        <Container $elevation={elevation} $isActive={isActive}>
+            {split.map(hotkey => (
+                <span>{hotkeyReplaces[hotkey] || hotkey}</span>
+            ))}
+        </Container>
+    );
+};
+
+export const HotkeyBadge = (props: HotkeyBadgeProps) => {
+    return (
+        <ElevationDown>
+            <Component {...props} />
+        </ElevationDown>
+    );
+};

packages/components/src/index.ts

@@ -29,6 +29,7 @@ export * from './components/DataAnalytics';
 export * from './components/Divider/Divider';
 export * from './components/Dropdown/Dropdown';
 export * from './components/ElevationContext/ElevationContext';
+export * from './components/HotkeyBadge/HotkeyBadge';
 export * from './components/form/Input/Input';
 export * from './components/form/InputStyles';
 export * from './components/form/Radio/Radio';

packages/suite/src/components/suite/layouts/SuiteLayout/SuiteLayout.tsx

@@ -19,9 +19,9 @@ import { Sidebar } from './Sidebar/Sidebar';
 import { CoinjoinBars } from './CoinjoinBars/CoinjoinBars';
 import { MobileAccountsMenu } from 'src/components/wallet/WalletLayout/AccountsMenu/MobileAccountsMenu';
 import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer';
+import { useAppShortcuts } from './utils';
 
 export const SCROLL_WRAPPER_ID = 'layout-scroll';
-
 export const Wrapper = styled.div`
     display: flex;
     flex: 1;
@@ -100,6 +100,8 @@ export const SuiteLayout = ({ children }: SuiteLayoutProps) => {
 
     const isAccountPage = !!selectedAccount;
 
+    useAppShortcuts();
+
     return (
         <ElevationContext baseElevation={-1}>
             <Wrapper ref={wrapperRef} data-test="@suite-layout">

packages/suite/src/components/suite/layouts/SuiteLayout/utils.ts

@@ -1,9 +1,26 @@
+import { createDeviceInstance, selectDevice } from '@suite-common/wallet-core';
+import { useEvent } from 'react-use';
 import { useCustomBackends } from 'src/hooks/settings/backends';
-import { useSelector } from 'src/hooks/suite';
+import { useDispatch, useSelector } from 'src/hooks/suite';
 
 export const useEnabledBackends = () => {
     const enabledNetworks = useSelector(state => state.wallet.settings.enabledNetworks);
     const customBackends = useCustomBackends();
 
     return customBackends.filter(backend => enabledNetworks.includes(backend.coin));
 };
+
+export const useAppShortcuts = () => {
+    const device = useSelector(selectDevice);
+    const dispatch = useDispatch();
+
+    useEvent('keydown', e => {
+        const modKey = e.metaKey; // CMD or Ctrl key
+
+        // press CMD + P to show PassphraseModal
+        if (modKey && e.key === 'p' && device) {
+            dispatch(createDeviceInstance({ device }));
+            e.preventDefault(); // prevent Print dialog
+        }
+    });
+};

packages/suite/src/components/suite/modals/ModalSwitcher/DiscoveryLoader.tsx

@@ -1,26 +1,37 @@
 import styled from 'styled-components';
-import { Spinner } from '@trezor/components';
-import { Translation, Modal } from 'src/components/suite';
+import { H3, Spinner, Text } from '@trezor/components';
+import { Translation } from 'src/components/suite';
+import { CardWithDevice } from 'src/views/suite/SwitchDevice/CardWithDevice';
+import { SwitchDeviceRenderer } from 'src/views/suite/SwitchDevice/SwitchDeviceRenderer';
+import { useSelector } from 'src/hooks/suite';
+import { selectDevice } from '@suite-common/wallet-core';
 
 const Expand = styled.div`
     display: flex;
+    flex-direction: column;
     width: 100%;
     justify-content: center;
+    align-items: center;
     margin: 40px 0;
 `;
 
-const StyledModal = styled(Modal)`
-    width: 360px;
-`;
+export const DiscoveryLoader = () => {
+    const device = useSelector(selectDevice);
+    if (!device) return null;
 
-export const DiscoveryLoader = () => (
-    <StyledModal
-        heading={<Translation id="TR_COIN_DISCOVERY_IN_PROGRESS" />}
-        description={<Translation id="TR_TO_FIND_YOUR_ACCOUNTS_AND" />}
-        data-test="@discovery/loader"
-    >
-        <Expand>
-            <Spinner size={80} isGrey={false} />
-        </Expand>
-    </StyledModal>
-);
+    return (
+        <SwitchDeviceRenderer isCancelable={false} data-test="@discovery/loader">
+            <CardWithDevice device={device}>
+                <Expand>
+                    <Spinner size={80} isGrey={false} />
+                    <H3>
+                        <Translation id="TR_COIN_DISCOVERY_IN_PROGRESS" />
+                    </H3>
+                    <Text color="textSubdued">
+                        <Translation id="TR_TO_FIND_YOUR_ACCOUNTS_AND" />
+                    </Text>
+                </Expand>
+            </CardWithDevice>
+        </SwitchDeviceRenderer>
+    );
+};

packages/suite/src/components/suite/modals/ModalSwitcher/DiscoveryLoaderLegacy.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { Spinner } from '@trezor/components';
+import { Translation, Modal } from 'src/components/suite';
+
+const Expand = styled.div`
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    margin: 40px 0;
+`;
+
+const StyledModal = styled(Modal)`
+    width: 360px;
+`;
+
+export const DiscoveryLoaderLegacy = () => (
+    <StyledModal
+        heading={<Translation id="TR_COIN_DISCOVERY_IN_PROGRESS" />}
+        description={<Translation id="TR_TO_FIND_YOUR_ACCOUNTS_AND" />}
+        data-test="@discovery/loader"
+    >
+        <Expand>
+            <Spinner size={80} isGrey={false} />
+        </Expand>
+    </StyledModal>
+);

packages/suite/src/components/suite/modals/ModalSwitcher/ModalSwitcher.tsx

@@ -2,17 +2,24 @@ import { usePreferredModal } from 'src/hooks/suite/usePreferredModal';
 import { ReduxModal } from '../ReduxModal/ReduxModal';
 import { ForegroundAppModal } from './ForegroundAppModal';
 import { DiscoveryLoader } from './DiscoveryLoader';
+import { useSelector } from 'src/hooks/suite';
+import { DiscoveryLoaderLegacy } from './DiscoveryLoaderLegacy';
 
 /** Displays whichever redux modal or foreground app should be displayed */
 export const ModalSwitcher = () => {
+    const isViewOnlyModeVisible = useSelector(
+        state => state.suite.settings.debug.isViewOnlyModeVisible,
+    );
     const modal = usePreferredModal();
+
+    return <DiscoveryLoader />;
     switch (modal.type) {
         case 'foreground-app':
             return <ForegroundAppModal {...modal.payload} />;
         case 'redux-modal':
             return <ReduxModal {...modal.payload} />;
         case 'discovery-loading':
-            return <DiscoveryLoader />;
+            return isViewOnlyModeVisible ? <DiscoveryLoader /> : <DiscoveryLoaderLegacy />;
         default:
             return null;
     }

packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/DeviceContextModal.tsx

@@ -9,6 +9,7 @@ import {
     PinModal,
     PinInvalidModal,
     PassphraseModal,
+    PassphraseModalLegacy,
     PassphraseSourceModal,
     PassphraseOnDeviceModal,
     ConfirmActionModal,
@@ -29,6 +30,9 @@ export const DeviceContextModal = ({
 }: ReduxModalProps<typeof MODAL.CONTEXT_DEVICE>) => {
     const device = useSelector(selectDevice);
     const intl = useIntl();
+    const isViewOnlyModeVisible = useSelector(
+        state => state.suite.settings.debug.isViewOnlyModeVisible,
+    );
 
     if (!device) return null;
 
@@ -44,7 +48,11 @@ export const DeviceContextModal = ({
 
         // Passphrase on host
         case UI.REQUEST_PASSPHRASE:
-            return <PassphraseModal device={device} />;
+            return isViewOnlyModeVisible ? (
+                <PassphraseModal device={device} />
+            ) : (
+                <PassphraseModalLegacy device={device} />
+            );
 
         case 'WordRequestType_Plain':
             return <WordModal renderer={renderer} />;