share data rework

2022-09-08 13:20:51 +03:00
parent b68ef748ca
commit 4f73075cf9
8 changed files with 191 additions and 124 deletions
--- a/src/App.jsx
+++ b/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="/reset-password" element={<ResetPassword />} />
+        <Route path="/shared-data/:id" element={<SharedData />} />
        <Route path="/signIn" element={<SignIn />} />
      </Routes>
    </>
--- a/src/main.jsx
+++ b/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()
 }
--- a/src/pages/SharedData.jsx
+++ b/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>
  );
 }
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/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" />
--- a/src/pages/digitalId/Verify.jsx
+++ b/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" />
--- a/src/partials/Sidebar.jsx
+++ b/src/partials/Sidebar.jsx
@@ -162,19 +162,19 @@ function Sidebar({
                              </span>
                            </NavLink>
                          </li>
-                          <li className="mb-1 last:mb-0">
-                            <NavLink
-                              end
-                              to="/digitalId/validate"
-                              className={({ isActive }) =>
-                                '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">
-                                Validate
-                              </span>
-                            </NavLink>
-                          </li>
+                          {/*<li className="mb-1 last:mb-0">*/}
+                          {/*  <NavLink*/}
+                          {/*    end*/}
+                          {/*    to="/digitalId/validate"*/}
+                          {/*    className={({ isActive }) =>*/}
+                          {/*      '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">*/}
+                          {/*      Validate*/}
+                          {/*    </span>*/}
+                          {/*  </NavLink>*/}
+                          {/*</li>*/}
                          <li className="mb-1 last:mb-0">
                            <NavLink
                              end
--- a/src/partials/sharedData/SharedDataRoadmap.jsx
+++ b/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">
-                <h3 className="text-base font-semibold text-slate-800 pl-7">
-                  {data.text}
+              <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.typeItem}</span>
+                <span className="font-normal text-[10px] text-slate-600 pl-7">{data.label}</span>
              </div>
            </div>
-            <div className="block text-slate-600 w-fit pl-7">
-              <div className="text-xs font-semibold underline mb-[-10px] cursor-pointer">{data.dataShared}</div>
-              <span className="font-normal text-[10px]">seed</span>
-            </div>
-            <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>
-              <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}/>
-                })}
+            {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>
-            </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>
        </div>
--- a/src/store/store.js
+++ b/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))
-              .catch((err) => this.fetchError(err))
+              .then((res) => this.changeSharedData(res, elem))
+              .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
    }));
  }