add prettier

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "arrowParens": "always",
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "endOfLine": "lf",
+  "jsxBracketSameLine": false,
+  "trailingComma": "es5",
+  "overrides": [
+    {
+      "files": "*.json",
+      "options": {
+        "singleQuote": false,
+        "parser": "json"
+      }
+    }
+  ]
+}

src/App.jsx

@@ -1,35 +1,35 @@
-import React, { useEffect } from "react";
+import React, { useEffect } from 'react';
-import { Routes, Route, useLocation } from "react-router-dom";
+import { Routes, Route, useLocation } from 'react-router-dom';
 
-import "./css/style.scss";
+import './css/style.scss';
 
 // Import pages
-import ProfileId from "./pages/digitalId/ProfileId";
+import ProfileId from './pages/digitalId/ProfileId';
-import ValidationLog from "./pages/digitalId/ValidationLog";
+import ValidationLog from './pages/digitalId/ValidationLog';
-import Verify from "./pages/digitalId/Verify";
+import Verify from './pages/digitalId/Verify';
-import Onboarding1 from "./pages/Onboarding1";
+import Onboarding1 from './pages/Onboarding1';
-import Onboarding2 from "./pages/Onboarding2";
+import Onboarding2 from './pages/Onboarding2';
-import Onboarding3 from "./pages/Onboarding3";
+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 SignIn from "./pages/SignIn";
+import SignIn from './pages/SignIn';
-import { LoadingOverlay } from "./components/LoadingOverlay";
+import { LoadingOverlay } from './components/LoadingOverlay';
-import { store } from "./store/store";
+import { store } from './store/store';
-import { observer } from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
-import Delegates from "./pages/services/Delegates";
+import Delegates from './pages/services/Delegates';
-import VPNServers from "./pages/services/VPNServers";
+import VPNServers from './pages/services/VPNServers';
-import VPNPrepare from "./pages/services/VPNPrepare";
+import VPNPrepare from './pages/services/VPNPrepare';
 
 const App = observer(() => {
   const location = useLocation();
   useEffect(() => {
-    localStorage.setItem("svgAvatar", "");
+    localStorage.setItem('svgAvatar', '');
   }, []);
 
   useEffect(() => {
-    document.querySelector("html").style.scrollBehavior = "auto";
+    document.querySelector('html').style.scrollBehavior = 'auto';
     window.scroll({ top: 0 });
-    document.querySelector("html").style.scrollBehavior = "";
+    document.querySelector('html').style.scrollBehavior = '';
   }, [location.pathname]); // triggered on route change
 
   return (

src/api/node.js

@@ -1,3 +1,3 @@
-import {fetchWrapper} from '../shared/fetchWrapper';
+import { fetchWrapper } from '../shared/fetchWrapper';
 
-export const getNodeInfo = (headers) => fetchWrapper.get('node/info/', headers)
+export const getNodeInfo = (headers) => fetchWrapper.get('node/info/', headers);

src/components/DropdownProfile.jsx

@@ -1,15 +1,12 @@
 import React, { useState, useRef, useEffect } from 'react';
-import {observer} from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
 import { Link } from 'react-router-dom';
 import Transition from '../utils/Transition';
-import {store} from "../store/store";
+import { store } from '../store/store';
-import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
+import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
 import UserAvatar from '../images/user-avatar-32.png';
 
- const DropdownProfile = observer(({
+const DropdownProfile = observer(({ align }) => {
-  align
-})=>{
-
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
   const trigger = useRef(null);
@@ -19,7 +16,12 @@ import UserAvatar from '../images/user-avatar-32.png';
   useEffect(() => {
     const clickHandler = ({ target }) => {
       if (!dropdown.current) return;
-      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
+      if (
+        !dropdownOpen ||
+        dropdown.current.contains(target) ||
+        trigger.current.contains(target)
+      )
+        return;
       setDropdownOpen(false);
     };
     document.addEventListener('click', clickHandler);
@@ -37,9 +39,9 @@ import UserAvatar from '../images/user-avatar-32.png';
   });
 
   const logOut = () => {
-    sessionStorage.removeItem('passPhrase')
+    sessionStorage.removeItem('passPhrase');
-    store.fetchPassPhrase()
+    store.fetchPassPhrase();
-  }
+  };
 
   return (
     <div className="relative inline-flex">
@@ -50,17 +52,30 @@ import UserAvatar from '../images/user-avatar-32.png';
         onClick={() => setDropdownOpen(!dropdownOpen)}
         aria-expanded={dropdownOpen}
       >
-        <img className="w-8 h-8 rounded-full" src={generateSvgAvatar(store.pubKey) || UserAvatar} width="32" height="32" alt="User" />
+        <img
+          className="w-8 h-8 rounded-full"
+          src={generateSvgAvatar(store.pubKey) || UserAvatar}
+          width="32"
+          height="32"
+          alt="User"
+        />
         <div className="flex items-center truncate">
-          <span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">{store.accountName}</span>
+          <span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">
-          <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
+            {store.accountName}
+          </span>
+          <svg
+            className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400"
+            viewBox="0 0 12 12"
+          >
             <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
           </svg>
         </div>
       </button>
 
       <Transition
-        className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
+        className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${
+          align === 'right' ? 'right-0' : 'left-0'
+        }`}
         show={dropdownOpen}
         enter="transition ease-out duration-200 transform"
         enterStart="opacity-0 -translate-y-2"
@@ -75,7 +90,9 @@ import UserAvatar from '../images/user-avatar-32.png';
           onBlur={() => setDropdownOpen(false)}
         >
           <div className="pt-0.5 pb-2 px-3 mb-1 border-b border-slate-200">
-            <div className="font-medium text-slate-800">{store.accountName}</div>
+            <div className="font-medium text-slate-800">
+              {store.accountName}
+            </div>
           </div>
           <ul>
             <li>
@@ -99,7 +116,7 @@ import UserAvatar from '../images/user-avatar-32.png';
         </div>
       </Transition>
     </div>
-  )
+  );
-})
+});
 
 export default DropdownProfile;

src/components/DropdownTransaction.jsx

@@ -1,5 +1,5 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect } from 'react';
-import Transition from "../utils/Transition";
+import Transition from '../utils/Transition';
 
 function DropdownTransaction({ align, value, onChange }) {
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -24,8 +24,8 @@ function DropdownTransaction({ align, value, onChange }) {
         return;
       setDropdownOpen(false);
     };
-    document.addEventListener("click", clickHandler);
+    document.addEventListener('click', clickHandler);
-    return () => document.removeEventListener("click", clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
   });
 
   // close if the esc key is pressed
@@ -34,8 +34,8 @@ function DropdownTransaction({ align, value, onChange }) {
       if (!dropdownOpen || keyCode !== 27) return;
       setDropdownOpen(false);
     };
-    document.addEventListener("keydown", keyHandler);
+    document.addEventListener('keydown', keyHandler);
-    return () => document.removeEventListener("keydown", keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
   });
 
   return (
@@ -62,7 +62,7 @@ function DropdownTransaction({ align, value, onChange }) {
 
       <Transition
         className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${
-          align === "right" ? "right-0" : "left-0"
+          align === 'right' ? 'right-0' : 'left-0'
         }`}
         show={dropdownOpen}
         enter="transition ease-out duration-200 transform"
@@ -81,7 +81,7 @@ function DropdownTransaction({ align, value, onChange }) {
             <li>
               <span
                 className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3 cursor-pointer"
-                onClick={() => changeValue("Voiting")}
+                onClick={() => changeValue('Voiting')}
               >
                 Voiting
               </span>
@@ -89,7 +89,7 @@ function DropdownTransaction({ align, value, onChange }) {
             <li>
               <span
                 className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3 cursor-pointer"
-                onClick={() => changeValue("Unvoiting")}
+                onClick={() => changeValue('Unvoiting')}
               >
                 Unvoiting
               </span>

src/components/Filters.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export const Filters = ({ value, onChange, values = [] }) => {
   return (

src/components/LoadingOverlay.jsx

@@ -1,15 +1,17 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
-import {ThreeCircles} from 'react-loader-spinner';
+import { ThreeCircles } from 'react-loader-spinner';
 
-export const LoadingOverlay = () => ReactDOM.createPortal((
+export const LoadingOverlay = () =>
-  <div className='absolute left-0 top-0 h-screen w-screen z-50 loading-overlay'>
+  ReactDOM.createPortal(
-    <ThreeCircles
+    <div className="absolute left-0 top-0 h-screen w-screen z-50 loading-overlay">
-      height="100"
+      <ThreeCircles
-      width="100"
+        height="100"
-      color="#6366f1"
+        width="100"
-      visible={true}
+        color="#6366f1"
-      ariaLabel="three-circles-rotating"
+        visible={true}
-    />
+        ariaLabel="three-circles-rotating"
-  </div>
+      />
-), document.body)
+    </div>,
+    document.body
+  );

src/components/PaginationClassic.jsx

@@ -1,36 +1,49 @@
 import React from 'react';
-import cn from 'classnames'
+import cn from 'classnames';
 
-function PaginationClassic({count, limit, offset, onNextPage, onPrevPage}) {
+function PaginationClassic({ count, limit, offset, onNextPage, onPrevPage }) {
   return (
     <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
-      <nav className="mb-4 sm:mb-0 sm:order-1" role="navigation" aria-label="Navigation">
+      <nav
+        className="mb-4 sm:mb-0 sm:order-1"
+        role="navigation"
+        aria-label="Navigation"
+      >
         <ul className="flex justify-center">
           <li className="ml-3 first:ml-0">
             <button
-              className={
+              className={cn(
-              cn(
+                'btn bg-white border-slate-200 text-indigo-500',
-                "btn bg-white border-slate-200 text-indigo-500",
+                { 'cursor-not-allowed text-slate-300': offset === 0 },
-                {'cursor-not-allowed text-slate-300': offset === 0},
+                { 'hover:border-slate-300': offset !== 0 }
-                {'hover:border-slate-300' : offset !== 0}
               )}
               disabled={offset === 0}
-              onClick={onPrevPage}>&lt;- Previous</button>
+              onClick={onPrevPage}
+            >
+              &lt;- Previous
+            </button>
           </li>
           <li className="ml-3 first:ml-0">
             <button
               className={cn(
-                "btn bg-white border-slate-200 text-indigo-500",
+                'btn bg-white border-slate-200 text-indigo-500',
-                {'cursor-not-allowed text-slate-300': offset + limit >= count},
+                {
-                {'hover:border-slate-300' : offset + limit < count}
+                  'cursor-not-allowed text-slate-300': offset + limit >= count,
+                },
+                { 'hover:border-slate-300': offset + limit < count }
               )}
               disabled={offset + limit >= count}
-              onClick={onNextPage}>Next -&gt;</button>
+              onClick={onNextPage}
+            >
+              Next -&gt;
+            </button>
           </li>
         </ul>
       </nav>
       <div className="text-sm text-slate-500 text-center sm:text-left">
-        Showing <span className="font-medium text-slate-600">{offset + 1}</span> to <span className="font-medium text-slate-600">{offset+limit}</span> of <span className="font-medium text-slate-600">{count}</span> results
+        Showing <span className="font-medium text-slate-600">{offset + 1}</span>{' '}
+        to <span className="font-medium text-slate-600">{offset + limit}</span>{' '}
+        of <span className="font-medium text-slate-600">{count}</span> results
       </div>
     </div>
   );

src/css/additional-styles/flatpickr.scss

@@ -4,7 +4,7 @@
 // Customise flatpickr
 $calendarPadding: 24px;
 $daySize: 36px;
-$daysWidth: $daySize*7;
+$daysWidth: $daySize * 7;
 
 @keyframes fpFadeInDown {
   from {
@@ -18,59 +18,59 @@ $daysWidth: $daySize*7;
 }
 
 .flatpickr-calendar {
-    border: inherit;
+  border: inherit;
-    @apply rounded shadow-lg border border-slate-200 left-1/2;
+  @apply rounded shadow-lg border border-slate-200 left-1/2;
-    margin-left: - ($daysWidth + $calendarPadding*2)*0.5;
+  margin-left: -($daysWidth + $calendarPadding * 2) * 0.5;
-    padding: $calendarPadding;
+  padding: $calendarPadding;
-    width: $daysWidth + $calendarPadding*2;
+  width: $daysWidth + $calendarPadding * 2;
 }
 
 @screen lg {
-    .flatpickr-calendar {
+  .flatpickr-calendar {
-        @apply left-0 right-auto;
+    @apply left-0 right-auto;
-        margin-left: 0;
+    margin-left: 0;
-    }
+  }
 }
 
 .flatpickr-right.flatpickr-calendar {
-    @apply right-0 left-auto;
+  @apply right-0 left-auto;
-    margin-left: 0;
+  margin-left: 0;
 }
 
 .flatpickr-calendar.animate.open {
-    animation: fpFadeInDown 200ms ease-out;
+  animation: fpFadeInDown 200ms ease-out;
 }
 
 .flatpickr-calendar.static {
-    position: absolute;
+  position: absolute;
-    top: calc(100% + 4px);
+  top: calc(100% + 4px);
 }
 
 .flatpickr-calendar.static.open {
-    z-index: 20;
+  z-index: 20;
 }
 
 .flatpickr-days {
-    width: $daysWidth;
+  width: $daysWidth;
 }
 
 .dayContainer {
-    width: $daysWidth;
+  width: $daysWidth;
-    min-width: $daysWidth;
+  min-width: $daysWidth;
-    max-width: $daysWidth;
+  max-width: $daysWidth;
 }
 
 .flatpickr-day {
-    @apply bg-slate-50 text-sm font-medium text-slate-600;
+  @apply bg-slate-50 text-sm font-medium text-slate-600;
-    max-width: $daySize;
+  max-width: $daySize;
-    height: $daySize;
+  height: $daySize;
-    line-height: $daySize;
+  line-height: $daySize;
 }
 
 .flatpickr-day,
 .flatpickr-day.prevMonthDay,
 .flatpickr-day.nextMonthDay {
-    border: none;
+  border: none;
 }
 
 .flatpickr-day,
@@ -85,7 +85,7 @@ $daysWidth: $daySize*7;
 .flatpickr-day.selected.startRange.endRange,
 .flatpickr-day.startRange.startRange.endRange,
 .flatpickr-day.endRange.startRange.endRange {
-    border-radius: 0;
+  border-radius: 0;
 }
 
 .flatpickr-day.flatpickr-disabled,
@@ -95,11 +95,11 @@ $daysWidth: $daySize*7;
 .flatpickr-day.notAllowed,
 .flatpickr-day.notAllowed.prevMonthDay,
 .flatpickr-day.notAllowed.nextMonthDay {
-    @apply text-slate-400;
+  @apply text-slate-400;
 }
 
 .rangeMode .flatpickr-day {
-    margin: 0;
+  margin: 0;
 }
 
 .flatpickr-day.selected,
@@ -120,7 +120,7 @@ $daysWidth: $daySize*7;
 .flatpickr-day.selected.nextMonthDay,
 .flatpickr-day.startRange.nextMonthDay,
 .flatpickr-day.endRange.nextMonthDay {
-    @apply bg-indigo-500 text-indigo-50;
+  @apply bg-indigo-500 text-indigo-50;
 }
 
 .flatpickr-day.inRange,
@@ -137,92 +137,92 @@ $daysWidth: $daySize*7;
 .flatpickr-day.nextMonthDay:focus,
 .flatpickr-day.today:hover,
 .flatpickr-day.today:focus {
-    @apply bg-indigo-400 text-indigo-50;
+  @apply bg-indigo-400 text-indigo-50;
 }
 
 .flatpickr-day.inRange,
-.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
-.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
-.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
-    box-shadow: none;
+  box-shadow: none;
 }
 
 .flatpickr-months {
-    align-items: center;
+  align-items: center;
-    margin-top: -8px;
+  margin-top: -8px;
-    margin-bottom: 6px;
+  margin-bottom: 6px;
 }
 
 .flatpickr-months .flatpickr-prev-month,
 .flatpickr-months .flatpickr-next-month {
-    position: static;
+  position: static;
-    height: auto;
+  height: auto;
-    @apply text-slate-600;    
+  @apply text-slate-600;
 }
 
 .flatpickr-months .flatpickr-prev-month svg,
 .flatpickr-months .flatpickr-next-month svg {
-    width: 7px;
+  width: 7px;
-    height: 11px;
+  height: 11px;
 }
 
 .flatpickr-months .flatpickr-prev-month:hover,
 .flatpickr-months .flatpickr-next-month:hover,
 .flatpickr-months .flatpickr-prev-month:hover svg,
 .flatpickr-months .flatpickr-next-month:hover svg {
-    fill: inherit;
+  fill: inherit;
-    @apply text-slate-400;
+  @apply text-slate-400;
 }
 
 .flatpickr-months .flatpickr-prev-month {
-    margin-left: -10px;
+  margin-left: -10px;
 }
 
 .flatpickr-months .flatpickr-next-month {
-    margin-right: -10px;
+  margin-right: -10px;
 }
 
 .flatpickr-months .flatpickr-month {
-    @apply text-slate-800;
+  @apply text-slate-800;
-    height: auto;
+  height: auto;
-    line-height: inherit;
+  line-height: inherit;
 }
 
 .flatpickr-current-month {
-    @apply text-sm font-medium;
+  @apply text-sm font-medium;
-    position: static;
+  position: static;
-    height: auto;
+  height: auto;
-    width: auto;
+  width: auto;
-    left: auto;
+  left: auto;
-    padding: 0;
+  padding: 0;
 }
 
 .flatpickr-current-month span.cur-month {
-    @apply font-medium m-0;
+  @apply font-medium m-0;
 }
 
 .flatpickr-current-month span.cur-month:hover {
-    background: none;
+  background: none;
 }
 
 .flatpickr-current-month input.cur-year {
-    font-weight: inherit;
+  font-weight: inherit;
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 .numInputWrapper:hover {
-    background: none;
+  background: none;
 }
 
 .numInputWrapper span {
-    display: none;
+  display: none;
 }
 
 span.flatpickr-weekday {
-    @apply text-slate-400 font-medium text-xs;
+  @apply text-slate-400 font-medium text-xs;
 }
 
 .flatpickr-calendar.arrowTop::before,
 .flatpickr-calendar.arrowTop::after {
-    display: none;
+  display: none;
 }

src/css/additional-styles/range-slider.scss

@@ -1,55 +1,55 @@
 // Range slider
 $range-thumb-size: 36px;
 
-input[type=range] {
+input[type='range'] {
+  appearance: none;
+  background: #ccc;
+  border-radius: 3px;
+  height: 6px;
+  margin-top: ($range-thumb-size - 6px) * 0.5;
+  margin-bottom: ($range-thumb-size - 6px) * 0.5;
+  --thumb-size: #{$range-thumb-size};
+
+  &::-webkit-slider-thumb {
     appearance: none;
-    background: #ccc;
+    -webkit-appearance: none;
-    border-radius: 3px;
+    background-color: #000;
-    height: 6px;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
-    margin-top: ($range-thumb-size - 6px) * 0.5;
+    background-position: center;
-    margin-bottom: ($range-thumb-size - 6px) * 0.5;
+    background-repeat: no-repeat;
-    --thumb-size: #{$range-thumb-size};  
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    height: $range-thumb-size;
+    width: $range-thumb-size;
+  }
 
-    &::-webkit-slider-thumb {
+  &::-moz-range-thumb {
-        appearance: none;
+    background-color: #000;
-        -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
-        background-color: #000;
+    background-position: center;
-        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
-        background-position: center;
+    border: 0;
-        background-repeat: no-repeat;
+    border: none;
-        border: 0;
+    border-radius: 50%;
-        border-radius: 50%;
+    cursor: pointer;
-        cursor: pointer;
+    height: $range-thumb-size;
-        height: $range-thumb-size;
+    width: $range-thumb-size;
-        width: $range-thumb-size;            
+  }
-    }
 
-    &::-moz-range-thumb {
+  &::-ms-thumb {
-        background-color: #000;
+    background-color: #000;
-        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
-        background-position: center;
+    background-position: center;
-        background-repeat: no-repeat;
+    background-repeat: no-repeat;
-        border: 0;
+    border: 0;
-        border: none;
+    border-radius: 50%;
-        border-radius: 50%;
+    cursor: pointer;
-        cursor: pointer;
+    height: $range-thumb-size;
-        height: $range-thumb-size;
+    width: $range-thumb-size;
-        width: $range-thumb-size;
+  }
-    }
 
-    &::-ms-thumb {
+  &::-moz-focus-outer {
-        background-color: #000;
+    border: 0;
-        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+  }
-        background-position: center;
-        background-repeat: no-repeat;
-        border: 0;
-        border-radius: 50%;
-        cursor: pointer;
-        height: $range-thumb-size;
-        width: $range-thumb-size;
-    }
-    
-    &::-moz-focus-outer {
-        border: 0;
-    }
 }

src/css/additional-styles/theme.scss

@@ -4,15 +4,14 @@
 .form-select,
 .form-checkbox,
 .form-radio {
-
+  &:focus {
-    &:focus {
+    @apply ring-0;
-        @apply ring-0;
+  }
-    }
 }
 
 .loading-overlay {
-    background-color: rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.25);
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    align-items: center;
+  align-items: center;
 }

src/css/additional-styles/toggle-switch.scss

@@ -1,44 +1,41 @@
 // Switch element
 .form-switch {
-    @apply relative select-none;
+  @apply relative select-none;
-    width: 44px;
+  width: 44px;
 
-    label {
+  label {
-        @apply block overflow-hidden cursor-pointer h-6 rounded-full;
+    @apply block overflow-hidden cursor-pointer h-6 rounded-full;
+
+    > span:first-child {
+      @apply absolute block rounded-full;
+      width: 20px;
+      height: 20px;
+      top: 2px;
+      left: 2px;
+      right: 50%;
+      transition: all 0.15s ease-out;
+    }
+  }
+
+  input[type='checkbox'] {
+    &:checked {
+      + label {
+        @apply bg-indigo-500;
 
         > span:first-child {
-            @apply absolute block rounded-full;
+          left: 22px;
-            width: 20px;
-            height: 20px;
-            top: 2px;
-            left: 2px;
-            right: 50%;
-            transition: all .15s ease-out;
         }
+      }
     }
 
-    input[type="checkbox"] {
+    &:disabled {
+      + label {
+        @apply cursor-not-allowed bg-slate-100 border border-slate-200;
 
-        &:checked {
+        > span:first-child {
-
+          @apply bg-slate-400;
-            + label {
-                @apply bg-indigo-500;
-
-                > span:first-child {
-                    left: 22px;
-                }
-            }
-        }
-
-        &:disabled {
-
-            + label {
-                @apply cursor-not-allowed bg-slate-100 border border-slate-200;
-
-                > span:first-child {
-                    @apply bg-slate-400;
-                }
-            }            
         }
+      }
     }
+  }
 }

src/css/additional-styles/utility-patterns.scss

@@ -1,28 +1,28 @@
 // Typography
 .h1 {
-    @apply text-4xl font-extrabold tracking-tighter;
+  @apply text-4xl font-extrabold tracking-tighter;
 }
 
 .h2 {
-    @apply text-3xl font-extrabold tracking-tighter;
+  @apply text-3xl font-extrabold tracking-tighter;
 }
 
 .h3 {
-    @apply text-3xl font-extrabold;
+  @apply text-3xl font-extrabold;
 }
 
 .h4 {
-    @apply text-2xl font-extrabold tracking-tight;
+  @apply text-2xl font-extrabold tracking-tight;
 }
 
 @screen md {
-    .h1 {
+  .h1 {
-        @apply text-5xl;
+    @apply text-5xl;
-    }
+  }
 
-    .h2 {
+  .h2 {
-        @apply text-4xl;
+    @apply text-4xl;
-    }
+  }
 }
 
 // Buttons
@@ -30,30 +30,30 @@
 .btn-lg,
 .btn-sm,
 .btn-xs {
-    @apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded leading-5 shadow-sm transition duration-150 ease-in-out;
+  @apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded leading-5 shadow-sm transition duration-150 ease-in-out;
 }
 
 .btn {
-    @apply px-3 py-2;
+  @apply px-3 py-2;
 }
 
 .btn-lg {
-    @apply px-4 py-3;
+  @apply px-4 py-3;
 }
 
 .btn-sm {
-    @apply px-2 py-1;
+  @apply px-2 py-1;
 }
 
 .btn-xs {
-    @apply px-2 py-0.5;
+  @apply px-2 py-0.5;
 }
 
 // Forms
-input[type="search"]::-webkit-search-decoration,
+input[type='search']::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
+input[type='search']::-webkit-search-results-decoration {
   -webkit-appearance: none;
 }
 
@@ -63,7 +63,7 @@ input[type="search"]::-webkit-search-results-decoration {
 .form-select,
 .form-checkbox,
 .form-radio {
-    @apply text-sm text-slate-800 bg-white border;
+  @apply text-sm text-slate-800 bg-white border;
 }
 
 .form-input,
@@ -71,28 +71,28 @@ input[type="search"]::-webkit-search-results-decoration {
 .form-multiselect,
 .form-select,
 .form-checkbox {
-    @apply rounded;
+  @apply rounded;
 }
 
 .form-input,
 .form-textarea,
 .form-multiselect,
 .form-select {
-    @apply leading-5 py-2 px-3 border-slate-200 hover:border-slate-300 focus:border-indigo-300 shadow-sm;
+  @apply leading-5 py-2 px-3 border-slate-200 hover:border-slate-300 focus:border-indigo-300 shadow-sm;
 }
 
 .form-input,
 .form-textarea {
-    @apply placeholder-slate-400;
+  @apply placeholder-slate-400;
 }
 
 .form-select {
-    @apply pr-10;
+  @apply pr-10;
 }
 
 .form-checkbox,
 .form-radio {
-    @apply text-indigo-500 border border-slate-300;
+  @apply text-indigo-500 border border-slate-300;
 }
 
 /* Chrome, Safari and Opera */
@@ -101,6 +101,6 @@ input[type="search"]::-webkit-search-results-decoration {
 }
 
 .no-scrollbar {
-  -ms-overflow-style: none;  /* IE and Edge */
+  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  scrollbar-width: none; /* Firefox */
 }

src/images/GenerateOnboardingSvg/GenerateSvg.js

@@ -1,92 +1,112 @@
 function createBlob(options) {
+  let points = [];
+  let slice = (Math.PI * 2) / options.numPoints;
+  let startAngle = 0;
 
-    let points = [];
+  for (let i = 0; i < options.subkey.length; i++) {
-    let slice = (Math.PI * 2) / options.numPoints;
+    let angle = startAngle + i * slice;
-    let startAngle = 0;
+    let rnd = Number('0x' + options.subkey.substring(i + 0, i + 1));
+    let point = {
+      x: options.centerX + Math.cos(angle) * (options.radius + rnd),
+      y: options.centerY + Math.sin(angle) * (options.radius + rnd),
+    };
+    points.push(point);
+  }
 
-    for (let i = 0; i < options.subkey.length; i++) {
+  let size = points.length;
-        let angle = startAngle + i * slice;
+  let path = 'M' + points[0].x + ' ' + points[0].y + ' C';
-        let rnd = Number("0x"+options.subkey.substring(i+0,i+1));
-        let point = {
-            x: options.centerX + Math.cos(angle) * (options.radius + rnd),
-            y: options.centerY + Math.sin(angle) * (options.radius + rnd)
-        };
-        points.push(point);
-    }
 
-    let size = points.length;
+  for (let i = 0; i < size; i++) {
-    let path = "M" + points[0].x + " " + points[0].y + " C";
+    let p0 = points[(i - 1 + size) % size];
+    let p1 = points[i];
+    let p2 = points[(i + 1) % size];
+    let p3 = points[(i + 2) % size];
 
-    for (let i = 0; i < size; i++) {
+    let x1 = p1.x + (p2.x - p0.x) / 6;
-        let p0 = points[(i - 1 + size) % size];
+    let y1 = p1.y + (p2.y - p0.y) / 6;
-        let p1 = points[i];
-        let p2 = points[(i + 1) % size];
-        let p3 = points[(i + 2) % size];
 
-        let x1 = p1.x + (p2.x - p0.x) / 6;
+    let x2 = p2.x - (p3.x - p1.x) / 6;
-        let y1 = p1.y + (p2.y - p0.y) / 6;
+    let y2 = p2.y - (p3.y - p1.y) / 6;
 
-        let x2 = p2.x - (p3.x - p1.x) / 6;
+    path += ' ' + x1 + ' ' + y1 + ' ' + x2 + ' ' + y2 + ' ' + p2.x + ' ' + p2.y;
-        let y2 = p2.y - (p3.y - p1.y) / 6;
+  }
 
-        path += " " + x1 + " " + y1 + " " + x2 + " " + y2 + " " + p2.x + " " + p2.y;
+  return path + 'z';
-    }
-
-    return path + "z";
 }
 
-export var generateSvgAvatar = ( function () {
+export var generateSvgAvatar = (function () {
-    return function (publicKey, seed, raw) {
+  return function (publicKey, seed, raw) {
-        let pubKey = publicKey || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
+    let pubKey =
-        //pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88"
+      publicKey ||
-        let particles = [];
+      Math.floor(Math.random() * 65535 * 65535).toString(16) +
-        let gradients = ['#000000'];
+        Math.floor(Math.random() * 65535 * 65535).toString(16) +
-        let defs = [];
+        Math.floor(Math.random() * 65535 * 65535).toString(16) +
+        Math.floor(Math.random() * 65535 * 65535).toString(16) +
+        Math.floor(Math.random() * 65535 * 65535).toString(16) +
+        Math.floor(Math.random() * 65535 * 65535).toString(16) +
+        Math.floor(Math.random() * 65535 * 65535).toString(16) +
+        Math.floor(Math.random() * 65535 * 65535).toString(16);
+    //pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88"
+    let particles = [];
+    let gradients = ['#000000'];
+    let defs = [];
 
-        for (let a = 0; a<64; a = a + 8) {
+    for (let a = 0; a < 64; a = a + 8) {
-            let blob = createBlob({
+      let blob = createBlob({
-                numPoints: 8,
+        numPoints: 8,
-                centerX: 256,
+        centerX: 256,
-                centerY: 256-a*4,
+        centerY: 256 - a * 4,
-                radius: 16,
+        radius: 16,
-                subkey: pubKey.substring(a,a + 8)
+        subkey: pubKey.substring(a, a + 8),
-            });
+      });
 
-            let color =  "#" + pubKey.substring(a+2,a+8);
+      let color = '#' + pubKey.substring(a + 2, a + 8);
-            let width = Number("0x"+pubKey.substring(a,a+1));
+      let width = Number('0x' + pubKey.substring(a, a + 1));
-            let opacity = Number("0x"+pubKey.substring(a+1,a+2))/8;
+      let opacity = Number('0x' + pubKey.substring(a + 1, a + 2)) / 8;
 
-            gradients.push(color);
+      gradients.push(color);
-            defs.push(`<radialGradient id="a-${a}" cx="0" cy="0" r="0.75" fx="0.35" fy="0.5" spreadMethod="reflect"><stop offset="0%" stop-color="${gradients[gradients.length-1]}"/><stop offset="100%" stop-color="${gradients[gradients.length]}"/></radialGradient>`);
+      defs.push(
-            particles.push(`<path d="${blob}" stroke="url(#a-${a})" stroke-width="${width}" stroke-opacity = "${opacity}" fill="transparent"/>`);
+        `<radialGradient id="a-${a}" cx="0" cy="0" r="0.75" fx="0.35" fy="0.5" spreadMethod="reflect"><stop offset="0%" stop-color="${
+          gradients[gradients.length - 1]
+        }"/><stop offset="100%" stop-color="${
+          gradients[gradients.length]
+        }"/></radialGradient>`
+      );
+      particles.push(
+        `<path d="${blob}" stroke="url(#a-${a})" stroke-width="${width}" stroke-opacity = "${opacity}" fill="transparent"/>`
+      );
+    }
 
-        }
+    let ph = '';
-
+    let off = 4 + Number('0x' + pubKey.substring(0, 1));
-        let ph = "";
+    let rotate = 0;
-        let off = 4 + Number("0x"+pubKey.substring(0,1));
+    for (var i = 0; i < off; i++) {
-        let rotate = 0;
+      ph =
-        for (var i = 0; i < off; i++){
+        ph +
-            ph = ph + `<use xlink:href="#pattern-${pubKey}" mask="url(#mask)" class="segment" style="transform-origin:center center;transform: scaleY(1) rotate(${rotate}deg)"></use>,` + "\n";
+        `<use xlink:href="#pattern-${pubKey}" mask="url(#mask)" class="segment" style="transform-origin:center center;transform: scaleY(1) rotate(${rotate}deg)"></use>,` +
-            rotate = rotate + 360/off;
+        '\n';
-        }
+      rotate = rotate + 360 / off;
-
+    }
-        var svg = [
-            '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" preserveAspectRatio="xMidYMid slice" viewBox="0 0 512 512">',
-            '<defs>',
-            '<radialGradient id="e" cx="0" cy="0" r="0.75" fx="0.35" fy="0.5" spreadMethod="reflect">',
-            '<stop offset="0%" stop-color="red"/>',
-            '<stop offset="100%" stop-color="blue"/>',
-            '</radialGradient>',defs.join('\n'),
-            '</defs>',
-            '<symbol id="pattern-' + pubKey + '">',
-            particles.join(''),
-            '</symbol>',
-            '<g style="transform-origin:center center; transform: rotate(' + pubKey + 'deg)">',
-            ph,
-            '</g>',
-            '</svg>',
-        ].join('');
-        return raw ? svg : 'data:image/svg+xml;base64,' + btoa(svg);
-    };
 
+    var svg = [
+      '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" preserveAspectRatio="xMidYMid slice" viewBox="0 0 512 512">',
+      '<defs>',
+      '<radialGradient id="e" cx="0" cy="0" r="0.75" fx="0.35" fy="0.5" spreadMethod="reflect">',
+      '<stop offset="0%" stop-color="red"/>',
+      '<stop offset="100%" stop-color="blue"/>',
+      '</radialGradient>',
+      defs.join('\n'),
+      '</defs>',
+      '<symbol id="pattern-' + pubKey + '">',
+      particles.join(''),
+      '</symbol>',
+      '<g style="transform-origin:center center; transform: rotate(' +
+        pubKey +
+        'deg)">',
+      ph,
+      '</g>',
+      '</svg>',
+    ].join('');
+    return raw ? svg : 'data:image/svg+xml;base64,' + btoa(svg);
+  };
 })();

src/main.jsx

@@ -1,18 +1,17 @@
-import React from 'react'
+import React from 'react';
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom';
-import {Buffer} from "buffer";
+import { Buffer } from 'buffer';
-import { HashRouter as Router } from 'react-router-dom'
+import { HashRouter as Router } from 'react-router-dom';
-import App from './App'
+import App from './App';
-import {store} from './store/store';
+import { store } from './store/store';
 
-
+globalThis.Buffer = Buffer;
-globalThis.Buffer = Buffer
 
 window.store = store;
 
-BigInt.prototype.toJSON = function() {
+BigInt.prototype.toJSON = function () {
-  return this.toString()
+  return this.toString();
-}
+};
 
 ReactDOM.render(
   <React.StrictMode>
@@ -21,4 +20,4 @@ ReactDOM.render(
     </Router>
   </React.StrictMode>,
   document.getElementById('root')
-)
+);

src/pages/Onboarding1.jsx

@@ -1,41 +1,41 @@
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
-import Logo from "../images/logo.png";
+import Logo from '../images/logo.png';
-import { observer } from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
-import { store } from "../store/store";
+import { store } from '../store/store';
-import { Navigate } from "react-router-dom";
+import { Navigate } from 'react-router-dom';
 
 const Onboarding1 = observer(() => {
-
   useEffect(() => {
-    store.clearDataRegistration()
+    store.clearDataRegistration();
-  }, [])
+  }, []);
 
-  if(store.passPhrase)
+  if (store.passPhrase)
-    return <Navigate to="/digitalId/profile-id" replace={true} />
+    return <Navigate to="/digitalId/profile-id" replace={true} />;
 
   return (
     <main className="bg-white">
-
       <div className="relative flex">
-
         {/* Content */}
         <div className="w-full md:w-1/2">
-
           <div className="min-h-screen h-full flex flex-col after:flex-1">
-
             <div className="flex-1">
-
               {/* Header */}
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
                 <Link className="block" to="/dashboard">
-                  <img alt='logo' src={Logo} width="89" height="32"/>
+                  <img alt="logo" src={Logo} width="89" height="32" />
                 </Link>
                 <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
+                  Have an account?{' '}
+                  <Link
+                    className="font-medium text-indigo-500 hover:text-indigo-600"
+                    to="/signIn"
+                  >
+                    Sign In
+                  </Link>
                 </div>
               </div>
 
@@ -43,19 +43,42 @@ const Onboarding1 = observer(() => {
               <div className="px-4 pt-12 pb-[142px]">
                 <div className="max-w-md mx-auto w-full">
                   <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">
                       <li>
-                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
+                        <span
+                          className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
+                          to="/"
+                        >
+                          1
+                        </span>
                       </li>
                       <li>
-                        <span 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</span>
+                        <span
+                          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
+                        </span>
                       </li>
                       <li>
-                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-3">3</span>
+                        <span
+                          className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500"
+                          to="/onboarding-3"
+                        >
+                          3
+                        </span>
                       </li>
                       <li>
-                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</span>
+                        <span
+                          className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500"
+                          to="/onboarding-4"
+                        >
+                          4
+                        </span>
                       </li>
                     </ul>
                   </div>
@@ -65,49 +88,120 @@ const Onboarding1 = observer(() => {
 
             <div className="px-4 py-8">
               <div className="max-w-md mx-auto">
-
+                <h1 className="text-3xl text-slate-800 font-bold mb-12">
-                <h1 className="text-3xl text-slate-800 font-bold mb-12">Tell us about your company ✨</h1>
+                  Tell us about your company ✨
+                </h1>
                 {/* Form */}
                 <div>
                   <div className="sm:flex space-y-3 sm:space-y-0 sm:space-x-4 mb-8">
                     <label className="flex-1 relative block cursor-pointer">
-                      <input type="radio" name="radio-buttons" className="peer sr-only" defaultChecked />
+                      <input
+                        type="radio"
+                        name="radio-buttons"
+                        className="peer sr-only"
+                        defaultChecked
+                      />
                       <div className="h-full text-center bg-white px-4 py-6 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
-                        <svg className="inline-flex w-10 h-10 shrink-0 fill-current mb-2" viewBox="0 0 40 40">
+                        <svg
-                          <circle className="text-indigo-100" cx="20" cy="20" r="20" />
+                          className="inline-flex w-10 h-10 shrink-0 fill-current mb-2"
-                          <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" />
+                          viewBox="0 0 40 40"
+                        >
+                          <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"
+                          />
                         </svg>
-                        <div className="font-semibold text-slate-800 mb-1">Individual</div>
+                        <div className="font-semibold text-slate-800 mb-1">
-                        <div className="text-sm">Lorem ipsum is place text commonly used.</div>
+                          Individual
+                        </div>
+                        <div className="text-sm">
+                          Lorem ipsum is place text commonly used.
+                        </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>
                     </label>
                     <label className="flex-1 relative block cursor-pointer">
-                      <input type="radio" name="radio-buttons" className="peer sr-only" />
+                      <input
+                        type="radio"
+                        name="radio-buttons"
+                        className="peer sr-only"
+                      />
                       <div className="h-full text-center bg-white px-4 py-6 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
-                        <svg className="inline-flex w-10 h-10 shrink-0 fill-current mb-2" viewBox="0 0 40 40">
+                        <svg
-                          <circle className="text-indigo-100" cx="20" cy="20" r="20" />
+                          className="inline-flex w-10 h-10 shrink-0 fill-current mb-2"
-                          <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" />
+                          viewBox="0 0 40 40"
-                          <circle className="text-indigo-100" cx="20" cy="20" r="20" />
+                        >
-                          <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" />
+                          <circle
-                          <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" />
+                            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"
+                          />
+                          <circle
+                            className="text-indigo-100"
+                            cx="20"
+                            cy="20"
+                            r="20"
+                          />
+                          <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"
+                          />
                         </svg>
-                        <div className="font-semibold text-slate-800 mb-1">Organization</div>
+                        <div className="font-semibold text-slate-800 mb-1">
-                        <div className="text-sm">Lorem ipsum is place text commonly used.</div>
+                          Organization
+                        </div>
+                        <div className="text-sm">
+                          Lorem ipsum is place text commonly used.
+                        </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>
                     </label>
                   </div>
                   <div className="flex items-center justify-between space-x-6 mb-8">
                     <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">
-                      <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>
+                        💸 Lorem ipsum is place text commonly?
+                      </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 className="flex items-center">
                       <div className="form-switch">
-                        <input type="checkbox" id="switch" className="sr-only" defaultChecked />
+                        <input
+                          type="checkbox"
+                          id="switch"
+                          className="sr-only"
+                          defaultChecked
+                        />
                         <label className="bg-slate-400" htmlFor="switch">
-                          <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                          <span
+                            className="bg-white shadow-sm"
+                            aria-hidden="true"
+                          ></span>
                           <span className="sr-only">Switch label</span>
                         </label>
                       </div>
@@ -119,24 +213,34 @@ const Onboarding1 = observer(() => {
                     </button>
                   </div>
                 </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">
+        <div
-          <img className="object-cover object-center w-full h-full" src={OnboardingImage} width="760" height="1024" alt="Onboarding" />
+          className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2"
-          <img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={OnboardingDecoration} width="218" height="224" alt="Authentication decoration" />
+          aria-hidden="true"
+        >
+          <img
+            className="object-cover object-center w-full h-full"
+            src={OnboardingImage}
+            width="760"
+            height="1024"
+            alt="Onboarding"
+          />
+          <img
+            className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block"
+            src={OnboardingDecoration}
+            width="218"
+            height="224"
+            alt="Authentication decoration"
+          />
         </div>
-
       </div>
-
     </main>
   );
-})
+});
 
 export default Onboarding1;

src/pages/Onboarding2.jsx

@@ -1,74 +1,81 @@
-import React, {useEffect, useMemo, useState} from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { observer } from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
-import { store } from "../store/store";
+import { store } from '../store/store';
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
-import Logo from "../images/logo.png";
+import Logo from '../images/logo.png';
 
 const Onboarding2 = observer(() => {
   const navigate = useNavigate();
 
-  const [dataRegistration, setDataRegistration] = useState(
+  const [dataRegistration, setDataRegistration] = useState({
-      {
+    firstname: '',
-        firstname: '',
+    secondname: '',
-        secondname: '',
+    gender: '',
-        gender: '',
+    birthdate: '',
-        birthdate: '',
+  });
-      }
+
+  const fillingForm = useMemo(
+    () =>
+      !Object.keys(dataRegistration).find((item) => !dataRegistration[item]),
+    [dataRegistration]
   );
 
-  const fillingForm = useMemo(() => !Object.keys(dataRegistration).find(item => !dataRegistration[item]), [dataRegistration])
-
   const saveValueChange = (event) => {
-    const newValue=event.target.value;
+    const newValue = event.target.value;
     setDataRegistration({
       ...dataRegistration,
       [event.target.id]: newValue,
-    })
+    });
   };
 
   const saveStoreRegistration = () => {
     if (fillingForm) {
-      store.saveDataRegistration(Object.keys(dataRegistration).map(item => ({
+      store.saveDataRegistration(
+        Object.keys(dataRegistration).map((item) => ({
           key: `${item}`,
           value: dataRegistration[item],
-        })
+        }))
-      ))
+      );
-      navigate("/onboarding-3", { replace: true });
+      navigate('/onboarding-3', { replace: true });
     }
   };
 
   useEffect(() => {
-    if(store.accountData.length === 0)
+    if (store.accountData.length === 0) return;
-      return;
+    setDataRegistration(
-    setDataRegistration(store.accountData.reduce((acc, item) => ({
+      store.accountData.reduce(
-      ...acc,
+        (acc, item) => ({
-      [item.key]: item.value
+          ...acc,
-    }), {}))
+          [item.key]: item.value,
-
+        }),
-  }, [])
+        {}
+      )
+    );
+  }, []);
 
   return (
     <main className="bg-white">
-
       <div className="relative flex">
-
         {/* Content */}
         <div className="w-full md:w-1/2">
-
           <div className="min-h-screen h-full flex flex-col after:flex-1">
-
             <div className="flex-1">
-
               {/* Header */}
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
                 <Link className="block" to="/dashboard">
-                  <img alt='logo' src={Logo} width="89" height="32"/>
+                  <img alt="logo" src={Logo} width="89" height="32" />
                 </Link>
                 <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
+                  Have an account?{' '}
+                  <Link
+                    className="font-medium text-indigo-500 hover:text-indigo-600"
+                    to="/signIn"
+                  >
+                    Sign In
+                  </Link>
                 </div>
               </div>
 
@@ -76,19 +83,42 @@ const Onboarding2 = observer(() => {
               <div className="px-4 pt-12 pb-[59px]">
                 <div className="max-w-md mx-auto w-full">
                   <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">
                       <li>
-                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
+                        <span
+                          className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
+                          to="/"
+                        >
+                          1
+                        </span>
                       </li>
                       <li>
-                        <span 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</span>
+                        <span
+                          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
+                        </span>
                       </li>
                       <li>
-                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-3">3</span>
+                        <span
+                          className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500"
+                          to="/onboarding-3"
+                        >
+                          3
+                        </span>
                       </li>
                       <li>
-                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</span>
+                        <span
+                          className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500"
+                          to="/onboarding-4"
+                        >
+                          4
+                        </span>
                       </li>
                     </ul>
                   </div>
@@ -98,57 +128,120 @@ const Onboarding2 = observer(() => {
 
             <div className="px-4 py-8">
               <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 */}
                 <div>
                   <div className="space-y-4 mb-8">
                     <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="first_name">First name <span className="text-rose-500">*</span></label>
+                      <label
-                      <input  id="firstname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" value={dataRegistration.firstname} />
+                        className="block text-sm font-medium mb-1"
+                        htmlFor="first_name"
+                      >
+                        First name <span className="text-rose-500">*</span>
+                      </label>
+                      <input
+                        id="firstname"
+                        onChange={(event) => saveValueChange(event)}
+                        className="form-input w-full"
+                        type="text"
+                        value={dataRegistration.firstname}
+                      />
                     </div>
                     <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="second_name">Last name <span className="text-rose-500">*</span></label>
+                      <label
-                      <input  id="secondname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" value={dataRegistration.secondname} />
+                        className="block text-sm font-medium mb-1"
+                        htmlFor="second_name"
+                      >
+                        Last name <span className="text-rose-500">*</span>
+                      </label>
+                      <input
+                        id="secondname"
+                        onChange={(event) => saveValueChange(event)}
+                        className="form-input w-full"
+                        type="text"
+                        value={dataRegistration.secondname}
+                      />
                     </div>
                     <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="gender">Gender <span className="text-rose-500">*</span></label>
+                      <label
-                      <select  id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full" value={dataRegistration.gender}>
+                        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"
+                        value={dataRegistration.gender}
+                      >
                         <option className="hidden"></option>
                         <option>male</option>
                         <option>female</option>
                       </select>
                     </div>
                     <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="birthdate">Date of birth <span className="text-rose-500">*</span></label>
+                      <label
-                      <input  id="birthdate" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" value={dataRegistration.birthdate} />
+                        className="block text-sm font-medium mb-1"
+                        htmlFor="birthdate"
+                      >
+                        Date of birth <span className="text-rose-500">*</span>
+                      </label>
+                      <input
+                        id="birthdate"
+                        onChange={(event) => saveValueChange(event)}
+                        className="form-input w-full"
+                        type="date"
+                        autoComplete="on"
+                        value={dataRegistration.birthdate}
+                      />
                     </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>
+                        <span className="text-sm ml-2">
+                          Email me about product news.
+                        </span>
                       </label>
                     </div>
-                    <button onClick={saveStoreRegistration} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">Sign Up
+                    <button
+                      onClick={saveStoreRegistration}
+                      className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap"
+                    >
+                      Sign Up
                     </button>
                   </div>
                 </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">
+        <div
-          <img className="object-cover object-center w-full h-full" src={OnboardingImage} width="760" height="1024" alt="Onboarding" />
+          className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2"
-          <img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={OnboardingDecoration} width="218" height="224" alt="Authentication decoration" />
+          aria-hidden="true"
+        >
+          <img
+            className="object-cover object-center w-full h-full"
+            src={OnboardingImage}
+            width="760"
+            height="1024"
+            alt="Onboarding"
+          />
+          <img
+            className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block"
+            src={OnboardingDecoration}
+            width="218"
+            height="224"
+            alt="Authentication decoration"
+          />
         </div>
-
       </div>
-
     </main>
   );
 });

src/pages/Onboarding3.jsx

@@ -1,53 +1,55 @@
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
-import {observer} from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
 import { Link } from 'react-router-dom';
-import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
+import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
-import Logo from "../images/logo.png";
+import Logo from '../images/logo.png';
-import {store} from "../store/store";
+import { store } from '../store/store';
 
-const Onboarding3 = observer(()=>{
+const Onboarding3 = observer(() => {
-
+  useEffect(() => {
-  useEffect(()=>{
     store.generatePassPhrase();
-  }, [])
+  }, []);
 
   const generatePassPhrase = () => {
     store.generatePassPhrase();
   };
 
-  const savePassPhraseInStore = copiedPhrase => {
+  const savePassPhraseInStore = (copiedPhrase) => {
     if (copiedPhrase.split(' ').length === 12) {
       store.savePastPassPhrase(copiedPhrase.trim());
     }
   };
 
   const pastePassPhrase = () => {
-    navigator.clipboard.readText().then(res => savePassPhraseInStore(res));
+    navigator.clipboard.readText().then((res) => savePassPhraseInStore(res));
   };
 
-  const convertPassPhraseToArray = () => store.passPhrase.split(' ').
+  const convertPassPhraseToArray = () =>
-    map((item, index) => ({str: item, id: index}));
+    store.passPhrase
+      .split(' ')
+      .map((item, index) => ({ str: item, id: index }));
 
   return (
     <main className="bg-white">
-
       <div className="relative flex">
-
         {/* Content */}
         <div className="w-full md:w-1/2">
-
           <div className="min-h-screen h-full flex flex-col after:flex-1">
-
             <div className="flex-1">
-
               {/* Header */}
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
                 <Link className="block" to="/dashboard">
-                  <img alt='logo' src={Logo} width="89" height="32"/>
+                  <img alt="logo" src={Logo} width="89" height="32" />
                 </Link>
                 <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
+                  Have an account?{' '}
+                  <Link
+                    className="font-medium text-indigo-500 hover:text-indigo-600"
+                    to="/signIn"
+                  >
+                    Sign In
+                  </Link>
                 </div>
               </div>
 
@@ -55,19 +57,42 @@ const Onboarding3 = observer(()=>{
               <div className="px-4 pt-12 pb-8">
                 <div className="max-w-md mx-auto w-full">
                   <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">
                       <li>
-                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
+                        <span
+                          className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
+                          to="/"
+                        >
+                          1
+                        </span>
                       </li>
                       <li>
-                        <span 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</span>
+                        <span
+                          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
+                        </span>
                       </li>
                       <li>
-                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-3">3</span>
+                        <span
+                          className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
+                          to="/onboarding-3"
+                        >
+                          3
+                        </span>
                       </li>
                       <li>
-                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</span>
+                        <span
+                          className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500"
+                          to="/onboarding-4"
+                        >
+                          4
+                        </span>
                       </li>
                     </ul>
                   </div>
@@ -77,58 +102,94 @@ const Onboarding3 = observer(()=>{
 
             <div className="px-4 mt-20 py-8">
               <div className="max-w-fit mx-auto flex flex-col gap-y-36">
-
                 <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 */}
                   <div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
-                    {convertPassPhraseToArray().map(tag => (
+                    {convertPassPhraseToArray().map((tag) => (
-                      <button key={tag.id} className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
+                      <button
+                        key={tag.id}
+                        className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5"
+                      >
                         <span className="text-sm font-medium">{tag.str}</span>
                       </button>
                     ))}
                   </div>
                   <div className="flex pl-7 gap-x-5">
-                    <button onClick={pastePassPhrase} className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
+                    <button
-                      <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
+                      onClick={pastePassPhrase}
-                        <path
+                      className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600"
-                            d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
+                    >
+                      <svg
+                        className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5"
+                        viewBox="0 0 16 16"
+                      >
+                        <path d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
                       </svg>
                       <span className="ml-2">Paste</span>
                     </button>
-                    <button onClick={generatePassPhrase} className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
+                    <button
-                      <svg className="mb-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      onClick={generatePassPhrase}
-                        <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"/>
+                      className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500"
-                        <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"/>
+                    >
+                      <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"
+                        />
                       </svg>
                       <span className="ml-2">Generate</span>
                     </button>
                   </div>
                 </div>
                 <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>
                   <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>
-
         </div>
 
         {/* Image */}
-        <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
+        <div
+          className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2"
+          aria-hidden="true"
+        >
           <div className="flex mt-40 flex-col items-center gap-2.5">
-            <img className="object-cover object-center" src={generateSvgAvatar(store.pubKey)} width="493px" height="493px" alt="Onboarding" />
+            <img
+              className="object-cover object-center"
+              src={generateSvgAvatar(store.pubKey)}
+              width="493px"
+              height="493px"
+              alt="Onboarding"
+            />
             <span className="text-sm">Your generated Digital ID</span>
           </div>
         </div>
-
       </div>
-
     </main>
   );
 });

src/pages/Onboarding4.jsx

@@ -1,52 +1,54 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
+import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
-import Logo from "../images/logo.png";
+import Logo from '../images/logo.png';
-import {observer} from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
-import { store } from "../store/store";
+import { store } from '../store/store';
 
 const Onboarding4 = observer(() => {
-
   const [checkBoxesSelected, setCheckBoxesSelected] = useState([]);
 
   function createAccount() {
-    if(checkBoxesSelected.length === 2) {
+    if (checkBoxesSelected.length === 2) {
       store.pushAccountData();
       sessionStorage.setItem('passPhrase', store.passPhrase);
       store.clearDataRegistration();
     }
-  };
+  }
 
   function saveCheckBoxesValues(e) {
     const { id, checked } = e.target;
     setCheckBoxesSelected([...checkBoxesSelected, id]);
     if (!checked) {
-      setCheckBoxesSelected(checkBoxesSelected.filter(item => item !== id));
+      setCheckBoxesSelected(checkBoxesSelected.filter((item) => item !== id));
     }
-  };
+  }
 
-  const firstNameAccount = store.accountData.length && store.accountData.find(item => item.key === "firstname").value;
+  const firstNameAccount =
+    store.accountData.length &&
+    store.accountData.find((item) => item.key === 'firstname').value;
 
   return (
     <main className="bg-white">
-
       <div className="relative flex">
-
         {/* Content */}
         <div className="w-full md:w-1/2">
-
           <div className="min-h-screen h-full flex flex-col after:flex-1">
-
             <div className="flex-1">
-
               {/* Header */}
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
                 <Link className="block" to="/dashboard">
-                  <img alt='logo' src={Logo} width="89" height="32"/>
+                  <img alt="logo" src={Logo} width="89" height="32" />
                 </Link>
                 <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
+                  Have an account?{' '}
+                  <Link
+                    className="font-medium text-indigo-500 hover:text-indigo-600"
+                    to="/signIn"
+                  >
+                    Sign In
+                  </Link>
                 </div>
               </div>
 
@@ -54,19 +56,42 @@ const Onboarding4 = observer(() => {
               <div className="px-4 pt-12 pb-[85px]">
                 <div className="max-w-md mx-auto w-full">
                   <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">
                       <li>
-                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
+                        <span
+                          className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
+                          to="/"
+                        >
+                          1
+                        </span>
                       </li>
                       <li>
-                        <span 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</span>
+                        <span
+                          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
+                        </span>
                       </li>
                       <li>
-                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-3">3</span>
+                        <span
+                          className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
+                          to="/onboarding-3"
+                        >
+                          3
+                        </span>
                       </li>
                       <li>
-                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-4">4</span>
+                        <span
+                          className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white"
+                          to="/onboarding-4"
+                        >
+                          4
+                        </span>
                       </li>
                     </ul>
                   </div>
@@ -76,50 +101,98 @@ const Onboarding4 = observer(() => {
 
             <div className="px-4 mt-40 py-8">
               <div className=" flex flex-col items-center gap-20 max-w-md mx-auto">
-
                 <div className="text-center">
-                  <svg className="inline-flex w-16 h-16 fill-current mb-6" viewBox="0 0 64 64">
+                  <svg
-                    <circle className="text-emerald-100" cx="32" cy="32" r="32" />
+                    className="inline-flex w-16 h-16 fill-current mb-6"
-                    <path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
+                    viewBox="0 0 64 64"
+                  >
+                    <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">{firstNameAccount ? `Nice to meet you, ${firstNameAccount} 🙌` : 'Please, go back step 2'}</h1>
+                  <h1 className="text-3xl text-slate-800 font-bold mb-8">
-                  <button onClick={createAccount} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
+                    {firstNameAccount
-                    <Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/digitalId/profile-id"}>Go To Profile -&gt;</Link>
+                      ? `Nice to meet you, ${firstNameAccount} 🙌`
+                      : 'Please, go back step 2'}
+                  </h1>
+                  <button
+                    onClick={createAccount}
+                    className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white"
+                  >
+                    <Link
+                      id="link-dashboard"
+                      to={
+                        checkBoxesSelected.length === 2 &&
+                        '/digitalId/profile-id'
+                      }
+                    >
+                      Go To Profile -&gt;
+                    </Link>
                   </button>
                 </div>
 
                 <div className="flex items-center justify-between">
                   <div className="mr-1">
                     <label className="flex items-center">
-                      <input id="checkbox-1" onChange={(e)=>saveCheckBoxesValues(e)} type="checkbox" className="form-checkbox" />
+                      <input
-                      <span className="text-sm ml-2">I understand that Idntty cannot recover pass phrase</span>
+                        id="checkbox-1"
+                        onChange={(e) => saveCheckBoxesValues(e)}
+                        type="checkbox"
+                        className="form-checkbox"
+                      />
+                      <span className="text-sm ml-2">
+                        I understand that Idntty cannot recover pass phrase
+                      </span>
                     </label>
                     <label className="flex items-center">
-                      <input id="checkbox-2" onChange={(e)=>saveCheckBoxesValues(e)} type="checkbox" className="form-checkbox" />
+                      <input
+                        id="checkbox-2"
+                        onChange={(e) => saveCheckBoxesValues(e)}
+                        type="checkbox"
+                        className="form-checkbox"
+                      />
                       <div className="text-sm ml-2">
-                        I <Link className="text-indigo-500 hover:text-indigo-600 underline" to="/">store my pharse</Link> very carefuly
+                        I{' '}
+                        <Link
+                          className="text-indigo-500 hover:text-indigo-600 underline"
+                          to="/"
+                        >
+                          store my pharse
+                        </Link>{' '}
+                        very carefuly
                       </div>
                     </label>
                   </div>
                 </div>
-
               </div>
             </div>
-
           </div>
-
         </div>
 
         {/* Image */}
-        <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
+        <div
+          className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2"
+          aria-hidden="true"
+        >
           <div className="flex mt-40 flex-col items-center gap-2.5">
-            <img className="object-cover object-center" src={generateSvgAvatar(store.pubKey)} width="493px" height="493px" alt="Onboarding" />
+            <img
+              className="object-cover object-center"
+              src={generateSvgAvatar(store.pubKey)}
+              width="493px"
+              height="493px"
+              alt="Onboarding"
+            />
             <span className="text-sm">Your generated Digital ID</span>
           </div>
         </div>
-
       </div>
-
     </main>
   );
 });

src/pages/ResetPassword.jsx

@@ -2,55 +2,77 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import AuthImage from '../images/auth-image.jpg';
 import AuthDecoration from '../images/auth-decoration.png';
-import Logo from "../images/logo.png";
+import Logo from '../images/logo.png';
 
 function ResetPassword() {
   return (
     <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="/dashboard">
-                  <img alt='logo' src={Logo} width="89" height="32"/>
+                  <img alt="logo" src={Logo} width="89" height="32" />
                 </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">Reset your Password ✨</h1>
+              <h1 className="text-3xl text-slate-800 font-bold mb-6">
+                Reset your Password ✨
+              </h1>
               {/* Form */}
               <div>
                 <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>
+                    <label
-                    <input id="email" className="form-input w-full" type="email" />
+                      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>
                 <div className="flex justify-end mt-6">
-                  <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">Send Reset Link</button>
+                  <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">
+                    Send Reset Link
+                  </button>
                 </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">
+        <div
-          <img className="object-cover object-center w-full h-full" src={AuthImage} width="760" height="1024" alt="Authentication" />
+          className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2"
-          <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" />
+          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>
   );
 }

src/pages/SharedData.jsx

@@ -1,14 +1,14 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from 'react';
-import { Link, Navigate, useParams } from "react-router-dom";
+import { Link, Navigate, useParams } from 'react-router-dom';
-import { generateSvgAvatar } from "../images/GenerateOnboardingSvg/GenerateSvg";
+import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
-import User06 from "../images/user-28-06.jpg";
+import User06 from '../images/user-28-06.jpg';
-import User08 from "../images/user-28-08.jpg";
+import User08 from '../images/user-28-08.jpg';
-import User09 from "../images/user-28-09.jpg";
+import User09 from '../images/user-28-09.jpg';
-import SharedDataRoadMap from "../partials/sharedData/SharedDataRoadmap";
+import SharedDataRoadMap from '../partials/sharedData/SharedDataRoadmap';
-import { store } from "../store/store";
+import { store } from '../store/store';
-import { fetchWrapper } from "../shared/fetchWrapper";
+import { fetchWrapper } from '../shared/fetchWrapper';
-import { cryptography } from "@liskhq/lisk-client";
+import { cryptography } from '@liskhq/lisk-client';
-import {generateTransaction} from '../utils/Utils';
+import { generateTransaction } from '../utils/Utils';
 
 function SharedData() {
   const [encryptedData, setEncryptedData] = useState([]);
@@ -16,15 +16,15 @@ function SharedData() {
 
   const { id } = useParams();
 
-  const [address, pubKey] = id.split(":");
+  const [address, pubKey] = id.split(':');
 
-  const passPhrase = sessionStorage.getItem("passPhrase");
+  const passPhrase = sessionStorage.getItem('passPhrase');
 
   useEffect(() => {
     fetchWrapper
-    .get(`data/shared/${id}`)
+      .get(`data/shared/${id}`)
-    .then((res) => setEncryptedData(res.data ?? []))
+      .then((res) => setEncryptedData(res.data ?? []))
-    .catch((err) => console.log(err));
+      .catch((err) => console.log(err));
   }, [id]);
 
   const decryptedData = useMemo(() => {
@@ -32,21 +32,21 @@ function SharedData() {
       let seed, value, hash;
       try {
         [seed, value] = cryptography
-        .decryptMessageWithPassphrase(
+          .decryptMessageWithPassphrase(
-          item.value,
+            item.value,
-          item.value_nonce,
+            item.value_nonce,
-          passPhrase,
+            passPhrase,
-          Buffer.from(pubKey, 'hex')
+            Buffer.from(pubKey, 'hex')
-        )
+          )
-        .split(":");
+          .split(':');
         hash = cryptography
-        .hash(
+          .hash(
-          Buffer.concat([
+            Buffer.concat([
-            Buffer.from(seed, "utf8"),
+              Buffer.from(seed, 'utf8'),
-            cryptography.hash(value, "utf8"),
+              cryptography.hash(value, 'utf8'),
-          ])
+            ])
-        )
+          )
-        .toString("hex");
+          .toString('hex');
       } catch (err) {
         setHasError(true);
         console.log(err);
@@ -62,19 +62,27 @@ function SharedData() {
   }, [encryptedData]);
 
   const validateAccountData = () => {
-    const builder = generateTransaction(BigInt(store.accountInfo?.sequence?.nonce || 0),
+    const builder = generateTransaction(
-      store.pubKey, store.nodeInfo.networkIdentifier, store.passPhrase)
+      BigInt(store.accountInfo?.sequence?.nonce || 0),
+      store.pubKey,
+      store.nodeInfo.networkIdentifier,
+      store.passPhrase
+    );
 
-    const signedTx = builder.validate(decryptedData.map(e => ({
+    const signedTx = builder.validate(
-      label: e.label,
+      decryptedData.map((e) => ({
-      value: Buffer.from(e.hash, 'hex')
+        label: e.label,
-    })), address)
+        value: Buffer.from(e.hash, 'hex'),
+      })),
+      address
+    );
 
     if (signedTx) {
-      fetchWrapper.post('transactions', {}, signedTx)
+      fetchWrapper
-      .catch((err) => console.log(err));
+        .post('transactions', {}, signedTx)
+        .catch((err) => console.log(err));
     }
-  }
+  };
 
   if (!passPhrase) return <Navigate to="/" replace={true} />;
 
@@ -103,7 +111,14 @@ function SharedData() {
                       </li>
                     ))}
                 </ul>
-                {!hasError && <button className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" onClick={validateAccountData}>Validate data</button>}
+                {!hasError && (
+                  <button
+                    className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white"
+                    onClick={validateAccountData}
+                  >
+                    Validate data
+                  </button>
+                )}
               </div>
             </div>
           </div>

src/pages/SignIn.jsx

@@ -1,16 +1,15 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
-import {observer} from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
 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 {store} from "../store/store";
+import { store } from '../store/store';
 
-const SignIn = observer(()=>{
+const SignIn = observer(() => {
+  const [passPhrase, setPassPhrase] = useState('- - - - - - - - - - - -');
+  const [addedPassPhrase, setAddedPassPhrase] = useState(false);
 
-  const[passPhrase, setPassPhrase] = useState('- - - - - - - - - - - -');
+  function savePassPhrase(copiedPhrase) {
-  const[addedPassPhrase, setAddedPassPhrase] = useState(false);
-
-  function savePassPhrase (copiedPhrase) {
     if (copiedPhrase.split(' ').length === 12) {
       store.savePastPassPhrase(copiedPhrase.trim());
       setPassPhrase(store.passPhrase);
@@ -19,55 +18,67 @@ const SignIn = observer(()=>{
   }
 
   function convertPassPhraseToArray() {
-    return passPhrase.split(' ').map((item, index) => ({str:item, id:index}));
+    return passPhrase
+      .split(' ')
+      .map((item, index) => ({ str: item, id: index }));
   }
 
   function pastePassPhrase() {
-    navigator.clipboard.readText().then(res => savePassPhrase(res));
+    navigator.clipboard.readText().then((res) => savePassPhrase(res));
   }
 
   return (
     <main className="bg-white">
-
       <div className="relative flex">
-
         {/* Content */}
         <div className="w-full md:w-1/2">
-
           <div className="min-h-screen h-full flex flex-col after:flex-1">
-
             <div className="flex-1">
-
               {/* Header */}
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
                 <Link className="block" to="/">
-                  <img alt='logo' src={Logo} width="89" height="32"/>
+                  <img alt="logo" src={Logo} width="89" height="32" />
                 </Link>
                 <div className="text-sm">
-                  Have not an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">Sign Up</Link>
+                  Have not an account?{' '}
+                  <Link
+                    className="font-medium text-indigo-500 hover:text-indigo-600"
+                    to="/"
+                  >
+                    Sign Up
+                  </Link>
                 </div>
               </div>
             </div>
 
             <div className="px-4 mt-20 py-8">
               <div className="max-w-fit mx-auto flex flex-col gap-y-36">
-
                 <div>
-                  <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 */}
                   <div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
-                    {convertPassPhraseToArray().map(tag => (
+                    {convertPassPhraseToArray().map((tag) => (
-                      <button key={tag.id} className="min-w-[93px] min-h-[26px] bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
+                      <button
+                        key={tag.id}
+                        className="min-w-[93px] min-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.str}</span>
                       </button>
                     ))}
                   </div>
                   <div className="flex pl-7 gap-x-5">
-                    <button onClick={pastePassPhrase} className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
+                    <button
-                      <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
+                      onClick={pastePassPhrase}
-                        <path
+                      className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600"
-                            d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
+                    >
+                      <svg
+                        className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5"
+                        viewBox="0 0 16 16"
+                      >
+                        <path d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
                       </svg>
                       <span className="ml-2">Paste</span>
                     </button>
@@ -75,29 +86,37 @@ const SignIn = observer(()=>{
                 </div>
                 <div className="flex items-center justify-between">
                   <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
-                    <Link to={addedPassPhrase && "/digitalId/profile-id"}>Go To Profile -&gt;</Link>
+                    <Link to={addedPassPhrase && '/digitalId/profile-id'}>
+                      Go To Profile -&gt;
+                    </Link>
                   </button>
                 </div>
-
               </div>
             </div>
-
           </div>
-
         </div>
 
         {/* Image */}
-        <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
+        <div
+          className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2"
+          aria-hidden="true"
+        >
           <div className="flex mt-40 flex-col items-center gap-2.5">
-            <div className={`${addedPassPhrase || 'opacity-0'} w-[493px] h-[493px]`}>
+            <div
-              <img className="object-cover object-center" alt="" src={generateSvgAvatar(store.pubKey)}/>
+              className={`${
+                addedPassPhrase || 'opacity-0'
+              } w-[493px] h-[493px]`}
+            >
+              <img
+                className="object-cover object-center"
+                alt=""
+                src={generateSvgAvatar(store.pubKey)}
+              />
             </div>
             <span className="text-sm">Your Digital ID</span>
           </div>
         </div>
-
       </div>
-
     </main>
   );
 });

src/pages/digitalId/ProfileId.jsx

@@ -1,16 +1,25 @@
 import React, { useState, useEffect } from 'react';
-import { store } from "../../store/store";
+import { store } from '../../store/store';
 import Sidebar from '../../partials/Sidebar';
 import { observer } from 'mobx-react-lite';
 import Header from '../../partials/Header';
 import ProfileTable from '../../partials/profile/ProfileTable';
 import Image from '../../images/transactions-image-04.svg';
-import {labelMap} from '../../shared/labelMap';
+import { labelMap } from '../../shared/labelMap';
-import {statusMap} from "../../shared/statusMap";
+import { statusMap } from '../../shared/statusMap';
 
-const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc ID', 'National doc issue date', 'National doc expiry date'];
+const initialPropertyValues = [
+  'First name',
+  'Second name',
+  'Birthdate',
+  'Gender',
+  'National doctype',
+  'National doc ID',
+  'National doc issue date',
+  'National doc expiry date',
+];
 
-const Profile = observer (() => {
+const Profile = observer(() => {
   const defaultValues = {
     label: '',
     value: '',
@@ -30,20 +39,20 @@ const Profile = observer (() => {
   const [updatedValues, setUpdatedValues] = useState([defaultValues]);
   const [addedValues, setAddedValues] = useState(defaultValues);
   const [isCheck, setIsCheck] = useState([]);
-  const [alreadyExists, setAlreadyExists] = useState(false)
+  const [alreadyExists, setAlreadyExists] = useState(false);
   const [blockChainValue, setBlockChainValue] = useState('');
-  const [publicKey, setPublicKey] = useState('')
+  const [publicKey, setPublicKey] = useState('');
 
   useEffect(() => {
     handleSelectedItems(isCheck);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isCheck]);
 
-  const handleClick = e => {
+  const handleClick = (e) => {
     const { id, checked } = e.target;
     setIsCheck([...isCheck, id]);
     if (!checked || !id) {
-      setIsCheck(isCheck.filter(item => item !== id));
+      setIsCheck(isCheck.filter((item) => item !== id));
     }
   };
 
@@ -57,27 +66,29 @@ const Profile = observer (() => {
     setAddedValues((prevState) => ({
       ...prevState,
       [field]: value,
-    }))
+    }));
   };
 
   const changeUpdatedValues = (value, field, key) => {
-    if(field==='value') {
+    if (field === 'value') {
-      setBlockChainValue(value)
+      setBlockChainValue(value);
     }
     setUpdatedValues((prevState) =>
-      prevState.map((elem) => (
+      prevState.map((elem) =>
-          (elem.key === key) ? {
+        elem.key === key
-            ...elem,
+          ? {
-            [field]: value,
+              ...elem,
-          } : elem
+              [field]: value,
-      ))
+            }
-    )
+          : elem
+      )
+    );
   };
 
   const selectHint = (element) => {
     changeAddedValues(element, 'label');
     setPropertyValues([]);
-  }
+  };
 
   const closeHint = (eventTarget) => {
     if (!eventTarget || eventTarget.tabIndex !== -1) {
@@ -87,12 +98,21 @@ const Profile = observer (() => {
 
   const handleSelectedItems = (selectedItems) => {
     setSelectedItems([...selectedItems]);
-    setUpdatedValues(store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
+    setUpdatedValues(
-      .map(elem => (
+      store.decryptedAccountData
-        (!elem.seed) ? {
+        .filter(({ key }) => selectedItems.includes(key))
-        ...elem,
+        .map((elem) =>
-        seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
+          !elem.seed
-      }: elem)));
+            ? {
+                ...elem,
+                seed: String(
+                  Math.floor(Math.random() * 90000000000000000000),
+                  10
+                ),
+              }
+            : elem
+        )
+    );
     if (selectedItems.length > 0) {
       setButtonPanelOpen(false);
       setAddPanelOpen(false);
@@ -115,8 +135,9 @@ const Profile = observer (() => {
   };
 
   const sendAddedData = () => {
-    const checkingAddedData = !store.decryptedAccountData
+    const checkingAddedData = !store.decryptedAccountData.some(
-      .some((element) => element.label === addedValues.label)
+      (element) => element.label === addedValues.label
+    );
     setAlreadyExists(!checkingAddedData);
     if (checkingAddedData) {
       setAddPanelOpen(false);
@@ -134,54 +155,65 @@ const Profile = observer (() => {
   };
 
   const deleteDataParameters = () => {
-    const changeData = store.decryptedAccountData.filter(item=>!selectedItems.includes(item.key));
+    const changeData = store.decryptedAccountData.filter(
+      (item) => !selectedItems.includes(item.key)
+    );
     store.pushAccountData(changeData);
-    if(storeOnBlockchain)
+    if (storeOnBlockchain)
-      store.pushAccountDataToBlockchain(changeData.filter(elem=>elem.status!=='Stored'))
+      store.pushAccountDataToBlockchain(
+        changeData.filter((elem) => elem.status !== 'Stored')
+      );
   };
 
   const changeInitialArray = () => {
     let newArr = [];
-    store.decryptedAccountData.map(elem => {
+    store.decryptedAccountData.map((elem) => {
-      updatedValues.forEach(item => {
+      updatedValues.forEach((item) => {
         if (elem.label === item.label) {
           newArr.push({
             ...elem,
             status: 'new',
-            'value': item.value,
+            value: item.value,
-            'seed': item.seed,
+            seed: item.seed,
-          })
+          });
         }
-      })
+      });
-      if (!newArr.find(element => element.label === elem.label)) {
+      if (!newArr.find((element) => element.label === elem.label)) {
         newArr.push(elem);
       }
-    })
+    });
     return newArr;
   };
 
   const changeDataParameters = () => {
     const updatedData = changeInitialArray();
     store.pushAccountData(updatedData);
-    if(storeOnBlockchain)
+    if (storeOnBlockchain)
-      store.pushAccountDataToBlockchain(updatedData.filter(elem=>elem.status!=='Stored'))
+      store.pushAccountDataToBlockchain(
+        updatedData.filter((elem) => elem.status !== 'Stored')
+      );
   };
 
   const shareAccountData = () => {
-    const sharedData = store.decryptedAccountData.filter(item => selectedItems.includes(item.key))
+    const sharedData = store.decryptedAccountData.filter((item) =>
-    store.pushSharedData(sharedData, publicKey)
+      selectedItems.includes(item.key)
+    );
+    store.pushSharedData(sharedData, publicKey);
     cancelSharePanel();
-  }
+  };
 
   const addDataParameters = () => {
     const label = addedValues.label.toLowerCase().split(' ').join('');
-    if(labelMap[label])
+    if (labelMap[label])
       addedValues.key = addedValues.label.toLowerCase().split(' ').join('');
-    else
+    else addedValues.key = addedValues.label;
-      addedValues.key = addedValues.label
     store.pushAccountData(store.decryptedAccountData.concat(addedValues));
-    if(storeOnBlockchain)
+    if (storeOnBlockchain)
-      store.pushAccountDataToBlockchain(store.decryptedAccountData.concat(addedValues).filter(elem=>elem.status!=='Stored'))
+      store.pushAccountDataToBlockchain(
+        store.decryptedAccountData
+          .concat(addedValues)
+          .filter((elem) => elem.status !== 'Stored')
+      );
   };
 
   const cancelAddPanel = () => {
@@ -191,12 +223,21 @@ const Profile = observer (() => {
   };
 
   const cancelUpdatePanel = () => {
-    setUpdatedValues(store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
+    setUpdatedValues(
-      .map(elem => (
+      store.decryptedAccountData
-        (!elem.seed) ? {
+        .filter(({ key }) => selectedItems.includes(key))
-        ...elem,
+        .map((elem) =>
-        seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
+          !elem.seed
-      }: elem)));
+            ? {
+                ...elem,
+                seed: String(
+                  Math.floor(Math.random() * 90000000000000000000),
+                  10
+                ),
+              }
+            : elem
+        )
+    );
     setUpdatePanelOpen(false);
     setChangePanelOpen(true);
     setIsCheck([]);
@@ -210,12 +251,12 @@ const Profile = observer (() => {
   const openSharePanel = () => {
     setSharePanelOpen(true);
     setChangePanelOpen(false);
-  }
+  };
 
   const cancelSharePanel = () => {
     setSharePanelOpen(false);
     setChangePanelOpen(true);
-  }
+  };
 
   const openUpdatePanel = () => {
     setUpdatePanelOpen(true);
@@ -234,7 +275,9 @@ const Profile = observer (() => {
     setPropertyValues(initialPropertyValues);
     if (text) {
       let reg = new RegExp(`^${text}`, 'img');
-      setPropertyValues((prevState) => prevState.filter((element) => element.match(reg)));
+      setPropertyValues((prevState) =>
+        prevState.filter((element) => element.match(reg))
+      );
     }
   };
 
@@ -272,19 +315,26 @@ const Profile = observer (() => {
                 </div>
                 {/* Table */}
                 <div>
-                  <ProfileTable isCheck={isCheck} handleClick={handleClick} userData={store.decryptedAccountData}/>
+                  <ProfileTable
+                    isCheck={isCheck}
+                    handleClick={handleClick}
+                    userData={store.decryptedAccountData}
+                  />
                 </div>
               </div>
               {/* Left sidebar */}
               <div>
                 {/* Button panel*/}
-                <div className={`${!buttonPanelOpen && "hidden"} ml-2.5`}>
+                <div className={`${!buttonPanelOpen && 'hidden'} ml-2.5`}>
                   <div className="bg-white px-5 py-[43px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
                     <button
                       className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white"
                       onClick={openAddPanel}
                     >
-                      <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
+                      <svg
+                        className="w-4 h-4 fill-current shrink-0"
+                        viewBox="0 0 16 16"
+                      >
                         <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
                       </svg>
                       <span className="ml-1">Add new field</span>
@@ -293,13 +343,24 @@ const Profile = observer (() => {
                 </div>
                 <div className="ml-2.5">
                   {/* Add panel */}
-                  <div className={`${!addPanelOpen && 'hidden'} relative flex flex-col bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
+                  <div
-                    <div className='relative z-20'>
+                    className={`${
-                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
+                      !addPanelOpen && 'hidden'
+                    } relative flex flex-col bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}
+                  >
+                    <div className="relative z-20">
+                      <label
+                        className="block text-sm font-medium mb-1"
+                        htmlFor="mandatory"
+                      >
+                        Property <span className="text-rose-500">*</span>
+                      </label>
                       <input
-                        autoComplete='off'
+                        autoComplete="off"
                         id="label"
-                        className={`form-input w-full ${alreadyExists && 'border-rose-300'}`}
+                        className={`form-input w-full ${
+                          alreadyExists && 'border-rose-300'
+                        }`}
                         type="text"
                         required
                         onInput={(e) => handleInput(e.target.value, 'label')}
@@ -307,48 +368,90 @@ const Profile = observer (() => {
                         onClick={openHint}
                         onBlur={(e) => closeHint(e.relatedTarget)}
                       />
-                      <div tabIndex='-1' className={`absolute w-full box-border bg-white flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
+                      <div
+                        tabIndex="-1"
+                        className={`absolute w-full box-border bg-white flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${
+                          propertyValues.length > 0 || 'hidden'
+                        }`}
+                      >
                         <ul>
                           {propertyValues.map((element, index) => (
-                            <li className='hover:text-indigo-600 cursor-pointer' key={index} onClick={() => selectHint(element)}>{element}</li>
+                            <li
+                              className="hover:text-indigo-600 cursor-pointer"
+                              key={index}
+                              onClick={() => selectHint(element)}
+                            >
+                              {element}
+                            </li>
                           ))}
                         </ul>
-                     </div>
+                      </div>
-                      { alreadyExists && <div className="text-xs mt-1 text-rose-500">This property already added!</div> }
+                      {alreadyExists && (
+                        <div className="text-xs mt-1 text-rose-500">
+                          This property already added!
+                        </div>
+                      )}
                     </div>
-                    <div className='my-3 z-10'>
+                    <div className="my-3 z-10">
-                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
+                      <label
+                        className="block text-sm font-medium mb-1"
+                        htmlFor="mandatory"
+                      >
+                        Value <span className="text-rose-500">*</span>
+                      </label>
                       <input
-                        autoComplete='off'
+                        autoComplete="off"
                         id="value"
                         className="form-input w-full"
                         type="text"
                         required
                         onClick={() => setPropertyValues([])}
-                        onChange={(e) => changeAddedValues(e.target.value, 'value')}
+                        onChange={(e) =>
+                          changeAddedValues(e.target.value, 'value')
+                        }
                         value={addedValues.value}
                       />
                     </div>
-                    <div className='z-10'>
+                    <div className="z-10">
-                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
+                      <label
+                        className="block text-sm font-medium mb-1"
+                        htmlFor="mandatory"
+                      >
+                        Seed <span className="text-rose-500">*</span>
+                      </label>
                       <input
-                        autoComplete='off'
+                        autoComplete="off"
                         id="seed"
                         className="form-input w-full"
                         type="text"
                         required
                         onClick={() => setPropertyValues([])}
-                        onChange={(e) => changeAddedValues(e.target.value, 'seed')}
+                        onChange={(e) =>
+                          changeAddedValues(e.target.value, 'seed')
+                        }
                         value={addedValues.seed}
                       />
                     </div>
                     <div className="flex flex-row z-10 justify-between pt-[18px] pb-[23px] items-center border-b border-slate-200">
-                      <span className="block text-sm font-medium">Store data on blockchain</span>
+                      <span className="block text-sm font-medium">
+                        Store data on blockchain
+                      </span>
                       <div className="flex items-center">
                         <div className="form-switch">
-                          <input type="checkbox" id="blockcheined" className="sr-only" checked={storeOnBlockchain} onChange={() => setStoreOnBlockchain(!storeOnBlockchain)} />
+                          <input
-                            <label className="bg-slate-400" htmlFor="switch-1">
+                            type="checkbox"
-                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                            id="blockcheined"
+                            className="sr-only"
+                            checked={storeOnBlockchain}
+                            onChange={() =>
+                              setStoreOnBlockchain(!storeOnBlockchain)
+                            }
+                          />
+                          <label className="bg-slate-400" htmlFor="switch-1">
+                            <span
+                              className="bg-white shadow-sm"
+                              aria-hidden="true"
+                            ></span>
                           </label>
                         </div>
                       </div>
@@ -370,57 +473,111 @@ const Profile = observer (() => {
                     </div>
                   </div>
                   {/* Update panel */}
-                  <div className={`${!updatePanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
+                  <div
+                    className={`${
+                      !updatePanelOpen && 'hidden'
+                    } bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}
+                  >
                     {updatedValues.map((item, index) => (
                       <div key={index} className="flex flex-col gap-y-3">
                         <div>
-                          <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
+                          <label
+                            className="block text-sm font-medium mb-1"
+                            htmlFor="mandatory"
+                          >
+                            Property <span className="text-rose-500">*</span>
+                          </label>
                           <input
                             id={`${item.key}:label`}
                             className="form-input w-full"
                             type="text"
                             required
-                            onChange={(e) => changeUpdatedValues(e.target.value, 'label', item.key)}
+                            onChange={(e) =>
+                              changeUpdatedValues(
+                                e.target.value,
+                                'label',
+                                item.key
+                              )
+                            }
                             value={item.label}
                             disabled
                           />
                         </div>
                         <div>
-                          <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
+                          <label
+                            className="block text-sm font-medium mb-1"
+                            htmlFor="mandatory"
+                          >
+                            Value <span className="text-rose-500">*</span>
+                          </label>
                           <input
-                            autoComplete='off'
+                            autoComplete="off"
                             id={`${item.key}:value`}
                             className="form-input w-full"
                             type="text"
                             required
-                            onChange={(e) => changeUpdatedValues(e.target.value, 'value', item.key)}
+                            onChange={(e) =>
-                            value={item.status===statusMap.blockchained?blockChainValue : item.value}
+                              changeUpdatedValues(
+                                e.target.value,
+                                'value',
+                                item.key
+                              )
+                            }
+                            value={
+                              item.status === statusMap.blockchained
+                                ? blockChainValue
+                                : item.value
+                            }
                           />
                         </div>
                         <div>
-                          <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
+                          <label
+                            className="block text-sm font-medium mb-1"
+                            htmlFor="mandatory"
+                          >
+                            Seed <span className="text-rose-500">*</span>
+                          </label>
                           <input
-                            autoComplete='off'
+                            autoComplete="off"
                             id={`${item.key}:seed`}
                             className="form-input w-full"
                             type="text"
                             required
-                            onChange={(e) => changeUpdatedValues(e.target.value, 'seed', item.key)}
+                            onChange={(e) =>
+                              changeUpdatedValues(
+                                e.target.value,
+                                'seed',
+                                item.key
+                              )
+                            }
                             value={item.seed}
                           />
                         </div>
-                        {(updatedValues[index+1]) ? (
+                        {updatedValues[index + 1] ? (
-                        <div className="mt-2 mb-3.5 items-center border-b border-slate-200"></div>
+                          <div className="mt-2 mb-3.5 items-center border-b border-slate-200"></div>
                         ) : null}
                       </div>
                     ))}
                     <div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
-                      <span className="block text-sm font-medium">Store data on blockchain</span>
+                      <span className="block text-sm font-medium">
+                        Store data on blockchain
+                      </span>
                       <div className="flex items-center">
                         <div className="form-switch">
-                          <input type="checkbox" id="blockcheined" className="sr-only" checked={storeOnBlockchain} onChange={() => setStoreOnBlockchain(!storeOnBlockchain)} />
+                          <input
-                            <label className="bg-slate-400" htmlFor="switch-1">
+                            type="checkbox"
-                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                            id="blockcheined"
+                            className="sr-only"
+                            checked={storeOnBlockchain}
+                            onChange={() =>
+                              setStoreOnBlockchain(!storeOnBlockchain)
+                            }
+                          />
+                          <label className="bg-slate-400" htmlFor="switch-1">
+                            <span
+                              className="bg-white shadow-sm"
+                              aria-hidden="true"
+                            ></span>
                           </label>
                         </div>
                       </div>
@@ -442,20 +599,46 @@ const Profile = observer (() => {
                     </div>
                   </div>
                   {/* Remove panel */}
-                  <div className={`${!removePanelOpen && 'hidden'} bg-white px-5 pt-4 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}>
+                  <div
-                    <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2">Summary</h2>
+                    className={`${
+                      !removePanelOpen && 'hidden'
+                    } bg-white px-5 pt-4 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}
+                  >
+                    <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2">
+                      Summary
+                    </h2>
                     <div className="flex flex-col">
-                      {store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key)).map(item => (
+                      {store.decryptedAccountData
-                        <span key={item.label} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.label}</span>
+                        .filter(({ key }) => selectedItems.includes(key))
-                      ))}
+                        .map((item) => (
+                          <span
+                            key={item.label}
+                            className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200"
+                          >
+                            {item.label}
+                          </span>
+                        ))}
                     </div>
                     <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="form-switch">
-                          <input type="checkbox" id="switch-1" className="sr-only" checked={storeOnBlockchain} onChange={() => setStoreOnBlockchain(!storeOnBlockchain)} />
+                          <input
-                            <label className="bg-slate-400" htmlFor="switch-1">
+                            type="checkbox"
-                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                            id="switch-1"
+                            className="sr-only"
+                            checked={storeOnBlockchain}
+                            onChange={() =>
+                              setStoreOnBlockchain(!storeOnBlockchain)
+                            }
+                          />
+                          <label className="bg-slate-400" htmlFor="switch-1">
+                            <span
+                              className="bg-white shadow-sm"
+                              aria-hidden="true"
+                            ></span>
                           </label>
                         </div>
                       </div>
@@ -464,24 +647,39 @@ const Profile = observer (() => {
                       <button
                         className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
                         onClick={applyDataDeletion}
+                      >
+                        <svg
+                          className="w-4 h-4 fill-current shrink-0"
+                          viewBox="0 0 16 16"
                         >
-                        <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                           <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
                         </svg>
                         <span className="ml-2">Apply</span>
                       </button>
                     </div>
                     <div className="flex justify-center">
-                      <span className="text-descriptionSize text-slate-500 font-normal italic text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Terms.</span>
+                      <span className="text-descriptionSize text-slate-500 font-normal italic text-center">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do Terms.
+                      </span>
                     </div>
                   </div>
                   {/* Share panel */}
-                  <div className={`${!sharePanelOpen && 'hidden'} bg-white px-5 pt-4 shadow-lg rounded-sm border border-slate-200 mb-12 lg:w-72 xl:w-80`}>
+                  <div
-                    <div className='relative z-20'>
+                    className={`${
-                      <div className='z-10'>
+                      !sharePanelOpen && 'hidden'
-                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Public Key <span className="text-rose-500">*</span></label>
+                    } bg-white px-5 pt-4 shadow-lg rounded-sm border border-slate-200 mb-12 lg:w-72 xl:w-80`}
+                  >
+                    <div className="relative z-20">
+                      <div className="z-10">
+                        <label
+                          className="block text-sm font-medium mb-1"
+                          htmlFor="mandatory"
+                        >
+                          Public Key <span className="text-rose-500">*</span>
+                        </label>
                         <input
-                          autoComplete='off'
+                          autoComplete="off"
                           id="seed"
                           className="form-input w-full"
                           type="text"
@@ -508,24 +706,49 @@ const Profile = observer (() => {
                     </div>
                   </div>
                   {/* Details */}
-                  <div className={`${(!(removePanelOpen || addPanelOpen) || !storeOnBlockchain) && 'hidden'} drop-shadow-lg`}>
+                  <div
+                    className={`${
+                      (!(removePanelOpen || addPanelOpen) ||
+                        !storeOnBlockchain) &&
+                      'hidden'
+                    } drop-shadow-lg`}
+                  >
                     {/* Top */}
                     <div className="bg-white rounded-t-xl px-5 pb-4 text-center">
                       <div className="mb-3 text-center">
-                        <img className="inline-flex w-12 h-12 rounded-full -mt-6" src={Image} width="48" height="48" alt="Transaction 04" />
+                        <img
+                          className="inline-flex w-12 h-12 rounded-full -mt-6"
+                          src={Image}
+                          width="48"
+                          height="48"
+                          alt="Transaction 04"
+                        />
+                      </div>
+                      <div className="mt-[31px] text-2xl font-semibold text-emerald-500 mb-1">
+                        0.012 IDN
+                      </div>
+                      <div className="text-sm font-medium text-slate-800 mb-3">
+                        Total amount fee
                       </div>
-                      <div className="mt-[31px] text-2xl font-semibold text-emerald-500 mb-1">0.012 IDN</div>
-                      <div className="text-sm font-medium text-slate-800 mb-3">Total amount fee</div>
                     </div>
                     {/* Divider */}
-                    <div className="flex justify-between items-center" aria-hidden="true">
+                    <div
-                      <svg className="w-5 h-5 fill-white" xmlns="http://www.w3.org/2000/svg">
+                      className="flex justify-between items-center"
+                      aria-hidden="true"
+                    >
+                      <svg
+                        className="w-5 h-5 fill-white"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
                         <path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
                       </svg>
                       <div className="grow w-full h-5 bg-white flex flex-col justify-center">
                         <div className="h-px w-full border-t border-dashed border-slate-200" />
                       </div>
-                      <svg className="w-5 h-5 fill-white rotate-180" xmlns="http://www.w3.org/2000/svg">
+                      <svg
+                        className="w-5 h-5 fill-white rotate-180"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
                         <path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
                       </svg>
                     </div>
@@ -533,15 +756,21 @@ const Profile = observer (() => {
                     <div className="bg-white rounded-b-xl p-5 pt-[22px] pb-10 text-sm space-y-3">
                       <div className="flex justify-between space-x-1">
                         <span className="italic">Validator:</span>
-                        <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 className="flex justify-between space-x-1">
                         <span className="italic">Recipient:</span>
-                        <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 className="flex justify-between space-x-1">
                         <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>
@@ -552,8 +781,11 @@ const Profile = observer (() => {
                     <button
                       className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
                       onClick={openRemovePanel}
+                    >
+                      <svg
+                        className="w-4 h-4 fill-current shrink-0"
+                        viewBox="0 0 16 16"
                       >
-                      <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                         <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
                       </svg>
                       <span className="ml-2">Remove</span>
@@ -561,8 +793,11 @@ const Profile = observer (() => {
                     <button
                       className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start"
                       onClick={openUpdatePanel}
+                    >
+                      <svg
+                        className="w-4 h-4 fill-rose-500 shrink-0"
+                        viewBox="0 0 16 16"
                       >
-                      <svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
                         <path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
                       </svg>
                       <span className="ml-2">Update</span>
@@ -570,8 +805,11 @@ const Profile = observer (() => {
                     <button
                       className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start"
                       onClick={openSharePanel}
+                    >
+                      <svg
+                        className="w-4 h-4 fill-rose-500 shrink-0"
+                        viewBox="0 0 16 16"
                       >
-                      <svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
                         <path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
                       </svg>
                       <span className="ml-2">Share</span>
@@ -584,7 +822,7 @@ const Profile = observer (() => {
         </main>
       </div>
     </div>
-  )
+  );
-})
+});
 
-export default Profile
+export default Profile;

src/pages/digitalId/Validate.jsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import {observer} from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
-import ValidateTable from "../../partials/validate/ValidateTable";
+import ValidateTable from '../../partials/validate/ValidateTable';
-import ValidatePanel from "../../partials/validate/ValidatePanel";
+import ValidatePanel from '../../partials/validate/ValidatePanel';
-import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
+import ValidateRoadMap from '../../partials/validationLog/ValidateRoadMap';
-import {Link} from "react-router-dom";
+import { Link } from 'react-router-dom';
-import {store} from "../../store/store";
+import { store } from '../../store/store';
 
 const Validate = observer(() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -23,12 +23,19 @@ const Validate = observer(() => {
         <main className="relative">
           <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
             <div className="w-fit">
-            {/* Page header */}
+              {/* Page header */}
               <div className="pb-2.5">
                 {/* Title */}
-                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">0x28394710234192304719234</h1>
+                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">
+                  0x28394710234192304719234
+                </h1>
               </div>
-              <Link className="font-normal text-sm text-indigo-500 hover:text-indigo-600" to="/digitalId/validate">Explore -&gt;</Link>
+              <Link
+                className="font-normal text-sm text-indigo-500 hover:text-indigo-600"
+                to="/digitalId/validate"
+              >
+                Explore -&gt;
+              </Link>
               <div className="mb-5 mt-5">
                 <ul className="flex flex-wrap -m-1">
                   <li className="m-1">
@@ -53,20 +60,25 @@ const Validate = observer(() => {
                   </li>
                 </ul>
               </div>
-              <ValidateTable setValidatePanelOpen={setValidatePanelOpen}/>
+              <ValidateTable setValidatePanelOpen={setValidatePanelOpen} />
               <div className="pb-8 border-b border-zinc-200 mt-[50px]">
-                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID validation log ✨</h1>
+                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">
+                  Digital ID validation log ✨
+                </h1>
               </div>
-              {store.transactionsInfo.map(item => {
+              {store.transactionsInfo.map((item) => {
-                return <ValidateRoadMap season={item} key={item.id}/>
+                return <ValidateRoadMap season={item} key={item.id} />;
               })}
             </div>
           </div>
-          <ValidatePanel validatePanelOpen={validatePanelOpen} setValidatePanelOpen={setValidatePanelOpen}/>
+          <ValidatePanel
+            validatePanelOpen={validatePanelOpen}
+            setValidatePanelOpen={setValidatePanelOpen}
+          />
         </main>
       </div>
     </div>
-  )
+  );
-})
+});
 
 export default Validate;

src/pages/digitalId/ValidationLog.jsx

@@ -1,42 +1,44 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
-import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
+import ValidateRoadMap from '../../partials/validationLog/ValidateRoadMap';
-import {observer} from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
-import {store} from "../../store/store";
+import { store } from '../../store/store';
 
 const ValidationLog = observer(() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
-      <div className="flex h-screen overflow-hidden">
+    <div className="flex h-screen overflow-hidden">
-        {/* Sidebar */}
+      {/* Sidebar */}
-        <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
+      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-        {/* Content area */}
+      {/* Content area */}
-        <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>
-            <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">
-              {/* 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">Digital ID transaction log ✨</h1>
+              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">
-              </div>
+                Digital ID transaction log ✨
-              {/*Psosts*/}
+              </h1>
-              <div className="max-w-3xl m-auto mt-6">
+            </div>
-                <div className="xl:-translate-x-16 max-w-fit">
+            {/*Psosts*/}
-                  {/* PostsID */}
+            <div className="max-w-3xl m-auto mt-6">
-                  {store.transactionsInfo.map(item => {
+              <div className="xl:-translate-x-16 max-w-fit">
-                    return <ValidateRoadMap season={item} key={item.id}/>
+                {/* PostsID */}
-                  })}
+                {store.transactionsInfo.map((item) => {
-                </div>
+                  return <ValidateRoadMap season={item} key={item.id} />;
+                })}
               </div>
             </div>
-          </main>
+          </div>
-        </div>
+        </main>
       </div>
-  )
+    </div>
-})
+  );
+});
 
 export default ValidationLog;

src/pages/digitalId/Verify.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
-import {store} from "../../store/store";
+import { store } from '../../store/store';
 import { observer } from 'mobx-react-lite';
 
 const Verify = observer(() => {
@@ -9,8 +9,8 @@ const Verify = observer(() => {
   const [descriptionOpen, setDescriptionOpen] = useState(false);
 
   const openShareLink = (id) => {
-    window.open(`${window.location.origin}/#/shared-data/${id}`, '_blank')
+    window.open(`${window.location.origin}/#/shared-data/${id}`, '_blank');
-  }
+  };
 
   return (
     <div className="flex h-screen overflow-hidden">
@@ -24,48 +24,62 @@ const Verify = observer(() => {
           <div className="px-4 sm:px-6 lg:px-8 py-11 w-full max-w-9xl mx-auto">
             {/* Page header */}
             <div className="mb-11">
-               <div>
+              <div>
-                  <ul className="flex flex-wrap -m-1">
+                <ul className="flex flex-wrap -m-1">
-                    <li className="m-1">
+                  <li className="m-1">
-                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
+                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
-                        View All
+                      View All
-                      </button>
+                    </button>
-                    </li>
+                  </li>
-                    <li className="m-1">
+                  <li className="m-1">
-                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
+                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
-                        Validated
+                      Validated
-                      </button>
+                    </button>
-                    </li>
+                  </li>
-                    <li className="m-1">
+                  <li className="m-1">
-                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
+                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
-                        Blockchained
+                      Blockchained
-                      </button>
+                    </button>
-                    </li>
+                  </li>
-                  </ul>
+                </ul>
-                </div>
+              </div>
             </div>
             {/* Block */}
             <div className="flex flex-col gap-y-4">
               {store.sharedData.map((item, index) => (
-                <div key={index} className="w-[1095px] pl-5 pr-[13px] pb-8 bg-white border border-slate-200 rounded shadow-[0_4px_6px_-1px_rgba(5,23,42,0.08)]">
+                <div
+                  key={index}
+                  className="w-[1095px] pl-5 pr-[13px] pb-8 bg-white border border-slate-200 rounded shadow-[0_4px_6px_-1px_rgba(5,23,42,0.08)]"
+                >
                   {/* Header */}
                   <div className="flex justify-end items-center h-[42px]">
                     {/* Buttons */}
                     <div className="flex gap-x-[6px]">
                       <div className="flex items-center">
-                        <button className="text-slate-400 hover:text-slate-500 rounded-full" onClick={() => openShareLink(item.id)}>
+                        <button
+                          className="text-slate-400 hover:text-slate-500 rounded-full"
+                          onClick={() => openShareLink(item.id)}
+                        >
                           <span className="sr-only">Link</span>
-                          <svg className="w-4 h-4 fill-current shrink-0 text-slate-400" viewBox="0 0 16 16">
+                          <svg
+                            className="w-4 h-4 fill-current shrink-0 text-slate-400"
+                            viewBox="0 0 16 16"
+                          >
                             <path d="M11 0c1.3 0 2.6.5 3.5 1.5 1 .9 1.5 2.2 1.5 3.5 0 1.3-.5 2.6-1.4 3.5l-1.2 1.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.1-1.2c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.2C12 1.7 10 1.7 8.9 2.8L7.7 4c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l1.2-1.1C8.4.5 9.7 0 11 0ZM8.3 12c.4-.4 1-.5 1.4-.1.4.4.4 1 0 1.4l-1.2 1.2C7.6 15.5 6.3 16 5 16c-1.3 0-2.6-.5-3.5-1.5C.5 13.6 0 12.3 0 11c0-1.3.5-2.6 1.5-3.5l1.1-1.2c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L2.9 8.9c-.6.5-.9 1.3-.9 2.1s.3 1.6.9 2.2c1.1 1.1 3.1 1.1 4.2 0L8.3 12Zm1.1-6.8c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l4.2-4.2Z" />
                           </svg>
                         </button>
                       </div>
                       <div className="flex items-center">
                         <button
-                          className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
+                          className={`text-slate-400 hover:text-slate-500 transform ${
+                            descriptionOpen && 'rotate-180'
+                          }`}
                           aria-expanded={descriptionOpen}
                         >
-                          <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
+                          <svg
+                            className="w-8 h-8 fill-current"
+                            viewBox="0 0 32 32"
+                          >
                             <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
                           </svg>
                         </button>
@@ -73,13 +87,17 @@ const Verify = observer(() => {
                     </div>
                   </div>
                   {/* Content */}
-                  <div className='flex flex-col gap-y-[9px]'>
+                  <div className="flex flex-col gap-y-[9px]">
                     {item.data.map((elem, index) => (
-                      <div key={index} className='flex gap-y-2'>
+                      <div key={index} className="flex gap-y-2">
-                        <div className='flex flex-col'>
+                        <div className="flex flex-col">
-                          <div className='flex flex-row items-center'>
+                          <div className="flex flex-row items-center">
-                            <span className='font-inter font-semibold text-slate-800 text-base w-[204px]'>{elem.label}</span>
+                            <span className="font-inter font-semibold text-slate-800 text-base w-[204px]">
-                            <span className='font-inter truncate font-semibold text-descriptionSize text-slate-600 underline w-[770px]'>{elem.value}</span>
+                              {elem.label}
+                            </span>
+                            <span className="font-inter truncate font-semibold text-descriptionSize text-slate-600 underline w-[770px]">
+                              {elem.value}
+                            </span>
                           </div>
                         </div>
                       </div>
@@ -92,7 +110,7 @@ const Verify = observer(() => {
         </main>
       </div>
     </div>
-  )
+  );
-})
+});
 
 export default Verify;

src/pages/services/Delegates.jsx

@@ -1,29 +1,29 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 
-import Sidebar from "../../partials/Sidebar";
+import Sidebar from '../../partials/Sidebar';
-import Header from "../../partials/Header";
+import Header from '../../partials/Header';
-import DropdownTransaction from "../../components/DropdownTransaction";
+import DropdownTransaction from '../../components/DropdownTransaction';
-import TransactionsTable from "../../partials/finance/TransactionsTable";
+import TransactionsTable from '../../partials/finance/TransactionsTable';
-import PaginationClassic from "../../components/PaginationClassic";
+import PaginationClassic from '../../components/PaginationClassic';
-import { observer } from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
-import TransactionPanel from "../../partials/finance/TransactionPanel";
+import TransactionPanel from '../../partials/finance/TransactionPanel';
-import { Filters } from "../../components/Filters";
+import { Filters } from '../../components/Filters';
 
 const filters = {
-  "View All": "",
+  'View All': '',
-  Voted: "Unvote",
+  Voted: 'Unvote',
-  Pending: "Pending",
+  Pending: 'Pending',
 };
 
 const Delegates = observer(() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [currentDelegate, setCurrentDelegate] = useState(null);
-  const [currentFilter, setCurrentFilter] = useState("View All");
+  const [currentFilter, setCurrentFilter] = useState('View All');
 
-  const [lockedFor, setLockedFor] = useState("Voiting");
+  const [lockedFor, setLockedFor] = useState('Voiting');
 
   const lockedLabel = Object.values(
-    lockedFor === "Voiting" ? store.processedVotes : store.accountLockedVotes
+    lockedFor === 'Voiting' ? store.processedVotes : store.accountLockedVotes
   )
     .reduce((sum, e) => sum + e, 0n)
     .toString();

src/pages/services/VPNPrepare.jsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
-import Sidebar from "../../partials/Sidebar";
+import Sidebar from '../../partials/Sidebar';
-import Header from "../../partials/Header";
+import Header from '../../partials/Header';
-import VPNServiceImg from "../../images/vpn_service.png";
+import VPNServiceImg from '../../images/vpn_service.png';
-import { observer } from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
 
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
 
 const VPNPrepare = observer(() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -18,12 +18,12 @@ const VPNPrepare = observer(() => {
   const canVote = store.accountBalance > 20;
 
   const clickButton = () => {
-    if (canVote) navigate("/services/delegates");
+    if (canVote) navigate('/services/delegates');
-    else window.open("https://testnet.idntty.org/faucet", "_blank");
+    else window.open('https://testnet.idntty.org/faucet', '_blank');
   };
 
   useEffect(() => {
-    if (store.canVPN) navigate("/services/vpn/servers");
+    if (store.canVPN) navigate('/services/vpn/servers');
   }, [store.canVPN]);
 
   return (
@@ -62,17 +62,17 @@ const VPNPrepare = observer(() => {
               />
               <h2 className="text-xl md:text-2xl text-slate-800 font-bold text-center">
                 {canVote
-                  ? "Vote for VPN delegate to get service"
+                  ? 'Vote for VPN delegate to get service'
-                  : "You cannot get the VPN service, sorry 😢"}
+                  : 'You cannot get the VPN service, sorry 😢'}
               </h2>
               <p className="text-gray-600 text-center">
                 {canVote ? (
-                  "The tokens used for voting are locked, which means that they still belong to you but they cannot be used for transactions. The funds are locked for as long as you are voting using these tokens and you are able to unlock them any time you want, by removing them from the votes."
+                  'The tokens used for voting are locked, which means that they still belong to you but they cannot be used for transactions. The funds are locked for as long as you are voting using these tokens and you are able to unlock them any time you want, by removing them from the votes.'
                 ) : (
                   <>
-                    Only users who can vote for a VPN delegate using{" "}
+                    Only users who can vote for a VPN delegate using{' '}
                     <b>at least 19.9 tokens</b> can use this service.
-                    Unfortunately, your account currently has{" "}
+                    Unfortunately, your account currently has{' '}
                     <b>only {store.accountBalance} tokens</b>, which is not
                     enough to vote.
                   </>
@@ -89,7 +89,7 @@ const VPNPrepare = observer(() => {
                   <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
                 </svg>
                 <span className="hidden xs:block mx-6">
-                  {canVote ? "Vote" : "Get It"}
+                  {canVote ? 'Vote' : 'Get It'}
                 </span>
               </button>
             </div>

src/pages/services/VPNServers.jsx

@@ -1,22 +1,22 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from 'react';
 
-import Sidebar from "../../partials/Sidebar";
+import Sidebar from '../../partials/Sidebar';
-import Header from "../../partials/Header";
+import Header from '../../partials/Header';
-import { QRCodeSVG } from "qrcode.react";
+import { QRCodeSVG } from 'qrcode.react';
 
-import VPNServeIcon from "../../images/vpn_server_icon.png";
+import VPNServeIcon from '../../images/vpn_server_icon.png';
-import { Filters } from "../../components/Filters";
+import { Filters } from '../../components/Filters';
 
 const filters = {
-  "View All": "",
+  'View All': '',
-  Active: "Active",
+  Active: 'Active',
-  Offline: "Offline",
+  Offline: 'Offline',
 };
 
 function VPNServers() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [selectedServer, setSelectedServer] = useState(0);
-  const [currentFilter, setCurrentFilter] = useState("View All");
+  const [currentFilter, setCurrentFilter] = useState('View All');
 
   const qrContent = useMemo(
     () => `
@@ -34,10 +34,10 @@ Endpoint = ${store.vpnServers?.[selectedServer]?.endpoint}
   );
 
   const downloadTxtFile = () => {
-    const element = document.createElement("a");
+    const element = document.createElement('a');
-    const file = new Blob([qrContent], { type: "text/plain" });
+    const file = new Blob([qrContent], { type: 'text/plain' });
     element.href = URL.createObjectURL(file);
-    element.download = "vpnConfig.conf";
+    element.download = 'vpnConfig.conf';
     document.body.appendChild(element); // Required for this to work in FireFox
     element.click();
   };
@@ -183,7 +183,7 @@ Endpoint = ${store.vpnServers?.[selectedServer]?.endpoint}
                           <div className="flex justify-between text-sm mb-2">
                             <div>Spent This Month</div>
                             <div className="italic">
-                              4673,00 Mb{" "}
+                              4673,00 Mb{' '}
                               <span className="text-slate-400">/</span> 46730,00
                               Mb
                             </div>
@@ -192,7 +192,7 @@ Endpoint = ${store.vpnServers?.[selectedServer]?.endpoint}
                             <div
                               className="absolute inset-0 bg-indigo-500"
                               aria-hidden="true"
-                              style={{ width: "10%" }}
+                              style={{ width: '10%' }}
                             />
                           </div>
                         </div>

src/partials/Header.jsx

@@ -2,21 +2,15 @@ import React, { useState } from 'react';
 
 import UserMenu from '../components/DropdownProfile';
 
-function Header({
+function Header({ sidebarOpen, setSidebarOpen }) {
-  sidebarOpen,
+  const [searchModalOpen, setSearchModalOpen] = useState(false);
-  setSidebarOpen
-}) {
-
-  const [searchModalOpen, setSearchModalOpen] = useState(false)
 
   return (
     <header className="sticky top-0 bg-white border-b border-slate-200 z-30">
       <div className="px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16 -mb-px">
-
           {/* Header: Left side */}
           <div className="flex">
-
             {/* Hamburger button */}
             <button
               className="text-slate-500 hover:text-slate-600 lg:hidden"
@@ -25,21 +19,22 @@ function Header({
               onClick={() => setSidebarOpen(!sidebarOpen)}
             >
               <span className="sr-only">Open sidebar</span>
-              <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <svg
+                className="w-6 h-6 fill-current"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
                 <rect x="4" y="5" width="16" height="2" />
                 <rect x="4" y="11" width="16" height="2" />
                 <rect x="4" y="17" width="16" height="2" />
               </svg>
             </button>
-
           </div>
 
           {/* Header: Right side */}
           <div className="flex items-center space-x-3">
             <UserMenu align="right" />
-
           </div>
-
         </div>
       </div>
     </header>

src/partials/Sidebar.jsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from 'react';
-import { NavLink, useLocation } from "react-router-dom";
+import { NavLink, useLocation } from 'react-router-dom';
-import Logo from "../images/logo.png";
+import Logo from '../images/logo.png';
 
-import SidebarLinkGroup from "./SidebarLinkGroup";
+import SidebarLinkGroup from './SidebarLinkGroup';
 
 function Sidebar({ sidebarOpen, setSidebarOpen }) {
   const location = useLocation();
@@ -10,9 +10,9 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
 
   const trigger = useRef(null);
   const sidebar = useRef(null);
-  const storedSidebarExpanded = localStorage.getItem("sidebar-expanded");
+  const storedSidebarExpanded = localStorage.getItem('sidebar-expanded');
   const [sidebarExpanded, setSidebarExpanded] = useState(
-    storedSidebarExpanded === null ? false : storedSidebarExpanded === "true"
+    storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true'
   );
 
   // close on click outside
@@ -27,8 +27,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
         return;
       setSidebarOpen(false);
     };
-    document.addEventListener("click", clickHandler);
+    document.addEventListener('click', clickHandler);
-    return () => document.removeEventListener("click", clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
   });
 
   // close if the esc key is pressed
@@ -37,16 +37,16 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
       if (!sidebarOpen || keyCode !== 27) return;
       setSidebarOpen(false);
     };
-    document.addEventListener("keydown", keyHandler);
+    document.addEventListener('keydown', keyHandler);
-    return () => document.removeEventListener("keydown", keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
   });
 
   useEffect(() => {
-    localStorage.setItem("sidebar-expanded", sidebarExpanded);
+    localStorage.setItem('sidebar-expanded', sidebarExpanded);
     if (sidebarExpanded) {
-      document.querySelector("body").classList.add("sidebar-expanded");
+      document.querySelector('body').classList.add('sidebar-expanded');
     } else {
-      document.querySelector("body").classList.remove("sidebar-expanded");
+      document.querySelector('body').classList.remove('sidebar-expanded');
     }
   }, [sidebarExpanded]);
 
@@ -55,7 +55,7 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
       {/* Sidebar backdrop (mobile only) */}
       <div
         className={`fixed inset-0 bg-slate-900 bg-opacity-30 z-40 lg:hidden lg:z-auto transition-opacity duration-200 ${
-          sidebarOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+          sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
         }`}
         aria-hidden="true"
       ></div>
@@ -65,7 +65,7 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
         id="sidebar"
         ref={sidebar}
         className={`flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 transform h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-slate-800 p-4 transition-all duration-200 ease-in-out ${
-          sidebarOpen ? "translate-x-0" : "-translate-x-64"
+          sidebarOpen ? 'translate-x-0' : '-translate-x-64'
         }`}
       >
         {/* Sidebar header */}
@@ -111,15 +111,15 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
             <ul className="mt-3">
               {/* digitalId */}
               <SidebarLinkGroup
-                activecondition={pathname.includes("digitalId")}
+                activecondition={pathname.includes('digitalId')}
               >
                 {(handleClick, open) => {
                   return (
                     <React.Fragment>
                       <a
                         className={`block text-slate-200 hover:text-white truncate transition duration-150 ${
-                          pathname.includes("digitalId") &&
+                          pathname.includes('digitalId') &&
-                          "hover:text-slate-200"
+                          'hover:text-slate-200'
                         }`}
                         onClick={(e) => {
                           e.preventDefault();
@@ -136,29 +136,29 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                             >
                               <path
                                 className={`fill-current text-slate-600 ${
-                                  pathname.includes("digitalId") &&
+                                  pathname.includes('digitalId') &&
-                                  "text-indigo-500"
+                                  'text-indigo-500'
                                 }`}
                                 d="M19.714 14.7l-7.007 7.007-1.414-1.414 7.007-7.007c-.195-.4-.298-.84-.3-1.286a3 3 0 113 3 2.969 2.969 0 01-1.286-.3z"
                               />
                               <path
                                 className={`fill-current text-slate-400 ${
-                                  pathname.includes("digitalId") &&
+                                  pathname.includes('digitalId') &&
-                                  "text-indigo-300"
+                                  'text-indigo-300'
                                 }`}
                                 d="M10.714 18.3c.4-.195.84-.298 1.286-.3a3 3 0 11-3 3c.002-.446.105-.885.3-1.286l-6.007-6.007 1.414-1.414 6.007 6.007z"
                               />
                               <path
                                 className={`fill-current text-slate-600 ${
-                                  pathname.includes("digitalId") &&
+                                  pathname.includes('digitalId') &&
-                                  "text-indigo-500"
+                                  'text-indigo-500'
                                 }`}
                                 d="M5.7 10.714c.195.4.298.84.3 1.286a3 3 0 11-3-3c.446.002.885.105 1.286.3l7.007-7.007 1.414 1.414L5.7 10.714z"
                               />
                               <path
                                 className={`fill-current text-slate-400 ${
-                                  pathname.includes("digitalId") &&
+                                  pathname.includes('digitalId') &&
-                                  "text-indigo-300"
+                                  'text-indigo-300'
                                 }`}
                                 d="M19.707 9.292a3.012 3.012 0 00-1.415 1.415L13.286 5.7c-.4.195-.84.298-1.286.3a3 3 0 113-3 2.969 2.969 0 01-.3 1.286l5.007 5.006z"
                               />
@@ -171,7 +171,7 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                           <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"
+                                open && 'transform rotate-180'
                               }`}
                               viewBox="0 0 12 12"
                             >
@@ -181,14 +181,14 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                         </div>
                       </a>
                       <div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
-                        <ul className={`pl-9 mt-1 ${!open && "hidden"}`}>
+                        <ul className={`pl-9 mt-1 ${!open && 'hidden'}`}>
                           <li className="mb-1 last:mb-0">
                             <NavLink
                               end
                               to="/digitalId/profile-id"
                               className={({ isActive }) =>
-                                "block text-slate-400 hover:text-slate-200 transition duration-150 truncate " +
+                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' +
-                                (isActive ? "!text-indigo-500" : "")
+                                (isActive ? '!text-indigo-500' : '')
                               }
                             >
                               <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
@@ -214,8 +214,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                               end
                               to="/digitalId/validation-log"
                               className={({ isActive }) =>
-                                "block text-slate-400 hover:text-slate-200 transition duration-150 truncate " +
+                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' +
-                                (isActive ? "!text-indigo-500" : "")
+                                (isActive ? '!text-indigo-500' : '')
                               }
                             >
                               <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
@@ -228,8 +228,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                               end
                               to="/digitalId/verify"
                               className={({ isActive }) =>
-                                "block text-slate-400 hover:text-slate-200 transition duration-150 truncate " +
+                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' +
-                                (isActive ? "!text-indigo-500" : "")
+                                (isActive ? '!text-indigo-500' : '')
                               }
                             >
                               <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
@@ -243,14 +243,14 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                   );
                 }}
               </SidebarLinkGroup>
-              <SidebarLinkGroup activecondition={pathname.includes("services")}>
+              <SidebarLinkGroup activecondition={pathname.includes('services')}>
                 {(handleClick, open) => {
                   return (
                     <React.Fragment>
                       <a
                         className={`block text-slate-200 hover:text-white truncate transition duration-150 ${
-                          pathname.includes("services") &&
+                          pathname.includes('services') &&
-                          "hover:text-slate-200"
+                          'hover:text-slate-200'
                         }`}
                         onClick={(e) => {
                           e.preventDefault();
@@ -267,8 +267,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                             >
                               <circle
                                 className={`fill-current text-slate-400 ${
-                                  pathname.includes("services") &&
+                                  pathname.includes('services') &&
-                                  "text-indigo-300"
+                                  'text-indigo-300'
                                 }`}
                                 cx="18.5"
                                 cy="5.5"
@@ -276,8 +276,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                               />
                               <circle
                                 className={`fill-current text-slate-600 ${
-                                  pathname.includes("services") &&
+                                  pathname.includes('services') &&
-                                  "text-indigo-500"
+                                  'text-indigo-500'
                                 }`}
                                 cx="5.5"
                                 cy="5.5"
@@ -285,8 +285,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                               />
                               <circle
                                 className={`fill-current text-slate-600 ${
-                                  pathname.includes("services") &&
+                                  pathname.includes('services') &&
-                                  "text-indigo-500"
+                                  'text-indigo-500'
                                 }`}
                                 cx="18.5"
                                 cy="18.5"
@@ -294,8 +294,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                               />
                               <circle
                                 className={`fill-current text-slate-400 ${
-                                  pathname.includes("services") &&
+                                  pathname.includes('services') &&
-                                  "text-indigo-300"
+                                  'text-indigo-300'
                                 }`}
                                 cx="5.5"
                                 cy="18.5"
@@ -310,7 +310,7 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                           <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"
+                                open && 'transform rotate-180'
                               }`}
                               viewBox="0 0 12 12"
                             >
@@ -320,14 +320,14 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                         </div>
                       </a>
                       <div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
-                        <ul className={`pl-9 mt-1 ${!open && "hidden"}`}>
+                        <ul className={`pl-9 mt-1 ${!open && 'hidden'}`}>
                           <li className="mb-1 last:mb-0">
                             <NavLink
                               end
                               to="/services/delegates"
                               className={({ isActive }) =>
-                                "block text-slate-400 hover:text-slate-200 transition duration-150 truncate " +
+                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' +
-                                (isActive ? "!text-indigo-500" : "")
+                                (isActive ? '!text-indigo-500' : '')
                               }
                             >
                               <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
@@ -340,8 +340,8 @@ function Sidebar({ sidebarOpen, setSidebarOpen }) {
                               end
                               to="/services/vpn"
                               className={({ isActive }) =>
-                                "block text-slate-400 hover:text-slate-200 transition duration-150 truncate " +
+                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' +
-                                (isActive ? "!text-indigo-500" : "")
+                                (isActive ? '!text-indigo-500' : '')
                               }
                             >
                               <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">

src/partials/SidebarLinkGroup.jsx

@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
 
-function SidebarLinkGroup({
+function SidebarLinkGroup({ children, activecondition }) {
-  children,
-  activecondition,
-}) {
-
   const [open, setOpen] = useState(activecondition);
 
   const handleClick = () => {
     setOpen(!open);
-  }
+  };
 
   return (
-    <li className={`px-3 py-2 rounded-sm mb-0.5 last:mb-0 ${activecondition && 'bg-slate-900'}`}>
+    <li
+      className={`px-3 py-2 rounded-sm mb-0.5 last:mb-0 ${
+        activecondition && 'bg-slate-900'
+      }`}
+    >
       {children(handleClick, open)}
     </li>
   );

src/partials/finance/TransactionPanel.jsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from 'react';
 
-import Image from "../../images/transactions-image-04.svg";
+import Image from '../../images/transactions-image-04.svg';
-import moment from "moment";
+import moment from 'moment';
-import { formatAddressBig } from "../../utils/Utils";
+import { formatAddressBig } from '../../utils/Utils';
-import { generateSvgAvatar } from "../../images/GenerateOnboardingSvg/GenerateSvg";
+import { generateSvgAvatar } from '../../images/GenerateOnboardingSvg/GenerateSvg';
-import { store } from "../../store/store";
+import { store } from '../../store/store';
-import UserAvatar from "../../images/user-avatar-32.png";
+import UserAvatar from '../../images/user-avatar-32.png';
-import { observer } from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
 
 const TransactionPanel = observer(
   ({ transactionPanelOpen, onClose, delegate, postTransaction }) => {
@@ -17,17 +17,17 @@ const TransactionPanel = observer(
 
     const statusColor = () => {
       switch (delegate.status) {
-        case "Vote":
+        case 'Vote':
-          return "bg-emerald-100 text-emerald-600";
+          return 'bg-emerald-100 text-emerald-600';
-        case "Unvote":
+        case 'Unvote':
-          return "bg-rose-100 text-rose-500";
+          return 'bg-rose-100 text-rose-500';
         default:
-          return "bg-slate-100 text-slate-500";
+          return 'bg-slate-100 text-slate-500';
       }
     };
 
     const amountLabel =
-      delegate.status === "Vote" ? "Voiting amount" : "Unvoiting amount";
+      delegate.status === 'Vote' ? 'Voiting amount' : 'Unvoiting amount';
 
     // close if the esc key is pressed
     useEffect(() => {
@@ -35,14 +35,14 @@ const TransactionPanel = observer(
         if (!transactionPanelOpen || keyCode !== 27) return;
         onClose();
       };
-      document.addEventListener("keydown", keyHandler);
+      document.addEventListener('keydown', keyHandler);
-      return () => document.removeEventListener("keydown", keyHandler);
+      return () => document.removeEventListener('keydown', keyHandler);
     });
 
     useEffect(() => {
       const status = delegate.status;
 
-      if (status === "Unvote") {
+      if (status === 'Unvote') {
         setAmount(store.accountSentVotes[delegate.address].toString());
       }
     }, [delegate]);
@@ -51,7 +51,7 @@ const TransactionPanel = observer(
       <div
         ref={panelContent}
         className={`absolute inset-0 sm:left-auto z-20 transform shadow-xl transition-transform duration-200 ease-in-out ${
-          transactionPanelOpen ? "translate-x-" : "translate-x-full"
+          transactionPanelOpen ? 'translate-x-' : 'translate-x-full'
         }`}
       >
         <div className="sticky top-16 bg-slate-50 overflow-x-hidden overflow-y-auto no-scrollbar shrink-0 border-l border-slate-200 w-full sm:w-[390px] h-[calc(100vh-64px)]">
@@ -74,7 +74,7 @@ const TransactionPanel = observer(
                 Vote Transaction
               </div>
               <div className="text-sm text-center italic">
-                {moment().format("DD/MM/YYYY hh:mm A")}
+                {moment().format('DD/MM/YYYY hh:mm A')}
               </div>
               {/* Details */}
               <div className="drop-shadow-lg mt-12">
@@ -96,11 +96,11 @@ const TransactionPanel = observer(
                   </div>
                   <div className="text-sm font-medium text-slate-800 mb-3">
                     {delegate?.dpos?.delegate?.username ||
-                      formatAddressBig(delegate.address || "")}
+                      formatAddressBig(delegate.address || '')}
                   </div>
                   <div
                     className={`text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1 ${statusColor()} justify-center`}
-                    style={{ minWidth: "84px" }}
+                    style={{ minWidth: '84px' }}
                   >
                     {delegate.status}
                   </div>
@@ -131,7 +131,7 @@ const TransactionPanel = observer(
                   <div className="flex justify-between space-x-1">
                     <span className="italic">ADDRESS:</span>
                     <span className="font-medium text-slate-700 text-right">
-                      {formatAddressBig(delegate.address || "")}
+                      {formatAddressBig(delegate.address || '')}
                     </span>
                   </div>
                   <div className="flex justify-between space-x-1">

src/partials/finance/TransactionsTable.jsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React from 'react';
-import TransactionItem from "./TransactionsTableItem";
+import TransactionItem from './TransactionsTableItem';
 
-import Image01 from "../../images/transactions-image-01.svg";
+import Image01 from '../../images/transactions-image-01.svg';
-import { observer } from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
 
 const TransactionsTable = observer(({ data, rowClick }) => {
   return (

src/partials/finance/TransactionsTableItem.jsx

@@ -1,26 +1,26 @@
-import React from "react";
+import React from 'react';
 
-import ServiceImage from "../../images/service_icon.png";
+import ServiceImage from '../../images/service_icon.png';
-import { observer } from "mobx-react-lite";
+import { observer } from 'mobx-react-lite';
 
 const TransactionsTableItem = observer((props) => {
   const statusColor = () => {
     switch (props.status) {
-      case "Vote":
+      case 'Vote':
-        return "bg-emerald-100 text-emerald-600";
+        return 'bg-emerald-100 text-emerald-600';
-      case "Unvote":
+      case 'Unvote':
-        return "bg-rose-100 text-rose-500";
+        return 'bg-rose-100 text-rose-500';
       default:
-        return "bg-slate-100 text-slate-500";
+        return 'bg-slate-100 text-slate-500';
     }
   };
 
   const amountColor = () => {
-    switch (props.status === "Unvote") {
+    switch (props.status === 'Unvote') {
-      case "+":
+      case '+':
-        return "text-emerald-500";
+        return 'text-emerald-500';
       default:
-        return "text-slate-700";
+        return 'text-slate-700';
     }
   };
 
@@ -78,7 +78,7 @@ const TransactionsTableItem = observer((props) => {
         <div className="text-center">
           <div
             className={`text-xs inline-flex font-medium rounded-full justify-center px-2.5 py-1 ${statusColor()}`}
-            style={{ minWidth: "84px" }}
+            style={{ minWidth: '84px' }}
           >
             {props.status}
           </div>

src/partials/profile/ProfileTable.jsx

@@ -1,37 +1,72 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import ProfileTableItem from './ProfileTableItem';
 import ProfileIcon from '../../images/profile-icon.svg';
 
-function  ProfileTable({
+function ProfileTable({ userData, handleClick, isCheck }) {
-  userData,
-  handleClick,
-  isCheck,
-}) {
-
   const defaultData = {
     image: ProfileIcon,
     status: 'Stored',
     transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-    avatars: null
+    avatars: null,
   };
 
   const data = {
-    general:["First name","Second name", "Gender", "Birthdate", "Place of birth"],
+    general: [
-    nationality:["Nationality", "National ID", "National doctype", "National doc ID", "National doc issue date", "National doc expiry date"],
+      'First name',
-    social:["Telephone", "Twitter", "Facebook", "Instagram", "Youtube", "Wechat", "Tiktok", "Linkedin", "Vk", "Github", "Telegram", "Qq", "Snapchat", "Reddit"]
+      'Second name',
-  }
+      'Gender',
+      'Birthdate',
+      'Place of birth',
+    ],
+    nationality: [
+      'Nationality',
+      'National ID',
+      'National doctype',
+      'National doc ID',
+      'National doc issue date',
+      'National doc expiry date',
+    ],
+    social: [
+      'Telephone',
+      'Twitter',
+      'Facebook',
+      'Instagram',
+      'Youtube',
+      'Wechat',
+      'Tiktok',
+      'Linkedin',
+      'Vk',
+      'Github',
+      'Telegram',
+      'Qq',
+      'Snapchat',
+      'Reddit',
+    ],
+  };
 
-  const generalData = userData.filter(elem => data.general.includes(elem.label));
+  const generalData = userData.filter((elem) =>
-  const nationalityData = userData.filter(elem => data.nationality.includes(elem.label));
+    data.general.includes(elem.label)
-  const socialData = userData.filter(elem => data.social.includes(elem.label));
+  );
-  const otherData = userData.filter((elem) =>
+  const nationalityData = userData.filter((elem) =>
-          !data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label));
+    data.nationality.includes(elem.label)
+  );
+  const socialData = userData.filter((elem) =>
+    data.social.includes(elem.label)
+  );
+  const otherData = userData.filter(
+    (elem) =>
+      !data.general.includes(elem.label) &&
+      !data.nationality.includes(elem.label) &&
+      !data.social.includes(elem.label)
+  );
 
   return (
     <>
-    {/* General */}
+      {/* General */}
       <div className={`${generalData.length > 0 || 'hidden'}`}>
-        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">General 🖋️</h2>
+        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">
+          General 🖋️
+        </h2>
         <div className="overflow-x-auto">
           <table className="table-auto w-full">
             <tbody className="divide-slate-200 divide-y">
@@ -41,7 +76,9 @@ function  ProfileTable({
                     key={data.label}
                     id={data.key}
                     image={defaultData.image}
-                    value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
+                    value={
+                      data.value.charAt(0).toUpperCase() + data.value.slice(1)
+                    }
                     property={data.label}
                     status={data.status}
                     transactions={defaultData.transactions}
@@ -49,7 +86,7 @@ function  ProfileTable({
                     handleClick={handleClick}
                     isChecked={isCheck.includes(data.key)}
                   />
-                )
+                );
               })}
             </tbody>
           </table>
@@ -57,17 +94,21 @@ function  ProfileTable({
       </div>
       {/* Nationality */}
       <div className={`${nationalityData.length > 0 || 'hidden'}`}>
-        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Nationality 🖋️</h2>
+        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">
+          Nationality 🖋️
+        </h2>
         <div className="overflow-x-auto">
           <table className="table-auto w-full">
             <tbody className="text-sm divide-slate-200 divide-y ">
-              {nationalityData.map(data => {
+              {nationalityData.map((data) => {
                 return (
                   <ProfileTableItem
                     key={data.label}
                     id={data.key}
                     image={defaultData.image}
-                    value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
+                    value={
+                      data.value.charAt(0).toUpperCase() + data.value.slice(1)
+                    }
                     property={data.label}
                     status={data.status}
                     transactions={defaultData.transactions}
@@ -75,7 +116,7 @@ function  ProfileTable({
                     handleClick={handleClick}
                     isChecked={isCheck.includes(data.key)}
                   />
-                )
+                );
               })}
             </tbody>
           </table>
@@ -83,58 +124,64 @@ function  ProfileTable({
       </div>
       {/* Social */}
       <div className={`${socialData.length > 0 || 'hidden'}`}>
-        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Social 🖋️</h2>
+        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">
+          Social 🖋️
+        </h2>
         <div className="overflow-x-auto">
           <table className="table-auto w-full">
             <tbody className="text-sm divide-slate-200 divide-y ">
-            {socialData.map(data => {
+              {socialData.map((data) => {
-              return (
+                return (
-                <ProfileTableItem
+                  <ProfileTableItem
-                  key={data.label}
+                    key={data.label}
-                  id={data.key}
+                    id={data.key}
-                  image={defaultData.image}
+                    image={defaultData.image}
-                  value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
+                    value={
-                  property={data.label}
+                      data.value.charAt(0).toUpperCase() + data.value.slice(1)
-                  status={data.status}
+                    }
-                  transactions={defaultData.transactions}
+                    property={data.label}
-                  avatars={defaultData.avatars}
+                    status={data.status}
-                  handleClick={handleClick}
+                    transactions={defaultData.transactions}
-                  isChecked={isCheck.includes(data.key)}
+                    avatars={defaultData.avatars}
-                />
+                    handleClick={handleClick}
-              )
+                    isChecked={isCheck.includes(data.key)}
-            })}
+                  />
+                );
+              })}
             </tbody>
           </table>
         </div>
       </div>
       {/* Other */}
       <div className={`${otherData.length > 0 || 'hidden'}`}>
-        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Other 🖋️</h2>
+        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">
+          Other 🖋️
+        </h2>
         <div className="overflow-x-auto">
           <table className="table-auto w-full">
             <tbody className="text-sm divide-slate-200 divide-y ">
-            {otherData.map(data => {
+              {otherData.map((data) => {
-              return (
+                return (
-                <ProfileTableItem
+                  <ProfileTableItem
-                  key={data.key}
+                    key={data.key}
-                  id={data.key}
+                    id={data.key}
-                  image={defaultData.image}
+                    image={defaultData.image}
-                  value={data.value}
+                    value={data.value}
-                  property={data.label}
+                    property={data.label}
-                  status={data.status}
+                    status={data.status}
-                  transactions={defaultData.transactions}
+                    transactions={defaultData.transactions}
-                  avatars={defaultData.avatars}
+                    avatars={defaultData.avatars}
-                  handleClick={handleClick}
+                    handleClick={handleClick}
-                  isChecked={isCheck.includes(data.key)}
+                    isChecked={isCheck.includes(data.key)}
-                />
+                  />
-              )
+                );
-            })}
+              })}
             </tbody>
           </table>
         </div>
       </div>
     </>
-  )
+  );
 }
 
 export default ProfileTable;

src/partials/profile/ProfileTableItem.jsx

@@ -24,12 +24,21 @@ function ProfileTableItem(props) {
         <td className="py-3 whitespace-nowrap">
           <div className="flex">
             <div className="w-9 h-9 shrink-0 mr-2 sm:mr-4">
-              <img className="rounded-full" src={props.image} width="40" height="40" alt={props.property} />
+              <img
+                className="rounded-full"
+                src={props.image}
+                width="40"
+                height="40"
+                alt={props.property}
+              />
             </div>
             <div className="flex flex-col w-60">
               <div className="font-semibold text-slate-800 text-base">
-                {props.status === statusMap.blockchained || props.status === statusMap.processed
+                {props.status === statusMap.blockchained ||
-                  ? `${props.value.slice(0, 4)}****${props.value.slice(props.value.length - 4)}`
+                props.status === statusMap.processed
+                  ? `${props.value.slice(0, 4)}****${props.value.slice(
+                      props.value.length - 4
+                    )}`
                   : props.value}
               </div>
               <div className="font-normal text-xxs">{props.property}</div>
@@ -39,15 +48,25 @@ function ProfileTableItem(props) {
         <td className="py-3 whitespace-nowrap w-px px-2.5 text-left min-w-[117px]">
           <div className="w-fit text-xs inline-flex font-medium py-1">
             {props.status === statusMap.blockchained ? (
-              <div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+              <div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
+                {props.status}
+              </div>
             ) : props.status === statusMap.processed ? (
-              <div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+              <div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
+                {props.status}
+              </div>
             ) : props.status === statusMap.stored ? (
-              <div className="bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">{props.status}</div>
+              <div className="bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">
+                {props.status}
+              </div>
             ) : props.status === statusMap.completed ? (
-              <div className="bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+              <div className="bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
+                {props.status}
+              </div>
             ) : (
-              <div className="bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+              <div className="bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">
+                {props.status}
+              </div>
             )}
           </div>
         </td>
@@ -56,15 +75,15 @@ function ProfileTableItem(props) {
             <div className="flex -space-x-3 -ml-0.5">
               {props.avatars
                 ? props.avatars.map((avatar, index) => (
-                  <img
+                    <img
-                    className="rounded-full border-2 border-slate-100 box-content"
+                      className="rounded-full border-2 border-slate-100 box-content"
-                    key={index}
+                      key={index}
-                    src={avatar}
+                      src={avatar}
-                    width="32"
+                      width="32"
-                    height="32"
+                      height="32"
-                    alt="Avatar"
+                      alt="Avatar"
-                  />
+                    />
-                ))
+                  ))
                 : null}
               <button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border-2 border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150">
                 <span className="sr-only">Add avatar</span>
@@ -80,7 +99,10 @@ function ProfileTableItem(props) {
           <div className="flex items-center">
             <button className="text-slate-400 hover:text-slate-500 rounded-full">
               <span className="sr-only">Link</span>
-              <svg className="w-4 h-4 fill-current shrink-0 text-slate-400" viewBox="0 0 16 16">
+              <svg
+                className="w-4 h-4 fill-current shrink-0 text-slate-400"
+                viewBox="0 0 16 16"
+              >
                 <path d="M11 0c1.3 0 2.6.5 3.5 1.5 1 .9 1.5 2.2 1.5 3.5 0 1.3-.5 2.6-1.4 3.5l-1.2 1.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.1-1.2c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.2C12 1.7 10 1.7 8.9 2.8L7.7 4c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l1.2-1.1C8.4.5 9.7 0 11 0ZM8.3 12c.4-.4 1-.5 1.4-.1.4.4.4 1 0 1.4l-1.2 1.2C7.6 15.5 6.3 16 5 16c-1.3 0-2.6-.5-3.5-1.5C.5 13.6 0 12.3 0 11c0-1.3.5-2.6 1.5-3.5l1.1-1.2c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L2.9 8.9c-.6.5-.9 1.3-.9 2.1s.3 1.6.9 2.2c1.1 1.1 3.1 1.1 4.2 0L8.3 12Zm1.1-6.8c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l4.2-4.2Z" />
               </svg>
             </button>
@@ -89,7 +111,9 @@ function ProfileTableItem(props) {
         <td className="py-3 whitespace-nowrap w-px pr-1.5">
           <div className="flex items-center">
             <button
-              className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
+              className={`text-slate-400 hover:text-slate-500 transform ${
+                descriptionOpen && 'rotate-180'
+              }`}
               aria-expanded={descriptionOpen}
               onClick={() => setDescriptionOpen(!descriptionOpen)}
               aria-controls={`description-${props.id}`}
@@ -106,7 +130,10 @@ function ProfileTableItem(props) {
         <td colSpan="10" className="px-12 pt-3.5 pb-[14px]">
           <div className="flex items-center gap-x-5">
             <div>
-              <label className="block text-sm font-medium mb-1" htmlFor="placeholder">
+              <label
+                className="block text-sm font-medium mb-1"
+                htmlFor="placeholder"
+              >
                 Seed
               </label>
               <input
@@ -117,8 +144,13 @@ function ProfileTableItem(props) {
               />
             </div>
             <div>
-              <span className="block text-sm font-medium mb-1">Transaction</span>
+              <span className="block text-sm font-medium mb-1">
-              <a href="" className="w-[396px] text-slate-400 font-normal text-sm underline">
+                Transaction
+              </span>
+              <a
+                href=""
+                className="w-[396px] text-slate-400 font-normal text-sm underline"
+              >
                 0x12831823791203192418234841238468
               </a>
             </div>
@@ -127,7 +159,9 @@ function ProfileTableItem(props) {
           <div className="pt-[18px]">
             <div className="h-full max-w-md w-full flex flex-row">
               <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>
               </div>
               <div>
                 <ul className="-my-2">
@@ -141,32 +175,56 @@ function ProfileTableItem(props) {
                             aria-hidden="true"
                           ></div>
                         ) : null}
-                        <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
+                        <div
-                          <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
+                          className="absolute left-0 rounded-full bg-indigo-500"
+                          aria-hidden="true"
+                        >
+                          <svg
+                            className="w-5 h-5 fill-current text-white"
+                            viewBox="0 0 20 20"
+                          >
                             <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
                           </svg>
                         </div>
                         <h3 className="pl-9 whitespace-nowrap">
-                          <span className="text-validateSize font-bold text-slate-800">Validate by </span>
+                          <span className="text-validateSize font-bold text-slate-800">
-                          <a href="" className="font-bold text-validateSize underline text-indigo-500">
+                            Validate by{' '}
+                          </span>
+                          <a
+                            href=""
+                            className="font-bold text-validateSize underline text-indigo-500"
+                          >
                             {data}
                           </a>
                         </h3>
                       </div>
                       <div className="pl-9">
-                        <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">
+                        <a
+                          href=""
+                          className="w-[396px] text-slate-800 font-semibold text-base underline"
+                        >
                           {data}
                         </a>
-                        <span className="block text-xxs font-normal mb-1">Transactions ID</span>
+                        <span className="block text-xxs font-normal mb-1">
+                          Transactions ID
+                        </span>
                       </div>
                       <div className="pl-9">
-                        <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">
+                        <a
+                          href=""
+                          className="w-[396px] text-slate-800 font-semibold text-base underline"
+                        >
                           {data.slice(2, data.length)}
                         </a>
-                        <span className="block text-xxs font-normal mb-1">Validated data</span>
+                        <span className="block text-xxs font-normal mb-1">
+                          Validated data
+                        </span>
                       </div>
                       <div className="pl-9 pt-[14px]">
-                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                        <a
+                          className="text-sm font-medium text-indigo-500 hover:text-indigo-600"
+                          href="#0"
+                        >
                           Explore -&gt;
                         </a>
                       </div>

src/partials/sharedData/SharedDataRoadmap.jsx

@@ -1,44 +1,63 @@
-import React from "react";
+import React from 'react';
 
-import ValidationUsersImg from "../validationLog/ValidationUsersImg";
+import ValidationUsersImg from '../validationLog/ValidationUsersImg';
 
 function SharedDataRoadMap({ data }) {
-
   return (
-      <article className="mb-2">
+    <article className="mb-2">
-        <div className="xl:flex">
+      <div className="xl:flex">
-          <div className="grow">
+        <div className="grow">
-            <div className="flex items-center mb-2 relative">
+          <div className="flex items-center mb-2 relative">
-              <div className="absolute left-0" aria-hidden="true">
+            <div className="absolute left-0" aria-hidden="true">
-                <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg
-                  <path d="M4 7H0V11.9C0 12.9 0.7 13.8 1.7 14C2.9 14.2 4 13.2 4 12V7Z" fill="#A5B4FC"/>
+                width="16"
-                  <path d="M15.0004 0H7.00039C6.40039 0 6.00039 0.4 6.00039 1V12C6.00039 12.7 5.80039 13.4 5.40039 14H13.0004C14.7004 14 16.0004 12.7 16.0004 11V1C16.0004 0.4 15.6004 0 15.0004 0Z" fill="#6366F1"/>
+                height="15"
-                </svg>
+                viewBox="0 0 16 15"
-              </div>
+                fill="none"
-              <div className="flex flex-col max-w-3xl">
+                xmlns="http://www.w3.org/2000/svg"
-                <h3 className="text-base font-semibold text-slate-800 pl-7 overflow-ellipsis overflow-hidden">
+              >
-                  {data.value}
+                <path
-                </h3>
+                  d="M4 7H0V11.9C0 12.9 0.7 13.8 1.7 14C2.9 14.2 4 13.2 4 12V7Z"
-                <span className="font-normal text-[10px] text-slate-600 pl-7">{data.label}</span>
+                  fill="#A5B4FC"
-              </div>
+                />
+                <path
+                  d="M15.0004 0H7.00039C6.40039 0 6.00039 0.4 6.00039 1V12C6.00039 12.7 5.80039 13.4 5.40039 14H13.0004C14.7004 14 16.0004 12.7 16.0004 11V1C16.0004 0.4 15.6004 0 15.0004 0Z"
+                  fill="#6366F1"
+                />
+              </svg>
+            </div>
+            <div className="flex flex-col max-w-3xl">
+              <h3 className="text-base font-semibold text-slate-800 pl-7 overflow-ellipsis overflow-hidden">
+                {data.value}
+              </h3>
+              <span className="font-normal text-[10px] text-slate-600 pl-7">
+                {data.label}
+              </span>
             </div>
-            {data.seed && (
-              <div className="block text-slate-600 w-fit pl-7">
-                <div className="text-xs font-semibold underline mb-[-10px] cursor-pointer">{data.seed.toUpperCase()}</div>
-                <span className="font-normal text-[10px]">seed</span>
-              </div>
-            )}
-            {data.hash && (
-              <div className="mb-3.5 block text-slate-600 w-fit pl-7">
-                <div className="text-xs font-semibold underline mb-[-10px] cursor-pointer">{data.hash.toUpperCase()}</div>
-                <span className="font-normal text-[10px]">hash</span>
-              </div>
-            )}
-            <a className="cursor-pointer pl-7 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>
           </div>
+          {data.seed && (
+            <div className="block text-slate-600 w-fit pl-7">
+              <div className="text-xs font-semibold underline mb-[-10px] cursor-pointer">
+                {data.seed.toUpperCase()}
+              </div>
+              <span className="font-normal text-[10px]">seed</span>
+            </div>
+          )}
+          {data.hash && (
+            <div className="mb-3.5 block text-slate-600 w-fit pl-7">
+              <div className="text-xs font-semibold underline mb-[-10px] cursor-pointer">
+                {data.hash.toUpperCase()}
+              </div>
+              <span className="font-normal text-[10px]">hash</span>
+            </div>
+          )}
+          <a className="cursor-pointer pl-7 font-normal text-sm text-indigo-500 hover:text-indigo-600">
+            Explore -&gt;
+          </a>
         </div>
-      </article>
+      </div>
-  )
+    </article>
+  );
 }
 
-export default  SharedDataRoadMap;
+export default SharedDataRoadMap;

src/partials/validate/ValidateItem.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 function ValidateTableItem(props) {
-
   const statusColor = (status) => {
     switch (status) {
       case 'Correct':
@@ -13,49 +12,67 @@ function ValidateTableItem(props) {
     }
   };
 
-  function openValidatePanel (event) {
+  function openValidatePanel(event) {
-    event.stopPropagation()
+    event.stopPropagation();
-    props.setValidatePanelOpen(true)
+    props.setValidatePanelOpen(true);
   }
 
   return (
-      <tr className="hover:bg-[#eaf0f6] cursor-pointer" onClick={(e) => openValidatePanel(e)}>
+    <tr
-        <td className="px-2 first:pl-4 last:pr-5 py-3 whitespace-nowrap w-px">
+      className="hover:bg-[#eaf0f6] cursor-pointer"
-          <div className="flex items-center">
+      onClick={(e) => openValidatePanel(e)}
-            <label className="inline-flex">
+    >
-              <span className="sr-only">Select</span>
+      <td className="px-2 first:pl-4 last:pr-5 py-3 whitespace-nowrap w-px">
-              {props.check && <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked}  onClick={(e) => e.stopPropagation()} />}
+        <div className="flex items-center">
-            </label>
+          <label className="inline-flex">
+            <span className="sr-only">Select</span>
+            {props.check && (
+              <input
+                id={props.id}
+                className="form-checkbox"
+                type="checkbox"
+                onChange={props.handleClick}
+                checked={props.isChecked}
+                onClick={(e) => e.stopPropagation()}
+              />
+            )}
+          </label>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap md:w-1/2">
+        <div className="flex items-center">
+          <div>{props.filed}</div>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="text-left font-medium text-slate-800">{props.data}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <div className={`text-left`}>{props.seed}</div>
+      </td>
+      <td className="px-2 first:pl-5 py-3 whitespace-nowrap">
+        <div className="text-left">
+          <div
+            className={`text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1 ${statusColor(
+              props.status
+            )}`}
+          >
+            {props.status}
           </div>
-        </td>
+        </div>
-        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap md:w-1/2">
+      </td>
-          <div className="flex items-center">
+      <td className="px-2 first:pl-5 last:pr-5 pt-3 pb-2 whitespace-nowrap w-px">
-            <div>{props.filed}</div>
+        {/* Menu button */}
-          </div>
+        <button className="text-slate-400 hover:text-slate-500 rounded-full">
-        </td>
+          <span className="sr-only">Menu</span>
-        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
-          <div className="text-left font-medium text-slate-800">{props.data}</div>
+            <circle cx="16" cy="16" r="2" />
-        </td>
+            <circle cx="10" cy="16" r="2" />
-        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+            <circle cx="22" cy="16" r="2" />
-          <div className={`text-left`}>{props.seed}</div>
+          </svg>
-        </td>
+        </button>
-        <td className="px-2 first:pl-5 py-3 whitespace-nowrap">
+      </td>
-          <div className="text-left">
+    </tr>
-            <div className={`text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1 ${statusColor(props.status)}`}>{props.status}</div>
-          </div>
-        </td>
-        <td className="px-2 first:pl-5 last:pr-5 pt-3 pb-2 whitespace-nowrap w-px">
-          {/* Menu button */}
-          <button className="text-slate-400 hover:text-slate-500 rounded-full">
-            <span className="sr-only">Menu</span>
-            <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
-              <circle cx="16" cy="16" r="2" />
-              <circle cx="10" cy="16" r="2" />
-              <circle cx="22" cy="16" r="2" />
-            </svg>
-          </button>
-        </td>
-      </tr>
   );
 }
 

src/partials/validate/ValidatePanel.jsx

@@ -2,109 +2,167 @@ import React from 'react';
 
 import Image from '../../images/transactions-image-04.svg';
 
-function TransactionPanel({
+function TransactionPanel({ validatePanelOpen, setValidatePanelOpen }) {
-  validatePanelOpen,
-  setValidatePanelOpen
-}) {
-
   return (
-      <div
+    <div
-          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="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
+      <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">
-              onClick={() => setValidatePanelOpen(false)}
+        <button
-              className="absolute top-0 right-0 mt-6 mr-6 group p-2"
+          onClick={() => setValidatePanelOpen(false)}
+          className="absolute top-0 right-0 mt-6 mr-6 group p-2"
+        >
+          <svg
+            className="w-4 h-4 fill-slate-400 group-hover:fill-slate-600 pointer-events-none"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg className="w-4 h-4 fill-slate-400 group-hover:fill-slate-600 pointer-events-none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <path d="m7.95 6.536 4.242-4.243a1 1 0 1 1 1.415 1.414L9.364 7.95l4.243 4.242a1 1 0 1 1-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 0 1-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 0 1 1.414-1.414L7.95 6.536Z" />
-              <path d="m7.95 6.536 4.242-4.243a1 1 0 1 1 1.415 1.414L9.364 7.95l4.243 4.242a1 1 0 1 1-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 0 1-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 0 1 1.414-1.414L7.95 6.536Z" />
+          </svg>
-            </svg>
+        </button>
-          </button>
+        <div className="py-8 px-4 lg:px-8">
-          <div className="py-8 px-4 lg:px-8">
+          <div className="max-w-sm mx-auto lg:max-w-none">
-            <div className="max-w-sm mx-auto lg:max-w-none">
+            <div className="text-slate-800 font-semibold text-center mb-1">
-              <div className="text-slate-800 font-semibold text-center mb-1">Bank Transfer</div>
+              Bank Transfer
-              <div className="text-sm text-center italic">22/01/2022, 8:56 PM</div>
+            </div>
-              {/* Details */}
+            <div className="text-sm text-center italic">
-              <div className="drop-shadow-lg mt-12">
+              22/01/2022, 8:56 PM
-                {/* Top */}
+            </div>
-                <div className="bg-white rounded-t-xl px-5 pb-2.5 text-center">
+            {/* Details */}
-                  <div className="mb-3 text-center">
+            <div className="drop-shadow-lg mt-12">
-                    <img className="inline-flex w-12 h-12 rounded-full -mt-6" src={Image} width="48" height="48" alt="Transaction 04" />
+              {/* Top */}
-                  </div>
+              <div className="bg-white rounded-t-xl px-5 pb-2.5 text-center">
-                  <div className="mt-5 text-2xl font-semibold text-emerald-500 mb-1">0.012 IDN</div>
+                <div className="mb-3 text-center">
-                  <div className="text-sm font-medium text-slate-800 mb-3">Total amount fee</div>
+                  <img
+                    className="inline-flex w-12 h-12 rounded-full -mt-6"
+                    src={Image}
+                    width="48"
+                    height="48"
+                    alt="Transaction 04"
+                  />
                 </div>
-                {/* Divider */}
+                <div className="mt-5 text-2xl font-semibold text-emerald-500 mb-1">
-                <div className="flex justify-between items-center" aria-hidden="true">
+                  0.012 IDN
-                  <svg className="w-5 h-5 fill-white" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
-                  </svg>
-                  <div className="grow w-full h-5 bg-white flex flex-col justify-center">
-                    <div className="h-px w-full border-t border-dashed border-slate-200" />
-                  </div>
-                  <svg className="w-5 h-5 fill-white rotate-180" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
-                  </svg>
                 </div>
-                {/* Bottom */}
+                <div className="text-sm font-medium text-slate-800 mb-3">
-                <div className="bg-white rounded-b-xl p-5 pt-8 pb-10 text-sm space-y-3">
+                  Total amount fee
-                  <div className="flex justify-between space-x-1">
-                    <span className="italic">Validator:</span>
-                    <span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
-                  </div>
-                  <div className="flex justify-between space-x-1">
-                    <span className="italic">Recipient:</span>
-                    <span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
-                  </div>
-                  <div className="flex justify-between space-x-1">
-                    <span className="italic">Transaction:</span>
-                    <span className="font-medium text-slate-700 text-right">145 bytes</span>
-                  </div>
                 </div>
               </div>
-              {/* Receipts */}
+              {/* Divider */}
-              <div className="mt-6">
+              <div
-                <div className="text-sm font-medium text-slate-800 mb-2">Private Data</div>
+                className="flex justify-between items-center"
-                <form className="rounded bg-slate-50 border border-dashed border-slate-300 text-center px-5 py-8">
+                aria-hidden="true"
-                  <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="w-5 h-5 fill-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
+                </svg>
+                <div className="grow w-full h-5 bg-white flex flex-col justify-center">
+                  <div className="h-px w-full border-t border-dashed border-slate-200" />
+                </div>
+                <svg
+                  className="w-5 h-5 fill-white rotate-180"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
+                </svg>
+              </div>
+              {/* Bottom */}
+              <div className="bg-white rounded-b-xl p-5 pt-8 pb-10 text-sm space-y-3">
+                <div className="flex justify-between space-x-1">
+                  <span className="italic">Validator:</span>
+                  <span className="font-medium text-slate-700 text-right">
+                    IT17 2207 1010 0504 0006 88
+                  </span>
+                </div>
+                <div className="flex justify-between space-x-1">
+                  <span className="italic">Recipient:</span>
+                  <span className="font-medium text-slate-700 text-right">
+                    IT17 2207 1010 0504 0006 88
+                  </span>
+                </div>
+                <div className="flex justify-between space-x-1">
+                  <span className="italic">Transaction:</span>
+                  <span className="font-medium text-slate-700 text-right">
+                    145 bytes
+                  </span>
+                </div>
+              </div>
+            </div>
+            {/* Receipts */}
+            <div className="mt-6">
+              <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>
+                <label
+                  htmlFor="upload"
+                  className="block text-sm text-slate-400 italic"
+                >
+                  Upload exported JSON data
+                </label>
+                <input className="sr-only" id="upload" type="file" />
+              </form>
+            </div>
+            {/* Notes */}
+            <div className="mt-6">
+              <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="resize-none form-textarea w-full focus:border-slate-300"
+                  rows="4"
+                  placeholder="Write a note…"
+                  defaultValue={''}
+                />
+              </form>
+            </div>
+            {/* Download / Report */}
+            <div className="flex items-center space-x-3 mt-[84px]">
+              <div className="w-1/2">
+                <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"
+                  >
                     <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>
-                  <label htmlFor="upload" className="block text-sm text-slate-400 italic">Upload exported JSON data</label>
+                  <span className="ml-2 text-sm font-medium">Validate</span>
-                  <input className="sr-only" id="upload" type="file" />
+                </button>
-                </form>
               </div>
-              {/* Notes */}
+              <div className="w-1/2">
-              <div className="mt-6">
+                <button className="btn w-full border-slate-200 hover:border-slate-300 text-rose-500">
-                <div className="text-sm font-medium text-slate-800 mb-2">Notes</div>
+                  <svg
-                <form>
+                    className="w-4 h-4 fill-current shrink-0"
-                  <label className="sr-only" htmlFor="notes">Write a note</label>
+                    viewBox="0 0 16 16"
-                  <textarea id="notes" className="resize-none form-textarea w-full focus:border-slate-300" rows="4" placeholder="Write a note…" defaultValue={""} />
+                  >
-                </form>
+                    <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" />
-              </div>
+                  </svg>
-              {/* Download / Report */}
+                  <span className="ml-2 text-sm font-medium">Invalidate</span>
-              <div className="flex items-center space-x-3 mt-[84px]">
+                </button>
-                <div className="w-1/2">
-                  <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">
-                      <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 text-sm font-medium">Validate</span>
-                  </button>
-                </div>
-                <div className="w-1/2">
-                  <button className="btn w-full border-slate-200 hover:border-slate-300 text-rose-500">
-                    <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 text-sm font-medium">Invalidate</span>
-                  </button>
-                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+    </div>
   );
 }
 

src/partials/validate/ValidateTable.jsx

@@ -1,10 +1,7 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from 'react';
-import ValidateTableItem from "./ValidateItem";
+import ValidateTableItem from './ValidateItem';
-
-function ValidateTable({
- setValidatePanelOpen
-}) {
 
+function ValidateTable({ setValidatePanelOpen }) {
   const validateData = [
     {
       id: '10',
@@ -59,35 +56,40 @@ function ValidateTable({
 
   const handleSelectAll = () => {
     setSelectAll(!selectAll);
-    setMarked(selectedList.map(li => li.id));
+    setMarked(selectedList.map((li) => li.id));
     if (selectAll) {
       setMarked([]);
     }
   };
 
-  const handleClick = e => {
+  const handleClick = (e) => {
     const { id, checked } = e.target;
     setSelectAll(false);
     setMarked([...marked, id]);
     if (!checked) {
-      setMarked(marked.filter(item => item !== id));
+      setMarked(marked.filter((item) => item !== id));
     }
   };
 
   return (
-      <div className="w-fit">
+    <div className="w-fit">
-        <div>
+      <div>
-          {/* Table */}
+        {/* Table */}
-          <div className="overflow-x-auto">
+        <div className="overflow-x-auto">
-            <table className="table-auto w-fit">
+          <table className="table-auto w-fit">
-              {/* 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>
                 <th className="first:pl-4 last:pr-5 py-3 whitespace-nowrap w-px">
                   <div className="flex items-center">
                     <label className="inline-flex">
                       <span className="sr-only">Select all</span>
-                      <input className="form-checkbox" type="checkbox" checked={selectAll} onChange={handleSelectAll} />
+                      <input
+                        className="form-checkbox"
+                        type="checkbox"
+                        checked={selectAll}
+                        onChange={handleSelectAll}
+                      />
                     </label>
                   </div>
                 </th>
@@ -105,30 +107,30 @@ function ValidateTable({
                 </th>
                 <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap" />
               </tr>
-              </thead>
+            </thead>
-              {/* Table body */}
+            {/* Table body */}
-              <tbody className="text-sm divide-y divide-slate-200 border-b border-slate-200">
+            <tbody className="text-sm divide-y divide-slate-200 border-b border-slate-200">
               {selectedList.map((data) => {
                 return (
-                    <ValidateTableItem
+                  <ValidateTableItem
-                        key={data.id}
+                    key={data.id}
-                        id={data.id}
+                    id={data.id}
-                        filed={data.filed}
+                    filed={data.filed}
-                        data={data.data}
+                    data={data.data}
-                        status={data.status}
+                    status={data.status}
-                        seed={data.seed}
+                    seed={data.seed}
-                        check={data.check}
+                    check={data.check}
-                        handleClick={handleClick}
+                    handleClick={handleClick}
-                        isChecked={marked.includes(data.id)}
+                    isChecked={marked.includes(data.id)}
-                        setValidatePanelOpen={setValidatePanelOpen}
+                    setValidatePanelOpen={setValidatePanelOpen}
-                    />
+                  />
                 );
               })}
-              </tbody>
+            </tbody>
-            </table>
+          </table>
-          </div>
         </div>
       </div>
+    </div>
   );
 }
 

src/partials/validationLog/ValidateRoadMap.jsx

@@ -1,38 +1,50 @@
-import React from "react";
+import React from 'react';
 
-import ValidationSeasonItem from "./ValidationSeasonItem";
+import ValidationSeasonItem from './ValidationSeasonItem';
-import ValidationUsersImg from "./ValidationUsersImg";
+import ValidationUsersImg from './ValidationUsersImg';
 
 function ValidateRoadMap({ season }) {
-
   return (
-      <article className="pt-3">
+    <article className="pt-3">
-        <div className="xl:flex">
+      <div className="xl:flex">
-          <div className="w-32 shrink-0">
+        <div className="w-32 shrink-0">
-            <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{''}</h2>
+          <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">
-          </div>
+            {''}
-          <div className="grow pb-6 border-b border-slate-200">
+          </h2>
-            {season.sender_avatar &&
+        </div>
+        <div className="grow pb-6 border-b border-slate-200">
+          {season.sender_avatar && (
             <header>
               <div className="flex flex-nowrap items-center space-x-2 mb-6">
                 {/* Avatars */}
                 <div className="flex shrink-0 -space-x-3 -ml-px">
-                    <ValidationUsersImg image={season.sender_avatar} size={season.avatar_size}/>
+                  <ValidationUsersImg
+                    image={season.sender_avatar}
+                    size={season.avatar_size}
+                  />
                 </div>
                 <div className="text-slate-400">·</div>
               </div>
-            </header>}
+            </header>
-            {/* List */}
+          )}
-            <ul className="-my-2">
+          {/* List */}
-              {/* List item(s) */}
+          <ul className="-my-2">
-              {season.transaction.map((item, index) => {
+            {/* List item(s) */}
-                return <ValidationSeasonItem key={item.label} length={season.transaction.length} item={item} index={index}/>
+            {season.transaction.map((item, index) => {
-              })}
+              return (
-            </ul>
+                <ValidationSeasonItem
-          </div>
+                  key={item.label}
+                  length={season.transaction.length}
+                  item={item}
+                  index={index}
+                />
+              );
+            })}
+          </ul>
         </div>
-      </article>
+      </div>
-  )
+    </article>
+  );
 }
 
-export default  ValidateRoadMap;
+export default ValidateRoadMap;

src/partials/validationLog/ValidationSeasonItem.jsx

@@ -1,30 +1,59 @@
-import React from "react";
+import React from 'react';
 
 function ValidationSeasonItem({ length, item, index }) {
   return (
-      <li className="relative pt-2 pb-2.5">
+    <li className="relative pt-2 pb-2.5">
-        <div className="flex items-center mb-2.5">
+      <div className="flex items-center mb-2.5">
-          {length-1!==index && <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>}
+        {length - 1 !== index && (
-          <div className={`${item.address ? "bg-indigo-500" : "bg-[#FF0000]"} absolute left-0 rounded-full`} aria-hidden="true">
+          <div
-            <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
+            className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3"
-              {item.address && <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z"/>}
+            aria-hidden="true"
-            </svg>
+          ></div>
-          </div>
+        )}
-          <h3 className="text-lg font-bold text-slate-800 pl-9">
+        <div
-            {`${item.label} ${item.address ? "by" : "Updated"}`} <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{item.address}</a>
+          className={`${
-          </h3>
+            item.address ? 'bg-indigo-500' : 'bg-[#FF0000]'
+          } absolute left-0 rounded-full`}
+          aria-hidden="true"
+        >
+          <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
+            {item.address && (
+              <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
+            )}
+          </svg>
         </div>
-        <div className="block text-slate-800 w-fit pl-9">
+        <h3 className="text-lg font-bold text-slate-800 pl-9">
-          <div className="text-base font-semibold underline mb-[-10px]">{item.transaction_id}</div>
+          {`${item.label} ${item.address ? 'by' : 'Updated'}`}{' '}
-          <span className="font-normal text-slate-600 text-[10px]">Transactions ID</span>
+          <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline">
+            {item.address}
+          </a>
+        </h3>
+      </div>
+      <div className="block text-slate-800 w-fit pl-9">
+        <div className="text-base font-semibold underline mb-[-10px]">
+          {item.transaction_id}
         </div>
-        <div className="mb-3.5 block text-slate-800 w-fit pl-9">
+        <span className="font-normal text-slate-600 text-[10px]">
-          <div className="text-base font-semibold underline mb-[-10px]">{item.value}</div>
+          Transactions ID
-          <span className={`${!item.value && "hidden"} font-normal text-slate-600 text-[10px]`}>{item.address ? "Validated data" : "Updated data"}</span>
+        </span>
+      </div>
+      <div className="mb-3.5 block text-slate-800 w-fit pl-9">
+        <div className="text-base font-semibold underline mb-[-10px]">
+          {item.value}
         </div>
-        <a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>
+        <span
-      </li>
+          className={`${
+            !item.value && 'hidden'
+          } font-normal text-slate-600 text-[10px]`}
+        >
+          {item.address ? 'Validated data' : 'Updated data'}
+        </span>
+      </div>
+      <a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">
+        Explore -&gt;
+      </a>
+    </li>
   );
 }
 
-export default ValidationSeasonItem
+export default ValidationSeasonItem;

src/partials/validationLog/ValidationUsersImg.jsx

@@ -1,12 +1,17 @@
-import React from "react";
+import React from 'react';
-
-function ValidationUsersImg({ image,size }) {
 
+function ValidationUsersImg({ image, size }) {
   return (
-      <a className="block">
+    <a className="block">
-        <img className="rounded-full border-2 border-slate-100 box-content" src={image} alt={image} width={size} height={size}/>
+      <img
-      </a>
+        className="rounded-full border-2 border-slate-100 box-content"
+        src={image}
+        alt={image}
+        width={size}
+        height={size}
+      />
+    </a>
   );
 }
 
-export default ValidationUsersImg
+export default ValidationUsersImg;

src/shared/fetchWrapper.js

@@ -1,5 +1,5 @@
-import {store} from '../store/store';
+import { store } from '../store/store';
-import {jsonReplacer} from '../utils/Utils';
+import { jsonReplacer } from '../utils/Utils';
 
 function prepareUrl(url) {
   if (url.startsWith('http')) return url;
@@ -9,12 +9,11 @@ function prepareUrl(url) {
 function handleRequest(method, url, headers, attempts, token, body) {
   return new Promise((resolve, reject) => {
     (function internalRequest() {
-      if(store)
+      if (store) store.loading = true;
-        store.loading = true;
       return request(method, url, headers, token, body)
         .then(resolve)
-        .catch(err => --attempts > 0 ? internalRequest() : reject(err))
+        .catch((err) => (--attempts > 0 ? internalRequest() : reject(err)));
-    })()
+    })();
   })
     .then((res) => {
       store.loading = false;
@@ -22,10 +21,10 @@ function handleRequest(method, url, headers, attempts, token, body) {
     })
     .catch((err) => {
       store.loading = false;
-      console.log(err)
+      console.log(err);
-      return {}
+      return {};
-    })
+    });
-};
+}
 
 /**
  * Request
@@ -36,37 +35,37 @@ function handleRequest(method, url, headers, attempts, token, body) {
  * @param {object} headers - request headers
  */
 function request(method, url, headers = {}, token, body) {
-  let controller = new AbortController;
+  let controller = new AbortController();
   let requestOptions = {};
-  if (method === 'GET' || method === 'DELETE'){
+  if (method === 'GET' || method === 'DELETE') {
     requestOptions = {
       method: method,
       headers: {
         Authorization: `IDNTTY ${token}`,
-        ...headers
+        ...headers,
       },
       signal: controller.signal,
-    }
+    };
-  };
+  }
-  if (method === 'POST' || method === 'PUT'){
+  if (method === 'POST' || method === 'PUT') {
     requestOptions = {
       method: method,
       headers: {
         Authorization: `IDNTTY ${token}`,
         Accept: 'application/json',
         'Content-Type': 'application/json',
-        ...headers
+        ...headers,
       },
       body: JSON.stringify(body, jsonReplacer),
       signal: controller.signal,
-    }
+    };
-  };
+  }
   if (!token) {
     requestOptions.headers.Authorization = null;
   }
   setTimeout(() => controller.abort(), 15000);
   return fetch(prepareUrl(url), requestOptions);
-};
+}
 
 function get(url, headers, attempts = 3) {
   return handleRequest('GET', url, headers, attempts, null);
@@ -109,5 +108,5 @@ export const fetchWrapper = {
   delAuth,
   postAuth,
   putAuth,
-  baseUrl: ''
+  baseUrl: '',
 };

src/shared/labelMap.js

@@ -1,27 +1,27 @@
 export const labelMap = {
   firstname: 'First name',
   secondname: 'Second name',
-  gender: "Gender",
+  gender: 'Gender',
-  birthdate: "Birthdate",
+  birthdate: 'Birthdate',
-  placeofbirth: "Place of birth",
+  placeofbirth: 'Place of birth',
-  nationality: "Nationality",
+  nationality: 'Nationality',
-  nationalid: "National ID",
+  nationalid: 'National ID',
-  nationaldoctype: "National doctype",
+  nationaldoctype: 'National doctype',
-  nationaldocid: "National doc ID",
+  nationaldocid: 'National doc ID',
-  nationaldocissuedate: "National doc issue date",
+  nationaldocissuedate: 'National doc issue date',
-  nationaldocexpirydate: "National doc expiry date",
+  nationaldocexpirydate: 'National doc expiry date',
-  telephone: "Telephone",
+  telephone: 'Telephone',
-  twitter: "Twitter",
+  twitter: 'Twitter',
-  facebook: "Facebook",
+  facebook: 'Facebook',
-  instagram: "Instagram",
+  instagram: 'Instagram',
-  youtube: "Youtube",
+  youtube: 'Youtube',
-  wechat: "Wechat",
+  wechat: 'Wechat',
-  tiktok: "Tiktok",
+  tiktok: 'Tiktok',
-  linkedin: "Linkedin",
+  linkedin: 'Linkedin',
-  vk: "Vk",
+  vk: 'Vk',
-  github: "Github",
+  github: 'Github',
-  telegram: "Telegram",
+  telegram: 'Telegram',
-  qq: "Qq",
+  qq: 'Qq',
-  snapchat: "Snapchat",
+  snapchat: 'Snapchat',
-  reddit: "Reddit",
+  reddit: 'Reddit',
 };

src/shared/statusMap.js

@@ -1,7 +1,7 @@
-export const statusMap={
+export const statusMap = {
-  completed:'Completed',
+  completed: 'Completed',
-  incorrect:'Incorrect',
+  incorrect: 'Incorrect',
   stored: 'Stored',
   blockchained: 'Blockchained',
-  processed: 'Processed'
+  processed: 'Processed',
-}
+};

src/store/store.js

@@ -3,27 +3,27 @@ import {
   makeAutoObservable,
   onBecomeObserved,
   onBecomeUnobserved,
-} from "mobx";
+} from 'mobx';
-import { cryptography } from "@liskhq/lisk-client";
+import { cryptography } from '@liskhq/lisk-client';
-import { passphrase } from "@liskhq/lisk-client";
+import { passphrase } from '@liskhq/lisk-client';
-import { getNodeInfo } from "../api/node";
+import { getNodeInfo } from '../api/node';
-import { fetchWrapper } from "../shared/fetchWrapper";
+import { fetchWrapper } from '../shared/fetchWrapper';
-import { labelMap } from "../shared/labelMap";
+import { labelMap } from '../shared/labelMap';
-import { statusMap } from "../shared/statusMap";
+import { statusMap } from '../shared/statusMap';
-import { generateSvgAvatar } from "../images/GenerateOnboardingSvg/GenerateSvg";
+import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
-import { decryptedData } from "../utils/decryptedData";
+import { decryptedData } from '../utils/decryptedData';
 import {
   encryptAccountData,
   encryptSharedData,
   generateTransaction,
   hashAccountData,
-} from "../utils/Utils";
+} from '../utils/Utils';
-import sodium from "sodium-universal";
+import sodium from 'sodium-universal';
 
 class Store {
   _accountData = [];
 
-  _passPhrase = "";
+  _passPhrase = '';
 
   _nodeInfo = {};
 
@@ -63,18 +63,18 @@ class Store {
       () => this.address,
       () => this.fetchAccountInfo()
     );
-    onBecomeObserved(this, "decryptedAccountData", () =>
+    onBecomeObserved(this, 'decryptedAccountData', () =>
       this.fetchNewAccountData()
     );
-    onBecomeUnobserved(this, "decryptedAccountData", () =>
+    onBecomeUnobserved(this, 'decryptedAccountData', () =>
       this.unobservedAccountData()
     );
-    onBecomeObserved(this, "sharedData", () => this.fetchKeysArray());
+    onBecomeObserved(this, 'sharedData', () => this.fetchKeysArray());
-    onBecomeUnobserved(this, "sharedData", () => this.unobservedSharedData());
+    onBecomeUnobserved(this, 'sharedData', () => this.unobservedSharedData());
-    onBecomeObserved(this, "transactionsInfo", () =>
+    onBecomeObserved(this, 'transactionsInfo', () =>
       this.fetchTransactionsInfo()
     );
-    onBecomeUnobserved(this, "transactionsInfo", () =>
+    onBecomeUnobserved(this, 'transactionsInfo', () =>
       this.unobservedTransactionsInfo()
     );
 
@@ -83,7 +83,7 @@ class Store {
 
   fetchVPNServers() {
     fetchWrapper
-      .getAuth("vpn/servers")
+      .getAuth('vpn/servers')
       .then((r) => this.fetchVPNServersSuccess(r));
   }
 
@@ -98,7 +98,7 @@ class Store {
       .then((info) => {
         this.fetchNodeInfoSuccess(info);
         fetchWrapper
-          .getAuth("data/private", {
+          .getAuth('data/private', {
             networkIdentifier: this.nodeInfo.networkIdentifier,
             lastBlockID: this.nodeInfo.lastBlockID,
           })
@@ -120,7 +120,7 @@ class Store {
       .then((info) => {
         this.fetchNodeInfoSuccess(info);
         fetchWrapper
-          .getAuth("data/shared/", {
+          .getAuth('data/shared/', {
             networkIdentifier: this.nodeInfo.networkIdentifier,
             lastBlockID: this.nodeInfo.lastBlockID,
           })
@@ -141,13 +141,13 @@ class Store {
 
   fetchTempTransactions() {
     fetchWrapper
-      .get("node/transactions")
+      .get('node/transactions')
       .then((res) => this.fetchTempTransactionsSuccess(res))
       .catch((err) => this.throwError(err));
   }
 
   fetchPassPhrase() {
-    this._passPhrase = sessionStorage.getItem("passPhrase") || "";
+    this._passPhrase = sessionStorage.getItem('passPhrase') || '';
   }
 
   fetchSharedData() {
@@ -170,7 +170,7 @@ class Store {
     if (data.length > 0) {
       fetchWrapper
         .postAuth(
-          "data/shared",
+          'data/shared',
           {
             networkIdentifier: this.nodeInfo.networkIdentifier,
             lastBlockID: this.nodeInfo.lastBlockID,
@@ -187,7 +187,7 @@ class Store {
   pushAccountData(data = this.accountData) {
     fetchWrapper
       .postAuth(
-        "data/private",
+        'data/private',
         {
           networkIdentifier: this.nodeInfo.networkIdentifier,
           lastBlockID: this.nodeInfo.lastBlockID,
@@ -218,7 +218,7 @@ class Store {
     if (changed.length !== 0) signedTx = builder.update(changed);
     if (signedTx) {
       fetchWrapper
-        .post("transactions", {}, signedTx)
+        .post('transactions', {}, signedTx)
         .then(() => this.fetchTempTransactions())
         .catch((err) => this.throwError(err));
       this.accountInfo.sequence.nonce++;
@@ -237,7 +237,7 @@ class Store {
 
     if (signedTx) {
       fetchWrapper
-        .post("transactions", {}, signedTx)
+        .post('transactions', {}, signedTx)
         .then(() => this.fetchTempTransactions())
         .catch((err) => this.throwError(err));
       this.accountInfo.sequence.nonce++;
@@ -259,7 +259,7 @@ class Store {
 
     if (signedTx) {
       fetchWrapper
-        .post("transactions", {}, signedTx)
+        .post('transactions', {}, signedTx)
         .then(() => this.fetchTempTransactions())
         .catch((err) => this.throwError(err));
       this.accountInfo.sequence.nonce++;
@@ -268,12 +268,12 @@ class Store {
 
   generatePassPhrase() {
     this._passPhrase = passphrase.Mnemonic.generateMnemonic();
-    sessionStorage.setItem("passPhrase", this._passPhrase);
+    sessionStorage.setItem('passPhrase', this._passPhrase);
   }
 
   savePastPassPhrase(phrase) {
     this._passPhrase = phrase;
-    sessionStorage.setItem("passPhrase", this._passPhrase);
+    sessionStorage.setItem('passPhrase', this._passPhrase);
   }
 
   unobservedTransactionsInfo() {
@@ -395,12 +395,12 @@ class Store {
   }
 
   get firstName() {
-    return this.decryptedAccountData.find((item) => item.key === "firstname")
+    return this.decryptedAccountData.find((item) => item.key === 'firstname')
       ?.value;
   }
 
   get lastName() {
-    return this.decryptedAccountData.find((item) => item.key === "secondname")
+    return this.decryptedAccountData.find((item) => item.key === 'secondname')
       ?.value;
   }
 
@@ -441,27 +441,27 @@ class Store {
     let x25519_sk = Buffer.alloc(sodium.crypto_box_SECRETKEYBYTES);
     sodium.crypto_sign_ed25519_sk_to_curve25519(
       x25519_sk,
-      Buffer.from(this.privateKey, "hex")
+      Buffer.from(this.privateKey, 'hex')
     );
-    return x25519_sk.toString("Base64");
+    return x25519_sk.toString('Base64');
   }
 
   get pubKey() {
-    return this.addressAndPubKey.publicKey.toString("hex");
+    return this.addressAndPubKey.publicKey.toString('hex');
   }
 
   get address() {
-    return this.addressAndPubKey.address.toString("hex");
+    return this.addressAndPubKey.address.toString('hex');
   }
 
   get tokenKey() {
     const stringToSign =
       this.nodeInfo.networkIdentifier + this.nodeInfo.lastBlockID;
-    if (!stringToSign) return "";
+    if (!stringToSign) return '';
     const sign = cryptography
-      .signDataWithPassphrase(Buffer.from(stringToSign, "hex"), this.passPhrase)
+      .signDataWithPassphrase(Buffer.from(stringToSign, 'hex'), this.passPhrase)
-      .toString("hex");
+      .toString('hex');
-    return this.pubKey + ":" + sign;
+    return this.pubKey + ':' + sign;
   }
 
   get accountIdentity() {
@@ -608,13 +608,13 @@ class Store {
 
       let amount = this.processedVotes[address];
 
-      if (amount) return "Pending";
+      if (amount) return 'Pending';
 
       amount = this.accountSentVotes[address];
 
-      if (amount) return "Unvote";
+      if (amount) return 'Unvote';
 
-      return "Vote";
+      return 'Vote';
     };
 
     return this._delegates.data.map((delegate) => ({

src/tailwind.config.js

@@ -1,14 +1,12 @@
 const plugin = require('tailwindcss/plugin');
 
 module.exports = {
-  content: [
+  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
-    './index.html',
-    './src/**/*.{js,jsx,ts,tsx}',
-  ],
   theme: {
     extend: {
       boxShadow: {
-        DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.02)',
+        DEFAULT:
+          '0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.02)',
         md: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.02)',
         lg: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.01)',
         xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
@@ -26,7 +24,10 @@ module.exports = {
         sm: ['0.875rem', { lineHeight: '1.5715' }],
         base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
         lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
-        validateSize: ['1.125rem', { lineHeight: '1.875', letterSpacing: '-0.014em' }],
+        validateSize: [
+          '1.125rem',
+          { lineHeight: '1.875', letterSpacing: '-0.014em' },
+        ],
         xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
         '2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
         '3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
@@ -63,7 +64,12 @@ module.exports = {
     // add custom variant for expanding sidebar
     plugin(({ addVariant, e }) => {
       addVariant('sidebar-expanded', ({ modifySelectors, separator }) => {
-        modifySelectors(({ className }) => `.sidebar-expanded .${e(`sidebar-expanded${separator}${className}`)}`);
+        modifySelectors(
+          ({ className }) =>
+            `.sidebar-expanded .${e(
+              `sidebar-expanded${separator}${className}`
+            )}`
+        );
       });
     }),
   ],

src/utils/Schemas.js

@@ -1,31 +1,31 @@
 export const IdentityModuleSchema = {
-  $id: "idntty/identity/module",
+  $id: 'idntty/identity/module',
-  title: "Identity module account schema",
+  title: 'Identity module account schema',
-  type: "object",
+  type: 'object',
   properties: {
     features: {
       fieldNumber: 1,
-      type: "array",
+      type: 'array',
       maxItems: 256,
       items: {
-        type: "object",
+        type: 'object',
-        required: ["label", "value"],
+        required: ['label', 'value'],
         properties: {
-          label: { fieldNumber: 1, dataType: "string" },
+          label: { fieldNumber: 1, dataType: 'string' },
-          value: { fieldNumber: 2, dataType: "bytes" },
+          value: { fieldNumber: 2, dataType: 'bytes' },
         },
       },
     },
     verifications: {
       fieldNumber: 2,
-      type: "array",
+      type: 'array',
       items: {
-        type: "object",
+        type: 'object',
-        required: ["label", "account", "tx"],
+        required: ['label', 'account', 'tx'],
         properties: {
-          label: { fieldNumber: 1, dataType: "string" },
+          label: { fieldNumber: 1, dataType: 'string' },
-          account: { fieldNumber: 2, dataType: "bytes" },
+          account: { fieldNumber: 2, dataType: 'bytes' },
-          tx: { fieldNumber: 3, dataType: "bytes" },
+          tx: { fieldNumber: 3, dataType: 'bytes' },
         },
       },
     },
@@ -34,22 +34,22 @@ export const IdentityModuleSchema = {
 };
 
 export const setFeatureAssetSchema = {
-  $id: "idntty/identity/setfeature",
+  $id: 'idntty/identity/setfeature',
-  title: "Asset schema to set or update account features for identity module",
+  title: 'Asset schema to set or update account features for identity module',
-  type: "object",
+  type: 'object',
-  required: ["features"],
+  required: ['features'],
   properties: {
     features: {
       fieldNumber: 1,
-      type: "array",
+      type: 'array',
       minItems: 1,
       maxItems: 16,
       items: {
-        type: "object",
+        type: 'object',
-        required: ["label", "value"],
+        required: ['label', 'value'],
         properties: {
-          label: { fieldNumber: 1, dataType: "string", maxLength: 16 },
+          label: { fieldNumber: 1, dataType: 'string', maxLength: 16 },
-          value: { fieldNumber: 2, dataType: "bytes", maxLength: 32 },
+          value: { fieldNumber: 2, dataType: 'bytes', maxLength: 32 },
         },
       },
     },
@@ -57,21 +57,21 @@ export const setFeatureAssetSchema = {
 };
 
 export const removeFeatureAssetSchema = {
-  $id: "idntty/identity/removefeature",
+  $id: 'idntty/identity/removefeature',
-  title: "Asset schema to remove account features for identity module",
+  title: 'Asset schema to remove account features for identity module',
-  type: "object",
+  type: 'object',
-  required: ["features"],
+  required: ['features'],
   properties: {
     features: {
       fieldNumber: 1,
-      type: "array",
+      type: 'array',
       minItems: 1,
       maxItems: 16,
       items: {
-        type: "object",
+        type: 'object',
-        required: ["label"],
+        required: ['label'],
         properties: {
-          label: { fieldNumber: 1, dataType: "string", maxLength: 16 },
+          label: { fieldNumber: 1, dataType: 'string', maxLength: 16 },
         },
       },
     },
@@ -79,28 +79,28 @@ export const removeFeatureAssetSchema = {
 };
 
 export const validateFeatureAssetSchema = {
-  $id: "idntty/identity/validatefeature",
+  $id: 'idntty/identity/validatefeature',
-  title: "Asset schema to validate account features for identity module",
+  title: 'Asset schema to validate account features for identity module',
-  type: "object",
+  type: 'object',
-  required: ["recipientAddress", "features"],
+  required: ['recipientAddress', 'features'],
   properties: {
     recipientAddress: {
       fieldNumber: 1,
-      dataType: "bytes",
+      dataType: 'bytes',
       minLength: 20,
       maxLength: 20,
     },
     features: {
       fieldNumber: 2,
-      type: "array",
+      type: 'array',
       minItems: 1,
       maxItems: 16,
       items: {
-        type: "object",
+        type: 'object',
-        required: ["label", "value"],
+        required: ['label', 'value'],
         properties: {
-          label: { fieldNumber: 1, dataType: "string", maxLength: 16 },
+          label: { fieldNumber: 1, dataType: 'string', maxLength: 16 },
-          value: { fieldNumber: 2, dataType: "bytes", maxLength: 32 },
+          value: { fieldNumber: 2, dataType: 'bytes', maxLength: 32 },
         },
       },
     },
@@ -108,27 +108,27 @@ export const validateFeatureAssetSchema = {
 };
 
 export const invalidateFeatureAssetSchema = {
-  $id: "idntty/identity/invalidatefeature",
+  $id: 'idntty/identity/invalidatefeature',
-  title: "Asset schema to invalidate account features for identity module",
+  title: 'Asset schema to invalidate account features for identity module',
-  type: "object",
+  type: 'object',
-  required: ["recipientAddress", "features"],
+  required: ['recipientAddress', 'features'],
   properties: {
     recipientAddress: {
       fieldNumber: 1,
-      dataType: "bytes",
+      dataType: 'bytes',
       minLength: 20,
       maxLength: 20,
     },
     features: {
       fieldNumber: 2,
-      type: "array",
+      type: 'array',
       minItems: 1,
       maxItems: 16,
       items: {
-        type: "object",
+        type: 'object',
-        required: ["label"],
+        required: ['label'],
         properties: {
-          label: { fieldNumber: 1, dataType: "string", maxLength: 16 },
+          label: { fieldNumber: 1, dataType: 'string', maxLength: 16 },
         },
       },
     },
@@ -136,26 +136,26 @@ export const invalidateFeatureAssetSchema = {
 };
 
 export const voteDelegateAssetSchema = {
-  $id: "lisk/dpos/vote",
+  $id: 'lisk/dpos/vote',
-  type: "object",
+  type: 'object',
-  required: ["votes"],
+  required: ['votes'],
   properties: {
     votes: {
-      type: "array",
+      type: 'array',
       minItems: 1,
       maxItems: 20,
       items: {
-        type: "object",
+        type: 'object',
-        required: ["delegateAddress", "amount"],
+        required: ['delegateAddress', 'amount'],
         properties: {
           delegateAddress: {
-            dataType: "bytes",
+            dataType: 'bytes',
             fieldNumber: 1,
             minLength: 20,
             maxLength: 20,
           },
           amount: {
-            dataType: "sint64",
+            dataType: 'sint64',
             fieldNumber: 2,
           },
         },
@@ -166,30 +166,30 @@ export const voteDelegateAssetSchema = {
 };
 
 export const unlockDelegateAssetSchema = {
-  $id: "lisk/dpos/unlock",
+  $id: 'lisk/dpos/unlock',
-  type: "object",
+  type: 'object',
-  required: ["unlockObjects"],
+  required: ['unlockObjects'],
   properties: {
     unlockObjects: {
-      type: "array",
+      type: 'array',
       minItems: 1,
       maxItems: 20,
       items: {
-        type: "object",
+        type: 'object',
-        required: ["delegateAddress", "amount", "unvoteHeight"],
+        required: ['delegateAddress', 'amount', 'unvoteHeight'],
         properties: {
           delegateAddress: {
-            dataType: "bytes",
+            dataType: 'bytes',
             fieldNumber: 1,
             minLength: 20,
             maxLength: 20,
           },
           amount: {
-            dataType: "uint64",
+            dataType: 'uint64',
             fieldNumber: 2,
           },
           unvoteHeight: {
-            dataType: "uint32",
+            dataType: 'uint32',
             fieldNumber: 3,
           },
         },

src/utils/Transition.jsx

@@ -3,13 +3,13 @@ import { CSSTransition as ReactCSSTransition } from 'react-transition-group';
 
 const TransitionContext = React.createContext({
   parent: {},
-})
+});
 
 function useIsInitialRender() {
   const isInitialRender = useRef(true);
   useEffect(() => {
     isInitialRender.current = false;
-  }, [])
+  }, []);
   return isInitialRender.current;
 }
 
@@ -53,34 +53,40 @@ function CSSTransition({
       unmountOnExit={removeFromDom}
       in={show}
       addEndListener={(done) => {
-        nodeRef.current.addEventListener('transitionend', done, false)
+        nodeRef.current.addEventListener('transitionend', done, false);
       }}
       onEnter={() => {
         if (!removeFromDom) nodeRef.current.style.display = null;
-        addClasses(nodeRef.current, [...enterClasses, ...enterStartClasses])
+        addClasses(nodeRef.current, [...enterClasses, ...enterStartClasses]);
       }}
       onEntering={() => {
-        removeClasses(nodeRef.current, enterStartClasses)
+        removeClasses(nodeRef.current, enterStartClasses);
-        addClasses(nodeRef.current, enterEndClasses)
+        addClasses(nodeRef.current, enterEndClasses);
       }}
       onEntered={() => {
-        removeClasses(nodeRef.current, [...enterEndClasses, ...enterClasses])
+        removeClasses(nodeRef.current, [...enterEndClasses, ...enterClasses]);
       }}
       onExit={() => {
-        addClasses(nodeRef.current, [...leaveClasses, ...leaveStartClasses])
+        addClasses(nodeRef.current, [...leaveClasses, ...leaveStartClasses]);
       }}
       onExiting={() => {
-        removeClasses(nodeRef.current, leaveStartClasses)
+        removeClasses(nodeRef.current, leaveStartClasses);
-        addClasses(nodeRef.current, leaveEndClasses)
+        addClasses(nodeRef.current, leaveEndClasses);
       }}
       onExited={() => {
-        removeClasses(nodeRef.current, [...leaveEndClasses, ...leaveClasses])
+        removeClasses(nodeRef.current, [...leaveEndClasses, ...leaveClasses]);
         if (!removeFromDom) nodeRef.current.style.display = 'none';
       }}
     >
-      <Component ref={nodeRef} {...rest} style={{ display: !removeFromDom ? 'none': null }}>{children}</Component>
+      <Component
+        ref={nodeRef}
+        {...rest}
+        style={{ display: !removeFromDom ? 'none' : null }}
+      >
+        {children}
+      </Component>
     </ReactCSSTransition>
-  )
+  );
 }
 
 function Transition({ show, appear, ...rest }) {
@@ -95,7 +101,7 @@ function Transition({ show, appear, ...rest }) {
         show={parent.show}
         {...rest}
       />
-    )
+    );
   }
 
   return (
@@ -110,7 +116,7 @@ function Transition({ show, appear, ...rest }) {
     >
       <CSSTransition appear={appear} show={show} {...rest} />
     </TransitionContext.Provider>
-  )
+  );
 }
 
 export default Transition;

src/utils/Utils.js

@@ -1,17 +1,17 @@
-import resolveConfig from "tailwindcss/resolveConfig";
+import resolveConfig from 'tailwindcss/resolveConfig';
-import { cryptography, transactions } from "@liskhq/lisk-client";
+import { cryptography, transactions } from '@liskhq/lisk-client';
 import {
   removeFeatureAssetSchema,
   setFeatureAssetSchema,
   unlockDelegateAssetSchema,
   validateFeatureAssetSchema,
   voteDelegateAssetSchema,
-} from "./Schemas";
+} from './Schemas';
-import { statusMap } from "../shared/statusMap";
+import { statusMap } from '../shared/statusMap';
 
 export const tailwindConfig = () => {
   // Tailwind config
-  return resolveConfig("./src/tailwind.config.js");
+  return resolveConfig('./src/tailwind.config.js');
 };
 
 export const hexToRGB = (h) => {
@@ -31,17 +31,17 @@ export const hexToRGB = (h) => {
 };
 
 export const formatValue = (value) =>
-  Intl.NumberFormat("en-US", {
+  Intl.NumberFormat('en-US', {
-    style: "currency",
+    style: 'currency',
-    currency: "USD",
+    currency: 'USD',
     maximumSignificantDigits: 3,
-    notation: "compact",
+    notation: 'compact',
   }).format(value);
 
 export const formatThousands = (value) =>
-  Intl.NumberFormat("en-US", {
+  Intl.NumberFormat('en-US', {
     maximumSignificantDigits: 3,
-    notation: "compact",
+    notation: 'compact',
   }).format(value);
 
 export const formatAddressBig = (address) =>
@@ -50,12 +50,12 @@ export const formatAddressBig = (address) =>
     address.length - 4
   )} ${address.slice(address.length - 4)}`;
 
-export const encryptAccountData = (data = [], passPhrase = "", pubKey = "") => {
+export const encryptAccountData = (data = [], passPhrase = '', pubKey = '') => {
   return data
     .filter((item) => item.status !== statusMap.blockchained)
     .map((item) => {
       let value = cryptography.encryptMessageWithPassphrase(
-        item.seed + ":" + item.value,
+        item.seed + ':' + item.value,
         passPhrase,
         pubKey
       );
@@ -68,12 +68,12 @@ export const encryptAccountData = (data = [], passPhrase = "", pubKey = "") => {
     });
 };
 
-export const encryptSharedData = (data = [], passPhrase = "", pubKey = "") => {
+export const encryptSharedData = (data = [], passPhrase = '', pubKey = '') => {
   return data.map((item) => {
     let value = cryptography.encryptMessageWithPassphrase(
-      item.seed + ":" + item.value,
+      item.seed + ':' + item.value,
       passPhrase,
-      Buffer.from(pubKey, "hex")
+      Buffer.from(pubKey, 'hex')
     );
     return {
       label: item.key,
@@ -111,8 +111,8 @@ export const hashAccountData = (data = [], oldData = [], hashMap = {}) => {
   const changed = data.reduce((acc, item) => {
     if (!oldAccountMap[item.label]) return [...acc, item];
     const oldValue = hashMap[item.key];
-    const newValue = hashValue(item.value, item.seed).toString("hex");
+    const newValue = hashValue(item.value, item.seed).toString('hex');
-    if (oldValue !== newValue && item.status === "new") return [...acc, item];
+    if (oldValue !== newValue && item.status === 'new') return [...acc, item];
     return acc;
   }, []);
   return [
@@ -128,22 +128,22 @@ export const hashAccountData = (data = [], oldData = [], hashMap = {}) => {
 };
 
 export const jsonReplacer = (key, value) => {
-  if (key === "big") {
+  if (key === 'big') {
     return value.toString();
   }
   return value;
 };
 
-export const hashValue = (value = "", seed = "") =>
+export const hashValue = (value = '', seed = '') =>
   cryptography.hash(
-    Buffer.concat([Buffer.from(seed, "utf8"), cryptography.hash(value, "utf8")])
+    Buffer.concat([Buffer.from(seed, 'utf8'), cryptography.hash(value, 'utf8')])
   );
 
 export const generateTransaction = (
   nonce = BigInt(0),
-  senderPublicKey = "",
+  senderPublicKey = '',
-  networkIdentifier = "",
+  networkIdentifier = '',
-  passPhrase = "",
+  passPhrase = '',
   fee = BigInt(500000)
 ) => {
   return {
@@ -202,9 +202,9 @@ export const generateTransaction = (
 export const generateSetTransaction = (
   features,
   nonce = BigInt(0),
-  senderPublicKey = "",
+  senderPublicKey = '',
-  networkIdentifier = "",
+  networkIdentifier = '',
-  passPhrase = "",
+  passPhrase = '',
   fee = BigInt(500000)
 ) => {
   const tx = {
@@ -223,15 +223,15 @@ export const generateSetTransaction = (
   const signedTx = transactions.signTransaction(
     setFeatureAssetSchema,
     tx,
-    Buffer.from(networkIdentifier, "hex"),
+    Buffer.from(networkIdentifier, 'hex'),
     passPhrase
   );
 
-  signedTx.senderPublicKey = signedTx.senderPublicKey.toString("hex");
+  signedTx.senderPublicKey = signedTx.senderPublicKey.toString('hex');
-  signedTx.signatures[0] = signedTx.signatures[0].toString("hex");
+  signedTx.signatures[0] = signedTx.signatures[0].toString('hex');
   signedTx.asset.features = signedTx.asset.features.map((feature) => ({
     ...feature,
-    value: feature.value.toString("hex"),
+    value: feature.value.toString('hex'),
   }));
 
   delete signedTx.id;
@@ -242,9 +242,9 @@ export const generateSetTransaction = (
 export const generateRemoveTransaction = (
   features,
   nonce = BigInt(0),
-  senderPublicKey = "",
+  senderPublicKey = '',
-  networkIdentifier = "",
+  networkIdentifier = '',
-  passPhrase = "",
+  passPhrase = '',
   fee = BigInt(500000)
 ) => {
   const tx = {
@@ -260,12 +260,12 @@ export const generateRemoveTransaction = (
   const signedTx = transactions.signTransaction(
     removeFeatureAssetSchema,
     tx,
-    Buffer.from(networkIdentifier, "hex"),
+    Buffer.from(networkIdentifier, 'hex'),
     passPhrase
   );
 
-  signedTx.senderPublicKey = signedTx.senderPublicKey.toString("hex");
+  signedTx.senderPublicKey = signedTx.senderPublicKey.toString('hex');
-  signedTx.signatures[0] = signedTx.signatures[0].toString("hex");
+  signedTx.signatures[0] = signedTx.signatures[0].toString('hex');
 
   delete signedTx.id;
 
@@ -275,21 +275,21 @@ export const generateRemoveTransaction = (
 const generateValidateTransaction = (
   features,
   nonce = BigInt(0),
-  senderPublicKey = "",
+  senderPublicKey = '',
-  networkIdentifier = "",
+  networkIdentifier = '',
-  passPhrase = "",
+  passPhrase = '',
   fee = BigInt(500000),
-  recipientAddress = ""
+  recipientAddress = ''
 ) => {
   const tx = {
     moduleID: 1001,
     assetID: 11,
     nonce,
-    senderPublicKey: Buffer.from(senderPublicKey, "hex"),
+    senderPublicKey: Buffer.from(senderPublicKey, 'hex'),
     fee,
     asset: {
       features,
-      recipientAddress: Buffer.from(recipientAddress, "hex"),
+      recipientAddress: Buffer.from(recipientAddress, 'hex'),
     },
   };
 
@@ -298,17 +298,17 @@ const generateValidateTransaction = (
   const signedTx = transactions.signTransaction(
     validateFeatureAssetSchema,
     tx,
-    Buffer.from(networkIdentifier, "hex"),
+    Buffer.from(networkIdentifier, 'hex'),
     passPhrase
   );
 
-  signedTx.senderPublicKey = signedTx.senderPublicKey.toString("hex");
+  signedTx.senderPublicKey = signedTx.senderPublicKey.toString('hex');
   signedTx.asset.recipientAddress =
-    signedTx.asset.recipientAddress.toString("hex");
+    signedTx.asset.recipientAddress.toString('hex');
-  signedTx.signatures[0] = signedTx.signatures[0].toString("hex");
+  signedTx.signatures[0] = signedTx.signatures[0].toString('hex');
   signedTx.asset.features = signedTx.asset.features.map((feature) => ({
     ...feature,
-    value: feature.value.toString("hex"),
+    value: feature.value.toString('hex'),
   }));
 
   delete signedTx.id;
@@ -318,23 +318,23 @@ const generateValidateTransaction = (
 
 const generateVoteTransaction = (
   nonce = BigInt(0),
-  senderPublicKey = "",
+  senderPublicKey = '',
-  networkIdentifier = "",
+  networkIdentifier = '',
-  passPhrase = "",
+  passPhrase = '',
   fee = BigInt(500000),
-  delegateAddress = "",
+  delegateAddress = '',
   amount = 0n
 ) => {
   const tx = {
     moduleID: 5,
     assetID: 1,
     nonce,
-    senderPublicKey: Buffer.from(senderPublicKey, "hex"),
+    senderPublicKey: Buffer.from(senderPublicKey, 'hex'),
     fee,
     asset: {
       votes: [
         {
-          delegateAddress: Buffer.from(delegateAddress, "hex"),
+          delegateAddress: Buffer.from(delegateAddress, 'hex'),
           amount: amount * 100000000n,
         },
       ],
@@ -344,15 +344,15 @@ const generateVoteTransaction = (
   const signedTx = transactions.signTransaction(
     voteDelegateAssetSchema,
     tx,
-    Buffer.from(networkIdentifier, "hex"),
+    Buffer.from(networkIdentifier, 'hex'),
     passPhrase
   );
 
-  signedTx.senderPublicKey = signedTx.senderPublicKey.toString("hex");
+  signedTx.senderPublicKey = signedTx.senderPublicKey.toString('hex');
-  signedTx.signatures[0] = signedTx.signatures[0].toString("hex");
+  signedTx.signatures[0] = signedTx.signatures[0].toString('hex');
   signedTx.asset.votes = signedTx.asset.votes.map((vote) => ({
     ...vote,
-    delegateAddress: vote.delegateAddress.toString("hex"),
+    delegateAddress: vote.delegateAddress.toString('hex'),
   }));
 
   delete signedTx.id;
@@ -362,11 +362,11 @@ const generateVoteTransaction = (
 
 const generateUnlockTransaction = (
   nonce = BigInt(0),
-  senderPublicKey = "",
+  senderPublicKey = '',
-  networkIdentifier = "",
+  networkIdentifier = '',
-  passPhrase = "",
+  passPhrase = '',
   fee = BigInt(500000),
-  delegateAddress = "",
+  delegateAddress = '',
   amount = 0n,
   unvoteHeight = 0
 ) => {
@@ -374,12 +374,12 @@ const generateUnlockTransaction = (
     moduleID: 5,
     assetID: 2,
     nonce,
-    senderPublicKey: Buffer.from(senderPublicKey, "hex"),
+    senderPublicKey: Buffer.from(senderPublicKey, 'hex'),
     fee,
     asset: {
       unlockObjects: [
         {
-          delegateAddress: Buffer.from(delegateAddress, "hex"),
+          delegateAddress: Buffer.from(delegateAddress, 'hex'),
           amount: amount * 100000000n,
           unvoteHeight,
         },
@@ -390,15 +390,15 @@ const generateUnlockTransaction = (
   const signedTx = transactions.signTransaction(
     unlockDelegateAssetSchema,
     tx,
-    Buffer.from(networkIdentifier, "hex"),
+    Buffer.from(networkIdentifier, 'hex'),
     passPhrase
   );
 
-  signedTx.senderPublicKey = signedTx.senderPublicKey.toString("hex");
+  signedTx.senderPublicKey = signedTx.senderPublicKey.toString('hex');
-  signedTx.signatures[0] = signedTx.signatures[0].toString("hex");
+  signedTx.signatures[0] = signedTx.signatures[0].toString('hex');
   signedTx.asset.unlockObjects = signedTx.asset.unlockObjects.map((vote) => ({
     ...vote,
-    delegateAddress: vote.delegateAddress.toString("hex"),
+    delegateAddress: vote.delegateAddress.toString('hex'),
   }));
 
   delete signedTx.id;

src/utils/decryptedData.js

@@ -1,54 +1,81 @@
-import {labelMap} from "../shared/labelMap";
+import { labelMap } from '../shared/labelMap';
-import {statusMap} from "../shared/statusMap";
+import { statusMap } from '../shared/statusMap';
-import {cryptography} from "@liskhq/lisk-client";
+import { cryptography } from '@liskhq/lisk-client';
 
-export const decryptedData=(serverData, blockchainData, passPhrase, pubKey, processedFeatures)=>{
+export const decryptedData = (
-  const allAccountData=serverData.concat(blockchainData.filter(item=>!serverData.find(elem=>elem.label===item.label)))
+  serverData,
+  blockchainData,
+  passPhrase,
+  pubKey,
+  processedFeatures
+) => {
+  const allAccountData = serverData.concat(
+    blockchainData.filter(
+      (item) => !serverData.find((elem) => elem.label === item.label)
+    )
+  );
   return allAccountData.map((elem) => {
-    const initialData={
+    const initialData = {
       ...elem,
       key: elem.label,
       label: labelMap[elem.label] || elem.label,
       status: '',
       value: '',
-      seed: ''
+      seed: '',
-    }
+    };
-    if(processedFeatures[elem.label])
+    if (processedFeatures[elem.label])
       return {
         ...initialData,
         status: statusMap.processed,
         value: elem.value,
-      }
+      };
-    if(!serverData.find(item=>item.label===elem.label)) {
+    if (!serverData.find((item) => item.label === elem.label)) {
       return {
         ...initialData,
         status: statusMap.blockchained,
-        value: elem.value
+        value: elem.value,
-      }
+      };
     }
-    const [seed, value] = cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, passPhrase, pubKey).split(':');
+    const [seed, value] = cryptography
-    const hashValue=cryptography.hash(Buffer.concat([Buffer.from(seed, 'utf8'), cryptography.hash(value, 'utf8')])).toString('hex')
+      .decryptMessageWithPassphrase(
-    if(!blockchainData.find(item=>item.label===elem.label)) {
+        elem.value,
+        elem.value_nonce,
+        passPhrase,
+        pubKey
+      )
+      .split(':');
+    const hashValue = cryptography
+      .hash(
+        Buffer.concat([
+          Buffer.from(seed, 'utf8'),
+          cryptography.hash(value, 'utf8'),
+        ])
+      )
+      .toString('hex');
+    if (!blockchainData.find((item) => item.label === elem.label)) {
       return {
         ...initialData,
         status: statusMap.stored,
         value,
-        seed
+        seed,
-      }
+      };
     }
-    if(blockchainData.find(item=>item.label===elem.label).value!==hashValue) {
+    if (
+      blockchainData.find((item) => item.label === elem.label).value !==
+      hashValue
+    ) {
       return {
         ...initialData,
         status: statusMap.incorrect,
         value,
-        seed
+        seed,
-      }
+      };
     }
     return {
       ...initialData,
       status: statusMap.completed,
       value,
-      seed
+      seed,
-    }
+    };
-  })
+  });
-}
+};

src/utils/test.js

@@ -1,11 +1,19 @@
-import {cryptography, passphrase} from "@liskhq/lisk-client";
+import { cryptography, passphrase } from '@liskhq/lisk-client';
 import sodium from 'sodium-universal';
 
 let passphrase1 = passphrase.Mnemonic.generateMnemonic();
 const keys = cryptography.getPrivateAndPublicKeyFromPassphrase(passphrase1);
 console.log('IDNTTY Public & Private keys(hex):');
-console.log('publicKey:', keys.publicKey.length, keys.publicKey.toString('hex'));
+console.log(
-console.log('privateKey:', keys.privateKey.length, keys.privateKey.toString('hex'));
+  'publicKey:',
+  keys.publicKey.length,
+  keys.publicKey.toString('hex')
+);
+console.log(
+  'privateKey:',
+  keys.privateKey.length,
+  keys.privateKey.toString('hex')
+);
 
 console.log('');
 console.log('SODIUM Public & Private keys(hex):');
@@ -16,16 +24,27 @@ let sk = Buffer.alloc(sodium.crypto_sign_SECRETKEYBYTES);
 let x25519_sk = Buffer.alloc(sodium.crypto_box_SECRETKEYBYTES);
 let x25519_pk = Buffer.alloc(sodium.crypto_box_PUBLICKEYBYTES);
 
-sodium.crypto_sign_seed_keypair(pk, sk, cryptography.hash(Buffer.from(passphrase1, 'UTF-8')));
+sodium.crypto_sign_seed_keypair(
+  pk,
+  sk,
+  cryptography.hash(Buffer.from(passphrase1, 'UTF-8'))
+);
 
 sodium.crypto_sign_ed25519_sk_to_curve25519(x25519_sk, sk);
-sodium.crypto_sign_ed25519_pk_to_curve25519(x25519_pk, pk)
+sodium.crypto_sign_ed25519_pk_to_curve25519(x25519_pk, pk);
 
 console.log('Public & Private keys(hex):');
 console.log('publicKey:', pk.length, pk.toString('hex'));
 console.log('privateKey:', sk.length, sk.toString('hex'));
 console.log('');
 
-console.log('x25519_sk privateKey:', x25519_sk.length, x25519_sk.toString('Base64'));
+console.log(
-console.log('x25519_pk publicKey:', x25519_pk.length, x25519_pk.toString('Base64'));
+  'x25519_sk privateKey:',
-
+  x25519_sk.length,
+  x25519_sk.toString('Base64')
+);
+console.log(
+  'x25519_pk publicKey:',
+  x25519_pk.length,
+  x25519_pk.toString('Base64')
+);