From 32bb0ce48b1c2553e5b35d94a7cb1316b1038c4f Mon Sep 17 00:00:00 2001
From: John Shaw <codetrauma@Johns-MacBook-Pro.local>
Date: Wed, 17 Apr 2024 10:07:39 +0200
Subject: [PATCH] refactor: removing unused components

---
 web/components/NotaryKey/index.scss    |  45 -------
 web/components/NotaryKey/index.tsx     |  89 -------------
 web/components/ProofDetails/index.scss |  45 -------
 web/components/ProofDetails/index.tsx  | 177 -------------------------
 web/components/ProofViewer/index.tsx   |   3 +-
 web/pages/FileDrop/index.tsx           |   4 +-
 web/utils/index.tsx                    |   2 +-
 7 files changed, 5 insertions(+), 360 deletions(-)
 delete mode 100644 web/components/NotaryKey/index.scss
 delete mode 100644 web/components/NotaryKey/index.tsx
 delete mode 100644 web/components/ProofDetails/index.scss
 delete mode 100644 web/components/ProofDetails/index.tsx

diff --git a/web/components/NotaryKey/index.scss b/web/components/NotaryKey/index.scss
deleted file mode 100644
index 9a0e07c..0000000
--- a/web/components/NotaryKey/index.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.button {
-  @apply bg-slate-100;
-  @apply text-slate-500;
-  @apply font-bold;
-  @apply px-2 py-0.5;
-  user-select: none;
-
-  &:hover {
-    @apply text-slate-600;
-    @apply bg-slate-200;
-  }
-
-  &:active {
-    @apply text-slate-700;
-    @apply bg-slate-300;
-  }
-
-  &--primary {
-    @apply bg-primary/[0.8];
-    @apply text-white;
-
-    &:hover {
-      @apply bg-primary/[0.9];
-      @apply text-white;
-    }
-
-    &:active {
-      @apply bg-primary;
-      @apply text-white;
-    }
-  }
-
-  &:disabled {
-    @apply opacity-50;
-    @apply select-none;
-
-    &:hover {
-      @apply text-slate-400;
-    }
-
-    &:active {
-      @apply text-slate-400;
-    }
-  }
-}
\ No newline at end of file
diff --git a/web/components/NotaryKey/index.tsx b/web/components/NotaryKey/index.tsx
deleted file mode 100644
index 31fad16..0000000
--- a/web/components/NotaryKey/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { FormEvent, ReactElement, useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { setKey } from '../../store/notaryKey';
-import keys from '../../utils/keys.json';
-
-export default function NotaryKey(): ReactElement {
-  const dispatch = useDispatch();
-
-  const defaultKey: string = keys.defaultKey;
-  const notaryPseKey: string = keys.notaryPseKey;
-
-  const [notaryKey, setNotaryKey] = useState<string>(notaryPseKey);
-  const [errors, setError] = useState<string | null>(null);
-
-  const isValidPEMKey = (key: string): boolean => {
-    try {
-      const trimmedKey = key.trim();
-      if (
-        !trimmedKey.startsWith('-----BEGIN PUBLIC KEY-----') ||
-        !trimmedKey.endsWith('-----END PUBLIC KEY-----')
-      ) {
-        setError('Invalid PEM format: header or footer missing');
-        return false;
-      }
-      const keyContent = trimmedKey
-        .replace('-----BEGIN PUBLIC KEY-----', '')
-        .replace('-----END PUBLIC KEY-----', '')
-        .trim();
-
-      try {
-        atob(keyContent);
-      } catch (err) {
-        setError('Invalid Base64 encoding');
-        return false;
-      }
-
-      return true;
-    } catch (err) {
-      console.error('Error validating key:', err);
-      return false;
-    }
-  };
-
-  const handleInput = (
-    e:
-      | FormEvent<HTMLTextAreaElement>
-      | React.MouseEvent<HTMLButtonElement, MouseEvent>,
-    key?: string | undefined,
-  ) => {
-    setError(null);
-    const keyInput =
-      key !== undefined
-        ? key
-        : e.currentTarget instanceof HTMLTextAreaElement
-          ? e.currentTarget.value
-          : '';
-    if (isValidPEMKey(keyInput)) {
-      setNotaryKey(keyInput);
-      dispatch(setKey(keyInput));
-    } else {
-      setNotaryKey(keyInput);
-    }
-  };
-
-  return (
-    <details className="w-3/4 mx-auto">
-      <summary className="text-2xl font-bold cursor-pointer">
-        Change Notary Public Key:
-      </summary>
-      <textarea
-        className="w-full h-40 rounded bg-gray-800 text-white resize-none mt-4 p-4"
-        value={notaryKey}
-        onChange={(e) => handleInput(e)}
-      />
-      {errors && <p className="text-red-500 mt-2">{errors}</p>}
-      <div className="flex mt-4">
-        <button
-          className="button"
-          onClick={(e) => handleInput(e, notaryPseKey)}
-        >
-          notary.pse.dev
-        </button>
-        <button className="button" onClick={(e) => handleInput(e, defaultKey)}>
-          Default
-        </button>
-      </div>
-    </details>
-  );
-}
diff --git a/web/components/ProofDetails/index.scss b/web/components/ProofDetails/index.scss
deleted file mode 100644
index 9a0e07c..0000000
--- a/web/components/ProofDetails/index.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.button {
-  @apply bg-slate-100;
-  @apply text-slate-500;
-  @apply font-bold;
-  @apply px-2 py-0.5;
-  user-select: none;
-
-  &:hover {
-    @apply text-slate-600;
-    @apply bg-slate-200;
-  }
-
-  &:active {
-    @apply text-slate-700;
-    @apply bg-slate-300;
-  }
-
-  &--primary {
-    @apply bg-primary/[0.8];
-    @apply text-white;
-
-    &:hover {
-      @apply bg-primary/[0.9];
-      @apply text-white;
-    }
-
-    &:active {
-      @apply bg-primary;
-      @apply text-white;
-    }
-  }
-
-  &:disabled {
-    @apply opacity-50;
-    @apply select-none;
-
-    &:hover {
-      @apply text-slate-400;
-    }
-
-    &:active {
-      @apply text-slate-400;
-    }
-  }
-}
\ No newline at end of file
diff --git a/web/components/ProofDetails/index.tsx b/web/components/ProofDetails/index.tsx
deleted file mode 100644
index 451dcdd..0000000
--- a/web/components/ProofDetails/index.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, { ReactElement, useState, useCallback, useEffect } from 'react';
-import { formatStrings, formatTime, extractHTML } from '../../utils';
-import { useSelector, useDispatch } from 'react-redux';
-import ProofSelect from '../ProofSelect';
-import Modal, { ModalContent, ModalHeader, ModalFooter } from '../Modal';
-import { copyText } from '../../utils';
-import { useSelectedProof } from '../../store/proofupload';
-import { uploadFileToIpfs } from '../../store/upload';
-import Icon from '../Icon';
-
-interface ProofDetailsProps {
-  proof: any;
-  cid?: string;
-  file?: File | null;
-}
-
-const ProofDetails: React.FC<ProofDetailsProps> = ({
-  proof,
-  cid,
-  file,
-}): ReactElement => {
-  const dispatch = useDispatch();
-  const selectedProof = useSelectedProof();
-
-  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(() => {
-    if (file) {
-      setFileToUpload(file);
-    }
-  }, [file]);
-
-  const closeModal = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  const openModal = useCallback(() => {
-    setIsOpen(true);
-  }, []);
-
-  const handleAccept = useCallback(async () => {
-    try {
-      if (!fileToUpload) {
-        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);
-    }
-  }, [fileToUpload]);
-
-  const handleCopyClick: React.MouseEventHandler<HTMLButtonElement> = async (
-    e,
-  ) => {
-    e.preventDefault();
-    await copyText(inputValue);
-  };
-
-  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}`;
-
-  // TODO - Format proof details for redacted data
-
-  return (
-    <div>
-      {proofToDisplay && (
-        <div className="flex flex-col gap-3 text-left items-center">
-          <div className="flex flex-row gap-3">
-            {proofs.length > 1 && <ProofSelect />}
-            <button
-              onClick={openModal}
-              className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
-            >
-              Share
-            </button>
-            {isOpen && (
-              <Modal
-                className="flex flex-col items-center justify-center w-11/12 md:w-3/4 lg:w-2/4 h-auto md:h-auto lg:h-auto bg-white rounded-lg p-4 gap-4"
-                onClose={closeModal}
-              >
-                <ModalHeader onClose={closeModal}>Share Proof</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>
-                  {!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>
-                    ))}
-                  {isUploading && (
-                    <Icon
-                      className="animate-spin"
-                      fa="fa-solid fa-spinner"
-                      size={1}
-                    />
-                  )}
-                </ModalContent>
-                <ModalFooter>
-                  <button
-                    className="m-0 w-24 bg-slate-600 text-slate-200 hover:bg-slate-500 hover:text-slate-100 hover:font-bold"
-                    onClick={closeModal}
-                  >
-                    Close
-                  </button>
-                </ModalFooter>
-              </Modal>
-            )}
-          </div>
-          <span className="font-bold text-2xl">Server Domain:</span>
-          <div className="flex items-center h-12 w-4/5 bg-gray-800 text-white rounded">
-            {proofToDisplay.serverName}
-          </div>
-          <span className="font-bold text-2xl">Notarization Time:</span>
-          <div className="flex items-center h-12 w-4/5 bg-gray-800 text-white rounded">
-            {formatTime(proofToDisplay.time)} UTC
-          </div>
-          <span className="font-bold text-2xl">Proof:</span>
-          <div className="flex items-center h-12 w-4/5 bg-gray-800 text-white rounded">
-            ✅ Proof Successfully Verified ✅
-          </div>
-          <details open className="w-4/5 items-center">
-            <summary className="text-2xl font-bold cursor-pointer text-center">
-              Bytes Sent:
-            </summary>
-            {formatStrings(proofToDisplay.sent)}
-          </details>
-          <details open className="w-4/5 items-center">
-            <summary className="text-2xl font-bold cursor-pointer text-center">
-              Received HTML content:
-            </summary>
-            {extractHTML(proofToDisplay.recv)}
-          </details>
-          <details open className="w-4/5 items-center">
-            <summary className="text-2xl font-bold cursor-pointer text-center">
-              Bytes Received:
-            </summary>
-            {formatStrings(proofToDisplay.recv)}
-          </details>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ProofDetails;
diff --git a/web/components/ProofViewer/index.tsx b/web/components/ProofViewer/index.tsx
index 0e5f964..c38e253 100644
--- a/web/components/ProofViewer/index.tsx
+++ b/web/components/ProofViewer/index.tsx
@@ -6,7 +6,6 @@ import React, {
   useCallback,
 } from 'react';
 import c from 'classnames';
-import classNames from 'classnames';
 import { Proof as VerifiedProof } from '../../utils/types/types';
 import { Proof } from 'tlsn-js/build/types';
 import Modal, { ModalContent, ModalFooter, ModalHeader } from '../Modal';
@@ -44,7 +43,7 @@ export default function ProofViewer(props: {
   }, [props.file, props.verifiedProof, props.proof]);
 
   return (
-    <div className={classNames('flex flex-col py-2 gap-2', props.className)}>
+    <div className={c('flex flex-col py-2 gap-2', props.className)}>
       {showingShareWarning && (
         <ShareWarningModal
           onClose={() => showShareWarning(false)}
diff --git a/web/pages/FileDrop/index.tsx b/web/pages/FileDrop/index.tsx
index 28cc71a..4355110 100644
--- a/web/pages/FileDrop/index.tsx
+++ b/web/pages/FileDrop/index.tsx
@@ -6,6 +6,8 @@ import ProofViewer from '../../components/ProofViewer';
 import { Proof as VerifiedProof } from '../../utils/types/types';
 import { FileDropdown } from '../../components/FileDropdown';
 import { PubkeyInput } from '../PubkeyInput';
+import type { Proof } from 'tlsn-js/build/types';
+
 
 export default function FileDrop(): ReactElement {
   const dispatch = useDispatch();
@@ -19,7 +21,7 @@ export default function FileDrop(): ReactElement {
   const [pubkey, setPubkey] = useState('');
   const [uploading, setUploading] = useState(false);
 
-  const onVerify = useCallback(async (json: any, key = '') => {
+  const onVerify = useCallback(async (json: Proof, key = '') => {
     const { verify } = await import('tlsn-js');
     const resp = await verify(json, key);
     setVerifiedProof(resp);
diff --git a/web/utils/index.tsx b/web/utils/index.tsx
index 208ec21..aa9caff 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> => {
   return new Promise((resolve, reject) => {