open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow sell row to show just a button

Browse Source 
This is nice for the feed and on a bet's mobile interface.
This commit is contained in:
Ian Philips 2022-04-19 15:04:49 -06:00
parent d0cb24329e
commit 8905bfbfc8
2 changed files with 100 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/components/bet-row.tsx
View File

@ -1,11 +1,14 @@
import clsx from 'clsx'
import { useState } from 'react'
import { BetPanelSwitcher } from './bet-panel'
import { BetPanelSwitcher, useSaveShares } from './bet-panel'
import { Row } from './layout/row'
import { YesNoSelector } from './yes-no-selector'
import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
import { Modal } from './layout/modal'
import { SellRow } from './sell-row'
import { useUser } from '../hooks/use-user'
import { useUserContractBets } from '../hooks/use-user-bets'
// Inline version of a bet panel. Opens BetPanel in a new modal.
export default function BetRow(props: {
@ -18,11 +21,17 @@ export default function BetRow(props: {
const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(
undefined
)
const user = useUser()
const userBets = useUserContractBets(user?.id, props.contract.id)
const { yesFloorShares, noFloorShares } = useSaveShares(
props.contract,
userBets
)
return (
<>
<div className={className}>
<Row className="items-center justify-end gap-2">
<Row className="mt-2 justify-end space-x-3">
{/* <div className={clsx('mr-2 text-gray-400', labelClassName)}>
Place a trade
</div> */}
@ -32,6 +41,24 @@ export default function BetRow(props: {
setOpen(true)
setBetChoice(choice)
}}
replaceNoButton={
yesFloorShares > noFloorShares && yesFloorShares > 0 ? (
<SellRow
contract={props.contract}
user={user}
buttonOnly={true}
/>
) : undefined
}
replaceYesButton={
noFloorShares > yesFloorShares && noFloorShares > 0 ? (
<SellRow
contract={props.contract}
user={user}
buttonOnly={true}
/>
) : undefined
}
/>
</Row>
<Modal open={open} setOpen={setOpen}>

113
web/components/sell-row.tsx
View File

@ -10,11 +10,13 @@ import { Modal } from './layout/modal'
import { Title } from './title'
import { SellPanel, useSaveShares } from './bet-panel'
import { useUserContractBets } from '../hooks/use-user-bets'
import clsx from 'clsx'
export function SellRow(props: {
contract: FullContract<DPM | CPMM, Binary>
user: User | null | undefined
className?: string
buttonOnly?: boolean
}) {
const { className } = props
@ -22,54 +24,81 @@ export function SellRow(props: {
const [showSellModal, setShowSellModal] = useState(false)
const { mechanism } = props.contract
const { yesShares, noShares } = useSaveShares(props.contract, userBets)
const shares = yesShares || noShares
const sharesOutcome = yesShares ? 'YES' : noShares ? 'NO' : undefined
return (
<div>
{sharesOutcome && props.user && mechanism === 'cpmm-1' && (
<Col className={className}>
<Row className="items-center justify-between gap-2 ">
<div>
You have {formatWithCommas(Math.floor(shares))}{' '}
<OutcomeLabel
outcome={sharesOutcome}
contract={props.contract}
truncate={'short'}
/>{' '}
shares
</div>
const { yesFloorShares, noFloorShares } = useSaveShares(
props.contract,
userBets
)
const shares = yesFloorShares || noFloorShares
const sharesOutcome = yesFloorShares
? 'YES'
: noFloorShares
? 'NO'
: undefined
if (sharesOutcome && props.user && mechanism === 'cpmm-1') {
return (
<div>
{props.buttonOnly ? (
<Col className={'items-center'}>
<button
className="btn btn-sm"
style={{
backgroundColor: 'white',
border: '2px solid',
color: '#3D4451',
}}
className={clsx(
'btn-sm w-24 gap-1',
// from the yes-no-selector:
'flex inline-flex flex-row 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
{'Sell ' + sharesOutcome}
</button>
<div className={'w-24 text-center text-sm text-gray-500'}>
{'(' + shares + ' shares)'}
</div>
</Col>
) : (
<Col className={className}>
<Row className="items-center justify-between gap-2 ">
<div>
You have {formatWithCommas(shares)}{' '}
<OutcomeLabel
outcome={sharesOutcome}
contract={props.contract}
truncate={'short'}
/>{' '}
shares
</div>
{showSellModal && (
<SellSharesModal
contract={props.contract as FullContract<CPMM, Binary>}
user={props.user}
userBets={userBets ?? []}
shares={shares}
sharesOutcome={sharesOutcome}
setOpen={setShowSellModal}
/>
)}
</Row>
</Col>
// </div>
)}
</div>
)
<button
className="btn btn-sm"
style={{
backgroundColor: 'white',
border: '2px solid',
color: '#3D4451',
}}
onClick={() => setShowSellModal(true)}
>
Sell
</button>
</Row>
</Col>
)}
{showSellModal && (
<SellSharesModal
contract={props.contract as FullContract<CPMM, Binary>}
user={props.user}
userBets={userBets ?? []}
shares={shares}
sharesOutcome={sharesOutcome}
setOpen={setShowSellModal}
/>
)}
</div>
)
}
return <div></div>
}
function SellSharesModal(props: {