share data rework

src/pages/SharedData.jsx

@@ -1,100 +1,119 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
+import React, { useEffect, useMemo, useState } from "react";
+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 = {
-      data: localStorage.getItem('digitalId'),
-      items: [
-        {
-          dataShared: localStorage.getItem('digitalId'),
-          id: '923',
-          text: 'United Kindom',
-          typeItem: 'Residence',
-          usersImges: [
-            {
-              size: 32,
-              img: User06,
-              imgId: "90"
-            },
-            {
-              size: 32,
-              img: User08,
-              imgId: "93"
-            },
-            {
-              size: 32,
-              img: User09,
-              imgId: "89"
-            },
-          ],
-        },
-        {
-          dataShared: localStorage.getItem('digitalId'),
-          id: '401',
-          text: 'A123B3143',
-          typeItem: 'Document ID',
-          usersImges: [
-            {
-              size: 32,
-              img: User06,
-              imgId: "67"
-            },
-            {
-              size: 32,
-              img: User08,
-              imgId: "71"
-            },
-          ],
-        },
-      ]
-    };
+  const { id } = useParams();
+
+  const [address, pubKey] = id.split(":");
+
+  const passPhrase = sessionStorage.getItem("passPhrase");
+
+  useEffect(() => {
+    fetchWrapper
+    .get(`data/shared/${id}`)
+    .then((res) => setEncryptedData(res.data ?? []))
+    .catch((err) => console.log(err));
+  }, [id]);
+
+  const decryptedData = useMemo(() => {
+    return encryptedData.map((item) => {
+      let seed, value, hash;
+      try {
+        [seed, value] = cryptography
+        .decryptMessageWithPassphrase(
+          item.value,
+          item.value_nonce,
+          passPhrase,
+          pubKey
+        )
+        .split(":");
+        hash = cryptography
+        .hash(
+          Buffer.concat([
+            Buffer.from(seed, "utf8"),
+            cryptography.hash(value, "utf8"),
+          ])
+        )
+        .toString("hex");
+      } catch (err) {
+        setHasError(true);
+        console.log(err);
+      } finally {
+        return {
+          seed,
+          value,
+          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 => {
-                    return(
-                        <li key={item.id}>
-                          <SharedDataRoadMap data={item}/>
-                        </li>
-                    );
-                  })}
+                  {!hasError &&
+                    decryptedData.map((item) => (
+                      <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" />
-            <span className="text-sm">{sharedDataItems.data}</span>
-            <Link className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/dashboard">Get my digital ID</Link>
+            <img
+              className="object-cover object-center"
+              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" />