Добавлен адресс аккаунта совершившего транзакцию

Refactoring method saveDataRegistration in store

Dockerfile

@@ -0,0 +1,15 @@
+FROM  node:16-alpine AS builder
+
+WORKDIR /front
+
+COPY . .
+
+RUN npm install
+RUN npm run build
+
+FROM nginx:1.21.6-alpine as runner
+
+COPY ./deploy/nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /front/build /var/www/html
+
+EXPOSE 8080

deploy/nginx.conf

@@ -0,0 +1,33 @@
+worker_processes  1;
+error_log /var/log/nginx/error.log warn;
+pid       /var/run/nginx.pid;
+events {
+    worker_connections 1024;
+}
+http {
+    include      mime.types;
+    default_type application/octet-stream;
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+    access_log /var/log/nginx/access.log main;
+    sendfile on;
+    keepalive_timeout 65;
+    gzip_static   on;
+    server {
+        listen      8080;
+        server_name localhost;
+        charset utf-8;
+        location / {
+            root /var/www/html;
+            try_files $uri /index.html;
+            etag on;
+            expires max;
+            add_header Cache-Control public;
+            location = /index.html {
+                expires 0;
+                add_header Cache-Control "no-cache, public, must-revalidate, proxy-revalidate";
+            }
+        }
+    }
+}

