conditional orderbook tab and button

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 (
     <ControlledTabs
       className="mb-4"
@@ -108,6 +119,8 @@ export function ContractTabs(props: {
               ? 'trades'
               : title === positionsTitle
               ? 'positions'
+              : title === 'Order book'
+              ? 'orderbook'
               : 'contract'
           } tab`
         )
@@ -162,7 +175,24 @@ export function ContractTabs(props: {
               />
             </Col>
           ),
-        }
+        },
+        totalBets > 0 &&
+          liveContract.mechanism === 'cpmm-1' && {
+            title: 'Order book',
+            className: 'hidden md:block',
+            content: (
+              <OrderBookPanel
+                contract={
+                  liveContract as
+                    | BinaryContract
+                    | PseudoNumericContract
+                    | StonkContract
+                    | CPMMNumericContract
+                }
+                limitBets={unfilledBets}
+              />
+            ),
+          }
       )}
     />
   )

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) {
             <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">
+                  {totalBets > 0 && (
+                    <div className="flex sm:hidden">
+                      <Button
+                        color="indigo-outline"
+                        size="lg"
+                        onClick={() => setShowOrderBook((prev) => !prev)}
+                        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' && (

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}
           >