Compare commits
66 Commits
Onboarding
...
DID-8
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
9820692cd9 | ||
|
|
5eb4ee16c0 | ||
|
|
bc364d1b85 | ||
|
|
8489bc375c | ||
|
|
7ad29e8fe0 | ||
|
|
0fb5764a70 | ||
|
|
5ebc965a2a | ||
|
|
138047fa10 | ||
|
|
a271da7bf9 | ||
|
|
79784cbcee | ||
|
|
596c44aac3 | ||
|
|
5d17137815 | ||
|
|
18bf373508 | ||
|
|
944c9989e9 | ||
|
|
202989f374 | ||
|
|
f21d10f830 | ||
|
|
c8604a56ac | ||
|
|
2d0ae35cc8 | ||
|
|
76f942b90f | ||
|
|
f0e0d9479d | ||
|
|
3403289e0a | ||
|
|
25fddec6e8 | ||
|
|
1d0cb45024 | ||
|
|
222850dfd9 | ||
|
|
8f225752cf | ||
|
|
038657751a | ||
|
|
29d7d6fdb8 | ||
|
|
e44dfee284 | ||
|
|
0f455f126d | ||
|
|
0d4f27660a | ||
|
|
9703371f28 | ||
|
|
16ca8a1df2 | ||
|
|
e883b190a7 | ||
|
|
85897a8efe | ||
|
|
5f85d1696a | ||
|
|
1c539e5255 | ||
|
|
bcfc018560 | ||
|
|
e175ca0295 | ||
|
|
bac246eac2 | ||
|
|
f65c99e86a | ||
|
|
63439b2da1 | ||
|
|
1d9368d200 | ||
|
|
3a4ed9daf9 | ||
|
|
54ccd3ed9f | ||
|
|
fe1105e9d6 | ||
|
|
95cc2ac1e0 | ||
|
|
b4516ef18e | ||
|
|
d617de75b5 | ||
|
|
83e5e39d3c | ||
|
|
f89d59e7df | ||
|
|
c944644db0 | ||
|
|
bfdddee46a | ||
|
|
0da68ddd63 | ||
|
|
f209ee5f5f | ||
|
|
9bef3d9311 | ||
|
|
632b98a81a | ||
|
|
eeaabeebf3 | ||
|
|
81f5ec2741 | ||
|
|
3fcda54070 | ||
|
|
49aff14a80 | ||
|
|
da04efbf80 | ||
|
|
541c5988e9 | ||
|
|
cfa5af78c0 | ||
|
|
fc4d9fb897 | ||
|
|
ed5565eb17 | ||
|
|
99512491fa |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,2 +1,3 @@
|
|||||||
# dependencies
|
# dependencies
|
||||||
/node_modules
|
/node_modules
|
||||||
|
.idea
|
||||||
15
Dockerfile
Normal file
15
Dockerfile
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
FROM node:16-alpine AS builder
|
||||||
|
|
||||||
|
WORKDIR /front
|
||||||
|
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
RUN npm install
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
FROM nginx:1.21.6-alpine as runner
|
||||||
|
|
||||||
|
COPY ./deploy/nginx.conf /etc/nginx/nginx.conf
|
||||||
|
COPY --from=builder /front/build /var/www/html
|
||||||
|
|
||||||
|
EXPOSE 8080
|
||||||
26
README.md
26
README.md
@@ -1,26 +0,0 @@
|
|||||||
# Mosaic React
|
|
||||||
|
|
||||||
React landing page template designed by Cruip.
|
|
||||||
|
|
||||||
## Project setup
|
|
||||||
```
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
### Compiles and hot-reloads for development
|
|
||||||
```
|
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
### Compiles and minifies for production
|
|
||||||
```
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
### Customize configuration
|
|
||||||
See [Configuration Reference](https://vitejs.dev/guide/).
|
|
||||||
|
|
||||||
## Support notes
|
|
||||||
We are shipping our templates with a very basic React configuration to let you quickly get into the development process, but we don't discourage you from using any other configuration or framework built on the top of React. So, please note that any request dealing with React (e.g. extra features, customisations, et cetera) is to be considered out of the support scope.
|
|
||||||
|
|
||||||
For more information about what support covers, please see our (FAQs)[https://cruip.com/faq/].
|
|
||||||
33
deploy/nginx.conf
Normal file
33
deploy/nginx.conf
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
worker_processes 1;
|
||||||
|
error_log /var/log/nginx/error.log warn;
|
||||||
|
pid /var/run/nginx.pid;
|
||||||
|
events {
|
||||||
|
worker_connections 1024;
|
||||||
|
}
|
||||||
|
http {
|
||||||
|
include mime.types;
|
||||||
|
default_type application/octet-stream;
|
||||||
|
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
|
||||||
|
'$status $body_bytes_sent "$http_referer" '
|
||||||
|
'"$http_user_agent" "$http_x_forwarded_for"';
|
||||||
|
access_log /var/log/nginx/access.log main;
|
||||||
|
sendfile on;
|
||||||
|
keepalive_timeout 65;
|
||||||
|
gzip_static on;
|
||||||
|
server {
|
||||||
|
listen 8080;
|
||||||
|
server_name localhost;
|
||||||
|
charset utf-8;
|
||||||
|
location / {
|
||||||
|
root /var/www/html;
|
||||||
|
try_files $uri /index.html;
|
||||||
|
etag on;
|
||||||
|
expires max;
|
||||||
|
add_header Cache-Control public;
|
||||||
|
location = /index.html {
|
||||||
|
expires 0;
|
||||||
|
add_header Cache-Control "no-cache, public, must-revalidate, proxy-revalidate";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
21
index.html
21
index.html
@@ -1,21 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Vite App</title>
|
|
||||||
</head>
|
|
||||||
<body class="font-inter antialiased bg-slate-100 text-slate-600">
|
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
||||||
<script>
|
|
||||||
if (localStorage.getItem('sidebar-expanded') == 'true') {
|
|
||||||
document.querySelector('body').classList.add('sidebar-expanded');
|
|
||||||
} else {
|
|
||||||
document.querySelector('body').classList.remove('sidebar-expanded');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
13275
package-lock.json
generated
13275
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
49
package.json
49
package.json
@@ -2,27 +2,60 @@
|
|||||||
"name": "mosaic-react",
|
"name": "mosaic-react",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "webpack-dev-server",
|
||||||
"build": "vite build",
|
"build": "webpack"
|
||||||
"preview": "vite preview"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@liskhq/lisk-client": "^5.2.2",
|
||||||
"@tailwindcss/forms": "^0.4.0",
|
"@tailwindcss/forms": "^0.4.0",
|
||||||
|
"autoprefixer": "^10.4.5",
|
||||||
|
"buffer": "^6.0.3",
|
||||||
"chart.js": "^3.5.0",
|
"chart.js": "^3.5.0",
|
||||||
"chartjs-adapter-moment": "^1.0.0",
|
"chartjs-adapter-moment": "^1.0.0",
|
||||||
|
"crypto-browserify": "^3.12.0",
|
||||||
|
"file-loader": "^6.2.0",
|
||||||
|
"html-webpack-plugin": "^5.5.0",
|
||||||
|
"mobx": "^6.6.0",
|
||||||
|
"mobx-react-lite": "^3.4.0",
|
||||||
"moment": "^2.29.1",
|
"moment": "^2.29.1",
|
||||||
|
"net": "^1.0.2",
|
||||||
|
"os-browserify": "^0.3.0",
|
||||||
|
"path-browserify": "^1.0.1",
|
||||||
|
"postcss-loader": "^7.0.0",
|
||||||
|
"process": "^0.11.10",
|
||||||
|
"querystring-es3": "^0.2.1",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-flatpickr": "^3.10.7",
|
"react-flatpickr": "^3.10.7",
|
||||||
"react-router-dom": "^6.2.1",
|
"react-router-dom": "^6.2.1",
|
||||||
"react-transition-group": "^4.4.1"
|
"react-transition-group": "^4.4.1",
|
||||||
|
"stream-browserify": "^3.0.0",
|
||||||
|
"url": "^0.11.0",
|
||||||
|
"util": "^0.12.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-react": "^1.0.7",
|
"@babel/core": "^7.18.5",
|
||||||
"autoprefixer": "^10.4.2",
|
"@babel/preset-env": "^7.18.2",
|
||||||
|
"@babel/preset-react": "^7.17.12",
|
||||||
|
"babel-loader": "^8.2.5",
|
||||||
|
"css-loader": "^6.7.1",
|
||||||
|
"html-loader": "^3.1.2",
|
||||||
"postcss": "^8.4.5",
|
"postcss": "^8.4.5",
|
||||||
"sass": "^1.49.0",
|
"sass": "^1.52.3",
|
||||||
|
"sass-loader": "^13.0.0",
|
||||||
|
"style-loader": "^3.3.1",
|
||||||
"tailwindcss": "^3.0.18",
|
"tailwindcss": "^3.0.18",
|
||||||
"vite": "^2.7.2"
|
"webpack": "^5.73.0",
|
||||||
|
"webpack-cli": "^4.10.0",
|
||||||
|
"webpack-dev-server": "^4.9.2"
|
||||||
|
},
|
||||||
|
"babel": {
|
||||||
|
"presets": [
|
||||||
|
"@babel/env",
|
||||||
|
"@babel/react"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browser": {
|
||||||
|
"fs": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import tailwind from 'tailwindcss'
|
const tailwind = require('tailwindcss')
|
||||||
import autoprefixer from 'autoprefixer'
|
const autoprefixer = require('autoprefixer')
|
||||||
import tailwindConfig from './src/css/tailwind.config.js'
|
const tailwindConfig = require('./src/tailwind.config.js')
|
||||||
|
|
||||||
export default {
|
module.exports = {
|
||||||
plugins: [tailwind(tailwindConfig), autoprefixer],
|
plugins: [tailwind(tailwindConfig), autoprefixer],
|
||||||
}
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
11
public/index.html
Normal file
11
public/index.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
|
|||||||
import {
|
import {
|
||||||
Routes,
|
Routes,
|
||||||
Route,
|
Route,
|
||||||
useLocation
|
useLocation,
|
||||||
} from 'react-router-dom';
|
} from 'react-router-dom';
|
||||||
|
|
||||||
import './css/style.scss';
|
import './css/style.scss';
|
||||||
|
|||||||
3
src/api/node.js
Normal file
3
src/api/node.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import {fetchWrapper} from '../shared/fetchWrapper';
|
||||||
|
|
||||||
|
export const getNodeInfo = (headers) => fetchWrapper.get('node/info/', headers)
|
||||||
@@ -1,12 +1,14 @@
|
|||||||
import React, { useState, useRef, useEffect } from 'react';
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
|
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 {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
||||||
import UserAvatar from '../images/user-avatar-32.png';
|
import UserAvatar from '../images/user-avatar-32.png';
|
||||||
|
|
||||||
function DropdownProfile({
|
const DropdownProfile = observer(({
|
||||||
align
|
align
|
||||||
}) {
|
})=>{
|
||||||
|
|
||||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||||
|
|
||||||
@@ -43,7 +45,7 @@ function DropdownProfile({
|
|||||||
onClick={() => setDropdownOpen(!dropdownOpen)}
|
onClick={() => setDropdownOpen(!dropdownOpen)}
|
||||||
aria-expanded={dropdownOpen}
|
aria-expanded={dropdownOpen}
|
||||||
>
|
>
|
||||||
<img className="w-8 h-8 rounded-full" src={localStorage.getItem('svgAvatar') || UserAvatar} width="32" height="32" alt="User" />
|
<img className="w-8 h-8 rounded-full" src={generateSvgAvatar(registrationStore.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">Acme Inc.</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">
|
||||||
@@ -95,6 +97,6 @@ function DropdownProfile({
|
|||||||
</Transition>
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
})
|
||||||
|
|
||||||
export default DropdownProfile;
|
export default DropdownProfile;
|
||||||
|
|||||||
@@ -3,7 +3,6 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
|
|
||||||
// Additional styles
|
|
||||||
@import 'additional-styles/utility-patterns.scss';
|
@import 'additional-styles/utility-patterns.scss';
|
||||||
@import 'additional-styles/range-slider.scss';
|
@import 'additional-styles/range-slider.scss';
|
||||||
@import 'additional-styles/toggle-switch.scss';
|
@import 'additional-styles/toggle-switch.scss';
|
||||||
|
|||||||
@@ -36,12 +36,9 @@ function createBlob(options) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export var generateSvgAvatar = ( function () {
|
export var generateSvgAvatar = ( function () {
|
||||||
return function (seed, raw) {
|
return function (publicKey, seed, raw) {
|
||||||
let pubKey = localStorage.getItem('svgKey') || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
|
let pubKey = publicKey || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
|
||||||
//pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88"
|
//pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88"
|
||||||
if (!localStorage.getItem('svgKey')) {
|
|
||||||
localStorage.setItem('svgKey', `${pubKey}`)
|
|
||||||
}
|
|
||||||
let particles = [];
|
let particles = [];
|
||||||
let gradients = ['#000000'];
|
let gradients = ['#000000'];
|
||||||
let defs = [];
|
let defs = [];
|
||||||
|
|||||||
@@ -1,8 +1,11 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import ReactDOM from 'react-dom'
|
import ReactDOM from 'react-dom'
|
||||||
import { BrowserRouter as Router } from 'react-router-dom'
|
import {Buffer} from "buffer";
|
||||||
|
import { HashRouter as Router } from 'react-router-dom'
|
||||||
import App from './App'
|
import App from './App'
|
||||||
|
|
||||||
|
globalThis.Buffer = Buffer
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<Router>
|
<Router>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import React, {useEffect, 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';
|
||||||
@@ -19,9 +19,6 @@ import DashboardCard10 from '../partials/dashboard/DashboardCard10';
|
|||||||
import DashboardCard11 from '../partials/dashboard/DashboardCard11';
|
import DashboardCard11 from '../partials/dashboard/DashboardCard11';
|
||||||
|
|
||||||
function Dashboard() {
|
function Dashboard() {
|
||||||
useEffect(() => {
|
|
||||||
localStorage.setItem('svgKey', '')
|
|
||||||
}, [])
|
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -4,8 +4,14 @@ import { Link } from 'react-router-dom';
|
|||||||
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";
|
||||||
|
import {observer} from "mobx-react-lite";
|
||||||
|
import {passphrase} from "@liskhq/lisk-client";
|
||||||
|
import {registrationStore} from "../store/store";
|
||||||
|
|
||||||
|
const Onboarding1 = observer(()=>{
|
||||||
|
let phrase = passphrase.Mnemonic.generateMnemonic()
|
||||||
|
registrationStore.savePassPhrase(phrase)
|
||||||
|
|
||||||
function Onboarding1() {
|
|
||||||
return (
|
return (
|
||||||
<main className="bg-white">
|
<main className="bg-white">
|
||||||
|
|
||||||
@@ -127,6 +133,6 @@ function Onboarding1() {
|
|||||||
|
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
})
|
||||||
|
|
||||||
export default Onboarding1;
|
export default Onboarding1;
|
||||||
|
|||||||
@@ -1,11 +1,45 @@
|
|||||||
import React from 'react';
|
import React, {useState} from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
import { observer } from "mobx-react-lite";
|
||||||
|
import { registrationStore } 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";
|
||||||
|
|
||||||
function Onboarding2() {
|
const Onboarding2 = observer(()=>{
|
||||||
|
const [dataRegistration, setDataRegistration] = useState(
|
||||||
|
{
|
||||||
|
first_name: '',
|
||||||
|
second_name: '',
|
||||||
|
gender: '',
|
||||||
|
birthdate: '',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
const [fillingForm, setFillingForm] = useState(false)
|
||||||
|
|
||||||
|
const saveValueChange = (event)=>{
|
||||||
|
const newValue=event.target.value;
|
||||||
|
setDataRegistration({
|
||||||
|
...dataRegistration,
|
||||||
|
[event.target.id]: newValue
|
||||||
|
})
|
||||||
|
if(!Object.keys(dataRegistration).find(item=>!dataRegistration[item])) {
|
||||||
|
setFillingForm(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveStoreRegistration = ()=>{
|
||||||
|
if(fillingForm) {
|
||||||
|
registrationStore.saveDataRegistration(Object.keys(dataRegistration).map(item=>{
|
||||||
|
return{
|
||||||
|
key: `${item}`,
|
||||||
|
value: dataRegistration[item]
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="bg-white">
|
<main className="bg-white">
|
||||||
|
|
||||||
@@ -60,23 +94,24 @@ function Onboarding2() {
|
|||||||
<form>
|
<form>
|
||||||
<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="email">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 id="email" className="form-input w-full" type="email" />
|
<input id="first_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium mb-1" htmlFor="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 id="name" className="form-input w-full" type="text" />
|
<input id="second_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium mb-1" htmlFor="role">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 id="role" className="form-select w-full">
|
<select id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full">
|
||||||
|
<option className="hidden"></option>
|
||||||
<option>male</option>
|
<option>male</option>
|
||||||
<option>feemale</option>
|
<option>feemale</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium mb-1" htmlFor="password">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 id="password" className="form-input w-full" type="password" autoComplete="on" />
|
<input id="birthdate" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between mt-6">
|
<div className="flex items-center justify-between mt-6">
|
||||||
@@ -86,8 +121,8 @@ function Onboarding2() {
|
|||||||
<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 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">
|
||||||
<Link to="/onboarding-3">Sign Up</Link>
|
<Link id="signup" to={fillingForm && "/onboarding-3"} >Sign Up</Link>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -114,6 +149,6 @@ function Onboarding2() {
|
|||||||
|
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
|
|
||||||
export default Onboarding2;
|
export default Onboarding2;
|
||||||
|
|||||||
@@ -1,10 +1,37 @@
|
|||||||
import React from 'react';
|
import React, { useState} from 'react';
|
||||||
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 { passphrase } from "@liskhq/lisk-client";
|
||||||
|
|
||||||
function Onboarding3() {
|
function Onboarding3() {
|
||||||
const arrayBadges = ['judge', 'jelly', 'wasp', 'true', 'clog', 'forward', 'talent', 'ozone', 'belive', 'fresh', 'bulk', 'hobby']
|
const [passPhrase, setPassPhrase] = useState(convertPhraseToArray(registrationStore.passPhrase))
|
||||||
|
function generatePassPhrase() {
|
||||||
|
let phrase = passphrase.Mnemonic.generateMnemonic()
|
||||||
|
registrationStore.savePassPhrase(phrase)
|
||||||
|
setPassPhrase(convertPhraseToArray(registrationStore.passPhrase))
|
||||||
|
}
|
||||||
|
|
||||||
|
function savePassPhraseInStore (copiedPhrase) {
|
||||||
|
let phrasePaste = convertPhraseToArray(copiedPhrase.trim())
|
||||||
|
if(phrasePaste.length===12) {
|
||||||
|
registrationStore.savePassPhrase(copiedPhrase.trim())
|
||||||
|
setPassPhrase(phrasePaste)
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function pastePassPhrase() {
|
||||||
|
navigator.clipboard.readText().then(res=>savePassPhraseInStore(res))
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertPhraseToArray(phrase) {
|
||||||
|
return phrase.split(' ').map((item, index) => ({str:item, id:index }))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="bg-white">
|
<main className="bg-white">
|
||||||
|
|
||||||
@@ -59,21 +86,21 @@ function Onboarding3() {
|
|||||||
<h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
|
<h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
|
||||||
{/* htmlForm */}
|
{/* htmlForm */}
|
||||||
<div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
|
<div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
|
||||||
{arrayBadges.map(tag => (
|
{passPhrase.map(tag => (
|
||||||
<button key={tag} className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
|
<button key={tag.id} className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
|
||||||
<span className="text-sm font-medium">{tag}</span>
|
<span className="text-sm font-medium">{tag.str}</span>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex pl-7 gap-x-5">
|
<div className="flex pl-7 gap-x-5">
|
||||||
<button className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
|
<button onClick={()=>pastePassPhrase()} className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
|
||||||
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
|
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
|
||||||
<path
|
<path
|
||||||
d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
|
d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span className="ml-2">Paste</span>
|
<span className="ml-2">Paste</span>
|
||||||
</button>
|
</button>
|
||||||
<button className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
|
<button onClick={()=>generatePassPhrase()} className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
|
||||||
<svg className="mb-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg className="mb-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M14.5744 5.66943L13.1504 7.09343C13.4284 7.44043 13.6564 7.75743 13.8194 8.00043C13.0594 9.13043 10.9694 11.8204 8.25836 11.9854L6.44336 13.8004C6.93936 13.9244 7.45736 14.0004 8.00036 14.0004C12.7074 14.0004 15.7444 8.71643 15.8714 8.49243C16.0424 8.18843 16.0434 7.81643 15.8724 7.51243C15.8254 7.42743 15.3724 6.63143 14.5744 5.66943Z" fill="#F43F5E"/>
|
<path d="M14.5744 5.66943L13.1504 7.09343C13.4284 7.44043 13.6564 7.75743 13.8194 8.00043C13.0594 9.13043 10.9694 11.8204 8.25836 11.9854L6.44336 13.8004C6.93936 13.9244 7.45736 14.0004 8.00036 14.0004C12.7074 14.0004 15.7444 8.71643 15.8714 8.49243C16.0424 8.18843 16.0434 7.81643 15.8724 7.51243C15.8254 7.42743 15.3724 6.63143 14.5744 5.66943Z" fill="#F43F5E"/>
|
||||||
<path fillRule="evenodd" clipRule="evenodd" d="M1.00038 16.0002C0.744375 16.0002 0.488375 15.9022 0.293375 15.7072C-0.0976249 15.3162 -0.0976249 14.6842 0.292375 14.2942L2.82138 11.7653C1.17238 10.2913 0.198375 8.61425 0.128375 8.48925C-0.0416249 8.18625 -0.0426249 7.81725 0.126375 7.51425C0.251375 7.28925 3.24537 2.00025 8.00037 2.00025C9.33138 2.00025 10.5154 2.43125 11.5484 3.03825L14.2934 0.29325C14.6844 -0.09775 15.3164 -0.09775 15.7074 0.29325C16.0984 0.68425 16.0984 1.31625 15.7074 1.70725L1.70738 15.7072C1.51238 15.9022 1.25638 16.0002 1.00038 16.0002ZM8.00037 4.00025C5.14637 4.00025 2.95837 6.83525 2.18138 7.99925C2.55938 8.56225 3.28538 9.51025 4.24038 10.3463L6.07438 8.51225C6.02938 8.34825 6.00037 8.17825 6.00037 8.00025C6.00037 6.89525 6.89537 6.00025 8.00037 6.00025C8.17838 6.00025 8.34838 6.02925 8.51237 6.07425L10.0784 4.50825C9.43738 4.20125 8.74237 4.00025 8.00037 4.00025Z" fill="#F43F5E"/>
|
<path fillRule="evenodd" clipRule="evenodd" d="M1.00038 16.0002C0.744375 16.0002 0.488375 15.9022 0.293375 15.7072C-0.0976249 15.3162 -0.0976249 14.6842 0.292375 14.2942L2.82138 11.7653C1.17238 10.2913 0.198375 8.61425 0.128375 8.48925C-0.0416249 8.18625 -0.0426249 7.81725 0.126375 7.51425C0.251375 7.28925 3.24537 2.00025 8.00037 2.00025C9.33138 2.00025 10.5154 2.43125 11.5484 3.03825L14.2934 0.29325C14.6844 -0.09775 15.3164 -0.09775 15.7074 0.29325C16.0984 0.68425 16.0984 1.31625 15.7074 1.70725L1.70738 15.7072C1.51238 15.9022 1.25638 16.0002 1.00038 16.0002ZM8.00037 4.00025C5.14637 4.00025 2.95837 6.83525 2.18138 7.99925C2.55938 8.56225 3.28538 9.51025 4.24038 10.3463L6.07438 8.51225C6.02938 8.34825 6.00037 8.17825 6.00037 8.00025C6.00037 6.89525 6.89537 6.00025 8.00037 6.00025C8.17838 6.00025 8.34838 6.02925 8.51237 6.07425L10.0784 4.50825C9.43738 4.20125 8.74237 4.00025 8.00037 4.00025Z" fill="#F43F5E"/>
|
||||||
@@ -99,7 +126,7 @@ function Onboarding3() {
|
|||||||
{/* 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()} width="493px" height="493px" alt="Onboarding" />
|
<img className="object-cover object-center" src={generateSvgAvatar(registrationStore.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>
|
||||||
|
|||||||
@@ -1,13 +1,29 @@
|
|||||||
import React from 'react';
|
import React, {useState} from 'react';
|
||||||
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 {observer} from "mobx-react-lite";
|
||||||
|
import { registrationStore } from "../store/store";
|
||||||
|
|
||||||
function Onboarding4() {
|
const Onboarding4 = observer(()=>{
|
||||||
|
|
||||||
function saveDigitalId() {
|
const [checkBoxesSelected, setCheckBoxesSelected] = useState([])
|
||||||
localStorage.setItem('svgAvatar', generateSvgAvatar())
|
|
||||||
|
function createAccount () {
|
||||||
|
if(checkBoxesSelected.length===2) {
|
||||||
|
registrationStore.pushAccountData()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveCheckBoxesValues(e) {
|
||||||
|
const { id, checked } = e.target
|
||||||
|
setCheckBoxesSelected([...checkBoxesSelected, id])
|
||||||
|
if (!checked) {
|
||||||
|
setCheckBoxesSelected(checkBoxesSelected.filter(item=>item!==id))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const firstNameAccount = registrationStore.accountData.length && registrationStore.accountData.find(item=>item.key==="first_name").value
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="bg-white">
|
<main className="bg-white">
|
||||||
@@ -64,20 +80,20 @@ function Onboarding4() {
|
|||||||
<circle className="text-emerald-100" cx="32" cy="32" r="32" />
|
<circle className="text-emerald-100" cx="32" cy="32" r="32" />
|
||||||
<path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
|
<path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
|
||||||
</svg>
|
</svg>
|
||||||
<h1 className="text-3xl text-slate-800 font-bold mb-8">Nice to meet you, Ivan 🙌</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={()=>saveDigitalId()} 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 to="/dashboard">Go To Profile -></Link>
|
<Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/dashboard"}>Go To Profile -></Link>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="mr-1">
|
<div className="mr-1">
|
||||||
<label className="flex items-center">
|
<label className="flex items-center">
|
||||||
<input type="checkbox" className="form-checkbox" />
|
<input id="checkbox-1" onChange={(e)=>saveCheckBoxesValues(e)} type="checkbox" className="form-checkbox" />
|
||||||
<span className="text-sm ml-2">I understand that Idntty cannot recover pass phrase</span>
|
<span className="text-sm ml-2">I understand that Idntty cannot recover pass phrase</span>
|
||||||
</label>
|
</label>
|
||||||
<label className="flex items-center">
|
<label className="flex items-center">
|
||||||
<input type="checkbox" className="form-checkbox" />
|
<input id="checkbox-2" onChange={(e)=>saveCheckBoxesValues(e)} type="checkbox" className="form-checkbox" />
|
||||||
<div className="text-sm ml-2">
|
<div className="text-sm ml-2">
|
||||||
I <Link className="text-indigo-500 hover:text-indigo-600 underline" to="/">store my pharse</Link> very carefuly
|
I <Link className="text-indigo-500 hover:text-indigo-600 underline" to="/">store my pharse</Link> very carefuly
|
||||||
</div>
|
</div>
|
||||||
@@ -95,7 +111,7 @@ function Onboarding4() {
|
|||||||
{/* 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()} width="493px" height="493px" alt="Onboarding" />
|
<img className="object-cover object-center" src={generateSvgAvatar(registrationStore.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>
|
||||||
@@ -104,6 +120,6 @@ function Onboarding4() {
|
|||||||
|
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
|
|
||||||
export default Onboarding4;
|
export default Onboarding4;
|
||||||
|
|||||||
@@ -1,34 +1,89 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import { userDataStore } from '../../store/userDataStore';
|
||||||
|
import { registrationStore } from "../../store/store";
|
||||||
import Sidebar from '../../partials/Sidebar';
|
import Sidebar from '../../partials/Sidebar';
|
||||||
|
import { observer } from 'mobx-react-lite';
|
||||||
import Header from '../../partials/Header';
|
import Header from '../../partials/Header';
|
||||||
import ProfileTable from '../../partials/digitalId/ProfileTable';
|
import ProfileTable from '../../partials/digitalId/ProfileTable';
|
||||||
import Image from '../../images/transactions-image-04.svg';
|
import Image from '../../images/transactions-image-04.svg';
|
||||||
import ProfileIcon from '../../images/profile-icon.svg';
|
|
||||||
import Avatar01 from '../../images/avatar-01.jpg';
|
|
||||||
import Avatar02 from '../../images/avatar-02.jpg';
|
|
||||||
import Avatar03 from '../../images/avatar-03.jpg';
|
|
||||||
|
|
||||||
function Profile () {
|
const Profile = observer (() => {
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
const [buttonPanelOpen, setButtonPanelOpen] = useState(true);
|
const [buttonPanelOpen, setButtonPanelOpen] = useState(true);
|
||||||
const [removePanelOpen, setRemovePanelOpen] = useState(false);
|
const [removePanelOpen, setRemovePanelOpen] = useState(false);
|
||||||
const [changePanelOpen, setChangePanelOpen] = useState(false);
|
const [changePanelOpen, setChangePanelOpen] = useState(false);
|
||||||
const [toggle, setToggle] = useState(true);
|
const [toggle, setToggle] = useState(true);
|
||||||
const [addPanelOpen, setAddPanelOpen] = useState(false);
|
const [addPanelOpen, setAddPanelOpen] = useState(false);
|
||||||
|
const [updatePanelOpen, setUpdatePanelOpen] = useState(false);
|
||||||
const [selectedItems, setSelectedItems] = useState([]);
|
const [selectedItems, setSelectedItems] = useState([]);
|
||||||
|
|
||||||
|
const defaultValues = {
|
||||||
|
label: '',
|
||||||
|
value: '',
|
||||||
|
seed: Math.floor(Math.random() * 90000000000000000000)
|
||||||
|
};
|
||||||
|
|
||||||
|
const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc id', 'National doc issue date', 'National doc expiry date'];
|
||||||
|
const [propertyValues, setPropertyValues] = useState([]);
|
||||||
|
const [updatedValues, setUpdatedValues] = useState([defaultValues]);
|
||||||
|
const [addedValues, setAddedValues] = useState(defaultValues);
|
||||||
|
|
||||||
|
const openHint = () => {
|
||||||
|
if (!addedValues.label) {
|
||||||
|
setPropertyValues(initialPropertyValues);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeAddedValues = (value, field) => {
|
||||||
|
setAddedValues((prevState) => (
|
||||||
|
field !== 'seed' ? {
|
||||||
|
...prevState,
|
||||||
|
[field]: value
|
||||||
|
} : {
|
||||||
|
...prevState,
|
||||||
|
[field]: +value,
|
||||||
|
}))
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeUpdatedValues = (value, field, key) => {
|
||||||
|
setUpdatedValues((prevState) =>
|
||||||
|
prevState.map((elem) => (
|
||||||
|
(elem.key === key && field !== 'seed') ? {
|
||||||
|
...elem,
|
||||||
|
[field]: value,
|
||||||
|
} :
|
||||||
|
(elem.key === key) ? {
|
||||||
|
...elem,
|
||||||
|
[field]: +value,
|
||||||
|
} : elem
|
||||||
|
))
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeHint = (element) => {
|
||||||
|
changeAddedValues(element, 'label');
|
||||||
|
setPropertyValues([]);
|
||||||
|
}
|
||||||
|
|
||||||
const handleSelectedItems = (selectedItems) => {
|
const handleSelectedItems = (selectedItems) => {
|
||||||
setSelectedItems([...selectedItems]);
|
setSelectedItems([...selectedItems]);
|
||||||
|
setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key))
|
||||||
|
.map(elem => (
|
||||||
|
(!elem.seed) ? {
|
||||||
|
...elem,
|
||||||
|
seed: Math.floor(Math.random() * 90000000000000000000)
|
||||||
|
}: elem)));
|
||||||
if (selectedItems.length > 0) {
|
if (selectedItems.length > 0) {
|
||||||
setButtonPanelOpen(false);
|
setButtonPanelOpen(false);
|
||||||
setAddPanelOpen(false);
|
setAddPanelOpen(false);
|
||||||
setChangePanelOpen(true);
|
setChangePanelOpen(true);
|
||||||
}
|
}
|
||||||
if (removePanelOpen === true) {
|
if (removePanelOpen === true || updatePanelOpen === true) {
|
||||||
setChangePanelOpen(false);
|
setChangePanelOpen(false);
|
||||||
}
|
}
|
||||||
if (selectedItems.length === 0) {
|
if (selectedItems.length === 0) {
|
||||||
setRemovePanelOpen(false);
|
setRemovePanelOpen(false);
|
||||||
|
setUpdatePanelOpen(false);
|
||||||
setButtonPanelOpen(true);
|
setButtonPanelOpen(true);
|
||||||
setChangePanelOpen(false);
|
setChangePanelOpen(false);
|
||||||
}
|
}
|
||||||
@@ -39,9 +94,64 @@ function Profile () {
|
|||||||
setButtonPanelOpen(false);
|
setButtonPanelOpen(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
const cancelAddPanel = () => {
|
const sendAddedData = () => {
|
||||||
|
if (!userDataStore.decryptedData.some((element) => element.label === addedValues.label) && (addedValues.seed.toString().length === 20)) {
|
||||||
setAddPanelOpen(false);
|
setAddPanelOpen(false);
|
||||||
setButtonPanelOpen(true);
|
setButtonPanelOpen(true);
|
||||||
|
setAddedValues(defaultValues);
|
||||||
|
addDataParameters();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendUpdatedData = () => {
|
||||||
|
setUpdatePanelOpen(false);
|
||||||
|
changeDataParameters();
|
||||||
|
setChangePanelOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteDataParameters = () => {
|
||||||
|
const changeData = userDataStore.decryptedData.filter(item=>!selectedItems.includes(item.key))
|
||||||
|
registrationStore.pushAccountData(changeData);
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeInitialArray = () => {
|
||||||
|
let newArr = [];
|
||||||
|
userDataStore.decryptedData.map(elem => {
|
||||||
|
updatedValues.forEach(item => {
|
||||||
|
if (elem.label === item.label) {
|
||||||
|
newArr.push({
|
||||||
|
...elem,
|
||||||
|
'value': item.value,
|
||||||
|
'seed': item.seed,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (!newArr.find(element => element.label === elem.label)) {
|
||||||
|
newArr.push(elem);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return newArr;
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeDataParameters = () => {
|
||||||
|
const updatedData = changeInitialArray();
|
||||||
|
registrationStore.pushAccountData(updatedData);
|
||||||
|
}
|
||||||
|
|
||||||
|
const addDataParameters = () => {
|
||||||
|
addedValues.key = addedValues.label.toLowerCase().split(' ').join('_');
|
||||||
|
registrationStore.pushAccountData(userDataStore.decryptedData.concat(addedValues));
|
||||||
|
}
|
||||||
|
|
||||||
|
const cancelAddPanel = () => {
|
||||||
|
setAddedValues(defaultValues);
|
||||||
|
setAddPanelOpen(false);
|
||||||
|
setButtonPanelOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const cancelUpdatePanel = () => {
|
||||||
|
setUpdatePanelOpen(false);
|
||||||
|
setChangePanelOpen(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
const openRemovePanel = () => {
|
const openRemovePanel = () => {
|
||||||
@@ -49,145 +159,25 @@ function Profile () {
|
|||||||
setChangePanelOpen(false);
|
setChangePanelOpen(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
const applyRemovePanel = () => {
|
const openUpdatePanel = () => {
|
||||||
setRemovePanelOpen(false);
|
setUpdatePanelOpen(true);
|
||||||
setButtonPanelOpen(true);
|
setChangePanelOpen(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
const userData = [
|
const applyDataDeletion = () => {
|
||||||
{
|
setRemovePanelOpen(false);
|
||||||
id: '0',
|
setButtonPanelOpen(true);
|
||||||
category: 'General',
|
deleteDataParameters()
|
||||||
validated: true,
|
}
|
||||||
blockchained: true,
|
|
||||||
image: ProfileIcon,
|
const handleInput = (text, field) => {
|
||||||
value: 'Dominik',
|
changeAddedValues(text, field);
|
||||||
property: 'First name',
|
setPropertyValues(initialPropertyValues);
|
||||||
status: 'Completed',
|
if (text) {
|
||||||
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
|
let reg = new RegExp(`^${text}`, 'img');
|
||||||
avatars: [Avatar01, Avatar02, Avatar03]
|
setPropertyValues((prevState) => prevState.filter((element) => element.match(reg)));
|
||||||
},
|
}
|
||||||
{
|
};
|
||||||
id: '1',
|
|
||||||
category: 'General',
|
|
||||||
validated: true,
|
|
||||||
blockchained: true,
|
|
||||||
image: ProfileIcon,
|
|
||||||
value: 'Lamakani',
|
|
||||||
property: 'Second name',
|
|
||||||
status: 'Progress',
|
|
||||||
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
|
|
||||||
avatars: null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
category: 'General',
|
|
||||||
validated: true,
|
|
||||||
blockchained: true,
|
|
||||||
image: ProfileIcon,
|
|
||||||
value: '05.10.1983',
|
|
||||||
property: 'Birthdate',
|
|
||||||
status: 'Incorrect',
|
|
||||||
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
|
|
||||||
avatars: null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
category: 'General',
|
|
||||||
validated: true,
|
|
||||||
blockchained: true,
|
|
||||||
image: ProfileIcon,
|
|
||||||
value: 'Male',
|
|
||||||
property: 'Gender',
|
|
||||||
status: 'Stored',
|
|
||||||
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
|
|
||||||
avatars: null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '4',
|
|
||||||
category: 'Nationality',
|
|
||||||
validated: true,
|
|
||||||
blockchained: true,
|
|
||||||
image: ProfileIcon,
|
|
||||||
value: 'United Kindom',
|
|
||||||
property: 'Residence',
|
|
||||||
status: 'Completed',
|
|
||||||
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
|
|
||||||
avatars: [Avatar01, Avatar02, Avatar03]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '5',
|
|
||||||
category: 'Nationality',
|
|
||||||
validated: true,
|
|
||||||
blockchained: true,
|
|
||||||
image: ProfileIcon,
|
|
||||||
value: 'Passport',
|
|
||||||
property: 'Document type',
|
|
||||||
status: 'Progress',
|
|
||||||
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
|
|
||||||
avatars: [Avatar01, Avatar02, Avatar03]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '6',
|
|
||||||
category: 'Nationality',
|
|
||||||
validated: true,
|
|
||||||
blockchained: true,
|
|
||||||
image: ProfileIcon,
|
|
||||||
value: 'A123B3143',
|
|
||||||
property: 'Document ID',
|
|
||||||
status: 'Incorrect',
|
|
||||||
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
|
|
||||||
avatars: null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '7',
|
|
||||||
category: 'Nationality',
|
|
||||||
validated: true,
|
|
||||||
blockchained: true,
|
|
||||||
image: ProfileIcon,
|
|
||||||
value: '05.10.2012',
|
|
||||||
property: 'Issue date',
|
|
||||||
status: 'Stored',
|
|
||||||
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
|
|
||||||
avatars: null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '8',
|
|
||||||
category: 'Nationality',
|
|
||||||
validated: true,
|
|
||||||
blockchained: true,
|
|
||||||
image: ProfileIcon,
|
|
||||||
value: '05.10.2032',
|
|
||||||
property: 'Expiry date',
|
|
||||||
status: 'Stored',
|
|
||||||
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
|
|
||||||
avatars: null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '9',
|
|
||||||
category: 'Social',
|
|
||||||
validated: true,
|
|
||||||
blockchained: true,
|
|
||||||
image: ProfileIcon,
|
|
||||||
value: '@lamakani',
|
|
||||||
property: 'Telegram',
|
|
||||||
status: 'Completed',
|
|
||||||
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
|
|
||||||
avatars: null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '10',
|
|
||||||
category: 'Social',
|
|
||||||
validated: true,
|
|
||||||
blockchained: true,
|
|
||||||
image: ProfileIcon,
|
|
||||||
value: '@lamakani',
|
|
||||||
property: 'Telegram',
|
|
||||||
status: 'Progress',
|
|
||||||
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
|
|
||||||
avatars: [Avatar01, Avatar02, Avatar03]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen overflow-hidden">
|
<div className="flex h-screen overflow-hidden">
|
||||||
@@ -222,7 +212,7 @@ function Profile () {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{/* Table */}
|
{/* Table */}
|
||||||
<ProfileTable selectedItems={handleSelectedItems} userData={userData}/>
|
<ProfileTable selectedItems={handleSelectedItems} userData={userDataStore.decryptedData}/>
|
||||||
</div>
|
</div>
|
||||||
{/* Left sidebar */}
|
{/* Left sidebar */}
|
||||||
<div>
|
<div>
|
||||||
@@ -246,22 +236,56 @@ function Profile () {
|
|||||||
<div className="flex flex-col gap-y-3">
|
<div className="flex flex-col gap-y-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
|
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
|
||||||
<input id="property" className="form-input w-full" type="text" required />
|
<input
|
||||||
|
autoComplete='off'
|
||||||
|
id="label"
|
||||||
|
className="form-input w-full"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
onInput={(e) => handleInput(e.target.value, 'label')}
|
||||||
|
value={addedValues.label}
|
||||||
|
onClick={openHint}
|
||||||
|
/>
|
||||||
|
<div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
|
||||||
|
<ul>
|
||||||
|
{propertyValues.map((element, index) => (
|
||||||
|
<li key={index} onClick={() => closeHint(element)}>{element}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
|
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
|
||||||
<input id="value" className="form-input w-full" type="text" required />
|
<input
|
||||||
|
autoComplete='off'
|
||||||
|
id="value"
|
||||||
|
className="form-input w-full"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
onClick={() => setPropertyValues([])}
|
||||||
|
onChange={(e) => changeAddedValues(e.target.value, 'value')}
|
||||||
|
value={addedValues.value}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
|
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
|
||||||
<input id="seed" className="form-input w-full" type="text" required />
|
<input
|
||||||
|
autoComplete='off'
|
||||||
|
id="seed"
|
||||||
|
className="form-input w-full"
|
||||||
|
type="number"
|
||||||
|
required
|
||||||
|
onClick={() => setPropertyValues([])}
|
||||||
|
onChange={(e) => changeAddedValues(e.target.value, 'seed')}
|
||||||
|
value={addedValues.seed}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
|
<div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
|
||||||
<span className="block text-sm font-medium">Store data on blockchain</span>
|
<span className="block text-sm font-medium">Store data on blockchain</span>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<div className="form-switch">
|
<div className="form-switch">
|
||||||
<input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
|
<input type="checkbox" id="blockcheined" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
|
||||||
<label className="bg-slate-400" htmlFor="switch-1">
|
<label className="bg-slate-400" htmlFor="switch-1">
|
||||||
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
||||||
</label>
|
</label>
|
||||||
@@ -278,7 +302,79 @@ function Profile () {
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
|
className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
|
||||||
onClick={cancelAddPanel}
|
onClick={sendAddedData}
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Update panel */}
|
||||||
|
<div className={`${!updatePanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
|
||||||
|
{updatedValues.map((item, index) => (
|
||||||
|
<div key={index} className="flex flex-col gap-y-3">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
|
||||||
|
<input
|
||||||
|
id={`${item.key}:label`}
|
||||||
|
className="form-input w-full"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
onChange={(e) => changeUpdatedValues(e.target.value, 'label', item.key)}
|
||||||
|
value={item.label}
|
||||||
|
disabled='disabled'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
|
||||||
|
<input
|
||||||
|
autoComplete='off'
|
||||||
|
id={`${item.key}:value`}
|
||||||
|
className="form-input w-full"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
onChange={(e) => changeUpdatedValues(e.target.value, 'value', item.key)}
|
||||||
|
value={item.value}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
|
||||||
|
<input
|
||||||
|
autoComplete='off'
|
||||||
|
id={`${item.key}:seed`}
|
||||||
|
className="form-input w-full"
|
||||||
|
type="number"
|
||||||
|
required
|
||||||
|
onChange={(e) => changeUpdatedValues(e.target.value, 'seed', item.key)}
|
||||||
|
value={item.seed}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{(updatedValues[index+1]) ? (
|
||||||
|
<div className="mt-2 mb-3.5 items-center border-b border-slate-200"></div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
|
||||||
|
<span className="block text-sm font-medium">Store data on blockchain</span>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="form-switch">
|
||||||
|
<input type="checkbox" id="blockcheined" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
|
||||||
|
<label className="bg-slate-400" htmlFor="switch-1">
|
||||||
|
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Buttons */}
|
||||||
|
<div className="flex flex-row justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
|
||||||
|
<button
|
||||||
|
className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
|
||||||
|
onClick={cancelUpdatePanel}
|
||||||
|
>
|
||||||
|
Cansel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
|
||||||
|
onClick={sendUpdatedData}
|
||||||
>
|
>
|
||||||
Send
|
Send
|
||||||
</button>
|
</button>
|
||||||
@@ -288,8 +384,8 @@ function Profile () {
|
|||||||
<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">
|
||||||
{userData.filter(({ id }) => selectedItems.includes(id)).map(item => (
|
{userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key)).map(item => (
|
||||||
<span key={item.id} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.property}</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>
|
||||||
<div className="flex flex-row justify-between pt-[16px] pb-7 items-center">
|
<div className="flex flex-row justify-between pt-[16px] pb-7 items-center">
|
||||||
@@ -306,7 +402,7 @@ function Profile () {
|
|||||||
<div className="flex flex-row justify-end gap-x-2 pt-[20px] pb-[16px] items-end">
|
<div className="flex flex-row justify-end gap-x-2 pt-[20px] pb-[16px] items-end">
|
||||||
<button
|
<button
|
||||||
className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
|
className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
|
||||||
onClick={applyRemovePanel}
|
onClick={applyDataDeletion}
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
|
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
|
||||||
<path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
|
<path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
|
||||||
@@ -369,7 +465,10 @@ function Profile () {
|
|||||||
</svg>
|
</svg>
|
||||||
<span className="ml-2">Remove</span>
|
<span className="ml-2">Remove</span>
|
||||||
</button>
|
</button>
|
||||||
<button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
|
<button
|
||||||
|
className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start"
|
||||||
|
onClick={openUpdatePanel}
|
||||||
|
>
|
||||||
<svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
|
<svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
|
||||||
<path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
|
<path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
|
||||||
</svg>
|
</svg>
|
||||||
@@ -390,6 +489,6 @@ function Profile () {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
})
|
||||||
|
|
||||||
export default Profile;
|
export default Profile
|
||||||
|
|||||||
@@ -1,70 +1,18 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import {observer} from "mobx-react-lite";
|
||||||
|
|
||||||
|
import {transactionsStore} from "../../store/transactionsStore";
|
||||||
import Sidebar from '../../partials/Sidebar';
|
import Sidebar from '../../partials/Sidebar';
|
||||||
import Header from '../../partials/Header';
|
import Header from '../../partials/Header';
|
||||||
import ValidateTable from "../../partials/validate/ValidateTable";
|
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 User06 from "../../images/user-28-06.jpg";
|
|
||||||
import User08 from "../../images/user-28-08.jpg";
|
|
||||||
import User09 from "../../images/user-28-09.jpg";
|
|
||||||
import User05 from "../../images/user-28-05.jpg";
|
|
||||||
|
|
||||||
function Validate () {
|
const Validate = observer(()=>{
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
const [validatePanelOpen, setValidatePanelOpen] = useState(true);
|
const [validatePanelOpen, setValidatePanelOpen] = useState(true);
|
||||||
|
|
||||||
const validateItems = [
|
|
||||||
{
|
|
||||||
id: '40',
|
|
||||||
name: 'Today',
|
|
||||||
data: '7234ABC342342352345',
|
|
||||||
usersImges: [
|
|
||||||
{
|
|
||||||
size: 24,
|
|
||||||
img: User06,
|
|
||||||
imgId: "343"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
size: 24,
|
|
||||||
img: User08,
|
|
||||||
imgId: "345"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
size: 24,
|
|
||||||
img: User09,
|
|
||||||
imgId: "321"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
size: 24,
|
|
||||||
img: User05,
|
|
||||||
imgId: "387"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
dataSeason: '7234ABC342342352345',
|
|
||||||
id: '555',
|
|
||||||
text: 'Second name for',
|
|
||||||
checked: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dataSeason: '7234ABC342342352345',
|
|
||||||
id: '534',
|
|
||||||
text: 'Gender name for',
|
|
||||||
checked: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dataSeason: '7234ABC342342352345',
|
|
||||||
id: '567',
|
|
||||||
text: 'Document ID name for',
|
|
||||||
checked: true
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen overflow-hidden">
|
<div className="flex h-screen overflow-hidden">
|
||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
@@ -110,7 +58,7 @@ function Validate () {
|
|||||||
<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>
|
||||||
{validateItems.map(item => {
|
{transactionsStore.transactionsData.map(item => {
|
||||||
return <ValidateRoadMap season={item} key={item.id}/>
|
return <ValidateRoadMap season={item} key={item.id}/>
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
@@ -120,6 +68,6 @@ function Validate () {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
})
|
||||||
|
|
||||||
export default Validate;
|
export default Validate;
|
||||||
|
|||||||
@@ -1,115 +1,14 @@
|
|||||||
import React, {useState} from 'react';
|
import React, {useState} from 'react';
|
||||||
|
|
||||||
import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
|
import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
|
||||||
|
import {transactionsStore} from "../../store/transactionsStore";
|
||||||
|
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 User05 from "../../images/user-28-05.jpg";
|
|
||||||
import User08 from "../../images/user-28-08.jpg";
|
|
||||||
import User09 from "../../images/user-28-09.jpg";
|
|
||||||
import User06 from "../../images/user-28-06.jpg";
|
|
||||||
import User03 from "../../images/user-28-03.jpg";
|
|
||||||
import User01 from "../../images/user-28-01.jpg";
|
|
||||||
|
|
||||||
function ValidationLog () {
|
const ValidationLog = observer(()=>{
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
|
||||||
const logItems = [
|
|
||||||
{
|
|
||||||
id: '20',
|
|
||||||
name: 'Today',
|
|
||||||
data: '7234ABC342342352345',
|
|
||||||
usersImges: [
|
|
||||||
{
|
|
||||||
size: 24,
|
|
||||||
img: User06,
|
|
||||||
imgId: "249"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
size: 24,
|
|
||||||
img: User08,
|
|
||||||
imgId: "212"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
size: 24,
|
|
||||||
img: User09,
|
|
||||||
imgId: "217"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
size: 24,
|
|
||||||
img: User05,
|
|
||||||
imgId: "276"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
dataSeason: '7234ABC342342352345',
|
|
||||||
id: '434',
|
|
||||||
text: 'Second name',
|
|
||||||
checked: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dataSeason: '7234ABC342342352345',
|
|
||||||
id: '476',
|
|
||||||
text: 'First name by',
|
|
||||||
checked: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dataSeason: '7234ABC342342352345',
|
|
||||||
id: '422',
|
|
||||||
text: 'Document name by',
|
|
||||||
checked: true
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '30',
|
|
||||||
name: 'Last Week',
|
|
||||||
data: '7234ABC342342352345',
|
|
||||||
usersImges: [
|
|
||||||
{
|
|
||||||
size: 24,
|
|
||||||
img: User06,
|
|
||||||
imgId: "145"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
size: 24,
|
|
||||||
img: User08,
|
|
||||||
imgId: "182"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
size: 24,
|
|
||||||
img: User09,
|
|
||||||
imgId: "154"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
size: 24,
|
|
||||||
img: User05,
|
|
||||||
imgId: "114"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
dataSeason: '7234ABC342342352345',
|
|
||||||
id: '654',
|
|
||||||
text: 'Gender name by',
|
|
||||||
checked: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dataSeason: '7234ABC342342352345',
|
|
||||||
id: '617',
|
|
||||||
text: 'Second name Updated',
|
|
||||||
checked: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dataSeason: '7234ABC342342352345',
|
|
||||||
id: '643',
|
|
||||||
text: 'Gender name by',
|
|
||||||
checked: true
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen overflow-hidden">
|
<div className="flex h-screen overflow-hidden">
|
||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
@@ -129,61 +28,9 @@ function ValidationLog () {
|
|||||||
<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 */}
|
||||||
{logItems.map(item => {
|
{transactionsStore.transactionsData.map(item=>{
|
||||||
return <ValidateRoadMap season={item} key={item.id}/>
|
return <ValidateRoadMap season={item} key={item.id}/>
|
||||||
})}
|
})}
|
||||||
{/* Post */}
|
|
||||||
<article className="pt-3">
|
|
||||||
<div className="xl:flex">
|
|
||||||
<div className="w-32 shrink-0">
|
|
||||||
<h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">Even earlier</h2>
|
|
||||||
</div>
|
|
||||||
<div className="grow pb-6 border-b border-slate-200">
|
|
||||||
<header>
|
|
||||||
<div className="flex flex-nowrap items-center space-x-2 mb-6">
|
|
||||||
{/* Avatars */}
|
|
||||||
<div className="flex shrink-0 -space-x-3 -ml-px">
|
|
||||||
<a className="block" href="#0">
|
|
||||||
<img className="rounded-full border-2 border-white box-content" src={User03} width="28" height="28" alt="User 03" />
|
|
||||||
</a>
|
|
||||||
<a className="block" href="#0">
|
|
||||||
<img className="rounded-full border-2 border-white box-content" src={User01} width="28" height="28" alt="User 01" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="text-slate-400">·</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
{/* List */}
|
|
||||||
<ul className="-my-2">
|
|
||||||
{/* List item */}
|
|
||||||
<li className="relative py-2">
|
|
||||||
<div className="flex items-center mb-1">
|
|
||||||
<div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
|
|
||||||
<div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
|
|
||||||
<svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
|
|
||||||
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-bold text-slate-800 pl-9">Product V1 - Early Access</h3>
|
|
||||||
</div>
|
|
||||||
<div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
|
|
||||||
</li>
|
|
||||||
{/* List item */}
|
|
||||||
<li className="relative py-2">
|
|
||||||
<div className="flex items-center mb-1">
|
|
||||||
<div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
|
|
||||||
<svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
|
|
||||||
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-bold text-slate-800 pl-9">Web3 Compatibility</h3>
|
|
||||||
</div>
|
|
||||||
<div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -191,6 +38,6 @@ function ValidationLog () {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
})
|
||||||
|
|
||||||
export default ValidationLog;
|
export default ValidationLog;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ 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';
|
||||||
|
|
||||||
function Verify () {
|
const Verify = (() => {
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
const [descriptionOpen, setDescriptionOpen] = useState(false);
|
const [descriptionOpen, setDescriptionOpen] = useState(false);
|
||||||
|
|
||||||
@@ -165,6 +165,6 @@ function Verify () {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
})
|
||||||
|
|
||||||
export default Verify;
|
export default Verify;
|
||||||
@@ -47,10 +47,6 @@ function Sidebar({
|
|||||||
}
|
}
|
||||||
}, [sidebarExpanded]);
|
}, [sidebarExpanded]);
|
||||||
|
|
||||||
function saveDigitalId () {
|
|
||||||
localStorage.setItem('digitalId', '7234ABC3423423523457234ABC34234')
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{/* Sidebar backdrop (mobile only) */}
|
{/* Sidebar backdrop (mobile only) */}
|
||||||
@@ -340,193 +336,6 @@ function Sidebar({
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{/* More group */}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-xs uppercase text-slate-500 font-semibold pl-3">
|
|
||||||
<span className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6" aria-hidden="true">
|
|
||||||
•••
|
|
||||||
</span>
|
|
||||||
<span className="lg:hidden lg:sidebar-expanded:block 2xl:block">More</span>
|
|
||||||
</h3>
|
|
||||||
<ul className="mt-3">
|
|
||||||
{/* Onboarding */}
|
|
||||||
<SidebarLinkGroup>
|
|
||||||
{(handleClick, open) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<a
|
|
||||||
href="#0"
|
|
||||||
className={`block text-slate-200 hover:text-white truncate transition duration-150 ${open && '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-600"
|
|
||||||
d="M19 5h1v14h-2V7.414L5.707 19.707 5 19H4V5h2v11.586L18.293 4.293 19 5Z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
className="fill-current text-slate-400"
|
|
||||||
d="M5 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm14 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8ZM5 23a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm14 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
|
||||||
Onboarding
|
|
||||||
</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="/onboarding-1" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
|
|
||||||
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
|
||||||
Step 1
|
|
||||||
</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
<li className="mb-1 last:mb-0">
|
|
||||||
<NavLink end to="/onboarding-2" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
|
|
||||||
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
|
||||||
Step 2
|
|
||||||
</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
<li className="mb-1 last:mb-0">
|
|
||||||
<NavLink end to="/onboarding-3" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
|
|
||||||
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
|
||||||
Step 3
|
|
||||||
</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
<li className="mb-1 last:mb-0">
|
|
||||||
<NavLink end to="/onboarding-4" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
|
|
||||||
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
|
||||||
Step 4
|
|
||||||
</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
<li className="mb-1 last:mb-0">
|
|
||||||
<NavLink onClick={()=>saveDigitalId()} end to="/shared-data" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
|
|
||||||
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
|
||||||
Shared Data
|
|
||||||
</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</SidebarLinkGroup>
|
|
||||||
{/* Components */}
|
|
||||||
<SidebarLinkGroup activecondition={pathname.includes('component')}>
|
|
||||||
{(handleClick, open) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<a
|
|
||||||
href="#0"
|
|
||||||
className={`block text-slate-200 hover:text-white truncate transition duration-150 ${
|
|
||||||
pathname.includes('component') && '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">
|
|
||||||
<circle
|
|
||||||
className={`fill-current text-slate-600 ${pathname.includes('component') && 'text-indigo-500'}`}
|
|
||||||
cx="16"
|
|
||||||
cy="8"
|
|
||||||
r="8"
|
|
||||||
/>
|
|
||||||
<circle
|
|
||||||
className={`fill-current text-slate-400 ${pathname.includes('component') && 'text-indigo-300'}`}
|
|
||||||
cx="8"
|
|
||||||
cy="16"
|
|
||||||
r="8"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
|
||||||
Components
|
|
||||||
</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="/component/button"
|
|
||||||
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">
|
|
||||||
Button
|
|
||||||
</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
<li className="mb-1 last:mb-0">
|
|
||||||
<NavLink
|
|
||||||
end
|
|
||||||
to="/component/badge"
|
|
||||||
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">
|
|
||||||
Badge
|
|
||||||
</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
<li className="mb-1 last:mb-0">
|
|
||||||
<NavLink
|
|
||||||
end
|
|
||||||
to="/component/accordion"
|
|
||||||
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">
|
|
||||||
Accordion
|
|
||||||
</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</SidebarLinkGroup>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Expand / collapse button */}
|
{/* Expand / collapse button */}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import React, {useState, useEffect} from 'react';
|
import React, {useState, useEffect} from 'react';
|
||||||
import ProfileTableItem from './ProfileTableItem';
|
import ProfileTableItem from './ProfileTableItem';
|
||||||
|
import ProfileIcon from '../../images/profile-icon.svg';
|
||||||
|
|
||||||
function ProfileTable({
|
function ProfileTable({
|
||||||
selectedItems,
|
selectedItems,
|
||||||
@@ -8,6 +9,13 @@ function ProfileTable({
|
|||||||
|
|
||||||
const [isCheck, setIsCheck] = useState([]);
|
const [isCheck, setIsCheck] = useState([]);
|
||||||
|
|
||||||
|
const defaultData = {
|
||||||
|
image: ProfileIcon,
|
||||||
|
status: 'Stored',
|
||||||
|
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
|
||||||
|
avatars: null
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
selectedItems(isCheck);
|
selectedItems(isCheck);
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
@@ -21,86 +29,124 @@ function ProfileTable({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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"]
|
||||||
|
}
|
||||||
|
|
||||||
|
const generalData = userData.filter(elem => data.general.includes(elem.label)),
|
||||||
|
nationalityData = userData.filter(elem => data.nationality.includes(elem.label)),
|
||||||
|
sosialData = userData.filter(elem => data.social.includes(elem.label)),
|
||||||
|
otherData = userData.filter((elem) =>
|
||||||
|
!data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* General */}
|
{/* General */}
|
||||||
|
<div className={`${generalData.length > 0 || 'hidden'}`}>
|
||||||
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">General 🖋️</h2>
|
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">General 🖋️</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="divide-slate-200 divide-y">
|
<tbody className="divide-slate-200 divide-y">
|
||||||
{userData.filter(data => data.category === 'General')
|
{generalData.map((data) => {
|
||||||
.map(data => {
|
|
||||||
return (
|
return (
|
||||||
<ProfileTableItem
|
<ProfileTableItem
|
||||||
key={data.id}
|
key={data.label}
|
||||||
id={data.id}
|
id={data.key}
|
||||||
image={data.image}
|
image={defaultData.image}
|
||||||
value={data.value}
|
value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
|
||||||
property={data.property}
|
property={data.label}
|
||||||
status={data.status}
|
status={defaultData.status}
|
||||||
transactions={data.transactions}
|
transactions={defaultData.transactions}
|
||||||
avatars={data.avatars}
|
avatars={defaultData.avatars}
|
||||||
handleClick={handleClick}
|
handleClick={handleClick}
|
||||||
isChecked={isCheck.includes(data.id)}
|
isChecked={isCheck.includes(data.key)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
})
|
})}
|
||||||
}
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{/* Nationality */}
|
{/* Nationality */}
|
||||||
|
<div className={`${nationalityData.length > 0 || 'hidden'}`}>
|
||||||
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Nationality 🖋️</h2>
|
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Nationality 🖋️</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 ">
|
||||||
{userData.filter(data => data.category === 'Nationality')
|
{nationalityData.map(data => {
|
||||||
.map(data => {
|
|
||||||
return (
|
return (
|
||||||
<ProfileTableItem
|
<ProfileTableItem
|
||||||
key={data.id}
|
key={data.label}
|
||||||
id={data.id}
|
id={data.key}
|
||||||
image={data.image}
|
image={defaultData.image}
|
||||||
value={data.value}
|
value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
|
||||||
property={data.property}
|
property={data.label}
|
||||||
status={data.status}
|
status={defaultData.status}
|
||||||
transactions={data.transactions}
|
transactions={defaultData.transactions}
|
||||||
avatars={data.avatars}
|
avatars={defaultData.avatars}
|
||||||
handleClick={handleClick}
|
handleClick={handleClick}
|
||||||
isChecked={isCheck.includes(data.id)}
|
isChecked={isCheck.includes(data.key)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
})
|
})}
|
||||||
}
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{/* Social */}
|
{/* Social */}
|
||||||
|
<div className={`${sosialData.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 ">
|
||||||
{userData.filter(data => data.category === 'Social')
|
{sosialData.map(data => {
|
||||||
.map(data => {
|
|
||||||
return (
|
return (
|
||||||
<ProfileTableItem
|
<ProfileTableItem
|
||||||
key={data.id}
|
key={data.label}
|
||||||
id={data.id}
|
id={data.key}
|
||||||
image={data.image}
|
image={defaultData.image}
|
||||||
value={data.value}
|
value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
|
||||||
property={data.property}
|
property={data.label}
|
||||||
status={data.status}
|
status={defaultData.status}
|
||||||
transactions={data.transactions}
|
transactions={defaultData.transactions}
|
||||||
avatars={data.avatars}
|
avatars={defaultData.avatars}
|
||||||
handleClick={handleClick}
|
handleClick={handleClick}
|
||||||
isChecked={isCheck.includes(data.id)}
|
isChecked={isCheck.includes(data.key)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
})
|
})}
|
||||||
}
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Other */}
|
||||||
|
<div className={`${otherData.length > 0 || 'hidden'}`}>
|
||||||
|
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Other 🖋️</h2>
|
||||||
|
<div className="overflow-x-auto w-[828px]">
|
||||||
|
<table className="w-[828px] table-auto w-full">
|
||||||
|
<tbody className="text-sm divide-slate-200 divide-y ">
|
||||||
|
{otherData.map(data => {
|
||||||
|
return (
|
||||||
|
<ProfileTableItem
|
||||||
|
key={data.key}
|
||||||
|
id={data.key}
|
||||||
|
image={defaultData.image}
|
||||||
|
value={data.value}
|
||||||
|
property={data.label}
|
||||||
|
status={defaultData.status}
|
||||||
|
transactions={defaultData.transactions}
|
||||||
|
avatars={defaultData.avatars}
|
||||||
|
handleClick={handleClick}
|
||||||
|
isChecked={isCheck.includes(data.key)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ function ValidateTableItem(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr className="hover:bg-[#E2E8F0] cursor-pointer" onClick={(e) => openValidatePanel(e)}>
|
<tr className="hover:bg-[#eaf0f6] cursor-pointer" onClick={(e) => openValidatePanel(e)}>
|
||||||
<td className="px-2 first:pl-4 last:pr-5 py-3 whitespace-nowrap w-px">
|
<td className="px-2 first:pl-4 last:pr-5 py-3 whitespace-nowrap w-px">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<label className="inline-flex">
|
<label className="inline-flex">
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useRef } from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Image from '../../images/transactions-image-04.svg';
|
import Image from '../../images/transactions-image-04.svg';
|
||||||
|
|
||||||
@@ -7,37 +7,12 @@ function TransactionPanel({
|
|||||||
setValidatePanelOpen
|
setValidatePanelOpen
|
||||||
}) {
|
}) {
|
||||||
|
|
||||||
const panelContent = useRef()
|
|
||||||
|
|
||||||
// close on click outside
|
|
||||||
useEffect(() => {
|
|
||||||
const clickHandler = () => {
|
|
||||||
if (!validatePanelOpen || !panelContent.current) return;
|
|
||||||
setValidatePanelOpen(false);
|
|
||||||
};
|
|
||||||
document.addEventListener('click', clickHandler);
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('click', clickHandler)
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// close if the esc key is pressed
|
|
||||||
useEffect(() => {
|
|
||||||
const keyHandler = ({ keyCode }) => {
|
|
||||||
if (!validatePanelOpen || keyCode !== 27) return;
|
|
||||||
setValidatePanelOpen(false);
|
|
||||||
};
|
|
||||||
document.addEventListener('keydown', keyHandler);
|
|
||||||
return () => document.removeEventListener('keydown', keyHandler);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={panelContent}
|
|
||||||
className={`absolute inset-0 sm:left-auto z-20 transition-transform duration-200 ease-in-out ${
|
className={`absolute inset-0 sm:left-auto z-20 transition-transform duration-200 ease-in-out ${
|
||||||
validatePanelOpen ? 'translate-x-' : 'translate-x-full'
|
validatePanelOpen ? 'translate-x-' : 'translate-x-full'
|
||||||
}`}>
|
}`}>
|
||||||
<div className="sticky top-16 bg-gradient-to-b from-[#E2E8F0] via-slate-100 to-white shrink-0 border-l border-slate-200 w-full sm:w-[390px] h-fit">
|
<div className="top-16 bg-gradient-to-b from-[#e4eaf0] to-white shrink-0 border-l border-slate-200 w-full sm:w-[390px] h-fit">
|
||||||
<button
|
<button
|
||||||
onClick={() => setValidatePanelOpen(false)}
|
onClick={() => setValidatePanelOpen(false)}
|
||||||
className="absolute top-0 right-0 mt-6 mr-6 group p-2"
|
className="absolute top-0 right-0 mt-6 mr-6 group p-2"
|
||||||
@@ -90,8 +65,8 @@ function TransactionPanel({
|
|||||||
</div>
|
</div>
|
||||||
{/* Receipts */}
|
{/* Receipts */}
|
||||||
<div className="mt-6">
|
<div className="mt-6">
|
||||||
<div className="text-sm font-semibold text-slate-800 mb-2">Private Data</div>
|
<div className="text-sm font-medium text-slate-800 mb-2">Private Data</div>
|
||||||
<form className="rounded bg-slate-100 border border-dashed border-slate-300 text-center px-5 py-8">
|
<form className="rounded bg-slate-50 border border-dashed border-slate-300 text-center px-5 py-8">
|
||||||
<svg className="inline-flex w-4 h-4 fill-slate-400 mb-3" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
<svg className="inline-flex w-4 h-4 fill-slate-400 mb-3" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
|
<path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
|
||||||
</svg>
|
</svg>
|
||||||
@@ -101,10 +76,10 @@ function TransactionPanel({
|
|||||||
</div>
|
</div>
|
||||||
{/* Notes */}
|
{/* Notes */}
|
||||||
<div className="mt-6">
|
<div className="mt-6">
|
||||||
<div className="text-sm font-semibold text-slate-800 mb-2">Notes</div>
|
<div className="text-sm font-medium text-slate-800 mb-2">Notes</div>
|
||||||
<form>
|
<form>
|
||||||
<label className="sr-only" htmlFor="notes">Write a note</label>
|
<label className="sr-only" htmlFor="notes">Write a note</label>
|
||||||
<textarea id="notes" className="form-textarea w-full focus:border-slate-300" rows="4" placeholder="Write a note…" defaultValue={""} />
|
<textarea id="notes" className="resize-none form-textarea w-full focus:border-slate-300" rows="4" placeholder="Write a note…" defaultValue={""} />
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
{/* Download / Report */}
|
{/* Download / Report */}
|
||||||
@@ -114,7 +89,7 @@ function TransactionPanel({
|
|||||||
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 rotate-180" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 rotate-180" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
|
<path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span className="ml-2">Validate</span>
|
<span className="ml-2 text-sm font-medium">Validate</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-1/2">
|
<div className="w-1/2">
|
||||||
@@ -122,7 +97,7 @@ function TransactionPanel({
|
|||||||
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
|
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
|
||||||
<path d="M7.001 3h2v4h-2V3Zm1 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM15 16a1 1 0 0 1-.6-.2L10.667 13H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1ZM2 11h9a1 1 0 0 1 .6.2L14 13V2H2v9Z" />
|
<path d="M7.001 3h2v4h-2V3Zm1 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM15 16a1 1 0 0 1-.6-.2L10.667 13H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1ZM2 11h9a1 1 0 0 1 .6.2L14 13V2H2v9Z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span className="ml-2">Invalidate</span>
|
<span className="ml-2 text-sm font-medium">Invalidate</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,15 +9,15 @@ function ValidateRoadMap({ season }) {
|
|||||||
<article className="pt-3">
|
<article className="pt-3">
|
||||||
<div className="xl:flex">
|
<div className="xl:flex">
|
||||||
<div className="w-32 shrink-0">
|
<div className="w-32 shrink-0">
|
||||||
<h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{season.name}</h2>
|
<h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{''}</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="grow pb-6 border-b border-slate-200">
|
<div className="grow pb-6">
|
||||||
<header>
|
<header>
|
||||||
<div className="flex flex-nowrap items-center space-x-2 mb-6">
|
<div className="flex flex-nowrap items-center space-x-2 mb-6">
|
||||||
{/* Avatars */}
|
{/* Avatars */}
|
||||||
<div className="flex shrink-0 -space-x-3 -ml-px">
|
<div className="flex shrink-0 -space-x-3 -ml-px">
|
||||||
{season.usersImges.map(pic => {
|
{season.users_images.map(pic => {
|
||||||
return <ValidationUsersImg key={pic.imgId} image={pic}/>
|
return <ValidationUsersImg image={pic} key={pic.image}/>
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-slate-400">·</div>
|
<div className="text-slate-400">·</div>
|
||||||
@@ -26,8 +26,8 @@ function ValidateRoadMap({ season }) {
|
|||||||
{/* List */}
|
{/* List */}
|
||||||
<ul className="-my-2">
|
<ul className="-my-2">
|
||||||
{/* List item(s) */}
|
{/* List item(s) */}
|
||||||
{season.items.map((item, index) => {
|
{season.transaction.map((item, index) => {
|
||||||
return <ValidationSeasonItem key={item.id} length={season.items.length} item={item} index={index}/>
|
return <ValidationSeasonItem key={item.label} length={season.transaction.length} item={item} index={index}/>
|
||||||
})}
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -5,21 +5,21 @@ function ValidationSeasonItem({ length, item, index }) {
|
|||||||
<li className="relative pt-2 pb-2.5">
|
<li className="relative pt-2 pb-2.5">
|
||||||
<div className="flex items-center mb-2.5">
|
<div className="flex items-center mb-2.5">
|
||||||
{length-1!==index && <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>}
|
{length-1!==index && <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>}
|
||||||
<div className={`absolute left-0 rounded-full ${item.checked ? "bg-indigo-500" : "bg-[#FF0000]"}`} aria-hidden="true">
|
<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">
|
<svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
|
||||||
{item.checked && <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z"/>}
|
<path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-bold text-slate-800 pl-9">
|
<h3 className="text-lg font-bold text-slate-800 pl-9">
|
||||||
{item.text} {item.checked && <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{`0x${item.dataSeason}`}</a>}
|
{`${item.label} by`} <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{item.address}</a>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="block text-slate-800 w-fit pl-9">
|
<div className="block text-slate-800 w-fit pl-9">
|
||||||
<div className="text-base font-semibold underline mb-[-10px]">{`0x${item.dataSeason}`}</div>
|
<div className="text-base font-semibold underline mb-[-10px]">{item.transaction_id}</div>
|
||||||
<span className="font-normal text-slate-600 text-[10px]">Transactions ID</span>
|
<span className="font-normal text-slate-600 text-[10px]">Transactions ID</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-3.5 block text-slate-800 w-fit pl-9">
|
<div className="mb-3.5 block text-slate-800 w-fit pl-9">
|
||||||
<div className="text-base font-semibold underline mb-[-10px]">{item.dataSeason}</div>
|
<div className="text-base font-semibold underline mb-[-10px]">{item.value}</div>
|
||||||
<span className="font-normal text-slate-600 text-[10px]">Validated data</span>
|
<span className="font-normal text-slate-600 text-[10px]">Validated data</span>
|
||||||
</div>
|
</div>
|
||||||
<a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -></a>
|
<a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -></a>
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
function ValidationUsersImg({ image }) {
|
function ValidationUsersImg({ image }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a className="block" href="#0">
|
<a className="block">
|
||||||
<img className="rounded-full border-2 border-slate-100 box-content" src={image.img} width={`${image.size}`} alt={image.img} height={`${image.size}`}/>
|
<img className="rounded-full border-2 border-slate-100 box-content" src={image.image} width={`${image.size}`} alt={image.image} height={`${image.size}`}/>
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
103
src/shared/fetchWrapper.js
Normal file
103
src/shared/fetchWrapper.js
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
import {registrationStore} from '../store/store';
|
||||||
|
|
||||||
|
function prepareUrl(url) {
|
||||||
|
if (url.startsWith('http')) return url;
|
||||||
|
return `http://3.125.47.101/api/${url}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRequest(method, url, headers, attempts, token, body) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
(function internalRequest() {
|
||||||
|
return request(method, url, headers, token, body)
|
||||||
|
.then(resolve)
|
||||||
|
.catch(err => --attempts > 0 ? internalRequest() : reject(err))
|
||||||
|
})()
|
||||||
|
})
|
||||||
|
.then((res) => res.json())
|
||||||
|
.catch(() => [])
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Request
|
||||||
|
* @param {string} method - method name
|
||||||
|
* @param {string} url - endpoint url.
|
||||||
|
* @param {string} token - auth token
|
||||||
|
* @param {object} body - request body.
|
||||||
|
* @param {object} headers - request headers
|
||||||
|
*/
|
||||||
|
function request(method, url, headers = {}, token, body) {
|
||||||
|
let controller = new AbortController;
|
||||||
|
let requestOptions = {};
|
||||||
|
if (method === 'GET' || method === 'DELETE'){
|
||||||
|
requestOptions = {
|
||||||
|
method: method,
|
||||||
|
headers: {
|
||||||
|
Authorization: `IDNTTY ${token}`,
|
||||||
|
...headers
|
||||||
|
},
|
||||||
|
signal: controller.signal,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (method === 'POST' || method === 'PUT'){
|
||||||
|
requestOptions = {
|
||||||
|
method: method,
|
||||||
|
headers: {
|
||||||
|
Authorization: `IDNTTY ${token}`,
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...headers
|
||||||
|
},
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
signal: controller.signal,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (!token) {
|
||||||
|
requestOptions.headers.Authorization = null;
|
||||||
|
}
|
||||||
|
setTimeout(() => controller.abort(), 3000);
|
||||||
|
return fetch(prepareUrl(url), requestOptions);
|
||||||
|
};
|
||||||
|
|
||||||
|
function get(url, headers, attempts = 1) {
|
||||||
|
return handleRequest('GET', url, headers, attempts, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAuth(url, headers, attempts = 1) {
|
||||||
|
return handleRequest('GET', url, headers, attempts, registrationStore.tokenKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
function del(url, headers, attempts = 1) {
|
||||||
|
return handleRequest('DELETE', url, headers, attempts, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function delAuth(url, headers, attempts = 1) {
|
||||||
|
return handleRequest('DELETE', url, headers, attempts, registrationStore.tokenKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
function post(url, headers, body, attempts = 1) {
|
||||||
|
return handleRequest('POST', url, headers, attempts, null, body);
|
||||||
|
}
|
||||||
|
|
||||||
|
function postAuth(url, headers, body, attempts = 1) {
|
||||||
|
return handleRequest('POST', url, headers, attempts, registrationStore.tokenKey, body);
|
||||||
|
}
|
||||||
|
|
||||||
|
function put(url, headers, body, attempts = 1) {
|
||||||
|
return handleRequest('PUT', url, headers, attempts, null, body);
|
||||||
|
}
|
||||||
|
|
||||||
|
function putAuth(url, headers, body, attempts = 1) {
|
||||||
|
return handleRequest('PUT', url, headers, attempts, registrationStore.tokenKey, body);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const fetchWrapper = {
|
||||||
|
get,
|
||||||
|
del,
|
||||||
|
post,
|
||||||
|
put,
|
||||||
|
getAuth,
|
||||||
|
delAuth,
|
||||||
|
postAuth,
|
||||||
|
putAuth,
|
||||||
|
baseUrl: ''
|
||||||
|
};
|
||||||
136
src/store/store.js
Normal file
136
src/store/store.js
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
import { reaction, makeAutoObservable } from "mobx";
|
||||||
|
import {cryptography} from "@liskhq/lisk-client";
|
||||||
|
import {getNodeInfo} from '../api/node';
|
||||||
|
import {fetchWrapper} from '../shared/fetchWrapper';
|
||||||
|
|
||||||
|
class Store {
|
||||||
|
_accountData = []
|
||||||
|
|
||||||
|
_passPhrase='rocket north inform swift improve fringe sweet crew client canyon bean autumn'
|
||||||
|
|
||||||
|
_nodeInfo = {}
|
||||||
|
|
||||||
|
_userData = {}
|
||||||
|
|
||||||
|
_transactionsInfo = {}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
makeAutoObservable(this);
|
||||||
|
|
||||||
|
this.fetchNodeInfo()
|
||||||
|
|
||||||
|
reaction(() => this.tokenKey, () => this.fetchNewAccountData())
|
||||||
|
reaction(() => this.tokenKey, () => this.fetchTransactionsInfo())
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchNewAccountData() {
|
||||||
|
fetchWrapper.getAuth('http://3.125.47.101/api/data/private', {
|
||||||
|
networkIdentifier: this.nodeInfo.networkIdentifier,
|
||||||
|
lastBlockID: this.nodeInfo.lastBlockID
|
||||||
|
}).then((res) => this.userDataFetchChange(res))
|
||||||
|
}
|
||||||
|
|
||||||
|
pushAccountData(data=this.accountData) {
|
||||||
|
fetchWrapper.postAuth('http://3.125.47.101/api/data/private', {
|
||||||
|
networkIdentifier: this.nodeInfo.networkIdentifier,
|
||||||
|
lastBlockID: this.nodeInfo.lastBlockID
|
||||||
|
}, [...this.encryptAccountData(data)])
|
||||||
|
.then(()=>this.fetchNewAccountData())
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchTransactionsInfo() {
|
||||||
|
fetchWrapper.getAuth(`http://3.125.47.101/api/account/transactions/${this.accountMadeTransaction}?moduleID=1001&assetID=11`, {
|
||||||
|
networkIdentifier: this.nodeInfo.networkIdentifier,
|
||||||
|
lastBlockID: this.nodeInfo.lastBlockID
|
||||||
|
})
|
||||||
|
.then((res)=>this.saveInfoTransactions(res))
|
||||||
|
}
|
||||||
|
|
||||||
|
get accountMadeTransaction() {
|
||||||
|
return "b444b7ff3118cf2a30cbd54cfcdb8fd5d805017a"
|
||||||
|
}
|
||||||
|
|
||||||
|
userDataFetchChange(res) {
|
||||||
|
this._userData = res;
|
||||||
|
}
|
||||||
|
|
||||||
|
get userData() {
|
||||||
|
return this._userData
|
||||||
|
}
|
||||||
|
|
||||||
|
get transactionsInfo() {
|
||||||
|
return this._transactionsInfo
|
||||||
|
}
|
||||||
|
|
||||||
|
savePassPhrase(phrase) {
|
||||||
|
this._passPhrase = phrase
|
||||||
|
}
|
||||||
|
|
||||||
|
saveDataRegistration(data) {
|
||||||
|
this._accountData = data;
|
||||||
|
};
|
||||||
|
|
||||||
|
saveInfoTransactions(transaction) {
|
||||||
|
this._transactionsInfo = transaction
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchNodeInfo() {
|
||||||
|
getNodeInfo()
|
||||||
|
.then((info) => this.fetchNodeInfoSuccess(info))
|
||||||
|
.catch((err) => this.fetchNodeInfoFailed(err))
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchNodeInfoSuccess(info) {
|
||||||
|
this._nodeInfo = info.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchNodeInfoFailed(err) {
|
||||||
|
console.log(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
get passPhrase() {
|
||||||
|
return 'rocket north inform swift improve fringe sweet crew client canyon bean autumn'
|
||||||
|
}
|
||||||
|
|
||||||
|
get accountData() {
|
||||||
|
return this._accountData
|
||||||
|
};
|
||||||
|
|
||||||
|
encryptAccountData(data) {
|
||||||
|
return data.map((item) => {
|
||||||
|
let value = cryptography.encryptMessageWithPassphrase(cryptography.getRandomBytes(32).toString('hex') + ":" + item.value, this.passPhrase, this.pubKey);
|
||||||
|
return {
|
||||||
|
"label": item.key,
|
||||||
|
"value": value.encryptedMessage,
|
||||||
|
"value_nonce": value.nonce,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
get nodeInfo() {
|
||||||
|
return this._nodeInfo;
|
||||||
|
}
|
||||||
|
|
||||||
|
get addressAndPubKey() {
|
||||||
|
return cryptography.getAddressAndPublicKeyFromPassphrase(this.passPhrase);
|
||||||
|
}
|
||||||
|
|
||||||
|
get pubKey() {
|
||||||
|
return this.addressAndPubKey.publicKey.toString('hex');
|
||||||
|
}
|
||||||
|
|
||||||
|
get address() {
|
||||||
|
return cryptography.bufferToHex(this.addressAndPubKey.address)
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
export const registrationStore = new Store();
|
||||||
51
src/store/transactionsStore.js
Normal file
51
src/store/transactionsStore.js
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
import {makeAutoObservable, reaction} from "mobx";
|
||||||
|
import {registrationStore} from "./store";
|
||||||
|
import User05 from "../../src/images/user-28-05.jpg";
|
||||||
|
import User08 from "../../src/images/user-28-08.jpg";
|
||||||
|
import User09 from "../../src/images/user-28-09.jpg";
|
||||||
|
import User06 from "../../src/images/user-28-06.jpg";
|
||||||
|
|
||||||
|
const labelMap = {
|
||||||
|
firstname: 'First name',
|
||||||
|
secondname: 'Second name',
|
||||||
|
gender: "Gender",
|
||||||
|
birthdate: "Birthdate"
|
||||||
|
};
|
||||||
|
|
||||||
|
const usersImages = [User08,User06,User05,User09];
|
||||||
|
|
||||||
|
class TransactionsStore {
|
||||||
|
_transactionsData = [];
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
makeAutoObservable(this)
|
||||||
|
|
||||||
|
reaction(() => ({data: registrationStore.transactionsInfo}), ({data}) => {
|
||||||
|
this._transactionsData = data.data;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
get transactionsData() {
|
||||||
|
return this._transactionsData.map(item=>{
|
||||||
|
return {
|
||||||
|
id: item.id,
|
||||||
|
users_images: usersImages.map(image=>{
|
||||||
|
return {
|
||||||
|
image: image,
|
||||||
|
size: 24
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
transaction: item.asset.features.map(asset=>{
|
||||||
|
return {
|
||||||
|
transaction_id: item.id,
|
||||||
|
address: registrationStore.accountMadeTransaction,
|
||||||
|
value: asset.value,
|
||||||
|
label: labelMap[asset.label],
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const transactionsStore = new TransactionsStore()
|
||||||
53
src/store/userDataStore.js
Normal file
53
src/store/userDataStore.js
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import { cryptography } from "@liskhq/lisk-client";
|
||||||
|
import { makeAutoObservable, reaction } from "mobx";
|
||||||
|
import { registrationStore } from './store';
|
||||||
|
|
||||||
|
const labelMap = {
|
||||||
|
first_name: 'First name',
|
||||||
|
second_name: 'Second name',
|
||||||
|
gender: "Gender",
|
||||||
|
birthdate: "Birthdate",
|
||||||
|
place_of_birth: "Place of birth",
|
||||||
|
nationality: "Nationality",
|
||||||
|
national_id: "National ID",
|
||||||
|
national_doctype: "National doctype",
|
||||||
|
national_doc_id: "National doc ID",
|
||||||
|
national_doc_issue_date: "National doc issue date",
|
||||||
|
national_doc_expiry_date: "National doc expiry date",
|
||||||
|
telephone: "Telephone",
|
||||||
|
twitter: "Twitter",
|
||||||
|
facebook: "Facebook",
|
||||||
|
instagram: "Instagram",
|
||||||
|
youtube: "Youtube",
|
||||||
|
wechat: "Wechat",
|
||||||
|
tiktok: "Tiktok",
|
||||||
|
linkedin: "Linkedin",
|
||||||
|
vk: "Vk",
|
||||||
|
github: "Github",
|
||||||
|
telegram: "Telegram",
|
||||||
|
qq: "Qq",
|
||||||
|
snapchat: "Snapchat",
|
||||||
|
reddit: "Reddit"
|
||||||
|
};
|
||||||
|
|
||||||
|
class UserDataStore{
|
||||||
|
_data = [];
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
makeAutoObservable(this);
|
||||||
|
|
||||||
|
reaction(() => ({data: registrationStore.userData}), ({data}) => {
|
||||||
|
this._data = data.data;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
get decryptedData(){
|
||||||
|
return this._data.map((elem) => ({
|
||||||
|
...elem,
|
||||||
|
key: elem.label,
|
||||||
|
label: labelMap[elem.label],
|
||||||
|
value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const userDataStore = new UserDataStore();
|
||||||
@@ -2,7 +2,7 @@ import resolveConfig from 'tailwindcss/resolveConfig';
|
|||||||
|
|
||||||
export const tailwindConfig = () => {
|
export const tailwindConfig = () => {
|
||||||
// Tailwind config
|
// Tailwind config
|
||||||
return resolveConfig('./src/css/tailwind.config.js')
|
return resolveConfig('./src/tailwind.config.js')
|
||||||
}
|
}
|
||||||
|
|
||||||
export const hexToRGB = (h) => {
|
export const hexToRGB = (h) => {
|
||||||
|
|||||||
@@ -1,29 +0,0 @@
|
|||||||
import { defineConfig } from 'vite'
|
|
||||||
import postcss from './postcss.config.js'
|
|
||||||
import react from '@vitejs/plugin-react'
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
define: {
|
|
||||||
'process.env': process.env
|
|
||||||
},
|
|
||||||
css: {
|
|
||||||
postcss,
|
|
||||||
},
|
|
||||||
plugins: [react()],
|
|
||||||
resolve: {
|
|
||||||
alias: [
|
|
||||||
{
|
|
||||||
find: /^~.+/,
|
|
||||||
replacement: (val) => {
|
|
||||||
return val.replace(/^~/, "");
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
build: {
|
|
||||||
commonjsOptions: {
|
|
||||||
transformMixedEsModules: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
91
webpack.config.js
Normal file
91
webpack.config.js
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
const path = require("path");
|
||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
|
||||||
|
const plugins = [
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
favicon: './public/favicon.ico',
|
||||||
|
template: './public/index.html',
|
||||||
|
}),
|
||||||
|
new webpack.ProvidePlugin({
|
||||||
|
Buffer: ['buffer', 'Buffer'],
|
||||||
|
}),
|
||||||
|
new webpack.ProvidePlugin({
|
||||||
|
process: 'process/browser',
|
||||||
|
}),
|
||||||
|
require('tailwindcss')
|
||||||
|
];
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: './src/main.jsx',
|
||||||
|
mode: 'development',
|
||||||
|
devtool: 'eval-source-map',
|
||||||
|
plugins,
|
||||||
|
output: {
|
||||||
|
clean: true,
|
||||||
|
path: path.resolve(__dirname, 'build'),
|
||||||
|
assetModuleFilename: 'assets/[hash][ext]',
|
||||||
|
filename: 'main.[hash:8].js',
|
||||||
|
},
|
||||||
|
devServer: {
|
||||||
|
open: true,
|
||||||
|
static: {
|
||||||
|
directory: path.join(__dirname, 'public'),
|
||||||
|
},
|
||||||
|
compress: true,
|
||||||
|
port: 'auto',
|
||||||
|
hot: true,
|
||||||
|
client: {
|
||||||
|
progress: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{ test: /\.(html)$/, use: ['html-loader'] },
|
||||||
|
{
|
||||||
|
test: /\.m?jsx?$/,
|
||||||
|
exclude: /(node_modules|bower_components)/,
|
||||||
|
use: {
|
||||||
|
loader: 'babel-loader',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.scss$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'style-loader'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'css-loader'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
loader: 'postcss-loader'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'sass-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|svg|jpg|gif)$/,
|
||||||
|
use: ["file-loader"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.js', '.jsx'],
|
||||||
|
fallback: {
|
||||||
|
"path": require.resolve("path-browserify"),
|
||||||
|
"os": require.resolve("os-browserify/browser"),
|
||||||
|
"querystring": require.resolve("querystring-es3"),
|
||||||
|
"crypto": require.resolve("crypto-browserify"),
|
||||||
|
"util": require.resolve("util/"),
|
||||||
|
"stream": require.resolve("stream-browserify"),
|
||||||
|
"url": require.resolve("url/"),
|
||||||
|
"buffer": require.resolve("buffer/"),
|
||||||
|
"fs": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user