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

fix some bugs

Browse Source
This commit is contained in:
kandrusyak
2022-08-09 00:14:21 +03:00
parent c659e17344
commit 59dd4c9554
15 changed files with 124 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.jsx
View File

@@ -46,21 +46,14 @@ function App() {
<> <>
<Routes> <Routes>
<Route exact path="/" element={<Onboarding1 />} /> <Route exact path="/" element={<Onboarding1 />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/dashboard/analytics" element={<Analytics />} />
<Route path="/dashboard/fintech" element={<Fintech />} />
<Route path="/digitalId/profile-id" element={<ProfileId />} /> <Route path="/digitalId/profile-id" element={<ProfileId />} />
<Route path="/digitalId/validate" element={<Validate />} /> <Route path="/digitalId/validate" element={<Validate />} />
<Route path="/digitalId/validation-log" element={<ValidationLog />} /> <Route path="/digitalId/validation-log" element={<ValidationLog />} />
<Route path="/digitalId/verify" element={<Verify />} /> <Route path="/digitalId/verify" element={<Verify />} />
<Route path="/messages" element={<Messages />} />
<Route path="/onboarding-2" element={<Onboarding2 />} /> <Route path="/onboarding-2" element={<Onboarding2 />} />
<Route path="/onboarding-3" element={<Onboarding3 />} /> <Route path="/onboarding-3" element={<Onboarding3 />} />
<Route path="/onboarding-4" element={<Onboarding4 />} /> <Route path="/onboarding-4" element={<Onboarding4 />} />
<Route path="/component/button" element={<ButtonPage />} />
<Route path="/shared-data" element={<SharedData />} /> <Route path="/shared-data" element={<SharedData />} />
<Route path="/component/badge" element={<BadgePage />} />
<Route path="/component/accordion" element={<AccordionPage />} />
<Route path="/reset-password" element={<ResetPassword />} /> <Route path="/reset-password" element={<ResetPassword />} />
<Route path="/signIn" element={<SignIn />} /> <Route path="/signIn" element={<SignIn />} />
</Routes> </Routes>

15
src/components/DropdownProfile.jsx
View File

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Transition from '../utils/Transition'; import Transition from '../utils/Transition';
import {registrationStore} from "../store/store"; import {store} from "../store/store";
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import UserAvatar from '../images/user-avatar-32.png'; import UserAvatar from '../images/user-avatar-32.png';
@@ -36,6 +36,11 @@ import UserAvatar from '../images/user-avatar-32.png';
return () => document.removeEventListener('keydown', keyHandler); return () => document.removeEventListener('keydown', keyHandler);
}); });
const logOut = () => {
sessionStorage.removeItem('passPhrase')
store.fetchPassPhrase()
}
return ( return (
<div className="relative inline-flex"> <div className="relative inline-flex">
<button <button
@@ -45,9 +50,9 @@ import UserAvatar from '../images/user-avatar-32.png';
onClick={() => setDropdownOpen(!dropdownOpen)} onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen} aria-expanded={dropdownOpen}
> >
<img className="w-8 h-8 rounded-full" src={generateSvgAvatar(registrationStore.pubKey) || UserAvatar} width="32" height="32" alt="User" /> <img className="w-8 h-8 rounded-full" src={generateSvgAvatar(store.pubKey) || UserAvatar} width="32" height="32" alt="User" />
<div className="flex items-center truncate"> <div className="flex items-center truncate">
<span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">Acme Inc.</span> <span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">{store.accountName}</span>
<svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12"> <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" /> <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg> </svg>
@@ -86,8 +91,8 @@ import UserAvatar from '../images/user-avatar-32.png';
<li> <li>
<Link <Link
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
to="/dashboard" to="/"
onClick={() => setDropdownOpen(!dropdownOpen)} onClick={() => logOut()}
> >
Sign Out Sign Out
</Link> </Link>

10
src/pages/Onboarding1.jsx
View File

@@ -4,14 +4,18 @@ import OnboardingImage from '../images/onboarding-image.jpg';
import OnboardingDecoration from '../images/auth-decoration.png'; import OnboardingDecoration from '../images/auth-decoration.png';
import Logo from "../images/logo.png"; import Logo from "../images/logo.png";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { registrationStore } from "../store/store"; import { store } from "../store/store";
import { Navigate } from "react-router-dom";
const Onboarding1 = observer(() => { const Onboarding1 = observer(() => {
useEffect(()=>{ useEffect(() => {
registrationStore.generatePassPhrase() store.clearDataRegistration()
}, []) }, [])
if(store.passPhrase)
return <Navigate to="/digitalId/profile-id" replace={true} />
return ( return (
<main className="bg-white"> <main className="bg-white">

58
src/pages/Onboarding2.jsx
View File

@@ -1,12 +1,14 @@
import React, {useState} from 'react'; import React, {useEffect, useMemo, useState} from 'react';
import { Link } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { registrationStore } from "../store/store"; import { store } from "../store/store";
import OnboardingImage from '../images/onboarding-image.jpg'; import OnboardingImage from '../images/onboarding-image.jpg';
import OnboardingDecoration from '../images/auth-decoration.png'; import OnboardingDecoration from '../images/auth-decoration.png';
import Logo from "../images/logo.png"; import Logo from "../images/logo.png";
const Onboarding2 = observer(() => { const Onboarding2 = observer(() => {
const navigate = useNavigate();
const [dataRegistration, setDataRegistration] = useState( const [dataRegistration, setDataRegistration] = useState(
{ {
firstname: '', firstname: '',
@@ -15,7 +17,8 @@ const Onboarding2 = observer(() => {
birthdate: '', birthdate: '',
} }
); );
const [fillingForm, setFillingForm] = useState(false);
const fillingForm = useMemo(() => !Object.keys(dataRegistration).find(item => !dataRegistration[item]), [dataRegistration])
const saveValueChange = (event) => { const saveValueChange = (event) => {
const newValue=event.target.value; const newValue=event.target.value;
@@ -25,22 +28,26 @@ const Onboarding2 = observer(() => {
}) })
}; };
const checkFillingForm = () => { const saveStoreRegistration = () => {
if (!Object.keys(dataRegistration).find(item => !dataRegistration[item])) { if (fillingForm) {
setFillingForm(true); store.saveDataRegistration(Object.keys(dataRegistration).map(item => ({
key: `${item}`,
value: dataRegistration[item],
})
))
navigate("/onboarding-3", { replace: true });
} }
}; };
const saveStoreRegistration = () => { useEffect(() => {
if (fillingForm) { if(store.accountData.length === 0)
registrationStore.saveDataRegistration(Object.keys(dataRegistration).map(item => { return;
return{ setDataRegistration(store.accountData.reduce((acc, item) => ({
key: `${item}`, ...acc,
value: dataRegistration[item], [item.key]: item.value
} }), {}))
}))
} }, [])
};
return ( return (
<main className="bg-white"> <main className="bg-white">
@@ -97,15 +104,15 @@ const Onboarding2 = observer(() => {
<div className="space-y-4 mb-8"> <div className="space-y-4 mb-8">
<div> <div>
<label className="block text-sm font-medium mb-1" htmlFor="first_name">First name <span className="text-rose-500">*</span></label> <label className="block text-sm font-medium mb-1" htmlFor="first_name">First name <span className="text-rose-500">*</span></label>
<input onBlur={checkFillingForm} id="firstname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" /> <input id="firstname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" value={dataRegistration.firstname} />
</div> </div>
<div> <div>
<label className="block text-sm font-medium mb-1" htmlFor="second_name">Last name <span className="text-rose-500">*</span></label> <label className="block text-sm font-medium mb-1" htmlFor="second_name">Last name <span className="text-rose-500">*</span></label>
<input onBlur={checkFillingForm} id="secondname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" /> <input id="secondname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" value={dataRegistration.secondname} />
</div> </div>
<div> <div>
<label className="block text-sm font-medium mb-1" htmlFor="gender">Gender <span className="text-rose-500">*</span></label> <label className="block text-sm font-medium mb-1" htmlFor="gender">Gender <span className="text-rose-500">*</span></label>
<select onBlur={checkFillingForm} id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full"> <select id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full" value={dataRegistration.gender}>
<option className="hidden"></option> <option className="hidden"></option>
<option>male</option> <option>male</option>
<option>female</option> <option>female</option>
@@ -113,7 +120,7 @@ const Onboarding2 = observer(() => {
</div> </div>
<div> <div>
<label className="block text-sm font-medium mb-1" htmlFor="birthdate">Date of birth <span className="text-rose-500">*</span></label> <label className="block text-sm font-medium mb-1" htmlFor="birthdate">Date of birth <span className="text-rose-500">*</span></label>
<input onBlur={checkFillingForm} id="birthdate" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" /> <input id="birthdate" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" value={dataRegistration.birthdate} />
</div> </div>
</div> </div>
<div className="flex items-center justify-between mt-6"> <div className="flex items-center justify-between mt-6">
@@ -123,17 +130,10 @@ const Onboarding2 = observer(() => {
<span className="text-sm ml-2">Email me about product news.</span> <span className="text-sm ml-2">Email me about product news.</span>
</label> </label>
</div> </div>
<button onClick={saveStoreRegistration} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap"> <button onClick={saveStoreRegistration} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">Sign Up
<Link id="signup" to={fillingForm && "/onboarding-3"} >Sign Up</Link>
</button> </button>
</div> </div>
</div> </div>
{/* Footer */}
<div className="pt-5 mt-6 border-t border-slate-200">
<div className="text-sm">
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
</div>
</div>
</div> </div>
</div> </div>

26
src/pages/Onboarding3.jsx
View File

@@ -1,28 +1,32 @@
import React from 'react'; import React, {useEffect} from 'react';
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import Logo from "../images/logo.png"; import Logo from "../images/logo.png";
import {registrationStore} from "../store/store"; import {store} from "../store/store";
const Onboarding3 = observer(()=>{ const Onboarding3 = observer(()=>{
function generatePassPhrase() {
registrationStore.generatePassPhrase(); useEffect(()=>{
store.generatePassPhrase();
}, [])
const generatePassPhrase = () => {
store.generatePassPhrase();
}; };
function savePassPhraseInStore (copiedPhrase) { const savePassPhraseInStore = copiedPhrase => {
if (copiedPhrase.split(' ').length === 12) { if (copiedPhrase.split(' ').length === 12) {
registrationStore.savePastPassPhrase(copiedPhrase.trim()); store.savePastPassPhrase(copiedPhrase.trim());
} }
}; };
function pastePassPhrase() { const pastePassPhrase = () => {
navigator.clipboard.readText().then(res => savePassPhraseInStore(res)); navigator.clipboard.readText().then(res => savePassPhraseInStore(res));
}; };
function convertPassPhraseToArray() { const convertPassPhraseToArray = () => store.passPhrase.split(' ').
return registrationStore.passPhrase.split(' ').map((item, index) => ({str:item, id:index})); map((item, index) => ({str: item, id: index}));
};
return ( return (
<main className="bg-white"> <main className="bg-white">
@@ -118,7 +122,7 @@ const Onboarding3 = observer(()=>{
{/* Image */} {/* Image */}
<div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true"> <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
<div className="flex mt-40 flex-col items-center gap-2.5"> <div className="flex mt-40 flex-col items-center gap-2.5">
<img className="object-cover object-center" src={generateSvgAvatar(registrationStore.pubKey)} width="493px" height="493px" alt="Onboarding" /> <img className="object-cover object-center" src={generateSvgAvatar(store.pubKey)} width="493px" height="493px" alt="Onboarding" />
<span className="text-sm">Your generated Digital ID</span> <span className="text-sm">Your generated Digital ID</span>
</div> </div>
</div> </div>

13
src/pages/Onboarding4.jsx
View File

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import Logo from "../images/logo.png"; import Logo from "../images/logo.png";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { registrationStore } from "../store/store"; import { store } from "../store/store";
const Onboarding4 = observer(() => { const Onboarding4 = observer(() => {
@@ -11,8 +11,9 @@ const Onboarding4 = observer(() => {
function createAccount() { function createAccount() {
if(checkBoxesSelected.length === 2) { if(checkBoxesSelected.length === 2) {
registrationStore.pushAccountData(); store.pushAccountData();
sessionStorage.setItem('passPhrase', registrationStore.passPhrase); sessionStorage.setItem('passPhrase', store.passPhrase);
store.clearDataRegistration();
} }
}; };
@@ -24,7 +25,7 @@ const Onboarding4 = observer(() => {
} }
}; };
const firstNameAccount = registrationStore.accountData.length && registrationStore.accountData.find(item => item.key === "firstname").value; const firstNameAccount = store.accountData.length && store.accountData.find(item => item.key === "firstname").value;
return ( return (
<main className="bg-white"> <main className="bg-white">
@@ -83,7 +84,7 @@ const Onboarding4 = observer(() => {
</svg> </svg>
<h1 className="text-3xl text-slate-800 font-bold mb-8">{firstNameAccount ? `Nice to meet you, ${firstNameAccount} 🙌` : 'Please, go back step 2'}</h1> <h1 className="text-3xl text-slate-800 font-bold mb-8">{firstNameAccount ? `Nice to meet you, ${firstNameAccount} 🙌` : 'Please, go back step 2'}</h1>
<button onClick={createAccount} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white"> <button onClick={createAccount} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
<Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/dashboard"}>Go To Profile -&gt;</Link> <Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/digitalId/profile-id"}>Go To Profile -&gt;</Link>
</button> </button>
</div> </div>
@@ -112,7 +113,7 @@ const Onboarding4 = observer(() => {
{/* Image */} {/* Image */}
<div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true"> <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
<div className="flex mt-40 flex-col items-center gap-2.5"> <div className="flex mt-40 flex-col items-center gap-2.5">
<img className="object-cover object-center" src={generateSvgAvatar(registrationStore.pubKey)} width="493px" height="493px" alt="Onboarding" /> <img className="object-cover object-center" src={generateSvgAvatar(store.pubKey)} width="493px" height="493px" alt="Onboarding" />
<span className="text-sm">Your generated Digital ID</span> <span className="text-sm">Your generated Digital ID</span>
</div> </div>
</div> </div>

16
src/pages/SignIn.jsx
View File

@@ -3,7 +3,7 @@ import {observer} from "mobx-react-lite";
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import Logo from "../images/logo.png"; import Logo from "../images/logo.png";
import {registrationStore} from "../store/store"; import {store} from "../store/store";
const SignIn = observer(()=>{ const SignIn = observer(()=>{
@@ -12,11 +12,11 @@ const SignIn = observer(()=>{
function savePassPhrase (copiedPhrase) { function savePassPhrase (copiedPhrase) {
if (copiedPhrase.split(' ').length === 12) { if (copiedPhrase.split(' ').length === 12) {
registrationStore.savePastPassPhrase(copiedPhrase.trim()); store.savePastPassPhrase(copiedPhrase.trim());
setPassPhrase(registrationStore.passPhrase); setPassPhrase(store.passPhrase);
setAddedPassPhrase(true); setAddedPassPhrase(true);
} }
}; }
function convertPassPhraseToArray() { function convertPassPhraseToArray() {
return passPhrase.split(' ').map((item, index) => ({str:item, id:index})); return passPhrase.split(' ').map((item, index) => ({str:item, id:index}));
@@ -24,7 +24,7 @@ const SignIn = observer(()=>{
function pastePassPhrase() { function pastePassPhrase() {
navigator.clipboard.readText().then(res => savePassPhrase(res)); navigator.clipboard.readText().then(res => savePassPhrase(res));
}; }
return ( return (
<main className="bg-white"> <main className="bg-white">
@@ -41,7 +41,7 @@ const SignIn = observer(()=>{
{/* Header */} {/* Header */}
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/dashboard"> <Link className="block" to="/">
<img alt='logo' src={Logo} width="89" height="32"/> <img alt='logo' src={Logo} width="89" height="32"/>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
@@ -75,7 +75,7 @@ const SignIn = observer(()=>{
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto"> <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
<Link to={addedPassPhrase && "/dashboard"}>Go To Profile -&gt;</Link> <Link to={addedPassPhrase && "/digitalId/profile-id"}>Go To Profile -&gt;</Link>
</button> </button>
</div> </div>
@@ -90,7 +90,7 @@ const SignIn = observer(()=>{
<div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true"> <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
<div className="flex mt-40 flex-col items-center gap-2.5"> <div className="flex mt-40 flex-col items-center gap-2.5">
<div className={`${addedPassPhrase || 'opacity-0'} w-[493px] h-[493px]`}> <div className={`${addedPassPhrase || 'opacity-0'} w-[493px] h-[493px]`}>
<img className="object-cover object-center" alt="" src={generateSvgAvatar(registrationStore.pubKey)}/> <img className="object-cover object-center" alt="" src={generateSvgAvatar(store.pubKey)}/>
</div> </div>
<span className="text-sm">Your Digital ID</span> <span className="text-sm">Your Digital ID</span>
</div> </div>

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

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { registrationStore } from "../../store/store"; import { store } from "../../store/store";
import Sidebar from '../../partials/Sidebar'; import Sidebar from '../../partials/Sidebar';
import { observer } from 'mobx-react-lite'; import { observer } from 'mobx-react-lite';
import Header from '../../partials/Header'; import Header from '../../partials/Header';
@@ -78,7 +78,7 @@ const Profile = observer (() => {
const handleSelectedItems = (selectedItems) => { const handleSelectedItems = (selectedItems) => {
setSelectedItems([...selectedItems]); setSelectedItems([...selectedItems]);
setUpdatedValues(registrationStore.decryptedAccountData.filter(({ key }) => selectedItems.includes(key)) setUpdatedValues(store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
.map(elem => ( .map(elem => (
(!elem.seed) ? { (!elem.seed) ? {
...elem, ...elem,
@@ -106,7 +106,7 @@ const Profile = observer (() => {
}; };
const sendAddedData = () => { const sendAddedData = () => {
const checkingAddedData = !registrationStore.decryptedAccountData const checkingAddedData = !store.decryptedAccountData
.some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20); .some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20);
if (checkingAddedData) { if (checkingAddedData) {
setAddPanelOpen(false); setAddPanelOpen(false);
@@ -124,13 +124,13 @@ const Profile = observer (() => {
}; };
const deleteDataParameters = () => { const deleteDataParameters = () => {
const changeData = registrationStore.decryptedAccountData.filter(item=>!selectedItems.includes(item.key)) const changeData = store.decryptedAccountData.filter(item=>!selectedItems.includes(item.key))
registrationStore.pushAccountData(changeData); store.pushAccountData(changeData);
}; };
const changeInitialArray = () => { const changeInitialArray = () => {
let newArr = []; let newArr = [];
registrationStore.decryptedAccountData.map(elem => { store.decryptedAccountData.map(elem => {
updatedValues.forEach(item => { updatedValues.forEach(item => {
if (elem.label === item.label) { if (elem.label === item.label) {
newArr.push({ newArr.push({
@@ -149,12 +149,12 @@ const Profile = observer (() => {
const changeDataParameters = () => { const changeDataParameters = () => {
const updatedData = changeInitialArray(); const updatedData = changeInitialArray();
registrationStore.pushAccountData(updatedData); store.pushAccountData(updatedData);
}; };
const addDataParameters = () => { const addDataParameters = () => {
addedValues.key = addedValues.label.toLowerCase().split(' ').join(''); addedValues.key = addedValues.label.toLowerCase().split(' ').join('');
registrationStore.pushAccountData(registrationStore.decryptedAccountData.concat(addedValues)); store.pushAccountData(store.decryptedAccountData.concat(addedValues));
}; };
const cancelAddPanel = () => { const cancelAddPanel = () => {
@@ -164,7 +164,7 @@ const Profile = observer (() => {
}; };
const cancelUpdatePanel = () => { const cancelUpdatePanel = () => {
setUpdatedValues(registrationStore.decryptedAccountData.filter(({ key }) => selectedItems.includes(key)) setUpdatedValues(store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
.map(elem => ( .map(elem => (
(!elem.seed) ? { (!elem.seed) ? {
...elem, ...elem,
@@ -235,7 +235,7 @@ const Profile = observer (() => {
</div> </div>
{/* Table */} {/* Table */}
<div className='w-[828px]'> <div className='w-[828px]'>
<ProfileTable isCheck={isCheck} handleClick={handleClick} userData={registrationStore.decryptedAccountData}/> <ProfileTable isCheck={isCheck} handleClick={handleClick} userData={store.decryptedAccountData}/>
</div> </div>
</div> </div>
{/* Left sidebar */} {/* Left sidebar */}
@@ -407,7 +407,7 @@ const Profile = observer (() => {
<div className={`${!removePanelOpen && 'hidden'} bg-white px-5 pt-4 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}> <div className={`${!removePanelOpen && 'hidden'} bg-white px-5 pt-4 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}>
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2">Summary</h2> <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2">Summary</h2>
<div className="flex flex-col"> <div className="flex flex-col">
{registrationStore.decryptedAccountData.filter(({ key }) => selectedItems.includes(key)).map(item => ( {store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key)).map(item => (
<span key={item.label} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.label}</span> <span key={item.label} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.label}</span>
))} ))}
</div> </div>

4
src/pages/digitalId/Validate.jsx
View File

@@ -6,7 +6,7 @@ import ValidateTable from "../../partials/validate/ValidateTable";
import ValidatePanel from "../../partials/validate/ValidatePanel"; import ValidatePanel from "../../partials/validate/ValidatePanel";
import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap"; import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {registrationStore} from "../../store/store"; import {store} from "../../store/store";
const Validate = observer(() => { const Validate = observer(() => {
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -57,7 +57,7 @@ const Validate = observer(() => {
<div className="pb-8 border-b border-zinc-200 mt-[50px]"> <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> <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID validation log ✨</h1>
</div> </div>
{registrationStore.transactionsInfo.map(item => { {store.transactionsInfo.map(item => {
return <ValidateRoadMap season={item} key={item.id}/> return <ValidateRoadMap season={item} key={item.id}/>
})} })}
</div> </div>

4
src/pages/digitalId/ValidationLog.jsx
View File

@@ -3,7 +3,7 @@ import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import Sidebar from '../../partials/Sidebar'; import Sidebar from '../../partials/Sidebar';
import Header from '../../partials/Header'; import Header from '../../partials/Header';
import {registrationStore} from "../../store/store"; import {store} from "../../store/store";
const ValidationLog = observer(() => { const ValidationLog = observer(() => {
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -27,7 +27,7 @@ const ValidationLog = observer(() => {
<div className="max-w-3xl m-auto mt-6"> <div className="max-w-3xl m-auto mt-6">
<div className="xl:-translate-x-16 max-w-fit"> <div className="xl:-translate-x-16 max-w-fit">
{/* PostsID */} {/* PostsID */}
{registrationStore.transactionsInfo.map(item => { {store.transactionsInfo.map(item => {
return <ValidateRoadMap season={item} key={item.id}/> return <ValidateRoadMap season={item} key={item.id}/>
})} })}
</div> </div>

4
src/pages/digitalId/Verify.jsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import Sidebar from '../../partials/Sidebar'; import Sidebar from '../../partials/Sidebar';
import Header from '../../partials/Header'; import Header from '../../partials/Header';
import {registrationStore} from "../../store/store"; import {store} from "../../store/store";
import { observer } from 'mobx-react-lite'; import { observer } from 'mobx-react-lite';
const Verify = observer(() => { const Verify = observer(() => {
@@ -42,7 +42,7 @@ const Verify = observer(() => {
</div> </div>
{/* Block */} {/* Block */}
<div className="flex flex-col gap-y-4"> <div className="flex flex-col gap-y-4">
{registrationStore.sharedData.map((item, index) => ( {store.sharedData.map((item, index) => (
<div key={index} className="w-[1095px] pl-5 pr-[13px] pb-8 bg-white border border-slate-200 rounded shadow-[0_4px_6px_-1px_rgba(5,23,42,0.08)]"> <div key={index} className="w-[1095px] pl-5 pr-[13px] pb-8 bg-white border border-slate-200 rounded shadow-[0_4px_6px_-1px_rgba(5,23,42,0.08)]">
{/* Header */} {/* Header */}
<div className="flex justify-end items-center h-[42px]"> <div className="flex justify-end items-center h-[42px]">

129
src/partials/Sidebar.jsx
View File

@@ -81,7 +81,7 @@ function Sidebar({
</svg> </svg>
</button> </button>
{/* Logo */} {/* Logo */}
<NavLink end to="/dashboard" className="block"> <NavLink end to="/digitalId/profile-id" className="block">
<img alt='logo' src={Logo} width="89" height="32"/> <img alt='logo' src={Logo} width="89" height="32"/>
</NavLink> </NavLink>
</div> </div>
@@ -97,101 +97,6 @@ function Sidebar({
<span className="lg:hidden lg:sidebar-expanded:block 2xl:block">Pages</span> <span className="lg:hidden lg:sidebar-expanded:block 2xl:block">Pages</span>
</h3> </h3>
<ul className="mt-3"> <ul className="mt-3">
{/* Dashboard */}
<SidebarLinkGroup activecondition={pathname === '/' || pathname.includes('dashboard')}>
{(handleClick, open) => {
return (
<React.Fragment>
<a
href="#0"
className={`block text-slate-200 hover:text-white truncate transition duration-150 ${
(pathname === '/' || pathname.includes('dashboard')) && 'hover:text-slate-200'
}`}
onClick={(e) => {
e.preventDefault();
sidebarExpanded ? handleClick() : setSidebarExpanded(true);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path
className={`fill-current text-slate-400 ${
(pathname === '/' || pathname.includes('dashboard')) && '!text-indigo-500'
}`}
d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0z"
/>
<path
className={`fill-current text-slate-600 ${(pathname === '/' || pathname.includes('dashboard')) && 'text-indigo-600'}`}
d="M12 3c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9z"
/>
<path
className={`fill-current text-slate-400 ${(pathname === '/' || pathname.includes('dashboard')) && 'text-indigo-200'}`}
d="M12 15c-1.654 0-3-1.346-3-3 0-.462.113-.894.3-1.285L6 6l4.714 3.301A2.973 2.973 0 0112 9c1.654 0 3 1.346 3 3s-1.346 3-3 3z"
/>
</svg>
<span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Dashboard
</span>
</div>
{/* Icon */}
<div className="flex shrink-0 ml-2">
<svg
className={`w-3 h-3 shrink-0 ml-1 fill-current text-slate-400 ${open && 'transform rotate-180'}`}
viewBox="0 0 12 12"
>
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</div>
</a>
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul className={`pl-9 mt-1 ${!open && 'hidden'}`}>
<li className="mb-1 last:mb-0">
<NavLink
end
to="/dashboard"
className={({ isActive }) =>
'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Main
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="/dashboard/analytics"
className={({ isActive }) =>
'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Analytics
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="/dashboard/fintech"
className={({ isActive }) =>
'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Fintech
</span>
</NavLink>
</li>
</ul>
</div>
</React.Fragment>
);
}}
</SidebarLinkGroup>
{/* digitalId */} {/* digitalId */}
<SidebarLinkGroup activecondition={pathname.includes('digitalId')}> <SidebarLinkGroup activecondition={pathname.includes('digitalId')}>
{(handleClick, open) => { {(handleClick, open) => {
@@ -302,38 +207,6 @@ function Sidebar({
); );
}} }}
</SidebarLinkGroup> </SidebarLinkGroup>
{/* Messages */}
<li className={`px-3 py-2 rounded-sm mb-0.5 last:mb-0 ${pathname.includes('messages') && 'bg-slate-900'}`}>
<NavLink
end
to="/messages"
className={`block text-slate-200 hover:text-white truncate transition duration-150 ${
pathname.includes('messages') && 'hover:text-slate-200'
}`}
>
<div className="flex items-center justify-between">
<div className="grow flex items-center">
<svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path
className={`fill-current text-slate-600 ${pathname.includes('messages') && 'text-indigo-500'}`}
d="M14.5 7c4.695 0 8.5 3.184 8.5 7.111 0 1.597-.638 3.067-1.7 4.253V23l-4.108-2.148a10 10 0 01-2.692.37c-4.695 0-8.5-3.184-8.5-7.11C6 10.183 9.805 7 14.5 7z"
/>
<path
className={`fill-current text-slate-400 ${pathname.includes('messages') && 'text-indigo-300'}`}
d="M11 1C5.477 1 1 4.582 1 9c0 1.797.75 3.45 2 4.785V19l4.833-2.416C8.829 16.85 9.892 17 11 17c5.523 0 10-3.582 10-8s-4.477-8-10-8z"
/>
</svg>
<span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Messages
</span>
</div>
{/* Badge */}
<div className="flex flex-shrink-0 ml-2">
<span className="inline-flex items-center justify-center h-5 text-xs font-medium text-white bg-indigo-500 px-2 rounded">4</span>
</div>
</div>
</NavLink>
</li>
</ul> </ul>
</div> </div>
</div> </div>

6
src/partials/profile/ProfileTable.jsx
View File

@@ -23,7 +23,7 @@ function ProfileTable({
const generalData = userData.filter(elem => data.general.includes(elem.label)); const generalData = userData.filter(elem => data.general.includes(elem.label));
const nationalityData = userData.filter(elem => data.nationality.includes(elem.label)); const nationalityData = userData.filter(elem => data.nationality.includes(elem.label));
const sosialData = userData.filter(elem => data.social.includes(elem.label)); const socialData = userData.filter(elem => data.social.includes(elem.label));
const otherData = userData.filter((elem) => const otherData = userData.filter((elem) =>
!data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label)); !data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label));
@@ -82,12 +82,12 @@ function ProfileTable({
</div> </div>
</div> </div>
{/* Social */} {/* Social */}
<div className={`${sosialData.length > 0 || 'hidden'}`}> <div className={`${socialData.length > 0 || 'hidden'}`}>
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Social 🖋️</h2> <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Social 🖋️</h2>
<div className="overflow-x-auto w-[828px]"> <div className="overflow-x-auto w-[828px]">
<table className="w-[828px] table-auto w-full"> <table className="w-[828px] table-auto w-full">
<tbody className="text-sm divide-slate-200 divide-y "> <tbody className="text-sm divide-slate-200 divide-y ">
{sosialData.map(data => { {socialData.map(data => {
return ( return (
<ProfileTableItem <ProfileTableItem
key={data.label} key={data.label}

10
src/shared/fetchWrapper.js
View File

@@ -1,4 +1,4 @@
import {registrationStore} from '../store/store'; import {store} from '../store/store';
function prepareUrl(url) { function prepareUrl(url) {
if (url.startsWith('http')) return url; if (url.startsWith('http')) return url;
@@ -63,7 +63,7 @@ function get(url, headers, attempts = 1) {
} }
function getAuth(url, headers, attempts = 1) { function getAuth(url, headers, attempts = 1) {
return handleRequest('GET', url, headers, attempts, registrationStore.tokenKey); return handleRequest('GET', url, headers, attempts, store.tokenKey);
} }
function del(url, headers, attempts = 1) { function del(url, headers, attempts = 1) {
@@ -71,7 +71,7 @@ function del(url, headers, attempts = 1) {
} }
function delAuth(url, headers, attempts = 1) { function delAuth(url, headers, attempts = 1) {
return handleRequest('DELETE', url, headers, attempts, registrationStore.tokenKey); return handleRequest('DELETE', url, headers, attempts, store.tokenKey);
} }
function post(url, headers, body, attempts = 1) { function post(url, headers, body, attempts = 1) {
@@ -79,7 +79,7 @@ function post(url, headers, body, attempts = 1) {
} }
function postAuth(url, headers, body, attempts = 1) { function postAuth(url, headers, body, attempts = 1) {
return handleRequest('POST', url, headers, attempts, registrationStore.tokenKey, body); return handleRequest('POST', url, headers, attempts, store.tokenKey, body);
} }
function put(url, headers, body, attempts = 1) { function put(url, headers, body, attempts = 1) {
@@ -87,7 +87,7 @@ function put(url, headers, body, attempts = 1) {
} }
function putAuth(url, headers, body, attempts = 1) { function putAuth(url, headers, body, attempts = 1) {
return handleRequest('PUT', url, headers, attempts, registrationStore.tokenKey, body); return handleRequest('PUT', url, headers, attempts, store.tokenKey, body);
} }
export const fetchWrapper = { export const fetchWrapper = {

26
src/store/store.js
View File

@@ -14,7 +14,7 @@ const usersImages = [User08,User06,User05,User09];
class Store { class Store {
_accountData = [] _accountData = []
_passPhrase _passPhrase = ''
_nodeInfo = {} _nodeInfo = {}
@@ -87,7 +87,7 @@ class Store {
}; };
fetchPassPhrase() { fetchPassPhrase() {
this._passPhrase = sessionStorage.getItem('passPhrase') this._passPhrase = sessionStorage.getItem('passPhrase') || ''
} }
fetchSharedData() { fetchSharedData() {
@@ -112,6 +112,10 @@ class Store {
this._accountData = data; this._accountData = data;
}; };
clearDataRegistration() {
this._accountData = [];
};
fetchNodeInfo() { fetchNodeInfo() {
getNodeInfo() getNodeInfo()
.then((info)=>this.fetchNodeInfoSuccess(info)) .then((info)=>this.fetchNodeInfoSuccess(info))
@@ -175,7 +179,7 @@ class Store {
return this._accountData.map((elem) => ({ return this._accountData.map((elem) => ({
...elem, ...elem,
key: elem.label, key: elem.label,
label: labelMap[elem.label], label: labelMap[elem.label] || elem.label,
value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, this.passPhrase, this.pubKey).split(':')[1] value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, this.passPhrase, this.pubKey).split(':')[1]
})) }))
} }
@@ -192,6 +196,18 @@ class Store {
}) })
} }
get firstName() {
return this.decryptedAccountData.find(item => item.key === 'firstname')?.value
}
get lastName() {
return this.decryptedAccountData.find(item => item.key === 'secondname')?.value
}
get accountName() {
return this.firstName || this.lastName || this.pubKey
}
get keysArray() { get keysArray() {
return this._keysArray; return this._keysArray;
} }
@@ -228,6 +244,6 @@ class Store {
const sign = cryptography.signDataWithPassphrase(Buffer.from(stringToSign, 'hex'), this.passPhrase).toString('hex') const sign = cryptography.signDataWithPassphrase(Buffer.from(stringToSign, 'hex'), this.passPhrase).toString('hex')
return this.pubKey + ':' +sign return this.pubKey + ':' +sign
} }
}; }
export const registrationStore = new Store(); export const store = new Store();