Show embed view of market in iframes

web/lib/util/embed.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react'
+
+export function inIframe() {
+  try {
+    return window.self !== window.top
+  } catch (e) {
+    return true
+  }
+}
+
+// use a hook so this calculation happens client side
+export function useInIframe() {
+  const [isIn, setIsIn] = useState(false)
+  useEffect(() => setIsIn(inIframe()), [])
+  return isIn
+}

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

@@ -36,6 +36,8 @@ import { useWindowSize } from 'web/hooks/use-window-size'
 import Confetti from 'react-confetti'
 import { FeedComment } from 'web/components/feed/feed-comments'
 import { FeedBet } from 'web/components/feed/feed-bets'
+import { inIframe, useInIframe } from 'web/lib/util/embed'
+import ContractEmbedPage from '../embed/[username]/[contractSlug]'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -105,6 +107,11 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
     setShowConfetti(shouldSeeConfetti)
   }, [contract, user])
 
+  const inIframe = useInIframe()
+  if (inIframe) {
+    return <ContractEmbedPage {...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)