Merge pull request #55 from franze6/DID-12

src/partials/validationLog/ValidateRoadMap.jsx

@@ -12,17 +12,16 @@ function ValidateRoadMap({ season }) {
             <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{''}</h2>
           </div>
           <div className="grow pb-6 border-b border-slate-200">
+            {season.sender_avatar &&
             <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}/>
-                  })}
+                    <ValidationUsersImg image={season.sender_avatar} size={season.avatar_size}/>
                 </div>
                 <div className="text-slate-400">·</div>
               </div>
-            </header>
+            </header>}
             {/* List */}
             <ul className="-my-2">
               {/* List item(s) */}

src/partials/validationLog/ValidationUsersImg.jsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-function ValidationUsersImg({ image }) {
+function ValidationUsersImg({ image,size }) {
 
   return (
       <a className="block">
-        <img className="rounded-full border-2 border-slate-100 box-content" src={image.image} width={`${image.size}`} alt={image.image} height={`${image.size}`}/>
+        <img className="rounded-full border-2 border-slate-100 box-content" src={image} alt={image} width={size} height={size}/>
       </a>
   );
 }

src/store/store.js

@@ -1,15 +1,10 @@
-import { reaction, makeAutoObservable, onBecomeObserved, onBecomeUnobserved} from "mobx";
+import {reaction, makeAutoObservable, onBecomeObserved, onBecomeUnobserved} from "mobx";
 import {cryptography} from "@liskhq/lisk-client";
 import { passphrase } from "@liskhq/lisk-client";
 import {getNodeInfo} from '../api/node';
 import {fetchWrapper} from '../shared/fetchWrapper';
 import {labelMap} from "../shared/labelMap";
-import User08 from "../images/user-28-08.jpg";
-import User06 from "../images/user-28-06.jpg";
-import User05 from "../images/user-28-05.jpg";
-import User09 from "../images/user-28-09.jpg";
-
-const usersImages = [User08,User06,User05,User09];
+import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 
 class Store {
   _accountData = []
@@ -157,18 +152,14 @@ class Store {
     return this._transactionsInfo.map(item => {
       return {
         id: item.id,
-        users_images: usersImages.map(image => {
-          return {
-            image: image,
-            size: 24
-          }
-        }),
+        sender_avatar: item.asset.recipientAddress && generateSvgAvatar(item.senderPublicKey),
+        avatar_size: 24,
         transaction: item.asset.features.map(asset => {
           return {
             transaction_id: item.id,
             address: item.asset.recipientAddress && cryptography.bufferToHex(cryptography.getAddressFromPublicKey(cryptography.hexToBuffer(item.senderPublicKey))),
             value: asset.value,
-            label: labelMap[asset.label],
+            label: labelMap[asset.label] || asset.label
           }
         })
       }