diff --git a/apps/browser-extension-wallet/src/hooks/__tests__/useWalletManager.test.tsx b/apps/browser-extension-wallet/src/hooks/__tests__/useWalletManager.test.tsx index 7bad86582..745e062be 100644 --- a/apps/browser-extension-wallet/src/hooks/__tests__/useWalletManager.test.tsx +++ b/apps/browser-extension-wallet/src/hooks/__tests__/useWalletManager.test.tsx @@ -13,6 +13,7 @@ import SpyInstance = jest.SpyInstance; const mockEmip3decrypt = jest.fn(); const mockEmip3encrypt = jest.fn(); const mockConnectDevice = jest.fn(); +const mockConnectDeviceByUsbDeviceObject = jest.fn(); const mockGetHwExtendedAccountPublicKey = jest.fn(); const mockRestoreWalletFromKeyAgent = jest.fn(); const mockSwitchKeyAgents = jest.fn(); @@ -81,6 +82,7 @@ jest.mock('@lace/cardano', () => { restoreWalletFromKeyAgent: mockRestoreWalletFromKeyAgent, switchKeyAgents: mockSwitchKeyAgents, connectDevice: mockConnectDevice, + connectDeviceByUsbDeviceObject: mockConnectDeviceByUsbDeviceObject, getHwExtendedAccountPublicKey: mockGetHwExtendedAccountPublicKey, KeyManagement: { ...actual.Wallet.KeyManagement, @@ -397,7 +399,6 @@ describe('Testing useWalletManager hook', () => { networkMagic: 0 } })); - const connectedDevice = 'Ledger' as any; const deviceConnection = 'deviceConnection' as any; const { @@ -408,10 +409,12 @@ describe('Testing useWalletManager hook', () => { wrapper: getWrapper({}) }); await createHardwareWallet({ - deviceConnection, accountIndex, name, - connectedDevice + connection: { + type: WalletType.Ledger, + value: deviceConnection + } }); expect(walletApiUi.walletRepository.addWallet).toBeCalledTimes(1); expect(walletApiUi.walletManager.activate).toBeCalledTimes(1); @@ -420,10 +423,11 @@ describe('Testing useWalletManager hook', () => { describe('connectHardwareWallet', () => { test('should call proper connect method', async () => { - const model = 'Trezor' as any; const mockConnectDeviceMockedResult = 'mockConnectDeviceMocked'; const mockConnectDeviceMocked = jest.fn().mockReturnValue(mockConnectDeviceMockedResult); - mockConnectDevice.mockImplementation(mockConnectDeviceMocked); + mockConnectDeviceByUsbDeviceObject.mockImplementation(mockConnectDeviceMocked); + + const usbDevice = Wallet.ledgerDescriptors[0] as USBDevice; const { result: { @@ -433,8 +437,8 @@ describe('Testing useWalletManager hook', () => { wrapper: getWrapper({}) }); expect(connectHardwareWallet).toBeDefined(); - expect(await connectHardwareWallet(model)).toEqual(mockConnectDeviceMockedResult); - expect(mockConnectDeviceMocked).toBeCalledWith(model); + expect(await connectHardwareWallet(usbDevice)).toEqual(mockConnectDeviceMockedResult); + expect(mockConnectDeviceMocked).toBeCalledWith(usbDevice); }); }); diff --git a/apps/browser-extension-wallet/src/hooks/useWalletManager.ts b/apps/browser-extension-wallet/src/hooks/useWalletManager.ts index 2523a4c54..6d837a1b4 100644 --- a/apps/browser-extension-wallet/src/hooks/useWalletManager.ts +++ b/apps/browser-extension-wallet/src/hooks/useWalletManager.ts @@ -46,13 +46,6 @@ export interface CreateWalletParams { chainId?: Wallet.Cardano.ChainId; } -export interface CreateHardwareWallet { - accountIndex?: number; - name: string; - deviceConnection: Wallet.DeviceConnection; - connectedDevice: Wallet.HardwareWallets; -} - type WalletManagerAddAccountProps = { wallet: AnyBip32Wallet; metadata: Wallet.AccountMetadata; @@ -62,13 +55,13 @@ type WalletManagerAddAccountProps = { type ActivateWalletProps = Omit; -type CreateHardwareWalletRevampedParams = { +type ConnectHardwareWallet = (usbDevice: USBDevice) => Promise; + +type CreateHardwareWallet = (params: { accountIndex: number; name: string; connection: Wallet.HardwareWalletConnection; -}; - -type CreateHardwareWalletRevamped = (params: CreateHardwareWalletRevampedParams) => Promise; +}) => Promise; export interface UseWalletManager { walletManager: WalletManagerApi; @@ -81,10 +74,8 @@ export interface UseWalletManager { ) => Promise; createWallet: (args: CreateWalletParams) => Promise; activateWallet: (args: Omit) => Promise; - createHardwareWallet: (args: CreateHardwareWallet) => Promise; - createHardwareWalletRevamped: CreateHardwareWalletRevamped; - connectHardwareWallet: (model: Wallet.HardwareWallets) => Promise; - connectHardwareWalletRevamped: typeof connectHardwareWalletRevamped; + createHardwareWallet: CreateHardwareWallet; + connectHardwareWallet: ConnectHardwareWallet; saveHardwareWallet: (wallet: Wallet.CardanoWallet, chainName?: Wallet.ChainName) => Promise; /** * @returns active wallet id after deleting the wallet; undefined if deleted the last wallet @@ -198,12 +189,8 @@ const encryptMnemonic = async (mnemonic: string[], passphrase: Uint8Array) => { return HexBlob.fromBytes(walletEncrypted); }; -/** Connects a hardware wallet device */ -export const connectHardwareWallet = async (model: Wallet.HardwareWallets): Promise => - await Wallet.connectDevice(model); - -const connectHardwareWalletRevamped = async (usbDevice: USBDevice): Promise => - Wallet.connectDeviceRevamped(usbDevice); +const connectHardwareWallet = async (usbDevice: USBDevice): Promise => + Wallet.connectDeviceByUsbDeviceObject(usbDevice); export const useWalletManager = (): UseWalletManager => { const { @@ -237,7 +224,7 @@ export const useWalletManager = (): UseWalletManager => { return (storedChain?.chainName && chainIdFromName(storedChain.chainName)) || DEFAULT_CHAIN_ID; }, [currentChain]); - const createHardwareWalletRevamped = useCallback( + const createHardwareWallet = useCallback( async ({ accountIndex, connection, name }) => { let extendedAccountPublicKey; try { @@ -283,28 +270,6 @@ export const useWalletManager = (): UseWalletManager => { [getCurrentChainId] ); - /** - * Creates a Ledger or Trezor hardware wallet - * and saves it in browser storage with the data to lock/unlock it - */ - const createHardwareWallet = useCallback( - async ({ - accountIndex = 0, - deviceConnection, - name, - connectedDevice - }: CreateHardwareWallet): Promise => - createHardwareWalletRevamped({ - accountIndex, - connection: { - type: connectedDevice, - value: typeof deviceConnection !== 'boolean' ? deviceConnection : undefined - }, - name - }), - [createHardwareWalletRevamped] - ); - const tryMigrateToWalletRepository = useCallback(async (): Promise< AnyWallet[] | undefined > => { @@ -787,9 +752,7 @@ export const useWalletManager = (): UseWalletManager => { loadWallet, createWallet, createHardwareWallet, - createHardwareWalletRevamped, connectHardwareWallet, - connectHardwareWalletRevamped, saveHardwareWallet, deleteWallet, reloadWallet, diff --git a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/onboarding.ts b/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/onboarding.ts index 34aaa3ab0..689786534 100644 --- a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/onboarding.ts +++ b/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/onboarding.ts @@ -58,7 +58,7 @@ const onboardingActions = { WALLET_ADDED: makeOnboardingRestoreEvent('added'), HD_WALLET: makeOnboardingRestoreEvent('hd wallet') }, - hw: { + hardware: { SETUP_OPTION_CLICK: makeOnboardingHardwareEvent('connect | click'), CONNECT_HW_VIEW: makeOnboardingHardwareEvent('connect your device | view'), HW_POPUP_CONNECT_CLICK: makeOnboardingHardwareEvent('native browser pop-up with HWs | connect | click'), diff --git a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/types.ts b/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/types.ts index 21c9da28a..6c8c487f6 100644 --- a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/types.ts +++ b/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events/types.ts @@ -38,7 +38,7 @@ export type ValidateOnboardingActionsStructure< T extends { create: CreateFlowActions; restore: RestoreFlowActions; - hw: HardwareFlowActions; + hardware: HardwareFlowActions; // eslint-disable-next-line camelcase forgot_password: Record< 'ENTER_RECOVERY_PHRASE_NEXT_CLICK' | 'ENTER_WALLET' | 'RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK', diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx index 898475878..b3504044c 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx @@ -12,7 +12,7 @@ import { DrawerContent, DrawerUIContainer } from '../Drawer'; import { useNetworkError } from '@hooks/useNetworkError'; import { LeftSidePanel } from '../LeftSidePanel'; import styles from './Layout.module.scss'; -import { PinExtension } from '@views/browser/features/wallet-setup/components/PinExtension'; +import { PinExtension } from '@views/browser/features/wallet-setup/PinExtension'; import { useLocalStorage } from '@hooks'; import { useWalletStore } from '@stores'; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/WalletOnboardingFlows.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/WalletOnboardingFlows.tsx similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/WalletOnboardingFlows.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/WalletOnboardingFlows.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/CreateWallet.test.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/CreateWallet.test.tsx similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/CreateWallet.test.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/CreateWallet.test.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/CreateWallet.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/CreateWallet.tsx similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/CreateWallet.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/CreateWallet.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/context.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/context.tsx similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/context.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/context.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/index.ts b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/index.ts similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/index.ts rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/index.ts diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/steps/NewRecoveryPhrase.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/steps/NewRecoveryPhrase.tsx similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/steps/NewRecoveryPhrase.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/steps/NewRecoveryPhrase.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/steps/Setup.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/steps/Setup.tsx similarity index 94% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/steps/Setup.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/steps/Setup.tsx index ec7b52581..1ad62f5ce 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/steps/Setup.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/create-wallet/steps/Setup.tsx @@ -1,4 +1,4 @@ -import { WalletSetupNamePasswordStepRevamp } from '@lace/core'; +import { WalletSetupNamePasswordStep } from '@lace/core'; import { useAnalyticsContext } from '@providers'; import React from 'react'; import { useTranslation } from 'react-i18next'; @@ -31,7 +31,7 @@ export const Setup = (): JSX.Element => { }; return ( - { }; describe('Multi Wallet Setup/Hardware Wallet', () => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - const originalUsbDeviceClass = globalThis.USBDevice; const originalNavigatorUsbObject = navigator.usb; // eslint-disable-next-line @typescript-eslint/no-explicit-any let addEventListenerCallback: (event: { device: any }) => void; @@ -81,11 +78,7 @@ describe('Multi Wallet Setup/Hardware Wallet', () => { let deviceObject: any; beforeEach(() => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - globalThis.USBDevice = class USBDevice {}; - - jest.spyOn(Wallet, 'connectDeviceRevamped').mockImplementation(() => + jest.spyOn(Wallet, 'connectDeviceByUsbDeviceObject').mockImplementation(() => Promise.resolve({ type: WalletType.Ledger, value: { @@ -107,8 +100,7 @@ describe('Multi Wallet Setup/Hardware Wallet', () => { }) ); - const nanoS = Wallet.ledgerDescriptors[0]; - deviceObject = Object.assign(new USBDevice(), nanoS); + deviceObject = Wallet.ledgerDescriptors[0]; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore usb api is not available in the jest env navigator.usb = { @@ -121,9 +113,6 @@ describe('Multi Wallet Setup/Hardware Wallet', () => { }); afterEach(() => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - globalThis.USBDevice = originalUsbDeviceClass; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore usb api is not available in the jest env navigator.usb = originalNavigatorUsbObject; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/HardwareWallet.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/HardwareWallet.tsx similarity index 91% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/HardwareWallet.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/HardwareWallet.tsx index d23d38d12..249ee3d25 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/HardwareWallet.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/HardwareWallet.tsx @@ -1,7 +1,7 @@ -import { StartOverDialog } from '@views/browser/features/wallet-setup/components/StartOverDialog'; import React from 'react'; import { HardwareWalletProvider } from './context'; import { ErrorDialog } from './ErrorDialog'; +import { StartOverDialog } from './StartOverDialog'; import { Connect } from './steps/Connect'; import { Setup } from './steps/Setup'; import { Create } from './steps/Create'; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/StartOverDialog.module.scss b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/StartOverDialog.module.scss similarity index 98% rename from apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/StartOverDialog.module.scss rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/StartOverDialog.module.scss index 428a68ded..7a6ccea28 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/StartOverDialog.module.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/StartOverDialog.module.scss @@ -1,4 +1,4 @@ -@import '../../../../../../../../packages/common/src/ui/styles/theme.scss'; +@import '../../../../../../../../packages/common/src/ui/styles/theme'; @import '../../../../../../../../packages/common/src/ui/styles/abstracts/typography'; .startOverDialog { diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/StartOverDialog.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/StartOverDialog.tsx similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/StartOverDialog.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/StartOverDialog.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/context.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/context.tsx similarity index 97% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/context.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/context.tsx index ec9ac7f7d..2270f15fa 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/context.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/context.tsx @@ -50,8 +50,7 @@ export const HardwareWalletProvider = ({ children }: HardwareWalletProviderProps const history = useHistory(); const { aliasEventRequired, mergeEventRequired } = useWalletOnboarding(); const { postHogActions, setFormDirty } = useWalletOnboarding(); - const { connectHardwareWalletRevamped, createHardwareWalletRevamped, saveHardwareWallet, walletRepository } = - useWalletManager(); + const { connectHardwareWallet, createHardwareWallet, saveHardwareWallet, walletRepository } = useWalletManager(); const [step, setStep] = useState(WalletConnectStep.Connect); const [connectedUsbDevice, setConnectedUsbDevice] = useState(); const [errorDialogCode, setErrorDialogCode] = useState(); @@ -144,7 +143,7 @@ export const HardwareWalletProvider = ({ children }: HardwareWalletProviderProps [cleanupConnectionState] ); - const connectDevice = useWrapWithTimeout(connectHardwareWalletRevamped); + const connectDevice = useWrapWithTimeout(connectHardwareWallet); const connect = useCallback( async (usbDevice: USBDevice) => { @@ -168,7 +167,7 @@ export const HardwareWalletProvider = ({ children }: HardwareWalletProviderProps const createWallet = useCallback(async () => { let cardanoWallet: Wallet.CardanoWallet; try { - cardanoWallet = await createHardwareWalletRevamped({ + cardanoWallet = await createHardwareWallet({ connection, ...walletData }); @@ -222,7 +221,7 @@ export const HardwareWalletProvider = ({ children }: HardwareWalletProviderProps analytics, closeConnection, connection, - createHardwareWalletRevamped, + createHardwareWallet, postHogActions.hardware.HD_WALLET, postHogActions.hardware.WALLET_ADDED, saveHardwareWallet, diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/index.ts b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/index.ts similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/index.ts rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/index.ts diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/steps/Connect.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/steps/Connect.tsx similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/steps/Connect.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/steps/Connect.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/steps/Create.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/steps/Create.tsx similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/steps/Create.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/steps/Create.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/steps/Setup.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/steps/Setup.tsx similarity index 79% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/steps/Setup.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/steps/Setup.tsx index 3fe8e73b9..0c5b25156 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/steps/Setup.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/steps/Setup.tsx @@ -1,6 +1,6 @@ -import { WalletSetupSelectAccountsStepRevamp } from '@lace/core'; +import { WalletSetupSelectAccountsStep } from '@lace/core'; import React, { VFC } from 'react'; -import { useHardwareWallet } from '@views/browser/features/multi-wallet/hardware-wallet/context'; +import { useHardwareWallet } from '@views/browser/components/WalletOnboardingFlows/hardware-wallet/context'; import { useAnalyticsContext } from '@providers'; import { useWalletOnboarding } from '../../walletOnboardingContext'; @@ -11,7 +11,7 @@ export const Setup: VFC = () => { const { postHogActions } = useWalletOnboarding(); const { back, next, onNameAndAccountChange } = useHardwareWallet(); return ( - { diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/types.ts b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/types.ts similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/types.ts rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/types.ts diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/useWrapWithTimeout.ts b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/useWrapWithTimeout.ts similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/useWrapWithTimeout.ts rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/hardware-wallet/useWrapWithTimeout.ts diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/index.ts b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/index.ts new file mode 100644 index 000000000..d0a40b3ca --- /dev/null +++ b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/index.ts @@ -0,0 +1 @@ +export { WalletOnboardingFlows } from './WalletOnboardingFlows'; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/isHdWallet.ts b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/isHdWallet.ts similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/isHdWallet.ts rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/isHdWallet.ts diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/RestoreWallet.test.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/RestoreWallet.test.tsx similarity index 95% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/RestoreWallet.test.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/RestoreWallet.test.tsx index f0cdf2053..07cda2bb5 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/RestoreWallet.test.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/RestoreWallet.test.tsx @@ -27,7 +27,7 @@ import { UseWalletManager } from '@hooks/useWalletManager'; import { AnalyticsTracker, postHogMultiWalletActions } from '@providers/AnalyticsProvider/analyticsTracker'; import { MemoryRouter } from 'react-router-dom'; import { walletRoutePaths } from '@routes'; -import { WalletOnboardingFlows } from '@views/browser/features/multi-wallet/WalletOnboardingFlows'; +import { WalletOnboardingFlows } from '@views/browser/components/WalletOnboardingFlows/WalletOnboardingFlows'; jest.mock('@providers/AnalyticsProvider', () => ({ useAnalyticsContext: jest.fn, []>().mockReturnValue({ diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/RestoreWallet.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/RestoreWallet.tsx similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/RestoreWallet.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/RestoreWallet.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/context.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/context.tsx similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/context.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/context.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/index.ts b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/index.ts similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/index.ts rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/index.ts diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/steps/RestoreRecoveryPhrase.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/steps/RestoreRecoveryPhrase.tsx similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/steps/RestoreRecoveryPhrase.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/steps/RestoreRecoveryPhrase.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/steps/Setup.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/steps/Setup.tsx similarity index 96% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/steps/Setup.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/steps/Setup.tsx index 5d07407db..506fb24df 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/steps/Setup.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/restore-wallet/steps/Setup.tsx @@ -1,4 +1,4 @@ -import { WalletSetupNamePasswordStepRevamp } from '@lace/core'; +import { WalletSetupNamePasswordStep } from '@lace/core'; import React from 'react'; import { useRestoreWallet } from '../context'; import { useTranslation } from 'react-i18next'; @@ -49,7 +49,7 @@ export const Setup = (): JSX.Element => { }; return ( - & Record<'hardware', PostHogOnboardingActions['hw']>); + | Pick; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/useHotWalletCreation.ts b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/useHotWalletCreation.ts similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/useHotWalletCreation.ts rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/useHotWalletCreation.ts diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/walletOnboardingContext.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/walletOnboardingContext.tsx similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/walletOnboardingContext.tsx rename to apps/browser-extension-wallet/src/views/browser-view/components/WalletOnboardingFlows/walletOnboardingContext.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/index.ts b/apps/browser-extension-wallet/src/views/browser-view/components/index.ts index 5fa6767bd..f2f2d087c 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/components/index.ts +++ b/apps/browser-extension-wallet/src/views/browser-view/components/index.ts @@ -10,3 +10,4 @@ export * from './SocialNetworks'; export * from './WalletUsedAddressesDrawer'; export * from './TopUpWallet'; export * from './EmptySearch'; +export * from './WalletOnboardingFlows'; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/MultiWallet.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/MultiWallet.tsx index 528174946..8f489f849 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/MultiWallet.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/MultiWallet.tsx @@ -1,13 +1,13 @@ /* eslint-disable unicorn/no-null */ import { NavigationButton } from '@lace/common'; -import { WalletSetupConfirmationDialogProvider, WalletSetupFlow, WalletSetupFlowProvider } from '@lace/core'; +import { WalletSetupConfirmationDialogProvider } from '@lace/core'; import { useBackgroundPage } from '@providers/BackgroundPageProvider'; import { walletRoutePaths } from '@routes'; import { Modal } from 'antd'; import React from 'react'; import { useHistory } from 'react-router-dom'; import styles from './MultiWallet.module.scss'; -import { WalletOnboardingFlows } from './WalletOnboardingFlows'; +import { WalletOnboardingFlows } from '../../components'; import { postHogMultiWalletActions } from '@providers/AnalyticsProvider/analyticsTracker'; import { Home } from './Home'; @@ -16,29 +16,26 @@ export const MultiWallet = (): JSX.Element => { const { page, setBackgroundPage } = useBackgroundPage(); return ( - - - {({ isDialogOpen, withConfirmationDialog, shouldShowDialog$ }) => ( - -
- { - setBackgroundPage(); - history.push(page); - })} - /> -
- } - setFormDirty={(dirty) => shouldShowDialog$.next(dirty)} - urlPath={walletRoutePaths.newWallet} + + {({ isDialogOpen, withConfirmationDialog, shouldShowDialog$ }) => ( + +
+ { + setBackgroundPage(); + history.push(page); + })} /> - - )} - - +
+ } + setFormDirty={(dirty) => shouldShowDialog$.next(dirty)} + urlPath={walletRoutePaths.newWallet} + /> + + )} + ); }; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/PinExtension.module.scss similarity index 82% rename from apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.module.scss rename to apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/PinExtension.module.scss index 52cf2f14a..f29332932 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.module.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/PinExtension.module.scss @@ -1,5 +1,5 @@ -@import '../../../../../../../../packages/common/src/ui/styles/theme.scss'; -@import '../../../../../../../../packages/common/src/ui/styles/abstracts/typography'; +@import '../../../../../../../packages/common/src/ui/styles/theme'; +@import '../../../../../../../packages/common/src/ui/styles/abstracts/typography'; .pinExtension { display: flex; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/PinExtension.tsx similarity index 84% rename from apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.tsx rename to apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/PinExtension.tsx index cbe7f29e2..a6c44fcf3 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/PinExtension.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styles from './PinExtension.module.scss'; -import LaceLogoMark from '../../../../../assets/branding/lace-logo-mark.component.svg'; -import ExtensionIcon from '../../../../../assets/icons/extension.component.svg'; +import LaceLogoMark from '@assets/branding/lace-logo-mark.component.svg'; +import ExtensionIcon from '@assets/icons/extension.component.svg'; import { useTranslation, Trans } from 'react-i18next'; import { useAnalyticsContext } from '@providers'; import { postHogOnboardingActions } from '@providers/AnalyticsProvider/analyticsTracker'; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/Portal.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/Portal.module.scss similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/Portal.module.scss rename to apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/Portal.module.scss diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/Portal.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/Portal.tsx similarity index 85% rename from apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/Portal.tsx rename to apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/Portal.tsx index 4a801061e..5c38817f9 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/Portal.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/Portal.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import portal from '../../../../../assets/images/portal.png'; -import portal2 from '../../../../../assets/images/portal2.png'; +import portal from '@assets/images/portal.png'; +import portal2 from '@assets/images/portal2.png'; import styles from './Portal.module.scss'; import { walletRoutePaths } from '@routes/wallet-paths'; import { useLocation } from 'react-router-dom'; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetup.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/WalletSetup.module.scss similarity index 89% rename from apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetup.module.scss rename to apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/WalletSetup.module.scss index 2f4a15de5..b9d57e5d5 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetup.module.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/WalletSetup.module.scss @@ -1,4 +1,4 @@ -@import '../../../../../../../../packages/common/src/ui/styles/theme.scss'; +@import '../../../../../../../packages/common/src/ui/styles/theme'; :global(.ant-input-password > input[type='password']) { letter-spacing: size_unit(0.75) !important; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetup.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/WalletSetup.tsx similarity index 87% rename from apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetup.tsx rename to apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/WalletSetup.tsx index 7b9137378..4d29ff40d 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetup.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/WalletSetup.tsx @@ -7,8 +7,7 @@ import { ENHANCED_ANALYTICS_OPT_IN_STATUS_LS_KEY } from '@providers/AnalyticsPro import { WalletSetupMainPage } from './WalletSetupMainPage'; import { useLocalStorage } from '@hooks'; import { EnhancedAnalyticsOptInStatus, postHogOnboardingActions } from '@providers/AnalyticsProvider/analyticsTracker'; -import { WalletOnboardingFlows } from '@views/browser/features/multi-wallet/WalletOnboardingFlows'; -import { WalletSetupLayout } from '@views/browser/components'; +import { WalletOnboardingFlows, WalletSetupLayout } from '@views/browser/components'; export const WalletSetup = (): React.ReactElement => { const isForgotPasswordFlow = getValueFromLocalStorage('isForgotPasswordFlow'); @@ -42,10 +41,7 @@ export const WalletSetup = (): React.ReactElement => { aliasEventRequired flowsEnabled={enhancedAnalyticsStatus !== EnhancedAnalyticsOptInStatus.NotSet} forgotPasswordFlowActive={isForgotPasswordFlow} - postHogActions={{ - ...postHogOnboardingActions, - hardware: postHogOnboardingActions.hw - }} + postHogActions={postHogOnboardingActions} renderHome={() => } urlPath={walletRoutePaths.setup} /> diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupMainPage.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/WalletSetupMainPage.tsx similarity index 97% rename from apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupMainPage.tsx rename to apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/WalletSetupMainPage.tsx index b62f81a80..af430de6c 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupMainPage.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/WalletSetupMainPage.tsx @@ -2,7 +2,7 @@ import React, { ReactElement, useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { WarningModal } from '@views/browser/components'; import { AnalyticsConfirmationBanner, WalletAnalyticsInfo, WalletSetupOptionsStepRevamp } from '@lace/core'; -import styles from '@views/browser/features/wallet-setup/components/WalletSetup.module.scss'; +import styles from '@views/browser/features/wallet-setup/WalletSetup.module.scss'; import { walletRoutePaths } from '@routes'; import { EnhancedAnalyticsOptInStatus, @@ -75,7 +75,7 @@ export const WalletSetupMainPage = (): ReactElement => { const handleStartHardwareOnboarding = () => { history.push(walletRoutePaths.setup.hardware); - analytics.sendEventToPostHog(postHogOnboardingActions.hw?.SETUP_OPTION_CLICK); + analytics.sendEventToPostHog(postHogOnboardingActions.hardware.SETUP_OPTION_CLICK); }; const handleAnalyticsChoice = async (isAccepted: boolean) => { diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/Fallback.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/Fallback.module.scss deleted file mode 100644 index ae821e3a6..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/Fallback.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import '../../../../../../../../packages/common/src/ui/styles/theme.scss'; - -.fallback { - @include flex-center; - height: 100%; - - :global(.ant-spin) { - color: $theme-primary; - } -} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/Fallback.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/Fallback.tsx deleted file mode 100644 index 278034288..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/Fallback.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { Spin } from 'antd'; -import { LoadingOutlined } from '@ant-design/icons'; - -import styles from './Fallback.module.scss'; - -export const Fallback = (): React.ReactElement => ( -
- } spinning /> -
-); diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/HardwareWalletFlow.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/HardwareWalletFlow.tsx deleted file mode 100644 index 2fcdcf58f..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/HardwareWalletFlow.tsx +++ /dev/null @@ -1,178 +0,0 @@ -/* eslint-disable unicorn/no-useless-undefined */ -import { useTimeSpentOnPage } from '@hooks'; -import { WalletSetupSelectAccountsStepRevamp } from '@lace/core'; -import React, { useCallback, useEffect, useState } from 'react'; -import { Redirect, Route, Switch, useHistory } from 'react-router-dom'; -import { Wallet } from '@lace/cardano'; -import { WalletSetupLayout } from '@src/views/browser-view/components/Layout'; -import { makeErrorDialog } from './makeErrorDialog'; -import { StartOverDialog } from '@views/browser/features/wallet-setup/components/StartOverDialog'; -import { walletRoutePaths } from '@routes/wallet-paths'; -import { StepConnect } from './StepConnect'; -import { WalletType } from '@cardano-sdk/web-extension'; -import { StepCreate, WalletData } from './StepCreate'; -import { useAnalyticsContext } from '@providers'; -import { postHogOnboardingActions } from '@providers/AnalyticsProvider/analyticsTracker'; - -export interface HardwareWalletFlowProps { - onCancel: () => void; -} - -const TOTAL_ACCOUNTS = 50; -const route = (path: FlowStep) => `${walletRoutePaths.setup.hardware}/${path}`; - -enum FlowStep { - Connect = 'Connect', - Setup = 'Setup', - Create = 'Create' -} - -enum ErrorDialogCode { - DeviceDisconnected = 'DeviceDisconnected', - PublicKeyExportRejected = 'PublicKeyExportRejected', - Generic = 'Generic' -} - -const commonErrorDialogTranslationKeys = { - title: 'browserView.onboarding.errorDialog.title' as const, - confirm: 'browserView.onboarding.errorDialog.cta' as const -}; -const ErrorDialog = makeErrorDialog({ - [ErrorDialogCode.DeviceDisconnected]: { - ...commonErrorDialogTranslationKeys, - description: 'browserView.onboarding.errorDialog.messageDeviceDisconnected' - }, - [ErrorDialogCode.PublicKeyExportRejected]: { - ...commonErrorDialogTranslationKeys, - description: 'browserView.onboarding.errorDialog.messagePublicKeyExportRejected' - }, - [ErrorDialogCode.Generic]: { - ...commonErrorDialogTranslationKeys, - description: 'browserView.onboarding.errorDialog.messageGeneric' - } -}); - -export const HardwareWalletFlow = ({ onCancel }: HardwareWalletFlowProps): React.ReactElement => { - const history = useHistory(); - const [connectedUsbDevice, setConnectedUsbDevice] = useState(); - const [errorDialogCode, setErrorDialogCode] = useState(); - const [isStartOverDialogVisible, setIsStartOverDialogVisible] = useState(false); - const [connection, setConnection] = useState(); - const [walletData, setWalletData] = useState(); - const { updateEnteredAtTime } = useTimeSpentOnPage(); - const analytics = useAnalyticsContext(); - - useEffect(() => { - updateEnteredAtTime(); - }, [history.location.pathname, updateEnteredAtTime]); - - useEffect(() => { - const onHardwareWalletDisconnect = (event: USBConnectionEvent) => { - if (event.device !== connectedUsbDevice || !connection) return; - setErrorDialogCode(ErrorDialogCode.DeviceDisconnected); - }; - - navigator.usb.addEventListener('disconnect', onHardwareWalletDisconnect); - return () => { - navigator.usb.removeEventListener('disconnect', onHardwareWalletDisconnect); - }; - }, [connectedUsbDevice, connection]); - - const navigateTo = useCallback( - (nexthPath: FlowStep) => { - history.replace(route(nexthPath)); - }, - [history] - ); - - const onConnected = useCallback( - (result?: Wallet.HardwareWalletConnection) => { - if (result) { - setConnection(result); - } - navigateTo(FlowStep.Setup); - }, - [navigateTo] - ); - - const closeConnection = () => { - if (connection.type === WalletType.Ledger) { - void connection.value.transport.close(); - } - }; - - const onAccountAndNameSubmit = async (accountIndex: number, name: string) => { - setWalletData({ - accountIndex, - name - }); - navigateTo(FlowStep.Create); - }; - - const cleanupConnectionState = () => { - setConnection(undefined); - navigateTo(FlowStep.Connect); - closeConnection(); - }; - - const onRetry = () => { - setErrorDialogCode(undefined); - cleanupConnectionState(); - }; - - const handleStartOver = () => { - setIsStartOverDialogVisible(false); - cleanupConnectionState(); - }; - - const onWalletCreateError = (error: Error) => { - let errorCode: ErrorDialogCode = ErrorDialogCode.Generic; - - const ledgerPkRejection = - error.message.includes('Failed to export extended account public key') && - error.message.includes('Action rejected by user'); - const trezorPkRejection = error.message.includes('Trezor transport failed'); - if (ledgerPkRejection || trezorPkRejection) { - errorCode = ErrorDialogCode.PublicKeyExportRejected; - } - - setErrorDialogCode(errorCode); - closeConnection(); - }; - - return ( - <> - {!!errorDialogCode && } - setIsStartOverDialogVisible(false)} - /> - - - - - - {!!connection && ( - <> - - setIsStartOverDialogVisible(true)} - onSubmit={onAccountAndNameSubmit} - onSelectedAccountChange={() => { - void analytics.sendEventToPostHog(postHogOnboardingActions.hw?.SETUP_HW_ACCOUNT_NO_CLICK); - }} - /> - - - - - - )} - - - - - ); -}; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/StepConnect.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/StepConnect.tsx deleted file mode 100644 index 6f19a3634..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/StepConnect.tsx +++ /dev/null @@ -1,144 +0,0 @@ -/* eslint-disable unicorn/no-null */ -import { UseWalletManager, useWalletManager } from '@hooks'; -import { Wallet } from '@lace/cardano'; -import { WalletSetupConnectHardwareWalletStepRevamp } from '@lace/core'; -import type { TranslationKey } from '@lace/translation'; -import { TFunction } from 'i18next'; -import React, { useCallback, useEffect, useState, VFC } from 'react'; -import { useTranslation } from 'react-i18next'; -import { useAnalyticsContext } from '@providers'; -import { postHogOnboardingActions } from '@providers/AnalyticsProvider/analyticsTracker'; - -export const isTrezorHWSupported = (): boolean => process.env.USE_TREZOR_HW === 'true'; - -const requestHardwareWalletConnection = (): Promise => - navigator.usb.requestDevice({ - filters: isTrezorHWSupported() ? Wallet.supportedHwUsbDescriptors : Wallet.ledgerDescriptors - }); - -const threeSecondsTimeout = 3000; -const timeoutErrorMessage = 'Timeout. Connecting too long.'; - -const isTimeoutError = (error: Error): boolean => error.message === timeoutErrorMessage; - -const useConnectHardwareWalletWithTimeout = (connect: UseWalletManager['connectHardwareWalletRevamped']) => - useCallback( - async (usbDevice: USBDevice) => { - const result = await Promise.race([ - connect(usbDevice), - new Promise<'timeout'>((resolve) => setTimeout(() => resolve('timeout'), threeSecondsTimeout)) - ]); - - if (result === 'timeout') { - throw new Error(timeoutErrorMessage); - } - - return result; - }, - [connect] - ); - -type ConnectionError = - | 'userGestureRequired' - | 'devicePickerRejected' - | 'deviceLocked' - | 'deviceBusy' - | 'cardanoAppNotOpen' - | 'generic'; - -const connectionSubtitleErrorTranslationsMap: Record = { - cardanoAppNotOpen: 'core.walletSetupConnectHardwareWalletStepRevamp.errorMessage.cardanoAppNotOpen', - deviceLocked: 'core.walletSetupConnectHardwareWalletStepRevamp.errorMessage.deviceLocked', - deviceBusy: 'core.walletSetupConnectHardwareWalletStepRevamp.errorMessage.deviceBusy', - devicePickerRejected: 'core.walletSetupConnectHardwareWalletStepRevamp.errorMessage.devicePickerRejected', - userGestureRequired: 'core.walletSetupConnectHardwareWalletStepRevamp.errorMessage.userGestureRequired', - generic: 'core.walletSetupConnectHardwareWalletStepRevamp.errorMessage.generic' -}; - -const makeTranslations = ({ connectionError, t }: { connectionError: ConnectionError; t: TFunction }) => ({ - title: t('core.walletSetupConnectHardwareWalletStepRevamp.title'), - subTitle: isTrezorHWSupported() - ? t('core.walletSetupConnectHardwareWalletStepRevamp.subTitle') - : t('core.walletSetupConnectHardwareWalletStepRevamp.subTitleLedgerOnly'), - errorMessage: connectionError ? t(connectionSubtitleErrorTranslationsMap[connectionError]) : '', - errorCta: t('core.walletSetupConnectHardwareWalletStepRevamp.errorCta') -}); - -const parseConnectionError = (error: Error): ConnectionError | null => { - if (error instanceof DOMException) { - if (error.message.includes('user gesture')) return 'userGestureRequired'; - if (error.message.includes('No device selected')) return 'devicePickerRejected'; - } - if (isTimeoutError(error)) return 'deviceBusy'; - if (error.message.includes('Cannot communicate with Ledger Cardano App')) { - if (error.message.includes('General error 0x5515')) return 'deviceLocked'; - if (error.message.includes('General error 0x6e01')) return 'cardanoAppNotOpen'; - } - return 'generic'; -}; - -enum DiscoveryState { - Idle = 'Idle', - Requested = 'Requested', - Running = 'Running' -} - -type StepConnectProps = { - onBack: () => void; - onConnected: (result?: Wallet.HardwareWalletConnection) => void; - onUsbDeviceChange: (usbDevice: USBDevice) => void; -}; - -export const StepConnect: VFC = ({ onBack, onConnected, onUsbDeviceChange }) => { - const { t } = useTranslation(); - const [discoveryState, setDiscoveryState] = useState(DiscoveryState.Requested); - const [connectionError, setConnectionError] = useState(null); - const { connectHardwareWalletRevamped } = useWalletManager(); - const analytics = useAnalyticsContext(); - - const translations = makeTranslations({ connectionError, t }); - const connect = useConnectHardwareWalletWithTimeout(connectHardwareWalletRevamped); - - const onRetry = useCallback(() => { - setDiscoveryState(DiscoveryState.Requested); - setConnectionError(null); - void analytics.sendEventToPostHog(postHogOnboardingActions.hw?.CONNECT_HW_TRY_AGAIN_CLICK); - }, [analytics]); - - useEffect(() => { - (async () => { - if (discoveryState !== DiscoveryState.Requested) return; - - setDiscoveryState(DiscoveryState.Running); - let connectionResult: Wallet.HardwareWalletConnection; - try { - void analytics.sendEventToPostHog(postHogOnboardingActions.hw?.CONNECT_HW_VIEW); - const usbDevice = await requestHardwareWalletConnection(); - onUsbDeviceChange(usbDevice); - connectionResult = await connect(usbDevice); - onConnected(connectionResult); - void analytics.sendEventToPostHog(postHogOnboardingActions.hw?.HW_POPUP_CONNECT_CLICK); - setDiscoveryState(DiscoveryState.Idle); - } catch (error) { - setDiscoveryState(DiscoveryState.Idle); - console.error('ERROR connecting hardware wallet', error); - - if (error.innerError?.innerError?.message === 'The device is already open.') { - onConnected(); - return; - } - - setConnectionError(parseConnectionError(error)); - } - })(); - }, [connect, discoveryState, onUsbDeviceChange, onConnected, analytics]); - - return ( - - ); -}; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/StepCreate.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/StepCreate.tsx deleted file mode 100644 index 1b7ffc593..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/StepCreate.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { Wallet } from '@lace/cardano'; -import { WalletSetupHWCreationStep } from '@lace/core'; -import { EnhancedAnalyticsOptInStatus, postHogOnboardingActions } from '@providers/AnalyticsProvider/analyticsTracker'; -import { TFunction } from 'i18next'; -import React, { VFC, useMemo, useEffect, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { useLocalStorage, useWalletManager } from '@hooks'; -import { config } from '@src/config'; -import { useAnalyticsContext } from '@providers'; -import { ENHANCED_ANALYTICS_OPT_IN_STATUS_LS_KEY } from '@providers/AnalyticsProvider/config'; - -const { CHAIN } = config(); - -const makeWalletSetupCreateStepTranslations = (t: TFunction) => ({ - title: t('core.walletSetupCreateStep.title'), - description: t('core.walletSetupCreateStep.description') -}); - -enum CreationState { - Idle = 'Idle', - Working = 'Working' -} - -export type WalletData = { - accountIndex: number; - name: string; -}; - -type StepCreateProps = { - connection: Wallet.HardwareWalletConnection; - onError: (error: Error) => void; - walletData: WalletData; -}; - -export const StepCreate: VFC = ({ connection, onError, walletData }) => { - const { t } = useTranslation(); - const [status, setStatus] = useState(CreationState.Idle); - const { createHardwareWalletRevamped, saveHardwareWallet } = useWalletManager(); - const analytics = useAnalyticsContext(); - const [enhancedAnalyticsStatus] = useLocalStorage( - ENHANCED_ANALYTICS_OPT_IN_STATUS_LS_KEY, - EnhancedAnalyticsOptInStatus.OptedOut - ); - - const walletSetupCreateStepTranslations = useMemo(() => makeWalletSetupCreateStepTranslations(t), [t]); - - useEffect(() => { - (async () => { - if (status !== CreationState.Idle) return; - setStatus(CreationState.Working); - - let cardanoWallet: Wallet.CardanoWallet; - try { - cardanoWallet = await createHardwareWalletRevamped({ - connection, - ...walletData - }); - } catch (error) { - console.error('ERROR creating hardware wallet', { error }); - onError(error); - throw error; - } - - const deviceSpec = await Wallet.getDeviceSpec(connection); - void analytics.sendEventToPostHog(postHogOnboardingActions.hw.ENTER_WALLET, { - /* eslint-disable camelcase */ - $set_once: { - initial_hardware_wallet_model: deviceSpec.model, - initial_firmware_version: deviceSpec?.firmwareVersion, - initial_cardano_app_version: deviceSpec?.cardanoAppVersion - }, - $set: { wallet_accounts_quantity: '1' } - /* eslint-enable camelcase */ - }); - - await saveHardwareWallet(cardanoWallet, CHAIN); - if (enhancedAnalyticsStatus === EnhancedAnalyticsOptInStatus.OptedIn) { - await analytics.sendAliasEvent(); - } - })(); - }, [ - analytics, - connection, - createHardwareWalletRevamped, - enhancedAnalyticsStatus, - onError, - saveHardwareWallet, - status, - walletData - ]); - - return ; -}; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/index.ts b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/index.ts deleted file mode 100644 index c7bf754c0..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { HardwareWalletFlow } from './HardwareWalletFlow'; -export { makeErrorDialog } from './makeErrorDialog'; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/makeErrorDialog.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/makeErrorDialog.module.scss deleted file mode 100644 index 79059e6cb..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/makeErrorDialog.module.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import '../../../../../../../../../packages/common/src/ui/styles/theme'; -@import '../../../../../../../../../packages/common/src/ui/styles/abstracts/typography'; - -.errorDialog { - :global(.ant-modal-content) { - background: var(--color-white, var(--dark-mode-light-black)); - box-shadow: var(--shadow-setup-box); - border-radius: size_unit(4); - } - :global(.ant-modal-body) { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: size_unit(5) !important; - } -} - -.title { - font-size: var(--subHeading) !important; - font-weight: 700 !important; - line-height: size_unit(4) !important; - color: var(--text-color-primary) !important; - margin-bottom: 0 !important; -} - -.description { - font-size: var(--bodyLarge) !important; - font-weight: 500 !important; - line-height: size_unit(3) !important; - color: var(--text-color-secondary) !important; - margin-top: size_unit(3) !important; - text-align: center; -} - -.retryButton { - margin-top: size_unit(3) !important; -} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/makeErrorDialog.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/makeErrorDialog.tsx deleted file mode 100644 index 46adbbb75..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/makeErrorDialog.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import type { TranslationKey } from '@lace/translation'; -import React from 'react'; -import { Modal, Typography } from 'antd'; -import { Button } from '@lace/common'; -import styles from './makeErrorDialog.module.scss'; -import { useTranslation } from 'react-i18next'; - -const { Title, Text } = Typography; - -type TranslationKeys = Record<'title' | 'description' | 'confirm', TranslationKey>; - -export interface ErrorDialogProps { - visible: boolean; - onRetry: () => void; - errorCode?: ErrorCode; -} - -export const makeErrorDialog = - (translationsMap: Record) => - ({ visible, onRetry, errorCode }: ErrorDialogProps): React.ReactElement => { - const { t } = useTranslation(); - const errorTranslationKeys = translationsMap[errorCode]; - - return ( - - - {t(errorTranslationKeys.title)} - - {t(errorTranslationKeys.description)} - - - ); - }; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx deleted file mode 100644 index d29788d28..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx +++ /dev/null @@ -1,338 +0,0 @@ -/* eslint-disable complexity, sonarjs/cognitive-complexity, max-statements, sonarjs/no-duplicate-string, unicorn/no-nested-ternary */ -import React, { Suspense, useCallback, useEffect, useState } from 'react'; -import { Trans, useTranslation } from 'react-i18next'; -import { wordlists } from 'bip39'; -import { useTimeSpentOnPage, useWalletManager } from '@hooks'; -import { - WalletSetupMnemonicStage, - MnemonicVideoPopupContent, - WalletSetupNamePasswordStepRevamp, - WalletSetupSteps, - walletSetupWizard -} from '@lace/core'; -import { Wallet } from '@lace/cardano'; -import { WalletSetupLayout } from '@src/views/browser-view/components/Layout'; -import { WarningModal } from '@src/views/browser-view/components/WarningModal'; -import { PostHogAction, postHogOnboardingActions } from '@providers/AnalyticsProvider/analyticsTracker'; -import { config } from '@src/config'; -import { Fallback } from './Fallback'; -import { deleteFromLocalStorage } from '@src/utils/local-storage'; -import { useAnalyticsContext } from '@providers'; -import * as process from 'process'; -import { SendOnboardingAnalyticsEvent, SetupType } from '../types'; -import { isScriptAddress } from '@cardano-sdk/wallet'; -import { getWalletFromStorage } from '@src/utils/get-wallet-from-storage'; -import { toast } from '@lace/common'; -import Copy from '@src/assets/icons/copy.component.svg'; -import Paste from '@src/assets/icons/paste.component.svg'; - -const WalletSetupModeStep = React.lazy(() => - import('@lace/core').then((module) => ({ default: module.WalletSetupModeStep })) -); - -const WalletSetupMnemonicStepRevamp = React.lazy(() => - import('@lace/core').then((module) => ({ default: module.WalletSetupMnemonicStepRevamp })) -); - -const WalletSetupMnemonicVerificationStepRevamp = React.lazy(() => - import('@lace/core').then((module) => ({ default: module.WalletSetupMnemonicVerificationStepRevamp })) -); - -const wordList = wordlists.english; -const { CHAIN } = config(); -const { - KeyManagement: { util }, - Cardano: { ChainIds } -} = Wallet; -const DEFAULT_CHAIN_ID = ChainIds[CHAIN]; - -export interface WalletSetupWizardProps { - setupType: SetupType; - onCancel: () => void; - sendAnalytics: SendOnboardingAnalyticsEvent; - initialStep?: WalletSetupSteps; -} - -const DEFAULT_MNEMONIC_LENGTH = 24; -const COPY_PASTE_TOOLTIP_URL = `${process.env.FAQ_URL}?question=best-practices-for-using-the-copy-to-clipboard-paste-from-clipboard-recovery-phrase-features`; - -const twoSecondsToastDuration = 1.5; - -export const WalletSetupWizard = ({ - onCancel, - setupType, - sendAnalytics, - initialStep = WalletSetupSteps.Register -}: WalletSetupWizardProps): React.ReactElement => { - const [currentStep, setCurrentStep] = useState(initialStep); - const [mnemonicLength, setMnemonicLength] = useState(DEFAULT_MNEMONIC_LENGTH); - const [mnemonic, setMnemonic] = useState([]); - const [currentSetupMnemonicStage, setCurrentSetupMnemonicStage] = useState('writedown'); - const [isResetMnemonicModalOpen, setIsResetMnemonicModalOpen] = useState(false); - const walletName = getWalletFromStorage()?.name; - const { createWallet } = useWalletManager(); - const analytics = useAnalyticsContext(); - const { t } = useTranslation(); - - const { updateEnteredAtTime } = useTimeSpentOnPage(); - useEffect(() => { - updateEnteredAtTime(); - }, [currentStep, updateEnteredAtTime]); - - useEffect(() => { - setMnemonic( - [SetupType.RESTORE, SetupType.FORGOT_PASSWORD].includes(setupType) - ? () => Array.from({ length: mnemonicLength }).map(() => '') - : util.generateMnemonicWords() - ); - }, [mnemonicLength, setupType]); - - const handleReadMoreOnClick = () => { - if (setupType === SetupType.RESTORE) { - sendAnalytics(postHogOnboardingActions.restore.RECOVERY_PHRASE_PASTE_READ_MORE_CLICK); - return; - } - - currentSetupMnemonicStage === 'writedown' - ? sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_COPY_READ_MORE_CLICK) - : sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_PASTE_READ_MORE_CLICK); - }; - - const walletSetupMnemonicStepTranslations = { - writePassphraseTitle: t('core.walletSetupMnemonicStepRevamp.writePassphraseTitle'), - enterPassphrase: t('core.walletSetupMnemonicStepRevamp.enterPassphrase'), - enterPassphraseDescription: t('core.walletSetupMnemonicStepRevamp.enterPassphraseDescription'), - writePassphraseSubtitle1: t('core.walletSetupMnemonicStepRevamp.writePassphraseSubtitle1'), - writePassphraseSubtitle2: t('core.walletSetupMnemonicStepRevamp.writePassphraseSubtitle2'), - passphraseError: t('core.walletSetupMnemonicStepRevamp.passphraseError'), - enterPassphraseLength: t('core.walletSetupMnemonicStepRevamp.enterPassphraseLength'), - copyToClipboard: t('core.walletSetupMnemonicStepRevamp.copyToClipboard'), - pasteFromClipboard: t('core.walletSetupMnemonicStepRevamp.pasteFromClipboard'), - copyPasteTooltipText: ( - - ) - }} - /> - ) - }; - - const walletSetupModeStepTranslations = { - title: t('core.walletSetupWalletModeStep.title'), - modes: t('core.walletSetupWalletModeStep.modes'), - instructions: t('core.walletSetupWalletModeStep.instructions'), - lightWalletOption: t('core.walletSetupWalletModeStep.lightWalletOption'), - fullNodeOption: t('core.walletSetupWalletModeStep.fullNodeOption'), - lightWalletDescription: t('core.walletSetupWalletModeStep.lightWalletDescription'), - fullNodeWalletDescription: t('core.walletSetupWalletModeStep.fullNodeWalletDescription') - }; - - const mnemonicVideoPopupContentTranslations = { - title: t('core.mnemonicVideoPopupContent.title'), - description: t('core.mnemonicVideoPopupContent.description'), - linkText: t('core.mnemonicVideoPopupContent.link'), - closeButton: t('core.mnemonicVideoPopupContent.closeButton') - }; - - const walletSetupNamePasswordStepTranslations = { - title: - setupType === SetupType.FORGOT_PASSWORD - ? t('core.walletNameAndPasswordSetupStep.forgotPasswordTitle') - : t('core.walletNameAndPasswordSetupStep.title'), - description: - setupType === SetupType.FORGOT_PASSWORD - ? t('core.walletNameAndPasswordSetupStep.forgotPasswordSubtitle') - : t('core.walletNameAndPasswordSetupStep.description'), - nameInputLabel: t('core.walletNameAndPasswordSetupStep.nameInputLabel'), - nameMaxLength: t('core.walletNameAndPasswordSetupStep.nameMaxLength'), - passwordInputLabel: t('core.walletNameAndPasswordSetupStep.passwordInputLabel'), - confirmPasswordInputLabel: t('core.walletNameAndPasswordSetupStep.confirmPasswordInputLabel'), - nameRequiredMessage: t('core.walletNameAndPasswordSetupStep.nameRequiredMessage'), - noMatchPassword: t('core.walletNameAndPasswordSetupStep.noMatchPassword'), - confirmButton: t('core.walletNameAndPasswordSetupStep.enterWallet'), - secondLevelPasswordStrengthFeedback: t('core.walletNameAndPasswordSetupStep.secondLevelPasswordStrengthFeedback'), - firstLevelPasswordStrengthFeedback: t('core.walletNameAndPasswordSetupStep.firstLevelPasswordStrengthFeedback') - }; - - const moveBack = () => { - const prevStep = walletSetupWizard[currentStep].prev; - - if (prevStep) { - setCurrentStep(prevStep); - } else { - onCancel(); - } - }; - - const moveForward = useCallback(() => { - const nextStep = walletSetupWizard[currentStep].next; - setCurrentStep(nextStep); - }, [currentStep]); - - const handleCompleteCreation = useCallback( - async (name, password) => { - try { - const wallet = await createWallet({ - name, - mnemonic, - password, - chainId: DEFAULT_CHAIN_ID - }); - - wallet.wallet.addresses$.subscribe((addresses) => { - if (addresses.length === 0) return; - const hdWalletDiscovered = addresses.some((addr) => !isScriptAddress(addr) && addr.index > 0); - if (setupType === SetupType.RESTORE && hdWalletDiscovered) { - analytics.sendEventToPostHog(PostHogAction.OnboardingRestoreHdWallet); - } - }); - - if (setupType === SetupType.FORGOT_PASSWORD) { - deleteFromLocalStorage('isForgotPasswordFlow'); - } else { - moveForward(); - } - } catch (error) { - console.error('Error completing wallet creation', error); - throw new Error(error); - } - }, - [createWallet, mnemonic, analytics, setupType, moveForward] - ); - - const handleSubmit = async (result: { password: string; walletName: string }) => { - void sendAnalytics(postHogOnboardingActions[setupType]?.ENTER_WALLET); - await handleCompleteCreation(result.walletName, result.password); - void analytics.sendAliasEvent(); - }; - - const handleMnemonicVerification = () => { - sendAnalytics(postHogOnboardingActions[setupType]?.ENTER_RECOVERY_PHRASE_NEXT_CLICK); - moveForward(); - }; - - const renderedMnemonicStep = () => { - if ([SetupType.RESTORE, SetupType.FORGOT_PASSWORD].includes(setupType)) { - const isMnemonicSubmitEnabled = util.validateMnemonic(util.joinMnemonicWords(mnemonic)); - return ( - setMnemonicLength(value)} - onPasteFromClipboard={() => { - sendAnalytics(postHogOnboardingActions[setupType]?.RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK); - toast.notify({ - duration: twoSecondsToastDuration, - text: t('core.walletSetupMnemonicStepRevamp.recoveryPhrasePasted'), - icon: Paste - }); - }} - /> - ); - } - - return ( - { - if (nextStage === 'input') { - setCurrentSetupMnemonicStage(nextStage); - void sendAnalytics(postHogOnboardingActions.create.SAVE_RECOVERY_PHRASE_NEXT_CLICK); - } else { - setIsResetMnemonicModalOpen(true); - } - }} - onBack={onCancel} - onNext={() => { - moveForward(); - void sendAnalytics(postHogOnboardingActions.create.ENTER_RECOVERY_PHRASE_NEXT_CLICK); - }} - renderVideoPopupContent={({ onClose }) => ( - { - onClose(); - void sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_INTRO_VIDEO_GOTIT_CLICK); - }} - /> - )} - translations={walletSetupMnemonicStepTranslations} - suggestionList={wordList} - passphraseInfoLink={`${process.env.FAQ_URL}?question=what-happens-if-i-lose-my-recovery-phrase`} - onWatchVideoClick={() => sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_INTRO_WATCH_VIDEO_CLICK)} - onCopyToClipboard={() => { - sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_COPY_TO_CLIPBOARD_CLICK); - toast.notify({ - duration: twoSecondsToastDuration, - text: t('core.walletSetupMnemonicStepRevamp.recoveryPhraseCopied'), - icon: Copy - }); - }} - onPasteFromClipboard={() => { - sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK); - toast.notify({ - duration: twoSecondsToastDuration, - text: t('core.walletSetupMnemonicStepRevamp.recoveryPhrasePasted'), - icon: Paste - }); - }} - /> - ); - }; - - return ( - - {currentStep === WalletSetupSteps.Mnemonic && ( - }>{renderedMnemonicStep()} - )} - {currentStep === WalletSetupSteps.Mode && ( - }> - - - )} - {currentStep === WalletSetupSteps.Register && ( - { - moveBack(); - }} - onNext={handleSubmit} - initialWalletName={walletName} - translations={walletSetupNamePasswordStepTranslations} - /> - )} - {setupType === SetupType.CREATE && isResetMnemonicModalOpen && ( - { - setIsResetMnemonicModalOpen(false); - }} - onConfirm={() => { - setMnemonic(util.generateMnemonicWords()); - setIsResetMnemonicModalOpen(false); - setCurrentSetupMnemonicStage('writedown'); - }} - /> - )} - - ); -}; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/index.ts b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/index.ts deleted file mode 100644 index 15c0ceef1..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './WalletSetup'; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/index.ts b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/index.ts index 07635cbbc..15c0ceef1 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/index.ts +++ b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/index.ts @@ -1 +1 @@ -export * from './components'; +export * from './WalletSetup'; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/types.ts b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/types.ts deleted file mode 100644 index 6bec8ab0e..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/types.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { PostHogProperties } from '@providers/AnalyticsProvider/analyticsTracker'; - -export type SendOnboardingAnalyticsEvent = ( - postHogAction: string, - postHogProperties?: PostHogProperties -) => Promise; - -export enum SetupType { - CREATE = 'create', - RESTORE = 'restore', - FORGOT_PASSWORD = 'forgot_password' -} diff --git a/apps/browser-extension-wallet/src/views/browser-view/routes/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/routes/index.tsx index 9a4ca17f0..f708957b5 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/routes/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/routes/index.tsx @@ -22,7 +22,7 @@ import { useEnterKeyPress } from '@hooks/useEnterKeyPress'; import { useAppSettingsContext } from '@providers/AppSettings'; import { useBackgroundPage } from '@providers/BackgroundPageProvider'; import { config } from '@src/config'; -import { Portal } from '../features/wallet-setup/components/Portal'; +import { Portal } from '../features/wallet-setup/Portal'; import { MultiWallet } from '../features/multi-wallet'; import { MainLoader } from '@components/MainLoader'; import { useAppInit } from '@hooks'; diff --git a/packages/cardano/src/wallet/lib/hardware-wallet.ts b/packages/cardano/src/wallet/lib/hardware-wallet.ts index 883d35fab..3cac9b5f4 100644 --- a/packages/cardano/src/wallet/lib/hardware-wallet.ts +++ b/packages/cardano/src/wallet/lib/hardware-wallet.ts @@ -68,7 +68,7 @@ const trezorModelTProductId = 0x53_c1; const trezorDescriptors = TREZOR_USB_DESCRIPTORS.filter(({ productId }) => productId === trezorModelTProductId); export const supportedHwUsbDescriptors = [...ledgerDescriptors, ...trezorDescriptors]; -export const connectDeviceRevamped = async (usbDevice: USBDevice): Promise => { +export const connectDeviceByUsbDeviceObject = async (usbDevice: USBDevice): Promise => { if (isDeviceDescribedBy(usbDevice, ledgerDescriptors)) { return { type: WalletType.Ledger, diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 40786cee6..6b3166623 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -40,7 +40,6 @@ export * from '@ui/components/VotingProcedures'; export * from '@ui/components/ProposalProcedures'; export * from '@ui/components/SharedWallet'; export * from '@ui/components/Account'; -export * from '@ui/components/WalletSetupRevamp'; export * from '@ui/components/ListEmptyState'; export * from '@ui/components/MidnightEventBanner'; export * from '@ui/components/MidnightPreLaunchSettingsBanner'; diff --git a/packages/core/src/ui/components/WalletSetupRevamp/MnemonicVideoPopupContent.module.scss b/packages/core/src/ui/components/WalletSetup/MnemonicVideoPopupContent.module.scss similarity index 100% rename from packages/core/src/ui/components/WalletSetupRevamp/MnemonicVideoPopupContent.module.scss rename to packages/core/src/ui/components/WalletSetup/MnemonicVideoPopupContent.module.scss diff --git a/packages/core/src/ui/components/WalletSetupRevamp/MnemonicVideoPopupContent.tsx b/packages/core/src/ui/components/WalletSetup/MnemonicVideoPopupContent.tsx similarity index 100% rename from packages/core/src/ui/components/WalletSetupRevamp/MnemonicVideoPopupContent.tsx rename to packages/core/src/ui/components/WalletSetup/MnemonicVideoPopupContent.tsx diff --git a/packages/core/src/ui/components/WalletSetup/MnemonicWordsConfirmInput.module.scss b/packages/core/src/ui/components/WalletSetup/MnemonicWordsConfirmInput.module.scss deleted file mode 100644 index 786ba1bcb..000000000 --- a/packages/core/src/ui/components/WalletSetup/MnemonicWordsConfirmInput.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import '../../styles/theme.scss'; - -.mnemonicWordsConfirm { - flex-wrap: wrap; - display: grid; - grid-template-rows: 1fr; - grid-template-columns: 190px 190px; - row-gap: size_unit(2); - column-gap: size_unit(3); - - input { - border: none; - background: transparent; - outline: none; - } -} diff --git a/packages/core/src/ui/components/WalletSetup/MnemonicWordsConfirmInput.tsx b/packages/core/src/ui/components/WalletSetup/MnemonicWordsConfirmInput.tsx deleted file mode 100644 index 73cea60ad..000000000 --- a/packages/core/src/ui/components/WalletSetup/MnemonicWordsConfirmInput.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import styles from './MnemonicWordsConfirmInput.module.scss'; -import { MnemonicWordsAutoComplete } from '../MnemonicWordsAutoComplete'; - -export interface MnemonicWordsConfirmInputProps { - firstWordNumber: number; - words: string[]; - onChange: (words: string[]) => void; - onDropdownVisibleChange?: (open: boolean) => void; - suggestionList?: Array; - focus?: boolean; -} - -export const MnemonicWordsConfirmInput = ({ - firstWordNumber, - words, - onChange, - onDropdownVisibleChange, - suggestionList -}: MnemonicWordsConfirmInputProps): React.ReactElement => ( -
- {words.map((word, index) => ( - { - const newWords = [...words]; - newWords[index] = value; - onChange(newWords); - }} - onDropdownVisibleChange={onDropdownVisibleChange} - idx={index + firstWordNumber} - key={index} - wordList={suggestionList} - focus={index + firstWordNumber === firstWordNumber} - /> - ))} -
-); diff --git a/packages/core/src/ui/components/WalletSetup/SocialLink.module.scss b/packages/core/src/ui/components/WalletSetup/SocialLink.module.scss deleted file mode 100644 index 95d4df4e8..000000000 --- a/packages/core/src/ui/components/WalletSetup/SocialLink.module.scss +++ /dev/null @@ -1,49 +0,0 @@ -@import '../../styles/theme.scss'; - -.socialLink { - width: 100%; - background: var(--light-mode-light-grey, var(--dark-mode-grey)); - border-radius: 100px; - - display: flex; - align-items: center; - justify-content: space-between; - padding: size_unit(2) size_unit(3) size_unit(2) size_unit(2); - - outline: none; - font-weight: 600; - font-size: var(--body); - line-height: size_unit(3); - color: var(--text-color-primary); - - &:hover { - background: var(--light-mode-light-grey-plus-56, var(--dark-mode-mid-grey)); - } - - &:active, - &:focus { - background: var(--light-mode-light-grey, var(--dark-mode-dark-grey)); - } - - .logo { - width: size_unit(6); - height: size_unit(6); - border-radius: 100px; - background: var(--light-mode-black, #ffffff); - display: flex; - align-items: center; - justify-content: center; - font-size: var(--subHeading); - color: var(--bg-color-body, #ffffff); - } - - .content { - display: flex; - align-items: center; - gap: size_unit(2); - } - - .arrow { - color: var(--light-mode-dark-grey, var(--dark-mode-light-grey)); - } -} diff --git a/packages/core/src/ui/components/WalletSetup/SocialLink.tsx b/packages/core/src/ui/components/WalletSetup/SocialLink.tsx deleted file mode 100644 index 5d9502ab6..000000000 --- a/packages/core/src/ui/components/WalletSetup/SocialLink.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import styles from './SocialLink.module.scss'; -import { ReactComponent as ArrowRight } from '../../assets/icons/chevron-right.component.svg'; - -export interface SocialLinkProps { - icon?: React.ReactNode; - text: string; - to: string; - testId: string; -} - -// eslint-disable-next-line unicorn/no-null -export const SocialLink = ({ icon = null, text, to, testId }: SocialLinkProps): React.ReactElement => ( - -
-
- {icon} -
-

{text}

-
- - -); diff --git a/packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStep.module.scss b/packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStep.module.scss deleted file mode 100644 index 42f55f80e..000000000 --- a/packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStep.module.scss +++ /dev/null @@ -1,65 +0,0 @@ -@import '../../styles/theme.scss'; -@import '../../../../../common/src/ui/styles/abstracts/typography'; -$btn-gradient-border: 2px solid transparent; -$btn-gradient-bg: var(--light-mode-light-grey, var(--dark-mode-mid-grey)); -$btn-gradient-bg-hover: var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey)); - -.hdWalletsWrapper { - display: flex; - flex-direction: column; - gap: size_unit(2); - margin-bottom: size_unit(9); - margin-top: size_unit(8); -} - -.hdWallets { - align-items: center; - display: flex; - gap: size_unit(2); - justify-content: center; - width: 100%; - - .hdWallet { - flex: 1; - height: 104px; - display: flex; - align-items: center; - justify-content: center; - background: var(--light-mode-light-grey, var(--dark-mode-grey)); - box-sizing: border-box; - border-radius: size_unit(2); - cursor: pointer; - padding: 0; - border: none; - - &:hover { - background: var(--light-mode-light-grey-plus-56, var(--dark-mode-mid-grey)); - } - - &Active { - background-color: $btn-gradient-bg; - background: linear-gradient($btn-gradient-bg, $btn-gradient-bg) padding-box, var(--lace-gradient) border-box; - border: $btn-gradient-border; - &:hover { - background-color: $btn-gradient-bg-hover; - background: linear-gradient($btn-gradient-bg-hover, $btn-gradient-bg-hover) padding-box, var(--lace-gradient) border-box; - border: $btn-gradient-border; - } - } - } -} - -.subTitle { - @include text-body-regular; - color: var(--text-color-primary) !important; -} - -.text { - @include text-bodySmall-medium; - color: var(--text-color-secondary) !important; -} - -.logo { - font-size: 100px; - color: var(--text-color-primary) !important; -} diff --git a/packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStep.tsx b/packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStep.tsx deleted file mode 100644 index 00eda1abf..000000000 --- a/packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStep.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import React, { useState } from 'react'; -import { WalletSetupStepLayout, WalletTimelineSteps } from './WalletSetupStepLayout'; -import styles from './WalletSetupConnectHardwareWalletStep.module.scss'; -import Icon from '@ant-design/icons'; -import { ReactComponent as LedgerLogo } from '../../assets/icons/ledger-wallet.component.svg'; -import { ReactComponent as TrezorLogo } from '../../assets/icons/trezor-wallet.component.svg'; -import { Typography } from 'antd'; -import { TranslationsFor } from '@ui/utils/types'; -import classnames from 'classnames'; - -const { Text } = Typography; - -const logoMap = { - Ledger: LedgerLogo, - Trezor: TrezorLogo -}; - -export interface WalletSetupConnectHardwareWalletStepProps { - wallets: string[]; - onBack: () => void; - onNext: () => void; - onConnect: (model: string) => Promise; - isNextEnable: boolean; - translations: TranslationsFor<'title' | 'subTitle' | 'supportedDevices' | 'connectDevice'>; - isHardwareWallet?: boolean; -} - -export const WalletSetupConnectHardwareWalletStep = ({ - wallets, - onBack, - onNext, - onConnect, - isNextEnable, - translations, - isHardwareWallet = false -}: WalletSetupConnectHardwareWalletStepProps): React.ReactElement => { - const [walletModel, setWalletModel] = useState(); - const [isConnecting, setIsConnecting] = useState(false); - const isButtonActive = (model: string) => model === walletModel; - - const handleConnect = async (model: string) => { - setIsConnecting(true); - setWalletModel(model); - try { - await onConnect(model); - } finally { - setIsConnecting(false); - } - }; - - return ( - - - {translations.subTitle} - -
-
- {wallets.map((wallet: string) => ( - - ))} -
- - {translations.supportedDevices} - -
- - {translations.connectDevice} - - - ); -}; diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupConnectHardwareWalletStepRevamp.module.scss b/packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStepRevamp.module.scss similarity index 89% rename from packages/core/src/ui/components/WalletSetupRevamp/WalletSetupConnectHardwareWalletStepRevamp.module.scss rename to packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStepRevamp.module.scss index 120e3e063..9b01558b2 100644 --- a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupConnectHardwareWalletStepRevamp.module.scss +++ b/packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStepRevamp.module.scss @@ -1,4 +1,4 @@ -@import '../../styles/theme.scss'; +@import '../../styles/theme'; @import '../../../../../common/src/ui/styles/abstracts/typography'; .wrapper { diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupConnectHardwareWalletStepRevamp.tsx b/packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStepRevamp.tsx similarity index 87% rename from packages/core/src/ui/components/WalletSetupRevamp/WalletSetupConnectHardwareWalletStepRevamp.tsx rename to packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStepRevamp.tsx index c1be02422..4accf41b5 100644 --- a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupConnectHardwareWalletStepRevamp.tsx +++ b/packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStepRevamp.tsx @@ -2,9 +2,8 @@ import { Banner, Loader } from '@lace/common'; import { TranslationsFor } from '@ui/utils/types'; import React from 'react'; import ExclamationCircleIcon from '../../assets/icons/exclamation-circle.svg'; -import { WalletTimelineSteps } from '../WalletSetup'; import styles from './WalletSetupConnectHardwareWalletStepRevamp.module.scss'; -import { WalletSetupStepLayoutRevamp } from './WalletSetupStepLayoutRevamp'; +import { WalletSetupStepLayout, WalletTimelineSteps } from './WalletSetupStepLayout'; export interface WalletSetupConnectHardwareWalletStepProps { onBack: () => void; @@ -19,7 +18,7 @@ export const WalletSetupConnectHardwareWalletStepRevamp = ({ state, onRetry }: WalletSetupConnectHardwareWalletStepProps): React.ReactElement => ( - )} - + ); diff --git a/packages/core/src/ui/components/WalletSetup/WalletSetupFinalStep.module.scss b/packages/core/src/ui/components/WalletSetup/WalletSetupFinalStep.module.scss deleted file mode 100644 index 615109ad5..000000000 --- a/packages/core/src/ui/components/WalletSetup/WalletSetupFinalStep.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@import '../../styles/theme.scss'; - -.walletSetupFinalStep { - display: flex; - flex-direction: column; - gap: size_unit(2); - - p { - font-size: var(--body); - line-height: size_unit(3); - color: var(--text-color-primary); - } -} - -@keyframes rotating { - from { - transform: translateX(-50%) rotate(0deg); - } - to { - transform: translateX(-50%) rotate(360deg); - } -} - -.walletCreationStep { - align-items: center; - height: 100%; - justify-content: center; -} - -.loader { - animation: rotating 2s linear infinite; - height: 126px; - width: 126px; -} diff --git a/packages/core/src/ui/components/WalletSetup/WalletSetupFinalStep.tsx b/packages/core/src/ui/components/WalletSetup/WalletSetupFinalStep.tsx deleted file mode 100644 index 44814cab2..000000000 --- a/packages/core/src/ui/components/WalletSetup/WalletSetupFinalStep.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React, { useEffect } from 'react'; -import { WalletSetupStepLayout, WalletTimelineSteps } from './WalletSetupStepLayout'; -import { SocialLink } from './SocialLink'; -import styles from './WalletSetupFinalStep.module.scss'; -import { ReactComponent as TwitterLogo } from '../../assets/icons/twitter-logo.component.svg'; -import { ReactComponent as YoutubeLogo } from '../../assets/icons/youtube-logo.component.svg'; -import { ReactComponent as DiscordLogo } from '../../assets/icons/discord-logo.component.svg'; -import { TranslationsFor } from '@ui/utils/types'; - -type TranslationKeys = 'title' | 'description' | 'close' | 'followTwitter' | 'followYoutube' | 'followDiscord'; -export interface WalletSetupFinalStepProps { - onFinish: () => void; - onRender?: () => void; - translations: TranslationsFor; - isHardwareWallet?: boolean; -} - -const TWITTER = 'Twitter'; -const YOUTUBE = 'Youtube'; -const DISCORD = 'Discord'; - -const iconsMap: { [key: string]: React.ReactNode } = { - [TWITTER]: , - [YOUTUBE]: , - [DISCORD]: -}; - -const links: { url: string; name: keyof typeof iconsMap }[] = [ - { url: process.env.TWITTER_URL, name: TWITTER }, - { url: process.env.YOUTUBE_URL, name: YOUTUBE }, - { url: process.env.DISCORD_URL, name: DISCORD } -]; - -export const WalletSetupFinalStep = ({ - onFinish, - onRender, - translations, - isHardwareWallet = false -}: WalletSetupFinalStepProps): React.ReactElement => { - useEffect(() => { - onRender && onRender(); - }, [onRender]); - - return ( - -
- {links.map(({ name, url }) => ( - - ))} -
- - ); -}; diff --git a/packages/core/src/ui/components/WalletSetup/WalletSetupFlowProvider.tsx b/packages/core/src/ui/components/WalletSetup/WalletSetupFlowProvider.tsx deleted file mode 100644 index d33251117..000000000 --- a/packages/core/src/ui/components/WalletSetup/WalletSetupFlowProvider.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, { createContext, useContext } from 'react'; - -export enum WalletSetupFlow { - ONBOARDING, - ADD_WALLET, - ADD_SHARED_WALLET -} - -interface Props { - children: React.ReactNode; - flow: WalletSetupFlow; -} -// eslint-disable-next-line unicorn/no-null -const WalletSetupFlowContext = createContext(WalletSetupFlow.ONBOARDING); - -export const useWalletSetupFlow = (): WalletSetupFlow => { - const context = useContext(WalletSetupFlowContext); - if (context === null) throw new Error('WalletSetupFlowContext not defined'); - return context; -}; - -export const WalletSetupFlowProvider = ({ children, flow }: Props): React.ReactElement => ( - {children} -); diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupHWCreationStep.module.scss b/packages/core/src/ui/components/WalletSetup/WalletSetupHWCreationStep.module.scss similarity index 100% rename from packages/core/src/ui/components/WalletSetupRevamp/WalletSetupHWCreationStep.module.scss rename to packages/core/src/ui/components/WalletSetup/WalletSetupHWCreationStep.module.scss diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupHWCreationStep.tsx b/packages/core/src/ui/components/WalletSetup/WalletSetupHWCreationStep.tsx similarity index 78% rename from packages/core/src/ui/components/WalletSetupRevamp/WalletSetupHWCreationStep.tsx rename to packages/core/src/ui/components/WalletSetup/WalletSetupHWCreationStep.tsx index f8f387e54..4252d1754 100644 --- a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupHWCreationStep.tsx +++ b/packages/core/src/ui/components/WalletSetup/WalletSetupHWCreationStep.tsx @@ -1,16 +1,15 @@ import { Loader } from '@lace/common'; import { TranslationsFor } from '@ui/utils/types'; import React from 'react'; -import { WalletTimelineSteps } from '../WalletSetup'; import styles from './WalletSetupHWCreationStep.module.scss'; -import { WalletSetupStepLayoutRevamp } from './WalletSetupStepLayoutRevamp'; +import { WalletSetupStepLayout, WalletTimelineSteps } from './WalletSetupStepLayout'; type WalletSetupCreationStepProps = { translations: TranslationsFor<'title' | 'description'>; }; export const WalletSetupHWCreationStep = ({ translations }: WalletSetupCreationStepProps): React.ReactElement => ( - - + ); diff --git a/packages/core/src/ui/components/WalletSetup/WalletSetupMnemonicIntroStep.tsx b/packages/core/src/ui/components/WalletSetup/WalletSetupMnemonicIntroStep.tsx deleted file mode 100644 index 605e9cc8b..000000000 --- a/packages/core/src/ui/components/WalletSetup/WalletSetupMnemonicIntroStep.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { useRef, useState } from 'react'; -import { WalletSetupStepLayout, WalletTimelineSteps } from './WalletSetupStepLayout'; -import { TranslationsFor } from '@ui/utils/types'; -import styles from './WalletSetupOption.module.scss'; - -export interface WalletSetupMnemonicIntroStepProps { - onBack: () => void; - onNext: () => void; - onClickVideo?: () => void; - videoSrc?: string; - translations: TranslationsFor<'title' | 'description' | 'linkText'>; -} - -export const WalletSetupMnemonicIntroStep = ({ - onBack, - onNext, - onClickVideo, - videoSrc, - translations -}: WalletSetupMnemonicIntroStepProps): React.ReactElement => { - const [overlayVisible, setOverlayVisible] = useState(true); - const videoRef = useRef(); - - return ( - -
{ - setOverlayVisible(false); - videoRef.current.src += '&autoplay=1'; - onClickVideo(); - }} - > - {overlayVisible &&
} -