manifold/web/components/warning-confirmation-button.tsx

89 lines
2.0 KiB
TypeScript
Raw Normal View History

2022-09-09 06:02:22 +00:00
import clsx from 'clsx'
import React from 'react'
import { Row } from './layout/row'
import { ConfirmationButton } from './confirmation-button'
import { ExclamationIcon } from '@heroicons/react/solid'
import { formatMoney } from 'common/util/format'
2022-09-09 06:02:22 +00:00
export function WarningConfirmationButton(props: {
amount: number | undefined
outcome?: 'YES' | 'NO' | undefined
2022-09-27 04:40:56 +00:00
marketType: 'freeResponse' | 'binary'
2022-09-09 06:02:22 +00:00
warning?: string
onSubmit: () => void
disabled?: boolean
isSubmitting: boolean
openModalButtonClass?: string
submitButtonClassName?: string
}) {
const {
amount,
2022-09-09 06:02:22 +00:00
onSubmit,
warning,
disabled,
isSubmitting,
openModalButtonClass,
submitButtonClassName,
outcome,
2022-09-27 04:40:56 +00:00
marketType,
2022-09-09 06:02:22 +00:00
} = props
if (!warning) {
return (
<button
className={clsx(
openModalButtonClass,
2022-09-27 04:40:56 +00:00
isSubmitting ? 'loading btn-disabled' : '',
disabled && 'btn-disabled',
marketType === 'binary'
? !outcome
? 'btn-disabled bg-greyscale-2'
: ''
: ''
2022-09-09 06:02:22 +00:00
)}
onClick={onSubmit}
>
{isSubmitting
? 'Submitting...'
: amount
? `Wager ${formatMoney(amount)}`
: 'Wager'}
2022-09-09 06:02:22 +00:00
</button>
)
}
return (
<ConfirmationButton
openModalBtn={{
className: clsx(
openModalButtonClass,
isSubmitting && 'btn-disabled loading'
),
label: amount ? `Wager ${formatMoney(amount)}` : 'Wager',
2022-09-09 06:02:22 +00:00
}}
cancelBtn={{
label: 'Cancel',
className: 'btn-warning',
}}
submitBtn={{
label: 'Submit',
className: clsx(
'border-none btn-sm btn-ghost self-center',
submitButtonClassName
),
}}
onSubmit={onSubmit}
>
<Row className="items-center text-xl">
<ExclamationIcon
className="h-16 w-16 text-yellow-400"
aria-hidden="true"
/>
Whoa, there!
</Row>
<p>{warning}</p>
</ConfirmationButton>
)
}