comment bounty dialog, styling
This commit is contained in:
parent
84bc490ed3
commit
efa2e44937
|
@ -1,12 +1,16 @@
|
|||
import clsx from 'clsx'
|
||||
import { useState } from 'react'
|
||||
|
||||
import { CurrencyDollarIcon } from '@heroicons/react/outline'
|
||||
import { Contract } from 'common/contract'
|
||||
import { Tooltip } from 'web/components/tooltip'
|
||||
import { formatMoney } from 'common/util/format'
|
||||
import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
|
||||
import { CommentBountyDialog } from './comment-bounty-dialog'
|
||||
|
||||
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">
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-indigo-300 px-3 py-0.5 text-sm font-medium text-white">
|
||||
<CurrencyDollarIcon className={'h4 w-4'} /> Bounty
|
||||
</span>
|
||||
)
|
||||
|
@ -18,30 +22,50 @@ export function BountiedContractSmallBadge(props: {
|
|||
}) {
|
||||
const { contract, showAmount } = props
|
||||
const { openCommentBounties } = contract
|
||||
if (!openCommentBounties) return <div />
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
text={CommentBountiesTooltipText(
|
||||
contract.creatorName,
|
||||
openCommentBounties
|
||||
)}
|
||||
placement="bottom"
|
||||
>
|
||||
<span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
|
||||
<CurrencyDollarIcon className={'h3 w-3'} />
|
||||
{showAmount && formatMoney(openCommentBounties)} Bounty
|
||||
</span>
|
||||
</Tooltip>
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
if (!openCommentBounties && !showAmount) return <></>
|
||||
|
||||
const modal = (
|
||||
<CommentBountyDialog open={open} setOpen={setOpen} contract={contract} />
|
||||
)
|
||||
if (!openCommentBounties)
|
||||
return (
|
||||
<>
|
||||
{modal}
|
||||
<SmallBadge text="Add bounty" onClick={() => setOpen(true)} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const CommentBountiesTooltipText = (
|
||||
creator: string,
|
||||
openCommentBounties: number
|
||||
) =>
|
||||
`${creator} may award ${formatMoney(
|
||||
const tooltip = `${contract.creatorName} may award ${formatMoney(
|
||||
COMMENT_BOUNTY_AMOUNT
|
||||
)} for good comments. ${formatMoney(
|
||||
openCommentBounties
|
||||
)} currently available.`
|
||||
|
||||
return (
|
||||
<Tooltip text={tooltip} placement="bottom">
|
||||
{modal}
|
||||
<SmallBadge
|
||||
text={`${formatMoney(openCommentBounties)} bounty`}
|
||||
onClick={() => setOpen(true)}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
function SmallBadge(props: { text: string; onClick?: () => void }) {
|
||||
const { text, onClick } = props
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={clsx(
|
||||
'inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white'
|
||||
)}
|
||||
>
|
||||
<CurrencyDollarIcon className={'h4 w-4'} />
|
||||
{text}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -8,9 +8,16 @@ 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 AddCommentBountyPanel(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
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()
|
||||
|
@ -45,7 +52,10 @@ export function AddCommentBountyPanel(props: { contract: Contract }) {
|
|||
}
|
||||
|
||||
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.{' '}
|
||||
|
@ -69,6 +79,7 @@ export function AddCommentBountyPanel(props: { contract: Contract }) {
|
|||
)}
|
||||
|
||||
{isLoading && <div>Processing...</div>}
|
||||
</>
|
||||
</Col>
|
||||
</Modal>
|
||||
)
|
||||
}
|
|
@ -123,7 +123,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
|
|||
const topLevelComments = commentsByParent['_'] ?? []
|
||||
|
||||
const sortRow = comments.length > 0 && (
|
||||
<Row className="mb-2 items-center">
|
||||
<Row className="mb-4 items-center">
|
||||
<Button
|
||||
size={'xs'}
|
||||
color={'gray-white'}
|
||||
|
|
|
@ -16,7 +16,6 @@ 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 LiquidityBountyPanel(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
|
@ -36,13 +35,11 @@ export function LiquidityBountyPanel(props: { contract: Contract }) {
|
|||
const isCreator = user?.id === contract.creatorId
|
||||
const isAdmin = useAdmin()
|
||||
|
||||
if (!isCreator && !isAdmin && !showWithdrawal) return <></>
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
tabs={buildArray(
|
||||
{
|
||||
title: 'Bounty Comments',
|
||||
content: <AddCommentBountyPanel contract={contract} />,
|
||||
},
|
||||
(isCreator || isAdmin) &&
|
||||
isCPMM && {
|
||||
title: (isAdmin ? '[Admin] ' : '') + 'Subsidize',
|
||||
|
|
Loading…
Reference in New Issue
Block a user