manifold/web/components/sell-button.tsx
mantikoros 1a6afaf44f
Pseudo numeric market (#609)
* create pseudo-numeric contracts

* graph and bet panel for pseudo numeric

* pseudo numeric market layout, quick betting

* Estimated value

* sell panel

* fix graph

* pseudo numeric resolution

* bets tab

* redemption for pseudo numeric markets

* create log scale market, validation

* log scale

* create: initial value can't be min or max

* don't allow log scale for ranges with negative values (b/c of problem with graph library)

* prettier delenda est

* graph: handle min value of zero

* bet labeling

* validation

* prettier

* pseudo numeric embeds

* update disclaimer

* validation

* validation
2022-07-02 14:37:59 -05:00

60 lines
2.0 KiB
TypeScript

import { BinaryContract, PseudoNumericContract } from 'common/contract'
import { User } from 'common/user'
import { useUserContractBets } from 'web/hooks/use-user-bets'
import { useState } from 'react'
import { Col } from './layout/col'
import clsx from 'clsx'
import { SellSharesModal } from './sell-modal'
export function SellButton(props: {
contract: BinaryContract | PseudoNumericContract
user: User | null | undefined
sharesOutcome: 'YES' | 'NO' | undefined
shares: number
panelClassName?: string
}) {
const { contract, user, sharesOutcome, shares, panelClassName } = props
const userBets = useUserContractBets(user?.id, contract.id)
const [showSellModal, setShowSellModal] = useState(false)
const { mechanism, outcomeType } = contract
const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
if (sharesOutcome && user && mechanism === 'cpmm-1') {
return (
<Col className={'items-center'}>
<button
className={clsx(
'btn-sm w-24 gap-1',
// from the yes-no-selector:
'inline-flex items-center justify-center rounded-3xl border-2 p-2',
sharesOutcome === 'NO'
? 'hover:bg-primary-focus border-primary hover:border-primary-focus text-primary hover:text-white'
: 'border-red-400 text-red-500 hover:border-red-500 hover:bg-red-500 hover:text-white'
)}
onClick={() => setShowSellModal(true)}
>
Sell{' '}
{isPseudoNumeric
? { YES: 'HIGH', NO: 'LOW' }[sharesOutcome]
: sharesOutcome}
</button>
<div className={'mt-1 w-24 text-center text-sm text-gray-500'}>
{'(' + Math.floor(shares) + ' shares)'}
</div>
{showSellModal && (
<SellSharesModal
className={panelClassName}
contract={contract}
user={user}
userBets={userBets ?? []}
shares={shares}
sharesOutcome={sharesOutcome}
setOpen={setShowSellModal}
/>
)}
</Col>
)
}
return <div />
}