Add a box for contributing to the bounty

functions/src/resolve-market.ts

@@ -2,13 +2,7 @@ import * as admin from 'firebase-admin'
 import { z } from 'zod'
 import { difference, uniq, mapValues, groupBy, sumBy } from 'lodash'
 
-import {
+import { AnswerContract, Contract, RESOLUTIONS } from '../../common/contract'
-  AnswerContract,
-  Contract,
-  FreeResponseContract,
-  MultipleChoiceContract,
-  RESOLUTIONS,
-} from '../../common/contract'
 import { User } from '../../common/user'
 import { Bet } from '../../common/bet'
 import { getUser, isProd, payUser } from './utils'

web/components/bounty/bounty-box.tsx

@@ -0,0 +1,73 @@
+import clsx from 'clsx'
+import { BountyContract } from 'common/contract'
+import { User } from 'common/user'
+import { useState } from 'react'
+import { addBounty } from 'web/lib/firebase/api'
+import { BuyAmountInput } from '../amount-input'
+import { Spacer } from '../layout/spacer'
+import { Title } from '../title'
+
+export function BountyBox(props: {
+  className?: string
+  user?: User | null
+  contract: BountyContract
+}) {
+  const { className, user, contract } = props
+  const [amount, setAmount] = useState<number | undefined>()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | undefined>()
+
+  const donateDisabled = isSubmitting || !amount || error
+
+  const onSubmit: React.FormEventHandler = async (e) => {
+    if (!user || donateDisabled) return
+
+    e.preventDefault()
+    setIsSubmitting(true)
+    setError(undefined)
+
+    await addBounty({
+      amount,
+      contractId: contract.id,
+    })
+
+    setIsSubmitting(false)
+    setAmount(undefined)
+  }
+
+  return (
+    <div className={clsx(className, 'rounded-lg bg-white py-6 px-8 shadow-lg')}>
+      <Title text="Add to bounty" className="!mt-0" />
+      <form onSubmit={onSubmit}>
+        <label
+          className="mb-2 block text-sm text-gray-500"
+          htmlFor="donate-input"
+        >
+          Contribute
+        </label>
+        <BuyAmountInput
+          inputClassName="w-full max-w-none donate-input"
+          amount={amount}
+          onChange={setAmount}
+          error={error}
+          setError={setError}
+        />
+
+        <Spacer h={8} />
+
+        {user && (
+          <button
+            type="submit"
+            className={clsx(
+              'btn w-full',
+              donateDisabled ? 'btn-disabled' : 'btn-primary',
+              isSubmitting && 'loading'
+            )}
+          >
+            Add to bounty
+          </button>
+        )}
+      </form>
+    </div>
+  )
+}

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

@@ -42,6 +42,7 @@ import { listUsers } from 'web/lib/firebase/users'
 import { FeedComment } from 'web/components/feed/feed-comments'
 import { Title } from 'web/components/title'
 import { FeedBet } from 'web/components/feed/feed-bets'
+import { BountyBox } from 'web/components/bounty/bounty-box'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -116,30 +117,38 @@ export function ContractPageSidebar(props: {
   const isBinary = outcomeType === 'BINARY'
   const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
   const isNumeric = outcomeType === 'NUMERIC'
+  const isBounty = outcomeType === 'BOUNTY'
   const allowTrade = tradingAllowed(contract)
   const allowResolve = !isResolved && isCreator && !!user
   const hasSidePanel =
-    (isBinary || isNumeric || isPseudoNumeric) && (allowTrade || allowResolve)
+    (isBinary || isNumeric || isPseudoNumeric || isBounty) &&
+    (allowTrade || allowResolve)
+  if (!hasSidePanel) {
+    return null
+  }
 
-  return hasSidePanel ? (
+  return (
     <Col className="gap-4">
       {allowTrade &&
         (isNumeric ? (
           <NumericBetPanel className="hidden xl:flex" contract={contract} />
+        ) : isBounty ? (
+          <BountyBox contract={contract} user={user ?? null} />
         ) : (
           <BetPanel
             className="hidden xl:flex"
             contract={contract as CPMMBinaryContract}
           />
         ))}
+
       {allowResolve &&
         (isNumeric || isPseudoNumeric ? (
           <NumericResolutionPanel creator={user} contract={contract} />
-        ) : (
+        ) : isBinary ? (
           <ResolutionPanel creator={user} contract={contract} />
-        ))}
+        ) : null)}
     </Col>
-  ) : null
+  )
 }
 
 export function ContractPageContent(