Adding, awarding, and sorting by bounties

common/comment.ts

@@ -18,6 +18,7 @@ export type Comment<T extends AnyCommentType = AnyCommentType> = {
   userName: string
   userUsername: string
   userAvatarUrl?: string
+  bountiesAwarded?: number
 } & T
 
 export type OnContract = {

common/contract.ts

@@ -62,6 +62,7 @@ export type Contract<T extends AnyContractType = AnyContractType> = {
   featuredOnHomeRank?: number
   likedByUserIds?: string[]
   likedByUserCount?: number
+  openCommentBounties?: number
 } & T
 
 export type BinaryContract = Contract & Binary

common/economy.ts

@@ -15,3 +15,4 @@ export const BETTING_STREAK_BONUS_AMOUNT =
 export const BETTING_STREAK_BONUS_MAX = econ?.BETTING_STREAK_BONUS_MAX ?? 50
 export const BETTING_STREAK_RESET_HOUR = econ?.BETTING_STREAK_RESET_HOUR ?? 7
 export const FREE_MARKETS_PER_USER_MAX = econ?.FREE_MARKETS_PER_USER_MAX ?? 5
+export const COMMENT_BOUNTY_AMOUNT = econ?.COMMENT_BOUNTY_AMOUNT ?? 250

common/envs/prod.ts

@@ -40,6 +40,7 @@ export type Economy = {
   BETTING_STREAK_BONUS_MAX?: number
   BETTING_STREAK_RESET_HOUR?: number
   FREE_MARKETS_PER_USER_MAX?: number
+  COMMENT_BOUNTY_AMOUNT?: number
 }
 
 type FirebaseConfig = {

common/txn.ts

@@ -31,6 +31,7 @@ export type Txn<T extends AnyTxnType = AnyTxnType> = {
     | 'UNIQUE_BETTOR_BONUS'
     | 'BETTING_STREAK_BONUS'
     | 'CANCEL_UNIQUE_BETTOR_BONUS'
+    | 'COMMENT_BOUNTY'
 
   // Any extra data
   data?: { [key: string]: any }
@@ -98,6 +99,25 @@ type CancelUniqueBettorBonus = {
   }
 }
 
+type CommentBountyDeposit = {
+  fromType: 'USER'
+  toType: 'BANK'
+  category: 'COMMENT_BOUNTY'
+  data: {
+    contractId: string
+  }
+}
+
+type CommentBountyWithdrawal = {
+  fromType: 'BANK'
+  toType: 'USER'
+  category: 'COMMENT_BOUNTY'
+  data: {
+    contractId: string
+    commentId: string
+  }
+}
+
 export type DonationTxn = Txn & Donation
 export type TipTxn = Txn & Tip
 export type ManalinkTxn = Txn & Manalink
@@ -105,3 +125,5 @@ export type ReferralTxn = Txn & Referral
 export type BettingStreakBonusTxn = Txn & BettingStreakBonus
 export type UniqueBettorBonusTxn = Txn & UniqueBettorBonus
 export type CancelUniqueBettorBonusTxn = Txn & CancelUniqueBettorBonus
+export type CommentBountyDepositTxn = Txn & CommentBountyDeposit
+export type CommentBountyWithdrawalTxn = Txn & CommentBountyWithdrawal

functions/src/index.ts

@@ -52,6 +52,7 @@ export * from './unsubscribe'
 export * from './stripe'
 export * from './mana-bonus-email'
 export * from './close-market'
+export * from 'functions/src/update-comment-bounty'
 
 import { health } from './health'
 import { transact } from './transact'
@@ -65,6 +66,7 @@ import { sellshares } from './sell-shares'
 import { claimmanalink } from './claim-manalink'
 import { createmarket } from './create-market'
 import { addliquidity } from './add-liquidity'
+import { addcommentbounty, awardcommentbounty } from './update-comment-bounty'
 import { withdrawliquidity } from './withdraw-liquidity'
 import { creategroup } from './create-group'
 import { resolvemarket } from './resolve-market'
@@ -91,6 +93,8 @@ const sellSharesFunction = toCloudFunction(sellshares)
 const claimManalinkFunction = toCloudFunction(claimmanalink)
 const createMarketFunction = toCloudFunction(createmarket)
 const addLiquidityFunction = toCloudFunction(addliquidity)
+const addCommentBounty = toCloudFunction(addcommentbounty)
+const awardCommentBounty = toCloudFunction(awardcommentbounty)
 const withdrawLiquidityFunction = toCloudFunction(withdrawliquidity)
 const createGroupFunction = toCloudFunction(creategroup)
 const resolveMarketFunction = toCloudFunction(resolvemarket)
@@ -127,4 +131,6 @@ export {
   acceptChallenge as acceptchallenge,
   createPostFunction as createpost,
   saveTwitchCredentials as savetwitchcredentials,
+  addCommentBounty as addcommentbounty,
+  awardCommentBounty as awardcommentbounty,
 }

functions/src/serve.ts

@@ -29,6 +29,7 @@ import { getcurrentuser } from './get-current-user'
 import { createpost } from './create-post'
 import { savetwitchcredentials } from './save-twitch-credentials'
 import { testscheduledfunction } from './test-scheduled-function'
+import { addcommentbounty, awardcommentbounty } from './update-comment-bounty'
 
 type Middleware = (req: Request, res: Response, next: NextFunction) => void
 const app = express()
@@ -61,6 +62,8 @@ addJsonEndpointRoute('/sellshares', sellshares)
 addJsonEndpointRoute('/claimmanalink', claimmanalink)
 addJsonEndpointRoute('/createmarket', createmarket)
 addJsonEndpointRoute('/addliquidity', addliquidity)
+addJsonEndpointRoute('/addCommentBounty', addcommentbounty)
+addJsonEndpointRoute('/awardCommentBounty', awardcommentbounty)
 addJsonEndpointRoute('/withdrawliquidity', withdrawliquidity)
 addJsonEndpointRoute('/creategroup', creategroup)
 addJsonEndpointRoute('/resolvemarket', resolvemarket)

functions/src/update-comment-bounty.ts

@@ -0,0 +1,145 @@
+import * as admin from 'firebase-admin'
+import { z } from 'zod'
+
+import { Contract } from '../../common/contract'
+import { User } from '../../common/user'
+import { removeUndefinedProps } from '../../common/util/object'
+import { APIError, newEndpoint, validate } from './api'
+import {
+  DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
+  HOUSE_LIQUIDITY_PROVIDER_ID,
+} from '../../common/antes'
+import { isProd } from './utils'
+import { CommentBountyDepositTxn, CommentBountyWithdrawalTxn } from 'common/txn'
+import { runTxn } from 'functions/src/transact'
+import { Comment } from 'common/comment'
+
+const bodySchema = z.object({
+  contractId: z.string(),
+  amount: z.number().gt(0),
+})
+const awardBodySchema = z.object({
+  contractId: z.string(),
+  commentId: z.string(),
+  amount: z.number().gt(0),
+})
+
+export const addcommentbounty = newEndpoint({}, async (req, auth) => {
+  const { amount, contractId } = validate(bodySchema, req.body)
+
+  if (!isFinite(amount)) throw new APIError(400, 'Invalid amount')
+
+  // run as transaction to prevent race conditions
+  return await firestore.runTransaction(async (transaction) => {
+    const userDoc = firestore.doc(`users/${auth.uid}`)
+    const userSnap = await transaction.get(userDoc)
+    if (!userSnap.exists) throw new APIError(400, 'User not found')
+    const user = userSnap.data() as User
+
+    const contractDoc = firestore.doc(`contracts/${contractId}`)
+    const contractSnap = await transaction.get(contractDoc)
+    if (!contractSnap.exists) throw new APIError(400, 'Invalid contract')
+    const contract = contractSnap.data() as Contract
+
+    if (user.balance < amount)
+      throw new APIError(400, 'Insufficient user balance')
+
+    const newCommentBountyTxn = {
+      fromId: user.id,
+      fromType: 'USER',
+      toId: isProd()
+        ? HOUSE_LIQUIDITY_PROVIDER_ID
+        : DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
+      toType: 'BANK',
+      amount,
+      token: 'M$',
+      category: 'COMMENT_BOUNTY',
+      data: {
+        contractId,
+      },
+      description: `Deposit M$${amount} from ${user.id} for comment bounty for contract ${contractId}`,
+    } as CommentBountyDepositTxn
+
+    const result = await runTxn(transaction, newCommentBountyTxn)
+
+    transaction.update(
+      contractDoc,
+      removeUndefinedProps({
+        openCommentBounties: (contract.openCommentBounties ?? 0) + amount,
+      })
+    )
+
+    return result
+  })
+})
+export const awardcommentbounty = newEndpoint({}, async (req, auth) => {
+  const { amount, commentId, contractId } = validate(awardBodySchema, req.body)
+
+  if (!isFinite(amount)) throw new APIError(400, 'Invalid amount')
+
+  // run as transaction to prevent race conditions
+  return await firestore.runTransaction(async (transaction) => {
+    const userDoc = firestore.doc(`users/${auth.uid}`)
+    const userSnap = await transaction.get(userDoc)
+    if (!userSnap.exists) throw new APIError(400, 'User not found')
+    const user = userSnap.data() as User
+
+    const contractDoc = firestore.doc(`contracts/${contractId}`)
+    const contractSnap = await transaction.get(contractDoc)
+    if (!contractSnap.exists) throw new APIError(400, 'Invalid contract')
+    const contract = contractSnap.data() as Contract
+
+    if (user.id !== contract.creatorId)
+      throw new APIError(
+        400,
+        'Only contract creator can award comment bounties'
+      )
+
+    const commentDoc = firestore.doc(
+      `contracts/${contractId}/comments/${commentId}`
+    )
+    const commentSnap = await transaction.get(commentDoc)
+    if (!commentSnap.exists) throw new APIError(400, 'Invalid comment')
+
+    const comment = commentSnap.data() as Comment
+    const amountAvailable = contract.openCommentBounties ?? 0
+    if (amountAvailable < amount)
+      throw new APIError(400, 'Insufficient open bounty balance')
+
+    const newCommentBountyTxn = {
+      fromId: isProd()
+        ? HOUSE_LIQUIDITY_PROVIDER_ID
+        : DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
+      fromType: 'BANK',
+      toId: comment.userId,
+      toType: 'USER',
+      amount,
+      token: 'M$',
+      category: 'COMMENT_BOUNTY',
+      data: {
+        contractId,
+        commentId,
+      },
+      description: `Withdrawal M$${amount} from BANK for comment ${comment.id} bounty for contract ${contractId}`,
+    } as CommentBountyWithdrawalTxn
+
+    const result = await runTxn(transaction, newCommentBountyTxn)
+
+    await transaction.update(
+      contractDoc,
+      removeUndefinedProps({
+        openCommentBounties: amountAvailable - amount,
+      })
+    )
+    await transaction.update(
+      commentDoc,
+      removeUndefinedProps({
+        bountiesAwarded: (comment.bountiesAwarded ?? 0) + amount,
+      })
+    )
+
+    return result
+  })
+})
+
+const firestore = admin.firestore()

web/components/award-bounty-button.tsx

@@ -0,0 +1,46 @@
+import clsx from 'clsx'
+import { ContractComment } from 'common/comment'
+import { useUser } from 'web/hooks/use-user'
+import { awardCommentBounty } from 'web/lib/firebase/api'
+import { track } from 'web/lib/service/analytics'
+import { Row } from './layout/row'
+import { Contract } from 'common/contract'
+import { TextButton } from 'web/components/text-button'
+import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
+
+export function AwardBountyButton(prop: {
+  comment: ContractComment
+  contract: Contract
+}) {
+  const { comment, contract } = prop
+  const { bountiesAwarded } = comment
+  const amountAwarded = bountiesAwarded ?? 0
+
+  const me = useUser()
+
+  const submit = () => {
+    const data = {
+      amount: COMMENT_BOUNTY_AMOUNT,
+      commentId: comment.id,
+      contractId: contract.id,
+    }
+
+    awardCommentBounty(data)
+      .then((_) => {
+        console.log('success')
+      })
+      .catch((reason) => console.log('Server error:', reason))
+
+    track('award comment bounty', data)
+  }
+
+  const canUp = me && me.id !== comment.userId && contract.creatorId === me.id
+  if (!canUp) return <div />
+  return (
+    <Row className={clsx('-ml-2 items-center gap-0.5', !canUp ? '-ml-6' : '')}>
+      <TextButton className={'font-bold'} onClick={submit}>
+        Award
+      </TextButton>
+    </Row>
+  )
+}

web/components/contract/add-comment-bounty.tsx

@@ -0,0 +1,91 @@
+import { Contract } from 'common/contract'
+import { useUser } from 'web/hooks/use-user'
+import { useState } from 'react'
+import { addCommentBounty } from 'web/lib/firebase/api'
+import { track } from 'web/lib/service/analytics'
+import { InfoTooltip } from 'web/components/info-tooltip'
+import { BETTORS, PRESENT_BET } from 'common/user'
+import { Row } from 'web/components/layout/row'
+import { AmountInput } from 'web/components/amount-input'
+import clsx from 'clsx'
+import { formatMoney } from 'common/util/format'
+
+export function AddCommentBountyPanel(props: { contract: Contract }) {
+  const { contract } = props
+  const { id: contractId, slug } = contract
+
+  const user = useUser()
+
+  const [amount, setAmount] = useState<number | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const [isSuccess, setIsSuccess] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const onAmountChange = (amount: number | undefined) => {
+    setIsSuccess(false)
+    setAmount(amount)
+
+    // Check for errors.
+    if (amount !== undefined) {
+      if (user && user.balance < amount) {
+        setError('Insufficient balance')
+      } else if (amount < 1) {
+        setError('Minimum amount: ' + formatMoney(1))
+      } else {
+        setError(undefined)
+      }
+    }
+  }
+
+  const submit = () => {
+    if (!amount) return
+
+    setIsLoading(true)
+    setIsSuccess(false)
+
+    addCommentBounty({ amount, contractId })
+      .then((_) => {
+        setIsSuccess(true)
+        setError(undefined)
+        setIsLoading(false)
+      })
+      .catch((_) => setError('Server error'))
+
+    track('add comment bounty', { amount, contractId, slug })
+  }
+
+  return (
+    <>
+      <div className="mb-4 text-gray-500">
+        Contribute your M$ to make this market more accurate.{' '}
+        <InfoTooltip
+          text={`More liquidity stabilizes the market, encouraging ${BETTORS} to ${PRESENT_BET}. You can withdraw your subsidy at any time.`}
+        />
+      </div>
+
+      <Row>
+        <AmountInput
+          amount={amount}
+          onChange={onAmountChange}
+          label="M$"
+          error={error}
+          disabled={isLoading}
+          inputClassName="w-28"
+        />
+        <button
+          className={clsx('btn btn-primary ml-2', isLoading && 'btn-disabled')}
+          onClick={submit}
+          disabled={isLoading}
+        >
+          Add
+        </button>
+      </Row>
+
+      {isSuccess && amount && (
+        <div>Success! Added {formatMoney(amount)} in bounties.</div>
+      )}
+
+      {isLoading && <div>Processing...</div>}
+    </>
+  )
+}

web/components/contract/bountied-contract-badge.tsx

@@ -0,0 +1,9 @@
+import { CurrencyDollarIcon } from '@heroicons/react/outline'
+
+export function BountiedContractBadge() {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full bg-blue-100 px-3  py-0.5 text-sm font-medium text-blue-800">
+      <CurrencyDollarIcon className={'h4 w-4'} /> Bounty
+    </span>
+  )
+}

web/components/contract/contract-details.tsx

@@ -32,6 +32,7 @@ import { PlusCircleIcon } from '@heroicons/react/solid'
 import { GroupLink } from 'common/group'
 import { Subtitle } from '../subtitle'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
+import { BountiedContractBadge } from 'web/components/contract/bountied-contract-badge'
 
 export type ShowTime = 'resolve-date' | 'close-date'
 
@@ -63,6 +64,8 @@ export function MiscDetails(props: {
         </Row>
       ) : (contract?.featuredOnHomeRank ?? 0) > 0 ? (
         <FeaturedContractBadge />
+      ) : (contract.openCommentBounties ?? 0) > 0 ? (
+        <BountiedContractBadge />
       ) : volume > 0 || !isNew ? (
         <Row className={'shrink-0'}>{formatMoney(volume)} bet</Row>
       ) : (

web/components/contract/contract-info-dialog.tsx

@@ -7,7 +7,7 @@ import { capitalize } from 'lodash'
 import { Contract } from 'common/contract'
 import { formatMoney } from 'common/util/format'
 import { contractPool, updateContract } from 'web/lib/firebase/contracts'
-import { LiquidityPanel } from '../liquidity-panel'
+import { LiquidityBountyPanel } from 'web/components/contract/liquidity-bounty-panel'
 import { Col } from '../layout/col'
 import { Modal } from '../layout/modal'
 import { Title } from '../title'
@@ -196,9 +196,7 @@ export function ContractInfoDialog(props: {
           <Row className="flex-wrap">
             <DuplicateContractButton contract={contract} />
           </Row>
-          {contract.mechanism === 'cpmm-1' && !contract.resolution && (
-            <LiquidityPanel contract={contract} />
-          )}
+          {!contract.resolution && <LiquidityBountyPanel contract={contract} />}
         </Col>
       </Modal>
     </>

web/components/contract/contract-tabs.tsx

@@ -5,7 +5,7 @@ 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 { groupBy, sortBy } from 'lodash'
+import { groupBy, sortBy, sum } from 'lodash'
 import { Bet } from 'common/bet'
 import { Contract } from 'common/contract'
 import { PAST_BETS } from 'common/user'
@@ -24,9 +24,13 @@ import {
   HOUSE_LIQUIDITY_PROVIDER_ID,
 } from 'common/antes'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
+import { formatMoney } from 'common/lib/util/format'
+import { Button } from 'web/components/button'
+import { MINUTE_MS } from 'common/lib/util/time'
 
 export function ContractTabs(props: { contract: Contract; bets: Bet[] }) {
   const { contract, bets } = props
+  const { openCommentBounties } = contract
 
   const isMobile = useIsMobile()
   const user = useUser()
@@ -53,7 +57,14 @@ export function ContractTabs(props: { contract: Contract; bets: Bet[] }) {
       currentPageForAnalytics={'contract'}
       tabs={[
         {
-          title: 'Comments',
+          title: `Comments ${
+            openCommentBounties
+              ? '(' + formatMoney(openCommentBounties) + ' Bounty)'
+              : ''
+          }`,
+          tooltip: openCommentBounties
+            ? 'The creator of this market will award bounties to good comments'
+            : undefined,
           content: <CommentsTabContent contract={contract} />,
         },
         {
@@ -78,6 +89,8 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
 }) {
   const { contract } = props
   const tips = useTipTxns({ contractId: contract.id })
+  const [sort, setSort] = useState<'Newest' | 'Best'>('Best')
+  const me = useUser()
   const comments = useComments(contract.id)
   if (comments == null) {
     return <LoadingIndicator />
@@ -130,12 +143,31 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
       </>
     )
   } else {
-    const commentsByParent = groupBy(comments, (c) => c.replyToCommentId ?? '_')
+    const commentsByParent = groupBy(
+      sortBy(comments, (c) =>
+        sort === 'Newest'
+          ? -c.createdTime
+          : // Is this too magic? 'Best' shows your own comments made within the last 10 minutes first, then sorts by score
+          c.createdTime > Date.now() - 10 * MINUTE_MS && c.userId === me?.id
+          ? -Infinity
+          : -((c.bountiesAwarded ?? 0) + sum(Object.values(tips[c.id] ?? [])))
+      ),
+      (c) => c.replyToCommentId ?? '_'
+    )
+
     const topLevelComments = commentsByParent['_'] ?? []
     return (
       <>
+        <Button
+          size={'xs'}
+          color={'gray-white'}
+          className="mb-4"
+          onClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
+        >
+          Sort by: {sort}
+        </Button>
         <ContractCommentInput className="mb-5" contract={contract} />
-        {sortBy(topLevelComments, (c) => -c.createdTime).map((parent) => (
+        {topLevelComments.map((parent) => (
           <FeedCommentThread
             key={parent.id}
             contract={contract}

web/components/contract/liquidity-bounty-panel.tsx

@@ -1,27 +1,30 @@
 import clsx from 'clsx'
 import { useEffect, useState } from 'react'
 
-import { CPMMContract } from 'common/contract'
+import { Contract, CPMMContract } from 'common/contract'
 import { formatMoney } from 'common/util/format'
 import { useUser } from 'web/hooks/use-user'
 import { addLiquidity, withdrawLiquidity } from 'web/lib/firebase/api'
-import { AmountInput } from './amount-input'
-import { Row } from './layout/row'
+import { AmountInput } from 'web/components/amount-input'
+import { Row } from 'web/components/layout/row'
 import { useUserLiquidity } from 'web/hooks/use-liquidity'
-import { Tabs } from './layout/tabs'
-import { NoLabel, YesLabel } from './outcome-label'
-import { Col } from './layout/col'
+import { Tabs } from 'web/components/layout/tabs'
+import { NoLabel, YesLabel } from 'web/components/outcome-label'
+import { Col } from 'web/components/layout/col'
 import { track } from 'web/lib/service/analytics'
-import { InfoTooltip } from './info-tooltip'
+import { InfoTooltip } from 'web/components/info-tooltip'
 import { BETTORS, PRESENT_BET } from 'common/user'
 import { buildArray } from 'common/util/array'
 import { useAdmin } from 'web/hooks/use-admin'
+import { AddCommentBountyPanel } from 'web/components/contract/add-comment-bounty'
 
-export function LiquidityPanel(props: { contract: CPMMContract }) {
+export function LiquidityBountyPanel(props: { contract: Contract }) {
   const { contract } = props
 
+  const isCPMM = contract.mechanism === 'cpmm-1'
   const user = useUser()
-  const lpShares = useUserLiquidity(contract, user?.id ?? '')
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const lpShares = isCPMM && useUserLiquidity(contract, user?.id ?? '')
 
   const [showWithdrawal, setShowWithdrawal] = useState(false)
 
@@ -38,20 +41,26 @@ export function LiquidityPanel(props: { contract: CPMMContract }) {
   return (
     <Tabs
       tabs={buildArray(
-        (isCreator || isAdmin) && {
-          title: (isAdmin ? '[Admin] ' : '') + 'Subsidize',
-          content: <AddLiquidityPanel contract={contract} />,
-        },
-        showWithdrawal && {
-          title: 'Withdraw',
-          content: (
-            <WithdrawLiquidityPanel
-              contract={contract}
-              lpShares={lpShares as { YES: number; NO: number }}
-            />
-          ),
-        },
+        (isCreator || isAdmin) &&
+          isCPMM && {
+            title: (isAdmin ? '[Admin] ' : '') + 'Subsidize',
+            content: <AddLiquidityPanel contract={contract} />,
+          },
+        showWithdrawal &&
+          isCPMM && {
+            title: 'Withdraw',
+            content: (
+              <WithdrawLiquidityPanel
+                contract={contract}
+                lpShares={lpShares as { YES: number; NO: number }}
+              />
+            ),
+          },
         {
+          title: 'Bounty Comments',
+          content: <AddCommentBountyPanel contract={contract} />,
+        },
+        isCPMM && {
           title: 'Pool',
           content: <ViewLiquidityPanel contract={contract} />,
         }

web/components/feed/feed-comments.tsx

@@ -19,6 +19,7 @@ import { Content } from '../editor'
 import { Editor } from '@tiptap/react'
 import { UserLink } from 'web/components/user-link'
 import { CommentInput } from '../comment-input'
+import { AwardBountyButton } from 'web/components/award-bounty-button'
 
 export type ReplyTo = { id: string; username: string }
 
@@ -85,6 +86,7 @@ export function FeedComment(props: {
     commenterPositionShares,
     commenterPositionOutcome,
     createdTime,
+    bountiesAwarded,
   } = comment
   const betOutcome = comment.betOutcome
   let bought: string | undefined
@@ -93,6 +95,7 @@ export function FeedComment(props: {
     bought = comment.betAmount >= 0 ? 'bought' : 'sold'
     money = formatMoney(Math.abs(comment.betAmount))
   }
+  const totalAwarded = bountiesAwarded ?? 0
 
   const router = useRouter()
   const highlighted = router.asPath.endsWith(`#${comment.id}`)
@@ -162,6 +165,11 @@ export function FeedComment(props: {
             createdTime={createdTime}
             elementId={comment.id}
           />
+          {totalAwarded > 0 && (
+            <span className=" text-primary ml-2 text-sm">
+              +{formatMoney(totalAwarded)}
+            </span>
+          )}
         </div>
         <Content
           className="mt-2 text-[15px] text-gray-700"
@@ -170,6 +178,9 @@ export function FeedComment(props: {
         />
         <Row className="mt-2 items-center gap-6 text-xs text-gray-500">
           {tips && <Tipper comment={comment} tips={tips} />}
+          {(contract.openCommentBounties ?? 0) > 0 && (
+            <AwardBountyButton comment={comment} contract={contract} />
+          )}
           {onReplyClick && (
             <button
               className="font-bold hover:underline"

web/components/layout/tabs.tsx

@@ -3,6 +3,7 @@ import { useRouter, NextRouter } from 'next/router'
 import { ReactNode, useState } from 'react'
 import { track } from '@amplitude/analytics-browser'
 import { Col } from './col'
+import { Tooltip } from 'web/components/tooltip'
 
 type Tab = {
   title: string
@@ -10,6 +11,7 @@ type Tab = {
   content: ReactNode
   // If set, show a badge with this content
   badge?: string
+  tooltip?: string
 }
 
 type TabProps = {
@@ -60,8 +62,10 @@ export function ControlledTabs(props: TabProps & { activeIndex: number }) {
               <span className="px-0.5 font-bold">{tab.badge}</span>
             ) : null}
             <Col>
-              {tab.tabIcon && <div className="mx-auto">{tab.tabIcon}</div>}
-              {tab.title}
+              <Tooltip text={tab.tooltip}>
+                {tab.tabIcon && <div className="mx-auto">{tab.tabIcon}</div>}
+                {tab.title}
+              </Tooltip>
             </Col>
           </a>
         ))}

web/components/tipper.tsx

@@ -116,7 +116,7 @@ function DownTip(props: { onClick?: () => void }) {
       noTap
     >
       <button
-        className="hover:text-red-600 disabled:text-gray-300"
+        className="hover:text-red-600 disabled:text-gray-100"
         disabled={!onClick}
         onClick={onClick}
       >
@@ -137,7 +137,7 @@ function UpTip(props: { onClick?: () => void; value: number }) {
       noTap
     >
       <button
-        className="hover:text-primary disabled:text-gray-300"
+        className="hover:text-primary disabled:text-gray-100"
         disabled={!onClick}
         onClick={onClick}
       >

web/lib/firebase/api.ts

@@ -46,6 +46,14 @@ export function addLiquidity(params: any) {
   return call(getFunctionUrl('addliquidity'), 'POST', params)
 }
 
+export function addCommentBounty(params: any) {
+  return call(getFunctionUrl('addcommentbounty'), 'POST', params)
+}
+
+export function awardCommentBounty(params: any) {
+  return call(getFunctionUrl('awardcommentbounty'), 'POST', params)
+}
+
 export function withdrawLiquidity(params: any) {
   return call(getFunctionUrl('withdrawliquidity'), 'POST', params)
 }

web/package.json

@@ -22,7 +22,7 @@
     "@amplitude/analytics-browser": "0.4.1",
     "@floating-ui/react-dom-interactions": "0.9.2",
     "@headlessui/react": "1.6.1",
-    "@heroicons/react": "1.0.5",
+    "@heroicons/react": "1.0.6",
     "@nivo/core": "0.80.0",
     "@nivo/line": "0.80.0",
     "@nivo/tooltip": "0.80.0",
@@ -56,9 +56,9 @@
     "react-expanding-textarea": "2.3.5",
     "react-hot-toast": "2.2.0",
     "react-instantsearch-hooks-web": "6.24.1",
+    "react-masonry-css": "1.0.16",
     "react-query": "3.39.0",
     "react-twitter-embed": "4.0.4",
-    "react-masonry-css": "1.0.16",
     "string-similarity": "^4.0.4",
     "tippy.js": "6.3.7"
   },

yarn.lock

@@ -1751,10 +1751,10 @@
     url-loader "^4.1.1"
     webpack "^5.69.1"
 
-"@eslint/eslintrc@^1.3.1":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.1.tgz#de0807bfeffc37b964a7d0400e0c348ce5a2543d"
-  integrity sha512-OhSY22oQQdw3zgPOOwdoj01l/Dzl1Z+xyUP33tkSN+aqyEhymJCcPHyXt+ylW8FSe0TfRC2VG+ROQOapD0aZSQ==
+"@eslint/eslintrc@^1.3.0":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.2.tgz#58b69582f3b7271d8fa67fe5251767a5b38ea356"
+  integrity sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
@@ -2351,10 +2351,10 @@
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.1.tgz#d822792e589aac005462491dd62f86095e0c3bef"
   integrity sha512-gMd6uIs1U4Oz718Z5gFoV0o/vD43/4zvbyiJN9Dt7PK9Ubxn+TmJwTmYwyNJc5KxxU1t0CmgTNgwZX9+4NjCnQ==
 
-"@heroicons/react@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.5.tgz#2fe4df9d33eb6ce6d5178a0f862e97b61c01e27d"
-  integrity sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==
+"@heroicons/react@1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
+  integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==
 
 "@humanwhocodes/config-array@^0.10.4":
   version "0.10.4"
@@ -2370,11 +2370,6 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz#316b0a63b91c10e53f242efb4ace5c3b34e8728d"
   integrity sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==
 
-"@humanwhocodes/module-importer@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
-  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
-
 "@humanwhocodes/object-schema@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
@@ -6081,15 +6076,14 @@ eslint-visitor-keys@^3.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint@8.23.0:
-  version "8.23.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.23.0.tgz#a184918d288820179c6041bb3ddcc99ce6eea040"
-  integrity sha512-pBG/XOn0MsJcKcTRLr27S5HpzQo4kLr+HjLQIyK4EiCsijDl/TB+h5uEuJU6bQ8Edvwz1XWOjpaP2qgnXGpTcA==
+eslint@8.22.0:
+  version "8.22.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.22.0.tgz#78fcb044196dfa7eef30a9d65944f6f980402c48"
+  integrity sha512-ci4t0sz6vSRKdmkOGmprBo6fmI4PrphDFMy5JEq/fNS0gQkJM3rLmrqcp8ipMcdobH3KtUP40KniAE9W19S4wA==
   dependencies:
-    "@eslint/eslintrc" "^1.3.1"
+    "@eslint/eslintrc" "^1.3.0"
     "@humanwhocodes/config-array" "^0.10.4"
     "@humanwhocodes/gitignore-to-minimatch" "^1.0.2"
-    "@humanwhocodes/module-importer" "^1.0.1"
     ajv "^6.10.0"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
@@ -6099,7 +6093,7 @@ eslint@8.23.0:
     eslint-scope "^7.1.1"
     eslint-utils "^3.0.0"
     eslint-visitor-keys "^3.3.0"
-    espree "^9.4.0"
+    espree "^9.3.3"
     esquery "^1.4.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
@@ -6125,8 +6119,9 @@ eslint@8.23.0:
     strip-ansi "^6.0.1"
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
 
-espree@^9.4.0:
+espree@^9.3.3, espree@^9.4.0:
   version "9.4.0"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.0.tgz#cd4bc3d6e9336c433265fc0aa016fc1aaf182f8a"
   integrity sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==
@@ -12000,6 +11995,11 @@ v8-compile-cache-lib@^3.0.1:
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
+v8-compile-cache@^2.0.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"