Order book button opens full table of limit orders in dialog

web/components/bet-panel.tsx

@@ -405,7 +405,7 @@ function QuickOrLimitBet(props: {
   return (
     <Row className="align-center mb-4 justify-between">
       <div className="text-4xl">Bet</div>
-      <Row className="mt-2 items-center gap-2">
+      <Row className="mt-1 items-center gap-2">
         <PillButton
           selected={!isLimitOrder}
           onSelect={() => {

web/components/layout/modal.tsx

@@ -7,9 +7,17 @@ export function Modal(props: {
   children: ReactNode
   open: boolean
   setOpen: (open: boolean) => void
+  size?: 'sm' | 'md' | 'lg' | 'xl'
   className?: string
 }) {
-  const { children, open, setOpen, className } = props
+  const { children, open, setOpen, size = 'md', className } = props
+
+  const sizeClass = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-2xl',
+    xl: 'max-w-5xl',
+  }[size]
 
   return (
     <Transition.Root show={open} as={Fragment}>
@@ -49,7 +57,8 @@ export function Modal(props: {
           >
             <div
               className={clsx(
-                'inline-block transform overflow-hidden text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6 sm:align-middle',
+                'my-8 mx-6 inline-block w-full transform overflow-hidden text-left align-bottom transition-all sm:align-middle',
+                sizeClass,
                 className
               )}
             >

web/components/limit-bets.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx'
 import { LimitBet } from 'common/bet'
 import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
 import { getFormattedMappedValue } from 'common/pseudo-numeric'
@@ -8,10 +7,14 @@ import { useState } from 'react'
 import { useUser, useUserById } from 'web/hooks/use-user'
 import { cancelBet } from 'web/lib/firebase/api'
 import { Avatar } from './avatar'
+import { Button } from './button'
 import { Col } from './layout/col'
-import { Tabs } from './layout/tabs'
+import { Modal } from './layout/modal'
+import { Row } from './layout/row'
 import { LoadingIndicator } from './loading-indicator'
 import { BinaryOutcomeLabel, PseudoNumericOutcomeLabel } from './outcome-label'
+import { Subtitle } from './subtitle'
+import { Title } from './title'
 
 export function LimitBets(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
@@ -28,40 +31,36 @@ export function LimitBets(props: {
   const yourBets = sortedBets.filter((bet) => bet.userId === user?.id)
 
   return (
-    <Col
-      className={clsx(
-        className,
-        'gap-2 overflow-hidden rounded bg-white px-4 py-3'
+    <Col className={className}>
+      {yourBets.length === 0 && (
+        <OrderBookButton
+          className="self-end"
+          limitBets={sortedBets}
+          contract={contract}
+        />
+      )}
+
+      {yourBets.length > 0 && (
+        <Col
+          className={'mt-4 gap-2 overflow-hidden rounded bg-white px-4 py-3'}
+        >
+          <Row className="mt-2 mb-4 items-center justify-between">
+            <Subtitle className="!mt-0 !mb-0" text="Your limit orders" />
+
+            <OrderBookButton
+              className="self-end"
+              limitBets={sortedBets}
+              contract={contract}
+            />
+          </Row>
+
+          <LimitOrderTable
+            limitBets={yourBets}
+            contract={contract}
+            isYou={true}
+          />
+        </Col>
       )}
-    >
-      <Tabs
-        tabs={[
-          ...(yourBets.length > 0
-            ? [
-                {
-                  title: 'Your limit orders',
-                  content: (
-                    <LimitOrderTable
-                      limitBets={yourBets}
-                      contract={contract}
-                      isYou={true}
-                    />
-                  ),
-                },
-              ]
-            : []),
-          {
-            title: 'All limit orders',
-            content: (
-              <LimitOrderTable
-                limitBets={sortedBets}
-                contract={contract}
-                isYou={false}
-              />
-            ),
-          },
-        ]}
-      />
     </Col>
   )
 }
@@ -153,3 +152,46 @@ function LimitBet(props: {
     </tr>
   )
 }
+
+export function OrderBookButton(props: {
+  limitBets: LimitBet[]
+  contract: CPMMBinaryContract | PseudoNumericContract
+  className?: string
+}) {
+  const { limitBets, contract, className } = props
+  const [open, setOpen] = useState(false)
+
+  const yesBets = limitBets.filter((bet) => bet.outcome === 'YES')
+  const noBets = limitBets.filter((bet) => bet.outcome === 'NO').reverse()
+
+  return (
+    <>
+      <Button
+        className={className}
+        onClick={() => setOpen(true)}
+        size="xs"
+        color="blue"
+      >
+        Order book
+      </Button>
+
+      <Modal open={open} setOpen={setOpen} size="lg">
+        <Col className="rounded bg-white p-4 py-6">
+          <Title className="!mt-0" text="Order book" />
+          <Col className="justify-start gap-2 lg:flex-row lg:items-start">
+            <LimitOrderTable
+              limitBets={yesBets}
+              contract={contract}
+              isYou={false}
+            />
+            <LimitOrderTable
+              limitBets={noBets}
+              contract={contract}
+              isYou={false}
+            />
+          </Col>
+        </Col>
+      </Modal>
+    </>
+  )
+}