From cae35bc05e8918bc786d2d529a822a91de522efd Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Fri, 30 Sep 2022 16:28:34 -0700
Subject: [PATCH] Turn small embeds into contract cards

- kinda worried about loading time here, since Next can't cache
---
 web/pages/embed/[username]/[contractSlug].tsx | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx
index e925a1f6..83cfb0f3 100644
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/web/pages/embed/[username]/[contractSlug].tsx
@@ -6,6 +6,7 @@ import { BetInline } from 'web/components/bet-inline'
 import { Button } from 'web/components/button'
 import {
   BinaryResolutionOrChance,
+  ContractCard,
   FreeResponseResolutionOrChance,
   NumericResolutionOrExpectation,
   PseudoNumericResolutionOrExpectation,
@@ -27,6 +28,7 @@ import {
   tradingAllowed,
 } from 'web/lib/firebase/contracts'
 import Custom404 from '../../404'
+import { useWindowSize } from 'web/hooks/use-window-size'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -64,16 +66,31 @@ export default function ContractEmbedPage(props: {
   return <ContractEmbed contract={contract} bets={bets} />
 }
 
-export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
-  const { contract, bets } = props
-  const { question, outcomeType } = contract
+interface EmbedProps {
+  contract: Contract
+  bets: Bet[]
+}
 
+export function ContractEmbed(props: EmbedProps) {
+  const { contract } = props
   useTracking('view market embed', {
     slug: contract.slug,
     contractId: contract.id,
     creatorId: contract.creatorId,
   })
 
+  const { height = 0 } = useWindowSize()
+
+  return height < 250 ? (
+    <ContractCard contract={contract} className="h-screen" />
+  ) : (
+    <ContractSmolView {...props} />
+  )
+}
+
+function ContractSmolView({ contract, bets }: EmbedProps) {
+  const { question, outcomeType } = contract
+
   const isBinary = outcomeType === 'BINARY'
   const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'