Show all limit orders in a tab

web/components/bet-panel.tsx

@@ -59,6 +59,9 @@ export function BetPanel(props: {
     track('toggle limit order')
   }
 
+  const showLimitOrders =
+    (isLimitOrder && unfilledBets.length > 0) || yourUnfilledBets.length > 0
+
   return (
     <Col className={className}>
       <SellRow
@@ -94,12 +97,8 @@ export function BetPanel(props: {
 
         <SignUpPrompt />
       </Col>
-      {yourUnfilledBets.length > 0 && (
+      {showLimitOrders && (
-        <LimitBets
+        <LimitBets className="mt-4" contract={contract} bets={unfilledBets} />
-          className="mt-4"
-          contract={contract}
-          bets={yourUnfilledBets}
-        />
       )}
     </Col>
   )
@@ -119,6 +118,8 @@ export function SimpleBetPanel(props: {
 
   const unfilledBets = useUnfilledBets(contract.id) ?? []
   const yourUnfilledBets = unfilledBets.filter((bet) => bet.userId === user?.id)
+  const showLimitOrders =
+    (isLimitOrder && unfilledBets.length > 0) || yourUnfilledBets.length > 0
 
   return (
     <Col className={className}>
@@ -158,12 +159,8 @@ export function SimpleBetPanel(props: {
         <SignUpPrompt />
       </Col>
 
-      {yourUnfilledBets.length > 0 && (
+      {showLimitOrders && (
-        <LimitBets
+        <LimitBets className="mt-4" contract={contract} bets={unfilledBets} />
-          className="mt-4"
-          contract={contract}
-          bets={yourUnfilledBets}
-        />
       )}
     </Col>
   )

web/components/limit-bets.tsx

@@ -5,8 +5,11 @@ import { getFormattedMappedValue } from 'common/pseudo-numeric'
 import { formatMoney, formatPercent } from 'common/util/format'
 import { sortBy } from 'lodash'
 import { useState } from 'react'
+import { useUser, useUserById } from 'web/hooks/use-user'
 import { cancelBet } from 'web/lib/firebase/api'
+import { Avatar } from './avatar'
 import { Col } from './layout/col'
+import { Tabs } from './layout/tabs'
 import { LoadingIndicator } from './loading-indicator'
 import { BinaryOutcomeLabel, PseudoNumericOutcomeLabel } from './outcome-label'
 
@@ -16,12 +19,14 @@ export function LimitBets(props: {
   hideLabel?: boolean
   className?: string
 }) {
-  const { contract, bets, hideLabel, className } = props
+  const { contract, bets, className } = props
-  const recentBets = sortBy(
+  const sortedBets = sortBy(
     bets,
     (bet) => -1 * bet.limitProb,
     (bet) => -1 * bet.createdTime
   )
+  const user = useUser()
+  const yourBets = sortedBets.filter((bet) => bet.userId === user?.id)
 
   return (
     <Col
@@ -30,25 +35,62 @@ export function LimitBets(props: {
         'gap-2 overflow-hidden rounded bg-white px-4 py-3'
       )}
     >
-      {!hideLabel && (
+      <Tabs
-        <div className="px-2 py-3 text-2xl">Your limit orders</div>
+        tabs={[
-      )}
+          ...(yourBets.length > 0
-      <table className="table-compact table w-full rounded text-gray-500">
+            ? [
-        <tbody>
+                {
-          {recentBets.map((bet) => (
+                  title: 'Your limit orders',
-            <LimitBet key={bet.id} bet={bet} contract={contract} />
+                  content: (
-          ))}
+                    <LimitOrderTable
-        </tbody>
+                      limitBets={yourBets}
-      </table>
+                      contract={contract}
+                      isYou={true}
+                    />
+                  ),
+                },
+              ]
+            : []),
+          {
+            title: 'All limit orders',
+            content: (
+              <LimitOrderTable
+                limitBets={sortedBets}
+                contract={contract}
+                isYou={false}
+              />
+            ),
+          },
+        ]}
+      />
     </Col>
   )
 }
 
+function LimitOrderTable(props: {
+  limitBets: LimitBet[]
+  contract: CPMMBinaryContract | PseudoNumericContract
+  isYou: boolean
+}) {
+  const { limitBets, contract, isYou } = props
+
+  return (
+    <table className="table-compact table w-full rounded text-gray-500">
+      <tbody>
+        {limitBets.map((bet) => (
+          <LimitBet key={bet.id} bet={bet} contract={contract} isYou={isYou} />
+        ))}
+      </tbody>
+    </table>
+  )
+}
+
 function LimitBet(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
   bet: LimitBet
+  isYou: boolean
 }) {
-  const { contract, bet } = props
+  const { contract, bet, isYou } = props
   const { orderAmount, amount, limitProb, outcome } = bet
   const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
 
@@ -59,8 +101,19 @@ function LimitBet(props: {
     setIsCancelling(true)
   }
 
+  const user = useUserById(bet.userId)
+
   return (
     <tr>
+      {!isYou && (
+        <td>
+          <Avatar
+            size={'sm'}
+            avatarUrl={user?.avatarUrl}
+            username={user?.username}
+          />
+        </td>
+      )}
       <td>
         <div className="pl-2">
           {isPseudoNumeric ? (
@@ -76,18 +129,20 @@ function LimitBet(props: {
           ? getFormattedMappedValue(contract)(limitProb)
           : formatPercent(limitProb)}
       </td>
-      <td>
+      {isYou && (
-        {isCancelling ? (
+        <td>
-          <LoadingIndicator />
+          {isCancelling ? (
-        ) : (
+            <LoadingIndicator />
-          <button
+          ) : (
-            className="btn btn-xs btn-outline my-auto normal-case"
+            <button
-            onClick={onCancel}
+              className="btn btn-xs btn-outline my-auto normal-case"
-          >
+              onClick={onCancel}
-            Cancel
+            >
-          </button>
+              Cancel
-        )}
+            </button>
-      </td>
+          )}
+        </td>
+      )}
     </tr>
   )
 }