diff --git a/packages/anoma-wallet/src/App/AccountCreation/index.ts b/packages/anoma-wallet/src/App/AccountCreation/index.ts
deleted file mode 100644
index 30874c6879d..00000000000
--- a/packages/anoma-wallet/src/App/AccountCreation/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as AccountCreation } from "./AccountCreation";
diff --git a/packages/anoma-wallet/src/App/AccountOverview/AccountOverview.components.ts b/packages/anoma-wallet/src/App/AccountOverview/AccountOverview.components.ts
new file mode 100644
index 00000000000..fe6019aec88
--- /dev/null
+++ b/packages/anoma-wallet/src/App/AccountOverview/AccountOverview.components.ts
@@ -0,0 +1,10 @@
+import styled from "styled-components/macro";
+
+export const AccountOverviewContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+`;
diff --git a/packages/anoma-wallet/src/App/AccountOverview/AccountOverview.tsx b/packages/anoma-wallet/src/App/AccountOverview/AccountOverview.tsx
new file mode 100644
index 00000000000..d675869390d
--- /dev/null
+++ b/packages/anoma-wallet/src/App/AccountOverview/AccountOverview.tsx
@@ -0,0 +1,20 @@
+import { NavigationContainer } from "components/NavigationContainer";
+import { Heading, HeadingLevel } from "components/Heading";
+import { AccountOverviewContainer } from "./AccountOverview.components";
+
+export const AccountOverview = (): JSX.Element => {
+ return (
+
+
+ AccountOverview
+
+
+ AccountOverview
+
+
+ );
+};
diff --git a/packages/anoma-wallet/src/App/AccountOverview/index.ts b/packages/anoma-wallet/src/App/AccountOverview/index.ts
new file mode 100644
index 00000000000..6fbc7b6310e
--- /dev/null
+++ b/packages/anoma-wallet/src/App/AccountOverview/index.ts
@@ -0,0 +1 @@
+export { AccountOverview } from "./AccountOverview";
diff --git a/packages/anoma-wallet/src/App/AccountCreation/AccountCreation.components.ts b/packages/anoma-wallet/src/App/App.components.ts
similarity index 72%
rename from packages/anoma-wallet/src/App/AccountCreation/AccountCreation.components.ts
rename to packages/anoma-wallet/src/App/App.components.ts
index 28c7b66d2a3..d88c95c8db8 100644
--- a/packages/anoma-wallet/src/App/AccountCreation/AccountCreation.components.ts
+++ b/packages/anoma-wallet/src/App/App.components.ts
@@ -1,63 +1,63 @@
import styled from "styled-components/macro";
import { motion } from "framer-motion";
-export const MainSectionContainer = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: start;
- align-items: center;
- // TODO: maybe this is too hacky? maybe there could be just another div
- // behind the main one with transform: translate(-4px, 4px);
- box-sizing: border-box;
- background-color: ${(props) => props.theme.colors.background2};
- padding: ${(props) =>
- props.theme.themeConfigurations.isLightMode ? "0 32px" : "4px 36px 0 32px"};
- height: 620px;
- width: 480px;
- border-radius: 24px;
- overflow-x: hidden;
- ${(props) =>
- props.theme.themeConfigurations.isLightMode
- ? `border: solid 4px ${props.theme.colors.border}`
- : ""};
- border-left: solid 8px ${(props) => props.theme.colors.border};
- border-bottom: solid 8px ${(props) => props.theme.colors.border};
- transition: background-color 0.3s linear;
-`;
-
export const MotionContainer = styled(motion.div)`
+ display: flex;
height: 100%;
+ width: 100%;
box-sizing: border-box;
- padding: 0 0 64px 0;
`;
-export const TopSection = styled.section`
+
+export const AppContainer = styled.div`
display: flex;
- justify-content: start;
+ justify-content: space-between;
align-items: center;
+ flex-direction: column;
+
+ height: 100%;
width: 100%;
- margin: 32px 0;
+ background-color: ${(props) => props.theme.colors.background1};
+ transition: all 0.3s linear;
`;
-export const TopSectionHeaderContainer = styled.section`
+export const TopSection = styled.section`
display: flex;
justify-content: center;
- width: 100%;
align-items: center;
+ height: 120px;
+ width: 100%;
`;
-export const TopSectionButtonContainer = styled.section`
+export const BottomSection = styled.section`
display: flex;
justify-content: center;
align-items: center;
- width: 48px;
- min-height: 50px;
+ height: calc(100% - 120px);
+ width: 100%;
`;
-export const RouteContainer = styled.div`
+export const ContentContainer = styled.div`
display: flex;
+ flex-direction: column;
justify-content: center;
align-items: center;
- overflow: scroll;
- width: 100%;
- height: 100%;
+ // TODO: maybe this is too hacky? maybe there could be just another div
+ // behind the main one with transform: translate(-4px, 4px);
+ box-sizing: border-box;
+ background-color: ${(props) => props.theme.colors.background2};
+ padding: ${(props) =>
+ props.theme.themeConfigurations.isLightMode
+ ? "16px 32px 32px"
+ : "20px 36px 32px 32px"};
+ height: 620px;
+ width: 480px;
+ border-radius: 24px;
+ overflow-x: hidden;
+ ${(props) =>
+ props.theme.themeConfigurations.isLightMode
+ ? `border: solid 4px ${props.theme.colors.border}`
+ : ""};
+ border-left: solid 8px ${(props) => props.theme.colors.border};
+ border-bottom: solid 8px ${(props) => props.theme.colors.border};
+ transition: background-color 0.3s linear;
`;
diff --git a/packages/anoma-wallet/src/App/App.tsx b/packages/anoma-wallet/src/App/App.tsx
index ba8c562dd93..448334e2a83 100644
--- a/packages/anoma-wallet/src/App/App.tsx
+++ b/packages/anoma-wallet/src/App/App.tsx
@@ -1,14 +1,28 @@
/* eslint-disable max-len */
import React from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
+import { AnimatePresence } from "framer-motion";
+
+// internal
import { TopNavigation } from "./TopNavigation";
-import { MainSection } from "./MainSection";
-import { AccountCreation } from "./AccountCreation";
+// import { AccountCreation } from "./AccountCreation";
+import { TopLevelRoute } from "./types";
+import {
+ Settings,
+ SettingsAccounts,
+ SettingsWalletSettings,
+ SettingsAccountSettings,
+ SettingsAccountCreation,
+} from "./Settings";
+import { StakingAndGovernance } from "./StakingAndGovernance";
+import { AccountOverview } from "./AccountOverview";
import {
AppContainer,
- MainSectionContainer,
TopSection,
-} from "./styledComponents";
+ BottomSection,
+ ContentContainer,
+ MotionContainer,
+} from "./App.components";
import { ThemeProvider } from "styled-components/macro";
import { darkColors, lightColors, Theme } from "utils/theme";
@@ -24,9 +38,32 @@ const getTheme = (isLightMode: boolean): Theme => {
return theme;
};
+const AnimatedTransition = (props: {
+ children: React.ReactNode;
+ elementKey: string;
+}): JSX.Element => {
+ const { children, elementKey } = props;
+ return (
+
+ {children}
+
+ );
+};
+
function App(): JSX.Element {
const [isLightMode, setIsLightMode] = React.useState(true);
const theme = getTheme(isLightMode);
+ const fakeAccounts = [
+ "fake1l7dgf0m623ayll8vdyf6n7gxm3tz7mt7x443m0",
+ "fakej3n4340m623ayll8vdyf6n7gxm3tz7mt74m5th0",
+ "fakelg45lt5m623ayll8vdyf6n7gxm3tz7mtrenrer0",
+ ];
return (
@@ -37,12 +74,87 @@ function App(): JSX.Element {
setIsLightMode={setIsLightMode}
/>
-
-
- } />
- } />
-
-
+
+
+
+
+
+
+ }
+ >
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+
diff --git a/packages/anoma-wallet/src/App/MainSection/index.ts b/packages/anoma-wallet/src/App/MainSection_delete/index.ts
similarity index 100%
rename from packages/anoma-wallet/src/App/MainSection/index.ts
rename to packages/anoma-wallet/src/App/MainSection_delete/index.ts
diff --git a/packages/anoma-wallet/src/App/MainSection/mainSection.components.ts b/packages/anoma-wallet/src/App/MainSection_delete/mainSection.components.ts
similarity index 100%
rename from packages/anoma-wallet/src/App/MainSection/mainSection.components.ts
rename to packages/anoma-wallet/src/App/MainSection_delete/mainSection.components.ts
diff --git a/packages/anoma-wallet/src/App/MainSection/mainSection.tsx b/packages/anoma-wallet/src/App/MainSection_delete/mainSection.tsx
similarity index 100%
rename from packages/anoma-wallet/src/App/MainSection/mainSection.tsx
rename to packages/anoma-wallet/src/App/MainSection_delete/mainSection.tsx
diff --git a/packages/anoma-wallet/src/App/Settings/Settings.components.ts b/packages/anoma-wallet/src/App/Settings/Settings.components.ts
new file mode 100644
index 00000000000..aea810b01d6
--- /dev/null
+++ b/packages/anoma-wallet/src/App/Settings/Settings.components.ts
@@ -0,0 +1,10 @@
+import styled from "styled-components/macro";
+
+export const SettingsContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+`;
diff --git a/packages/anoma-wallet/src/App/Settings/Settings.tsx b/packages/anoma-wallet/src/App/Settings/Settings.tsx
new file mode 100644
index 00000000000..e52d3c82867
--- /dev/null
+++ b/packages/anoma-wallet/src/App/Settings/Settings.tsx
@@ -0,0 +1,39 @@
+import { useNavigate } from "react-router-dom";
+import { NavigationContainer } from "components/NavigationContainer";
+import { TopLevelRoute } from "App/types";
+import { Button, ButtonVariant } from "components/Button";
+import { Heading, HeadingLevel } from "components/Heading";
+import { SettingsContainer } from "./Settings.components";
+
+/**
+ * This is the root component for Settings, it contains further screens that are
+ * being navigated to from here (or directly from some other locations in the app).
+ */
+export const Settings = (): JSX.Element => {
+ const navigate = useNavigate();
+ return (
+
+
+ Settings
+
+
+ {/* accounts button */}
+
+
+ {/* wallet settings */}
+
+
+ );
+};
diff --git a/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/AccountCreation.components.ts b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/AccountCreation.components.ts
new file mode 100644
index 00000000000..86398df3abd
--- /dev/null
+++ b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/AccountCreation.components.ts
@@ -0,0 +1,53 @@
+import styled from "styled-components/macro";
+import { motion } from "framer-motion";
+
+export const AccountCreationContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: center;
+ box-sizing: border-box;
+ background-color: ${(props) => props.theme.colors.background2};
+ padding: ${(props) =>
+ props.theme.themeConfigurations.isLightMode ? "0 32px" : "4px 36px 0 32px"};
+ height: 100%;
+ width: 480px;
+ overflow-x: hidden;
+ transition: background-color 0.3s linear;
+`;
+
+export const MotionContainer = styled(motion.div)`
+ height: 100%;
+ box-sizing: border-box;
+`;
+export const TopSection = styled.section`
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ width: 100%;
+ margin: 32px 0;
+`;
+
+export const TopSectionHeaderContainer = styled.section`
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ align-items: center;
+`;
+
+export const TopSectionButtonContainer = styled.section`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 48px;
+ min-height: 50px;
+`;
+
+export const RouteContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: scroll;
+ width: 100%;
+ height: 100%;
+`;
diff --git a/packages/anoma-wallet/src/App/AccountCreation/AccountCreation.tsx b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/AccountCreation.tsx
similarity index 63%
rename from packages/anoma-wallet/src/App/AccountCreation/AccountCreation.tsx
rename to packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/AccountCreation.tsx
index 0034b6c5be9..8b5a3f3a0b8 100644
--- a/packages/anoma-wallet/src/App/AccountCreation/AccountCreation.tsx
+++ b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/AccountCreation.tsx
@@ -1,11 +1,22 @@
-import React from "react";
+import React, { useContext } from "react";
import { Routes, Route, useNavigate, useLocation } from "react-router-dom";
+import { AnimatePresence } from "framer-motion";
+import { ThemeContext } from "styled-components";
+
+import {
+ KeyPair,
+ Mnemonic,
+ MnemonicLength,
+} from "@anoma-wallet/key-management";
+
+import { Button } from "components/ButtonTemporary";
+import { Icon, IconName } from "components/Icon";
import {
TopLevelRoute,
LOCAL_STORAGE_MASTER_KEY_PAIR_STORAGE_VALUE,
LOCAL_STORAGE_MASTER_KEY_PAIR_ALIAS,
} from "App/types";
-import { KeyPair, Mnemonic } from "@anoma-wallet/key-management";
+
import {
Start,
AccountInformation,
@@ -15,11 +26,8 @@ import {
Completion,
} from "./Steps";
import { AccountCreationRoute, accountCreationSteps } from "./types";
-import { AnimatePresence } from "framer-motion";
-import { useContext } from "react";
-import { ThemeContext } from "styled-components";
import {
- MainSectionContainer,
+ AccountCreationContainer,
TopSection,
TopSectionHeaderContainer,
TopSectionButtonContainer,
@@ -27,14 +35,21 @@ import {
MotionContainer,
} from "./AccountCreation.components";
-import { Button } from "components/ButtonTemporary";
-import { Icon, IconName } from "components/Icon";
-
-const AnimatedTransition = (props: {
- children: React.ReactNode;
+type AnimatedTransitionProps = {
elementKey: string;
+ // the actual page content that slides in/out
+ children: React.ReactElement;
+ // consumer has a logic that decides if the transition is from left to right or the opposite
animationFromRightToLeft: boolean;
-}): JSX.Element => {
+};
+
+/**
+ * this is a utility to facilitate the animated transitions (slide from side).
+ * This should be extracted to it's own component along the other transition types. TODO
+ */
+const AnimatedTransition = (
+ props: AnimatedTransitionProps
+): React.ReactElement => {
const { children, elementKey, animationFromRightToLeft } = props;
return (
();
const [stepIndex, setStepIndex] = React.useState(0);
- const isLastIndex = accountCreationSteps.length - 1 === stepIndex;
const themeContext = useContext(ThemeContext);
const navigate = useNavigate();
- // [1] <- |[2]| <- [3]
+ // this is for keeping tract about to what direction the view will disappear
+ // when the screen is rendered we cannot know if it should leave to left or right
+ // so we can set this by user hovering on next or back buttons
+ // TODO: if user uses the browsers back button we cannot do this correctly
+ // defaults left to right [1] <- |[2]| <- [3]
const [animationFromRightToLeft, setAnimationFromRightToLeft] =
React.useState(true);
+ // we need the location to figure out if the routes ends with "/initiate"
+ // to indicate a starting of a new flow
const location = useLocation();
+
+ // info for disabling the back button in the last step
+ const isLastIndex = accountCreationSteps.length - 1 === stepIndex;
+
+ // this is a temp as the designs are not final, coloring SVG icon with this
const backButtonIconStrokeColor = themeContext.themeConfigurations.isLightMode
? themeContext.colors.border
: "black";
- // eslint-disable-next-line react-hooks/exhaustive-deps
React.useEffect(() => {
- if (
- window.location.pathname ===
- `${TopLevelRoute.AccountCreation}/${AccountCreationRoute.Initiate}`
- ) {
- setAccountCreationDetails(defaultAccountCreationDetails);
- setStepIndex(0);
- setSeedPhrase([]);
- navigate(AccountCreationRoute.Start);
- }
- });
+ // at the load we redirect to the first step
+ // this way we do not need to expose the flow routes to outside
+ navigate(AccountCreationRoute.Start);
+ }, []);
const navigateToNext = (): void => {
- if (stepIndex >= accountCreationSteps.length - 1) return;
setStepIndex((stepIndex) => stepIndex + 1);
navigate(`${accountCreationSteps[stepIndex + 1]}`);
};
const navigateToPrevious = (): void => {
- if (stepIndex === 0) return;
+ // if we are on the first step and the user clicks back
+ // we leave the whole flow
+ if (stepIndex === 0) {
+ navigate(TopLevelRoute.SettingsAccounts);
+ return;
+ }
+
setStepIndex((stepIndex) => {
return stepIndex - 1;
});
@@ -102,21 +131,16 @@ function AccountCreation(): JSX.Element {
};
return (
-
+
{!isLastIndex && (
+
);
}
diff --git a/packages/anoma-wallet/src/App/AccountCreation/Steps/AccountInformation/AccountInformation.components.ts b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/AccountInformation/AccountInformation.components.ts
similarity index 99%
rename from packages/anoma-wallet/src/App/AccountCreation/Steps/AccountInformation/AccountInformation.components.ts
rename to packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/AccountInformation/AccountInformation.components.ts
index c787f8edde8..d7b72825a79 100644
--- a/packages/anoma-wallet/src/App/AccountCreation/Steps/AccountInformation/AccountInformation.components.ts
+++ b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/AccountInformation/AccountInformation.components.ts
@@ -64,7 +64,6 @@ export const InputContainer = styled.div`
export const InputFeedback = styled.span`
font-size: 12px;
- color: red;
`;
export const RecoveryPhraseLengthRadioButton = styled.input`
diff --git a/packages/anoma-wallet/src/App/AccountCreation/Steps/AccountInformation/AccountInformation.tsx b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/AccountInformation/AccountInformation.tsx
similarity index 97%
rename from packages/anoma-wallet/src/App/AccountCreation/Steps/AccountInformation/AccountInformation.tsx
rename to packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/AccountInformation/AccountInformation.tsx
index 331ee77fbcb..aba76bb3a3b 100644
--- a/packages/anoma-wallet/src/App/AccountCreation/Steps/AccountInformation/AccountInformation.tsx
+++ b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/AccountInformation/AccountInformation.tsx
@@ -30,19 +30,24 @@ export type AccountCreationDetails = {
// the data of this form
type AccountInformationViewProps = {
+ // if the user navigates back and forth this might be there
accountCreationDetails?: AccountCreationDetails;
+
onSubmitAccountCreationDetails: (
accountCreationDetails: AccountCreationDetails
) => void;
+
onSetAccountCreationDetails: (
accountCreationDetails: AccountCreationDetails
) => void;
+
+ // read in the parent why we are doing this
onCtaHover: () => void;
};
const AccountInformation = (
props: AccountInformationViewProps
-): JSX.Element => {
+): React.ReactElement => {
const {
onSubmitAccountCreationDetails,
onSetAccountCreationDetails,
@@ -163,7 +168,7 @@ const AccountInformation = (
onChange={(event) => {
setPassword2(event.target.value);
}}
- onFocus={() => {
+ onFocus={(event) => {
setPassword1Feedback("");
setPassword2Feedback("");
}}
diff --git a/packages/anoma-wallet/src/App/AccountCreation/Steps/AccountInformation/index.ts b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/AccountInformation/index.ts
similarity index 100%
rename from packages/anoma-wallet/src/App/AccountCreation/Steps/AccountInformation/index.ts
rename to packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/AccountInformation/index.ts
diff --git a/packages/anoma-wallet/src/App/AccountCreation/Steps/Completion/Completion.components.ts b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/Completion/Completion.components.ts
similarity index 100%
rename from packages/anoma-wallet/src/App/AccountCreation/Steps/Completion/Completion.components.ts
rename to packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/Completion/Completion.components.ts
diff --git a/packages/anoma-wallet/src/App/AccountCreation/Steps/Completion/Completion.tsx b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/Completion/Completion.tsx
similarity index 95%
rename from packages/anoma-wallet/src/App/AccountCreation/Steps/Completion/Completion.tsx
rename to packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/Completion/Completion.tsx
index 0bcb8869f9b..af897caffe0 100644
--- a/packages/anoma-wallet/src/App/AccountCreation/Steps/Completion/Completion.tsx
+++ b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/Completion/Completion.tsx
@@ -10,7 +10,9 @@ import {
ButtonContainer,
} from "./Completion.components";
type StartViewProps = {
+ // navigates to the account
onClickSeeAccounts: () => void;
+ // navigates to the settings
onClickDone: () => void;
};
diff --git a/packages/anoma-wallet/src/App/AccountCreation/Steps/Completion/index.ts b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/Completion/index.ts
similarity index 100%
rename from packages/anoma-wallet/src/App/AccountCreation/Steps/Completion/index.ts
rename to packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/Completion/index.ts
diff --git a/packages/anoma-wallet/src/App/AccountCreation/Steps/SeedPhrase/SeedPhrase.components.ts b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/SeedPhrase/SeedPhrase.components.ts
similarity index 100%
rename from packages/anoma-wallet/src/App/AccountCreation/Steps/SeedPhrase/SeedPhrase.components.ts
rename to packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/SeedPhrase/SeedPhrase.components.ts
diff --git a/packages/anoma-wallet/src/App/AccountCreation/Steps/SeedPhrase/SeedPhrase.tsx b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/SeedPhrase/SeedPhrase.tsx
similarity index 89%
rename from packages/anoma-wallet/src/App/AccountCreation/Steps/SeedPhrase/SeedPhrase.tsx
rename to packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/SeedPhrase/SeedPhrase.tsx
index d0777a03754..4fb230b8192 100644
--- a/packages/anoma-wallet/src/App/AccountCreation/Steps/SeedPhrase/SeedPhrase.tsx
+++ b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/Steps/SeedPhrase/SeedPhrase.tsx
@@ -28,11 +28,14 @@ export type AccountCreationDetails = {
password?: string;
};
-// the data of this form
type AccountInformationViewProps = {
+ // read in the parent why we do this
onCtaHover: () => void;
+ // go to next screen
onConfirmSavingOfSeedPhrase: (seedPhraseAsArray: string[]) => void;
+ // depending if first load this might or might not be available
accountCreationDetails?: AccountCreationDetails;
+ // depending if first load this might or might not be available
defaultSeedPhrase?: string[];
};
@@ -59,24 +62,27 @@ const SeedPhrase = (props: AccountInformationViewProps): JSX.Element => {
onConfirmSavingOfSeedPhrase,
defaultSeedPhrase,
} = props;
- const { seedPhraseLength = "12" } = accountCreationDetails || {};
const defaultSeedPhraseAsString = defaultSeedPhrase?.join(" ");
const [seedPhrase, setSeedPhrase] = React.useState(
defaultSeedPhraseAsString || ""
);
+
const seedPhraseAsArray = seedPhraseStringToArray(seedPhrase);
const isSubmitButtonDisabled = seedPhraseAsArray.length === 0;
+ const { seedPhraseLength = "12" } = accountCreationDetails || {};
React.useEffect(() => {
+ // if a mnemonic was passed in we do not generate it again
+ if (defaultSeedPhrase?.length && defaultSeedPhrase?.length > 0) return;
+
const createMnemonic = async (): Promise => {
const mnemonic = await Mnemonic.fromMnemonic(
mnemonicLengthToEnum(seedPhraseLength)
);
setSeedPhrase(mnemonic.value);
};
- if (defaultSeedPhrase?.length && defaultSeedPhrase?.length > 0) return;
+
createMnemonic();
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
@@ -120,6 +126,12 @@ const SeedPhrase = (props: AccountInformationViewProps): JSX.Element => {