2022-03-29 19:56:56 +00:00
|
|
|
import { useState } from 'react'
|
2022-05-09 22:50:20 +00:00
|
|
|
import clsx from 'clsx'
|
2022-03-15 22:27:51 +00:00
|
|
|
|
2022-07-10 18:05:44 +00:00
|
|
|
import { SimpleBetPanel } from './bet-panel'
|
|
|
|
import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
|
2022-03-29 19:56:56 +00:00
|
|
|
import { Modal } from './layout/modal'
|
2022-05-09 13:04:36 +00:00
|
|
|
import { useUser } from 'web/hooks/use-user'
|
|
|
|
import { useUserContractBets } from 'web/hooks/use-user-bets'
|
2022-07-10 18:05:44 +00:00
|
|
|
import { useSaveBinaryShares } from './use-save-binary-shares'
|
2022-07-12 22:34:10 +00:00
|
|
|
import { Col } from './layout/col'
|
2022-08-24 22:41:46 +00:00
|
|
|
import { Button } from 'web/components/button'
|
2022-08-28 20:44:22 +00:00
|
|
|
import { BetSignUpPrompt } from './sign-up-prompt'
|
2022-01-26 20:08:03 +00:00
|
|
|
|
2022-08-19 17:07:48 +00:00
|
|
|
/** Button that opens BetPanel in a new modal */
|
|
|
|
export default function BetButton(props: {
|
2022-07-10 18:05:44 +00:00
|
|
|
contract: CPMMBinaryContract | PseudoNumericContract
|
2022-01-26 22:28:57 +00:00
|
|
|
className?: string
|
2022-05-11 21:35:50 +00:00
|
|
|
btnClassName?: string
|
2022-05-17 17:31:19 +00:00
|
|
|
betPanelClassName?: string
|
2022-01-26 22:28:57 +00:00
|
|
|
}) {
|
2022-05-17 17:31:19 +00:00
|
|
|
const { className, btnClassName, betPanelClassName, contract } = props
|
2022-01-26 20:08:03 +00:00
|
|
|
const [open, setOpen] = useState(false)
|
2022-07-12 22:34:10 +00:00
|
|
|
|
2022-04-20 14:13:39 +00:00
|
|
|
const user = useUser()
|
|
|
|
const userBets = useUserContractBets(user?.id, contract.id)
|
2022-09-11 02:57:35 +00:00
|
|
|
const { yesShares, noShares, hasYesShares, hasNoShares } =
|
|
|
|
useSaveBinaryShares(contract, userBets)
|
|
|
|
|
|
|
|
const { outcomeType } = contract
|
|
|
|
const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
|
2022-07-12 22:47:28 +00:00
|
|
|
|
2022-01-26 20:08:03 +00:00
|
|
|
return (
|
|
|
|
<>
|
2022-07-12 22:34:10 +00:00
|
|
|
<Col className={clsx('items-center', className)}>
|
2022-08-28 20:44:22 +00:00
|
|
|
{user ? (
|
|
|
|
<Button
|
|
|
|
size="lg"
|
2022-09-08 03:39:21 +00:00
|
|
|
className={clsx(
|
2022-09-08 05:16:48 +00:00
|
|
|
'my-auto inline-flex min-w-[75px] whitespace-nowrap',
|
2022-09-08 03:39:21 +00:00
|
|
|
btnClassName
|
|
|
|
)}
|
2022-08-28 20:44:22 +00:00
|
|
|
onClick={() => setOpen(true)}
|
|
|
|
>
|
2022-09-08 13:40:16 +00:00
|
|
|
Predict
|
2022-08-28 20:44:22 +00:00
|
|
|
</Button>
|
|
|
|
) : (
|
|
|
|
<BetSignUpPrompt />
|
|
|
|
)}
|
2022-09-11 02:57:50 +00:00
|
|
|
|
|
|
|
{user && (
|
|
|
|
<div className={'mt-1 w-24 text-center text-sm text-gray-500'}>
|
|
|
|
{hasYesShares
|
|
|
|
? `(${Math.floor(yesShares)} ${
|
|
|
|
isPseudoNumeric ? 'HIGHER' : 'YES'
|
|
|
|
})`
|
|
|
|
: hasNoShares
|
|
|
|
? `(${Math.floor(noShares)} ${isPseudoNumeric ? 'LOWER' : 'NO'})`
|
|
|
|
: ''}
|
|
|
|
</div>
|
|
|
|
)}
|
2022-07-12 22:34:10 +00:00
|
|
|
</Col>
|
|
|
|
|
2022-09-09 21:08:42 +00:00
|
|
|
<Modal open={open} setOpen={setOpen} position="center">
|
2022-07-10 18:05:44 +00:00
|
|
|
<SimpleBetPanel
|
2022-05-17 17:31:19 +00:00
|
|
|
className={betPanelClassName}
|
2022-05-09 22:50:20 +00:00
|
|
|
contract={contract}
|
2022-07-13 16:20:25 +00:00
|
|
|
selected="YES"
|
2022-05-09 22:50:20 +00:00
|
|
|
onBetSuccess={() => setOpen(false)}
|
2022-07-12 22:34:10 +00:00
|
|
|
hasShares={hasYesShares || hasNoShares}
|
2022-05-09 22:50:20 +00:00
|
|
|
/>
|
|
|
|
</Modal>
|
2022-01-26 20:08:03 +00:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|