-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[LW-10194] unify codebase of the onboarding and multi-wallet flows (#…
…1140) * feat: revamp multi wallet connect flow * fix: account selection options behind modal * feat: unify codebase of the onboarding and multi-wallet flows * fix: redirect to assets after successfull HW restoration * test: fix multi-wallet hardware flow tests * fix: handle properly the case of rejecting key export * fix: update lock file * fix: typescript error in tests * test: fix failing multi-wallet hardware flow tests * test: fix multi-wallet flows * refactor: fix code issues --------- Co-authored-by: John Oshalusi <[email protected]>
- Loading branch information
1 parent
90d84e9
commit b613cde
Showing
33 changed files
with
520 additions
and
513 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
116 changes: 31 additions & 85 deletions
116
apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/MultiWallet.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,97 +1,43 @@ | ||
| /* eslint-disable unicorn/no-null */ | ||
| /* eslint-disable react/no-multi-comp */ | ||
| import React from 'react'; | ||
| import { Route, Switch, useHistory, useRouteMatch } from 'react-router-dom'; | ||
| import { Modal } from 'antd'; | ||
|
|
||
| import styles from './MultiWallet.module.scss'; | ||
|
|
||
| import { Home } from './components/Home'; | ||
|
|
||
| import { | ||
| WalletSetupConfirmationDialogProvider, | ||
| WalletSetupFlow, | ||
| WalletSetupFlowProvider, | ||
| useWalletSetupConfirmationDialog | ||
| } from '@lace/core'; | ||
| import { CreateWallet } from './create-wallet'; | ||
| import { HardwareWallet } from './hardware-wallet'; | ||
| import { RestoreWallet } from './restore-wallet'; | ||
| import { walletRoutePaths } from '@routes'; | ||
| import { Subject } from 'rxjs'; | ||
| import { Wallet } from '@lace/cardano'; | ||
| import { NavigationButton } from '@lace/common'; | ||
| import { WalletSetupConfirmationDialogProvider, WalletSetupFlow, WalletSetupFlowProvider } 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 { postHogMultiWalletActions } from '@providers/AnalyticsProvider/analyticsTracker'; | ||
| import { Home } from './Home'; | ||
|
|
||
| const { newWallet } = walletRoutePaths; | ||
|
|
||
| interface Props { | ||
| shouldShowConfirmationDialog$: Subject<boolean>; | ||
| } | ||
|
|
||
| export const SetupHardwareWallet = ({ shouldShowConfirmationDialog$ }: Props): JSX.Element => ( | ||
| <HardwareWallet | ||
| providers={{ | ||
| shouldShowConfirmationDialog$ | ||
| }} | ||
| /> | ||
| ); | ||
|
|
||
| export const SetupCreateWallet = ({ shouldShowConfirmationDialog$ }: Props): JSX.Element => ( | ||
| <CreateWallet | ||
| providers={{ | ||
| generateMnemonicWords: Wallet.KeyManagement.util.generateMnemonicWords, | ||
| shouldShowConfirmationDialog$ | ||
| }} | ||
| /> | ||
| ); | ||
|
|
||
| export const SetupRestoreWallet = ({ shouldShowConfirmationDialog$ }: Props): JSX.Element => ( | ||
| <RestoreWallet | ||
| providers={{ | ||
| shouldShowConfirmationDialog$ | ||
| }} | ||
| /> | ||
| ); | ||
|
|
||
| const Component = (): JSX.Element => { | ||
| const { path } = useRouteMatch(); | ||
| export const MultiWallet = (): JSX.Element => { | ||
| const history = useHistory(); | ||
| const { page, setBackgroundPage } = useBackgroundPage(); | ||
| const { isDialogOpen, withConfirmationDialog, shouldShowDialog$ } = useWalletSetupConfirmationDialog(); | ||
| const closeWalletCreation = withConfirmationDialog(() => { | ||
| setBackgroundPage(); | ||
| history.push(page); | ||
| }); | ||
|
|
||
| return ( | ||
| <WalletSetupFlowProvider flow={WalletSetupFlow.ADD_WALLET}> | ||
| <Modal centered closable={false} footer={null} open={!isDialogOpen} width="100%" className={styles.modal}> | ||
| <div className={styles.closeButton}> | ||
| <NavigationButton icon="cross" onClick={closeWalletCreation} /> | ||
| </div> | ||
| <Switch> | ||
| <Route | ||
| path={newWallet.create.root} | ||
| render={() => <SetupCreateWallet shouldShowConfirmationDialog$={shouldShowDialog$} />} | ||
| /> | ||
| <Route | ||
| path={newWallet.hardware.root} | ||
| render={() => <SetupHardwareWallet shouldShowConfirmationDialog$={shouldShowDialog$} />} | ||
| /> | ||
| <Route | ||
| path={newWallet.restore.root} | ||
| render={() => <SetupRestoreWallet shouldShowConfirmationDialog$={shouldShowDialog$} />} | ||
| /> | ||
| <Route exact path={`${path}/`} component={Home} /> | ||
| </Switch> | ||
| </Modal> | ||
| <WalletSetupConfirmationDialogProvider> | ||
| {({ isDialogOpen, withConfirmationDialog, shouldShowDialog$ }) => ( | ||
| <Modal centered closable={false} footer={null} open={!isDialogOpen} width="100%" className={styles.modal}> | ||
| <div className={styles.closeButton}> | ||
| <NavigationButton | ||
| icon="cross" | ||
| onClick={withConfirmationDialog(() => { | ||
| setBackgroundPage(); | ||
| history.push(page); | ||
| })} | ||
| /> | ||
| </div> | ||
| <WalletOnboardingFlows | ||
| postHogActions={postHogMultiWalletActions} | ||
| renderHome={() => <Home />} | ||
| setFormDirty={(dirty) => shouldShowDialog$.next(dirty)} | ||
| urlPath={walletRoutePaths.newWallet} | ||
| /> | ||
| </Modal> | ||
| )} | ||
| </WalletSetupConfirmationDialogProvider> | ||
| </WalletSetupFlowProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export const MultiWallet = (): JSX.Element => ( | ||
| <WalletSetupConfirmationDialogProvider> | ||
| <Component /> | ||
| </WalletSetupConfirmationDialogProvider> | ||
| ); |
56 changes: 56 additions & 0 deletions
56
...r-extension-wallet/src/views/browser-view/features/multi-wallet/WalletOnboardingFlows.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { useKeyboardShortcut } from '@lace/common'; | ||
| import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'; | ||
| import { CreateWallet } from './create-wallet'; | ||
| import { HardwareWallet } from './hardware-wallet'; | ||
| import { RestoreWallet } from './restore-wallet'; | ||
| import React, { ReactNode, VFC } from 'react'; | ||
| import { Flows, WalletOnboardingPostHogActions, SetFormDirty } from './types'; | ||
| import { WalletOnboardingProvider } from './walletOnboardingContext'; | ||
|
|
||
| type WalletOnboardingProps = { | ||
| aliasEventRequired?: boolean; | ||
| flowsEnabled?: boolean; | ||
| forgotPasswordFlowActive?: boolean; | ||
| postHogActions: WalletOnboardingPostHogActions; | ||
| renderHome: () => ReactNode; | ||
| setFormDirty?: SetFormDirty; | ||
| urlPath: Record<Flows, string>; | ||
| }; | ||
|
|
||
| export const WalletOnboardingFlows: VFC<WalletOnboardingProps> = ({ | ||
| aliasEventRequired = false, | ||
| flowsEnabled = true, | ||
| forgotPasswordFlowActive = false, | ||
| postHogActions, | ||
| renderHome, | ||
| setFormDirty = () => void 0, | ||
| urlPath | ||
| }) => { | ||
| useKeyboardShortcut(['Enter'], () => { | ||
| const nextBnt: HTMLButtonElement = document.querySelector('[data-testid="wallet-setup-step-btn-next"]'); | ||
| const confirmGoBack: HTMLButtonElement = document.querySelector('[data-testid="delete-address-modal-confirm"]'); | ||
|
|
||
| if (confirmGoBack) { | ||
| confirmGoBack.click(); | ||
| } else if (nextBnt && !nextBnt.getAttribute('disabled')) { | ||
| nextBnt.click(); | ||
| } | ||
| }); | ||
|
|
||
| const { path } = useRouteMatch(); | ||
| return ( | ||
| <WalletOnboardingProvider value={{ aliasEventRequired, forgotPasswordFlowActive, postHogActions, setFormDirty }}> | ||
| <Switch> | ||
| <Route exact path={`${path}/`} render={renderHome} /> | ||
| {flowsEnabled && ( | ||
| <> | ||
| <Route path={urlPath.create} component={CreateWallet} /> | ||
| <Route path={urlPath.hardware} component={HardwareWallet} /> | ||
| <Route path={urlPath.restore} component={RestoreWallet} /> | ||
| </> | ||
| )} | ||
| {!flowsEnabled && <Redirect to={`${path}/`} />} | ||
| </Switch> | ||
| </WalletOnboardingProvider> | ||
| ); | ||
| }; |
Oops, something went wrong.