admin/BlockchainUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add processed fields

Browse Source
This commit is contained in:
kandrusyak
2022-08-24 13:24:10 +03:00
parent 446276fadf
commit e4f691ab78
5 changed files with 291 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/digitalId/ProfileId.jsx
View File

@@ -161,7 +161,6 @@ const Profile = observer (() => {
};
const addDataParameters = () => {
console.log(addedValues)
const label = addedValues.label.toLowerCase().split(' ').join('');
if(labelMap[label])
addedValues.key = addedValues.label.toLowerCase().split(' ').join('');

91
src/partials/profile/ProfileTableItem.jsx
View File

@@ -1,4 +1,5 @@
import React, { useState } from 'react';
import { statusMap } from '../../shared/statusMap';
function ProfileTableItem(props) {
const [descriptionOpen, setDescriptionOpen] = useState(false);
@@ -10,7 +11,13 @@ function ProfileTableItem(props) {
<div className="flex items-center">
<label className="inline-flex">
<span className="sr-only">Select</span>
<input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} />
<input
id={props.id}
className="form-checkbox"
type="checkbox"
onChange={props.handleClick}
checked={props.isChecked}
/>
</label>
</div>
</td>
@@ -20,39 +27,45 @@ function ProfileTableItem(props) {
<img className="rounded-full" src={props.image} width="40" height="40" alt={props.property} />
</div>
<div className="flex flex-col w-60">
<div className="font-semibold text-slate-800 text-base">{props.status==='Blockchained'?`${props.value.slice(0,4)}****${props.value.slice(props.value.length-4)}`:props.value}</div>
<div className="font-semibold text-slate-800 text-base">
{props.status === 'Blockchained' || props.status === statusMap.processed
? `${props.value.slice(0, 4)}****${props.value.slice(props.value.length - 4)}`
: props.value}
</div>
<div className="font-normal text-xxs">{props.property}</div>
</div>
</div>
</td>
<td className="py-3 whitespace-nowrap w-px">
<div className="w-fit text-xs inline-flex font-medium px-2.5 py-1">
{(props.status === 'Blockchained') ? (
<div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
{props.status}
</div>) :
(props.status === 'Stored') ? (
<div className="bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">
{props.status}
</div>) :
(props.status === 'Completed') ? (
<div className="bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
{props.status}
</div>) : (
<div className="bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">
{props.status}
</div>)
}
{props.status === 'Blockchained' ? (
<div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
) : props.status === statusMap.processed ? (
<div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
) : props.status === 'Stored' ? (
<div className="bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">{props.status}</div>
) : props.status === 'Completed' ? (
<div className="bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
) : (
<div className="bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
)}
</div>
</td>
<td className="px-2 py-3 whitespace-nowrap w-[340px] box-border">
<div className="flex flex-wrap items-center -m-1.5 justify-center">
<div className="flex -space-x-3 -ml-0.5">
{(props.avatars) ? (
props.avatars.map((avatar, index) => (
<img className="rounded-full border-2 border-slate-100 box-content" key={index} src={avatar} width="32" height="32" alt="Avatar" />
{props.avatars
? props.avatars.map((avatar, index) => (
<img
className="rounded-full border-2 border-slate-100 box-content"
key={index}
src={avatar}
width="32"
height="32"
alt="Avatar"
/>
))
): null}
: null}
<button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border-2 border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150">
<span className="sr-only">Add avatar</span>
<svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
@@ -93,12 +106,21 @@ function ProfileTableItem(props) {
<td colSpan="10" className="px-12 pt-3.5 pb-[14px]">
<div className="flex items-center gap-x-5">
<div>
<label className="block text-sm font-medium mb-1" htmlFor="placeholder">Seed</label>
<input id="placeholder" className="form-input w-[396px] bg-white" type="text" placeholder="2342423423423234223" />
<label className="block text-sm font-medium mb-1" htmlFor="placeholder">
Seed
</label>
<input
id="placeholder"
className="form-input w-[396px] bg-white"
type="text"
placeholder="2342423423423234223"
/>
</div>
<div>
<span className="block text-sm font-medium mb-1">Transaction</span>
<a href="" className="w-[396px] text-slate-400 font-normal text-sm underline">0x12831823791203192418234841238468</a>
<a href="" className="w-[396px] text-slate-400 font-normal text-sm underline">
0x12831823791203192418234841238468
</a>
</div>
</div>
{/* Progress validation bar */}
@@ -113,8 +135,11 @@ function ProfileTableItem(props) {
{props.transactions.map((data, index) => (
<li className="relative py-2" key={index}>
<div className="flex items-center mb-2.5">
{(props.transactions[index+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>
{props.transactions[index + 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>
) : null}
<div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
<svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
@@ -123,15 +148,21 @@ function ProfileTableItem(props) {
</div>
<h3 className="pl-9 whitespace-nowrap">
<span className="text-validateSize font-bold text-slate-800">Validate by </span>
<a href="" className="font-bold text-validateSize underline text-indigo-500">{data}</a>
<a href="" className="font-bold text-validateSize underline text-indigo-500">
{data}
</a>
</h3>
</div>
<div className="pl-9">
<a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{data}</a>
<a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">
{data}
</a>
<span className="block text-xxs font-normal mb-1">Transactions ID</span>
</div>
<div className="pl-9">
<a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{data.slice(2, data.length)}</a>
<a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">
{data.slice(2, data.length)}
</a>
<span className="block text-xxs font-normal mb-1">Validated data</span>
</div>
<div className="pl-9 pt-[14px]">

3
src/shared/fetchWrapper.js
View File

@@ -8,8 +8,9 @@ function prepareUrl(url) {
function handleRequest(method, url, headers, attempts, token, body) {
return new Promise((resolve, reject) => {
store.loading = true;
(function internalRequest() {
if(store)
store.loading = true;
return request(method, url, headers, token, body)
.then(resolve)
.catch(err => --attempts > 0 ? internalRequest() : reject(err))

3
src/shared/statusMap.js
View File

@@ -2,5 +2,6 @@ export const statusMap={
completed:'Completed',
incorrect:'Incorrect',
stored: 'Stored',
blockchained: 'Blockchained'
blockchained: 'Blockchained',
processed: 'Processed'
}

313
src/store/store.js
View File

@@ -1,169 +1,202 @@
import {reaction, makeAutoObservable, onBecomeObserved, onBecomeUnobserved} from "mobx";
import {cryptography} from "@liskhq/lisk-client";
import { passphrase, transactions } from "@liskhq/lisk-client";
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 {statusMap} from "../shared/statusMap";
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import {
encryptAccountData,
generateSetTransaction, generateTransaction,
hashAccountData,
} from '../utils/Utils';
import {
removeFeatureAssetSchema,
setFeatureAssetSchema,
} from '../utils/Schemas';
import { labelMap } from '../shared/labelMap';
import { statusMap } from '../shared/statusMap';
import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
import { encryptAccountData, generateTransaction, hashAccountData } from '../utils/Utils';
class Store {
_accountData = []
_accountData = [];
_passPhrase = ''
_passPhrase = '';
_nodeInfo = {}
_nodeInfo = {};
_keysArray = []
_keysArray = [];
_sharedData = []
_sharedData = [];
_transactionsInfo = []
_transactionsInfo = [];
_accountInfo = {};
_loading = false;
_tempTransactions = [];
constructor() {
makeAutoObservable(this, {});
reaction(() => this.keysArray, () => this.fetchSharedData())
reaction(() => this.address, () => this.fetchAccountInfo())
onBecomeObserved(this, "decryptedAccountData", () => this.fetchNewAccountData())
onBecomeObserved(this, "sharedData", () => this.fetchKeysArray())
onBecomeUnobserved(this, "sharedData", () => this.unobservedSharedData())
onBecomeObserved(this, "transactionsInfo", () => this.fetchTransactionsInfo())
onBecomeUnobserved(this, "transactionsInfo", () => this.unobservedTransactionsInfo())
reaction(
() => this.keysArray,
() => this.fetchSharedData()
);
reaction(
() => this.address,
() => this.fetchAccountInfo()
);
onBecomeObserved(this, 'decryptedAccountData', () => this.fetchNewAccountData());
onBecomeObserved(this, 'sharedData', () => this.fetchKeysArray());
onBecomeUnobserved(this, 'sharedData', () => this.unobservedSharedData());
onBecomeObserved(this, 'transactionsInfo', () => this.fetchTransactionsInfo());
onBecomeUnobserved(this, 'transactionsInfo', () => this.unobservedTransactionsInfo());
this.fetchNodeInfo()
};
this.fetchNodeInfo();
}
fetchNewAccountData() {
getNodeInfo()
.then((info) => {
this.fetchNodeInfoSuccess(info)
fetchWrapper.getAuth('data/private', {
this.fetchNodeInfoSuccess(info);
fetchWrapper
.getAuth('data/private', {
networkIdentifier: this.nodeInfo.networkIdentifier,
lastBlockID: this.nodeInfo.lastBlockID
}).then((res) => this.accountDataFetchChange(res))
lastBlockID: this.nodeInfo.lastBlockID,
})
.catch((err) => this.fetchNodeInfoFailed(err))
.then((res) => this.accountDataFetchChange(res))
.catch((err) => this.fetchError(err));
})
.catch((err) => this.fetchError(err));
}
fetchAccountInfo() {
fetchWrapper.get(`accounts/${this.address}`).then((res) => this.fetchAccountInfoSuccess(res))
fetchWrapper
.get(`accounts/${this.address}`)
.then((res) => this.fetchAccountInfoSuccess(res))
.catch((err) => this.fetchError(err));
}
fetchKeysArray() {
getNodeInfo()
.then((info) => {
this.fetchNodeInfoSuccess(info)
fetchWrapper.getAuth('data/shared/', {
this.fetchNodeInfoSuccess(info);
fetchWrapper
.getAuth('data/shared/', {
networkIdentifier: this.nodeInfo.networkIdentifier,
lastBlockID: this.nodeInfo.lastBlockID
}).then((res) => this.keysArrayFetchChange(res))
lastBlockID: this.nodeInfo.lastBlockID,
})
.catch((err) => this.fetchNodeInfoFailed(err))
.then((res) => this.keysArrayFetchChange(res));
})
.catch((err) => this.fetchError(err));
}
fetchTransactionsInfo() {
fetchWrapper.get(`account/transactions/${this.address}`, {
fetchWrapper
.get(`account/transactions/${this.address}`, {
networkIdentifier: this.nodeInfo.networkIdentifier,
lastBlockID: this.nodeInfo.lastBlockID
}).then((res) => this.saveInfoTransactions(res))
};
lastBlockID: this.nodeInfo.lastBlockID,
})
.then((res) => this.saveInfoTransactions(res))
.catch((err) => this.fetchError(err));
}
fetchTempTransactions() {
fetchWrapper
.get('node/transactions')
.then((res) => this.fetchTempTransactionsSuccess(res))
.catch((err) => this.fetchError(err));
}
fetchPassPhrase() {
this._passPhrase = sessionStorage.getItem('passPhrase') || ''
this._passPhrase = sessionStorage.getItem('passPhrase') || '';
}
fetchSharedData() {
this._keysArray.forEach((elem) => fetchWrapper.get(`data/shared/${elem}`).then((res) => this.changeSharedData(res)))
};
this._keysArray.forEach((elem) =>
fetchWrapper
.get(`data/shared/${elem}`)
.then((res) => this.changeSharedData(res))
.catch((err) => this.fetchError(err))
);
}
fetchNodeInfo() {
getNodeInfo()
.then((info) => this.fetchNodeInfoSuccess(info))
.catch((err) => this.fetchNodeInfoFailed(err))
.catch((err) => this.fetchError(err));
}
pushAccountData(data = this.accountData) {
fetchWrapper.postAuth('data/private', {
fetchWrapper
.postAuth(
'data/private',
{
networkIdentifier: this.nodeInfo.networkIdentifier,
lastBlockID: this.nodeInfo.lastBlockID
}, [...encryptAccountData(data, this.passPhrase, this.pubKey)])
lastBlockID: this.nodeInfo.lastBlockID,
},
[...encryptAccountData(data, this.passPhrase, this.pubKey)]
)
.then(() => this.fetchNewAccountData())
.catch((err) => this.fetchError(err));
}
pushAccountDataToBlockchain(data = this.decryptedAccountData) {
const [removed, changed] = hashAccountData(data, this.decryptedAccountData, this.accountFeaturesMap)
const builder = generateTransaction(BigInt(this.accountInfo?.sequence?.nonce || 0), this.addressAndPubKey.publicKey, this.nodeInfo.networkIdentifier, this.passPhrase);
const [removed, changed] = hashAccountData(data, this.decryptedAccountData, this.accountFeaturesMap);
const builder = generateTransaction(
BigInt(this.accountInfo?.sequence?.nonce || 0),
this.addressAndPubKey.publicKey,
this.nodeInfo.networkIdentifier,
this.passPhrase
);
let signedTx = null;
if(removed.length !== 0)
signedTx = builder.remove(removed);
if (removed.length !== 0) signedTx = builder.remove(removed);
if(changed.length !== 0)
signedTx = builder.update(changed)
if (changed.length !== 0) signedTx = builder.update(changed);
if (signedTx) {
fetchWrapper.post('transactions', {}, signedTx);
fetchWrapper.post('transactions', {}, signedTx)
.then(() => this.fetchTempTransactions())
.catch((err) => this.fetchError(err));
this.accountInfo.sequence.nonce++;
}
}
generatePassPhrase() {
this._passPhrase = passphrase.Mnemonic.generateMnemonic();
sessionStorage.setItem('passPhrase', this._passPhrase);
};
}
savePastPassPhrase(phrase) {
this._passPhrase=phrase
this._passPhrase = phrase;
sessionStorage.setItem('passPhrase', this._passPhrase);
};
}
unobservedTransactionsInfo() {
this._transactionsInfo = []
};
this._transactionsInfo = [];
}
unobservedSharedData() {
this._sharedData = []
};
this._sharedData = [];
}
changeSharedData(incomingData) {
this._sharedData.push({
data: incomingData.data,
})
});
}
saveDataRegistration(data) {
this._accountData = data;
};
}
clearDataRegistration() {
this._accountData = [];
};
}
saveInfoTransactions(transaction) {
this._transactionsInfo = transaction.data
this._transactionsInfo = transaction.data;
}
accountDataFetchChange(res) {
if (res.data) {
this._accountData = res.data;
}
};
this.fetchTempTransactions();
}
keysArrayFetchChange(res) {
this._keysArray = res.data;
@@ -171,48 +204,58 @@ class Store {
fetchNodeInfoSuccess(info) {
this._nodeInfo = info.data;
this.fetchPassPhrase()
}
fetchNodeInfoFailed(err) {
console.log(err);
this.fetchPassPhrase();
}
fetchAccountInfoSuccess(res) {
this._accountInfo = res.data;
if (this.accountInfo?.sequence?.nonce)
this.accountInfo.sequence.nonce = parseInt(this.accountInfo.sequence.nonce) || 0
this.accountInfo.sequence.nonce = parseInt(this.accountInfo.sequence.nonce) || 0;
}
fetchTempTransactionsSuccess(res) {
this._tempTransactions = res.data;
}
fetchError(err) {
console.log(err);
}
get sharedData() {
return this._sharedData.map(elem => ({
data: elem.data.map(item => ({
return this._sharedData.map((elem) => ({
data: elem.data.map((item) => ({
label: labelMap[item.label],
value: item.value,
}))
})),
}));
};
}
get transactionsInfo() {
return this._transactionsInfo.map(item => {
return this._transactionsInfo.map((item) => {
return {
id: item.id,
sender_avatar: item.asset.recipientAddress && generateSvgAvatar(item.senderPublicKey),
avatar_size: 24,
transaction: item.asset.features.map(asset => {
transaction: item.asset.features.map((asset) => {
return {
transaction_id: item.id,
address: item.asset.recipientAddress && cryptography.bufferToHex(cryptography.getAddressFromPublicKey(cryptography.hexToBuffer(item.senderPublicKey))),
address:
item.asset.recipientAddress &&
cryptography.bufferToHex(
cryptography.getAddressFromPublicKey(cryptography.hexToBuffer(item.senderPublicKey))
),
value: asset.value,
label: labelMap[asset.label] || asset.label
}
})
}
})
label: labelMap[asset.label] || asset.label,
};
}),
};
});
}
get decryptedAccountData() {
const allAccountData=this._accountData.concat(this.accountFeatures.filter(item=>!this._accountData.find(elem=>elem.label===item.label)))
const allAccountData = this._accountData.concat(
this.accountFeatures.filter((item) => !this._accountData.find((elem) => elem.label === item.label))
);
return allAccountData.map((elem) => {
const initialData = {
...elem,
@@ -220,52 +263,62 @@ class Store {
label: labelMap[elem.label] || elem.label,
status: '',
value: '',
seed: ''
seed: '',
};
if(this.processedFeatures[elem.label])
return {
...initialData,
status: statusMap.processed,
value: elem.value,
}
if(!this._accountData.find(item=>item.label===elem.label)) {
if (!this._accountData.find((item) => item.label === elem.label)) {
return {
...initialData,
status: statusMap.blockchained,
value: elem.value
value: elem.value,
};
}
}
const [seed, value] = cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, this.passPhrase, this.pubKey).split(':');
const hashValue=cryptography.hash(Buffer.concat([Buffer.from(seed, 'utf8'), cryptography.hash(value, 'utf8')])).toString('hex')
if(!this.accountFeatures.find(item=>item.label===elem.label)) {
const [seed, value] = cryptography
.decryptMessageWithPassphrase(elem.value, elem.value_nonce, this.passPhrase, this.pubKey)
.split(':');
const hashValue = cryptography
.hash(Buffer.concat([Buffer.from(seed, 'utf8'), cryptography.hash(value, 'utf8')]))
.toString('hex');
if (!this.accountFeatures.find((item) => item.label === elem.label)) {
return {
...initialData,
status: statusMap.stored,
value,
seed
seed,
};
}
}
if(this.accountFeatures.find(item=>item.label===elem.label).value!==hashValue) {
if (this.accountFeatures.find((item) => item.label === elem.label).value !== hashValue) {
return {
...initialData,
status: statusMap.incorrect,
value,
seed
}
seed,
};
}
return {
...initialData,
status: statusMap.completed,
value,
seed
}
})
seed,
};
});
}
get firstName() {
return this.decryptedAccountData.find(item => item.key === 'firstname')?.value
return this.decryptedAccountData.find((item) => item.key === 'firstname')?.value;
}
get lastName() {
return this.decryptedAccountData.find(item => item.key === 'secondname')?.value
return this.decryptedAccountData.find((item) => item.key === 'secondname')?.value;
}
get accountName() {
return this.firstName || this.lastName || this.pubKey
return this.firstName || this.lastName || this.pubKey;
}
get keysArray() {
@@ -273,12 +326,12 @@ class Store {
}
get passPhrase() {
return this._passPhrase
return this._passPhrase;
}
get accountData() {
return this._accountData
};
return this._accountData;
}
get accountInfo() {
return this._accountInfo;
@@ -297,15 +350,14 @@ class Store {
}
get address() {
return this.addressAndPubKey.address.toString('hex')
return this.addressAndPubKey.address.toString('hex');
}
get tokenKey() {
const stringToSign = this.nodeInfo.networkIdentifier + this.nodeInfo.lastBlockID;
if(!stringToSign)
return '';
const sign = cryptography.signDataWithPassphrase(Buffer.from(stringToSign, 'hex'), this.passPhrase).toString('hex')
return this.pubKey + ':' +sign
if (!stringToSign) return '';
const sign = cryptography.signDataWithPassphrase(Buffer.from(stringToSign, 'hex'), this.passPhrase).toString('hex');
return this.pubKey + ':' + sign;
}
get accountIdentity() {
@@ -317,10 +369,13 @@ class Store {
}
get accountFeaturesMap() {
return this.accountFeatures.reduce((acc, item) => ({
return this.accountFeatures.reduce(
(acc, item) => ({
...acc,
[item.label]: item.value
}), {})
[item.label]: item.value,
}),
{}
);
}
get loading() {
@@ -330,6 +385,22 @@ class Store {
set loading(value) {
this._loading = value;
}
get tempTransactions() {
return this._tempTransactions;
}
get processedFeatures() {
return this.tempTransactions
.filter(item => item.senderPublicKey === this.pubKey)
.reduce((acc, item) => {
const { features } = item.asset;
return {
...acc,
...features.reduce((obj, feature) => ({...obj, [feature.label]: true}), {})
}
}, {})
}
}
export const store = new Store();