From 73f1116b8f7272283d7edfa1b209b6d54d833a70 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Tue, 4 Jan 2022 14:57:48 -0600
Subject: [PATCH] Add Tweet button to share market

---
 web/components/contract-overview.tsx | 25 +++++++++++++++--
 web/components/tweet-button.tsx      | 42 ++++++++++++++++++++++++++++
 web/pages/_document.tsx              |  3 ++
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 web/components/tweet-button.tsx

diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index 72fa3dff..e36b3d79 100644
--- a/web/components/contract-overview.tsx
+++ b/web/components/contract-overview.tsx
@@ -1,4 +1,9 @@
-import { compute, Contract, deleteContract } from '../lib/firebase/contracts'
+import {
+  compute,
+  Contract,
+  deleteContract,
+  path,
+} from '../lib/firebase/contracts'
 import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
 import { ContractProbGraph } from './contract-prob-graph'
@@ -10,6 +15,7 @@ import { Linkify } from './linkify'
 import clsx from 'clsx'
 import { ContractDetails, ResolutionOrChance } from './contract-card'
 import { ContractFeed } from './contract-feed'
+import { TweetButton } from './tweet-button'
 
 function ContractCloseTime(props: { contract: Contract }) {
   const closeTime = props.contract.closeTime
@@ -29,12 +35,23 @@ export const ContractOverview = (props: {
   className?: string
 }) => {
   const { contract, className } = props
-  const { resolution, creatorId } = contract
+  const { resolution, creatorId, creatorName } = contract
   const { probPercent, truePool } = compute(contract)
 
   const user = useUser()
   const isCreator = user?.id === creatorId
 
+  const tweetQuestion = isCreator
+    ? contract.question
+    : `${creatorName}: ${contract.question}`
+  const tweetDescription = resolution
+    ? isCreator
+      ? `Resolved ${resolution}!`
+      : `Resolved ${resolution} by ${creatorName}:`
+    : `Currently ${probPercent} chance, place your bets here:`
+  const url = `https://mantic.markets${path(contract)}`
+  const tweetText = `${tweetQuestion}\n\n${tweetDescription}\n\n${url}`
+
   return (
     <Col className={clsx('mb-6', className)}>
       <Row className="justify-between gap-4">
@@ -63,6 +80,10 @@ export const ContractOverview = (props: {
 
       <Spacer h={4} />
 
+      <TweetButton tweetText={tweetText} />
+
+      <Spacer h={4} />
+
       <ContractProbGraph contract={contract} />
 
       <Spacer h={12} />
diff --git a/web/components/tweet-button.tsx b/web/components/tweet-button.tsx
new file mode 100644
index 00000000..fb20fc53
--- /dev/null
+++ b/web/components/tweet-button.tsx
@@ -0,0 +1,42 @@
+export function TweetButton(props: { tweetText?: string }) {
+  const { tweetText } = props
+
+  return (
+    <a
+      className="twitter-share-button"
+      href={`https://twitter.com/intent/tweet?text=${encodeURI(
+        tweetText ?? ''
+      )}`}
+      data-size="large"
+    >
+      Tweet
+    </a>
+  )
+}
+
+export function TwitterScript() {
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+          window.twttr = (function(d, s, id) {
+          var js, fjs = d.getElementsByTagName(s)[0],
+            t = window.twttr || {};
+          if (d.getElementById(id)) return t;
+          js = d.createElement(s);
+          js.id = id;
+          js.src = "https://platform.twitter.com/widgets.js";
+          fjs.parentNode.insertBefore(js, fjs);
+
+          t._e = [];
+          t.ready = function(f) {
+            t._e.push(f);
+          };
+
+          return t;
+        }(document, "script", "twitter-wjs"));
+        `,
+      }}
+    />
+  )
+}
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index d2ccc8e7..e1b00a59 100644
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -1,4 +1,5 @@
 import { Html, Head, Main, NextScript } from 'next/document'
+import { TwitterScript } from '../components/tweet-button'
 
 export default function Document() {
   return (
@@ -31,6 +32,8 @@ export default function Document() {
           `,
           }}
         />
+
+        <TwitterScript />
       </Head>
 
       <body className="min-h-screen font-readex-pro bg-base-200">