From d81347f014ce0c193df0db45028b115ef648e6e3 Mon Sep 17 00:00:00 2001
From: John Shaw <codetrauma@Johns-MacBook-Pro.local>
Date: Tue, 16 Apr 2024 07:59:50 +0200
Subject: [PATCH 1/2] chore: fixed selectedProof not selecting new proof on
 upload

---
 package-lock.json                     | 14 +++++++-------
 web/components/FileUpload/index.tsx   |  2 +-
 web/components/ProofDetails/index.tsx |  2 +-
 web/components/ProofSelect/index.tsx  | 13 +++++++------
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 51edec9..fa81b68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,7 @@
         "redux-thunk": "^2.4.2",
         "stream": "^0.0.2",
         "tailwindcss": "^3.3.3",
-        "tlsn-js": "^0.1.0-alpha.4.3"
+        "tlsn-js": "^0.1.0-alpha.5.2"
       },
       "devDependencies": {
         "@babel/core": "^7.20.12",
@@ -19481,9 +19481,9 @@
       "dev": true
     },
     "node_modules/tlsn-js": {
-      "version": "0.1.0-alpha.4.3",
-      "resolved": "https://registry.npmjs.org/tlsn-js/-/tlsn-js-0.1.0-alpha.4.3.tgz",
-      "integrity": "sha512-3E9i9aQE42gW3a6zsmjfqomDgG1baqj6D1z5dp40Q8b6oETpSpAKDN021tfs9woLyI0xRWxO1tBcd7gnVtK7zw==",
+      "version": "0.1.0-alpha.5.2",
+      "resolved": "https://registry.npmjs.org/tlsn-js/-/tlsn-js-0.1.0-alpha.5.2.tgz",
+      "integrity": "sha512-5QEAzjOPLrw7TN5nRYphUbVBihZ2ufIQ+BcKnTw+0MejqZHo9pUcjHGkrkt9EfhdkC2zsWWKbDZXlAPxwaPtOQ==",
       "dependencies": {
         "comlink": "^4.4.1"
       },
@@ -34888,9 +34888,9 @@
       "dev": true
     },
     "tlsn-js": {
-      "version": "0.1.0-alpha.4.3",
-      "resolved": "https://registry.npmjs.org/tlsn-js/-/tlsn-js-0.1.0-alpha.4.3.tgz",
-      "integrity": "sha512-3E9i9aQE42gW3a6zsmjfqomDgG1baqj6D1z5dp40Q8b6oETpSpAKDN021tfs9woLyI0xRWxO1tBcd7gnVtK7zw==",
+      "version": "0.1.0-alpha.5.2",
+      "resolved": "https://registry.npmjs.org/tlsn-js/-/tlsn-js-0.1.0-alpha.5.2.tgz",
+      "integrity": "sha512-5QEAzjOPLrw7TN5nRYphUbVBihZ2ufIQ+BcKnTw+0MejqZHo9pUcjHGkrkt9EfhdkC2zsWWKbDZXlAPxwaPtOQ==",
       "requires": {
         "comlink": "^4.4.1"
       }
diff --git a/web/components/FileUpload/index.tsx b/web/components/FileUpload/index.tsx
index ae37ae7..13cf8fc 100644
--- a/web/components/FileUpload/index.tsx
+++ b/web/components/FileUpload/index.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { uploadFile } from '../../store/proofupload';
+import { uploadFile, selectProof } from '../../store/proofupload';
 import { readFileAsync } from '../../utils';
 import NotaryKey from '../NotaryKey';
 import ProofDetails from '../ProofDetails';
diff --git a/web/components/ProofDetails/index.tsx b/web/components/ProofDetails/index.tsx
index e95f11f..390b526 100644
--- a/web/components/ProofDetails/index.tsx
+++ b/web/components/ProofDetails/index.tsx
@@ -64,7 +64,7 @@ const ProofDetails: React.FC<ProofDetailsProps> = ({proof, cid, file}): ReactEle
   const proofToDisplay = selectedProof?.proof || proof;
   const inputValue = process.env.NODE_ENV === "development"
     ? `http://localhost:3000/${selectedProof?.ipfsCID ? selectedProof?.ipfsCID : cid}`
-    : `www.tlsnexplorer.com/${selectedProof?.ipfsCID ? selectedProof?.ipfsCID : cid}`;
+    : `https://explorer-tlsn.pse.dev/${selectedProof?.ipfsCID ? selectedProof?.ipfsCID : cid}`;
 
   // TODO - Format proof details for redacted data
 
diff --git a/web/components/ProofSelect/index.tsx b/web/components/ProofSelect/index.tsx
index 0cc06fe..b20de2a 100644
--- a/web/components/ProofSelect/index.tsx
+++ b/web/components/ProofSelect/index.tsx
@@ -1,18 +1,19 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectProof } from '../../store/proofupload';
+import { selectProof, useSelectedProof } from '../../store/proofupload';
 
 export default function ProofSelect(): ReactElement {
   const dispatch = useDispatch();
-
+  const selectedProof = useSelectedProof();
   const proofs = useSelector((state: any) => state.proofUpload.proofs);
 
 
-  const handleChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
+
+  const handleChange = useCallback(async (e: React.ChangeEvent<HTMLSelectElement>) => {
     const selectedIndex = e.target.selectedIndex;
     const proof = proofs[selectedIndex - 1];
     dispatch(selectProof(proof));
-  }
+  }, []);
 
   return (
     <div className='flex flex-row m-auto items-center h-10 bg-gray-800 rounded gap-4 text-black'>
@@ -20,7 +21,7 @@ export default function ProofSelect(): ReactElement {
       <select onChange={handleChange} className='bg-gray-800 text-white font-bold'>
         <option disabled className='font-bold'>Select a proof</option>
         {proofs && proofs.map((proof: any, index: number) => (
-          <option key={index} className='bg-gray-800 text-white font-bold'>
+          <option key={index} className='bg-gray-800 text-white font-bold' selected={selectedProof === proof ? selectedProof : proof}>
             {proof.fileName}
           </option>
         ))}

From 5603c8ac697080e121cb438cb88f89068fe42ee6 Mon Sep 17 00:00:00 2001
From: John Shaw <codetrauma@Johns-MacBook-Pro.local>
Date: Tue, 16 Apr 2024 08:42:35 +0200
Subject: [PATCH 2/2] refactor: refactoring file upload

---
 server/index.tsx                      |  1 -
 web/components/ProofDetails/index.tsx |  4 +--
 web/components/SharedProof/index.tsx  | 41 ++++++---------------------
 web/utils/index.tsx                   |  2 +-
 4 files changed, 11 insertions(+), 37 deletions(-)

diff --git a/server/index.tsx b/server/index.tsx
index 72268d1..f59fbed 100644
--- a/server/index.tsx
+++ b/server/index.tsx
@@ -95,7 +95,6 @@ app.get('/ipfs/:cid', async (req, res) => {
 
   const imgUrl= 'data:image/png;base64,' + img.toString('base64');
 
-  console.log(imgUrl);
   res.send(`
     <!DOCTYPE html>
     <html lang="en">
diff --git a/web/components/ProofDetails/index.tsx b/web/components/ProofDetails/index.tsx
index 390b526..c93e389 100644
--- a/web/components/ProofDetails/index.tsx
+++ b/web/components/ProofDetails/index.tsx
@@ -63,8 +63,8 @@ const ProofDetails: React.FC<ProofDetailsProps> = ({proof, cid, file}): ReactEle
 
   const proofToDisplay = selectedProof?.proof || proof;
   const inputValue = process.env.NODE_ENV === "development"
-    ? `http://localhost:3000/${selectedProof?.ipfsCID ? selectedProof?.ipfsCID : cid}`
-    : `https://explorer-tlsn.pse.dev/${selectedProof?.ipfsCID ? selectedProof?.ipfsCID : cid}`;
+    ? `http://localhost:3000/ipfs/${selectedProof?.ipfsCID ? selectedProof?.ipfsCID : cid}`
+    : `https://explorer-tlsn.pse.dev/ipfs/${selectedProof?.ipfsCID ? selectedProof?.ipfsCID : cid}`;
 
   // TODO - Format proof details for redacted data
 
diff --git a/web/components/SharedProof/index.tsx b/web/components/SharedProof/index.tsx
index fb35a40..a99ee2d 100644
--- a/web/components/SharedProof/index.tsx
+++ b/web/components/SharedProof/index.tsx
@@ -6,48 +6,23 @@ import NotaryKey from '../NotaryKey';
 import { fetchProofFromIPFS, useIPFSProof } from '../../store/proofs';
 import { useDispatch } from 'react-redux';
 
+
 export default function SharedProof(): ReactElement {
   const { cid } = useParams();
   const [errors, setErrors] = useState<string | null>(null);
+
+
   const notaryKey = useNotaryKey();
   const proofData = useIPFSProof(cid);
   const dispatch = useDispatch();
 
   useEffect(() => {
+    dispatch(fetchProofFromIPFS(cid!, notaryKey))
+    .catch(e => {
+      console.error(e);
+      setErrors(e.message);
+    });
 
-    async function fetchFile() {
-      if (!cid) {
-        setErrors('No CID provided');
-        return;
-      }
-      const response = await fetch(`/gateway/ipfs/${cid}`);
-      if (!response.ok) {
-        setErrors('Failed to fetch file from IPFS');
-        throw new Error('Failed to fetch file from IPFS');
-      }
-      const data = await response.json();
-      try {
-        let pubKey: any;
-        if (data.notaryUrl) {
-          const notaryFetch = await fetch(data.notaryUrl + '/info');
-          const notaryData = await notaryFetch.json();
-          pubKey = notaryData.publicKey;
-        }
-
-        const proof = await verify(data, pubKey || notaryKey);
-
-        setVerifiedProof(proof);
-
-      } catch (e) {
-        setErrors('Provide a valid public key')
-      }
-      return data;
-    }
-    dispatch(fetchProofFromIPFS(cid, notaryKey))
-      .catch(e => {
-        console.error(e);
-        setErrors(e.message);
-      });
   }, [cid, notaryKey]);
 
   return (
diff --git a/web/utils/index.tsx b/web/utils/index.tsx
index 6c99543..5872f63 100644
--- a/web/utils/index.tsx
+++ b/web/utils/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useRef } from 'react';
+import React, { ReactElement } from 'react';
 
 
 export const readFileAsync = (file: File): Promise<string> => {