share dialog: remove native sharer; use toast for embed

web/components/contract/share-modal.tsx

@@ -51,17 +51,10 @@ export function ShareModal(props: {
           color="gradient"
           className={'mb-2 flex max-w-xs self-center'}
           onClick={() => {
-            if (window.navigator.share) {
+            copyToClipboard(shareUrl)
-              window.navigator.share({
+            toast.success('Link copied!', {
-                url: shareUrl,
+              icon: linkIcon,
-                title: contract.question,
+            })
-              })
-            } else {
-              copyToClipboard(shareUrl)
-              toast.success('Link copied!', {
-                icon: linkIcon,
-              })
-            }
             track('copy share link')
           }}
         >
@@ -73,7 +66,7 @@ export function ShareModal(props: {
             className="self-start"
             tweetText={getTweetText(contract, shareUrl)}
           />
-          <ShareEmbedButton contract={contract} toastClassName={'-left-20'} />
+          <ShareEmbedButton contract={contract} />
           <DuplicateContractButton contract={contract} />
         </Row>
       </Col>

web/components/share-embed-button.tsx

@@ -1,12 +1,12 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import { CodeIcon } from '@heroicons/react/outline'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu } from '@headlessui/react'
+import toast from 'react-hot-toast'
 
 import { Contract } from 'common/contract'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { DOMAIN } from 'common/envs/constants'
 import { copyToClipboard } from 'web/lib/util/copy'
-import { ToastClipboard } from 'web/components/toast-clipboard'
 import { track } from 'web/lib/service/analytics'
 
 export function embedCode(contract: Contract) {
@@ -16,11 +16,10 @@ export function embedCode(contract: Contract) {
   return `<iframe width="560" height="405" src="${src}" title="${title}" frameborder="0"></iframe>`
 }
 
-export function ShareEmbedButton(props: {
+export function ShareEmbedButton(props: { contract: Contract }) {
-  contract: Contract
+  const { contract } = props
-  toastClassName?: string
+
-}) {
+  const codeIcon = <CodeIcon className="mr-1.5 h-4 w-4" aria-hidden="true" />
-  const { contract, toastClassName } = props
 
   return (
     <Menu
@@ -28,6 +27,9 @@ export function ShareEmbedButton(props: {
       className="relative z-10 flex-shrink-0"
       onMouseUp={() => {
         copyToClipboard(embedCode(contract))
+        toast.success('Embed code copied!', {
+          icon: codeIcon,
+        })
         track('copy embed code')
       }}
     >
@@ -39,25 +41,9 @@ export function ShareEmbedButton(props: {
           color: '#9ca3af', // text-gray-400
         }}
       >
-        <CodeIcon className="mr-1.5 h-4 w-4" aria-hidden="true" />
+        {codeIcon}
         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>
-          <Menu.Item>
-            <ToastClipboard className={toastClassName} />
-          </Menu.Item>
-        </Menu.Items>
-      </Transition>
     </Menu>
   )
 }