From 19b815e52819b3e79c41e6f8d5c076bb6d7fd6b6 Mon Sep 17 00:00:00 2001
From: Eugene <eugene@nostrdev.com>
Date: Thu, 24 Oct 2024 12:42:21 +0300
Subject: [PATCH] feat(opentimestamps): updates tooltip

---
 src/components/UsersDetails.tsx/index.tsx     | 101 ++++++++++++++++--
 .../UsersDetails.tsx/style.module.scss        |   6 +-
 src/pages/verify/index.tsx                    |   5 +-
 3 files changed, 103 insertions(+), 9 deletions(-)

diff --git a/src/components/UsersDetails.tsx/index.tsx b/src/components/UsersDetails.tsx/index.tsx
index 778a3d9..25ccf7f 100644
--- a/src/components/UsersDetails.tsx/index.tsx
+++ b/src/components/UsersDetails.tsx/index.tsx
@@ -4,6 +4,7 @@ import {
   fromUnixTimestamp,
   hexToNpub,
   npubToHex,
+  SigitStatus,
   SignStatus
 } from '../../utils'
 import { useSigitMeta } from '../../hooks/useSigitMeta'
@@ -15,6 +16,8 @@ import {
   faCalendar,
   faCalendarCheck,
   faCalendarPlus,
+  faCheck,
+  faClock,
   faEye,
   faFile,
   faFileCircleExclamation
@@ -22,7 +25,7 @@ import {
 import { getExtensionIconLabel } from '../getExtensionIconLabel'
 import { useAppSelector } from '../../hooks/store'
 import { DisplaySigner } from '../DisplaySigner'
-import { Meta } from '../../types'
+import { Meta, OpenTimestamp } from '../../types'
 import { extractFileExtensions } from '../../utils/file'
 import { UserAvatar } from '../UserAvatar'
 
@@ -42,7 +45,9 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
     completedAt,
     parsedSignatureEvents,
     signedStatus,
-    isValid
+    isValid,
+    id,
+    timestamps
   } = useSigitMeta(meta)
   const { usersPubkey } = useAppSelector((state) => state.auth)
   const userCanSign =
@@ -51,6 +56,50 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
 
   const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
 
+  const isTimestampVerified = (
+    timestamps: OpenTimestamp[],
+    nostrId: string
+  ): boolean => {
+    const matched = timestamps.find((t) => t.nostrId === nostrId)
+    return !!(matched && matched.verification)
+  }
+
+  const getOpenTimestampsInfo = (
+    timestamps: OpenTimestamp[],
+    nostrId: string
+  ) => {
+    if (isTimestampVerified(timestamps, nostrId)) {
+      return <FontAwesomeIcon icon={faCheck} />
+    } else {
+      return <FontAwesomeIcon icon={faClock} />
+    }
+  }
+
+  const getCompletedOpenTimestampsInfo = (timestamp: OpenTimestamp) => {
+    if (timestamp.verification) {
+      return <FontAwesomeIcon icon={faCheck} />
+    } else {
+      return <FontAwesomeIcon icon={faClock} />
+    }
+  }
+
+  const getTimestampTooltipTitle = (label: string, isVerified: boolean) => {
+    return `${label} / Open Timestamp ${isVerified ? 'Verified' : 'Pending'}`
+  }
+
+  const isUserSignatureTimestampVerified = () => {
+    if (
+      userCanSign &&
+      hexToNpub(usersPubkey) in parsedSignatureEvents &&
+      timestamps &&
+      timestamps.length > 0
+    ) {
+      const nostrId = parsedSignatureEvents[hexToNpub(usersPubkey)].id
+      return isTimestampVerified(timestamps, nostrId)
+    }
+    return false
+  }
+
   return submittedBy ? (
     <div className={styles.container}>
       <div className={styles.section}>
@@ -115,19 +164,36 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
         <p>Details</p>
 
         <Tooltip
-          title={'Publication date'}
+          title={getTimestampTooltipTitle(
+            'Publication date',
+            !!(timestamps && id && isTimestampVerified(timestamps, id))
+          )}
           placement="top"
           arrow
           disableInteractive
         >
           <span className={styles.detailsItem}>
             <FontAwesomeIcon icon={faCalendarPlus} />{' '}
-            {createdAt ? formatTimestamp(createdAt) : <>&mdash;</>}
+            {createdAt ? formatTimestamp(createdAt) : <>&mdash;</>}{' '}
+            {timestamps && timestamps.length > 0 && id && (
+              <span className={styles.ticket}>
+                {getOpenTimestampsInfo(timestamps, id)}
+              </span>
+            )}
           </span>
         </Tooltip>
 
         <Tooltip
-          title={'Completion date'}
+          title={getTimestampTooltipTitle(
+            'Completion date',
+            !!(
+              signedStatus === SigitStatus.Complete &&
+              completedAt &&
+              timestamps &&
+              timestamps.length > 0 &&
+              timestamps[timestamps.length - 1].verification
+            )
+          )}
           placement="top"
           arrow
           disableInteractive
@@ -135,13 +201,26 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
           <span className={styles.detailsItem}>
             <FontAwesomeIcon icon={faCalendarCheck} />{' '}
             {completedAt ? formatTimestamp(completedAt) : <>&mdash;</>}
+            {signedStatus === SigitStatus.Complete &&
+              completedAt &&
+              timestamps &&
+              timestamps.length > 0 && (
+                <span className={styles.ticket}>
+                  {getCompletedOpenTimestampsInfo(
+                    timestamps[timestamps.length - 1]
+                  )}
+                </span>
+              )}
           </span>
         </Tooltip>
 
         {/* User signed date */}
         {userCanSign ? (
           <Tooltip
-            title={'Your signature date'}
+            title={getTimestampTooltipTitle(
+              'Your signature date',
+              isUserSignatureTimestampVerified()
+            )}
             placement="top"
             arrow
             disableInteractive
@@ -161,6 +240,16 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
               ) : (
                 <>&mdash;</>
               )}
+              {hexToNpub(usersPubkey) in parsedSignatureEvents &&
+                timestamps &&
+                timestamps.length > 0 && (
+                  <span className={styles.ticket}>
+                    {getOpenTimestampsInfo(
+                      timestamps,
+                      parsedSignatureEvents[hexToNpub(usersPubkey)].id
+                    )}
+                  </span>
+                )}
             </span>
           </Tooltip>
         ) : null}
