{hasGoBackBtn && !isNewTabSession ? (
-
+
) : null}
{children}
diff --git a/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx b/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx
index 1905051773..7589e06bdd 100644
--- a/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx
+++ b/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx
@@ -2,9 +2,6 @@ import React from "react";
import { useTranslation } from "react-i18next";
import { Button, Icon, Notification } from "@stellar/design-system";
-import { ROUTES } from "popup/constants/routes";
-import { navigateTo } from "popup/helpers/navigate";
-
import {
OnboardingScreen,
OnboardingHalfScreen,
@@ -17,8 +14,10 @@ import "./styles.scss";
export const DisplayMnemonicPhrase = ({
mnemonicPhrase,
+ setIsConfirmed,
}: {
mnemonicPhrase: string;
+ setIsConfirmed: (confirmed: boolean) => void;
}) => {
const { t } = useTranslation();
@@ -62,7 +61,7 @@ export const DisplayMnemonicPhrase = ({
isFullWidth
variant="primary"
onClick={() => {
- navigateTo(ROUTES.mnemonicPhraseConfirm);
+ setIsConfirmed(true);
}}
>
{t("Next")}
diff --git a/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/index.tsx b/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/index.tsx
index bbd822b08f..d2d9b9b06b 100644
--- a/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/index.tsx
+++ b/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/index.tsx
@@ -11,7 +11,7 @@ interface generateMnemonicPhraseDisplayProps {
}
export const generateMnemonicPhraseDisplay = ({
- mnemonicPhrase,
+ mnemonicPhrase = "",
}: generateMnemonicPhraseDisplayProps) =>
mnemonicPhrase.split(" ").map((word: string) => {
/*
diff --git a/extension/src/popup/helpers/useMnemonicPhrase.ts b/extension/src/popup/helpers/useMnemonicPhrase.ts
deleted file mode 100644
index 33cb92b8aa..0000000000
--- a/extension/src/popup/helpers/useMnemonicPhrase.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useEffect, useState } from "react";
-import { getMnemonicPhrase } from "@shared/api/internal";
-
-export const useMnemonicPhrase = () => {
- const [mnemonicPhrase, setMnemonicPhrase] = useState("");
-
- useEffect(() => {
- let res = { mnemonicPhrase: "" };
-
- const fetchMnemonicPhrase = async () => {
- try {
- res = await getMnemonicPhrase();
- } catch (e) {
- console.error(e);
- }
-
- const { mnemonicPhrase: fetchedMnemonicPhrase } = res;
- setMnemonicPhrase(fetchedMnemonicPhrase);
- };
-
- fetchMnemonicPhrase();
-
- return () => {
- setMnemonicPhrase("");
- };
- }, []);
-
- return mnemonicPhrase;
-};
diff --git a/extension/src/popup/views/AccountCreator/index.tsx b/extension/src/popup/views/AccountCreator/index.tsx
index 923052d1df..a4437919ef 100644
--- a/extension/src/popup/views/AccountCreator/index.tsx
+++ b/extension/src/popup/views/AccountCreator/index.tsx
@@ -1,12 +1,11 @@
-import React, { useEffect } from "react";
+import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Input, Checkbox, Link, Button } from "@stellar/design-system";
import { Field, FieldProps, Formik, Form } from "formik";
import { object as YupObject } from "yup";
import { useTranslation } from "react-i18next";
-import { ROUTES } from "popup/constants/routes";
-import { navigateTo } from "popup/helpers/navigate";
+import { showBackupPhrase } from "@shared/api/internal";
import {
password as passwordValidator,
confirmPassword as confirmPasswordValidator,
@@ -29,6 +28,8 @@ import {
import { Header } from "popup/components/Header";
import { PasswordRequirements } from "popup/components/PasswordRequirements";
+import { MnemonicPhrase } from "popup/views/MnemonicPhrase";
+
import "./styles.scss";
export const AccountCreator = () => {
@@ -36,6 +37,7 @@ export const AccountCreator = () => {
const dispatch = useDispatch();
const authError = useSelector(authErrorSelector);
const { t } = useTranslation();
+ const [mnemonicPhrase, setMnemonicPhrase] = useState("");
interface FormValues {
password: string;
@@ -51,6 +53,9 @@ export const AccountCreator = () => {
const handleSubmit = async (values: FormValues) => {
await dispatch(createAccount(values.password));
+ const res = await showBackupPhrase(values.password);
+
+ setMnemonicPhrase(res.mnemonicPhrase);
};
const AccountCreatorSchema = YupObject().shape({
@@ -59,13 +64,9 @@ export const AccountCreator = () => {
termsOfUse: termsofUseValidator,
});
- useEffect(() => {
- if (publicKey) {
- navigateTo(ROUTES.mnemonicPhrase);
- }
- }, [publicKey]);
-
- return (
+ return mnemonicPhrase && publicKey ? (
+
+ ) : (
<>
diff --git a/extension/src/popup/views/DisplayBackupPhrase/index.tsx b/extension/src/popup/views/DisplayBackupPhrase/index.tsx
index 4e04946811..ed74fd11d2 100644
--- a/extension/src/popup/views/DisplayBackupPhrase/index.tsx
+++ b/extension/src/popup/views/DisplayBackupPhrase/index.tsx
@@ -8,7 +8,6 @@ import { showBackupPhrase } from "@shared/api/internal";
import { ROUTES } from "popup/constants/routes";
import { navigateTo } from "popup/helpers/navigate";
import { emitMetric } from "helpers/metrics";
-import { useMnemonicPhrase } from "popup/helpers/useMnemonicPhrase";
import { METRIC_NAMES } from "popup/constants/metricsNames";
@@ -23,7 +22,7 @@ export const DisplayBackupPhrase = () => {
const { t } = useTranslation();
const [errorMessage, setErrorMessage] = useState("");
const [isPhraseUnlocked, setIsPhraseUnlocked] = useState(false);
- const mnemonicPhrase = useMnemonicPhrase();
+ const [mnemonicPhrase, setMnemonicPhrase] = useState("");
useEffect(() => {
emitMetric(
@@ -50,6 +49,7 @@ export const DisplayBackupPhrase = () => {
error_type: res.error,
});
} else {
+ setMnemonicPhrase(res.mnemonicPhrase);
setIsPhraseUnlocked(true);
setErrorMessage("");
emitMetric(METRIC_NAMES.backupPhraseSuccess);
diff --git a/extension/src/popup/views/MnemonicPhrase.tsx b/extension/src/popup/views/MnemonicPhrase.tsx
index aee2d8f86c..b75934ce40 100644
--- a/extension/src/popup/views/MnemonicPhrase.tsx
+++ b/extension/src/popup/views/MnemonicPhrase.tsx
@@ -1,46 +1,52 @@
-import React from "react";
+import React, { useState } from "react";
import { useSelector } from "react-redux";
import shuffle from "lodash/shuffle";
-import { Switch, Redirect } from "react-router-dom";
+import { Redirect } from "react-router-dom";
import { APPLICATION_STATE } from "@shared/constants/applicationState";
-import { PublicKeyRoute } from "popup/Router";
import { ROUTES } from "popup/constants/routes";
import { FullscreenStyle } from "popup/components/FullscreenStyle";
-import { useMnemonicPhrase } from "popup/helpers/useMnemonicPhrase";
import { Header } from "popup/components/Header";
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";
-export const MnemonicPhrase = () => {
- const mnemonicPhrase = useMnemonicPhrase();
+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
;
}
if (mnemonicPhrase) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ return isConfirmed ? (
+ <>
+
+
+
setIsConfirmed(false)} hasGoBackBtn>
+
+
+ >
+ ) : (
+ <>
+
+
+
+
+
+ >
);
}
diff --git a/extension/src/popup/views/__tests__/MnemonicPhrase.test.tsx b/extension/src/popup/views/__tests__/MnemonicPhrase.test.tsx
index dc468d316f..afcb43cfca 100644
--- a/extension/src/popup/views/__tests__/MnemonicPhrase.test.tsx
+++ b/extension/src/popup/views/__tests__/MnemonicPhrase.test.tsx
@@ -27,9 +27,6 @@ jest.mock("popup/constants/history", () => ({
},
}));
-jest.mock("popup/helpers/useMnemonicPhrase", () => ({
- useMnemonicPhrase: () => "dummy mnemonic",
-}));
jest.mock("react-router-dom", () => {
const ReactRouter = jest.requireActual("react-router-dom");
return {
@@ -68,7 +65,7 @@ describe.skip("MnemonicPhrase", () => {
},
}}
>
-
+
,
);
await waitFor(() => screen.getByTestId("display-mnemonic-phrase"));
@@ -96,7 +93,7 @@ describe.skip("MnemonicPhrase", () => {
},
}}
>
-
+
,
);
diff --git a/extension/webpack.common.js b/extension/webpack.common.js
index 883765ac98..5432334d34 100644
--- a/extension/webpack.common.js
+++ b/extension/webpack.common.js
@@ -10,7 +10,9 @@ const { DEFAULT_STATS } = require("../config/webpack");
const BUILD_PATH = path.resolve(__dirname, "./build");
-const commonConfig = (env = { EXPERIMENTAL: false }) => ({
+const commonConfig = (
+ env = { EXPERIMENTAL: false, AMPLITUDE_KEY: "", SENTRY_KEY: "" },
+) => ({
entry: {
background: path.resolve(__dirname, "./public/background.ts"),
index: ["babel-polyfill", path.resolve(__dirname, "./src/popup/index.tsx")],
@@ -127,6 +129,8 @@ const commonConfig = (env = { EXPERIMENTAL: false }) => ({
}),
new webpack.DefinePlugin({
EXPERIMENTAL: env.EXPERIMENTAL,
+ AMPLITUDE_KEY: JSON.stringify(env.AMPLITUDE_KEY),
+ SENTRY_KEY: JSON.stringify(env.SENTRY_KEY),
}),
new MiniCssExtractPlugin({
filename: "[name].min.css",
diff --git a/yarn.lock b/yarn.lock
index af5d4e52e4..cc34ea2c51 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3412,14 +3412,6 @@
"@jridgewell/gen-mapping" "^0.3.0"
"@jridgewell/trace-mapping" "^0.3.9"
-"@jridgewell/source-map@^0.3.3":
- version "0.3.5"
- resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.5.tgz#a3bb4d5c6825aab0d281268f47f6ad5853431e91"
- integrity sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==
- dependencies:
- "@jridgewell/gen-mapping" "^0.3.0"
- "@jridgewell/trace-mapping" "^0.3.9"
-
"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
version "1.4.14"
resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
@@ -5061,11 +5053,6 @@ acorn@^8.5.0:
resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz"
integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
-acorn@^8.8.2:
- version "8.10.0"
- resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
- integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
-
address@^1.0.1:
version "1.1.2"
resolved "https://registry.npmjs.org/address/-/address-1.1.2.tgz"
@@ -6024,9 +6011,9 @@ bytes@3.1.2:
resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz"
integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
-cacache@^12.0.3:
+cacache@^12.0.2, cacache@^12.0.3:
version "12.0.4"
- resolved "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz"
+ resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
dependencies:
bluebird "^3.5.5"
@@ -7868,6 +7855,13 @@ errno@^0.1.3:
dependencies:
prr "~1.0.1"
+errno@~0.1.7:
+ version "0.1.8"
+ resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+ integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+ dependencies:
+ prr "~1.0.1"
+
error-ex@^1.2.0, error-ex@^1.3.1:
version "1.3.2"
resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
@@ -10241,6 +10235,11 @@ is-word-character@^1.0.0:
resolved "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz"
integrity sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==
+is-wsl@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+ integrity sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==
+
is-wsl@^2.2.0:
version "2.2.0"
resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
@@ -10749,15 +10748,6 @@ jest-worker@^26.6.2:
merge-stream "^2.0.0"
supports-color "^7.0.0"
-jest-worker@^27.4.5:
- version "27.5.1"
- resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
- integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
- dependencies:
- "@types/node" "*"
- merge-stream "^2.0.0"
- supports-color "^8.0.0"
-
jest-worker@^28.1.3:
version "28.1.3"
resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-28.1.3.tgz"
@@ -14341,7 +14331,7 @@ schema-utils@^3.1.0:
ajv "^6.12.5"
ajv-keywords "^3.5.2"
-schema-utils@^3.1.1, schema-utils@^3.2.0:
+schema-utils@^3.2.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
@@ -14465,7 +14455,7 @@ serialize-javascript@^4.0.0:
dependencies:
randombytes "^2.1.0"
-serialize-javascript@^6.0.0, serialize-javascript@^6.0.1:
+serialize-javascript@^6.0.0:
version "6.0.1"
resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz"
integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
@@ -15462,20 +15452,24 @@ terminal-link@^2.0.0:
ansi-escapes "^4.2.1"
supports-hyperlinks "^2.0.0"
-terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.3.3, terser-webpack-plugin@^5.3.7:
- version "5.3.9"
- resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz#832536999c51b46d468067f9e37662a3b96adfe1"
- integrity sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==
+terser-webpack-plugin@^1.4.3, terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.3.3, terser-webpack-plugin@^5.3.7:
+ version "1.4.5"
+ resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz#a217aefaea330e734ffacb6120ec1fa312d6040b"
+ integrity sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==
dependencies:
- "@jridgewell/trace-mapping" "^0.3.17"
- jest-worker "^27.4.5"
- schema-utils "^3.1.1"
- serialize-javascript "^6.0.1"
- terser "^5.16.8"
+ cacache "^12.0.2"
+ find-cache-dir "^2.1.0"
+ is-wsl "^1.1.0"
+ schema-utils "^1.0.0"
+ serialize-javascript "^4.0.0"
+ source-map "^0.6.1"
+ terser "^4.1.2"
+ webpack-sources "^1.4.0"
+ worker-farm "^1.7.0"
-terser@^4.6.3:
+terser@^4.1.2, terser@^4.6.3:
version "4.8.1"
- resolved "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz"
+ resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.1.tgz#a00e5634562de2239fd404c649051bf6fc21144f"
integrity sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==
dependencies:
commander "^2.20.0"
@@ -15492,16 +15486,6 @@ terser@^5.10.0:
commander "^2.20.0"
source-map-support "~0.5.20"
-terser@^5.16.8:
- version "5.19.2"
- resolved "https://registry.yarnpkg.com/terser/-/terser-5.19.2.tgz#bdb8017a9a4a8de4663a7983f45c506534f9234e"
- integrity sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==
- dependencies:
- "@jridgewell/source-map" "^0.3.3"
- acorn "^8.8.2"
- commander "^2.20.0"
- source-map-support "~0.5.20"
-
test-exclude@^6.0.0:
version "6.0.0"
resolved "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz"
@@ -16604,9 +16588,9 @@ webpack-merge@^5.8.0:
clone-deep "^4.0.1"
wildcard "^2.0.0"
-webpack-sources@^1.1.0:
+webpack-sources@^1.1.0, webpack-sources@^1.4.0:
version "1.4.3"
- resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz"
+ resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
dependencies:
source-list-map "^2.0.0"
@@ -16840,6 +16824,13 @@ word-wrap@^1.2.3, word-wrap@~1.2.3:
resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+worker-farm@^1.7.0:
+ version "1.7.0"
+ resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
+ integrity sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==
+ dependencies:
+ errno "~0.1.7"
+
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"