manifold/web/components/sell-row.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

78 lines
2.2 KiB
TypeScript

import { BinaryContract, PseudoNumericContract } from 'common/contract'
import { User } from 'common/user'
import { useState } from 'react'
import { Col } from './layout/col'
import { Row } from './layout/row'
import { formatWithCommas } from 'common/util/format'
import { OutcomeLabel } from './outcome-label'
import { useUserContractBets } from 'web/hooks/use-user-bets'
import { useSaveShares } from './use-save-shares'
import { SellSharesModal } from './sell-modal'
export function SellRow(props: {
contract: BinaryContract | PseudoNumericContract
user: User | null | undefined
className?: string
}) {
const { className, contract, user } = props
const userBets = useUserContractBets(user?.id, contract.id)
const [showSellModal, setShowSellModal] = useState(false)
const { mechanism } = contract
const { yesFloorShares, noFloorShares, yesShares, noShares } = useSaveShares(
contract,
userBets
)
const floorShares = yesFloorShares || noFloorShares
const sharesOutcome = yesFloorShares
? 'YES'
: noFloorShares
? 'NO'
: undefined
if (sharesOutcome && user && mechanism === 'cpmm-1') {
return (
<div>
<Col className={className}>
<Row className="items-center justify-between gap-2 ">
<div>
You have {formatWithCommas(floorShares)}{' '}
<OutcomeLabel
outcome={sharesOutcome}
contract={contract}
truncate={'short'}
/>{' '}
shares
</div>
<button
className="btn btn-sm"
style={{
backgroundColor: 'white',
border: '2px solid',
color: '#3D4451',
}}
onClick={() => setShowSellModal(true)}
>
Sell
</button>
</Row>
</Col>
{showSellModal && (
<SellSharesModal
contract={contract}
user={user}
userBets={userBets ?? []}
shares={yesShares || noShares}
sharesOutcome={sharesOutcome}
setOpen={setShowSellModal}
/>
)}
</div>
)
}
return <div />
}