feat: small revamp updates for the "Create/Restore Flow"

packages/yoroi-extension/app/components/topbar/SidebarRevamp.js

@@ -7,14 +7,15 @@ import styles from './SidebarRevamp.scss';
 import type { SidebarCategoryRevamp } from '../../stores/stateless/sidebarCategories';
 import { intlShape } from 'react-intl';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
-import { ReactComponent as yoroiLogo }  from '../../assets/images/sidebar/yoroi_logo.inline.svg';
+import { ReactComponent as YoroiLogo } from '../../assets/images/sidebar/yoroi_logo.inline.svg';
 import globalMessages from '../../i18n/global-messages';
 
 type Props = {|
   +children?: ?Node,
   +categories?: Array<SidebarCategoryRevamp>,
   +isActiveCategory?: SidebarCategoryRevamp => boolean,
   +onCategoryClicked?: SidebarCategoryRevamp => void,
+  +onLogoClick?: void => void,
 |};
 
 @observer
@@ -28,23 +29,30 @@ export default class SidebarRevamp extends Component<Props> {
     children: void,
     isActiveCategory: void,
     onCategoryClicked: void,
+    onLogoClick: void,
   |} = {
     children: undefined,
     categories: undefined,
     isActiveCategory: undefined,
     onCategoryClicked: undefined,
+    onLogoClick: undefined,
   };
 
   render(): Node {
     const { intl } = this.context;
-    const { categories, isActiveCategory, onCategoryClicked } = this.props;
-    const YoroiLogo = yoroiLogo;
+    const { categories, isActiveCategory, onCategoryClicked, onLogoClick } = this.props;
 
     return (
       <div className={styles.wrapper}>
         {this.props.children}
         <div className={styles.header}>
-          <YoroiLogo />
+          {onLogoClick ? (
+            <button type="button" onClick={onLogoClick}>
+              <YoroiLogo />
+            </button>
+          ) : (
+            <YoroiLogo />
+          )}
         </div>
         <div className={styles.categories}>
           {categories
@@ -68,8 +76,8 @@ export default class SidebarRevamp extends Component<Props> {
         </div>
         <a
           className={styles.faq}
-          href='https://emurgohelpdesk.zendesk.com/hc/en-us/categories/4412619927695-Yoroi'
-          target='_blank'
+          href="https://emurgohelpdesk.zendesk.com/hc/en-us/categories/4412619927695-Yoroi"
+          target="_blank"
           rel="noreferrer"
         >
           {intl.formatMessage(globalMessages.sidebarFaq)}

packages/yoroi-extension/app/components/wallet/add-wallet-revamp/AddWalletPageHeader.js

@@ -6,49 +6,72 @@ import YoroiLogo from '../../../assets/images/yoroi-logo-shape-blue.inline.svg';
 import { defineMessages, intlShape } from 'react-intl';
 import { observer } from 'mobx-react';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
-import { Typography, Box } from '@mui/material';
+import { Typography, Box, Button } from '@mui/material';
 import globalMessages from '../../../i18n/global-messages';
+import { ReactComponent as BackIcon } from '../../../assets/images/assets-page/backarrow.inline.svg';
 
 const messages: * = defineMessages({
   subtitle: {
     id: 'wallet.add.page.revamp.subtitle',
     defaultMessage: '!!!Light wallet for Cardano assets',
   },
+  backButtonLabel: {
+    id: 'wallet.add.page.revamp.backButtonLabel',
+    defaultMessage: '!!!Back to current wallet',
+  },
 });
 
+type Props = {|
+  +goToCurrentWallet: void => void,
+  +hasAnyWallets: boolean,
+|};
+
 @observer
-export default class AddWalletPageHeader extends Component<{||}> {
+export default class AddWalletPageHeader extends Component<Props> {
   static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
   render(): Node {
     const { intl } = this.context;
+    const { goToCurrentWallet, hasAnyWallets } = this.props;
 
     return (
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDirection: 'column',
-        }}
-      >
+      <Box>
+        {hasAnyWallets && (
+          <Button sx={{ color: 'gray.900' }} onClick={goToCurrentWallet}>
+            <Box mr="10px">
+              <BackIcon />
+            </Box>
+            <Typography variant="button2" fontWeight={500} color="gray.900">
+              {intl.formatMessage(messages.backButtonLabel)}
+            </Typography>
+          </Button>
+        )}
         <Box
           sx={{
-            width: '56px',
-            height: '48px',
-            mb: '24px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
           }}
         >
-          <img src={YoroiLogo} alt="Yoroi" />
+          <Box
+            sx={{
+              width: '56px',
+              height: '48px',
+              mb: '24px',
+            }}
+          >
+            <img src={YoroiLogo} alt="Yoroi" />
+          </Box>
+          <Typography variant="h1" fontWeight={500} color="primary.600" mb="8px">
+            {intl.formatMessage(globalMessages.yoroi)}
+          </Typography>
+          <Typography variant="body1" fontWeight={500} color="primary.600">
+            {intl.formatMessage(messages.subtitle)}
+          </Typography>
         </Box>
-        <Typography variant="h1" fontWeight={500} color="primary" mb="8px">
-          {intl.formatMessage(globalMessages.yoroi)}
-        </Typography>
-        <Typography variant="body1" fontWeight={500} color="primary">
-          {intl.formatMessage(messages.subtitle)}
-        </Typography>
       </Box>
     );
   }

packages/yoroi-extension/app/containers/SidebarContainer.js

@@ -16,6 +16,7 @@ export type GeneratedData = typeof SidebarContainer.prototype.generated;
 
 type Props = {|
   ...InjectedOrGenerated<GeneratedData>,
+  +onLogoClick?: void => void,
 |};
 type InjectedProps = {|
   +selectedLayout: string,
@@ -29,9 +30,16 @@ class SidebarContainer extends Component<AllProps> {
     await this.generated.actions.profile.toggleSidebar.trigger();
   };
 
+  static defaultProps: {|
+    onLogoClick: void,
+  |} = {
+    onLogoClick: undefined,
+  };
+
   render(): Node {
     const { stores, actions } = this.generated;
     const { profile } = stores;
+    const { onLogoClick } = this.props;
 
     const SidebarComponent = (
       <Sidebar
@@ -40,9 +48,7 @@ class SidebarContainer extends Component<AllProps> {
             route: category.route,
           });
         }}
-        isActiveCategory={category =>
-          stores.app.currentRoute.startsWith(category.route)
-        }
+        isActiveCategory={category => stores.app.currentRoute.startsWith(category.route)}
         categories={allCategories.filter(category =>
           category.isVisible({
             hasAnyWallets: stores.wallets.hasAnyWallets,
@@ -57,6 +63,7 @@ class SidebarContainer extends Component<AllProps> {
 
     const SidebarRevampComponent = (
       <SidebarRevamp
+        onLogoClick={onLogoClick}
         onCategoryClicked={category => {
           actions.router.goToRoute.trigger({
             route: category.route,
@@ -130,7 +137,7 @@ class SidebarContainer extends Component<AllProps> {
           hasAnyWallets: stores.wallets.hasAnyWallets,
         },
         delegation: {
-          getDelegationRequests: stores.delegation.getDelegationRequests
+          getDelegationRequests: stores.delegation.getDelegationRequests,
         },
       },
       actions: {

packages/yoroi-extension/app/containers/wallet/AddWalletPage.js

@@ -349,6 +349,8 @@ class AddWalletPage extends Component<AllProps> {
           onHardwareConnect={() => this.openDialogWrapper(WalletConnectHWOptionDialog)}
           onCreate={() => goToRoute.trigger({ route: ROUTES.WALLETS.CREATE_NEW_WALLET })}
           onRestore={() => goToRoute.trigger({ route: ROUTES.WALLETS.RESTORE_WALLET })}
+          goToCurrentWallet={() => goToRoute.trigger({ route: ROUTES.WALLETS.TRANSACTIONS })}
+          hasAnyWallets={hasAnyWallets}
         />
         {activeDialog}
       </TopBarLayout>

packages/yoroi-extension/app/containers/wallet/AddWalletPageRevamp.js

@@ -8,17 +8,22 @@ type Props = {|
   +onCreate: void => void,
   +onRestore: void => void,
   +onHardwareConnect: void => void,
+  +goToCurrentWallet: void => void,
+  +hasAnyWallets: boolean,
 |};
 
 export default function AddWalletPageRevamp(props: Props): Node {
   return (
     <Box>
-      <AddWalletPageHeader />
+      <AddWalletPageHeader
+        goToCurrentWallet={props.goToCurrentWallet}
+        hasAnyWallets={props.hasAnyWallets}
+      />
       <AddWalletPageContent
         onCreate={props.onCreate}
         onRestore={props.onRestore}
         onHardwareConnect={props.onHardwareConnect}
       />
     </Box>
-  )
-}
+  );
+}

packages/yoroi-extension/app/containers/wallet/CreateWalletPageContainer.js

@@ -11,6 +11,7 @@ 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 { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver';
+import { ROUTES } from '../../routes-config';
 
 export const CreateWalletPagePromise: void => Promise<any> = () =>
   import('../../components/wallet/create-wallet/CreateWalletPage');
@@ -27,7 +28,12 @@ export default class CreateWalletPageContainer extends Component<Props> {
     return (
       <TopBarLayout
         banner={<BannerContainer {...this.generated.BannerContainerProps} />}
-        sidebar={<SidebarContainer {...this.generated.SidebarContainerProps} />}
+        sidebar={
+          <SidebarContainer
+            {...this.generated.SidebarContainerProps}
+            onLogoClick={() => actions.router.goToRoute.trigger({ route: ROUTES.WALLETS.ADD })}
+          />
+        }
         bgcolor="common.white"
       >
         <Suspense fallback={null}>

packages/yoroi-extension/app/containers/wallet/restore/RestoreWalletPage.js

@@ -24,6 +24,7 @@ import TopBarLayout from '../../../components/layout/TopBarLayout';
 import BannerContainer from '../../banners/BannerContainer';
 import SidebarContainer from '../../SidebarContainer';
 import LocalizableError from '../../../i18n/LocalizableError';
+import { ROUTES } from '../../../routes-config';
 
 export const RestoreWalletPagePromise: void => Promise<any> = () =>
   import('../../../components/wallet/restore/RestoreWalletPage');
@@ -40,7 +41,12 @@ export default class RestoreWalletPage extends Component<Props> {
     return (
       <TopBarLayout
         banner={<BannerContainer {...this.generated.BannerContainerProps} />}
-        sidebar={<SidebarContainer {...this.generated.SidebarContainerProps} />}
+        sidebar={
+          <SidebarContainer
+            {...this.generated.SidebarContainerProps}
+            onLogoClick={() => actions.router.goToRoute.trigger({ route: ROUTES.WALLETS.ADD })}
+          />
+        }
         bgcolor="common.white"
       >
         <RestoreWalletPageComponent

packages/yoroi-extension/app/i18n/locales/en-US.json

@@ -466,6 +466,7 @@
   "wallet.add.page.revamp.createWallet": "Create new wallet",
   "wallet.add.page.revamp.restoreWallet": "Restore existing wallet",
   "wallet.add.page.revamp.subtitle": "Light wallet for Cardano assets",
+  "wallet.add.page.revamp.backButtonLabel": "Back to current wallet",
   "wallet.add.page.subtitle.label": "Yoroi light wallet for Cardano",
   "wallet.add.page.title": "Your gateway <br> to the <br> financial world",
   "wallet.address.category.addressBook": "Addresses that do not belong to you, but are relevant to your wallet",
@@ -1059,4 +1060,4 @@
   "yoroiTransfer.waiting.progressInfo.checkingAddresses": "Checking addresses funds",
   "yoroiTransfer.waiting.progressInfo.restoringAddresses": "Fetching addresses",
   "yoroiTransfer.waiting.title.label": "Wallet is being restored"
-}
+}