Share embed button

web/components/contract-card.tsx

@@ -21,6 +21,7 @@ import { Spacer } from './layout/spacer'
 import { useState } from 'react'
 import { TweetButton } from './tweet-button'
 import { getProbability } from '../../common/calculate'
+import { ShareEmbedButton } from './share-embed-button'
 
 export function ContractCard(props: {
   contract: Contract
@@ -172,9 +173,9 @@ function AbbrContractDetails(props: {
 export function ContractDetails(props: {
   contract: Contract
   isCreator?: boolean
-  hideTweetBtn?: boolean
+  hideShareButtons?: boolean
 }) {
-  const { contract, isCreator, hideTweetBtn } = props
+  const { contract, isCreator, hideShareButtons } = props
   const { closeTime, creatorName, creatorUsername } = contract
   const { liquidityLabel, createdDate, resolvedDate } =
     contractMetrics(contract)
@@ -234,8 +235,11 @@ export function ContractDetails(props: {
           <div className="whitespace-nowrap">{liquidityLabel}</div>
         </Row>
 
-        {!hideTweetBtn && (
-          <TweetButton className="self-end" tweetText={tweetText} />
+        {!hideShareButtons && (
+          <>
+            <TweetButton className="self-end" tweetText={tweetText} />
+            <ShareEmbedButton contract={contract} />
+          </>
         )}
       </Row>
     </Col>

web/components/share-embed-button.tsx

@@ -0,0 +1,47 @@
+import { Fragment } from 'react'
+import { CodeIcon } from '@heroicons/react/outline'
+import { Menu, Transition } from '@headlessui/react'
+import { Contract } from '../../common/contract'
+import { contractPath } from '../lib/firebase/contracts'
+import { DOMAIN } from '../../common/envs/constants'
+
+export function ShareEmbedButton(props: { contract: Contract }) {
+  const { contract } = props
+
+  const copyEmbed = () => {
+    const title = contract.question
+    const src = `https://${DOMAIN}/embed${contractPath(contract)}`
+
+    const embedCode = `<iframe width="560" height="405" src="${src}" title="${title}" frameborder="0"></iframe>`
+
+    if (navigator.clipboard) navigator.clipboard.writeText(embedCode)
+  }
+
+  return (
+    <Menu as="div" className="relative z-40 flex-shrink-0" onClick={copyEmbed}>
+      <Menu.Button
+        className="btn btn-xs btn-outline hover:bg-white hover:text-neutral"
+        onClick={copyEmbed}
+      >
+        <CodeIcon className="w-4 h-4 text-gray-500 mr-1.5" aria-hidden="true" />
+        Embed
+      </Menu.Button>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute left-0 mt-2 w-40 origin-top-center rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <Menu.Item>
+            <div className="px-2 py-1">Embed code copied!</div>
+          </Menu.Item>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  )
+}

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

@@ -100,7 +100,11 @@ function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
         <Spacer h={3} />
 
         <Row className="items-center justify-between gap-4 px-2">
-          <ContractDetails contract={contract} isCreator={false} hideTweetBtn />
+          <ContractDetails
+            contract={contract}
+            isCreator={false}
+            hideShareButtons
+          />
 
           {(isBinary || resolution) && (
             <ResolutionOrChance contract={contract} />