Merge pull request #58 from franze6/DID-13

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,12 +59,15 @@ const Profile = observer (() => {
   };
 
   const changeUpdatedValues = (value, field, key) => {
+    if(field==='value') {
+      setBlockChainValue(value)
+    }
     setUpdatedValues((prevState) =>
       prevState.map((elem) => (
-        (elem.key === key) ? {
+          (elem.key === key) ? {
-          ...elem,
+            ...elem,
-          [field]: value,
+            [field]: value,
-        } : elem
+          } : elem
       ))
     )
   };
@@ -371,7 +376,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

@@ -28,7 +28,7 @@ function ProfileTableItem(props) {
             </div>
             <div className="flex flex-col w-60">
               <div className="font-semibold text-slate-800 text-base">
-                {props.status === 'Blockchained' || props.status === statusMap.processed
+                {props.status === statusMap.blockchained || props.status === statusMap.processed
                   ? `${props.value.slice(0, 4)}****${props.value.slice(props.value.length - 4)}`
                   : props.value}
               </div>
@@ -36,15 +36,15 @@ function ProfileTableItem(props) {
             </div>
           </div>
         </td>
-        <td className="py-3 whitespace-nowrap w-px">
+        <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 px-2.5 py-1">
+          <div className="w-fit text-xs inline-flex font-medium py-1">
-            {props.status === 'Blockchained' ? (
+            {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 === statusMap.processed ? (
               <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>
             ) : (
               <div className="bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">{props.status}</div>

src/store/store.js

@@ -4,8 +4,8 @@ import { passphrase } 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, generateTransaction, hashAccountData } from '../utils/Utils';
 
 class Store {
@@ -251,62 +251,8 @@ class Store {
       };
     });
   }
-
   get decryptedAccountData() {
-    const allAccountData = this._accountData.concat(
+    return decryptedData(this._accountData, this.accountFeatures, this.passPhrase, this.pubKey)
-      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.processedFeatures[elem.label])
-        return {
-          ...initialData,
-          status: statusMap.processed,
-          value: elem.value,
-        }
-      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,
-      };
-    });
   }
 
   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
+    }
+  })
+}