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

Compare commits

merge into: admin:Verify-Page
Branches Tags
admin:master admin:DID-14 admin:DID-13 admin:DID-12 admin:DID-11 admin:DID-10 admin:DID-9 admin:DID-8 admin:DID-7 admin:DID-6 admin:DID-5 admin:DID-4 admin:DID-3 admin:DID-2 admin:DID-1 admin:did-1 admin:Deleting_elements admin:Validation_merged admin:Onboarding_steps admin:Profile-Page admin:Verify-Page admin:Shared_data_ admin:Profile-table-item admin:Digital-ID-and-Header
...
pull from: admin:did-1
Branches Tags
admin:master admin:DID-14 admin:DID-13 admin:DID-12 admin:DID-11 admin:DID-10 admin:DID-9 admin:DID-8 admin:DID-7 admin:DID-6 admin:DID-5 admin:DID-4 admin:DID-3 admin:DID-2 admin:DID-1 admin:did-1 admin:Deleting_elements admin:Validation_merged admin:Onboarding_steps admin:Profile-Page admin:Verify-Page admin:Shared_data_ admin:Profile-table-item admin:Digital-ID-and-Header

22 Commits
Verify-Pag ... did-1

Author SHA1 Message Date
kandrusyak
0da68ddd63 migrate to webpack 2022-06-17 16:56:30 +03:00
DwCay
eeaabeebf3 Add method for get passPhrase 2022-06-15 17:41:02 +03:00
DwCay
da04efbf80 Add registration store 2022-06-14 13:13:58 +03:00
DuCay
541c5988e9 Merge pull request #20 from franze6/Deleting_elements 
Delete Onboarding and Component from Sidebar
 2022-06-02 15:53:43 +03:00
DwCay
cfa5af78c0 Delete Onboarding and Component from Sidebar 2022-06-02 15:53:06 +03:00
DuCay
fc4d9fb897 Merge pull request #19 from franze6/Validation_merged 
Update Validate Panel
 2022-06-02 15:35:15 +03:00
DwCay
ed5565eb17 Update Validate Panel 2022-06-02 15:34:20 +03:00
DuCay
99512491fa Merge pull request #18 from franze6/Onboarding_steps 
Start window Onboarding1
 2022-06-02 14:40:24 +03:00
DwCay
24a66478d6 Start window Onboarding1 2022-06-02 14:27:04 +03:00
DuCay
9484b0bda9 Merge pull request #17 from franze6/Validation_merged 
Fix errors and styling
 2022-06-01 20:46:49 +03:00
DwCay
885963be45 Fix errors and styling 2022-06-01 20:45:14 +03:00
DuCay
e144e50a40 Merge pull request #16 from franze6/Onboarding_steps 
Fix routing link in onboarding steps
 2022-06-01 17:59:40 +03:00
DwCay
16f9a52a41 Fix routing link in onboarding steps 2022-06-01 17:58:51 +03:00
DuCay
5e74f2bc0b Merge pull request #15 from franze6/Onboarding_steps 
Onboarding fix styling
 2022-06-01 17:36:25 +03:00
DuCay
fa5ddbf64a Merge branch 'master' into Onboarding_steps 2022-06-01 17:36:15 +03:00
DwCay
c45b7c5e4d Onboarding fix styling 2022-06-01 17:33:20 +03:00
Daria Golova
606223216f Merge pull request #13 from franze6/Profile-Page 
fix profile page
 2022-06-01 17:25:45 +03:00
Daria Golova
c41bed05fd Merge pull request #14 from franze6/Verify-Page 
fix verify page
 2022-06-01 17:25:34 +03:00
Daria Golova
b71dccbd0e fix field on sidepanel 2022-06-01 17:18:22 +03:00
Daria Golova
264a908352 fix paddings 2022-06-01 16:51:32 +03:00
DuCay
f74293b1f4 Merge pull request #12 from franze6/Onboarding_steps 
Onboarding2 fix name for form
 2022-06-01 15:57:57 +03:00
DwCay
095c5e236e Onboarding2 fix name for form 2022-06-01 15:56:09 +03:00
34 changed files with 12527 additions and 1606 deletions
Expand all files Collapse all files

26
README.md
View File

@@ -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/].

21
index.html
View File

@@ -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>

13278
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

49
package.json
View File

@@ -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
} }
} }

8
postcss.config.js
View File

@@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

11
public/index.html Normal file
View 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>

