diff --git a/src/App.jsx b/src/App.jsx index 5cbd399..c62916c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -42,14 +42,13 @@ const App = observer(() => { } /> } /> - } /> + {/*} />*/} } /> } /> } /> } /> } /> - } /> - } /> + } /> } /> diff --git a/src/main.jsx b/src/main.jsx index 9837e20..89dc9b4 100644 --- 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() } diff --git a/src/pages/SharedData.jsx b/src/pages/SharedData.jsx index a7af2ba..6fc84ea 100644 --- 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 ; return (
-
- {/* Content */}
-
-
-

Shared data ✨

+

+ Shared data ✨ +

    - {sharedDataItems.items.map(item => { - return( -
  • - -
    • - ); - })} + {!hasError && + decryptedData.map((item) => ( +
  • + +
    • + ))} + {hasError && + encryptedData.map((item) => ( +
  • + +
    • + ))}
-
-
{/* Image */} - -
); } diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 5dbd2c2..28de925 100644 --- 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 (() => { Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Terms. + {/* Share panel */} +
+
+
+ + setPublicKey(e.target.value)} + value={publicKey} + /> +
+ {/* Buttons */} +
+ + +
+
+
{/* Details */}
{/* Top */} @@ -524,7 +568,7 @@ const Profile = observer (() => {
-
-

- {data.text} +
+

+ {data.value}

- {data.typeItem} + {data.label}

-
-
{data.dataShared}
- seed -
-
-
{data.dataShared}
- hash -
-
- {/* Avatars */} -
- {data.usersImges.map(pic => { - return - })} + {data.seed && ( +
+
{data.seed.toUpperCase()}
+ seed
-
+ )} + {data.hash && ( +
+
{data.hash.toUpperCase()}
+ hash +
+ )} Explore ->
diff --git a/src/store/store.js b/src/store/store.js index 7b99a19..cbd9254 100644 --- 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 })); }