+
+
+
+
+
+ {headerText}
+
+
+ {children}
+ {bodyText}
+
-
- {t("Confirm your recovery phrase")}
-
-
- {({ dirty, isSubmitting, handleChange }) => (
-
- )}
-
+
-
-
- {isMigration
- ? t("Now, let’s create a new mnemonic phrase")
- : t("Secret Recovery phrase")}
-
-
-
-
-
-
+
+
+ {t(
+ "Never disclose your recovery phrase! If you do, someone will be able to access your wallet.",
+ )}
+
+
+ }
+ >
+
);
};
diff --git a/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/index.tsx b/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/index.tsx
index 7094c25558..b6e3ed3436 100644
--- a/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/index.tsx
+++ b/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/index.tsx
@@ -13,7 +13,7 @@ interface GenerateMnemonicPhraseDisplayProps {
export const generateMnemonicPhraseDisplay = ({
mnemonicPhrase = "",
}: GenerateMnemonicPhraseDisplayProps) =>
- mnemonicPhrase.split(" ").map((word: string) => {
+ mnemonicPhrase.split(" ").map((word: string, i: number) => {
/*
As a security measure, we want to prevent writing the mnemonic phrase to the DOM.
The browser can leak this string into memory where a hacker could possibly access it.
@@ -27,25 +27,18 @@ export const generateMnemonicPhraseDisplay = ({
const randomWord = randomWordArr[randomWordIndex];
return (
-
+ // eslint-disable-next-line react/no-array-index-key
+
{randomNumber % 2 === 0 ? (
<>
-
- {randomWord}
-
+ {randomWord}
-
- {word}
-
+ {word}
) : (
<>
-
- {word}
-
-
- {randomWord}
-
+ {word}
+ {randomWord}
)}
@@ -62,7 +55,7 @@ export const MnemonicDisplay = ({
isPopupView,
}: MnemonicDisplayProps) => (
-
-
- {t("Please select each word in the same order you have")}
-{t("them noted to confirm you got them right")}
-
+
+
+ {t(
+ "Please select each word in the same order you have them noted to confirm you got them right.",
+ )}
+
+
+ }
+ >
+
+ {({ dirty, isSubmitting, handleChange }) => (
+
+ )}
+
+
+
+
);
};
diff --git a/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/styles.scss b/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/styles.scss
index ec7b1e21cc..a238adbb7f 100644
--- a/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/styles.scss
+++ b/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/styles.scss
@@ -1,47 +1,43 @@
+@use "../../../styles/utils.scss" as *;
+
.ConfirmMnemonicPhrase {
- &__screen {
- display: flex;
- flex-direction: column;
- gap: 1rem;
+ margin-top: #{pxToRem(168px)};
+
+ &__card-wrapper {
+ margin-bottom: #{pxToRem(32px)};
}
- &__header {
- text-align: center;
+ &__word-bubble-wrapper {
+ display: flex;
+ flex-flow: column wrap;
+ align-content: start;
+ height: #{pxToRem(244px)};
+ gap: #{pxToRem(8px)};
}
- &__content {
- font-size: 1rem;
- line-height: 1.5rem;
- font-weight: var(--font-weight-regular);
- color: var(--sds-clr-gray-12);
+ &__footer {
+ color: var(--sds-clr-gray-11);
+ display: flex;
+ flex-direction: column;
+ font-size: #{pxToRem(14px)};
+ gap: #{pxToRem(16px)};
+ line-height: #{pxToRem(20px)};
+ text-align: center;
- p {
- color: var(--sds-clr-gray-12);
- margin-bottom: 0 !important;
+ &__buttons {
+ display: flex;
+ gap: #{pxToRem(12px)};
}
}
- &__selected-words-wrapper {
- height: 7.5rem;
- width: 100%;
- }
-
- &__selected-words-text {
- display: flex;
- flex-wrap: wrap;
- font-weight: var(--font-weight-medium);
- font-size: 1rem;
- line-height: 1.5rem;
- color: var(--sds-clr-gray-12);
- list-style-type: none;
- padding: 0;
- }
+ &__error {
+ height: #{pxToRem(74px)};
+ margin: 0 auto;
+ padding: #{pxToRem(8px)};
+ width: #{pxToRem(284px)};
- &__word-bubble-wrapper {
- display: flex;
- flex-flow: row wrap;
- justify-content: center;
- align-content: start;
- padding: 1rem 0 1.5rem;
+ .Alert__content {
+ align-items: center;
+ }
}
}
diff --git a/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx b/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx
index 386f518802..ba3636a100 100644
--- a/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx
+++ b/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx
@@ -1,12 +1,8 @@
import React from "react";
import { useTranslation } from "react-i18next";
-import { Button, Icon, Notification } from "@stellar/design-system";
+import { Button, Text } from "@stellar/design-system";
-import {
- OnboardingHeader,
- OnboardingTwoCol,
- OnboardingOneCol,
-} from "popup/components/Onboarding";
+import { OnboardingModal } from "popup/components/Onboarding";
import { MnemonicDisplay } from "../MnemonicDisplay";
@@ -15,67 +11,38 @@ import "./styles.scss";
export const DisplayMnemonicPhrase = ({
mnemonicPhrase,
setIsConfirmed,
- isMigration,
}: {
mnemonicPhrase: string;
setIsConfirmed: (confirmed: boolean) => void;
- isMigration?: boolean;
}) => {
const { t } = useTranslation();
return (
-
+ {authError ? (
+
+ {authError ? t("Order is incorrect, try again") : ""}
+
+ ) : null}
+
+
- {isMigration ? (
-
- - {t("This new backup phrase will be used for your new accounts.")} -
- ) : ( - <> -- {t( - "Your recovery phrase gives you access to your account and is the", - )}{" "} - {t("only way to access it in a new browser")}.{" "} - {t("Keep it in a safe place.")} -
-- {t( - "For your security, we'll check if you got it right in the next step.", - )} -
- - )} -
-
+
- e.preventDefault()}
className={`MnemonicDisplay__ordered-list ${
diff --git a/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/styles.scss b/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/styles.scss
index 07cb3c8bae..4aa68735c7 100644
--- a/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/styles.scss
+++ b/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/styles.scss
@@ -1,16 +1,24 @@
+@use "../../../styles/utils.scss" as *;
+
.MnemonicDisplay {
position: relative;
text-align: center;
+ margin-bottom: #{pxToRem(32px)};
&__ordered-list {
columns: 2;
text-align: start;
counter-reset: item;
list-style-type: none;
+ padding: 0 #{pxToRem(8px)} !important;
li::before {
counter-increment: item;
content: counter(item) !important;
+ display: inline-block;
+ width: #{pxToRem(24px)};
+ position: relative !important;
+ left: 0 !important;
}
&--popup-view {
@@ -20,12 +28,17 @@
}
&__list-item {
- padding-left: 1rem;
+ display: flex;
+ gap: #{pxToRem(8px)};
&::before {
- color: var(--sds-clr-gray-12);
+ color: var(--sds-clr-gray-11);
content: none !important;
}
+
+ span {
+ font-weight: var(--sds-fw-semi-bold);
+ }
}
&__random-word {
diff --git a/extension/src/popup/constants/metricsNames.ts b/extension/src/popup/constants/metricsNames.ts
index 35469411ef..187f3e95b6 100644
--- a/extension/src/popup/constants/metricsNames.ts
+++ b/extension/src/popup/constants/metricsNames.ts
@@ -15,7 +15,6 @@ export const METRIC_NAMES = {
viewMnemonicPhrase: "loaded screen: mnemonic phrase",
viewMnemonicPhraseConfirm: "loaded screen: confirm mnemonic phrase",
viewMnemonicPhraseConfirmed: "loaded screen: account creator finished",
- viewPinExtension: "loaded screen: pix extension",
viewRecoverAccount: "loaded screen: recover account",
viewRecoverAccountSuccess: "loaded screen: recover account: success",
viewSignTransaction: "loaded screen: sign transaction",
diff --git a/extension/src/popup/constants/routes.ts b/extension/src/popup/constants/routes.ts
index a056b1d3c9..5076788c75 100644
--- a/extension/src/popup/constants/routes.ts
+++ b/extension/src/popup/constants/routes.ts
@@ -34,7 +34,6 @@ export enum ROUTES {
mnemonicPhrase = "/mnemonic-phrase",
mnemonicPhraseConfirm = "/mnemonic-phrase/confirm",
mnemonicPhraseConfirmed = "/mnemonic-phrase-confirmed",
- pinExtension = "/pin-extension",
unlockAccount = "/unlock-account",
verifyAccount = "/verify-account",
accountCreator = "/account-creator",
diff --git a/extension/src/popup/metrics/views.ts b/extension/src/popup/metrics/views.ts
index 428d9e647b..71c10f42dc 100644
--- a/extension/src/popup/metrics/views.ts
+++ b/extension/src/popup/metrics/views.ts
@@ -27,7 +27,6 @@ const routeToEventName = {
[ROUTES.unlockAccount]: METRIC_NAMES.viewUnlockAccount,
[ROUTES.verifyAccount]: METRIC_NAMES.viewVerifyAccount,
[ROUTES.mnemonicPhraseConfirmed]: METRIC_NAMES.viewMnemonicPhraseConfirmed,
- [ROUTES.pinExtension]: METRIC_NAMES.viewPinExtension,
[ROUTES.accountCreator]: METRIC_NAMES.viewAccountCreator,
[ROUTES.recoverAccount]: METRIC_NAMES.viewRecoverAccount,
[ROUTES.recoverAccountSuccess]: METRIC_NAMES.viewRecoverAccountSuccess,
diff --git a/extension/src/popup/views/AccountCreator/index.tsx b/extension/src/popup/views/AccountCreator/index.tsx
index 22f4e3b976..57f44fa8d0 100644
--- a/extension/src/popup/views/AccountCreator/index.tsx
+++ b/extension/src/popup/views/AccountCreator/index.tsx
@@ -1,6 +1,14 @@
import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
-import { Input, Checkbox, Link, Button } from "@stellar/design-system";
+import {
+ Input,
+ Checkbox,
+ Link,
+ Button,
+ Card,
+ Heading,
+ Icon,
+} from "@stellar/design-system";
import { Field, FieldProps, Formik, Form } from "formik";
import { object as YupObject } from "yup";
import { useTranslation } from "react-i18next";
@@ -16,16 +24,13 @@ import {
publicKeySelector,
authErrorSelector,
} from "popup/ducks/accountServices";
-import { FormRows } from "popup/basics/Forms";
import { View } from "popup/basics/layout/View";
import {
Onboarding,
OnboardingButtons,
- OnboardingHeader,
OnboardingOneCol,
} from "popup/components/Onboarding";
-import { PasswordRequirements } from "popup/components/PasswordRequirements";
import { MnemonicPhrase } from "popup/views/MnemonicPhrase";
import "./styles.scss";
@@ -67,106 +72,127 @@ export const AccountCreator = () => {
- - {t( - "Freighter will never ask for your recovery phrase unless you’re actively importing your account using the browser extension - never on an external website", - )} - -
- - {t( - "Always check the domain of websites you’re using Freighter with", - )} - -
- - {t( - "Freighter cannot recover your account if you lose your recovery phrase, so keep it safe", - )} - -
-
-
-
- );
-};
+import "./styles.scss";
-const MnemonicPhraseConfirmedMessage = () => {
+export const FullscreenSuccessMessage = () => {
const { t } = useTranslation();
- return (
- <>
-
-
- -
-
-
- - {t( - "Awesome, you passed the test. Keep your recovery phrase safe, it’s your responsibility.", - )} -
-
-
- {isChrome() ? (
- - {t( - "Awesome, you passed the test! Pin the extension in your browser to access it easily.", - )}{" "} - - {t("Keep your recovery phrase safe, it’s your responsibility.")} - -
- {!isChrome() && ( -- {t( - "Check your account details by clicking on the Freighter icon on your browser.", - )} -
- )} -
- 
+
-
-
- setIsConfirmed(false)}
- hasGoBackBtn
- />
-
-
-
- ) : (
-
-
-
-
-
-
- );
- }
-
- return null;
-};
diff --git a/extension/src/popup/views/MnemonicPhrase/index.tsx b/extension/src/popup/views/MnemonicPhrase/index.tsx
new file mode 100644
index 0000000000..7f2587b034
--- /dev/null
+++ b/extension/src/popup/views/MnemonicPhrase/index.tsx
@@ -0,0 +1,156 @@
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { Redirect } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Button, Text, Icon } from "@stellar/design-system";
+
+import { APPLICATION_STATE } from "@shared/constants/applicationState";
+
+import { ROUTES } from "popup/constants/routes";
+import { Onboarding, OnboardingModal } from "popup/components/Onboarding";
+import { ConfirmMnemonicPhrase } from "popup/components/mnemonicPhrase/ConfirmMnemonicPhrase";
+import { DisplayMnemonicPhrase } from "popup/components/mnemonicPhrase/DisplayMnemonicPhrase";
+import {
+ applicationStateSelector,
+ confirmMnemonicPhrase,
+} from "popup/ducks/accountServices";
+import { View } from "popup/basics/layout/View";
+
+import "./styles.scss";
+
+interface MnemonicPhraseProps {
+ mnemonicPhrase: string;
+}
+
+export const MnemonicPhrase = ({
+ mnemonicPhrase = "",
+}: MnemonicPhraseProps) => {
+ const { t } = useTranslation();
+ const applicationState = useSelector(applicationStateSelector);
+ const [isConfirmed, setIsConfirmed] = useState(false);
+ const [isModalShowing, setIsModalShowing] = useState(true);
+ const dispatch = useDispatch();
+
+ const handleSkip = () => {
+ // confirm the mnemonic phrase for the user
+
+ dispatch(confirmMnemonicPhrase(mnemonicPhrase));
+ };
+
+ if (applicationState === APPLICATION_STATE.MNEMONIC_PHRASE_CONFIRMED) {
+ return
-
-
-
- {t("Your Freighter install is complete")}
-
-
-
-
- );
-};
diff --git a/extension/src/popup/views/PinExtension/styles.scss b/extension/src/popup/views/PinExtension/styles.scss
deleted file mode 100644
index 25cf251268..0000000000
--- a/extension/src/popup/views/PinExtension/styles.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.PinExtension {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
-
- &__wrapper {
- max-width: 31rem;
- }
-
- &__caption {
- line-height: 1.5rem;
- margin-bottom: 2rem;
- color: var(--sds-clr-gray-12);
-
- div:not(:last-child) {
- margin-bottom: 0.4rem;
- }
- }
-
- &__img {
- margin-bottom: 2rem;
-
- img {
- width: 100%;
- }
- }
-}
diff --git a/extension/src/popup/views/Preferences/index.tsx b/extension/src/popup/views/Preferences/index.tsx
index db15afc3e5..261f199735 100644
--- a/extension/src/popup/views/Preferences/index.tsx
+++ b/extension/src/popup/views/Preferences/index.tsx
@@ -36,7 +36,6 @@ export const Preferences = () => {
isDataSharingAllowedValue,
isHideDustEnabledValue,
} = formValue;
- console.log(formValue);
// eslint-disable-next-line
await dispatch(
diff --git a/extension/src/popup/views/Welcome/index.tsx b/extension/src/popup/views/Welcome/index.tsx
index cc3cbc5b31..6825c4bb5c 100644
--- a/extension/src/popup/views/Welcome/index.tsx
+++ b/extension/src/popup/views/Welcome/index.tsx
@@ -1,11 +1,13 @@
import React from "react";
-import { Button, Card, Heading } from "@stellar/design-system";
+import { Button, Heading } from "@stellar/design-system";
import { useTranslation } from "react-i18next";
import { ROUTES } from "popup/constants/routes";
import { navigateTo } from "popup/helpers/navigate";
import { View } from "popup/basics/layout/View";
+import LogoWelcome from "popup/assets/logo-freighter-welcome.svg";
+
import "./styles.scss";
export const Welcome = () => {
@@ -13,54 +15,48 @@ export const Welcome = () => {
return (
-
+
-
-
-
- );
-};
-
-export const FullscreenSuccessMessage = () => {
- const location = useLocation();
- const { t } = useTranslation();
-
- const IS_MNEMONIC_PHRASE_STATE =
- location.pathname === ROUTES.mnemonicPhraseConfirmed;
-
- return (
-
-
-
-
- {t("Wallet created successfully!")}
-
-
+
+
-
+
);
};
diff --git a/extension/src/popup/views/FullscreenSuccessMessage/styles.scss b/extension/src/popup/views/FullscreenSuccessMessage/styles.scss
index 6fad6cbd35..2728225fb0 100644
--- a/extension/src/popup/views/FullscreenSuccessMessage/styles.scss
+++ b/extension/src/popup/views/FullscreenSuccessMessage/styles.scss
@@ -1,3 +1,5 @@
+@use "../../styles/utils.scss" as *;
+
.InfoBlock {
&__header {
color: var(--sds-clr-gray-12);
@@ -27,6 +29,93 @@
}
.FullscreenSuccessMessage {
+ display: flex;
+ height: 100%;
+ align-items: center;
+
+ &__pin {
+ background: var(--sds-clr-gray-03);
+ border-radius: #{pxToRem(12px)};
+ display: flex;
+ flex-direction: column;
+ gap: #{pxToRem(16px)};
+ padding: #{pxToRem(16px)};
+ position: absolute;
+ z-index: var(--z-index-tooltip);
+ width: #{pxToRem(336px)};
+ top: #{pxToRem(24px)};
+ right: #{pxToRem(24px)};
+
+ &__row {
+ display: flex;
+ line-height: #{pxToRem(24px)};
+
+ &:nth-child(2) {
+ gap: #{pxToRem(8px)};
+ }
+
+ &:nth-child(3) {
+ border-radius: #{pxToRem(8px)};
+ align-items: center;
+ background: var(--sds-clr-gray-04);
+ gap: #{pxToRem(12px)};
+ padding: #{pxToRem(8px)};
+ }
+
+ &__gradient {
+ background: linear-gradient(
+ 90deg,
+ var(--sds-clr-gray-03) 0%,
+ var(--sds-clr-gray-04) 49.96%
+ );
+ border-top-right-radius: #{pxToRem(16px)};
+ border-bottom-right-radius: #{pxToRem(16px)};
+ width: #{pxToRem(264px)};
+ height: #{pxToRem(32px)};
+ }
+
+ &__toolbar {
+ align-items: center;
+ display: flex;
+ border: 1px solid var(--sds-clr-gray-06);
+ border-radius: #{pxToRem(16px)};
+ justify-content: center;
+ width: #{pxToRem(32px)};
+ height: #{pxToRem(32px)};
+
+ svg {
+ width: #{pxToRem(20px)};
+ height: #{pxToRem(20px)};
+ }
+ }
+
+ &__logo {
+ display: flex;
+ align-items: center;
+ img {
+ width: #{pxToRem(24px)};
+ height: #{pxToRem(24px)};
+ }
+ }
+
+ &__text {
+ flex: 1 0 0;
+ }
+
+ &__pin-icon {
+ display: flex;
+
+ svg {
+ fill: var(--sds-clr-navy-09);
+ stroke: var(--sds-clr-navy-09);
+ }
+ }
+ }
+ }
+
+ &__text {
+ color: var(--sds-clr-gray-12);
+ }
&__wrapper {
display: flex;
flex-flow: column wrap;
@@ -46,45 +135,44 @@
}
&__infoBlock {
- margin-bottom: 0.5rem;
-
- &__list {
- list-style: inside;
-
- ::before {
- content: none !important;
+ display: flex;
+ flex-direction: column;
+ gap: #{pxToRem(12px)};
+
+ &__row {
+ display: flex;
+ gap: #{pxToRem(12px)};
+
+ &__icon {
+ align-items: center;
+ background: var(--sds-clr-gray-01);
+ border-radius: #{pxToRem(100px)};
+ border: 1px solid var(--sds-clr-gray-06);
+ display: flex;
+ height: #{pxToRem(24px)};
+ justify-content: center;
+ padding: #{pxToRem(4px)};
+ width: #{pxToRem(24px)};
+
+ svg {
+ width: #{pxToRem(16px)};
+ }
}
- li:not(:last-of-type) {
- margin-bottom: 1rem;
+ &__text {
+ color: var(--sds-clr-gray-11);
}
- }
- }
- &__illo-container {
- position: relative;
- }
-
- &__success-image {
- height: 4.25rem;
- }
-
- &__extension-image {
- height: 3.5rem;
- margin-top: 0.5rem;
- }
-
- &__copy {
- font-size: 1rem;
- line-height: 1.5rem;
- font-weight: var(--font-weight-regular);
- margin-bottom: 1.5rem;
-
- p {
- color: var(--sds-clr-gray-12) !important;
+ &:nth-child(1) {
+ svg {
+ stroke: var(--sds-clr-mint-09);
+ }
+ }
- strong {
- color: var(--sds-clr-gray-12) !important;
+ &:nth-child(2) {
+ svg {
+ stroke: var(--sds-clr-lime-09);
+ }
}
}
}
diff --git a/extension/src/popup/views/MnemonicPhrase.tsx b/extension/src/popup/views/MnemonicPhrase.tsx
deleted file mode 100644
index ed0c69f2d7..0000000000
--- a/extension/src/popup/views/MnemonicPhrase.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { useState } from "react";
-import { useSelector } from "react-redux";
-import shuffle from "lodash/shuffle";
-import { Redirect } from "react-router-dom";
-
-import { APPLICATION_STATE } from "@shared/constants/applicationState";
-
-import { ROUTES } from "popup/constants/routes";
-import { Onboarding } from "popup/components/Onboarding";
-import { ConfirmMnemonicPhrase } from "popup/components/mnemonicPhrase/ConfirmMnemonicPhrase";
-import { DisplayMnemonicPhrase } from "popup/components/mnemonicPhrase/DisplayMnemonicPhrase";
-import { applicationStateSelector } from "popup/ducks/accountServices";
-import { View } from "popup/basics/layout/View";
-
-interface MnemonicPhraseProps {
- mnemonicPhrase: string;
-}
-
-export const MnemonicPhrase = ({
- mnemonicPhrase = "",
-}: MnemonicPhraseProps) => {
- const applicationState = useSelector(applicationStateSelector);
- const [isConfirmed, setIsConfirmed] = useState(false);
-
- if (applicationState === APPLICATION_STATE.MNEMONIC_PHRASE_CONFIRMED) {
- return
+ {t("Pin Freighter to the toolbar")}
- )}
-
- {IS_MNEMONIC_PHRASE_STATE ? (
-
+
+
+
+
+
+
+
+
+ 
+
+
+ {t("Freighter - Stellar Wallet")}
+
+
+
-
+
+
+
+
+ {t(
+ "To access your wallet, click Freighter from your browser Extensions browser menu.",
+ )}
+
+
+ }
+ >
+
+
+
+
+
+
+
+
+ {t(
+ "Always check the domain of websites you're using Freighter with",
+ )}
+
+
+
+
+
+
+ {t(
+ "Freighter cannot recover your account if you lose your recovery phrase, so keep it safe",
+ )}
+
+
+
+
+ {t(
+ "Your recovery phrase gives you access to your account and is the only way to access it in a new browser. ",
+ )}
+
+ {t("Keep it in a safe place.")}
+
+
+
+ {t(
+ "For your security, we'll check if you got it right in the next step.",
+ )}
+
+
+ }
+ >
+
+
+ );
+ }
+ return isConfirmed ? (
+
+
+
+
+
+
+
+ {t(
+ "Your recovery phrase gives you full access to your wallets and funds",
+ )}
+
+
+
+
+
+
+ {t(
+ "If you forget your password, you can use the recovery phrase to access your wallet",
+ )}
+
+
+
+
+
+
+ {t("NEVER share this phrase with anyone")}
+
+
+
+
+
+
+ {t(
+ "No one from Stellar Development Foundation will ever ask for your recovery phrase",
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+ );
+ }
+
+ return null;
+};
diff --git a/extension/src/popup/views/MnemonicPhrase/styles.scss b/extension/src/popup/views/MnemonicPhrase/styles.scss
new file mode 100644
index 0000000000..34fc025c3f
--- /dev/null
+++ b/extension/src/popup/views/MnemonicPhrase/styles.scss
@@ -0,0 +1,81 @@
+@use "../../styles/utils.scss" as *;
+
+.MnemonicPhrase {
+ &__view {
+ &__wrapper {
+ display: flex;
+ height: 100%;
+ align-items: center;
+ }
+ }
+
+ &__modal {
+ &__text {
+ &--highlight {
+ color: var(--sds-clr-gray-12);
+ }
+ }
+
+ &__rows {
+ display: flex;
+ flex-direction: column;
+ gap: #{pxToRem(12px)};
+ margin-bottom: #{pxToRem(32px)};
+ }
+
+ &__row {
+ display: flex;
+ gap: #{pxToRem(12px)};
+
+ &:nth-child(1) {
+ svg {
+ stroke: var(--sds-clr-lime-09);
+ }
+ }
+
+ &:nth-child(2) {
+ svg {
+ stroke: var(--sds-clr-gold-09);
+ }
+ }
+
+ &:nth-child(3) {
+ svg {
+ stroke: var(--sds-clr-pink-09);
+ }
+ }
+
+ &:nth-child(4) {
+ svg {
+ stroke: var(--sds-clr-navy-09);
+ }
+ }
+
+ &__icon {
+ align-items: center;
+ background: var(--sds-clr-gray-01);
+ border-radius: #{pxToRem(100px)};
+ border: 1px solid var(--sds-clr-gray-06);
+ display: flex;
+ height: #{pxToRem(32px)};
+ justify-content: center;
+ padding: #{pxToRem(6px)};
+ width: #{pxToRem(32px)};
+
+ svg {
+ width: #{pxToRem(20px)};
+ }
+ }
+
+ &__text {
+ line-height: #{pxToRem(24px)};
+ }
+ }
+
+ &__footer {
+ display: flex;
+ flex-direction: column;
+ gap: #{pxToRem(12px)};
+ }
+ }
+}
diff --git a/extension/src/popup/views/PinExtension/index.tsx b/extension/src/popup/views/PinExtension/index.tsx
deleted file mode 100644
index eadd5e76c8..0000000000
--- a/extension/src/popup/views/PinExtension/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { Button, Icon } from "@stellar/design-system";
-
-import ExtensionsPin from "popup/assets/illo-pin-extension.svg";
-import { SubmitButtonWrapper } from "popup/basics/Forms";
-import { Onboarding, OnboardingHeader } from "popup/components/Onboarding";
-
-import "./styles.scss";
-import { View } from "popup/basics/layout/View";
-
-export const PinExtension = () => {
- const { t } = useTranslation();
-
- return (
-
-
-
-
-
-
-
-
-
-
- 1.{" "}
- {t(
- "Click on the extensions button at the top of your browser’s bar",
- )}
-
-
- 2.{" "}
- {t(
- "Click on Freighter’s pin button to have it always visible",
- )}
-
-
- 
-
-
-
- {t("Welcome! Is this your first time using Freighter?")}
-
-
-
-
-
-
+
+
diff --git a/extension/src/popup/views/Welcome/styles.scss b/extension/src/popup/views/Welcome/styles.scss
index 02dfb8cf1f..5b3ffad8b7 100644
--- a/extension/src/popup/views/Welcome/styles.scss
+++ b/extension/src/popup/views/Welcome/styles.scss
@@ -1,10 +1,6 @@
-.Welcome {
- &__button-container {
- display: flex;
- justify-content: space-around;
- padding-top: 1rem;
- }
+@use "../../styles/utils.scss" as *;
+.Welcome {
&__column {
display: flex;
flex-direction: column;
@@ -13,7 +9,6 @@
justify-content: center;
.Heading {
- margin-bottom: 2.5rem !important;
max-width: 30rem;
text-align: center;
}
@@ -24,42 +19,26 @@
justify-content: space-between;
flex-direction: column;
align-items: center;
+ gap: 2rem;
+ margin-bottom: 1.5rem;
}
&__heading {
- &--small {
- color: var(--sds-clr-gray-12);
- font-size: 1.125rem;
- font-weight: var(--font-weight-medium);
- margin-bottom: 0.75rem;
+ font-size: #{pxToRem(40px)};
+ line-height: #{pxToRem(48px)} !important;
+
+ &--subheading {
+ color: var(--sds-clr-gray-11);
}
}
- &__row-screen {
- display: flex;
- justify-content: center;
- gap: 1rem;
- flex-wrap: wrap;
+ &__cta {
+ color: var(--sds-clr-gray-11);
}
- &__half-screen {
- position: relative;
+ &__row-screen {
display: flex;
- flex-direction: column;
justify-content: center;
- padding: 0;
- width: 24rem;
- }
-
- &__import {
- .Card--default {
- background: var(--sds-clr-gray-01);
- }
- }
-
- &__text {
- font-size: 1rem;
- line-height: 1.5rem;
- margin-bottom: 2rem;
+ gap: 0.75rem;
}
}
diff --git a/extension/src/popup/views/__tests__/MnemonicPhrase.test.tsx b/extension/src/popup/views/__tests__/MnemonicPhrase.test.tsx
index db8ca3c53e..85b82b642b 100644
--- a/extension/src/popup/views/__tests__/MnemonicPhrase.test.tsx
+++ b/extension/src/popup/views/__tests__/MnemonicPhrase.test.tsx
@@ -113,7 +113,6 @@ describe.skip("MnemonicPhrase", () => {
screen.getByTestId("display-mnemonic-phrase-confirm-btn"),
);
});
- await waitFor(() => screen.getByText(`redirect ${ROUTES.pinExtension}`));
});
});
});
{t("I’m new!")}
-
- {t("I’m going to need a seed phrase")}
-
-
-
-
-
+
+ {t("Welcome to Freighter")}
+
+
+ {t("Your favorite Stellar wallet")}
+
-
-
-
+
+
- {t("I’ve done this before")}
-
-
- {t("I have my 12 word seed phrase")}
-
-
-
-
-
+ {t("How do you want to get started?")}
+
+
+