Also show the top comment and trade
This commit is contained in:
parent
147833d02e
commit
5c3d571cc4
|
@ -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 && (
|
||||
<>
|
||||
{' '}
|
||||
|
|
|
@ -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[]>([])
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue
Block a user