share data rework

src/App.jsx

@@ -42,14 +42,13 @@ const App = observer(() => {
       <Routes>
         <Route exact path="/" element={<Onboarding1 />} />
         <Route path="/digitalId/profile-id" element={<ProfileId />} />
-        <Route path="/digitalId/validate" element={<Validate />} />
+        {/*<Route path="/digitalId/validate" element={<Validate />} />*/}
         <Route path="/digitalId/validation-log" element={<ValidationLog />} />
         <Route path="/digitalId/verify" element={<Verify />} />
         <Route path="/onboarding-2" element={<Onboarding2 />} />
         <Route path="/onboarding-3" element={<Onboarding3 />} />
         <Route path="/onboarding-4" element={<Onboarding4 />} />
-        <Route path="/shared-data" element={<SharedData />} />
+        <Route path="/shared-data/:id" element={<SharedData />} />
-        <Route path="/reset-password" element={<ResetPassword />} />
         <Route path="/signIn" element={<SignIn />} />
       </Routes>
     </>

src/main.jsx

@@ -3,9 +3,12 @@ import ReactDOM from 'react-dom'
 import {Buffer} from "buffer";
 import { HashRouter as Router } from 'react-router-dom'
 import App from './App'
+import {store} from './store/store';
 
 globalThis.Buffer = Buffer
 
+window.store = store;
+
 BigInt.prototype.toJSON = function() {
   return this.toString()
 }

src/pages/SharedData.jsx

@@ -1,100 +1,119 @@
-import React from 'react';
+import React, { useEffect, useMemo, useState } from "react";
-import { Link } from 'react-router-dom';
+import { Link, Navigate, useParams } from "react-router-dom";
 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 { store } from "../store/store";
+import { fetchWrapper } from "../shared/fetchWrapper";
+import { cryptography } from "@liskhq/lisk-client";
 
 function SharedData() {
+  const [encryptedData, setEncryptedData] = useState([]);
+  const [hasError, setHasError] = useState(false);
 
-  const sharedDataItems = {
+  const { id } = useParams();
-      data: localStorage.getItem('digitalId'),
+
-      items: [
+  const [address, pubKey] = id.split(":");
-        {
+
-          dataShared: localStorage.getItem('digitalId'),
+  const passPhrase = sessionStorage.getItem("passPhrase");
-          id: '923',
+
-          text: 'United Kindom',
+  useEffect(() => {
-          typeItem: 'Residence',
+    fetchWrapper
-          usersImges: [
+    .get(`data/shared/${id}`)
-            {
+    .then((res) => setEncryptedData(res.data ?? []))
-              size: 32,
+    .catch((err) => console.log(err));
-              img: User06,
+  }, [id]);
-              imgId: "90"
+
-            },
+  const decryptedData = useMemo(() => {
-            {
+    return encryptedData.map((item) => {
-              size: 32,
+      let seed, value, hash;
-              img: User08,
+      try {
-              imgId: "93"
+        [seed, value] = cryptography
-            },
+        .decryptMessageWithPassphrase(
-            {
+          item.value,
-              size: 32,
+          item.value_nonce,
-              img: User09,
+          passPhrase,
-              imgId: "89"
+          pubKey
-            },
+        )
-          ],
+        .split(":");
-        },
+        hash = cryptography
-        {
+        .hash(
-          dataShared: localStorage.getItem('digitalId'),
+          Buffer.concat([
-          id: '401',
+            Buffer.from(seed, "utf8"),
-          text: 'A123B3143',
+            cryptography.hash(value, "utf8"),
-          typeItem: 'Document ID',
+          ])
-          usersImges: [
+        )
-            {
+        .toString("hex");
-              size: 32,
+      } catch (err) {
-              img: User06,
+        setHasError(true);
-              imgId: "67"
+        console.log(err);
-            },
+      } finally {
-            {
+        return {
-              size: 32,
+          seed,
-              img: User08,
+          value,
-              imgId: "71"
+          hash,
-            },
+          label: item.label,
-          ],
-        },
-      ]
         };
+      }
+    });
+  }, [encryptedData]);
+
+  if (!passPhrase) return <Navigate to="/" 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="px-4 mt-16 py-9">
               <div className=" flex flex-col max-w-md mx-auto">
-                <h1 className="text-3xl text-slate-800 font-bold mb-8">Shared data ✨</h1>
+                <h1 className="text-3xl text-slate-800 font-bold mb-8">
+                  Shared data ✨
+                </h1>
                 <ul>
-                  {sharedDataItems.items.map(item => {
+                  {!hasError &&
-                    return(
+                    decryptedData.map((item) => (
-                        <li key={item.id}>
+                      <li key={item.label}>
                         <SharedDataRoadMap data={item} />
                       </li>
-                    );
+                    ))}
-                  })}
+                  {hasError &&
+                    encryptedData.map((item) => (
+                      <li key={item.label}>
+                        <SharedDataRoadMap data={item} />
+                      </li>
+                    ))}
                 </ul>
               </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()} width="493px" height="493px" alt="Onboarding" />
+            <img
-            <span className="text-sm">{sharedDataItems.data}</span>
+              className="object-cover object-center"
-            <Link className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/dashboard">Get my digital ID</Link>
+              src={generateSvgAvatar(store.pubKey)}
+              width="493px"
+              height="493px"
+              alt="Onboarding"
+            />
+            <Link
+              className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white"
+              to="/"
+            >
+              Get my digital ID
+            </Link>
           </div>
         </div>
-
       </div>
-
     </main>
   );
 }

src/pages/digitalId/ProfileId.jsx

@@ -23,6 +23,7 @@ const Profile = observer (() => {
   const [changePanelOpen, setChangePanelOpen] = useState(false);
   const [storeOnBlockchain, setStoreOnBlockchain] = useState(false);
   const [addPanelOpen, setAddPanelOpen] = useState(false);
+  const [sharePanelOpen, setSharePanelOpen] = useState(false);
   const [updatePanelOpen, setUpdatePanelOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
   const [propertyValues, setPropertyValues] = useState([]);
@@ -31,6 +32,7 @@ const Profile = observer (() => {
   const [isCheck, setIsCheck] = useState([]);
   const [alreadyExists, setAlreadyExists] = useState(false)
   const [blockChainValue, setBlockChainValue] = useState('');
+  const [publicKey, setPublicKey] = useState('')
 
   useEffect(() => {
     handleSelectedItems(isCheck);
@@ -165,9 +167,9 @@ const Profile = observer (() => {
       store.pushAccountDataToBlockchain(updatedData.filter(elem=>elem.status!=='Stored'))
   };
 
-  const sharedDataAccount = () => {
+  const shareAccountData = () => {
     const sharedData = store.decryptedAccountData.filter(item => selectedItems.includes(item.key))
-    store.pushSharedData(sharedData)
+    store.pushSharedData(sharedData, publicKey)
   }
 
   const addDataParameters = () => {
@@ -204,6 +206,16 @@ const Profile = observer (() => {
     setChangePanelOpen(false);
   };
 
+  const openSharePanel = () => {
+    setSharePanelOpen(true);
+    setChangePanelOpen(false);
+  }
+
+  const cancelSharePanel = () => {
+    setSharePanelOpen(false);
+    setChangePanelOpen(true);
+  }
+
   const openUpdatePanel = () => {
     setUpdatePanelOpen(true);
     setChangePanelOpen(false);
@@ -462,6 +474,38 @@ const Profile = observer (() => {
                       <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 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'
+                          id="seed"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          onChange={(e) => setPublicKey(e.target.value)}
+                          value={publicKey}
+                        />
+                      </div>
+                      {/* Buttons */}
+                      <div className="flex flex-row z-10 justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
+                        <button
+                          className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
+                          onClick={cancelSharePanel}
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
+                          onClick={shareAccountData}
+                        >
+                          Share
+                        </button>
+                      </div>
+                    </div>
+                  </div>
                   {/* Details */}
                   <div className={`${(!(removePanelOpen || addPanelOpen) || !storeOnBlockchain) && 'hidden'} drop-shadow-lg`}>
                     {/* Top */}
@@ -524,7 +568,7 @@ const Profile = observer (() => {
                     </button>
                     <button
                       className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start"
-                      onClick={sharedDataAccount}
+                      onClick={openSharePanel}
                       >
                       <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" />

src/pages/digitalId/Verify.jsx

@@ -8,6 +8,10 @@ const Verify = observer(() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [descriptionOpen, setDescriptionOpen] = useState(false);
 
+  const openShareLink = (id) => {
+    window.open(`${window.location.origin}/#/shared-data/${id}`, '_blank')
+  }
+
   return (
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
@@ -49,7 +53,7 @@ const Verify = observer(() => {
                     {/* Buttons */}
                     <div className="flex gap-x-[6px]">
                       <div className="flex items-center">
-                        <button className="text-slate-400 hover:text-slate-500 rounded-full">
+                        <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">
                             <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" />

src/partials/Sidebar.jsx

@@ -162,19 +162,19 @@ function Sidebar({
                               </span>
                             </NavLink>
                           </li>
-                          <li className="mb-1 last:mb-0">
+                          {/*<li className="mb-1 last:mb-0">*/}
-                            <NavLink
+                          {/*  <NavLink*/}
-                              end
+                          {/*    end*/}
-                              to="/digitalId/validate"
+                          {/*    to="/digitalId/validate"*/}
-                              className={({ isActive }) =>
+                          {/*    className={({ isActive }) =>*/}
-                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
+                          {/*      'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')*/}
-                              }
+                          {/*    }*/}
-                            >
+                          {/*  >*/}
-                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
+                          {/*    <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">*/}
-                                Validate
+                          {/*      Validate*/}
-                              </span>
+                          {/*    </span>*/}
-                            </NavLink>
+                          {/*  </NavLink>*/}
-                          </li>
+                          {/*</li>*/}
                           <li className="mb-1 last:mb-0">
                             <NavLink
                               end

src/partials/sharedData/SharedDataRoadmap.jsx

@@ -15,29 +15,25 @@ function SharedDataRoadMap({ data }) {
                   <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">
+              <div className="flex flex-col max-w-3xl">
-                <h3 className="text-base font-semibold text-slate-800 pl-7">
+                <h3 className="text-base font-semibold text-slate-800 pl-7 overflow-ellipsis overflow-hidden">
-                  {data.text}
+                  {data.value}
                 </h3>
-                <span className="font-normal text-[10px] text-slate-600 pl-7">{data.typeItem}</span>
+                <span className="font-normal text-[10px] text-slate-600 pl-7">{data.label}</span>
               </div>
             </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.dataShared}</div>
+                <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.dataShared}</div>
+                <div className="text-xs font-semibold underline mb-[-10px] cursor-pointer">{data.hash.toUpperCase()}</div>
                 <span className="font-normal text-[10px]">hash</span>
               </div>
-            <div className="flex flex-nowrap items-center space-x-2 mb-3.5">
+            )}
-              {/* Avatars */}
-              <div className="flex shrink-0 -space-x-3 -ml-px pl-7">
-                {data.usersImges.map(pic => {
-                  return <ValidationUsersImg key={pic.imgId} image={pic}/>
-                })}
-              </div>
-            </div>
             <a className="cursor-pointer pl-7 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>
           </div>
         </div>

src/store/store.js

@@ -59,16 +59,16 @@ class Store {
         lastBlockID: this.nodeInfo.lastBlockID,
       })
       .then((res) => this.accountDataFetchChange(res))
-      .catch((err) => this.fetchError(err));
+      .catch((err) => this.throwError(err));
     })
-    .catch((err) => this.fetchError(err));
+    .catch((err) => this.throwError(err));
   }
 
   fetchAccountInfo() {
     fetchWrapper
     .get(`accounts/${this.address}`)
     .then((res) => this.fetchAccountInfoSuccess(res))
-    .catch((err) => this.fetchError(err));
+    .catch((err) => this.throwError(err));
   }
 
   fetchKeysArray() {
@@ -82,7 +82,7 @@ class Store {
       })
       .then((res) => this.keysArrayFetchChange(res));
     })
-    .catch((err) => this.fetchError(err));
+    .catch((err) => this.throwError(err));
   }
 
   fetchTransactionsInfo() {
@@ -92,14 +92,14 @@ class Store {
       lastBlockID: this.nodeInfo.lastBlockID,
     })
     .then((res) => this.saveInfoTransactions(res))
-    .catch((err) => this.fetchError(err));
+    .catch((err) => this.throwError(err));
   }
 
   fetchTempTransactions() {
     fetchWrapper
       .get('node/transactions')
       .then((res) => this.fetchTempTransactionsSuccess(res))
-      .catch((err) => this.fetchError(err));
+      .catch((err) => this.throwError(err));
   }
 
   fetchPassPhrase() {
@@ -110,8 +110,8 @@ class Store {
     this._keysArray.forEach((elem) => {
           fetchWrapper
               .get(`data/shared/${elem}`)
-              .then((res) => this.changeSharedData(res))
+              .then((res) => this.changeSharedData(res, elem))
-              .catch((err) => this.fetchError(err))
+              .catch((err) => this.throwError(err))
         }
     );
   }
@@ -119,10 +119,10 @@ class Store {
   fetchNodeInfo() {
     getNodeInfo()
     .then((info) => this.fetchNodeInfoSuccess(info))
-    .catch((err) => this.fetchError(err));
+    .catch((err) => this.throwError(err));
   }
 
-  pushSharedData(data) {
+  pushSharedData(data, pubKey = this.pubKey) {
     data=data.filter(item=>item.status!==statusMap.blockchained)
     if(data.length>0) {
       fetchWrapper
@@ -132,9 +132,9 @@ class Store {
                 networkIdentifier: this.nodeInfo.networkIdentifier,
                 lastBlockID: this.nodeInfo.lastBlockID,
               },
-              {publickey: this.pubKey, shared: encryptSharedData(data, this.passPhrase, this.pubKey)}
+              {publickey: pubKey, shared: encryptSharedData(data, this.passPhrase, pubKey)}
           )
-          .catch((err) => this.fetchError(err));
+          .catch((err) => this.throwError(err));
     }
   }
 
@@ -149,7 +149,7 @@ class Store {
       [...encryptAccountData(data, this.passPhrase, this.pubKey)]
     )
     .then(() => this.fetchNewAccountData())
-    .catch((err) => this.fetchError(err));
+    .catch((err) => this.throwError(err));
   }
 
   pushAccountDataToBlockchain(data = this.decryptedAccountData) {
@@ -169,7 +169,7 @@ class Store {
     if (signedTx) {
       fetchWrapper.post('transactions', {}, signedTx)
       .then(() => this.fetchTempTransactions())
-      .catch((err) => this.fetchError(err));
+      .catch((err) => this.throwError(err));
       this.accountInfo.sequence.nonce++;
     }
   }
@@ -196,9 +196,10 @@ class Store {
     this._accountData=[]
   }
 
-  changeSharedData(incomingData) {
+  changeSharedData(incomingData, id) {
     this._sharedData.push({
       data: incomingData.data,
+      id
     });
   }
 
@@ -240,7 +241,7 @@ class Store {
     this._tempTransactions = res.data;
   }
 
-  fetchError(err) {
+  throwError(err) {
     console.log(err);
   }
 
@@ -250,6 +251,7 @@ class Store {
         label: labelMap[item.label] || item.label,
         value: item.value,
       })),
+      id: elem.id
     }));
   }