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

Merge branch 'manifoldmarkets:main' into main

Browse Source
This commit is contained in:
marsteralex 2022-10-13 18:02:33 -07:00 committed by GitHub
commit b85dbba895
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
123 changed files with 2698 additions and 1671 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
common/charity.ts
View File

@ -595,7 +595,8 @@ In addition to housing impact litigation, we provide free legal aid, education a
photo:
'https://firebasestorage.googleapis.com/v0/b/mantic-markets.appspot.com/o/user-images%2Fdefault%2Fci2h3hStFM.47?alt=media&token=0d2cdc3d-e4d8-4f5e-8f23-4a586b6ff637',
preview: 'Donate supplies to soldiers in Ukraine',
description: 'Donate supplies to soldiers in Ukraine, including tourniquets and plate carriers.',
description:
'Donate supplies to soldiers in Ukraine, including tourniquets and plate carriers.',
},
].map((charity) => {
const slug = charity.name.toLowerCase().replace(/\s/g, '-')

3
common/envs/dev.ts
View File

@ -16,7 +16,6 @@ export const DEV_CONFIG: EnvConfig = {
cloudRunId: 'w3txbmd3ba',
cloudRunRegion: 'uc',
amplitudeApiKey: 'fd8cbfd964b9a205b8678a39faae71b3',
// this is Phil's deployment
twitchBotEndpoint: 'https://king-prawn-app-5btyw.ondigitalocean.app',
twitchBotEndpoint: 'https://dev-twitch-bot.manifold.markets',
sprigEnvironmentId: 'Tu7kRZPm7daP',
}

3
common/globalConfig.ts Normal file
View File

@ -0,0 +1,3 @@
export type GlobalConfig = {
pinnedItems: { itemId: string; type: 'post' | 'contract' }[]
}

12
common/package.json
View File

@ -8,11 +8,13 @@
},
"sideEffects": false,
"dependencies": {
"@tiptap/core": "2.0.0-beta.182",
"@tiptap/extension-image": "2.0.0-beta.30",
"@tiptap/extension-link": "2.0.0-beta.43",
"@tiptap/extension-mention": "2.0.0-beta.102",
"@tiptap/starter-kit": "2.0.0-beta.191",
"@tiptap/core": "2.0.0-beta.199",
"@tiptap/extension-image": "2.0.0-beta.199",
"@tiptap/extension-link": "2.0.0-beta.199",
"@tiptap/extension-mention": "2.0.0-beta.199",
"@tiptap/html": "2.0.0-beta.199",
"@tiptap/starter-kit": "2.0.0-beta.199",
"@tiptap/suggestion": "2.0.0-beta.199",
"lodash": "4.17.21"
},
"devDependencies": {

6
common/payouts-fixed.ts
View File

@ -56,7 +56,8 @@ export const getLiquidityPoolPayouts = (
liquidities: LiquidityProvision[]
) => {
const { pool, subsidyPool } = contract
const finalPool = pool[outcome] + subsidyPool
const finalPool = pool[outcome] + (subsidyPool ?? 0)
if (finalPool < 1e-3) return []
const weights = getCpmmLiquidityPoolWeights(liquidities)
@ -95,7 +96,8 @@ export const getLiquidityPoolProbPayouts = (
liquidities: LiquidityProvision[]
) => {
const { pool, subsidyPool } = contract
const finalPool = p * pool.YES + (1 - p) * pool.NO + subsidyPool
const finalPool = p * pool.YES + (1 - p) * pool.NO + (subsidyPool ?? 0)
if (finalPool < 1e-3) return []
const weights = getCpmmLiquidityPoolWeights(liquidities)

5
common/post.ts
View File

@ -8,6 +8,11 @@ export type Post = {
creatorId: string // User id
createdTime: number
slug: string
// denormalized user fields
creatorName: string
creatorUsername: string
creatorAvatarUrl?: string
}
export type DateDoc = Post & {

64
common/util/parse.ts
View File

@ -1,4 +1,5 @@
import { generateText, JSONContent } from '@tiptap/core'
import { generateText, JSONContent, Node } from '@tiptap/core'
import { generateJSON } from '@tiptap/html'
// Tiptap starter extensions
import { Blockquote } from '@tiptap/extension-blockquote'
import { Bold } from '@tiptap/extension-bold'
@ -23,7 +24,7 @@ import { Mention } from '@tiptap/extension-mention'
import Iframe from './tiptap-iframe'
import TiptapTweet from './tiptap-tweet-type'
import { find } from 'linkifyjs'
import { cloneDeep, uniq } from 'lodash'
import { uniq } from 'lodash'
import { TiptapSpoiler } from './tiptap-spoiler'
/** get first url in text. like "notion.so " -> "http://notion.so"; "notion" -> null */
@ -51,8 +52,28 @@ export function parseMentions(data: JSONContent): string[] {
return uniq(mentions)
}
// can't just do [StarterKit, Image...] because it doesn't work with cjs imports
// TODO: this is a hack to get around the fact that tiptap doesn't have a
// way to add a node view without bundling in tsx
function skippableComponent(name: string): Node<any, any> {
return Node.create({
name,
group: 'block',
content: 'inline*',
parseHTML() {
return [
{
tag: 'grid-cards-component',
},
]
},
})
}
const stringParseExts = [
// StarterKit extensions
Blockquote,
Bold,
BulletList,
@ -69,38 +90,25 @@ const stringParseExts = [
Paragraph,
Strike,
Text,
Image,
// other extensions
Link,
Image.extend({ renderText: () => '[image]' }),
Mention, // user @mention
Mention.extend({ name: 'contract-mention' }), // market %mention
Iframe,
TiptapTweet,
TiptapSpoiler,
Iframe.extend({
renderText: ({ node }) =>
'[embed]' + node.attrs.src ? `(${node.attrs.src})` : '',
}),
skippableComponent('gridCardsComponent'),
TiptapTweet.extend({ renderText: () => '[tweet]' }),
TiptapSpoiler.extend({ renderHTML: () => ['span', '[spoiler]', 0] }),
]
export function richTextToString(text?: JSONContent) {
if (!text) return ''
// remove spoiler tags.
const newText = cloneDeep(text)
dfs(newText, (current) => {
if (current.marks?.some((m) => m.type === TiptapSpoiler.name)) {
current.text = '[spoiler]'
} else if (current.type === 'image') {
current.text = '[Image]'
// This is a hack, I've no idea how to change a tiptap extenstion's schema
current.type = 'text'
} else if (current.type === 'iframe') {
const src = current.attrs?.['src'] ? current.attrs['src'] : ''
current.text = '[Iframe]' + (src ? ` url:${src}` : '')
// This is a hack, I've no idea how to change a tiptap extenstion's schema
current.type = 'text'
}
})
return generateText(newText, stringParseExts)
return generateText(text, stringParseExts)
}
const dfs = (data: JSONContent, f: (current: JSONContent) => any) => {
data.content?.forEach((d) => dfs(d, f))
f(data)
export function htmlToRichText(html: string) {
return generateJSON(html, stringParseExts)
}

11
docs/docs/api.md
View File

@ -680,6 +680,17 @@ $ curl https://manifold.markets/api/v0/market/{marketId}/sell -X POST \
--data-raw '{"outcome": "YES", "shares": 10}'
```
### `POST /v0/comment`
Creates a comment in the specified market. Only supports top-level comments for now.
Parameters:
- `contractId`: Required. The ID of the market to comment on.
- `content`: The comment to post, formatted as [TipTap json](https://tiptap.dev/guide/output#option-1-json), OR
- `html`: The comment to post, formatted as an HTML string, OR
- `markdown`: The comment to post, formatted as a markdown string.
### `GET /v0/bets`
Gets a list of bets, ordered by creation date descending.

8
firestore.rules
View File

@ -23,6 +23,12 @@ service cloud.firestore {
allow read;
}
match /globalConfig/globalConfig {
allow read;
allow update: if isAdmin()
allow create: if isAdmin()
}
match /users/{userId} {
allow read;
allow update: if userId == request.auth.uid
@ -104,7 +110,7 @@ service cloud.firestore {
match /contracts/{contractId} {
allow read;
allow update: if request.resource.data.diff(resource.data).affectedKeys()
.hasOnly(['tags', 'lowercaseTags', 'groupSlugs', 'groupLinks']);
.hasOnly(['tags', 'lowercaseTags', 'groupSlugs', 'groupLinks', 'flaggedByUsernames']);
allow update: if request.resource.data.diff(resource.data).affectedKeys()
.hasOnly(['description', 'closeTime', 'question', 'visibility', 'unlistedById'])
&& resource.data.creatorId == request.auth.uid;

18
functions/package.json
View File

@ -15,9 +15,9 @@
"dev": "nodemon src/serve.ts",
"localDbScript": "firebase emulators:start --only functions,firestore,pubsub --import=./firestore_export",
"serve": "firebase use dev && yarn build && firebase emulators:start --only functions,firestore,pubsub --import=./firestore_export",
"db:update-local-from-remote": "yarn db:backup-remote && gsutil rsync -r gs://$npm_package_config_firestore/firestore_export ./firestore_export",
"db:update-local-from-remote": "yarn db:backup-remote && gsutil -m rsync -r gs://$npm_package_config_firestore/firestore_export ./firestore_export",
"db:backup-local": "firebase emulators:export --force ./firestore_export",
"db:rename-remote-backup-folder": "gsutil mv gs://$npm_package_config_firestore/firestore_export gs://$npm_package_config_firestore/firestore_export_$(date +%d-%m-%Y-%H-%M)",
"db:rename-remote-backup-folder": "gsutil -m mv gs://$npm_package_config_firestore/firestore_export gs://$npm_package_config_firestore/firestore_export_$(date +%d-%m-%Y-%H-%M)",
"db:backup-remote": "yarn db:rename-remote-backup-folder && gcloud firestore export gs://$npm_package_config_firestore/firestore_export/",
"verify": "(cd .. && yarn verify)",
"verify:dir": "npx eslint . --max-warnings 0; tsc -b -v --pretty"
@ -26,11 +26,13 @@
"dependencies": {
"@amplitude/node": "1.10.0",
"@google-cloud/functions-framework": "3.1.2",
"@tiptap/core": "2.0.0-beta.182",
"@tiptap/extension-image": "2.0.0-beta.30",
"@tiptap/extension-link": "2.0.0-beta.43",
"@tiptap/extension-mention": "2.0.0-beta.102",
"@tiptap/starter-kit": "2.0.0-beta.191",
"@tiptap/core": "2.0.0-beta.199",
"@tiptap/extension-image": "2.0.0-beta.199",
"@tiptap/extension-link": "2.0.0-beta.199",
"@tiptap/extension-mention": "2.0.0-beta.199",
"@tiptap/html": "2.0.0-beta.199",
"@tiptap/starter-kit": "2.0.0-beta.199",
"@tiptap/suggestion": "2.0.0-beta.199",
"cors": "2.8.5",
"dayjs": "1.11.4",
"express": "4.18.1",
@ -38,6 +40,7 @@
"firebase-functions": "3.21.2",
"lodash": "4.17.21",
"mailgun-js": "0.22.0",
"marked": "4.1.1",
"module-alias": "2.2.2",
"node-fetch": "2",
"stripe": "8.194.0",
@ -45,6 +48,7 @@
},
"devDependencies": {
"@types/mailgun-js": "0.22.12",
"@types/marked": "4.0.7",
"@types/module-alias": "2.0.1",
"@types/node-fetch": "2.6.2",
"firebase-functions-test": "0.3.3",

105
functions/src/create-comment.ts Normal file
View File

@ -0,0 +1,105 @@
import * as admin from 'firebase-admin'
import { getContract, getUser, log } from './utils'
import { APIError, newEndpoint, validate } from './api'
import { JSONContent } from '@tiptap/core'
import { z } from 'zod'
import { removeUndefinedProps } from '../../common/util/object'
import { htmlToRichText } from '../../common/util/parse'
import { marked } from 'marked'
const contentSchema: z.ZodType<JSONContent> = z.lazy(() =>
z.intersection(
z.record(z.any()),
z.object({
type: z.string().optional(),
attrs: z.record(z.any()).optional(),
content: z.array(contentSchema).optional(),
marks: z
.array(
z.intersection(
z.record(z.any()),
z.object({
type: z.string(),
attrs: z.record(z.any()).optional(),
})
)
)
.optional(),
text: z.string().optional(),
})
)
)
const postSchema = z.object({
contractId: z.string(),
content: contentSchema.optional(),
html: z.string().optional(),
markdown: z.string().optional(),
})
const MAX_COMMENT_JSON_LENGTH = 20000
// For now, only supports creating a new top-level comment on a contract.
// Replies, posts, chats are not supported yet.
export const createcomment = newEndpoint({}, async (req, auth) => {
const firestore = admin.firestore()
const { contractId, content, html, markdown } = validate(postSchema, req.body)
const creator = await getUser(auth.uid)
const contract = await getContract(contractId)
if (!creator) {
throw new APIError(400, 'No user exists with the authenticated user ID.')
}
if (!contract) {
throw new APIError(400, 'No contract exists with the given ID.')
}
let contentJson = null
if (content) {
contentJson = content
} else if (html) {
console.log('html', html)
contentJson = htmlToRichText(html)
} else if (markdown) {
const markedParse = marked.parse(markdown)
log('parsed', markedParse)
contentJson = htmlToRichText(markedParse)
log('json', contentJson)
}
if (!contentJson) {
throw new APIError(400, 'No comment content provided.')
}
if (JSON.stringify(contentJson).length > MAX_COMMENT_JSON_LENGTH) {
throw new APIError(
400,
`Comment is too long; should be less than ${MAX_COMMENT_JSON_LENGTH} as a JSON string.`
)
}
const ref = firestore.collection(`contracts/${contractId}/comments`).doc()
const comment = removeUndefinedProps({
id: ref.id,
content: contentJson,
createdTime: Date.now(),
userId: creator.id,
userName: creator.name,
userUsername: creator.username,
userAvatarUrl: creator.avatarUrl,
// OnContract fields
commentType: 'contract',
contractId: contractId,
contractSlug: contract.slug,
contractQuestion: contract.question,
})
await ref.set(comment)
return { status: 'success', comment }
})

8
functions/src/create-notification.ts
View File

@ -197,6 +197,7 @@ export const createCommentOrAnswerOrUpdatedContractNotification = async (
return await notificationRef.set(removeUndefinedProps(notification))
}
const needNotFollowContractReasons = ['tagged_user']
const stillFollowingContract = (userId: string) => {
return contractFollowersIds.includes(userId)
}
@ -205,7 +206,12 @@ export const createCommentOrAnswerOrUpdatedContractNotification = async (
userId: string,
reason: notification_reason_types
) => {
if (!stillFollowingContract(userId) || sourceUser.id == userId) return
if (
(!stillFollowingContract(userId) &&
!needNotFollowContractReasons.includes(reason)) ||
sourceUser.id == userId
)
return
const privateUser = await getPrivateUser(userId)
if (!privateUser) return
const { sendToBrowser, sendToEmail } = getNotificationDestinationsForUser(

3
functions/src/create-post.ts
View File

@ -100,6 +100,9 @@ export const createpost = newEndpoint({}, async (req, auth) => {
createdTime: Date.now(),
content: content,
contractSlug,
creatorName: creator.name,
creatorUsername: creator.username,
creatorAvatarUrl: creator.avatarUrl,
})
await postRef.create(post)

3
functions/src/index.ts
View File

@ -65,6 +65,7 @@ import { sellbet } from './sell-bet'
import { sellshares } from './sell-shares'
import { claimmanalink } from './claim-manalink'
import { createmarket } from './create-market'
import { createcomment } from './create-comment'
import { addcommentbounty, awardcommentbounty } from './update-comment-bounty'
import { creategroup } from './create-group'
import { resolvemarket } from './resolve-market'
@ -94,6 +95,7 @@ const claimManalinkFunction = toCloudFunction(claimmanalink)
const createMarketFunction = toCloudFunction(createmarket)
const addSubsidyFunction = toCloudFunction(addsubsidy)
const addCommentBounty = toCloudFunction(addcommentbounty)
const createCommentFunction = toCloudFunction(createcomment)
const awardCommentBounty = toCloudFunction(awardcommentbounty)
const createGroupFunction = toCloudFunction(creategroup)
const resolveMarketFunction = toCloudFunction(resolvemarket)
@ -130,6 +132,7 @@ export {
acceptChallenge as acceptchallenge,
createPostFunction as createpost,
saveTwitchCredentials as savetwitchcredentials,
createCommentFunction as createcomment,
addCommentBounty as addcommentbounty,
awardCommentBounty as awardcommentbounty,
updateMetricsFunction as updatemetrics,

3
functions/src/on-update-contract.ts
View File

@ -39,7 +39,8 @@ export const onUpdateContract = functions.firestore
async function handleResolvedContract(contract: Contract) {
if (
(contract.uniqueBettorCount ?? 0) <
MINIMUM_UNIQUE_BETTORS_FOR_PROVEN_CORRECT_BADGE
MINIMUM_UNIQUE_BETTORS_FOR_PROVEN_CORRECT_BADGE ||
contract.resolution === 'CANCEL'
)
return

100
functions/src/resolve-market.ts
View File

@ -1,6 +1,6 @@
import * as admin from 'firebase-admin'
import { z } from 'zod'
import { mapValues, groupBy, sumBy } from 'lodash'
import { mapValues, groupBy, sumBy, uniqBy } from 'lodash'
import {
Contract,
@ -15,14 +15,14 @@ import {
getValues,
isProd,
log,
payUser,
payUsers,
payUsersMultipleTransactions,
revalidateStaticProps,
} from './utils'
import {
getLoanPayouts,
getPayouts,
groupPayoutsByUser,
Payout,
} from '../../common/payouts'
import { isAdmin, isManifoldId } from '../../common/envs/constants'
import { removeUndefinedProps } from '../../common/util/object'
@ -36,6 +36,7 @@ import {
DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
HOUSE_LIQUIDITY_PROVIDER_ID,
} from '../../common/antes'
import { User } from 'common/user'
const bodySchema = z.object({
contractId: z.string(),
@ -89,13 +90,10 @@ export const resolvemarket = newEndpoint(opts, async (req, auth) => {
if (!contractSnap.exists)
throw new APIError(404, 'No contract exists with the provided ID')
const contract = contractSnap.data() as Contract
const { creatorId, closeTime } = contract
const { creatorId } = contract
const firebaseUser = await admin.auth().getUser(auth.uid)
const { value, resolutions, probabilityInt, outcome } = getResolutionParams(
contract,
req.body
)
const resolutionParams = getResolutionParams(contract, req.body)
if (
creatorId !== auth.uid &&
@ -109,6 +107,16 @@ export const resolvemarket = newEndpoint(opts, async (req, auth) => {
const creator = await getUser(creatorId)
if (!creator) throw new APIError(500, 'Creator not found')
return await resolveMarket(contract, creator, resolutionParams)
})
export const resolveMarket = async (
contract: Contract,
creator: User,
{ value, resolutions, probabilityInt, outcome }: ResolutionParams
) => {
const { creatorId, closeTime, id: contractId } = contract
const resolutionProbability =
probabilityInt !== undefined ? probabilityInt / 100 : undefined
@ -131,15 +139,19 @@ export const resolvemarket = newEndpoint(opts, async (req, auth) => {
(doc) => doc.data() as LiquidityProvision
)
const { payouts, creatorPayout, liquidityPayouts, collectedFees } =
getPayouts(
outcome,
contract,
bets,
liquidities,
resolutions,
resolutionProbability
)
const {
payouts: traderPayouts,
creatorPayout,
liquidityPayouts,
collectedFees,
} = getPayouts(
outcome,
contract,
bets,
liquidities,
resolutions,
resolutionProbability
)
const updatedContract = {
...contract,
@ -156,33 +168,47 @@ export const resolvemarket = newEndpoint(opts, async (req, auth) => {
subsidyPool: 0,
}
await contractDoc.update(updatedContract)
console.log('contract ', contractId, 'resolved to:', outcome)
const openBets = bets.filter((b) => !b.isSold && !b.sale)
const loanPayouts = getLoanPayouts(openBets)
const payoutsWithoutLoans = [
{ userId: creatorId, payout: creatorPayout, deposit: creatorPayout },
...liquidityPayouts.map((p) => ({ ...p, deposit: p.payout })),
...traderPayouts,
]
const payouts = [...payoutsWithoutLoans, ...loanPayouts]
if (!isProd())
console.log(
'payouts:',
payouts,
'trader payouts:',
traderPayouts,
'creator payout:',
creatorPayout,
'liquidity payout:'
'liquidity payout:',
liquidityPayouts,
'loan payouts:',
loanPayouts
)
if (creatorPayout)
await processPayouts([{ userId: creatorId, payout: creatorPayout }], true)
const userCount = uniqBy(payouts, 'userId').length
const contractDoc = firestore.doc(`contracts/${contractId}`)
await processPayouts(liquidityPayouts, true)
if (userCount <= 499) {
await firestore.runTransaction(async (transaction) => {
payUsers(transaction, payouts)
transaction.update(contractDoc, updatedContract)
})
} else {
await payUsersMultipleTransactions(payouts)
await contractDoc.update(updatedContract)
}
console.log('contract ', contractId, 'resolved to:', outcome)
await processPayouts([...payouts, ...loanPayouts])
await undoUniqueBettorRewardsIfCancelResolution(contract, outcome)
await revalidateStaticProps(getContractPath(contract))
const userPayoutsWithoutLoans = groupPayoutsByUser(payouts)
const userPayoutsWithoutLoans = groupPayoutsByUser(payoutsWithoutLoans)
const userInvestments = mapValues(
groupBy(bets, (bet) => bet.userId),
@ -209,18 +235,6 @@ export const resolvemarket = newEndpoint(opts, async (req, auth) => {
)
return updatedContract
})
const processPayouts = async (payouts: Payout[], isDeposit = false) => {
const userPayouts = groupPayoutsByUser(payouts)
const payoutPromises = Object.entries(userPayouts).map(([userId, payout]) =>
payUser(userId, payout, isDeposit)
)
return await Promise.all(payoutPromises)
.catch((e) => ({ status: 'error', message: e }))
.then(() => ({ status: 'success' }))
}
function getResolutionParams(contract: Contract, body: string) {
@ -287,6 +301,8 @@ function getResolutionParams(contract: Contract, body: string) {
throw new APIError(500, `Invalid outcome type: ${outcomeType}`)
}
type ResolutionParams = ReturnType<typeof getResolutionParams>
function validateAnswer(
contract: FreeResponseContract | MultipleChoiceContract,
answer: number

24
functions/src/scripts/backfill-subsidy-pool.ts Normal file
View File

@ -0,0 +1,24 @@
import * as admin from 'firebase-admin'
import { initAdmin } from './script-init'
initAdmin()
const firestore = admin.firestore()
if (require.main === module) {
const contractsRef = firestore.collection('contracts')
contractsRef.get().then(async (contractsSnaps) => {
console.log(`Loaded ${contractsSnaps.size} contracts.`)
const needsFilling = contractsSnaps.docs.filter((ct) => {
return !('subsidyPool' in ct.data())
})
console.log(`Found ${needsFilling.length} contracts to update.`)
await Promise.all(
needsFilling.map((ct) => ct.ref.update({ subsidyPool: 0 }))
)
console.log(`Updated all contracts.`)
})
}

59
functions/src/scripts/resolve-markets-again.ts Normal file
View File

@ -0,0 +1,59 @@
import { initAdmin } from './script-init'
initAdmin()
import { zip } from 'lodash'
import { filterDefined } from 'common/util/array'
import { resolveMarket } from '../resolve-market'
import { getContract, getUser } from '../utils'
if (require.main === module) {
const contractIds = process.argv.slice(2)
if (contractIds.length === 0) {
throw new Error('No contract ids provided')
}
resolveMarketsAgain(contractIds).then(() => process.exit(0))
}
async function resolveMarketsAgain(contractIds: string[]) {
const maybeContracts = await Promise.all(contractIds.map(getContract))
if (maybeContracts.some((c) => !c)) {
throw new Error('Invalid contract id')
}
const contracts = filterDefined(maybeContracts)
const maybeCreators = await Promise.all(
contracts.map((c) => getUser(c.creatorId))
)
if (maybeCreators.some((c) => !c)) {
throw new Error('No creator found')
}
const creators = filterDefined(maybeCreators)
if (
!contracts.every((c) => c.resolution === 'YES' || c.resolution === 'NO')
) {
throw new Error('Only YES or NO resolutions supported')
}
const resolutionParams = contracts.map((c) => ({
outcome: c.resolution as string,
value: undefined,
probabilityInt: undefined,
resolutions: undefined,
}))
const params = zip(contracts, creators, resolutionParams)
for (const [contract, creator, resolutionParams] of params) {
if (contract && creator && resolutionParams) {
console.log('Resolving', contract.question)
try {
await resolveMarket(contract, creator, resolutionParams)
} catch (e) {
console.log(e)
}
}
}
console.log(`Resolved all contracts.`)
}

2
functions/src/serve.ts
View File

@ -19,6 +19,7 @@ import { sellbet } from './sell-bet'
import { sellshares } from './sell-shares'
import { claimmanalink } from './claim-manalink'
import { createmarket } from './create-market'
import { createcomment } from './create-comment'
import { creategroup } from './create-group'
import { resolvemarket } from './resolve-market'
import { unsubscribe } from './unsubscribe'
@ -53,6 +54,7 @@ addJsonEndpointRoute('/transact', transact)
addJsonEndpointRoute('/changeuserinfo', changeuserinfo)
addJsonEndpointRoute('/createuser', createuser)
addJsonEndpointRoute('/createanswer', createanswer)
addJsonEndpointRoute('/createcomment', createcomment)
addJsonEndpointRoute('/placebet', placebet)
addJsonEndpointRoute('/cancelbet', cancelbet)
addJsonEndpointRoute('/sellbet', sellbet)

100
functions/src/utils.ts
View File

@ -1,7 +1,8 @@
import * as admin from 'firebase-admin'
import fetch from 'node-fetch'
import { FieldValue, Transaction } from 'firebase-admin/firestore'
import { chunk, groupBy, mapValues, sumBy } from 'lodash'
import { chunk } from 'lodash'
import { Contract } from '../../common/contract'
import { PrivateUser, User } from '../../common/user'
import { Group } from '../../common/group'
@ -128,38 +129,29 @@ export const getUserByUsername = async (username: string) => {
return snap.empty ? undefined : (snap.docs[0].data() as User)
}
const firestore = admin.firestore()
const updateUserBalance = (
transaction: Transaction,
userId: string,
delta: number,
isDeposit = false
balanceDelta: number,
depositDelta: number
) => {
const firestore = admin.firestore()
return firestore.runTransaction(async (transaction) => {
const userDoc = firestore.doc(`users/${userId}`)
const userSnap = await transaction.get(userDoc)
if (!userSnap.exists) return
const user = userSnap.data() as User
const userDoc = firestore.doc(`users/${userId}`)
const newUserBalance = user.balance + delta
// if (newUserBalance < 0)
// throw new Error(
// `User (${userId}) balance cannot be negative: ${newUserBalance}`
// )
if (isDeposit) {
const newTotalDeposits = (user.totalDeposits || 0) + delta
transaction.update(userDoc, { totalDeposits: newTotalDeposits })
}
transaction.update(userDoc, { balance: newUserBalance })
// Note: Balance is allowed to go negative.
transaction.update(userDoc, {
balance: FieldValue.increment(balanceDelta),
totalDeposits: FieldValue.increment(depositDelta),
})
}
export const payUser = (userId: string, payout: number, isDeposit = false) => {
if (!isFinite(payout)) throw new Error('Payout is not finite: ' + payout)
return updateUserBalance(userId, payout, isDeposit)
return firestore.runTransaction(async (transaction) => {
updateUserBalance(transaction, userId, payout, isDeposit ? payout : 0)
})
}
export const chargeUser = (
@ -170,7 +162,67 @@ export const chargeUser = (
if (!isFinite(charge) || charge <= 0)
throw new Error('User charge is not positive: ' + charge)
return updateUserBalance(userId, -charge, isAnte)
return payUser(userId, -charge, isAnte)
}
const checkAndMergePayouts = (
payouts: {
userId: string
payout: number
deposit?: number
}[]
) => {
for (const { payout, deposit } of payouts) {
if (!isFinite(payout)) {
throw new Error('Payout is not finite: ' + payout)
}
if (deposit !== undefined && !isFinite(deposit)) {
throw new Error('Deposit is not finite: ' + deposit)
}
}
const groupedPayouts = groupBy(payouts, 'userId')
return Object.values(
mapValues(groupedPayouts, (payouts, userId) => ({
userId,
payout: sumBy(payouts, 'payout'),
deposit: sumBy(payouts, (p) => p.deposit ?? 0),
}))
)
}
// Max 500 users in one transaction.
export const payUsers = (
transaction: Transaction,
payouts: {
userId: string
payout: number
deposit?: number
}[]
) => {
const mergedPayouts = checkAndMergePayouts(payouts)
for (const { userId, payout, deposit } of mergedPayouts) {
updateUserBalance(transaction, userId, payout, deposit)
}
}
export const payUsersMultipleTransactions = async (
payouts: {
userId: string
payout: number
deposit?: number
}[]
) => {
const mergedPayouts = checkAndMergePayouts(payouts)
const payoutChunks = chunk(mergedPayouts, 500)
for (const payoutChunk of payoutChunks) {
await firestore.runTransaction(async (transaction) => {
for (const { userId, payout, deposit } of payoutChunk) {
updateUserBalance(transaction, userId, payout, deposit)
}
})
}
}
export const getContractPath = (contract: Contract) => {

3
web/.gitignore vendored
View File

@ -2,4 +2,5 @@
.next
node_modules
out
tsconfig.tsbuildinfo
tsconfig.tsbuildinfo
.env*

2
web/components/add-funds-modal.tsx
View File

@ -35,7 +35,7 @@ export function AddFundsModal(props: {
<div className="text-xl">{manaToUSD(amountSelected)}</div>
</div>
<div className="modal-action">
<div className="flex">
<Button color="gray-white" onClick={() => setOpen(false)}>
Back
</Button>

39
web/components/amount-input.tsx
View File

@ -7,6 +7,8 @@ import { ENV_CONFIG } from 'common/envs/constants'
import { Row } from './layout/row'
import { AddFundsModal } from './add-funds-modal'
import { Input } from './input'
import Slider from 'rc-slider'
import 'rc-slider/assets/index.css'
export function AmountInput(props: {
amount: number | undefined
@ -40,18 +42,13 @@ export function AmountInput(props: {
return (
<>
<Col className={className}>
<Col className={clsx('relative', className)}>
<label className="font-sm md:font-lg relative">
<span className="text-greyscale-4 absolute top-1/2 my-auto ml-2 -translate-y-1/2">
{label}
</span>
<Input
className={clsx(
'pl-9',
error && 'input-error',
'w-24 md:w-auto',
inputClassName
)}
className={clsx('w-24 pl-9 !text-base md:w-auto', inputClassName)}
ref={inputRef}
type="text"
pattern="[0-9]*"
@ -59,13 +56,14 @@ export function AmountInput(props: {
placeholder="0"
maxLength={6}
value={amount ?? ''}
error={!!error}
disabled={disabled}
onChange={(e) => onAmountChange(e.target.value)}
/>
</label>
{error && (
<div className="absolute mt-11 whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
<div className="absolute -bottom-5 whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
{error === 'Insufficient balance' ? (
<>
Not enough funds.
@ -149,7 +147,7 @@ export function BuyAmountInput(props: {
return (
<>
<Row className="gap-4">
<Row className="items-center gap-4">
<AmountInput
amount={amount}
onChange={onAmountChange}
@ -161,14 +159,23 @@ export function BuyAmountInput(props: {
inputRef={inputRef}
/>
{showSlider && (
<input
type="range"
min="0"
max="205"
<Slider
min={0}
max={205}
value={getRaw(amount ?? 0)}
onChange={(e) => onAmountChange(parseRaw(parseInt(e.target.value)))}
className="range range-lg only-thumb my-auto align-middle xl:hidden"
step="5"
onChange={(value) => onAmountChange(parseRaw(value as number))}
className="mx-4 !h-4 xl:hidden [&>.rc-slider-rail]:bg-gray-200 [&>.rc-slider-track]:bg-indigo-400 [&>.rc-slider-handle]:bg-indigo-400"
railStyle={{ height: 16, top: 0, left: 0 }}
trackStyle={{ height: 16, top: 0 }}
handleStyle={{
height: 32,
width: 32,
opacity: 1,
border: 'none',
boxShadow: 'none',
top: -2,
}}
step={5}
/>
)}
</Row>

5
web/components/answers/answer-bet-panel.tsx
View File

@ -126,7 +126,10 @@ export function AnswerBetPanel(props: {
</div>
{!isModal && (
<button className="btn-ghost btn-circle" onClick={closePanel}>
<button
className="hover:bg-greyscale-2 rounded-full"
onClick={closePanel}
>
<XIcon
className="mx-auto h-8 w-8 text-gray-500"
aria-hidden="true"

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

@ -93,15 +93,15 @@ export function AnswerItem(props: {
<div
className={clsx(
'text-2xl',
tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500'
tradingAllowed(contract) ? 'text-teal-500' : 'text-gray-500'
)}
>
{probPercent}
</div>
))}
{showChoice ? (
<div className="form-control py-1">
<label className="label cursor-pointer gap-3">
<div className="flex flex-col py-1">
<label className="cursor-pointer gap-3 px-1 py-2">
<span className="">Choose this answer</span>
{showChoice === 'radio' && (
<input
@ -144,7 +144,7 @@ export function AnswerItem(props: {
<div
className={clsx(
'text-xl',
resolution === 'MKT' ? 'text-blue-700' : 'text-green-700'
resolution === 'MKT' ? 'text-blue-700' : 'text-teal-600'
)}
>
Chosen{' '}

7
web/components/answers/answer-resolve-panel.tsx
View File

@ -10,6 +10,7 @@ import { ChooseCancelSelector } from '../yes-no-selector'
import { ResolveConfirmationButton } from '../confirmation-button'
import { removeUndefinedProps } from 'common/util/object'
import { BETTOR, PAST_BETS } from 'common/user'
import { Button } from '../button'
export function AnswerResolvePanel(props: {
isAdmin: boolean
@ -109,14 +110,14 @@ export function AnswerResolvePanel(props: {
)}
>
{resolveOption && (
<button
className="btn btn-ghost"
<Button
color="gray-white"
onClick={() => {
setResolveOption(undefined)
}}
>
Clear
</button>
</Button>
)}
<ResolveConfirmationButton

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

@ -23,14 +23,16 @@ import { Linkify } from 'web/components/linkify'
import { Button } from 'web/components/button'
import { useAdmin } from 'web/hooks/use-admin'
import { needsAdminToResolve } from 'web/pages/[username]/[contractSlug]'
import { CATEGORY_COLORS } from '../charts/contract/choice'
import { CHOICE_ANSWER_COLORS } from '../charts/contract/choice'
import { useChartAnswers } from '../charts/contract/choice'
import { ChatIcon } from '@heroicons/react/outline'
export function AnswersPanel(props: {
contract: FreeResponseContract | MultipleChoiceContract
onAnswerCommentClick: (answer: Answer) => void
}) {
const isAdmin = useAdmin()
const { contract } = props
const { contract, onAnswerCommentClick } = props
const { creatorId, resolution, resolutions, totalBets, outcomeType } =
contract
const [showAllAnswers, setShowAllAnswers] = useState(false)
@ -138,6 +140,7 @@ export function AnswersPanel(props: {
answer={item}
contract={contract}
colorIndex={colorSortedAnswer.indexOf(item.text)}
onAnswerCommentClick={onAnswerCommentClick}
/>
))}
{hasZeroBetAnswers && !showAllAnswers && (
@ -183,14 +186,18 @@ function OpenAnswer(props: {
contract: FreeResponseContract | MultipleChoiceContract
answer: Answer
colorIndex: number | undefined
onAnswerCommentClick: (answer: Answer) => void
}) {
const { answer, contract, colorIndex } = props
const { answer, contract, colorIndex, onAnswerCommentClick } = props
const { username, avatarUrl, text } = answer
const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
const probPercent = formatPercent(prob)
const [open, setOpen] = useState(false)
const color =
colorIndex != undefined ? CATEGORY_COLORS[colorIndex] : '#B1B1C7'
colorIndex != undefined && colorIndex < CHOICE_ANSWER_COLORS.length
? CHOICE_ANSWER_COLORS[colorIndex] + '55' // semi-transparent
: '#B1B1C755'
const colorWidth = 100 * Math.max(prob, 0.01)
return (
<Col className="my-1 px-2">
@ -206,9 +213,12 @@ function OpenAnswer(props: {
<Col
className={clsx(
'bg-greyscale-1 relative w-full rounded-lg transition-all',
'relative w-full rounded-lg transition-all',
tradingAllowed(contract) ? 'text-greyscale-7' : 'text-greyscale-5'
)}
style={{
background: `linear-gradient(to right, ${color} ${colorWidth}%, #FBFBFF ${colorWidth}%)`,
}}
>
<Row className="z-20 -mb-1 justify-between gap-2 py-2 px-3">
<Row>
@ -217,10 +227,7 @@ function OpenAnswer(props: {
username={username}
avatarUrl={avatarUrl}
/>
<Linkify
className="text-md cursor-pointer whitespace-pre-line"
text={text}
/>
<Linkify className="text-md whitespace-pre-line" text={text} />
</Row>
<Row className="gap-2">
<div className="my-auto text-xl">{probPercent}</div>
@ -234,13 +241,16 @@ function OpenAnswer(props: {
BUY
</Button>
)}
{
<button
className="p-1"
onClick={() => onAnswerCommentClick(answer)}
>
<ChatIcon className="text-greyscale-4 hover:text-greyscale-6 h-5 w-5 transition-colors" />
</button>
}
</Row>
</Row>
<hr
color={color}
className="absolute z-0 h-full w-full rounded-l-lg border-none opacity-30"
style={{ width: `${100 * Math.max(prob, 0.01)}%` }}
/>
</Col>
</Col>
)

12
web/components/answers/create-answer-panel.tsx
View File

@ -197,17 +197,15 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
</>
)}
{user ? (
<button
className={clsx(
'btn mt-2',
canSubmit ? 'btn-outline' : 'btn-disabled',
isSubmitting && 'loading'
)}
<Button
color="green"
size="lg"
loading={isSubmitting}
disabled={!canSubmit}
onClick={withTracking(submitAnswer, 'submit answer')}
>
Submit
</button>
</Button>
) : (
text && (
<Button

14
web/components/award-bounty-button.tsx
View File

@ -5,7 +5,6 @@ import { awardCommentBounty } from 'web/lib/firebase/api'
import { track } from 'web/lib/service/analytics'
import { Row } from './layout/row'
import { Contract } from 'common/contract'
import { TextButton } from 'web/components/text-button'
import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
import { formatMoney } from 'common/util/format'
@ -37,10 +36,17 @@ export function AwardBountyButton(prop: {
const canUp = me && me.id !== comment.userId && contract.creatorId === me.id
if (!canUp) return <div />
return (
<Row className={clsx('-ml-2 items-center gap-0.5', !canUp ? '-ml-6' : '')}>
<TextButton className={'font-bold'} onClick={submit}>
<Row
className={clsx('my-auto items-center gap-0.5', !canUp ? '-ml-6' : '')}
>
<button
className={
'rounded-full border border-indigo-400 bg-indigo-50 py-0.5 px-2 text-xs text-indigo-400 transition-colors hover:bg-indigo-400 hover:text-white'
}
onClick={submit}
>
Award {formatMoney(COMMENT_BOUNTY_AMOUNT)}
</TextButton>
</button>
</Row>
)
}

5
web/components/bet-inline.tsx
View File

@ -92,10 +92,7 @@ export function BetInline(props: {
/>
<BuyAmountInput
className="-mb-4"
inputClassName={clsx(
'input-sm w-20 !text-base',
error && 'input-error'
)}
inputClassName="w-20 !text-base"
amount={amount}
onChange={setAmount}
error="" // handle error ourselves

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

@ -47,6 +47,7 @@ import { Modal } from './layout/modal'
import { Title } from './title'
import toast from 'react-hot-toast'
import { CheckIcon } from '@heroicons/react/solid'
import { Button } from './button'
export function BetPanel(props: {
contract: CPMMBinaryContract | PseudoNumericContract
@ -270,7 +271,7 @@ export function BuyPanel(props: {
})
}
const betDisabled = isSubmitting || !betAmount || error
const betDisabled = isSubmitting || !betAmount || !!error
const { newPool, newP, newBet } = getBinaryCpmmBetInfo(
outcome ?? 'YES',
@ -469,7 +470,6 @@ function LimitOrderPanel(props: {
const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
const [lowLimitProb, setLowLimitProb] = useState<number | undefined>()
const [highLimitProb, setHighLimitProb] = useState<number | undefined>()
const betChoice = 'YES'
const [error, setError] = useState<string | undefined>()
const [isSubmitting, setIsSubmitting] = useState(false)
@ -493,7 +493,7 @@ function LimitOrderPanel(props: {
!betAmount ||
rangeError ||
outOfRangeError ||
error ||
!!error ||
(!hasYesLimitBet && !hasNoLimitBet)
const yesLimitProb =
@ -631,9 +631,9 @@ function LimitOrderPanel(props: {
return (
<Col className={hidden ? 'hidden' : ''}>
<Row className="mt-1 items-center gap-4">
<Row className="mt-1 mb-4 items-center gap-4">
<Col className="gap-2">
<div className="relative ml-1 text-sm text-gray-500">
<div className="text-sm text-gray-500">
Buy {isPseudoNumeric ? <HigherLabel /> : <YesLabel />} up to
</div>
<ProbabilityOrNumericInput
@ -641,10 +641,11 @@ function LimitOrderPanel(props: {
prob={lowLimitProb}
setProb={setLowLimitProb}
isSubmitting={isSubmitting}
placeholder="10"
/>
</Col>
<Col className="gap-2">
<div className="ml-1 text-sm text-gray-500">
<div className="text-sm text-gray-500">
Buy {isPseudoNumeric ? <LowerLabel /> : <NoLabel />} down to
</div>
<ProbabilityOrNumericInput
@ -652,6 +653,7 @@ function LimitOrderPanel(props: {
prob={highLimitProb}
setProb={setHighLimitProb}
isSubmitting={isSubmitting}
placeholder="90"
/>
</Col>
</Row>
@ -783,22 +785,18 @@ function LimitOrderPanel(props: {
{(hasYesLimitBet || hasNoLimitBet) && <Spacer h={8} />}
{user && (
<button
className={clsx(
'btn flex-1',
betDisabled
? 'btn-disabled'
: betChoice === 'YES'
? 'btn-primary'
: 'border-none bg-red-400 hover:bg-red-500',
isSubmitting ? 'loading' : ''
)}
onClick={betDisabled ? undefined : submitBet}
<Button
size="xl"
disabled={betDisabled}
color={'indigo'}
loading={isSubmitting}
className="flex-1"
onClick={submitBet}
>
{isSubmitting
? 'Submitting...'
: `Submit order${hasTwoBets ? 's' : ''}`}
</button>
</Button>
)}
</Col>
)
@ -984,11 +982,11 @@ export function SellPanel(props: {
<Col className="mt-3 w-full gap-3 text-sm">
<Row className="items-center justify-between gap-2 text-gray-500">
Sale amount
<span className="text-neutral">{formatMoney(saleValue)}</span>
<span className="text-gray-700">{formatMoney(saleValue)}</span>
</Row>
<Row className="items-center justify-between gap-2 text-gray-500">
Profit
<span className="text-neutral">{formatMoney(profit)}</span>
<span className="text-gray-700">{formatMoney(profit)}</span>
</Row>
<Row className="items-center justify-between">
<div className="text-gray-500">
@ -1004,11 +1002,11 @@ export function SellPanel(props: {
<>
<Row className="mt-6 items-center justify-between gap-2 text-gray-500">
Loan payment
<span className="text-neutral">{formatMoney(-loanPaid)}</span>
<span className="text-gray-700">{formatMoney(-loanPaid)}</span>
</Row>
<Row className="items-center justify-between gap-2 text-gray-500">
Net proceeds
<span className="text-neutral">{formatMoney(netProceeds)}</span>
<span className="text-gray-700">{formatMoney(netProceeds)}</span>
</Row>
</>
)}

20
web/components/bets-list.tsx
View File

@ -52,6 +52,8 @@ import {
} from 'web/hooks/use-persistent-state'
import { safeLocalStorage } from 'web/lib/util/local'
import { ExclamationIcon } from '@heroicons/react/outline'
import { Select } from './select'
import { Table } from './table'
type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all'
@ -200,21 +202,19 @@ export function BetsList(props: { user: User }) {
</Row>
<Row className="gap-2">
<select
className="border-greyscale-4 self-start overflow-hidden rounded border px-2 py-2 text-sm"
<Select
value={filter}
onChange={(e) => setFilter(e.target.value as BetFilter)}
>
<option value="open">Open</option>
<option value="open">Active</option>
<option value="limit_bet">Limit orders</option>
<option value="sold">Sold</option>
<option value="closed">Closed</option>
<option value="resolved">Resolved</option>
<option value="all">All</option>
</select>
</Select>
<select
className="border-greyscale-4 self-start overflow-hidden rounded px-2 py-2 text-sm"
<Select
value={sort}
onChange={(e) => setSort(e.target.value as BetSort)}
>
@ -222,7 +222,7 @@ export function BetsList(props: { user: User }) {
<option value="value">Value</option>
<option value="profit">Profit</option>
<option value="closeTime">Close date</option>
</select>
</Select>
</Row>
</Col>
@ -451,7 +451,7 @@ export function ContractBetsTable(props: {
</>
)}
<table className="table-zebra table-compact table w-full text-gray-500">
<Table>
<thead>
<tr className="p-2">
<th></th>
@ -480,7 +480,7 @@ export function ContractBetsTable(props: {
/>
))}
</tbody>
</table>
</Table>
</div>
)
}
@ -551,7 +551,7 @@ function BetRow(props: {
return (
<tr>
<td className="text-neutral">
<td className="text-gray-700">
{isYourBet &&
!isCPMM &&
!isResolved &&

47
web/components/button.tsx
View File

@ -13,7 +13,6 @@ export type ColorType =
| 'gray-outline'
| 'gradient'
| 'gray-white'
| 'highlight-blue'
const sizeClasses = {
'2xs': 'px-2 py-1 text-xs',
@ -27,7 +26,7 @@ const sizeClasses = {
export function buttonClass(size: SizeType, color: ColorType | 'override') {
return clsx(
'font-md inline-flex items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
'font-md inline-flex items-center justify-center rounded-md ring-inset shadow-sm transition-colors disabled:cursor-not-allowed',
sizeClasses[size],
color === 'green' &&
'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
@ -42,13 +41,11 @@ export function buttonClass(size: SizeType, color: ColorType | 'override') {
color === 'gray' &&
'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
color === 'gray-outline' &&
'border-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 border-2 hover:text-white disabled:opacity-50',
'ring-2 ring-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 hover:text-white disabled:opacity-50',
color === 'gradient' &&
'disabled:bg-greyscale-2 border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
'disabled:bg-greyscale-2 bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
color === 'gray-white' &&
'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
color === 'highlight-blue' &&
'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
'text-greyscale-6 hover:bg-greyscale-2 shadow-none disabled:opacity-50'
)
}
@ -85,3 +82,39 @@ export function Button(props: {
</button>
)
}
export function IconButton(props: {
className?: string
onClick?: MouseEventHandler<any> | undefined
children?: ReactNode
size?: SizeType
type?: 'button' | 'reset' | 'submit'
disabled?: boolean
loading?: boolean
}) {
const {
children,
className,
onClick,
size = 'md',
type = 'button',
disabled = false,
loading,
} = props
return (
<button
type={type}
className={clsx(
'inline-flex items-center justify-center transition-colors disabled:cursor-not-allowed',
sizeClasses[size],
'disabled:text-greyscale-2 text-greyscale-6 hover:text-indigo-600',
className
)}
disabled={disabled || loading}
onClick={onClick}
>
{children}
</button>
)
}

2
web/components/challenges/create-challenge-modal.tsx
View File

@ -171,7 +171,7 @@ function CreateChallengeForm(props: {
<div>You'll bet:</div>
<Row
className={
'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
'w-full max-w-xs items-center justify-between gap-4 pr-3'
}
>
<AmountInput

148
web/components/charts/contract/choice.tsx
View File

@ -1,5 +1,5 @@
import { useMemo } from 'react'
import { last, sum, sortBy, groupBy } from 'lodash'
import { last, range, sum, sortBy, groupBy } from 'lodash'
import { scaleTime, scaleLinear } from 'd3-scale'
import { curveStepAfter } from 'd3-shape'
@ -19,83 +19,36 @@ import { MultiPoint, MultiValueHistoryChart } from '../generic-charts'
import { Row } from 'web/components/layout/row'
import { Avatar } from 'web/components/avatar'
export const CATEGORY_COLORS = [
'#7eb0d5',
'#fd7f6f',
'#b2e061',
'#bd7ebe',
'#ffb55a',
'#ffee65',
'#beb9db',
'#fdcce5',
'#8bd3c7',
'#bddfb7',
'#e2e3f3',
'#fafafa',
'#9fcdeb',
'#d3d3d3',
'#b1a296',
'#e1bdb6',
'#f2dbc0',
'#fae5d3',
'#c5e0ec',
'#e0f0ff',
'#ffddcd',
'#fbd5e2',
'#f2e7e5',
'#ffe7ba',
'#eed9c4',
'#ea9999',
'#f9cb9c',
'#ffe599',
'#b6d7a8',
'#a2c4c9',
'#9fc5e8',
'#b4a7d6',
'#d5a6bd',
'#e06666',
'#f6b26b',
'#ffd966',
'#93c47d',
'#76a5af',
'#6fa8dc',
'#8e7cc3',
'#c27ba0',
'#cc0000',
'#e69138',
'#f1c232',
'#6aa84f',
'#45818e',
'#3d85c6',
'#674ea7',
'#a64d79',
'#990000',
'#b45f06',
'#bf9000',
type ChoiceContract = FreeResponseContract | MultipleChoiceContract
export const CHOICE_ANSWER_COLORS = [
'#97C1EB',
'#F39F83',
'#F9EBA5',
'#FFC7D2',
'#C7ECFF',
'#8CDEC7',
'#DBE96F',
]
export const CHOICE_OTHER_COLOR = '#CCC'
export const CHOICE_ALL_COLORS = [...CHOICE_ANSWER_COLORS, CHOICE_OTHER_COLOR]
const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
const MARGIN_X = MARGIN.left + MARGIN.right
const MARGIN_Y = MARGIN.top + MARGIN.bottom
const getTrackedAnswers = (
contract: FreeResponseContract | MultipleChoiceContract,
topN: number
) => {
const { answers, outcomeType, totalBets } = contract
const validAnswers = answers.filter((answer) => {
return (
(answer.id !== '0' || outcomeType === 'MULTIPLE_CHOICE') &&
totalBets[answer.id] > 0.000000001
)
})
const getAnswers = (contract: ChoiceContract) => {
const { answers, outcomeType } = contract
const validAnswers = answers.filter(
(answer) => answer.id !== '0' || outcomeType === 'MULTIPLE_CHOICE'
)
return sortBy(
validAnswers,
(answer) => -1 * getOutcomeProbability(contract, answer.id)
).slice(0, topN)
)
}
const getBetPoints = (answers: Answer[], bets: Bet[]) => {
const getBetPoints = (answers: Answer[], bets: Bet[], topN?: number) => {
const sortedBets = sortBy(bets, (b) => b.createdTime)
const betsByOutcome = groupBy(sortedBets, (bet) => bet.outcome)
const sharesByOutcome = Object.fromEntries(
@ -109,11 +62,14 @@ const getBetPoints = (answers: Answer[], bets: Bet[]) => {
const sharesSquared = sum(
Object.values(sharesByOutcome).map((shares) => shares ** 2)
)
points.push({
x: new Date(bet.createdTime),
y: answers.map((a) => sharesByOutcome[a.id] ** 2 / sharesSquared),
obj: bet,
})
const probs = answers.map((a) => sharesByOutcome[a.id] ** 2 / sharesSquared)
if (topN != null && answers.length > topN) {
const y = [...probs.slice(0, topN), sum(probs.slice(topN))]
points.push({ x: new Date(bet.createdTime), y, obj: bet })
} else {
points.push({ x: new Date(bet.createdTime), y: probs, obj: bet })
}
}
return points
}
@ -141,17 +97,12 @@ const Legend = (props: { className?: string; items: LegendItem[] }) => {
)
}
export function useChartAnswers(
contract: FreeResponseContract | MultipleChoiceContract
) {
return useMemo(
() => getTrackedAnswers(contract, CATEGORY_COLORS.length),
[contract]
)
export function useChartAnswers(contract: ChoiceContract) {
return useMemo(() => getAnswers(contract), [contract])
}
export const ChoiceContractChart = (props: {
contract: FreeResponseContract | MultipleChoiceContract
contract: ChoiceContract
bets: Bet[]
width: number
height: number
@ -160,18 +111,33 @@ export const ChoiceContractChart = (props: {
const { contract, bets, width, height, onMouseOver } = props
const [start, end] = getDateRange(contract)
const answers = useChartAnswers(contract)
const betPoints = useMemo(() => getBetPoints(answers, bets), [answers, bets])
const data = useMemo(
() => [
{ x: new Date(start), y: answers.map((_) => 0) },
const topN = Math.min(CHOICE_ANSWER_COLORS.length, answers.length)
const betPoints = useMemo(
() => getBetPoints(answers, bets, topN),
[answers, bets, topN]
)
const endProbs = useMemo(
() => answers.map((a) => getOutcomeProbability(contract, a.id)),
[answers, contract]
)
const data = useMemo(() => {
const yCount = answers.length > topN ? topN + 1 : topN
const startY = range(0, yCount).map((_) => 0)
const endY =
answers.length > topN
? [...endProbs.slice(0, topN), sum(endProbs.slice(topN))]
: endProbs
return [
{ x: new Date(start), y: startY },
...betPoints,
{
x: new Date(end ?? Date.now() + DAY_MS),
y: answers.map((a) => getOutcomeProbability(contract, a.id)),
y: endY,
},
],
[answers, contract, betPoints, start, end]
)
]
}, [answers.length, topN, betPoints, endProbs, start, end])
const rightmostDate = getRightmostVisibleDate(
end,
last(betPoints)?.x?.getTime(),
@ -188,8 +154,8 @@ export const ChoiceContractChart = (props: {
const d = xScale.invert(x)
const legendItems = sortBy(
data.y.map((p, i) => ({
color: CATEGORY_COLORS[i],
label: answers[i].text,
color: CHOICE_ALL_COLORS[i],
label: i === CHOICE_ANSWER_COLORS.length ? 'Other' : answers[i].text,
value: formatPct(p),
p,
})),
@ -221,7 +187,7 @@ export const ChoiceContractChart = (props: {
yScale={yScale}
yKind="percent"
data={data}
colors={CATEGORY_COLORS}
colors={CHOICE_ALL_COLORS}
curve={curveStepAfter}
onMouseOver={onMouseOver}
Tooltip={ChoiceTooltip}

43
web/components/comment-input.tsx
View File

@ -1,12 +1,17 @@
import { PaperAirplaneIcon } from '@heroicons/react/solid'
import { PaperAirplaneIcon, XCircleIcon } from '@heroicons/react/solid'
import { Editor } from '@tiptap/react'
import clsx from 'clsx'
import { Answer } from 'common/answer'
import { AnyContractType, Contract } from 'common/contract'
import { User } from 'common/user'
import { useEffect, useState } from 'react'
import { useUser } from 'web/hooks/use-user'
import { MAX_COMMENT_LENGTH } from 'web/lib/firebase/comments'
import Curve from 'web/public/custom-components/curve'
import { Avatar } from './avatar'
import { TextEditor, useTextEditor } from './editor'
import { CommentsAnswer } from './feed/feed-answer-comment-group'
import { ContractCommentInput } from './feed/feed-comments'
import { Row } from './layout/row'
import { LoadingIndicator } from './loading-indicator'
@ -72,6 +77,40 @@ export function CommentInput(props: {
</Row>
)
}
export function AnswerCommentInput(props: {
contract: Contract<AnyContractType>
answerResponse: Answer
onCancelAnswerResponse?: () => void
}) {
const { contract, answerResponse, onCancelAnswerResponse } = props
const replyTo = {
id: answerResponse.id,
username: answerResponse.username,
}
return (
<>
<CommentsAnswer answer={answerResponse} contract={contract} />
<Row>
<div className="ml-1">
<Curve size={28} strokeWidth={1} color="#D8D8EB" />
</div>
<div className="relative w-full pt-1">
<ContractCommentInput
contract={contract}
parentAnswerOutcome={answerResponse.number.toString()}
replyTo={replyTo}
onSubmitComment={onCancelAnswerResponse}
/>
<button onClick={onCancelAnswerResponse}>
<div className="absolute -top-1 -right-2 h-4 w-4 rounded-full bg-white" />
<XCircleIcon className="text-greyscale-5 hover:text-greyscale-6 absolute -top-1 -right-2 h-5 w-5" />
</button>
</div>
</Row>
</>
)
}
export function CommentInputTextArea(props: {
user: User | undefined | null
@ -123,7 +162,7 @@ export function CommentInputTextArea(props: {
attrs: { label: replyTo.username, id: replyTo.id },
})
.insertContent(' ')
.focus()
.focus(undefined, { scrollIntoView: false })
.run()
}
// eslint-disable-next-line react-hooks/exhaustive-deps

29
web/components/comments/reply-toggle.tsx Normal file
View File

@ -0,0 +1,29 @@
import clsx from 'clsx'
import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
import { Row } from '../layout/row'
export function ReplyToggle(props: {
seeReplies: boolean
numComments: number
onClick: () => void
}) {
const { seeReplies, numComments, onClick } = props
return (
<button
className={clsx(
'text-left text-sm text-indigo-600',
numComments === 0 ? 'hidden' : ''
)}
onClick={onClick}
>
<Row className="items-center gap-1">
<div>
{numComments} {numComments === 1 ? 'Reply' : 'Replies'}
</div>
<TriangleDownFillIcon
className={clsx('h-2 w-2', seeReplies ? 'rotate-180' : '')}
/>
</Row>
</button>
)
}

13
web/components/contract-search.tsx
View File

@ -42,6 +42,7 @@ import { Button } from './button'
import { Modal } from './layout/modal'
import { Title } from './title'
import { Input } from './input'
import { Select } from './select'
export const SORTS = [
{ label: 'Newest', value: 'newest' },
@ -437,7 +438,7 @@ function ContractSearchControls(props: {
}
return (
<Col className={clsx('bg-base-200 top-0 z-20 gap-3 pb-3', className)}>
<Col className={clsx('bg-greyscale-1 top-0 z-20 gap-3 pb-3', className)}>
<Row className="gap-1 sm:gap-2">
<Input
type="text"
@ -543,8 +544,7 @@ export function SearchFilters(props: {
return (
<div className={className}>
<select
className="select select-bordered"
<Select
value={filter}
onChange={(e) => selectFilter(e.target.value as filter)}
>
@ -552,10 +552,9 @@ export function SearchFilters(props: {
<option value="closed">Closed</option>
<option value="resolved">Resolved</option>
<option value="all">All</option>
</select>
</Select>
{!hideOrderSelector && (
<select
className="select select-bordered"
<Select
value={sort}
onChange={(e) => selectSort(e.target.value as Sort)}
>
@ -564,7 +563,7 @@ export function SearchFilters(props: {
{option.label}
</option>
))}
</select>
</Select>
)}
</div>
)

3
web/components/contract/comment-bounty-dialog.tsx
View File

@ -4,7 +4,6 @@ import { useState } from 'react'
import { addCommentBounty } from 'web/lib/firebase/api'
import { track } from 'web/lib/service/analytics'
import { Row } from 'web/components/layout/row'
import clsx from 'clsx'
import { formatMoney } from 'common/util/format'
import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
import { Button } from 'web/components/button'
@ -64,7 +63,7 @@ export function CommentBountyDialog(props: {
<Row className={'items-center gap-2'}>
<Button
className={clsx('ml-2', isLoading && 'btn-disabled')}
className="ml-2"
onClick={submit}
disabled={isLoading}
color={'blue'}

42
web/components/contract/contract-card.tsx
View File

@ -3,8 +3,8 @@ import Link from 'next/link'
import { Row } from '../layout/row'
import {
formatLargeNumber,
formatMoney,
formatPercent,
formatWithCommas,
} from 'common/util/format'
import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
import { Col } from '../layout/col'
@ -39,9 +39,10 @@ import { trackCallback } from 'web/lib/service/analytics'
import { getMappedValue } from 'common/pseudo-numeric'
import { Tooltip } from '../tooltip'
import { SiteLink } from '../site-link'
import { ProbChange } from './prob-change-table'
import { ProbOrNumericChange } from './prob-change-table'
import { Card } from '../card'
import { ProfitBadgeMana } from '../profit-badge'
import { floatingEqual } from 'common/util/math'
import { ENV_CONFIG } from 'common/envs/constants'
export function ContractCard(props: {
contract: Contract
@ -399,13 +400,24 @@ export function ContractCardProbChange(props: {
className?: string
}) {
const { noLinkAvatar, showPosition, className } = props
const yesOutcomeLabel =
props.contract.outcomeType === 'PSEUDO_NUMERIC' ? 'HIGHER' : 'YES'
const noOutcomeLabel =
props.contract.outcomeType === 'PSEUDO_NUMERIC' ? 'LOWER' : 'NO'
const contract = useContractWithPreload(props.contract) as CPMMBinaryContract
const user = useUser()
const metrics = useUserContractMetrics(user?.id, contract.id)
const dayMetrics = metrics && metrics.from && metrics.from.day
const outcome =
metrics && metrics.hasShares && metrics.totalShares.YES ? 'YES' : 'NO'
const binaryOutcome =
metrics && floatingEqual(metrics.totalShares.NO ?? 0, 0) ? 'YES' : 'NO'
const displayedProfit = dayMetrics
? ENV_CONFIG.moneyMoniker +
(dayMetrics.profit > 0 ? '+' : '') +
dayMetrics.profit.toFixed(0)
: undefined
return (
<Card className={clsx(className, 'mb-4')}>
@ -421,27 +433,19 @@ export function ContractCardProbChange(props: {
>
<span className="line-clamp-3">{contract.question}</span>
</SiteLink>
<ProbChange className="py-2 pr-4" contract={contract} />
<ProbOrNumericChange className="py-2 pr-4" contract={contract} />
</Row>
{showPosition && metrics && (
{showPosition && metrics && metrics.hasShares && (
<Row
className={clsx(
'items-center justify-between gap-4 pl-6 pr-4 pb-2 text-sm'
)}
>
<Row className="gap-1 text-gray-700">
<div className="text-gray-500">Position</div>
{formatMoney(metrics.payout)} {outcome}
<Row className="gap-1 text-gray-400">
You: {formatWithCommas(metrics.totalShares[binaryOutcome])}{' '}
{binaryOutcome === 'YES' ? yesOutcomeLabel : noOutcomeLabel} shares
<span className="ml-1.5">{displayedProfit} today</span>
</Row>
{dayMetrics && (
<>
<Row className="items-center">
<div className="mr-1 text-gray-500">Daily profit</div>
<ProfitBadgeMana amount={dayMetrics.profit} gray />
</Row>
</>
)}
</Row>
)}
</Card>

4
web/components/contract/contract-description.tsx
View File

@ -45,13 +45,11 @@ function RichEditContract(props: { contract: Contract; isAdmin?: boolean }) {
const { contract, isAdmin } = props
const [editing, setEditing] = useState(false)
const [editingQ, setEditingQ] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const { editor, upload } = useTextEditor({
// key: `description ${contract.id}`,
max: MAX_DESCRIPTION_LENGTH,
defaultValue: contract.description,
disabled: isSubmitting,
})
async function saveDescription() {
@ -66,10 +64,8 @@ function RichEditContract(props: { contract: Contract; isAdmin?: boolean }) {
<Row className="gap-2">
<Button
onClick={async () => {
setIsSubmitting(true)
await saveDescription()
setEditing(false)
setIsSubmitting(false)
}}
>
Save

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

@ -34,6 +34,7 @@ import { ExtraContractActionsRow } from './extra-contract-actions-row'
import { GroupLink } from 'common/group'
import { Subtitle } from '../subtitle'
import { useIsMobile } from 'web/hooks/use-is-mobile'
import { useIsClient } from 'web/hooks/use-is-client'
import {
BountiedContractBadge,
BountiedContractSmallBadge,
@ -52,22 +53,23 @@ export function MiscDetails(props: {
const { volume, closeTime, isResolved, createdTime, resolutionTime } =
contract
const isClient = useIsClient()
const isNew = createdTime > Date.now() - DAY_MS && !isResolved
const groupToDisplay = getGroupLinkToDisplay(contract)
return (
<Row className="items-center gap-3 truncate text-sm text-gray-400">
{showTime === 'close-date' ? (
{isClient && showTime === 'close-date' ? (
<Row className="gap-0.5 whitespace-nowrap">
<ClockIcon className="h-5 w-5" />
{(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
{fromNow(closeTime || 0)}
</Row>
) : showTime === 'resolve-date' && resolutionTime !== undefined ? (
) : isClient && showTime === 'resolve-date' && resolutionTime ? (
<Row className="gap-0.5">
<ClockIcon className="h-5 w-5" />
{'Resolved '}
{fromNow(resolutionTime || 0)}
{fromNow(resolutionTime)}
</Row>
) : (contract?.featuredOnHomeRank ?? 0) > 0 ? (
<FeaturedContractBadge />
@ -390,6 +392,7 @@ function EditableCloseDate(props: {
}) {
const { closeTime, contract, isCreator, disabled } = props
const isClient = useIsClient()
const dayJsCloseTime = dayjs(closeTime)
const dayJsNow = dayjs()
@ -452,7 +455,7 @@ function EditableCloseDate(props: {
className="w-full shrink-0 sm:w-fit"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseDate(e.target.value)}
min={Date.now()}
min={isClient ? Date.now() : undefined}
value={closeDate}
/>
<Input
@ -479,14 +482,18 @@ function EditableCloseDate(props: {
</Col>
</Modal>
<DateTimeTooltip
text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
text={
isClient && closeTime <= Date.now()
? 'Trading ended:'
: 'Trading ends:'
}
time={closeTime}
>
<Row
className={clsx(!disabled && isCreator ? 'cursor-pointer' : '')}
onClick={() => !disabled && isCreator && setIsEditingCloseTime(true)}
>
{isSameDay ? (
{isSameDay && isClient ? (
<span className={'capitalize'}> {fromNow(closeTime)}</span>
) : isSameYear ? (
dayJsCloseTime.format('MMM D')

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

@ -19,11 +19,10 @@ import ShortToggle from '../widgets/short-toggle'
import { DuplicateContractButton } from '../duplicate-contract-button'
import { Row } from '../layout/row'
import { BETTORS, User } from 'common/user'
import { Button } from '../button'
import { IconButton } from '../button'
import { AddLiquidityButton } from './add-liquidity-button'
export const contractDetailsButtonClassName =
'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500'
import { Tooltip } from '../tooltip'
import { Table } from '../table'
export function ContractInfoDialog(props: {
contract: Contract
@ -84,171 +83,173 @@ export function ContractInfoDialog(props: {
return (
<>
<Button
size="sm"
color="gray-white"
className={clsx(contractDetailsButtonClassName, className)}
onClick={() => setOpen(true)}
>
<DotsHorizontalIcon
className={clsx('h-5 w-5 flex-shrink-0')}
aria-hidden="true"
/>
</Button>
<Tooltip text="Market details" placement="bottom" noTap noFade>
<IconButton
size="2xs"
className={clsx(className)}
onClick={() => setOpen(true)}
>
<DotsHorizontalIcon
className={clsx('h-5 w-5 flex-shrink-0')}
aria-hidden="true"
/>
</IconButton>
<Modal open={open} setOpen={setOpen}>
<Col className="gap-4 rounded bg-white p-6">
<Title className="!mt-0 !mb-0" text="This Market" />
<Modal open={open} setOpen={setOpen}>
<Col className="gap-4 rounded bg-white p-6">
<Title className="!mt-0 !mb-0" text="This Market" />
<table className="table-compact table-zebra table w-full text-gray-500">
<tbody>
<tr>
<td>Type</td>
<td>{typeDisplay}</td>
</tr>
<tr>
<td>Payout</td>
<td className="flex gap-1">
{mechanism === 'cpmm-1' ? (
<>
Fixed{' '}
<InfoTooltip text="Each YES share is worth M$1 if YES wins." />
</>
) : (
<>
Parimutuel{' '}
<InfoTooltip text="Each share is a fraction of the pool. " />
</>
)}
</td>
</tr>
<tr>
<td>Market created</td>
<td>{formatTime(createdTime)}</td>
</tr>
{closeTime && (
<Table>
<tbody>
<tr>
<td>Market close{closeTime > Date.now() ? 's' : 'd'}</td>
<td>{formatTime(closeTime)}</td>
<td>Type</td>
<td>{typeDisplay}</td>
</tr>
)}
{resolutionTime && (
<tr>
<td>Market resolved</td>
<td>{formatTime(resolutionTime)}</td>
</tr>
)}
<tr>
<td>
<span className="mr-1">Volume</span>
<InfoTooltip text="Total amount bought or sold" />
</td>
<td>{formatMoney(contract.volume)}</td>
</tr>
<tr>
<td>{capitalize(BETTORS)}</td>
<td>{uniqueBettorCount ?? '0'}</td>
</tr>
<tr>
<td>
<Row>
<span className="mr-1">Elasticity</span>
<InfoTooltip
text={
mechanism === 'cpmm-1'
? 'Probability change between a M$50 bet on YES and NO'
: 'Probability change from a M$100 bet'
}
/>
</Row>
</td>
<td>{formatPercent(elasticity)}</td>
</tr>
<tr>
<td>Liquidity subsidies</td>
<td>
{mechanism === 'cpmm-1'
? formatMoney(contract.totalLiquidity)
: formatMoney(100)}
</td>
</tr>
<tr>
<td>Pool</td>
<td>
{mechanism === 'cpmm-1' && outcomeType === 'BINARY'
? `${Math.round(pool.YES)} YES, ${Math.round(pool.NO)} NO`
: mechanism === 'cpmm-1' && outcomeType === 'PSEUDO_NUMERIC'
? `${Math.round(pool.YES)} HIGHER, ${Math.round(
pool.NO
)} LOWER`
: contractPool(contract)}
</td>
</tr>
{/* Show a path to Firebase if user is an admin, or we're on localhost */}
{(isAdmin || isDev) && (
<tr>
<td>[ADMIN] Firestore</td>
<td>
<SiteLink href={firestoreConsolePath(id)}>
Console link
</SiteLink>
<td>Payout</td>
<td className="flex gap-1">
{mechanism === 'cpmm-1' ? (
<>
Fixed{' '}
<InfoTooltip text="Each YES share is worth M$1 if YES wins." />
</>
) : (
<>
Parimutuel{' '}
<InfoTooltip text="Each share is a fraction of the pool. " />
</>
)}
</td>
</tr>
)}
{isAdmin && (
<tr>
<td>[ADMIN] Featured</td>
<td>
<ShortToggle
on={featured}
setOn={setFeatured}
onChange={onFeaturedToggle}
/>
</td>
</tr>
)}
{user && (
<tr>
<td>{isAdmin ? '[ADMIN]' : ''} Unlisted</td>
<td>
<ShortToggle
disabled={
isUnlisted
? !(isAdmin || (isCreator && wasUnlistedByCreator))
: !(isCreator || isAdmin)
}
on={contract.visibility === 'unlisted'}
setOn={(b) =>
updateContract(id, {
visibility: b ? 'unlisted' : 'public',
unlistedById: b ? user.id : '',
})
}
/>
</td>
</tr>
)}
</tbody>
</table>
<Row className="flex-wrap">
{mechanism === 'cpmm-1' && (
<AddLiquidityButton contract={contract} className="mr-2" />
)}
<DuplicateContractButton contract={contract} />
</Row>
</Col>
</Modal>
<tr>
<td>Market created</td>
<td>{formatTime(createdTime)}</td>
</tr>
{closeTime && (
<tr>
<td>Market close{closeTime > Date.now() ? 's' : 'd'}</td>
<td>{formatTime(closeTime)}</td>
</tr>
)}
{resolutionTime && (
<tr>
<td>Market resolved</td>
<td>{formatTime(resolutionTime)}</td>
</tr>
)}
<tr>
<td>
<span className="mr-1">Volume</span>
<InfoTooltip text="Total amount bought or sold" />
</td>
<td>{formatMoney(contract.volume)}</td>
</tr>
<tr>
<td>{capitalize(BETTORS)}</td>
<td>{uniqueBettorCount ?? '0'}</td>
</tr>
<tr>
<td>
<Row>
<span className="mr-1">Elasticity</span>
<InfoTooltip
text={
mechanism === 'cpmm-1'
? 'Probability change between a M$50 bet on YES and NO'
: 'Probability change from a M$100 bet'
}
/>
</Row>
</td>
<td>{formatPercent(elasticity)}</td>
</tr>
<tr>
<td>Liquidity subsidies</td>
<td>
{mechanism === 'cpmm-1'
? formatMoney(contract.totalLiquidity)
: formatMoney(100)}
</td>
</tr>
<tr>
<td>Pool</td>
<td>
{mechanism === 'cpmm-1' && outcomeType === 'BINARY'
? `${Math.round(pool.YES)} YES, ${Math.round(pool.NO)} NO`
: mechanism === 'cpmm-1' &&
outcomeType === 'PSEUDO_NUMERIC'
? `${Math.round(pool.YES)} HIGHER, ${Math.round(
pool.NO
)} LOWER`
: contractPool(contract)}
</td>
</tr>
{/* Show a path to Firebase if user is an admin, or we're on localhost */}
{(isAdmin || isDev) && (
<tr>
<td>[ADMIN] Firestore</td>
<td>
<SiteLink href={firestoreConsolePath(id)}>
Console link
</SiteLink>
</td>
</tr>
)}
{isAdmin && (
<tr>
<td>[ADMIN] Featured</td>
<td>
<ShortToggle
on={featured}
setOn={setFeatured}
onChange={onFeaturedToggle}
/>
</td>
</tr>
)}
{user && (
<tr>
<td>{isAdmin ? '[ADMIN]' : ''} Unlisted</td>
<td>
<ShortToggle
disabled={
isUnlisted
? !(isAdmin || (isCreator && wasUnlistedByCreator))
: !(isCreator || isAdmin)
}
on={contract.visibility === 'unlisted'}
setOn={(b) =>
updateContract(id, {
visibility: b ? 'unlisted' : 'public',
unlistedById: b ? user.id : '',
})
}
/>
</td>
</tr>
)}
</tbody>
</Table>
<Row className="flex-wrap">
{mechanism === 'cpmm-1' && (
<AddLiquidityButton contract={contract} className="mr-2" />
)}
<DuplicateContractButton contract={contract} />
</Row>
</Col>
</Modal>
</Tooltip>
</>
)
}

4
web/components/contract/contract-mention.tsx
View File

@ -6,17 +6,19 @@ import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
import { fromNow } from 'web/lib/util/time'
import { BinaryContractOutcomeLabel } from '../outcome-label'
import { getColor } from './quick-bet'
import { useIsClient } from 'web/hooks/use-is-client'
export function ContractMention(props: { contract: Contract }) {
const { contract } = props
const { outcomeType, resolution } = contract
const probTextColor = `text-${getColor(contract)}`
const isClient = useIsClient()
return (
<Link href={contractPath(contract)}>
<a
className="group inline whitespace-nowrap rounded-sm hover:bg-indigo-50 focus:bg-indigo-50"
title={tooltipLabel(contract)}
title={isClient ? tooltipLabel(contract) : undefined}
>
<span className="break-anywhere mr-0.5 whitespace-normal font-normal text-indigo-700">
{contract.question}

2
web/components/contract/contract-report-resolution.tsx
View File

@ -32,7 +32,7 @@ export function ContractReportResolution(props: { contract: Contract }) {
}
const flagClass = clsx(
'mx-2 flex flex-col items-center gap-1 w-6 h-6 rounded-md !bg-gray-100 px-2 py-1 hover:bg-gray-300',
'mx-2 flex flex-col items-center gap-1 w-6 h-6 rounded-md !bg-gray-100 px-1 py-2 hover:bg-gray-300',
userReported ? '!text-red-500' : '!text-gray-500'
)

169
web/components/contract/contract-tabs.tsx
View File

@ -1,9 +1,8 @@
import { memo, useState } from 'react'
import { getOutcomeProbability } from 'common/calculate'
import { Pagination } from 'web/components/pagination'
import { FeedBet } from '../feed/feed-bets'
import { FeedLiquidity } from '../feed/feed-liquidity'
import { FeedAnswerCommentGroup } from '../feed/feed-answer-comment-group'
import { CommentsAnswer } from '../feed/feed-answer-comment-group'
import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments'
import { groupBy, sortBy, sum } from 'lodash'
import { Bet } from 'common/bet'
@ -25,7 +24,6 @@ import {
import { buildArray } from 'common/util/array'
import { ContractComment } from 'common/comment'
import { Button } from 'web/components/button'
import { MINUTE_MS } from 'common/util/time'
import { useUser } from 'web/hooks/use-user'
import { Tooltip } from 'web/components/tooltip'
@ -36,14 +34,27 @@ import {
usePersistentState,
} from 'web/hooks/use-persistent-state'
import { safeLocalStorage } from 'web/lib/util/local'
import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
import Curve from 'web/public/custom-components/curve'
import { Answer } from 'common/answer'
import { AnswerCommentInput } from '../comment-input'
export function ContractTabs(props: {
contract: Contract
bets: Bet[]
userBets: Bet[]
comments: ContractComment[]
answerResponse?: Answer | undefined
onCancelAnswerResponse?: () => void
}) {
const { contract, bets, userBets, comments } = props
const {
contract,
bets,
userBets,
comments,
answerResponse,
onCancelAnswerResponse,
} = props
const yourTrades = (
<div>
@ -56,7 +67,14 @@ export function ContractTabs(props: {
const tabs = buildArray(
{
title: 'Comments',
content: <CommentsTabContent contract={contract} comments={comments} />,
content: (
<CommentsTabContent
contract={contract}
comments={comments}
answerResponse={answerResponse}
onCancelAnswerResponse={onCancelAnswerResponse}
/>
),
},
bets.length > 0 && {
title: capitalize(PAST_BETS),
@ -76,8 +94,10 @@ export function ContractTabs(props: {
const CommentsTabContent = memo(function CommentsTabContent(props: {
contract: Contract
comments: ContractComment[]
answerResponse?: Answer
onCancelAnswerResponse?: () => void
}) {
const { contract } = props
const { contract, answerResponse, onCancelAnswerResponse } = props
const tips = useTipTxns({ contractId: contract.id })
const comments = useComments(contract.id) ?? props.comments
const [sort, setSort] = usePersistentState<'Newest' | 'Best'>('Newest', {
@ -95,10 +115,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
// replied to answers/comments are NOT newest, otherwise newest first
const shouldBeNewestFirst = (c: ContractComment) =>
c.replyToCommentId == undefined &&
(contract.outcomeType === 'FREE_RESPONSE'
? c.betId === undefined && c.answerOutcome == undefined
: true)
c.replyToCommentId == undefined
// TODO: links to comments are broken because tips load after render and
// comments will reorganize themselves if there are tips/bounties awarded
@ -123,73 +140,85 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
const topLevelComments = commentsByParent['_'] ?? []
const sortRow = comments.length > 0 && (
<Row className="mb-4 items-center">
<Button
size={'xs'}
color={'gray-white'}
onClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
>
<Tooltip
text={
sort === 'Best'
? 'Highest tips + bounties first. Your new comments briefly appear to you first.'
: ''
}
>
Sort by: {sort}
</Tooltip>
</Button>
<Row className="mb-4 items-center justify-end gap-4">
<BountiedContractSmallBadge contract={contract} showAmount />
<Row className="items-center gap-1">
<div className="text-greyscale-4 text-sm">Sort by:</div>
<button
className="text-greyscale-6 w-20 text-sm"
onClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
>
<Tooltip
text={sort === 'Best' ? 'Highest tips + bounties first.' : ''}
>
<Row className="items-center gap-1">
{sort}
<TriangleDownFillIcon className=" h-2 w-2" />
</Row>
</Tooltip>
</button>
</Row>
</Row>
)
if (contract.outcomeType === 'FREE_RESPONSE') {
const sortedAnswers = sortBy(
contract.answers,
(a) => -getOutcomeProbability(contract, a.id)
)
const commentsByOutcome = groupBy(
sortedComments,
(c) => c.answerOutcome ?? c.betOutcome ?? '_'
)
const generalTopLevelComments = topLevelComments.filter(
(c) => c.answerOutcome === undefined && c.betId === undefined
)
return (
<>
<ContractCommentInput className="mb-5" contract={contract} />
{sortRow}
{sortedAnswers.map((answer) => (
<div key={answer.id} className="relative pb-4">
<span
className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
aria-hidden="true"
/>
<FeedAnswerCommentGroup
contract={contract}
answer={answer}
answerComments={commentsByOutcome[answer.number.toString()] ?? []}
tips={tips}
/>
</div>
))}
<Col className="mt-8 flex w-full">
<div className="text-md mt-8 mb-2 text-left">General Comments</div>
<div className="mb-4 w-full border-b border-gray-200" />
<ContractCommentInput className="mb-5" contract={contract} />
{sortRow}
{generalTopLevelComments.map((comment) => (
<FeedCommentThread
key={comment.id}
contract={contract}
parentComment={comment}
threadComments={commentsByParent[comment.id] ?? []}
tips={tips}
/>
))}
</Col>
{answerResponse && (
<AnswerCommentInput
contract={contract}
answerResponse={answerResponse}
onCancelAnswerResponse={onCancelAnswerResponse}
/>
)}
{topLevelComments.map((parent) => {
if (parent.answerOutcome === undefined) {
return (
<FeedCommentThread
key={parent.id}
contract={contract}
parentComment={parent}
threadComments={sortBy(
commentsByParent[parent.id] ?? [],
(c) => c.createdTime
)}
tips={tips}
/>
)
}
const answer = contract.answers.find(
(answer) => answer.id === parent.answerOutcome
)
if (answer === undefined) {
console.error('Could not find answer that matches ID')
return <></>
}
return (
<>
<Row className="gap-2">
<CommentsAnswer answer={answer} contract={contract} />
</Row>
<Row>
<div className="ml-1">
<Curve size={28} strokeWidth={1} color="#D8D8EB" />
</div>
<div className="w-full pt-1">
<FeedCommentThread
key={parent.id}
contract={contract}
parentComment={parent}
threadComments={sortBy(
commentsByParent[parent.id] ?? [],
(c) => c.createdTime
)}
tips={tips}
/>
</div>
</Row>
</>
)
})}
</>
)
} else {

11
web/components/contract/extra-contract-actions-row.tsx
View File

@ -2,7 +2,7 @@ import { ShareIcon } from '@heroicons/react/outline'
import { Row } from '../layout/row'
import { Contract } from 'web/lib/firebase/contracts'
import React, { useState } from 'react'
import { Button } from 'web/components/button'
import { IconButton } from 'web/components/button'
import { useUser } from 'web/hooks/use-user'
import { ShareModal } from './share-modal'
import { FollowMarketButton } from 'web/components/follow-market-button'
@ -16,15 +16,14 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
const [isShareOpen, setShareOpen] = useState(false)
return (
<Row>
<Row className="gap-1">
<FollowMarketButton contract={contract} user={user} />
<LikeMarketButton contract={contract} user={user} />
<Tooltip text="Share" placement="bottom" noTap noFade>
<Button
size="sm"
color="gray-white"
<IconButton
size="2xs"
className={'flex'}
onClick={() => setShareOpen(true)}
>
@ -35,7 +34,7 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
contract={contract}
user={user}
/>
</Button>
</IconButton>
</Tooltip>
<ContractInfoDialog contract={contract} user={user} />

18
web/components/contract/prob-change-table.tsx
View File

@ -7,12 +7,14 @@ import { formatPercent } from 'common/util/format'
import { Col } from '../layout/col'
import { LoadingIndicator } from '../loading-indicator'
import { ContractCardProbChange } from './contract-card'
import { formatNumericProbability } from 'common/pseudo-numeric'
export function ProfitChangeTable(props: {
contracts: CPMMBinaryContract[]
metrics: ContractMetrics[]
maxRows?: number
}) {
const { contracts, metrics } = props
const { contracts, metrics, maxRows } = props
const contractProfit = metrics.map(
(m) => [m.contractId, m.from?.day.profit ?? 0] as const
@ -26,7 +28,7 @@ export function ProfitChangeTable(props: {
positiveProfit.map(([contractId]) =>
contracts.find((c) => c.id === contractId)
)
)
).slice(0, maxRows)
const negativeProfit = sortBy(
contractProfit.filter(([, profit]) => profit < 0),
@ -36,7 +38,7 @@ export function ProfitChangeTable(props: {
negativeProfit.map(([contractId]) =>
contracts.find((c) => c.id === contractId)
)
)
).slice(0, maxRows)
if (positive.length === 0 && negative.length === 0)
return <div className="px-4 text-gray-500">None</div>
@ -118,7 +120,7 @@ export function ProbChangeTable(props: {
)
}
export function ProbChange(props: {
export function ProbOrNumericChange(props: {
contract: CPMMContract
className?: string
}) {
@ -127,13 +129,17 @@ export function ProbChange(props: {
prob,
probChanges: { day: change },
} = contract
const number =
contract.outcomeType === 'PSEUDO_NUMERIC'
? formatNumericProbability(prob, contract)
: null
const color = change >= 0 ? 'text-green-500' : 'text-red-500'
const color = change >= 0 ? 'text-teal-500' : 'text-red-400'
return (
<Col className={clsx('flex flex-col items-end', className)}>
<div className="mb-0.5 mr-0.5 text-2xl">
{formatPercent(Math.round(100 * prob) / 100)}
{number ? number : formatPercent(Math.round(100 * prob) / 100)}
</div>
<div className={clsx('text-base', color)}>
{(change > 0 ? '+' : '') + (change * 100).toFixed(0) + '%'}

8
web/components/contract/quick-bet.tsx
View File

@ -166,14 +166,14 @@ export function QuickBet(props: {
<TriangleFillIcon
className={clsx(
'mx-auto h-5 w-5',
upHover ? 'text-green-500' : 'text-gray-400'
upHover ? 'text-teal-500' : 'text-gray-400'
)}
/>
) : (
<TriangleFillIcon
className={clsx(
'mx-auto h-5 w-5',
upHover ? 'text-green-500' : 'text-gray-200'
upHover ? 'text-teal-500' : 'text-gray-200'
)}
/>
)}
@ -201,14 +201,14 @@ export function QuickBet(props: {
<TriangleDownFillIcon
className={clsx(
'mx-auto h-5 w-5',
downHover ? 'text-red-500' : 'text-gray-400'
downHover ? 'text-red-400' : 'text-gray-400'
)}
/>
) : (
<TriangleDownFillIcon
className={clsx(
'mx-auto h-5 w-5',
downHover ? 'text-red-500' : 'text-gray-200'
downHover ? 'text-red-400' : 'text-gray-200'
)}
/>
)}

66
web/components/contract/tip-button.tsx
View File

@ -1,10 +1,9 @@
import clsx from 'clsx'
import { HeartIcon } from '@heroicons/react/outline'
import { Button } from 'web/components/button'
import { formatMoney, shortFormatNumber } from 'common/util/format'
import { Col } from 'web/components/layout/col'
import { Tooltip } from '../tooltip'
import TipJar from 'web/public/custom-components/tipJar'
import { useState } from 'react'
export function TipButton(props: {
tipAmount: number
@ -14,11 +13,12 @@ export function TipButton(props: {
isCompact?: boolean
disabled?: boolean
}) {
const { tipAmount, totalTipped, userTipped, isCompact, onClick, disabled } =
props
const { tipAmount, totalTipped, userTipped, onClick, disabled } = props
const tipDisplay = shortFormatNumber(Math.ceil(totalTipped / 10))
const [hover, setHover] = useState(false)
return (
<Tooltip
text={
@ -30,39 +30,39 @@ export function TipButton(props: {
noTap
noFade
>
<Button
size={'sm'}
className={clsx(
'max-w-xs self-center',
isCompact && 'px-0 py-0',
disabled && 'hover:bg-inherit'
)}
color={'gray-white'}
<button
onClick={onClick}
disabled={disabled}
className={clsx(
'px-2 py-1 text-xs', //2xs button
'text-greyscale-6 transition-transform hover:text-indigo-600 disabled:cursor-not-allowed',
!disabled ? 'hover:rotate-12' : ''
)}
onMouseOver={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<Col className={'relative items-center sm:flex-row'}>
<HeartIcon
className={clsx(
'h-5 w-5 sm:h-6 sm:w-6',
totalTipped > 0 ? 'mr-2' : '',
userTipped ? 'fill-green-700 text-green-700' : ''
)}
<Col className={clsx('relative', disabled ? 'opacity-30' : '')}>
<TipJar
size={18}
color={userTipped || (hover && !disabled) ? '#4f46e5' : '#66667C'}
/>
{totalTipped > 0 && (
<div
className={clsx(
'bg-greyscale-5 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1',
tipDisplay.length > 2
? 'text-[0.4rem] sm:text-[0.5rem]'
: 'sm:text-2xs text-[0.5rem]'
)}
>
{tipDisplay}
</div>
)}
<div
className={clsx(
userTipped && 'text-indigo-600',
' absolute top-[2px] text-[0.5rem]',
tipDisplay.length === 1
? 'left-[7px]'
: tipDisplay.length === 2
? 'left-[4.5px]'
: tipDisplay.length > 2
? 'left-[4px] top-[2.5px] text-[0.35rem]'
: ''
)}
>
{totalTipped > 0 ? tipDisplay : ''}
</div>
</Col>
</Button>
</button>
</Tooltip>
)
}

24
web/components/create-post.tsx
View File

@ -4,12 +4,12 @@ import { Title } from 'web/components/title'
import { TextEditor, useTextEditor } from 'web/components/editor'
import { createPost } from 'web/lib/firebase/api'
import clsx from 'clsx'
import Router from 'next/router'
import { MAX_POST_TITLE_LENGTH } from 'common/post'
import { postPath } from 'web/lib/firebase/posts'
import { Group } from 'common/group'
import { ExpandingInput } from './expanding-input'
import { Button } from './button'
export function CreatePost(props: { group?: Group }) {
const [title, setTitle] = useState('')
@ -22,7 +22,6 @@ export function CreatePost(props: { group?: Group }) {
const { editor, upload } = useTextEditor({
key: `post ${group?.id || ''}`,
disabled: isSubmitting,
})
const isValid =
@ -56,8 +55,8 @@ export function CreatePost(props: { group?: Group }) {
<div className="rounded-lg px-6 py-4 sm:py-0">
<Title className="!mt-0" text="Create a post" />
<form>
<div className="form-control w-full">
<label className="label">
<div className="flex w-full flex-col">
<label className="px-1 py-2">
<span className="mb-1">
Title<span className={'text-red-700'}> *</span>
</span>
@ -70,7 +69,7 @@ export function CreatePost(props: { group?: Group }) {
onChange={(e) => setTitle(e.target.value || '')}
/>
<Spacer h={6} />
<label className="label">
<label className="px-1 py-2">
<span className="mb-1">
Subtitle<span className={'text-red-700'}> *</span>
</span>
@ -83,7 +82,7 @@ export function CreatePost(props: { group?: Group }) {
onChange={(e) => setSubtitle(e.target.value || '')}
/>
<Spacer h={6} />
<label className="label">
<label className="px-1 py-2">
<span className="mb-1">
Content<span className={'text-red-700'}> *</span>
</span>
@ -91,13 +90,12 @@ export function CreatePost(props: { group?: Group }) {
<TextEditor editor={editor} upload={upload} />
<Spacer h={6} />
<button
<Button
type="submit"
className={clsx(
'btn btn-primary normal-case',
isSubmitting && 'loading disabled'
)}
disabled={isSubmitting || !isValid || upload.isLoading}
color="green"
size="xl"
loading={isSubmitting}
disabled={!isValid || upload.isLoading}
onClick={async () => {
setIsSubmitting(true)
await savePost(title)
@ -105,7 +103,7 @@ export function CreatePost(props: { group?: Group }) {
}}
>
{isSubmitting ? 'Creating...' : 'Create a post'}
</button>
</Button>
{error !== '' && <div className="text-red-700">{error}</div>}
</div>
</form>

34
web/components/editor.tsx
View File

@ -18,10 +18,11 @@ import { useCallback, useEffect, useState } from 'react'
import { Linkify } from './linkify'
import { uploadImage } from 'web/lib/firebase/storage'
import { useMutation } from 'react-query'
import { FileUploadButton } from './file-upload-button'
import { linkClass } from './site-link'
import { DisplayMention } from './editor/mention'
import { DisplayContractMention } from './editor/contract-mention'
import GridComponent from './editor/tiptap-grid-cards'
import Iframe from 'common/util/tiptap-iframe'
import TiptapTweet from './editor/tiptap-tweet'
import { EmbedModal } from './editor/embed-modal'
@ -41,6 +42,7 @@ import ItalicIcon from 'web/lib/icons/italic-icon'
import LinkIcon from 'web/lib/icons/link-icon'
import { getUrl } from 'common/util/parse'
import { TiptapSpoiler } from 'common/util/tiptap-spoiler'
import { ImageModal } from './editor/image-modal'
import {
storageStore,
usePersistentState,
@ -50,7 +52,7 @@ import { debounce } from 'lodash'
const DisplayImage = Image.configure({
HTMLAttributes: {
class: 'max-h-60',
class: 'max-h-60 hover:max-h-[120rem] transition-all',
},
})
@ -78,6 +80,7 @@ export const editorExtensions = (simple = false): Extensions => [
DisplayLink,
DisplayMention,
DisplayContractMention,
GridComponent,
Iframe,
TiptapTweet,
TiptapSpoiler.configure({
@ -87,18 +90,17 @@ export const editorExtensions = (simple = false): Extensions => [
const proseClass = clsx(
'prose prose-p:my-0 prose-ul:my-0 prose-ol:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none prose-quoteless leading-relaxed',
'font-light prose-a:font-light prose-blockquote:font-light'
'font-light prose-a:font-light prose-blockquote:font-light prose-sm'
)
export function useTextEditor(props: {
placeholder?: string
max?: number
defaultValue?: Content
disabled?: boolean
simple?: boolean
key?: string // unique key for autosave. If set, plz call `clearContent(true)` on submit to clear autosave
}) {
const { placeholder, max, defaultValue, disabled, simple, key } = props
const { placeholder, max, defaultValue, simple, key } = props
const [content, saveContent] = usePersistentState<JSONContent | undefined>(
undefined,
@ -166,10 +168,6 @@ export function useTextEditor(props: {
},
})
useEffect(() => {
editor?.setEditable(!disabled)
}, [editor, disabled])
return { editor, upload }
}
@ -252,6 +250,7 @@ export function TextEditor(props: {
children?: React.ReactNode // additional toolbar buttons
}) {
const { editor, upload, children } = props
const [imageOpen, setImageOpen] = useState(false)
const [iframeOpen, setIframeOpen] = useState(false)
const [marketOpen, setMarketOpen] = useState(false)
@ -259,18 +258,26 @@ export function TextEditor(props: {
<>
{/* hide placeholder when focused */}
<div className="relative w-full [&:focus-within_p.is-empty]:before:content-none">
<div className="rounded-lg border border-gray-300 bg-white shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
{/* matches input styling */}
<div className="rounded-lg border border-gray-300 bg-white shadow-sm transition-colors focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
<FloatingMenu editor={editor} />
<EditorContent editor={editor} />
{/* Toolbar, with buttons for images and embeds */}
<div className="flex h-9 items-center gap-5 pl-4 pr-1">
<Tooltip text="Add image" noTap noFade>
<FileUploadButton
onFiles={upload.mutate}
<button
type="button"
onClick={() => setImageOpen(true)}
className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
>
<ImageModal
editor={editor}
upload={upload}
open={imageOpen}
setOpen={setImageOpen}
/>
<PhotographIcon className="h-5 w-5" aria-hidden="true" />
</FileUploadButton>
</button>
</Tooltip>
<Tooltip text="Add embed" noTap noFade>
<button
@ -355,6 +362,7 @@ export function RichContent(props: {
DisplayLink.configure({ openOnClick: false }), // stop link opening twice (browser still opens)
DisplayMention,
DisplayContractMention,
GridComponent,
Iframe,
TiptapTweet,
TiptapSpoiler.configure({

160
web/components/editor/image-modal.tsx Normal file
View File

@ -0,0 +1,160 @@
import { UploadIcon } from '@heroicons/react/outline'
import { Editor } from '@tiptap/react'
import { useState } from 'react'
import { AlertBox } from '../alert-box'
import { Button } from '../button'
import { FileUploadButton } from '../file-upload-button'
import { Col } from '../layout/col'
import { Modal } from '../layout/modal'
import { Row } from '../layout/row'
import { Tabs } from '../layout/tabs'
const MODIFIERS =
'8k, beautiful, illustration, trending on art station, picture of the day, epic composition'
export function ImageModal(props: {
editor: Editor | null
// TODO: Type this correctly?
upload: any
open: boolean
setOpen: (open: boolean) => void
}) {
const { upload, open, setOpen } = props
return (
<Modal open={open} setOpen={setOpen}>
<Col className="gap-2 rounded bg-white p-6">
<Tabs
tabs={[
{
title: 'Upload file',
content: (
<FileUploadButton
onFiles={(files) => {
setOpen(false)
upload.mutate(files)
}}
className="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<UploadIcon className="mx-auto h-12 w-12 text-gray-400" />
<span className="mt-2 block text-sm font-medium text-gray-400">
Upload an image file
</span>
</FileUploadButton>
),
},
{
title: 'Dream',
content: <DreamTab {...props} />,
},
]}
/>
</Col>
</Modal>
)
}
// Note: this is currently tied to a DreamStudio API key tied to akrolsmir@gmail.com,
// and injected on Vercel.
const API_KEY = process.env.NEXT_PUBLIC_DREAM_KEY
function DreamTab(props: {
editor: Editor | null
open: boolean
setOpen: (open: boolean) => void
}) {
const { editor, setOpen } = props
const [input, setInput] = useState('')
const [isDreaming, setIsDreaming] = useState(false)
const [imageUrl, setImageUrl] = useState('')
const imageCode = `<img src="${imageUrl}" alt="${input}" />`
if (!API_KEY) {
return (
<AlertBox
title="Missing API Key"
text="An API key from https://beta.dreamstudio.ai/ is needed to dream; add it to your web/.env.local"
/>
)
}
async function dream() {
setIsDreaming(true)
const data = {
prompt: input + ', ' + MODIFIERS,
apiKey: API_KEY,
}
const response = await fetch(`/api/v0/dream`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
})
const json = await response.json()
setImageUrl(json.url)
setIsDreaming(false)
}
return (
<Col className="gap-2">
<Row className="gap-2">
<input
autoFocus
type="text"
name="embed"
id="embed"
className="block w-full rounded-md border-gray-300 shadow-sm placeholder:text-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="A crane playing poker on a green table"
value={input}
onChange={(e) => setInput(e.target.value)}
autoComplete="off"
/>
<Button
className="whitespace-nowrap"
onClick={dream}
loading={isDreaming}
>
Dream
{/* TODO: Charge M$5 with ({formatMoney(5)}) */}
</Button>
</Row>
{isDreaming && (
<div className="text-sm">This may take ~10 seconds...</div>
)}
{/* TODO: Allow the user to choose their own modifiers */}
<div className="pt-2 text-sm text-gray-400">
Commission a custom image using AI.
</div>
<div className="pt-2 text-xs text-gray-400">Modifiers: {MODIFIERS}</div>
{/* Show the current imageUrl */}
{/* TODO: Keep the other generated images, so the user can play with different attempts. */}
{imageUrl && (
<>
<img src={imageUrl} alt="Image" />
<Row className="gap-2">
<Button
disabled={isDreaming}
onClick={() => {
if (editor) {
editor.chain().insertContent(imageCode).run()
setInput('')
setOpen(false)
}
}}
>
Add image
</Button>
<Button
color="gray"
onClick={() => {
setInput('')
setOpen(false)
}}
>
Cancel
</Button>
</Row>
</>
)}
</Col>
)
}

7
web/components/editor/market-modal.tsx
View File

@ -1,7 +1,7 @@
import { Editor } from '@tiptap/react'
import { Contract } from 'common/contract'
import { SelectMarketsModal } from '../contract-select-modal'
import { embedContractCode, embedContractGridCode } from '../share-embed-button'
import { embedContractCode } from '../share-embed-button'
import { insertContent } from './utils'
export function MarketModal(props: {
@ -15,7 +15,10 @@ export function MarketModal(props: {
if (contracts.length == 1) {
insertContent(editor, embedContractCode(contracts[0]))
} else if (contracts.length > 1) {
insertContent(editor, embedContractGridCode(contracts))
insertContent(
editor,
`<grid-cards-component contractIds="${contracts.map((c) => c.id)}" />`
)
}
}

55
web/components/editor/tiptap-grid-cards.tsx Normal file
View File

@ -0,0 +1,55 @@
import { mergeAttributes, Node } from '@tiptap/core'
import React from 'react'
import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
import { ContractsGrid } from '../contract/contracts-grid'
import { useContractsFromIds } from 'web/hooks/use-contract'
import { LoadingIndicator } from '../loading-indicator'
export default Node.create({
name: 'gridCardsComponent',
group: 'block',
atom: true,
addAttributes() {
return {
contractIds: [],
}
},
parseHTML() {
return [
{
tag: 'grid-cards-component',
},
]
},
renderHTML({ HTMLAttributes }) {
return ['grid-cards-component', mergeAttributes(HTMLAttributes)]
},
addNodeView() {
return ReactNodeViewRenderer(GridComponent)
},
})
export function GridComponent(props: any) {
const contractIds = props.node.attrs.contractIds
const contracts = useContractsFromIds(contractIds.split(','))
return (
<NodeViewWrapper className="grid-cards-component">
{contracts ? (
<ContractsGrid
contracts={contracts}
breakpointColumns={{ default: 2, 650: 1 }}
/>
) : (
<LoadingIndicator />
)}
</NodeViewWrapper>
)
}

2
web/components/expanding-input.tsx
View File

@ -7,7 +7,7 @@ export const ExpandingInput = (props: Parameters<typeof Textarea>[0]) => {
return (
<Textarea
className={clsx(
'textarea textarea-bordered resize-none text-[16px] md:text-[14px]',
'resize-none rounded-md border border-gray-300 bg-white px-4 text-[16px] leading-loose shadow-sm transition-colors focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 md:text-[14px]',
className
)}
{...rest}

6
web/components/feed/copy-link-date-time.tsx
View File

@ -5,6 +5,7 @@ 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'
import { useIsClient } from 'web/hooks/use-is-client'
export function CopyLinkDateTimeComponent(props: {
prefix: string
@ -14,6 +15,7 @@ export function CopyLinkDateTimeComponent(props: {
className?: string
}) {
const { prefix, slug, elementId, createdTime, className } = props
const isClient = useIsClient()
const [showToast, setShowToast] = useState(false)
function copyLinkToComment(
@ -33,10 +35,10 @@ export function CopyLinkDateTimeComponent(props: {
<a
onClick={copyLinkToComment}
className={
'mx-1 whitespace-nowrap rounded-sm px-1 text-gray-400 hover:bg-gray-100'
'text-greyscale-4 hover:bg-greyscale-1.5 mx-1 whitespace-nowrap rounded-sm px-1 text-xs transition-colors'
}
>
{fromNow(createdTime)}
{isClient && fromNow(createdTime)}
{showToast && <ToastClipboard />}
<LinkIcon className="ml-1 mb-0.5 inline" height={13} />
</a>

122
web/components/feed/feed-answer-comment-group.tsx
View File

@ -1,46 +1,21 @@
import { Answer } from 'common/answer'
import { FreeResponseContract } from 'common/contract'
import { ContractComment } from 'common/comment'
import React, { useEffect, useRef, useState } from 'react'
import { sum } from 'lodash'
import { Contract } from 'common/contract'
import React, { useEffect, useRef } from 'react'
import { Col } from 'web/components/layout/col'
import { Row } from 'web/components/layout/row'
import { Avatar } from 'web/components/avatar'
import { Linkify } from 'web/components/linkify'
import clsx from 'clsx'
import {
ContractCommentInput,
FeedComment,
ReplyTo,
} from 'web/components/feed/feed-comments'
import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
import { useRouter } from 'next/router'
import { useUser } from 'web/hooks/use-user'
import { useEvent } from 'web/hooks/use-event'
import { CommentTipMap } from 'web/hooks/use-tip-txns'
import { UserLink } from 'web/components/user-link'
export function FeedAnswerCommentGroup(props: {
contract: FreeResponseContract
answer: Answer
answerComments: ContractComment[]
tips: CommentTipMap
}) {
const { answer, contract, answerComments, tips } = props
export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
const { answer, contract } = props
const { username, avatarUrl, name, text } = answer
const [replyTo, setReplyTo] = useState<ReplyTo>()
const user = useUser()
const router = useRouter()
const answerElementId = `answer-${answer.id}`
const router = useRouter()
const highlighted = router.asPath.endsWith(`#${answerElementId}`)
const answerRef = useRef<HTMLDivElement>(null)
const onSubmitComment = useEvent(() => setReplyTo(undefined))
const onReplyClick = useEvent((comment: ContractComment) => {
setReplyTo({ id: comment.id, username: comment.userUsername })
})
useEffect(() => {
if (highlighted && answerRef.current != null) {
answerRef.current.scrollIntoView(true)
@ -48,83 +23,20 @@ export function FeedAnswerCommentGroup(props: {
}, [highlighted])
return (
<Col className="relative flex-1 items-stretch gap-3">
<Row
className={clsx(
'gap-3 space-x-3 pt-4 transition-all duration-1000',
highlighted ? `-m-2 my-3 rounded bg-indigo-500/[0.2] p-2` : ''
)}
ref={answerRef}
id={answerElementId}
>
<Avatar username={username} avatarUrl={avatarUrl} />
<Col className="min-w-0 flex-1 lg:gap-1">
<div className="text-sm text-gray-500">
<UserLink username={username} name={name} /> answered
<CopyLinkDateTimeComponent
prefix={contract.creatorUsername}
slug={contract.slug}
createdTime={answer.createdTime}
elementId={answerElementId}
/>
</div>
<Col className="align-items justify-between gap-2 sm:flex-row">
<span className="whitespace-pre-line text-lg">
<Linkify text={text} />
</span>
<div className="sm:hidden">
<button
className="text-xs font-bold text-gray-500 hover:underline"
onClick={() =>
setReplyTo({ id: answer.id, username: answer.username })
}
>
Reply
</button>
</div>
</Col>
<div className="justify-initial hidden sm:block">
<button
className="text-xs font-bold text-gray-500 hover:underline"
onClick={() =>
setReplyTo({ id: answer.id, username: answer.username })
}
>
Reply
</button>
</div>
</Col>
</Row>
<Col className="gap-3 pl-1">
{answerComments.map((comment) => (
<FeedComment
key={comment.id}
indent={true}
contract={contract}
comment={comment}
myTip={user ? tips[comment.id]?.[user.id] : undefined}
totalTip={sum(Object.values(tips[comment.id] ?? {}))}
showTip={true}
onReplyClick={onReplyClick}
/>
))}
</Col>
{replyTo && (
<div className="relative ml-7">
<span
className="absolute -left-1 -ml-[1px] mt-[1.25rem] h-2 w-0.5 rotate-90 bg-gray-200"
aria-hidden="true"
/>
<ContractCommentInput
contract={contract}
parentAnswerOutcome={answer.number.toString()}
replyTo={replyTo}
onSubmitComment={onSubmitComment}
<Col className="bg-greyscale-2 w-fit gap-1 rounded-t-xl rounded-bl-xl py-2 px-4">
<Row className="gap-2">
<Avatar username={username} avatarUrl={avatarUrl} size="xxs" />
<div className="text-greyscale-6 text-xs">
<UserLink username={username} name={name} /> answered
<CopyLinkDateTimeComponent
prefix={contract.creatorUsername}
slug={contract.slug}
createdTime={answer.createdTime}
elementId={answerElementId}
/>
</div>
)}
</Row>
<div className="text-sm">{text}</div>
</Col>
)
}

346
web/components/feed/feed-comments.tsx
View File

@ -23,6 +23,9 @@ import { Content } from '../editor'
import { UserLink } from 'web/components/user-link'
import { CommentInput } from '../comment-input'
import { AwardBountyButton } from 'web/components/award-bounty-button'
import { ReplyIcon } from '@heroicons/react/solid'
import { IconButton } from '../button'
import { ReplyToggle } from '../comments/reply-toggle'
export type ReplyTo = { id: string; username: string }
@ -34,6 +37,7 @@ export function FeedCommentThread(props: {
}) {
const { contract, threadComments, tips, parentComment } = props
const [replyTo, setReplyTo] = useState<ReplyTo>()
const [seeReplies, setSeeReplies] = useState(true)
const user = useUser()
const onSubmitComment = useEvent(() => setReplyTo(undefined))
@ -43,28 +47,37 @@ export function FeedCommentThread(props: {
return (
<Col className="relative w-full items-stretch gap-3 pb-4">
<span
className="absolute top-5 left-4 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
aria-hidden="true"
<ParentFeedComment
key={parentComment.id}
contract={contract}
comment={parentComment}
myTip={user ? tips[parentComment.id]?.[user.id] : undefined}
totalTip={sum(Object.values(tips[parentComment.id] ?? {}))}
showTip={true}
seeReplies={seeReplies}
numComments={threadComments.length}
onSeeReplyClick={() => setSeeReplies(!seeReplies)}
onReplyClick={() =>
setReplyTo({
id: parentComment.id,
username: parentComment.userUsername,
})
}
/>
{[parentComment].concat(threadComments).map((comment, commentIdx) => (
<FeedComment
key={comment.id}
indent={commentIdx != 0}
contract={contract}
comment={comment}
myTip={user ? tips[comment.id]?.[user.id] : undefined}
totalTip={sum(Object.values(tips[comment.id] ?? {}))}
showTip={true}
onReplyClick={onReplyClick}
/>
))}
{seeReplies &&
threadComments.map((comment, _commentIdx) => (
<FeedComment
key={comment.id}
contract={contract}
comment={comment}
myTip={user ? tips[comment.id]?.[user.id] : undefined}
totalTip={sum(Object.values(tips[comment.id] ?? {}))}
showTip={true}
onReplyClick={onReplyClick}
/>
))}
{replyTo && (
<Col className="-pb-2 relative ml-6">
<span
className="absolute -left-1 -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
aria-hidden="true"
/>
<ContractCommentInput
contract={contract}
parentCommentId={parentComment.id}
@ -77,38 +90,120 @@ export function FeedCommentThread(props: {
)
}
export function ParentFeedComment(props: {
contract: Contract
comment: ContractComment
showTip?: boolean
myTip?: number
totalTip?: number
seeReplies: boolean
numComments: number
onReplyClick?: (comment: ContractComment) => void
onSeeReplyClick: () => void
}) {
const {
contract,
comment,
myTip,
totalTip,
showTip,
onReplyClick,
onSeeReplyClick,
seeReplies,
numComments,
} = props
const { text, content, userUsername, userAvatarUrl } = comment
const { isReady, asPath } = useRouter()
const [highlighted, setHighlighted] = useState(false)
const commentRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (isReady && asPath.endsWith(`#${comment.id}`)) {
setHighlighted(true)
}
}, [isReady, asPath, comment.id])
useEffect(() => {
if (highlighted && commentRef.current) {
commentRef.current.scrollIntoView(true)
}
}, [highlighted])
return (
<Row
ref={commentRef}
id={comment.id}
className={clsx(
'hover:bg-greyscale-1 ml-3 gap-2 transition-colors',
highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
)}
>
<Col className="-ml-3.5">
<Avatar size="sm" username={userUsername} avatarUrl={userAvatarUrl} />
</Col>
<Col className="w-full">
<FeedCommentHeader comment={comment} contract={contract} />
<Content
className="text-greyscale-7 mt-2 grow text-[14px]"
content={content || text}
smallImage
/>
<Row className="justify-between">
<ReplyToggle
seeReplies={seeReplies}
numComments={numComments}
onClick={onSeeReplyClick}
/>
<CommentActions
onReplyClick={onReplyClick}
comment={comment}
showTip={showTip}
myTip={myTip}
totalTip={totalTip}
contract={contract}
/>
</Row>
</Col>
</Row>
)
}
export function CommentActions(props: {
onReplyClick?: (comment: ContractComment) => void
comment: ContractComment
showTip?: boolean
myTip?: number
totalTip?: number
contract: Contract
}) {
const { onReplyClick, comment, showTip, myTip, totalTip, contract } = props
return (
<Row className="grow justify-end">
{onReplyClick && (
<IconButton size={'xs'} onClick={() => onReplyClick(comment)}>
<ReplyIcon className="h-5 w-5" />
</IconButton>
)}
{showTip && (
<Tipper comment={comment} myTip={myTip ?? 0} totalTip={totalTip ?? 0} />
)}
{(contract.openCommentBounties ?? 0) > 0 && (
<AwardBountyButton comment={comment} contract={contract} />
)}
</Row>
)
}
export const FeedComment = memo(function FeedComment(props: {
contract: Contract
comment: ContractComment
showTip?: boolean
myTip?: number
totalTip?: number
indent?: boolean
onReplyClick?: (comment: ContractComment) => void
}) {
const { contract, comment, myTip, totalTip, showTip, indent, onReplyClick } =
props
const {
text,
content,
userUsername,
userName,
userAvatarUrl,
commenterPositionProb,
commenterPositionShares,
commenterPositionOutcome,
createdTime,
bountiesAwarded,
} = comment
const betOutcome = comment.betOutcome
let bought: string | undefined
let money: string | undefined
if (comment.betAmount != null) {
bought = comment.betAmount >= 0 ? 'bought' : 'sold'
money = formatMoney(Math.abs(comment.betAmount))
}
const totalAwarded = bountiesAwarded ?? 0
const { contract, comment, myTip, totalTip, showTip, onReplyClick } = props
const { text, content, userUsername, userAvatarUrl } = comment
const { isReady, asPath } = useRouter()
const [highlighted, setHighlighted] = useState(false)
const commentRef = useRef<HTMLDivElement>(null)
@ -130,91 +225,33 @@ export const FeedComment = memo(function FeedComment(props: {
ref={commentRef}
id={comment.id}
className={clsx(
'relative',
indent ? 'ml-6' : '',
highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] px-2 py-4` : ''
'hover:bg-greyscale-1 ml-10 gap-2 transition-colors',
highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
)}
>
{/*draw a gray line from the comment to the left:*/}
{indent ? (
<Col className="-ml-3">
<Avatar size="xs" username={userUsername} avatarUrl={userAvatarUrl} />
<span
className="absolute -left-1 -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
className="bg-greyscale-3 mx-auto h-full w-[1.5px]"
aria-hidden="true"
/>
) : null}
<Avatar size="sm" username={userUsername} avatarUrl={userAvatarUrl} />
<div className="ml-1.5 min-w-0 flex-1 pl-0.5 sm:ml-3">
<div className="mt-0.5 text-sm text-gray-500">
<UserLink
className="text-gray-500"
username={userUsername}
name={userName}
/>{' '}
{comment.betId == null &&
commenterPositionProb != null &&
commenterPositionOutcome != null &&
commenterPositionShares != null &&
commenterPositionShares > 0 &&
contract.outcomeType !== 'NUMERIC' && (
<>
{'is '}
<CommentStatus
prob={commenterPositionProb}
outcome={commenterPositionOutcome}
contract={contract}
/>
</>
)}
{bought} {money}
{contract.outcomeType !== 'FREE_RESPONSE' && betOutcome && (
<>
{' '}
of{' '}
<OutcomeLabel
outcome={betOutcome ? betOutcome : ''}
contract={contract}
truncate="short"
/>
</>
)}
<CopyLinkDateTimeComponent
prefix={contract.creatorUsername}
slug={contract.slug}
createdTime={createdTime}
elementId={comment.id}
/>
{totalAwarded > 0 && (
<span className=" text-primary ml-2 text-sm">
+{formatMoney(totalAwarded)}
</span>
)}
</div>
</Col>
<Col className="w-full">
<FeedCommentHeader comment={comment} contract={contract} />
<Content
className="mt-2 text-[15px] text-gray-700"
className="text-greyscale-7 mt-2 grow text-[14px]"
content={content || text}
smallImage
/>
<Row className="mt-2 items-center gap-6 text-xs text-gray-500">
{onReplyClick && (
<button
className="font-bold hover:underline"
onClick={() => onReplyClick(comment)}
>
Reply
</button>
)}
{showTip && (
<Tipper
comment={comment}
myTip={myTip ?? 0}
totalTip={totalTip ?? 0}
/>
)}
{(contract.openCommentBounties ?? 0) > 0 && (
<AwardBountyButton comment={comment} contract={contract} />
)}
</Row>
</div>
<CommentActions
onReplyClick={onReplyClick}
comment={comment}
showTip={showTip}
myTip={myTip}
totalTip={totalTip}
contract={contract}
/>
</Col>
</Row>
)
})
@ -273,3 +310,74 @@ export function ContractCommentInput(props: {
/>
)
}
export function FeedCommentHeader(props: {
comment: ContractComment
contract: Contract
}) {
const { comment, contract } = props
const {
userUsername,
userName,
commenterPositionProb,
commenterPositionShares,
commenterPositionOutcome,
createdTime,
bountiesAwarded,
} = comment
const betOutcome = comment.betOutcome
let bought: string | undefined
let money: string | undefined
if (comment.betAmount != null) {
bought = comment.betAmount >= 0 ? 'bought' : 'sold'
money = formatMoney(Math.abs(comment.betAmount))
}
const totalAwarded = bountiesAwarded ?? 0
return (
<Row>
<div className="text-greyscale-6 mt-0.5 text-xs">
<UserLink username={userUsername} name={userName} />{' '}
<span className="text-greyscale-4">
{comment.betId == null &&
commenterPositionProb != null &&
commenterPositionOutcome != null &&
commenterPositionShares != null &&
commenterPositionShares > 0 &&
contract.outcomeType !== 'NUMERIC' && (
<>
{'is '}
<CommentStatus
prob={commenterPositionProb}
outcome={commenterPositionOutcome}
contract={contract}
/>
</>
)}
{bought} {money}
{contract.outcomeType !== 'FREE_RESPONSE' && betOutcome && (
<>
{' '}
of{' '}
<OutcomeLabel
outcome={betOutcome ? betOutcome : ''}
contract={contract}
truncate="short"
/>
</>
)}
</span>
<CopyLinkDateTimeComponent
prefix={contract.creatorUsername}
slug={contract.slug}
createdTime={createdTime}
elementId={comment.id}
/>
{totalAwarded > 0 && (
<span className=" text-primary ml-2 text-sm">
+{formatMoney(totalAwarded)}
</span>
)}
</div>
</Row>
)
}

42
web/components/follow-button.tsx
View File

@ -5,57 +5,46 @@ import { useFollows } from 'web/hooks/use-follows'
import { useUser } from 'web/hooks/use-user'
import { follow, unfollow } from 'web/lib/firebase/users'
import { withTracking } from 'web/lib/service/analytics'
import { Button } from './button'
export function FollowButton(props: {
isFollowing: boolean | undefined
onFollow: () => void
onUnfollow: () => void
small?: boolean
className?: string
}) {
const { isFollowing, onFollow, onUnfollow, small, className } = props
const { isFollowing, onFollow, onUnfollow } = props
const user = useUser()
const smallStyle =
'btn !btn-xs border-2 border-gray-500 bg-white normal-case text-gray-500 hover:border-gray-500 hover:bg-white hover:text-gray-500'
if (!user || isFollowing === undefined)
return (
<button
className={clsx('btn btn-sm invisible', small && smallStyle, className)}
>
Follow
</button>
)
if (!user || isFollowing === undefined) return <></>
if (isFollowing) {
return (
<button
className={clsx(
'btn btn-outline btn-sm',
small && smallStyle,
className
)}
<Button
size="sm"
color="gray-outline"
className="my-auto"
onClick={withTracking(onUnfollow, 'unfollow')}
>
Following
</button>
</Button>
)
}
return (
<button
className={clsx('btn btn-sm', small && smallStyle, className)}
<Button
size="sm"
color="indigo"
className="my-auto"
onClick={withTracking(onFollow, 'follow')}
>
Follow
</button>
</Button>
)
}
export function UserFollowButton(props: { userId: string; small?: boolean }) {
const { userId, small } = props
export function UserFollowButton(props: { userId: string }) {
const { userId } = props
const user = useUser()
const following = useFollows(user?.id)
const isFollowing = following?.includes(userId)
@ -67,7 +56,6 @@ export function UserFollowButton(props: { userId: string; small?: boolean }) {
isFollowing={isFollowing}
onFollow={() => follow(user.id, userId)}
onUnfollow={() => unfollow(user.id, userId)}
small={small}
/>
)
}

19
web/components/follow-market-button.tsx
View File

@ -1,4 +1,4 @@
import { Button } from 'web/components/button'
import { IconButton } from 'web/components/button'
import {
Contract,
followContract,
@ -33,9 +33,8 @@ export const FollowMarketButton = (props: {
noTap
noFade
>
<Button
size={'sm'}
color={'gray-white'}
<IconButton
size="2xs"
onClick={async () => {
if (!user) return firebaseLogin()
if (followers?.includes(user.id)) {
@ -65,18 +64,12 @@ export const FollowMarketButton = (props: {
>
{watching ? (
<Col className={'items-center gap-x-2 sm:flex-row'}>
<EyeOffIcon
className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
aria-hidden="true"
/>
<EyeOffIcon className={clsx('h-5 w-5')} aria-hidden="true" />
{/* Unwatch */}
</Col>
) : (
<Col className={'items-center gap-x-2 sm:flex-row'}>
<EyeIcon
className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
aria-hidden="true"
/>
<EyeIcon className={clsx('h-5 w-5')} aria-hidden="true" />
{/* Watch */}
</Col>
)}
@ -87,7 +80,7 @@ export const FollowMarketButton = (props: {
followers?.includes(user?.id ?? 'nope') ? 'watched' : 'unwatched'
} a question!`}
/>
</Button>
</IconButton>
</Tooltip>
)
}

33
web/components/following-button.tsx
View File

@ -1,5 +1,4 @@
import clsx from 'clsx'
import { PencilIcon } from '@heroicons/react/outline'
import { User } from 'common/user'
import { useState } from 'react'
@ -11,7 +10,6 @@ import { Modal } from './layout/modal'
import { Tabs } from './layout/tabs'
import { useDiscoverUsers } from 'web/hooks/use-users'
import { TextButton } from './text-button'
import { track } from 'web/lib/service/analytics'
export function FollowingButton(props: { user: User; className?: string }) {
const { user, className } = props
@ -40,37 +38,6 @@ export function FollowingButton(props: { user: User; className?: string }) {
)
}
export function EditFollowingButton(props: { user: User; className?: string }) {
const { user, className } = props
const [isOpen, setIsOpen] = useState(false)
const followingIds = useFollows(user.id)
const followerIds = useFollowers(user.id)
return (
<div
className={clsx(
className,
'btn btn-sm btn-ghost cursor-pointer gap-2 whitespace-nowrap text-sm normal-case text-gray-700'
)}
onClick={() => {
setIsOpen(true)
track('edit following button')
}}
>
<PencilIcon className="inline h-4 w-4" />
Following
<FollowsDialog
user={user}
defaultTab="following"
followingIds={followingIds ?? []}
followerIds={followerIds ?? []}
isOpen={isOpen}
setIsOpen={setIsOpen}
/>
</div>
)
}
export function FollowersButton(props: { user: User; className?: string }) {
const { user, className } = props
const [isOpen, setIsOpen] = useState(false)

2
web/components/groups/create-group-button.tsx
View File

@ -103,7 +103,7 @@ export function CreateGroupButton(props: {
</Col>
{errorText && <div className={'text-error'}>{errorText}</div>}
<div className="form-control w-full">
<div className="flex w-full flex-col">
<label className="mb-2 ml-1 mt-0">Group name</label>
<Input
placeholder={'Your group name'}

52
web/components/groups/edit-group-button.tsx
View File

@ -11,6 +11,7 @@ import { FilterSelectUsers } from 'web/components/filter-select-users'
import { User } from 'common/user'
import { useMemberIds } from 'web/hooks/use-group'
import { Input } from '../input'
import { Button } from '../button'
export function EditGroupButton(props: { group: Group; className?: string }) {
const { group, className } = props
@ -40,18 +41,18 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
return (
<div className={clsx('flex p-1', className)}>
<div
className={clsx(
'btn-ghost cursor-pointer whitespace-nowrap rounded-md p-1 text-sm text-gray-700'
)}
<Button
size="sm"
color="gray-white"
className="whitespace-nowrap"
onClick={() => updateOpen(!open)}
>
<PencilIcon className="inline h-4 w-4" /> Edit
</div>
</Button>
<Modal open={open} setOpen={updateOpen}>
<div className="h-full rounded-md bg-white p-8">
<div className="form-control w-full">
<label className="label">
<div className="flex w-full flex-col">
<label className="px-1 py-2">
<span className="mb-1">Group name</span>
</label>
@ -65,8 +66,8 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
<Spacer h={4} />
<div className="form-control w-full">
<label className="label">
<div className="flex w-full flex-col">
<label className="px-1 py-2">
<span className="mb-0">Add members</span>
</label>
<FilterSelectUsers
@ -76,9 +77,10 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
/>
</div>
<div className="modal-action">
<label
htmlFor="edit"
<div className="flex">
<Button
color="red"
size="xs"
onClick={() => {
if (confirm('Are you sure you want to delete this group?')) {
deleteGroup(group)
@ -86,30 +88,24 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
router.replace('/groups')
}
}}
className={clsx(
'btn btn-sm btn-outline mr-auto self-center hover:border-red-500 hover:bg-red-500'
)}
>
Delete
</label>
<label
htmlFor="edit"
className={'btn'}
</Button>
<Button
color="gray-white"
size="xs"
onClick={() => updateOpen(false)}
>
Cancel
</label>
<label
className={clsx(
'btn',
saveDisabled ? 'btn-disabled' : 'btn-primary',
isSubmitting && 'loading'
)}
htmlFor="edit"
</Button>
<Button
color="green"
disabled={saveDisabled}
loading={isSubmitting}
onClick={onSubmit}
>
Save
</label>
</Button>
</div>
</div>
</Modal>

4
web/components/groups/group-overview-post.tsx
View File

@ -33,11 +33,9 @@ export function GroupOverviewPost(props: {
function RichEditGroupAboutPost(props: { group: Group; post: Post | null }) {
const { group, post } = props
const [editing, setEditing] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const { editor, upload } = useTextEditor({
defaultValue: post?.content,
disabled: isSubmitting,
})
async function savePost() {
@ -76,10 +74,8 @@ function RichEditGroupAboutPost(props: { group: Group; post: Post | null }) {
<Row className="gap-2">
<Button
onClick={async () => {
setIsSubmitting(true)
await savePost()
setEditing(false)
setIsSubmitting(false)
}}
>
Save

19
web/components/groups/group-overview.tsx
View File

@ -116,10 +116,7 @@ export function GroupPosts(props: { posts: Post[]; group: Group }) {
</Col>
<Col>
{user && (
<Button
className="btn-md"
onClick={() => setShowCreatePost(!showCreatePost)}
>
<Button onClick={() => setShowCreatePost(!showCreatePost)}>
Add a Post
</Button>
)}
@ -192,7 +189,9 @@ function GroupOverviewPinned(props: {
updateGroup(group, { pinnedItems: newPinned })
}
return isEditable || (group.pinnedItems && group.pinnedItems.length > 0) ? (
if (!group.pinnedItems || group.pinnedItems.length == 0) return <></>
return isEditable || (group.pinnedItems && group?.pinnedItems.length > 0) ? (
<PinnedItems
posts={posts}
group={group}
@ -230,8 +229,8 @@ export function PinnedItems(props: {
return pinned.length > 0 || isEditable ? (
<div>
<Row className="mb-3 items-center justify-between">
<SectionHeader label={'Pinned'} />
<Row className=" items-center justify-between">
<SectionHeader label={'Featured'} href={`#`} />
{isEditable && (
<Button
color="gray"
@ -265,7 +264,7 @@ export function PinnedItems(props: {
</div>
)}
{pinned.map((element, index) => (
<div className="relative my-2">
<div className="relative mb-4" key={element.key}>
{element}
{editMode && <CrossIcon onClick={() => onDeleteClicked(index)} />}
@ -378,7 +377,7 @@ export function GroupAbout(props: {
<div className={'inline-flex items-center'}>
<div className="mr-1 text-gray-500">Created by</div>
<UserLink
className="text-neutral"
className="text-gray-700"
name={creator.name}
username={creator.username}
/>
@ -430,7 +429,7 @@ export function GroupAbout(props: {
<CopyLinkButton
url={shareUrl}
tracking="copy group share link"
buttonClassName="btn-md rounded-l-none"
buttonClassName="rounded-l-none"
toastClassName={'-left-28 mt-1'}
/>
</Col>

4
web/components/groups/group-selector.tsx
View File

@ -72,7 +72,7 @@ export function GroupSelector(props: {
)
}
return (
<div className="form-control items-start">
<div className="flex flex-col items-start">
<Combobox
as="div"
value={selectedGroup}
@ -83,7 +83,7 @@ export function GroupSelector(props: {
{() => (
<>
{showLabel && (
<Combobox.Label className="label justify-start gap-2 text-base">
<Combobox.Label className="justify-start gap-2 px-1 py-2 text-base">
Add to Group
<InfoTooltip text="Question will be displayed alongside the other questions in the group." />
</Combobox.Label>

10
web/components/groups/groups-button.tsx
View File

@ -125,9 +125,9 @@ export function JoinOrLeaveGroupButton(props: {
if (isMember) {
return (
<Button
size="xs"
color="gray-white"
className={`${className} border-greyscale-4 border !border-solid`}
size="sm"
color="gray-outline"
className={className}
onClick={withTracking(onLeaveGroup, 'leave group')}
>
Unfollow
@ -139,8 +139,8 @@ export function JoinOrLeaveGroupButton(props: {
return <div className={clsx(className, 'text-gray-500')}>Closed</div>
return (
<Button
size="xs"
color="blue"
size="sm"
color="indigo"
className={className}
onClick={withTracking(onJoinGroup, 'join group')}
>

22
web/components/input.tsx
View File

@ -2,21 +2,21 @@ import clsx from 'clsx'
import React from 'react'
/** Text input. Wraps html `<input>` */
export const Input = (props: JSX.IntrinsicElements['input']) => {
const { className, ...rest } = props
export const Input = (
props: { error?: boolean } & JSX.IntrinsicElements['input']
) => {
const { error, className, ...rest } = props
return (
<input
className={clsx('input input-bordered text-base md:text-sm', className)}
className={clsx(
'h-12 rounded-md border bg-white px-4 shadow-sm transition-colors invalid:border-red-600 invalid:text-red-900 invalid:placeholder-red-300 focus:outline-none disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 md:text-sm',
error
? 'border-red-300 text-red-900 placeholder-red-300 focus:border-red-600 focus:ring-red-500' // matches invalid: styles
: 'placeholder-greyscale-4 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500',
className
)}
{...rest}
/>
)
}
/*
TODO: replace daisyui style with our own. For reference:
james: text-lg placeholder:text-gray-400
inga: placeholder:text-greyscale-4 border-greyscale-2 rounded-md
austin: border-gray-300 text-gray-400 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm
*/

7
web/components/leaderboard.tsx
View File

@ -2,6 +2,7 @@ import clsx from 'clsx'
import { Avatar } from './avatar'
import { Row } from './layout/row'
import { SiteLink } from './site-link'
import { Table } from './table'
import { Title } from './title'
interface LeaderboardEntry {
@ -31,9 +32,9 @@ export function Leaderboard<T extends LeaderboardEntry>(props: {
<div className="ml-2 text-gray-500">None yet</div>
) : (
<div className="overflow-x-auto">
<table className="table-zebra table-compact table w-full text-gray-500">
<Table>
<thead>
<tr className="p-2">
<tr>
<th>#</th>
<th>Name</th>
{columns.map((column) => (
@ -59,7 +60,7 @@ export function Leaderboard<T extends LeaderboardEntry>(props: {
</tr>
))}
</tbody>
</table>
</Table>
</div>
)}
</div>

12
web/components/limit-bets.tsx
View File

@ -14,6 +14,7 @@ import { Row } from './layout/row'
import { LoadingIndicator } from './loading-indicator'
import { BinaryOutcomeLabel, PseudoNumericOutcomeLabel } from './outcome-label'
import { Subtitle } from './subtitle'
import { Table } from './table'
import { Title } from './title'
export function LimitBets(props: {
@ -74,7 +75,7 @@ export function LimitOrderTable(props: {
const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
return (
<table className="table-compact table w-full rounded text-gray-500">
<Table className="rounded">
<thead>
<tr>
{!isYou && <th></th>}
@ -89,7 +90,7 @@ export function LimitOrderTable(props: {
<LimitBet key={bet.id} bet={bet} contract={contract} isYou={isYou} />
))}
</tbody>
</table>
</Table>
)
}
@ -140,12 +141,9 @@ function LimitBet(props: {
{isCancelling ? (
<LoadingIndicator />
) : (
<button
className="btn btn-xs btn-outline my-auto normal-case"
onClick={onCancel}
>
<Button size="2xs" color="gray-outline" onClick={onCancel}>
Cancel
</button>
</Button>
)}
</td>
)}

27
web/components/manalink-card.tsx
View File

@ -9,9 +9,9 @@ import { Col } from 'web/components/layout/col'
import { Row } from 'web/components/layout/row'
import { Claim, Manalink } from 'common/manalink'
import { ShareIconButton } from './share-icon-button'
import { contractDetailsButtonClassName } from './contract/contract-info-dialog'
import { useUserById } from 'web/hooks/use-user'
import getManalinkUrl from 'web/get-manalink-url'
import { IconButton } from './button'
export type ManalinkInfo = {
expiresTime: number | null
@ -123,7 +123,7 @@ export function ManalinkCardFromView(props: {
src="/logo-white.svg"
/>
</Col>
<Row className="relative w-full gap-1 rounded-b-lg bg-white px-4 py-2 text-lg">
<Row className="relative w-full rounded-b-lg bg-white px-4 py-2 align-middle text-lg">
<div
className={clsx(
'my-auto mb-1 w-full',
@ -133,32 +133,23 @@ export function ManalinkCardFromView(props: {
{formatMoney(amount)}
</div>
<button
onClick={() => (window.location.href = qrUrl)}
className={clsx(contractDetailsButtonClassName)}
>
<IconButton size="2xs" onClick={() => (window.location.href = qrUrl)}>
<QrcodeIcon className="h-6 w-6" />
</button>
</IconButton>
<ShareIconButton
toastClassName={'-left-48 min-w-[250%]'}
buttonClassName={'transition-colors'}
onCopyButtonClassName={
'bg-gray-200 text-gray-600 transition-none hover:bg-gray-200 hover:text-gray-600'
}
copyPayload={getManalinkUrl(link.slug)}
/>
<button
<IconButton
size="xs"
onClick={() => setShowDetails(!showDetails)}
className={clsx(
contractDetailsButtonClassName,
showDetails
? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
: ''
showDetails ? ' text-indigo-600 hover:text-indigo-700' : ''
)}
>
<DotsHorizontalIcon className="h-[24px] w-5" />
</button>
<DotsHorizontalIcon className="h-5 w-5" />
</IconButton>
</Row>
</Col>
<div className="mt-2 mb-4 text-xs text-gray-500 md:text-sm">

22
web/components/manalinks/create-links-button.tsx
View File

@ -14,6 +14,7 @@ import { DuplicateIcon } from '@heroicons/react/outline'
import { QRCode } from '../qr-code'
import { Input } from '../input'
import { ExpandingInput } from '../expanding-input'
import { Select } from '../select'
export function CreateLinksButton(props: {
user: User
@ -115,8 +116,8 @@ function CreateManalinkForm(props: {
>
<Title className="!my-0" text="Create a Manalink" />
<div className="flex flex-col flex-wrap gap-x-5 gap-y-2">
<div className="form-control flex-auto">
<label className="label">Amount</label>
<div className="flex flex-auto flex-col">
<label className="px-1 py-2">Amount</label>
<div className="relative">
<span className="absolute mx-3 mt-3.5 text-sm text-gray-400">
M$
@ -135,8 +136,8 @@ function CreateManalinkForm(props: {
</div>
</div>
<div className="flex flex-col gap-2 md:flex-row">
<div className="form-control w-full md:w-1/2">
<label className="label">Uses</label>
<div className="flex w-full flex-col md:w-1/2">
<label className="px-1 py-2">Uses</label>
<Input
type="number"
min="1"
@ -148,10 +149,9 @@ function CreateManalinkForm(props: {
}
/>
</div>
<div className="form-control w-full md:w-1/2">
<label className="label">Expires in</label>
<select
className="!select !select-bordered"
<div className="flex w-full flex-col md:w-1/2">
<label className="px-1 py-2">Expires in</label>
<Select
value={expiresIn}
defaultValue={defaultExpire}
onChange={(e) => {
@ -160,11 +160,11 @@ function CreateManalinkForm(props: {
}}
>
{expireOptions}
</select>
</Select>
</div>
</div>
<div className="form-control w-full">
<label className="label">Message</label>
<div className="flex w-full flex-col">
<label className="px-1 py-2">Message</label>
<ExpandingInput
placeholder={defaultMessage}
maxLength={200}

31
web/components/number-input.tsx
View File

@ -32,24 +32,19 @@ export function NumberInput(props: {
return (
<Col className={className}>
<label className="input-group">
<Input
className={clsx(
'max-w-[200px] !text-lg',
error && 'input-error',
inputClassName
)}
ref={inputRef}
type="number"
pattern="[0-9]*"
inputMode="numeric"
placeholder={placeholder ?? '0'}
maxLength={9}
value={numberString}
disabled={disabled}
onChange={(e) => onChange(e.target.value.substring(0, 9))}
/>
</label>
<Input
className={clsx('max-w-[200px] !text-lg', inputClassName)}
ref={inputRef}
type="number"
pattern="[0-9]*"
inputMode="numeric"
placeholder={placeholder ?? '0'}
maxLength={9}
value={numberString}
error={!!error}
disabled={disabled}
onChange={(e) => onChange(e.target.value.substring(0, 9))}
/>
<Spacer h={4} />

19
web/components/numeric-bet-panel.tsx
View File

@ -20,6 +20,7 @@ import { Row } from './layout/row'
import { Spacer } from './layout/spacer'
import { BetSignUpPrompt } from './sign-up-prompt'
import { track } from 'web/lib/service/analytics'
import { Button } from './button'
export function NumericBetPanel(props: {
contract: NumericContract
@ -108,7 +109,7 @@ function NumericBuyPanel(props: {
})
}
const betDisabled = isSubmitting || !betAmount || !bucketChoice || error
const betDisabled = isSubmitting || !betAmount || !bucketChoice || !!error
const { newBet, newPool, newTotalShares, newTotalBets } = getNumericBetsInfo(
value ?? 0,
@ -195,16 +196,14 @@ function NumericBuyPanel(props: {
<Spacer h={8} />
{user && (
<button
className={clsx(
'btn flex-1',
betDisabled ? 'btn-disabled' : 'btn-primary',
isSubmitting ? 'loading' : ''
)}
onClick={betDisabled ? undefined : submitBet}
<Button
disabled={betDisabled}
color="green"
loading={isSubmitting}
onClick={submitBet}
>
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
Submit
</Button>
)}
{wasSubmitted && <div className="mt-4">Bet submitted!</div>}

72
web/components/onboarding/welcome.tsx
View File

@ -54,47 +54,48 @@ export default function Welcome() {
if (isTwitch || !user || (!user.shouldShowWelcome && !groupSelectorOpen))
return <></>
return (
<>
if (groupSelectorOpen)
return (
<GroupSelectorDialog
open={groupSelectorOpen}
setOpen={() => setGroupSelectorOpen(false)}
/>
)
<Modal open={open} setOpen={toggleOpen}>
<Col className="h-[32rem] place-content-between rounded-md bg-white px-8 py-6 text-sm font-light md:h-[40rem] md:text-lg">
{page === 0 && <Page0 />}
{page === 1 && <Page1 />}
{page === 2 && <Page2 />}
{page === 3 && <Page3 />}
<Col>
<Row className="place-content-between">
<ChevronLeftIcon
className={clsx(
'h-10 w-10 text-gray-400 hover:text-gray-500',
page === 0 ? 'disabled invisible' : ''
)}
onClick={decreasePage}
/>
<PageIndicator page={page} totalpages={TOTAL_PAGES} />
<ChevronRightIcon
className={clsx(
'h-10 w-10 text-indigo-500 hover:text-indigo-600',
page === TOTAL_PAGES - 1 ? 'disabled invisible' : ''
)}
onClick={increasePage}
/>
</Row>
<u
className="self-center text-xs text-gray-500"
onClick={() => toggleOpen(false)}
>
I got the gist, exit welcome
</u>
</Col>
return (
<Modal open={open} setOpen={toggleOpen}>
<Col className="h-[32rem] place-content-between rounded-md bg-white px-8 py-6 text-sm font-light md:h-[40rem] md:text-lg">
{page === 0 && <Page0 />}
{page === 1 && <Page1 />}
{page === 2 && <Page2 />}
{page === 3 && <Page3 />}
<Col>
<Row className="place-content-between">
<ChevronLeftIcon
className={clsx(
'h-10 w-10 text-gray-400 hover:text-gray-500',
page === 0 ? 'disabled invisible' : ''
)}
onClick={decreasePage}
/>
<PageIndicator page={page} totalpages={TOTAL_PAGES} />
<ChevronRightIcon
className={clsx(
'h-10 w-10 text-indigo-500 hover:text-indigo-600',
page === TOTAL_PAGES - 1 ? 'disabled invisible' : ''
)}
onClick={increasePage}
/>
</Row>
<u
className="self-center text-xs text-gray-500"
onClick={() => toggleOpen(false)}
>
I got the gist, exit welcome
</u>
</Col>
</Modal>
</>
</Col>
</Modal>
)
}
@ -117,6 +118,7 @@ function PageIndicator(props: { page: number; totalpages: number }) {
<Row>
{[...Array(totalpages)].map((e, i) => (
<div
key={i}
className={clsx(
'mx-1.5 my-auto h-1.5 w-1.5 rounded-full',
i === page ? 'bg-indigo-500' : 'bg-gray-300'

6
web/components/pinned-select-modal.tsx
View File

@ -69,9 +69,9 @@ export function PinnedSelectModal(props: {
}
return (
<Modal open={open} setOpen={setOpen} className={'sm:p-0'} size={'lg'}>
<Col className="h-[85vh] w-full gap-4 rounded-md bg-white">
<div className="p-8 pb-0">
<Modal open={open} setOpen={setOpen} className={' sm:p-0'} size={'lg'}>
<Col className=" h-[85vh] w-full gap-4 overflow-scroll rounded-md bg-white">
<div className=" p-8 pb-0">
<Row>
<div className={'text-xl text-indigo-700'}>{title}</div>

72
web/components/post-card.tsx
View File

@ -3,12 +3,13 @@ import { DocumentIcon } from '@heroicons/react/solid'
import clsx from 'clsx'
import { Post } from 'common/post'
import Link from 'next/link'
import { useUserById } from 'web/hooks/use-user'
import { postPath } from 'web/lib/firebase/posts'
import { fromNow } from 'web/lib/util/time'
import { Avatar } from './avatar'
import { Card } from './card'
import { CardHighlightOptions } from './contract/contracts-grid'
import { Col } from './layout/col'
import { Row } from './layout/row'
import { UserLink } from './user-link'
export function PostCard(props: {
@ -17,48 +18,45 @@ export function PostCard(props: {
highlightOptions?: CardHighlightOptions
}) {
const { post, onPostClick, highlightOptions } = props
const creatorId = post.creatorId
const user = useUserById(creatorId)
const { itemIds: itemIds, highlightClassName } = highlightOptions || {}
if (!user) return <> </>
return (
<div className="relative py-1">
<Card
className={clsx(
'relative flex gap-3 py-2 px-3',
itemIds?.includes(post.id) && highlightClassName
)}
>
<div className="flex-shrink-0">
<Avatar className="h-12 w-12" username={user?.username} />
</div>
<div className="">
<div className="text-sm text-gray-500">
<UserLink
className="text-neutral"
name={user?.name}
username={user?.username}
/>
<span className="mx-1">•</span>
<span className="text-gray-500">{fromNow(post.createdTime)}</span>
</div>
<div className=" break-words text-lg font-medium text-gray-900">
<Card
className={clsx(
'group relative flex gap-3 py-4 px-6',
itemIds?.includes(post.id) && highlightClassName
)}
>
<Row className="flex grow justify-between">
<Col className="gap-2">
<Row className="items-center justify-between">
<Row className="items-center text-sm">
<Avatar
className="mx-1 h-7 w-7"
username={post.creatorUsername}
avatarUrl={post.creatorAvatarUrl}
/>
<UserLink
className="text-gray-400"
name={post.creatorName}
username={post.creatorUsername}
/>
<span className="mx-1 text-gray-400">•</span>
<span className="text-gray-400">{fromNow(post.createdTime)}</span>
</Row>
<div className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
<DocumentIcon className={'h3 w-3'} />
Post
</div>
</Row>
<div className="break-words text-lg font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2">
{post.title}
</div>
<div className="font-small text-md break-words text-gray-500">
<div className="font-small text-md break-words text-gray-500">
{post.subtitle}
</div>
</div>
<div>
<span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
<DocumentIcon className={'h3 w-3'} />
Post
</span>
</div>
</Card>
</Col>
</Row>
{onPostClick ? (
<a
className="absolute top-0 left-0 right-0 bottom-0"
@ -89,7 +87,7 @@ export function PostCard(props: {
/>
</Link>
)}
</div>
</Card>
)
}

20
web/components/probability-input.tsx
View File

@ -4,18 +4,15 @@ import { getPseudoProbability } from 'common/pseudo-numeric'
import { BucketInput } from './bucket-input'
import { Input } from './input'
import { Col } from './layout/col'
import { Spacer } from './layout/spacer'
export function ProbabilityInput(props: {
function ProbabilityInput(props: {
prob: number | undefined
onChange: (newProb: number | undefined) => void
disabled?: boolean
placeholder?: string
className?: string
inputClassName?: string
}) {
const { prob, onChange, disabled, placeholder, className, inputClassName } =
props
const { prob, onChange, disabled, placeholder, inputClassName } = props
const onProbChange = (str: string) => {
let prob = parseInt(str.replace(/\D/g, ''))
@ -29,10 +26,10 @@ export function ProbabilityInput(props: {
}
return (
<Col className={className}>
<label className="input-group">
<Col>
<label className="relative w-fit">
<Input
className={clsx('max-w-[200px] !text-lg', inputClassName)}
className={clsx('pr-2 !text-lg', inputClassName)}
type="number"
max={99}
min={1}
@ -44,9 +41,10 @@ export function ProbabilityInput(props: {
disabled={disabled}
onChange={(e) => onProbChange(e.target.value)}
/>
<span className="bg-gray-200 text-sm">%</span>
<span className="text-greyscale-4 absolute top-1/2 right-10 my-auto -translate-y-1/2">
%
</span>
</label>
<Spacer h={4} />
</Col>
)
}
@ -82,7 +80,7 @@ export function ProbabilityOrNumericInput(props: {
/>
) : (
<ProbabilityInput
inputClassName="w-full max-w-none"
inputClassName="w-24"
prob={prob}
onChange={setProb}
disabled={isSubmitting}

31
web/components/probability-selector.tsx
View File

@ -1,5 +1,4 @@
import { Input } from './input'
import { Row } from './layout/row'
export function ProbabilitySelector(props: {
probabilityInt: number
@ -9,21 +8,19 @@ export function ProbabilitySelector(props: {
const { probabilityInt, setProbabilityInt, isSubmitting } = props
return (
<Row className="items-center gap-2">
<label className="input-group input-group-lg text-lg">
<Input
type="number"
value={probabilityInt}
className="input-md w-28 !text-lg"
disabled={isSubmitting}
min={1}
max={99}
onChange={(e) =>
setProbabilityInt(parseInt(e.target.value.substring(0, 2)))
}
/>
<span>%</span>
</label>
</Row>
<label className="flex items-center text-lg">
<Input
type="number"
value={probabilityInt}
className="input-md w-28 !text-lg"
disabled={isSubmitting}
min={1}
max={99}
onChange={(e) =>
setProbabilityInt(parseInt(e.target.value.substring(0, 2)))
}
/>
<span>%</span>
</label>
)
}

9
web/components/referrals-button.tsx
View File

@ -12,6 +12,7 @@ import { FilterSelectUsers } from 'web/components/filter-select-users'
import { getUser, updateUser } from 'web/lib/firebase/users'
import { TextButton } from 'web/components/text-button'
import { UserLink } from 'web/components/user-link'
import { Button } from './button'
export function ReferralsButton(props: {
user: User
@ -89,11 +90,9 @@ function ReferralsDialog(props: {
maxUsers={1}
/>
<Row className={'mt-0 justify-end'}>
<button
<Button
className={
referredBy.length === 0
? 'hidden'
: 'btn btn-primary btn-md my-2 w-24 normal-case'
referredBy.length === 0 ? 'hidden' : 'my-2 w-24'
}
disabled={referredBy.length === 0 || isSubmitting}
onClick={() => {
@ -114,7 +113,7 @@ function ReferralsDialog(props: {
}}
>
Save
</button>
</Button>
</Row>
<span className={'text-warning'}>
{referredBy.length > 0 &&

12
web/components/relative-timestamp.tsx
View File

@ -1,22 +1,16 @@
import { DateTimeTooltip } from './datetime-tooltip'
import React, { useEffect, useState } from 'react'
import { fromNow } from 'web/lib/util/time'
import { useIsClient } from 'web/hooks/use-is-client'
export function RelativeTimestamp(props: { time: number }) {
const { time } = props
const [isClient, setIsClient] = useState(false)
useEffect(() => {
// Only render on client to prevent difference from server.
setIsClient(true)
}, [])
const isClient = useIsClient()
return (
<DateTimeTooltip
className="ml-1 whitespace-nowrap text-gray-400"
time={time}
>
{isClient ? fromNow(time) : ''}
{isClient && fromNow(time)}
</DateTimeTooltip>
)
}

1
web/components/resolution-panel.tsx
View File

@ -72,7 +72,6 @@ export function ResolutionPanel(props: {
className="mx-auto my-2"
selected={outcome}
onSelect={setOutcome}
btnClassName={isSubmitting ? 'btn-disabled' : ''}
/>
<Spacer h={4} />
<div>

17
web/components/select.tsx Normal file
View File

@ -0,0 +1,17 @@
import clsx from 'clsx'
export const Select = (props: JSX.IntrinsicElements['select']) => {
const { className, children, ...rest } = props
return (
<select
className={clsx(
'h-12 cursor-pointer self-start overflow-hidden rounded-md border border-gray-300 pl-4 pr-10 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500',
className
)}
{...rest}
>
ß{children}
</select>
)
}

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

@ -1,59 +0,0 @@
import { BinaryContract, PseudoNumericContract } from 'common/contract'
import { User } from 'common/user'
import { useUserContractBets } from 'web/hooks/use-user-bets'
import { useState } from 'react'
import { Col } from './layout/col'
import clsx from 'clsx'
import { SellSharesModal } from './sell-modal'
export function SellButton(props: {
contract: BinaryContract | PseudoNumericContract
user: User | null | undefined
sharesOutcome: 'YES' | 'NO' | undefined
shares: number
panelClassName?: string
}) {
const { contract, user, sharesOutcome, shares, panelClassName } = props
const userBets = useUserContractBets(user?.id, contract.id)
const [showSellModal, setShowSellModal] = useState(false)
const { mechanism, outcomeType } = contract
const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
if (sharesOutcome && user && mechanism === 'cpmm-1') {
return (
<Col className={'items-center'}>
<button
className={clsx(
'btn-sm w-24 gap-1',
// from the yes-no-selector:
'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'
)}
onClick={() => setShowSellModal(true)}
>
Sell{' '}
{isPseudoNumeric
? { YES: 'HIGH', NO: 'LOW' }[sharesOutcome]
: sharesOutcome}
</button>
<div className={'mt-1 w-24 text-center text-sm text-gray-500'}>
{'(' + Math.floor(shares) + ' shares)'}
</div>
{showSellModal && (
<SellSharesModal
className={panelClassName}
contract={contract}
user={user}
userBets={userBets ?? []}
shares={shares}
sharesOutcome={sharesOutcome}
setOpen={setShowSellModal}
/>
)}
</Col>
)
}
return <div />
}

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

@ -8,6 +8,7 @@ import { OutcomeLabel } from './outcome-label'
import { useUserContractBets } from 'web/hooks/use-user-bets'
import { useSaveBinaryShares } from './use-save-binary-shares'
import { SellSharesModal } from './sell-modal'
import { Button } from './button'
export function SellRow(props: {
contract: BinaryContract | PseudoNumericContract
@ -37,17 +38,14 @@ export function SellRow(props: {
shares
</div>
<button
className="btn btn-sm"
style={{
backgroundColor: 'white',
border: '2px solid',
color: '#3D4451',
}}
<Button
className="my-auto"
size="xs"
color="gray-outline"
onClick={() => setShowSellModal(true)}
>
Sell
</button>
</Button>
</Row>
</Col>
{showSellModal && (

26
web/components/share-icon-button.tsx
View File

@ -5,34 +5,22 @@ import clsx from 'clsx'
import { copyToClipboard } from 'web/lib/util/copy'
import { ToastClipboard } from 'web/components/toast-clipboard'
import { track } from 'web/lib/service/analytics'
import { contractDetailsButtonClassName } from 'web/components/contract/contract-info-dialog'
import { IconButton } from './button'
export function ShareIconButton(props: {
buttonClassName?: string
onCopyButtonClassName?: string
toastClassName?: string
children?: React.ReactNode
iconClassName?: string
copyPayload: string
}) {
const {
buttonClassName,
onCopyButtonClassName,
toastClassName,
children,
iconClassName,
copyPayload,
} = props
const { toastClassName, children, iconClassName, copyPayload } = props
const [showToast, setShowToast] = useState(false)
return (
<div className="relative z-10 flex-shrink-0">
<button
className={clsx(
contractDetailsButtonClassName,
buttonClassName,
showToast ? onCopyButtonClassName : ''
)}
<IconButton
size="2xs"
className={clsx('mt-1', showToast ? 'text-indigo-600' : '')}
onClick={() => {
copyToClipboard(copyPayload)
track('copy share link')
@ -41,11 +29,11 @@ export function ShareIconButton(props: {
}}
>
<LinkIcon
className={clsx(iconClassName ? iconClassName : 'h-[24px] w-5')}
className={clsx(iconClassName ? iconClassName : 'h-5 w-5')}
aria-hidden="true"
/>
{children}
</button>
</IconButton>
{showToast && <ToastClipboard className={toastClassName} />}
</div>

2
web/components/sign-in-button.tsx
View File

@ -10,7 +10,7 @@ export const SignInButton = (props: { className?: string }) => {
return (
<Button
size="lg"
color="gray"
color="gradient"
onClick={async () => {
// login, and then reload the page, to hit any SSR redirect (e.g.
// redirecting from / to /home for logged in users)

21
web/components/table.tsx Normal file
View File

@ -0,0 +1,21 @@
import clsx from 'clsx'
/** `<table>` with styles. Expects table html (`<thead>`, `<td>` etc) */
export const Table = (props: {
zebra?: boolean
className?: string
children: React.ReactNode
}) => {
const { className, children } = props
return (
<table
className={clsx(
'w-full whitespace-nowrap text-left text-sm text-gray-500 [&_td]:p-2 [&_th]:p-2 [&>thead]:font-bold [&>tbody_tr:nth-child(odd)]:bg-white',
className
)}
>
{children}
</table>
)
}

2
web/components/toast-clipboard.tsx
View File

@ -8,7 +8,7 @@ export function ToastClipboard(props: { className?: string }) {
return (
<Row
className={clsx(
'border-base-300 absolute items-center' +
'border-greyscale-4 absolute items-center' +
'gap-2 divide-x divide-gray-200 rounded-md border-2 bg-white ' +
'h-15 z-10 w-[15rem] p-2 pr-3 text-gray-500',
className

1
web/components/user-link.tsx
View File

@ -48,6 +48,7 @@ const BOT_USERNAMES = [
'MarketManagerBot',
'Botlab',
'JuniorBot',
'ManifoldDream',
]
function BotBadge() {

6
web/components/user-page.tsx
View File

@ -95,7 +95,7 @@ export function UserPage(props: { user: User }) {
)}
<Col className="w-full gap-4 pl-5">
<div className="flex flex-col gap-2 sm:flex-row sm:justify-between">
<div className="flex flex-col items-start gap-2 sm:flex-row sm:justify-between">
<Col>
<span className="break-anywhere text-lg font-bold sm:text-2xl">
{user.name}
@ -291,7 +291,7 @@ export function ProfilePrivateStats(props: {
<Row className={'justify-between gap-4 sm:justify-end'}>
<Col className={'text-greyscale-4 text-md sm:text-lg'}>
<span
className={clsx(profit >= 0 ? 'text-green-600' : 'text-red-400')}
className={clsx(profit >= 0 ? 'text-teal-600' : 'text-red-400')}
>
{formatMoney(profit)}
</span>
@ -303,7 +303,7 @@ export function ProfilePrivateStats(props: {
}
onClick={() => setShowLoansModal(true)}
>
<span className="text-green-600">
<span className="text-teal-600">
🏦 {formatMoney(user.nextLoanCached ?? 0)}
</span>
<span className="mx-auto text-xs sm:text-sm">next loan</span>

4
web/components/yes-no-selector.tsx
View File

@ -101,7 +101,7 @@ export function YesNoCancelSelector(props: {
<Button
color={selected === 'MKT' ? 'blue' : 'gray'}
onClick={() => onSelect('MKT')}
className={clsx(btnClassName, 'btn-sm')}
className={btnClassName}
>
PROB
</Button>
@ -109,7 +109,7 @@ export function YesNoCancelSelector(props: {
<Button
color={selected === 'CANCEL' ? 'yellow' : 'gray'}
onClick={() => onSelect('CANCEL')}
className={clsx(btnClassName, 'btn-sm')}
className={btnClassName}
>
N/A
</Button>

13
web/hooks/use-contract.ts
View File

@ -3,10 +3,12 @@ import { useFirestoreDocumentData } from '@react-query-firebase/firestore'
import {
Contract,
contracts,
getContractFromId,
listenForContract,
} from 'web/lib/firebase/contracts'
import { useStateCheckEquality } from './use-state-check-equality'
import { doc, DocumentData } from 'firebase/firestore'
import { useQuery } from 'react-query'
export const useContract = (contractId: string) => {
const result = useFirestoreDocumentData<DocumentData, Contract>(
@ -18,6 +20,17 @@ export const useContract = (contractId: string) => {
return result.isLoading ? undefined : result.data
}
export const useContractsFromIds = (contractIds: string[]) => {
const contractResult = useQuery(['contracts', contractIds], () =>
Promise.all(contractIds.map(getContractFromId))
)
const contracts = contractResult.data?.filter(
(contract): contract is Contract => !!contract
)
return contractResult.isLoading ? undefined : contracts
}
export const useContractWithPreload = (
initial: Contract | null | undefined
) => {

17
web/hooks/use-global-config.ts Normal file
View File

@ -0,0 +1,17 @@
import { GlobalConfig } from 'common/globalConfig'
import { useEffect } from 'react'
import { listenForGlobalConfig } from 'web/lib/firebase/globalConfig'
import { inMemoryStore, usePersistentState } from './use-persistent-state'
export const useGlobalConfig = () => {
const [globalConfig, setGlobalConfig] =
usePersistentState<GlobalConfig | null>(null, {
store: inMemoryStore(),
key: 'globalConfig',
})
useEffect(() => {
return listenForGlobalConfig(setGlobalConfig)
}, [setGlobalConfig])
return globalConfig
}

7
web/hooks/use-is-client.ts Normal file
View File

@ -0,0 +1,7 @@
import { useEffect, useState } from 'react'
export const useIsClient = () => {
const [isClient, setIsClient] = useState(false)
useEffect(() => setIsClient(true), [])
return isClient
}

11
web/hooks/use-persistent-state.ts
View File

@ -89,6 +89,17 @@ export const historyStore = <T>(prefix = '__manifold'): PersistentStore<T> => ({
},
})
const store: Record<string, any> = {}
export const inMemoryStore = <T>(): PersistentStore<T> => ({
get: (k: string) => {
return store[k]
},
set: (k: string, v: T | undefined) => {
store[k] = v
},
})
export const usePersistentState = <T>(
initial: T,
persist?: PersistenceOptions<T>

14
web/hooks/use-post.ts
View File

@ -1,6 +1,10 @@
import { useEffect, useState } from 'react'
import { DateDoc, Post } from 'common/post'
import { listenForDateDocs, listenForPost } from 'web/lib/firebase/posts'
import {
getAllPosts,
listenForDateDocs,
listenForPost,
} from 'web/lib/firebase/posts'
export const usePost = (postId: string | undefined) => {
const [post, setPost] = useState<Post | null | undefined>()
@ -38,6 +42,14 @@ export const usePosts = (postIds: string[]) => {
.sort((a, b) => b.createdTime - a.createdTime)
}
export const useAllPosts = () => {
const [posts, setPosts] = useState<Post[]>([])
useEffect(() => {
getAllPosts().then(setPosts)
}, [])
return posts
}
export const useDateDocs = () => {
const [dateDocs, setDateDocs] = useState<DateDoc[]>()

16
web/hooks/use-user.ts
View File

@ -47,10 +47,7 @@ export const usePrefetchUsers = (userIds: string[]) => {
)
}
export const useUserContractMetricsByProfit = (
userId: string,
count: number
) => {
export const useUserContractMetricsByProfit = (userId: string, count = 50) => {
const positiveResult = useFirestoreQueryData<ContractMetrics>(
['contract-metrics-descending', userId, count],
getUserContractMetricsQuery(userId, count, 'desc')
@ -71,10 +68,13 @@ export const useUserContractMetricsByProfit = (
if (!positiveResult.data || !negativeResult.data || !contracts)
return undefined
const filteredContracts = filterDefined(contracts) as CPMMBinaryContract[]
const filteredMetrics = metrics.filter(
(m) => m.from && Math.abs(m.from.day.profit) >= 0.5
)
const filteredContracts = filterDefined(contracts).filter(
(c) => !c.isResolved
) as CPMMBinaryContract[]
const filteredMetrics = metrics
.filter((m) => m.from && Math.abs(m.from.day.profit) >= 0.5)
.filter((m) => filteredContracts.find((c) => c.id === m.contractId))
return { contracts: filteredContracts, metrics: filteredMetrics }
}

33
web/lib/firebase/globalConfig.ts Normal file
View File

@ -0,0 +1,33 @@
import {
CollectionReference,
doc,
collection,
getDoc,
updateDoc,
} from 'firebase/firestore'
import { db } from 'web/lib/firebase/init'
import { GlobalConfig } from 'common/globalConfig'
import { listenForValue } from './utils'
const globalConfigCollection = collection(
db,
'globalConfig'
) as CollectionReference<GlobalConfig>
const globalConfigDoc = doc(globalConfigCollection, 'globalConfig')
export const getGlobalConfig = async () => {
return (await getDoc(globalConfigDoc)).data()
}
export function updateGlobalConfig(
globalConfig: GlobalConfig,
updates: Partial<GlobalConfig>
) {
return updateDoc(globalConfigDoc, updates)
}
export function listenForGlobalConfig(
setGlobalConfig: (globalConfig: GlobalConfig | null) => void
) {
return listenForValue(globalConfigDoc, setGlobalConfig)
}

Some files were not shown because too many files have changed in this diff Show More