Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

conditional orderbook tab and button #2888

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

conditional orderbook tab and button #2888

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a898349
conditional orderbook tab and button
SirSaltyy Sep 19, 2024
fdc86c8
Only get unfilledBets when the orderbook tab is clicked
SirSaltyy Sep 19, 2024
2fafd0a
Get unfilled bets when orderbook button is clicked
SirSaltyy Sep 19, 2024
4a981e9
Empty orderbook message
SirSaltyy Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion web/components/bet/order-book.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -535,7 +535,21 @@ export function OrderBookPanel(props: {
const isCPMMMulti = contract.mechanism === 'cpmm-multi-1'
const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'

if (limitBets.length === 0) return <></>
if (limitBets.length === 0)
return (
<>
<Col className="text-ink-800 my-2 gap-2 rounded-lg bg-indigo-200/10 px-2 py-4 sm:px-4">
<Subtitle className="!my-0">
Order book{' '}
<InfoTooltip
text="List of active limit orders by traders wishing to buy YES or NO at a given probability"
className="ml-1"
/>
</Subtitle>
Currently no unfilled limit orders.
</Col>
</>
)

return (
<Col className="text-ink-800 my-2 gap-2 rounded-lg bg-indigo-200/10 px-2 py-4 sm:px-4">
Expand Down
152 changes: 99 additions & 53 deletions web/components/contract/contract-tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,14 @@ import {
} from 'common/antes'
import { Bet } from 'common/bet'
import { ContractComment } from 'common/comment'
import { BinaryContract, Contract, CPMMNumericContract } from 'common/contract'
import {
BinaryContract,
Contract,
CPMMMultiContract,
CPMMNumericContract,
PseudoNumericContract,
StonkContract,
} from 'common/contract'
import { buildArray } from 'common/util/array'
import { shortFormatNumber, maybePluralize } from 'common/util/format'
import { MINUTE_MS } from 'common/util/time'
Expand Down Expand Up @@ -43,6 +50,8 @@ import generateFilterDropdownItems from '../search/search-dropdown-helpers'
import { useAPIGetter } from 'web/hooks/use-api-getter'
import { api } from 'web/lib/api/api'
import { TRADE_TERM } from 'common/envs/constants'
import { useUnfilledBets } from 'web/hooks/use-bets'
import { OrderBookPanel } from '../bet/order-book'

export function ContractTabs(props: {
mainContract: Contract
Expand Down Expand Up @@ -94,6 +103,92 @@ export function ContractTabs(props: {
(totalPositions > 0 ? `${shortFormatNumber(totalPositions)} ` : '') +
maybePluralize('Holder', totalPositions)

const tabs = buildArray(
{
title: commentsTitle,
content: (
<CommentsTabContent
contract={mainContract}
comments={comments}
pinnedComments={pinnedComments}
setCommentsLength={setTotalComments}
blockedUserIds={blockedUserIds}
replyTo={replyTo}
clearReply={() => setReplyTo?.(undefined)}
className="-ml-2 -mr-1"
bets={uniqBy(bets.concat(betReplies), (b) => b.id)}
appRouter={appRouter}
/>
),
},
totalBets > 0 &&
(liveContract.mechanism === 'cpmm-1' ||
liveContract.mechanism === 'cpmm-multi-1') && {
title: positionsTitle,
content: (
<UserPositionsTable
key={liveContract.id}
positions={
// If contract is resolved, will have to refetch positions by profit
Object.values(userPositionsByOutcome).length > 0 &&
!liveContract.isResolved
? userPositionsByOutcome
: undefined
}
contract={liveContract as BinaryContract}
setTotalPositions={setTotalPositions}
/>
),
},
totalBets > 0 && {
title: tradesTitle,
content: (
<Col className={'gap-4'}>
<BetsTabContent
key={liveContract.id}
contract={liveContract}
bets={bets}
totalBets={totalBets}
setReplyToBet={setReplyTo}
/>
</Col>
),
},
totalBets > 0 &&
liveContract.mechanism === 'cpmm-1' && {
title: 'Order book',
className: 'hidden md:block',
content: null,
}
)

const filteredTabs = tabs.filter(Boolean)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think you need this filter


const orderBookTabIndex = filteredTabs.findIndex(
(tab) => tab.title === 'Order book'
)

const isOrderBookTabActive =
orderBookTabIndex >= 0 && activeIndex === orderBookTabIndex

const unfilledBets =
useUnfilledBets(liveContract.id, { enabled: isOrderBookTabActive }) ?? []

if (orderBookTabIndex >= 0) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is this? Why isn't the order book simply in the tabs array as the content object?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm I'm confused I thought this as well as the clause u asked about above in a comment made up the logic that makes it so useUnfilledBets only gets the unfilledbets once the conditions are met and prevent them from loading with the page

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if totalBets>0, a tab.title === 'Order book' is in the tabs, and therefore the orderBookTabIndex.content is set to the <OrderBookPanel/>, so really the only useful clause is if the totalBets is >0, so why not just stick the orderbookpanel in the tabs? and the unfilled bets will either be empty or full if the hook is enabled (aka the orderBookTabActive)

filteredTabs[orderBookTabIndex].content = (
<OrderBookPanel
contract={
liveContract as
| BinaryContract
| PseudoNumericContract
| StonkContract
| CPMMNumericContract
}
limitBets={unfilledBets}
/>
)
}

return (
<ControlledTabs
className="mb-4"
Expand All @@ -108,62 +203,13 @@ export function ContractTabs(props: {
? 'trades'
: title === positionsTitle
? 'positions'
: title === 'Order book'
? 'orderbook'
: 'contract'
} tab`
)
}}
tabs={buildArray(
{
title: commentsTitle,
content: (
<CommentsTabContent
contract={mainContract}
comments={comments}
pinnedComments={pinnedComments}
setCommentsLength={setTotalComments}
blockedUserIds={blockedUserIds}
replyTo={replyTo}
clearReply={() => setReplyTo?.(undefined)}
className="-ml-2 -mr-1"
bets={uniqBy(bets.concat(betReplies), (b) => b.id)}
appRouter={appRouter}
/>
),
},
totalBets > 0 &&
(liveContract.mechanism === 'cpmm-1' ||
liveContract.mechanism === 'cpmm-multi-1') && {
title: positionsTitle,
content: (
<UserPositionsTable
key={liveContract.id}
positions={
// If contract is resolved, will have to refetch positions by profit
Object.values(userPositionsByOutcome).length > 0 &&
!liveContract.isResolved
? userPositionsByOutcome
: undefined
}
contract={liveContract as BinaryContract}
setTotalPositions={setTotalPositions}
/>
),
},
totalBets > 0 && {
title: tradesTitle,
content: (
<Col className={'gap-4'}>
<BetsTabContent
key={liveContract.id}
contract={liveContract}
bets={bets}
totalBets={totalBets}
setReplyToBet={setReplyTo}
/>
</Col>
),
}
)}
tabs={filteredTabs}
/>
)
}
Expand Down
64 changes: 56 additions & 8 deletions web/components/contract/twomba-contract-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ import {
type Contract,
type ContractParams,
tradingAllowed,
BinaryContract,
CPMMMultiContract,
CPMMNumericContract,
PseudoNumericContract,
StonkContract,
} from 'common/contract'
import { mergeWith, uniqBy } from 'lodash'
import Head from 'next/head'
Expand Down Expand Up @@ -55,7 +60,7 @@ import { Rating, ReviewPanel } from 'web/components/reviews/stars'
import { GradientContainer } from 'web/components/widgets/gradient-container'
import { Tooltip } from 'web/components/widgets/tooltip'
import { useAdmin, useTrusted } from 'web/hooks/use-admin'
import { useContractBets } from 'web/hooks/use-bets'
import { useContractBets, useUnfilledBets } from 'web/hooks/use-bets'
import { useLiveContractWithAnswers } from 'web/hooks/use-contract'
import { useGoogleAnalytics } from 'web/hooks/use-google-analytics'
import { useHeaderIsStuck } from 'web/hooks/use-header-is-stuck'
Expand All @@ -76,6 +81,8 @@ import { useSweepstakes } from '../sweestakes-context'
import { useMonitorStatus } from 'web/hooks/use-monitor-status'
import { ToggleVerifyCallout } from '../twomba/toggle-verify-callout'
import { useRouter } from 'next/router'
import { Button } from '../buttons/button'
import { OrderBookPanel } from '../bet/order-book'

export function TwombaContractPageContent(props: ContractParams) {
const {
Expand Down Expand Up @@ -220,6 +227,11 @@ export function TwombaContractPageContent(props: ContractParams) {
const isSpiceMarket = !!liveContract.isSpicePayout
const isCashContract = liveContract.token === 'CASH'

const [showOrderBook, setShowOrderBook] = useState(false)

const unfilledBets =
useUnfilledBets(liveContract.id, { enabled: showOrderBook }) ?? []

return (
<>
{props.contract.visibility !== 'public' && (
Expand Down Expand Up @@ -442,13 +454,49 @@ export function TwombaContractPageContent(props: ContractParams) {
<Row className="my-2 flex-wrap items-center justify-between gap-y-2"></Row>
{!user && <SidebarSignUpButton className="mb-4 flex md:hidden" />}
{!!user && (
<ContractSharePanel
isClosed={isClosed}
isCreator={isCreator}
showResolver={showResolver}
// TODO: upgrade tier
contract={props.contract}
/>
<Col>
<Row className="items-center gap-2">
SirSaltyy marked this conversation as resolved.
Show resolved Hide resolved
{totalBets > 0 && (
<div className="flex sm:hidden">
<Button
color="indigo-outline"
size="lg"
onClick={() => {
setShowOrderBook((prev) => !prev)
if (!showOrderBook) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what's this clause for?

}
}}
className={clsx(
'w-full rounded-md px-4 py-2 text-indigo-500',
showOrderBook &&
'bg-primary-600 !text-ink-0 ring-transparent'
)}
>
Order Book
</Button>
</div>
)}
<ContractSharePanel
isClosed={isClosed}
isCreator={isCreator}
showResolver={showResolver}
// TODO: upgrade tier
contract={props.contract}
/>
</Row>
{showOrderBook && (
<OrderBookPanel
contract={
liveContract as
| BinaryContract
| PseudoNumericContract
| StonkContract
| CPMMNumericContract
}
limitBets={unfilledBets}
/>
)}
</Col>
)}

{isResolved && resolution !== 'CANCEL' && (
Expand Down
3 changes: 2 additions & 1 deletion web/components/layout/tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,8 @@ export function ControlledTabs(props: TabProps & { activeIndex: number }) {
: 'text-ink-500 hover:border-ink-300 hover:text-ink-700 border-transparent',
'mr-4 inline-flex cursor-pointer flex-row gap-1 whitespace-nowrap border-b-2 px-1 py-3 text-sm font-medium ',
labelClassName,
'flex-shrink-0'
'flex-shrink-0',
tab.className
)}
aria-current={activeIndex === i ? 'page' : undefined}
>
Expand Down
Loading