code review

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

src/App.jsx

@@ -27,7 +27,7 @@ import Onboarding3 from "./pages/Onboarding3";
 import Onboarding4 from "./pages/Onboarding4";
 import SharedData from "./pages/SharedData";
 import ResetPassword from "./pages/ResetPassword";
-import Signin from "./pages/Signin";
+import SignIn from "./pages/SignIn";
 
 function App() {
 
@@ -62,7 +62,7 @@ function App() {
         <Route path="/component/badge" element={<BadgePage />} />
         <Route path="/component/accordion" element={<AccordionPage />} />
         <Route path="/reset-password" element={<ResetPassword />} />
-        <Route path="/signin" element={<Signin />} />
+        <Route path="/signIn" element={<SignIn />} />
       </Routes>
     </>
   );

src/pages/Onboarding1.jsx

@@ -1,6 +1,5 @@
 import React 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";
@@ -9,8 +8,8 @@ import {passphrase} from "@liskhq/lisk-client";
 import {registrationStore} from "../store/store";
 
 const Onboarding1 = observer(() => {
-  let phrase = passphrase.Mnemonic.generateMnemonic()
+  let phrase = passphrase.Mnemonic.generateMnemonic();
-  registrationStore.savePassPhrase(phrase)
+  registrationStore.savePassPhrase(phrase);
 
   return (
     <main className="bg-white">
@@ -31,7 +30,7 @@ const Onboarding1 = observer(()=>{
                   <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>
 

src/pages/Onboarding2.jsx

@@ -2,7 +2,6 @@ import React, {useState} from 'react';
 import { Link } from 'react-router-dom';
 import { observer } from "mobx-react-lite";
 import { registrationStore } from "../store/store";
-
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
 import Logo from "../images/logo.png";
@@ -15,19 +14,22 @@ const Onboarding2 = observer(()=>{
         gender: '',
         birthdate: '',
       }
-  )
+  );
-  const [fillingForm, setFillingForm] = useState(false)
+  const [fillingForm, setFillingForm] = useState(false);
 
   const saveValueChange = (event) => {
     const newValue=event.target.value;
     setDataRegistration({
       ...dataRegistration,
-      [event.target.id]: newValue
+      [event.target.id]: newValue,
     })
+  };
+
+  const checkFillingForm = () => {
     if (!Object.keys(dataRegistration).find(item => !dataRegistration[item])) {
-      setFillingForm(true)
+      setFillingForm(true);
-    }
     }
+  };
 
   const saveStoreRegistration = ()=>{
     if (fillingForm) {
@@ -38,7 +40,7 @@ const Onboarding2 = observer(()=>{
         }
       }))
     }
-  }
+  };
 
   return (
     <main className="bg-white">
@@ -59,7 +61,7 @@ const Onboarding2 = observer(()=>{
                   <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>
 
@@ -95,15 +97,15 @@ const Onboarding2 = observer(()=>{
                   <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>
-                      <input id="firstname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
+                      <input onBlur={checkFillingForm} id="firstname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
                     </div>
                     <div>
                       <label 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" />
+                      <input onBlur={checkFillingForm} id="secondname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
                     </div>
                     <div>
                       <label className="block text-sm font-medium mb-1" htmlFor="gender">Gender <span className="text-rose-500">*</span></label>
-                      <select id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full">
+                      <select onBlur={checkFillingForm} id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full">
                         <option className="hidden"></option>
                         <option>male</option>
                         <option>feemale</option>
@@ -111,7 +113,7 @@ const Onboarding2 = observer(()=>{
                     </div>
                     <div>
                       <label 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" />
+                      <input onBlur={checkFillingForm} id="birthdate" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" />
                     </div>
                   </div>
                   <div className="flex items-center justify-between mt-6">
@@ -121,7 +123,7 @@ const Onboarding2 = observer(()=>{
                         <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">
+                    <button onClick={saveStoreRegistration} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">
                       <Link id="signup" to={fillingForm && "/onboarding-3"} >Sign Up</Link>
                     </button>
                   </div>
@@ -129,7 +131,7 @@ const Onboarding2 = observer(()=>{
                 {/* Footer */}
                 <div className="pt-5 mt-6 border-t border-slate-200">
                   <div className="text-sm">
-                    Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
+                    Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
                   </div>
                 </div>
               </div>

src/pages/Onboarding3.jsx

@@ -6,31 +6,30 @@ import {registrationStore} from "../store/store";
 import { passphrase } from "@liskhq/lisk-client";
 
 function Onboarding3() {
-  const [passPhrase, setPassPhrase] = useState(convertPhraseToArray(registrationStore.passPhrase))
+  const [passPhrase, setPassPhrase] = useState(convertPhraseToArray(registrationStore.passPhrase));
   function generatePassPhrase() {
-    let phrase = passphrase.Mnemonic.generateMnemonic()
+    let phrase = passphrase.Mnemonic.generateMnemonic();
-    registrationStore.savePassPhrase(phrase)
+    registrationStore.savePassPhrase(phrase);
-    setPassPhrase(convertPhraseToArray(registrationStore.passPhrase))
+    setPassPhrase(convertPhraseToArray(registrationStore.passPhrase));
-  }
+  };
 
   function savePassPhraseInStore (copiedPhrase) {
-    let phrasePaste = convertPhraseToArray(copiedPhrase.trim())
+    let phrasePaste = convertPhraseToArray(copiedPhrase.trim());
     if (phrasePaste.length === 12) {
-      registrationStore.savePassPhrase(copiedPhrase.trim())
+      registrationStore.savePassPhrase(copiedPhrase.trim());
-      setPassPhrase(phrasePaste)
+      setPassPhrase(phrasePaste);
     } else {
       return false
     }
-  }
+  };
 
   function pastePassPhrase() {
     navigator.clipboard.readText().then(res => savePassPhraseInStore(res))
-  }
+  };
 
   function convertPhraseToArray(phrase) {
     return phrase.split(' ').map((item, index) => ({str:item, id:index}))
-  }
+  };
-
 
   return (
     <main className="bg-white">
@@ -51,7 +50,7 @@ function Onboarding3() {
                   <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>
 
@@ -93,14 +92,14 @@ function Onboarding3() {
                     ))}
                   </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 onClick={pastePassPhrase} className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
                       <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
                         <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 onClick={generatePassPhrase} className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
                       <svg className="mb-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <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"/>

src/pages/Onboarding4.jsx

@@ -7,23 +7,23 @@ import { registrationStore } from "../store/store";
 
 const Onboarding4 = observer(() => {
 
-  const [checkBoxesSelected, setCheckBoxesSelected] = useState([])
+  const [checkBoxesSelected, setCheckBoxesSelected] = useState([]);
 
   function createAccount() {
     if(checkBoxesSelected.length === 2) {
-      registrationStore.pushAccountData()
+      registrationStore.pushAccountData();
-    }
     }
+  };
 
   function saveCheckBoxesValues(e) {
-    const { id, checked } = e.target
+    const { id, checked } = e.target;
-    setCheckBoxesSelected([...checkBoxesSelected, id])
+    setCheckBoxesSelected([...checkBoxesSelected, id]);
     if (!checked) {
-      setCheckBoxesSelected(checkBoxesSelected.filter(item=>item!==id))
+      setCheckBoxesSelected(checkBoxesSelected.filter(item => item !== id));
-    }
     }
+  };
 
-  const firstNameAccount = registrationStore.accountData.length && registrationStore.accountData.find(item=>item.key==="firstname").value
+  const firstNameAccount = registrationStore.accountData.length && registrationStore.accountData.find(item => item.key === "firstname").value;
 
   return (
     <main className="bg-white">
@@ -44,7 +44,7 @@ const Onboarding4 = observer(()=>{
                   <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>
 
@@ -81,7 +81,7 @@ const Onboarding4 = observer(()=>{
                     <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>
-                  <button onClick={()=>createAccount()} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
+                  <button onClick={createAccount} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
                     <Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/dashboard"}>Go To Profile -&gt;</Link>
                   </button>
                 </div>

src/pages/ResetPassword.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-
 import AuthImage from '../images/auth-image.jpg';
 import AuthDecoration from '../images/auth-decoration.png';
 

src/pages/SharedData.jsx

@@ -4,7 +4,7 @@ import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import User06 from "../images/user-28-06.jpg";
 import User08 from "../images/user-28-08.jpg";
 import User09 from "../images/user-28-09.jpg";
-import SharedDataRoadMap from "../partials/shareddata/SharedDataRoadmap";
+import SharedDataRoadMap from "../partials/sharedData/SharedDataRoadmap";
 
 function SharedData() {
 

src/pages/SignIn.jsx

@@ -1,13 +1,12 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
-
 import AuthImage from '../images/auth-image.jpg';
 import AuthDecoration from '../images/auth-decoration.png';
 
-function Signin() {
+function SignIn() {
   useEffect(() => {
     localStorage.setItem('svgKey', '')
-  }, [])
+  }, []);
   return (
     <main className="bg-white">
 
@@ -97,4 +96,4 @@ function Signin() {
   );
 }
 
-export default Signin;
+export default SignIn;

src/pages/digitalId/ProfileId.jsx

@@ -3,13 +3,13 @@ import { registrationStore } from "../../store/store";
 import Sidebar from '../../partials/Sidebar';
 import { observer } from 'mobx-react-lite';
 import Header from '../../partials/Header';
-import ProfileTable from '../../partials/digitalId/ProfileTable';
+import ProfileTable from '../../partials/profile/ProfileTable';
 import Image from '../../images/transactions-image-04.svg';
 
 const defaultValues = {
   label: '',
   value: '',
-  seed: String(Math.floor(Math.random() * 90000000000000000000), 10)
+  seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
 };
 
 const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc ID', 'National doc issue date', 'National doc expiry date'];
@@ -31,12 +31,12 @@ const Profile = observer (() => {
     if (!addedValues.label) {
       setPropertyValues(initialPropertyValues);
     }
-  }
+  };
 
   const changeAddedValues = (value, field) => {
     setAddedValues((prevState) => ({
       ...prevState,
-      [field]: value
+      [field]: value,
     }))
   };
 
@@ -68,7 +68,7 @@ const Profile = observer (() => {
       .map(elem => (
         (!elem.seed) ? {
         ...elem,
-        seed: String(Math.floor(Math.random() * 90000000000000000000), 10)
+        seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
       }: elem)));
     if (selectedItems.length > 0) {
       setButtonPanelOpen(false);
@@ -89,7 +89,7 @@ const Profile = observer (() => {
   const openAddPanel = () => {
     setAddPanelOpen(true);
     setButtonPanelOpen(false);
-  }
+  };
 
   const sendAddedData = () => {
     const checkingAddedData = !registrationStore.decryptedUserData
@@ -100,18 +100,18 @@ const Profile = observer (() => {
       setAddedValues(defaultValues);
       addDataParameters();
     }
-  }
+  };
 
   const sendUpdatedData = () => {
     setUpdatePanelOpen(false);
     changeDataParameters();
     setChangePanelOpen(true);
-  }
+  };
 
   const deleteDataParameters = () => {
     const changeData = registrationStore.decryptedUserData.filter(item=>!selectedItems.includes(item.key))
     registrationStore.pushAccountData(changeData);
-  }
+  };
 
   const changeInitialArray = () => {
     let newArr = [];
@@ -130,44 +130,44 @@ const Profile = observer (() => {
       }
     })
     return newArr;
-  }
+  };
 
   const changeDataParameters = () => {
     const updatedData = changeInitialArray();
     registrationStore.pushAccountData(updatedData);
-  }
+  };
 
   const addDataParameters = () => {
     addedValues.key = addedValues.label.toLowerCase().split(' ').join('_');
     registrationStore.pushAccountData(registrationStore.decryptedUserData.concat(addedValues));
-  }
+  };
 
   const cancelAddPanel = () => {
     setAddedValues(defaultValues);
     setAddPanelOpen(false);
     setButtonPanelOpen(true);
-  }
+  };
 
   const cancelUpdatePanel = () => {
     setUpdatePanelOpen(false);
     setChangePanelOpen(true);
-  }
+  };
 
   const openRemovePanel = () => {
     setRemovePanelOpen(true);
     setChangePanelOpen(false);
-  }
+  };
 
   const openUpdatePanel = () => {
     setUpdatePanelOpen(true);
     setChangePanelOpen(false);
-  }
+  };
 
   const applyDataDeletion = () => {
     setRemovePanelOpen(false);
     setButtonPanelOpen(true);
     deleteDataParameters()
-  }
+  };
 
   const handleInput = (text, field) => {
     changeAddedValues(text, field);

src/pages/digitalId/Validate.jsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import {observer} from "mobx-react-lite";
-
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ValidateTable from "../../partials/validate/ValidateTable";
 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 {registrationStore} from "../../store/store";
 

src/pages/digitalId/ValidationLog.jsx

@@ -1,6 +1,5 @@
 import React, {useState} from 'react';
-
+import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
-import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
 import {observer} from "mobx-react-lite";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';

src/partials/profile/ProfileTable.jsx

@@ -14,7 +14,7 @@ function ProfileTable({
     status: 'Stored',
     transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
     avatars: null
-  }
+  };
 
   useEffect(() => {
     selectedItems(isCheck);
@@ -35,10 +35,10 @@ function ProfileTable({
     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 => data.general.includes(elem.label));
-        nationalityData = userData.filter(elem => data.nationality.includes(elem.label)),
+  const nationalityData = userData.filter(elem => data.nationality.includes(elem.label));
-        sosialData = userData.filter(elem => data.social.includes(elem.label)),
+  const sosialData = userData.filter(elem => data.social.includes(elem.label));
-        otherData = userData.filter((elem) =>
+  const otherData = userData.filter((elem) =>
           !data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label));
 
   return (

src/partials/sharedData/SharedDataRoadmap.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import ValidationUsersImg from "../validationlog/ValidationUsersImg";
+import ValidationUsersImg from "../validationLog/ValidationUsersImg";
 
 function SharedDataRoadMap({ data }) {
 

src/shared/labelMap.js

@@ -23,5 +23,5 @@ export const labelMap = {
   telegram: "Telegram",
   qq: "Qq",
   snapchat: "Snapchat",
-  reddit: "Reddit"
+  reddit: "Reddit",
 };