feat: verify and sign screen include list of file servers where a SIGIT is uploaded

src/components/UsersDetails.tsx/index.tsx

@@ -19,6 +19,7 @@ import {
   faCheck,
   faClock,
   faEye,
+  faServer,
   faFile,
   faFileCircleExclamation
 } from '@fortawesome/free-solid-svg-icons'
@@ -40,6 +41,7 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
     signers,
     viewers,
     fileHashes,
+    zipUrls,
     signersStatus,
     createdAt,
     completedAt,
@@ -100,6 +102,18 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
     return false
   }
 
+  /**
+   * Used to parse the base URL from Blossom server full path
+   */
+  const getBaseUrl = (url: string): string => {
+    try {
+      const parsedUrl = new URL(url)
+      return `${parsedUrl.protocol}//${parsedUrl.host}`
+    } catch (error) {
+      return 'Invalid URL'
+    }
+  }
+
   return submittedBy ? (
     <div className={styles.container}>
       <div className={styles.section}>
@@ -270,6 +284,19 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
             <FontAwesomeIcon icon={faFileCircleExclamation} /> &mdash;
           </>
         )}
+        <span className={styles.detailsItem}>
+          <FontAwesomeIcon icon={faEye} /> {signedStatus}
+        </span>
+      </div>
+
+      <div className={styles.section}>
+        <p>File Servers</p>
+
+        {zipUrls.map((url) => (
+          <span className={styles.detailsItem} key={url}>
+            <FontAwesomeIcon icon={faServer} /> {getBaseUrl(url)}
+          </span>
+        ))}
       </div>
     </div>
   ) : undefined