9
src/App.jsx
View File

@@ -27,12 +27,14 @@ import Onboarding3 from "./pages/Onboarding3";
import Onboarding4 from "./pages/Onboarding4"; import Onboarding4 from "./pages/Onboarding4";
import SharedData from "./pages/SharedData"; import SharedData from "./pages/SharedData";
import ResetPassword from "./pages/ResetPassword"; import ResetPassword from "./pages/ResetPassword";
import Signup from "./pages/Signup";
import Signin from "./pages/Signin"; import Signin from "./pages/Signin";
function App() { function App() {
const location = useLocation(); const location = useLocation();
useEffect(()=> {
localStorage.setItem('svgAvatar', '')
},[])
useEffect(() => { useEffect(() => {
document.querySelector('html').style.scrollBehavior = 'auto' document.querySelector('html').style.scrollBehavior = 'auto'
@@ -43,7 +45,8 @@ function App() {
return ( return (
<> <>
<Routes> <Routes>
<Route exact path="/" element={<Dashboard />} /> <Route exact path="/" element={<Onboarding1 />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/dashboard/analytics" element={<Analytics />} /> <Route path="/dashboard/analytics" element={<Analytics />} />
<Route path="/dashboard/fintech" element={<Fintech />} /> <Route path="/dashboard/fintech" element={<Fintech />} />
<Route path="/digitalId/profile-id" element={<ProfileId />} /> <Route path="/digitalId/profile-id" element={<ProfileId />} />
@@ -51,7 +54,6 @@ function App() {
<Route path="/digitalId/validation-log" element={<ValidationLog />} /> <Route path="/digitalId/validation-log" element={<ValidationLog />} />
<Route path="/digitalId/verify" element={<Verify />} /> <Route path="/digitalId/verify" element={<Verify />} />
<Route path="/messages" element={<Messages />} /> <Route path="/messages" element={<Messages />} />
<Route path="/onboarding-1" element={<Onboarding1 />} />
<Route path="/onboarding-2" element={<Onboarding2 />} /> <Route path="/onboarding-2" element={<Onboarding2 />} />
<Route path="/onboarding-3" element={<Onboarding3 />} /> <Route path="/onboarding-3" element={<Onboarding3 />} />
<Route path="/onboarding-4" element={<Onboarding4 />} /> <Route path="/onboarding-4" element={<Onboarding4 />} />
@@ -61,7 +63,6 @@ function App() {
<Route path="/component/accordion" element={<AccordionPage />} /> <Route path="/component/accordion" element={<AccordionPage />} />
<Route path="/reset-password" element={<ResetPassword />} /> <Route path="/reset-password" element={<ResetPassword />} />
<Route path="/signin" element={<Signin />} /> <Route path="/signin" element={<Signin />} />
<Route path="/signup" element={<Signup />} />
</Routes> </Routes>
</> </>
); );

4
src/components/DropdownProfile.jsx
View File

@@ -75,7 +75,7 @@ function DropdownProfile({
<li> <li>
<Link <Link
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
to="/" to="/dashboard"
onClick={() => setDropdownOpen(!dropdownOpen)} onClick={() => setDropdownOpen(!dropdownOpen)}
> >
Settings Settings
@@ -84,7 +84,7 @@ function DropdownProfile({
<li> <li>
<Link <Link
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
to="/" to="/dashboard"
onClick={() => setDropdownOpen(!dropdownOpen)} onClick={() => setDropdownOpen(!dropdownOpen)}
> >
Sign Out Sign Out

1
src/css/style.scss
View File

@@ -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';

3
src/main.jsx
View File

@@ -1,8 +1,11 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import {Buffer} from "buffer";
import { BrowserRouter as Router } from 'react-router-dom' import { BrowserRouter 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>

18
src/pages/Onboarding1.jsx
View File

@@ -21,7 +21,7 @@ function Onboarding1() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/dashboard">
<img alt='logo' src={Logo} width="89" height="32"/> <img alt='logo' src={Logo} width="89" height="32"/>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
@@ -30,13 +30,13 @@ function Onboarding1() {
</div> </div>
{/* Progress bar */} {/* Progress bar */}
<div className="px-4 pt-12 pb-8"> <div className="px-4 pt-12 pb-[142px]">
<div className="max-w-md mx-auto w-full"> <div className="max-w-md mx-auto w-full">
<div className="relative"> <div className="relative">
<div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div> <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
<ul className="relative flex justify-between w-full"> <ul className="relative flex justify-between w-full">
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
</li> </li>
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-2">2</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-2">2</Link>
@@ -56,7 +56,7 @@ function Onboarding1() {
<div className="px-4 py-8"> <div className="px-4 py-8">
<div className="max-w-md mx-auto"> <div className="max-w-md mx-auto">
<h1 className="text-3xl text-slate-800 font-bold mb-6">Tell us about your company ✨</h1> <h1 className="text-3xl text-slate-800 font-bold mb-12">Tell us about your company ✨</h1>
{/* Form */} {/* Form */}
<form> <form>
<div className="sm:flex space-y-3 sm:space-y-0 sm:space-x-4 mb-8"> <div className="sm:flex space-y-3 sm:space-y-0 sm:space-x-4 mb-8">
@@ -67,7 +67,7 @@ function Onboarding1() {
<circle className="text-indigo-100" cx="20" cy="20" r="20" /> <circle className="text-indigo-100" cx="20" cy="20" r="20" />
<path className="text-indigo-500" d="m26.371 23.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 24 17v-1.828A4.087 4.087 0 0 0 20 11a4.087 4.087 0 0 0-4 4.172V17a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V27a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" /> <path className="text-indigo-500" d="m26.371 23.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 24 17v-1.828A4.087 4.087 0 0 0 20 11a4.087 4.087 0 0 0-4 4.172V17a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V27a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" />
</svg> </svg>
<div className="font-medium text-slate-800 mb-1">Individual</div> <div className="font-semibold text-slate-800 mb-1">Individual</div>
<div className="text-sm">Lorem ipsum is place text commonly used.</div> <div className="text-sm">Lorem ipsum is place text commonly used.</div>
</div> </div>
<div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></div> <div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></div>
@@ -82,7 +82,7 @@ function Onboarding1() {
<path className="text-indigo-300" d="m30.377 22.749-3.709-1.5a1 1 0 0 1-.623-.926v-.878A3.989 3.989 0 0 0 28.027 16v-1.828c.047-2.257-1.728-4.124-3.964-4.172-2.236.048-4.011 1.915-3.964 4.172V16a3.989 3.989 0 0 0 1.982 3.445v.878a1 1 0 0 1-.623.928c-.906.266-1.626.557-2.159.872-.533.315-1.3 1.272-2.299 2.872 1.131.453 6.075-.546 6.072.682V28a2.99 2.99 0 0 1-.182 1h7.119A.996.996 0 0 0 31 28v-4.323a1 1 0 0 0-.623-.928Z" /> <path className="text-indigo-300" d="m30.377 22.749-3.709-1.5a1 1 0 0 1-.623-.926v-.878A3.989 3.989 0 0 0 28.027 16v-1.828c.047-2.257-1.728-4.124-3.964-4.172-2.236.048-4.011 1.915-3.964 4.172V16a3.989 3.989 0 0 0 1.982 3.445v.878a1 1 0 0 1-.623.928c-.906.266-1.626.557-2.159.872-.533.315-1.3 1.272-2.299 2.872 1.131.453 6.075-.546 6.072.682V28a2.99 2.99 0 0 1-.182 1h7.119A.996.996 0 0 0 31 28v-4.323a1 1 0 0 0-.623-.928Z" />
<path className="text-indigo-500" d="m22.371 24.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 20 18v-1.828A4.087 4.087 0 0 0 16 12a4.087 4.087 0 0 0-4 4.172V18a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V28a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" /> <path className="text-indigo-500" d="m22.371 24.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 20 18v-1.828A4.087 4.087 0 0 0 16 12a4.087 4.087 0 0 0-4 4.172V18a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V28a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" />
</svg> </svg>
<div className="font-medium text-slate-800 mb-1">Organization</div> <div className="font-semibold text-slate-800 mb-1">Organization</div>
<div className="text-sm">Lorem ipsum is place text commonly used.</div> <div className="text-sm">Lorem ipsum is place text commonly used.</div>
</div> </div>
<div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></div> <div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></div>
@@ -91,7 +91,7 @@ function Onboarding1() {
<div className="flex items-center justify-between space-x-6 mb-8"> <div className="flex items-center justify-between space-x-6 mb-8">
<div> <div>
<div className="font-medium text-slate-800 text-sm mb-1">💸 Lorem ipsum is place text commonly?</div> <div className="font-medium text-slate-800 text-sm mb-1">💸 Lorem ipsum is place text commonly?</div>
<div className="text-xs">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.</div> <div className="text-xs font-normal leading-6">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.</div>
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="form-switch"> <div className="form-switch">
@@ -104,7 +104,9 @@ function Onboarding1() {
</div> </div>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto" to="/onboarding-2">Next Step -&gt;</Link> <button className="font-medium btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
<Link to="/onboarding-2">Next Step -&gt;</Link>
</button>
</div> </div>
</form> </form>

80
src/pages/Onboarding2.jsx
View File

@@ -1,11 +1,54 @@
import React from 'react'; import React, {useEffect, 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/registrationStore";
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: '',
last_name: '',
gender: '',
date_birth: '',
}
)
const [fillingForm, setFillingForm] = useState(false)
const saveValueChange = (event)=>{
const newValue=event.target.value;
setDataRegistration({
...dataRegistration,
[event.target.id]: newValue
})
}
const saveStoreRegistration = ()=>{
Object.keys(dataRegistration).forEach(item=>{
let element=document.getElementById(item)
if(dataRegistration[item]) {
element.style.borderColor=""
} else {
element.style.borderColor="red"
}
})
if(Object.keys(dataRegistration).find(item=>!dataRegistration[item])) {
return
} else {
setFillingForm(true)
}
registrationStore.saveDataRegistration(dataRegistration)
}
useEffect(()=>{
if(fillingForm===true) {
document.getElementById("signup").click()
}
},[fillingForm])
return ( return (
<main className="bg-white"> <main className="bg-white">
@@ -21,7 +64,7 @@ function Onboarding2() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/dashboard">
<img alt='logo' src={Logo} width="89" height="32"/> <img alt='logo' src={Logo} width="89" height="32"/>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
@@ -30,13 +73,13 @@ function Onboarding2() {
</div> </div>
{/* Progress bar */} {/* Progress bar */}
<div className="px-4 pt-12 pb-8"> <div className="px-4 pt-12 pb-[59px]">
<div className="max-w-md mx-auto w-full"> <div className="max-w-md mx-auto w-full">
<div className="relative"> <div className="relative">
<div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div> <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
<ul className="relative flex justify-between w-full"> <ul className="relative flex justify-between w-full">
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
</li> </li>
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
@@ -54,29 +97,30 @@ function Onboarding2() {
</div> </div>
<div className="px-4 py-8"> <div className="px-4 py-8">
<div className="max-w-sm mx-auto"> <div className="max-w-[344px] mx-auto">
<h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1> <h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1>
{/* Form */} {/* Form */}
<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">Email Address <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">Full Name <span className="text-rose-500">*</span></label> <label className="block text-sm font-medium mb-1" htmlFor="last_name">Last name <span className="text-rose-500">*</span></label>
<input id="name" className="form-input w-full" type="text" /> <input id="last_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="date_birth">Date of birth <span className="text-rose-500">*</span></label>
<input id="password" className="form-input w-full" type="password" autoComplete="on" /> <input id="date_birth" 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,13 +130,15 @@ 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>
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap" to="/onboarding-3">Sign Up</Link> <button onClick={()=>saveStoreRegistration()} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">
<Link id="signup" to={fillingForm && "/onboarding-3"} >Sign Up</Link>
</button>
</div> </div>
</form> </form>
{/* Footer */} {/* Footer */}
<div className="pt-5 mt-6 border-t border-slate-200"> <div className="pt-5 mt-6 border-t border-slate-200">
<div className="text-sm"> <div className="text-sm">
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/onboarding-2">Sign In</Link> Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
</div> </div>
</div> </div>
</div> </div>
@@ -112,6 +158,6 @@ function Onboarding2() {
</main> </main>
); );
} });
export default Onboarding2; export default Onboarding2;

34
src/pages/Onboarding3.jsx
View File

@@ -1,10 +1,24 @@
import React from 'react'; import React, {useEffect, 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 { 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('')
function getPassPhrase() {
let phrase = passphrase.Mnemonic.generateMnemonic()
setPassPhrase(phrase)
}
useEffect(()=>{
return ()=>{
localStorage.setItem('svgAvatar', generateSvgAvatar())
}
}, [])
return ( return (
<main className="bg-white"> <main className="bg-white">
@@ -20,7 +34,7 @@ function Onboarding3() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/dashboard">
<img alt='logo' src={Logo} width="89" height="32"/> <img alt='logo' src={Logo} width="89" height="32"/>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
@@ -35,7 +49,7 @@ function Onboarding3() {
<div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div> <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
<ul className="relative flex justify-between w-full"> <ul className="relative flex justify-between w-full">
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
</li> </li>
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
@@ -58,14 +72,14 @@ function Onboarding3() {
<div className="gap-0.5"> <div className="gap-0.5">
<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-2.5 mb-14"> <div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
{arrayBadges.map(tag => ( {passPhrase.split(' ').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} 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}</span>
</button> </button>
))} ))}
</div> </div>
<div className="flex justify-center 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 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
@@ -73,7 +87,7 @@ function Onboarding3() {
</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={()=>getPassPhrase()} 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"/>
@@ -84,7 +98,9 @@ function Onboarding3() {
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Link className="text-sm underline hover:no-underline" to="/onboarding-2">&lt;- Back</Link> <Link className="text-sm underline hover:no-underline" to="/onboarding-2">&lt;- Back</Link>
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto" to="/onboarding-4">Next Step -&gt;</Link> <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
<Link to="/onboarding-4">Next Step -&gt;</Link>
</button>
</div> </div>
</div> </div>

49
src/pages/Onboarding4.jsx
View File

@@ -1,9 +1,36 @@
import React from 'react'; import React, {useEffect, 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/registrationStore";
const Onboarding4 = observer(()=>{
const [checkBoxesSelected, setCheckBoxesSelected] = useState(false)
function validateCheckBox () {
let checkBoxes=[...document.getElementsByClassName("form-checkbox")]
if(checkBoxes.find(item=>item.checked===false)) {
return
} else {
setCheckBoxesSelected(true)
}
}
useEffect(()=>{
if(checkBoxesSelected===true) {
document.getElementById("link-dashboard").click()
}
},[checkBoxesSelected])
useEffect(()=>{
return ()=>{
localStorage.setItem('svgAvatar', generateSvgAvatar())
}
}, [])
function Onboarding4() {
return ( return (
<main className="bg-white"> <main className="bg-white">
@@ -19,7 +46,7 @@ function Onboarding4() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/dashboard">
<img alt='logo' src={Logo} width="89" height="32"/> <img alt='logo' src={Logo} width="89" height="32"/>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
@@ -28,13 +55,13 @@ function Onboarding4() {
</div> </div>
{/* Progress bar */} {/* Progress bar */}
<div className="px-4 pt-12 pb-8"> <div className="px-4 pt-12 pb-[85px]">
<div className="max-w-md mx-auto w-full"> <div className="max-w-md mx-auto w-full">
<div className="relative"> <div className="relative">
<div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div> <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
<ul className="relative flex justify-between w-full"> <ul className="relative flex justify-between w-full">
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
</li> </li>
<li> <li>
<Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link> <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
@@ -59,11 +86,13 @@ 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">{`Nice to meet you, ${registrationStore.accountData().first_name} 🙌`}</h1>
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/">Go To Profile -&gt;</Link> <button onClick={()=>validateCheckBox()} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
<Link id="link-dashboard" to={checkBoxesSelected && "/dashboard"}>Go To Profile -&gt;</Link>
</button>
</div> </div>
<div className="flex items-center justify-between mt-6"> <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 type="checkbox" className="form-checkbox" />
@@ -72,7 +101,7 @@ function Onboarding4() {
<label className="flex items-center"> <label className="flex items-center">
<input type="checkbox" className="form-checkbox" /> <input type="checkbox" className="form-checkbox" />
<div className="text-sm ml-2"> <div className="text-sm ml-2">
<Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">I 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>
</label> </label>
</div> </div>
@@ -97,6 +126,6 @@ function Onboarding4() {
</main> </main>
); );
} });
export default Onboarding4; export default Onboarding4;

2
src/pages/ResetPassword.jsx
View File

@@ -18,7 +18,7 @@ function ResetPassword() {
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/dashboard">
<svg width="32" height="32" viewBox="0 0 32 32"> <svg width="32" height="32" viewBox="0 0 32 32">
<defs> <defs>
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a"> <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">

5
src/pages/SharedData.jsx
View File

@@ -55,9 +55,6 @@ function SharedData() {
] ]
}; };
function saveDigitalId() {
localStorage.setItem('svgAvatar', generateSvgAvatar())
}
return ( return (
<main className="bg-white"> <main className="bg-white">
@@ -92,7 +89,7 @@ function SharedData() {
<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()} width="493px" height="493px" alt="Onboarding" />
<span className="text-sm">{sharedDataItems.data}</span> <span className="text-sm">{sharedDataItems.data}</span>
<Link onClick={()=>saveDigitalId()} className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/">Get my digital ID</Link> <Link className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/dashboard">Get my digital ID</Link>
</div> </div>
</div> </div>

6
src/pages/Signin.jsx
View File

@@ -21,7 +21,7 @@ function Signin() {
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/dashboard">
<svg width="32" height="32" viewBox="0 0 32 32"> <svg width="32" height="32" viewBox="0 0 32 32">
<defs> <defs>
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a"> <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
@@ -60,13 +60,13 @@ function Signin() {
<div className="mr-1"> <div className="mr-1">
<Link className="text-sm underline hover:no-underline" to="/reset-password">Forgot Password?</Link> <Link className="text-sm underline hover:no-underline" to="/reset-password">Forgot Password?</Link>
</div> </div>
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3" to="/">Sign In</Link> <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3" to="/dashboard">Sign In</Link>
</div> </div>
</form> </form>
{/* Footer */} {/* Footer */}
<div className="pt-5 mt-6 border-t border-slate-200"> <div className="pt-5 mt-6 border-t border-slate-200">
<div className="text-sm"> <div className="text-sm">
Don’t you have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signup">Sign Up</Link> Don’t you have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">Sign Up</Link>
</div> </div>
{/* Warning */} {/* Warning */}
<div className="mt-5"> <div className="mt-5">

101
src/pages/Signup.jsx
View File

@@ -1,101 +0,0 @@
import React from 'react';
import { Link } from 'react-router-dom';
import AuthImage from '../images/auth-image.jpg';
import AuthDecoration from '../images/auth-decoration.png';
function Signup() {
return (
<main className="bg-white">
<div className="relative md:flex">
{/* Content */}
<div className="md:w-1/2">
<div className="min-h-screen h-full flex flex-col after:flex-1">
{/* Header */}
<div className="flex-1">
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */}
<Link className="block" to="/">
<svg width="32" height="32" viewBox="0 0 32 32">
<defs>
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
<stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
<stop stopColor="#A5B4FC" offset="100%" />
</linearGradient>
<linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
<stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
<stop stopColor="#38BDF8" offset="100%" />
</linearGradient>
</defs>
<rect fill="#6366F1" width="32" height="32" rx="16" />
<path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
<path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
<path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
</svg>
</Link>
</div>
</div>
<div className="max-w-sm mx-auto px-4 py-8">
<h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1>
{/* Form */}
<form>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium mb-1" htmlFor="email">Email Address <span className="text-rose-500">*</span></label>
<input id="email" className="form-input w-full" type="email" />
</div>
<div>
<label className="block text-sm font-medium mb-1" htmlFor="name">Full Name <span className="text-rose-500">*</span></label>
<input id="name" className="form-input w-full" type="text" />
</div>
<div>
<label className="block text-sm font-medium mb-1" htmlFor="role">Your Role <span className="text-rose-500">*</span></label>
<select id="role" className="form-select w-full">
<option>Designer</option>
<option>Developer</option>
<option>Accountant</option>
</select>
</div>
<div>
<label className="block text-sm font-medium mb-1" htmlFor="password">Password</label>
<input id="password" className="form-input w-full" type="password" autoComplete="on" />
</div>
</div>
<div className="flex items-center justify-between mt-6">
<div className="mr-1">
<label className="flex items-center">
<input type="checkbox" className="form-checkbox" />
<span className="text-sm ml-2">Email me about product news.</span>
</label>
</div>
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap" to="/">Sign Up</Link>
</div>
</form>
{/* Footer */}
<div className="pt-5 mt-6 border-t border-slate-200">
<div className="text-sm">
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
</div>
</div>
</div>
</div>
</div>
{/* Image */}
<div className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
<img className="object-cover object-center w-full h-full" src={AuthImage} width="760" height="1024" alt="Authentication" />
<img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={AuthDecoration} width="218" height="224" alt="Authentication decoration" />
</div>
</div>
</main>
);
}
export default Signup;

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

@@ -285,14 +285,14 @@ function Profile () {
</div> </div>
</div> </div>
{/* Remove panel */} {/* Remove panel */}
<div className={`${!removePanelOpen && 'hidden'} bg-white p-5 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.5">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 => ( {userData.filter(({ id }) => selectedItems.includes(id)).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.id} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.property}</span>
))} ))}
</div> </div>
<div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center"> <div className="flex flex-row justify-between pt-[16px] pb-7 items-center">
<span className="block text-sm font-medium">On blockchain too</span> <span className="block text-sm font-medium">On blockchain too</span>
<div className="flex items-center"> <div className="flex items-center">
<div className="form-switch"> <div className="form-switch">
@@ -351,7 +351,7 @@ function Profile () {
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span> <span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
</div> </div>
<div className="flex justify-between space-x-1"> <div className="flex justify-between space-x-1">
<span className="italic">Transacion::</span> <span className="italic">Transaction:</span>
<span className="font-medium text-slate-700 text-right">145 bytes</span> <span className="font-medium text-slate-700 text-right">145 bytes</span>
</div> </div>
</div> </div>

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

@@ -73,7 +73,7 @@ function Validate () {
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden"> <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
{/* Site header */} {/* Site header */}
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} /> <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
<main> <main className="relative">
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto"> <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
<div className="w-fit"> <div className="w-fit">
{/* Page header */} {/* Page header */}
@@ -107,8 +107,8 @@ function Validate () {
</ul> </ul>
</div> </div>
<ValidateTable setValidatePanelOpen={setValidatePanelOpen}/> <ValidateTable setValidatePanelOpen={setValidatePanelOpen}/>
<div className="pb-8 border-b border-zinc-200 mt-12"> <div className="pb-8 border-b border-zinc-200 mt-[50px]">
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl 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 => { {validateItems.map(item => {
return <ValidateRoadMap season={item} key={item.id}/> return <ValidateRoadMap season={item} key={item.id}/>

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

@@ -123,17 +123,17 @@ function ValidationLog () {
{/* Page header */} {/* Page header */}
<div className="pb-8 border-b border-zinc-200"> <div className="pb-8 border-b border-zinc-200">
{/* Title */} {/* Title */}
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID transaction log ✨</h1> <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID transaction log ✨</h1>
</div> </div>
{/*Psosts*/} {/*Psosts*/}
<div className="max-w-3xl m-auto mt-8"> <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 => { {logItems.map(item => {
return <ValidateRoadMap season={item} key={item.id} /> return <ValidateRoadMap season={item} key={item.id} />
})} })}
{/* Post */} {/* Post */}
<article className="pt-6"> <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">Even earlier</h2> <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">Even earlier</h2>

195
src/partials/Sidebar.jsx
View File

@@ -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) */}
@@ -85,7 +81,7 @@ function Sidebar({
</svg> </svg>
</button> </button>
{/* Logo */} {/* Logo */}
<NavLink end to="/" className="block"> <NavLink end to="/dashboard" className="block">
<img alt='logo' src={Logo} width="89" height="32"/> <img alt='logo' src={Logo} width="89" height="32"/>
</NavLink> </NavLink>
</div> </div>
@@ -154,7 +150,7 @@ function Sidebar({
<li className="mb-1 last:mb-0"> <li className="mb-1 last:mb-0">
<NavLink <NavLink
end end
to="/" to="/dashboard"
className={({ isActive }) => className={({ isActive }) =>
'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '') 'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
} }
@@ -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 */}

4
src/partials/digitalId/ProfileTableItem.jsx
View File

@@ -90,7 +90,7 @@ function ProfileTableItem(props) {
</td> </td>
</tr> </tr>
<tr className={`${!descriptionOpen && 'hidden'} ${props.status !== 'Progress' || 'bg-[#eaf0f6]'}` }> <tr className={`${!descriptionOpen && 'hidden'} ${props.status !== 'Progress' || 'bg-[#eaf0f6]'}` }>
<td colSpan="10" className="px-12 py-3.5"> <td colSpan="10" className="px-12 pt-3.5 pb-[14px]">
<div className="flex items-center gap-x-5"> <div className="flex items-center gap-x-5">
<div> <div>
<label className="block text-sm font-medium mb-1" htmlFor="placeholder">Seed</label> <label className="block text-sm font-medium mb-1" htmlFor="placeholder">Seed</label>
@@ -102,7 +102,7 @@ function ProfileTableItem(props) {
</div> </div>
</div> </div>
{/* Progress validation bar */} {/* Progress validation bar */}
<div className="pt-[18px] pb-8"> <div className="pt-[18px]">
<div className="h-full max-w-md w-full flex flex-row"> <div className="h-full max-w-md w-full flex flex-row">
<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">Today</h2> <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">Today</h2>

4
src/partials/validate/ValidateItem.jsx
View File

@@ -19,8 +19,8 @@ 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-5 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">
<span className="sr-only">Select</span> <span className="sr-only">Select</span>

47
src/partials/validate/ValidatePanel.jsx
View File

@@ -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,38 +7,13 @@ function TransactionPanel({
setValidatePanelOpen setValidatePanelOpen
}) { }) {
const closeBtn = useRef(null);
const panelContent = useRef(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }) => {
if (!validatePanelOpen || panelContent.current.contains(target) || closeBtn.current.contains(target)) 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 overflow-x-hidden overflow-y-auto no-scrollbar shrink-0 border-l border-slate-200 w-full sm:w-[390px] h-[calc(100vh-64px)]"> <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
ref={closeBtn}
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"
> >
@@ -83,38 +58,38 @@ function TransactionPanel({
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span> <span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
</div> </div>
<div className="flex justify-between space-x-1"> <div className="flex justify-between space-x-1">
<span className="italic">Transacion::</span> <span className="italic">Transaction:</span>
<span className="font-medium text-slate-700 text-right">145 bytes</span> <span className="font-medium text-slate-700 text-right">145 bytes</span>
</div> </div>
</div> </div>
</div> </div>
{/* Receipts */} {/* Receipts */}
<div className="mt-6"> <div className="mt-6">
<div className="text-sm font-semibold text-slate-800 mb-2">Receipts</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>
<label htmlFor="upload" className="block text-sm text-slate-500 italic">Upload exported JSON data</label> <label htmlFor="upload" className="block text-sm text-slate-400 italic">Upload exported JSON data</label>
<input className="sr-only" id="upload" type="file" /> <input className="sr-only" id="upload" type="file" />
</form> </form>
</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 */}
<div className="flex items-center space-x-3 mt-6"> <div className="flex items-center space-x-3 mt-[84px]">
<div className="w-1/2"> <div className="w-1/2">
<button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600"> <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600">
<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>

2
src/partials/validate/ValidateTable.jsx
View File

@@ -83,7 +83,7 @@ function ValidateTable({
{/* Table header */} {/* Table header */}
<thead className="bg-white text-xs font-semibold uppercase text-slate-500 border-t border-b-2 border-slate-200"> <thead className="bg-white text-xs font-semibold uppercase text-slate-500 border-t border-b-2 border-slate-200">
<tr> <tr>
<th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px"> <th className="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">
<span className="sr-only">Select all</span> <span className="sr-only">Select all</span>

2
src/partials/validationlog/ValidateRoadMap.jsx
View File

@@ -6,7 +6,7 @@ import ValidationUsersImg from "./ValidationUsersImg";
function ValidateRoadMap({ season }) { function ValidateRoadMap({ season }) {
return ( return (
<article className="pt-6"> <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">{season.name}</h2>

8
src/partials/validationlog/ValidationSeasonItem.jsx
View File

@@ -2,8 +2,8 @@ import React from "react";
function ValidationSeasonItem({ length, item, index }) { function ValidationSeasonItem({ length, item, index }) {
return ( return (
<li className="relative py-2"> <li className="relative pt-2 pb-2.5">
<div className="flex items-center mb-1"> <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 ${item.checked ? "bg-indigo-500" : "bg-[#FF0000]"}`} 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">
@@ -16,11 +16,11 @@ function ValidationSeasonItem({ length, item, index }) {
</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]">{`0x${item.dataSeason}`}</div>
<span className="font-normal 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.dataSeason}</div>
<span className="font-normal 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 -&gt;</a> <a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>
</li> </li>

22
src/store/registrationStore.js Normal file
View File

@@ -0,0 +1,22 @@
import { reaction, makeAutoObservable } from "mobx";
class RegistrationStore {
_accountData = {};
constructor() {
makeAutoObservable(this);
reaction(() => this.accountData, () => this.saveDataRegistration())
};
saveDataRegistration(data) {
this._accountData = data;
};
accountData() {
return this._accountData
};
};
export const registrationStore = new RegistrationStore();

0
src/css/tailwind.config.js → src/tailwind.config.js
View File

2
src/utils/Utils.js
View File

@@ -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) => {

29
vite.config.js
View File

@@ -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
View 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
}
},
};