From 8d8d793dfed5a2b8d30cfd81dde9496a04edad07 Mon Sep 17 00:00:00 2001 From: Patriciu Nista Date: Tue, 12 Dec 2023 01:43:29 +0100 Subject: [PATCH] remove sidebar from onboarding --- .../app/containers/wallet/AddWalletPage.js | 66 ++++++++++--------- .../wallet/CreateWalletPageContainer.js | 52 +++++++++------ .../wallet/restore/RestoreWalletPage.js | 28 ++++++-- 3 files changed, 88 insertions(+), 58 deletions(-) diff --git a/packages/yoroi-extension/app/containers/wallet/AddWalletPage.js b/packages/yoroi-extension/app/containers/wallet/AddWalletPage.js index 9552673ab9..b1ba6174d0 100644 --- a/packages/yoroi-extension/app/containers/wallet/AddWalletPage.js +++ b/packages/yoroi-extension/app/containers/wallet/AddWalletPage.js @@ -1,60 +1,52 @@ // @flow import type { Node, ComponentType } from 'react'; +import type { InjectedOrGenerated } from '../../types/injectedPropsType'; +import type { GeneratedData as BannerContainerData } from '../banners/BannerContainer'; +import type { GeneratedData as WalletCreateDialogContainerData } from './dialogs/WalletCreateDialogContainer'; +import type { GeneratedData as WalletBackupDialogContainerData } from './dialogs/WalletBackupDialogContainer'; +import type { GeneratedData as WalletRestoreDialogContainerData } from './dialogs/WalletRestoreDialogContainer'; +import type { GeneratedData as WalletTrezorConnectDialogContainerData } from './dialogs/WalletTrezorConnectDialogContainer'; +import type { GeneratedData as WalletLedgerConnectDialogContainerData } from './dialogs/WalletLedgerConnectDialogContainer'; +import type { GeneratedData as WalletPaperDialogContainerData } from './dialogs/WalletPaperDialogContainer'; +import type { GeneratedData as CreatePaperWalletDialogContainerData } from './dialogs/CreatePaperWalletDialogContainer'; +import type { GeneratedData as SidebarContainerData } from '../SidebarContainer'; +import type { RestoreModeType } from '../../actions/common/wallet-restore-actions'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import type { NetworkRow } from '../../api/ada/lib/storage/database/primitives/tables'; +import type { LayoutComponentMap } from '../../styles/context/layout'; import { Component, lazy } from 'react'; import { observer } from 'mobx-react'; import { computed } from 'mobx'; import { intlShape } from 'react-intl'; - import { ROUTES } from '../../routes-config'; -import type { InjectedOrGenerated } from '../../types/injectedPropsType'; +import { getApiForNetwork, ApiOptions } from '../../api/common/utils'; +import { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver/index'; +import { networks } from '../../api/ada/lib/storage/database/prepackaged/networks'; +import { withLayout } from '../../styles/context/layout'; +import { Box } from '@mui/material'; import globalMessages from '../../i18n/global-messages'; - import TopBarLayout from '../../components/layout/TopBarLayout'; import BannerContainer from '../banners/BannerContainer'; -import type { GeneratedData as BannerContainerData } from '../banners/BannerContainer'; import WalletAdd from '../../components/wallet/WalletAdd'; - import WalletCreateDialogContainer from './dialogs/WalletCreateDialogContainer'; -import type { GeneratedData as WalletCreateDialogContainerData } from './dialogs/WalletCreateDialogContainer'; import WalletCreateDialog from '../../components/wallet/WalletCreateDialog'; import WalletBackupDialogContainer from './dialogs/WalletBackupDialogContainer'; -import type { GeneratedData as WalletBackupDialogContainerData } from './dialogs/WalletBackupDialogContainer'; import WalletBackupDialog from '../../components/wallet/WalletBackupDialog'; - import PickCurrencyDialogContainer from './dialogs/PickCurrencyDialogContainer'; - import WalletRestoreOptionDialogContainer from './dialogs/WalletRestoreOptionDialogContainer'; import WalletRestoreDialogContainer from './dialogs/WalletRestoreDialogContainer'; -import type { GeneratedData as WalletRestoreDialogContainerData } from './dialogs/WalletRestoreDialogContainer'; import WalletRestoreOptionDialog from '../../components/wallet/add/option-dialog/WalletRestoreOptionDialog'; - import WalletConnectHWOptionDialogContainer from './dialogs/WalletConnectHWOptionDialogContainer'; import WalletConnectHWOptionDialog from '../../components/wallet/add/option-dialog/WalletConnectHWOptionDialog'; import WalletTrezorConnectDialogContainer from './dialogs/WalletTrezorConnectDialogContainer'; -import type { GeneratedData as WalletTrezorConnectDialogContainerData } from './dialogs/WalletTrezorConnectDialogContainer'; import WalletLedgerConnectDialogContainer from './dialogs/WalletLedgerConnectDialogContainer'; -import type { GeneratedData as WalletLedgerConnectDialogContainerData } from './dialogs/WalletLedgerConnectDialogContainer'; - import WalletPaperDialog from '../../components/wallet/WalletPaperDialog'; import WalletPaperDialogContainer from './dialogs/WalletPaperDialogContainer'; -import type { GeneratedData as WalletPaperDialogContainerData } from './dialogs/WalletPaperDialogContainer'; import CreatePaperWalletDialogContainer from './dialogs/CreatePaperWalletDialogContainer'; -import type { GeneratedData as CreatePaperWalletDialogContainerData } from './dialogs/CreatePaperWalletDialogContainer'; import UserPasswordDialog from '../../components/wallet/add/paper-wallets/UserPasswordDialog'; - import SidebarContainer from '../SidebarContainer'; -import type { GeneratedData as SidebarContainerData } from '../SidebarContainer'; import NavBar from '../../components/topbar/NavBar'; import NavBarTitle from '../../components/topbar/NavBarTitle'; - -import type { RestoreModeType } from '../../actions/common/wallet-restore-actions'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { getApiForNetwork, ApiOptions } from '../../api/common/utils'; -import { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver/index'; -import type { NetworkRow } from '../../api/ada/lib/storage/database/primitives/tables'; -import { networks } from '../../api/ada/lib/storage/database/prepackaged/networks'; -import { withLayout } from '../../styles/context/layout'; -import type { LayoutComponentMap } from '../../styles/context/layout'; import AddWalletPageRevamp from './AddWalletPageRevamp'; export const AddAnotherWalletPromise: void => Promise = () => @@ -282,11 +274,8 @@ class AddWalletPage extends Component { } const goToRoute = this.generated.actions.router.goToRoute; - const addWalletPageRevamp = ( - } - sidebar={} - > + const addWalletPageComponent = ( + <> this.openDialogWrapper(WalletConnectHWOptionDialog)} onCreate={() => goToRoute.trigger({ route: ROUTES.WALLETS.CREATE_NEW_WALLET })} @@ -295,6 +284,19 @@ class AddWalletPage extends Component { hasAnyWallets={hasAnyWallets} /> {activeDialog} + + ); + + const addWalletPageRevamp = !hasAnyWallets ? ( + + {addWalletPageComponent} + + ) : ( + } + sidebar={} + > + {addWalletPageComponent} ); diff --git a/packages/yoroi-extension/app/containers/wallet/CreateWalletPageContainer.js b/packages/yoroi-extension/app/containers/wallet/CreateWalletPageContainer.js index b0cf2a1971..9471d1be14 100644 --- a/packages/yoroi-extension/app/containers/wallet/CreateWalletPageContainer.js +++ b/packages/yoroi-extension/app/containers/wallet/CreateWalletPageContainer.js @@ -1,16 +1,17 @@ // @flow -import React, { Component, Suspense } from 'react'; import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import { computed } from 'mobx'; -import TopBarLayout from '../../components/layout/TopBarLayout'; -import BannerContainer from '../banners/BannerContainer'; import type { GeneratedData as BannerContainerData } from '../banners/BannerContainer'; -import SidebarContainer from '../SidebarContainer'; import type { GeneratedData as SidebarContainerData } from '../SidebarContainer'; import type { InjectedOrGenerated } from '../../types/injectedPropsType'; import type { NetworkRow } from '../../api/ada/lib/storage/database/primitives/tables'; +import React, { Component, Suspense } from 'react'; +import { observer } from 'mobx-react'; +import { computed } from 'mobx'; import { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver'; +import { Box } from '@mui/material'; +import TopBarLayout from '../../components/layout/TopBarLayout'; +import BannerContainer from '../banners/BannerContainer'; +import SidebarContainer from '../SidebarContainer'; export const CreateWalletPagePromise: void => Promise = () => import('../../components/wallet/create-wallet/CreateWalletPage'); @@ -23,26 +24,35 @@ type Props = InjectedOrGenerated; export default class CreateWalletPageContainer extends Component { render(): Node { const { stores, actions } = this.generated; + const { hasAnyWallets } = stores.wallets; - return ( + const createWalletPageComponent = ( + + this.generated.actions.dialogs.open.trigger({ dialog })} + closeDialog={this.generated.actions.dialogs.closeActiveDialog.trigger} + isDialogOpen={stores.uiDialogs.isOpen} + goToRoute={route => actions.router.goToRoute.trigger({ route })} + /> + + ); + + return hasAnyWallets ? ( } sidebar={} bgcolor="common.white" > - - this.generated.actions.dialogs.open.trigger({ dialog })} - closeDialog={this.generated.actions.dialogs.closeActiveDialog.trigger} - isDialogOpen={stores.uiDialogs.isOpen} - goToRoute={route => actions.router.goToRoute.trigger({ route })} - /> - + {createWalletPageComponent} + ) : ( + + {createWalletPageComponent} + ); } @@ -101,6 +111,7 @@ export default class CreateWalletPageContainer extends Component { profile: {| selectedNetwork: void | $ReadOnly, |}, + wallets: {| hasAnyWallets: boolean |}, |}, |} { if (this.props.generated !== undefined) { @@ -125,6 +136,9 @@ export default class CreateWalletPageContainer extends Component { profile: { selectedNetwork: stores.profile.selectedNetwork, }, + wallets: { + hasAnyWallets: stores.wallets.hasAnyWallets, + }, }, actions: { ada: { diff --git a/packages/yoroi-extension/app/containers/wallet/restore/RestoreWalletPage.js b/packages/yoroi-extension/app/containers/wallet/restore/RestoreWalletPage.js index 14a4a8615d..f2da53b1c6 100644 --- a/packages/yoroi-extension/app/containers/wallet/restore/RestoreWalletPage.js +++ b/packages/yoroi-extension/app/containers/wallet/restore/RestoreWalletPage.js @@ -14,12 +14,13 @@ import type { WalletRestoreMeta, RestoreModeType, } from '../../../actions/common/wallet-restore-actions'; -import React, { Component } from 'react'; +import React, { Component, Suspense } from 'react'; import { observer } from 'mobx-react'; import { computed } from 'mobx'; import { SelectedExplorer } from '../../../domain/SelectedExplorer'; import { PublicDeriver } from '../../../api/ada/lib/storage/models/PublicDeriver'; import { MultiToken } from '../../../api/common/lib/MultiToken'; +import { Box } from '@mui/material'; import TopBarLayout from '../../../components/layout/TopBarLayout'; import BannerContainer from '../../banners/BannerContainer'; import SidebarContainer from '../../SidebarContainer'; @@ -36,13 +37,10 @@ type Props = InjectedOrGenerated; export default class RestoreWalletPage extends Component { render(): Node { const { stores, actions } = this.generated; + const { hasAnyWallets } = stores.wallets; - return ( - } - sidebar={} - bgcolor="common.white" - > + const restoreWalletPageComponent = ( + { closeDialog={this.generated.actions.dialogs.closeActiveDialog.trigger} isDialogOpen={stores.uiDialogs.isOpen} /> + + ); + + return hasAnyWallets ? ( + } + sidebar={} + bgcolor="common.white" + > + {restoreWalletPageComponent} + ) : ( + + {restoreWalletPageComponent} + ); } @@ -102,6 +114,7 @@ export default class RestoreWalletPage extends Component { restoreRequest: {| error: ?LocalizableError, isExecuting: boolean, reset: () => void |}, publicDerivers: Array>, getPublicKeyCache: IGetPublic => PublicKeyCache, + hasAnyWallets: boolean, |}, walletSettings: {| getConceptualWalletSettingsCache: ConceptualWallet => ConceptualWalletSettingsCache, @@ -141,6 +154,7 @@ export default class RestoreWalletPage extends Component { }, getPublicKeyCache: stores.wallets.getPublicKeyCache, publicDerivers: stores.wallets.publicDerivers, + hasAnyWallets: stores.wallets.hasAnyWallets, }, walletRestore: { isValidMnemonic: stores.walletRestore.isValidMnemonic,