From 29c4e79283a6d122351ed9dcbbf3f005634901bd Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Mon, 3 Oct 2022 17:14:22 -0700
Subject: [PATCH] Add tooltip for author, close time, volume

---
 web/components/contract/contract-mention.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/web/components/contract/contract-mention.tsx b/web/components/contract/contract-mention.tsx
index 75844f4c..bdae9957 100644
--- a/web/components/contract/contract-mention.tsx
+++ b/web/components/contract/contract-mention.tsx
@@ -1,7 +1,9 @@
 import clsx from 'clsx'
 import { Contract } from 'common/contract'
+import { formatMoney } from 'common/util/format'
 import Link from 'next/link'
 import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
+import { fromNow } from 'web/lib/util/time'
 import { BinaryContractOutcomeLabel } from '../outcome-label'
 import { getColor } from './quick-bet'
 
@@ -14,7 +16,7 @@ export function ContractMention(props: { contract: Contract }) {
     <Link href={contractPath(contract)}>
       <a
         className="group inline whitespace-nowrap rounded-sm hover:bg-indigo-50 focus:bg-indigo-50"
-        title={outcomeType}
+        title={tooltipLabel(contract)}
       >
         <span className="break-anywhere mr-0.5 whitespace-normal font-normal text-indigo-700">
           {contract.question}
@@ -41,3 +43,12 @@ export function ContractMention(props: { contract: Contract }) {
     </Link>
   )
 }
+
+function tooltipLabel(contract: Contract) {
+  const { resolutionTime, creatorName, volume, closeTime = 0 } = contract
+  const dateFormat = resolutionTime
+    ? `Resolved ${fromNow(resolutionTime)}`
+    : `${closeTime < Date.now() ? 'Closed' : 'Closes'} ${fromNow(closeTime)}`
+
+  return `By ${creatorName}. ${formatMoney(volume)} bet. ${dateFormat}`
+}