Merge pull request #11 from tlsnotary/pubkey-fetch

Public key fetched from notaryUrl in proofs

.gitignore

@@ -1,5 +1,6 @@
 **/node_modules
 **/.DS_Store
+**/target
 .idea
 build
 .env

web/components/FileUpload/index.tsx

@@ -34,7 +34,13 @@ export default function FileDrop(): ReactElement {
     const { verify } = await import('tlsn-js');
 
     try {
-      verifiedProof = await verify(JSON.parse(proofContent), notaryKey);
+      let pubKey: any;
+      if (JSON.parse(proofContent).notaryUrl) {
+        const notaryFetch = await fetch(JSON.parse(proofContent).notaryUrl + '/info');
+        const notaryData = await notaryFetch.json();
+        pubKey = notaryData.publicKey;
+      }
+      verifiedProof = await verify(JSON.parse(proofContent), pubKey || notaryKey);
       setVerifiedProof(verifiedProof);
     } catch(e) {
       setError(e as string);

web/components/ProofDetails/index.tsx

@@ -21,7 +21,7 @@ const ProofDetails: React.FC<ProofDetailsProps> = ({proof, cid, file}): ReactEle
   const [isOpen, setIsOpen] = useState(false);
   const [accepted, setAccepted] = useState(false);
   const [fileToUpload, setFileToUpload] = useState<File | null>(null);
-
+  const [isUploading, setIsUploading] = useState(false);
   const proofs = useSelector((state: any) => state.proofUpload.proofs);
 
   useEffect(() => {
@@ -45,9 +45,11 @@ const ProofDetails: React.FC<ProofDetailsProps> = ({proof, cid, file}): ReactEle
         console.error('No file to upload, state might be out of sync');
         return;
       }
+      setIsUploading(true);
       const uploadedFile = fileToUpload;
       await dispatch(uploadFileToIpfs(uploadedFile));
       setAccepted(true);
+      setIsUploading(false);
     } catch (e) {
       console.error(e);
     }
@@ -84,24 +86,34 @@ const ProofDetails: React.FC<ProofDetailsProps> = ({proof, cid, file}): ReactEle
             </ModalHeader>
             <ModalContent className="flex flex-col items-center text-center gap-4">
             <p className='text-red-500 font-bold'>This will make your proof publicly accessible by anyone with the CID</p>
-            {!accepted ? (
-              <button className="m-0 w-32 bg-red-200 text-red-500 hover:bg-red-200 hover:text-red-500 hover:font-bold" onClick={handleAccept}>
-            I understand
-            </button>
-            ) : (
-              <div className="relative w-11/12">
-                <input
-                  readOnly
-                  value={inputValue}
-                  className="w-full h-12 bg-gray-800 text-white rounded px-3 pr-10" // Added pr-10 for padding on the right
-                />
-                <button
+            {!isUploading && (
+              accepted ? (
+                <div className="relative w-11/12">
+                  <input
+                    readOnly
+                    value={inputValue}
+                    className="w-full h-12 bg-gray-800 text-white rounded px-3 pr-10" // Added pr-10 for padding on the right
+                  />
+                  <button
                   className="absolute top-0 right-0 w-10 h-12 bg-gray-700 text-white flex items-center justify-center hover:bg-gray-500 rounded-r focus:outline-none focus:ring focus:border-blue-500"
                   onClick={handleCopyClick}
-                >
+                  >
                   <Icon className="fas fa-copy" size={1}/>
+                  </button>
+                  </div>
+
+              ) : (
+                <button className="m-0 w-32 bg-red-200 text-red-500 hover:bg-red-200 hover:text-red-500 hover:font-bold" onClick={handleAccept}>
+                  I understand
                 </button>
-              </div>
+              )
+            )}
+            {isUploading && (
+              <Icon
+              className="animate-spin"
+              fa="fa-solid fa-spinner"
+              size={1}
+              />
             )}
             </ModalContent>
             <ModalFooter>

web/components/SharedProof/index.tsx

@@ -14,9 +14,34 @@ export default function SharedProof(): ReactElement {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!cid) {
-      setErrors('No IPFS CID found');
-      return;
+
+    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 => {

web/store/notaryKey.ts

@@ -3,14 +3,13 @@ import { useSelector } from 'react-redux';
 import keys from '../utils/keys.json';
 
 export enum ActionType {
-  SetKey = 'notaryKey/setKey'
+  SetKey = 'notaryKey/setKey',
 }
 
 export const setKey = (key: string) => ({
   type: ActionType.SetKey,
-  payload: key
-})
-
+  payload: key,
+});
 
 export type Action<payload = any> = {
   type: ActionType;
@@ -19,26 +18,24 @@ export type Action<payload = any> = {
   meta?: any;
 };
 
-
 type State = {
   key: string;
-}
+};
 
 const initState: State = {
-  key: keys.defaultKey
-}
-
+  key: keys.notaryPseKey,
+};
 
 function handleKey(state: State, action: Action): State {
   return {
     ...state,
-    key: action.payload
-  }
+    key: action.payload,
+  };
 }
 
 export const useNotaryKey = () => {
   return useSelector((state: AppRootState) => state.notaryKey.key);
-}
+};
 
 export default function notaryKey(state = initState, action: Action): State {
   switch (action.type) {