pass in userbets

web/components/contract/contract-tabs.tsx

@@ -17,53 +17,45 @@ import { LoadingIndicator } from 'web/components/loading-indicator'
 import { useComments } from 'web/hooks/use-comments'
 import { useLiquidity } from 'web/hooks/use-liquidity'
 import { useTipTxns } from 'web/hooks/use-tip-txns'
-import { useUser } from 'web/hooks/use-user'
 import { capitalize } from 'lodash'
 import {
   DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
   HOUSE_LIQUIDITY_PROVIDER_ID,
 } from 'common/antes'
-import { useIsMobile } from 'web/hooks/use-is-mobile'
+import { buildArray } from 'common/util/array'
 
-export function ContractTabs(props: { contract: Contract; bets: Bet[] }) {
-  const { contract, bets } = props
-
-  const isMobile = useIsMobile()
-  const user = useUser()
-  const userBets =
-    user && bets.filter((bet) => !bet.isAnte && bet.userId === user.id)
+export function ContractTabs(props: {
+  contract: Contract
+  bets: Bet[]
+  userBets: Bet[]
+}) {
+  const { contract, bets, userBets } = props
 
   const yourTrades = (
     <div>
       <Spacer h={6} />
-      <ContractBetsTable contract={contract} bets={userBets ?? []} isYourBets />
+      <ContractBetsTable contract={contract} bets={userBets} isYourBets />
       <Spacer h={12} />
     </div>
   )
 
+  const tabs = buildArray(
+    {
+      title: 'Comments',
+      content: <CommentsTabContent contract={contract} />,
+    },
+    {
+      title: capitalize(PAST_BETS),
+      content: <BetsTabContent contract={contract} bets={bets} />,
+    },
+    userBets.length > 0 && {
+      title: 'Your trades',
+      content: yourTrades,
+    }
+  )
+
   return (
-    <Tabs
-      className="mb-4"
-      currentPageForAnalytics={'contract'}
-      tabs={[
-        {
-          title: 'Comments',
-          content: <CommentsTabContent contract={contract} />,
-        },
-        {
-          title: capitalize(PAST_BETS),
-          content: <BetsTabContent contract={contract} bets={bets} />,
-        },
-        ...(!user || !userBets?.length
-          ? []
-          : [
-              {
-                title: isMobile ? `You` : `Your ${PAST_BETS}`,
-                content: yourTrades,
-              },
-            ]),
-      ]}
-    />
+    <Tabs className="mb-4" currentPageForAnalytics={'contract'} tabs={tabs} />
   )
 }
 

web/pages/[username]/[contractSlug].tsx

@@ -167,6 +167,10 @@ export function ContractPageContent(
     [bets]
   )
 
+  const userBets = user
+    ? bets.filter((bet) => !bet.isAnte && bet.userId === user.id)
+    : []
+
   const [showConfetti, setShowConfetti] = useState(false)
 
   useEffect(() => {
@@ -249,13 +253,14 @@ export function ContractPageContent(
         )}
 
         <BetsSummary
-          className="px-2 mb-4"
+          className="mb-4 px-2"
           contract={contract}
-          bets={bets}
+          bets={userBets}
           isYourBets
         />
 
-        <ContractTabs contract={contract} bets={bets} />
+        <ContractTabs contract={contract} bets={bets} userBets={userBets} />
+
         {!user ? (
           <Col className="mt-4 max-w-sm items-center xl:hidden">
             <BetSignUpPrompt />