From a898349a723ae222b2bbafc4383806be5c8d3acd Mon Sep 17 00:00:00 2001 From: David Chee Date: Wed, 18 Sep 2024 18:24:32 -0700 Subject: [PATCH 1/4] conditional orderbook tab and button --- web/components/contract/contract-tabs.tsx | 34 ++++++++++- .../contract/twomba-contract-page.tsx | 59 ++++++++++++++++--- web/components/layout/tabs.tsx | 3 +- 3 files changed, 85 insertions(+), 11 deletions(-) diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index 7ae29c48b3..557e614d48 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -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' @@ -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 @@ -94,6 +103,8 @@ export function ContractTabs(props: { (totalPositions > 0 ? `${shortFormatNumber(totalPositions)} ` : '') + maybePluralize('Holder', totalPositions) + const unfilledBets = useUnfilledBets(liveContract.id) ?? [] + return ( ), - } + }, + totalBets > 0 && + liveContract.mechanism === 'cpmm-1' && { + title: 'Order book', + className: 'hidden md:block', + content: ( + + ), + } )} /> ) diff --git a/web/components/contract/twomba-contract-page.tsx b/web/components/contract/twomba-contract-page.tsx index b2ef984f55..92ec0ea266 100644 --- a/web/components/contract/twomba-contract-page.tsx +++ b/web/components/contract/twomba-contract-page.tsx @@ -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' @@ -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' @@ -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 { @@ -220,6 +227,10 @@ export function TwombaContractPageContent(props: ContractParams) { const isSpiceMarket = !!liveContract.isSpicePayout const isCashContract = liveContract.token === 'CASH' + const [showOrderBook, setShowOrderBook] = useState(false) + + const unfilledBets = useUnfilledBets(liveContract.id) ?? [] + return ( <> {props.contract.visibility !== 'public' && ( @@ -442,13 +453,45 @@ export function TwombaContractPageContent(props: ContractParams) { {!user && } {!!user && ( - + + + {totalBets > 0 && ( +
+ +
+ )} + + + {showOrderBook && ( + + )} + )} {isResolved && resolution !== 'CANCEL' && ( diff --git a/web/components/layout/tabs.tsx b/web/components/layout/tabs.tsx index a29c3a0caa..acd1cedfd6 100644 --- a/web/components/layout/tabs.tsx +++ b/web/components/layout/tabs.tsx @@ -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} > From fdc86c8722c212565eb045d70c44353cf48fb6fa Mon Sep 17 00:00:00 2001 From: David Chee Date: Thu, 19 Sep 2024 14:07:48 -0700 Subject: [PATCH 2/4] Only get unfilledBets when the orderbook tab is clicked --- web/components/contract/contract-tabs.tsx | 156 ++++++++++++---------- 1 file changed, 86 insertions(+), 70 deletions(-) diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index 557e614d48..3919e3e749 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -103,7 +103,91 @@ export function ContractTabs(props: { (totalPositions > 0 ? `${shortFormatNumber(totalPositions)} ` : '') + maybePluralize('Holder', totalPositions) - const unfilledBets = useUnfilledBets(liveContract.id) ?? [] + const tabs = buildArray( + { + title: commentsTitle, + content: ( + 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: ( + 0 && + !liveContract.isResolved + ? userPositionsByOutcome + : undefined + } + contract={liveContract as BinaryContract} + setTotalPositions={setTotalPositions} + /> + ), + }, + totalBets > 0 && { + title: tradesTitle, + content: ( + + + + ), + }, + totalBets > 0 && + liveContract.mechanism === 'cpmm-1' && { + title: 'Order book', + className: 'hidden md:block', + content: null, + } + ) + + const filteredTabs = tabs.filter(Boolean) + + 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) { + filteredTabs[orderBookTabIndex].content = ( + + ) + } return ( 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: ( - 0 && - !liveContract.isResolved - ? userPositionsByOutcome - : undefined - } - contract={liveContract as BinaryContract} - setTotalPositions={setTotalPositions} - /> - ), - }, - totalBets > 0 && { - title: tradesTitle, - content: ( - - - - ), - }, - totalBets > 0 && - liveContract.mechanism === 'cpmm-1' && { - title: 'Order book', - className: 'hidden md:block', - content: ( - - ), - } - )} + tabs={filteredTabs} /> ) } From 2fafd0aeb36af1e1686b6b2143388cf1a023864a Mon Sep 17 00:00:00 2001 From: David Chee Date: Thu, 19 Sep 2024 14:19:08 -0700 Subject: [PATCH 3/4] Get unfilled bets when orderbook button is clicked --- web/components/contract/twomba-contract-page.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/web/components/contract/twomba-contract-page.tsx b/web/components/contract/twomba-contract-page.tsx index 92ec0ea266..730c93c04f 100644 --- a/web/components/contract/twomba-contract-page.tsx +++ b/web/components/contract/twomba-contract-page.tsx @@ -229,7 +229,8 @@ export function TwombaContractPageContent(props: ContractParams) { const [showOrderBook, setShowOrderBook] = useState(false) - const unfilledBets = useUnfilledBets(liveContract.id) ?? [] + const unfilledBets = + useUnfilledBets(liveContract.id, { enabled: showOrderBook }) ?? [] return ( <> @@ -460,7 +461,11 @@ export function TwombaContractPageContent(props: ContractParams) {