rendered the data in the component

src/pages/digitalId/Verify.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import { sharedDataStore } from '../../store/sharedDataStore';
@@ -8,82 +8,6 @@ const Verify = observer(() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [descriptionOpen, setDescriptionOpen] = useState(false);
 
- /*useEffect(() => {
-    sharedDataStore.fetchSharedData();
-  }, []);*/
-
-  const verifiedData = [
-    {
-      "date": "31.05.2022 10:48",
-      "fields": [
-        {
-          "name": "Residence",
-          "value": "United Kindom",
-          "hash1": "7234ABC3423423523457234ABC34234",
-          "hash2": "7234ABC3423423523457234ABC34234"
-        },
-        {
-          "name": "Document ID",
-          "value": "A1321313",
-          "hash1": "7234ABC3423423523457234ABC34234",
-          "hash2": "7234ABC3423423523457234ABC34234"
-        },
-        {
-          "name": 'Document ID',
-          "value": 'A3451313',
-          "hash1": '9584ABC3423423523457234ABC34234',
-          "hash2": '9584ABC3423423523457234ABC34234'
-        }
-      ]
-    },
-    {
-      "date": "31.05.2022 10:48",
-      "fields": [
-        {
-          "name": 'Residence',
-          "value": 'Holland',
-          "hash1": '1024ABC3423423523457234ABC34234',
-          "hash2": '1024ABC3423423523457234ABC34234'
-        },
-        {
-          "name": 'Document ID',
-          "value": 'B3451313',
-          "hash1": '7893ABC3423423523457234ABC34234',
-          "hash2": '7893ABC3423423523457234ABC34234'
-        },
-        {
-          "name": 'Document ID',
-          "value": 'A3451313',
-          "hash1": '7286ABC3423423523457234ABC34234',
-          "hash2": '7286ABC3423423523457234ABC34234'
-        },
-      ]
-    },
-    {
-      "date": "31.05.2022 10:48",
-      "fields": [
-        {
-          "name": 'Residence',
-          "value": 'China',
-          "hash1": '0000ABC3423423523457234ABC34234',
-          "hash2": '0000ABC3423423523457234ABC34234'
-        },
-        {
-          "name": 'Document ID',
-          "value": 'C3451313',
-          "hash1": '1230ABC3423423523457234ABC34234',
-          "hash2": '1230ABC3423423523457234ABC34234'
-        },
-        {
-          "name": 'Document ID',
-          "value": 'D3451313',
-          "hash1": '4483ABC3423423523457234ABC34234',
-          "hash2": '4483ABC3423423523457234ABC34234'
-        },
-      ]
-    }
-  ];
-
   return (
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
@@ -118,13 +42,10 @@ const Verify = observer(() => {
             </div>
             {/* Block */}
             <div className="flex flex-col gap-y-4">
-              {verifiedData.map((item, index) => (
+              {sharedDataStore.sharedData.map((item, index) => (
                 <div key={index} className="w-[1095px] pl-5 pr-[13px] pb-8 bg-white border border-slate-200 rounded shadow-[0_4px_6px_-1px_rgba(5,23,42,0.08)]">
                   {/* Header */}
-                  <div className="flex justify-between items-center h-[42px]">
-                    <span className="font-normal text-descriptionSize text-slate-500" >
-                      Yesterday at {item.date.slice(-5)} AM
-                    </span>
+                  <div className="flex justify-end items-center h-[42px]">
                     {/* Buttons */}
                     <div className="flex gap-x-[6px]">
                       <div className="flex items-center">
@@ -139,7 +60,6 @@ const Verify = observer(() => {
                         <button
                           className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
                           aria-expanded={descriptionOpen}
-                            onClick={() => setDescriptionOpen(!descriptionOpen)}
                         >
                           <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
                             <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
@@ -150,15 +70,13 @@ const Verify = observer(() => {
                   </div>
                   {/* Content */}
                   <div className='flex flex-col gap-y-[9px]'>
-                    {item.fields.map((elem, index) => (
+                    {item.data.map((elem, index) => (
                       <div key={index} className='flex gap-y-2'>
                         <div className='flex flex-col'>
                           <div className='flex flex-row items-center'>
-                            <span className='font-semibold text-slate-800 text-base w-[204px]'>{elem.value}</span>
-                            <span className='font-semibold text-descriptionSize text-slate-600 underline w-80'>{elem.hash1}</span>
-                            <span className='font-semibold text-descriptionSize text-slate-600 underline w-80'>{elem.hash2}</span>
+                            <span className='font-inter font-semibold text-slate-800 text-base w-[204px]'>{elem.label}</span>
+                            <span className='font-inter truncate font-semibold text-descriptionSize text-slate-600 underline w-[770px]'>{elem.value}</span>
                           </div>
-                          <span className='font-normal text-xxs'>{elem.name}</span>
                         </div>
                       </div>
                     ))}
@@ -166,11 +84,6 @@ const Verify = observer(() => {
                 </div> 
               ))}
             </div>
-            {sharedDataStore.decryptedData.map((elem, index) => (
-              <div key={index}>
-                {elem}
-              </div>
-            ))}
           </div>
         </main>
       </div>

src/store/sharedDataStore.js

@@ -1,4 +1,3 @@
-import { cryptography } from "@liskhq/lisk-client";
 import { makeAutoObservable, reaction } from "mobx";
 import { fetchWrapper } from "../shared/fetchWrapper";
 import { registrationStore } from './store';
@@ -45,32 +44,23 @@ class SharedDataStore{
   }
 
   fetchSharedData() {
-    this._keysArray.map((elem) => {
-      fetchWrapper.get(`http://3.125.47.101/api/data/shared/${elem}`).then((res) => this.changeSharedData(res));
-    })
+    this._keysArray.forEach((elem) => fetchWrapper.get(`http://3.125.47.101/api/data/shared/${elem}`).then((res) => this.changeSharedData(res)))
   };
 
   changeSharedData(incomingData) {
     this._sharedData.push({
       data: incomingData.data,
-    });
-    console.log(this._sharedData);
+    })
   }
 
   get sharedData() {
-    return this._sharedData;
-  }
-
-  get decryptedData() {
-    return this._sharedData.map((elem) =>
-      elem.data.map((item) => ({
-        key: item.label,
+    return this._sharedData.map(elem => ({
+      data: elem.data.map(item => ({
         label: labelMap[item.label],
-        value: cryptography.decryptMessageWithPassphrase(item.value, item.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
-      })
-    ))  
-  }
+        value: item.value,
+      }))
+  }));
+  };
 }
 
 export const sharedDataStore = new SharedDataStore();
-console.log(sharedDataStore.sharedData);

src/store/store.js

@@ -19,12 +19,12 @@ class Store {
 
     this.fetchNodeInfo()
 
-    reaction(() => this.tokenKey, () => this.fetchData())
+    reaction(() => this.tokenKey, () => this.getData())
   };
 
-  fetchData() {
+  getData() {
     this.fetchNewAccountData();
-    this.fetchLinksArray();
+    this.fetchKeysArray();
   }
 
   fetchNewAccountData() {
@@ -42,7 +42,7 @@ class Store {
         .then(()=>this.fetchNewAccountData())
   }
 
-  fetchLinksArray() {
+  fetchKeysArray() {
     fetchWrapper.getAuth('https://ccab53ea-d042-47b3-b9b4-79b913f47b3d.mock.pstmn.io/data/shared', {
       networkIdentifier: this.nodeInfo.networkIdentifier,
       lastBlockID: this.nodeInfo.lastBlockID