diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx index 91c6fe00..c8356a06 100644 --- a/web/components/bet-panel.tsx +++ b/web/components/bet-panel.tsx @@ -59,6 +59,9 @@ export function BetPanel(props: { track('toggle limit order') } + const showLimitOrders = + (isLimitOrder && unfilledBets.length > 0) || yourUnfilledBets.length > 0 + return ( - {yourUnfilledBets.length > 0 && ( - + {showLimitOrders && ( + )} ) @@ -119,6 +118,8 @@ export function SimpleBetPanel(props: { const unfilledBets = useUnfilledBets(contract.id) ?? [] const yourUnfilledBets = unfilledBets.filter((bet) => bet.userId === user?.id) + const showLimitOrders = + (isLimitOrder && unfilledBets.length > 0) || yourUnfilledBets.length > 0 return ( @@ -158,12 +159,8 @@ export function SimpleBetPanel(props: { - {yourUnfilledBets.length > 0 && ( - + {showLimitOrders && ( + )} ) diff --git a/web/components/limit-bets.tsx b/web/components/limit-bets.tsx index 503b3d17..4f1f1893 100644 --- a/web/components/limit-bets.tsx +++ b/web/components/limit-bets.tsx @@ -5,8 +5,11 @@ import { getFormattedMappedValue } from 'common/pseudo-numeric' import { formatMoney, formatPercent } from 'common/util/format' import { sortBy } from 'lodash' import { useState } from 'react' +import { useUser, useUserById } from 'web/hooks/use-user' import { cancelBet } from 'web/lib/firebase/api' +import { Avatar } from './avatar' import { Col } from './layout/col' +import { Tabs } from './layout/tabs' import { LoadingIndicator } from './loading-indicator' import { BinaryOutcomeLabel, PseudoNumericOutcomeLabel } from './outcome-label' @@ -16,12 +19,14 @@ export function LimitBets(props: { hideLabel?: boolean className?: string }) { - const { contract, bets, hideLabel, className } = props - const recentBets = sortBy( + const { contract, bets, className } = props + const sortedBets = sortBy( bets, (bet) => -1 * bet.limitProb, (bet) => -1 * bet.createdTime ) + const user = useUser() + const yourBets = sortedBets.filter((bet) => bet.userId === user?.id) return ( - {!hideLabel && ( -
Your limit orders
- )} - - - {recentBets.map((bet) => ( - - ))} - -
+ 0 + ? [ + { + title: 'Your limit orders', + content: ( + + ), + }, + ] + : []), + { + title: 'All limit orders', + content: ( + + ), + }, + ]} + /> ) } +function LimitOrderTable(props: { + limitBets: LimitBet[] + contract: CPMMBinaryContract | PseudoNumericContract + isYou: boolean +}) { + const { limitBets, contract, isYou } = props + + return ( + + + {limitBets.map((bet) => ( + + ))} + +
+ ) +} + function LimitBet(props: { contract: CPMMBinaryContract | PseudoNumericContract bet: LimitBet + isYou: boolean }) { - const { contract, bet } = props + const { contract, bet, isYou } = props const { orderAmount, amount, limitProb, outcome } = bet const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC' @@ -59,8 +101,19 @@ function LimitBet(props: { setIsCancelling(true) } + const user = useUserById(bet.userId) + return ( + {!isYou && ( + + + + )}
{isPseudoNumeric ? ( @@ -76,18 +129,20 @@ function LimitBet(props: { ? getFormattedMappedValue(contract)(limitProb) : formatPercent(limitProb)} - - {isCancelling ? ( - - ) : ( - - )} - + {isYou && ( + + {isCancelling ? ( + + ) : ( + + )} + + )} ) }