Don't always require tips to render comments (#898)

web/components/contract/contract-leaderboard.tsx

@@ -5,7 +5,6 @@ import { Contract } from 'common/contract'
 import { formatMoney } from 'common/util/format'
 import { groupBy, mapValues, sumBy, sortBy, keyBy } from 'lodash'
 import { useState, useMemo, useEffect } from 'react'
-import { CommentTipMap } from 'web/hooks/use-tip-txns'
 import { listUsers, User } from 'web/lib/firebase/users'
 import { FeedBet } from '../feed/feed-bets'
 import { FeedComment } from '../feed/feed-comments'
@@ -66,9 +65,8 @@ export function ContractTopTrades(props: {
   contract: Contract
   bets: Bet[]
   comments: ContractComment[]
-  tips: CommentTipMap
 }) {
-  const { contract, bets, comments, tips } = props
+  const { contract, bets, comments } = props
   const commentsById = keyBy(comments, 'id')
   const betsById = keyBy(bets, 'id')
 
@@ -105,7 +103,6 @@ export function ContractTopTrades(props: {
             <FeedComment
               contract={contract}
               comment={commentsById[topCommentId]}
-              tips={tips[topCommentId]}
             />
           </div>
           <Spacer h={16} />

web/components/contract/contract-tabs.tsx

@@ -11,9 +11,9 @@ import { ContractBetsTable, BetsSummary } from '../bets-list'
 import { Spacer } from '../layout/spacer'
 import { Tabs } from '../layout/tabs'
 import { Col } from '../layout/col'
-import { CommentTipMap } from 'web/hooks/use-tip-txns'
 import { useComments } from 'web/hooks/use-comments'
 import { useLiquidity } from 'web/hooks/use-liquidity'
+import { useTipTxns } from 'web/hooks/use-tip-txns'
 import { capitalize } from 'lodash'
 import {
   DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
@@ -26,12 +26,12 @@ export function ContractTabs(props: {
   user: User | null | undefined
   bets: Bet[]
   comments: ContractComment[]
-  tips: CommentTipMap
 }) {
-  const { contract, user, bets, tips } = props
+  const { contract, user, bets } = props
   const { outcomeType } = contract
   const isMobile = useIsMobile()
 
+  const tips = useTipTxns({ contractId: contract.id })
   const lps = useLiquidity(contract.id)
 
   const userBets =

web/components/feed/feed-answer-comment-group.tsx

@@ -106,7 +106,7 @@ export function FeedAnswerCommentGroup(props: {
             indent={true}
             contract={contract}
             comment={comment}
-            tips={tips[comment.id]}
+            tips={tips[comment.id] ?? {}}
             onReplyClick={scrollAndOpenReplyInput}
           />
         ))}

web/components/feed/feed-comments.tsx

@@ -47,7 +47,7 @@ export function FeedCommentThread(props: {
           indent={commentIdx != 0}
           contract={contract}
           comment={comment}
-          tips={tips[comment.id]}
+          tips={tips[comment.id] ?? {}}
           onReplyClick={scrollAndOpenReplyInput}
         />
       ))}
@@ -74,7 +74,7 @@ export function FeedCommentThread(props: {
 export function FeedComment(props: {
   contract: Contract
   comment: ContractComment
-  tips: CommentTips
+  tips?: CommentTips
   indent?: boolean
   onReplyClick?: (comment: ContractComment) => void
 }) {
@@ -170,7 +170,7 @@ export function FeedComment(props: {
           smallImage
         />
         <Row className="mt-2 items-center gap-6 text-xs text-gray-500">
-          <Tipper comment={comment} tips={tips ?? {}} />
+          {tips && <Tipper comment={comment} tips={tips} />}
           {onReplyClick && (
             <button
               className="font-bold hover:underline"

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

@@ -31,7 +31,6 @@ import { useBets } from 'web/hooks/use-bets'
 import { CPMMBinaryContract } from 'common/contract'
 import { AlertBox } from 'web/components/alert-box'
 import { useTracking } from 'web/hooks/use-tracking'
-import { useTipTxns } from 'web/hooks/use-tip-txns'
 import { useSaveReferral } from 'web/hooks/use-save-referral'
 import { User } from 'common/user'
 import { ContractComment } from 'common/comment'
@@ -196,8 +195,6 @@ export function ContractPageContent(
     [bets]
   )
 
-  const tips = useTipTxns({ contractId: contract.id })
-
   const [showConfetti, setShowConfetti] = useState(false)
 
   useEffect(() => {
@@ -278,7 +275,6 @@ export function ContractPageContent(
                 contract={contract}
                 bets={bets}
                 comments={comments}
-                tips={tips}
               />
             </div>
             <Spacer h={12} />
@@ -289,7 +285,6 @@ export function ContractPageContent(
           contract={contract}
           user={user}
           bets={bets}
-          tips={tips}
           comments={comments}
         />
         {!user ? (