Merge pull request #3368 from Emurgo/fix/YOEXT-935/hide-onboarding-si…

…debar fix(onboarding): remove sidebar
Emurgo · Dec 12, 2023 · 60b42c2 · 60b42c2
2 parents d4771b4 + 8d8d793
commit 60b42c2
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 58 deletions.
diff --git 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<any> = () =>
@@ -282,11 +274,8 @@ class AddWalletPage extends Component<AllProps> {
     }
 
     const goToRoute = this.generated.actions.router.goToRoute;
-    const addWalletPageRevamp = (
-      <TopBarLayout
-        banner={<BannerContainer {...this.generated.BannerContainerProps} />}
-        sidebar={<SidebarContainer {...this.generated.SidebarContainerProps} />}
-      >
+    const addWalletPageComponent = (
+      <>
         <AddWalletPageRevamp
           onHardwareConnect={() => this.openDialogWrapper(WalletConnectHWOptionDialog)}
           onCreate={() => goToRoute.trigger({ route: ROUTES.WALLETS.CREATE_NEW_WALLET })}
@@ -295,6 +284,19 @@ class AddWalletPage extends Component<AllProps> {
           hasAnyWallets={hasAnyWallets}
         />
         {activeDialog}
+      </>
+    );
+
+    const addWalletPageRevamp = !hasAnyWallets ? (
+      <Box py="48px" height="100vh" sx={{ overflowY: 'auto' }}>
+        {addWalletPageComponent}
+      </Box>
+    ) : (
+      <TopBarLayout
+        banner={<BannerContainer {...this.generated.BannerContainerProps} />}
+        sidebar={<SidebarContainer {...this.generated.SidebarContainerProps} />}
+      >
+        {addWalletPageComponent}
       </TopBarLayout>
     );
 

diff --git 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<any> = () =>
   import('../../components/wallet/create-wallet/CreateWalletPage');
@@ -23,26 +24,35 @@ type Props = InjectedOrGenerated<GeneratedData>;
 export default class CreateWalletPageContainer extends Component<Props> {
   render(): Node {
     const { stores, actions } = this.generated;
+    const { hasAnyWallets } = stores.wallets;
 
-    return (
+    const createWalletPageComponent = (
+      <Suspense fallback={null}>
+        <CreateWalletPage
+          genWalletRecoveryPhrase={stores.substores.ada.wallets.genWalletRecoveryPhrase}
+          createWallet={actions.ada.wallets.createWallet.trigger}
+          setSelectedNetwork={actions.profile.setSelectedNetwork.trigger}
+          selectedNetwork={stores.profile.selectedNetwork}
+          openDialog={dialog => 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 })}
+        />
+      </Suspense>
+    );
+
+    return hasAnyWallets ? (
       <TopBarLayout
         banner={<BannerContainer {...this.generated.BannerContainerProps} />}
         sidebar={<SidebarContainer {...this.generated.SidebarContainerProps} />}
         bgcolor="common.white"
       >
-        <Suspense fallback={null}>
-          <CreateWalletPage
-            genWalletRecoveryPhrase={stores.substores.ada.wallets.genWalletRecoveryPhrase}
-            createWallet={actions.ada.wallets.createWallet.trigger}
-            setSelectedNetwork={actions.profile.setSelectedNetwork.trigger}
-            selectedNetwork={stores.profile.selectedNetwork}
-            openDialog={dialog => 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 })}
-          />
-        </Suspense>
+        {createWalletPageComponent}
       </TopBarLayout>
+    ) : (
+      <Box py="48px" height="100vh" sx={{ overflowY: 'auto' }}>
+        {createWalletPageComponent}
+      </Box>
     );
   }
 
@@ -101,6 +111,7 @@ export default class CreateWalletPageContainer extends Component<Props> {
       profile: {|
         selectedNetwork: void | $ReadOnly<NetworkRow>,
       |},
+      wallets: {| hasAnyWallets: boolean |},
     |},
   |} {
     if (this.props.generated !== undefined) {
@@ -125,6 +136,9 @@ export default class CreateWalletPageContainer extends Component<Props> {
         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
@@ -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<GeneratedData>;
 export default class RestoreWalletPage extends Component<Props> {
   render(): Node {
     const { stores, actions } = this.generated;
+    const { hasAnyWallets } = stores.wallets;
 
-    return (
-      <TopBarLayout
-        banner={<BannerContainer {...this.generated.BannerContainerProps} />}
-        sidebar={<SidebarContainer {...this.generated.SidebarContainerProps} />}
-        bgcolor="common.white"
-      >
+    const restoreWalletPageComponent = (
+      <Suspense fallback={null}>
         <RestoreWalletPageComponent
           restoreWallet={actions.walletRestore.restoreWallet.trigger}
           stores={stores}
@@ -51,7 +49,21 @@ export default class RestoreWalletPage extends Component<Props> {
           closeDialog={this.generated.actions.dialogs.closeActiveDialog.trigger}
           isDialogOpen={stores.uiDialogs.isOpen}
         />
+      </Suspense>
+    );
+
+    return hasAnyWallets ? (
+      <TopBarLayout
+        banner={<BannerContainer {...this.generated.BannerContainerProps} />}
+        sidebar={<SidebarContainer {...this.generated.SidebarContainerProps} />}
+        bgcolor="common.white"
+      >
+        {restoreWalletPageComponent}
       </TopBarLayout>
+    ) : (
+      <Box py="48px" height="100vh" sx={{ overflowY: 'auto' }}>
+        {restoreWalletPageComponent}
+      </Box>
     );
   }
 
@@ -102,6 +114,7 @@ export default class RestoreWalletPage extends Component<Props> {
         restoreRequest: {| error: ?LocalizableError, isExecuting: boolean, reset: () => void |},
         publicDerivers: Array<PublicDeriver<>>,
         getPublicKeyCache: IGetPublic => PublicKeyCache,
+        hasAnyWallets: boolean,
       |},
       walletSettings: {|
         getConceptualWalletSettingsCache: ConceptualWallet => ConceptualWalletSettingsCache,
@@ -141,6 +154,7 @@ export default class RestoreWalletPage extends Component<Props> {
           },
           getPublicKeyCache: stores.wallets.getPublicKeyCache,
           publicDerivers: stores.wallets.publicDerivers,
+          hasAnyWallets: stores.wallets.hasAnyWallets,
         },
         walletRestore: {
           isValidMnemonic: stores.walletRestore.isValidMnemonic,