Simplified contract embed

web/components/contract-card.tsx

@@ -172,8 +172,9 @@ function AbbrContractDetails(props: {
 export function ContractDetails(props: {
   contract: Contract
   isCreator?: boolean
+  hideTweetBtn?: boolean
 }) {
-  const { contract, isCreator } = props
+  const { contract, isCreator, hideTweetBtn } = props
   const { closeTime, creatorName, creatorUsername } = contract
   const { liquidityLabel, createdDate, resolvedDate } =
     contractMetrics(contract)
@@ -233,7 +234,9 @@ export function ContractDetails(props: {
           <div className="whitespace-nowrap">{liquidityLabel}</div>
         </Row>
 
+        {!hideTweetBtn && (
           <TweetButton className="self-end" tweetText={tweetText} />
+        )}
       </Row>
     </Col>
   )

web/components/contract-overview.tsx

@@ -62,7 +62,7 @@ export const ContractOverview = (props: {
         </Col>
 
         {(isBinary || resolution) && (
-          <Col className="hidden items-end justify-between md:flex">
+          <Col className="hidden md:flex items-end justify-between">
             <ResolutionOrChance
               className="items-end"
               contract={contract}

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

@@ -1,21 +1,24 @@
-import { Answer } from '../../../../common/answer'
 import { Bet } from '../../../../common/bet'
-import { Comment } from '../../../../common/comment'
-import { Contract } from '../../../../common/contract'
-import { Fold } from '../../../../common/fold'
-import { AnswersPanel } from '../../../components/answers/answers-panel'
-import { ContractOverview } from '../../../components/contract-overview'
+import {
+  Contract,
+  DPM,
+  FreeResponse,
+  FullContract,
+} from '../../../../common/contract'
+import { AnswersGraph } from '../../../components/answers/answers-graph'
+import {
+  ResolutionOrChance,
+  ContractDetails,
+} from '../../../components/contract-card'
+import { ContractProbGraph } from '../../../components/contract-prob-graph'
 import { Col } from '../../../components/layout/col'
+import { Row } from '../../../components/layout/row'
 import { Spacer } from '../../../components/layout/spacer'
+import { Linkify } from '../../../components/linkify'
 import { useContractWithPreload } from '../../../hooks/use-contract'
-import { useFoldsWithTags } from '../../../hooks/use-fold'
 import { fromPropz, usePropz } from '../../../hooks/use-propz'
-import { useUser } from '../../../hooks/use-user'
-import { listAllAnswers } from '../../../lib/firebase/answers'
 import { listAllBets } from '../../../lib/firebase/bets'
-import { listAllComments } from '../../../lib/firebase/comments'
 import { getContractFromSlug } from '../../../lib/firebase/contracts'
-import { getFoldsByTags } from '../../../lib/firebase/folds'
 import Custom404 from '../../404'
 
 export const getStaticProps = fromPropz(getStaticPropz)
@@ -26,17 +29,7 @@ export async function getStaticPropz(props: {
   const contract = (await getContractFromSlug(contractSlug)) || null
   const contractId = contract?.id
 
-  const foldsPromise = getFoldsByTags(contract?.tags ?? [])
-
-  const [bets, comments, answers] = await Promise.all([
-    contractId ? listAllBets(contractId) : [],
-    contractId ? listAllComments(contractId) : [],
-    contractId && contract.outcomeType === 'FREE_RESPONSE'
-      ? listAllAnswers(contractId)
-      : [],
-  ])
-
-  const folds = await foldsPromise
+  const bets = contractId ? await listAllBets(contractId) : []
 
   return {
     props: {
@@ -44,9 +37,6 @@ export async function getStaticPropz(props: {
       username,
       slug: contractSlug,
       bets,
-      comments,
-      answers,
-      folds,
     },
 
     revalidate: 60, // regenerate after a minute
@@ -57,58 +47,63 @@ export async function getStaticPaths() {
   return { paths: [], fallback: 'blocking' }
 }
 
-export default function ContractPage(props: {
+export default function ContractEmbedPage(props: {
   contract: Contract | null
   username: string
   bets: Bet[]
-  comments: Comment[]
-  answers: Answer[]
   slug: string
-  folds: Fold[]
 }) {
   props = usePropz(props, getStaticPropz) ?? {
     contract: null,
     username: '',
-    comments: [],
-    answers: [],
     bets: [],
     slug: '',
-    folds: [],
   }
-  const user = useUser()
 
   const contract = useContractWithPreload(props.slug, props.contract)
-  const { bets, comments } = props
+  const { bets } = props
 
-  // Sort for now to see if bug is fixed.
-  comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
   bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
 
-  const folds = (useFoldsWithTags(contract?.tags) ?? props.folds).filter(
-    (fold) => fold.followCount > 1 || user?.id === fold.curatorId
-  )
-
   if (!contract) {
     return <Custom404 />
   }
 
+  return <ContractEmbed contract={contract} bets={bets} />
+}
+
+function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
+  const { contract, bets } = props
+  const { question, resolution, outcomeType } = contract
+
+  const isBinary = outcomeType === 'BINARY'
+
   return (
-    <Col className="w-full bg-white px-2 py-6 md:px-6 md:py-8">
-      <ContractOverview
-        contract={contract}
-        bets={bets ?? []}
-        comments={comments ?? []}
-        folds={folds}
-      >
-        {contract.outcomeType === 'FREE_RESPONSE' && (
-          <>
-            <Spacer h={4} />
-            <AnswersPanel contract={contract as any} answers={props.answers} />
-            <Spacer h={4} />
-            <div className="divider before:bg-gray-300 after:bg-gray-300" />
-          </>
+    <Col className="w-full flex-1 bg-white py-2">
+      <div className="px-3 text-xl text-indigo-700">
+        <Linkify text={question} />
+      </div>
+
+      <Spacer h={3} />
+
+      <Row className="items-center justify-between gap-4 px-2">
+        <ContractDetails contract={contract} isCreator={false} hideTweetBtn />
+
+        {(isBinary || resolution) && <ResolutionOrChance contract={contract} />}
+      </Row>
+
+      <Spacer h={2} />
+
+      <div className="mx-1">
+        {isBinary ? (
+          <ContractProbGraph contract={contract} bets={bets} />
+        ) : (
+          <AnswersGraph
+            contract={contract as FullContract<DPM, FreeResponse>}
+            bets={bets}
+          />
         )}
-      </ContractOverview>
+      </div>
     </Col>
   )
 }