Merge branch 'DID-5'

Did 4

.gitignore

@@ -1,2 +1,3 @@
 # dependencies
-/node_modules
+/node_modules
+.idea

package-lock.json

@@ -12580,6 +12580,25 @@
       "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==",
       "requires": {}
     },
+    "mobx": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.6.0.tgz",
+      "integrity": "sha512-MNTKevLH/6DShLZcmSL351+JgiJPO56A4GUpoiDQ3/yZ0mAtclNLdHK9q4BcQhibx8/JSDupfTpbX2NZPemlRg=="
+    },
+    "mobx-react": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.5.0.tgz",
+      "integrity": "sha512-riHu0XZJA6f64L1iXZoAaDjVt6suYoy8I2HIfuz2tX3O4FFaAe4lVA2CoObttmUQTTFPM7j3Df6T4re0cHkghQ==",
+      "requires": {
+        "mobx-react-lite": "^3.4.0"
+      }
+    },
+    "mobx-react-lite": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz",
+      "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==",
+      "requires": {}
+    },
     "moment": {
       "version": "2.29.3",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.3.tgz",

src/App.jsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import {
   Routes,
   Route,
-  useLocation
+  useLocation,
 } from 'react-router-dom';
 
 import './css/style.scss';

src/api/node.js

@@ -0,0 +1,3 @@
+import {fetchWrapper} from '../shared/fetchWrapper';
+
+export const getNodeInfo = (headers) => fetchWrapper.get('node/info/', headers)

src/components/DropdownProfile.jsx

@@ -1,12 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react';
+import {observer} from "mobx-react-lite";
 import { Link } from 'react-router-dom';
 import Transition from '../utils/Transition';
-
+import {registrationStore} from "../store/store";
+import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import UserAvatar from '../images/user-avatar-32.png';
 
-function DropdownProfile({
+ const DropdownProfile = observer(({
   align
-}) {
+})=>{
 
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
@@ -43,7 +45,7 @@ function DropdownProfile({
         onClick={() => setDropdownOpen(!dropdownOpen)}
         aria-expanded={dropdownOpen}
       >
-        <img className="w-8 h-8 rounded-full" src={localStorage.getItem('svgAvatar') || UserAvatar} width="32" height="32" alt="User" />
+        <img className="w-8 h-8 rounded-full" src={generateSvgAvatar(registrationStore.pubKey) || UserAvatar} width="32" height="32" alt="User" />
         <div className="flex items-center truncate">
           <span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">Acme Inc.</span>
           <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
@@ -95,6 +97,6 @@ function DropdownProfile({
       </Transition>
     </div>
   )
-}
+})
 
 export default DropdownProfile;

src/images/GenerateOnboardingSvg/GenerateSvg.js

@@ -35,13 +35,10 @@ function createBlob(options) {
     return path + "z";
 }
 
-export var generateSvgAvatar = (function () {
+export var generateSvgAvatar = ( function () {
-    return function (seed, raw) {
+    return function (publicKey, seed, raw) {
-        let pubKey = localStorage.getItem('svgKey') || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
+        let pubKey = publicKey || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
         //pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88"
-        if (!localStorage.getItem('svgKey')) {
-            localStorage.setItem('svgKey', `${pubKey}`)
-        }
         let particles = [];
         let gradients = ['#000000'];
         let defs = [];

src/main.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import {Buffer} from "buffer";
-import { BrowserRouter as Router } from 'react-router-dom'
+import { HashRouter as Router } from 'react-router-dom'
 import App from './App'
 
 globalThis.Buffer = Buffer

src/pages/Dashboard.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 
 import Sidebar from '../partials/Sidebar';
 import Header from '../partials/Header';
@@ -19,9 +19,6 @@ import DashboardCard10 from '../partials/dashboard/DashboardCard10';
 import DashboardCard11 from '../partials/dashboard/DashboardCard11';
 
 function Dashboard() {
-  useEffect(() => {
-    localStorage.setItem('svgKey', '')
-  }, [])
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (

src/pages/Onboarding1.jsx

@@ -1,11 +1,20 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { Link } from 'react-router-dom';
 
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
 import Logo from "../images/logo.png";
+import {observer} from "mobx-react-lite";
+import {passphrase} from "@liskhq/lisk-client";
+import {registrationStore} from "../store/store";
+
+const Onboarding1 = observer(()=>{
+  let phrase = passphrase.Mnemonic.generateMnemonic()
+  registrationStore.savePassPhrase(phrase)
+  useEffect(()=>{
+
+  },[])
 
-function Onboarding1() {
   return (
     <main className="bg-white">
 
@@ -127,6 +136,6 @@ function Onboarding1() {
 
     </main>
   );
-}
+})
 
 export default Onboarding1;

src/pages/Onboarding2.jsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import { Link } from 'react-router-dom';
 import { observer } from "mobx-react-lite";
-import { registrationStore } from "../store/registrationStore";
+import { registrationStore } from "../store/store";
 
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
@@ -11,9 +11,9 @@ const Onboarding2 = observer(()=>{
   const [dataRegistration, setDataRegistration] = useState(
       {
         first_name: '',
-        last_name: '',
+        second_name: '',
         gender: '',
-        date_birth: '',
+        birthdate: '',
       }
   )
   const [fillingForm, setFillingForm] = useState(false)
@@ -107,8 +107,8 @@ const Onboarding2 = observer(()=>{
                       <input id="first_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
                     </div>
                     <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="last_name">Last name <span className="text-rose-500">*</span></label>
+                      <label className="block text-sm font-medium mb-1" htmlFor="second_name">Last name <span className="text-rose-500">*</span></label>
-                      <input id="last_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
+                      <input id="second_name" 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>
@@ -119,8 +119,8 @@ const Onboarding2 = observer(()=>{
                       </select>
                     </div>
                     <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="date_birth">Date of birth <span className="text-rose-500">*</span></label>
+                      <label className="block text-sm font-medium mb-1" htmlFor="birthdate">Date of birth <span className="text-rose-500">*</span></label>
-                      <input id="date_birth" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" />
+                      <input 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">

src/pages/Onboarding3.jsx

@@ -1,23 +1,33 @@
-import React, {useEffect, useState} from 'react';
+import React, { useState} from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
+import {registrationStore} from "../store/store";
 import { passphrase } from "@liskhq/lisk-client";
 
 function Onboarding3() {
-
+  const [passPhrase, setPassPhrase] = useState(registrationStore.passPhrase.replace(/\s+/g, ' ').split(' ').map((item, index) => ({str:item, id:index })))
-  const [passPhrase, setPassPhrase] = useState('')
+  function generatePassPhrase() {
-
-  function getPassPhrase() {
     let phrase = passphrase.Mnemonic.generateMnemonic()
-    setPassPhrase(phrase)
+    registrationStore.savePassPhrase(phrase)
+    let newPassPhrase = registrationStore.passPhrase.split(' ').map((item, index) => ({str:item, id:index }))
+    setPassPhrase(newPassPhrase)
   }
 
-  useEffect(()=>{
+  function savePassPhraseInStore (copiedPhrase) {
-    return ()=>{
+    let phrasePaste = copiedPhrase.trim().replace(/\s+/g, ' ').split(' ')
-      localStorage.setItem('svgAvatar', generateSvgAvatar())
+    if(phrasePaste.length===12) {
+      registrationStore.savePassPhrase(copiedPhrase)
+      setPassPhrase(phrasePaste.map((item, index) => ({str:item, id:index })))
+    } else {
+      return false
     }
-  }, [])
+  }
+
+  function pastePassPhrase() {
+    navigator.clipboard.readText().then(res=>savePassPhraseInStore(res))
+  }
+
 
   return (
     <main className="bg-white">
@@ -73,21 +83,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.split(' ').map(tag => (
+                    {passPhrase.map(tag => (
-                      <button key={tag} 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">
+                      <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}</span>
+                        <span className="text-sm font-medium">{tag.str}</span>
                       </button>
                     ))}
                   </div>
                   <div className="flex pl-7 gap-x-5">
-                    <button 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={()=>getPassPhrase()} 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"/>
@@ -113,7 +123,7 @@ function Onboarding3() {
         {/* 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">
-            <img className="object-cover object-center" src={generateSvgAvatar()} width="493px" height="493px" alt="Onboarding" />
+            <img className="object-cover object-center" src={generateSvgAvatar(registrationStore.pubKey)} width="493px" height="493px" alt="Onboarding" />
             <span className="text-sm">Your generated Digital ID</span>
           </div>
         </div>

src/pages/Onboarding4.jsx

@@ -3,17 +3,18 @@ import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
 import {observer} from "mobx-react-lite";
-import { registrationStore } from "../store/registrationStore";
+import { registrationStore } from "../store/store";
 
 const Onboarding4 = observer(()=>{
 
   const [checkBoxesSelected, setCheckBoxesSelected] = useState(false)
 
-  function validateCheckBox () {
+  function createAccount () {
     let checkBoxes=[...document.getElementsByClassName("form-checkbox")]
     if(checkBoxes.find(item=>item.checked===false)) {
       return
     } else {
+      registrationStore.fetchCreateNewAccount()
       setCheckBoxesSelected(true)
 
     }
@@ -25,12 +26,6 @@ const Onboarding4 = observer(()=>{
     }
   },[checkBoxesSelected])
 
-  useEffect(()=>{
-    return ()=>{
-      localStorage.setItem('svgAvatar', generateSvgAvatar())
-    }
-  }, [])
-
   return (
     <main className="bg-white">
 
@@ -86,8 +81,8 @@ const Onboarding4 = observer(()=>{
                     <circle className="text-emerald-100" cx="32" cy="32" r="32" />
                     <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">{`Nice to meet you, ${registrationStore.accountData().first_name} 🙌`}</h1>
+                  <h1 className="text-3xl text-slate-800 font-bold mb-8">{registrationStore.accountData.first_name ? `Nice to meet you, ${registrationStore.accountData.first_name} 🙌` : 'Please, go back step 2'}</h1>
-                  <button onClick={()=>validateCheckBox()} 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 && "/dashboard"}>Go To Profile -&gt;</Link>
                   </button>
                 </div>
@@ -117,7 +112,7 @@ const Onboarding4 = observer(()=>{
         {/* 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">
-            <img className="object-cover object-center" src={generateSvgAvatar()} width="493px" height="493px" alt="Onboarding" />
+            <img className="object-cover object-center" src={generateSvgAvatar(registrationStore.pubKey)} width="493px" height="493px" alt="Onboarding" />
             <span className="text-sm">Your generated Digital ID</span>
           </div>
         </div>

src/pages/digitalId/ProfileId.jsx

@@ -1,14 +1,12 @@
 import React, { useState } from 'react';
+import { userDataStore } from '../../store/userDataStore';
 import Sidebar from '../../partials/Sidebar';
+import { observer } from 'mobx-react-lite';
 import Header from '../../partials/Header';
 import ProfileTable from '../../partials/digitalId/ProfileTable';
 import Image from '../../images/transactions-image-04.svg';
-import ProfileIcon from '../../images/profile-icon.svg';
-import Avatar01 from '../../images/avatar-01.jpg';
-import Avatar02 from '../../images/avatar-02.jpg';
-import Avatar03 from '../../images/avatar-03.jpg';
 
-function Profile () {
+const Profile = observer (() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [buttonPanelOpen, setButtonPanelOpen] = useState(true);
   const [removePanelOpen, setRemovePanelOpen] = useState(false);
@@ -16,6 +14,34 @@ function Profile () {
   const [toggle, setToggle] = useState(true);
   const [addPanelOpen, setAddPanelOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
+  
+  const defaultValues = {
+    property: '',
+    value: '',
+    seed: Math.floor(Math.random() * 90000000000000000000)
+  };
+
+  const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'Residence', 'Document type', 'Document ID', 'Issue date', 'Expiry date']; 
+  const [propertyValues, setPropertyValues] = useState([]);
+  const [currentValues, setCurrentValues] = useState(defaultValues);
+
+  const openHint = () => {
+    if (!currentValues.property) {
+      setPropertyValues(initialPropertyValues);
+    }
+  }
+
+  const changeCurrentValues = (value, field) => {
+    setCurrentValues((prevState)=> ({
+      ...prevState,
+      [field]: value.charAt(0).toUpperCase()+value.slice(1),
+    }))
+  }
+
+  const closeHint = (element) => {
+    changeCurrentValues(element, 'property');
+    setPropertyValues([]);
+  }
 
   const handleSelectedItems = (selectedItems) => {
     setSelectedItems([...selectedItems]);
@@ -39,7 +65,16 @@ function Profile () {
     setButtonPanelOpen(false);
   }
 
+  const sendValues = () => {
+    if (!userDataStore.decryptedData.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) {
+      setAddPanelOpen(false);
+      setButtonPanelOpen(true);
+      setCurrentValues(defaultValues);
+    }
+  }
+
   const cancelAddPanel = () => {
+    setCurrentValues(defaultValues);
     setAddPanelOpen(false);
     setButtonPanelOpen(true);
   }
@@ -54,140 +89,14 @@ function Profile () {
     setButtonPanelOpen(true);
   }
 
-  const userData = [
+  const handleInput = (text, field) => {
-    {
+    changeCurrentValues(text, field);
-      id: '0',
+    setPropertyValues(initialPropertyValues);
-      category: 'General',
+    if (text) {
-      validated: true,
+      let reg = new RegExp(`^${text}`, 'img');
-      blockchained: true,
+      setPropertyValues((prevState) => prevState.filter((element) => element.match(reg)));
-      image: ProfileIcon,
+    }
-      value: 'Dominik',
+  };
-      property: 'First name',
-      status: 'Completed',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    },
-    {
-      id: '1',
-      category: 'General',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'Lamakani',
-      property: 'Second name',
-      status: 'Progress',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '2',
-      category: 'General',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '05.10.1983',
-      property: 'Birthdate',
-      status: 'Incorrect',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '3',
-      category: 'General',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'Male',
-      property: 'Gender',
-      status: 'Stored',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '4',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'United Kindom',
-      property: 'Residence',
-      status: 'Completed',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    },
-    {
-      id: '5',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'Passport',
-      property: 'Document type',
-      status: 'Progress',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    },
-    {
-      id: '6',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'A123B3143',
-      property: 'Document ID',
-      status: 'Incorrect',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '7',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '05.10.2012',
-      property: 'Issue date',
-      status: 'Stored',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '8',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '05.10.2032',
-      property: 'Expiry date',
-      status: 'Stored',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '9',
-      category: 'Social',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '@lamakani',
-      property: 'Telegram',
-      status: 'Completed',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '10',
-      category: 'Social',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '@lamakani',
-      property: 'Telegram',
-      status: 'Progress',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    },
-  ]
 
   return (
     <div className="flex h-screen overflow-hidden">
@@ -222,7 +131,7 @@ function Profile () {
                   </ul>
                 </div>
                 {/* Table */}
-                <ProfileTable selectedItems={handleSelectedItems} userData={userData}/>
+                <ProfileTable selectedItems={handleSelectedItems} userData={userDataStore.decryptedData}/>
               </div>
               {/* Left sidebar */}
               <div>
@@ -246,22 +155,56 @@ function Profile () {
                     <div className="flex flex-col gap-y-3">
                       <div>
                         <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
-                        <input id="property" className="form-input w-full" type="text" required />
+                        <input
+                          autoComplete='off'
+                          id="property"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          onInput={(e) => handleInput(e.target.value, 'property')}
+                          value={currentValues.property}
+                          onClick={openHint}
+                        />
+                        <div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
+                          <ul>
+                            {propertyValues.map((element, index) => (
+                              <li key={index} onClick={() => closeHint(element)}>{element}</li>
+                            ))}
+                          </ul>
+                        </div>
                       </div>
                       <div>
                         <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
-                        <input id="value" className="form-input w-full" type="text" required />
+                        <input
+                          autoComplete='off'
+                          id="value"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          onClick={() => setPropertyValues([])}
+                          onChange={(e) => changeCurrentValues(e.target.value, 'value')}
+                          value={currentValues.value}
+                        />
                       </div>
                       <div>
                         <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
-                        <input id="seed" className="form-input w-full" type="text" required />
+                        <input
+                          autoComplete='off'
+                          id="seed"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          onClick={() => setPropertyValues([])}
+                          onChange={(e) => changeCurrentValues(e.target.value, 'seed')}
+                          value={currentValues.seed}
+                        />
                       </div>
                     </div>
                     <div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
                       <span className="block text-sm font-medium">Store data on blockchain</span>
                       <div className="flex items-center">
                         <div className="form-switch">
-                          <input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
+                          <input type="checkbox" id="blockcheined" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
                             <label className="bg-slate-400" htmlFor="switch-1">
                             <span className="bg-white shadow-sm" aria-hidden="true"></span>
                           </label>
@@ -278,7 +221,7 @@ function Profile () {
                       </button>
                       <button
                         className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
-                        onClick={cancelAddPanel}
+                        onClick={sendValues}
                       >
                         Send
                       </button>
@@ -288,8 +231,8 @@ function Profile () {
                   <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">
-                      {userData.filter(({ id }) => selectedItems.includes(id)).map(item => (
+                      {userDataStore.decryptedData.filter(({ label }) => selectedItems.includes(label)).map(item => (
-                        <span key={item.id} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.property}</span>
+                        <span key={item.label} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.label}</span>
                       ))}
                     </div>
                     <div className="flex flex-row justify-between pt-[16px] pb-7 items-center">
@@ -390,6 +333,6 @@ function Profile () {
       </div>
     </div>
   )
-}
+})
 
-export default Profile;
+export default Profile

src/pages/digitalId/Verify.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 
-function Verify () {
+const Verify = (() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [descriptionOpen, setDescriptionOpen] = useState(false);
 
@@ -165,6 +165,6 @@ function Verify () {
       </div>
     </div>
   )
-}
+})
 
-export default Verify;
+export default Verify;

src/partials/digitalId/ProfileTable.jsx

@@ -1,5 +1,6 @@
 import React, {useState, useEffect} from 'react';
 import ProfileTableItem from './ProfileTableItem';
+import ProfileIcon from '../../images/profile-icon.svg';
 
 function ProfileTable({
   selectedItems,
@@ -8,6 +9,13 @@ function ProfileTable({
 
   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
@@ -21,85 +29,123 @@ function ProfileTable({
     }
   };
 
+  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"],
+    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)),
+        nationalityData = userData.filter(elem => data.nationality.includes(elem.label)),
+        sosialData = userData.filter(elem => data.nationality.includes(elem.label)),
+        otherData = userData.filter((elem) => 
+          !data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label));
+
   return (
     <>
     {/* General */}
-      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">General 🖋️</h2>
+      <div className={`${generalData.length > 0 || 'hidden'}`}>
-      <div className="overflow-x-auto w-[828px]">
+        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">General 🖋️</h2>
-        <table className="w-[828px] table-auto w-full">
+        <div className="overflow-x-auto w-[828px]">
-          <tbody className="divide-slate-200 divide-y">
+          <table className="w-[828px] table-auto w-full">
-            {userData.filter(data => data.category === 'General')
+            <tbody className="divide-slate-200 divide-y">
-              .map(data => {
+              {generalData.map((data) => {
                 return (
                   <ProfileTableItem
-                    key={data.id}
+                    key={data.label}
-                    id={data.id}
+                    id={data.label}
-                    image={data.image}
+                    image={defaultData.image}
-                    value={data.value}
+                    value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
-                    property={data.property}
+                    property={data.label}
-                    status={data.status}
+                    status={defaultData.status}
-                    transactions={data.transactions}
+                    transactions={defaultData.transactions}
-                    avatars={data.avatars}
+                    avatars={defaultData.avatars}
                     handleClick={handleClick}
-                    isChecked={isCheck.includes(data.id)}
+                    isChecked={isCheck.includes(data.label)}
                   />
                 )
-              })
+              })}
-            }
+            </tbody>
-          </tbody>
+          </table>
-        </table>
+        </div>
       </div>
       {/* Nationality */}
-      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Nationality 🖋️</h2>
+      <div className={`${nationalityData.length > 0 || 'hidden'}`}>
-      <div className="overflow-x-auto w-[828px]">
+        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Nationality 🖋️</h2>
-        <table className="w-[828px] table-auto w-full">
+        <div className="overflow-x-auto w-[828px]">
-          <tbody className="text-sm divide-slate-200 divide-y ">
+          <table className="w-[828px] table-auto w-full">
-            {userData.filter(data => data.category === 'Nationality')
+            <tbody className="text-sm divide-slate-200 divide-y ">
-              .map(data => {
+              {nationalityData.map(data => {
                 return (
                   <ProfileTableItem
-                    key={data.id}
+                    key={data.label}
-                    id={data.id}
+                    id={data.label}
-                    image={data.image}
+                    image={defaultData.image}
-                    value={data.value}
+                    value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
-                    property={data.property}
+                    property={data.label}
-                    status={data.status}
+                    status={defaultData.status}
-                    transactions={data.transactions}
+                    transactions={defaultData.transactions}
-                    avatars={data.avatars}
+                    avatars={defaultData.avatars}
                     handleClick={handleClick}
-                    isChecked={isCheck.includes(data.id)}
+                    isChecked={isCheck.includes(data.label)}
                   />
                 )
-              })
+              })}
-            }
+            </tbody>
-          </tbody>
+          </table>
-        </table>
+        </div>
       </div>
       {/* Social */}
-      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Social 🖋️</h2>
+      <div className={`${sosialData.length > 0 || 'hidden'}`}>
-      <div className="overflow-x-auto w-[828px]">
+        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Social 🖋️</h2>
-        <table className="w-[828px] table-auto w-full">
+        <div className="overflow-x-auto w-[828px]">
-          <tbody className="text-sm divide-slate-200 divide-y ">
+          <table className="w-[828px] table-auto w-full">
-            {userData.filter(data => data.category === 'Social')
+            <tbody className="text-sm divide-slate-200 divide-y ">
-              .map(data => {
+            {sosialData.map(data => {
-                return (
+              return (
-                  <ProfileTableItem
+                <ProfileTableItem
-                    key={data.id}
+                  key={data.label}
-                    id={data.id}
+                  id={data.label}
-                    image={data.image}
+                  image={defaultData.image}
-                    value={data.value}
+                  value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
-                    property={data.property}
+                  property={data.label}
-                    status={data.status}
+                  status={defaultData.status}
-                    transactions={data.transactions}
+                  transactions={defaultData.transactions}
-                    avatars={data.avatars}
+                  avatars={defaultData.avatars}
-                    handleClick={handleClick}
+                  handleClick={handleClick}
-                    isChecked={isCheck.includes(data.id)}
+                  isChecked={isCheck.includes(data.label)}
-                  />
+                />
-                )
+              ) 
-              })
+            })}
-            }
+            </tbody>
-          </tbody>
+          </table>
-        </table>
+        </div>
+      </div>
+      {/* Other */}
+      <div className={`${otherData.length > 0 || 'hidden'}`}>
+        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Other 🖋️</h2>
+        <div className="overflow-x-auto w-[828px]">
+          <table className="w-[828px] table-auto w-full">
+            <tbody className="text-sm divide-slate-200 divide-y ">
+            {otherData.map(data => {
+              return (
+                <ProfileTableItem
+                  key={data.label}
+                  id={data.label}
+                  image={defaultData.image}
+                  value={data.value}
+                  property={data.label}
+                  status={defaultData.status}
+                  transactions={defaultData.transactions}
+                  avatars={defaultData.avatars}
+                  handleClick={handleClick}
+                  isChecked={isCheck.includes(data.label)}
+                />
+              )
+            })}
+            </tbody>
+          </table>
+        </div>
       </div>
     </>
   )

src/shared/fetchWrapper.js

@@ -0,0 +1,103 @@
+import {registrationStore} from '../store/store';
+
+function prepareUrl(url) {
+  if (url.startsWith('http')) return url;
+  return `http://3.125.47.101/api/${url}`;
+}
+
+function handleRequest(method, url, headers, attempts, token, body) {
+  return new Promise((resolve, reject) => {
+    (function internalRequest() {
+      return request(method, url, headers, token, body)
+        .then(resolve)
+        .catch(err => --attempts > 0 ? internalRequest() : reject(err))
+    })()
+  })
+    .then((res) => res.json())
+    .catch(() => [])
+};
+
+/**
+ * Request
+ * @param {string} method - method name
+ * @param {string} url - endpoint url.
+ * @param {string} token - auth token
+ * @param {object} body - request body.
+ * @param {object} headers - request headers
+ */
+function request(method, url, headers = {}, token, body) {
+  let controller = new AbortController;
+  let requestOptions = {};
+  if (method === 'GET' || method === 'DELETE'){
+    requestOptions = {
+      method: method,
+      headers: {
+        Authorization: `IDNTTY ${token}`,
+        ...headers
+      },
+      signal: controller.signal,
+    }
+  };
+  if (method === 'POST' || method === 'PUT'){
+    requestOptions = {
+      method: method,
+      headers: {
+        Authorization: `IDNTTY ${token}`,
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        ...headers
+      },
+      body: JSON.stringify(body),
+      signal: controller.signal,
+    }
+  };
+  if (!token) {
+    requestOptions.headers.Authorization = null;
+  }
+  setTimeout(() => controller.abort(), 3000);
+  return fetch(prepareUrl(url), requestOptions);
+};
+
+function get(url, headers, attempts = 1) {
+  return handleRequest('GET', url, headers, attempts, null);
+}
+
+function getAuth(url, headers, attempts = 1) {
+  return handleRequest('GET', url, headers, attempts, registrationStore.tokenKey);
+}
+
+function del(url, headers, attempts = 1) {
+  return handleRequest('DELETE', url, headers, attempts, null);
+}
+
+function delAuth(url, headers, attempts = 1) {
+  return handleRequest('DELETE', url, headers, attempts, registrationStore.tokenKey);
+}
+
+function post(url, headers, body, attempts = 1) {
+  return handleRequest('POST', url, headers, attempts, null, body);
+}
+
+function postAuth(url, headers, body, attempts = 1) {
+  return handleRequest('POST', url, headers, attempts, registrationStore.tokenKey, body);
+}
+
+function put(url, headers, body, attempts = 1) {
+  return handleRequest('PUT', url, headers, attempts, null, body);
+}
+
+function putAuth(url, headers, body, attempts = 1) {
+  return handleRequest('PUT', url, headers, attempts, registrationStore.tokenKey, body);
+}
+
+export const fetchWrapper = {
+  get,
+  del,
+  post,
+  put,
+  getAuth,
+  delAuth,
+  postAuth,
+  putAuth,
+  baseUrl: ''
+};

src/store/registrationStore.js

@@ -1,22 +0,0 @@
-import { reaction, makeAutoObservable } from "mobx";
-
-class RegistrationStore {
-  _accountData = {};
-
-  constructor() {
-    makeAutoObservable(this);
-    reaction(() => this.accountData, () => this.saveDataRegistration())
-  };
-
-  saveDataRegistration(data) {
-    this._accountData = data;
-  };
-
-  accountData() {
-    return this._accountData
-  };
-
-};
-
-
-export const registrationStore = new RegistrationStore();

src/store/store.js

@@ -0,0 +1,108 @@
+import { reaction, makeAutoObservable } from "mobx";
+import {cryptography} from "@liskhq/lisk-client";
+import {getNodeInfo} from '../api/node';
+import {fetchWrapper} from '../shared/fetchWrapper';
+
+class Store {
+  _accountData = {}
+
+  _passPhrase='rocket north inform swift improve fringe sweet crew client canyon bean autumn'
+
+  _nodeInfo = {}
+
+  _userData = {}
+
+  constructor() {
+    makeAutoObservable(this);
+
+    this.fetchNodeInfo()
+
+    reaction(() => this.tokenKey, () => fetchWrapper.getAuth('http://3.125.47.101/api/data/account', {
+      networkIdentifier: this.nodeInfo.networkIdentifier,
+      lastBlockID: this.nodeInfo.lastBlockID
+    }).then((res) => this.userDataFetchChange(res)))
+  };
+
+  fetchCreateNewAccount() {
+    fetchWrapper.postAuth('http://3.125.47.101/api/data/account', {
+      networkIdentifier: this.nodeInfo.networkIdentifier,
+      lastBlockID: this.nodeInfo.lastBlockID
+    }, [...this.encryptAccountData]).catch(()=>{})
+  };
+
+  userDataFetchChange(res) {
+    this._userData = res;
+  }
+
+  savePassPhrase(phrase) {
+    this._passPhrase = phrase
+  }
+
+  saveDataRegistration(data) {
+    this._accountData = data;
+  };
+
+  fetchNodeInfo() {
+    getNodeInfo()
+      .then((info) => this.fetchNodeInfoSuccess(info))
+      .catch((err) => this.fetchNodeInfoFailed(err))
+  }
+
+  fetchNodeInfoSuccess(info) {
+    this._nodeInfo = info.data;
+  }
+
+  fetchNodeInfoFailed(err) {
+    console.log(err)
+  }
+
+  get userData() {
+    return this._userData;
+  }
+
+  get passPhrase() {
+    return 'rocket north inform swift improve fringe sweet crew client canyon bean autumn'
+  }
+
+  get accountData() {
+    return this._accountData
+  };
+
+  get encryptAccountData() {
+    return Object.keys(this.accountData).map((label) => {
+      let value = cryptography.encryptMessageWithPassphrase(cryptography.getRandomBytes(32).toString('hex') + ":" + this.accountData[label], this.passPhrase, this.pubKey);
+      return {
+        "label": label,
+        "value": value.encryptedMessage,
+        "value_nonce": value.nonce,
+      }
+    })
+  }
+
+  get nodeInfo() {
+    return this._nodeInfo;
+  }
+
+  get addressAndPubKey() {
+    return cryptography.getAddressAndPublicKeyFromPassphrase(this.passPhrase);
+  }
+
+  get pubKey() {
+    return this.addressAndPubKey.publicKey.toString('hex');
+  }
+
+  get address() {
+    return cryptography.bufferToHex(this.addressAndPubKey.address)
+  }
+
+  get tokenKey() {
+    const stringToSign = this.nodeInfo.networkIdentifier + this.nodeInfo.lastBlockID;
+    if(!stringToSign)
+      return '';
+    const sign = cryptography.signDataWithPassphrase(Buffer.from(stringToSign, 'hex'), this.passPhrase).toString('hex')
+    return this.pubKey + ':' +sign
+  }
+
+};
+
+export const registrationStore = new Store();

src/store/userDataStore.js

@@ -0,0 +1,53 @@
+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,
+      label: labelMap[elem.label],
+      value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
+    }))
+  }
+}
+
+export const userDataStore = new UserDataStore();