migrate to webpack

Add method for get passPhrase
Add registration store
2022-06-17 16:56:30 +03:00 · 2022-06-15 17:41:02 +03:00 · 2022-06-14 13:13:58 +03:00 · 2022-06-02 15:53:43 +03:00 · 2022-06-02 15:53:06 +03:00 · 2022-06-02 15:35:15 +03:00
20 changed files with 12459 additions and 1448 deletions
--- a/README.md
+++ b/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/].
--- a/index.html
+++ b/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>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,27 +2,60 @@
  "name": "mosaic-react",
  "version": "0.1.0",
  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
+    "dev": "webpack-dev-server",
+    "build": "webpack"
  },
  "dependencies": {
+    "@liskhq/lisk-client": "^5.2.2",
    "@tailwindcss/forms": "^0.4.0",
+    "autoprefixer": "^10.4.5",
+    "buffer": "^6.0.3",
    "chart.js": "^3.5.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",
+    "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-dom": "^17.0.2",
    "react-flatpickr": "^3.10.7",
    "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": {
-    "@vitejs/plugin-react": "^1.0.7",
-    "autoprefixer": "^10.4.2",
+    "@babel/core": "^7.18.5",
+    "@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",
-    "sass": "^1.49.0",
+    "sass": "^1.52.3",
+    "sass-loader": "^13.0.0",
+    "style-loader": "^3.3.1",
    "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
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,7 @@
-import tailwind from 'tailwindcss'
-import autoprefixer from 'autoprefixer'
-import tailwindConfig from './src/css/tailwind.config.js'
+const tailwind = require('tailwindcss')
+const autoprefixer = require('autoprefixer')
+const tailwindConfig = require('./src/tailwind.config.js')

-export default {
+module.exports = {
  plugins: [tailwind(tailwindConfig), autoprefixer],
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -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>
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -3,7 +3,6 @@
@tailwind base;
@tailwind components;

-// Additional styles
@import 'additional-styles/utility-patterns.scss';
@import 'additional-styles/range-slider.scss';
@import 'additional-styles/toggle-switch.scss';
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,8 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import {Buffer} from "buffer";
 import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App'

+globalThis.Buffer = Buffer
+
 ReactDOM.render(
  <React.StrictMode>
    <Router>
--- a/src/pages/Onboarding2.jsx
+++ b/src/pages/Onboarding2.jsx
@@ -1,11 +1,54 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 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 OnboardingDecoration from '../images/auth-decoration.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 (
    <main className="bg-white">

@@ -60,23 +103,24 @@ function Onboarding2() {
                <form>
                  <div className="space-y-4 mb-8">
                    <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="email">First name <span className="text-rose-500">*</span></label>
-                      <input id="email" className="form-input w-full" type="email" />
+                      <label className="block text-sm font-medium mb-1" htmlFor="first_name">First name <span className="text-rose-500">*</span></label>
+                      <input id="first_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
                    </div>
                    <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="name">Last name <span className="text-rose-500">*</span></label>
-                      <input id="name" className="form-input w-full" type="text" />
+                      <label className="block text-sm font-medium mb-1" htmlFor="last_name">Last name <span className="text-rose-500">*</span></label>
+                      <input id="last_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
                    </div>
                    <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="role">Gender <span className="text-rose-500">*</span></label>
-                      <select id="role" className="form-select w-full">
+                      <label className="block text-sm font-medium mb-1" htmlFor="gender">Gender <span className="text-rose-500">*</span></label>
+                      <select id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full">
+                        <option className="hidden"></option>
                        <option>male</option>
                        <option>feemale</option>
                      </select>
                    </div>
                    <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="password">Date of birth <span className="text-rose-500">*</span></label>
-                      <input id="password" className="form-input w-full" type="password" autoComplete="on" />
+                      <label className="block text-sm font-medium mb-1" htmlFor="date_birth">Date of birth <span className="text-rose-500">*</span></label>
+                      <input id="date_birth" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" />
                    </div>
                  </div>
                  <div className="flex items-center justify-between mt-6">
@@ -86,8 +130,8 @@ function Onboarding2() {
                        <span className="text-sm ml-2">Email me about product news.</span>
                      </label>
                    </div>
-                    <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">
-                      <Link 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>
                </form>
@@ -114,6 +158,6 @@ function Onboarding2() {

    </main>
  );
-}
+});

 export default Onboarding2;
--- a/src/pages/Onboarding3.jsx
+++ b/src/pages/Onboarding3.jsx
@@ -1,10 +1,24 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
+import { passphrase } from "@liskhq/lisk-client";

 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 (
    <main className="bg-white">

@@ -59,7 +73,7 @@ function Onboarding3() {
                  <h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
                  {/* htmlForm */}
                  <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">
                        <span className="text-sm font-medium">{tag}</span>
                      </button>
@@ -73,7 +87,7 @@ function Onboarding3() {
                      </svg>
                      <span className="ml-2">Paste</span>
                    </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">
                        <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"/>
--- a/src/pages/Onboarding4.jsx
+++ b/src/pages/Onboarding4.jsx
@@ -1,14 +1,36 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
+import {observer} from "mobx-react-lite";
+import { registrationStore } from "../store/registrationStore";

-function Onboarding4() {
+const Onboarding4 = observer(()=>{

-  function saveDigitalId() {
-    localStorage.setItem('svgAvatar', generateSvgAvatar())
+  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())
+    }
+  }, [])
+
  return (
    <main className="bg-white">

@@ -64,9 +86,9 @@ function Onboarding4() {
                    <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" />
                  </svg>
-                  <h1 className="text-3xl text-slate-800 font-bold mb-8">Nice to meet you, Ivan 🙌</h1>
-                  <button onClick={()=>saveDigitalId()} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
-                    <Link to="/dashboard">Go To Profile -&gt;</Link>
+                  <h1 className="text-3xl text-slate-800 font-bold mb-8">{`Nice to meet you, ${registrationStore.accountData().first_name} 🙌`}</h1>
+                  <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>

@@ -104,6 +126,6 @@ function Onboarding4() {

    </main>
  );
-}
+});

 export default Onboarding4;
--- a/src/partials/Sidebar.jsx
+++ b/src/partials/Sidebar.jsx
@@ -47,10 +47,6 @@ function Sidebar({
    }
  }, [sidebarExpanded]);

-  function saveDigitalId () {
-    localStorage.setItem('digitalId', '7234ABC3423423523457234ABC34234')
-  }
-
  return (
    <div>
      {/* Sidebar backdrop (mobile only) */}
@@ -340,193 +336,6 @@ function Sidebar({
              </li>
            </ul>
          </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>

        {/* Expand / collapse button */}
--- a/src/partials/validate/ValidateItem.jsx
+++ b/src/partials/validate/ValidateItem.jsx
@@ -19,7 +19,7 @@ function ValidateTableItem(props) {
  }

  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">
          <div className="flex items-center">
            <label className="inline-flex">
--- a/src/partials/validate/ValidatePanel.jsx
+++ b/src/partials/validate/ValidatePanel.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';

 import Image from '../../images/transactions-image-04.svg';

@@ -7,37 +7,12 @@ function TransactionPanel({
  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 (
      <div
-          ref={panelContent}
          className={`absolute inset-0 sm:left-auto z-20 transition-transform duration-200 ease-in-out ${
              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
              onClick={() => setValidatePanelOpen(false)}
              className="absolute top-0 right-0 mt-6 mr-6 group p-2"
@@ -90,8 +65,8 @@ function TransactionPanel({
              </div>
              {/* Receipts */}
              <div className="mt-6">
-                <div className="text-sm font-semibold 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">
+                <div className="text-sm font-medium text-slate-800 mb-2">Private Data</div>
+                <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">
                    <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>
@@ -101,10 +76,10 @@ function TransactionPanel({
              </div>
              {/* Notes */}
              <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>
                  <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>
              </div>
              {/* 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">
                      <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>
-                    <span className="ml-2">Validate</span>
+                    <span className="ml-2 text-sm font-medium">Validate</span>
                  </button>
                </div>
                <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">
                      <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>
-                    <span className="ml-2">Invalidate</span>
+                    <span className="ml-2 text-sm font-medium">Invalidate</span>
                  </button>
                </div>
              </div>
--- a/src/store/registrationStore.js
+++ b/src/store/registrationStore.js
@@ -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();
--- a/src/css/tailwind.config.js
+++ b/src/css/tailwind.config.js
--- a/src/utils/Utils.js
+++ b/src/utils/Utils.js
@@ -2,7 +2,7 @@ import resolveConfig from 'tailwindcss/resolveConfig';

 export const tailwindConfig = () => {
  // Tailwind config
-  return resolveConfig('./src/css/tailwind.config.js')
+  return resolveConfig('./src/tailwind.config.js')
 }

 export const hexToRGB = (h) => {
--- a/vite.config.js
+++ b/vite.config.js
@@ -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,
-    }
-  } 
-})
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -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
+    }
+  },
+};
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