Also show the top comment and trade

web/components/feed/feed-items.tsx

@@ -47,6 +47,7 @@ import { BuyButton } from '../yes-no-selector'
 import { getDpmOutcomeProbability } from '../../../common/calculate-dpm'
 import { AnswerBetPanel } from '../answers/answer-bet-panel'
 import { useSaveSeenContract } from '../../hooks/use-seen-contracts'
+import { User } from '../../../common/user'
 
 export function FeedItems(props: {
   contract: Contract
@@ -109,7 +110,7 @@ function FeedItem(props: { item: ActivityItem }) {
   }
 }
 
-function FeedComment(props: {
+export function FeedComment(props: {
   contract: Contract
   comment: Comment
   bet: Bet
@@ -171,13 +172,14 @@ function RelativeTimestamp(props: { time: number }) {
   )
 }
 
-function FeedBet(props: {
+export function FeedBet(props: {
   contract: Contract
   bet: Bet
   hideOutcome: boolean
   smallAvatar: boolean
+  bettor?: User // If set: reveal bettor identity
 }) {
-  const { contract, bet, hideOutcome, smallAvatar } = props
+  const { contract, bet, hideOutcome, smallAvatar, bettor } = props
   const { id, amount, outcome, createdTime, userId } = bet
   const user = useUser()
   const isSelf = user?.id === userId
@@ -204,6 +206,13 @@ function FeedBet(props: {
             avatarUrl={user.avatarUrl}
             username={user.username}
           />
+        ) : bettor ? (
+          <Avatar
+            className={clsx(smallAvatar && 'ml-1')}
+            size={smallAvatar ? 'sm' : undefined}
+            avatarUrl={bettor.avatarUrl}
+            username={bettor.username}
+          />
         ) : (
           <div className="relative px-1">
             <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
@@ -214,7 +223,8 @@ function FeedBet(props: {
       </div>
       <div className={'min-w-0 flex-1 pb-1.5'}>
         <div className="text-sm text-gray-500">
-          <span>{isSelf ? 'You' : 'A trader'}</span> {bought} {money}
+          <span>{isSelf ? 'You' : bettor ? bettor.name : 'A trader'}</span>{' '}
+          {bought} {money}
           {!hideOutcome && (
             <>
               {' '}

web/hooks/use-users.ts

@@ -1,6 +1,10 @@
 import { useState, useEffect } from 'react'
 import { PrivateUser, User } from '../../common/user'
-import { listenForAllUsers, listenForPrivateUsers } from '../lib/firebase/users'
+import {
+  getUser,
+  listenForAllUsers,
+  listenForPrivateUsers,
+} from '../lib/firebase/users'
 
 export const useUsers = () => {
   const [users, setUsers] = useState<User[]>([])
@@ -12,6 +16,16 @@ export const useUsers = () => {
   return users
 }
 
+export const useUserById = (userId: string) => {
+  const [user, setUser] = useState<User | undefined>(undefined)
+
+  useEffect(() => {
+    getUser(userId).then(setUser)
+  }, [userId])
+
+  return user
+}
+
 export const usePrivateUsers = () => {
   const [users, setUsers] = useState<PrivateUser[]>([])
 

web/pages/[username]/[contractSlug].tsx

@@ -34,6 +34,8 @@ import { Leaderboard } from '../../components/leaderboard'
 import _ from 'lodash'
 import { calculatePayout, resolvedPayout } from '../../../common/calculate'
 import { formatMoney } from '../../../common/util/format'
+import { FeedBet, FeedComment } from '../../components/feed/feed-items'
+import { useUserById } from '../../hooks/use-users'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -152,7 +154,17 @@ export default function ContractPage(props: {
           </ContractOverview>
 
           {contract.isResolved && (
-            <ContractLeaderboard contract={contract} bets={bets} />
+            <>
+              <div className="grid grid-cols-1 sm:grid-cols-2">
+                <ContractLeaderboard contract={contract} bets={bets} />
+                <ContractTopTrades
+                  contract={contract}
+                  bets={bets}
+                  comments={comments}
+                />
+              </div>
+              <Spacer h={12} />
+            </>
           )}
           <BetsSection contract={contract} user={user ?? null} bets={bets} />
         </div>
@@ -243,6 +255,76 @@ function ContractLeaderboard(props: { contract: Contract; bets: Bet[] }) {
   ) : null
 }
 
+function ContractTopTrades(props: {
+  contract: Contract
+  bets: Bet[]
+  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...?)
+
+  // 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) {
+      const originalBet = betsById[bet.sale.betId]
+      const profit = bet.sale.amount - originalBet.amount
+      profitById[bet.id] = profit
+      profitById[originalBet.id] = profit
+    } else {
+      profitById[bet.id] = resolvedPayout(contract, bet) - bet.amount
+    }
+  }
+
+  // Now find the betId with the highest profit
+  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
+
+  // 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>
+    </div>
+  )
+}
+
 const getOpenGraphProps = (contract: Contract) => {
   const { resolution, question, creatorName, creatorUsername, outcomeType } =
     contract