manifold/web/components/contract-overview.tsx
James Grugett b2501d8145
Free response (#47)
* Answer datatype and MULTI outcome type for Contract

* Create free answer contract

* Automatically sort Tailwind classes with Prettier (#45)

* Add Prettier Tailwind plugin

* Autoformat Tailwind classes with Prettier

* Allow for non-binary contracts in contract page and related components

* logo with white inside, transparent bg

* Create answer

* Some UI for showing answers

* Answer bet panel

* Convert rest of calcuate file to generic multi contracts

* Working betting with ante'd NONE answer

* Numbered answers. Layout & calculation tweaks

* Can bet. More layout tweaks!

* Resolve answer UI

* Resolve multi market

* Resolved market UI

* Fix feed and cards for multi contracts

* Sell bets. Various fixes

* Tweaks for trades page

* Always dev mode

* Create answer bet has isAnte: true

* Fix  card showing 0% for multi contracts

* Fix grouped bets feed for multi outcomes

* None option converted to none of the above label at bottom of list. Button to resolve none.

* Tweaks to no answers yet, resolve button layout

* Show ante bets on new answers in the feed

* Update placeholder text for description

* Consolidate firestore rules for subcollections

* Remove Contract and Bet type params. Use string type for outcomes.

* Increase char limit to 10k for answers. Preserve line breaks.

* Don't show resolve options after answer chosen

* Fix type error in script

* Remove NONE resolution option

* Change outcomeType to include 'MULTI' and 'FREE_RESPONSE'

* Show bet probability change and payout when creating answer

* User info change: also change answers

* Append answers to contract field 'answers'

* sort trades by resolved

* Don't include trailing !:,.; in links

* Stop flooring inputs into formatMoney

* Revert "Stop flooring inputs into formatMoney"

This reverts commit 2f7ab18429.

* Consistently floor user.balance

* Expand create panel on focus

From Richard Hanania's feedback

* welcome email: include link to manifold

* Fix home page in dev on branches that are not free-response

* Close emails (#50)

* script init for stephen dev

* market close emails

* order of operations

* template email

* sendMarketCloseEmail: handle unsubscribe

* remove debugging

* marketCloseEmails: every hour

* sendMarketCloseEmails: check undefined

* marketCloseEmails: "every hour" => "every 1 hours"

* Set up a read API using Vercel serverless functions (#49)

* Set up read API using Vercel serverless functions

Featuring:
/api/v0/markets
/api/v0/market/[contractId]
/api/v0/slug/[contractSlug]

* Include tags in API

* Tweaks. Remove filter for only binary contract

* Fix bet probability change for NO bets

* Put back isProd calculation

Co-authored-by: Austin Chen <akrolsmir@gmail.com>
Co-authored-by: mantikoros <sgrugett@gmail.com>
Co-authored-by: mantikoros <95266179+mantikoros@users.noreply.github.com>
2022-02-17 17:00:19 -06:00

158 lines
4.5 KiB
TypeScript

import {
Contract,
deleteContract,
contractPath,
tradingAllowed,
getBinaryProbPercent,
} from '../lib/firebase/contracts'
import { Col } from './layout/col'
import { Spacer } from './layout/spacer'
import { ContractProbGraph } from './contract-prob-graph'
import router from 'next/router'
import { useUser } from '../hooks/use-user'
import { Row } from './layout/row'
import { Linkify } from './linkify'
import clsx from 'clsx'
import { ContractDetails, ResolutionOrChance } from './contract-card'
import { ContractFeed } from './contract-feed'
import { TweetButton } from './tweet-button'
import { Bet } from '../../common/bet'
import { Comment } from '../../common/comment'
import { RevealableTagsInput, TagsInput } from './tags-input'
import BetRow from './bet-row'
import { Fold } from '../../common/fold'
import { FoldTagList } from './tags-list'
export const ContractOverview = (props: {
contract: Contract
bets: Bet[]
comments: Comment[]
folds: Fold[]
children?: any
className?: string
}) => {
const { contract, bets, comments, folds, children, className } = props
const { question, resolution, creatorId, outcomeType } = contract
const user = useUser()
const isCreator = user?.id === creatorId
const isBinary = outcomeType === 'BINARY'
const tweetText = getTweetText(contract, isCreator)
return (
<Col className={clsx('mb-6', className)}>
<Row className="justify-between gap-4 px-2">
<Col className="gap-4">
<div className="text-2xl text-indigo-700 md:text-3xl">
<Linkify text={question} />
</div>
<Row className="items-center justify-between gap-4">
{(isBinary || resolution) && (
<ResolutionOrChance
className="md:hidden"
contract={contract}
large
/>
)}
{isBinary && tradingAllowed(contract) && (
<BetRow
contract={contract}
className="md:hidden"
labelClassName="hidden"
/>
)}
</Row>
<ContractDetails contract={contract} />
</Col>
{(isBinary || resolution) && (
<Col className="hidden items-end justify-between md:flex">
<ResolutionOrChance
className="items-end"
contract={contract}
large
/>
</Col>
)}
</Row>
<Spacer h={4} />
{isBinary && <ContractProbGraph contract={contract} bets={bets} />}
{children}
<Row className="mt-6 hidden items-center justify-between gap-4 sm:flex">
{folds.length === 0 ? (
<TagsInput className={clsx('mx-4')} contract={contract} />
) : (
<FoldTagList folds={folds} />
)}
<TweetButton tweetText={tweetText} />
</Row>
<Col className="mt-6 gap-4 sm:hidden">
<TweetButton className="self-end" tweetText={tweetText} />
{folds.length === 0 ? (
<TagsInput contract={contract} />
) : (
<FoldTagList folds={folds} />
)}
</Col>
{folds.length > 0 && (
<RevealableTagsInput className="mt-4" contract={contract} />
)}
{/* Show a delete button for contracts without any trading */}
{isCreator && bets.length === 0 && (
<>
<button
className="btn btn-xs btn-error btn-outline mt-1 max-w-fit self-end"
onClick={async (e) => {
e.preventDefault()
await deleteContract(contract.id)
router.push('/markets')
}}
>
Delete
</button>
</>
)}
<Spacer h={12} />
<ContractFeed
contract={contract}
bets={bets}
comments={comments}
feedType="market"
betRowClassName="md:hidden !mt-0"
/>
</Col>
)
}
const getTweetText = (contract: Contract, isCreator: boolean) => {
const { question, creatorName, resolution, outcomeType } = contract
const isBinary = outcomeType === 'BINARY'
const tweetQuestion = isCreator
? question
: `${question} Asked by ${creatorName}.`
const tweetDescription = resolution
? `Resolved ${resolution}!`
: isBinary
? `Currently ${getBinaryProbPercent(
contract
)} chance, place your bets here:`
: `Submit your own answer:`
const url = `https://manifold.markets${contractPath(contract)}`
return `${tweetQuestion}\n\n${tweetDescription}\n\n${url}`
}