manifold/web/components/bet-row.tsx
Marshall Polaris 7c4ec2a8e3
Refactor contract typing to be more concise and more correct (#355)
* Refactor contract types slightly

* Refactor contract types greatly

* Kill dead binary DPM contract creation code

* Use BinaryContract, DPMContract, etc. type aliases
2022-05-31 19:42:35 -07:00

76 lines
2.2 KiB
TypeScript

import { useState } from 'react'
import clsx from 'clsx'
import { BetPanelSwitcher } from './bet-panel'
import { YesNoSelector } from './yes-no-selector'
import { BinaryContract } from 'common/contract'
import { Modal } from './layout/modal'
import { SellButton } from './sell-button'
import { useUser } from 'web/hooks/use-user'
import { useUserContractBets } from 'web/hooks/use-user-bets'
import { useSaveShares } from './use-save-shares'
// Inline version of a bet panel. Opens BetPanel in a new modal.
export default function BetRow(props: {
contract: BinaryContract
className?: string
btnClassName?: string
betPanelClassName?: string
}) {
const { className, btnClassName, betPanelClassName, contract } = props
const [open, setOpen] = useState(false)
const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(
undefined
)
const user = useUser()
const userBets = useUserContractBets(user?.id, contract.id)
const { yesFloorShares, noFloorShares, yesShares, noShares } = useSaveShares(
contract,
userBets
)
return (
<>
<YesNoSelector
className={clsx('justify-end', className)}
btnClassName={clsx('btn-sm w-24', btnClassName)}
onSelect={(choice) => {
setOpen(true)
setBetChoice(choice)
}}
replaceNoButton={
yesFloorShares > 0 ? (
<SellButton
panelClassName={betPanelClassName}
contract={contract}
user={user}
sharesOutcome={'YES'}
shares={yesShares}
/>
) : undefined
}
replaceYesButton={
noFloorShares > 0 ? (
<SellButton
panelClassName={betPanelClassName}
contract={contract}
user={user}
sharesOutcome={'NO'}
shares={noShares}
/>
) : undefined
}
/>
<Modal open={open} setOpen={setOpen}>
<BetPanelSwitcher
className={betPanelClassName}
contract={contract}
title={contract.question}
selected={betChoice}
onBetSuccess={() => setOpen(false)}
/>
</Modal>
</>
)
}