From 4a617a4c0776d568f609b684a8eda1a1413c0a2a Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Mon, 21 Mar 2022 15:23:21 -0500
Subject: [PATCH] Share embed button

---
 web/components/contract-card.tsx              | 12 +++--
 web/components/share-embed-button.tsx         | 47 +++++++++++++++++++
 web/pages/embed/[username]/[contractSlug].tsx |  6 ++-
 3 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 web/components/share-embed-button.tsx

diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index a33b65cc..981102cc 100644
--- a/web/components/contract-card.tsx
+++ b/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>
diff --git a/web/components/share-embed-button.tsx b/web/components/share-embed-button.tsx
new file mode 100644
index 00000000..01ccfe00
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx
index 8b40b2e7..b5816710 100644
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/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} />