Add Tweet button to share market
This commit is contained in:
parent
db1543ea71
commit
73f1116b8f
|
@ -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} />
|
||||
|
|
42
web/components/tweet-button.tsx
Normal file
42
web/components/tweet-button.tsx
Normal 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"));
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue
Block a user