made a reference book

src/pages/digitalId/ProfileId.jsx

@@ -66,7 +66,7 @@ const Profile = observer (() => {
   }
 
   const sendValues = () => {
-    if (!userDataStore.data.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) {
+    if (!userDataStore.decryptedData.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) {
       setAddPanelOpen(false);
       setButtonPanelOpen(true);
       setCurrentValues(defaultValues);
@@ -131,7 +131,7 @@ const Profile = observer (() => {
                   </ul>
                 </div>
                 {/* Table */}
-                <ProfileTable selectedItems={handleSelectedItems} userData={userDataStore.data}/>
+                <ProfileTable selectedItems={handleSelectedItems} userData={userDataStore.decryptedData}/>
               </div>
               {/* Left sidebar */}
               <div>
@@ -231,7 +231,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.data.filter(({ label }) => selectedItems.includes(label)).map(item => (
+                      {userDataStore.decryptedData.filter(({ label }) => selectedItems.includes(label)).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>

src/store/userDataStore.js

@@ -2,8 +2,36 @@ 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 = []
+  _data = [];
 
   constructor() {
     makeAutoObservable(this);
@@ -13,10 +41,10 @@ class UserDataStore{
     })
   }
 
-  get data(){
+  get decryptedData(){
     return this._data.map((elem) => ({
       ...elem,
-      label: elem.label.charAt(0).toUpperCase()+elem.label.slice(1).split('_').join(' '),
+      label: labelMap[elem.label],
       value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
     }))
   }