changed userData to accounData

added data check for the table on Profile page

src/App.jsx

@@ -27,7 +27,7 @@ import Onboarding3 from "./pages/Onboarding3";
 import Onboarding4 from "./pages/Onboarding4";
 import SharedData from "./pages/SharedData";
 import ResetPassword from "./pages/ResetPassword";
-import Signin from "./pages/Signin";
+import SignIn from "./pages/SignIn";
 
 function App() {
 
@@ -62,7 +62,7 @@ function App() {
         <Route path="/component/badge" element={<BadgePage />} />
         <Route path="/component/accordion" element={<AccordionPage />} />
         <Route path="/reset-password" element={<ResetPassword />} />
-        <Route path="/signin" element={<Signin />} />
+        <Route path="/signIn" element={<SignIn />} />
       </Routes>
     </>
   );

src/pages/Onboarding1.jsx

@@ -1,16 +1,16 @@
-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 { observer } from "mobx-react-lite";
-import {passphrase} from "@liskhq/lisk-client";
+import { registrationStore } from "../store/store";
-import {registrationStore} from "../store/store";
 
-const Onboarding1 = observer(()=>{
+const Onboarding1 = observer(() => {
-  let phrase = passphrase.Mnemonic.generateMnemonic()
+
-  registrationStore.savePassPhrase(phrase)
+  useEffect(()=>{
+    registrationStore.generatePassPhrase()
+  }, [])
 
   return (
     <main className="bg-white">
@@ -31,7 +31,7 @@ const Onboarding1 = observer(()=>{
                   <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
                 <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
+                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
                 </div>
               </div>
 
@@ -42,16 +42,16 @@ const Onboarding1 = observer(()=>{
                     <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
                     <ul className="relative flex justify-between w-full">
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
                       </li>
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-2">2</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-2">2</span>
                       </li>
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-3">3</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-3">3</span>
                       </li>
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</span>
                       </li>
                     </ul>
                   </div>
@@ -64,7 +64,7 @@ const Onboarding1 = observer(()=>{
 
                 <h1 className="text-3xl text-slate-800 font-bold mb-12">Tell us about your company ✨</h1>
                 {/* Form */}
-                <form>
+                <div>
                   <div className="sm:flex space-y-3 sm:space-y-0 sm:space-x-4 mb-8">
                     <label className="flex-1 relative block cursor-pointer">
                       <input type="radio" name="radio-buttons" className="peer sr-only" defaultChecked />
@@ -114,7 +114,7 @@ const Onboarding1 = observer(()=>{
                       <Link to="/onboarding-2">Next Step -&gt;</Link>
                     </button>
                   </div>
-                </form>
+                </div>
 
               </div>
             </div>

src/pages/Onboarding2.jsx

@@ -2,43 +2,45 @@ import React, {useState} from 'react';
 import { Link } from 'react-router-dom';
 import { observer } from "mobx-react-lite";
 import { registrationStore } from "../store/store";
-
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
 import Logo from "../images/logo.png";
 
-const Onboarding2 = observer(()=>{
+const Onboarding2 = observer(() => {
   const [dataRegistration, setDataRegistration] = useState(
       {
-        first_name: '',
+        firstname: '',
-        second_name: '',
+        secondname: '',
         gender: '',
         birthdate: '',
       }
-  )
+  );
-  const [fillingForm, setFillingForm] = useState(false)
+  const [fillingForm, setFillingForm] = useState(false);
 
-  const saveValueChange = (event)=>{
+  const saveValueChange = (event) => {
     const newValue=event.target.value;
     setDataRegistration({
       ...dataRegistration,
-      [event.target.id]: newValue
+      [event.target.id]: newValue,
     })
-    if(!Object.keys(dataRegistration).find(item=>!dataRegistration[item])) {
+  };
-      setFillingForm(true)
-    }
-  }
 
-  const saveStoreRegistration = ()=>{
+  const checkFillingForm = () => {
-    if(fillingForm) {
+    if (!Object.keys(dataRegistration).find(item => !dataRegistration[item])) {
-      registrationStore.saveDataRegistration(Object.keys(dataRegistration).map(item=>{
+      setFillingForm(true);
+    }
+  };
+
+  const saveStoreRegistration = () => {
+    if (fillingForm) {
+      registrationStore.saveDataRegistration(Object.keys(dataRegistration).map(item => {
         return{
           key: `${item}`,
-          value: dataRegistration[item]
+          value: dataRegistration[item],
         }
       }))
     }
-  }
+  };
 
   return (
     <main className="bg-white">
@@ -59,7 +61,7 @@ const Onboarding2 = observer(()=>{
                   <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
                 <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
+                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
                 </div>
               </div>
 
@@ -70,16 +72,16 @@ const Onboarding2 = observer(()=>{
                     <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
                     <ul className="relative flex justify-between w-full">
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
                       </li>
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</span>
                       </li>
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-3">3</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-3">3</span>
                       </li>
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</span>
                       </li>
                     </ul>
                   </div>
@@ -91,27 +93,27 @@ const Onboarding2 = observer(()=>{
               <div className="max-w-[344px] mx-auto">
                 <h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1>
                 {/* Form */}
-                <form>
+                <div>
                   <div className="space-y-4 mb-8">
                     <div>
                       <label className="block text-sm font-medium mb-1" htmlFor="first_name">First name <span className="text-rose-500">*</span></label>
-                      <input id="first_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
+                      <input onBlur={checkFillingForm} id="firstname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
                     </div>
                     <div>
                       <label className="block text-sm font-medium mb-1" htmlFor="second_name">Last name <span className="text-rose-500">*</span></label>
-                      <input id="second_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
+                      <input onBlur={checkFillingForm} id="secondname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
                     </div>
                     <div>
                       <label className="block text-sm font-medium mb-1" htmlFor="gender">Gender <span className="text-rose-500">*</span></label>
-                      <select id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full">
+                      <select onBlur={checkFillingForm} id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full">
                         <option className="hidden"></option>
                         <option>male</option>
-                        <option>feemale</option>
+                        <option>female</option>
                       </select>
                     </div>
                     <div>
                       <label className="block text-sm font-medium mb-1" htmlFor="birthdate">Date of birth <span className="text-rose-500">*</span></label>
-                      <input id="birthdate" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" />
+                      <input onBlur={checkFillingForm} id="birthdate" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" />
                     </div>
                   </div>
                   <div className="flex items-center justify-between mt-6">
@@ -121,15 +123,15 @@ const Onboarding2 = observer(()=>{
                         <span className="text-sm ml-2">Email me about product news.</span>
                       </label>
                     </div>
-                    <button onClick={()=>saveStoreRegistration()} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">
+                    <button onClick={saveStoreRegistration} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">
                       <Link id="signup" to={fillingForm && "/onboarding-3"} >Sign Up</Link>
                     </button>
                   </div>
-                </form>
+                </div>
                 {/* Footer */}
                 <div className="pt-5 mt-6 border-t border-slate-200">
                   <div className="text-sm">
-                    Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
+                    Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
                   </div>
                 </div>
               </div>

src/pages/Onboarding3.jsx

@@ -1,36 +1,28 @@
-import React, { useState} from 'react';
+import React from 'react';
+import {observer} from "mobx-react-lite";
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
 import {registrationStore} from "../store/store";
-import { passphrase } from "@liskhq/lisk-client";
 
-function Onboarding3() {
+const Onboarding3 = observer(()=>{
-  const [passPhrase, setPassPhrase] = useState(convertPhraseToArray(registrationStore.passPhrase))
   function generatePassPhrase() {
-    let phrase = passphrase.Mnemonic.generateMnemonic()
+    registrationStore.generatePassPhrase();
-    registrationStore.savePassPhrase(phrase)
+  };
-    setPassPhrase(convertPhraseToArray(registrationStore.passPhrase))
-  }
 
   function savePassPhraseInStore (copiedPhrase) {
-    let phrasePaste = convertPhraseToArray(copiedPhrase.trim())
+    if (copiedPhrase.split(' ').length === 12) {
-    if(phrasePaste.length===12) {
+      registrationStore.savePastPassPhrase(copiedPhrase.trim());
-      registrationStore.savePassPhrase(copiedPhrase.trim())
-      setPassPhrase(phrasePaste)
-    } else {
-      return false
     }
-  }
+  };
 
   function pastePassPhrase() {
-    navigator.clipboard.readText().then(res=>savePassPhraseInStore(res))
+    navigator.clipboard.readText().then(res => savePassPhraseInStore(res));
-  }
+  };
-
-  function convertPhraseToArray(phrase) {
-    return phrase.split(' ').map((item, index) => ({str:item, id:index }))
-  }
 
+  function convertPassPhraseToArray() {
+    return registrationStore.passPhrase.split(' ').map((item, index) => ({str:item, id:index}));
+  };
 
   return (
     <main className="bg-white">
@@ -51,7 +43,7 @@ function Onboarding3() {
                   <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
                 <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
+                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
                 </div>
               </div>
 
@@ -62,16 +54,16 @@ function Onboarding3() {
                     <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
                     <ul className="relative flex justify-between w-full">
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
                       </li>
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</span>
                       </li>
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-3">3</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-3">3</span>
                       </li>
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</span>
                       </li>
                     </ul>
                   </div>
@@ -86,21 +78,21 @@ function Onboarding3() {
                   <h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
                   {/* htmlForm */}
                   <div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
-                    {passPhrase.map(tag => (
+                    {convertPassPhraseToArray().map(tag => (
                       <button key={tag.id} className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
                         <span className="text-sm font-medium">{tag.str}</span>
                       </button>
                     ))}
                   </div>
                   <div className="flex pl-7 gap-x-5">
-                    <button onClick={()=>pastePassPhrase()} className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
+                    <button onClick={pastePassPhrase} className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
                       <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
                         <path
                             d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
                       </svg>
                       <span className="ml-2">Paste</span>
                     </button>
-                    <button onClick={()=>generatePassPhrase()} className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
+                    <button onClick={generatePassPhrase} className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
                       <svg className="mb-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M14.5744 5.66943L13.1504 7.09343C13.4284 7.44043 13.6564 7.75743 13.8194 8.00043C13.0594 9.13043 10.9694 11.8204 8.25836 11.9854L6.44336 13.8004C6.93936 13.9244 7.45736 14.0004 8.00036 14.0004C12.7074 14.0004 15.7444 8.71643 15.8714 8.49243C16.0424 8.18843 16.0434 7.81643 15.8724 7.51243C15.8254 7.42743 15.3724 6.63143 14.5744 5.66943Z" fill="#F43F5E"/>
                         <path fillRule="evenodd" clipRule="evenodd" d="M1.00038 16.0002C0.744375 16.0002 0.488375 15.9022 0.293375 15.7072C-0.0976249 15.3162 -0.0976249 14.6842 0.292375 14.2942L2.82138 11.7653C1.17238 10.2913 0.198375 8.61425 0.128375 8.48925C-0.0416249 8.18625 -0.0426249 7.81725 0.126375 7.51425C0.251375 7.28925 3.24537 2.00025 8.00037 2.00025C9.33138 2.00025 10.5154 2.43125 11.5484 3.03825L14.2934 0.29325C14.6844 -0.09775 15.3164 -0.09775 15.7074 0.29325C16.0984 0.68425 16.0984 1.31625 15.7074 1.70725L1.70738 15.7072C1.51238 15.9022 1.25638 16.0002 1.00038 16.0002ZM8.00037 4.00025C5.14637 4.00025 2.95837 6.83525 2.18138 7.99925C2.55938 8.56225 3.28538 9.51025 4.24038 10.3463L6.07438 8.51225C6.02938 8.34825 6.00037 8.17825 6.00037 8.00025C6.00037 6.89525 6.89537 6.00025 8.00037 6.00025C8.17838 6.00025 8.34838 6.02925 8.51237 6.07425L10.0784 4.50825C9.43738 4.20125 8.74237 4.00025 8.00037 4.00025Z" fill="#F43F5E"/>
@@ -135,6 +127,6 @@ function Onboarding3() {
 
     </main>
   );
-}
+});
 
 export default Onboarding3;

src/pages/Onboarding4.jsx

@@ -5,25 +5,26 @@ import Logo from "../images/logo.png";
 import {observer} from "mobx-react-lite";
 import { registrationStore } from "../store/store";
 
-const Onboarding4 = observer(()=>{
+const Onboarding4 = observer(() => {
 
-  const [checkBoxesSelected, setCheckBoxesSelected] = useState([])
+  const [checkBoxesSelected, setCheckBoxesSelected] = useState([]);
 
-  function createAccount () {
+  function createAccount() {
-    if(checkBoxesSelected.length===2) {
+    if(checkBoxesSelected.length === 2) {
-      registrationStore.pushAccountData()
+      registrationStore.pushAccountData();
+      sessionStorage.setItem('passPhrase', registrationStore.passPhrase);
     }
-  }
+  };
 
   function saveCheckBoxesValues(e) {
-    const { id, checked } = e.target
+    const { id, checked } = e.target;
-    setCheckBoxesSelected([...checkBoxesSelected, id])
+    setCheckBoxesSelected([...checkBoxesSelected, id]);
     if (!checked) {
-      setCheckBoxesSelected(checkBoxesSelected.filter(item=>item!==id))
+      setCheckBoxesSelected(checkBoxesSelected.filter(item => item !== id));
     }
-  }
+  };
 
-  const firstNameAccount = registrationStore.accountData.length && registrationStore.accountData.find(item=>item.key==="first_name").value
+  const firstNameAccount = registrationStore.accountData.length && registrationStore.accountData.find(item => item.key === "firstname").value;
 
   return (
     <main className="bg-white">
@@ -44,7 +45,7 @@ const Onboarding4 = observer(()=>{
                   <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
                 <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
+                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
                 </div>
               </div>
 
@@ -55,16 +56,16 @@ const Onboarding4 = observer(()=>{
                     <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
                     <ul className="relative flex justify-between w-full">
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
                       </li>
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</span>
                       </li>
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-3">3</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-3">3</span>
                       </li>
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-4">4</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-4">4</span>
                       </li>
                     </ul>
                   </div>
@@ -81,7 +82,7 @@ const Onboarding4 = observer(()=>{
                     <path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
                   </svg>
                   <h1 className="text-3xl text-slate-800 font-bold mb-8">{firstNameAccount ? `Nice to meet you, ${firstNameAccount} 🙌` : 'Please, go back step 2'}</h1>
-                  <button onClick={()=>createAccount()} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
+                  <button onClick={createAccount} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
                     <Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/dashboard"}>Go To Profile -&gt;</Link>
                   </button>
                 </div>

src/pages/ResetPassword.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-
 import AuthImage from '../images/auth-image.jpg';
 import AuthDecoration from '../images/auth-decoration.png';
+import Logo from "../images/logo.png";
 
 function ResetPassword() {
   return (
@@ -19,22 +19,7 @@ function ResetPassword() {
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
                 <Link className="block" to="/dashboard">
-                  <svg width="32" height="32" viewBox="0 0 32 32">
+                  <img alt='logo' src={Logo} width="89" height="32"/>
-                    <defs>
-                      <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
-                        <stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#A5B4FC" offset="100%" />
-                      </linearGradient>
-                      <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
-                        <stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#38BDF8" offset="100%" />
-                      </linearGradient>
-                    </defs>
-                    <rect fill="#6366F1" width="32" height="32" rx="16" />
-                    <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
-                    <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
-                    <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
-                  </svg>
                 </Link>
               </div>
             </div>
@@ -42,7 +27,7 @@ function ResetPassword() {
             <div className="max-w-sm mx-auto px-4 py-8">
               <h1 className="text-3xl text-slate-800 font-bold mb-6">Reset your Password ✨</h1>
               {/* Form */}
-              <form>
+              <div>
                 <div className="space-y-4">
                   <div>
                     <label className="block text-sm font-medium mb-1" htmlFor="email">Email Address <span className="text-rose-500">*</span></label>
@@ -52,7 +37,7 @@ function ResetPassword() {
                 <div className="flex justify-end mt-6">
                   <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">Send Reset Link</button>
                 </div>
-              </form>
+              </div>
             </div>
 
           </div>

src/pages/SharedData.jsx

@@ -4,7 +4,7 @@ import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import User06 from "../images/user-28-06.jpg";
 import User08 from "../images/user-28-08.jpg";
 import User09 from "../images/user-28-09.jpg";
-import SharedDataRoadMap from "../partials/shareddata/SharedDataRoadmap";
+import SharedDataRoadMap from "../partials/sharedData/SharedDataRoadmap";
 
 function SharedData() {
 

src/pages/SignIn.jsx

@@ -0,0 +1,105 @@
+import React, {useState} from 'react';
+import {observer} from "mobx-react-lite";
+import { Link } from 'react-router-dom';
+import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
+import Logo from "../images/logo.png";
+import {registrationStore} from "../store/store";
+
+const SignIn = observer(()=>{
+
+  const[passPhrase, setPassPhrase] = useState('- - - - - - - - - - - -');
+  const[addedPassPhrase, setAddedPassPhrase] = useState(false);
+
+  function savePassPhrase (copiedPhrase) {
+    if (copiedPhrase.split(' ').length === 12) {
+      registrationStore.savePastPassPhrase(copiedPhrase.trim());
+      setPassPhrase(registrationStore.passPhrase);
+      setAddedPassPhrase(true);
+    }
+  };
+
+  function convertPassPhraseToArray() {
+    return passPhrase.split(' ').map((item, index) => ({str:item, id:index}));
+  }
+
+  function pastePassPhrase() {
+    navigator.clipboard.readText().then(res => savePassPhrase(res));
+  };
+
+  return (
+    <main className="bg-white">
+
+      <div className="relative flex">
+
+        {/* Content */}
+        <div className="w-full md:w-1/2">
+
+          <div className="min-h-screen h-full flex flex-col after:flex-1">
+
+            <div className="flex-1">
+
+              {/* Header */}
+              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
+                {/* Logo */}
+                <Link className="block" to="/dashboard">
+                  <img alt='logo' src={Logo} width="89" height="32"/>
+                </Link>
+                <div className="text-sm">
+                  Have not an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">Sign Up</Link>
+                </div>
+              </div>
+            </div>
+
+            <div className="px-4 mt-20 py-8">
+              <div className="max-w-fit mx-auto flex flex-col gap-y-36">
+
+                <div>
+                  <h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
+                  {/* htmlForm */}
+                  <div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
+                    {convertPassPhraseToArray().map(tag => (
+                      <button key={tag.id} className="min-w-[93px] min-h-[26px] bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
+                        <span className="text-sm font-medium">{tag.str}</span>
+                      </button>
+                    ))}
+                  </div>
+                  <div className="flex pl-7 gap-x-5">
+                    <button onClick={pastePassPhrase} className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
+                      <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
+                        <path
+                            d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
+                      </svg>
+                      <span className="ml-2">Paste</span>
+                    </button>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between">
+                  <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
+                    <Link to={addedPassPhrase && "/dashboard"}>Go To Profile -&gt;</Link>
+                  </button>
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+        {/* Image */}
+        <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
+          <div className="flex mt-40 flex-col items-center gap-2.5">
+            <div className={`${addedPassPhrase || 'opacity-0'} w-[493px] h-[493px]`}>
+              <img className="object-cover object-center" alt="" src={generateSvgAvatar(registrationStore.pubKey)}/>
+            </div>
+            <span className="text-sm">Your Digital ID</span>
+          </div>
+        </div>
+
+      </div>
+
+    </main>
+  );
+});
+
+export default SignIn;

src/pages/Signin.jsx

@@ -1,100 +0,0 @@
-import React, { useEffect } from 'react';
-import { Link } from 'react-router-dom';
-
-import AuthImage from '../images/auth-image.jpg';
-import AuthDecoration from '../images/auth-decoration.png';
-
-function Signin() {
-  useEffect(() => {
-    localStorage.setItem('svgKey', '')
-  }, [])
-  return (
-    <main className="bg-white">
-
-      <div className="relative md:flex">
-
-        {/* Content */}
-        <div className="md:w-1/2">
-          <div className="min-h-screen h-full flex flex-col after:flex-1">
-
-            {/* Header */}
-            <div className="flex-1">
-              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
-                {/* Logo */}
-                <Link className="block" to="/dashboard">
-                  <svg width="32" height="32" viewBox="0 0 32 32">
-                    <defs>
-                      <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
-                        <stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#A5B4FC" offset="100%" />
-                      </linearGradient>
-                      <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
-                        <stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#38BDF8" offset="100%" />
-                      </linearGradient>
-                    </defs>
-                    <rect fill="#6366F1" width="32" height="32" rx="16" />
-                    <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
-                    <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
-                    <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
-                  </svg>
-                </Link>
-              </div>
-            </div>
-
-            <div className="max-w-sm mx-auto px-4 py-8">
-              <h1 className="text-3xl text-slate-800 font-bold mb-6">Welcome back! ✨</h1>
-              {/* Form */}
-              <form>
-                <div className="space-y-4">
-                  <div>
-                    <label className="block text-sm font-medium mb-1" htmlFor="email">Email Address</label>
-                    <input id="email" className="form-input w-full" type="email" />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium mb-1" htmlFor="password">Password</label>
-                    <input id="password" className="form-input w-full" type="password" autoComplete="on" />
-                  </div>
-                </div>
-                <div className="flex items-center justify-between mt-6">
-                  <div className="mr-1">
-                    <Link className="text-sm underline hover:no-underline" to="/reset-password">Forgot Password?</Link>
-                  </div>
-                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3" to="/dashboard">Sign In</Link>
-                </div>
-              </form>
-              {/* Footer */}
-              <div className="pt-5 mt-6 border-t border-slate-200">
-                <div className="text-sm">
-                  Don’t you have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">Sign Up</Link>
-                </div>
-                {/* Warning */}
-                <div className="mt-5">
-                  <div className="bg-amber-100 text-amber-600 px-3 py-2 rounded">
-                    <svg className="inline w-3 h-3 shrink-0 fill-current mr-2" viewBox="0 0 12 12">
-                      <path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
-                    </svg>
-                    <span className="text-sm">
-                      To support you during the pandemic super pro features are free until March 31st.
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-          </div>
-        </div>
-
-        {/* Image */}
-        <div className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
-          <img className="object-cover object-center w-full h-full" src={AuthImage} width="760" height="1024" alt="Authentication" />
-          <img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={AuthDecoration} width="218" height="224" alt="Authentication decoration" />
-        </div>
-
-      </div>
-
-    </main>
-  );
-}
-
-export default Signin;

src/pages/digitalId/ProfileId.jsx

@@ -1,21 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
-import { userDataStore } from '../../store/userDataStore';
 import { registrationStore } from "../../store/store";
 import Sidebar from '../../partials/Sidebar';
 import { observer } from 'mobx-react-lite';
 import Header from '../../partials/Header';
-import ProfileTable from '../../partials/digitalId/ProfileTable';
+import ProfileTable from '../../partials/profile/ProfileTable';
 import Image from '../../images/transactions-image-04.svg';
 
-const defaultValues = {
-  label: '',
-  value: '',
-  seed: String(Math.floor(Math.random() * 90000000000000000000), 10) 
-};
-
 const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc ID', 'National doc issue date', 'National doc expiry date'];
 
 const Profile = observer (() => {
+  const defaultValues = {
+    label: '',
+    value: '',
+    seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
+  };
+  
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [buttonPanelOpen, setButtonPanelOpen] = useState(true);
   const [removePanelOpen, setRemovePanelOpen] = useState(false);
@@ -27,17 +26,31 @@ const Profile = observer (() => {
   const [propertyValues, setPropertyValues] = useState([]);
   const [updatedValues, setUpdatedValues] = useState([defaultValues]);
   const [addedValues, setAddedValues] = useState(defaultValues);
+  const [isCheck, setIsCheck] = useState([]);
+
+  useEffect(() => {
+    handleSelectedItems(isCheck);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCheck]);
+
+  const handleClick = e => {
+    const { id, checked } = e.target;
+    setIsCheck([...isCheck, id]);
+    if (!checked || !id) {
+      setIsCheck(isCheck.filter(item => item !== id));
+    }
+  };
 
   const openHint = () => {
     if (!addedValues.label) {
       setPropertyValues(initialPropertyValues);
     }
-  }
+  };
 
   const changeAddedValues = (value, field) => {
     setAddedValues((prevState) => ({
       ...prevState,
-      [field]: value
+      [field]: value,
     }))
   };
 
@@ -65,11 +78,11 @@ const Profile = observer (() => {
 
   const handleSelectedItems = (selectedItems) => {
     setSelectedItems([...selectedItems]);
-    setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key))
+    setUpdatedValues(registrationStore.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
       .map(elem => (
         (!elem.seed) ? {
         ...elem,
-        seed: String(Math.floor(Math.random() * 90000000000000000000), 10) 
+        seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
       }: elem)));
     if (selectedItems.length > 0) {
       setButtonPanelOpen(false);
@@ -90,10 +103,10 @@ const Profile = observer (() => {
   const openAddPanel = () => {
     setAddPanelOpen(true);
     setButtonPanelOpen(false);
-  }
+  };
 
   const sendAddedData = () => {
-    const checkingAddedData = !userDataStore.decryptedData
+    const checkingAddedData = !registrationStore.decryptedAccountData
       .some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20);
     if (checkingAddedData) {
       setAddPanelOpen(false);
@@ -101,22 +114,23 @@ const Profile = observer (() => {
       setAddedValues(defaultValues);
       addDataParameters();
     }
-  }
+  };
 
   const sendUpdatedData = () => {
     setUpdatePanelOpen(false);
     changeDataParameters();
     setChangePanelOpen(true);
-  }
+    setIsCheck([]);
+  };
 
   const deleteDataParameters = () => {
-    const changeData = userDataStore.decryptedData.filter(item=>!selectedItems.includes(item.key))
+    const changeData = registrationStore.decryptedAccountData.filter(item=>!selectedItems.includes(item.key))
     registrationStore.pushAccountData(changeData);
-  }
+  };
 
   const changeInitialArray = () => {
     let newArr = [];
-    userDataStore.decryptedData.map(elem => {
+    registrationStore.decryptedAccountData.map(elem => {
       updatedValues.forEach(item => {
         if (elem.label === item.label) {
           newArr.push({
@@ -131,44 +145,52 @@ const Profile = observer (() => {
       }
     })
     return newArr;
-  }
+  };
 
   const changeDataParameters = () => {
     const updatedData = changeInitialArray();
     registrationStore.pushAccountData(updatedData);
-  }
+  };
 
   const addDataParameters = () => {
-    addedValues.key = addedValues.label.toLowerCase().split(' ').join('_');
+    addedValues.key = addedValues.label.toLowerCase().split(' ').join('');
-    registrationStore.pushAccountData(userDataStore.decryptedData.concat(addedValues));
+    registrationStore.pushAccountData(registrationStore.decryptedAccountData.concat(addedValues));
-  }
+  };
 
   const cancelAddPanel = () => {
     setAddedValues(defaultValues);
     setAddPanelOpen(false);
     setButtonPanelOpen(true);
-  }
+  };
 
   const cancelUpdatePanel = () => {
+    setUpdatedValues(registrationStore.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
+      .map(elem => (
+        (!elem.seed) ? {
+        ...elem,
+        seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
+      }: elem)));
     setUpdatePanelOpen(false);
     setChangePanelOpen(true);
-  }
+    setIsCheck([]);
+  };
 
   const openRemovePanel = () => {
     setRemovePanelOpen(true);
     setChangePanelOpen(false);
-  }
+  };
 
   const openUpdatePanel = () => {
     setUpdatePanelOpen(true);
     setChangePanelOpen(false);
-  }
+  };
 
   const applyDataDeletion = () => {
     setRemovePanelOpen(false);
     setButtonPanelOpen(true);
-    deleteDataParameters()
+    deleteDataParameters();
-  }
+    setIsCheck([]);
+  };
 
   const handleInput = (text, field) => {
     changeAddedValues(text, field);
@@ -212,7 +234,9 @@ const Profile = observer (() => {
                   </ul>
                 </div>
                 {/* Table */}
-                <ProfileTable selectedItems={handleSelectedItems} userData={userDataStore.decryptedData}/>
+                <div className='w-[828px]'>
+                  <ProfileTable isCheck={isCheck} handleClick={handleClick} userData={registrationStore.decryptedAccountData}/>
+                </div>
               </div>
               {/* Left sidebar */}
               <div>
@@ -273,7 +297,7 @@ const Profile = observer (() => {
                         autoComplete='off'
                         id="seed"
                         className="form-input w-full"
-                        type="number"
+                        type="text"
                         required
                         onClick={() => setPropertyValues([])}
                         onChange={(e) => changeAddedValues(e.target.value, 'seed')}
@@ -341,7 +365,7 @@ const Profile = observer (() => {
                             autoComplete='off'
                             id={`${item.key}:seed`}
                             className="form-input w-full"
-                            type="number"
+                            type="text"
                             required
                             onChange={(e) => changeUpdatedValues(e.target.value, 'seed', item.key)}
                             value={item.seed}
@@ -383,7 +407,7 @@ const Profile = observer (() => {
                   <div className={`${!removePanelOpen && 'hidden'} bg-white px-5 pt-4 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}>
                     <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2">Summary</h2>
                     <div className="flex flex-col">
-                      {userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key)).map(item => (
+                      {registrationStore.decryptedAccountData.filter(({ key }) => selectedItems.includes(key)).map(item => (
                         <span key={item.label} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.label}</span>
                       ))}
                     </div>

src/pages/digitalId/Validate.jsx

@@ -1,15 +1,14 @@
 import React, { useState } from 'react';
 import {observer} from "mobx-react-lite";
-
-import {transactionsStore} from "../../store/transactionsStore";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ValidateTable from "../../partials/validate/ValidateTable";
 import ValidatePanel from "../../partials/validate/ValidatePanel";
-import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
+import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
 import {Link} from "react-router-dom";
+import {registrationStore} from "../../store/store";
 
-const Validate = observer(()=>{
+const Validate = observer(() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [validatePanelOpen, setValidatePanelOpen] = useState(true);
 
@@ -58,7 +57,7 @@ const Validate = observer(()=>{
               <div className="pb-8 border-b border-zinc-200 mt-[50px]">
                 <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID validation log ✨</h1>
               </div>
-              {transactionsStore.transactionsData.map(item => {
+              {registrationStore.transactionsInfo.map(item => {
                 return <ValidateRoadMap season={item} key={item.id}/>
               })}
             </div>

src/pages/digitalId/ValidationLog.jsx

@@ -1,12 +1,11 @@
 import React, {useState} from 'react';
-
+import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
-import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
-import {transactionsStore} from "../../store/transactionsStore";
 import {observer} from "mobx-react-lite";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
+import {registrationStore} from "../../store/store";
 
-const ValidationLog = observer(()=>{
+const ValidationLog = observer(() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
@@ -28,7 +27,7 @@ const ValidationLog = observer(()=>{
               <div className="max-w-3xl m-auto mt-6">
                 <div className="xl:-translate-x-16 max-w-fit">
                   {/* PostsID */}
-                  {transactionsStore.transactionsData.map(item=>{
+                  {registrationStore.transactionsInfo.map(item => {
                     return <ValidateRoadMap season={item} key={item.id}/>
                   })}
                 </div>

src/pages/digitalId/Verify.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
-import { sharedDataStore } from '../../store/sharedDataStore';
+import {registrationStore} from "../../store/store";
 import { observer } from 'mobx-react-lite';
 
 const Verify = observer(() => {
@@ -42,7 +42,7 @@ const Verify = observer(() => {
             </div>
             {/* Block */}
             <div className="flex flex-col gap-y-4">
-              {sharedDataStore.sharedData.map((item, index) => (
+              {registrationStore.sharedData.map((item, index) => (
                 <div key={index} className="w-[1095px] pl-5 pr-[13px] pb-8 bg-white border border-slate-200 rounded shadow-[0_4px_6px_-1px_rgba(5,23,42,0.08)]">
                   {/* Header */}
                   <div className="flex justify-end items-center h-[42px]">

src/partials/profile/ProfileTable.jsx

@@ -3,30 +3,16 @@ import ProfileTableItem from './ProfileTableItem';
 import ProfileIcon from '../../images/profile-icon.svg';
 
 function ProfileTable({
-  selectedItems,
+  userData,
-  userData
+  handleClick,
+  isCheck,
 }) {
 
-  const [isCheck, setIsCheck] = useState([]);
-
   const defaultData = {
     image: ProfileIcon,
     status: 'Stored',
     transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
     avatars: null
-  }
-
-  useEffect(() => {
-    selectedItems(isCheck);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isCheck]);
-
-  const handleClick = e => {
-    const { id, checked } = e.target;
-    setIsCheck([...isCheck, id]);
-    if (!checked) {
-      setIsCheck(isCheck.filter(item => item !== id));
-    }
   };
 
   const data = {
@@ -35,10 +21,10 @@ function ProfileTable({
     social:["Telephone", "Twitter", "Facebook", "Instagram", "Youtube", "Wechat", "Tiktok", "Linkedin", "Vk", "Github", "Telegram", "Qq", "Snapchat", "Reddit"]
   }
 
-  const generalData = userData.filter(elem => data.general.includes(elem.label)),
+  const generalData = userData.filter(elem => data.general.includes(elem.label));
-        nationalityData = userData.filter(elem => data.nationality.includes(elem.label)),
+  const nationalityData = userData.filter(elem => data.nationality.includes(elem.label));
-        sosialData = userData.filter(elem => data.social.includes(elem.label)),
+  const sosialData = userData.filter(elem => data.social.includes(elem.label));
-        otherData = userData.filter((elem) =>
+  const otherData = userData.filter((elem) =>
           !data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label));
 
   return (

src/partials/sharedData/SharedDataRoadmap.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import ValidationUsersImg from "../validationlog/ValidationUsersImg";
+import ValidationUsersImg from "../validationLog/ValidationUsersImg";
 
 function SharedDataRoadMap({ data }) {
 

src/partials/validationLog/ValidateRoadMap.jsx

@@ -11,7 +11,7 @@ function ValidateRoadMap({ season }) {
           <div className="w-32 shrink-0">
             <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{''}</h2>
           </div>
-          <div className="grow pb-6">
+          <div className="grow pb-6 border-b border-slate-200">
             <header>
               <div className="flex flex-nowrap items-center space-x-2 mb-6">
                 {/* Avatars */}

src/partials/validationLog/ValidationSeasonItem.jsx

@@ -5,13 +5,13 @@ function ValidationSeasonItem({ length, item, index }) {
       <li className="relative pt-2 pb-2.5">
         <div className="flex items-center mb-2.5">
           {length-1!==index && <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>}
-          <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
+          <div className={`${item.address ? "bg-indigo-500" : "bg-[#FF0000]"} absolute left-0 rounded-full`} aria-hidden="true">
             <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
-              <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z"/>
+              {item.address && <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z"/>}
             </svg>
           </div>
           <h3 className="text-lg font-bold text-slate-800 pl-9">
-            {`${item.label} by`} <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{item.address}</a>
+            {`${item.label} ${item.address ? "by" : "Updated"}`} <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{item.address}</a>
           </h3>
         </div>
         <div className="block text-slate-800 w-fit pl-9">
@@ -20,7 +20,7 @@ function ValidationSeasonItem({ length, item, index }) {
         </div>
         <div className="mb-3.5 block text-slate-800 w-fit pl-9">
           <div className="text-base font-semibold underline mb-[-10px]">{item.value}</div>
-          <span className="font-normal text-slate-600 text-[10px]">Validated data</span>
+          <span className={`${!item.value && "hidden"} font-normal text-slate-600 text-[10px]`}>{item.address ? "Validated data" : "Updated data"}</span>
         </div>
         <a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>
       </li>

src/shared/fetchWrapper.js

@@ -2,7 +2,7 @@ import {registrationStore} from '../store/store';
 
 function prepareUrl(url) {
   if (url.startsWith('http')) return url;
-  return `http://3.125.47.101/api/${url}`;
+  return `${window.location.origin}/api/${url}`;
 }
 
 function handleRequest(method, url, headers, attempts, token, body) {

src/shared/labelMap.js

@@ -0,0 +1,27 @@
+export const labelMap = {
+  firstname: 'First name',
+  secondname: 'Second name',
+  gender: "Gender",
+  birthdate: "Birthdate",
+  placeofbirth: "Place of birth",
+  nationality: "Nationality",
+  nationalid: "National ID",
+  nationaldoctype: "National doctype",
+  nationaldocid: "National doc ID",
+  nationaldocissuedate: "National doc issue date",
+  nationaldocexpirydate: "National doc expiry date",
+  telephone: "Telephone",
+  twitter: "Twitter",
+  facebook: "Facebook",
+  instagram: "Instagram",
+  youtube: "Youtube",
+  wechat: "Wechat",
+  tiktok: "Tiktok",
+  linkedin: "Linkedin",
+  vk: "Vk",
+  github: "Github",
+  telegram: "Telegram",
+  qq: "Qq",
+  snapchat: "Snapchat",
+  reddit: "Reddit",
+};

src/store/sharedDataStore.js

@@ -1,66 +0,0 @@
-import { makeAutoObservable, reaction } from "mobx";
-import { fetchWrapper } from "../shared/fetchWrapper";
-import { registrationStore } from './store';
-
-const labelMap = {
-  firstname: 'First name',
-  secondname: 'Second name',
-  gender: "Gender",
-  birthdate: "Birthdate",
-  placeofbirth: "Place of birth",
-  nationality: "Nationality",
-  nationalid: "National ID",
-  nationaldoctype: "National doctype",
-  nationaldocid: "National doc ID",
-  nationaldocissuedate: "National doc issue date",
-  nationaldocexpirydate: "National doc expiry date",
-  telephone: "Telephone",
-  twitter: "Twitter",
-  facebook: "Facebook",
-  instagram: "Instagram",
-  youtube: "Youtube",
-  wechat: "Wechat",
-  tiktok: "Tiktok",
-  linkedin: "Linkedin",
-  vk: "Vk",
-  github: "Github",
-  telegram: "Telegram",
-  qq: "Qq",
-  snapchat: "Snapchat",
-  reddit: "Reddit"
-};
-
-class SharedDataStore{
-  _keysArray = [];
-  _sharedData = [];
-
-  constructor() {
-    makeAutoObservable(this);
-
-    reaction(() => ({data: registrationStore.keysArray}), ({data}) => {
-      this._keysArray = data;
-      this.fetchSharedData();
-    })
-  }
-
-  fetchSharedData() {
-    this._keysArray.forEach((elem) => fetchWrapper.get(`http://3.125.47.101/api/data/shared/${elem}`).then((res) => this.changeSharedData(res)))
-  };
-
-  changeSharedData(incomingData) {
-    this._sharedData.push({
-      data: incomingData.data,
-    })
-  }
-
-  get sharedData() {
-    return this._sharedData.map(elem => ({
-      data: elem.data.map(item => ({
-        label: labelMap[item.label],
-        value: item.value,
-      }))
-  }));
-  };
-}
-
-export const sharedDataStore = new SharedDataStore();

src/store/store.js

@@ -1,133 +1,208 @@
-import { reaction, makeAutoObservable } from "mobx";
+import { reaction, makeAutoObservable, onBecomeObserved, onBecomeUnobserved} from "mobx";
 import {cryptography} from "@liskhq/lisk-client";
+import { passphrase } from "@liskhq/lisk-client";
 import {getNodeInfo} from '../api/node';
 import {fetchWrapper} from '../shared/fetchWrapper';
+import {labelMap} from "../shared/labelMap";
+import User08 from "../images/user-28-08.jpg";
+import User06 from "../images/user-28-06.jpg";
+import User05 from "../images/user-28-05.jpg";
+import User09 from "../images/user-28-09.jpg";
+
+const usersImages = [User08,User06,User05,User09];
 
 class Store {
   _accountData = []
 
-  _passPhrase='rocket north inform swift improve fringe sweet crew client canyon bean autumn'
+  _passPhrase
 
   _nodeInfo = {}
 
-  _userData = {}
-
   _keysArray = []
 
-  _transactionsInfo = {}
+  _sharedData = []
+
+  _transactionsInfo = []
 
   constructor() {
-    makeAutoObservable(this);
+    makeAutoObservable(this, {});
 
     this.fetchNodeInfo()
 
-    reaction(() => this.tokenKey, () => this.getData())
+    reaction(() => this.keysArray, () => this.fetchSharedData())
-    reaction(() => this.tokenKey, () => this.fetchTransactionsInfo())
+    onBecomeObserved(this, "decryptedAccountData", () => this.fetchNewAccountData())
+    onBecomeObserved(this, "sharedData", () => this.fetchKeysArray())
+    onBecomeUnobserved(this, "sharedData", () => this.unobservedSharedData())
+    onBecomeObserved(this, "transactionsInfo", () => this.fetchTransactionsInfo())
+    onBecomeUnobserved(this, "transactionsInfo", () => this.unobservedTransactionsInfo())
   };
 
-  getData() {
-    this.fetchNewAccountData();
-    this.fetchKeysArray();
-  }
-
   fetchNewAccountData() {
-    fetchWrapper.getAuth('data/private', {
+    getNodeInfo()
-      networkIdentifier: this.nodeInfo.networkIdentifier,
+      .then((info)=>{
-      lastBlockID: this.nodeInfo.lastBlockID
+        this.fetchNodeInfoSuccess(info)
-    }).then((res) => this.userDataFetchChange(res))
+        fetchWrapper.getAuth('data/private', {
+          networkIdentifier: this.nodeInfo.networkIdentifier,
+          lastBlockID: this.nodeInfo.lastBlockID
+        }).then((res) => this.accountDataFetchChange(res))
+      })
+      .catch((err) => this.fetchNodeInfoFailed(err))
   }
 
-  pushAccountData(data=this.accountData) {
+  pushAccountData(data = this.accountData) {
     fetchWrapper.postAuth('data/private', {
       networkIdentifier: this.nodeInfo.networkIdentifier,
       lastBlockID: this.nodeInfo.lastBlockID
     }, [...this.encryptAccountData(data)])
-        .then(()=>this.fetchNewAccountData())
+      .then(() => this.fetchNewAccountData())
   }
 
   fetchKeysArray() {
-    fetchWrapper.getAuth('data/shared/', {
+    getNodeInfo()
-      networkIdentifier: this.nodeInfo.networkIdentifier,
+      .then((info)=>{
-      lastBlockID: this.nodeInfo.lastBlockID
+        this.fetchNodeInfoSuccess(info)
-    }).then((res) => this.keysArrayFetchChange(res))
+        fetchWrapper.getAuth('data/shared/', {
+          networkIdentifier: this.nodeInfo.networkIdentifier,
+          lastBlockID: this.nodeInfo.lastBlockID
+        }).then((res) => this.keysArrayFetchChange(res))
+      })
+      .catch((err) => this.fetchNodeInfoFailed(err))
   }
 
   fetchTransactionsInfo() {
-    fetchWrapper.getAuth(`http://3.125.47.101/api/account/transactions/${this.accountMadeTransaction}?moduleID=1001&assetID=11`, {
+    fetchWrapper.get("account/transactions/71ccaeefe22050abc9b36ce0c1744316c11c49e1", {
       networkIdentifier: this.nodeInfo.networkIdentifier,
       lastBlockID: this.nodeInfo.lastBlockID
-    }).then((res)=>this.saveInfoTransactions(res))
+    }).then((res) => this.saveInfoTransactions(res))
+  };
+
+  generatePassPhrase() {
+    this._passPhrase = passphrase.Mnemonic.generateMnemonic();
+    sessionStorage.setItem('passPhrase', this._passPhrase);
+  };
+
+  fetchSharedData() {
+    this._keysArray.forEach((elem) => fetchWrapper.get(`data/shared/${elem}`).then((res) => this.changeSharedData(res)))
+  };
+
+  unobservedTransactionsInfo() {
+    this._transactionsInfo = []
+  };
+
+  unobservedSharedData() {
+    this._sharedData = []
+  };
+
+  changeSharedData(incomingData) {
+    this._sharedData.push({
+      data: incomingData.data,
+    })
   }
 
-  get accountMadeTransaction() {
+  savePastPassPhrase(phrase) {
-    return "b444b7ff3118cf2a30cbd54cfcdb8fd5d805017a"
+    this._passPhrase = phrase;
-  }
+    sessionStorage.setItem('passPhrase', this._passPhrase);
-
+  };
-  userDataFetchChange(res) {
-    this._userData = res;
-  }
-
-  keysArrayFetchChange(res) {
-    this._keysArray = res.data;
-  }
-
-  get keysArray() {
-    return this._keysArray;
-  }
-
-  get userData() {
-    return this._userData;
-  }
-
-  get transactionsInfo() {
-    return this._transactionsInfo
-  }
-
-  savePassPhrase(phrase) {
-    this._passPhrase = phrase
-  }
 
   saveDataRegistration(data) {
     this._accountData = data;
   };
 
-  saveInfoTransactions(transaction) {
-    this._transactionsInfo = transaction
-  }
-
   fetchNodeInfo() {
     getNodeInfo()
-      .then((info) => this.fetchNodeInfoSuccess(info))
+      .then((info)=>this.fetchNodeInfoSuccess(info))
       .catch((err) => this.fetchNodeInfoFailed(err))
   }
 
+  saveInfoTransactions(transaction) {
+    this._transactionsInfo = transaction.data
+  }
+
+  accountDataFetchChange(res) {
+    if (res.data) {
+      this._accountData = res.data;
+    }
+  };
+
+  keysArrayFetchChange(res) {
+    this._keysArray = res.data;
+  }
+
   fetchNodeInfoSuccess(info) {
     this._nodeInfo = info.data;
   }
 
   fetchNodeInfoFailed(err) {
-    console.log(err)
+    console.log(err);
   }
 
-  get passPhrase() {
+  get sharedData() {
-    return 'rocket north inform swift improve fringe sweet crew client canyon bean autumn'
+    return this._sharedData.map(elem => ({
-  }
+      data: elem.data.map(item => ({
-
+        label: labelMap[item.label],
-  get accountData() {
+        value: item.value,
-    return this._accountData
+      }))
+    }));
   };
 
+  get transactionsInfo() {
+    return this._transactionsInfo.map(item => {
+      return {
+        id: item.id,
+        users_images: usersImages.map(image => {
+          return {
+            image: image,
+            size: 24
+          }
+        }),
+        transaction: item.asset.features.map(asset => {
+          return {
+            transaction_id: item.id,
+            address: item.asset.recipientAddress && cryptography.bufferToHex(cryptography.getAddressFromPublicKey(cryptography.hexToBuffer(item.senderPublicKey))),
+            value: asset.value,
+            label: labelMap[asset.label],
+          }
+        })
+      }
+    })
+  }
+
+  get decryptedAccountData() {
+    return this._accountData.map((elem) => ({
+      ...elem,
+      key: elem.label,
+      label: labelMap[elem.label],
+      value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, this.passPhrase, this.pubKey).split(':')[1]
+    }))
+  }
+
   encryptAccountData(data) {
     return data.map((item) => {
       let value = cryptography.encryptMessageWithPassphrase(cryptography.getRandomBytes(32).toString('hex') + ":" + item.value, this.passPhrase, this.pubKey);
       return {
-        "label": item.key,
+        label: item.key,
-        "value": value.encryptedMessage,
+        value: value.encryptedMessage,
-        "value_nonce": value.nonce,
+        value_nonce: value.nonce,
+        seed: item.seed,
       }
     })
   }
 
+  get keysArray() {
+    return this._keysArray;
+  }
+
+  get passPhrase() {
+    if(sessionStorage.getItem('passPhrase')) {
+      this._passPhrase = sessionStorage.getItem('passPhrase')
+    }
+    return this._passPhrase
+  }
+
+  get accountData() {
+    return this._accountData
+  };
+
   get nodeInfo() {
     return this._nodeInfo;
   }
@@ -141,7 +216,7 @@ class Store {
   }
 
   get address() {
-    return cryptography.bufferToHex(this.addressAndPubKey.address)
+    return this.addressAndPubKey.address.toString('hex')
   }
 
   get tokenKey() {

src/store/transactionsStore.js

@@ -1,51 +0,0 @@
-import {makeAutoObservable, reaction} from "mobx";
-import {registrationStore} from "./store";
-import User05 from "../../src/images/user-28-05.jpg";
-import User08 from "../../src/images/user-28-08.jpg";
-import User09 from "../../src/images/user-28-09.jpg";
-import User06 from "../../src/images/user-28-06.jpg";
-
-const labelMap = {
-  firstname: 'First name',
-  secondname: 'Second name',
-  gender: "Gender",
-  birthdate: "Birthdate"
-};
-
-const usersImages = [User08,User06,User05,User09];
-
-class TransactionsStore {
-  _transactionsData = [];
-
-  constructor() {
-    makeAutoObservable(this)
-
-    reaction(() => ({data: registrationStore.transactionsInfo}), ({data}) => {
-      this._transactionsData = data.data;
-    })
-  }
-
-  get transactionsData() {
-    return this._transactionsData.map(item=>{
-      return {
-        id: item.id,
-        users_images: usersImages.map(image=>{
-          return {
-            image: image,
-            size: 24
-          }
-        }),
-        transaction: item.asset.features.map(asset=>{
-          return {
-            transaction_id: item.id,
-            address: registrationStore.accountMadeTransaction,
-            value: asset.value,
-            label: labelMap[asset.label],
-          }
-        })
-      }
-    })
-  }
-}
-
-export const transactionsStore = new TransactionsStore()

src/store/userDataStore.js

@@ -1,53 +0,0 @@
-import { cryptography } from "@liskhq/lisk-client";
-import { makeAutoObservable, reaction } from "mobx";
-import { registrationStore } from './store';
-
-const labelMap = {
-  first_name: 'First name',
-  second_name: 'Second name',
-  gender: "Gender",
-  birthdate: "Birthdate",
-  place_of_birth: "Place of birth",
-  nationality: "Nationality",
-  national_id: "National ID",
-  national_doctype: "National doctype",
-  national_doc_id: "National doc ID",
-  national_doc_issue_date: "National doc issue date",
-  national_doc_expiry_date: "National doc expiry date",
-  telephone: "Telephone",
-  twitter: "Twitter",
-  facebook: "Facebook",
-  instagram: "Instagram",
-  youtube: "Youtube",
-  wechat: "Wechat",
-  tiktok: "Tiktok",
-  linkedin: "Linkedin",
-  vk: "Vk",
-  github: "Github",
-  telegram: "Telegram",
-  qq: "Qq",
-  snapchat: "Snapchat",
-  reddit: "Reddit"
-};
-
-class UserDataStore{
-  _data = [];
-
-  constructor() {
-    makeAutoObservable(this);
-
-    reaction(() => ({data: registrationStore.userData}), ({data}) => {
-      this._data = data.data;
-    })
-  }
-  get decryptedData(){
-    return this._data.map((elem) => ({
-      ...elem,
-      key: elem.label,
-      label: labelMap[elem.label],
-      value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
-    }))
-  }
-}
-
-export const userDataStore = new UserDataStore();

webpack.config.js

@@ -38,6 +38,13 @@ module.exports = {
     client: {
       progress: true,
     },
+    proxy: {
+      '/api/**': {
+        target: 'http://3.125.47.101',
+        secure: false,
+        changeOrigin: true
+      }
+    }
   },
 
   module: {