src/pages/Onboarding1.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import OnboardingImage from '../images/onboarding-image.jpg';
@@ -11,9 +11,6 @@ import {registrationStore} from "../store/store";
 const Onboarding1 = observer(()=>{
   let phrase = passphrase.Mnemonic.generateMnemonic()
   registrationStore.savePassPhrase(phrase)
-  useEffect(()=>{
-
-  },[])
 
   return (
     <main className="bg-white">

src/pages/Onboarding2.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import { Link } from 'react-router-dom';
 import { observer } from "mobx-react-lite";
 import { registrationStore } from "../store/store";
@@ -24,31 +24,22 @@ const Onboarding2 = observer(()=>{
       ...dataRegistration,
       [event.target.id]: newValue
     })
+    if(!Object.keys(dataRegistration).find(item=>!dataRegistration[item])) {
+      setFillingForm(true)
+    }
   }
 
   const saveStoreRegistration = ()=>{
-    Object.keys(dataRegistration).forEach(item=>{
+    if(fillingForm) {
-      let element=document.getElementById(item)
+      registrationStore.saveDataRegistration(Object.keys(dataRegistration).map(item=>{
-      if(dataRegistration[item]) {
+        return{
-        element.style.borderColor=""
+          key: `${item}`,
-      } else {
+          value: dataRegistration[item]
-        element.style.borderColor="red"
+        }
-      }
+      }))
-    })
-    if(Object.keys(dataRegistration).find(item=>!dataRegistration[item])) {
-      return
-    } else {
-      setFillingForm(true)
     }
-    registrationStore.saveDataRegistration(dataRegistration)
   }
 
-  useEffect(()=>{
-    if(fillingForm===true) {
-      document.getElementById("signup").click()
-    }
-  },[fillingForm])
-
   return (
     <main className="bg-white">
 

src/pages/Onboarding3.jsx

@@ -6,19 +6,18 @@ 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(convertPhraseToArray(registrationStore.passPhrase))
   function generatePassPhrase() {
     let phrase = passphrase.Mnemonic.generateMnemonic()
     registrationStore.savePassPhrase(phrase)
-    let newPassPhrase = registrationStore.passPhrase.split(' ').map((item, index) => ({str:item, id:index }))
+    setPassPhrase(convertPhraseToArray(registrationStore.passPhrase))
-    setPassPhrase(newPassPhrase)
   }
 
   function savePassPhraseInStore (copiedPhrase) {
-    let phrasePaste = copiedPhrase.trim().replace(/\s+/g, ' ').split(' ')
+    let phrasePaste = convertPhraseToArray(copiedPhrase.trim())
     if(phrasePaste.length===12) {
-      registrationStore.savePassPhrase(copiedPhrase)
+      registrationStore.savePassPhrase(copiedPhrase.trim())
-      setPassPhrase(phrasePaste.map((item, index) => ({str:item, id:index })))
+      setPassPhrase(phrasePaste)
     } else {
       return false
     }
@@ -28,6 +27,10 @@ function Onboarding3() {
     navigator.clipboard.readText().then(res=>savePassPhraseInStore(res))
   }
 
+  function convertPhraseToArray(phrase) {
+    return phrase.split(' ').map((item, index) => ({str:item, id:index }))
+  }
+
 
   return (
     <main className="bg-white">

src/pages/Onboarding4.jsx

@@ -1,4 +1,4 @@
-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";
@@ -7,24 +7,23 @@ import { registrationStore } from "../store/store";
 
 const Onboarding4 = observer(()=>{
 
-  const [checkBoxesSelected, setCheckBoxesSelected] = useState(false)
+  const [checkBoxesSelected, setCheckBoxesSelected] = useState([])
 
   function createAccount () {
-    let checkBoxes=[...document.getElementsByClassName("form-checkbox")]
+    if(checkBoxesSelected.length===2) {
-    if(checkBoxes.find(item=>item.checked===false)) {
+      registrationStore.pushAccountData()
-      return
-    } else {
-      registrationStore.fetchCreateNewAccount()
-      setCheckBoxesSelected(true)
-
     }
   }
 
-  useEffect(()=>{
+  function saveCheckBoxesValues(e) {
-    if(checkBoxesSelected===true) {
+    const { id, checked } = e.target
-      document.getElementById("link-dashboard").click()
+    setCheckBoxesSelected([...checkBoxesSelected, id])
+    if (!checked) {
+      setCheckBoxesSelected(checkBoxesSelected.filter(item=>item!==id))
     }
-  },[checkBoxesSelected])
+  }
+
+  const firstNameAccount = registrationStore.accountData.length && registrationStore.accountData.find(item=>item.key==="first_name").value
 
   return (
     <main className="bg-white">
@@ -81,20 +80,20 @@ 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">{registrationStore.accountData.first_name ? `Nice to meet you, ${registrationStore.accountData.first_name} 🙌` : 'Please, go back step 2'}</h1>
+                  <h1 className="text-3xl text-slate-800 font-bold mb-8">{firstNameAccount ? `Nice to meet you, ${firstNameAccount} 🙌` : 'Please, go back step 2'}</h1>
                   <button onClick={()=>createAccount()} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
-                    <Link id="link-dashboard" to={checkBoxesSelected && "/dashboard"}>Go To Profile -&gt;</Link>
+                    <Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/dashboard"}>Go To Profile -&gt;</Link>
                   </button>
                 </div>
 
                 <div className="flex items-center justify-between">
                   <div className="mr-1">
                     <label className="flex items-center">
-                      <input type="checkbox" className="form-checkbox" />
+                      <input id="checkbox-1" onChange={(e)=>saveCheckBoxesValues(e)} type="checkbox" className="form-checkbox" />
                       <span className="text-sm ml-2">I understand that Idntty cannot recover pass phrase</span>
                     </label>
                     <label className="flex items-center">
-                      <input type="checkbox" className="form-checkbox" />
+                      <input id="checkbox-2" onChange={(e)=>saveCheckBoxesValues(e)} type="checkbox" className="form-checkbox" />
                       <div className="text-sm ml-2">
                         I <Link className="text-indigo-500 hover:text-indigo-600 underline" to="/">store my pharse</Link> very carefuly
                       </div>

src/pages/digitalId/ProfileId.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { userDataStore } from '../../store/userDataStore';
+import { registrationStore } from "../../store/store";
 import Sidebar from '../../partials/Sidebar';
 import { observer } from 'mobx-react-lite';
 import Header from '../../partials/Header';
@@ -13,48 +14,76 @@ const Profile = observer (() => {
   const [changePanelOpen, setChangePanelOpen] = useState(false);
   const [toggle, setToggle] = useState(true);
   const [addPanelOpen, setAddPanelOpen] = useState(false);
+  const [updatePanelOpen, setUpdatePanelOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
   
   const defaultValues = {
-    property: '',
+    label: '',
     value: '',
-    seed: Math.floor(Math.random() * 90000000000000000000)
+    seed: Math.floor(Math.random() * 90000000000000000000) 
   };
 
-  const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'Residence', 'Document type', 'Document ID', 'Issue date', 'Expiry date']; 
+  const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc id', 'National doc issue date', 'National doc expiry date'];
   const [propertyValues, setPropertyValues] = useState([]);
-  const [currentValues, setCurrentValues] = useState(defaultValues);
+  const [updatedValues, setUpdatedValues] = useState([defaultValues]);
+  const [addedValues, setAddedValues] = useState(defaultValues);
 
   const openHint = () => {
-    if (!currentValues.property) {
+    if (!addedValues.label) {
       setPropertyValues(initialPropertyValues);
     }
   }
 
-  const changeCurrentValues = (value, field) => {
+  const changeAddedValues = (value, field) => {
-    setCurrentValues((prevState)=> ({
+    setAddedValues((prevState) => (
+      field !== 'seed' ? {
       ...prevState,
-      [field]: value.charAt(0).toUpperCase()+value.slice(1),
+      [field]: value
+    } : {
+      ...prevState,
+      [field]: +value,
     }))
-  }
+  };
+
+  const changeUpdatedValues = (value, field, key) => {
+    setUpdatedValues((prevState) => 
+      prevState.map((elem) => (
+        (elem.key === key && field !== 'seed') ? {
+          ...elem,
+          [field]: value,
+        } : 
+        (elem.key === key) ? {
+          ...elem,
+          [field]: +value,
+        } : elem
+      ))
+    )
+  };
 
   const closeHint = (element) => {
-    changeCurrentValues(element, 'property');
+    changeAddedValues(element, 'label');
     setPropertyValues([]);
   }
 
   const handleSelectedItems = (selectedItems) => {
     setSelectedItems([...selectedItems]);
+    setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key))
+      .map(elem => (
+        (!elem.seed) ? {
+        ...elem,
+        seed: Math.floor(Math.random() * 90000000000000000000)
+      }: elem)));
     if (selectedItems.length > 0) {
       setButtonPanelOpen(false);
       setAddPanelOpen(false);
       setChangePanelOpen(true);
     }
-    if (removePanelOpen === true) {
+    if (removePanelOpen === true || updatePanelOpen === true) {
       setChangePanelOpen(false);
     }
     if (selectedItems.length === 0) {
       setRemovePanelOpen(false);
+      setUpdatePanelOpen(false);
       setButtonPanelOpen(true);
       setChangePanelOpen(false);
     }
@@ -65,32 +94,84 @@ const Profile = observer (() => {
     setButtonPanelOpen(false);
   }
 
-  const sendValues = () => {
+  const sendAddedData = () => {
-    if (!userDataStore.decryptedData.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) {
+    if (!userDataStore.decryptedData.some((element) => element.label === addedValues.label) && (addedValues.seed.toString().length === 20)) {
       setAddPanelOpen(false);
       setButtonPanelOpen(true);
-      setCurrentValues(defaultValues);
+      setAddedValues(defaultValues);
+      addDataParameters();
     }
   }
 
+  const sendUpdatedData = () => {
+    setUpdatePanelOpen(false);
+    changeDataParameters();
+    setChangePanelOpen(true);
+  }
+
+  const deleteDataParameters = () => {
+    const changeData = userDataStore.decryptedData.filter(item=>!selectedItems.includes(item.key))
+    registrationStore.pushAccountData(changeData);
+  }
+
+  const changeInitialArray = () => {
+    let newArr = [];
+    userDataStore.decryptedData.map(elem => {
+      updatedValues.forEach(item => {
+        if (elem.label === item.label) {
+          newArr.push({
+            ...elem,
+            'value': item.value, 
+            'seed': item.seed,
+          })
+        }
+      })
+      if (!newArr.find(element => element.label === elem.label)) {
+        newArr.push(elem);
+      }
+    })
+    return newArr;
+  }
+
+  const changeDataParameters = () => {
+    const updatedData = changeInitialArray();
+    registrationStore.pushAccountData(updatedData);
+  }
+
+  const addDataParameters = () => {
+    addedValues.key = addedValues.label.toLowerCase().split(' ').join('_');
+    registrationStore.pushAccountData(userDataStore.decryptedData.concat(addedValues));
+  }
+
   const cancelAddPanel = () => {
-    setCurrentValues(defaultValues);
+    setAddedValues(defaultValues);
     setAddPanelOpen(false);
     setButtonPanelOpen(true);
   }
 
+  const cancelUpdatePanel = () => {
+    setUpdatePanelOpen(false);
+    setChangePanelOpen(true);
+  }
+
   const openRemovePanel = () => {
     setRemovePanelOpen(true);
     setChangePanelOpen(false);
   }
 
-  const applyRemovePanel = () => {
+  const openUpdatePanel = () => {
+    setUpdatePanelOpen(true);
+    setChangePanelOpen(false);
+  }
+
+  const applyDataDeletion = () => {
     setRemovePanelOpen(false);
     setButtonPanelOpen(true);
+    deleteDataParameters()
   }
 
   const handleInput = (text, field) => {
-    changeCurrentValues(text, field);
+    changeAddedValues(text, field);
     setPropertyValues(initialPropertyValues);
     if (text) {
       let reg = new RegExp(`^${text}`, 'img');
@@ -157,12 +238,12 @@ const Profile = observer (() => {
                         <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
                         <input
                           autoComplete='off'
-                          id="property"
+                          id="label"
                           className="form-input w-full"
                           type="text"
                           required
-                          onInput={(e) => handleInput(e.target.value, 'property')}
+                          onInput={(e) => handleInput(e.target.value, 'label')}
-                          value={currentValues.property}
+                          value={addedValues.label}
                           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'}`}>
@@ -182,8 +263,8 @@ const Profile = observer (() => {
                           type="text"
                           required
                           onClick={() => setPropertyValues([])}
-                          onChange={(e) => changeCurrentValues(e.target.value, 'value')}
+                          onChange={(e) => changeAddedValues(e.target.value, 'value')}
-                          value={currentValues.value}
+                          value={addedValues.value}
                         />
                       </div>
                       <div>
@@ -192,11 +273,11 @@ const Profile = observer (() => {
                           autoComplete='off'
                           id="seed"
                           className="form-input w-full"
-                          type="text"
+                          type="number"
                           required
                           onClick={() => setPropertyValues([])}
-                          onChange={(e) => changeCurrentValues(e.target.value, 'seed')}
+                          onChange={(e) => changeAddedValues(e.target.value, 'seed')}
-                          value={currentValues.seed}
+                          value={addedValues.seed}
                         />
                       </div>
                     </div>
@@ -221,7 +302,79 @@ const Profile = observer (() => {
                       </button>
                       <button
                         className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
-                        onClick={sendValues}
+                        onClick={sendAddedData}
+                      >
+                        Send
+                      </button>
+                    </div>
+                  </div>
+                  {/* Update panel */}
+                  <div className={`${!updatePanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
+                    {updatedValues.map((item, index) => ( 
+                      <div key={index} 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={`${item.key}:label`}
+                            className="form-input w-full"
+                            type="text"
+                            required
+                            onChange={(e) => changeUpdatedValues(e.target.value, 'label', item.key)}
+                            value={item.label}
+                            disabled='disabled'
+                          />
+                        </div>
+                        <div>
+                          <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
+                          <input
+                            autoComplete='off'
+                            id={`${item.key}:value`}
+                            className="form-input w-full"
+                            type="text"
+                            required
+                            onChange={(e) => changeUpdatedValues(e.target.value, 'value', item.key)}
+                            value={item.value}
+                          />
+                        </div>
+                        <div>
+                          <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
+                          <input
+                            autoComplete='off'
+                            id={`${item.key}:seed`}
+                            className="form-input w-full"
+                            type="number"
+                            required
+                            onChange={(e) => changeUpdatedValues(e.target.value, 'seed', item.key)}
+                            value={item.seed}
+                          />
+                        </div>
+                        {(updatedValues[index+1]) ? (
+                        <div className="mt-2 mb-3.5 items-center border-b border-slate-200"></div>
+                        ) : null}
+                      </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="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>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Buttons */}
+                    <div className="flex flex-row justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
+                      <button
+                        className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
+                        onClick={cancelUpdatePanel}
+                      >
+                        Cansel
+                      </button>
+                      <button
+                        className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
+                        onClick={sendUpdatedData}
                       >
                         Send
                       </button>
@@ -231,7 +384,7 @@ const Profile = observer (() => {
                   <div className={`${!removePanelOpen && 'hidden'} bg-white px-5 pt-4 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}>
                     <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2">Summary</h2>
                     <div className="flex flex-col">
-                      {userDataStore.decryptedData.filter(({ label }) => selectedItems.includes(label)).map(item => (
+                      {userDataStore.decryptedData.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>
@@ -249,7 +402,7 @@ const Profile = observer (() => {
                     <div className="flex flex-row justify-end gap-x-2 pt-[20px] pb-[16px] items-end">
                       <button
                         className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
-                        onClick={applyRemovePanel}
+                        onClick={applyDataDeletion}
                         >
                         <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                           <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
@@ -312,7 +465,10 @@ const Profile = observer (() => {
                       </svg>
                       <span className="ml-2">Remove</span>
                     </button>
-                    <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
+                    <button
+                      className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start"
+                      onClick={openUpdatePanel}
+                      >
                       <svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
                         <path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
                       </svg>
@@ -335,4 +491,4 @@ const Profile = observer (() => {
   )
 })
 
-export default Profile
+export default Profile

src/pages/digitalId/Validate.jsx

@@ -1,70 +1,18 @@
 import React, { useState } from 'react';
+import {observer} from "mobx-react-lite";
 
+import {transactionsStore} from "../../store/transactionsStore";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ValidateTable from "../../partials/validate/ValidateTable";
 import ValidatePanel from "../../partials/validate/ValidatePanel";
 import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
 import {Link} from "react-router-dom";
-import User06 from "../../images/user-28-06.jpg";
-import User08 from "../../images/user-28-08.jpg";
-import User09 from "../../images/user-28-09.jpg";
-import User05 from "../../images/user-28-05.jpg";
 
-function Validate () {
+const Validate = observer(()=>{
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [validatePanelOpen, setValidatePanelOpen] = useState(true);
 
-  const validateItems = [
-    {
-      id: '40',
-      name: 'Today',
-      data: '7234ABC342342352345',
-      usersImges: [
-        {
-          size: 24,
-          img: User06,
-          imgId: "343"
-        },
-        {
-          size: 24,
-          img: User08,
-          imgId: "345"
-        },
-        {
-          size: 24,
-          img: User09,
-          imgId: "321"
-        },
-        {
-          size: 24,
-          img: User05,
-          imgId: "387"
-        },
-      ],
-      items: [
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '555',
-          text: 'Second name for',
-          checked: true
-        },
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '534',
-          text: 'Gender name for',
-          checked: true
-        },
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '567',
-          text: 'Document ID name for',
-          checked: true
-        },
-      ]
-    },
-  ];
-
   return (
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
@@ -110,7 +58,7 @@ function Validate () {
               <div className="pb-8 border-b border-zinc-200 mt-[50px]">
                 <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID validation log ✨</h1>
               </div>
-              {validateItems.map(item => {
+              {transactionsStore.transactionsData.map(item => {
                 return <ValidateRoadMap season={item} key={item.id}/>
               })}
             </div>
@@ -120,6 +68,6 @@ function Validate () {
       </div>
     </div>
   )
-}
+})
 
 export default Validate;

src/pages/digitalId/ValidationLog.jsx

@@ -1,115 +1,14 @@
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 
 import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
+import {transactionsStore} from "../../store/transactionsStore";
+import {observer} from "mobx-react-lite";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
-import User05 from "../../images/user-28-05.jpg";
-import User08 from "../../images/user-28-08.jpg";
-import User09 from "../../images/user-28-09.jpg";
-import User06 from "../../images/user-28-06.jpg";
-import User03 from "../../images/user-28-03.jpg";
-import User01 from "../../images/user-28-01.jpg";
 
-function ValidationLog () {
+const ValidationLog = observer(()=>{
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
-  const logItems = [
-    {
-      id: '20',
-      name: 'Today',
-      data: '7234ABC342342352345',
-      usersImges: [
-        {
-          size: 24,
-          img: User06,
-          imgId: "249"
-        },
-        {
-          size: 24,
-          img: User08,
-          imgId: "212"
-        },
-        {
-          size: 24,
-          img: User09,
-          imgId: "217"
-        },
-        {
-          size: 24,
-          img: User05,
-          imgId: "276"
-        },
-      ],
-      items: [
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '434',
-          text: 'Second name',
-          checked: true
-        },
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '476',
-          text: 'First name by',
-          checked: true
-        },
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '422',
-          text: 'Document name by',
-          checked: true
-        },
-      ]
-    },
-    {
-      id: '30',
-      name: 'Last Week',
-      data: '7234ABC342342352345',
-      usersImges: [
-        {
-          size: 24,
-          img: User06,
-          imgId: "145"
-        },
-        {
-          size: 24,
-          img: User08,
-          imgId: "182"
-        },
-        {
-          size: 24,
-          img: User09,
-          imgId: "154"
-        },
-        {
-          size: 24,
-          img: User05,
-          imgId: "114"
-        },
-      ],
-      items: [
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '654',
-          text: 'Gender name by',
-          checked: true
-        },
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '617',
-          text: 'Second name Updated',
-          checked: false
-        },
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '643',
-          text: 'Gender name by',
-          checked: true
-        },
-      ]
-    },
-  ]
-
   return (
       <div className="flex h-screen overflow-hidden">
         {/* Sidebar */}
@@ -129,61 +28,9 @@ function ValidationLog () {
               <div className="max-w-3xl m-auto mt-6">
                 <div className="xl:-translate-x-16 max-w-fit">
                   {/* PostsID */}
-                  {logItems.map(item => {
+                  {transactionsStore.transactionsData.map(item=>{
-                    return <ValidateRoadMap season={item} key={item.id} />
+                    return <ValidateRoadMap season={item} key={item.id}/>
                   })}
-                  {/* Post */}
-                  <article className="pt-3">
-                    <div className="xl:flex">
-                      <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">Even earlier</h2>
-                      </div>
-                      <div className="grow pb-6 border-b border-slate-200">
-                        <header>
-                          <div className="flex flex-nowrap items-center space-x-2 mb-6">
-                            {/* Avatars */}
-                            <div className="flex shrink-0 -space-x-3 -ml-px">
-                              <a className="block" href="#0">
-                                <img className="rounded-full border-2 border-white box-content" src={User03} width="28" height="28" alt="User 03" />
-                              </a>
-                              <a className="block" href="#0">
-                                <img className="rounded-full border-2 border-white box-content" src={User01} width="28" height="28" alt="User 01" />
-                              </a>
-                            </div>
-                            <div className="text-slate-400">·</div>
-                          </div>
-                        </header>
-                        {/* List */}
-                        <ul className="-my-2">
-                          {/* List item */}
-                          <li className="relative py-2">
-                            <div className="flex items-center mb-1">
-                              <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-white" aria-hidden="true">
-                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
-                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
-                                </svg>
-                              </div>
-                              <h3 className="text-lg font-bold text-slate-800 pl-9">Product V1 - Early Access</h3>
-                            </div>
-                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
-                          </li>
-                          {/* List item */}
-                          <li className="relative py-2">
-                            <div className="flex items-center mb-1">
-                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
-                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
-                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
-                                </svg>
-                              </div>
-                              <h3 className="text-lg font-bold text-slate-800 pl-9">Web3 Compatibility</h3>
-                            </div>
-                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </article>
                 </div>
               </div>
             </div>
@@ -191,6 +38,6 @@ function ValidationLog () {
         </div>
       </div>
   )
-}
+})
 
 export default ValidationLog;

src/partials/digitalId/ProfileTable.jsx

@@ -31,14 +31,14 @@ 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"],
+    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)),
+        sosialData = userData.filter(elem => data.social.includes(elem.label)),
-        otherData = userData.filter((elem) => 
+        otherData = userData.filter((elem) =>
           !data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label));
 
   return (
@@ -53,7 +53,7 @@ function ProfileTable({
                 return (
                   <ProfileTableItem
                     key={data.label}
-                    id={data.label}
+                    id={data.key}
                     image={defaultData.image}
                     value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
                     property={data.label}
@@ -61,7 +61,7 @@ function ProfileTable({
                     transactions={defaultData.transactions}
                     avatars={defaultData.avatars}
                     handleClick={handleClick}
-                    isChecked={isCheck.includes(data.label)}
+                    isChecked={isCheck.includes(data.key)}
                   />
                 )
               })}
@@ -79,7 +79,7 @@ function ProfileTable({
                 return (
                   <ProfileTableItem
                     key={data.label}
-                    id={data.label}
+                    id={data.key}
                     image={defaultData.image}
                     value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
                     property={data.label}
@@ -87,7 +87,7 @@ function ProfileTable({
                     transactions={defaultData.transactions}
                     avatars={defaultData.avatars}
                     handleClick={handleClick}
-                    isChecked={isCheck.includes(data.label)}
+                    isChecked={isCheck.includes(data.key)}
                   />
                 )
               })}
@@ -105,7 +105,7 @@ function ProfileTable({
               return (
                 <ProfileTableItem
                   key={data.label}
-                  id={data.label}
+                  id={data.key}
                   image={defaultData.image}
                   value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
                   property={data.label}
@@ -113,9 +113,9 @@ function ProfileTable({
                   transactions={defaultData.transactions}
                   avatars={defaultData.avatars}
                   handleClick={handleClick}
-                  isChecked={isCheck.includes(data.label)}
+                  isChecked={isCheck.includes(data.key)}
                 />
-              ) 
+              )
             })}
             </tbody>
           </table>
@@ -130,8 +130,8 @@ function ProfileTable({
             {otherData.map(data => {
               return (
                 <ProfileTableItem
-                  key={data.label}
+                  key={data.key}
-                  id={data.label}
+                  id={data.key}
                   image={defaultData.image}
                   value={data.value}
                   property={data.label}
@@ -139,7 +139,7 @@ function ProfileTable({
                   transactions={defaultData.transactions}
                   avatars={defaultData.avatars}
                   handleClick={handleClick}
-                  isChecked={isCheck.includes(data.label)}
+                  isChecked={isCheck.includes(data.key)}
                 />
               )
             })}

src/partials/validationlog/ValidateRoadMap.jsx

@@ -9,15 +9,15 @@ function ValidateRoadMap({ season }) {
       <article className="pt-3">
         <div className="xl:flex">
           <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">{season.name}</h2>
+            <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 border-b border-slate-200">
+          <div className="grow pb-6">
             <header>
               <div className="flex flex-nowrap items-center space-x-2 mb-6">
                 {/* Avatars */}
                 <div className="flex shrink-0 -space-x-3 -ml-px">
-                  {season.usersImges.map(pic => {
+                  {season.users_images.map(pic => {
-                    return <ValidationUsersImg key={pic.imgId} image={pic}/>
+                    return <ValidationUsersImg image={pic} key={pic.image}/>
                   })}
                 </div>
                 <div className="text-slate-400">·</div>
@@ -26,8 +26,8 @@ function ValidateRoadMap({ season }) {
             {/* List */}
             <ul className="-my-2">
               {/* List item(s) */}
-              {season.items.map((item, index) => {
+              {season.transaction.map((item, index) => {
-                return <ValidationSeasonItem key={item.id} length={season.items.length} item={item} index={index}/>
+                return <ValidationSeasonItem key={item.label} length={season.transaction.length} item={item} index={index}/>
               })}
             </ul>
           </div>

src/partials/validationlog/ValidationSeasonItem.jsx

@@ -5,21 +5,21 @@ 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 ${item.checked ? "bg-indigo-500" : "bg-[#FF0000]"}`} aria-hidden="true">
+          <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
             <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
-              {item.checked && <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z"/>}
+              <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.text} {item.checked && <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{`0x${item.dataSeason}`}</a>}
+            {`${item.label} by`} <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">
-          <div className="text-base font-semibold underline mb-[-10px]">{`0x${item.dataSeason}`}</div>
+          <div className="text-base font-semibold underline mb-[-10px]">{item.transaction_id}</div>
           <span className="font-normal text-slate-600 text-[10px]">Transactions ID</span>
         </div>
         <div className="mb-3.5 block text-slate-800 w-fit pl-9">
-          <div className="text-base font-semibold underline mb-[-10px]">{item.dataSeason}</div>
+          <div className="text-base font-semibold underline mb-[-10px]">{item.value}</div>
           <span className="font-normal text-slate-600 text-[10px]">Validated data</span>
         </div>
         <a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>

src/partials/validationlog/ValidationUsersImg.jsx

@@ -1,9 +1,10 @@
 import React from "react";
 
 function ValidationUsersImg({ image }) {
+
   return (
-      <a className="block" href="#0">
+      <a className="block">
-        <img className="rounded-full border-2 border-slate-100 box-content" src={image.img} width={`${image.size}`} alt={image.img} height={`${image.size}`}/>
+        <img className="rounded-full border-2 border-slate-100 box-content" src={image.image} width={`${image.size}`} alt={image.image} height={`${image.size}`}/>
       </a>
   );
 }

src/store/store.js

@@ -4,7 +4,7 @@ import {getNodeInfo} from '../api/node';
 import {fetchWrapper} from '../shared/fetchWrapper';
 
 class Store {
-  _accountData = {}
+  _accountData = []
 
   _passPhrase='rocket north inform swift improve fringe sweet crew client canyon bean autumn'
 
@@ -12,28 +12,56 @@ class Store {
 
   _userData = {}
 
+  _transactionsInfo = {}
+
   constructor() {
     makeAutoObservable(this);
 
     this.fetchNodeInfo()
 
-    reaction(() => this.tokenKey, () => fetchWrapper.getAuth('http://3.125.47.101/api/data/account', {
+    reaction(() => this.tokenKey, () => this.fetchNewAccountData())
-      networkIdentifier: this.nodeInfo.networkIdentifier,
+    reaction(() => this.tokenKey, () => this.fetchTransactionsInfo())
-      lastBlockID: this.nodeInfo.lastBlockID
-    }).then((res) => this.userDataFetchChange(res)))
   };
 
-  fetchCreateNewAccount() {
+  fetchNewAccountData() {
-    fetchWrapper.postAuth('http://3.125.47.101/api/data/account', {
+    fetchWrapper.getAuth('http://3.125.47.101/api/data/private', {
       networkIdentifier: this.nodeInfo.networkIdentifier,
       lastBlockID: this.nodeInfo.lastBlockID
-    }, [...this.encryptAccountData]).catch(()=>{})
+    }).then((res) => this.userDataFetchChange(res))
-  };
+  }
+
+  pushAccountData(data=this.accountData) {
+    fetchWrapper.postAuth('http://3.125.47.101/api/data/private', {
+      networkIdentifier: this.nodeInfo.networkIdentifier,
+      lastBlockID: this.nodeInfo.lastBlockID
+    }, [...this.encryptAccountData(data)])
+        .then(()=>this.fetchNewAccountData())
+  }
+
+  fetchTransactionsInfo() {
+    fetchWrapper.getAuth(`http://3.125.47.101/api/account/transactions/${this.accountMadeTransaction}?moduleID=1001&assetID=11`, {
+      networkIdentifier: this.nodeInfo.networkIdentifier,
+      lastBlockID: this.nodeInfo.lastBlockID
+    })
+        .then((res)=>this.saveInfoTransactions(res))
+  }
+
+  get accountMadeTransaction() {
+    return "b444b7ff3118cf2a30cbd54cfcdb8fd5d805017a"
+  }
 
   userDataFetchChange(res) {
     this._userData = res;
   }
 
+  get userData() {
+    return this._userData
+  }
+
+  get transactionsInfo() {
+    return this._transactionsInfo
+  }
+
   savePassPhrase(phrase) {
     this._passPhrase = phrase
   }
@@ -42,6 +70,10 @@ class Store {
     this._accountData = data;
   };
 
+  saveInfoTransactions(transaction) {
+    this._transactionsInfo = transaction
+  }
+
   fetchNodeInfo() {
     getNodeInfo()
       .then((info) => this.fetchNodeInfoSuccess(info))
@@ -56,10 +88,6 @@ class Store {
     console.log(err)
   }
 
-  get userData() {
-    return this._userData;
-  }
-
   get passPhrase() {
     return 'rocket north inform swift improve fringe sweet crew client canyon bean autumn'
   }
@@ -68,11 +96,11 @@ class Store {
     return this._accountData
   };
 
-  get encryptAccountData() {
+  encryptAccountData(data) {
-    return Object.keys(this.accountData).map((label) => {
+    return data.map((item) => {
-      let value = cryptography.encryptMessageWithPassphrase(cryptography.getRandomBytes(32).toString('hex') + ":" + this.accountData[label], this.passPhrase, this.pubKey);
+      let value = cryptography.encryptMessageWithPassphrase(cryptography.getRandomBytes(32).toString('hex') + ":" + item.value, this.passPhrase, this.pubKey);
       return {
-        "label": label,
+        "label": item.key,
         "value": value.encryptedMessage,
         "value_nonce": value.nonce,
       }

src/store/transactionsStore.js

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

src/store/userDataStore.js

@@ -9,9 +9,9 @@ const labelMap = {
   birthdate: "Birthdate",
   place_of_birth: "Place of birth",
   nationality: "Nationality",
-  national_id: "National id",
+  national_id: "National ID",
   national_doctype: "National doctype",
-  national_doc_id: "National doc id",  
+  national_doc_id: "National doc ID",
   national_doc_issue_date: "National doc issue date",
   national_doc_expiry_date: "National doc expiry date",
   telephone: "Telephone",
@@ -40,14 +40,14 @@ class UserDataStore{
       this._data = data.data;
     })
   }
-
   get decryptedData(){
     return this._data.map((elem) => ({
       ...elem,
+      key: elem.label,
       label: labelMap[elem.label],
       value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
     }))
   }
 }
 
-export const userDataStore = new UserDataStore();
+export const userDataStore = new UserDataStore();