Compare commits
56 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
c762869b83 | ||
|
aaa09f49c0 | ||
|
4d214c01b4 | ||
|
0a70652667 | ||
|
b4162a0896 | ||
|
2ecece02c3 | ||
|
4359ad0530 | ||
|
3f8988bf27 | ||
|
41a46aad9b | ||
|
4097082c75 | ||
|
58cd0e57bd | ||
|
3a63503161 | ||
|
abd06f272b | ||
|
ab1c3020da | ||
|
c044460a91 | ||
|
7a6725ee77 | ||
|
823d1ddd4c | ||
|
7d490e0de1 | ||
|
96d2255cb1 | ||
|
4a139c5cc2 | ||
|
47eb8abed0 | ||
|
903fcc83b3 | ||
|
0615bb2d4b | ||
|
3508c94634 | ||
|
29c0dfe3fe | ||
|
18a3b66164 | ||
|
9e4f41253f | ||
|
546b0231e7 | ||
|
8bb44593f3 | ||
|
2c2bc61788 | ||
|
34c9dbb3e7 | ||
|
d6525bae9f | ||
|
da32a756a8 | ||
|
fa476c78dd | ||
|
e7ba7e715f | ||
|
9bf82c6082 | ||
|
3e1876f0dc | ||
|
5ba4a9dce7 | ||
|
4e5b78f4ee | ||
|
bc6fab399e | ||
|
c2d112e516 | ||
|
3cbe8ad8bb | ||
|
6226291e02 | ||
|
fa4dba4da3 | ||
|
9eff69be75 | ||
|
789bec2a4f | ||
|
18042cd4d1 | ||
|
04a126707b | ||
|
7a412fdb0d | ||
|
e2dc4c6b8f | ||
|
204d302d87 | ||
|
ae39c1175b | ||
|
c44f223064 | ||
|
aa717a767d | ||
|
d9f57b7daa | ||
|
93ceaa52c4 |
|
@ -26,7 +26,7 @@ module.exports = {
|
|||
caughtErrorsIgnorePattern: '^_',
|
||||
},
|
||||
],
|
||||
'unused-imports/no-unused-imports': 'error',
|
||||
'unused-imports/no-unused-imports': 'warn',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
@ -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, '-')
|
||||
|
|
|
@ -10,6 +10,7 @@ export type AnyOutcomeType =
|
|||
| PseudoNumeric
|
||||
| FreeResponse
|
||||
| Numeric
|
||||
|
||||
export type AnyContractType =
|
||||
| (CPMM & Binary)
|
||||
| (CPMM & PseudoNumeric)
|
||||
|
|
|
@ -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',
|
||||
}
|
||||
|
|
|
@ -70,7 +70,7 @@ export const PROD_CONFIG: EnvConfig = {
|
|||
appId: '1:128925704902:web:f61f86944d8ffa2a642dc7',
|
||||
measurementId: 'G-SSFK1Q138D',
|
||||
},
|
||||
twitchBotEndpoint: 'https://twitch-bot-nggbo3neva-uc.a.run.app',
|
||||
twitchBotEndpoint: 'https://twitch-bot.manifold.markets',
|
||||
cloudRunId: 'nggbo3neva',
|
||||
cloudRunRegion: 'uc',
|
||||
adminEmails: [
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
export type Like = {
|
||||
id: string // will be id of the object liked, i.e. contract.id
|
||||
userId: string
|
||||
type: 'contract'
|
||||
type: 'contract' | 'post'
|
||||
createdTime: number
|
||||
tipTxnId?: string // only holds most recent tip txn id
|
||||
}
|
||||
export const LIKE_TIP_AMOUNT = 10
|
||||
export const TIP_UNDO_DURATION = 2000
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -13,6 +13,9 @@ export type Post = {
|
|||
creatorName: string
|
||||
creatorUsername: string
|
||||
creatorAvatarUrl?: string
|
||||
|
||||
likedByUserIds?: string[]
|
||||
likedByUserCount?: number
|
||||
}
|
||||
|
||||
export type DateDoc = Post & {
|
||||
|
|
|
@ -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'
|
||||
|
@ -51,6 +52,26 @@ export function parseMentions(data: JSONContent): string[] {
|
|||
return uniq(mentions)
|
||||
}
|
||||
|
||||
// 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,
|
||||
|
@ -78,6 +99,8 @@ const stringParseExts = [
|
|||
renderText: ({ node }) =>
|
||||
'[embed]' + node.attrs.src ? `(${node.attrs.src})` : '',
|
||||
}),
|
||||
skippableComponent('gridCardsComponent'),
|
||||
skippableComponent('staticReactEmbedComponent'),
|
||||
TiptapTweet.extend({ renderText: () => '[tweet]' }),
|
||||
TiptapSpoiler.extend({ renderHTML: () => ['span', '[spoiler]', 0] }),
|
||||
]
|
||||
|
@ -86,3 +109,7 @@ export function richTextToString(text?: JSONContent) {
|
|||
if (!text) return ''
|
||||
return generateText(text, stringParseExts)
|
||||
}
|
||||
|
||||
export function htmlToRichText(html: string) {
|
||||
return generateJSON(html, stringParseExts)
|
||||
}
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -110,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;
|
||||
|
|
|
@ -26,7 +26,7 @@ module.exports = {
|
|||
caughtErrorsIgnorePattern: '^_',
|
||||
},
|
||||
],
|
||||
'unused-imports/no-unused-imports': 'error',
|
||||
'unused-imports/no-unused-imports': 'warn',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
@ -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
105
functions/src/create-comment.ts
Normal 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 }
|
||||
})
|
|
@ -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(
|
||||
|
|
|
@ -103,6 +103,7 @@ export const createpost = newEndpoint({}, async (req, auth) => {
|
|||
creatorName: creator.name,
|
||||
creatorUsername: creator.username,
|
||||
creatorAvatarUrl: creator.avatarUrl,
|
||||
itemType: 'post',
|
||||
})
|
||||
|
||||
await postRef.create(post)
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
24
functions/src/scripts/backfill-subsidy-pool.ts
Normal 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
59
functions/src/scripts/resolve-markets-again.ts
Normal 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.`)
|
||||
}
|
|
@ -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)
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -22,8 +22,9 @@ module.exports = {
|
|||
'@next/next/no-typos': 'off',
|
||||
'linebreak-style': ['error', 'unix'],
|
||||
'lodash/import-scope': [2, 'member'],
|
||||
'unused-imports/no-unused-imports': 'error',
|
||||
'unused-imports/no-unused-imports': 'warn',
|
||||
},
|
||||
ignorePatterns: ['/public/mtg/*'],
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -100,8 +100,8 @@ export function AnswerItem(props: {
|
|||
</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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -27,6 +27,13 @@ import { CHOICE_ANSWER_COLORS } from '../charts/contract/choice'
|
|||
import { useChartAnswers } from '../charts/contract/choice'
|
||||
import { ChatIcon } from '@heroicons/react/outline'
|
||||
|
||||
export function getAnswerColor(answer: Answer, answersArray: string[]) {
|
||||
const colorIndex = answersArray.indexOf(answer.text)
|
||||
return colorIndex != undefined && colorIndex < CHOICE_ANSWER_COLORS.length
|
||||
? CHOICE_ANSWER_COLORS[colorIndex]
|
||||
: '#B1B1C7'
|
||||
}
|
||||
|
||||
export function AnswersPanel(props: {
|
||||
contract: FreeResponseContract | MultipleChoiceContract
|
||||
onAnswerCommentClick: (answer: Answer) => void
|
||||
|
@ -107,8 +114,8 @@ export function AnswersPanel(props: {
|
|||
? 'checkbox'
|
||||
: undefined
|
||||
|
||||
const colorSortedAnswer = useChartAnswers(contract).map(
|
||||
(value, _index) => value.text
|
||||
const answersArray = useChartAnswers(contract).map(
|
||||
(answer, _index) => answer.text
|
||||
)
|
||||
|
||||
return (
|
||||
|
@ -139,8 +146,8 @@ export function AnswersPanel(props: {
|
|||
key={item.id}
|
||||
answer={item}
|
||||
contract={contract}
|
||||
colorIndex={colorSortedAnswer.indexOf(item.text)}
|
||||
onAnswerCommentClick={onAnswerCommentClick}
|
||||
color={getAnswerColor(item, answersArray)}
|
||||
/>
|
||||
))}
|
||||
{hasZeroBetAnswers && !showAllAnswers && (
|
||||
|
@ -185,18 +192,14 @@ export function AnswersPanel(props: {
|
|||
function OpenAnswer(props: {
|
||||
contract: FreeResponseContract | MultipleChoiceContract
|
||||
answer: Answer
|
||||
colorIndex: number | undefined
|
||||
color: string
|
||||
onAnswerCommentClick: (answer: Answer) => void
|
||||
}) {
|
||||
const { answer, contract, colorIndex, onAnswerCommentClick } = props
|
||||
const { answer, contract, onAnswerCommentClick, color } = 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 && colorIndex < CHOICE_ANSWER_COLORS.length
|
||||
? CHOICE_ANSWER_COLORS[colorIndex] + '55' // semi-transparent
|
||||
: '#B1B1C755'
|
||||
const colorWidth = 100 * Math.max(prob, 0.01)
|
||||
|
||||
return (
|
||||
|
@ -217,7 +220,7 @@ function OpenAnswer(props: {
|
|||
tradingAllowed(contract) ? 'text-greyscale-7' : 'text-greyscale-5'
|
||||
)}
|
||||
style={{
|
||||
background: `linear-gradient(to right, ${color} ${colorWidth}%, #FBFBFF ${colorWidth}%)`,
|
||||
background: `linear-gradient(to right, ${color}90 ${colorWidth}%, #FBFBFF ${colorWidth}%)`,
|
||||
}}
|
||||
>
|
||||
<Row className="z-20 -mb-1 justify-between gap-2 py-2 px-3">
|
||||
|
@ -227,10 +230,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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -271,7 +271,7 @@ export function BuyPanel(props: {
|
|||
})
|
||||
}
|
||||
|
||||
const betDisabled = isSubmitting || !betAmount || error
|
||||
const betDisabled = isSubmitting || !betAmount || !!error
|
||||
|
||||
const { newPool, newP, newBet } = getBinaryCpmmBetInfo(
|
||||
outcome ?? 'YES',
|
||||
|
@ -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>
|
||||
|
@ -785,11 +787,11 @@ function LimitOrderPanel(props: {
|
|||
{user && (
|
||||
<Button
|
||||
size="xl"
|
||||
disabled={betDisabled ? true : false}
|
||||
disabled={betDisabled}
|
||||
color={'indigo'}
|
||||
loading={isSubmitting}
|
||||
className="flex-1"
|
||||
onClick={betDisabled ? undefined : submitBet}
|
||||
onClick={submitBet}
|
||||
>
|
||||
{isSubmitting
|
||||
? 'Submitting...'
|
||||
|
@ -980,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">
|
||||
|
@ -1000,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>
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -25,10 +25,8 @@ export function BetsSummary(props: {
|
|||
const isBinary = outcomeType === 'BINARY'
|
||||
|
||||
const bets = props.userBets.filter((b) => !b.isAnte)
|
||||
const { profitPercent, payout, profit, invested } = getContractBetMetrics(
|
||||
contract,
|
||||
bets
|
||||
)
|
||||
const { profitPercent, payout, profit, invested, hasShares } =
|
||||
getContractBetMetrics(contract, bets)
|
||||
|
||||
const excludeSales = bets.filter((b) => !b.isSold && !b.sale)
|
||||
const yesWinnings = sumBy(excludeSales, (bet) =>
|
||||
|
@ -39,6 +37,7 @@ export function BetsSummary(props: {
|
|||
)
|
||||
|
||||
const position = yesWinnings - noWinnings
|
||||
const outcome = hasShares ? (position > 0 ? 'YES' : 'NO') : undefined
|
||||
|
||||
const prob = isBinary ? getProbability(contract) : 0
|
||||
const expectation = prob * yesWinnings + (1 - prob) * noWinnings
|
||||
|
@ -60,7 +59,9 @@ export function BetsSummary(props: {
|
|||
<Col>
|
||||
<div className="whitespace-nowrap text-sm text-gray-500">
|
||||
Position{' '}
|
||||
<InfoTooltip text="Number of shares you own on net. 1 YES share = M$1 if the market resolves YES." />
|
||||
<InfoTooltip
|
||||
text={`Number of shares you own on net. 1 ${outcome} share = M$1 if the market resolves ${outcome}.`}
|
||||
/>
|
||||
</div>
|
||||
<div className="whitespace-nowrap">
|
||||
{position > 1e-7 ? (
|
||||
|
|
|
@ -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 &&
|
||||
|
|
|
@ -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-5 hover:text-greyscale-6',
|
||||
className
|
||||
)}
|
||||
disabled={disabled || loading}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -8,10 +8,12 @@ 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 { getAnswerColor } from './answers/answers-panel'
|
||||
import { Avatar } from './avatar'
|
||||
import { TextEditor, useTextEditor } from './editor'
|
||||
import { CommentsAnswer } from './feed/feed-answer-comment-group'
|
||||
import { ContractCommentInput } from './feed/feed-comments'
|
||||
import { Col } from './layout/col'
|
||||
import { Row } from './layout/row'
|
||||
import { LoadingIndicator } from './loading-indicator'
|
||||
|
||||
|
@ -81,20 +83,30 @@ export function AnswerCommentInput(props: {
|
|||
contract: Contract<AnyContractType>
|
||||
answerResponse: Answer
|
||||
onCancelAnswerResponse?: () => void
|
||||
answersArray: string[]
|
||||
}) {
|
||||
const { contract, answerResponse, onCancelAnswerResponse } = props
|
||||
const { contract, answerResponse, onCancelAnswerResponse, answersArray } =
|
||||
props
|
||||
const replyTo = {
|
||||
id: answerResponse.id,
|
||||
username: answerResponse.username,
|
||||
}
|
||||
|
||||
const color = getAnswerColor(answerResponse, answersArray)
|
||||
return (
|
||||
<>
|
||||
<CommentsAnswer answer={answerResponse} contract={contract} />
|
||||
<Row>
|
||||
<div className="ml-1">
|
||||
<Curve size={28} strokeWidth={1} color="#D8D8EB" />
|
||||
</div>
|
||||
<Col>
|
||||
<Row className="relative">
|
||||
<div className="absolute -bottom-1 left-1.5">
|
||||
<Curve size={32} strokeWidth={1} color="#D8D8EB" />
|
||||
</div>
|
||||
<div className="ml-[38px]">
|
||||
<CommentsAnswer
|
||||
answer={answerResponse}
|
||||
contract={contract}
|
||||
color={color}
|
||||
/>
|
||||
</div>
|
||||
</Row>
|
||||
<div className="relative w-full pt-1">
|
||||
<ContractCommentInput
|
||||
contract={contract}
|
||||
|
@ -107,7 +119,7 @@ export function AnswerCommentInput(props: {
|
|||
<XCircleIcon className="text-greyscale-5 hover:text-greyscale-6 absolute -top-1 -right-2 h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</Row>
|
||||
</Col>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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'}
|
||||
|
|
|
@ -1,7 +1,11 @@
|
|||
import clsx from 'clsx'
|
||||
import Link from 'next/link'
|
||||
import { Row } from '../layout/row'
|
||||
import { formatLargeNumber, formatPercent } from 'common/util/format'
|
||||
import {
|
||||
formatLargeNumber,
|
||||
formatPercent,
|
||||
formatWithCommas,
|
||||
} from 'common/util/format'
|
||||
import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
|
||||
import { Col } from '../layout/col'
|
||||
import {
|
||||
|
@ -35,10 +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
|
||||
|
@ -396,14 +400,25 @@ 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 =
|
||||
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')}>
|
||||
<AvatarDetails
|
||||
|
@ -418,7 +433,7 @@ 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 && metrics.hasShares && (
|
||||
<Row
|
||||
|
@ -426,19 +441,11 @@ export function ContractCardProbChange(props: {
|
|||
'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>
|
||||
{Math.floor(metrics.totalShares[outcome])} {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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -3,6 +3,7 @@ import {
|
|||
ExclamationIcon,
|
||||
PencilIcon,
|
||||
PlusCircleIcon,
|
||||
UserGroupIcon,
|
||||
} from '@heroicons/react/solid'
|
||||
import clsx from 'clsx'
|
||||
import { Editor } from '@tiptap/react'
|
||||
|
@ -34,6 +35,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,
|
||||
|
@ -49,32 +51,41 @@ export function MiscDetails(props: {
|
|||
hideGroupLink?: boolean
|
||||
}) {
|
||||
const { contract, showTime, hideGroupLink } = props
|
||||
const { volume, closeTime, isResolved, createdTime, resolutionTime } =
|
||||
contract
|
||||
const {
|
||||
closeTime,
|
||||
isResolved,
|
||||
createdTime,
|
||||
resolutionTime,
|
||||
uniqueBettorCount,
|
||||
} = 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 />
|
||||
) : (contract.openCommentBounties ?? 0) > 0 ? (
|
||||
<BountiedContractBadge />
|
||||
) : volume > 0 || !isNew ? (
|
||||
<Row className={'shrink-0'}>{formatMoney(volume)} bet</Row>
|
||||
) : !isNew || (uniqueBettorCount ?? 0) > 1 ? (
|
||||
<Row className={'shrink-0'}>
|
||||
<UserGroupIcon className="mr-1 h-4 w-4" />
|
||||
{uniqueBettorCount} trader{uniqueBettorCount !== 1 ? 's' : ''}
|
||||
</Row>
|
||||
) : (
|
||||
<NewContractBadge />
|
||||
)}
|
||||
|
@ -390,6 +401,7 @@ function EditableCloseDate(props: {
|
|||
}) {
|
||||
const { closeTime, contract, isCreator, disabled } = props
|
||||
|
||||
const isClient = useIsClient()
|
||||
const dayJsCloseTime = dayjs(closeTime)
|
||||
const dayJsNow = dayjs()
|
||||
|
||||
|
@ -452,7 +464,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 +491,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')
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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'
|
||||
)
|
||||
|
||||
|
|
|
@ -2,11 +2,11 @@ import { memo, useState } from 'react'
|
|||
import { Pagination } from 'web/components/pagination'
|
||||
import { FeedBet } from '../feed/feed-bets'
|
||||
import { FeedLiquidity } from '../feed/feed-liquidity'
|
||||
import { CommentsAnswer } from '../feed/feed-answer-comment-group'
|
||||
import { FreeResponseComments } from '../feed/feed-answer-comment-group'
|
||||
import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments'
|
||||
import { groupBy, sortBy, sum } from 'lodash'
|
||||
import { Bet } from 'common/bet'
|
||||
import { Contract } from 'common/contract'
|
||||
import { AnyContractType, Contract } from 'common/contract'
|
||||
import { PAST_BETS } from 'common/user'
|
||||
import { ContractBetsTable } from '../bets-list'
|
||||
import { Spacer } from '../layout/spacer'
|
||||
|
@ -35,9 +35,7 @@ import {
|
|||
} 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
|
||||
|
@ -139,95 +137,27 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
|
|||
)
|
||||
const topLevelComments = commentsByParent['_'] ?? []
|
||||
|
||||
const sortRow = comments.length > 0 && (
|
||||
<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') {
|
||||
return (
|
||||
<>
|
||||
<ContractCommentInput className="mb-5" contract={contract} />
|
||||
{sortRow}
|
||||
{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 {
|
||||
return (
|
||||
<>
|
||||
<ContractCommentInput className="mb-5" contract={contract} />
|
||||
{sortRow}
|
||||
|
||||
{topLevelComments.map((parent) => (
|
||||
return (
|
||||
<>
|
||||
<ContractCommentInput className="mb-5" contract={contract} />
|
||||
<SortRow
|
||||
comments={comments}
|
||||
contract={contract}
|
||||
sort={sort}
|
||||
onSortClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
|
||||
/>
|
||||
{contract.outcomeType === 'FREE_RESPONSE' && (
|
||||
<FreeResponseComments
|
||||
contract={contract}
|
||||
answerResponse={answerResponse}
|
||||
onCancelAnswerResponse={onCancelAnswerResponse}
|
||||
topLevelComments={topLevelComments}
|
||||
commentsByParent={commentsByParent}
|
||||
tips={tips}
|
||||
/>
|
||||
)}
|
||||
{contract.outcomeType !== 'FREE_RESPONSE' &&
|
||||
topLevelComments.map((parent) => (
|
||||
<FeedCommentThread
|
||||
key={parent.id}
|
||||
contract={contract}
|
||||
|
@ -239,9 +169,8 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
|
|||
tips={tips}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
const BetsTabContent = memo(function BetsTabContent(props: {
|
||||
|
@ -310,3 +239,33 @@ const BetsTabContent = memo(function BetsTabContent(props: {
|
|||
</>
|
||||
)
|
||||
})
|
||||
|
||||
export function SortRow(props: {
|
||||
comments: ContractComment[]
|
||||
contract: Contract<AnyContractType>
|
||||
sort: 'Best' | 'Newest'
|
||||
onSortClick: () => void
|
||||
}) {
|
||||
const { comments, contract, sort, onSortClick } = props
|
||||
if (comments.length <= 0) {
|
||||
return <></>
|
||||
}
|
||||
return (
|
||||
<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={onSortClick}>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -2,11 +2,11 @@ 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'
|
||||
import { LikeMarketButton } from 'web/components/contract/like-market-button'
|
||||
import { LikeItemButton } from 'web/components/contract/like-item-button'
|
||||
import { ContractInfoDialog } from 'web/components/contract/contract-info-dialog'
|
||||
import { Tooltip } from '../tooltip'
|
||||
|
||||
|
@ -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} />
|
||||
<LikeItemButton item={contract} user={user} itemType={'contract'} />
|
||||
|
||||
<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} />
|
||||
|
|
71
web/components/contract/like-item-button.tsx
Normal file
71
web/components/contract/like-item-button.tsx
Normal file
|
@ -0,0 +1,71 @@
|
|||
import React, { useMemo, useState } from 'react'
|
||||
import { User } from 'common/user'
|
||||
import { useUserLikes } from 'web/hooks/use-likes'
|
||||
import toast from 'react-hot-toast'
|
||||
import { likeItem } from 'web/lib/firebase/likes'
|
||||
import { LIKE_TIP_AMOUNT, TIP_UNDO_DURATION } from 'common/like'
|
||||
import { firebaseLogin } from 'web/lib/firebase/users'
|
||||
import { useItemTipTxns } from 'web/hooks/use-tip-txns'
|
||||
import { sum } from 'lodash'
|
||||
import { TipButton } from './tip-button'
|
||||
import { Contract } from 'common/contract'
|
||||
import { Post } from 'common/post'
|
||||
import { TipToast } from '../tipper'
|
||||
|
||||
export function LikeItemButton(props: {
|
||||
item: Contract | Post
|
||||
user: User | null | undefined
|
||||
itemType: string
|
||||
}) {
|
||||
const { item, user, itemType } = props
|
||||
|
||||
const tips = useItemTipTxns(item.id)
|
||||
|
||||
const totalTipped = useMemo(() => {
|
||||
return sum(tips.map((tip) => tip.amount))
|
||||
}, [tips])
|
||||
|
||||
const likes = useUserLikes(user?.id)
|
||||
|
||||
const [isLiking, setIsLiking] = useState(false)
|
||||
|
||||
const userLikedItemIds = likes
|
||||
?.filter((l) => l.type === 'contract' || l.type === 'post')
|
||||
.map((l) => l.id)
|
||||
|
||||
const onLike = async () => {
|
||||
if (!user) return firebaseLogin()
|
||||
|
||||
setIsLiking(true)
|
||||
|
||||
const timeoutId = setTimeout(() => {
|
||||
likeItem(user, item, itemType).catch(() => setIsLiking(false))
|
||||
}, 3000)
|
||||
toast.custom(
|
||||
() => (
|
||||
<TipToast
|
||||
userName={item.creatorUsername}
|
||||
onUndoClick={() => {
|
||||
clearTimeout(timeoutId)
|
||||
}}
|
||||
/>
|
||||
),
|
||||
{ duration: TIP_UNDO_DURATION }
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<TipButton
|
||||
onClick={onLike}
|
||||
tipAmount={LIKE_TIP_AMOUNT}
|
||||
totalTipped={totalTipped}
|
||||
userTipped={
|
||||
!!user &&
|
||||
(isLiking ||
|
||||
userLikedItemIds?.includes(item.id) ||
|
||||
(!likes && !!item.likedByUserIds?.includes(user.id)))
|
||||
}
|
||||
disabled={item.creatorId === user?.id}
|
||||
/>
|
||||
)
|
||||
}
|
|
@ -1,56 +0,0 @@
|
|||
import React, { useMemo, useState } from 'react'
|
||||
import { Contract } from 'common/contract'
|
||||
import { User } from 'common/user'
|
||||
import { useUserLikes } from 'web/hooks/use-likes'
|
||||
import toast from 'react-hot-toast'
|
||||
import { formatMoney } from 'common/util/format'
|
||||
import { likeContract } from 'web/lib/firebase/likes'
|
||||
import { LIKE_TIP_AMOUNT } from 'common/like'
|
||||
import { firebaseLogin } from 'web/lib/firebase/users'
|
||||
import { useMarketTipTxns } from 'web/hooks/use-tip-txns'
|
||||
import { sum } from 'lodash'
|
||||
import { TipButton } from './tip-button'
|
||||
|
||||
export function LikeMarketButton(props: {
|
||||
contract: Contract
|
||||
user: User | null | undefined
|
||||
}) {
|
||||
const { contract, user } = props
|
||||
|
||||
const tips = useMarketTipTxns(contract.id)
|
||||
|
||||
const totalTipped = useMemo(() => {
|
||||
return sum(tips.map((tip) => tip.amount))
|
||||
}, [tips])
|
||||
|
||||
const likes = useUserLikes(user?.id)
|
||||
|
||||
const [isLiking, setIsLiking] = useState(false)
|
||||
|
||||
const userLikedContractIds = likes
|
||||
?.filter((l) => l.type === 'contract')
|
||||
.map((l) => l.id)
|
||||
|
||||
const onLike = async () => {
|
||||
if (!user) return firebaseLogin()
|
||||
|
||||
setIsLiking(true)
|
||||
likeContract(user, contract).catch(() => setIsLiking(false))
|
||||
toast(`You tipped ${contract.creatorName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
|
||||
}
|
||||
|
||||
return (
|
||||
<TipButton
|
||||
onClick={onLike}
|
||||
tipAmount={LIKE_TIP_AMOUNT}
|
||||
totalTipped={totalTipped}
|
||||
userTipped={
|
||||
!!user &&
|
||||
(isLiking ||
|
||||
userLikedContractIds?.includes(contract.id) ||
|
||||
(!likes && !!contract.likedByUserIds?.includes(user.id)))
|
||||
}
|
||||
disabled={contract.creatorId === user?.id}
|
||||
/>
|
||||
)
|
||||
}
|
|
@ -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-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) + '%'}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
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'
|
||||
import Coin from 'web/public/custom-components/coin'
|
||||
|
||||
export function TipButton(props: {
|
||||
tipAmount: number
|
||||
|
@ -14,55 +14,84 @@ 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={
|
||||
disabled
|
||||
? `Tips (${formatMoney(totalTipped)})`
|
||||
? `Total tips ${formatMoney(totalTipped)}`
|
||||
: `Tip ${formatMoney(tipAmount)}`
|
||||
}
|
||||
placement="bottom"
|
||||
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-5 transition-transform disabled:cursor-not-allowed',
|
||||
!disabled ? 'hover:text-greyscale-6' : ''
|
||||
)}
|
||||
onMouseOver={() => {
|
||||
if (!disabled) {
|
||||
setHover(true)
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => setHover(false)}
|
||||
>
|
||||
<Col className={'relative items-center sm:flex-row'}>
|
||||
<HeartIcon
|
||||
<Col className={clsx('relative')}>
|
||||
<div
|
||||
className={clsx(
|
||||
'h-5 w-5',
|
||||
totalTipped > 0 ? 'mr-2' : '',
|
||||
userTipped ? 'fill-teal-500 text-teal-500' : ''
|
||||
'absolute transition-all',
|
||||
hover ? 'left-[6px] -top-[9px]' : 'left-[8px] -top-[10px]'
|
||||
)}
|
||||
>
|
||||
<Coin
|
||||
size={10}
|
||||
color={
|
||||
hover && !userTipped
|
||||
? '#66667C'
|
||||
: userTipped
|
||||
? '#4f46e5'
|
||||
: '#9191a7'
|
||||
}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</div>
|
||||
<TipJar
|
||||
size={18}
|
||||
color={
|
||||
hover && !disabled && !userTipped
|
||||
? '#66667C'
|
||||
: userTipped
|
||||
? '#4f46e5'
|
||||
: '#9191a7'
|
||||
}
|
||||
/>
|
||||
{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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
@ -93,9 +92,10 @@ export function CreatePost(props: { group?: Group }) {
|
|||
|
||||
<Button
|
||||
type="submit"
|
||||
loading={isSubmitting}
|
||||
color="green"
|
||||
size="xl"
|
||||
disabled={isSubmitting || !isValid || upload.isLoading}
|
||||
loading={isSubmitting}
|
||||
disabled={!isValid || upload.isLoading}
|
||||
onClick={async () => {
|
||||
setIsSubmitting(true)
|
||||
await savePost(title)
|
||||
|
|
|
@ -22,6 +22,7 @@ import { linkClass } from './site-link'
|
|||
import { DisplayMention } from './editor/mention'
|
||||
import { DisplayContractMention } from './editor/contract-mention'
|
||||
import GridComponent from './editor/tiptap-grid-cards'
|
||||
import StaticReactEmbedComponent from './editor/tiptap-static-react-embed'
|
||||
|
||||
import Iframe from 'common/util/tiptap-iframe'
|
||||
import TiptapTweet from './editor/tiptap-tweet'
|
||||
|
@ -52,7 +53,7 @@ import { debounce } from 'lodash'
|
|||
|
||||
const DisplayImage = Image.configure({
|
||||
HTMLAttributes: {
|
||||
class: 'max-h-60',
|
||||
class: 'max-h-60 hover:max-h-[120rem] transition-all',
|
||||
},
|
||||
})
|
||||
|
||||
|
@ -81,6 +82,7 @@ export const editorExtensions = (simple = false): Extensions => [
|
|||
DisplayMention,
|
||||
DisplayContractMention,
|
||||
GridComponent,
|
||||
StaticReactEmbedComponent,
|
||||
Iframe,
|
||||
TiptapTweet,
|
||||
TiptapSpoiler.configure({
|
||||
|
@ -90,18 +92,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,
|
||||
|
@ -169,10 +170,6 @@ export function useTextEditor(props: {
|
|||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
editor?.setEditable(!disabled)
|
||||
}, [editor, disabled])
|
||||
|
||||
return { editor, upload }
|
||||
}
|
||||
|
||||
|
@ -263,7 +260,8 @@ 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 */}
|
||||
|
@ -367,6 +365,7 @@ export function RichContent(props: {
|
|||
DisplayMention,
|
||||
DisplayContractMention,
|
||||
GridComponent,
|
||||
StaticReactEmbedComponent,
|
||||
Iframe,
|
||||
TiptapTweet,
|
||||
TiptapSpoiler.configure({
|
||||
|
|
|
@ -14,6 +14,7 @@ const beginsWith = (text: string, query: string) =>
|
|||
export const contractMentionSuggestion: Suggestion = {
|
||||
char: '%',
|
||||
allowSpaces: true,
|
||||
allowedPrefixes: [' '],
|
||||
pluginKey: new PluginKey('contract-mention'),
|
||||
items: async ({ query }) =>
|
||||
orderBy(
|
||||
|
|
|
@ -120,7 +120,10 @@ function DreamTab(props: {
|
|||
<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">Modifiers: {MODIFIERS}</div>
|
||||
<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. */}
|
||||
|
|
|
@ -14,6 +14,7 @@ const beginsWith = (text: string, query: string) =>
|
|||
|
||||
// copied from https://tiptap.dev/api/nodes/mention#usage
|
||||
export const mentionSuggestion: Suggestion = {
|
||||
allowedPrefixes: [' '],
|
||||
items: async ({ query }) =>
|
||||
orderBy(
|
||||
(await getCachedUsers()).filter((u) =>
|
||||
|
|
44
web/components/editor/tiptap-static-react-embed.tsx
Normal file
44
web/components/editor/tiptap-static-react-embed.tsx
Normal file
|
@ -0,0 +1,44 @@
|
|||
import { mergeAttributes, Node } from '@tiptap/core'
|
||||
import React from 'react'
|
||||
import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
|
||||
import { StaticReactEmbed } from '../static-react-embed'
|
||||
|
||||
export default Node.create({
|
||||
name: 'staticReactEmbedComponent',
|
||||
|
||||
group: 'block',
|
||||
|
||||
atom: true,
|
||||
|
||||
addAttributes() {
|
||||
return {
|
||||
embedName: '',
|
||||
}
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: 'static-react-embed-component',
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
return ['static-react-embed-component', mergeAttributes(HTMLAttributes)]
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
return ReactNodeViewRenderer(StaticReactEmbedComponent)
|
||||
},
|
||||
})
|
||||
|
||||
export function StaticReactEmbedComponent(props: any) {
|
||||
const embedName = props.node.attrs.embedName
|
||||
|
||||
return (
|
||||
<NodeViewWrapper className="static-react-embed-component">
|
||||
<StaticReactEmbed embedName={embedName} />
|
||||
</NodeViewWrapper>
|
||||
)
|
||||
}
|
|
@ -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}
|
||||
|
|
|
@ -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(
|
||||
|
@ -36,7 +38,7 @@ export function CopyLinkDateTimeComponent(props: {
|
|||
'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>
|
||||
|
|
|
@ -1,42 +1,154 @@
|
|||
import { Answer } from 'common/answer'
|
||||
import { Contract } from 'common/contract'
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import {
|
||||
Contract,
|
||||
FreeResponseContract,
|
||||
MultipleChoiceContract,
|
||||
} from 'common/contract'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import { Col } from 'web/components/layout/col'
|
||||
import { Row } from 'web/components/layout/row'
|
||||
import { Avatar } from 'web/components/avatar'
|
||||
import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
|
||||
import { useRouter } from 'next/router'
|
||||
import { UserLink } from 'web/components/user-link'
|
||||
import { FeedCommentThread } from './feed-comments'
|
||||
import { AnswerCommentInput } from '../comment-input'
|
||||
import { ContractComment } from 'common/comment'
|
||||
import { Dictionary, sortBy } from 'lodash'
|
||||
import { getAnswerColor } from '../answers/answers-panel'
|
||||
import Curve from 'web/public/custom-components/curve'
|
||||
import { CommentTipMap } from 'web/hooks/use-tip-txns'
|
||||
import { useChartAnswers } from '../charts/contract/choice'
|
||||
|
||||
export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
|
||||
const { answer, contract } = props
|
||||
const { username, avatarUrl, name, text } = answer
|
||||
export function CommentsAnswer(props: {
|
||||
answer: Answer
|
||||
contract: Contract
|
||||
color: string
|
||||
}) {
|
||||
const { answer, contract, color } = props
|
||||
const { username, name, text } = answer
|
||||
const answerElementId = `answer-${answer.id}`
|
||||
const router = useRouter()
|
||||
const highlighted = router.asPath.endsWith(`#${answerElementId}`)
|
||||
|
||||
const { isReady, asPath } = useRouter()
|
||||
const [highlighted, setHighlighted] = useState(false)
|
||||
const answerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (highlighted && answerRef.current != null) {
|
||||
if (isReady && asPath.endsWith(`#${answerElementId}`)) {
|
||||
setHighlighted(true)
|
||||
}
|
||||
}, [isReady, asPath, answerElementId])
|
||||
|
||||
useEffect(() => {
|
||||
if (highlighted && answerRef.current) {
|
||||
answerRef.current.scrollIntoView(true)
|
||||
}
|
||||
}, [highlighted])
|
||||
|
||||
return (
|
||||
<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>
|
||||
<Row>
|
||||
<div
|
||||
className="w-2"
|
||||
style={{
|
||||
background: color ? color : '#B1B1C7',
|
||||
}}
|
||||
/>
|
||||
<Col className="w-fit bg-gray-100 py-1 pl-2 pr-2">
|
||||
<Row className="gap-2">
|
||||
<div className="text-greyscale-4 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>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
export function FreeResponseComments(props: {
|
||||
contract: FreeResponseContract | MultipleChoiceContract
|
||||
answerResponse: Answer | undefined
|
||||
onCancelAnswerResponse?: () => void
|
||||
topLevelComments: ContractComment[]
|
||||
commentsByParent: Dictionary<[ContractComment, ...ContractComment[]]>
|
||||
tips: CommentTipMap
|
||||
}) {
|
||||
const {
|
||||
contract,
|
||||
answerResponse,
|
||||
onCancelAnswerResponse,
|
||||
topLevelComments,
|
||||
commentsByParent,
|
||||
tips,
|
||||
} = props
|
||||
const answersArray = useChartAnswers(contract).map((answer) => answer.text)
|
||||
return (
|
||||
<>
|
||||
{answerResponse && (
|
||||
<AnswerCommentInput
|
||||
contract={contract}
|
||||
answerResponse={answerResponse}
|
||||
onCancelAnswerResponse={onCancelAnswerResponse}
|
||||
answersArray={answersArray}
|
||||
/>
|
||||
)}
|
||||
{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 <></>
|
||||
}
|
||||
const color = getAnswerColor(answer, answersArray)
|
||||
return (
|
||||
<>
|
||||
<Row className="relative">
|
||||
<div className="absolute -bottom-1 left-1.5">
|
||||
<Curve size={32} strokeWidth={1} color="#D8D8EB" />
|
||||
</div>
|
||||
<div className="ml-[38px]">
|
||||
<CommentsAnswer
|
||||
answer={answer}
|
||||
contract={contract}
|
||||
color={color}
|
||||
/>
|
||||
</div>
|
||||
</Row>
|
||||
<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>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -24,7 +24,7 @@ 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 { Button } from '../button'
|
||||
import { IconButton } from '../button'
|
||||
import { ReplyToggle } from '../comments/reply-toggle'
|
||||
|
||||
export type ReplyTo = { id: string; username: string }
|
||||
|
@ -37,7 +37,7 @@ export function FeedCommentThread(props: {
|
|||
}) {
|
||||
const { contract, threadComments, tips, parentComment } = props
|
||||
const [replyTo, setReplyTo] = useState<ReplyTo>()
|
||||
const [seeReplies, setSeeReplies] = useState(false)
|
||||
const [seeReplies, setSeeReplies] = useState(true)
|
||||
|
||||
const user = useUser()
|
||||
const onSubmitComment = useEvent(() => setReplyTo(undefined))
|
||||
|
@ -154,36 +154,46 @@ export function ParentFeedComment(props: {
|
|||
numComments={numComments}
|
||||
onClick={onSeeReplyClick}
|
||||
/>
|
||||
<Row className="grow justify-end gap-2">
|
||||
{onReplyClick && (
|
||||
<Button
|
||||
size={'sm'}
|
||||
className={clsx(
|
||||
'hover:bg-greyscale-2 mt-0 mb-1 max-w-xs px-0 py-0'
|
||||
)}
|
||||
color={'gray-white'}
|
||||
onClick={() => onReplyClick(comment)}
|
||||
>
|
||||
<ReplyIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
)}
|
||||
{showTip && (
|
||||
<Tipper
|
||||
comment={comment}
|
||||
myTip={myTip ?? 0}
|
||||
totalTip={totalTip ?? 0}
|
||||
/>
|
||||
)}
|
||||
{(contract.openCommentBounties ?? 0) > 0 && (
|
||||
<AwardBountyButton comment={comment} contract={contract} />
|
||||
)}
|
||||
</Row>
|
||||
<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
|
||||
|
@ -233,30 +243,14 @@ export const FeedComment = memo(function FeedComment(props: {
|
|||
content={content || text}
|
||||
smallImage
|
||||
/>
|
||||
<Row className="grow justify-end gap-2">
|
||||
{onReplyClick && (
|
||||
<Button
|
||||
size={'sm'}
|
||||
className={clsx(
|
||||
'hover:bg-greyscale-2 mt-0 mb-1 max-w-xs px-0 py-0'
|
||||
)}
|
||||
color={'gray-white'}
|
||||
onClick={() => onReplyClick(comment)}
|
||||
>
|
||||
<ReplyIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
)}
|
||||
{showTip && (
|
||||
<Tipper
|
||||
comment={comment}
|
||||
myTip={myTip ?? 0}
|
||||
totalTip={totalTip ?? 0}
|
||||
/>
|
||||
)}
|
||||
{(contract.openCommentBounties ?? 0) > 0 && (
|
||||
<AwardBountyButton comment={comment} contract={contract} />
|
||||
)}
|
||||
</Row>
|
||||
<CommentActions
|
||||
onReplyClick={onReplyClick}
|
||||
comment={comment}
|
||||
showTip={showTip}
|
||||
myTip={myTip}
|
||||
totalTip={totalTip}
|
||||
contract={contract}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
|
|
|
@ -11,25 +11,19 @@ export function FollowButton(props: {
|
|||
isFollowing: boolean | undefined
|
||||
onFollow: () => void
|
||||
onUnfollow: () => void
|
||||
className?: string
|
||||
}) {
|
||||
const { isFollowing, onFollow, onUnfollow, className } = props
|
||||
const { isFollowing, onFollow, onUnfollow } = props
|
||||
|
||||
const user = useUser()
|
||||
|
||||
if (!user || isFollowing === undefined)
|
||||
return (
|
||||
<Button size="sm" color="gray" className={clsx(className, 'invisible')}>
|
||||
Follow
|
||||
</Button>
|
||||
)
|
||||
if (!user || isFollowing === undefined) return <></>
|
||||
|
||||
if (isFollowing) {
|
||||
return (
|
||||
<Button
|
||||
size="sm"
|
||||
color="gray-outline"
|
||||
className={clsx('my-auto', className)}
|
||||
className="my-auto"
|
||||
onClick={withTracking(onUnfollow, 'unfollow')}
|
||||
>
|
||||
Following
|
||||
|
@ -41,7 +35,7 @@ export function FollowButton(props: {
|
|||
<Button
|
||||
size="sm"
|
||||
color="indigo"
|
||||
className={clsx(className, 'my-auto')}
|
||||
className="my-auto"
|
||||
onClick={withTracking(onFollow, 'follow')}
|
||||
>
|
||||
Follow
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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'}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
@ -267,7 +264,7 @@ export function PinnedItems(props: {
|
|||
</div>
|
||||
)}
|
||||
{pinned.map((element, index) => (
|
||||
<div className="relative mb-4">
|
||||
<div className="relative mb-4" key={element.key}>
|
||||
{element}
|
||||
|
||||
{editMode && <CrossIcon onClick={() => onDeleteClicked(index)} />}
|
||||
|
@ -380,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}
|
||||
/>
|
||||
|
@ -432,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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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')}
|
||||
>
|
||||
|
|
|
@ -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
|
||||
*/
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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}
|
||||
|
|
212
web/components/midterms-maps.tsx
Normal file
212
web/components/midterms-maps.tsx
Normal file
|
@ -0,0 +1,212 @@
|
|||
import { useEffect } from 'react'
|
||||
import { getContractFromSlug } from 'web/lib/firebase/contracts'
|
||||
import {
|
||||
StateElectionMap,
|
||||
StateElectionMarket,
|
||||
} from './usa-map/state-election-map'
|
||||
import { useState } from 'react'
|
||||
import { LoadingIndicator } from './loading-indicator'
|
||||
import { CPMMBinaryContract } from 'common/contract'
|
||||
|
||||
export function MidtermsMaps(props: { mapType: string }) {
|
||||
const { mapType } = props
|
||||
const [contracts, setContracts] = useState<CPMMBinaryContract[] | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const getContracts = async () => {
|
||||
if (props.mapType === 'senate') {
|
||||
const senateContracts = await Promise.all(
|
||||
senateMidterms.map((m) =>
|
||||
getContractFromSlug(m.slug).then((c) => c ?? null)
|
||||
)
|
||||
)
|
||||
setContracts(senateContracts as CPMMBinaryContract[])
|
||||
} else if (props.mapType === 'governor') {
|
||||
const governorContracts = await Promise.all(
|
||||
governorMidterms.map((m) =>
|
||||
getContractFromSlug(m.slug).then((c) => c ?? null)
|
||||
)
|
||||
)
|
||||
setContracts(governorContracts as CPMMBinaryContract[])
|
||||
}
|
||||
}
|
||||
getContracts()
|
||||
}, [props.mapType, setContracts])
|
||||
|
||||
return contracts ? (
|
||||
<StateElectionMap
|
||||
markets={mapType == 'senate' ? senateMidterms : governorMidterms}
|
||||
contracts={contracts}
|
||||
/>
|
||||
) : (
|
||||
<LoadingIndicator />
|
||||
)
|
||||
}
|
||||
|
||||
const senateMidterms: StateElectionMarket[] = [
|
||||
{
|
||||
state: 'AZ',
|
||||
creatorUsername: 'BTE',
|
||||
slug: 'will-blake-masters-win-the-arizona',
|
||||
isWinRepublican: true,
|
||||
},
|
||||
{
|
||||
state: 'OH',
|
||||
creatorUsername: 'BTE',
|
||||
slug: 'will-jd-vance-win-the-ohio-senate-s',
|
||||
isWinRepublican: true,
|
||||
},
|
||||
{
|
||||
state: 'WI',
|
||||
creatorUsername: 'BTE',
|
||||
slug: 'will-ron-johnson-be-reelected-in-th',
|
||||
isWinRepublican: true,
|
||||
},
|
||||
{
|
||||
state: 'FL',
|
||||
creatorUsername: 'BTE',
|
||||
slug: 'will-marco-rubio-be-reelected-to-th',
|
||||
isWinRepublican: true,
|
||||
},
|
||||
{
|
||||
state: 'PA',
|
||||
creatorUsername: 'MattP',
|
||||
slug: 'will-dr-oz-be-elected-to-the-us-sen',
|
||||
isWinRepublican: true,
|
||||
},
|
||||
{
|
||||
state: 'GA',
|
||||
creatorUsername: 'NcyRocks',
|
||||
slug: 'will-a-democrat-win-the-2022-us-sen-3d2432ba6d79',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'NV',
|
||||
creatorUsername: 'NcyRocks',
|
||||
slug: 'will-a-democrat-win-the-2022-us-sen',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'NC',
|
||||
creatorUsername: 'NcyRocks',
|
||||
slug: 'will-a-democrat-win-the-2022-us-sen-6f1a901e1fcf',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'NH',
|
||||
creatorUsername: 'NcyRocks',
|
||||
slug: 'will-a-democrat-win-the-2022-us-sen-23194a72f1b7',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'UT',
|
||||
creatorUsername: 'SG',
|
||||
slug: 'will-mike-lee-win-the-2022-utah-sen',
|
||||
isWinRepublican: true,
|
||||
},
|
||||
{
|
||||
state: 'CO',
|
||||
creatorUsername: 'SG',
|
||||
slug: 'will-michael-bennet-win-the-2022-co',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
]
|
||||
|
||||
const governorMidterms: StateElectionMarket[] = [
|
||||
{
|
||||
state: 'TX',
|
||||
creatorUsername: 'LarsDoucet',
|
||||
slug: 'republicans-will-win-the-2022-texas',
|
||||
isWinRepublican: true,
|
||||
},
|
||||
{
|
||||
state: 'GA',
|
||||
creatorUsername: 'MattP',
|
||||
slug: 'will-stacey-abrams-win-the-2022-geo',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'FL',
|
||||
creatorUsername: 'Tetraspace',
|
||||
slug: 'if-charlie-crist-is-the-democratic',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'PA',
|
||||
creatorUsername: 'JonathanMast',
|
||||
slug: 'will-josh-shapiro-win-the-2022-penn',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'PA',
|
||||
creatorUsername: 'JonathanMast',
|
||||
slug: 'will-josh-shapiro-win-the-2022-penn',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'CO',
|
||||
creatorUsername: 'ScottLawrence',
|
||||
slug: 'will-jared-polis-be-reelected-as-co',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'OR',
|
||||
creatorUsername: 'Tetraspace',
|
||||
slug: 'if-tina-kotek-is-the-2022-democrati',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'MD',
|
||||
creatorUsername: 'Tetraspace',
|
||||
slug: 'if-wes-moore-is-the-2022-democratic',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'AK',
|
||||
creatorUsername: 'SG',
|
||||
slug: 'will-a-republican-win-the-2022-alas',
|
||||
isWinRepublican: true,
|
||||
},
|
||||
{
|
||||
state: 'AZ',
|
||||
creatorUsername: 'SG',
|
||||
slug: 'will-a-republican-win-the-2022-ariz',
|
||||
isWinRepublican: true,
|
||||
},
|
||||
{
|
||||
state: 'AZ',
|
||||
creatorUsername: 'SG',
|
||||
slug: 'will-a-republican-win-the-2022-ariz',
|
||||
isWinRepublican: true,
|
||||
},
|
||||
{
|
||||
state: 'WI',
|
||||
creatorUsername: 'SG',
|
||||
slug: 'will-a-democrat-win-the-2022-wiscon',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'NV',
|
||||
creatorUsername: 'SG',
|
||||
slug: 'will-a-democrat-win-the-2022-nevada',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'KS',
|
||||
creatorUsername: 'SG',
|
||||
slug: 'will-a-democrat-win-the-2022-kansas',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'NV',
|
||||
creatorUsername: 'SG',
|
||||
slug: 'will-a-democrat-win-the-2022-new-me',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
{
|
||||
state: 'ME',
|
||||
creatorUsername: 'SG',
|
||||
slug: 'will-a-democrat-win-the-2022-maine',
|
||||
isWinRepublican: false,
|
||||
},
|
||||
]
|
|
@ -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} />
|
||||
|
||||
|
|
|
@ -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>}
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@ import { useUserLikedContracts } from 'web/hooks/use-likes'
|
|||
import { SiteLink } from 'web/components/site-link'
|
||||
import { Row } from 'web/components/layout/row'
|
||||
import { XIcon } from '@heroicons/react/outline'
|
||||
import { unLikeContract } from 'web/lib/firebase/likes'
|
||||
import { unLikeItem } from 'web/lib/firebase/likes'
|
||||
import { contractPath } from 'web/lib/firebase/contracts'
|
||||
|
||||
export function UserLikesButton(props: { user: User; className?: string }) {
|
||||
|
@ -36,7 +36,7 @@ export function UserLikesButton(props: { user: User; className?: string }) {
|
|||
</SiteLink>
|
||||
<XIcon
|
||||
className="ml-2 h-5 w-5 shrink-0 cursor-pointer"
|
||||
onClick={() => unLikeContract(user.id, likedContract.id)}
|
||||
onClick={() => unLikeItem(user.id, likedContract.id)}
|
||||
/>
|
||||
</Row>
|
||||
))}
|
||||
|
|
|
@ -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 &&
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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
17
web/components/select.tsx
Normal 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>
|
||||
)
|
||||
}
|
|
@ -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 />
|
||||
}
|
|
@ -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>
|
||||
|
|
20
web/components/static-react-embed.tsx
Normal file
20
web/components/static-react-embed.tsx
Normal file
|
@ -0,0 +1,20 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { MidtermsMaps } from './midterms-maps'
|
||||
|
||||
export function StaticReactEmbed(props: { embedName: string }) {
|
||||
const { embedName } = props
|
||||
const [embed, setEmbed] = useState<JSX.Element | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const governorMidtermsMap = <MidtermsMaps mapType="governor" />
|
||||
const senateMidtermsMap = <MidtermsMaps mapType="senate" />
|
||||
|
||||
if (embedName === 'governor-midterms-map') {
|
||||
setEmbed(governorMidtermsMap)
|
||||
} else if (embedName === 'senate-midterms-map') {
|
||||
setEmbed(senateMidtermsMap)
|
||||
}
|
||||
}, [embedName, setEmbed])
|
||||
|
||||
return <div>{embed}</div>
|
||||
}
|
21
web/components/table.tsx
Normal file
21
web/components/table.tsx
Normal 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>
|
||||
)
|
||||
}
|
|
@ -1,6 +1,5 @@
|
|||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useState } from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import { debounce } from 'lodash'
|
||||
|
||||
import { Comment } from 'common/comment'
|
||||
import { User } from 'common/user'
|
||||
|
@ -9,8 +8,10 @@ import { transact } from 'web/lib/firebase/api'
|
|||
import { track } from 'web/lib/service/analytics'
|
||||
import { TipButton } from './contract/tip-button'
|
||||
import { Row } from './layout/row'
|
||||
import { LIKE_TIP_AMOUNT } from 'common/like'
|
||||
import { LIKE_TIP_AMOUNT, TIP_UNDO_DURATION } from 'common/like'
|
||||
import { formatMoney } from 'common/util/format'
|
||||
import { Button } from './button'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export function Tipper(prop: {
|
||||
comment: Comment
|
||||
|
@ -19,24 +20,13 @@ export function Tipper(prop: {
|
|||
}) {
|
||||
const { comment, myTip, totalTip } = prop
|
||||
|
||||
// This is a temporary tipping amount before it actually gets confirmed. This is so tha we dont accidentally tip more than you have
|
||||
const [tempTip, setTempTip] = useState(0)
|
||||
|
||||
const me = useUser()
|
||||
|
||||
const [localTip, setLocalTip] = useState(myTip)
|
||||
|
||||
// listen for user being set
|
||||
const initialized = useRef(false)
|
||||
useEffect(() => {
|
||||
if (myTip && !initialized.current) {
|
||||
setLocalTip(myTip)
|
||||
initialized.current = true
|
||||
}
|
||||
}, [myTip])
|
||||
|
||||
const total = totalTip - myTip + localTip
|
||||
|
||||
// declare debounced function only on first render
|
||||
const [saveTip] = useState(() =>
|
||||
debounce(async (user: User, comment: Comment, change: number) => {
|
||||
const [saveTip] = useState(
|
||||
() => async (user: User, comment: Comment, change: number) => {
|
||||
if (change === 0) {
|
||||
return
|
||||
}
|
||||
|
@ -67,30 +57,88 @@ export function Tipper(prop: {
|
|||
fromId: user.id,
|
||||
toId: comment.userId,
|
||||
})
|
||||
}, 1500)
|
||||
}
|
||||
)
|
||||
// instant save on unrender
|
||||
useEffect(() => () => void saveTip.flush(), [saveTip])
|
||||
|
||||
const addTip = (delta: number) => {
|
||||
setLocalTip(localTip + delta)
|
||||
me && saveTip(me, comment, localTip - myTip + delta)
|
||||
toast(`You tipped ${comment.userName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
|
||||
setTempTip((tempTip) => tempTip + delta)
|
||||
const timeoutId = setTimeout(() => {
|
||||
me &&
|
||||
saveTip(me, comment, delta)
|
||||
.then(() => setTempTip((tempTip) => tempTip - delta))
|
||||
.catch((e) => console.error(e))
|
||||
}, TIP_UNDO_DURATION + 1000)
|
||||
toast.custom(
|
||||
() => (
|
||||
<TipToast
|
||||
userName={comment.userName}
|
||||
onUndoClick={() => {
|
||||
clearTimeout(timeoutId)
|
||||
setTempTip((tempTip) => tempTip - delta)
|
||||
}}
|
||||
/>
|
||||
),
|
||||
{ duration: TIP_UNDO_DURATION }
|
||||
)
|
||||
}
|
||||
|
||||
const canUp =
|
||||
me && comment.userId !== me.id && me.balance >= localTip + LIKE_TIP_AMOUNT
|
||||
me && comment.userId !== me.id && me.balance - tempTip >= LIKE_TIP_AMOUNT
|
||||
|
||||
return (
|
||||
<Row className="items-center gap-0.5">
|
||||
<TipButton
|
||||
tipAmount={LIKE_TIP_AMOUNT}
|
||||
totalTipped={total}
|
||||
totalTipped={totalTip}
|
||||
onClick={() => addTip(+LIKE_TIP_AMOUNT)}
|
||||
userTipped={localTip > 0}
|
||||
userTipped={tempTip > 0 || myTip > 0}
|
||||
disabled={!canUp}
|
||||
isCompact
|
||||
/>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
export function TipToast(props: { userName: string; onUndoClick: () => void }) {
|
||||
const { userName, onUndoClick } = props
|
||||
const [cancelled, setCancelled] = useState(false)
|
||||
|
||||
// There is a strange bug with toast where sometimes if you interact with one popup, the others will not dissappear at the right time, overriding it for now with this
|
||||
const [timedOut, setTimedOut] = useState(false)
|
||||
setTimeout(() => {
|
||||
setTimedOut(true)
|
||||
}, TIP_UNDO_DURATION)
|
||||
if (timedOut) {
|
||||
return <></>
|
||||
}
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-lg bg-white drop-shadow-md">
|
||||
<div
|
||||
className={clsx(
|
||||
'animate-progress-loading absolute bottom-0 z-10 h-1 w-full bg-indigo-600',
|
||||
cancelled ? 'hidden' : ''
|
||||
)}
|
||||
/>
|
||||
<Row className="text-greyscale-6 items-center gap-4 px-4 py-2 text-sm">
|
||||
<div className={clsx(cancelled ? 'hidden' : 'inline')}>
|
||||
Tipping {userName} {formatMoney(LIKE_TIP_AMOUNT)}...
|
||||
</div>
|
||||
<div className={clsx('py-1', cancelled ? 'inline' : 'hidden')}>
|
||||
Cancelled tipping
|
||||
</div>
|
||||
<Button
|
||||
className={clsx(cancelled ? 'hidden' : 'inline')}
|
||||
size="xs"
|
||||
color="gray-outline"
|
||||
onClick={() => {
|
||||
onUndoClick()
|
||||
setCancelled(true)
|
||||
}}
|
||||
disabled={cancelled}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -48,6 +48,7 @@ const BOT_USERNAMES = [
|
|||
'MarketManagerBot',
|
||||
'Botlab',
|
||||
'JuniorBot',
|
||||
'ManifoldDream',
|
||||
]
|
||||
|
||||
function BotBadge() {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,12 +1,17 @@
|
|||
import { GlobalConfig } from 'common/globalConfig'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEffect } from 'react'
|
||||
import { listenForGlobalConfig } from 'web/lib/firebase/globalConfig'
|
||||
import { inMemoryStore, usePersistentState } from './use-persistent-state'
|
||||
|
||||
export const useGlobalConfig = () => {
|
||||
const [globalConfig, setGlobalConfig] = useState<GlobalConfig | null>(null)
|
||||
const [globalConfig, setGlobalConfig] =
|
||||
usePersistentState<GlobalConfig | null>(null, {
|
||||
store: inMemoryStore(),
|
||||
key: 'globalConfig',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
listenForGlobalConfig(setGlobalConfig)
|
||||
}, [])
|
||||
return listenForGlobalConfig(setGlobalConfig)
|
||||
}, [setGlobalConfig])
|
||||
return globalConfig
|
||||
}
|
||||
|
|
7
web/hooks/use-is-client.ts
Normal file
7
web/hooks/use-is-client.ts
Normal file
|
@ -0,0 +1,7 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
|
||||
export const useIsClient = () => {
|
||||
const [isClient, setIsClient] = useState(false)
|
||||
useEffect(() => setIsClient(true), [])
|
||||
return isClient
|
||||
}
|
|
@ -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>
|
||||
|
@ -103,6 +114,7 @@ export const usePersistentState = <T>(
|
|||
if (key != null && store != null) {
|
||||
store.set(key, state)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [key, state])
|
||||
|
||||
if (store?.readsUrl) {
|
||||
|
@ -116,6 +128,7 @@ export const usePersistentState = <T>(
|
|||
const savedValue = key != null ? store.get(key) : undefined
|
||||
setState(savedValue ?? initial)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [router.isReady])
|
||||
}
|
||||
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user