Merge pull request #45 from franze6/DID-12

Did 12

src/pages/Onboarding1.jsx

@@ -4,12 +4,10 @@ import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
 import Logo from "../images/logo.png";
 import {observer} from "mobx-react-lite";
-import {passphrase} from "@liskhq/lisk-client";
 import {registrationStore} from "../store/store";
 
 const Onboarding1 = observer(() => {
-  let phrase = passphrase.Mnemonic.generateMnemonic();
+  registrationStore.generatePassPhrase()
-  registrationStore.savePassPhrase(phrase);
 
   return (
     <main className="bg-white">

src/pages/Onboarding3.jsx

@@ -1,23 +1,18 @@
-import React, { useState} from 'react';
+import React from 'react';
+import {observer} from "mobx-react-lite";
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
 import {registrationStore} from "../store/store";
-import { passphrase } from "@liskhq/lisk-client";
 
-function Onboarding3() {
+const Onboarding3 = observer(()=>{
-  const [passPhrase, setPassPhrase] = useState(convertPhraseToArray(registrationStore.passPhrase));
   function generatePassPhrase() {
-    let phrase = passphrase.Mnemonic.generateMnemonic();
+    registrationStore.generatePassPhrase();
-    registrationStore.savePassPhrase(phrase);
-    setPassPhrase(convertPhraseToArray(registrationStore.passPhrase));
   };
 
   function savePassPhraseInStore (copiedPhrase) {
-    let phrasePaste = convertPhraseToArray(copiedPhrase.trim());
+    if (copiedPhrase.split(' ').length === 12) {
-    if (phrasePaste.length === 12) {
+      registrationStore.savePastPassPhrase(copiedPhrase.trim());
-      registrationStore.savePassPhrase(copiedPhrase.trim());
-      setPassPhrase(phrasePaste);
     } else {
       return false
     }
@@ -27,10 +22,6 @@ function Onboarding3() {
     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">
 
@@ -85,21 +76,21 @@ function Onboarding3() {
                   <h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
                   {/* htmlForm */}
                   <div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
-                    {passPhrase.map(tag => (
+                    {registrationStore.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">
                         <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 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"/>
@@ -134,6 +125,6 @@ function Onboarding3() {
 
     </main>
   );
-}
+});
 
 export default Onboarding3;

src/pages/Onboarding4.jsx

@@ -12,6 +12,7 @@ const Onboarding4 = observer(() => {
   function createAccount() {
     if(checkBoxesSelected.length === 2) {
       registrationStore.pushAccountData();
+      sessionStorage.setItem('passPhrase', registrationStore.passPhrase)
     }
   };
 

src/partials/validationLog/ValidateRoadMap.jsx

@@ -11,7 +11,7 @@ function ValidateRoadMap({ season }) {
           <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>
           </div>
-          <div className="grow pb-6">
+          <div className="grow pb-6 border-b border-slate-200">
             <header>
               <div className="flex flex-nowrap items-center space-x-2 mb-6">
                 {/* Avatars */}

src/partials/validationLog/ValidationSeasonItem.jsx

@@ -5,13 +5,13 @@ function ValidationSeasonItem({ length, item, index }) {
       <li className="relative pt-2 pb-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>}
-          <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
+          <div className={`${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">
-              <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z"/>
+              {item.address && <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z"/>}
             </svg>
           </div>
           <h3 className="text-lg font-bold text-slate-800 pl-9">
-            {`${item.label} by`} <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{item.address}</a>
+            {`${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>
           </h3>
         </div>
         <div className="block text-slate-800 w-fit pl-9">
@@ -20,7 +20,7 @@ function ValidationSeasonItem({ length, item, index }) {
         </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>
-          <span className="font-normal text-slate-600 text-[10px]">Validated data</span>
+          <span 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>

src/store/store.js

@@ -1,5 +1,6 @@
 import { reaction, makeAutoObservable, onBecomeObserved, onBecomeUnobserved} from "mobx";
 import {cryptography} from "@liskhq/lisk-client";
+import { passphrase } from "@liskhq/lisk-client";
 import {getNodeInfo} from '../api/node';
 import {fetchWrapper} from '../shared/fetchWrapper';
 import {labelMap} from "../shared/labelMap";
@@ -13,7 +14,7 @@ const usersImages = [User08,User06,User05,User09];
 class Store {
   _accountData = []
 
-  _passPhrase='rocket north inform swift improve fringe sweet crew client canyon bean autumn'
+  _passPhrase
 
   _nodeInfo = {}
 
@@ -30,6 +31,8 @@ class Store {
 
     this.fetchNodeInfo()
 
+    this.generatePassPhrase()
+
     reaction(() => this.keysArray, () => this.fetchSharedData())
     onBecomeObserved(this, "decryptedUserData", () => this.fetchNewAccountData())
     onBecomeObserved(this, "sharedData", () => this.fetchKeysArray())
@@ -71,12 +74,16 @@ class Store {
   }
 
   fetchTransactionsInfo() {
-    fetchWrapper.get(`account/transactions/${this.accountMadeTransaction}?moduleID=1001&assetID=11`, {
+    fetchWrapper.get("account/transactions/71ccaeefe22050abc9b36ce0c1744316c11c49e1", {
       networkIdentifier: this.nodeInfo.networkIdentifier,
       lastBlockID: this.nodeInfo.lastBlockID
     }).then((res) => this.saveInfoTransactions(res))
   }
 
+  generatePassPhrase() {
+    this._passPhrase = passphrase.Mnemonic.generateMnemonic()
+  }
+
   fetchSharedData() {
     this._keysArray.forEach((elem) => fetchWrapper.get(`data/shared/${elem}`).then((res) => this.changeSharedData(res)))
   };
@@ -95,7 +102,7 @@ class Store {
     })
   }
 
-  savePassPhrase(phrase) {
+  savePastPassPhrase(phrase) {
     this._passPhrase = phrase
   }
 
@@ -151,7 +158,7 @@ class Store {
         transaction: item.asset.features.map(asset => {
           return {
             transaction_id: item.id,
-            address: this.accountMadeTransaction,
+              address: item.asset.recipientAddress && cryptography.bufferToHex(cryptography.getAddressFromPublicKey(cryptography.hexToBuffer(item.senderPublicKey))),
             value: asset.value,
             label: labelMap[asset.label],
           }
@@ -173,23 +180,26 @@ class Store {
     return data.map((item) => {
       let value = cryptography.encryptMessageWithPassphrase(cryptography.getRandomBytes(32).toString('hex') + ":" + item.value, this.passPhrase, this.pubKey);
       return {
-        "label": item.key,
+        label: item.key,
-        "value": value.encryptedMessage,
+        value: value.encryptedMessage,
-        "value_nonce": value.nonce,
+        value_nonce: value.nonce,
       }
     })
   }
 
-  get accountMadeTransaction() {
-    return "b444b7ff3118cf2a30cbd54cfcdb8fd5d805017a"
-  }
-
   get keysArray() {
     return this._keysArray;
   }
 
   get passPhrase() {
-    return 'rocket north inform swift improve fringe sweet crew client canyon bean autumn'
+    if(sessionStorage.getItem('passPhrase')) {
+      this._passPhrase = sessionStorage.getItem('passPhrase')
+    }
+    return this._passPhrase
+  }
+
+  get convertPassPhraseToArray() {
+    return this._passPhrase.split(' ').map((item, index) => ({str:item, id:index}))
   }
 
   get accountData() {