diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 85b59d1..fae4309 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/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) => ( - field !== 'seed' ? { + setAddedValues((prevState) => ({ ...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 (() => {
{/* Add panel */} -
-
-
- - handleInput(e.target.value, 'label')} - value={addedValues.label} - onClick={openHint} - /> -
0) || 'hidden'}`}> -
    - {propertyValues.map((element, index) => ( -
  • closeHint(element)}>{element}
    • - ))} -
-
-
-
- - setPropertyValues([])} - onChange={(e) => changeAddedValues(e.target.value, 'value')} - value={addedValues.value} - /> -
-
- - setPropertyValues([])} - onChange={(e) => changeAddedValues(e.target.value, 'seed')} - value={addedValues.seed} - /> -
+
+
+ + handleInput(e.target.value, 'label')} + value={addedValues.label} + onClick={openHint} + onBlur={(e) => closeHint(e.relatedTarget)} + /> +
0) || 'hidden'}`}> +
    + {propertyValues.map((element, index) => ( +
  • selectHint(element)}>{element}
    • + ))} +
+
-
+
+ + setPropertyValues([])} + onChange={(e) => changeAddedValues(e.target.value, 'value')} + value={addedValues.value} + /> +
+
+ + setPropertyValues([])} + onChange={(e) => changeAddedValues(e.target.value, 'seed')} + value={addedValues.seed} + /> +
+
Store data on blockchain
@@ -293,7 +292,7 @@ const Profile = observer (() => {
{/* Buttons */} -
+
) -} +}) export default Validate; diff --git a/src/pages/digitalId/ValidationLog.jsx b/src/pages/digitalId/ValidationLog.jsx index 75d24b2..a1190b2 100644 --- a/src/pages/digitalId/ValidationLog.jsx +++ b/src/pages/digitalId/ValidationLog.jsx @@ -1,115 +1,14 @@ -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"; -function ValidationLog () { +const ValidationLog = observer(()=>{ 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 (
{/* Sidebar */} @@ -129,61 +28,9 @@ function ValidationLog () {
{/* PostsID */} - {logItems.map(item => { - return + {transactionsStore.transactionsData.map(item=>{ + return })} - {/* Post */} -
-
-
-

Even earlier

-
-
-
-
- {/* Avatars */} - -
·
-
-
- {/* List */} -
    - {/* List item */} -
  • -
    - - -

    Product V1 - Early Access

    -
    -
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    -
    • - {/* List item */} -
  • -
    - -

    Web3 Compatibility

    -
    -
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    -
    • -
-
-
-
@@ -191,6 +38,6 @@ function ValidationLog () {
) -} +}) export default ValidationLog; diff --git a/src/partials/validationlog/ValidateRoadMap.jsx b/src/partials/validationlog/ValidateRoadMap.jsx index bab0627..c086b80 100644 --- a/src/partials/validationlog/ValidateRoadMap.jsx +++ b/src/partials/validationlog/ValidateRoadMap.jsx @@ -9,15 +9,15 @@ function ValidateRoadMap({ season }) {
-

{season.name}

+

{''}

-
+
{/* Avatars */}
- {season.usersImges.map(pic => { - return + {season.users_images.map(pic => { + return })}
·
@@ -26,8 +26,8 @@ function ValidateRoadMap({ season }) { {/* List */}
    {/* List item(s) */} - {season.items.map((item, index) => { - return + {season.transaction.map((item, index) => { + return })}
diff --git a/src/partials/validationlog/ValidationSeasonItem.jsx b/src/partials/validationlog/ValidationSeasonItem.jsx index 430ca56..d8925d7 100644 --- a/src/partials/validationlog/ValidationSeasonItem.jsx +++ b/src/partials/validationlog/ValidationSeasonItem.jsx @@ -5,21 +5,21 @@ function ValidationSeasonItem({ length, item, index }) {
  • {length-1!==index && } -
    -
    {`0x${item.dataSeason}`}
    +
    {item.transaction_id}
    Transactions ID
    -
    {item.dataSeason}
    +
    {item.value}
    Validated data
    Explore -> diff --git a/src/partials/validationlog/ValidationUsersImg.jsx b/src/partials/validationlog/ValidationUsersImg.jsx index 7f6b941..4b29d26 100644 --- a/src/partials/validationlog/ValidationUsersImg.jsx +++ b/src/partials/validationlog/ValidationUsersImg.jsx @@ -1,9 +1,10 @@ import React from "react"; function ValidationUsersImg({ image }) { + return ( - - {image.img} + + {image.image} ); } diff --git a/src/store/store.js b/src/store/store.js index aeb9f23..a586efa 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -13,6 +13,8 @@ class Store { _userData = {} _keysArray = [] + + _transactionsInfo = {} constructor() { makeAutoObservable(this); @@ -20,6 +22,8 @@ class Store { this.fetchNodeInfo() reaction(() => this.tokenKey, () => this.getData()) + reaction(() => this.tokenKey, () => this.fetchNewAccountData()) + reaction(() => this.tokenKey, () => this.fetchTransactionsInfo()) }; getData() { @@ -47,6 +51,17 @@ class Store { networkIdentifier: this.nodeInfo.networkIdentifier, lastBlockID: this.nodeInfo.lastBlockID }).then((res) => this.keysArrayFetchChange(res)) + + 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) { @@ -65,6 +80,10 @@ class Store { return this._userData; } + get transactionsInfo() { + return this._transactionsInfo + } + savePassPhrase(phrase) { this._passPhrase = phrase } @@ -73,6 +92,10 @@ class Store { this._accountData = data; }; + saveInfoTransactions(transaction) { + this._transactionsInfo = transaction + } + fetchNodeInfo() { getNodeInfo() .then((info) => this.fetchNodeInfoSuccess(info)) diff --git a/src/store/transactionsStore.js b/src/store/transactionsStore.js new file mode 100644 index 0000000..e2c6f9a --- /dev/null +++ b/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: registrationStore.accountMadeTransaction, + value: asset.value, + label: labelMap[asset.label], + } + }) + } + }) + } +} + +export const transactionsStore = new TransactionsStore()