74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
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>
|
|
)
|
|
}
|