Refactoring code and fix problems display blockchain data

src/pages/digitalId/ProfileId.jsx

@@ -6,6 +6,7 @@ import Header from '../../partials/Header';
 import ProfileTable from '../../partials/profile/ProfileTable';
 import Image from '../../images/transactions-image-04.svg';
 import {labelMap} from '../../shared/labelMap';
+import {statusMap} from "../../shared/statusMap";
 
 const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc ID', 'National doc issue date', 'National doc expiry date'];
 
@@ -28,7 +29,8 @@ const Profile = observer (() => {
   const [updatedValues, setUpdatedValues] = useState([defaultValues]);
   const [addedValues, setAddedValues] = useState(defaultValues);
   const [isCheck, setIsCheck] = useState([]);
-  const [alreadyExists, setAlreadyExists] = useState(false);
+  const [alreadyExists, setAlreadyExists] = useState(false)
+  const [blockChainValue, setBlockChainValue] = useState('');
 
   useEffect(() => {
     handleSelectedItems(isCheck);
@@ -57,6 +59,9 @@ const Profile = observer (() => {
   };
 
   const changeUpdatedValues = (value, field, key) => {
+    if(field==='value') {
+      setBlockChainValue(value)
+    }
     setUpdatedValues((prevState) =>
       prevState.map((elem) => (
           (elem.key === key) ? {
@@ -372,7 +377,7 @@ const Profile = observer (() => {
                             type="text"
                             required
                             onChange={(e) => changeUpdatedValues(e.target.value, 'value', item.key)}
-                            value={item.value}
+                            value={item.status===statusMap.blockchained?blockChainValue : item.value}
                           />
                         </div>
                         <div>

src/partials/profile/ProfileTableItem.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import {statusMap} from "../../shared/statusMap";
 
 function ProfileTableItem(props) {
   const [descriptionOpen, setDescriptionOpen] = useState(false);
@@ -20,22 +21,22 @@ function ProfileTableItem(props) {
               <img className="rounded-full" src={props.image} width="40" height="40" alt={props.property} />
             </div>
             <div className="flex flex-col w-60">
-              <div className="font-semibold text-slate-800 text-base">{props.status==='Blockchained'?`${props.value.slice(0,4)}****${props.value.slice(props.value.length-4)}`:props.value}</div>
+              <div className="font-semibold text-slate-800 text-base">{props.status===statusMap.blockchained?`${props.value.slice(0,4)}****${props.value.slice(props.value.length-4)}`:props.value}</div>
               <div className="font-normal text-xxs">{props.property}</div>
             </div>
           </div>
         </td>
-        <td className="py-3 whitespace-nowrap w-px">
-          <div className="w-fit text-xs inline-flex font-medium px-2.5 py-1">
-            {(props.status === 'Blockchained') ? (
+        <td className="py-3 whitespace-nowrap w-px px-2.5 text-left min-w-[117px]">
+          <div className="w-fit text-xs inline-flex font-medium py-1">
+            {(props.status === statusMap.blockchained) ? (
               <div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
                 {props.status}
               </div>) :
-            (props.status === 'Stored') ? (
+            (props.status === statusMap.stored) ? (
               <div className="bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">
                 {props.status}
               </div>) :
-            (props.status === 'Completed') ? (
+            (props.status === statusMap.completed) ? (
               <div className="bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
                 {props.status}
               </div>) : (

src/store/store.js

@@ -4,8 +4,8 @@ import { passphrase, transactions } from "@liskhq/lisk-client";
 import {getNodeInfo} from '../api/node';
 import {fetchWrapper} from '../shared/fetchWrapper';
 import {labelMap} from "../shared/labelMap";
-import {statusMap} from "../shared/statusMap";
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
+import {decryptedData} from "../utils/decryptedData";
 import {
   encryptAccountData,
   generateSetTransaction, generateTransaction,
@@ -210,50 +210,8 @@ class Store {
       }
     })
   }
-
   get decryptedAccountData() {
-    const allAccountData=this._accountData.concat(this.accountFeatures.filter(item=>!this._accountData.find(elem=>elem.label===item.label)))
-    return allAccountData.map((elem) => {
-      const initialData={
-        ...elem,
-        key: elem.label,
-        label: labelMap[elem.label] || elem.label,
-        status: '',
-        value: '',
-        seed: ''
-      }
-      if(!this._accountData.find(item=>item.label===elem.label)) {
-        return {
-          ...initialData,
-          status: statusMap.blockchained,
-          value: elem.value
-        }
-      }
-      const [seed, value] = cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, this.passPhrase, this.pubKey).split(':');
-      const hashValue=cryptography.hash(Buffer.concat([Buffer.from(seed, 'utf8'), cryptography.hash(value, 'utf8')])).toString('hex')
-      if(!this.accountFeatures.find(item=>item.label===elem.label)) {
-        return {
-          ...initialData,
-          status: statusMap.stored,
-          value,
-          seed
-        }
-      }
-      if(this.accountFeatures.find(item=>item.label===elem.label).value!==hashValue) {
-        return {
-          ...initialData,
-          status: statusMap.incorrect,
-          value,
-          seed
-        }
-      }
-      return {
-        ...initialData,
-        status: statusMap.completed,
-        value,
-        seed
-      }
-    })
+    return decryptedData(this._accountData, this.accountFeatures, this.passPhrase, this.pubKey)
   }
 
   get firstName() {

src/utils/decryptedData.js

@@ -0,0 +1,48 @@
+import {labelMap} from "../shared/labelMap";
+import {statusMap} from "../shared/statusMap";
+import {cryptography} from "@liskhq/lisk-client";
+
+export const decryptedData=(serverData, blockchainData, passPhrase, pubKey)=>{
+  const allAccountData=serverData.concat(blockchainData.filter(item=>!serverData.find(elem=>elem.label===item.label)))
+  return allAccountData.map((elem) => {
+    const initialData={
+      ...elem,
+      key: elem.label,
+      label: labelMap[elem.label] || elem.label,
+      status: '',
+      value: '',
+      seed: ''
+    }
+    if(!serverData.find(item=>item.label===elem.label)) {
+      return {
+        ...initialData,
+        status: statusMap.blockchained,
+        value: elem.value
+      }
+    }
+    const [seed, value] = cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, passPhrase, pubKey).split(':');
+    const hashValue=cryptography.hash(Buffer.concat([Buffer.from(seed, 'utf8'), cryptography.hash(value, 'utf8')])).toString('hex')
+    if(!blockchainData.find(item=>item.label===elem.label)) {
+      return {
+        ...initialData,
+        status: statusMap.stored,
+        value,
+        seed
+      }
+    }
+    if(blockchainData.find(item=>item.label===elem.label).value!==hashValue) {
+      return {
+        ...initialData,
+        status: statusMap.incorrect,
+        value,
+        seed
+      }
+    }
+    return {
+      ...initialData,
+      status: statusMap.completed,
+      value,
+      seed
+    }
+  })
+}