WIP

trezor · Feb 11, 2025 · 8298d00 · 8298d00
1 parent 246db18
commit 8298d00
Show file tree

Hide file tree

Showing 10 changed files with 231 additions and 77 deletions.
diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/SuiteLayout.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/SuiteLayout.tsx
@@ -33,6 +33,7 @@ import { MobileMenu } from './MobileMenu/MobileMenu';
 import { Sidebar } from './Sidebar/Sidebar';
 import { useAppShortcuts } from './useAppShortcuts';
 import { ModalSwitcher } from '../../modals/ModalSwitcher/ModalSwitcher';
+import { PassphraseModalProvider } from '../../modals/ReduxModal/DeviceContextModal/PassphraseModalContext';
 
 export const SCROLL_WRAPPER_ID = 'layout-scroll';
 export const Wrapper = styled.div`
@@ -162,49 +163,53 @@ export const SuiteLayout = ({ children }: SuiteLayoutProps) => {
                 <PageWrapper>
                     <ResponsiveContextProvider sidebarWidthFromRedux={sidebarWidthFromRedux}>
                         <NewModal.Provider>
-                            <ModalContextProvider>
-                                <Metadata title={title} />
-
-                                <ModalSwitcher />
-
-                                {isMobileLayout && <CoinjoinBars />}
-
-                                {isMobileLayout && <MobileMenu />}
-
-                                <DiscoveryProgress />
-
-                                <LayoutContext.Provider value={setLayoutPayload}>
-                                    <Body data-testid="@suite-layout/body">
-                                        <Columns>
-                                            {!isMobileLayout && (
-                                                <ElevationDown>
-                                                    <Sidebar />
-                                                </ElevationDown>
-                                            )}
-                                            <MainContent>
-                                                {!isMobileLayout && <CoinjoinBars />}
-                                                <SuiteBanners />
-                                                <AppWrapper
-                                                    data-testid="@app"
-                                                    ref={scrollRef}
-                                                    id={SCROLL_WRAPPER_ID}
-                                                >
-                                                    <ElevationUp>
-                                                        {isMobileLayout && isAccountPage && (
-                                                            <MobileAccountsMenu />
-                                                        )}
-                                                        {layoutHeader}
-
-                                                        <ContentWrapper>{children}</ContentWrapper>
-                                                    </ElevationUp>
-                                                </AppWrapper>
-                                            </MainContent>
-                                        </Columns>
-                                    </Body>
-                                </LayoutContext.Provider>
-
-                                {!isMobileLayout && <GuideButton />}
-                            </ModalContextProvider>
+                            <PassphraseModalProvider>
+                                <ModalContextProvider>
+                                    <Metadata title={title} />
+
+                                    <ModalSwitcher />
+
+                                    {isMobileLayout && <CoinjoinBars />}
+
+                                    {isMobileLayout && <MobileMenu />}
+
+                                    <DiscoveryProgress />
+
+                                    <LayoutContext.Provider value={setLayoutPayload}>
+                                        <Body data-testid="@suite-layout/body">
+                                            <Columns>
+                                                {!isMobileLayout && (
+                                                    <ElevationDown>
+                                                        <Sidebar />
+                                                    </ElevationDown>
+                                                )}
+                                                <MainContent>
+                                                    {!isMobileLayout && <CoinjoinBars />}
+                                                    <SuiteBanners />
+                                                    <AppWrapper
+                                                        data-testid="@app"
+                                                        ref={scrollRef}
+                                                        id={SCROLL_WRAPPER_ID}
+                                                    >
+                                                        <ElevationUp>
+                                                            {isMobileLayout && isAccountPage && (
+                                                                <MobileAccountsMenu />
+                                                            )}
+                                                            {layoutHeader}
+
+                                                            <ContentWrapper>
+                                                                {children}
+                                                            </ContentWrapper>
+                                                        </ElevationUp>
+                                                    </AppWrapper>
+                                                </MainContent>
+                                            </Columns>
+                                        </Body>
+                                    </LayoutContext.Provider>
+
+                                    {!isMobileLayout && <GuideButton />}
+                                </ModalContextProvider>
+                            </PassphraseModalProvider>
                         </NewModal.Provider>
                     </ResponsiveContextProvider>
                 </PageWrapper>

diff --git a/...es/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/DeviceContextModal.tsx b/...es/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/DeviceContextModal.tsx
@@ -21,6 +21,7 @@ import { useSelector } from 'src/hooks/suite';
 import messages from 'src/support/messages';
 
 import type { ReduxModalProps } from '../ReduxModal';
+import { PassphraseModalProvider } from './PassphraseModalContext';
 
 /** Modals requested by Device from `trezor-connect` */
 export const DeviceContextModal = ({

diff --git a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseModal.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import {
     onPassphraseSubmit,
@@ -19,6 +19,8 @@ import type { TrezorDevice } from 'src/types/suite';
 import { CardWithDevice } from 'src/views/suite/SwitchDevice/CardWithDevice';
 import { SwitchDeviceModal } from 'src/views/suite/SwitchDevice/SwitchDeviceModal';
 
+import { usePassphraseModalContext } from './PassphraseModalContext';
+import { PassphraseWalletBestPractices } from './PassphraseWalletBestPractices';
 import { PassphraseWalletConfirmation } from './PassphraseWalletConfirmation';
 
 interface PassphraseModalProps {

diff --git a/...uite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseModalContext.tsx b/...uite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseModalContext.tsx
@@ -0,0 +1,57 @@
+import React, { createContext, useContext, useState } from 'react';
+
+import type { TrezorDevice } from '@suite-common/suite-types/libDev/src';
+
+type PassphraseState = 'initial' | 'best-practices';
+
+const INITIAL_STATE: PassphraseState = 'initial';
+
+type PassphraseModalContextType = {
+    passphraseState: PassphraseState;
+    setPassphraseState: (passphraseState: PassphraseState) => void;
+    device: TrezorDevice | undefined;
+    setDevice: (device: TrezorDevice) => void;
+};
+
+type PassphraseModalProviderProps = {
+    children: React.ReactNode;
+};
+
+const initialPassphraseModal: PassphraseModalContextType = {
+    passphraseState: INITIAL_STATE,
+    setPassphraseState: () => {},
+    device: undefined,
+    setDevice: () => {},
+};
+
+export const PassphraseModalContext =
+    createContext<PassphraseModalContextType>(initialPassphraseModal);
+
+export const PassphraseModalProvider = ({ children }: PassphraseModalProviderProps) => {
+    const [passphraseState, setPassphraseState] = useState<PassphraseState>(
+        initialPassphraseModal.passphraseState,
+    );
+    const [device, setDevice] = useState<TrezorDevice | undefined>(undefined);
+
+    const value: PassphraseModalContextType = {
+        passphraseState,
+        setPassphraseState,
+        device,
+        setDevice,
+    };
+
+    return (
+        <PassphraseModalContext.Provider value={value}>{children}</PassphraseModalContext.Provider>
+    );
+};
+
+PassphraseModalProvider.displayName = 'PassphraseModalProvider';
+
+export const usePassphraseModalContext = () => {
+    const context = useContext(PassphraseModalContext);
+    if (!context) {
+        throw new Error('usePassphraseModalContext must be used within a PassphraseModalProvider');
+    }
+
+    return context;
+};
diff --git a/...c/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletBestPractices.tsx b/...c/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletBestPractices.tsx
@@ -0,0 +1,28 @@
+import { PassphraseWalletConfirmationStep2 } from './PassphraseWalletConfirmationStep2';
+import { CardWithDevice } from '../../../../../views/suite/SwitchDevice/CardWithDevice';
+import { SwitchDeviceModal } from '../../../../../views/suite/SwitchDevice/SwitchDeviceModal';
+
+type PassphraseWalletBestPracticesProps = {
+    onCancel: () => void;
+    onNext: () => void;
+    onBack: () => void;
+    device: any;
+};
+
+export const PassphraseWalletBestPractices = ({
+    onCancel,
+    onNext,
+    onBack,
+    device,
+}: PassphraseWalletBestPracticesProps) => (
+        <SwitchDeviceModal onCancel={onCancel}>
+            <CardWithDevice
+                onCancel={onCancel}
+                device={device}
+                onBackButtonClick={onBack}
+                isFullHeaderVisible
+            >
+                <PassphraseWalletConfirmationStep2 onNext={onNext} />
+            </CardWithDevice>
+        </SwitchDeviceModal>
+    );
diff --git a/...rc/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmation.tsx b/...rc/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmation.tsx
@@ -37,7 +37,13 @@ const PassphraseWalletConfirmationContent = ({
                 />
             );
         case 'step2':
-            return <PassphraseWalletConfirmationStep2 setContentType={setContentType} />;
+            return (
+                <PassphraseWalletConfirmationStep2
+                    onNext={() => {
+                        setContentType('step3');
+                    }}
+                />
+            );
         case 'step3':
             return (
                 <PassphraseWalletConfirmationStep3

diff --git a/...mponents/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep2.tsx b/...mponents/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep2.tsx
@@ -1,18 +1,14 @@
-import { Dispatch } from 'react';
-
 import { Banner, Button, Card, Column, H3, Icon, List, Text } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
 import { Translation } from 'src/components/suite/Translation';
 
-import { ContentType } from './types';
-
 type PassphraseWalletConfirmationStep2Props = {
-    setContentType: Dispatch<React.SetStateAction<ContentType>>;
+    onNext: () => void;
 };
 
 export const PassphraseWalletConfirmationStep2 = ({
-    setContentType,
+    onNext,
 }: PassphraseWalletConfirmationStep2Props) => (
     <Column gap={spacings.sm} margin={{ top: spacings.xxs }}>
         <H3>
@@ -37,13 +33,7 @@ export const PassphraseWalletConfirmationStep2 = ({
             </Banner>
         </Card>
 
-        <Button
-            isFullWidth
-            onClick={() => {
-                setContentType('step3');
-            }}
-            data-testid="@passphrase-confirmation/step2-button"
-        >
+        <Button isFullWidth onClick={onNext} data-testid="@passphrase-confirmation/step2-button">
             <Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP2_BUTTON" />
         </Button>
     </Column>

diff --git a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/types.ts b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/types.ts
@@ -1 +1 @@
-export type ContentType = 'step1' | 'step2' | 'step3';
+// export type ContentType = 'step1' | 'step2' | 'step3';
diff --git a/packages/suite/src/views/suite/SwitchDevice/DeviceItem/AddWalletButton.tsx b/packages/suite/src/views/suite/SwitchDevice/DeviceItem/AddWalletButton.tsx
@@ -8,6 +8,9 @@ import { useDispatch, useSelector } from 'src/hooks/suite';
 import { selectIsDeviceOrUiLocked } from 'src/reducers/suite/suiteReducer';
 import { AcquiredDevice, ForegroundAppProps, TrezorDevice } from 'src/types/suite';
 
+import { usePassphraseModalContext } from '../../../../components/suite/modals/ReduxModal/DeviceContextModal/PassphraseModalContext';
+import { PassphraseWalletBestPractices } from '../../../../components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletBestPractices';
+
 interface AddWalletButtonProps {
     device: TrezorDevice;
     instances: AcquiredDevice[];
@@ -26,9 +29,23 @@ export const AddWalletButton = ({ device, instances, onCancel }: AddWalletButton
     // and there is no point in useDevice returning the same device object we would have passed
     const isLocked = !device || !device.connected || isDeviceOrUiLocked;
 
-    const onAddWallet = ({ walletType }: { walletType: WalletType }) => {
-        dispatch(addWalletThunk({ walletType, device }));
-        onCancel(false);
+    const { setPassphraseState, passphraseState, setDevice } = usePassphraseModalContext();
+    console.log('___!!!', passphraseState);
+    const onAddWallet = ({
+        walletType,
+        isExisting,
+    }: {
+        walletType: WalletType;
+        isExisting: boolean;
+    }) => {
+        if (!isExisting) {
+            console.log('___isExisting', isExisting);
+            setPassphraseState('best-practices');
+            setDevice(device);
+        } else {
+            dispatch(addWalletThunk({ walletType, device }));
+            onCancel(false);
+        }
     };
 
     return (
@@ -45,26 +62,47 @@ export const AddWalletButton = ({ device, instances, onCancel }: AddWalletButton
                         isFullWidth
                         icon="plus"
                         isDisabled={isLocked}
-                        onClick={() => onAddWallet({ walletType: WalletType.STANDARD })}
+                        onClick={() =>
+                            onAddWallet({ walletType: WalletType.STANDARD, isExisting: false })
+                        }
                     >
                         <Translation id="TR_ADD_WALLET" />
                     </Button>
                 )}
 
                 {isPassphraseProtectionEnabled && (
-                    <Button
-                        data-testid="@switch-device/add-hidden-wallet-button"
-                        variant="tertiary"
-                        isFullWidth
-                        icon="plus"
-                        isDisabled={isLocked}
-                        onClick={() => onAddWallet({ walletType: WalletType.PASSPHRASE })}
-                    >
-                        <Row gap={spacings.xs}>
-                            <Translation id="TR_ADD_HIDDEN_WALLET" />{' '}
-                            {!isLocked && <HotkeyBadge hotkey={['ALT', 'KEY_P']} />}
-                        </Row>
-                    </Button>
+                    <Column gap={spacings.xxs} width="100%">
+                        <Button
+                            data-testid="@switch-device/add-hidden-wallet-button"
+                            variant="tertiary"
+                            isFullWidth
+                            icon="plus"
+                            isDisabled={isLocked}
+                            onClick={() =>
+                                onAddWallet({
+                                    walletType: WalletType.PASSPHRASE,
+                                    isExisting: false,
+                                })
+                            }
+                        >
+                            <Row gap={spacings.xs}>New passphrase</Row>
+                        </Button>
+                        <Button
+                            data-testid="@switch-device/add-hidden-wallet-button"
+                            variant="tertiary"
+                            isFullWidth
+                            icon="folderOpen"
+                            isDisabled={isLocked}
+                            onClick={() =>
+                                onAddWallet({ walletType: WalletType.PASSPHRASE, isExisting: true })
+                            }
+                        >
+                            <Row gap={spacings.xs}>
+                                Open previously used
+                                {!isLocked && <HotkeyBadge hotkey={['ALT', 'KEY_P']} />}
+                            </Row>
+                        </Button>
+                    </Column>
                 )}
             </Column>
         </Tooltip>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export type ContentType = 'step1' \| 'step2' \| 'step3';
		// export type ContentType = 'step1' \| 'step2' \| 'step3';