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 && (
-        <LimitBets
-          className="mt-4"
-          contract={contract}
-          bets={yourUnfilledBets}
-        />
+      {showLimitOrders && (
+        <LimitBets className="mt-4" contract={contract} bets={unfilledBets} />
       )}
     </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 && (
-        <LimitBets
-          className="mt-4"
-          contract={contract}
-          bets={yourUnfilledBets}
-        />
+      {showLimitOrders && (
+        <LimitBets className="mt-4" contract={contract} bets={unfilledBets} />
       )}
     </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 recentBets = sortBy(
+  const { contract, bets, className } = props
+  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 && (
-        <div className="px-2 py-3 text-2xl">Your limit orders</div>
-      )}
+      <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>
+  )
+}
+
+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>
-          {recentBets.map((bet) => (
-            <LimitBet key={bet.id} bet={bet} contract={contract} />
+        {limitBets.map((bet) => (
+          <LimitBet key={bet.id} bet={bet} contract={contract} isYou={isYou} />
         ))}
       </tbody>
     </table>
-    </Col>
   )
 }
 
 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,6 +129,7 @@ function LimitBet(props: {
           ? getFormattedMappedValue(contract)(limitProb)
           : formatPercent(limitProb)}
       </td>
+      {isYou && (
         <td>
           {isCancelling ? (
             <LoadingIndicator />
@@ -88,6 +142,7 @@ function LimitBet(props: {
             </button>
           )}
         </td>
+      )}
     </tr>
   )
 }