diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index b1364fbf..245a8d7d 100644
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@@ -1,12 +1,16 @@
+import { memo, useState } from 'react'
+import { getOutcomeProbability } from 'common/calculate'
+import { Pagination } from 'web/components/pagination'
+import { FeedBet } from '../feed/feed-bets'
+import { FeedLiquidity } from '../feed/feed-liquidity'
+import { FeedAnswerCommentGroup } from '../feed/feed-answer-comment-group'
+import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments'
+import { CommentTipMap } from 'web/hooks/use-tip-txns'
+import { groupBy, sortBy } from 'lodash'
import { Bet } from 'common/bet'
-import { Contract } from 'common/contract'
+import { Contract, FreeResponseContract } from 'common/contract'
import { ContractComment } from 'common/comment'
import { PAST_BETS, User } from 'common/user'
-import {
- ContractCommentsActivity,
- ContractBetsActivity,
- FreeResponseContractCommentsActivity,
-} from '../feed/contract-activity'
import { ContractBetsTable, BetsSummary } from '../bets-list'
import { Spacer } from '../layout/spacer'
import { Tabs } from '../layout/tabs'
@@ -27,67 +31,15 @@ export function ContractTabs(props: {
bets: Bet[]
comments: ContractComment[]
}) {
- const { contract, user, bets } = props
- const { outcomeType } = contract
- const isMobile = useIsMobile()
+ const { contract, user, bets, comments } = props
- const tips = useTipTxns({ contractId: contract.id })
- const lps = useLiquidity(contract.id)
+ const isMobile = useIsMobile()
const userBets =
user && bets.filter((bet) => !bet.isAnte && bet.userId === user.id)
const visibleBets = bets.filter(
(bet) => !bet.isAnte && !bet.isRedemption && bet.amount !== 0
)
- const visibleLps = (lps ?? []).filter(
- (l) =>
- !l.isAnte &&
- l.userId !== HOUSE_LIQUIDITY_PROVIDER_ID &&
- l.userId !== DEV_HOUSE_LIQUIDITY_PROVIDER_ID &&
- l.amount > 0
- )
-
- const comments = useComments(contract.id) ?? props.comments
-
- const betActivity = lps != null && (
-
- )
-
- const generalComments = comments.filter(
- (comment) =>
- comment.answerOutcome === undefined &&
- (outcomeType === 'FREE_RESPONSE' ? comment.betId === undefined : true)
- )
-
- const commentActivity =
- outcomeType === 'FREE_RESPONSE' ? (
- <>
-
-
- General Comments
-
-
-
- >
- ) : (
-
- )
const yourTrades = (
@@ -107,8 +59,18 @@ export function ContractTabs(props: {
+ ),
+ },
+ {
+ title: capitalize(PAST_BETS),
+ content: (
+
+ ),
+ },
...(!user || !userBets?.length
? []
: [
@@ -121,3 +83,175 @@ export function ContractTabs(props: {
/>
)
}
+
+const CommentsTabContent = memo(function CommentsTabContent(props: {
+ contract: Contract
+ comments: ContractComment[]
+}) {
+ const { contract, comments } = props
+ const tips = useTipTxns({ contractId: contract.id })
+ const updatedComments = useComments(contract.id) ?? comments
+ if (contract.outcomeType === 'FREE_RESPONSE') {
+ return (
+ <>
+
+
+
General Comments
+
+
+ comment.answerOutcome === undefined &&
+ comment.betId === undefined
+ )}
+ tips={tips}
+ />
+
+ >
+ )
+ } else {
+ return (
+
+ )
+ }
+})
+
+function ContractBetsActivity(props: { contract: Contract; bets: Bet[] }) {
+ const { contract, bets } = props
+ const [page, setPage] = useState(0)
+ const ITEMS_PER_PAGE = 50
+ const start = page * ITEMS_PER_PAGE
+ const end = start + ITEMS_PER_PAGE
+
+ const lps = useLiquidity(contract.id) ?? []
+ const visibleLps = lps.filter(
+ (l) =>
+ !l.isAnte &&
+ l.userId !== HOUSE_LIQUIDITY_PROVIDER_ID &&
+ l.userId !== DEV_HOUSE_LIQUIDITY_PROVIDER_ID &&
+ l.amount > 0
+ )
+
+ const items = [
+ ...bets.map((bet) => ({
+ type: 'bet' as const,
+ id: bet.id + '-' + bet.isSold,
+ bet,
+ })),
+ ...visibleLps.map((lp) => ({
+ type: 'liquidity' as const,
+ id: lp.id,
+ lp,
+ })),
+ ]
+
+ const pageItems = sortBy(items, (item) =>
+ item.type === 'bet'
+ ? -item.bet.createdTime
+ : item.type === 'liquidity'
+ ? -item.lp.createdTime
+ : undefined
+ ).slice(start, end)
+
+ return (
+ <>
+
+ {pageItems.map((item) =>
+ item.type === 'bet' ? (
+
+ ) : (
+
+ )
+ )}
+
+
+ >
+ )
+}
+
+function ContractCommentsActivity(props: {
+ contract: Contract
+ comments: ContractComment[]
+ tips: CommentTipMap
+}) {
+ const { contract, comments, tips } = props
+ const commentsByParentId = groupBy(comments, (c) => c.replyToCommentId ?? '_')
+ const topLevelComments = sortBy(
+ commentsByParentId['_'] ?? [],
+ (c) => -c.createdTime
+ )
+
+ return (
+ <>
+
+ {topLevelComments.map((parent) => (
+ c.createdTime
+ )}
+ tips={tips}
+ />
+ ))}
+ >
+ )
+}
+
+function FreeResponseContractCommentsActivity(props: {
+ contract: FreeResponseContract
+ comments: ContractComment[]
+ tips: CommentTipMap
+}) {
+ const { contract, comments, tips } = props
+
+ const sortedAnswers = sortBy(
+ contract.answers,
+ (answer) => -getOutcomeProbability(contract, answer.number.toString())
+ )
+ const commentsByOutcome = groupBy(
+ comments,
+ (c) => c.answerOutcome ?? c.betOutcome ?? '_'
+ )
+
+ return (
+ <>
+ {sortedAnswers.map((answer) => (
+
+
+ c.createdTime
+ )}
+ tips={tips}
+ />
+
+ ))}
+ >
+ )
+}
diff --git a/web/components/feed/contract-activity.tsx b/web/components/feed/contract-activity.tsx
deleted file mode 100644
index 40b62466..00000000
--- a/web/components/feed/contract-activity.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { useState } from 'react'
-import { Contract, FreeResponseContract } from 'common/contract'
-import { ContractComment } from 'common/comment'
-import { Bet } from 'common/bet'
-import { getOutcomeProbability } from 'common/calculate'
-import { Pagination } from 'web/components/pagination'
-import { FeedBet } from './feed-bets'
-import { FeedLiquidity } from './feed-liquidity'
-import { FeedAnswerCommentGroup } from './feed-answer-comment-group'
-import { FeedCommentThread, ContractCommentInput } from './feed-comments'
-import { CommentTipMap } from 'web/hooks/use-tip-txns'
-import { LiquidityProvision } from 'common/liquidity-provision'
-import { groupBy, sortBy } from 'lodash'
-import { Col } from 'web/components/layout/col'
-
-export function ContractBetsActivity(props: {
- contract: Contract
- bets: Bet[]
- lps: LiquidityProvision[]
-}) {
- const { contract, bets, lps } = props
- const [page, setPage] = useState(0)
- const ITEMS_PER_PAGE = 50
- const start = page * ITEMS_PER_PAGE
- const end = start + ITEMS_PER_PAGE
-
- const items = [
- ...bets.map((bet) => ({
- type: 'bet' as const,
- id: bet.id + '-' + bet.isSold,
- bet,
- })),
- ...lps.map((lp) => ({
- type: 'liquidity' as const,
- id: lp.id,
- lp,
- })),
- ]
-
- const pageItems = sortBy(items, (item) =>
- item.type === 'bet'
- ? -item.bet.createdTime
- : item.type === 'liquidity'
- ? -item.lp.createdTime
- : undefined
- ).slice(start, end)
-
- return (
- <>
-
- {pageItems.map((item) =>
- item.type === 'bet' ? (
-
- ) : (
-
- )
- )}
-
-
- >
- )
-}
-
-export function ContractCommentsActivity(props: {
- contract: Contract
- comments: ContractComment[]
- tips: CommentTipMap
-}) {
- const { contract, comments, tips } = props
- const commentsByParentId = groupBy(comments, (c) => c.replyToCommentId ?? '_')
- const topLevelComments = sortBy(
- commentsByParentId['_'] ?? [],
- (c) => -c.createdTime
- )
-
- return (
- <>
-
- {topLevelComments.map((parent) => (
- c.createdTime
- )}
- tips={tips}
- />
- ))}
- >
- )
-}
-
-export function FreeResponseContractCommentsActivity(props: {
- contract: FreeResponseContract
- comments: ContractComment[]
- tips: CommentTipMap
-}) {
- const { contract, comments, tips } = props
-
- const sortedAnswers = sortBy(
- contract.answers,
- (answer) => -getOutcomeProbability(contract, answer.number.toString())
- )
- const commentsByOutcome = groupBy(
- comments,
- (c) => c.answerOutcome ?? c.betOutcome ?? '_'
- )
-
- return (
- <>
- {sortedAnswers.map((answer) => (
-
-
- c.createdTime
- )}
- tips={tips}
- />
-
- ))}
- >
- )
-}