Add challenge slug to bet and filter by it

common/bet.ts

@@ -26,6 +26,7 @@ export type Bet = {
   isAnte?: boolean
   isLiquidityProvision?: boolean
   isRedemption?: boolean
+  challengeSlug?: string
 } & Partial<LimitProps>
 
 export type NumericBet = Bet & {

functions/src/accept-challenge.ts

@@ -91,6 +91,7 @@ export const acceptchallenge = newEndpoint({}, async (req, auth) => {
       loanAmount: 0,
       createdTime,
       fees: noFees,
+      challengeSlug: challenge.slug,
     })
 
     const yourNewBetDoc = contractDoc.collection('bets').doc()
@@ -114,6 +115,7 @@ export const acceptchallenge = newEndpoint({}, async (req, auth) => {
       loanAmount: 0,
       createdTime,
       fees: noFees,
+      challengeSlug: challenge.slug,
     })
     const creatorBetDoc = contractDoc.collection('bets').doc()
     trans.create(creatorBetDoc, {

web/components/challenges/accept-challenge-button.tsx

@@ -21,7 +21,7 @@ export function AcceptChallengeButton(props: {
   const [open, setOpen] = useState(false)
   const [errorText, setErrorText] = useState('')
   const [loading, setLoading] = useState(false)
-  const { acceptorAmount } = challenge
+  const { acceptorAmount, creatorAmount } = challenge
 
   useEffect(() => {
     setErrorText('')
@@ -72,13 +72,6 @@ export function AcceptChallengeButton(props: {
                   {formatMoney(acceptorAmount)}
                 </span>
               </Row>
-              {/*<Row className={'w-full justify-start gap-8'}>*/}
-              {/*  <span className={'min-w-[4rem] font-bold'}>Probability:</span>{' '}*/}
-              {/*  <span className={'ml-[3px]'}>*/}
-              {/*    {' '}*/}
-              {/*    {Math.round(yourProb * 100) + '%'}*/}
-              {/*  </span>*/}
-              {/*</Row>*/}
               <Col className={'w-full items-center justify-start'}>
                 <Row className={'w-full justify-start gap-10'}>
                   <span className={'min-w-[4rem] font-bold'}>
@@ -86,9 +79,8 @@ export function AcceptChallengeButton(props: {
                   </span>{' '}
                   <Row className={'items-center justify-center'}>
                     <span className={'text-primary'}>
-                      {formatMoney(challenge.creatorAmount)}
+                      {formatMoney(creatorAmount + acceptorAmount)}
                     </span>
-                    {/*<InfoTooltip text={"If you're right"} />*/}
                   </Row>
                 </Row>
               </Col>

web/components/feed/contract-activity.tsx

@@ -26,7 +26,10 @@ export function ContractActivity(props: {
 
   const contract = useContractWithPreload(props.contract) ?? props.contract
   const comments = props.comments
-  const updatedBets = useBets(contract.id)
+  const updatedBets = useBets(contract.id, {
+    filterChallenges: false,
+    filterRedemptions: true,
+  })
   const bets = (updatedBets ?? props.bets).filter(
     (bet) => !bet.isRedemption && bet.amount !== 0
   )

web/components/feed/feed-bets.tsx

@@ -10,11 +10,14 @@ import { UsersIcon } from '@heroicons/react/solid'
 import { formatMoney, formatPercent } from 'common/util/format'
 import { OutcomeLabel } from 'web/components/outcome-label'
 import { RelativeTimestamp } from 'web/components/relative-timestamp'
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect } from 'react'
 import { uniqBy, partition, sumBy, groupBy } from 'lodash'
 import { JoinSpans } from 'web/components/join-spans'
 import { UserLink } from '../user-page'
 import { formatNumericProbability } from 'common/pseudo-numeric'
+import { SiteLink } from 'web/components/site-link'
+import { getChallenge, getChallengeUrl } from 'web/lib/firebase/challenges'
+import { Challenge } from 'common/challenge'
 
 export function FeedBet(props: {
   contract: Contract
@@ -79,7 +82,15 @@ export function BetStatusText(props: {
   const { outcomeType } = contract
   const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
   const isFreeResponse = outcomeType === 'FREE_RESPONSE'
-  const { amount, outcome, createdTime } = bet
+  const { amount, outcome, createdTime, challengeSlug } = bet
+  const [challenge, setChallenge] = React.useState<Challenge>()
+  useEffect(() => {
+    if (challengeSlug) {
+      getChallenge(challengeSlug, contract.id).then((c) => {
+        setChallenge(c)
+      })
+    }
+  }, [challengeSlug, contract.id])
 
   const bought = amount >= 0 ? 'bought' : 'sold'
   const outOfTotalAmount =
@@ -133,6 +144,14 @@ export function BetStatusText(props: {
           {fromProb === toProb
             ? `at ${fromProb}`
             : `from ${fromProb} to ${toProb}`}
+          {challengeSlug && (
+            <SiteLink
+              href={challenge ? getChallengeUrl(challenge) : ''}
+              className={'mx-1'}
+            >
+              [challenge]
+            </SiteLink>
+          )}
         </>
       )}
       <RelativeTimestamp time={createdTime} />

web/hooks/use-bets.ts

@@ -9,12 +9,26 @@ import {
 } from 'web/lib/firebase/bets'
 import { LimitBet } from 'common/bet'
 
-export const useBets = (contractId: string) => {
+export const useBets = (
+  contractId: string,
+  options?: { filterChallenges: boolean; filterRedemptions: boolean }
+) => {
   const [bets, setBets] = useState<Bet[] | undefined>()
 
   useEffect(() => {
-    if (contractId) return listenForBets(contractId, setBets)
+    if (contractId)
-  }, [contractId])
+      return listenForBets(contractId, (bets) => {
+        if (options)
+          setBets(
+            bets.filter(
+              (bet) =>
+                (options.filterChallenges ? !bet.challengeSlug : true) &&
+                (options.filterRedemptions ? !bet.isRedemption : true)
+            )
+          )
+        else setBets(bets)
+      })
+  }, [contractId, options])
 
   return bets
 }

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

@@ -211,7 +211,10 @@ export function ContractPageContent(
           </button>
         )}
 
-        <ContractOverview contract={contract} bets={bets} />
+        <ContractOverview
+          contract={contract}
+          bets={bets.filter((b) => !b.challengeSlug)}
+        />
 
         {isNumeric && (
           <AlertBox