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

Merge branch 'main' into default-explore

Browse Source
This commit is contained in:
James Grugett 2022-05-17 13:53:58 -04:00
commit 502329735f
26 changed files with 588 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/answers/answer-item.tsx
View File

@ -46,7 +46,7 @@ export function AnswerItem(props: {
wasResolvedTo
? resolution === 'MKT'
? 'mb-2 bg-blue-50'
: 'mb-8 bg-green-50'
: 'mb-10 bg-green-50'
: chosenProb === undefined
? 'bg-gray-50'
: showChoice === 'radio'

98
web/components/answers/answers-panel.tsx
View File

@ -1,5 +1,5 @@
import _ from 'lodash'
import { useLayoutEffect, useState } from 'react'
import React, { useLayoutEffect, useState } from 'react'
import { DPM, FreeResponse, FullContract } from 'common/contract'
import { Col } from '../layout/col'
@ -11,11 +11,19 @@ import { AnswerItem } from './answer-item'
import { CreateAnswerPanel } from './create-answer-panel'
import { AnswerResolvePanel } from './answer-resolve-panel'
import { Spacer } from '../layout/spacer'
import { FeedItems } from '../feed/feed-items'
import { ActivityItem } from '../feed/activity-items'
import { User } from 'common/user'
import { getOutcomeProbability } from 'common/calculate'
import { Answer } from 'common/answer'
import clsx from 'clsx'
import { formatPercent } from 'common/util/format'
import { Modal } from 'web/components/layout/modal'
import { AnswerBetPanel } from 'web/components/answers/answer-bet-panel'
import { Row } from 'web/components/layout/row'
import { Avatar } from 'web/components/avatar'
import { UserLink } from 'web/components/user-page'
import { Linkify } from 'web/components/linkify'
import { BuyButton } from 'web/components/yes-no-selector'
export function AnswersPanel(props: {
contract: FullContract<DPM, FreeResponse>
@ -108,12 +116,17 @@ export function AnswersPanel(props: {
))}
{!resolveOption && (
<FeedItems
contract={contract}
items={answerItems}
className={'pr-2 md:pr-0'}
betRowClassName={''}
/>
<div className={clsx('flow-root pr-2 md:pr-0')}>
<div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
{answerItems.map((item, activityItemIdx) => (
<div key={item.id} className={'relative pb-2'}>
<div className="relative flex items-start space-x-3">
<OpenAnswer {...item} />
</div>
</div>
))}
</div>
</div>
)}
{answers.length <= 1 && (
@ -167,3 +180,72 @@ function getAnswerItems(
})
.filter((group) => group.answer)
}
function OpenAnswer(props: {
contract: FullContract<any, FreeResponse>
answer: Answer
items: ActivityItem[]
type: string
}) {
const { answer, contract } = props
const { username, avatarUrl, name, text } = answer
const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
const probPercent = formatPercent(prob)
const [open, setOpen] = useState(false)
return (
<Col className={'border-base-200 bg-base-200 flex-1 rounded-md px-2'}>
<Modal open={open} setOpen={setOpen}>
<AnswerBetPanel
answer={answer}
contract={contract}
closePanel={() => setOpen(false)}
className="sm:max-w-84 !rounded-md bg-white !px-8 !py-6"
isModal={true}
/>
</Modal>
<div
className="pointer-events-none absolute -mx-2 h-full rounded-tl-md bg-green-600 bg-opacity-10"
style={{ width: `${100 * Math.max(prob, 0.01)}%` }}
/>
<Row className="my-4 gap-3">
<div className="px-1">
<Avatar username={username} avatarUrl={avatarUrl} />
</div>
<Col className="min-w-0 flex-1 lg:gap-1">
<div className="text-sm text-gray-500">
<UserLink username={username} name={name} /> answered
</div>
<Col className="align-items justify-between gap-4 sm:flex-row">
<span className="whitespace-pre-line text-lg">
<Linkify text={text} />
</span>
<Row className="items-center justify-center gap-4">
<div className={'align-items flex w-full justify-end gap-4 '}>
<span
className={clsx(
'text-2xl',
tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
)}
>
{probPercent}
</span>
<BuyButton
className={clsx(
'btn-sm flex-initial !px-6 sm:flex',
tradingAllowed(contract) ? '' : '!hidden'
)}
onClick={() => setOpen(true)}
/>
</div>
</Row>
</Col>
</Col>
</Row>
</Col>
)
}

3
web/components/bet-panel.tsx
View File

@ -151,8 +151,7 @@ export function BetPanelSwitcher(props: {
<Col
className={clsx(
'rounded-b-md bg-white px-8 py-6',
!sharesOutcome && 'rounded-t-md',
className
!sharesOutcome && 'rounded-t-md'
)}
>
<Title

8
web/components/bet-row.tsx
View File

@ -15,8 +15,9 @@ export default function BetRow(props: {
contract: FullContract<DPM | CPMM, Binary>
className?: string
btnClassName?: string
betPanelClassName?: string
}) {
const { className, btnClassName, contract } = props
const { className, btnClassName, betPanelClassName, contract } = props
const [open, setOpen] = useState(false)
const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(
undefined
@ -31,7 +32,7 @@ export default function BetRow(props: {
return (
<>
<YesNoSelector
className={clsx('mt-2 justify-end', className)}
className={clsx('justify-end', className)}
btnClassName={clsx('btn-sm w-24', btnClassName)}
onSelect={(choice) => {
setOpen(true)
@ -40,6 +41,7 @@ export default function BetRow(props: {
replaceNoButton={
yesFloorShares > 0 ? (
<SellButton
panelClassName={betPanelClassName}
contract={contract}
user={user}
sharesOutcome={'YES'}
@ -50,6 +52,7 @@ export default function BetRow(props: {
replaceYesButton={
noFloorShares > 0 ? (
<SellButton
panelClassName={betPanelClassName}
contract={contract}
user={user}
sharesOutcome={'NO'}
@ -60,6 +63,7 @@ export default function BetRow(props: {
/>
<Modal open={open} setOpen={setOpen}>
<BetPanelSwitcher
className={betPanelClassName}
contract={contract}
title={contract.question}
selected={betChoice}

95
web/components/contract/contract-details.tsx
View File

@ -93,72 +93,73 @@ export function ContractDetails(props: {
contract: Contract
bets: Bet[]
isCreator?: boolean
hideShareButtons?: boolean
disabled?: boolean
}) {
const { contract, bets, isCreator, hideShareButtons } = props
const { contract, bets, isCreator, disabled } = props
const { closeTime, creatorName, creatorUsername } = contract
const { volumeLabel, createdDate, resolvedDate } = contractMetrics(contract)
return (
<Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap">
<Row className="flex-1 flex-wrap items-center gap-x-4 gap-y-3">
<Row className="items-center gap-2">
<Avatar
username={creatorUsername}
avatarUrl={contract.creatorAvatarUrl}
size={6}
/>
<Row className="flex-1 flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-500">
<Row className="items-center gap-2">
<Avatar
username={creatorUsername}
avatarUrl={contract.creatorAvatarUrl}
noLink={disabled}
size={6}
/>
{disabled ? (
creatorName
) : (
<UserLink
className="whitespace-nowrap"
name={creatorName}
username={creatorUsername}
/>
</Row>
)}
</Row>
{(!!closeTime || !!resolvedDate) && (
<Row className="items-center gap-1">
<ClockIcon className="h-5 w-5" />
{(!!closeTime || !!resolvedDate) && (
<Row className="items-center gap-1">
<ClockIcon className="h-5 w-5" />
{/* <DateTimeTooltip text="Market created:" time={contract.createdTime}>
{/* <DateTimeTooltip text="Market created:" time={contract.createdTime}>
{createdDate}
</DateTimeTooltip> */}
{resolvedDate && contract.resolutionTime ? (
<>
{/* {' - '} */}
<DateTimeTooltip
text="Market resolved:"
time={contract.resolutionTime}
>
{resolvedDate}
</DateTimeTooltip>
</>
) : null}
{resolvedDate && contract.resolutionTime ? (
<>
{/* {' - '} */}
<DateTimeTooltip
text="Market resolved:"
time={contract.resolutionTime}
>
{resolvedDate}
</DateTimeTooltip>
</>
) : null}
{!resolvedDate && closeTime && (
<>
{/* {' - '}{' '} */}
<EditableCloseDate
closeTime={closeTime}
contract={contract}
isCreator={isCreator ?? false}
/>
</>
)}
</Row>
)}
<Row className="items-center gap-1">
<DatabaseIcon className="h-5 w-5" />
<div className="whitespace-nowrap">{volumeLabel}</div>
{!resolvedDate && closeTime && (
<>
{/* {' - '}{' '} */}
<EditableCloseDate
closeTime={closeTime}
contract={contract}
isCreator={isCreator ?? false}
/>
</>
)}
</Row>
)}
{!hideShareButtons && (
<ContractInfoDialog contract={contract} bets={bets} />
)}
<Row className="items-center gap-1">
<DatabaseIcon className="h-5 w-5" />
<div className="whitespace-nowrap">{volumeLabel}</div>
</Row>
</Col>
{!disabled && <ContractInfoDialog contract={contract} bets={bets} />}
</Row>
)
}

7
web/components/contract/contract-info-dialog.tsx
View File

@ -49,12 +49,15 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
<div>Share</div>
<Row className="justify-start gap-4">
<CopyLinkButton contract={contract} />
<CopyLinkButton
contract={contract}
toastClassName={'sm:-left-10 -left-4 min-w-[250%]'}
/>
<TweetButton
className="self-start"
tweetText={getTweetText(contract, false)}
/>
<ShareEmbedButton contract={contract} />
<ShareEmbedButton contract={contract} toastClassName={'-left-20'} />
</Row>
<div />

10
web/components/copy-link-button.tsx
View File

@ -1,4 +1,4 @@
import { Fragment } from 'react'
import React, { Fragment } from 'react'
import { LinkIcon } from '@heroicons/react/outline'
import { Menu, Transition } from '@headlessui/react'
import clsx from 'clsx'
@ -6,6 +6,7 @@ import { Contract } from 'common/contract'
import { copyToClipboard } from 'web/lib/util/copy'
import { contractPath } from 'web/lib/firebase/contracts'
import { ENV_CONFIG } from 'common/envs/constants'
import { ToastClipboard } from 'web/components/toast-clipboard'
function copyContractUrl(contract: Contract) {
copyToClipboard(`https://${ENV_CONFIG.domain}${contractPath(contract)}`)
@ -14,8 +15,9 @@ function copyContractUrl(contract: Contract) {
export function CopyLinkButton(props: {
contract: Contract
buttonClassName?: string
toastClassName?: string
}) {
const { contract, buttonClassName } = props
const { contract, buttonClassName, toastClassName } = props
return (
<Menu
@ -42,9 +44,9 @@ export function CopyLinkButton(props: {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-center absolute left-0 mt-2 w-40 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Items>
<Menu.Item>
<div className="px-2 py-1">Link copied!</div>
<ToastClipboard className={toastClassName} />
</Menu.Item>
</Menu.Items>
</Transition>

14
web/components/feed-create.tsx
View File

@ -19,8 +19,14 @@ export function FeedPromo(props: { hotContracts: Contract[] }) {
return (
<>
<Col className="my-6 rounded-xl text-center sm:m-12">
<h1 className="text-4xl sm:text-6xl xl:text-6xl">
<Col className="mb-6 rounded-xl text-center sm:m-12 sm:mt-0">
<img
height={250}
width={250}
className="self-center"
src="/flappy-logo.gif"
/>
<h1 className="text-3xl sm:text-6xl xl:text-6xl">
<div className="font-semibold sm:mb-2">
Bet on{' '}
<span className="bg-gradient-to-r from-teal-400 to-green-400 bg-clip-text font-bold text-transparent">
@ -30,7 +36,9 @@ export function FeedPromo(props: { hotContracts: Contract[] }) {
</h1>
<Spacer h={6} />
<div className="mb-4 px-2 text-gray-500">
Bet on any topic imaginable. Or create your own market!
Bet on any topic imaginable with play-money markets. Or create your
own!
<br />
<br />
Sign up and get {formatMoney(1000)} - worth $10 to your{' '}
<SiteLink className="font-semibold" href="/charity">

2
web/components/feed/activity-items.ts
View File

@ -72,7 +72,7 @@ export type BetGroupItem = BaseActivityItem & {
}
export type AnswerGroupItem = BaseActivityItem & {
type: 'answergroup' | 'answer'
type: 'answergroup'
answer: Answer
items: ActivityItem[]
betsByCurrentUser?: Bet[]

61
web/components/feed/copy-link-date-time.tsx Normal file
View File

@ -0,0 +1,61 @@
import { Contract } from 'common/contract'
import React, { useState } from 'react'
import { ENV_CONFIG } from 'common/envs/constants'
import { contractPath } from 'web/lib/firebase/contracts'
import { copyToClipboard } from 'web/lib/util/copy'
import { DateTimeTooltip } from 'web/components/datetime-tooltip'
import Link from 'next/link'
import { fromNow } from 'web/lib/util/time'
import { ToastClipboard } from 'web/components/toast-clipboard'
import { LinkIcon } from '@heroicons/react/outline'
export function CopyLinkDateTimeComponent(props: {
contract: Contract
createdTime: number
elementId: string
}) {
const { contract, elementId, createdTime } = props
const [showToast, setShowToast] = useState(false)
function copyLinkToComment(
event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
) {
event.preventDefault()
let currentLocation = window.location.href.includes('/home')
? `https://${ENV_CONFIG.domain}${contractPath(contract)}#${elementId}`
: window.location.href
if (currentLocation.includes('#')) {
currentLocation = currentLocation.split('#')[0]
}
copyToClipboard(`${currentLocation}#${elementId}`)
setShowToast(true)
setTimeout(() => setShowToast(false), 2000)
}
return (
<>
<DateTimeTooltip time={createdTime}>
<Link
href={`/${contract.creatorUsername}/${contract.slug}#${elementId}`}
passHref={true}
>
<a
onClick={(event) => copyLinkToComment(event)}
className={'mx-1 cursor-pointer'}
>
<span className="whitespace-nowrap rounded-sm px-1 text-gray-400 hover:bg-gray-100 ">
{fromNow(createdTime)}
{showToast && (
<ToastClipboard className={'left-24 sm:-left-16'} />
)}
<LinkIcon
className="ml-1 mb-0.5 inline-block text-gray-400"
height={13}
/>
</span>
</a>
</Link>
</DateTimeTooltip>
</>
)
}

186
web/components/feed/feed-answer-comment-group.tsx Normal file
View File

@ -0,0 +1,186 @@
import { FreeResponse, FullContract } from 'common/contract'
import { Answer } from 'common/answer'
import { ActivityItem } from 'web/components/feed/activity-items'
import { Bet } from 'common/bet'
import { Comment } from 'common/comment'
import { useUser } from 'web/hooks/use-user'
import { getDpmOutcomeProbability } from 'common/calculate-dpm'
import { formatPercent } from 'common/util/format'
import React, { useEffect, useState } from 'react'
import { Col } from 'web/components/layout/col'
import { Modal } from 'web/components/layout/modal'
import { AnswerBetPanel } from 'web/components/answers/answer-bet-panel'
import { Row } from 'web/components/layout/row'
import { Avatar } from 'web/components/avatar'
import { UserLink } from 'web/components/user-page'
import { Linkify } from 'web/components/linkify'
import clsx from 'clsx'
import { tradingAllowed } from 'web/lib/firebase/contracts'
import { BuyButton } from 'web/components/yes-no-selector'
import { CommentInput, FeedItem } from 'web/components/feed/feed-items'
import { getMostRecentCommentableBet } from 'web/components/feed/feed-comments'
import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
import { useRouter } from 'next/router'
export function FeedAnswerCommentGroup(props: {
contract: FullContract<any, FreeResponse>
answer: Answer
items: ActivityItem[]
type: string
betsByCurrentUser?: Bet[]
comments?: Comment[]
}) {
const { answer, items, contract, betsByCurrentUser, comments } = props
const { username, avatarUrl, name, text } = answer
const answerElementId = `answer-${answer.id}`
const user = useUser()
const mostRecentCommentableBet = getMostRecentCommentableBet(
betsByCurrentUser ?? [],
comments ?? [],
user,
answer.number + ''
)
const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
const probPercent = formatPercent(prob)
const [open, setOpen] = useState(false)
const [showReply, setShowReply] = useState(false)
const isFreeResponseContractPage = comments
if (mostRecentCommentableBet && !showReply) setShowReplyAndFocus(true)
const [inputRef, setInputRef] = useState<HTMLTextAreaElement | null>(null)
// If they've already opened the input box, focus it once again
function setShowReplyAndFocus(show: boolean) {
setShowReply(show)
inputRef?.focus()
}
useEffect(() => {
if (showReply && inputRef) inputRef.focus()
}, [inputRef, showReply])
const [highlighted, setHighlighted] = useState(false)
const router = useRouter()
useEffect(() => {
if (router.asPath.endsWith(`#${answerElementId}`)) {
setHighlighted(true)
}
}, [router.asPath])
return (
<Col className={'flex-1 gap-2'}>
<Modal open={open} setOpen={setOpen}>
<AnswerBetPanel
answer={answer}
contract={contract}
closePanel={() => setOpen(false)}
className="sm:max-w-84 !rounded-md bg-white !px-8 !py-6"
isModal={true}
/>
</Modal>
<Row
className={clsx(
'my-4 flex gap-3 space-x-3 transition-all duration-1000',
highlighted ? `-m-2 my-3 rounded bg-indigo-500/[0.2] p-2` : ''
)}
id={answerElementId}
>
<div className="px-1">
<Avatar username={username} avatarUrl={avatarUrl} />
</div>
<Col className="min-w-0 flex-1 lg:gap-1">
<div className="text-sm text-gray-500">
<UserLink username={username} name={name} /> answered
<CopyLinkDateTimeComponent
contract={contract}
createdTime={answer.createdTime}
elementId={answerElementId}
/>
</div>
<Col className="align-items justify-between gap-4 sm:flex-row">
<span className="whitespace-pre-line text-lg">
<Linkify text={text} />
</span>
<Row className="items-center justify-center gap-4">
{isFreeResponseContractPage && (
<div className={'sm:hidden'}>
<button
className={
'text-xs font-bold text-gray-500 hover:underline'
}
onClick={() => setShowReplyAndFocus(true)}
>
Reply
</button>
</div>
)}
<div className={'align-items flex w-full justify-end gap-4 '}>
<span
className={clsx(
'text-2xl',
tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
)}
>
{probPercent}
</span>
<BuyButton
className={clsx(
'btn-sm flex-initial !px-6 sm:flex',
tradingAllowed(contract) ? '' : '!hidden'
)}
onClick={() => setOpen(true)}
/>
</div>
</Row>
</Col>
{isFreeResponseContractPage && (
<div className={'justify-initial hidden sm:block'}>
<button
className={'text-xs font-bold text-gray-500 hover:underline'}
onClick={() => setShowReplyAndFocus(true)}
>
Reply
</button>
</div>
)}
</Col>
</Row>
{items.map((item, index) => (
<div
key={item.id}
className={clsx(
'relative ml-8',
index !== items.length - 1 && 'pb-4'
)}
>
{index !== items.length - 1 ? (
<span
className="absolute top-5 left-5 -ml-px h-[calc(100%-1rem)] w-0.5 bg-gray-200"
aria-hidden="true"
/>
) : null}
<div className="relative flex items-start space-x-3">
<FeedItem item={item} />
</div>
</div>
))}
{showReply && (
<div className={'ml-8 pt-4'}>
<CommentInput
contract={contract}
betsByCurrentUser={betsByCurrentUser ?? []}
comments={comments ?? []}
answerOutcome={answer.number + ''}
replyToUsername={answer.username}
setRef={setInputRef}
/>
</div>
)}
</Col>
)
}

38
web/components/feed/feed-comments.tsx Normal file
View File

@ -0,0 +1,38 @@
import { Bet } from 'common/bet'
import { Comment } from 'common/comment'
import { User } from 'common/user'
import { GENERAL_COMMENTS_OUTCOME_ID } from 'web/components/feed/activity-items'
// TODO: move feed commment and comment thread in here when sinclair confirms they're not working on them rn
export function getMostRecentCommentableBet(
betsByCurrentUser: Bet[],
comments: Comment[],
user?: User | null,
answerOutcome?: string
) {
return betsByCurrentUser
.filter((bet) => {
if (
canCommentOnBet(bet, user) &&
// The bet doesn't already have a comment
!comments.some((comment) => comment.betId == bet.id)
) {
if (!answerOutcome) return true
// If we're in free response, don't allow commenting on ante bet
return (
bet.outcome !== GENERAL_COMMENTS_OUTCOME_ID &&
answerOutcome === bet.outcome
)
}
return false
})
.sort((b1, b2) => b1.createdTime - b2.createdTime)
.pop()
}
function canCommentOnBet(bet: Bet, user?: User | null) {
const { userId, createdTime, isRedemption } = bet
const isSelf = user?.id === userId
// You can comment if your bet was posted in the last hour
return !isRedemption && isSelf && Date.now() - createdTime < 60 * 60 * 1000
}

244
web/components/feed/feed-items.tsx
View File

@ -25,7 +25,7 @@ import { useUser } from 'web/hooks/use-user'
import { Linkify } from '../linkify'
import { Row } from '../layout/row'
import { createComment, MAX_COMMENT_LENGTH } from 'web/lib/firebase/comments'
import { formatMoney, formatPercent } from 'common/util/format'
import { formatMoney } from 'common/util/format'
import { Comment } from 'common/comment'
import { BinaryResolutionOrChance } from '../contract/contract-card'
import { SiteLink } from '../site-link'
@ -35,21 +35,20 @@ import { Bet } from 'web/lib/firebase/bets'
import { JoinSpans } from '../join-spans'
import BetRow from '../bet-row'
import { Avatar } from '../avatar'
import { Answer } from 'common/answer'
import { ActivityItem, GENERAL_COMMENTS_OUTCOME_ID } from './activity-items'
import { Binary, CPMM, FreeResponse, FullContract } from 'common/contract'
import { BuyButton } from '../yes-no-selector'
import { getDpmOutcomeProbability } from 'common/calculate-dpm'
import { AnswerBetPanel } from '../answers/answer-bet-panel'
import { ActivityItem } from './activity-items'
import { Binary, CPMM, FullContract } from 'common/contract'
import { useSaveSeenContract } from 'web/hooks/use-seen-contracts'
import { User } from 'common/user'
import { Modal } from '../layout/modal'
import { trackClick } from 'web/lib/firebase/tracking'
import { firebaseLogin } from 'web/lib/firebase/users'
import { DAY_MS } from 'common/util/time'
import NewContractBadge from '../new-contract-badge'
import { RelativeTimestamp } from '../relative-timestamp'
import { calculateCpmmSale } from 'common/calculate-cpmm'
import { useRouter } from 'next/router'
import { FeedAnswerCommentGroup } from 'web/components/feed/feed-answer-comment-group'
import { getMostRecentCommentableBet } from 'web/components/feed/feed-comments'
import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
export function FeedItems(props: {
contract: Contract
@ -67,12 +66,7 @@ export function FeedItems(props: {
<div className={clsx('flow-root', className)} ref={ref}>
<div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
{items.map((item, activityItemIdx) => (
<div
key={item.id}
className={
item.type === 'answer' ? 'relative pb-2' : 'relative pb-6'
}
>
<div key={item.id} className={'relative pb-6'}>
{activityItemIdx !== items.length - 1 ||
item.type === 'answergroup' ? (
<span
@ -93,7 +87,7 @@ export function FeedItems(props: {
)
}
function FeedItem(props: { item: ActivityItem }) {
export function FeedItem(props: { item: ActivityItem }) {
const { item } = props
switch (item.type) {
@ -108,9 +102,7 @@ function FeedItem(props: { item: ActivityItem }) {
case 'betgroup':
return <FeedBetGroup {...item} />
case 'answergroup':
return <FeedAnswerGroup {...item} />
case 'answer':
return <FeedAnswerGroup {...item} />
return <FeedAnswerCommentGroup {...item} />
case 'close':
return <FeedClose {...item} />
case 'resolve':
@ -160,10 +152,7 @@ export function FeedCommentThread(props: {
<div
key={comment.id}
id={comment.id}
className={clsx(
'flex space-x-3',
commentIdx === 0 ? '' : 'mt-4 ml-8'
)}
className={commentIdx === 0 ? '' : 'mt-4 ml-8'}
>
<FeedComment
contract={contract}
@ -221,6 +210,14 @@ export function FeedComment(props: {
money = formatMoney(Math.abs(matchedBet.amount))
}
const [highlighted, setHighlighted] = useState(false)
const router = useRouter()
useEffect(() => {
if (router.asPath.endsWith(`#${comment.id}`)) {
setHighlighted(true)
}
}, [router.asPath])
// Only calculated if they don't have a matching bet
const { userPosition, userPositionMoney, yesFloorShares, noFloorShares } =
getBettorsPosition(
@ -230,7 +227,12 @@ export function FeedComment(props: {
)
return (
<>
<Row
className={clsx(
'flex space-x-3 transition-all duration-1000',
highlighted ? `-m-2 rounded bg-indigo-500/[0.2] p-2` : ''
)}
>
<Avatar
className={clsx(smallAvatar && 'ml-1')}
size={smallAvatar ? 'sm' : undefined}
@ -271,7 +273,11 @@ export function FeedComment(props: {
</>
)}
</>
<RelativeTimestamp time={createdTime} />
<CopyLinkDateTimeComponent
contract={contract}
createdTime={createdTime}
elementId={comment.id}
/>
</p>
<TruncatedComment
comment={text}
@ -287,7 +293,7 @@ export function FeedComment(props: {
</button>
)}
</div>
</>
</Row>
)
}
@ -687,39 +693,6 @@ export function FeedQuestion(props: {
)
}
function getMostRecentCommentableBet(
betsByCurrentUser: Bet[],
comments: Comment[],
user?: User | null,
answerOutcome?: string
) {
return betsByCurrentUser
.filter((bet) => {
if (
canCommentOnBet(bet, user) &&
// The bet doesn't already have a comment
!comments.some((comment) => comment.betId == bet.id)
) {
if (!answerOutcome) return true
// If we're in free response, don't allow commenting on ante bet
return (
bet.outcome !== GENERAL_COMMENTS_OUTCOME_ID &&
answerOutcome === bet.outcome
)
}
return false
})
.sort((b1, b2) => b1.createdTime - b2.createdTime)
.pop()
}
function canCommentOnBet(bet: Bet, user?: User | null) {
const { userId, createdTime, isRedemption } = bet
const isSelf = user?.id === userId
// You can comment if your bet was posted in the last hour
return !isRedemption && isSelf && Date.now() - createdTime < 60 * 60 * 1000
}
function FeedDescription(props: { contract: Contract }) {
const { contract } = props
const { creatorName, creatorUsername } = contract
@ -895,161 +868,6 @@ function FeedBetGroup(props: {
)
}
function FeedAnswerGroup(props: {
contract: FullContract<any, FreeResponse>
answer: Answer
items: ActivityItem[]
type: string
betsByCurrentUser?: Bet[]
comments?: Comment[]
}) {
const { answer, items, contract, type, betsByCurrentUser, comments } = props
const { username, avatarUrl, name, text } = answer
const user = useUser()
const mostRecentCommentableBet = getMostRecentCommentableBet(
betsByCurrentUser ?? [],
comments ?? [],
user,
answer.number + ''
)
const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
const probPercent = formatPercent(prob)
const [open, setOpen] = useState(false)
const [showReply, setShowReply] = useState(false)
const isFreeResponseContractPage = type === 'answergroup' && comments
if (mostRecentCommentableBet && !showReply) setShowReplyAndFocus(true)
const [inputRef, setInputRef] = useState<HTMLTextAreaElement | null>(null)
// If they've already opened the input box, focus it once again
function setShowReplyAndFocus(show: boolean) {
setShowReply(show)
inputRef?.focus()
}
useEffect(() => {
if (showReply && inputRef) inputRef.focus()
}, [inputRef, showReply])
return (
<Col
className={
type === 'answer'
? 'border-base-200 bg-base-200 flex-1 rounded-md px-2'
: 'flex-1 gap-2'
}
>
<Modal open={open} setOpen={setOpen}>
<AnswerBetPanel
answer={answer}
contract={contract}
closePanel={() => setOpen(false)}
className="sm:max-w-84 !rounded-md bg-white !px-8 !py-6"
isModal={true}
/>
</Modal>
{type == 'answer' && (
<div
className="pointer-events-none absolute -mx-2 h-full rounded-tl-md bg-green-600 bg-opacity-10"
style={{ width: `${100 * Math.max(prob, 0.01)}%` }}
></div>
)}
<Row className="my-4 gap-3">
<div className="px-1">
<Avatar username={username} avatarUrl={avatarUrl} />
</div>
<Col className="min-w-0 flex-1 lg:gap-1">
<div className="text-sm text-gray-500">
<UserLink username={username} name={name} /> answered
</div>
<Col className="align-items justify-between gap-4 sm:flex-row">
<span className="whitespace-pre-line text-lg">
<Linkify text={text} />
</span>
<Row className="items-center justify-center gap-4">
{isFreeResponseContractPage && (
<div className={'sm:hidden'}>
<button
className={
'text-xs font-bold text-gray-500 hover:underline'
}
onClick={() => setShowReplyAndFocus(true)}
>
Reply
</button>
</div>
)}
<div className={'align-items flex w-full justify-end gap-4 '}>
<span
className={clsx(
'text-2xl',
tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
)}
>
{probPercent}
</span>
<BuyButton
className={clsx(
'btn-sm flex-initial !px-6 sm:flex',
tradingAllowed(contract) ? '' : '!hidden'
)}
onClick={() => setOpen(true)}
/>
</div>
</Row>
</Col>
{isFreeResponseContractPage && (
<div className={'justify-initial hidden sm:block'}>
<button
className={'text-xs font-bold text-gray-500 hover:underline'}
onClick={() => setShowReplyAndFocus(true)}
>
Reply
</button>
</div>
)}
</Col>
</Row>
{items.map((item, index) => (
<div
key={item.id}
className={clsx(
'relative ml-8',
index !== items.length - 1 && 'pb-4'
)}
>
{index !== items.length - 1 ? (
<span
className="absolute top-5 left-5 -ml-px h-[calc(100%-1rem)] w-0.5 bg-gray-200"
aria-hidden="true"
/>
) : null}
<div className="relative flex items-start space-x-3">
<FeedItem item={item} />
</div>
</div>
))}
{showReply && (
<div className={'ml-8 pt-4'}>
<CommentInput
contract={contract}
betsByCurrentUser={betsByCurrentUser ?? []}
comments={comments ?? []}
answerOutcome={answer.number + ''}
replyToUsername={answer.username}
setRef={setInputRef}
/>
</div>
)}
</Col>
)
}
// TODO: Should highlight the entire Feed segment
function FeedExpand(props: { setExpanded: (expanded: boolean) => void }) {
const { setExpanded } = props

14
web/components/layout/row.tsx
View File

@ -1,7 +1,15 @@
import clsx from 'clsx'
export function Row(props: { children?: any; className?: string }) {
const { children, className } = props
export function Row(props: {
children?: any
className?: string
id?: string
}) {
const { children, className, id } = props
return <div className={clsx(className, 'flex flex-row')}>{children}</div>
return (
<div className={clsx(className, 'flex flex-row')} id={id}>
{children}
</div>
)
}

7
web/components/nav/sidebar.tsx
View File

@ -170,7 +170,7 @@ export default function Sidebar(props: { className?: string }) {
</div>
{deservesDailyFreeMarket ? (
<div className=" text-primary mt-4 text-center">
<div className=" mt-4 text-center text-indigo-500">
Use your daily free market! 🎉
</div>
) : (
@ -180,8 +180,9 @@ export default function Sidebar(props: { className?: string }) {
{user && (
<div className={'aligncenter flex justify-center'}>
<Link href={'/create'}>
<button className="btn btn-primary btn-md mt-4 capitalize">
Create Market
<button className="btn btn-md mt-4 bg-indigo-500 capitalize hover:bg-indigo-700">
{/* Create Market */}
Ask question
</button>
</Link>
</div>

6
web/components/sell-button.tsx
View File

@ -11,8 +11,9 @@ export function SellButton(props: {
user: User | null | undefined
sharesOutcome: 'YES' | 'NO' | undefined
shares: number
panelClassName?: string
}) {
const { contract, user, sharesOutcome, shares } = props
const { contract, user, sharesOutcome, shares, panelClassName } = props
const userBets = useUserContractBets(user?.id, contract.id)
const [showSellModal, setShowSellModal] = useState(false)
const { mechanism } = contract
@ -24,7 +25,7 @@ export function SellButton(props: {
className={clsx(
'btn-sm w-24 gap-1',
// from the yes-no-selector:
'flex inline-flex flex-row items-center justify-center rounded-3xl border-2 p-2',
'inline-flex items-center justify-center rounded-3xl border-2 p-2',
sharesOutcome === 'NO'
? 'hover:bg-primary-focus border-primary hover:border-primary-focus text-primary hover:text-white'
: 'border-red-400 text-red-500 hover:border-red-500 hover:bg-red-500 hover:text-white'
@ -38,6 +39,7 @@ export function SellButton(props: {
</div>
{showSellModal && (
<SellSharesModal
className={panelClassName}
contract={contract as FullContract<CPMM, Binary>}
user={user}
userBets={userBets ?? []}

14
web/components/sell-modal.tsx
View File

@ -7,8 +7,10 @@ import { Title } from './title'
import { formatWithCommas } from 'common/util/format'
import { OutcomeLabel } from './outcome-label'
import { SellPanel } from './bet-panel'
import clsx from 'clsx'
export function SellSharesModal(props: {
className?: string
contract: FullContract<CPMM, Binary>
userBets: Bet[]
shares: number
@ -16,11 +18,19 @@ export function SellSharesModal(props: {
user: User
setOpen: (open: boolean) => void
}) {
const { contract, shares, sharesOutcome, userBets, user, setOpen } = props
const {
className,
contract,
shares,
sharesOutcome,
userBets,
user,
setOpen,
} = props
return (
<Modal open={true} setOpen={setOpen}>
<Col className="rounded-md bg-white px-8 py-6">
<Col className={clsx('rounded-md bg-white px-8 py-6', className)}>
<Title className="!mt-0" text={'Sell shares'} />
<div className="mb-6">

14
web/components/share-embed-button.tsx
View File

@ -1,10 +1,11 @@
import { Fragment } from 'react'
import React, { Fragment } from 'react'
import { CodeIcon } from '@heroicons/react/outline'
import { Menu, Transition } from '@headlessui/react'
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'
function copyEmbedCode(contract: Contract) {
const title = contract.question
@ -15,8 +16,11 @@ function copyEmbedCode(contract: Contract) {
copyToClipboard(embedCode)
}
export function ShareEmbedButton(props: { contract: Contract }) {
const { contract } = props
export function ShareEmbedButton(props: {
contract: Contract
toastClassName?: string
}) {
const { contract, toastClassName } = props
return (
<Menu
@ -45,9 +49,9 @@ export function ShareEmbedButton(props: { contract: Contract }) {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-center absolute left-0 mt-2 w-40 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Items>
<Menu.Item>
<div className="px-2 py-1">Embed code copied!</div>
<ToastClipboard className={toastClassName} />
</Menu.Item>
</Menu.Items>
</Transition>

1
web/components/share-market.tsx
View File

@ -20,6 +20,7 @@ export function ShareMarket(props: { contract: Contract; className?: string }) {
<CopyLinkButton
contract={contract}
buttonClassName="btn-md rounded-l-none"
toastClassName={'-left-28 mt-1'}
/>
</Row>
</Col>

31
web/components/site-link.tsx
View File

@ -9,24 +9,8 @@ export const SiteLink = (props: {
}) => {
const { href, children, onClick, className } = props
return href.startsWith('http') ? (
<a
href={href}
className={clsx(
'z-10 break-words hover:underline hover:decoration-indigo-400 hover:decoration-2',
className
)}
style={{ /* For iOS safari */ wordBreak: 'break-word' }}
target="_blank"
onClick={(e) => {
e.stopPropagation()
if (onClick) onClick()
}}
>
{children}
</a>
) : (
<Link href={href}>
return (
<MaybeLink href={href}>
<a
className={clsx(
'z-10 break-words hover:underline hover:decoration-indigo-400 hover:decoration-2',
@ -40,6 +24,15 @@ export const SiteLink = (props: {
>
{children}
</a>
</Link>
</MaybeLink>
)
}
function MaybeLink(props: { href: string; children: React.ReactNode }) {
const { href, children } = props
return href.startsWith('http') ? (
<>{children}</>
) : (
<Link href={href}>{children}</Link>
)
}

2
web/components/tags-list.tsx
View File

@ -11,7 +11,7 @@ function Hashtag(props: { tag: string; noLink?: boolean }) {
const body = (
<div className={clsx('', !noLink && 'cursor-pointer')}>
<span className="text-sm">#{category ?? tag} </span>
<span className="text-sm">{category ? '#' + category : tag} </span>
</div>
)

21
web/components/toast-clipboard.tsx Normal file
View File

@ -0,0 +1,21 @@
import { ClipboardCopyIcon } from '@heroicons/react/outline'
import React from 'react'
import clsx from 'clsx'
import { Row } from 'web/components/layout/row'
export function ToastClipboard(props: { className?: string }) {
const { className } = props
return (
<Row
className={clsx(
'border-base-300 absolute items-center' +
'gap-2 divide-x divide-gray-200 rounded-md border-2 bg-white ' +
'h-15 w-[15rem] p-2 pr-3 text-gray-500',
className
)}
>
<ClipboardCopyIcon height={20} className={'mr-2 self-center'} />
<div className="pl-4 text-sm font-normal">Link copied to clipboard!</div>
</Row>
)
}

10
web/hooks/use-has-created-contract-today.ts
View File

@ -2,8 +2,12 @@ import { listContracts } from 'web/lib/firebase/contracts'
import { useEffect, useState } from 'react'
import { User } from 'common/user'
let sessionCreatedContractToday = true
export const useHasCreatedContractToday = (user: User | null | undefined) => {
const [hasCreatedContractToday, setHasCreatedContractToday] = useState(true)
const [hasCreatedContractToday, setHasCreatedContractToday] = useState(
sessionCreatedContractToday
)
useEffect(() => {
// Uses utc time like the server.
@ -17,7 +21,9 @@ export const useHasCreatedContractToday = (user: User | null | undefined) => {
const todayContracts = contracts.filter(
(contract) => contract.createdTime > todayAtMidnight
)
setHasCreatedContractToday(todayContracts.length > 0)
sessionCreatedContractToday = todayContracts.length > 0
setHasCreatedContractToday(sessionCreatedContractToday)
}
listUserContractsForToday()

2
web/pages/create.tsx
View File

@ -215,7 +215,7 @@ export function NewContract(props: { question: string; tag?: string }) {
value={category}
onChange={(e) => setCategory(e.currentTarget.value ?? '')}
>
<option value={''}></option>
<option value={''}>(none)</option>
{Object.entries(CATEGORIES).map(([id, name]) => (
<option key={id} value={id}>
{name}

28
web/pages/embed/[username]/[contractSlug].tsx
View File

@ -1,7 +1,14 @@
import { Bet } from 'common/bet'
import { Contract, DPM, FreeResponse, FullContract } from 'common/contract'
import {
BinaryContract,
Contract,
DPM,
FreeResponse,
FullContract,
} from 'common/contract'
import { DOMAIN } from 'common/envs/constants'
import { AnswersGraph } from 'web/components/answers/answers-graph'
import BetRow from 'web/components/bet-row'
import {
BinaryResolutionOrChance,
FreeResponseResolutionOrChance,
@ -92,13 +99,8 @@ function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
return (
<Col className="w-full flex-1 bg-white">
<div className="relative flex flex-col pt-2" ref={setElem}>
<SiteLink
className="absolute top-0 left-0 z-20 h-full w-full"
href={href}
/>
<div className="px-3 text-xl text-indigo-700 md:text-2xl">
<Linkify text={question} />
<SiteLink href={href}>{question}</SiteLink>
</div>
<Spacer h={3} />
@ -108,10 +110,18 @@ function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
contract={contract}
bets={bets}
isCreator={false}
hideShareButtons
disabled
/>
{isBinary && <BinaryResolutionOrChance contract={contract} />}
{isBinary && (
<Row className="items-center gap-4">
<BetRow
contract={contract as BinaryContract}
betPanelClassName="scale-75"
/>
<BinaryResolutionOrChance contract={contract} />
</Row>
)}
{outcomeType === 'FREE_RESPONSE' && resolution && (
<FreeResponseResolutionOrChance

BIN
web/public/flappy-logo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 KiB