Completed Onboarding pages

Added:
 Recovery pages
 Add Tokens
 Connect Account

Author: Ivan-Mahda

packages/browser-wallet/src/popup/page-layouts/MainLayout/MainLayout.tsx

@@ -4,41 +4,26 @@ import { useAtomValue } from 'jotai';
 import clsx from 'clsx';
 
 import { absoluteRoutes } from '@popup/constants/routes';
-import {
-    hasBeenOnBoardedAtom,
-    sessionOnboardingLocationAtom,
-    sessionPasscodeAtom,
-    acceptedTermsAtom,
-} from '@popup/store/settings';
+import { absoluteRoutes as absoluteRoutesX } from '@popup/popupX/constants/routes';
+import { hasBeenOnBoardedAtom, sessionPasscodeAtom, acceptedTermsAtom } from '@popup/store/settings';
 import { isRecoveringAtom } from '@popup/store/identity';
 import Toast from '@popup/shared/Toast/Toast';
 import Header from './Header';
 
 export default function MainLayout() {
     const [headerOpen, setHeaderOpen] = useState(false);
     const { loading: loadingHasBeenOnboarded, value: hasBeenOnboarded } = useAtomValue(hasBeenOnBoardedAtom);
-    const { loading: loadingOnboardingLocation, value: onboardingLocation } =
-        useAtomValue(sessionOnboardingLocationAtom);
     const { loading: loadingPasscode, value: sessionPasscode } = useAtomValue(sessionPasscodeAtom);
     const { loading: loadingIsRecovering, value: sessionIsRecovering } = useAtomValue(isRecoveringAtom);
     const { loading: loadingAcceptedTerms, value: acceptedTerms } = useAtomValue(acceptedTermsAtom);
 
-    if (
-        loadingHasBeenOnboarded ||
-        loadingPasscode ||
-        loadingIsRecovering ||
-        loadingOnboardingLocation ||
-        loadingAcceptedTerms
-    ) {
+    if (loadingHasBeenOnboarded || loadingPasscode || loadingIsRecovering || loadingAcceptedTerms) {
         // This will be near instant, as we're just waiting for the Chrome async store
         return null;
     }
 
     if (!hasBeenOnboarded) {
-        if (onboardingLocation) {
-            return <Navigate to={absoluteRoutes.login.path} state={{ to: onboardingLocation }} />;
-        }
-        return <Navigate to={absoluteRoutes.setup.path} />;
+        return <Navigate to={absoluteRoutesX.onboarding.path} />;
     }
 
     if (!sessionPasscode) {

packages/browser-wallet/src/popup/popupX/constants/routes.ts

@@ -36,56 +36,66 @@ export const relativeRoutes = {
                 hideMenu: true,
                 hideConnection: true,
             },
-        },
-        createOrRestore: {
-            path: 'createOrRestore',
-            config: {
-                hideBackArrow: false,
-                backTitle: '',
-                hideMenu: true,
-                hideConnection: true,
-            },
-        },
-        selectNetwork: {
-            path: 'selectNetwork',
-            config: {
-                hideBackArrow: false,
-                backTitle: '',
-                hideMenu: true,
-                hideConnection: true,
-            },
-        },
-        restoreWallet: {
-            path: 'restoreWallet',
-            config: {
-                hideBackArrow: false,
-                backTitle: '',
-                hideMenu: true,
-                hideConnection: true,
-            },
-        },
-        idIntro: {
-            path: 'idIntro',
-            config: {
-                backTitle: '',
-                hideMenu: true,
-                hideConnection: true,
-            },
-        },
-        requestIdentity: {
-            path: 'requestIdentity',
-            config: {
-                backTitle: '',
-                hideMenu: true,
-                hideConnection: true,
-            },
-        },
-        idSubmitted: {
-            path: 'idSubmitted',
-            config: {
-                backTitle: '',
-                hideMenu: true,
-                hideConnection: true,
+            createOrRestore: {
+                path: 'createOrRestore',
+                config: {
+                    hideBackArrow: true,
+                    backTitle: '',
+                    hideMenu: true,
+                    hideConnection: true,
+                },
+                selectNetwork: {
+                    path: 'selectNetwork',
+                    config: {
+                        hideBackArrow: false,
+                        backTitle: '',
+                        hideMenu: true,
+                        hideConnection: true,
+                    },
+                },
+                restoreWallet: {
+                    path: 'restoreWallet',
+                    config: {
+                        hideBackArrow: false,
+                        backTitle: '',
+                        hideMenu: true,
+                        hideConnection: true,
+                    },
+                },
+                generateSeedPhrase: {
+                    path: 'generateSeedPhrase',
+                    config: {
+                        hideBackArrow: false,
+                        backTitle: '',
+                        hideMenu: true,
+                        hideConnection: true,
+                    },
+                    confirmSeedPhrase: {
+                        path: 'confirmSeedPhrase',
+                        config: {
+                            hideBackArrow: false,
+                            backTitle: '',
+                            hideMenu: true,
+                            hideConnection: true,
+                        },
+                        idIntro: {
+                            path: 'idIntro',
+                            config: {
+                                backTitle: '',
+                                hideMenu: true,
+                                hideConnection: true,
+                            },
+                            requestIdentity: {
+                                path: 'requestIdentity',
+                                config: {
+                                    backTitle: '',
+                                    hideMenu: true,
+                                    hideConnection: true,
+                                },
+                            },
+                        },
+                    },
+                },
             },
         },
     },
@@ -242,10 +252,11 @@ export const relativeRoutes = {
         },
         restore: {
             path: 'restore',
-            result: {
-                path: 'result',
+            main: {
+                path: 'main',
                 config: {
-                    backTitle: 'Restore wallet',
+                    hideMenu: true,
+                    hideBackArrow: true,
                 },
             },
         },
@@ -358,6 +369,15 @@ export const relativeRoutes = {
         connectionRequest: {
             path: 'connectionRequest',
         },
+        connectAccountsRequest: {
+            path: 'connectAccountsRequest',
+        },
+        addTokens: {
+            path: 'addTokens',
+        },
+        recovery: {
+            path: 'recovery',
+        },
         endIdentityIssuance: {
             path: 'end-identity-issuance',
         },

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/AccountButton.tsx

@@ -3,7 +3,8 @@ import clsx from 'clsx';
 import UpDown from '@assets/svgX/caret-up-down.svg';
 import { displayNameOrSplitAddress } from '@popup/shared/utils/account-helpers';
 import { useAtomValue } from 'jotai';
-import { selectedCredentialAtom } from '@popup/store/account';
+import { credentialsAtom, selectedCredentialAtom } from '@popup/store/account';
+import { useTranslation } from 'react-i18next';
 
 export default function AccountButton({
     hideAccountButton,
@@ -14,14 +15,24 @@ export default function AccountButton({
     accountOpen?: boolean;
     setAccountOpen: (open: boolean) => void;
 }) {
+    const { t } = useTranslation('x', { keyPrefix: 'header.accountButton' });
     const credential = useAtomValue(selectedCredentialAtom);
+    const credentials = useAtomValue(credentialsAtom);
+
+    if (hideAccountButton) return null;
+
+    if (credential === undefined && credentials.length === 0) {
+        return (
+            <div className={clsx('header__account')}>
+                <span className="text__main_medium red">{t('noAccounts')}</span>
+            </div>
+        );
+    }
 
     if (credential === undefined) {
         return null;
     }
 
-    if (hideAccountButton) return null;
-
     return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div className={clsx('header__account', accountOpen && 'active')} onClick={() => setAccountOpen(!accountOpen)}>

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/en.ts

@@ -12,6 +12,9 @@ const t = {
         oldUI: 'Old UI',
         nft: 'NFT',
     },
+    accountButton: {
+        noAccounts: 'No accounts',
+    },
     accountSelector: {
         sortAsc: 'Sort A-Z',
         sortDesc: 'Sort Z-A',

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/MainLayout.scss

@@ -58,6 +58,10 @@
 
                     .text__main_medium {
                         color: $color-white;
+
+                        &.red {
+                            color: $color-red-attention;
+                        }
                     }
                 }
             }

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/MainLayout.tsx

@@ -5,7 +5,7 @@ import Header from '@popup/popupX/page-layouts/MainLayout/Header';
 import Toast from '@popup/popupX/shared/Toast';
 import { AccountButton, NavButton } from '@popup/popupX/page-layouts/MainLayout/Header/components';
 import { relativeRoutes, RouteConfig, routePrefix } from '@popup/popupX/constants/routes';
-import { withPasswordSession } from '@popup/popupX/shared/utils/hoc';
+import { withPasswordSession, withRedirect } from '@popup/popupX/shared/utils/hoc';
 import { noOp } from 'wallet-common-helpers';
 
 type RouteObj = {
@@ -89,4 +89,6 @@ function MainLayout() {
     );
 }
 
-export default withPasswordSession(MainLayout);
+export const OnboardingLayout = MainLayout;
+
+export default withRedirect(withPasswordSession(MainLayout));

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/index.ts

@@ -1 +1 @@
-export { default } from './MainLayout';
+export { default, OnboardingLayout } from './MainLayout';

packages/browser-wallet/src/popup/popupX/pages/CreateAccount/CreateAccount.tsx

@@ -46,6 +46,7 @@ export default function CreateAccount() {
             })
         );
     const validIdentities = useValidIdentities();
+    const navToCreateIdentity = () => nav(absoluteRoutes.settings.identities.create.path);
 
     return (
         <Page className="create-account-x">
@@ -68,6 +69,11 @@ export default function CreateAccount() {
                     ))
                 )}
             </Page.Main>
+            <Page.Footer>
+                {validIdentities.length === 0 && (
+                    <Button.Main label={t('createIdentity')} onClick={navToCreateIdentity} />
+                )}
+            </Page.Footer>
         </Page>
     );
 }

packages/browser-wallet/src/popup/popupX/pages/CreateAccount/i18n/en.ts

@@ -6,6 +6,7 @@ const t = {
 
 Which identity do you want to use to create the account?`,
     confirmButton: 'Create account',
+    createIdentity: 'Create Identity',
 };
 
 export default t;

packages/browser-wallet/src/popup/popupX/pages/IdIssuance/Submitted.tsx

@@ -21,7 +21,7 @@ export default function IdIssuanceSubmitted() {
         if (isSpawnedWindow) {
             window.close();
         } else {
-            nav(absoluteRoutes.settings.identities.path, { replace: true });
+            nav(absoluteRoutes.home.path, { replace: true });
         }
     };
 

packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.scss

@@ -13,9 +13,18 @@
 }
 
 .main-page-x {
+    &.rejected-account {
+        .heading_medium {
+            color: $color-red-attention;
+        }
+    }
+
     &.page-container {
         height: 100%;
-        padding-bottom: unset;
+
+        &:not(.create-account) {
+            padding-bottom: unset;
+        }
     }
 
     &__balance {