-
{/* Content */}
-
-
-
{/* Header */}
-
{/* Image */}
-
-
);
-})
+});
export default Onboarding1;
diff --git a/src/pages/Onboarding2.jsx b/src/pages/Onboarding2.jsx
index db80982..9276517 100644
--- a/src/pages/Onboarding2.jsx
+++ b/src/pages/Onboarding2.jsx
@@ -1,74 +1,81 @@
-import React, {useEffect, useMemo, useState} from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
-import { observer } from "mobx-react-lite";
-import { store } from "../store/store";
+import { observer } from 'mobx-react-lite';
+import { store } from '../store/store';
import OnboardingImage from '../images/onboarding-image.jpg';
import OnboardingDecoration from '../images/auth-decoration.png';
-import Logo from "../images/logo.png";
+import Logo from '../images/logo.png';
const Onboarding2 = observer(() => {
const navigate = useNavigate();
- const [dataRegistration, setDataRegistration] = useState(
- {
- firstname: '',
- secondname: '',
- gender: '',
- birthdate: '',
- }
+ const [dataRegistration, setDataRegistration] = useState({
+ firstname: '',
+ secondname: '',
+ gender: '',
+ birthdate: '',
+ });
+
+ const fillingForm = useMemo(
+ () =>
+ !Object.keys(dataRegistration).find((item) => !dataRegistration[item]),
+ [dataRegistration]
);
- const fillingForm = useMemo(() => !Object.keys(dataRegistration).find(item => !dataRegistration[item]), [dataRegistration])
-
const saveValueChange = (event) => {
- const newValue=event.target.value;
+ const newValue = event.target.value;
setDataRegistration({
...dataRegistration,
[event.target.id]: newValue,
- })
+ });
};
const saveStoreRegistration = () => {
if (fillingForm) {
- store.saveDataRegistration(Object.keys(dataRegistration).map(item => ({
+ store.saveDataRegistration(
+ Object.keys(dataRegistration).map((item) => ({
key: `${item}`,
value: dataRegistration[item],
- })
- ))
- navigate("/onboarding-3", { replace: true });
+ }))
+ );
+ navigate('/onboarding-3', { replace: true });
}
};
useEffect(() => {
- if(store.accountData.length === 0)
- return;
- setDataRegistration(store.accountData.reduce((acc, item) => ({
- ...acc,
- [item.key]: item.value
- }), {}))
-
- }, [])
+ if (store.accountData.length === 0) return;
+ setDataRegistration(
+ store.accountData.reduce(
+ (acc, item) => ({
+ ...acc,
+ [item.key]: item.value,
+ }),
+ {}
+ )
+ );
+ }, []);
return (
-
{/* Logo */}
- 
+
@@ -43,19 +43,42 @@ const Onboarding1 = observer(() => {
- Have an account? Sign In
+ Have an account?{' '}
+
+ Sign In
+
-
+
@@ -65,49 +88,120 @@ const Onboarding1 = observer(() => {
- - 1 + + 1 +
- - 2 + + 2 +
- - 3 + + 3 +
- - 4 + + 4 +
-
-
-
-
Tell us about your company ✨
++ Tell us about your company ✨ +
{/* Form */}
-
💸 Lorem ipsum is place text commonly?
- Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.
+
+ 💸 Lorem ipsum is place text commonly?
+
+
+ Lorem ipsum is placeholder text commonly used in the
+ graphic, print, and publishing industries for previewing
+ layouts.
+
-
+
@@ -119,24 +213,34 @@ const Onboarding1 = observer(() => {
-
{/* Content */}
-
-
-
{/* Header */}
-
-
{/* Image */}
-
-
);
});
diff --git a/src/pages/Onboarding3.jsx b/src/pages/Onboarding3.jsx
index e43686d..6016f5b 100644
--- a/src/pages/Onboarding3.jsx
+++ b/src/pages/Onboarding3.jsx
@@ -1,53 +1,55 @@
-import React, {useEffect} from 'react';
-import {observer} from "mobx-react-lite";
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
import { Link } from 'react-router-dom';
-import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
-import Logo from "../images/logo.png";
-import {store} from "../store/store";
+import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
+import Logo from '../images/logo.png';
+import { store } from '../store/store';
-const Onboarding3 = observer(()=>{
-
- useEffect(()=>{
+const Onboarding3 = observer(() => {
+ useEffect(() => {
store.generatePassPhrase();
- }, [])
+ }, []);
const generatePassPhrase = () => {
store.generatePassPhrase();
};
- const savePassPhraseInStore = copiedPhrase => {
+ const savePassPhraseInStore = (copiedPhrase) => {
if (copiedPhrase.split(' ').length === 12) {
store.savePastPassPhrase(copiedPhrase.trim());
}
};
const pastePassPhrase = () => {
- navigator.clipboard.readText().then(res => savePassPhraseInStore(res));
+ navigator.clipboard.readText().then((res) => savePassPhraseInStore(res));
};
- const convertPassPhraseToArray = () => store.passPhrase.split(' ').
- map((item, index) => ({str: item, id: index}));
+ const convertPassPhraseToArray = () =>
+ store.passPhrase
+ .split(' ')
+ .map((item, index) => ({ str: item, id: index }));
return (
-
{/* Logo */}
-
+
@@ -76,19 +83,42 @@ const Onboarding2 = observer(() => {
- Have an account? Sign In
+ Have an account?{' '}
+
+ Sign In
+
-
+
@@ -98,57 +128,120 @@ const Onboarding2 = observer(() => {
- - 1 + + 1 +
- - 2 + + 2 +
- - 3 + + 3 +
- - 4 + + 4 +
-
-
Create your Account ✨
++ Create your Account ✨ +
{/* Form */}
-
- saveValueChange(event)} className="form-input w-full" type="text" value={dataRegistration.firstname} />
+
+ saveValueChange(event)}
+ className="form-input w-full"
+ type="text"
+ value={dataRegistration.firstname}
+ />
-
- saveValueChange(event)} className="form-input w-full" type="text" value={dataRegistration.secondname} />
+
+ saveValueChange(event)}
+ className="form-input w-full"
+ type="text"
+ value={dataRegistration.secondname}
+ />
-
-
-
- saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" value={dataRegistration.birthdate} />
+
+ saveValueChange(event)}
+ className="form-input w-full"
+ type="date"
+ autoComplete="on"
+ value={dataRegistration.birthdate}
+ />
-
{/* Content */}
-
-
-
{/* Header */}
-
-
{/* Image */}
-
-
);
});
diff --git a/src/pages/Onboarding4.jsx b/src/pages/Onboarding4.jsx
index 06c2c8d..a1e4a9f 100644
--- a/src/pages/Onboarding4.jsx
+++ b/src/pages/Onboarding4.jsx
@@ -1,52 +1,54 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
import { Link } from 'react-router-dom';
-import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
-import Logo from "../images/logo.png";
-import {observer} from "mobx-react-lite";
-import { store } from "../store/store";
+import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
+import Logo from '../images/logo.png';
+import { observer } from 'mobx-react-lite';
+import { store } from '../store/store';
const Onboarding4 = observer(() => {
-
const [checkBoxesSelected, setCheckBoxesSelected] = useState([]);
function createAccount() {
- if(checkBoxesSelected.length === 2) {
+ if (checkBoxesSelected.length === 2) {
store.pushAccountData();
sessionStorage.setItem('passPhrase', store.passPhrase);
store.clearDataRegistration();
}
- };
+ }
function saveCheckBoxesValues(e) {
const { id, checked } = e.target;
setCheckBoxesSelected([...checkBoxesSelected, id]);
if (!checked) {
- setCheckBoxesSelected(checkBoxesSelected.filter(item => item !== id));
+ setCheckBoxesSelected(checkBoxesSelected.filter((item) => item !== id));
}
- };
+ }
- const firstNameAccount = store.accountData.length && store.accountData.find(item => item.key === "firstname").value;
+ const firstNameAccount =
+ store.accountData.length &&
+ store.accountData.find((item) => item.key === 'firstname').value;
return (
-
{/* Logo */}
-
+
@@ -55,19 +57,42 @@ const Onboarding3 = observer(()=>{
- Have an account? Sign In
+ Have an account?{' '}
+
+ Sign In
+
-
+
@@ -77,58 +102,94 @@ const Onboarding3 = observer(()=>{
- - 1 + + 1 +
- - 2 + + 2 +
- - 3 + + 3 +
- - 4 + + 4 +
-
-
Company information ✨
++ Company information ✨ +
{/* htmlForm */}
- {convertPassPhraseToArray().map(tag => (
-
-
- <- Back
+
+ <- Back
+
-
-
{/* Content */}
-
-
-
diff --git a/src/pages/SignIn.jsx b/src/pages/SignIn.jsx
index 80b079d..dc5425a 100644
--- a/src/pages/SignIn.jsx
+++ b/src/pages/SignIn.jsx
@@ -1,16 +1,15 @@
-import React, {useState} from 'react';
-import {observer} from "mobx-react-lite";
+import React, { useState } from 'react';
+import { observer } from 'mobx-react-lite';
import { Link } from 'react-router-dom';
-import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
-import Logo from "../images/logo.png";
-import {store} from "../store/store";
+import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
+import Logo from '../images/logo.png';
+import { store } from '../store/store';
-const SignIn = observer(()=>{
+const SignIn = observer(() => {
+ const [passPhrase, setPassPhrase] = useState('- - - - - - - - - - - -');
+ const [addedPassPhrase, setAddedPassPhrase] = useState(false);
- const[passPhrase, setPassPhrase] = useState('- - - - - - - - - - - -');
- const[addedPassPhrase, setAddedPassPhrase] = useState(false);
-
- function savePassPhrase (copiedPhrase) {
+ function savePassPhrase(copiedPhrase) {
if (copiedPhrase.split(' ').length === 12) {
store.savePastPassPhrase(copiedPhrase.trim());
setPassPhrase(store.passPhrase);
@@ -19,55 +18,67 @@ const SignIn = observer(()=>{
}
function convertPassPhraseToArray() {
- return passPhrase.split(' ').map((item, index) => ({str:item, id:index}));
+ return passPhrase
+ .split(' ')
+ .map((item, index) => ({ str: item, id: index }));
}
function pastePassPhrase() {
- navigator.clipboard.readText().then(res => savePassPhrase(res));
+ navigator.clipboard.readText().then((res) => savePassPhrase(res));
}
return (
-
{/* Header */}
-
-
{/* Image */}
-
-
);
});
diff --git a/src/pages/ResetPassword.jsx b/src/pages/ResetPassword.jsx
index 538b88e..4f0681d 100644
--- a/src/pages/ResetPassword.jsx
+++ b/src/pages/ResetPassword.jsx
@@ -2,55 +2,77 @@ import React from 'react';
import { Link } from 'react-router-dom';
import AuthImage from '../images/auth-image.jpg';
import AuthDecoration from '../images/auth-decoration.png';
-import Logo from "../images/logo.png";
+import Logo from '../images/logo.png';
function ResetPassword() {
return (
-
{/* Logo */}
-
+
@@ -54,19 +56,42 @@ const Onboarding4 = observer(() => {
- Have an account? Sign In
+ Have an account?{' '}
+
+ Sign In
+
-
+
@@ -76,50 +101,98 @@ const Onboarding4 = observer(() => {
- - 1 + + 1 +
- - 2 + + 2 +
- - 3 + + 3 +
- - 4 + + 4 +
-
-
-
-
{/* Content */}
{/* Image */}
-
-
);
}
diff --git a/src/pages/SharedData.jsx b/src/pages/SharedData.jsx
index 7a90a2d..34c56fd 100644
--- a/src/pages/SharedData.jsx
+++ b/src/pages/SharedData.jsx
@@ -1,14 +1,14 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { Link, Navigate, useParams } from "react-router-dom";
-import { generateSvgAvatar } from "../images/GenerateOnboardingSvg/GenerateSvg";
-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 SharedDataRoadMap from "../partials/sharedData/SharedDataRoadmap";
-import { store } from "../store/store";
-import { fetchWrapper } from "../shared/fetchWrapper";
-import { cryptography } from "@liskhq/lisk-client";
-import {generateTransaction} from '../utils/Utils';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Link, Navigate, useParams } from 'react-router-dom';
+import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
+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 SharedDataRoadMap from '../partials/sharedData/SharedDataRoadmap';
+import { store } from '../store/store';
+import { fetchWrapper } from '../shared/fetchWrapper';
+import { cryptography } from '@liskhq/lisk-client';
+import { generateTransaction } from '../utils/Utils';
function SharedData() {
const [encryptedData, setEncryptedData] = useState([]);
@@ -16,15 +16,15 @@ function SharedData() {
const { id } = useParams();
- const [address, pubKey] = id.split(":");
+ const [address, pubKey] = id.split(':');
- const passPhrase = sessionStorage.getItem("passPhrase");
+ const passPhrase = sessionStorage.getItem('passPhrase');
useEffect(() => {
fetchWrapper
- .get(`data/shared/${id}`)
- .then((res) => setEncryptedData(res.data ?? []))
- .catch((err) => console.log(err));
+ .get(`data/shared/${id}`)
+ .then((res) => setEncryptedData(res.data ?? []))
+ .catch((err) => console.log(err));
}, [id]);
const decryptedData = useMemo(() => {
@@ -32,21 +32,21 @@ function SharedData() {
let seed, value, hash;
try {
[seed, value] = cryptography
- .decryptMessageWithPassphrase(
- item.value,
- item.value_nonce,
- passPhrase,
- Buffer.from(pubKey, 'hex')
- )
- .split(":");
+ .decryptMessageWithPassphrase(
+ item.value,
+ item.value_nonce,
+ passPhrase,
+ Buffer.from(pubKey, 'hex')
+ )
+ .split(':');
hash = cryptography
- .hash(
- Buffer.concat([
- Buffer.from(seed, "utf8"),
- cryptography.hash(value, "utf8"),
- ])
- )
- .toString("hex");
+ .hash(
+ Buffer.concat([
+ Buffer.from(seed, 'utf8'),
+ cryptography.hash(value, 'utf8'),
+ ])
+ )
+ .toString('hex');
} catch (err) {
setHasError(true);
console.log(err);
@@ -62,19 +62,27 @@ function SharedData() {
}, [encryptedData]);
const validateAccountData = () => {
- const builder = generateTransaction(BigInt(store.accountInfo?.sequence?.nonce || 0),
- store.pubKey, store.nodeInfo.networkIdentifier, store.passPhrase)
+ const builder = generateTransaction(
+ BigInt(store.accountInfo?.sequence?.nonce || 0),
+ store.pubKey,
+ store.nodeInfo.networkIdentifier,
+ store.passPhrase
+ );
- const signedTx = builder.validate(decryptedData.map(e => ({
- label: e.label,
- value: Buffer.from(e.hash, 'hex')
- })), address)
+ const signedTx = builder.validate(
+ decryptedData.map((e) => ({
+ label: e.label,
+ value: Buffer.from(e.hash, 'hex'),
+ })),
+ address
+ );
if (signedTx) {
- fetchWrapper.post('transactions', {}, signedTx)
- .catch((err) => console.log(err));
+ fetchWrapper
+ .post('transactions', {}, signedTx)
+ .catch((err) => console.log(err));
}
- }
+ };
if (!passPhrase) return
-
{/* Header */}
{/* Logo */}
-
+
-
-
Reset your Password ✨
++ Reset your Password ✨ +
{/* Form */}
-
-
+
+
-
+
-
{/* Content */}
-
{/* Left sidebar */}
-
-
{/* Image */}
-
{/* Table */}
-
{/* Header */}
{/* Logo */}
-
+
- Have not an account? Sign Up
+ Have not an account?{' '}
+
+ Sign Up
+
-
-
-
-
Company information ✨
++ Company information ✨ +
{/* htmlForm */}
- {convertPassPhraseToArray().map(tag => (
-
-
-
+
{/* Button panel*/}
-
+
{/* Add panel */}
-
-
-
+
+
+
handleInput(e.target.value, 'label')}
@@ -307,48 +368,90 @@ const Profile = observer (() => {
onClick={openHint}
onBlur={(e) => closeHint(e.relatedTarget)}
/>
-
- 0) || 'hidden'}`}>
+
+ {alreadyExists && (
+ 0 || 'hidden'
+ }`}
+ >
- { alreadyExists && -
{propertyValues.map((element, index) => (
-
- selectHint(element)}>{element} +
- selectHint(element)} + > + {element} + ))}
This property already added!
}
+
+ This property already added!
+
+ )}
-
+
+
setPropertyValues([])}
- onChange={(e) => changeAddedValues(e.target.value, 'value')}
+ onChange={(e) =>
+ changeAddedValues(e.target.value, 'value')
+ }
value={addedValues.value}
/>
-
-
+
{/* Update panel */}
-
+
setPropertyValues([])}
- onChange={(e) => changeAddedValues(e.target.value, 'seed')}
+ onChange={(e) =>
+ changeAddedValues(e.target.value, 'seed')
+ }
value={addedValues.seed}
/>
- Store data on blockchain
+
+ Store data on blockchain
+
@@ -370,57 +473,111 @@ const Profile = observer (() => {
- setStoreOnBlockchain(!storeOnBlockchain)} />
-
+
{updatedValues.map((item, index) => (
))}
{/* Remove panel */}
-
-
+
changeUpdatedValues(e.target.value, 'label', item.key)}
+ onChange={(e) =>
+ changeUpdatedValues(
+ e.target.value,
+ 'label',
+ item.key
+ )
+ }
value={item.label}
disabled
/>
-
+
changeUpdatedValues(e.target.value, 'value', item.key)}
- value={item.status===statusMap.blockchained?blockChainValue : item.value}
+ onChange={(e) =>
+ changeUpdatedValues(
+ e.target.value,
+ 'value',
+ item.key
+ )
+ }
+ value={
+ item.status === statusMap.blockchained
+ ? blockChainValue
+ : item.value
+ }
/>
-
+
changeUpdatedValues(e.target.value, 'seed', item.key)}
+ onChange={(e) =>
+ changeUpdatedValues(
+ e.target.value,
+ 'seed',
+ item.key
+ )
+ }
value={item.seed}
/>
- {(updatedValues[index+1]) ? (
-
+ {updatedValues[index + 1] ? (
+
) : null}
- Store data on blockchain
+
+ Store data on blockchain
+
@@ -442,20 +599,46 @@ const Profile = observer (() => {
- setStoreOnBlockchain(!storeOnBlockchain)} />
-
-
Summary
+
+
{/* Share panel */}
- + Summary +
- {store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key)).map(item => (
- {item.label}
- ))}
+ {store.decryptedAccountData
+ .filter(({ key }) => selectedItems.includes(key))
+ .map((item) => (
+
+ {item.label}
+
+ ))}
- On blockchain too
+
+ On blockchain too
+
@@ -464,24 +647,39 @@ const Profile = observer (() => {
- setStoreOnBlockchain(!storeOnBlockchain)} />
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Terms.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+ sed do Terms.
+
-
-
-
+
- )
-})
+ );
+});
export default Validate;
diff --git a/src/pages/digitalId/ValidationLog.jsx b/src/pages/digitalId/ValidationLog.jsx
index 9644d80..9dc6e0f 100644
--- a/src/pages/digitalId/ValidationLog.jsx
+++ b/src/pages/digitalId/ValidationLog.jsx
@@ -1,42 +1,44 @@
-import React, {useState} from 'react';
-import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
-import {observer} from "mobx-react-lite";
+import React, { useState } from 'react';
+import ValidateRoadMap from '../../partials/validationLog/ValidateRoadMap';
+import { observer } from 'mobx-react-lite';
import Sidebar from '../../partials/Sidebar';
import Header from '../../partials/Header';
-import {store} from "../../store/store";
+import { store } from '../../store/store';
const ValidationLog = observer(() => {
const [sidebarOpen, setSidebarOpen] = useState(false);
return (
-
+
-
+
+
{/* Details */}
-
+
{
+
- )
-})
+ );
+});
-export default Profile
+export default Profile;
diff --git a/src/pages/digitalId/Validate.jsx b/src/pages/digitalId/Validate.jsx
index 351b92c..21ff5d9 100644
--- a/src/pages/digitalId/Validate.jsx
+++ b/src/pages/digitalId/Validate.jsx
@@ -1,12 +1,12 @@
import React, { useState } from 'react';
-import {observer} from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
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 {store} from "../../store/store";
+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 { store } from '../../store/store';
const Validate = observer(() => {
const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -23,12 +23,19 @@ const Validate = observer(() => {
{/* Top */}
{/* Divider */}
-
@@ -552,8 +781,11 @@ const Profile = observer (() => {
- 
+
+
+
+ 0.012 IDN
+
+
+ Total amount fee
- 0.012 IDN
- Total amount fee
- {/* Page header */}
+ {/* Page header */}
-
+
+ {store.transactionsInfo.map((item) => {
+ return
{/* Title */}
-
- Explore ->
+
+ Explore ->
+
0x28394710234192304719234
++ 0x28394710234192304719234 +
- @@ -53,20 +60,25 @@ const Validate = observer(() => {
-
- {store.transactionsInfo.map(item => {
- return Digital ID validation log ✨
++ Digital ID validation log ✨ +
- {/* Sidebar */}
-
- {/* Site header */}
-
-
- {/* Page header */}
-
- {/* Title */}
-
- {/*Psosts*/}
- Digital ID transaction log ✨
-
-
+ );
+});
export default ValidationLog;
diff --git a/src/pages/digitalId/Verify.jsx b/src/pages/digitalId/Verify.jsx
index 4ccdda6..044b222 100644
--- a/src/pages/digitalId/Verify.jsx
+++ b/src/pages/digitalId/Verify.jsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import Sidebar from '../../partials/Sidebar';
import Header from '../../partials/Header';
-import {store} from "../../store/store";
+import { store } from '../../store/store';
import { observer } from 'mobx-react-lite';
const Verify = observer(() => {
@@ -9,8 +9,8 @@ const Verify = observer(() => {
const [descriptionOpen, setDescriptionOpen] = useState(false);
const openShareLink = (id) => {
- window.open(`${window.location.origin}/#/shared-data/${id}`, '_blank')
- }
+ window.open(`${window.location.origin}/#/shared-data/${id}`, '_blank');
+ };
return (
- {/* PostsID */}
- {store.transactionsInfo.map(item => {
- return
- })}
-
+
+ {/* Sidebar */}
+
- )
-})
+
+ {/* Site header */}
+
+
+
+ {/* Page header */}
+
+
+ {/* Title */}
+
+ {/*Psosts*/}
+ + Digital ID transaction log ✨ +
+
+
-
-
+ {/* PostsID */}
+ {store.transactionsInfo.map((item) => {
+ return
@@ -24,48 +24,62 @@ const Verify = observer(() => {
{/* Page header */}
-
{/* Block */}
-
+ -
-
- - - -
- - - -
- - - -
+
-
+
- + + +
- + + +
- + + +
{store.sharedData.map((item, index) => (
-
+
{/* Header */}
{/* Buttons */}
{/* Content */}
-
-
@@ -73,13 +87,17 @@ const Verify = observer(() => {
+
diff --git a/src/partials/Sidebar.jsx b/src/partials/Sidebar.jsx
index ed03e0b..6e9c85d 100644
--- a/src/partials/Sidebar.jsx
+++ b/src/partials/Sidebar.jsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef } from "react";
-import { NavLink, useLocation } from "react-router-dom";
-import Logo from "../images/logo.png";
+import React, { useState, useEffect, useRef } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import Logo from '../images/logo.png';
-import SidebarLinkGroup from "./SidebarLinkGroup";
+import SidebarLinkGroup from './SidebarLinkGroup';
function Sidebar({ sidebarOpen, setSidebarOpen }) {
const location = useLocation();
@@ -10,9 +10,9 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
const trigger = useRef(null);
const sidebar = useRef(null);
- const storedSidebarExpanded = localStorage.getItem("sidebar-expanded");
+ const storedSidebarExpanded = localStorage.getItem('sidebar-expanded');
const [sidebarExpanded, setSidebarExpanded] = useState(
- storedSidebarExpanded === null ? false : storedSidebarExpanded === "true"
+ storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true'
);
// close on click outside
@@ -27,8 +27,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
return;
setSidebarOpen(false);
};
- document.addEventListener("click", clickHandler);
- return () => document.removeEventListener("click", clickHandler);
+ document.addEventListener('click', clickHandler);
+ return () => document.removeEventListener('click', clickHandler);
});
// close if the esc key is pressed
@@ -37,16 +37,16 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
if (!sidebarOpen || keyCode !== 27) return;
setSidebarOpen(false);
};
- document.addEventListener("keydown", keyHandler);
- return () => document.removeEventListener("keydown", keyHandler);
+ document.addEventListener('keydown', keyHandler);
+ return () => document.removeEventListener('keydown', keyHandler);
});
useEffect(() => {
- localStorage.setItem("sidebar-expanded", sidebarExpanded);
+ localStorage.setItem('sidebar-expanded', sidebarExpanded);
if (sidebarExpanded) {
- document.querySelector("body").classList.add("sidebar-expanded");
+ document.querySelector('body').classList.add('sidebar-expanded');
} else {
- document.querySelector("body").classList.remove("sidebar-expanded");
+ document.querySelector('body').classList.remove('sidebar-expanded');
}
}, [sidebarExpanded]);
@@ -55,7 +55,7 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
{/* Sidebar backdrop (mobile only) */}
@@ -65,7 +65,7 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
id="sidebar"
ref={sidebar}
className={`flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 transform h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-slate-800 p-4 transition-all duration-200 ease-in-out ${
- sidebarOpen ? "translate-x-0" : "-translate-x-64"
+ sidebarOpen ? 'translate-x-0' : '-translate-x-64'
}`}
>
{/* Sidebar header */}
@@ -111,15 +111,15 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
{item.data.map((elem, index) => (
-
diff --git a/src/partials/Header.jsx b/src/partials/Header.jsx
index a9ac698..048f9a3 100644
--- a/src/partials/Header.jsx
+++ b/src/partials/Header.jsx
@@ -2,21 +2,15 @@ import React, { useState } from 'react';
import UserMenu from '../components/DropdownProfile';
-function Header({
- sidebarOpen,
- setSidebarOpen
-}) {
-
- const [searchModalOpen, setSearchModalOpen] = useState(false)
+function Header({ sidebarOpen, setSidebarOpen }) {
+ const [searchModalOpen, setSearchModalOpen] = useState(false);
return (
-
diff --git a/src/pages/services/VPNServers.jsx b/src/pages/services/VPNServers.jsx
index 6f50eae..8a8a4d7 100644
--- a/src/pages/services/VPNServers.jsx
+++ b/src/pages/services/VPNServers.jsx
@@ -1,22 +1,22 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from 'react';
-import Sidebar from "../../partials/Sidebar";
-import Header from "../../partials/Header";
-import { QRCodeSVG } from "qrcode.react";
+import Sidebar from '../../partials/Sidebar';
+import Header from '../../partials/Header';
+import { QRCodeSVG } from 'qrcode.react';
-import VPNServeIcon from "../../images/vpn_server_icon.png";
-import { Filters } from "../../components/Filters";
+import VPNServeIcon from '../../images/vpn_server_icon.png';
+import { Filters } from '../../components/Filters';
const filters = {
- "View All": "",
- Active: "Active",
- Offline: "Offline",
+ 'View All': '',
+ Active: 'Active',
+ Offline: 'Offline',
};
function VPNServers() {
const [sidebarOpen, setSidebarOpen] = useState(false);
const [selectedServer, setSelectedServer] = useState(0);
- const [currentFilter, setCurrentFilter] = useState("View All");
+ const [currentFilter, setCurrentFilter] = useState('View All');
const qrContent = useMemo(
() => `
@@ -34,10 +34,10 @@ Endpoint = ${store.vpnServers?.[selectedServer]?.endpoint}
);
const downloadTxtFile = () => {
- const element = document.createElement("a");
- const file = new Blob([qrContent], { type: "text/plain" });
+ const element = document.createElement('a');
+ const file = new Blob([qrContent], { type: 'text/plain' });
element.href = URL.createObjectURL(file);
- element.download = "vpnConfig.conf";
+ element.download = 'vpnConfig.conf';
document.body.appendChild(element); // Required for this to work in FireFox
element.click();
};
@@ -183,7 +183,7 @@ Endpoint = ${store.vpnServers?.[selectedServer]?.endpoint}
-
- )
-})
+ );
+});
export default Verify;
diff --git a/src/pages/services/Delegates.jsx b/src/pages/services/Delegates.jsx
index 55eff72..1371751 100644
--- a/src/pages/services/Delegates.jsx
+++ b/src/pages/services/Delegates.jsx
@@ -1,29 +1,29 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
-import Sidebar from "../../partials/Sidebar";
-import Header from "../../partials/Header";
-import DropdownTransaction from "../../components/DropdownTransaction";
-import TransactionsTable from "../../partials/finance/TransactionsTable";
-import PaginationClassic from "../../components/PaginationClassic";
-import { observer } from "mobx-react-lite";
-import TransactionPanel from "../../partials/finance/TransactionPanel";
-import { Filters } from "../../components/Filters";
+import Sidebar from '../../partials/Sidebar';
+import Header from '../../partials/Header';
+import DropdownTransaction from '../../components/DropdownTransaction';
+import TransactionsTable from '../../partials/finance/TransactionsTable';
+import PaginationClassic from '../../components/PaginationClassic';
+import { observer } from 'mobx-react-lite';
+import TransactionPanel from '../../partials/finance/TransactionPanel';
+import { Filters } from '../../components/Filters';
const filters = {
- "View All": "",
- Voted: "Unvote",
- Pending: "Pending",
+ 'View All': '',
+ Voted: 'Unvote',
+ Pending: 'Pending',
};
const Delegates = observer(() => {
const [sidebarOpen, setSidebarOpen] = useState(false);
const [currentDelegate, setCurrentDelegate] = useState(null);
- const [currentFilter, setCurrentFilter] = useState("View All");
+ const [currentFilter, setCurrentFilter] = useState('View All');
- const [lockedFor, setLockedFor] = useState("Voiting");
+ const [lockedFor, setLockedFor] = useState('Voiting');
const lockedLabel = Object.values(
- lockedFor === "Voiting" ? store.processedVotes : store.accountLockedVotes
+ lockedFor === 'Voiting' ? store.processedVotes : store.accountLockedVotes
)
.reduce((sum, e) => sum + e, 0n)
.toString();
diff --git a/src/pages/services/VPNPrepare.jsx b/src/pages/services/VPNPrepare.jsx
index 3d015c4..2764915 100644
--- a/src/pages/services/VPNPrepare.jsx
+++ b/src/pages/services/VPNPrepare.jsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from "react";
-import Sidebar from "../../partials/Sidebar";
-import Header from "../../partials/Header";
-import VPNServiceImg from "../../images/vpn_service.png";
-import { observer } from "mobx-react-lite";
+import React, { useEffect, useState } from 'react';
+import Sidebar from '../../partials/Sidebar';
+import Header from '../../partials/Header';
+import VPNServiceImg from '../../images/vpn_service.png';
+import { observer } from 'mobx-react-lite';
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
const VPNPrepare = observer(() => {
const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -18,12 +18,12 @@ const VPNPrepare = observer(() => {
const canVote = store.accountBalance > 20;
const clickButton = () => {
- if (canVote) navigate("/services/delegates");
- else window.open("https://testnet.idntty.org/faucet", "_blank");
+ if (canVote) navigate('/services/delegates');
+ else window.open('https://testnet.idntty.org/faucet', '_blank');
};
useEffect(() => {
- if (store.canVPN) navigate("/services/vpn/servers");
+ if (store.canVPN) navigate('/services/vpn/servers');
}, [store.canVPN]);
return (
@@ -62,17 +62,17 @@ const VPNPrepare = observer(() => {
/>
- {elem.label}
- {elem.value}
+
+
@@ -92,7 +110,7 @@ const Verify = observer(() => {
+
+
+ {elem.label}
+
+
+ {elem.value}
+
{canVote - ? "Vote for VPN delegate to get service" - : "You cannot get the VPN service, sorry 😢"} + ? 'Vote for VPN delegate to get service' + : 'You cannot get the VPN service, sorry 😢'}
{canVote ? (
- "The tokens used for voting are locked, which means that they still belong to you but they cannot be used for transactions. The funds are locked for as long as you are voting using these tokens and you are able to unlock them any time you want, by removing them from the votes."
+ 'The tokens used for voting are locked, which means that they still belong to you but they cannot be used for transactions. The funds are locked for as long as you are voting using these tokens and you are able to unlock them any time you want, by removing them from the votes.'
) : (
<>
- Only users who can vote for a VPN delegate using{" "}
+ Only users who can vote for a VPN delegate using{' '}
at least 19.9 tokens can use this service.
- Unfortunately, your account currently has{" "}
+ Unfortunately, your account currently has{' '}
only {store.accountBalance} tokens, which is not
enough to vote.
@@ -89,7 +89,7 @@ const VPNPrepare = observer(() => {
Spent This Month
- 4673,00 Mb{" "}
+ 4673,00 Mb{' '}
/ 46730,00
Mb
@@ -192,7 +192,7 @@ Endpoint = ${store.vpnServers?.[selectedServer]?.endpoint}
-
{/* Header: Left side */}
-
{/* Hamburger button */}
-
{/* Header: Right side */}
-
{/* digitalId */}
-
- "block text-slate-400 hover:text-slate-200 transition duration-150 truncate " + - (isActive ? "!text-indigo-500" : "") + 'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + + (isActive ? '!text-indigo-500' : '') } > @@ -214,8 +214,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) { end to="/digitalId/validation-log" className={({ isActive }) => - "block text-slate-400 hover:text-slate-200 transition duration-150 truncate " + - (isActive ? "!text-indigo-500" : "") + 'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + + (isActive ? '!text-indigo-500' : '') } > @@ -228,8 +228,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) { end to="/digitalId/verify" className={({ isActive }) => - "block text-slate-400 hover:text-slate-200 transition duration-150 truncate " + - (isActive ? "!text-indigo-500" : "") + 'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + + (isActive ? '!text-indigo-500' : '') } > @@ -243,14 +243,14 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) { ); }} - + {(handleClick, open) => { return ( { e.preventDefault(); @@ -267,8 +267,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) { > -
- "block text-slate-400 hover:text-slate-200 transition duration-150 truncate " + - (isActive ? "!text-indigo-500" : "") + 'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + + (isActive ? '!text-indigo-500' : '') } > @@ -340,8 +340,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) { end to="/services/vpn" className={({ isActive }) => - "block text-slate-400 hover:text-slate-200 transition duration-150 truncate " + - (isActive ? "!text-indigo-500" : "") + 'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + + (isActive ? '!text-indigo-500' : '') } > diff --git a/src/partials/SidebarLinkGroup.jsx b/src/partials/SidebarLinkGroup.jsx index 7738423..64dd6b4 100644 --- a/src/partials/SidebarLinkGroup.jsx +++ b/src/partials/SidebarLinkGroup.jsx @@ -1,21 +1,21 @@ import React, { useState } from 'react'; -function SidebarLinkGroup({ - children, - activecondition, -}) { - +function SidebarLinkGroup({ children, activecondition }) { const [open, setOpen] = useState(activecondition); const handleClick = () => { setOpen(!open); - } + }; return ( - - +
- {children(handleClick, open)}
); } -export default SidebarLinkGroup; \ No newline at end of file +export default SidebarLinkGroup; diff --git a/src/partials/finance/TransactionPanel.jsx b/src/partials/finance/TransactionPanel.jsx index e64e138..24e0b9d 100644 --- a/src/partials/finance/TransactionPanel.jsx +++ b/src/partials/finance/TransactionPanel.jsx @@ -1,12 +1,12 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef, useState } from 'react'; -import Image from "../../images/transactions-image-04.svg"; -import moment from "moment"; -import { formatAddressBig } from "../../utils/Utils"; -import { generateSvgAvatar } from "../../images/GenerateOnboardingSvg/GenerateSvg"; -import { store } from "../../store/store"; -import UserAvatar from "../../images/user-avatar-32.png"; -import { observer } from "mobx-react-lite"; +import Image from '../../images/transactions-image-04.svg'; +import moment from 'moment'; +import { formatAddressBig } from '../../utils/Utils'; +import { generateSvgAvatar } from '../../images/GenerateOnboardingSvg/GenerateSvg'; +import { store } from '../../store/store'; +import UserAvatar from '../../images/user-avatar-32.png'; +import { observer } from 'mobx-react-lite'; const TransactionPanel = observer( ({ transactionPanelOpen, onClose, delegate, postTransaction }) => { @@ -17,17 +17,17 @@ const TransactionPanel = observer( const statusColor = () => { switch (delegate.status) { - case "Vote": - return "bg-emerald-100 text-emerald-600"; - case "Unvote": - return "bg-rose-100 text-rose-500"; + case 'Vote': + return 'bg-emerald-100 text-emerald-600'; + case 'Unvote': + return 'bg-rose-100 text-rose-500'; default: - return "bg-slate-100 text-slate-500"; + return 'bg-slate-100 text-slate-500'; } }; const amountLabel = - delegate.status === "Vote" ? "Voiting amount" : "Unvoiting amount"; + delegate.status === 'Vote' ? 'Voiting amount' : 'Unvoiting amount'; // close if the esc key is pressed useEffect(() => { @@ -35,14 +35,14 @@ const TransactionPanel = observer( if (!transactionPanelOpen || keyCode !== 27) return; onClose(); }; - document.addEventListener("keydown", keyHandler); - return () => document.removeEventListener("keydown", keyHandler); + document.addEventListener('keydown', keyHandler); + return () => document.removeEventListener('keydown', keyHandler); }); useEffect(() => { const status = delegate.status; - if (status === "Unvote") { + if (status === 'Unvote') { setAmount(store.accountSentVotes[delegate.address].toString()); } }, [delegate]); @@ -51,7 +51,7 @@ const TransactionPanel = observer(@@ -74,7 +74,7 @@ const TransactionPanel = observer( Vote Transaction- {moment().format("DD/MM/YYYY hh:mm A")} + {moment().format('DD/MM/YYYY hh:mm A')}{/* Details */}@@ -96,11 +96,11 @@ const TransactionPanel = observer({delegate?.dpos?.delegate?.username || - formatAddressBig(delegate.address || "")} + formatAddressBig(delegate.address || '')}{delegate.status}@@ -131,7 +131,7 @@ const TransactionPanel = observer(ADDRESS: - {formatAddressBig(delegate.address || "")} + {formatAddressBig(delegate.address || '')}diff --git a/src/partials/finance/TransactionsTable.jsx b/src/partials/finance/TransactionsTable.jsx index cc51a37..a77528d 100644 --- a/src/partials/finance/TransactionsTable.jsx +++ b/src/partials/finance/TransactionsTable.jsx @@ -1,8 +1,8 @@ -import React from "react"; -import TransactionItem from "./TransactionsTableItem"; +import React from 'react'; +import TransactionItem from './TransactionsTableItem'; -import Image01 from "../../images/transactions-image-01.svg"; -import { observer } from "mobx-react-lite"; +import Image01 from '../../images/transactions-image-01.svg'; +import { observer } from 'mobx-react-lite'; const TransactionsTable = observer(({ data, rowClick }) => { return ( diff --git a/src/partials/finance/TransactionsTableItem.jsx b/src/partials/finance/TransactionsTableItem.jsx index 60a6530..50f0f15 100644 --- a/src/partials/finance/TransactionsTableItem.jsx +++ b/src/partials/finance/TransactionsTableItem.jsx @@ -1,26 +1,26 @@ -import React from "react"; +import React from 'react'; -import ServiceImage from "../../images/service_icon.png"; -import { observer } from "mobx-react-lite"; +import ServiceImage from '../../images/service_icon.png'; +import { observer } from 'mobx-react-lite'; const TransactionsTableItem = observer((props) => { const statusColor = () => { switch (props.status) { - case "Vote": - return "bg-emerald-100 text-emerald-600"; - case "Unvote": - return "bg-rose-100 text-rose-500"; + case 'Vote': + return 'bg-emerald-100 text-emerald-600'; + case 'Unvote': + return 'bg-rose-100 text-rose-500'; default: - return "bg-slate-100 text-slate-500"; + return 'bg-slate-100 text-slate-500'; } }; const amountColor = () => { - switch (props.status === "Unvote") { - case "+": - return "text-emerald-500"; + switch (props.status === 'Unvote') { + case '+': + return 'text-emerald-500'; default: - return "text-slate-700"; + return 'text-slate-700'; } }; @@ -78,7 +78,7 @@ const TransactionsTableItem = observer((props) => {{props.status}diff --git a/src/partials/profile/ProfileTable.jsx b/src/partials/profile/ProfileTable.jsx index 9995b53..278c9a8 100644 --- a/src/partials/profile/ProfileTable.jsx +++ b/src/partials/profile/ProfileTable.jsx @@ -1,37 +1,72 @@ -import React, {useState, useEffect} from 'react'; +import React, { useState, useEffect } from 'react'; import ProfileTableItem from './ProfileTableItem'; import ProfileIcon from '../../images/profile-icon.svg'; -function ProfileTable({ - userData, - handleClick, - isCheck, -}) { - +function ProfileTable({ userData, handleClick, isCheck }) { const defaultData = { image: ProfileIcon, status: 'Stored', transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], - avatars: null + avatars: null, }; const data = { - general:["First name","Second name", "Gender", "Birthdate", "Place of birth"], - nationality:["Nationality", "National ID", "National doctype", "National doc ID", "National doc issue date", "National doc expiry date"], - social:["Telephone", "Twitter", "Facebook", "Instagram", "Youtube", "Wechat", "Tiktok", "Linkedin", "Vk", "Github", "Telegram", "Qq", "Snapchat", "Reddit"] - } + general: [ + 'First name', + 'Second name', + 'Gender', + 'Birthdate', + 'Place of birth', + ], + nationality: [ + 'Nationality', + 'National ID', + 'National doctype', + 'National doc ID', + 'National doc issue date', + 'National doc expiry date', + ], + social: [ + 'Telephone', + 'Twitter', + 'Facebook', + 'Instagram', + 'Youtube', + 'Wechat', + 'Tiktok', + 'Linkedin', + 'Vk', + 'Github', + 'Telegram', + 'Qq', + 'Snapchat', + 'Reddit', + ], + }; - const generalData = userData.filter(elem => data.general.includes(elem.label)); - const nationalityData = userData.filter(elem => data.nationality.includes(elem.label)); - const socialData = userData.filter(elem => data.social.includes(elem.label)); - const otherData = userData.filter((elem) => - !data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label)); + const generalData = userData.filter((elem) => + data.general.includes(elem.label) + ); + const nationalityData = userData.filter((elem) => + data.nationality.includes(elem.label) + ); + const socialData = userData.filter((elem) => + data.social.includes(elem.label) + ); + const otherData = userData.filter( + (elem) => + !data.general.includes(elem.label) && + !data.nationality.includes(elem.label) && + !data.social.includes(elem.label) + ); return ( <> - {/* General */} + {/* General */}0 || 'hidden'}`}> -General 🖋️
++ General 🖋️ +
{/* Nationality */}@@ -41,7 +76,9 @@ function ProfileTable({ key={data.label} id={data.key} image={defaultData.image} - value={data.value.charAt(0).toUpperCase()+data.value.slice(1)} + value={ + data.value.charAt(0).toUpperCase() + data.value.slice(1) + } property={data.label} status={data.status} transactions={defaultData.transactions} @@ -49,7 +86,7 @@ function ProfileTable({ handleClick={handleClick} isChecked={isCheck.includes(data.key)} /> - ) + ); })}
@@ -57,17 +94,21 @@ function ProfileTable({0 || 'hidden'}`}> -Nationality 🖋️
++ Nationality 🖋️ +
{/* Social */}- {nationalityData.map(data => { + {nationalityData.map((data) => { return (
@@ -83,58 +124,64 @@ function ProfileTable({- ) + ); })} 0 || 'hidden'}`}> -{/* Other */}Social 🖋️
++ Social 🖋️ +
- {socialData.map(data => { - return ( -
- ) - })} + {socialData.map((data) => { + return ( + + ); + })} 0 || 'hidden'}`}> -- ) + ); } export default ProfileTable; diff --git a/src/partials/profile/ProfileTableItem.jsx b/src/partials/profile/ProfileTableItem.jsx index 371bc66..63f32a0 100644 --- a/src/partials/profile/ProfileTableItem.jsx +++ b/src/partials/profile/ProfileTableItem.jsx @@ -24,12 +24,21 @@ function ProfileTableItem(props) {Other 🖋️
++ Other 🖋️ +
- {otherData.map(data => { - return ( -
- ) - })} + {otherData.map((data) => { + return ( + + ); + })} -+
- {props.status === statusMap.blockchained || props.status === statusMap.processed - ? `${props.value.slice(0, 4)}****${props.value.slice(props.value.length - 4)}` + {props.status === statusMap.blockchained || + props.status === statusMap.processed + ? `${props.value.slice(0, 4)}****${props.value.slice( + props.value.length - 4 + )}` : props.value}{props.property}@@ -39,15 +48,25 @@ function ProfileTableItem(props) {- )) +
-
-
+
-
-
+