From 9dd16c98515571c2a95933c1d0ac526fba28fa35 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sun, 20 Mar 2022 11:39:32 -0700
Subject: [PATCH] Only show both comment & bet if they differ

---
 web/pages/[username]/[contractSlug].tsx | 83 +++++++++++++------------
 1 file changed, 44 insertions(+), 39 deletions(-)

diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index bb656225..487942d5 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -261,16 +261,11 @@ function ContractTopTrades(props: {
   comments: Comment[]
 }) {
   const { contract, bets, comments } = props
-
-  // Also find the highest-profit comment (by profit? by percent?).
-  // This could be a resolved buy,
-  // Harder: a sold bet (have to link sold )
-  // (not sure how to account for CFMM share redemptions...?)
+  const commentsById = _.keyBy(comments, 'id')
+  const betsById = _.keyBy(bets, 'id')
 
   // If 'id2' is the sale of 'id1', both are logged with (id2 - id1) of profit
   // Otherwise, we record the profit at resolution time
-  const commentsById = _.keyBy(comments, 'id')
-  const betsById = _.keyBy(bets, 'id')
   const profitById: Record<string, number> = {}
   for (const bet of bets) {
     if (bet.sale) {
@@ -284,43 +279,53 @@ function ContractTopTrades(props: {
   }
 
   // Now find the betId with the highest profit
-  const topBetId = _.sortBy(bets, (b) => -profitById[b.id])[0].id
+  const topBetId = _.sortBy(bets, (b) => -profitById[b.id])[0]?.id
   const topBettor = useUserById(betsById[topBetId].userId)
 
-  // And also the betId of the comment with the highest profit
-  const topCommentId = _.sortBy(comments, (c) => -profitById[c.id])[0].id
+  // And also the commentId of the comment with the highest profit
+  const topCommentId = _.sortBy(comments, (c) => -profitById[c.betId])[0]?.id
 
-  // TODO: If they're the same, only show the comment; otherwise show both
   return (
     <div className="mt-12 max-w-sm">
-      <Title text="💬 Top comment" className="!mt-0" />
-      <div className="relative flex items-start space-x-3">
-        <FeedComment
-          contract={contract}
-          comment={commentsById[topCommentId]}
-          bet={betsById[topCommentId]}
-          hideOutcome={false}
-          truncate={false}
-          smallAvatar={false}
-        />
-      </div>
-      <div className="mt-4 text-sm text-gray-600">
-        (And made {formatMoney(profitById[topCommentId] || 0)})
-      </div>
-      <Spacer h={16} />
-      <Title text="💸 Top trade" className="!mt-0" />
-      <div className="relative flex items-start space-x-3">
-        <FeedBet
-          contract={contract}
-          bet={betsById[topBetId]}
-          hideOutcome={false}
-          smallAvatar={false}
-          bettor={topBettor}
-        />
-      </div>
-      <div className="mt-4 text-sm text-gray-600">
-        (And made {formatMoney(profitById[topBetId] || 0)})
-      </div>
+      {topCommentId && (
+        <>
+          <Title text="💬 Proven correct" className="!mt-0" />
+          <div className="relative flex items-start space-x-3 rounded-md bg-gray-50 px-2 py-4">
+            <FeedComment
+              contract={contract}
+              comment={commentsById[topCommentId]}
+              bet={betsById[topCommentId]}
+              hideOutcome={false}
+              truncate={false}
+              smallAvatar={false}
+            />
+          </div>
+          <div className="mt-2 text-sm text-gray-500">
+            {commentsById[topCommentId].userName} made{' '}
+            {formatMoney(profitById[topCommentId] || 0)}!
+          </div>
+          <Spacer h={16} />
+        </>
+      )}
+
+      {/* If they're the same, only show the comment; otherwise show both */}
+      {topBettor && topBetId !== topCommentId && (
+        <>
+          <Title text="💸 Smartest money" className="!mt-0" />
+          <div className="relative flex items-start space-x-3 rounded-md bg-gray-50 px-2 py-4">
+            <FeedBet
+              contract={contract}
+              bet={betsById[topBetId]}
+              hideOutcome={false}
+              smallAvatar={false}
+              bettor={topBettor}
+            />
+          </div>
+          <div className="mt-2 text-sm text-gray-500">
+            {topBettor?.name} made {formatMoney(profitById[topBetId] || 0)}!
+          </div>
+        </>
+      )}
     </div>
   )
 }