redesign the Create New Wallet screens and update tests

extension/e2e-tests/onboarding.test.ts

@@ -7,24 +7,27 @@ test.beforeEach(async ({ page, extensionId }) => {
 
 test("Welcome page loads", async ({ page }) => {
   await page.locator(".Welcome__column").waitFor();
-  await expect(
-    page.getByText("Welcome! Is this your first time using Freighter?"),
-  ).toBeVisible();
-  await expect(page.getByText("I’m going to need a seed phrase")).toBeVisible();
-  await expect(page.getByText("I’ve done this before")).toBeVisible();
+  await expect(page.getByText("Welcome to Freighter")).toBeVisible();
+  await expect(page.getByText("Your favorite Stellar wallet")).toBeVisible();
+  await expect(page.getByText("Create new wallet")).toBeVisible();
+  await expect(page.getByText("Import wallet")).toBeVisible();
   await expectPageToHaveScreenshot({ page, screenshot: "welcome-page.png" });
 });
 
 test("Create new wallet", async ({ page }) => {
-  await page.getByText("Create Wallet").click();
+  await page.getByText("Create new wallet").click();
   await expect(page.getByText("Create a password")).toBeVisible();
 
   await page.locator("#new-password-input").fill("My-password123");
   await page.locator("#confirm-password-input").fill("My-password123");
   await page.locator("#termsOfUse-input").check({ force: true });
   await page.getByText("Confirm").click();
 
-  await expect(page.getByText("Secret Recovery phrase")).toBeVisible();
+  await expect(page.getByTestId("MnemonicPhrase__modal")).toBeVisible();
+  await expectPageToHaveScreenshot({ page, screenshot: "recovery-modal.png" });
+
+  await page.getByText("Show recovery phrase").click();
+
   await expectPageToHaveScreenshot(
     { page, screenshot: "recovery-page.png" },
     {
@@ -56,9 +59,7 @@ test("Create new wallet", async ({ page }) => {
     await page.getByTestId(words[i]).check({ force: true });
   }
   await page.getByTestId("display-mnemonic-phrase-confirm-btn").click();
-  await expect(
-    page.getByText("Your Freighter install is complete"),
-  ).toBeVisible();
+  await expect(page.getByText("You’re all set!")).toBeVisible();
   await expectPageToHaveScreenshot({
     page,
     screenshot: "wallet-create-complete-page.png",

extension/src/popup/Router.tsx

@@ -65,7 +65,6 @@ import { ManageAssets } from "popup/views/ManageAssets";
 import { VerifyAccount } from "popup/views/VerifyAccount";
 import { Swap } from "popup/views/Swap";
 import { ManageNetwork } from "popup/views/ManageNetwork";
-import { PinExtension } from "popup/views/PinExtension";
 import { LeaveFeedback } from "popup/views/LeaveFeedback";
 import { AccountMigration } from "popup/views/AccountMigration";
 
@@ -256,7 +255,6 @@ const NO_APP_LAYOUT_ROUTES = [
   ROUTES.accountMigration,
   ROUTES.recoverAccount,
   ROUTES.recoverAccountSuccess,
-  ROUTES.pinExtension,
   ROUTES.welcome,
 ];
 
@@ -363,9 +361,6 @@ const Outlet = () => {
           <PublicKeyRoute path={ROUTES.mnemonicPhraseConfirmed}>
             <FullscreenSuccessMessage />
           </PublicKeyRoute>
-          <PublicKeyRoute path={ROUTES.pinExtension}>
-            <PinExtension />
-          </PublicKeyRoute>
           <Route path={ROUTES.accountCreator}>
             <AccountCreator />
           </Route>

extension/src/popup/components/Onboarding/index.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Button, Heading } from "@stellar/design-system";
+import { Button, Heading, Card } from "@stellar/design-system";
 
 import { BackButton } from "popup/basics/buttons/BackButton";
 import { Box } from "popup/basics/layout/Box";
+import { View } from "popup/basics/layout/View";
 
 import "./styles.scss";
 
@@ -51,7 +52,7 @@ export const OnboardingOneCol = ({
 }: {
   children: React.ReactElement | React.ReactElement[];
 }) => (
-  <Box display="flex" gridCellWidth="24rem" gapVertical="1.5rem" {...props}>
+  <Box display="flex" gridCellWidth="24rem" gapVertical="2rem" {...props}>
     {children}
   </Box>
 );
@@ -92,12 +93,12 @@ export const OnboardingButtons = ({
 
   if (children || showBackButton) {
     return (
-      <Box display="flex" isFlexRow gapHorizontal="1rem">
+      <Box display="flex" isFlexRow gapHorizontal=".75rem">
         <>
           {showBackButton ? (
             <BackButton
               customButtonComponent={
-                <Button variant="secondary" size="md" type="button">
+                <Button variant="tertiary" size="lg" type="button">
                   {t("Back")}
                 </Button>
               }
@@ -113,3 +114,33 @@ export const OnboardingButtons = ({
 
   return null;
 };
+
+interface OnboardingModalProps {
+  children: React.ReactNode;
+  headerText: string;
+  bodyText: React.ReactNode;
+}
+
+export const OnboardingModal = ({
+  children,
+  headerText,
+  bodyText,
+}: OnboardingModalProps) => (
+  <View.Content
+    alignment="center"
+    data-testid="account-creator-view"
+    hasNoTopPadding
+  >
+    <div className="Onboarding__card__wrapper">
+      <Card variant="secondary">
+        <div className="Onboarding__card">
+          <Heading as="h2" size="xs" weight="semi-bold">
+            {headerText}
+          </Heading>
+          <div className="Onboarding__card__text">{bodyText}</div>
+        </div>
+        {children}
+      </Card>
+    </div>
+  </View.Content>
+);

extension/src/popup/components/Onboarding/styles.scss

@@ -1,7 +1,8 @@
+@use "../../styles/utils.scss" as *;
+
 .Onboarding {
-  --Onboarding-layout-width: auto;
+  --Onboarding-layout-width: #{pxToRem(448px)};
 
-  margin-top: 4.5rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -17,15 +18,26 @@
     color: var(--sds-clr-gray-12);
   }
 
-  .Checkbox label {
-    color: var(--sds-clr-gray-12);
-  }
-
   .Link--secondary {
     --Link-color-default: var(--sds-clr-gray-12);
     --Link-color-hover: var(--sds-clr-gray-12);
     --Link-color-disabled: var(--sds-clr-gray-12);
   }
+
+  &__card {
+    display: flex;
+    flex-direction: column;
+    gap: #{pxToRem(8px)};
+
+    &__wrapper {
+      width: #{pxToRem(448px)};
+    }
+
+    &__text {
+      color: var(--sds-clr-gray-11);
+      margin-bottom: #{pxToRem(32px)};
+    }
+  }
 }
 
 .OnboardingScreen {

extension/src/popup/components/accountMigration/MnemonicPhrase/index.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import shuffle from "lodash/shuffle";
 
 import { getMigratedMnemonicPhrase } from "@shared/api/internal";
 
@@ -15,9 +14,8 @@ export const MnemonicPhrase = () => {
 
   useEffect(() => {
     const fetchMnemonicPhrase = async () => {
-      const {
-        mnemonicPhrase: migratedMnemonicPhrase,
-      } = await getMigratedMnemonicPhrase();
+      const { mnemonicPhrase: migratedMnemonicPhrase } =
+        await getMigratedMnemonicPhrase();
 
       setMnemonicPhrase(migratedMnemonicPhrase);
     };
@@ -27,10 +25,7 @@ export const MnemonicPhrase = () => {
   return isConfirmed ? (
     <Onboarding layout="full" customWidth="31rem">
       <div className="MigrationMnemonicPhrase">
-        <ConfirmMnemonicPhrase
-          isMigration
-          words={shuffle(mnemonicPhrase.split(" "))}
-        />
+        <ConfirmMnemonicPhrase isMigration mnemonicPhrase={mnemonicPhrase} />
       </div>
     </Onboarding>
   ) : (
@@ -39,7 +34,6 @@ export const MnemonicPhrase = () => {
         <DisplayMnemonicPhrase
           mnemonicPhrase={mnemonicPhrase}
           setIsConfirmed={setIsConfirmed}
-          isMigration
         />
       </div>
     </Onboarding>

extension/src/popup/components/mnemonicPhrase/CheckButton/index.tsx

@@ -8,15 +8,17 @@ type CheckButtonProps = {
   onKeyDown?: (e: any) => void;
   wordKey: string;
   word: string;
+  wordNumber: () => string;
 };
 
 export const CheckButton = ({
   onChange,
   onKeyDown,
   wordKey,
   word,
+  wordNumber,
 }: CheckButtonProps) => (
-  <span>
+  <div className="CheckButton__wrapper">
     <Field
       className="CheckButton"
       id={wordKey}
@@ -30,9 +32,11 @@ export const CheckButton = ({
           onKeyDown(e);
         }
       }}
+      value={wordKey}
     />
     <label className="ButtonLabel" htmlFor={wordKey} data-testid={word}>
-      {word}
+      <div className="ButtonLabel__number">{wordNumber()}</div>{" "}
+      <div className="ButtonLabel__word">{word}</div>
     </label>
-  </span>
+  </div>
 );

extension/src/popup/components/mnemonicPhrase/CheckButton/styles.scss

@@ -1,27 +1,42 @@
 @use "../../../styles/utils.scss" as *;
 
 .ButtonLabel {
-  border: 1px solid var(--sds-clr-gray-01);
-  border-radius: 6.25rem;
+  border: 1px solid var(--sds-clr-gray-07);
+  border-radius: #{pxToRem(6px)};
   color: var(--sds-clr-gray-12);
   cursor: pointer;
-  display: inline-block;
-  font-weight: var(--font-weight-medium);
-  font-size: 0.875rem;
-  margin: 3px;
-  padding: 0.25rem 1rem;
+  display: flex;
+  font-weight: var(--sds-fw-semi-bold);
+  font-size: #{pxToRem(14px)};
+  line-height: #{pxToRem(20px)};
+  padding: #{pxToRem(6px)} #{pxToRem(10px)};
   text-transform: none;
+  width: 100%;
+
+  &__number {
+    color: var(--sds-clr-gray-11);
+    position: absolute;
+    width: #{pxToRem(24px)};
+  }
+  &__word {
+    text-align: center;
+    width: 100%;
+  }
 }
 
 .CheckButton {
   opacity: 0;
+  position: absolute;
 
   &:focus + label {
     @include native-like-outline;
   }
 
   &:checked + label {
-    background: var(--sds-clr-gray-01);
-    color: white;
+    background: var(--sds-clr-gray-04);
+  }
+
+  &__wrapper {
+    width: 50%;
   }
 }