diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx index 558697ef..17e41dff 100644 --- a/web/components/bet-panel.tsx +++ b/web/components/bet-panel.tsx @@ -124,10 +124,9 @@ export function SimpleBetPanel(props: { - + <div className="mb-6 text-2xl"> + {isLimitOrder ? <>Limit bet</> : <>Place your bet</>} + </div> <button className="btn btn-ghost btn-sm text-sm normal-case" diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx index 17ba9fa3..ffa536ca 100644 --- a/web/components/bets-list.tsx +++ b/web/components/bets-list.tsx @@ -45,6 +45,7 @@ import { useUnfilledBets } from 'web/hooks/use-bets' import { LimitBet } from 'common/bet' import { floatingEqual } from 'common/util/math' import { Pagination } from './pagination' +import { LimitBets } from './limit-bets' type BetSort = 'newest' | 'profit' | 'closeTime' | 'value' type BetFilter = 'open' | 'sold' | 'closed' | 'resolved' | 'all' @@ -256,6 +257,9 @@ function ContractBets(props: { const { bets, contract, metric, isYourBets } = props const { resolution, outcomeType } = contract + const limitBets = bets.filter( + (bet) => bet.limitProb !== undefined + ) as LimitBet[] const resolutionValue = (contract as NumericContract).resolutionValue const [collapsed, setCollapsed] = useState(true) @@ -350,7 +354,21 @@ function ContractBets(props: { isYourBets={isYourBets} /> - <Spacer h={8} /> + <Spacer h={4} /> + + {contract.mechanism === 'cpmm-1' && limitBets.length > 0 && ( + <> + <div className="bg-gray-50 px-4 py-2">Your limit bets</div> + <LimitBets + className="max-w-md px-2 py-0 sm:px-4" + contract={contract} + bets={limitBets} + hideLabel + /> + </> + )} + + <Spacer h={4} /> <ContractBetsTable contract={contract} diff --git a/web/components/limit-bets.tsx b/web/components/limit-bets.tsx index 82ae627d..f25ce495 100644 --- a/web/components/limit-bets.tsx +++ b/web/components/limit-bets.tsx @@ -13,9 +13,10 @@ import { BinaryOutcomeLabel, PseudoNumericOutcomeLabel } from './outcome-label' export function LimitBets(props: { contract: CPMMBinaryContract | PseudoNumericContract bets: LimitBet[] + hideLabel?: boolean className?: string }) { - const { contract, bets, className } = props + const { contract, bets, hideLabel, className } = props const recentBets = sortBy( bets, (bet) => -1 * bet.limitProb, @@ -24,18 +25,19 @@ export function LimitBets(props: { return ( <Col - className={clsx(className, 'gap-2 overflow-hidden rounded bg-white py-3')} + className={clsx( + className, + 'gap-2 overflow-hidden rounded bg-white px-4 py-3' + )} > - <div className="px-6 py-3 text-2xl">Your limit bets</div> - <div className="px-4"> - <table className="table-compact table w-full rounded text-gray-500"> - <tbody> - {recentBets.map((bet) => ( - <LimitBet key={bet.id} bet={bet} contract={contract} /> - ))} - </tbody> - </table> - </div> + {!hideLabel && <div className="px-2 py-3 text-2xl">Your limit bets</div>} + <table className="table-compact table w-full rounded text-gray-500"> + <tbody> + {recentBets.map((bet) => ( + <LimitBet key={bet.id} bet={bet} contract={contract} /> + ))} + </tbody> + </table> </Col> ) }