added stacking context for the hint

src/pages/digitalId/ProfileId.jsx

@@ -7,6 +7,14 @@ import Header from '../../partials/Header';
 import ProfileTable from '../../partials/digitalId/ProfileTable';
 import Image from '../../images/transactions-image-04.svg';
 
+const defaultValues = {
+  label: '',
+  value: '',
+  seed: String(Math.floor(Math.random() * 90000000000000000000), 10) 
+};
+
+const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc ID', 'National doc issue date', 'National doc expiry date'];
+
 const Profile = observer (() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [buttonPanelOpen, setButtonPanelOpen] = useState(true);
@@ -16,14 +24,6 @@ const Profile = observer (() => {
   const [addPanelOpen, setAddPanelOpen] = useState(false);
   const [updatePanelOpen, setUpdatePanelOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
-  
-  const defaultValues = {
-    label: '',
-    value: '',
-    seed: Math.floor(Math.random() * 90000000000000000000) 
-  };
-
-  const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc id', 'National doc issue date', 'National doc expiry date'];
   const [propertyValues, setPropertyValues] = useState([]);
   const [updatedValues, setUpdatedValues] = useState([defaultValues]);
   const [addedValues, setAddedValues] = useState(defaultValues);
@@ -35,43 +35,41 @@ const Profile = observer (() => {
   }
 
   const changeAddedValues = (value, field) => {
-    setAddedValues((prevState) => (
+    setAddedValues((prevState) => ({
-      field !== 'seed' ? {
       ...prevState,
       [field]: value
-    } : {
-      ...prevState,
-      [field]: +value,
     }))
   };
 
   const changeUpdatedValues = (value, field, key) => {
     setUpdatedValues((prevState) => 
       prevState.map((elem) => (
-        (elem.key === key && field !== 'seed') ? {
-          ...elem,
-          [field]: value,
-        } : 
         (elem.key === key) ? {
           ...elem,
-          [field]: +value,
+          [field]: value,
         } : elem
       ))
     )
   };
 
-  const closeHint = (element) => {
+  const selectHint = (element) => {
     changeAddedValues(element, 'label');
     setPropertyValues([]);
   }
 
+  const closeHint = (eventTarget) => {
+    if (!eventTarget || eventTarget.tabIndex !== -1) {
+      setPropertyValues([]);
+    }
+  };
+
   const handleSelectedItems = (selectedItems) => {
     setSelectedItems([...selectedItems]);
     setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key))
       .map(elem => (
         (!elem.seed) ? {
         ...elem,
-        seed: Math.floor(Math.random() * 90000000000000000000)
+        seed: String(Math.floor(Math.random() * 90000000000000000000), 10) 
       }: elem)));
     if (selectedItems.length > 0) {
       setButtonPanelOpen(false);
@@ -95,7 +93,9 @@ const Profile = observer (() => {
   }
 
   const sendAddedData = () => {
-    if (!userDataStore.decryptedData.some((element) => element.label === addedValues.label) && (addedValues.seed.toString().length === 20)) {
+    const checkingAddedData = !userDataStore.decryptedData
+      .some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20);
+    if (checkingAddedData) {
       setAddPanelOpen(false);
       setButtonPanelOpen(true);
       setAddedValues(defaultValues);
@@ -232,56 +232,55 @@ const Profile = observer (() => {
                 </div>
                 <div className="ml-2.5">
                   {/* Add panel */}
-                  <div className={`${!addPanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
+                  <div className={`${!addPanelOpen && 'hidden'} relative flex flex-col bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
-                    <div className="flex flex-col gap-y-3">
+                    <div className='relative z-20'>
-                      <div>
+                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
-                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
+                      <input
-                        <input
+                        autoComplete='off'
-                          autoComplete='off'
+                        id="label"
-                          id="label"
+                        className="form-input w-full"
-                          className="form-input w-full"
+                        type="text"
-                          type="text"
+                        required
-                          required
+                        onInput={(e) => handleInput(e.target.value, 'label')}
-                          onInput={(e) => handleInput(e.target.value, 'label')}
+                        value={addedValues.label}
-                          value={addedValues.label}
+                        onClick={openHint}
-                          onClick={openHint}
+                        onBlur={(e) => closeHint(e.relatedTarget)}
-                        />
+                      />
-                        <div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
+                      <div tabIndex='-1' className={`absolute w-full box-border bg-white flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
-                          <ul>
+                        <ul>
-                            {propertyValues.map((element, index) => (
+                          {propertyValues.map((element, index) => (
-                              <li key={index} onClick={() => closeHint(element)}>{element}</li>
+                            <li className='hover:text-indigo-600 cursor-pointer' key={index} onClick={() => selectHint(element)}>{element}</li>
-                            ))}
+                          ))}
-                          </ul>
+                        </ul>
-                        </div>
+                     </div>
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
-                        <input
-                          autoComplete='off'
-                          id="value"
-                          className="form-input w-full"
-                          type="text"
-                          required
-                          onClick={() => setPropertyValues([])}
-                          onChange={(e) => changeAddedValues(e.target.value, 'value')}
-                          value={addedValues.value}
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
-                        <input
-                          autoComplete='off'
-                          id="seed"
-                          className="form-input w-full"
-                          type="number"
-                          required
-                          onClick={() => setPropertyValues([])}
-                          onChange={(e) => changeAddedValues(e.target.value, 'seed')}
-                          value={addedValues.seed}
-                        />
-                      </div>
                     </div>
-                    <div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
+                    <div className='my-3 z-10'>
+                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
+                      <input
+                        autoComplete='off'
+                        id="value"
+                        className="form-input w-full"
+                        type="text"
+                        required
+                        onClick={() => setPropertyValues([])}
+                        onChange={(e) => changeAddedValues(e.target.value, 'value')}
+                        value={addedValues.value}
+                      />
+                    </div>
+                    <div className='z-10'>
+                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
+                      <input
+                        autoComplete='off'
+                        id="seed"
+                        className="form-input w-full"
+                        type="number"
+                        required
+                        onClick={() => setPropertyValues([])}
+                        onChange={(e) => changeAddedValues(e.target.value, 'seed')}
+                        value={addedValues.seed}
+                      />
+                    </div>
+                    <div className="flex flex-row z-10 justify-between pt-[18px] pb-[23px] items-center border-b border-slate-200">
                       <span className="block text-sm font-medium">Store data on blockchain</span>
                       <div className="flex items-center">
                         <div className="form-switch">
@@ -293,7 +292,7 @@ const Profile = observer (() => {
                       </div>
                     </div>
                     {/* Buttons */}
-                    <div className="flex flex-row justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
+                    <div className="flex flex-row z-10 justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
                       <button
                         className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
                         onClick={cancelAddPanel}

src/pages/digitalId/Validate.jsx

@@ -1,18 +1,70 @@
 import React, { useState } from 'react';
-import {observer} from "mobx-react-lite";
 
-import {transactionsStore} from "../../store/transactionsStore";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ValidateTable from "../../partials/validate/ValidateTable";
 import ValidatePanel from "../../partials/validate/ValidatePanel";
 import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
 import {Link} from "react-router-dom";
+import User06 from "../../images/user-28-06.jpg";
+import User08 from "../../images/user-28-08.jpg";
+import User09 from "../../images/user-28-09.jpg";
+import User05 from "../../images/user-28-05.jpg";
 
-const Validate = observer(()=>{
+function Validate () {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [validatePanelOpen, setValidatePanelOpen] = useState(true);
 
+  const validateItems = [
+    {
+      id: '40',
+      name: 'Today',
+      data: '7234ABC342342352345',
+      usersImges: [
+        {
+          size: 24,
+          img: User06,
+          imgId: "343"
+        },
+        {
+          size: 24,
+          img: User08,
+          imgId: "345"
+        },
+        {
+          size: 24,
+          img: User09,
+          imgId: "321"
+        },
+        {
+          size: 24,
+          img: User05,
+          imgId: "387"
+        },
+      ],
+      items: [
+        {
+          dataSeason: '7234ABC342342352345',
+          id: '555',
+          text: 'Second name for',
+          checked: true
+        },
+        {
+          dataSeason: '7234ABC342342352345',
+          id: '534',
+          text: 'Gender name for',
+          checked: true
+        },
+        {
+          dataSeason: '7234ABC342342352345',
+          id: '567',
+          text: 'Document ID name for',
+          checked: true
+        },
+      ]
+    },
+  ];
+
   return (
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
@@ -58,7 +110,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>
-              {transactionsStore.transactionsData.map(item => {
+              {validateItems.map(item => {
                 return <ValidateRoadMap season={item} key={item.id}/>
               })}
             </div>
@@ -68,6 +120,6 @@ const Validate = observer(()=>{
       </div>
     </div>
   )
-})
+}
 
 export default Validate;

src/pages/digitalId/ValidationLog.jsx

@@ -1,14 +1,115 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 
 import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
-import {transactionsStore} from "../../store/transactionsStore";
-import {observer} from "mobx-react-lite";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
+import User05 from "../../images/user-28-05.jpg";
+import User08 from "../../images/user-28-08.jpg";
+import User09 from "../../images/user-28-09.jpg";
+import User06 from "../../images/user-28-06.jpg";
+import User03 from "../../images/user-28-03.jpg";
+import User01 from "../../images/user-28-01.jpg";
 
-const ValidationLog = observer(()=>{
+function ValidationLog () {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
+  const logItems = [
+    {
+      id: '20',
+      name: 'Today',
+      data: '7234ABC342342352345',
+      usersImges: [
+        {
+          size: 24,
+          img: User06,
+          imgId: "249"
+        },
+        {
+          size: 24,
+          img: User08,
+          imgId: "212"
+        },
+        {
+          size: 24,
+          img: User09,
+          imgId: "217"
+        },
+        {
+          size: 24,
+          img: User05,
+          imgId: "276"
+        },
+      ],
+      items: [
+        {
+          dataSeason: '7234ABC342342352345',
+          id: '434',
+          text: 'Second name',
+          checked: true
+        },
+        {
+          dataSeason: '7234ABC342342352345',
+          id: '476',
+          text: 'First name by',
+          checked: true
+        },
+        {
+          dataSeason: '7234ABC342342352345',
+          id: '422',
+          text: 'Document name by',
+          checked: true
+        },
+      ]
+    },
+    {
+      id: '30',
+      name: 'Last Week',
+      data: '7234ABC342342352345',
+      usersImges: [
+        {
+          size: 24,
+          img: User06,
+          imgId: "145"
+        },
+        {
+          size: 24,
+          img: User08,
+          imgId: "182"
+        },
+        {
+          size: 24,
+          img: User09,
+          imgId: "154"
+        },
+        {
+          size: 24,
+          img: User05,
+          imgId: "114"
+        },
+      ],
+      items: [
+        {
+          dataSeason: '7234ABC342342352345',
+          id: '654',
+          text: 'Gender name by',
+          checked: true
+        },
+        {
+          dataSeason: '7234ABC342342352345',
+          id: '617',
+          text: 'Second name Updated',
+          checked: false
+        },
+        {
+          dataSeason: '7234ABC342342352345',
+          id: '643',
+          text: 'Gender name by',
+          checked: true
+        },
+      ]
+    },
+  ]
+
   return (
       <div className="flex h-screen overflow-hidden">
         {/* Sidebar */}
@@ -28,9 +129,61 @@ const ValidationLog = observer(()=>{
               <div className="max-w-3xl m-auto mt-6">
                 <div className="xl:-translate-x-16 max-w-fit">
                   {/* PostsID */}
-                  {transactionsStore.transactionsData.map(item=>{
+                  {logItems.map(item => {
-                    return <ValidateRoadMap season={item} key={item.id}/>
+                    return <ValidateRoadMap season={item} key={item.id} />
                   })}
+                  {/* Post */}
+                  <article className="pt-3">
+                    <div className="xl:flex">
+                      <div className="w-32 shrink-0">
+                        <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">Even earlier</h2>
+                      </div>
+                      <div className="grow pb-6 border-b border-slate-200">
+                        <header>
+                          <div className="flex flex-nowrap items-center space-x-2 mb-6">
+                            {/* Avatars */}
+                            <div className="flex shrink-0 -space-x-3 -ml-px">
+                              <a className="block" href="#0">
+                                <img className="rounded-full border-2 border-white box-content" src={User03} width="28" height="28" alt="User 03" />
+                              </a>
+                              <a className="block" href="#0">
+                                <img className="rounded-full border-2 border-white box-content" src={User01} width="28" height="28" alt="User 01" />
+                              </a>
+                            </div>
+                            <div className="text-slate-400">·</div>
+                          </div>
+                        </header>
+                        {/* List */}
+                        <ul className="-my-2">
+                          {/* List item */}
+                          <li className="relative py-2">
+                            <div className="flex items-center mb-1">
+                              <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
+                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
+                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
+                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
+                                </svg>
+                              </div>
+                              <h3 className="text-lg font-bold text-slate-800 pl-9">Product V1 - Early Access</h3>
+                            </div>
+                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
+                          </li>
+                          {/* List item */}
+                          <li className="relative py-2">
+                            <div className="flex items-center mb-1">
+                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
+                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
+                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
+                                </svg>
+                              </div>
+                              <h3 className="text-lg font-bold text-slate-800 pl-9">Web3 Compatibility</h3>
+                            </div>
+                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </article>
                 </div>
               </div>
             </div>
@@ -38,6 +191,6 @@ const ValidationLog = observer(()=>{
         </div>
       </div>
   )
-})
+}
 
 export default ValidationLog;

src/partials/validationlog/ValidateRoadMap.jsx

@@ -9,15 +9,15 @@ function ValidateRoadMap({ season }) {
       <article className="pt-3">
         <div className="xl:flex">
           <div className="w-32 shrink-0">
-            <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{''}</h2>
+            <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{season.name}</h2>
           </div>
-          <div className="grow pb-6">
+          <div className="grow pb-6 border-b border-slate-200">
             <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 => {
+                  {season.usersImges.map(pic => {
-                    return <ValidationUsersImg image={pic} key={pic.image}/>
+                    return <ValidationUsersImg key={pic.imgId} image={pic}/>
                   })}
                 </div>
                 <div className="text-slate-400">·</div>
@@ -26,8 +26,8 @@ function ValidateRoadMap({ season }) {
             {/* List */}
             <ul className="-my-2">
               {/* List item(s) */}
-              {season.transaction.map((item, index) => {
+              {season.items.map((item, index) => {
-                return <ValidationSeasonItem key={item.label} length={season.transaction.length} item={item} index={index}/>
+                return <ValidationSeasonItem key={item.id} length={season.items.length} item={item} index={index}/>
               })}
             </ul>
           </div>

src/partials/validationlog/ValidationSeasonItem.jsx

@@ -5,21 +5,21 @@ function ValidationSeasonItem({ length, item, index }) {
       <li className="relative pt-2 pb-2.5">
         <div className="flex items-center mb-2.5">
           {length-1!==index && <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>}
-          <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
+          <div className={`absolute left-0 rounded-full ${item.checked ? "bg-indigo-500" : "bg-[#FF0000]"}`} aria-hidden="true">
             <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
-              <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z"/>
+              {item.checked && <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z"/>}
             </svg>
           </div>
           <h3 className="text-lg font-bold text-slate-800 pl-9">
-            {`${item.label} by`} <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{item.address}</a>
+            {item.text} {item.checked && <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{`0x${item.dataSeason}`}</a>}
           </h3>
         </div>
         <div className="block text-slate-800 w-fit pl-9">
-          <div className="text-base font-semibold underline mb-[-10px]">{item.transaction_id}</div>
+          <div className="text-base font-semibold underline mb-[-10px]">{`0x${item.dataSeason}`}</div>
           <span className="font-normal text-slate-600 text-[10px]">Transactions ID</span>
         </div>
         <div className="mb-3.5 block text-slate-800 w-fit pl-9">
-          <div className="text-base font-semibold underline mb-[-10px]">{item.value}</div>
+          <div className="text-base font-semibold underline mb-[-10px]">{item.dataSeason}</div>
           <span className="font-normal text-slate-600 text-[10px]">Validated data</span>
         </div>
         <a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>

src/partials/validationlog/ValidationUsersImg.jsx

@@ -1,10 +1,9 @@
 import React from "react";
 
 function ValidationUsersImg({ image }) {
-
   return (
-      <a className="block">
+      <a className="block" href="#0">
-        <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.img} width={`${image.size}`} alt={image.img} height={`${image.size}`}/>
       </a>
   );
 }

src/store/store.js

@@ -12,15 +12,12 @@ class Store {
 
   _userData = {}
 
-  _transactionsInfo = {}
-
   constructor() {
     makeAutoObservable(this);
 
     this.fetchNodeInfo()
 
     reaction(() => this.tokenKey, () => this.fetchNewAccountData())
-    reaction(() => this.tokenKey, () => this.fetchTransactionsInfo())
   };
 
   fetchNewAccountData() {
@@ -38,18 +35,6 @@ class Store {
         .then(()=>this.fetchNewAccountData())
   }
 
-  fetchTransactionsInfo() {
-    fetchWrapper.getAuth(`http://3.125.47.101/api/account/transactions/${this.accountMadeTransaction}?moduleID=1001&assetID=11`, {
-      networkIdentifier: this.nodeInfo.networkIdentifier,
-      lastBlockID: this.nodeInfo.lastBlockID
-    })
-        .then((res)=>this.saveInfoTransactions(res))
-  }
-
-  get accountMadeTransaction() {
-    return "b444b7ff3118cf2a30cbd54cfcdb8fd5d805017a"
-  }
-
   userDataFetchChange(res) {
     this._userData = res;
   }
@@ -58,10 +43,6 @@ class Store {
     return this._userData
   }
 
-  get transactionsInfo() {
-    return this._transactionsInfo
-  }
-
   savePassPhrase(phrase) {
     this._passPhrase = phrase
   }
@@ -70,10 +51,6 @@ class Store {
     this._accountData = data;
   };
 
-  saveInfoTransactions(transaction) {
-    this._transactionsInfo = transaction
-  }
-
   fetchNodeInfo() {
     getNodeInfo()
       .then((info) => this.fetchNodeInfoSuccess(info))

src/store/transactionsStore.js

@@ -1,51 +0,0 @@
-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: registrationStore.accountMadeTransaction,
-            value: asset.value,
-            label: labelMap[asset.label],
-          }
-        })
-      }
-    })
-  }
-}
-
-export const transactionsStore = new TransactionsStore()