Move tweet button into contract details

web/components/contract-card.tsx

@@ -19,6 +19,7 @@ import { fromNow } from '../lib/util/time'
 import { Avatar } from './avatar'
 import { Spacer } from './layout/spacer'
 import { useState } from 'react'
+import { TweetButton } from './tweet-button'
 
 export function ContractCard(props: {
   contract: Contract
@@ -165,12 +166,13 @@ function AbbrContractDetails(props: {
 export function ContractDetails(props: {
   contract: Contract
   isCreator?: boolean
-  children?: any
 }) {
-  const { contract, isCreator, children } = props
+  const { contract, isCreator } = props
   const { closeTime, creatorName, creatorUsername } = contract
   const { truePool, createdDate, resolvedDate } = contractMetrics(contract)
 
+  const tweetText = getTweetText(contract, !!isCreator)
+
   return (
     <Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap">
       <Row className="flex-wrap items-center gap-x-4 gap-y-2">
@@ -224,7 +226,7 @@ export function ContractDetails(props: {
           <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
         </Row>
 
-        {children}
+        <TweetButton className={'self-end'} tweetText={tweetText} />
       </Row>
     </Col>
   )
@@ -316,3 +318,22 @@ function EditableCloseDate(props: {
     </>
   )
 }
+
+const getTweetText = (contract: Contract, isCreator: boolean) => {
+  const { question, creatorName, resolution, outcomeType } = contract
+  const isBinary = outcomeType === 'BINARY'
+
+  const tweetQuestion = isCreator
+    ? question
+    : `${question} Asked by ${creatorName}.`
+  const tweetDescription = resolution
+    ? `Resolved ${resolution}!`
+    : isBinary
+    ? `Currently ${getBinaryProbPercent(
+        contract
+      )} chance, place your bets here:`
+    : `Submit your own answer:`
+  const url = `https://manifold.markets${contractPath(contract)}`
+
+  return `${tweetQuestion}\n\n${tweetDescription}\n\n${url}`
+}

web/components/contract-overview.tsx

@@ -1,9 +1,7 @@
 import {
   Contract,
   deleteContract,
-  contractPath,
   tradingAllowed,
-  getBinaryProbPercent,
 } from '../lib/firebase/contracts'
 import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
@@ -15,7 +13,6 @@ import { Linkify } from './linkify'
 import clsx from 'clsx'
 import { ContractDetails, ResolutionOrChance } from './contract-card'
 import { ContractFeed } from './contract-feed'
-import { TweetButton } from './tweet-button'
 import { Bet } from '../../common/bet'
 import { Comment } from '../../common/comment'
 import { RevealableTagsInput, TagsInput } from './tags-input'
@@ -38,8 +35,6 @@ export const ContractOverview = (props: {
   const isCreator = user?.id === creatorId
   const isBinary = outcomeType === 'BINARY'
 
-  const tweetText = getTweetText(contract, isCreator)
-
   return (
     <Col className={clsx('mb-6', className)}>
       <Row className="justify-between gap-4 px-2">
@@ -66,9 +61,7 @@ export const ContractOverview = (props: {
             )}
           </Row>
 
-          <ContractDetails contract={contract} isCreator={isCreator}>
-            <TweetButton className="md:hidden self-end" tweetText={tweetText} />
-          </ContractDetails>
+          <ContractDetails contract={contract} isCreator={isCreator} />
         </Col>
 
         {(isBinary || resolution) && (
@@ -78,7 +71,6 @@ export const ContractOverview = (props: {
               contract={contract}
               large
             />
-            <TweetButton tweetText={tweetText} />
           </Col>
         )}
       </Row>
@@ -137,22 +129,3 @@ export const ContractOverview = (props: {
     </Col>
   )
 }
-
-const getTweetText = (contract: Contract, isCreator: boolean) => {
-  const { question, creatorName, resolution, outcomeType } = contract
-  const isBinary = outcomeType === 'BINARY'
-
-  const tweetQuestion = isCreator
-    ? question
-    : `${question} Asked by ${creatorName}.`
-  const tweetDescription = resolution
-    ? `Resolved ${resolution}!`
-    : isBinary
-    ? `Currently ${getBinaryProbPercent(
-        contract
-      )} chance, place your bets here:`
-    : `Submit your own answer:`
-  const url = `https://manifold.markets${contractPath(contract)}`
-
-  return `${tweetQuestion}\n\n${tweetDescription}\n\n${url}`
-}