diff --git a/src/components/DropdownProfile.jsx b/src/components/DropdownProfile.jsx index f2533b6..0deb542 100644 --- a/src/components/DropdownProfile.jsx +++ b/src/components/DropdownProfile.jsx @@ -1,12 +1,14 @@ import React, { useState, useRef, useEffect } from 'react'; +import {observer} from "mobx-react-lite"; import { Link } from 'react-router-dom'; import Transition from '../utils/Transition'; - +import {registrationStore} from "../store/registrationStore"; +import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import UserAvatar from '../images/user-avatar-32.png'; -function DropdownProfile({ + const DropdownProfile = observer(({ align -}) { +})=>{ const [dropdownOpen, setDropdownOpen] = useState(false); @@ -43,7 +45,7 @@ function DropdownProfile({ onClick={() => setDropdownOpen(!dropdownOpen)} aria-expanded={dropdownOpen} > - User + User
Acme Inc. @@ -95,6 +97,6 @@ function DropdownProfile({
) -} +}) export default DropdownProfile; diff --git a/src/images/GenerateOnboardingSvg/GenerateSvg.js b/src/images/GenerateOnboardingSvg/GenerateSvg.js index 197f836..e8e7add 100644 --- a/src/images/GenerateOnboardingSvg/GenerateSvg.js +++ b/src/images/GenerateOnboardingSvg/GenerateSvg.js @@ -35,13 +35,10 @@ function createBlob(options) { return path + "z"; } -export var generateSvgAvatar = (function () { - return function (seed, raw) { - let pubKey = localStorage.getItem('svgKey') || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16); +export var generateSvgAvatar = ( function () { + return function (publicKey, seed, raw) { + let pubKey = publicKey || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16); //pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88" - if (!localStorage.getItem('svgKey')) { - localStorage.setItem('svgKey', `${pubKey}`) - } let particles = []; let gradients = ['#000000']; let defs = []; diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index 0ea841d..27c1e12 100644 --- a/src/pages/Dashboard.jsx +++ b/src/pages/Dashboard.jsx @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from 'react'; +import React, {useState} from 'react'; import Sidebar from '../partials/Sidebar'; import Header from '../partials/Header'; @@ -19,9 +19,6 @@ import DashboardCard10 from '../partials/dashboard/DashboardCard10'; import DashboardCard11 from '../partials/dashboard/DashboardCard11'; function Dashboard() { - useEffect(() => { - localStorage.setItem('svgKey', '') - }, []) const [sidebarOpen, setSidebarOpen] = useState(false); return ( diff --git a/src/pages/Onboarding1.jsx b/src/pages/Onboarding1.jsx index 39dd28d..2cefed5 100644 --- a/src/pages/Onboarding1.jsx +++ b/src/pages/Onboarding1.jsx @@ -1,11 +1,20 @@ -import React from 'react'; +import React, {useEffect} from 'react'; import { Link } from 'react-router-dom'; import OnboardingImage from '../images/onboarding-image.jpg'; import OnboardingDecoration from '../images/auth-decoration.png'; import Logo from "../images/logo.png"; +import {observer} from "mobx-react-lite"; +import {passphrase} from "@liskhq/lisk-client"; +import {registrationStore} from "../store/registrationStore"; + +const Onboarding1 = observer(()=>{ + let phrase = passphrase.Mnemonic.generateMnemonic() + registrationStore.savePassPhrase(phrase) + useEffect(()=>{ + + },[]) -function Onboarding1() { return (
@@ -127,6 +136,6 @@ function Onboarding1() {
); -} +}) export default Onboarding1; diff --git a/src/pages/Onboarding3.jsx b/src/pages/Onboarding3.jsx index 6b8b4d7..4889fa8 100644 --- a/src/pages/Onboarding3.jsx +++ b/src/pages/Onboarding3.jsx @@ -1,23 +1,33 @@ -import React, {useEffect, useState} from 'react'; +import React, { useState} from 'react'; import { Link } from 'react-router-dom'; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import Logo from "../images/logo.png"; +import {registrationStore} from "../store/registrationStore"; import { passphrase } from "@liskhq/lisk-client"; function Onboarding3() { - - const [passPhrase, setPassPhrase] = useState('') - - function getPassPhrase() { + const [passPhrase, setPassPhrase] = useState(registrationStore.passPhraseStore.replace(/\s+/g, ' ').split(' ').map((item, index) => ({str:item, id:index }))) + function generatePassPhrase() { let phrase = passphrase.Mnemonic.generateMnemonic() - setPassPhrase(phrase) + registrationStore.savePassPhrase(phrase) + let newPassPhrase = registrationStore.passPhraseStore.split(' ').map((item, index) => ({str:item, id:index })) + setPassPhrase(newPassPhrase) } - useEffect(()=>{ - return ()=>{ - localStorage.setItem('svgAvatar', generateSvgAvatar()) + function savePassPhraseInStore (copiedPhrase) { + let phrasePaste = copiedPhrase.trim().replace(/\s+/g, ' ').split(' ') + if(phrasePaste.length===12) { + registrationStore.savePassPhrase(copiedPhrase) + setPassPhrase(phrasePaste.map((item, index) => ({str:item, id:index }))) + } else { + return false } - }, []) + } + + function pastePassPhrase() { + navigator.clipboard.readText().then(res=>savePassPhraseInStore(res)) + } + return (
@@ -73,21 +83,21 @@ function Onboarding3() {

Company information ✨

{/* htmlForm */}
- {passPhrase.split(' ').map(tag => ( - ))}
- - @@ -117,7 +111,7 @@ const Onboarding4 = observer(()=>{ {/* Image */} diff --git a/src/store/registrationStore.js b/src/store/registrationStore.js index 7bfb718..c647d32 100644 --- a/src/store/registrationStore.js +++ b/src/store/registrationStore.js @@ -1,22 +1,41 @@ import { reaction, makeAutoObservable } from "mobx"; +import {cryptography} from "@liskhq/lisk-client"; class RegistrationStore { - _accountData = {}; + _accountData = {} + + _passPhraseStore='' + + _pubKey = '' constructor() { makeAutoObservable(this); - reaction(() => this.accountData, () => this.saveDataRegistration()) + reaction(()=>this.passPhraseStore, ()=>this.savePubKey()) }; + savePassPhrase(phrase) { + this._passPhraseStore = phrase + } + saveDataRegistration(data) { this._accountData = data; }; + savePubKey() { + this._pubKey = cryptography.bufferToHex(cryptography.getAddressAndPublicKeyFromPassphrase(this.passPhraseStore).publicKey) + } - accountData() { + get passPhraseStore() { + return this._passPhraseStore + } + + get accountData() { return this._accountData }; + get pubKey() { + return this._pubKey + } + }; - export const registrationStore = new RegistrationStore();