Show limit bets in bets table

web/components/bet-panel.tsx

@@ -124,10 +124,9 @@ export function SimpleBetPanel(props: {
     <Col className={className}>
       <Col className={clsx('rounded-b-md rounded-t-md bg-white px-8 py-6')}>
         <Row className="justify-between">
-          <Title
+          <div className="mb-6 text-2xl">
-            className={clsx('!mt-0')}
+            {isLimitOrder ? <>Limit bet</> : <>Place your bet</>}
-            text={isLimitOrder ? 'Limit bet' : 'Place a trade'}
+          </div>
-          />
 
           <button
             className="btn btn-ghost btn-sm text-sm normal-case"

web/components/bets-list.tsx

@@ -45,6 +45,7 @@ import { useUnfilledBets } from 'web/hooks/use-bets'
 import { LimitBet } from 'common/bet'
 import { floatingEqual } from 'common/util/math'
 import { Pagination } from './pagination'
+import { LimitBets } from './limit-bets'
 
 type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
 type BetFilter = 'open' | 'sold' | 'closed' | 'resolved' | 'all'
@@ -256,6 +257,9 @@ function ContractBets(props: {
   const { bets, contract, metric, isYourBets } = props
   const { resolution, outcomeType } = contract
 
+  const limitBets = bets.filter(
+    (bet) => bet.limitProb !== undefined
+  ) as LimitBet[]
   const resolutionValue = (contract as NumericContract).resolutionValue
 
   const [collapsed, setCollapsed] = useState(true)
@@ -350,7 +354,21 @@ function ContractBets(props: {
           isYourBets={isYourBets}
         />
 
-        <Spacer h={8} />
+        <Spacer h={4} />
+
+        {contract.mechanism === 'cpmm-1' && limitBets.length > 0 && (
+          <>
+            <div className="bg-gray-50 px-4 py-2">Your limit bets</div>
+            <LimitBets
+              className="max-w-md px-2 py-0 sm:px-4"
+              contract={contract}
+              bets={limitBets}
+              hideLabel
+            />
+          </>
+        )}
+
+        <Spacer h={4} />
 
         <ContractBetsTable
           contract={contract}

web/components/limit-bets.tsx

@@ -13,9 +13,10 @@ import { BinaryOutcomeLabel, PseudoNumericOutcomeLabel } from './outcome-label'
 export function LimitBets(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
   bets: LimitBet[]
+  hideLabel?: boolean
   className?: string
 }) {
-  const { contract, bets, className } = props
+  const { contract, bets, hideLabel, className } = props
   const recentBets = sortBy(
     bets,
     (bet) => -1 * bet.limitProb,
@@ -24,18 +25,19 @@ export function LimitBets(props: {
 
   return (
     <Col
-      className={clsx(className, 'gap-2 overflow-hidden rounded bg-white py-3')}
+      className={clsx(
+        className,
+        'gap-2 overflow-hidden rounded bg-white px-4 py-3'
+      )}
     >
-      <div className="px-6 py-3 text-2xl">Your limit bets</div>
+      {!hideLabel && <div className="px-2 py-3 text-2xl">Your limit bets</div>}
-      <div className="px-4">
+      <table className="table-compact table w-full rounded text-gray-500">
-        <table className="table-compact table w-full rounded text-gray-500">
+        <tbody>
-          <tbody>
+          {recentBets.map((bet) => (
-            {recentBets.map((bet) => (
+            <LimitBet key={bet.id} bet={bet} contract={contract} />
-              <LimitBet key={bet.id} bet={bet} contract={contract} />
+          ))}
-            ))}
+        </tbody>
-          </tbody>
+      </table>
-        </table>
-      </div>
     </Col>
   )
 }