53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
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 { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
|
|
import { formatMoney } from 'common/util/format'
|
|
|
|
export function AwardBountyButton(prop: {
|
|
comment: ContractComment
|
|
contract: Contract
|
|
}) {
|
|
const { comment, contract } = prop
|
|
|
|
const me = useUser()
|
|
|
|
const submit = () => {
|
|
const data = {
|
|
amount: COMMENT_BOUNTY_AMOUNT,
|
|
commentId: comment.id,
|
|
contractId: contract.id,
|
|
}
|
|
|
|
awardCommentBounty(data)
|
|
.then((_) => {
|
|
console.log('success')
|
|
track('award comment bounty', data)
|
|
})
|
|
.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('my-auto items-center gap-0.5', !canUp ? '-ml-6' : '')}
|
|
>
|
|
<button
|
|
className={
|
|
'rounded-full border border-indigo-400 bg-indigo-50 py-0.5 px-2 text-xs text-indigo-400 transition-colors hover:bg-indigo-400 hover:text-white'
|
|
}
|
|
onClick={submit}
|
|
>
|
|
Award {formatMoney(COMMENT_BOUNTY_AMOUNT)}
|
|
</button>
|
|
</Row>
|
|
)
|
|
}
|