Also show the top comment and trade

This commit is contained in:
Austin Chen 2022-03-20 10:53:16 -07:00
parent 147833d02e
commit 5c3d571cc4
3 changed files with 112 additions and 6 deletions

View File

@ -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 && (
<>
{' '}

View File

@ -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[]>([])

View File

@ -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