manifold/web/components/sell-modal.tsx
Boa 9ba7c04524
Sell shares mobile (#86)
* Abstract sell shares row to component

* Allow sell row to show just a button

This is nice for the feed and on a bet's mobile interface.

* Add and use floor shares

* Allow sell button on the same line as bet button

* Move use save shares to own file

* Make sure to sell non-integer shares

* Create SellButon & sell non-integer shares

* Remove props prefixes

* Break out sell modal and button
2022-04-20 08:13:39 -06:00

48 lines
1.3 KiB
TypeScript

import { Binary, CPMM, FullContract } from '../../common/contract'
import { Bet } from '../../common/bet'
import { User } from '../../common/user'
import { Modal } from './layout/modal'
import { Col } from './layout/col'
import { Title } from './title'
import { formatWithCommas } from '../../common/util/format'
import { OutcomeLabel } from './outcome-label'
import { SellPanel } from './bet-panel'
export function SellSharesModal(props: {
contract: FullContract<CPMM, Binary>
userBets: Bet[]
shares: number
sharesOutcome: 'YES' | 'NO'
user: User
setOpen: (open: boolean) => void
}) {
const { contract, shares, sharesOutcome, userBets, user, setOpen } = props
return (
<Modal open={true} setOpen={setOpen}>
<Col className="rounded-md bg-white px-8 py-6">
<Title className="!mt-0" text={'Sell shares'} />
<div className="mb-6">
You have {formatWithCommas(Math.floor(shares))}{' '}
<OutcomeLabel
outcome={sharesOutcome}
contract={contract}
truncate={'short'}
/>{' '}
shares
</div>
<SellPanel
contract={contract}
shares={shares}
sharesOutcome={sharesOutcome}
user={user}
userBets={userBets ?? []}
onSellSuccess={() => setOpen(false)}
/>
</Col>
</Modal>
)
}