Merge branch 'DID-5'

Did 4

.gitignore

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

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

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import {observer} from "mobx-react-lite";
 import { Link } from 'react-router-dom';
 import Transition from '../utils/Transition';
-import {registrationStore} from "../store/registrationStore";
+import {registrationStore} from "../store/store";
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import UserAvatar from '../images/user-avatar-32.png';
 

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/Onboarding1.jsx

@@ -6,7 +6,7 @@ import OnboardingDecoration from '../images/auth-decoration.png';
 import Logo from "../images/logo.png";
 import {observer} from "mobx-react-lite";
 import {passphrase} from "@liskhq/lisk-client";
-import {registrationStore} from "../store/registrationStore";
+import {registrationStore} from "../store/store";
 
 const Onboarding1 = observer(()=>{
   let phrase = passphrase.Mnemonic.generateMnemonic()

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

@@ -2,15 +2,15 @@ import React, { useState} from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
-import {registrationStore} from "../store/registrationStore";
+import {registrationStore} from "../store/store";
 import { passphrase } from "@liskhq/lisk-client";
 
 function Onboarding3() {
-  const [passPhrase, setPassPhrase] = useState(registrationStore.passPhraseStore.replace(/\s+/g, ' ').split(' ').map((item, index) => ({str:item, id:index })))
+  const [passPhrase, setPassPhrase] = useState(registrationStore.passPhrase.replace(/\s+/g, ' ').split(' ').map((item, index) => ({str:item, id:index })))
   function generatePassPhrase() {
     let phrase = passphrase.Mnemonic.generateMnemonic()
     registrationStore.savePassPhrase(phrase)
-    let newPassPhrase = registrationStore.passPhraseStore.split(' ').map((item, index) => ({str:item, id:index }))
+    let newPassPhrase = registrationStore.passPhrase.split(' ').map((item, index) => ({str:item, id:index }))
     setPassPhrase(newPassPhrase)
   }
 

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)
 
     }
@@ -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">{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>

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);
@@ -17,6 +15,34 @@ function Profile () {
   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]);
     if (selectedItems.length > 0) {
@@ -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/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

@@ -1,12 +1,14 @@
+import {registrationStore} from '../store/store';
+
 function prepareUrl(url) {
   if (url.startsWith('http')) return url;
-  return `/api/${url}`;
+  return `http://3.125.47.101/api/${url}`;
 }
 
-function handleRequest(method, url, attempts, token, body) {
+function handleRequest(method, url, headers, attempts, token, body) {
   return new Promise((resolve, reject) => {
     (function internalRequest() {
-      return request(method, url, token, body)
+      return request(method, url, headers, token, body)
         .then(resolve)
         .catch(err => --attempts > 0 ? internalRequest() : reject(err))
     })()
@@ -17,17 +19,21 @@ function handleRequest(method, url, attempts, token, body) {
 
 /**
  * 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, token, body) {
+function request(method, url, headers = {}, token, body) {
   let controller = new AbortController;
   let requestOptions = {};
   if (method === 'GET' || method === 'DELETE'){
     requestOptions = {
       method: method,
       headers: {
-        Authorization: `Token ${token}`,
+        Authorization: `IDNTTY ${token}`,
+        ...headers
       },
       signal: controller.signal,
     }
@@ -36,9 +42,10 @@ function request(method, url, token, body) {
     requestOptions = {
       method: method,
       headers: {
-        Authorization: `Token ${token}`,
+        Authorization: `IDNTTY ${token}`,
         Accept: 'application/json',
         'Content-Type': 'application/json',
+        ...headers
       },
       body: JSON.stringify(body),
       signal: controller.signal,
@@ -48,39 +55,39 @@ function request(method, url, token, body) {
     requestOptions.headers.Authorization = null;
   }
   setTimeout(() => controller.abort(), 3000);
-  return fetch(url, requestOptions);
+  return fetch(prepareUrl(url), requestOptions);
 };
 
-function get(url, attempts = 1) {
+function get(url, headers, attempts = 1) {
-  return handleRequest('GET', url, attempts, null);
+  return handleRequest('GET', url, headers, attempts, null);
 }
 
-function getAuth(url, attempts = 1) {
+function getAuth(url, headers, attempts = 1) {
-  return handleRequest('GET', url, attempts, registrationStore.tokenKey);
+  return handleRequest('GET', url, headers, attempts, registrationStore.tokenKey);
 }
 
-function del(url, attempts = 1) {
+function del(url, headers, attempts = 1) {
-  return handleRequest('DELETE', url, attempts, null);
+  return handleRequest('DELETE', url, headers, attempts, null);
 }
 
-function delAuth(url, attempts = 1) {
+function delAuth(url, headers, attempts = 1) {
-  return handleRequest('DELETE', url, attempts, registrationStore.tokenKey);
+  return handleRequest('DELETE', url, headers, attempts, registrationStore.tokenKey);
 }
 
-function post(url, body, attempts = 1) {
+function post(url, headers, body, attempts = 1) {
-  return handleRequest('POST', url, attempts, null, body);
+  return handleRequest('POST', url, headers, attempts, null, body);
 }
 
-function postAuth(url, body, attempts = 1) {
+function postAuth(url, headers, body, attempts = 1) {
-  return handleRequest('POST', url, attempts, registrationStore.tokenKey, body);
+  return handleRequest('POST', url, headers, attempts, registrationStore.tokenKey, body);
 }
 
-function put(url, body, attempts = 1) {
+function put(url, headers, body, attempts = 1) {
-  return handleRequest('PUT', url, attempts, null, body);
+  return handleRequest('PUT', url, headers, attempts, null, body);
 }
 
-function putAuth(url, body, attempts = 1) {
+function putAuth(url, headers, body, attempts = 1) {
-  return handleRequest('PUT', url, attempts, registrationStore.tokenKey, body);
+  return handleRequest('PUT', url, headers, attempts, registrationStore.tokenKey, body);
 }
 
 export const fetchWrapper = {

src/store/registrationStore.js

@@ -1,41 +0,0 @@
-import { reaction, makeAutoObservable } from "mobx";
-import {cryptography} from "@liskhq/lisk-client";
-
-class RegistrationStore {
-  _accountData = {}
-
-  _passPhraseStore=''
-
-  _pubKey = ''
-
-  constructor() {
-    makeAutoObservable(this);
-    reaction(()=>this.passPhraseStore, ()=>this.savePubKey())
-  };
-
-  savePassPhrase(phrase) {
-    this._passPhraseStore = phrase
-  }
-
-  saveDataRegistration(data) {
-    this._accountData = data;
-  };
-  savePubKey() {
-    this._pubKey = cryptography.bufferToHex(cryptography.getAddressAndPublicKeyFromPassphrase(this.passPhraseStore).publicKey)
-  }
-
-  get passPhraseStore() {
-    return this._passPhraseStore
-  }
-
-  get accountData() {
-    return this._accountData
-  };
-
-  get pubKey() {
-    return this._pubKey
-  }
-
-};
-
-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();