open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Tweet button to share market

Browse Source
This commit is contained in:
jahooma 2022-01-04 14:57:48 -06:00
parent db1543ea71
commit 73f1116b8f
3 changed files with 68 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/components/contract-overview.tsx
View File

@ -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 { Col } from './layout/col'
import { Spacer } from './layout/spacer' import { Spacer } from './layout/spacer'
import { ContractProbGraph } from './contract-prob-graph' import { ContractProbGraph } from './contract-prob-graph'
@ -10,6 +15,7 @@ import { Linkify } from './linkify'
import clsx from 'clsx' import clsx from 'clsx'
import { ContractDetails, ResolutionOrChance } from './contract-card' import { ContractDetails, ResolutionOrChance } from './contract-card'
import { ContractFeed } from './contract-feed' import { ContractFeed } from './contract-feed'
import { TweetButton } from './tweet-button'
function ContractCloseTime(props: { contract: Contract }) { function ContractCloseTime(props: { contract: Contract }) {
const closeTime = props.contract.closeTime const closeTime = props.contract.closeTime
@ -29,12 +35,23 @@ export const ContractOverview = (props: {
className?: string className?: string
}) => { }) => {
const { contract, className } = props const { contract, className } = props
const { resolution, creatorId } = contract const { resolution, creatorId, creatorName } = contract
const { probPercent, truePool } = compute(contract) const { probPercent, truePool } = compute(contract)
const user = useUser() const user = useUser()
const isCreator = user?.id === creatorId 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 ( return (
<Col className={clsx('mb-6', className)}> <Col className={clsx('mb-6', className)}>
<Row className="justify-between gap-4"> <Row className="justify-between gap-4">
@ -63,6 +80,10 @@ export const ContractOverview = (props: {
<Spacer h={4} /> <Spacer h={4} />
<TweetButton tweetText={tweetText} />
<Spacer h={4} />
<ContractProbGraph contract={contract} /> <ContractProbGraph contract={contract} />
<Spacer h={12} /> <Spacer h={12} />

42
web/components/tweet-button.tsx Normal file
View File

@ -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"));
`,
}}
/>
)
}

3
web/pages/_document.tsx
View File

@ -1,4 +1,5 @@
import { Html, Head, Main, NextScript } from 'next/document' import { Html, Head, Main, NextScript } from 'next/document'
import { TwitterScript } from '../components/tweet-button'
export default function Document() { export default function Document() {
return ( return (
@ -31,6 +32,8 @@ export default function Document() {
`, `,
}} }}
/> />
<TwitterScript />
</Head> </Head>
<body className="min-h-screen font-readex-pro bg-base-200"> <body className="min-h-screen font-readex-pro bg-base-200">