Исправлен нейминг в store и transactionsStore. Возвращены иконки юзеров на страницу ValidationLog

src/pages/digitalId/Validate.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import {observer} from "mobx-react-lite";
 
-import {validationLogStore} from "../../store/validationLogStore";
+import {transactionsStore} from "../../store/transactionsStore";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ValidateTable from "../../partials/validate/ValidateTable";
@@ -58,7 +58,7 @@ const Validate = observer(()=>{
               <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>
-              {validationLogStore.transactionData.map(item => {
+              {transactionsStore.transactionsData.map(item => {
                 return <ValidateRoadMap season={item} key={item.id}/>
               })}
             </div>

src/pages/digitalId/ValidationLog.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 
 import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
-import {validationLogStore} from "../../store/validationLogStore";
+import {transactionsStore} from "../../store/transactionsStore";
 import {observer} from "mobx-react-lite";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
@@ -28,7 +28,7 @@ const ValidationLog = observer(()=>{
               <div className="max-w-3xl m-auto mt-6">
                 <div className="xl:-translate-x-16 max-w-fit">
                   {/* PostsID */}
-                  {validationLogStore.transactionData.map(item=>{
+                  {transactionsStore.transactionsData.map(item=>{
                     return <ValidateRoadMap season={item} key={item.id}/>
                   })}
                 </div>

src/partials/validationlog/ValidateRoadMap.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import ValidationSeasonItem from "./ValidationSeasonItem";
+import ValidationUsersImg from "./ValidationUsersImg";
 
 function ValidateRoadMap({ season }) {
 
@@ -14,13 +15,19 @@ function ValidateRoadMap({ season }) {
             <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.users_images.map(pic => {
+                    return <ValidationUsersImg image={pic} key={pic.image}/>
+                  })}
+                </div>
+                <div className="text-slate-400">·</div>
               </div>
             </header>
             {/* List */}
             <ul className="-my-2">
               {/* List item(s) */}
-              {season.assets.map((item, index) => {
+              {season.transaction.map((item, index) => {
-                return <ValidationSeasonItem key={item.label} length={season.assets.length} item={item} index={index}/>
+                return <ValidationSeasonItem key={item.label} length={season.transaction.length} item={item} index={index}/>
               })}
             </ul>
           </div>

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

@@ -12,7 +12,7 @@ class Store {
 
   _userData = {}
 
-  _transactionInfo = {}
+  _transactionsInfo = {}
 
   constructor() {
     makeAutoObservable(this);
@@ -20,7 +20,7 @@ class Store {
     this.fetchNodeInfo()
 
     reaction(() => this.tokenKey, () => this.fetchNewAccountData())
-    reaction(() => this.tokenKey, () => this.fetchTransactionInfo())
+    reaction(() => this.tokenKey, () => this.fetchTransactionsInfo())
   };
 
   fetchNewAccountData() {
@@ -38,12 +38,12 @@ class Store {
         .then(()=>this.fetchNewAccountData())
   }
 
-  fetchTransactionInfo() {
+  fetchTransactionsInfo() {
     fetchWrapper.getAuth(`http://3.125.47.101/api/account/transactions/b444b7ff3118cf2a30cbd54cfcdb8fd5d805017a?moduleID=1001&assetID=11`, {
       networkIdentifier: this.nodeInfo.networkIdentifier,
       lastBlockID: this.nodeInfo.lastBlockID
     })
-        .then((res)=>this.saveInfoTransaction(res))
+        .then((res)=>this.saveInfoTransactions(res))
   }
 
   userDataFetchChange(res) {
@@ -54,8 +54,8 @@ class Store {
     return this._userData
   }
 
-  get transactionInfo() {
+  get transactionsInfo() {
-    return this._transactionInfo
+    return this._transactionsInfo
   }
 
   savePassPhrase(phrase) {
@@ -66,8 +66,8 @@ class Store {
     this._accountData = data;
   };
 
-  saveInfoTransaction(transaction) {
+  saveInfoTransactions(transaction) {
-    this._transactionInfo = transaction
+    this._transactionsInfo = transaction
   }
 
   fetchNodeInfo() {

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: item.asset.recipientAddress,
+            value: asset.value,
+            label: labelMap[asset.label],
+          }
+        })
+      }
+    })
+  }
+}
+
+export const transactionsStore = new TransactionsStore()