changed userData to accounData

added data check for the table on Profile page

src/pages/Onboarding1.jsx

@@ -1,15 +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 {passphrase} from "@liskhq/lisk-client";
-import {registrationStore} from "../store/store";
+import { observer } from "mobx-react-lite";
+import { registrationStore } from "../store/store";
 
 const Onboarding1 = observer(() => {
-  let phrase = passphrase.Mnemonic.generateMnemonic();
-  registrationStore.savePassPhrase(phrase);
+
+  useEffect(()=>{
+    registrationStore.generatePassPhrase()
+  }, [])
 
   return (
     <main className="bg-white">
@@ -41,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>
@@ -63,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 />
@@ -113,7 +114,7 @@ const Onboarding1 = observer(() => {
                       <Link to="/onboarding-2">Next Step -&gt;</Link>
                     </button>
                   </div>
-                </form>
+                </div>
 
               </div>
             </div>

src/pages/Onboarding2.jsx

@@ -31,12 +31,12 @@ const Onboarding2 = observer(() => {
     }
   };
 
-  const saveStoreRegistration = ()=>{
+  const saveStoreRegistration = () => {
     if (fillingForm) {
       registrationStore.saveDataRegistration(Object.keys(dataRegistration).map(item => {
         return{
           key: `${item}`,
-          value: dataRegistration[item]
+          value: dataRegistration[item],
         }
       }))
     }
@@ -72,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>
@@ -93,7 +93,7 @@ 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>
@@ -108,7 +108,7 @@ const Onboarding2 = observer(() => {
                       <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>
@@ -127,7 +127,7 @@ const Onboarding2 = observer(() => {
                       <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">

src/pages/Onboarding3.jsx

@@ -1,34 +1,27 @@
-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 [passPhrase, setPassPhrase] = useState(convertPhraseToArray(registrationStore.passPhrase));
+const Onboarding3 = observer(()=>{
   function generatePassPhrase() {
-    let phrase = passphrase.Mnemonic.generateMnemonic();
-    registrationStore.savePassPhrase(phrase);
-    setPassPhrase(convertPhraseToArray(registrationStore.passPhrase));
+    registrationStore.generatePassPhrase();
   };
 
   function savePassPhraseInStore (copiedPhrase) {
-    let phrasePaste = convertPhraseToArray(copiedPhrase.trim());
-    if (phrasePaste.length === 12) {
-      registrationStore.savePassPhrase(copiedPhrase.trim());
-      setPassPhrase(phrasePaste);
-    } else {
-      return false
+    if (copiedPhrase.split(' ').length === 12) {
+      registrationStore.savePastPassPhrase(copiedPhrase.trim());
     }
   };
 
   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 (
@@ -61,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>
@@ -85,7 +78,7 @@ 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>
@@ -134,6 +127,6 @@ function Onboarding3() {
 
     </main>
   );
-}
+});
 
 export default Onboarding3;

src/pages/Onboarding4.jsx

@@ -12,6 +12,7 @@ const Onboarding4 = observer(() => {
   function createAccount() {
     if(checkBoxesSelected.length === 2) {
       registrationStore.pushAccountData();
+      sessionStorage.setItem('passPhrase', registrationStore.passPhrase);
     }
   };
 
@@ -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>

src/pages/ResetPassword.jsx

@@ -2,6 +2,7 @@ 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 (
@@ -18,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">
-                    <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>
+                  <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
               </div>
             </div>
@@ -41,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>
@@ -51,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/SignIn.jsx

@@ -1,99 +1,105 @@
-import React, { useEffect } from 'react';
+import React, {useState} from 'react';
+import {observer} from "mobx-react-lite";
 import { Link } from 'react-router-dom';
-import AuthImage from '../images/auth-image.jpg';
-import AuthDecoration from '../images/auth-decoration.png';
+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));
+  };
 
-function SignIn() {
-  useEffect(() => {
-    localStorage.setItem('svgKey', '')
-  }, []);
   return (
     <main className="bg-white">
 
-      <div className="relative md:flex">
+      <div className="relative flex">
 
         {/* Content */}
-        <div className="md:w-1/2">
+        <div className="w-full md:w-1/2">
+
           <div className="min-h-screen h-full flex flex-col after:flex-1">
 
-            {/* Header */}
             <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">
-                  <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>
+                  <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="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 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>
-                    <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 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 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 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="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 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/digitalId/ProfileId.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { registrationStore } from "../../store/store";
 import Sidebar from '../../partials/Sidebar';
 import { observer } from 'mobx-react-lite';
@@ -6,15 +6,15 @@ import Header from '../../partials/Header';
 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);
@@ -26,6 +26,20 @@ 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) {
@@ -64,7 +78,7 @@ const Profile = observer (() => {
 
   const handleSelectedItems = (selectedItems) => {
     setSelectedItems([...selectedItems]);
-    setUpdatedValues(registrationStore.decryptedUserData.filter(({ key }) => selectedItems.includes(key))
+    setUpdatedValues(registrationStore.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
       .map(elem => (
         (!elem.seed) ? {
         ...elem,
@@ -92,7 +106,7 @@ const Profile = observer (() => {
   };
 
   const sendAddedData = () => {
-    const checkingAddedData = !registrationStore.decryptedUserData
+    const checkingAddedData = !registrationStore.decryptedAccountData
       .some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20);
     if (checkingAddedData) {
       setAddPanelOpen(false);
@@ -106,16 +120,17 @@ const Profile = observer (() => {
     setUpdatePanelOpen(false);
     changeDataParameters();
     setChangePanelOpen(true);
+    setIsCheck([]);
   };
 
   const deleteDataParameters = () => {
-    const changeData = registrationStore.decryptedUserData.filter(item=>!selectedItems.includes(item.key))
+    const changeData = registrationStore.decryptedAccountData.filter(item=>!selectedItems.includes(item.key))
     registrationStore.pushAccountData(changeData);
   };
 
   const changeInitialArray = () => {
     let newArr = [];
-    registrationStore.decryptedUserData.map(elem => {
+    registrationStore.decryptedAccountData.map(elem => {
       updatedValues.forEach(item => {
         if (elem.label === item.label) {
           newArr.push({
@@ -138,8 +153,8 @@ const Profile = observer (() => {
   };
 
   const addDataParameters = () => {
-    addedValues.key = addedValues.label.toLowerCase().split(' ').join('_');
-    registrationStore.pushAccountData(registrationStore.decryptedUserData.concat(addedValues));
+    addedValues.key = addedValues.label.toLowerCase().split(' ').join('');
+    registrationStore.pushAccountData(registrationStore.decryptedAccountData.concat(addedValues));
   };
 
   const cancelAddPanel = () => {
@@ -149,8 +164,15 @@ const Profile = observer (() => {
   };
 
   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 = () => {
@@ -166,7 +188,8 @@ const Profile = observer (() => {
   const applyDataDeletion = () => {
     setRemovePanelOpen(false);
     setButtonPanelOpen(true);
-    deleteDataParameters()
+    deleteDataParameters();
+    setIsCheck([]);
   };
 
   const handleInput = (text, field) => {
@@ -211,7 +234,9 @@ const Profile = observer (() => {
                   </ul>
                 </div>
                 {/* Table */}
-                <ProfileTable selectedItems={handleSelectedItems} userData={registrationStore.decryptedUserData}/>
+                <div className='w-[828px]'>
+                  <ProfileTable isCheck={isCheck} handleClick={handleClick} userData={registrationStore.decryptedAccountData}/>
+                </div>
               </div>
               {/* Left sidebar */}
               <div>
@@ -272,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')}
@@ -340,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}
@@ -382,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">
-                      {registrationStore.decryptedUserData.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/partials/profile/ProfileTable.jsx

@@ -3,12 +3,11 @@ 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',
@@ -16,19 +15,6 @@ function ProfileTable({
     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 = {
     general:["First name","Second name", "Gender", "Birthdate", "Place of birth"],
     nationality:["Nationality", "National ID", "National doctype", "National doc ID", "National doc issue date", "National doc expiry date"],

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/store/store.js

@@ -1,5 +1,6 @@
 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";
@@ -13,12 +14,10 @@ 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 = []
 
   _sharedData = []
@@ -26,68 +25,73 @@ class Store {
   _transactionsInfo = []
 
   constructor() {
-    makeAutoObservable(this,{});
+    makeAutoObservable(this, {});
 
     this.fetchNodeInfo()
 
     reaction(() => this.keysArray, () => this.fetchSharedData())
-    onBecomeObserved(this, "decryptedUserData", () => this.fetchNewAccountData())
-    onBecomeObserved(this, "sharedData", ()=>this.fetchKeysArray())
-    onBecomeUnobserved(this, "sharedData", ()=>this.unobservedSharedData())
-    onBecomeObserved(this, "transactionsInfo", ()=>this.fetchTransactionsInfo())
-    onBecomeUnobserved(this, "transactionsInfo", ()=>this.unobservedTransactionsInfo())
+    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())
   };
 
   fetchNewAccountData() {
     getNodeInfo()
-        .then((info)=>{
-          this.fetchNodeInfoSuccess(info)
-          fetchWrapper.getAuth('data/private', {
-            networkIdentifier: this.nodeInfo.networkIdentifier,
-            lastBlockID: this.nodeInfo.lastBlockID
-          }).then((res) => this.userDataFetchChange(res))
-        })
-        .catch((err) => this.fetchNodeInfoFailed(err))
+      .then((info)=>{
+        this.fetchNodeInfoSuccess(info)
+        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() {
     getNodeInfo()
-        .then((info)=>{
-          this.fetchNodeInfoSuccess(info)
-          fetchWrapper.getAuth('data/shared/', {
-            networkIdentifier: this.nodeInfo.networkIdentifier,
-            lastBlockID: this.nodeInfo.lastBlockID
-          }).then((res) => this.keysArrayFetchChange(res))
-        })
-        .catch((err) => this.fetchNodeInfoFailed(err))
+      .then((info)=>{
+        this.fetchNodeInfoSuccess(info)
+        fetchWrapper.getAuth('data/shared/', {
+          networkIdentifier: this.nodeInfo.networkIdentifier,
+          lastBlockID: this.nodeInfo.lastBlockID
+        }).then((res) => this.keysArrayFetchChange(res))
+      })
+      .catch((err) => this.fetchNodeInfoFailed(err))
   }
 
   fetchTransactionsInfo() {
-    fetchWrapper.get(`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=[]
-  }
+    this._transactionsInfo = []
+  };
 
   unobservedSharedData() {
-    this._sharedData=[]
-  }
+    this._sharedData = []
+  };
 
   changeSharedData(incomingData) {
     this._sharedData.push({
@@ -95,9 +99,10 @@ class Store {
     })
   }
 
-  savePassPhrase(phrase) {
-    this._passPhrase = phrase
-  }
+  savePastPassPhrase(phrase) {
+    this._passPhrase = phrase;
+    sessionStorage.setItem('passPhrase', this._passPhrase);
+  };
 
   saveDataRegistration(data) {
     this._accountData = data;
@@ -105,17 +110,19 @@ class Store {
 
   fetchNodeInfo() {
     getNodeInfo()
-        .then((info)=>this.fetchNodeInfoSuccess(info))
-        .catch((err) => this.fetchNodeInfoFailed(err))
+      .then((info)=>this.fetchNodeInfoSuccess(info))
+      .catch((err) => this.fetchNodeInfoFailed(err))
   }
 
   saveInfoTransactions(transaction) {
     this._transactionsInfo = transaction.data
   }
 
-  userDataFetchChange(res) {
-    this._userData = res.data;
-  }
+  accountDataFetchChange(res) {
+    if (res.data) {
+      this._accountData = res.data;
+    }
+  };
 
   keysArrayFetchChange(res) {
     this._keysArray = res.data;
@@ -126,7 +133,7 @@ class Store {
   }
 
   fetchNodeInfoFailed(err) {
-    console.log(err)
+    console.log(err);
   }
 
   get sharedData() {
@@ -139,19 +146,19 @@ class Store {
   };
 
   get transactionsInfo() {
-    return this._transactionsInfo.map(item=>{
+    return this._transactionsInfo.map(item => {
       return {
         id: item.id,
-        users_images: usersImages.map(image=>{
+        users_images: usersImages.map(image => {
           return {
             image: image,
             size: 24
           }
         }),
-        transaction: item.asset.features.map(asset=>{
+        transaction: item.asset.features.map(asset => {
           return {
             transaction_id: item.id,
-            address: this.accountMadeTransaction,
+            address: item.asset.recipientAddress && cryptography.bufferToHex(cryptography.getAddressFromPublicKey(cryptography.hexToBuffer(item.senderPublicKey))),
             value: asset.value,
             label: labelMap[asset.label],
           }
@@ -160,12 +167,12 @@ class Store {
     })
   }
 
-  get decryptedUserData(){
-    return this._userData.map((elem) => ({
+  get decryptedAccountData() {
+    return this._accountData.map((elem) => ({
       ...elem,
       key: elem.label,
       label: labelMap[elem.label],
-      value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
+      value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, this.passPhrase, this.pubKey).split(':')[1]
     }))
   }
 
@@ -173,23 +180,23 @@ class Store {
     return data.map((item) => {
       let value = cryptography.encryptMessageWithPassphrase(cryptography.getRandomBytes(32).toString('hex') + ":" + item.value, this.passPhrase, this.pubKey);
       return {
-        "label": item.key,
-        "value": value.encryptedMessage,
-        "value_nonce": value.nonce,
+        label: item.key,
+        value: value.encryptedMessage,
+        value_nonce: value.nonce,
+        seed: item.seed,
       }
     })
   }
 
-  get accountMadeTransaction() {
-    return "b444b7ff3118cf2a30cbd54cfcdb8fd5d805017a"
-  }
-
   get keysArray() {
     return this._keysArray;
   }
 
   get passPhrase() {
-    return 'rocket north inform swift improve fringe sweet crew client canyon bean autumn'
+    if(sessionStorage.getItem('passPhrase')) {
+      this._passPhrase = sessionStorage.getItem('passPhrase')
+    }
+    return this._passPhrase
   }
 
   get accountData() {
@@ -209,7 +216,7 @@ class Store {
   }
 
   get address() {
-    return cryptography.bufferToHex(this.addressAndPubKey.address)
+    return this.addressAndPubKey.address.toString('hex')
   }
 
   get tokenKey() {

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: {