86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
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 { Row } from 'web/components/layout/row'
|
|
import clsx from 'clsx'
|
|
import { formatMoney } from 'common/util/format'
|
|
import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
|
|
import { Button } from 'web/components/button'
|
|
import { Title } from '../title'
|
|
import { Col } from '../layout/col'
|
|
import { Modal } from '../layout/modal'
|
|
|
|
export function CommentBountyDialog(props: {
|
|
contract: Contract
|
|
open: boolean
|
|
setOpen: (open: boolean) => void
|
|
}) {
|
|
const { contract, open, setOpen } = props
|
|
const { id: contractId, slug } = contract
|
|
|
|
const user = useUser()
|
|
const amount = COMMENT_BOUNTY_AMOUNT
|
|
const totalAdded = contract.openCommentBounties ?? 0
|
|
const [error, setError] = useState<string | undefined>(undefined)
|
|
const [isSuccess, setIsSuccess] = useState(false)
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
|
|
const submit = () => {
|
|
if ((user?.balance ?? 0) < amount) {
|
|
setError('Insufficient balance')
|
|
return
|
|
}
|
|
|
|
setIsLoading(true)
|
|
setIsSuccess(false)
|
|
|
|
addCommentBounty({ amount, contractId })
|
|
.then((_) => {
|
|
track('offer comment bounty', {
|
|
amount,
|
|
contractId,
|
|
})
|
|
setIsSuccess(true)
|
|
setError(undefined)
|
|
setIsLoading(false)
|
|
})
|
|
.catch((_) => setError('Server error'))
|
|
|
|
track('add comment bounty', { amount, contractId, slug })
|
|
}
|
|
|
|
return (
|
|
<Modal open={open} setOpen={setOpen}>
|
|
<Col className="gap-4 rounded bg-white p-6">
|
|
<Title className="!mt-0 !mb-0" text="Comment bounty" />
|
|
|
|
<div className="mb-4 text-gray-500">
|
|
Add a {formatMoney(amount)} bounty for good comments that the creator
|
|
can award.{' '}
|
|
{totalAdded > 0 && `(${formatMoney(totalAdded)} currently added)`}
|
|
</div>
|
|
|
|
<Row className={'items-center gap-2'}>
|
|
<Button
|
|
className={clsx('ml-2', isLoading && 'btn-disabled')}
|
|
onClick={submit}
|
|
disabled={isLoading}
|
|
color={'blue'}
|
|
>
|
|
Add {formatMoney(amount)} bounty
|
|
</Button>
|
|
<span className={'text-error'}>{error}</span>
|
|
</Row>
|
|
|
|
{isSuccess && amount && (
|
|
<div>Success! Added {formatMoney(amount)} in bounties.</div>
|
|
)}
|
|
|
|
{isLoading && <div>Processing...</div>}
|
|
</Col>
|
|
</Modal>
|
|
)
|
|
}
|