diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index b1364fbf..23ea9c13 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -1,3 +1,4 @@ +import { memo } from 'react' import { Bet } from 'common/bet' import { Contract } from 'common/contract' import { ContractComment } from 'common/comment' @@ -27,11 +28,10 @@ export function ContractTabs(props: { bets: Bet[] comments: ContractComment[] }) { - const { contract, user, bets } = props - const { outcomeType } = contract + const { contract, user, bets, comments } = props + const isMobile = useIsMobile() - const tips = useTipTxns({ contractId: contract.id }) const lps = useLiquidity(contract.id) const userBets = @@ -47,8 +47,6 @@ export function ContractTabs(props: { 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 = (
+ ), + }, { title: capitalize(PAST_BETS), content: betActivity }, ...(!user || !userBets?.length ? [] @@ -121,3 +92,44 @@ 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 ( + + ) + } +})