diff --git a/src/components/UsersDetails.tsx/style.module.scss b/src/components/UsersDetails.tsx/style.module.scss
index 9d906c1..af18b04 100644
--- a/src/components/UsersDetails.tsx/style.module.scss
+++ b/src/components/UsersDetails.tsx/style.module.scss
@@ -31,8 +31,6 @@
   padding: 5px;
 
   display: flex;
-  align-items: center;
-  justify-content: start;
 
   > :first-child {
     padding: 5px;
@@ -44,3 +42,7 @@
     color: white;
   }
 }
+
+.ticket {
+  margin-left: auto;
+}
diff --git a/src/pages/verify/index.tsx b/src/pages/verify/index.tsx
index 0718cd6..8f70528 100644
--- a/src/pages/verify/index.tsx
+++ b/src/pages/verify/index.tsx
@@ -294,7 +294,9 @@ export const VerifyPage = () => {
               return timestamp
             })
 
-          if (upgradedUserTimestamps.length > 0) {
+          console.log('upgraded timestamps: ', upgradedTimestamps)
+
+          if (upgradedUserTimestamps.length === 0) {
             return
           }
 
@@ -323,6 +325,7 @@ export const VerifyPage = () => {
           updatedMeta.modifiedAt = unixNow()
 
           const updatedEvent = await updateUsersAppData(updatedMeta)
+          console.log('updated event: ', updatedEvent)
           if (!updatedEvent) return
 
           const userSet = new Set<`npub1${string}`>()