Extract signup UI from contract tabs component (#901)

web/components/contract/contract-tabs.tsx

@@ -1,5 +1,5 @@
 import { Bet } from 'common/bet'
-import { Contract, CPMMBinaryContract } from 'common/contract'
+import { Contract } from 'common/contract'
 import { ContractComment } from 'common/comment'
 import { PAST_BETS, User } from 'common/user'
 import {
@@ -11,13 +11,9 @@ import { ContractBetsTable, BetsSummary } from '../bets-list'
 import { Spacer } from '../layout/spacer'
 import { Tabs } from '../layout/tabs'
 import { Col } from '../layout/col'
-import { tradingAllowed } from 'web/lib/firebase/contracts'
 import { CommentTipMap } from 'web/hooks/use-tip-txns'
 import { useComments } from 'web/hooks/use-comments'
 import { useLiquidity } from 'web/hooks/use-liquidity'
-import { BetSignUpPrompt } from '../sign-up-prompt'
-import { PlayMoneyDisclaimer } from '../play-money-disclaimer'
-import BetButton from '../bet-button'
 import { capitalize } from 'lodash'
 import {
   DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
@@ -123,44 +119,28 @@ export function ContractTabs(props: {
   )
 
   return (
-    <>
+    <Tabs
-      <Tabs
+      currentPageForAnalytics={'contract'}
-        currentPageForAnalytics={'contract'}
+      tabs={[
-        tabs={[
+        {
-          {
+          title: 'Comments',
-            title: 'Comments',
+          content: commentActivity,
-            content: commentActivity,
+          badge: `${comments.length}`,
-            badge: `${comments.length}`,
+        },
-          },
+        {
-          {
+          title: capitalize(PAST_BETS),
-            title: capitalize(PAST_BETS),
+          content: betActivity,
-            content: betActivity,
+          badge: `${visibleBets.length + visibleLps.length}`,
-            badge: `${visibleBets.length + visibleLps.length}`,
+        },
-          },
+        ...(!user || !userBets?.length
-          ...(!user || !userBets?.length
+          ? []
-            ? []
+          : [
-            : [
+              {
-                {
+                title: isMobile ? `You` : `Your ${PAST_BETS}`,
-                  title: isMobile ? `You` : `Your ${PAST_BETS}`,
+                content: yourTrades,
-                  content: yourTrades,
+              },
-                },
+            ]),
-              ]),
+      ]}
-        ]}
+    />
-      />
-      {!user ? (
-        <Col className="mt-4 max-w-sm items-center xl:hidden">
-          <BetSignUpPrompt />
-          <PlayMoneyDisclaimer />
-        </Col>
-      ) : (
-        outcomeType === 'BINARY' &&
-        tradingAllowed(contract) && (
-          <BetButton
-            contract={contract as CPMMBinaryContract}
-            className="mb-2 !mt-0 xl:hidden"
-          />
-        )
-      )}
-    </>
   )
 }

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

@@ -45,6 +45,10 @@ import { ContractsGrid } from 'web/components/contract/contracts-grid'
 import { Title } from 'web/components/title'
 import { usePrefetch } from 'web/hooks/use-prefetch'
 import { useAdmin } from 'web/hooks/use-admin'
+import { BetSignUpPrompt } from 'web/components/sign-up-prompt'
+import { PlayMoneyDisclaimer } from 'web/components/play-money-disclaimer'
+import BetButton from 'web/components/bet-button'
+
 import dayjs from 'dayjs'
 
 export const getStaticProps = fromPropz(getStaticPropz)
@@ -288,6 +292,20 @@ export function ContractPageContent(
           tips={tips}
           comments={comments}
         />
+        {!user ? (
+          <Col className="mt-4 max-w-sm items-center xl:hidden">
+            <BetSignUpPrompt />
+            <PlayMoneyDisclaimer />
+          </Col>
+        ) : (
+          outcomeType === 'BINARY' &&
+          allowTrade && (
+            <BetButton
+              contract={contract as CPMMBinaryContract}
+              className="mb-2 !mt-0 xl:hidden"
+            />
+          )
+        )}
       </Col>
       <RecommendedContractsWidget contract={contract} />
     </Page>