diff --git a/nym-wallet/src/index.tsx b/nym-wallet/src/index.tsx index 3cd6c03462..61daf238c0 100644 --- a/nym-wallet/src/index.tsx +++ b/nym-wallet/src/index.tsx @@ -10,6 +10,7 @@ import { Admin, Welcome, Settings } from './pages'; import { ErrorFallback } from './components'; import { NymWalletTheme, WelcomeTheme } from './theme'; import { maximizeWindow } from './utils'; +import { SignInProvider } from './pages/welcome/context'; const App = () => { const { clientDetails } = useContext(ClientContext); @@ -20,7 +21,9 @@ const App = () => { return !clientDetails ? ( - + + + ) : ( diff --git a/nym-wallet/src/pages/welcome/context/index.tsx b/nym-wallet/src/pages/welcome/context/index.tsx new file mode 100644 index 0000000000..3e868a93f8 --- /dev/null +++ b/nym-wallet/src/pages/welcome/context/index.tsx @@ -0,0 +1,72 @@ +import React, { createContext, useEffect, useMemo, useState } from 'react'; +import { createMnemonic, signInWithMnemonic } from 'src/requests'; +import { TMnemonicWords } from '../types'; + +export const SignInContext = createContext({} as TSignInContent); + +export type TSignInContent = { + error?: string; + password: string; + mnemonic: string; + mnemonicWords: TMnemonicWords; + setError: (err?: string) => void; + setMnemonic: (mnc: string) => void; + generateMnemonic: () => Promise; + validateMnemonic: () => Promise; + setPassword: (paswd: string) => void; +}; + +const mnemonicToArray = (mnemonic: string): TMnemonicWords => + mnemonic + .split(' ') + .reduce((a, c: string, index) => [...a, { name: c, index: index + 1, disabled: false }], [] as TMnemonicWords); + +export const SignInProvider: React.FC = ({ children }) => { + const [password, setPassword] = useState(''); + const [mnemonic, setMnemonic] = useState(''); + const [mnemonicWords, setMnemonicWords] = useState([]); + const [error, setError] = useState(); + + const generateMnemonic = async () => { + const mnemonicPhrase = await createMnemonic(); + setMnemonic(mnemonicPhrase); + }; + + const validateMnemonic = async () => { + try { + await signInWithMnemonic(mnemonic); + } catch (e) { + setError(e as string); + } + }; + + useEffect(() => { + if (mnemonic.length > 0) { + const mnemonicArray = mnemonicToArray(mnemonic); + setMnemonicWords(mnemonicArray); + } else { + setMnemonicWords([]); + } + }, [mnemonic]); + + return ( + ({ + error, + password, + mnemonic, + mnemonicWords, + setError, + setMnemonic, + generateMnemonic, + validateMnemonic, + setPassword, + }), + [error, password, mnemonic, mnemonicWords], + )} + > + {children} + + ); +};