Merge branch 'main' into mention-list-cache
This commit is contained in:
commit
e2593db85a
158
common/calculate-metrics.ts
Normal file
158
common/calculate-metrics.ts
Normal file
|
@ -0,0 +1,158 @@
|
|||
import { last, sortBy, sum, sumBy } from 'lodash'
|
||||
import { calculatePayout } from './calculate'
|
||||
import { Bet } from './bet'
|
||||
import { Contract } from './contract'
|
||||
import { PortfolioMetrics, User } from './user'
|
||||
import { DAY_MS } from './util/time'
|
||||
|
||||
const computeInvestmentValue = (
|
||||
bets: Bet[],
|
||||
contractsDict: { [k: string]: Contract }
|
||||
) => {
|
||||
return sumBy(bets, (bet) => {
|
||||
const contract = contractsDict[bet.contractId]
|
||||
if (!contract || contract.isResolved) return 0
|
||||
if (bet.sale || bet.isSold) return 0
|
||||
|
||||
const payout = calculatePayout(contract, bet, 'MKT')
|
||||
const value = payout - (bet.loanAmount ?? 0)
|
||||
if (isNaN(value)) return 0
|
||||
return value
|
||||
})
|
||||
}
|
||||
|
||||
const computeTotalPool = (userContracts: Contract[], startTime = 0) => {
|
||||
const periodFilteredContracts = userContracts.filter(
|
||||
(contract) => contract.createdTime >= startTime
|
||||
)
|
||||
return sum(
|
||||
periodFilteredContracts.map((contract) => sum(Object.values(contract.pool)))
|
||||
)
|
||||
}
|
||||
|
||||
export const computeVolume = (contractBets: Bet[], since: number) => {
|
||||
return sumBy(contractBets, (b) =>
|
||||
b.createdTime > since && !b.isRedemption ? Math.abs(b.amount) : 0
|
||||
)
|
||||
}
|
||||
|
||||
const calculateProbChangeSince = (descendingBets: Bet[], since: number) => {
|
||||
const newestBet = descendingBets[0]
|
||||
if (!newestBet) return 0
|
||||
|
||||
const betBeforeSince = descendingBets.find((b) => b.createdTime < since)
|
||||
|
||||
if (!betBeforeSince) {
|
||||
const oldestBet = last(descendingBets) ?? newestBet
|
||||
return newestBet.probAfter - oldestBet.probBefore
|
||||
}
|
||||
|
||||
return newestBet.probAfter - betBeforeSince.probAfter
|
||||
}
|
||||
|
||||
export const calculateProbChanges = (descendingBets: Bet[]) => {
|
||||
const now = Date.now()
|
||||
const yesterday = now - DAY_MS
|
||||
const weekAgo = now - 7 * DAY_MS
|
||||
const monthAgo = now - 30 * DAY_MS
|
||||
|
||||
return {
|
||||
day: calculateProbChangeSince(descendingBets, yesterday),
|
||||
week: calculateProbChangeSince(descendingBets, weekAgo),
|
||||
month: calculateProbChangeSince(descendingBets, monthAgo),
|
||||
}
|
||||
}
|
||||
|
||||
export const calculateCreatorVolume = (userContracts: Contract[]) => {
|
||||
const allTimeCreatorVolume = computeTotalPool(userContracts, 0)
|
||||
const monthlyCreatorVolume = computeTotalPool(
|
||||
userContracts,
|
||||
Date.now() - 30 * DAY_MS
|
||||
)
|
||||
const weeklyCreatorVolume = computeTotalPool(
|
||||
userContracts,
|
||||
Date.now() - 7 * DAY_MS
|
||||
)
|
||||
|
||||
const dailyCreatorVolume = computeTotalPool(
|
||||
userContracts,
|
||||
Date.now() - 1 * DAY_MS
|
||||
)
|
||||
|
||||
return {
|
||||
daily: dailyCreatorVolume,
|
||||
weekly: weeklyCreatorVolume,
|
||||
monthly: monthlyCreatorVolume,
|
||||
allTime: allTimeCreatorVolume,
|
||||
}
|
||||
}
|
||||
|
||||
export const calculateNewPortfolioMetrics = (
|
||||
user: User,
|
||||
contractsById: { [k: string]: Contract },
|
||||
currentBets: Bet[]
|
||||
) => {
|
||||
const investmentValue = computeInvestmentValue(currentBets, contractsById)
|
||||
const newPortfolio = {
|
||||
investmentValue: investmentValue,
|
||||
balance: user.balance,
|
||||
totalDeposits: user.totalDeposits,
|
||||
timestamp: Date.now(),
|
||||
userId: user.id,
|
||||
}
|
||||
return newPortfolio
|
||||
}
|
||||
|
||||
const calculateProfitForPeriod = (
|
||||
startTime: number,
|
||||
descendingPortfolio: PortfolioMetrics[],
|
||||
currentProfit: number
|
||||
) => {
|
||||
const startingPortfolio = descendingPortfolio.find(
|
||||
(p) => p.timestamp < startTime
|
||||
)
|
||||
|
||||
if (startingPortfolio === undefined) {
|
||||
return currentProfit
|
||||
}
|
||||
|
||||
const startingProfit = calculateTotalProfit(startingPortfolio)
|
||||
|
||||
return currentProfit - startingProfit
|
||||
}
|
||||
|
||||
const calculateTotalProfit = (portfolio: PortfolioMetrics) => {
|
||||
return portfolio.investmentValue + portfolio.balance - portfolio.totalDeposits
|
||||
}
|
||||
|
||||
export const calculateNewProfit = (
|
||||
portfolioHistory: PortfolioMetrics[],
|
||||
newPortfolio: PortfolioMetrics
|
||||
) => {
|
||||
const allTimeProfit = calculateTotalProfit(newPortfolio)
|
||||
const descendingPortfolio = sortBy(
|
||||
portfolioHistory,
|
||||
(p) => p.timestamp
|
||||
).reverse()
|
||||
|
||||
const newProfit = {
|
||||
daily: calculateProfitForPeriod(
|
||||
Date.now() - 1 * DAY_MS,
|
||||
descendingPortfolio,
|
||||
allTimeProfit
|
||||
),
|
||||
weekly: calculateProfitForPeriod(
|
||||
Date.now() - 7 * DAY_MS,
|
||||
descendingPortfolio,
|
||||
allTimeProfit
|
||||
),
|
||||
monthly: calculateProfitForPeriod(
|
||||
Date.now() - 30 * DAY_MS,
|
||||
descendingPortfolio,
|
||||
allTimeProfit
|
||||
),
|
||||
allTime: allTimeProfit,
|
||||
}
|
||||
|
||||
return newProfit
|
||||
}
|
|
@ -23,10 +23,16 @@ export type Comment<T extends AnyCommentType = AnyCommentType> = {
|
|||
type OnContract = {
|
||||
commentType: 'contract'
|
||||
contractId: string
|
||||
contractSlug: string
|
||||
contractQuestion: string
|
||||
answerOutcome?: string
|
||||
betId?: string
|
||||
|
||||
// denormalized from contract
|
||||
contractSlug: string
|
||||
contractQuestion: string
|
||||
|
||||
// denormalized from bet
|
||||
betAmount?: number
|
||||
betOutcome?: string
|
||||
}
|
||||
|
||||
type OnGroup = {
|
||||
|
|
|
@ -27,10 +27,10 @@ export function contractMetrics(contract: Contract) {
|
|||
export function contractTextDetails(contract: Contract) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const dayjs = require('dayjs')
|
||||
const { closeTime, tags } = contract
|
||||
const { closeTime, groupLinks } = contract
|
||||
const { createdDate, resolvedDate, volumeLabel } = contractMetrics(contract)
|
||||
|
||||
const hashtags = tags.map((tag) => `#${tag}`)
|
||||
const groupHashtags = groupLinks?.slice(0, 5).map((g) => `#${g.name}`)
|
||||
|
||||
return (
|
||||
`${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` +
|
||||
|
@ -40,7 +40,7 @@ export function contractTextDetails(contract: Contract) {
|
|||
).format('MMM D, h:mma')}`
|
||||
: '') +
|
||||
` • ${volumeLabel}` +
|
||||
(hashtags.length > 0 ? ` • ${hashtags.join(' ')}` : '')
|
||||
(groupHashtags ? ` • ${groupHashtags.join(' ')}` : '')
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -92,6 +92,7 @@ export const getOpenGraphProps = (contract: Contract) => {
|
|||
creatorAvatarUrl,
|
||||
description,
|
||||
numericValue,
|
||||
resolution,
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -103,6 +104,7 @@ export type OgCardProps = {
|
|||
creatorUsername: string
|
||||
creatorAvatarUrl?: string
|
||||
numericValue?: string
|
||||
resolution?: string
|
||||
}
|
||||
|
||||
export function buildCardUrl(props: OgCardProps, challenge?: Challenge) {
|
||||
|
@ -113,22 +115,32 @@ export function buildCardUrl(props: OgCardProps, challenge?: Challenge) {
|
|||
creatorOutcome,
|
||||
acceptorOutcome,
|
||||
} = challenge || {}
|
||||
const {
|
||||
probability,
|
||||
numericValue,
|
||||
resolution,
|
||||
creatorAvatarUrl,
|
||||
question,
|
||||
metadata,
|
||||
creatorUsername,
|
||||
creatorName,
|
||||
} = props
|
||||
const { userName, userAvatarUrl } = acceptances?.[0] ?? {}
|
||||
|
||||
const probabilityParam =
|
||||
props.probability === undefined
|
||||
probability === undefined
|
||||
? ''
|
||||
: `&probability=${encodeURIComponent(props.probability ?? '')}`
|
||||
: `&probability=${encodeURIComponent(probability ?? '')}`
|
||||
|
||||
const numericValueParam =
|
||||
props.numericValue === undefined
|
||||
numericValue === undefined
|
||||
? ''
|
||||
: `&numericValue=${encodeURIComponent(props.numericValue ?? '')}`
|
||||
: `&numericValue=${encodeURIComponent(numericValue ?? '')}`
|
||||
|
||||
const creatorAvatarUrlParam =
|
||||
props.creatorAvatarUrl === undefined
|
||||
creatorAvatarUrl === undefined
|
||||
? ''
|
||||
: `&creatorAvatarUrl=${encodeURIComponent(props.creatorAvatarUrl ?? '')}`
|
||||
: `&creatorAvatarUrl=${encodeURIComponent(creatorAvatarUrl ?? '')}`
|
||||
|
||||
const challengeUrlParams = challenge
|
||||
? `&creatorAmount=${creatorAmount}&creatorOutcome=${creatorOutcome}` +
|
||||
|
@ -136,16 +148,21 @@ export function buildCardUrl(props: OgCardProps, challenge?: Challenge) {
|
|||
`&acceptedName=${userName ?? ''}&acceptedAvatarUrl=${userAvatarUrl ?? ''}`
|
||||
: ''
|
||||
|
||||
const resolutionUrlParam = resolution
|
||||
? `&resolution=${encodeURIComponent(resolution)}`
|
||||
: ''
|
||||
|
||||
// URL encode each of the props, then add them as query params
|
||||
return (
|
||||
`https://manifold-og-image.vercel.app/m.png` +
|
||||
`?question=${encodeURIComponent(props.question)}` +
|
||||
`?question=${encodeURIComponent(question)}` +
|
||||
probabilityParam +
|
||||
numericValueParam +
|
||||
`&metadata=${encodeURIComponent(props.metadata)}` +
|
||||
`&creatorName=${encodeURIComponent(props.creatorName)}` +
|
||||
`&metadata=${encodeURIComponent(metadata)}` +
|
||||
`&creatorName=${encodeURIComponent(creatorName)}` +
|
||||
creatorAvatarUrlParam +
|
||||
`&creatorUsername=${encodeURIComponent(props.creatorUsername)}` +
|
||||
challengeUrlParams
|
||||
`&creatorUsername=${encodeURIComponent(creatorUsername)}` +
|
||||
challengeUrlParams +
|
||||
resolutionUrlParam
|
||||
)
|
||||
}
|
||||
|
|
|
@ -87,6 +87,12 @@ export type CPMM = {
|
|||
pool: { [outcome: string]: number }
|
||||
p: number // probability constant in y^p * n^(1-p) = k
|
||||
totalLiquidity: number // in M$
|
||||
prob: number
|
||||
probChanges: {
|
||||
day: number
|
||||
week: number
|
||||
month: number
|
||||
}
|
||||
}
|
||||
|
||||
export type Binary = {
|
||||
|
|
|
@ -34,6 +34,11 @@ export const FIREBASE_CONFIG = ENV_CONFIG.firebaseConfig
|
|||
export const PROJECT_ID = ENV_CONFIG.firebaseConfig.projectId
|
||||
export const IS_PRIVATE_MANIFOLD = ENV_CONFIG.visibility === 'PRIVATE'
|
||||
|
||||
export const AUTH_COOKIE_NAME = `FBUSER_${PROJECT_ID.toUpperCase().replace(
|
||||
/-/g,
|
||||
'_'
|
||||
)}`
|
||||
|
||||
// Manifold's domain or any subdomains thereof
|
||||
export const CORS_ORIGIN_MANIFOLD = new RegExp(
|
||||
'^https?://(?:[a-zA-Z0-9\\-]+\\.)*' + escapeRegExp(ENV_CONFIG.domain) + '$'
|
||||
|
|
|
@ -6,13 +6,11 @@ export type Group = {
|
|||
creatorId: string // User id
|
||||
createdTime: number
|
||||
mostRecentActivityTime: number
|
||||
memberIds: string[] // User ids
|
||||
anyoneCanJoin: boolean
|
||||
contractIds: string[]
|
||||
|
||||
totalContracts: number
|
||||
totalMembers: number
|
||||
aboutPostId?: string
|
||||
chatDisabled?: boolean
|
||||
mostRecentChatActivityTime?: number
|
||||
mostRecentContractAddedTime?: number
|
||||
}
|
||||
export const MAX_GROUP_NAME_LENGTH = 75
|
||||
|
|
|
@ -118,7 +118,7 @@ const getFreeResponseContractLoanUpdate = (
|
|||
contract: FreeResponseContract | MultipleChoiceContract,
|
||||
bets: Bet[]
|
||||
) => {
|
||||
const openBets = bets.filter((bet) => bet.isSold || bet.sale)
|
||||
const openBets = bets.filter((bet) => !bet.isSold && !bet.sale)
|
||||
|
||||
return openBets.map((bet) => {
|
||||
const loanAmount = bet.loanAmount ?? 0
|
||||
|
|
|
@ -123,6 +123,8 @@ const getBinaryCpmmProps = (initialProb: number, ante: number) => {
|
|||
initialProbability: p,
|
||||
p,
|
||||
pool: pool,
|
||||
prob: initialProb,
|
||||
probChanges: { day: 0, week: 0, month: 0 },
|
||||
}
|
||||
|
||||
return system
|
||||
|
|
|
@ -15,6 +15,7 @@ export type Notification = {
|
|||
sourceUserUsername?: string
|
||||
sourceUserAvatarUrl?: string
|
||||
sourceText?: string
|
||||
data?: string
|
||||
|
||||
sourceContractTitle?: string
|
||||
sourceContractCreatorUsername?: string
|
||||
|
|
|
@ -35,7 +35,7 @@ export default Node.create<IframeOptions>({
|
|||
HTMLAttributes: {
|
||||
class: 'iframe-wrapper' + ' ' + wrapperClasses,
|
||||
// Tailwind JIT doesn't seem to pick up `pb-[20rem]`, so we hack this in:
|
||||
style: 'padding-bottom: 20rem;',
|
||||
style: 'padding-bottom: 20rem; ',
|
||||
},
|
||||
}
|
||||
},
|
||||
|
@ -48,6 +48,9 @@ export default Node.create<IframeOptions>({
|
|||
frameborder: {
|
||||
default: 0,
|
||||
},
|
||||
height: {
|
||||
default: 0,
|
||||
},
|
||||
allowfullscreen: {
|
||||
default: this.options.allowFullscreen,
|
||||
parseHTML: () => this.options.allowFullscreen,
|
||||
|
@ -60,6 +63,11 @@ export default Node.create<IframeOptions>({
|
|||
},
|
||||
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
this.options.HTMLAttributes.style =
|
||||
this.options.HTMLAttributes.style +
|
||||
' height: ' +
|
||||
HTMLAttributes.height +
|
||||
';'
|
||||
return [
|
||||
'div',
|
||||
this.options.HTMLAttributes,
|
||||
|
|
|
@ -54,6 +54,10 @@ Returns the authenticated user.
|
|||
|
||||
Gets all groups, in no particular order.
|
||||
|
||||
Parameters:
|
||||
- `availableToUserId`: Optional. if specified, only groups that the user can
|
||||
join and groups they've already joined will be returned.
|
||||
|
||||
Requires no authorization.
|
||||
|
||||
### `GET /v0/groups/[slug]`
|
||||
|
@ -62,12 +66,18 @@ Gets a group by its slug.
|
|||
|
||||
Requires no authorization.
|
||||
|
||||
### `GET /v0/groups/by-id/[id]`
|
||||
### `GET /v0/group/by-id/[id]`
|
||||
|
||||
Gets a group by its unique ID.
|
||||
|
||||
Requires no authorization.
|
||||
|
||||
### `GET /v0/group/by-id/[id]/markets`
|
||||
|
||||
Gets a group's markets by its unique ID.
|
||||
|
||||
Requires no authorization.
|
||||
|
||||
### `GET /v0/markets`
|
||||
|
||||
Lists all markets, ordered by creation date descending.
|
||||
|
|
|
@ -160,25 +160,40 @@ service cloud.firestore {
|
|||
.hasOnly(['isSeen', 'viewTime']);
|
||||
}
|
||||
|
||||
match /groups/{groupId} {
|
||||
match /{somePath=**}/groupMembers/{memberId} {
|
||||
allow read;
|
||||
}
|
||||
|
||||
match /{somePath=**}/groupContracts/{contractId} {
|
||||
allow read;
|
||||
}
|
||||
|
||||
match /groups/{groupId} {
|
||||
allow read;
|
||||
allow update: if (request.auth.uid == resource.data.creatorId || isAdmin())
|
||||
&& request.resource.data.diff(resource.data)
|
||||
.affectedKeys()
|
||||
.hasOnly(['name', 'about', 'contractIds', 'memberIds', 'anyoneCanJoin', 'aboutPostId' ]);
|
||||
allow update: if (request.auth.uid in resource.data.memberIds || resource.data.anyoneCanJoin)
|
||||
&& request.resource.data.diff(resource.data)
|
||||
.affectedKeys()
|
||||
.hasOnly([ 'contractIds', 'memberIds' ]);
|
||||
.hasOnly(['name', 'about', 'anyoneCanJoin', 'aboutPostId' ]);
|
||||
allow delete: if request.auth.uid == resource.data.creatorId;
|
||||
|
||||
function isMember() {
|
||||
return request.auth.uid in get(/databases/$(database)/documents/groups/$(groupId)).data.memberIds;
|
||||
match /groupContracts/{contractId} {
|
||||
allow write: if isGroupMember() || request.auth.uid == get(/databases/$(database)/documents/groups/$(groupId)).data.creatorId
|
||||
}
|
||||
|
||||
match /groupMembers/{memberId}{
|
||||
allow create: if request.auth.uid == get(/databases/$(database)/documents/groups/$(groupId)).data.creatorId || (request.auth.uid == request.resource.data.userId && get(/databases/$(database)/documents/groups/$(groupId)).data.anyoneCanJoin);
|
||||
allow delete: if request.auth.uid == resource.data.userId;
|
||||
}
|
||||
|
||||
function isGroupMember() {
|
||||
return exists(/databases/$(database)/documents/groups/$(groupId)/groupMembers/$(request.auth.uid));
|
||||
}
|
||||
|
||||
match /comments/{commentId} {
|
||||
allow read;
|
||||
allow create: if request.auth != null && commentMatchesUser(request.auth.uid, request.resource.data) && isMember();
|
||||
allow create: if request.auth != null && commentMatchesUser(request.auth.uid, request.resource.data) && isGroupMember();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
match /posts/{postId} {
|
||||
|
|
|
@ -58,13 +58,23 @@ export const creategroup = newEndpoint({}, async (req, auth) => {
|
|||
createdTime: Date.now(),
|
||||
mostRecentActivityTime: Date.now(),
|
||||
// TODO: allow users to add contract ids on group creation
|
||||
contractIds: [],
|
||||
anyoneCanJoin,
|
||||
memberIds,
|
||||
totalContracts: 0,
|
||||
totalMembers: memberIds.length,
|
||||
}
|
||||
|
||||
await groupRef.create(group)
|
||||
|
||||
// create a GroupMemberDoc for each member
|
||||
await Promise.all(
|
||||
memberIds.map((memberId) =>
|
||||
groupRef.collection('groupMembers').doc(memberId).create({
|
||||
userId: memberId,
|
||||
createdTime: Date.now(),
|
||||
})
|
||||
)
|
||||
)
|
||||
|
||||
return { status: 'success', group: group }
|
||||
})
|
||||
|
||||
|
|
|
@ -155,8 +155,14 @@ export const createmarket = newEndpoint({}, async (req, auth) => {
|
|||
}
|
||||
|
||||
group = groupDoc.data() as Group
|
||||
const groupMembersSnap = await firestore
|
||||
.collection(`groups/${groupId}/groupMembers`)
|
||||
.get()
|
||||
const groupMemberDocs = groupMembersSnap.docs.map(
|
||||
(doc) => doc.data() as { userId: string; createdTime: number }
|
||||
)
|
||||
if (
|
||||
!group.memberIds.includes(user.id) &&
|
||||
!groupMemberDocs.map((m) => m.userId).includes(user.id) &&
|
||||
!group.anyoneCanJoin &&
|
||||
group.creatorId !== user.id
|
||||
) {
|
||||
|
@ -227,11 +233,20 @@ export const createmarket = newEndpoint({}, async (req, auth) => {
|
|||
await contractRef.create(contract)
|
||||
|
||||
if (group != null) {
|
||||
if (!group.contractIds.includes(contractRef.id)) {
|
||||
const groupContractsSnap = await firestore
|
||||
.collection(`groups/${groupId}/groupContracts`)
|
||||
.get()
|
||||
const groupContracts = groupContractsSnap.docs.map(
|
||||
(doc) => doc.data() as { contractId: string; createdTime: number }
|
||||
)
|
||||
if (!groupContracts.map((c) => c.contractId).includes(contractRef.id)) {
|
||||
await createGroupLinks(group, [contractRef.id], auth.uid)
|
||||
const groupDocRef = firestore.collection('groups').doc(group.id)
|
||||
groupDocRef.update({
|
||||
contractIds: uniq([...group.contractIds, contractRef.id]),
|
||||
const groupContractRef = firestore
|
||||
.collection(`groups/${groupId}/groupContracts`)
|
||||
.doc(contract.id)
|
||||
await groupContractRef.set({
|
||||
contractId: contract.id,
|
||||
createdTime: Date.now(),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
@ -151,15 +151,6 @@ export const createNotification = async (
|
|||
}
|
||||
}
|
||||
|
||||
const notifyContractCreatorOfUniqueBettorsBonus = async (
|
||||
userToReasonTexts: user_to_reason_texts,
|
||||
userId: string
|
||||
) => {
|
||||
userToReasonTexts[userId] = {
|
||||
reason: 'unique_bettors_on_your_contract',
|
||||
}
|
||||
}
|
||||
|
||||
const userToReasonTexts: user_to_reason_texts = {}
|
||||
// The following functions modify the userToReasonTexts object in place.
|
||||
|
||||
|
@ -192,16 +183,6 @@ export const createNotification = async (
|
|||
sourceContract
|
||||
) {
|
||||
await notifyContractCreator(userToReasonTexts, sourceContract)
|
||||
} else if (
|
||||
sourceType === 'bonus' &&
|
||||
sourceUpdateType === 'created' &&
|
||||
sourceContract
|
||||
) {
|
||||
// Note: the daily bonus won't have a contract attached to it
|
||||
await notifyContractCreatorOfUniqueBettorsBonus(
|
||||
userToReasonTexts,
|
||||
sourceContract.creatorId
|
||||
)
|
||||
}
|
||||
|
||||
await createUsersNotifications(userToReasonTexts)
|
||||
|
@ -737,3 +718,38 @@ export async function filterUserIdsForOnlyFollowerIds(
|
|||
)
|
||||
return userIds.filter((id) => contractFollowersIds.includes(id))
|
||||
}
|
||||
|
||||
export const createUniqueBettorBonusNotification = async (
|
||||
contractCreatorId: string,
|
||||
bettor: User,
|
||||
txnId: string,
|
||||
contract: Contract,
|
||||
amount: number,
|
||||
idempotencyKey: string
|
||||
) => {
|
||||
const notificationRef = firestore
|
||||
.collection(`/users/${contractCreatorId}/notifications`)
|
||||
.doc(idempotencyKey)
|
||||
const notification: Notification = {
|
||||
id: idempotencyKey,
|
||||
userId: contractCreatorId,
|
||||
reason: 'unique_bettors_on_your_contract',
|
||||
createdTime: Date.now(),
|
||||
isSeen: false,
|
||||
sourceId: txnId,
|
||||
sourceType: 'bonus',
|
||||
sourceUpdateType: 'created',
|
||||
sourceUserName: bettor.name,
|
||||
sourceUserUsername: bettor.username,
|
||||
sourceUserAvatarUrl: bettor.avatarUrl,
|
||||
sourceText: amount.toString(),
|
||||
sourceSlug: contract.slug,
|
||||
sourceTitle: contract.question,
|
||||
// Perhaps not necessary, but just in case
|
||||
sourceContractSlug: contract.slug,
|
||||
sourceContractId: contract.id,
|
||||
sourceContractTitle: contract.question,
|
||||
sourceContractCreatorUsername: contract.creatorUsername,
|
||||
}
|
||||
return await notificationRef.set(removeUndefinedProps(notification))
|
||||
}
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import * as admin from 'firebase-admin'
|
||||
import { z } from 'zod'
|
||||
import { uniq } from 'lodash'
|
||||
|
||||
import { PrivateUser, User } from '../../common/user'
|
||||
import { getUser, getUserByUsername, getValues } from './utils'
|
||||
|
@ -17,7 +16,7 @@ import {
|
|||
|
||||
import { track } from './analytics'
|
||||
import { APIError, newEndpoint, validate } from './api'
|
||||
import { Group, NEW_USER_GROUP_SLUGS } from '../../common/group'
|
||||
import { Group } from '../../common/group'
|
||||
import { SUS_STARTING_BALANCE, STARTING_BALANCE } from '../../common/economy'
|
||||
|
||||
const bodySchema = z.object({
|
||||
|
@ -117,23 +116,8 @@ const addUserToDefaultGroups = async (user: User) => {
|
|||
firestore.collection('groups').where('slug', '==', slug)
|
||||
)
|
||||
await firestore
|
||||
.collection('groups')
|
||||
.doc(groups[0].id)
|
||||
.update({
|
||||
memberIds: uniq(groups[0].memberIds.concat(user.id)),
|
||||
})
|
||||
}
|
||||
|
||||
for (const slug of NEW_USER_GROUP_SLUGS) {
|
||||
const groups = await getValues<Group>(
|
||||
firestore.collection('groups').where('slug', '==', slug)
|
||||
)
|
||||
const group = groups[0]
|
||||
await firestore
|
||||
.collection('groups')
|
||||
.doc(group.id)
|
||||
.update({
|
||||
memberIds: uniq(group.memberIds.concat(user.id)),
|
||||
})
|
||||
.collection(`groups/${groups[0].id}/groupMembers`)
|
||||
.doc(user.id)
|
||||
.set({ userId: user.id, createdTime: Date.now() })
|
||||
}
|
||||
}
|
||||
|
|
|
@ -186,7 +186,7 @@ export const sendPersonalFollowupEmail = async (
|
|||
|
||||
const emailBody = `Hi ${firstName},
|
||||
|
||||
Thanks for signing up! I'm one of the cofounders of Manifold Markets, and was wondering how you've found your exprience on the platform so far?
|
||||
Thanks for signing up! I'm one of the cofounders of Manifold Markets, and was wondering how you've found your experience on the platform so far?
|
||||
|
||||
If you haven't already, I encourage you to try creating your own prediction market (https://manifold.markets/create) and joining our Discord chat (https://discord.com/invite/eHQBNBqXuh).
|
||||
|
||||
|
|
|
@ -1,33 +0,0 @@
|
|||
import * as admin from 'firebase-admin'
|
||||
import {
|
||||
APIError,
|
||||
EndpointDefinition,
|
||||
lookupUser,
|
||||
parseCredentials,
|
||||
writeResponseError,
|
||||
} from './api'
|
||||
|
||||
const opts = {
|
||||
method: 'GET',
|
||||
minInstances: 1,
|
||||
concurrency: 100,
|
||||
memory: '2GiB',
|
||||
cpu: 1,
|
||||
} as const
|
||||
|
||||
export const getcustomtoken: EndpointDefinition = {
|
||||
opts,
|
||||
handler: async (req, res) => {
|
||||
try {
|
||||
const credentials = await parseCredentials(req)
|
||||
if (credentials.kind != 'jwt') {
|
||||
throw new APIError(403, 'API keys cannot mint custom tokens.')
|
||||
}
|
||||
const user = await lookupUser(credentials)
|
||||
const token = await admin.auth().createCustomToken(user.uid)
|
||||
res.status(200).json({ token: token })
|
||||
} catch (e) {
|
||||
writeResponseError(e, res)
|
||||
}
|
||||
},
|
||||
}
|
|
@ -21,9 +21,7 @@ export * from './on-follow-user'
|
|||
export * from './on-unfollow-user'
|
||||
export * from './on-create-liquidity-provision'
|
||||
export * from './on-update-group'
|
||||
export * from './on-create-group'
|
||||
export * from './on-update-user'
|
||||
export * from './on-create-comment-on-group'
|
||||
export * from './on-create-txn'
|
||||
export * from './on-delete-group'
|
||||
export * from './score-contracts'
|
||||
|
@ -72,7 +70,6 @@ import { unsubscribe } from './unsubscribe'
|
|||
import { stripewebhook, createcheckoutsession } from './stripe'
|
||||
import { getcurrentuser } from './get-current-user'
|
||||
import { acceptchallenge } from './accept-challenge'
|
||||
import { getcustomtoken } from './get-custom-token'
|
||||
import { createpost } from './create-post'
|
||||
|
||||
const toCloudFunction = ({ opts, handler }: EndpointDefinition) => {
|
||||
|
@ -98,7 +95,6 @@ const stripeWebhookFunction = toCloudFunction(stripewebhook)
|
|||
const createCheckoutSessionFunction = toCloudFunction(createcheckoutsession)
|
||||
const getCurrentUserFunction = toCloudFunction(getcurrentuser)
|
||||
const acceptChallenge = toCloudFunction(acceptchallenge)
|
||||
const getCustomTokenFunction = toCloudFunction(getcustomtoken)
|
||||
const createPostFunction = toCloudFunction(createpost)
|
||||
|
||||
export {
|
||||
|
@ -122,6 +118,5 @@ export {
|
|||
createCheckoutSessionFunction as createcheckoutsession,
|
||||
getCurrentUserFunction as getcurrentuser,
|
||||
acceptChallenge as acceptchallenge,
|
||||
getCustomTokenFunction as getcustomtoken,
|
||||
createPostFunction as createpost,
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@ import { getUser, getValues, isProd, log } from './utils'
|
|||
import {
|
||||
createBetFillNotification,
|
||||
createBettingStreakBonusNotification,
|
||||
createNotification,
|
||||
createUniqueBettorBonusNotification,
|
||||
} from './create-notification'
|
||||
import { filterDefined } from '../../common/util/array'
|
||||
import { Contract } from '../../common/contract'
|
||||
|
@ -54,11 +54,11 @@ export const onCreateBet = functions.firestore
|
|||
log(`Could not find contract ${contractId}`)
|
||||
return
|
||||
}
|
||||
await updateUniqueBettorsAndGiveCreatorBonus(contract, eventId, bet.userId)
|
||||
|
||||
const bettor = await getUser(bet.userId)
|
||||
if (!bettor) return
|
||||
|
||||
await updateUniqueBettorsAndGiveCreatorBonus(contract, eventId, bettor)
|
||||
await notifyFills(bet, contract, eventId, bettor)
|
||||
await updateBettingStreak(bettor, bet, contract, eventId)
|
||||
|
||||
|
@ -126,7 +126,7 @@ const updateBettingStreak = async (
|
|||
const updateUniqueBettorsAndGiveCreatorBonus = async (
|
||||
contract: Contract,
|
||||
eventId: string,
|
||||
bettorId: string
|
||||
bettor: User
|
||||
) => {
|
||||
let previousUniqueBettorIds = contract.uniqueBettorIds
|
||||
|
||||
|
@ -147,13 +147,13 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
|
|||
)
|
||||
}
|
||||
|
||||
const isNewUniqueBettor = !previousUniqueBettorIds.includes(bettorId)
|
||||
const isNewUniqueBettor = !previousUniqueBettorIds.includes(bettor.id)
|
||||
|
||||
const newUniqueBettorIds = uniq([...previousUniqueBettorIds, bettorId])
|
||||
const newUniqueBettorIds = uniq([...previousUniqueBettorIds, bettor.id])
|
||||
// Update contract unique bettors
|
||||
if (!contract.uniqueBettorIds || isNewUniqueBettor) {
|
||||
log(`Got ${previousUniqueBettorIds} unique bettors`)
|
||||
isNewUniqueBettor && log(`And a new unique bettor ${bettorId}`)
|
||||
isNewUniqueBettor && log(`And a new unique bettor ${bettor.id}`)
|
||||
await firestore.collection(`contracts`).doc(contract.id).update({
|
||||
uniqueBettorIds: newUniqueBettorIds,
|
||||
uniqueBettorCount: newUniqueBettorIds.length,
|
||||
|
@ -161,7 +161,7 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
|
|||
}
|
||||
|
||||
// No need to give a bonus for the creator's bet
|
||||
if (!isNewUniqueBettor || bettorId == contract.creatorId) return
|
||||
if (!isNewUniqueBettor || bettor.id == contract.creatorId) return
|
||||
|
||||
// Create combined txn for all new unique bettors
|
||||
const bonusTxnDetails = {
|
||||
|
@ -192,18 +192,13 @@ const updateUniqueBettorsAndGiveCreatorBonus = async (
|
|||
log(`No bonus for user: ${contract.creatorId} - reason:`, result.status)
|
||||
} else {
|
||||
log(`Bonus txn for user: ${contract.creatorId} completed:`, result.txn?.id)
|
||||
await createNotification(
|
||||
await createUniqueBettorBonusNotification(
|
||||
contract.creatorId,
|
||||
bettor,
|
||||
result.txn.id,
|
||||
'bonus',
|
||||
'created',
|
||||
fromUser,
|
||||
eventId + '-bonus',
|
||||
result.txn.amount + '',
|
||||
{
|
||||
contract,
|
||||
slug: contract.slug,
|
||||
title: contract.question,
|
||||
}
|
||||
contract,
|
||||
result.txn.amount,
|
||||
eventId + '-unique-bettor-bonus'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -63,11 +63,15 @@ export const onCreateCommentOnContract = functions
|
|||
.doc(comment.betId)
|
||||
.get()
|
||||
bet = betSnapshot.data() as Bet
|
||||
|
||||
answer =
|
||||
contract.outcomeType === 'FREE_RESPONSE' && contract.answers
|
||||
? contract.answers.find((answer) => answer.id === bet?.outcome)
|
||||
: undefined
|
||||
|
||||
await change.ref.update({
|
||||
betOutcome: bet.outcome,
|
||||
betAmount: bet.amount,
|
||||
})
|
||||
}
|
||||
|
||||
const comments = await getValues<ContractComment>(
|
||||
|
|
|
@ -1,46 +0,0 @@
|
|||
import * as functions from 'firebase-functions'
|
||||
import { GroupComment } from '../../common/comment'
|
||||
import * as admin from 'firebase-admin'
|
||||
import { Group } from '../../common/group'
|
||||
import { User } from '../../common/user'
|
||||
import { createGroupCommentNotification } from './create-notification'
|
||||
const firestore = admin.firestore()
|
||||
|
||||
export const onCreateCommentOnGroup = functions.firestore
|
||||
.document('groups/{groupId}/comments/{commentId}')
|
||||
.onCreate(async (change, context) => {
|
||||
const { eventId } = context
|
||||
const { groupId } = context.params as {
|
||||
groupId: string
|
||||
}
|
||||
|
||||
const comment = change.data() as GroupComment
|
||||
const creatorSnapshot = await firestore
|
||||
.collection('users')
|
||||
.doc(comment.userId)
|
||||
.get()
|
||||
if (!creatorSnapshot.exists) throw new Error('Could not find user')
|
||||
|
||||
const groupSnapshot = await firestore
|
||||
.collection('groups')
|
||||
.doc(groupId)
|
||||
.get()
|
||||
if (!groupSnapshot.exists) throw new Error('Could not find group')
|
||||
|
||||
const group = groupSnapshot.data() as Group
|
||||
await firestore.collection('groups').doc(groupId).update({
|
||||
mostRecentChatActivityTime: comment.createdTime,
|
||||
})
|
||||
|
||||
await Promise.all(
|
||||
group.memberIds.map(async (memberId) => {
|
||||
return await createGroupCommentNotification(
|
||||
creatorSnapshot.data() as User,
|
||||
memberId,
|
||||
comment,
|
||||
group,
|
||||
eventId
|
||||
)
|
||||
})
|
||||
)
|
||||
})
|
|
@ -1,28 +0,0 @@
|
|||
import * as functions from 'firebase-functions'
|
||||
import { getUser } from './utils'
|
||||
import { createNotification } from './create-notification'
|
||||
import { Group } from '../../common/group'
|
||||
|
||||
export const onCreateGroup = functions.firestore
|
||||
.document('groups/{groupId}')
|
||||
.onCreate(async (change, context) => {
|
||||
const group = change.data() as Group
|
||||
const { eventId } = context
|
||||
|
||||
const groupCreator = await getUser(group.creatorId)
|
||||
if (!groupCreator) throw new Error('Could not find group creator')
|
||||
// create notifications for all members of the group
|
||||
await createNotification(
|
||||
group.id,
|
||||
'group',
|
||||
'created',
|
||||
groupCreator,
|
||||
eventId,
|
||||
group.about,
|
||||
{
|
||||
recipients: group.memberIds,
|
||||
slug: group.slug,
|
||||
title: group.name,
|
||||
}
|
||||
)
|
||||
})
|
|
@ -15,21 +15,68 @@ export const onUpdateGroup = functions.firestore
|
|||
if (prevGroup.mostRecentActivityTime !== group.mostRecentActivityTime)
|
||||
return
|
||||
|
||||
if (prevGroup.contractIds.length < group.contractIds.length) {
|
||||
await firestore
|
||||
.collection('groups')
|
||||
.doc(group.id)
|
||||
.update({ mostRecentContractAddedTime: Date.now() })
|
||||
//TODO: create notification with isSeeOnHref set to the group's /group/slug/questions url
|
||||
// but first, let the new /group/slug/chat notification permeate so that we can differentiate between the two
|
||||
}
|
||||
|
||||
await firestore
|
||||
.collection('groups')
|
||||
.doc(group.id)
|
||||
.update({ mostRecentActivityTime: Date.now() })
|
||||
})
|
||||
|
||||
export const onCreateGroupContract = functions.firestore
|
||||
.document('groups/{groupId}/groupContracts/{contractId}')
|
||||
.onCreate(async (change) => {
|
||||
const groupId = change.ref.parent.parent?.id
|
||||
if (groupId)
|
||||
await firestore
|
||||
.collection('groups')
|
||||
.doc(groupId)
|
||||
.update({
|
||||
mostRecentContractAddedTime: Date.now(),
|
||||
totalContracts: admin.firestore.FieldValue.increment(1),
|
||||
})
|
||||
})
|
||||
|
||||
export const onDeleteGroupContract = functions.firestore
|
||||
.document('groups/{groupId}/groupContracts/{contractId}')
|
||||
.onDelete(async (change) => {
|
||||
const groupId = change.ref.parent.parent?.id
|
||||
if (groupId)
|
||||
await firestore
|
||||
.collection('groups')
|
||||
.doc(groupId)
|
||||
.update({
|
||||
mostRecentContractAddedTime: Date.now(),
|
||||
totalContracts: admin.firestore.FieldValue.increment(-1),
|
||||
})
|
||||
})
|
||||
|
||||
export const onCreateGroupMember = functions.firestore
|
||||
.document('groups/{groupId}/groupMembers/{memberId}')
|
||||
.onCreate(async (change) => {
|
||||
const groupId = change.ref.parent.parent?.id
|
||||
if (groupId)
|
||||
await firestore
|
||||
.collection('groups')
|
||||
.doc(groupId)
|
||||
.update({
|
||||
mostRecentActivityTime: Date.now(),
|
||||
totalMembers: admin.firestore.FieldValue.increment(1),
|
||||
})
|
||||
})
|
||||
|
||||
export const onDeleteGroupMember = functions.firestore
|
||||
.document('groups/{groupId}/groupMembers/{memberId}')
|
||||
.onDelete(async (change) => {
|
||||
const groupId = change.ref.parent.parent?.id
|
||||
if (groupId)
|
||||
await firestore
|
||||
.collection('groups')
|
||||
.doc(groupId)
|
||||
.update({
|
||||
mostRecentActivityTime: Date.now(),
|
||||
totalMembers: admin.firestore.FieldValue.increment(-1),
|
||||
})
|
||||
})
|
||||
|
||||
export async function removeGroupLinks(group: Group, contractIds: string[]) {
|
||||
for (const contractId of contractIds) {
|
||||
const contract = await getContract(contractId)
|
||||
|
|
|
@ -1,108 +0,0 @@
|
|||
import * as admin from 'firebase-admin'
|
||||
|
||||
import { initAdmin } from './script-init'
|
||||
import { getValues, isProd } from '../utils'
|
||||
import { CATEGORIES_GROUP_SLUG_POSTFIX } from 'common/categories'
|
||||
import { Group, GroupLink } from 'common/group'
|
||||
import { uniq } from 'lodash'
|
||||
import { Contract } from 'common/contract'
|
||||
import { User } from 'common/user'
|
||||
import { filterDefined } from 'common/util/array'
|
||||
import {
|
||||
DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
|
||||
HOUSE_LIQUIDITY_PROVIDER_ID,
|
||||
} from 'common/antes'
|
||||
|
||||
initAdmin()
|
||||
|
||||
const adminFirestore = admin.firestore()
|
||||
|
||||
const convertCategoriesToGroupsInternal = async (categories: string[]) => {
|
||||
for (const category of categories) {
|
||||
const markets = await getValues<Contract>(
|
||||
adminFirestore
|
||||
.collection('contracts')
|
||||
.where('lowercaseTags', 'array-contains', category.toLowerCase())
|
||||
)
|
||||
const slug = category.toLowerCase() + CATEGORIES_GROUP_SLUG_POSTFIX
|
||||
const oldGroup = await getValues<Group>(
|
||||
adminFirestore.collection('groups').where('slug', '==', slug)
|
||||
)
|
||||
if (oldGroup.length > 0) {
|
||||
console.log(`Found old group for ${category}`)
|
||||
await adminFirestore.collection('groups').doc(oldGroup[0].id).delete()
|
||||
}
|
||||
|
||||
const allUsers = await getValues<User>(adminFirestore.collection('users'))
|
||||
const groupUsers = filterDefined(
|
||||
allUsers.map((user: User) => {
|
||||
if (!user.followedCategories || user.followedCategories.length === 0)
|
||||
return user.id
|
||||
if (!user.followedCategories.includes(category.toLowerCase()))
|
||||
return null
|
||||
return user.id
|
||||
})
|
||||
)
|
||||
|
||||
const manifoldAccount = isProd()
|
||||
? HOUSE_LIQUIDITY_PROVIDER_ID
|
||||
: DEV_HOUSE_LIQUIDITY_PROVIDER_ID
|
||||
const newGroupRef = await adminFirestore.collection('groups').doc()
|
||||
const newGroup: Group = {
|
||||
id: newGroupRef.id,
|
||||
name: category,
|
||||
slug,
|
||||
creatorId: manifoldAccount,
|
||||
createdTime: Date.now(),
|
||||
anyoneCanJoin: true,
|
||||
memberIds: [manifoldAccount],
|
||||
about: 'Default group for all things related to ' + category,
|
||||
mostRecentActivityTime: Date.now(),
|
||||
contractIds: markets.map((market) => market.id),
|
||||
chatDisabled: true,
|
||||
}
|
||||
|
||||
await adminFirestore.collection('groups').doc(newGroupRef.id).set(newGroup)
|
||||
// Update group with new memberIds to avoid notifying everyone
|
||||
await adminFirestore
|
||||
.collection('groups')
|
||||
.doc(newGroupRef.id)
|
||||
.update({
|
||||
memberIds: uniq(groupUsers),
|
||||
})
|
||||
|
||||
for (const market of markets) {
|
||||
if (market.groupLinks?.map((l) => l.groupId).includes(newGroup.id))
|
||||
continue // already in that group
|
||||
|
||||
const newGroupLinks = [
|
||||
...(market.groupLinks ?? []),
|
||||
{
|
||||
groupId: newGroup.id,
|
||||
createdTime: Date.now(),
|
||||
slug: newGroup.slug,
|
||||
name: newGroup.name,
|
||||
} as GroupLink,
|
||||
]
|
||||
await adminFirestore
|
||||
.collection('contracts')
|
||||
.doc(market.id)
|
||||
.update({
|
||||
groupSlugs: uniq([...(market.groupSlugs ?? []), newGroup.slug]),
|
||||
groupLinks: newGroupLinks,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function convertCategoriesToGroups() {
|
||||
// const defaultCategories = Object.values(DEFAULT_CATEGORIES)
|
||||
const moreCategories = ['world', 'culture']
|
||||
await convertCategoriesToGroupsInternal(moreCategories)
|
||||
}
|
||||
|
||||
if (require.main === module) {
|
||||
convertCategoriesToGroups()
|
||||
.then(() => process.exit())
|
||||
.catch(console.log)
|
||||
}
|
|
@ -4,21 +4,23 @@ import * as admin from 'firebase-admin'
|
|||
import { initAdmin } from './script-init'
|
||||
import { isProd, log } from '../utils'
|
||||
import { getSlug } from '../create-group'
|
||||
import { Group } from '../../../common/group'
|
||||
import { Group, GroupLink } from '../../../common/group'
|
||||
import { uniq } from 'lodash'
|
||||
import { Contract } from 'common/contract'
|
||||
|
||||
const getTaggedContractIds = async (tag: string) => {
|
||||
const getTaggedContracts = async (tag: string) => {
|
||||
const firestore = admin.firestore()
|
||||
const results = await firestore
|
||||
.collection('contracts')
|
||||
.where('lowercaseTags', 'array-contains', tag.toLowerCase())
|
||||
.get()
|
||||
return results.docs.map((d) => d.id)
|
||||
return results.docs.map((d) => d.data() as Contract)
|
||||
}
|
||||
|
||||
const createGroup = async (
|
||||
name: string,
|
||||
about: string,
|
||||
contractIds: string[]
|
||||
contracts: Contract[]
|
||||
) => {
|
||||
const firestore = admin.firestore()
|
||||
const creatorId = isProd()
|
||||
|
@ -36,21 +38,60 @@ const createGroup = async (
|
|||
about,
|
||||
createdTime: now,
|
||||
mostRecentActivityTime: now,
|
||||
contractIds: contractIds,
|
||||
anyoneCanJoin: true,
|
||||
memberIds: [],
|
||||
totalContracts: contracts.length,
|
||||
totalMembers: 1,
|
||||
}
|
||||
return await groupRef.create(group)
|
||||
await groupRef.create(group)
|
||||
// create a GroupMemberDoc for the creator
|
||||
const memberDoc = groupRef.collection('groupMembers').doc(creatorId)
|
||||
await memberDoc.create({
|
||||
userId: creatorId,
|
||||
createdTime: now,
|
||||
})
|
||||
|
||||
// create GroupContractDocs for each contractId
|
||||
await Promise.all(
|
||||
contracts
|
||||
.map((c) => c.id)
|
||||
.map((contractId) =>
|
||||
groupRef.collection('groupContracts').doc(contractId).create({
|
||||
contractId,
|
||||
createdTime: now,
|
||||
})
|
||||
)
|
||||
)
|
||||
for (const market of contracts) {
|
||||
if (market.groupLinks?.map((l) => l.groupId).includes(group.id)) continue // already in that group
|
||||
|
||||
const newGroupLinks = [
|
||||
...(market.groupLinks ?? []),
|
||||
{
|
||||
groupId: group.id,
|
||||
createdTime: Date.now(),
|
||||
slug: group.slug,
|
||||
name: group.name,
|
||||
} as GroupLink,
|
||||
]
|
||||
await firestore
|
||||
.collection('contracts')
|
||||
.doc(market.id)
|
||||
.update({
|
||||
groupSlugs: uniq([...(market.groupSlugs ?? []), group.slug]),
|
||||
groupLinks: newGroupLinks,
|
||||
})
|
||||
}
|
||||
return { status: 'success', group: group }
|
||||
}
|
||||
|
||||
const convertTagToGroup = async (tag: string, groupName: string) => {
|
||||
log(`Looking up contract IDs with tag ${tag}...`)
|
||||
const contractIds = await getTaggedContractIds(tag)
|
||||
log(`${contractIds.length} contracts found.`)
|
||||
if (contractIds.length > 0) {
|
||||
const contracts = await getTaggedContracts(tag)
|
||||
log(`${contracts.length} contracts found.`)
|
||||
if (contracts.length > 0) {
|
||||
log(`Creating group ${groupName}...`)
|
||||
const about = `Contracts that used to be tagged ${tag}.`
|
||||
const result = await createGroup(groupName, about, contractIds)
|
||||
const result = await createGroup(groupName, about, contracts)
|
||||
log(`Done. Group: `, result)
|
||||
}
|
||||
}
|
||||
|
|
69
functions/src/scripts/denormalize-comment-bet-data.ts
Normal file
69
functions/src/scripts/denormalize-comment-bet-data.ts
Normal file
|
@ -0,0 +1,69 @@
|
|||
// Filling in the bet-based fields on comments.
|
||||
|
||||
import * as admin from 'firebase-admin'
|
||||
import { zip } from 'lodash'
|
||||
import { initAdmin } from './script-init'
|
||||
import {
|
||||
DocumentCorrespondence,
|
||||
findDiffs,
|
||||
describeDiff,
|
||||
applyDiff,
|
||||
} from './denormalize'
|
||||
import { log } from '../utils'
|
||||
import { Transaction } from 'firebase-admin/firestore'
|
||||
|
||||
initAdmin()
|
||||
const firestore = admin.firestore()
|
||||
|
||||
async function getBetComments(transaction: Transaction) {
|
||||
const allComments = await transaction.get(
|
||||
firestore.collectionGroup('comments')
|
||||
)
|
||||
const betComments = allComments.docs.filter((d) => d.get('betId'))
|
||||
log(`Found ${betComments.length} comments associated with bets.`)
|
||||
return betComments
|
||||
}
|
||||
|
||||
async function denormalize() {
|
||||
let hasMore = true
|
||||
while (hasMore) {
|
||||
hasMore = await admin.firestore().runTransaction(async (trans) => {
|
||||
const betComments = await getBetComments(trans)
|
||||
const bets = await Promise.all(
|
||||
betComments.map((doc) =>
|
||||
trans.get(
|
||||
firestore
|
||||
.collection('contracts')
|
||||
.doc(doc.get('contractId'))
|
||||
.collection('bets')
|
||||
.doc(doc.get('betId'))
|
||||
)
|
||||
)
|
||||
)
|
||||
log(`Found ${bets.length} bets associated with comments.`)
|
||||
const mapping = zip(bets, betComments)
|
||||
.map(([bet, comment]): DocumentCorrespondence => {
|
||||
return [bet!, [comment!]] // eslint-disable-line
|
||||
})
|
||||
.filter(([bet, _]) => bet.exists) // dev DB has some invalid bet IDs
|
||||
|
||||
const amountDiffs = findDiffs(mapping, 'amount', 'betAmount')
|
||||
const outcomeDiffs = findDiffs(mapping, 'outcome', 'betOutcome')
|
||||
log(`Found ${amountDiffs.length} comments with mismatched amounts.`)
|
||||
log(`Found ${outcomeDiffs.length} comments with mismatched outcomes.`)
|
||||
const diffs = amountDiffs.concat(outcomeDiffs)
|
||||
diffs.slice(0, 500).forEach((d) => {
|
||||
log(describeDiff(d))
|
||||
applyDiff(trans, d)
|
||||
})
|
||||
if (diffs.length > 500) {
|
||||
console.log(`Applying first 500 because of Firestore limit...`)
|
||||
}
|
||||
return diffs.length > 500
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (require.main === module) {
|
||||
denormalize().catch((e) => console.error(e))
|
||||
}
|
122
functions/src/scripts/update-groups.ts
Normal file
122
functions/src/scripts/update-groups.ts
Normal file
|
@ -0,0 +1,122 @@
|
|||
import * as admin from 'firebase-admin'
|
||||
import { Group } from 'common/group'
|
||||
import { initAdmin } from 'functions/src/scripts/script-init'
|
||||
import { log } from '../utils'
|
||||
|
||||
const getGroups = async () => {
|
||||
const firestore = admin.firestore()
|
||||
const groups = await firestore.collection('groups').get()
|
||||
return groups.docs.map((doc) => doc.data() as Group)
|
||||
}
|
||||
|
||||
// const createContractIdForGroup = async (
|
||||
// groupId: string,
|
||||
// contractId: string
|
||||
// ) => {
|
||||
// const firestore = admin.firestore()
|
||||
// const now = Date.now()
|
||||
// const contractDoc = await firestore
|
||||
// .collection('groups')
|
||||
// .doc(groupId)
|
||||
// .collection('groupContracts')
|
||||
// .doc(contractId)
|
||||
// .get()
|
||||
// if (!contractDoc.exists)
|
||||
// await firestore
|
||||
// .collection('groups')
|
||||
// .doc(groupId)
|
||||
// .collection('groupContracts')
|
||||
// .doc(contractId)
|
||||
// .create({
|
||||
// contractId,
|
||||
// createdTime: now,
|
||||
// })
|
||||
// }
|
||||
|
||||
// const createMemberForGroup = async (groupId: string, userId: string) => {
|
||||
// const firestore = admin.firestore()
|
||||
// const now = Date.now()
|
||||
// const memberDoc = await firestore
|
||||
// .collection('groups')
|
||||
// .doc(groupId)
|
||||
// .collection('groupMembers')
|
||||
// .doc(userId)
|
||||
// .get()
|
||||
// if (!memberDoc.exists)
|
||||
// await firestore
|
||||
// .collection('groups')
|
||||
// .doc(groupId)
|
||||
// .collection('groupMembers')
|
||||
// .doc(userId)
|
||||
// .create({
|
||||
// userId,
|
||||
// createdTime: now,
|
||||
// })
|
||||
// }
|
||||
|
||||
// async function convertGroupFieldsToGroupDocuments() {
|
||||
// const groups = await getGroups()
|
||||
// for (const group of groups) {
|
||||
// log('updating group', group.slug)
|
||||
// const groupRef = admin.firestore().collection('groups').doc(group.id)
|
||||
// const totalMembers = (await groupRef.collection('groupMembers').get()).size
|
||||
// const totalContracts = (await groupRef.collection('groupContracts').get())
|
||||
// .size
|
||||
// if (
|
||||
// totalMembers === group.memberIds?.length &&
|
||||
// totalContracts === group.contractIds?.length
|
||||
// ) {
|
||||
// log('group already converted', group.slug)
|
||||
// continue
|
||||
// }
|
||||
// const contractStart = totalContracts - 1 < 0 ? 0 : totalContracts - 1
|
||||
// const membersStart = totalMembers - 1 < 0 ? 0 : totalMembers - 1
|
||||
// for (const contractId of group.contractIds?.slice(
|
||||
// contractStart,
|
||||
// group.contractIds?.length
|
||||
// ) ?? []) {
|
||||
// await createContractIdForGroup(group.id, contractId)
|
||||
// }
|
||||
// for (const userId of group.memberIds?.slice(
|
||||
// membersStart,
|
||||
// group.memberIds?.length
|
||||
// ) ?? []) {
|
||||
// await createMemberForGroup(group.id, userId)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
async function updateTotalContractsAndMembers() {
|
||||
const groups = await getGroups()
|
||||
for (const group of groups) {
|
||||
log('updating group total contracts and members', group.slug)
|
||||
const groupRef = admin.firestore().collection('groups').doc(group.id)
|
||||
const totalMembers = (await groupRef.collection('groupMembers').get()).size
|
||||
const totalContracts = (await groupRef.collection('groupContracts').get())
|
||||
.size
|
||||
await groupRef.update({
|
||||
totalMembers,
|
||||
totalContracts,
|
||||
})
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
async function removeUnusedMemberAndContractFields() {
|
||||
const groups = await getGroups()
|
||||
for (const group of groups) {
|
||||
log('removing member and contract ids', group.slug)
|
||||
const groupRef = admin.firestore().collection('groups').doc(group.id)
|
||||
await groupRef.update({
|
||||
memberIds: admin.firestore.FieldValue.delete(),
|
||||
contractIds: admin.firestore.FieldValue.delete(),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (require.main === module) {
|
||||
initAdmin()
|
||||
// convertGroupFieldsToGroupDocuments()
|
||||
// updateTotalContractsAndMembers()
|
||||
removeUnusedMemberAndContractFields()
|
||||
}
|
|
@ -26,7 +26,6 @@ import { resolvemarket } from './resolve-market'
|
|||
import { unsubscribe } from './unsubscribe'
|
||||
import { stripewebhook, createcheckoutsession } from './stripe'
|
||||
import { getcurrentuser } from './get-current-user'
|
||||
import { getcustomtoken } from './get-custom-token'
|
||||
import { createpost } from './create-post'
|
||||
|
||||
type Middleware = (req: Request, res: Response, next: NextFunction) => void
|
||||
|
@ -66,7 +65,6 @@ addJsonEndpointRoute('/resolvemarket', resolvemarket)
|
|||
addJsonEndpointRoute('/unsubscribe', unsubscribe)
|
||||
addJsonEndpointRoute('/createcheckoutsession', createcheckoutsession)
|
||||
addJsonEndpointRoute('/getcurrentuser', getcurrentuser)
|
||||
addEndpointRoute('/getcustomtoken', getcustomtoken)
|
||||
addEndpointRoute('/stripewebhook', stripewebhook, express.raw())
|
||||
addEndpointRoute('/createpost', createpost)
|
||||
|
||||
|
|
|
@ -1,43 +1,29 @@
|
|||
import * as functions from 'firebase-functions'
|
||||
import * as admin from 'firebase-admin'
|
||||
import { groupBy, isEmpty, keyBy, sum, sumBy } from 'lodash'
|
||||
import { groupBy, isEmpty, keyBy, last, sortBy } from 'lodash'
|
||||
import { getValues, log, logMemory, writeAsync } from './utils'
|
||||
import { Bet } from '../../common/bet'
|
||||
import { Contract } from '../../common/contract'
|
||||
import { Contract, CPMM } from '../../common/contract'
|
||||
import { PortfolioMetrics, User } from '../../common/user'
|
||||
import { calculatePayout } from '../../common/calculate'
|
||||
import { DAY_MS } from '../../common/util/time'
|
||||
import { last } from 'lodash'
|
||||
import { getLoanUpdates } from '../../common/loans'
|
||||
import {
|
||||
calculateCreatorVolume,
|
||||
calculateNewPortfolioMetrics,
|
||||
calculateNewProfit,
|
||||
calculateProbChanges,
|
||||
computeVolume,
|
||||
} from '../../common/calculate-metrics'
|
||||
import { getProbability } from '../../common/calculate'
|
||||
|
||||
const firestore = admin.firestore()
|
||||
|
||||
const computeInvestmentValue = (
|
||||
bets: Bet[],
|
||||
contractsDict: { [k: string]: Contract }
|
||||
) => {
|
||||
return sumBy(bets, (bet) => {
|
||||
const contract = contractsDict[bet.contractId]
|
||||
if (!contract || contract.isResolved) return 0
|
||||
if (bet.sale || bet.isSold) return 0
|
||||
export const updateMetrics = functions
|
||||
.runWith({ memory: '2GB', timeoutSeconds: 540 })
|
||||
.pubsub.schedule('every 15 minutes')
|
||||
.onRun(updateMetricsCore)
|
||||
|
||||
const payout = calculatePayout(contract, bet, 'MKT')
|
||||
const value = payout - (bet.loanAmount ?? 0)
|
||||
if (isNaN(value)) return 0
|
||||
return value
|
||||
})
|
||||
}
|
||||
|
||||
const computeTotalPool = (userContracts: Contract[], startTime = 0) => {
|
||||
const periodFilteredContracts = userContracts.filter(
|
||||
(contract) => contract.createdTime >= startTime
|
||||
)
|
||||
return sum(
|
||||
periodFilteredContracts.map((contract) => sum(Object.values(contract.pool)))
|
||||
)
|
||||
}
|
||||
|
||||
export const updateMetricsCore = async () => {
|
||||
export async function updateMetricsCore() {
|
||||
const [users, contracts, bets, allPortfolioHistories] = await Promise.all([
|
||||
getValues<User>(firestore.collection('users')),
|
||||
getValues<Contract>(firestore.collection('contracts')),
|
||||
|
@ -59,11 +45,29 @@ export const updateMetricsCore = async () => {
|
|||
.filter((contract) => contract.id)
|
||||
.map((contract) => {
|
||||
const contractBets = betsByContract[contract.id] ?? []
|
||||
const descendingBets = sortBy(
|
||||
contractBets,
|
||||
(bet) => bet.createdTime
|
||||
).reverse()
|
||||
|
||||
let cpmmFields: Partial<CPMM> = {}
|
||||
if (contract.mechanism === 'cpmm-1') {
|
||||
const prob = descendingBets[0]
|
||||
? descendingBets[0].probAfter
|
||||
: getProbability(contract)
|
||||
|
||||
cpmmFields = {
|
||||
prob,
|
||||
probChanges: calculateProbChanges(descendingBets),
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
doc: firestore.collection('contracts').doc(contract.id),
|
||||
fields: {
|
||||
volume24Hours: computeVolume(contractBets, now - DAY_MS),
|
||||
volume7Days: computeVolume(contractBets, now - DAY_MS * 7),
|
||||
...cpmmFields,
|
||||
},
|
||||
}
|
||||
})
|
||||
|
@ -88,23 +92,20 @@ export const updateMetricsCore = async () => {
|
|||
currentBets
|
||||
)
|
||||
const lastPortfolio = last(portfolioHistory)
|
||||
const didProfitChange =
|
||||
const didPortfolioChange =
|
||||
lastPortfolio === undefined ||
|
||||
lastPortfolio.balance !== newPortfolio.balance ||
|
||||
lastPortfolio.totalDeposits !== newPortfolio.totalDeposits ||
|
||||
lastPortfolio.investmentValue !== newPortfolio.investmentValue
|
||||
|
||||
const newProfit = calculateNewProfit(
|
||||
portfolioHistory,
|
||||
newPortfolio,
|
||||
didProfitChange
|
||||
)
|
||||
const newProfit = calculateNewProfit(portfolioHistory, newPortfolio)
|
||||
|
||||
return {
|
||||
user,
|
||||
newCreatorVolume,
|
||||
newPortfolio,
|
||||
newProfit,
|
||||
didProfitChange,
|
||||
didPortfolioChange,
|
||||
}
|
||||
})
|
||||
|
||||
|
@ -120,16 +121,20 @@ export const updateMetricsCore = async () => {
|
|||
const nextLoanByUser = keyBy(userPayouts, (payout) => payout.user.id)
|
||||
|
||||
const userUpdates = userMetrics.map(
|
||||
({ user, newCreatorVolume, newPortfolio, newProfit, didProfitChange }) => {
|
||||
({
|
||||
user,
|
||||
newCreatorVolume,
|
||||
newPortfolio,
|
||||
newProfit,
|
||||
didPortfolioChange,
|
||||
}) => {
|
||||
const nextLoanCached = nextLoanByUser[user.id]?.payout ?? 0
|
||||
return {
|
||||
fieldUpdates: {
|
||||
doc: firestore.collection('users').doc(user.id),
|
||||
fields: {
|
||||
creatorVolumeCached: newCreatorVolume,
|
||||
...(didProfitChange && {
|
||||
profitCached: newProfit,
|
||||
}),
|
||||
profitCached: newProfit,
|
||||
nextLoanCached,
|
||||
},
|
||||
},
|
||||
|
@ -140,11 +145,7 @@ export const updateMetricsCore = async () => {
|
|||
.doc(user.id)
|
||||
.collection('portfolioHistory')
|
||||
.doc(),
|
||||
fields: {
|
||||
...(didProfitChange && {
|
||||
...newPortfolio,
|
||||
}),
|
||||
},
|
||||
fields: didPortfolioChange ? newPortfolio : {},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
@ -162,108 +163,3 @@ export const updateMetricsCore = async () => {
|
|||
)
|
||||
log(`Updated metrics for ${users.length} users.`)
|
||||
}
|
||||
|
||||
const computeVolume = (contractBets: Bet[], since: number) => {
|
||||
return sumBy(contractBets, (b) =>
|
||||
b.createdTime > since && !b.isRedemption ? Math.abs(b.amount) : 0
|
||||
)
|
||||
}
|
||||
|
||||
const calculateProfitForPeriod = (
|
||||
startTime: number,
|
||||
portfolioHistory: PortfolioMetrics[],
|
||||
currentProfit: number
|
||||
) => {
|
||||
const startingPortfolio = [...portfolioHistory]
|
||||
.reverse() // so we search in descending order (most recent first), for efficiency
|
||||
.find((p) => p.timestamp < startTime)
|
||||
|
||||
if (startingPortfolio === undefined) {
|
||||
return 0
|
||||
}
|
||||
|
||||
const startingProfit = calculateTotalProfit(startingPortfolio)
|
||||
|
||||
return currentProfit - startingProfit
|
||||
}
|
||||
|
||||
const calculateTotalProfit = (portfolio: PortfolioMetrics) => {
|
||||
return portfolio.investmentValue + portfolio.balance - portfolio.totalDeposits
|
||||
}
|
||||
|
||||
const calculateCreatorVolume = (userContracts: Contract[]) => {
|
||||
const allTimeCreatorVolume = computeTotalPool(userContracts, 0)
|
||||
const monthlyCreatorVolume = computeTotalPool(
|
||||
userContracts,
|
||||
Date.now() - 30 * DAY_MS
|
||||
)
|
||||
const weeklyCreatorVolume = computeTotalPool(
|
||||
userContracts,
|
||||
Date.now() - 7 * DAY_MS
|
||||
)
|
||||
|
||||
const dailyCreatorVolume = computeTotalPool(
|
||||
userContracts,
|
||||
Date.now() - 1 * DAY_MS
|
||||
)
|
||||
|
||||
return {
|
||||
daily: dailyCreatorVolume,
|
||||
weekly: weeklyCreatorVolume,
|
||||
monthly: monthlyCreatorVolume,
|
||||
allTime: allTimeCreatorVolume,
|
||||
}
|
||||
}
|
||||
|
||||
const calculateNewPortfolioMetrics = (
|
||||
user: User,
|
||||
contractsById: { [k: string]: Contract },
|
||||
currentBets: Bet[]
|
||||
) => {
|
||||
const investmentValue = computeInvestmentValue(currentBets, contractsById)
|
||||
const newPortfolio = {
|
||||
investmentValue: investmentValue,
|
||||
balance: user.balance,
|
||||
totalDeposits: user.totalDeposits,
|
||||
timestamp: Date.now(),
|
||||
userId: user.id,
|
||||
}
|
||||
return newPortfolio
|
||||
}
|
||||
|
||||
const calculateNewProfit = (
|
||||
portfolioHistory: PortfolioMetrics[],
|
||||
newPortfolio: PortfolioMetrics,
|
||||
didProfitChange: boolean
|
||||
) => {
|
||||
if (!didProfitChange) {
|
||||
return {} // early return for performance
|
||||
}
|
||||
|
||||
const allTimeProfit = calculateTotalProfit(newPortfolio)
|
||||
const newProfit = {
|
||||
daily: calculateProfitForPeriod(
|
||||
Date.now() - 1 * DAY_MS,
|
||||
portfolioHistory,
|
||||
allTimeProfit
|
||||
),
|
||||
weekly: calculateProfitForPeriod(
|
||||
Date.now() - 7 * DAY_MS,
|
||||
portfolioHistory,
|
||||
allTimeProfit
|
||||
),
|
||||
monthly: calculateProfitForPeriod(
|
||||
Date.now() - 30 * DAY_MS,
|
||||
portfolioHistory,
|
||||
allTimeProfit
|
||||
),
|
||||
allTime: allTimeProfit,
|
||||
}
|
||||
|
||||
return newProfit
|
||||
}
|
||||
|
||||
export const updateMetrics = functions
|
||||
.runWith({ memory: '2GB', timeoutSeconds: 540 })
|
||||
.pubsub.schedule('every 15 minutes')
|
||||
.onRun(updateMetricsCore)
|
||||
|
|
|
@ -1,85 +1,5 @@
|
|||
import { sanitizeHtml } from './sanitizer'
|
||||
import { ParsedRequest } from './types'
|
||||
|
||||
function getCss(theme: string, fontSize: string) {
|
||||
let background = 'white'
|
||||
let foreground = 'black'
|
||||
let radial = 'lightgray'
|
||||
|
||||
if (theme === 'dark') {
|
||||
background = 'black'
|
||||
foreground = 'white'
|
||||
radial = 'dimgray'
|
||||
}
|
||||
// To use Readex Pro: `font-family: 'Readex Pro', sans-serif;`
|
||||
return `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap');
|
||||
|
||||
body {
|
||||
background: ${background};
|
||||
background-image: radial-gradient(circle at 25px 25px, ${radial} 2%, transparent 0%), radial-gradient(circle at 75px 75px, ${radial} 2%, transparent 0%);
|
||||
background-size: 100px 100px;
|
||||
height: 100vh;
|
||||
font-family: "Readex Pro", sans-serif;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #D400FF;
|
||||
font-family: 'Vera';
|
||||
white-space: pre-wrap;
|
||||
letter-spacing: -5px;
|
||||
}
|
||||
|
||||
code:before, code:after {
|
||||
content: '\`';
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 75px;
|
||||
}
|
||||
|
||||
.plus {
|
||||
color: #BBB;
|
||||
font-family: Times New Roman, Verdana;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
margin: 150px;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin: 0 .05em 0 .1em;
|
||||
vertical-align: -0.1em;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: 'Major Mono Display', monospace;
|
||||
font-size: ${sanitizeHtml(fontSize)};
|
||||
font-style: normal;
|
||||
color: ${foreground};
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.font-major-mono {
|
||||
font-family: "Major Mono Display", monospace;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #11b981;
|
||||
}
|
||||
`
|
||||
}
|
||||
import { getTemplateCss } from './template-css'
|
||||
|
||||
export function getChallengeHtml(parsedReq: ParsedRequest) {
|
||||
const {
|
||||
|
@ -112,7 +32,7 @@ export function getChallengeHtml(parsedReq: ParsedRequest) {
|
|||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<style>
|
||||
${getCss(theme, fontSize)}
|
||||
${getTemplateCss(theme, fontSize)}
|
||||
</style>
|
||||
<body>
|
||||
<div class="px-24">
|
||||
|
|
|
@ -21,6 +21,7 @@ export function parseRequest(req: IncomingMessage) {
|
|||
creatorName,
|
||||
creatorUsername,
|
||||
creatorAvatarUrl,
|
||||
resolution,
|
||||
|
||||
// Challenge attributes:
|
||||
challengerAmount,
|
||||
|
@ -71,6 +72,7 @@ export function parseRequest(req: IncomingMessage) {
|
|||
|
||||
question:
|
||||
getString(question) || 'Will you create a prediction market on Manifold?',
|
||||
resolution: getString(resolution),
|
||||
probability: getString(probability),
|
||||
numericValue: getString(numericValue) || '',
|
||||
metadata: getString(metadata) || 'Jan 1 • M$ 123 pool',
|
||||
|
|
81
og-image/api/_lib/template-css.ts
Normal file
81
og-image/api/_lib/template-css.ts
Normal file
|
@ -0,0 +1,81 @@
|
|||
import { sanitizeHtml } from './sanitizer'
|
||||
|
||||
export function getTemplateCss(theme: string, fontSize: string) {
|
||||
let background = 'white'
|
||||
let foreground = 'black'
|
||||
let radial = 'lightgray'
|
||||
|
||||
if (theme === 'dark') {
|
||||
background = 'black'
|
||||
foreground = 'white'
|
||||
radial = 'dimgray'
|
||||
}
|
||||
// To use Readex Pro: `font-family: 'Readex Pro', sans-serif;`
|
||||
return `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap');
|
||||
|
||||
body {
|
||||
background: ${background};
|
||||
background-image: radial-gradient(circle at 25px 25px, ${radial} 2%, transparent 0%), radial-gradient(circle at 75px 75px, ${radial} 2%, transparent 0%);
|
||||
background-size: 100px 100px;
|
||||
height: 100vh;
|
||||
font-family: "Readex Pro", sans-serif;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #D400FF;
|
||||
font-family: 'Vera';
|
||||
white-space: pre-wrap;
|
||||
letter-spacing: -5px;
|
||||
}
|
||||
|
||||
code:before, code:after {
|
||||
content: '\`';
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 75px;
|
||||
}
|
||||
|
||||
.plus {
|
||||
color: #BBB;
|
||||
font-family: Times New Roman, Verdana;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
margin: 150px;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin: 0 .05em 0 .1em;
|
||||
vertical-align: -0.1em;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: 'Major Mono Display', monospace;
|
||||
font-size: ${sanitizeHtml(fontSize)};
|
||||
font-style: normal;
|
||||
color: ${foreground};
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.font-major-mono {
|
||||
font-family: "Major Mono Display", monospace;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #11b981;
|
||||
}
|
||||
`
|
||||
}
|
|
@ -1,85 +1,5 @@
|
|||
import { sanitizeHtml } from './sanitizer'
|
||||
import { ParsedRequest } from './types'
|
||||
|
||||
function getCss(theme: string, fontSize: string) {
|
||||
let background = 'white'
|
||||
let foreground = 'black'
|
||||
let radial = 'lightgray'
|
||||
|
||||
if (theme === 'dark') {
|
||||
background = 'black'
|
||||
foreground = 'white'
|
||||
radial = 'dimgray'
|
||||
}
|
||||
// To use Readex Pro: `font-family: 'Readex Pro', sans-serif;`
|
||||
return `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap');
|
||||
|
||||
body {
|
||||
background: ${background};
|
||||
background-image: radial-gradient(circle at 25px 25px, ${radial} 2%, transparent 0%), radial-gradient(circle at 75px 75px, ${radial} 2%, transparent 0%);
|
||||
background-size: 100px 100px;
|
||||
height: 100vh;
|
||||
font-family: "Readex Pro", sans-serif;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #D400FF;
|
||||
font-family: 'Vera';
|
||||
white-space: pre-wrap;
|
||||
letter-spacing: -5px;
|
||||
}
|
||||
|
||||
code:before, code:after {
|
||||
content: '\`';
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 75px;
|
||||
}
|
||||
|
||||
.plus {
|
||||
color: #BBB;
|
||||
font-family: Times New Roman, Verdana;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
margin: 150px;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin: 0 .05em 0 .1em;
|
||||
vertical-align: -0.1em;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: 'Major Mono Display', monospace;
|
||||
font-size: ${sanitizeHtml(fontSize)};
|
||||
font-style: normal;
|
||||
color: ${foreground};
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.font-major-mono {
|
||||
font-family: "Major Mono Display", monospace;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #11b981;
|
||||
}
|
||||
`
|
||||
}
|
||||
import { getTemplateCss } from './template-css'
|
||||
|
||||
export function getHtml(parsedReq: ParsedRequest) {
|
||||
const {
|
||||
|
@ -92,6 +12,7 @@ export function getHtml(parsedReq: ParsedRequest) {
|
|||
creatorUsername,
|
||||
creatorAvatarUrl,
|
||||
numericValue,
|
||||
resolution,
|
||||
} = parsedReq
|
||||
const MAX_QUESTION_CHARS = 100
|
||||
const truncatedQuestion =
|
||||
|
@ -99,6 +20,49 @@ export function getHtml(parsedReq: ParsedRequest) {
|
|||
? question.slice(0, MAX_QUESTION_CHARS) + '...'
|
||||
: question
|
||||
const hideAvatar = creatorAvatarUrl ? '' : 'hidden'
|
||||
|
||||
let resolutionColor = 'text-primary'
|
||||
let resolutionString = 'YES'
|
||||
switch (resolution) {
|
||||
case 'YES':
|
||||
break
|
||||
case 'NO':
|
||||
resolutionColor = 'text-red-500'
|
||||
resolutionString = 'NO'
|
||||
break
|
||||
case 'CANCEL':
|
||||
resolutionColor = 'text-yellow-500'
|
||||
resolutionString = 'N/A'
|
||||
break
|
||||
case 'MKT':
|
||||
resolutionColor = 'text-blue-500'
|
||||
resolutionString = numericValue ? numericValue : probability
|
||||
break
|
||||
}
|
||||
|
||||
const resolutionDiv = `
|
||||
<span class='text-center ${resolutionColor}'>
|
||||
<div class="text-8xl">
|
||||
${resolutionString}
|
||||
</div>
|
||||
<div class="text-4xl">${
|
||||
resolution === 'CANCEL' ? '' : 'resolved'
|
||||
}</div>
|
||||
</span>`
|
||||
|
||||
const probabilityDiv = `
|
||||
<span class='text-primary text-center'>
|
||||
<div class="text-8xl">${probability}</div>
|
||||
<div class="text-4xl">chance</div>
|
||||
</span>`
|
||||
|
||||
const numericValueDiv = `
|
||||
<span class='text-blue-500 text-center'>
|
||||
<div class="text-8xl ">${numericValue}</div>
|
||||
<div class="text-4xl">expected</div>
|
||||
</span>
|
||||
`
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
@ -108,7 +72,7 @@ export function getHtml(parsedReq: ParsedRequest) {
|
|||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<style>
|
||||
${getCss(theme, fontSize)}
|
||||
${getTemplateCss(theme, fontSize)}
|
||||
</style>
|
||||
<body>
|
||||
<div class="px-24">
|
||||
|
@ -148,21 +112,22 @@ export function getHtml(parsedReq: ParsedRequest) {
|
|||
<div class="text-indigo-700 text-6xl leading-tight">
|
||||
${truncatedQuestion}
|
||||
</div>
|
||||
<div class="flex flex-col text-primary">
|
||||
<div class="text-8xl">${probability}</div>
|
||||
<div class="text-4xl">${probability !== '' ? 'chance' : ''}</div>
|
||||
<span class='text-blue-500 text-center'>
|
||||
<div class="text-8xl ">${
|
||||
numericValue !== '' && probability === '' ? numericValue : ''
|
||||
}</div>
|
||||
<div class="text-4xl">${numericValue !== '' ? 'expected' : ''}</div>
|
||||
</span>
|
||||
<div class="flex flex-col">
|
||||
${
|
||||
resolution
|
||||
? resolutionDiv
|
||||
: numericValue
|
||||
? numericValueDiv
|
||||
: probability
|
||||
? probabilityDiv
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metadata -->
|
||||
<div class="absolute bottom-16">
|
||||
<div class="text-gray-500 text-3xl">
|
||||
<div class="text-gray-500 text-3xl max-w-[80vw]">
|
||||
${metadata}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -19,6 +19,7 @@ export interface ParsedRequest {
|
|||
creatorName: string
|
||||
creatorUsername: string
|
||||
creatorAvatarUrl: string
|
||||
resolution: string
|
||||
// Challenge attributes:
|
||||
challengerAmount: string
|
||||
challengerOutcome: string
|
||||
|
|
|
@ -84,6 +84,7 @@ export function BuyAmountInput(props: {
|
|||
setError: (error: string | undefined) => void
|
||||
minimumAmount?: number
|
||||
disabled?: boolean
|
||||
showSliderOnMobile?: boolean
|
||||
className?: string
|
||||
inputClassName?: string
|
||||
// Needed to focus the amount input
|
||||
|
@ -94,6 +95,7 @@ export function BuyAmountInput(props: {
|
|||
onChange,
|
||||
error,
|
||||
setError,
|
||||
showSliderOnMobile: showSlider,
|
||||
disabled,
|
||||
className,
|
||||
inputClassName,
|
||||
|
@ -121,15 +123,28 @@ export function BuyAmountInput(props: {
|
|||
}
|
||||
|
||||
return (
|
||||
<AmountInput
|
||||
amount={amount}
|
||||
onChange={onAmountChange}
|
||||
label={ENV_CONFIG.moneyMoniker}
|
||||
error={error}
|
||||
disabled={disabled}
|
||||
className={className}
|
||||
inputClassName={inputClassName}
|
||||
inputRef={inputRef}
|
||||
/>
|
||||
<>
|
||||
<AmountInput
|
||||
amount={amount}
|
||||
onChange={onAmountChange}
|
||||
label={ENV_CONFIG.moneyMoniker}
|
||||
error={error}
|
||||
disabled={disabled}
|
||||
className={className}
|
||||
inputClassName={inputClassName}
|
||||
inputRef={inputRef}
|
||||
/>
|
||||
{showSlider && (
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="200"
|
||||
value={amount ?? 0}
|
||||
onChange={(e) => onAmountChange(parseInt(e.target.value))}
|
||||
className="range range-lg z-40 mb-2 xl:hidden"
|
||||
step="5"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import clsx from 'clsx'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import { XIcon } from '@heroicons/react/solid'
|
||||
|
||||
import { Answer } from 'common/answer'
|
||||
|
@ -132,7 +132,11 @@ export function AnswerBetPanel(props: {
|
|||
</button>
|
||||
)}
|
||||
</Row>
|
||||
<div className="my-3 text-left text-sm text-gray-500">Amount </div>
|
||||
<Row className="my-3 justify-between text-left text-sm text-gray-500">
|
||||
Amount
|
||||
<span>Balance: {formatMoney(user?.balance ?? 0)}</span>
|
||||
</Row>
|
||||
|
||||
<BuyAmountInput
|
||||
inputClassName="w-full max-w-none"
|
||||
amount={betAmount}
|
||||
|
@ -141,6 +145,7 @@ export function AnswerBetPanel(props: {
|
|||
setError={setError}
|
||||
disabled={isSubmitting}
|
||||
inputRef={inputRef}
|
||||
showSliderOnMobile
|
||||
/>
|
||||
|
||||
{(betAmount ?? 0) > 10 &&
|
||||
|
|
|
@ -18,19 +18,20 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
|
|||
}) {
|
||||
const { contract, bets, height } = props
|
||||
const { createdTime, resolutionTime, closeTime, answers } = contract
|
||||
const now = Date.now()
|
||||
|
||||
const { probsByOutcome, sortedOutcomes } = computeProbsByOutcome(
|
||||
bets,
|
||||
contract
|
||||
)
|
||||
|
||||
const isClosed = !!closeTime && Date.now() > closeTime
|
||||
const isClosed = !!closeTime && now > closeTime
|
||||
const latestTime = dayjs(
|
||||
resolutionTime && isClosed
|
||||
? Math.min(resolutionTime, closeTime)
|
||||
: isClosed
|
||||
? closeTime
|
||||
: resolutionTime ?? Date.now()
|
||||
: resolutionTime ?? now
|
||||
)
|
||||
|
||||
const { width } = useWindowSize()
|
||||
|
@ -71,14 +72,14 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
|
|||
const yTickValues = [0, 25, 50, 75, 100]
|
||||
|
||||
const numXTickValues = isLargeWidth ? 5 : 2
|
||||
const startDate = new Date(contract.createdTime)
|
||||
const endDate = dayjs(startDate).add(1, 'hour').isAfter(latestTime)
|
||||
? latestTime.add(1, 'hours').toDate()
|
||||
: latestTime.toDate()
|
||||
const includeMinute = dayjs(endDate).diff(startDate, 'hours') < 2
|
||||
const startDate = dayjs(contract.createdTime)
|
||||
const endDate = startDate.add(1, 'hour').isAfter(latestTime)
|
||||
? latestTime.add(1, 'hours')
|
||||
: latestTime
|
||||
const includeMinute = endDate.diff(startDate, 'hours') < 2
|
||||
|
||||
const multiYear = !dayjs(startDate).isSame(latestTime, 'year')
|
||||
const lessThanAWeek = dayjs(startDate).add(1, 'week').isAfter(latestTime)
|
||||
const multiYear = !startDate.isSame(latestTime, 'year')
|
||||
const lessThanAWeek = startDate.add(1, 'week').isAfter(latestTime)
|
||||
|
||||
return (
|
||||
<div
|
||||
|
@ -96,16 +97,16 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
|
|||
}}
|
||||
xScale={{
|
||||
type: 'time',
|
||||
min: startDate,
|
||||
max: endDate,
|
||||
min: startDate.toDate(),
|
||||
max: endDate.toDate(),
|
||||
}}
|
||||
xFormat={(d) =>
|
||||
formatTime(+d.valueOf(), multiYear, lessThanAWeek, lessThanAWeek)
|
||||
formatTime(now, +d.valueOf(), multiYear, lessThanAWeek, lessThanAWeek)
|
||||
}
|
||||
axisBottom={{
|
||||
tickValues: numXTickValues,
|
||||
format: (time) =>
|
||||
formatTime(+time, multiYear, lessThanAWeek, includeMinute),
|
||||
formatTime(now, +time, multiYear, lessThanAWeek, includeMinute),
|
||||
}}
|
||||
colors={[
|
||||
'#fca5a5', // red-300
|
||||
|
@ -158,23 +159,20 @@ function formatPercent(y: DatumValue) {
|
|||
}
|
||||
|
||||
function formatTime(
|
||||
now: number,
|
||||
time: number,
|
||||
includeYear: boolean,
|
||||
includeHour: boolean,
|
||||
includeMinute: boolean
|
||||
) {
|
||||
const d = dayjs(time)
|
||||
|
||||
if (
|
||||
d.add(1, 'minute').isAfter(Date.now()) &&
|
||||
d.subtract(1, 'minute').isBefore(Date.now())
|
||||
)
|
||||
if (d.add(1, 'minute').isAfter(now) && d.subtract(1, 'minute').isBefore(now))
|
||||
return 'Now'
|
||||
|
||||
let format: string
|
||||
if (d.isSame(Date.now(), 'day')) {
|
||||
if (d.isSame(now, 'day')) {
|
||||
format = '[Today]'
|
||||
} else if (d.add(1, 'day').isSame(Date.now(), 'day')) {
|
||||
} else if (d.add(1, 'day').isSame(now, 'day')) {
|
||||
format = '[Yesterday]'
|
||||
} else {
|
||||
format = 'MMM D'
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import clsx from 'clsx'
|
||||
import { useState } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import Textarea from 'react-expanding-textarea'
|
||||
import { findBestMatch } from 'string-similarity'
|
||||
|
||||
|
@ -120,7 +120,7 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
|
|||
|
||||
return (
|
||||
<Col className="gap-4 rounded">
|
||||
<Col className="flex-1 gap-2">
|
||||
<Col className="flex-1 gap-2 px-4 xl:px-0">
|
||||
<div className="mb-1">Add your answer</div>
|
||||
<Textarea
|
||||
value={text}
|
||||
|
@ -149,7 +149,12 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
|
|||
{text && (
|
||||
<>
|
||||
<Col className="mt-1 gap-2">
|
||||
<div className="text-sm text-gray-500">Bet amount</div>
|
||||
<Row className="my-3 justify-between text-left text-sm text-gray-500">
|
||||
Bet Amount
|
||||
<span className={'sm:hidden'}>
|
||||
Balance: {formatMoney(user?.balance ?? 0)}
|
||||
</span>
|
||||
</Row>{' '}
|
||||
<BuyAmountInput
|
||||
amount={betAmount}
|
||||
onChange={setBetAmount}
|
||||
|
@ -157,6 +162,7 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
|
|||
setError={setAmountError}
|
||||
minimumAmount={1}
|
||||
disabled={isSubmitting}
|
||||
showSliderOnMobile
|
||||
/>
|
||||
</Col>
|
||||
<Col className="gap-3">
|
||||
|
@ -200,7 +206,7 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
|
|||
disabled={!canSubmit}
|
||||
onClick={withTracking(submitAnswer, 'submit answer')}
|
||||
>
|
||||
Submit answer & buy
|
||||
Submit
|
||||
</button>
|
||||
) : (
|
||||
text && (
|
||||
|
|
|
@ -8,17 +8,20 @@ import {
|
|||
getUserAndPrivateUser,
|
||||
setCachedReferralInfoForUser,
|
||||
} from 'web/lib/firebase/users'
|
||||
import { deleteTokenCookies, setTokenCookies } from 'web/lib/firebase/auth'
|
||||
import { createUser } from 'web/lib/firebase/api'
|
||||
import { randomString } from 'common/util/random'
|
||||
import { identifyUser, setUserProperty } from 'web/lib/service/analytics'
|
||||
import { useStateCheckEquality } from 'web/hooks/use-state-check-equality'
|
||||
import { AUTH_COOKIE_NAME } from 'common/envs/constants'
|
||||
import { setCookie } from 'web/lib/util/cookie'
|
||||
|
||||
// Either we haven't looked up the logged in user yet (undefined), or we know
|
||||
// the user is not logged in (null), or we know the user is logged in.
|
||||
type AuthUser = undefined | null | UserAndPrivateUser
|
||||
|
||||
const TEN_YEARS_SECS = 60 * 60 * 24 * 365 * 10
|
||||
const CACHED_USER_KEY = 'CACHED_USER_KEY_V2'
|
||||
|
||||
// Proxy localStorage in case it's not available (eg in incognito iframe)
|
||||
const localStorage =
|
||||
typeof window !== 'undefined'
|
||||
|
@ -38,6 +41,16 @@ const ensureDeviceToken = () => {
|
|||
return deviceToken
|
||||
}
|
||||
|
||||
export const setUserCookie = (cookie: string | undefined) => {
|
||||
const data = setCookie(AUTH_COOKIE_NAME, cookie ?? '', [
|
||||
['path', '/'],
|
||||
['max-age', (cookie === undefined ? 0 : TEN_YEARS_SECS).toString()],
|
||||
['samesite', 'lax'],
|
||||
['secure'],
|
||||
])
|
||||
document.cookie = data
|
||||
}
|
||||
|
||||
export const AuthContext = createContext<AuthUser>(undefined)
|
||||
|
||||
export function AuthProvider(props: {
|
||||
|
@ -54,30 +67,33 @@ export function AuthProvider(props: {
|
|||
}
|
||||
}, [setAuthUser, serverUser])
|
||||
|
||||
useEffect(() => {
|
||||
if (authUser != null) {
|
||||
// Persist to local storage, to reduce login blink next time.
|
||||
// Note: Cap on localStorage size is ~5mb
|
||||
localStorage.setItem(CACHED_USER_KEY, JSON.stringify(authUser))
|
||||
} else {
|
||||
localStorage.removeItem(CACHED_USER_KEY)
|
||||
}
|
||||
}, [authUser])
|
||||
|
||||
useEffect(() => {
|
||||
return onIdTokenChanged(
|
||||
auth,
|
||||
async (fbUser) => {
|
||||
if (fbUser) {
|
||||
setTokenCookies({
|
||||
id: await fbUser.getIdToken(),
|
||||
refresh: fbUser.refreshToken,
|
||||
})
|
||||
setUserCookie(JSON.stringify(fbUser.toJSON()))
|
||||
let current = await getUserAndPrivateUser(fbUser.uid)
|
||||
if (!current.user || !current.privateUser) {
|
||||
const deviceToken = ensureDeviceToken()
|
||||
current = (await createUser({ deviceToken })) as UserAndPrivateUser
|
||||
setCachedReferralInfoForUser(current.user)
|
||||
}
|
||||
setAuthUser(current)
|
||||
// Persist to local storage, to reduce login blink next time.
|
||||
// Note: Cap on localStorage size is ~5mb
|
||||
localStorage.setItem(CACHED_USER_KEY, JSON.stringify(current))
|
||||
setCachedReferralInfoForUser(current.user)
|
||||
} else {
|
||||
// User logged out; reset to null
|
||||
deleteTokenCookies()
|
||||
setUserCookie(undefined)
|
||||
setAuthUser(null)
|
||||
localStorage.removeItem(CACHED_USER_KEY)
|
||||
}
|
||||
},
|
||||
(e) => {
|
||||
|
@ -87,29 +103,32 @@ export function AuthProvider(props: {
|
|||
}, [setAuthUser])
|
||||
|
||||
const uid = authUser?.user.id
|
||||
const username = authUser?.user.username
|
||||
useEffect(() => {
|
||||
if (uid && username) {
|
||||
if (uid) {
|
||||
identifyUser(uid)
|
||||
setUserProperty('username', username)
|
||||
const userListener = listenForUser(uid, (user) =>
|
||||
setAuthUser((authUser) => {
|
||||
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
||||
return { ...authUser!, user: user! }
|
||||
})
|
||||
)
|
||||
const userListener = listenForUser(uid, (user) => {
|
||||
setAuthUser((currAuthUser) =>
|
||||
currAuthUser && user ? { ...currAuthUser, user } : null
|
||||
)
|
||||
})
|
||||
const privateUserListener = listenForPrivateUser(uid, (privateUser) => {
|
||||
setAuthUser((authUser) => {
|
||||
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
||||
return { ...authUser!, privateUser: privateUser! }
|
||||
})
|
||||
setAuthUser((currAuthUser) =>
|
||||
currAuthUser && privateUser ? { ...currAuthUser, privateUser } : null
|
||||
)
|
||||
})
|
||||
return () => {
|
||||
userListener()
|
||||
privateUserListener()
|
||||
}
|
||||
}
|
||||
}, [uid, username, setAuthUser])
|
||||
}, [uid, setAuthUser])
|
||||
|
||||
const username = authUser?.user.username
|
||||
useEffect(() => {
|
||||
if (username != null) {
|
||||
setUserProperty('username', username)
|
||||
}
|
||||
}, [username])
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={authUser}>{children}</AuthContext.Provider>
|
||||
|
|
|
@ -8,6 +8,7 @@ import { Col } from './layout/col'
|
|||
import { Row } from './layout/row'
|
||||
import { Spacer } from './layout/spacer'
|
||||
import {
|
||||
formatLargeNumber,
|
||||
formatMoney,
|
||||
formatPercent,
|
||||
formatWithCommas,
|
||||
|
@ -28,7 +29,7 @@ import { getProbability } from 'common/calculate'
|
|||
import { useFocus } from 'web/hooks/use-focus'
|
||||
import { useUserContractBets } from 'web/hooks/use-user-bets'
|
||||
import { calculateCpmmSale, getCpmmProbability } from 'common/calculate-cpmm'
|
||||
import { getFormattedMappedValue } from 'common/pseudo-numeric'
|
||||
import { getFormattedMappedValue, getMappedValue } from 'common/pseudo-numeric'
|
||||
import { SellRow } from './sell-row'
|
||||
import { useSaveBinaryShares } from './use-save-binary-shares'
|
||||
import { BetSignUpPrompt } from './sign-up-prompt'
|
||||
|
@ -67,27 +68,32 @@ export function BetPanel(props: {
|
|||
className
|
||||
)}
|
||||
>
|
||||
<QuickOrLimitBet
|
||||
isLimitOrder={isLimitOrder}
|
||||
setIsLimitOrder={setIsLimitOrder}
|
||||
hideToggle={!user}
|
||||
/>
|
||||
<BuyPanel
|
||||
hidden={isLimitOrder}
|
||||
contract={contract}
|
||||
user={user}
|
||||
unfilledBets={unfilledBets}
|
||||
/>
|
||||
<LimitOrderPanel
|
||||
hidden={!isLimitOrder}
|
||||
contract={contract}
|
||||
user={user}
|
||||
unfilledBets={unfilledBets}
|
||||
/>
|
||||
|
||||
<BetSignUpPrompt />
|
||||
|
||||
{!user && <PlayMoneyDisclaimer />}
|
||||
{user ? (
|
||||
<>
|
||||
<QuickOrLimitBet
|
||||
isLimitOrder={isLimitOrder}
|
||||
setIsLimitOrder={setIsLimitOrder}
|
||||
hideToggle={!user}
|
||||
/>
|
||||
<BuyPanel
|
||||
hidden={isLimitOrder}
|
||||
contract={contract}
|
||||
user={user}
|
||||
unfilledBets={unfilledBets}
|
||||
/>
|
||||
<LimitOrderPanel
|
||||
hidden={!isLimitOrder}
|
||||
contract={contract}
|
||||
user={user}
|
||||
unfilledBets={unfilledBets}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<BetSignUpPrompt />
|
||||
<PlayMoneyDisclaimer />
|
||||
</>
|
||||
)}
|
||||
</Col>
|
||||
|
||||
{user && unfilledBets.length > 0 && (
|
||||
|
@ -251,17 +257,43 @@ function BuyPanel(props: {
|
|||
const resultProb = getCpmmProbability(newPool, newP)
|
||||
const probStayedSame =
|
||||
formatPercent(resultProb) === formatPercent(initialProb)
|
||||
|
||||
const probChange = Math.abs(resultProb - initialProb)
|
||||
|
||||
const currentPayout = newBet.shares
|
||||
|
||||
const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
|
||||
const currentReturnPercent = formatPercent(currentReturn)
|
||||
|
||||
const format = getFormattedMappedValue(contract)
|
||||
|
||||
const getValue = getMappedValue(contract)
|
||||
const rawDifference = Math.abs(getValue(resultProb) - getValue(initialProb))
|
||||
const displayedDifference = isPseudoNumeric
|
||||
? formatLargeNumber(rawDifference)
|
||||
: formatPercent(rawDifference)
|
||||
|
||||
const bankrollFraction = (betAmount ?? 0) / (user?.balance ?? 1e9)
|
||||
|
||||
const warning =
|
||||
(betAmount ?? 0) > 10 &&
|
||||
bankrollFraction >= 0.5 &&
|
||||
bankrollFraction <= 1 ? (
|
||||
<AlertBox
|
||||
title="Whoa, there!"
|
||||
text={`You might not want to spend ${formatPercent(
|
||||
bankrollFraction
|
||||
)} of your balance on a single bet. \n\nCurrent balance: ${formatMoney(
|
||||
user?.balance ?? 0
|
||||
)}`}
|
||||
/>
|
||||
) : (betAmount ?? 0) > 10 && probChange >= 0.3 && bankrollFraction <= 1 ? (
|
||||
<AlertBox
|
||||
title="Whoa, there!"
|
||||
text={`Are you sure you want to move the market by ${displayedDifference}?`}
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
|
||||
return (
|
||||
<Col className={hidden ? 'hidden' : ''}>
|
||||
<div className="my-3 text-left text-sm text-gray-500">
|
||||
|
@ -275,7 +307,13 @@ function BuyPanel(props: {
|
|||
isPseudoNumeric={isPseudoNumeric}
|
||||
/>
|
||||
|
||||
<div className="my-3 text-left text-sm text-gray-500">Amount</div>
|
||||
<Row className="my-3 justify-between text-left text-sm text-gray-500">
|
||||
Amount
|
||||
<span className={'xl:hidden'}>
|
||||
Balance: {formatMoney(user?.balance ?? 0)}
|
||||
</span>
|
||||
</Row>
|
||||
|
||||
<BuyAmountInput
|
||||
inputClassName="w-full max-w-none"
|
||||
amount={betAmount}
|
||||
|
@ -284,35 +322,10 @@ function BuyPanel(props: {
|
|||
setError={setError}
|
||||
disabled={isSubmitting}
|
||||
inputRef={inputRef}
|
||||
showSliderOnMobile
|
||||
/>
|
||||
|
||||
{(betAmount ?? 0) > 10 &&
|
||||
bankrollFraction >= 0.5 &&
|
||||
bankrollFraction <= 1 ? (
|
||||
<AlertBox
|
||||
title="Whoa, there!"
|
||||
text={`You might not want to spend ${formatPercent(
|
||||
bankrollFraction
|
||||
)} of your balance on a single bet. \n\nCurrent balance: ${formatMoney(
|
||||
user?.balance ?? 0
|
||||
)}`}
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
|
||||
{(betAmount ?? 0) > 10 && probChange >= 0.3 ? (
|
||||
<AlertBox
|
||||
title="Whoa, there!"
|
||||
text={`Are you sure you want to move the market ${
|
||||
isPseudoNumeric && contract.isLogScale
|
||||
? 'this much'
|
||||
: format(probChange)
|
||||
}?`}
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
{warning}
|
||||
|
||||
<Col className="mt-3 w-full gap-3">
|
||||
<Row className="items-center justify-between text-sm">
|
||||
|
@ -341,9 +354,6 @@ function BuyPanel(props: {
|
|||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* <InfoTooltip
|
||||
text={`Includes ${formatMoneyWithDecimals(totalFees)} in fees`}
|
||||
/> */}
|
||||
</Row>
|
||||
<div>
|
||||
<span className="mr-2 whitespace-nowrap">
|
||||
|
@ -593,9 +603,15 @@ function LimitOrderPanel(props: {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-1 mb-3 text-left text-sm text-gray-500">
|
||||
Max amount<span className="ml-1 text-red-500">*</span>
|
||||
</div>
|
||||
<Row className="mt-1 mb-3 justify-between text-left text-sm text-gray-500">
|
||||
<span>
|
||||
Max amount<span className="ml-1 text-red-500">*</span>
|
||||
</span>
|
||||
<span className={'xl:hidden'}>
|
||||
Balance: {formatMoney(user?.balance ?? 0)}
|
||||
</span>
|
||||
</Row>
|
||||
|
||||
<BuyAmountInput
|
||||
inputClassName="w-full max-w-none"
|
||||
amount={betAmount}
|
||||
|
@ -603,6 +619,7 @@ function LimitOrderPanel(props: {
|
|||
error={error}
|
||||
setError={setError}
|
||||
disabled={isSubmitting}
|
||||
showSliderOnMobile
|
||||
/>
|
||||
|
||||
<Col className="mt-3 w-full gap-3">
|
||||
|
|
|
@ -1,14 +1,13 @@
|
|||
import Link from 'next/link'
|
||||
import { keyBy, groupBy, mapValues, sortBy, partition, sumBy } from 'lodash'
|
||||
import dayjs from 'dayjs'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useMemo, useState } from 'react'
|
||||
import clsx from 'clsx'
|
||||
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
|
||||
|
||||
import { Bet } from 'web/lib/firebase/bets'
|
||||
import { User } from 'web/lib/firebase/users'
|
||||
import {
|
||||
formatLargeNumber,
|
||||
formatMoney,
|
||||
formatPercent,
|
||||
formatWithCommas,
|
||||
|
@ -35,8 +34,6 @@ import {
|
|||
resolvedPayout,
|
||||
getContractBetNullMetrics,
|
||||
} from 'common/calculate'
|
||||
import { useTimeSinceFirstRender } from 'web/hooks/use-time-since-first-render'
|
||||
import { trackLatency } from 'web/lib/firebase/tracking'
|
||||
import { NumericContract } from 'common/contract'
|
||||
import { formatNumericProbability } from 'common/pseudo-numeric'
|
||||
import { useUser } from 'web/hooks/use-user'
|
||||
|
@ -85,13 +82,6 @@ export function BetsList(props: { user: User }) {
|
|||
const start = page * CONTRACTS_PER_PAGE
|
||||
const end = start + CONTRACTS_PER_PAGE
|
||||
|
||||
const getTime = useTimeSinceFirstRender()
|
||||
useEffect(() => {
|
||||
if (bets && contractsById && signedInUser) {
|
||||
trackLatency(signedInUser.id, 'portfolio', getTime())
|
||||
}
|
||||
}, [signedInUser, bets, contractsById, getTime])
|
||||
|
||||
if (!bets || !contractsById) {
|
||||
return <LoadingIndicator />
|
||||
}
|
||||
|
@ -219,26 +209,27 @@ export function BetsList(props: { user: User }) {
|
|||
|
||||
<Col className="mt-6 divide-y">
|
||||
{displayedContracts.length === 0 ? (
|
||||
<NoBets user={user} />
|
||||
<NoMatchingBets />
|
||||
) : (
|
||||
displayedContracts.map((contract) => (
|
||||
<ContractBets
|
||||
key={contract.id}
|
||||
contract={contract}
|
||||
bets={contractBets[contract.id] ?? []}
|
||||
metric={sort === 'profit' ? 'profit' : 'value'}
|
||||
isYourBets={isYourBets}
|
||||
<>
|
||||
{displayedContracts.map((contract) => (
|
||||
<ContractBets
|
||||
key={contract.id}
|
||||
contract={contract}
|
||||
bets={contractBets[contract.id] ?? []}
|
||||
metric={sort === 'profit' ? 'profit' : 'value'}
|
||||
isYourBets={isYourBets}
|
||||
/>
|
||||
))}
|
||||
<Pagination
|
||||
page={page}
|
||||
itemsPerPage={CONTRACTS_PER_PAGE}
|
||||
totalItems={filteredContracts.length}
|
||||
setPage={setPage}
|
||||
/>
|
||||
))
|
||||
</>
|
||||
)}
|
||||
</Col>
|
||||
|
||||
<Pagination
|
||||
page={page}
|
||||
itemsPerPage={CONTRACTS_PER_PAGE}
|
||||
totalItems={filteredContracts.length}
|
||||
setPage={setPage}
|
||||
/>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
@ -246,7 +237,7 @@ export function BetsList(props: { user: User }) {
|
|||
const NoBets = ({ user }: { user: User }) => {
|
||||
const me = useUser()
|
||||
return (
|
||||
<div className="mx-4 text-gray-500">
|
||||
<div className="mx-4 py-4 text-gray-500">
|
||||
{user.id === me?.id ? (
|
||||
<>
|
||||
You have not made any bets yet.{' '}
|
||||
|
@ -260,6 +251,11 @@ const NoBets = ({ user }: { user: User }) => {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
const NoMatchingBets = () => (
|
||||
<div className="mx-4 py-4 text-gray-500">
|
||||
No bets matching the current filter.
|
||||
</div>
|
||||
)
|
||||
|
||||
function ContractBets(props: {
|
||||
contract: Contract
|
||||
|
@ -483,23 +479,6 @@ export function BetsSummary(props: {
|
|||
<div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
|
||||
</Col>
|
||||
</>
|
||||
) : isPseudoNumeric ? (
|
||||
<>
|
||||
<Col>
|
||||
<div className="whitespace-nowrap text-sm text-gray-500">
|
||||
Payout if {'>='} {formatLargeNumber(contract.max)}
|
||||
</div>
|
||||
<div className="whitespace-nowrap">
|
||||
{formatMoney(yesWinnings)}
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<div className="whitespace-nowrap text-sm text-gray-500">
|
||||
Payout if {'<='} {formatLargeNumber(contract.min)}
|
||||
</div>
|
||||
<div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
|
||||
</Col>
|
||||
</>
|
||||
) : (
|
||||
<Col>
|
||||
<div className="whitespace-nowrap text-sm text-gray-500">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { ReactNode } from 'react'
|
||||
import { MouseEventHandler, ReactNode } from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export type SizeType = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
|
||||
|
@ -14,7 +14,7 @@ export type ColorType =
|
|||
|
||||
export function Button(props: {
|
||||
className?: string
|
||||
onClick?: () => void
|
||||
onClick?: MouseEventHandler<any> | undefined
|
||||
children?: ReactNode
|
||||
size?: SizeType
|
||||
color?: ColorType
|
||||
|
|
|
@ -33,7 +33,7 @@ export function Carousel(props: {
|
|||
}, 500)
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
useEffect(onScroll, [])
|
||||
useEffect(onScroll, [children])
|
||||
|
||||
return (
|
||||
<div className={clsx('relative', className)}>
|
||||
|
|
|
@ -147,7 +147,7 @@ function CreateChallengeForm(props: {
|
|||
setFinishedCreating(true)
|
||||
}}
|
||||
>
|
||||
<Title className="!mt-2" text="Challenge bet " />
|
||||
<Title className="!mt-2 hidden sm:block" text="Challenge bet " />
|
||||
|
||||
<div className="mb-8">
|
||||
Challenge a friend to bet on{' '}
|
||||
|
@ -170,72 +170,76 @@ function CreateChallengeForm(props: {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex flex-col flex-wrap justify-center gap-x-5 gap-y-2">
|
||||
<div>You'll bet:</div>
|
||||
<Row
|
||||
className={
|
||||
'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
|
||||
}
|
||||
>
|
||||
<AmountInput
|
||||
amount={challengeInfo.amount || undefined}
|
||||
onChange={(newAmount) =>
|
||||
setChallengeInfo((m: challengeInfo) => {
|
||||
return {
|
||||
...m,
|
||||
amount: newAmount ?? 0,
|
||||
acceptorAmount: editingAcceptorAmount
|
||||
? m.acceptorAmount
|
||||
: newAmount ?? 0,
|
||||
}
|
||||
})
|
||||
}
|
||||
error={undefined}
|
||||
label={'M$'}
|
||||
inputClassName="w-24"
|
||||
/>
|
||||
<span className={''}>on</span>
|
||||
{challengeInfo.outcome === 'YES' ? <YesLabel /> : <NoLabel />}
|
||||
</Row>
|
||||
<Row className={'mt-3 max-w-xs justify-end'}>
|
||||
<Button
|
||||
color={'gray-white'}
|
||||
onClick={() =>
|
||||
setChallengeInfo((m: challengeInfo) => {
|
||||
return {
|
||||
...m,
|
||||
outcome: m.outcome === 'YES' ? 'NO' : 'YES',
|
||||
}
|
||||
})
|
||||
<Col className="mt-2 flex-wrap justify-center gap-x-5 sm:gap-y-2">
|
||||
<Col>
|
||||
<div>You'll bet:</div>
|
||||
<Row
|
||||
className={
|
||||
'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
|
||||
}
|
||||
>
|
||||
<SwitchVerticalIcon className={'h-6 w-6'} />
|
||||
</Button>
|
||||
</Row>
|
||||
<Row className={'items-center'}>If they bet:</Row>
|
||||
<Row className={'max-w-xs items-center justify-between gap-4 pr-3'}>
|
||||
<div className={'w-32 sm:mr-1'}>
|
||||
<AmountInput
|
||||
amount={challengeInfo.acceptorAmount || undefined}
|
||||
onChange={(newAmount) => {
|
||||
setEditingAcceptorAmount(true)
|
||||
|
||||
amount={challengeInfo.amount || undefined}
|
||||
onChange={(newAmount) =>
|
||||
setChallengeInfo((m: challengeInfo) => {
|
||||
return {
|
||||
...m,
|
||||
acceptorAmount: newAmount ?? 0,
|
||||
amount: newAmount ?? 0,
|
||||
acceptorAmount: editingAcceptorAmount
|
||||
? m.acceptorAmount
|
||||
: newAmount ?? 0,
|
||||
}
|
||||
})
|
||||
}}
|
||||
}
|
||||
error={undefined}
|
||||
label={'M$'}
|
||||
inputClassName="w-24"
|
||||
/>
|
||||
</div>
|
||||
<span>on</span>
|
||||
{challengeInfo.outcome === 'YES' ? <NoLabel /> : <YesLabel />}
|
||||
</Row>
|
||||
</div>
|
||||
<span className={''}>on</span>
|
||||
{challengeInfo.outcome === 'YES' ? <YesLabel /> : <NoLabel />}
|
||||
</Row>
|
||||
<Row className={'mt-3 max-w-xs justify-end'}>
|
||||
<Button
|
||||
color={'gray-white'}
|
||||
onClick={() =>
|
||||
setChallengeInfo((m: challengeInfo) => {
|
||||
return {
|
||||
...m,
|
||||
outcome: m.outcome === 'YES' ? 'NO' : 'YES',
|
||||
}
|
||||
})
|
||||
}
|
||||
>
|
||||
<SwitchVerticalIcon className={'h-6 w-6'} />
|
||||
</Button>
|
||||
</Row>
|
||||
<Row className={'items-center'}>If they bet:</Row>
|
||||
<Row
|
||||
className={'max-w-xs items-center justify-between gap-4 pr-3'}
|
||||
>
|
||||
<div className={'w-32 sm:mr-1'}>
|
||||
<AmountInput
|
||||
amount={challengeInfo.acceptorAmount || undefined}
|
||||
onChange={(newAmount) => {
|
||||
setEditingAcceptorAmount(true)
|
||||
|
||||
setChallengeInfo((m: challengeInfo) => {
|
||||
return {
|
||||
...m,
|
||||
acceptorAmount: newAmount ?? 0,
|
||||
}
|
||||
})
|
||||
}}
|
||||
error={undefined}
|
||||
label={'M$'}
|
||||
inputClassName="w-24"
|
||||
/>
|
||||
</div>
|
||||
<span>on</span>
|
||||
{challengeInfo.outcome === 'YES' ? <NoLabel /> : <YesLabel />}
|
||||
</Row>
|
||||
</Col>
|
||||
</Col>
|
||||
{contract && (
|
||||
<Button
|
||||
size="2xs"
|
||||
|
|
|
@ -43,10 +43,13 @@ export const SORTS = [
|
|||
{ label: 'Trending', value: 'score' },
|
||||
{ label: 'Most traded', value: 'most-traded' },
|
||||
{ label: '24h volume', value: '24-hour-vol' },
|
||||
{ label: '24h change', value: 'prob-change-day' },
|
||||
{ label: 'Last updated', value: 'last-updated' },
|
||||
{ label: 'Subsidy', value: 'liquidity' },
|
||||
{ label: 'Close date', value: 'close-date' },
|
||||
{ label: 'Resolve date', value: 'resolve-date' },
|
||||
{ label: 'Highest %', value: 'prob-descending' },
|
||||
{ label: 'Lowest %', value: 'prob-ascending' },
|
||||
] as const
|
||||
|
||||
export type Sort = typeof SORTS[number]['value']
|
||||
|
@ -282,8 +285,8 @@ function ContractSearchControls(props: {
|
|||
: DEFAULT_CATEGORY_GROUPS.map((g) => g.slug)
|
||||
|
||||
const memberPillGroups = sortBy(
|
||||
memberGroups.filter((group) => group.contractIds.length > 0),
|
||||
(group) => group.contractIds.length
|
||||
memberGroups.filter((group) => group.totalContracts > 0),
|
||||
(group) => group.totalContracts
|
||||
).reverse()
|
||||
|
||||
const pillGroups: { name: string; slug: string }[] =
|
||||
|
|
|
@ -35,7 +35,6 @@ import { Tooltip } from '../tooltip'
|
|||
|
||||
export function ContractCard(props: {
|
||||
contract: Contract
|
||||
showHotVolume?: boolean
|
||||
showTime?: ShowTime
|
||||
className?: string
|
||||
questionClass?: string
|
||||
|
@ -45,7 +44,6 @@ export function ContractCard(props: {
|
|||
trackingPostfix?: string
|
||||
}) {
|
||||
const {
|
||||
showHotVolume,
|
||||
showTime,
|
||||
className,
|
||||
questionClass,
|
||||
|
@ -147,7 +145,6 @@ export function ContractCard(props: {
|
|||
<AvatarDetails contract={contract} short={true} className="md:hidden" />
|
||||
<MiscDetails
|
||||
contract={contract}
|
||||
showHotVolume={showHotVolume}
|
||||
showTime={showTime}
|
||||
hideGroupLink={hideGroupLink}
|
||||
/>
|
||||
|
|
|
@ -6,6 +6,7 @@ import Textarea from 'react-expanding-textarea'
|
|||
import { Contract, MAX_DESCRIPTION_LENGTH } from 'common/contract'
|
||||
import { exhibitExts, parseTags } from 'common/util/parse'
|
||||
import { useAdmin } from 'web/hooks/use-admin'
|
||||
import { useUser } from 'web/hooks/use-user'
|
||||
import { updateContract } from 'web/lib/firebase/contracts'
|
||||
import { Row } from '../layout/row'
|
||||
import { Content } from '../editor'
|
||||
|
@ -17,11 +18,12 @@ import { insertContent } from '../editor/utils'
|
|||
|
||||
export function ContractDescription(props: {
|
||||
contract: Contract
|
||||
isCreator: boolean
|
||||
className?: string
|
||||
}) {
|
||||
const { contract, isCreator, className } = props
|
||||
const { contract, className } = props
|
||||
const isAdmin = useAdmin()
|
||||
const user = useUser()
|
||||
const isCreator = user?.id === contract.creatorId
|
||||
return (
|
||||
<div className={clsx('mt-2 text-gray-700', className)}>
|
||||
{isCreator || isAdmin ? (
|
||||
|
|
|
@ -2,12 +2,12 @@ import {
|
|||
ClockIcon,
|
||||
DatabaseIcon,
|
||||
PencilIcon,
|
||||
TrendingUpIcon,
|
||||
UserGroupIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import clsx from 'clsx'
|
||||
import { Editor } from '@tiptap/react'
|
||||
import dayjs from 'dayjs'
|
||||
import Link from 'next/link'
|
||||
|
||||
import { Row } from '../layout/row'
|
||||
import { formatMoney } from 'common/util/format'
|
||||
|
@ -26,11 +26,10 @@ import { Button } from 'web/components/button'
|
|||
import { Modal } from 'web/components/layout/modal'
|
||||
import { Col } from 'web/components/layout/col'
|
||||
import { ContractGroupsList } from 'web/components/groups/contract-groups-list'
|
||||
import { SiteLink } from 'web/components/site-link'
|
||||
import { groupPath } from 'web/lib/firebase/groups'
|
||||
import { linkClass } from 'web/components/site-link'
|
||||
import { getGroupLinkToDisplay, groupPath } from 'web/lib/firebase/groups'
|
||||
import { insertContent } from '../editor/utils'
|
||||
import { contractMetrics } from 'common/contract-details'
|
||||
import { User } from 'common/user'
|
||||
import { UserLink } from 'web/components/user-link'
|
||||
import { FeaturedContractBadge } from 'web/components/contract/featured-contract-badge'
|
||||
import { Tooltip } from 'web/components/tooltip'
|
||||
|
@ -40,30 +39,19 @@ export type ShowTime = 'resolve-date' | 'close-date'
|
|||
|
||||
export function MiscDetails(props: {
|
||||
contract: Contract
|
||||
showHotVolume?: boolean
|
||||
showTime?: ShowTime
|
||||
hideGroupLink?: boolean
|
||||
}) {
|
||||
const { contract, showHotVolume, showTime, hideGroupLink } = props
|
||||
const {
|
||||
volume,
|
||||
volume24Hours,
|
||||
closeTime,
|
||||
isResolved,
|
||||
createdTime,
|
||||
resolutionTime,
|
||||
groupLinks,
|
||||
} = contract
|
||||
const { contract, showTime, hideGroupLink } = props
|
||||
const { volume, closeTime, isResolved, createdTime, resolutionTime } =
|
||||
contract
|
||||
|
||||
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">
|
||||
{showHotVolume ? (
|
||||
<Row className="gap-0.5">
|
||||
<TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)}
|
||||
</Row>
|
||||
) : showTime === 'close-date' ? (
|
||||
{showTime === 'close-date' ? (
|
||||
<Row className="gap-0.5 whitespace-nowrap">
|
||||
<ClockIcon className="h-5 w-5" />
|
||||
{(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
|
||||
|
@ -83,13 +71,12 @@ export function MiscDetails(props: {
|
|||
<NewContractBadge />
|
||||
)}
|
||||
|
||||
{!hideGroupLink && groupLinks && groupLinks.length > 0 && (
|
||||
<SiteLink
|
||||
href={groupPath(groupLinks[0].slug)}
|
||||
className="truncate text-sm text-gray-400"
|
||||
>
|
||||
{groupLinks[0].name}
|
||||
</SiteLink>
|
||||
{!hideGroupLink && groupToDisplay && (
|
||||
<Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
|
||||
<a className={clsx(linkClass, 'truncate text-sm text-gray-400')}>
|
||||
{groupToDisplay.name}
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
</Row>
|
||||
)
|
||||
|
@ -117,64 +104,39 @@ export function AvatarDetails(props: {
|
|||
)
|
||||
}
|
||||
|
||||
export function AbbrContractDetails(props: {
|
||||
contract: Contract
|
||||
showHotVolume?: boolean
|
||||
showTime?: ShowTime
|
||||
}) {
|
||||
const { contract, showHotVolume, showTime } = props
|
||||
return (
|
||||
<Row className="items-center justify-between">
|
||||
<AvatarDetails contract={contract} />
|
||||
|
||||
<MiscDetails
|
||||
contract={contract}
|
||||
showHotVolume={showHotVolume}
|
||||
showTime={showTime}
|
||||
/>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
export function ContractDetails(props: {
|
||||
contract: Contract
|
||||
user: User | null | undefined
|
||||
isCreator?: boolean
|
||||
disabled?: boolean
|
||||
}) {
|
||||
const { contract, isCreator, disabled } = props
|
||||
const { contract, disabled } = props
|
||||
const {
|
||||
closeTime,
|
||||
creatorName,
|
||||
creatorUsername,
|
||||
creatorId,
|
||||
groupLinks,
|
||||
creatorAvatarUrl,
|
||||
resolutionTime,
|
||||
} = contract
|
||||
const { volumeLabel, resolvedDate } = contractMetrics(contract)
|
||||
|
||||
const groupToDisplay =
|
||||
groupLinks?.sort((a, b) => a.createdTime - b.createdTime)[0] ?? null
|
||||
const user = useUser()
|
||||
const isCreator = user?.id === creatorId
|
||||
const [open, setOpen] = useState(false)
|
||||
const { width } = useWindowSize()
|
||||
const isMobile = (width ?? 0) < 600
|
||||
|
||||
const groupToDisplay = getGroupLinkToDisplay(contract)
|
||||
const groupInfo = groupToDisplay ? (
|
||||
<Row
|
||||
className={clsx(
|
||||
'items-center pr-2',
|
||||
isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
|
||||
)}
|
||||
>
|
||||
<SiteLink href={groupPath(groupToDisplay.slug)} className={'truncate'}>
|
||||
<Row>
|
||||
<UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
|
||||
<span className="items-center truncate">{groupToDisplay.name}</span>
|
||||
</Row>
|
||||
</SiteLink>
|
||||
</Row>
|
||||
<Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
|
||||
<a
|
||||
className={clsx(
|
||||
linkClass,
|
||||
'flex flex-row items-center truncate pr-0 sm:pr-2',
|
||||
isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
|
||||
)}
|
||||
>
|
||||
<UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
|
||||
<span className="items-center truncate">{groupToDisplay.name}</span>
|
||||
</a>
|
||||
</Link>
|
||||
) : (
|
||||
<Button
|
||||
size={'xs'}
|
||||
|
@ -236,11 +198,7 @@ export function ContractDetails(props: {
|
|||
'max-h-[70vh] min-h-[20rem] overflow-auto rounded bg-white p-6'
|
||||
}
|
||||
>
|
||||
<ContractGroupsList
|
||||
groupLinks={groupLinks ?? []}
|
||||
contract={contract}
|
||||
user={user}
|
||||
/>
|
||||
<ContractGroupsList contract={contract} user={user} />
|
||||
</Col>
|
||||
</Modal>
|
||||
|
||||
|
@ -287,18 +245,18 @@ export function ContractDetails(props: {
|
|||
|
||||
export function ExtraMobileContractDetails(props: {
|
||||
contract: Contract
|
||||
user: User | null | undefined
|
||||
forceShowVolume?: boolean
|
||||
}) {
|
||||
const { contract, user, forceShowVolume } = props
|
||||
const { contract, forceShowVolume } = props
|
||||
const { volume, resolutionTime, closeTime, creatorId, uniqueBettorCount } =
|
||||
contract
|
||||
const user = useUser()
|
||||
const uniqueBettors = uniqueBettorCount ?? 0
|
||||
const { resolvedDate } = contractMetrics(contract)
|
||||
const volumeTranslation =
|
||||
volume > 800 || uniqueBettors > 20
|
||||
volume > 800 || uniqueBettors >= 20
|
||||
? 'High'
|
||||
: volume > 300 || uniqueBettors > 10
|
||||
: volume > 300 || uniqueBettors >= 10
|
||||
? 'Medium'
|
||||
: 'Low'
|
||||
|
||||
|
@ -399,7 +357,7 @@ function EditableCloseDate(props: {
|
|||
return (
|
||||
<>
|
||||
{isEditingCloseTime ? (
|
||||
<Row className="z-10 mr-2 w-full shrink-0 items-start items-center gap-1">
|
||||
<Row className="z-10 mr-2 w-full shrink-0 items-center gap-1">
|
||||
<input
|
||||
type="date"
|
||||
className="input input-bordered shrink-0"
|
||||
|
|
|
@ -109,10 +109,6 @@ export function ContractTopTrades(props: {
|
|||
betsBySameUser={[betsById[topCommentId]]}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-500">
|
||||
{commentsById[topCommentId].userName} made{' '}
|
||||
{formatMoney(profitById[topCommentId] || 0)}!
|
||||
</div>
|
||||
<Spacer h={16} />
|
||||
</>
|
||||
)}
|
||||
|
@ -120,11 +116,11 @@ export function ContractTopTrades(props: {
|
|||
{/* If they're the same, only show the comment; otherwise show both */}
|
||||
{topBettor && topBetId !== topCommentId && profitById[topBetId] > 0 && (
|
||||
<>
|
||||
<Title text="💸 Smartest money" className="!mt-0" />
|
||||
<Title text="💸 Best bet" className="!mt-0" />
|
||||
<div className="relative flex items-start space-x-3 rounded-md bg-gray-50 px-2 py-4">
|
||||
<FeedBet contract={contract} bet={betsById[topBetId]} />
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-500">
|
||||
<div className="mt-2 ml-2 text-sm text-gray-500">
|
||||
{topBettor?.name} made {formatMoney(profitById[topBetId] || 0)}!
|
||||
</div>
|
||||
</>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
import { tradingAllowed } from 'web/lib/firebase/contracts'
|
||||
import { Col } from '../layout/col'
|
||||
|
@ -16,136 +15,154 @@ import {
|
|||
import { Bet } from 'common/bet'
|
||||
import BetButton from '../bet-button'
|
||||
import { AnswersGraph } from '../answers/answers-graph'
|
||||
import { Contract, CPMMBinaryContract } from 'common/contract'
|
||||
import { ContractDescription } from './contract-description'
|
||||
import {
|
||||
Contract,
|
||||
BinaryContract,
|
||||
CPMMContract,
|
||||
CPMMBinaryContract,
|
||||
FreeResponseContract,
|
||||
MultipleChoiceContract,
|
||||
NumericContract,
|
||||
PseudoNumericContract,
|
||||
} from 'common/contract'
|
||||
import { ContractDetails, ExtraMobileContractDetails } from './contract-details'
|
||||
import { NumericGraph } from './numeric-graph'
|
||||
import { ExtraContractActionsRow } from 'web/components/contract/extra-contract-actions-row'
|
||||
|
||||
const OverviewQuestion = (props: { text: string }) => (
|
||||
<Linkify className="text-2xl text-indigo-700 md:text-3xl" text={props.text} />
|
||||
)
|
||||
|
||||
const BetWidget = (props: { contract: CPMMContract }) => {
|
||||
const user = useUser()
|
||||
return (
|
||||
<Col>
|
||||
<BetButton contract={props.contract} />
|
||||
{!user && (
|
||||
<div className="mt-1 text-center text-sm text-gray-500">
|
||||
(with play money!)
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
const NumericOverview = (props: { contract: NumericContract }) => {
|
||||
const { contract } = props
|
||||
return (
|
||||
<Col className="gap-1 md:gap-2">
|
||||
<Col className="gap-3 px-2 sm:gap-4">
|
||||
<ContractDetails contract={contract} />
|
||||
<Row className="justify-between gap-4">
|
||||
<OverviewQuestion text={contract.question} />
|
||||
<NumericResolutionOrExpectation
|
||||
contract={contract}
|
||||
className="hidden items-end xl:flex"
|
||||
/>
|
||||
</Row>
|
||||
<NumericResolutionOrExpectation
|
||||
className="items-center justify-between gap-4 xl:hidden"
|
||||
contract={contract}
|
||||
/>
|
||||
</Col>
|
||||
<NumericGraph contract={contract} />
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
|
||||
const { contract, bets } = props
|
||||
return (
|
||||
<Col className="gap-1 md:gap-2">
|
||||
<Col className="gap-3 px-2 sm:gap-4">
|
||||
<ContractDetails contract={contract} />
|
||||
<Row className="justify-between gap-4">
|
||||
<OverviewQuestion text={contract.question} />
|
||||
<BinaryResolutionOrChance
|
||||
className="hidden items-end xl:flex"
|
||||
contract={contract}
|
||||
large
|
||||
/>
|
||||
</Row>
|
||||
<Row className="items-center justify-between gap-4 xl:hidden">
|
||||
<BinaryResolutionOrChance contract={contract} />
|
||||
<ExtraMobileContractDetails contract={contract} />
|
||||
{tradingAllowed(contract) && (
|
||||
<BetWidget contract={contract as CPMMBinaryContract} />
|
||||
)}
|
||||
</Row>
|
||||
</Col>
|
||||
<ContractProbGraph contract={contract} bets={[...bets].reverse()} />
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
const ChoiceOverview = (props: {
|
||||
contract: FreeResponseContract | MultipleChoiceContract
|
||||
bets: Bet[]
|
||||
}) => {
|
||||
const { contract, bets } = props
|
||||
const { question, resolution } = contract
|
||||
return (
|
||||
<Col className="gap-1 md:gap-2">
|
||||
<Col className="gap-3 px-2 sm:gap-4">
|
||||
<ContractDetails contract={contract} />
|
||||
<OverviewQuestion text={question} />
|
||||
{resolution && (
|
||||
<FreeResponseResolutionOrChance contract={contract} truncate="none" />
|
||||
)}
|
||||
</Col>
|
||||
<Col className={'mb-1 gap-y-2'}>
|
||||
<AnswersGraph contract={contract} bets={[...bets].reverse()} />
|
||||
<ExtraMobileContractDetails
|
||||
contract={contract}
|
||||
forceShowVolume={true}
|
||||
/>
|
||||
</Col>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
const PseudoNumericOverview = (props: {
|
||||
contract: PseudoNumericContract
|
||||
bets: Bet[]
|
||||
}) => {
|
||||
const { contract, bets } = props
|
||||
return (
|
||||
<Col className="gap-1 md:gap-2">
|
||||
<Col className="gap-3 px-2 sm:gap-4">
|
||||
<ContractDetails contract={contract} />
|
||||
<Row className="justify-between gap-4">
|
||||
<OverviewQuestion text={contract.question} />
|
||||
<PseudoNumericResolutionOrExpectation
|
||||
contract={contract}
|
||||
className="hidden items-end xl:flex"
|
||||
/>
|
||||
</Row>
|
||||
<Row className="items-center justify-between gap-4 xl:hidden">
|
||||
<PseudoNumericResolutionOrExpectation contract={contract} />
|
||||
<ExtraMobileContractDetails contract={contract} />
|
||||
{tradingAllowed(contract) && <BetWidget contract={contract} />}
|
||||
</Row>
|
||||
</Col>
|
||||
<ContractProbGraph contract={contract} bets={[...bets].reverse()} />
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
export const ContractOverview = (props: {
|
||||
contract: Contract
|
||||
bets: Bet[]
|
||||
className?: string
|
||||
}) => {
|
||||
const { contract, bets, className } = props
|
||||
const { question, creatorId, outcomeType, resolution } = contract
|
||||
|
||||
const user = useUser()
|
||||
const isCreator = user?.id === creatorId
|
||||
|
||||
const isBinary = outcomeType === 'BINARY'
|
||||
const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
|
||||
|
||||
return (
|
||||
<Col className={clsx('mb-6', className)}>
|
||||
<Col className="gap-3 px-2 sm:gap-4">
|
||||
<ContractDetails
|
||||
contract={contract}
|
||||
user={user}
|
||||
isCreator={isCreator}
|
||||
/>
|
||||
<Row className="justify-between gap-4">
|
||||
<div className="text-2xl text-indigo-700 md:text-3xl">
|
||||
<Linkify text={question} />
|
||||
</div>
|
||||
<Row className={'hidden gap-3 xl:flex'}>
|
||||
{isBinary && (
|
||||
<BinaryResolutionOrChance
|
||||
className="items-end"
|
||||
contract={contract}
|
||||
large
|
||||
/>
|
||||
)}
|
||||
|
||||
{isPseudoNumeric && (
|
||||
<PseudoNumericResolutionOrExpectation
|
||||
contract={contract}
|
||||
className="items-end"
|
||||
/>
|
||||
)}
|
||||
|
||||
{outcomeType === 'NUMERIC' && (
|
||||
<NumericResolutionOrExpectation
|
||||
contract={contract}
|
||||
className="items-end"
|
||||
/>
|
||||
)}
|
||||
</Row>
|
||||
</Row>
|
||||
|
||||
{isBinary ? (
|
||||
<Row className="items-center justify-between gap-4 xl:hidden">
|
||||
<BinaryResolutionOrChance contract={contract} />
|
||||
<ExtraMobileContractDetails contract={contract} user={user} />
|
||||
{tradingAllowed(contract) && (
|
||||
<Row>
|
||||
<Col>
|
||||
<BetButton contract={contract as CPMMBinaryContract} />
|
||||
{!user && (
|
||||
<div className="mt-1 text-center text-sm text-gray-500">
|
||||
(with play money!)
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
</Row>
|
||||
) : isPseudoNumeric ? (
|
||||
<Row className="items-center justify-between gap-4 xl:hidden">
|
||||
<PseudoNumericResolutionOrExpectation contract={contract} />
|
||||
<ExtraMobileContractDetails contract={contract} user={user} />
|
||||
{tradingAllowed(contract) && (
|
||||
<Row>
|
||||
<Col>
|
||||
<BetButton contract={contract} />
|
||||
{!user && (
|
||||
<div className="mt-1 text-center text-sm text-gray-500">
|
||||
(with play money!)
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
</Row>
|
||||
) : (
|
||||
(outcomeType === 'FREE_RESPONSE' ||
|
||||
outcomeType === 'MULTIPLE_CHOICE') &&
|
||||
resolution && (
|
||||
<FreeResponseResolutionOrChance
|
||||
contract={contract}
|
||||
truncate="none"
|
||||
/>
|
||||
)
|
||||
)}
|
||||
|
||||
{outcomeType === 'NUMERIC' && (
|
||||
<Row className="items-center justify-between gap-4 xl:hidden">
|
||||
<NumericResolutionOrExpectation contract={contract} />
|
||||
</Row>
|
||||
)}
|
||||
</Col>
|
||||
<div className={'my-1 md:my-2'}></div>
|
||||
{(isBinary || isPseudoNumeric) && (
|
||||
<ContractProbGraph contract={contract} bets={[...bets].reverse()} />
|
||||
)}{' '}
|
||||
{(outcomeType === 'FREE_RESPONSE' ||
|
||||
outcomeType === 'MULTIPLE_CHOICE') && (
|
||||
<Col className={'mb-1 gap-y-2'}>
|
||||
<AnswersGraph contract={contract} bets={[...bets].reverse()} />
|
||||
<ExtraMobileContractDetails
|
||||
contract={contract}
|
||||
user={user}
|
||||
forceShowVolume={true}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
{outcomeType === 'NUMERIC' && <NumericGraph contract={contract} />}
|
||||
<ExtraContractActionsRow user={user} contract={contract} />
|
||||
<ContractDescription
|
||||
className="px-2"
|
||||
contract={contract}
|
||||
isCreator={isCreator}
|
||||
/>
|
||||
</Col>
|
||||
)
|
||||
const { contract, bets } = props
|
||||
switch (contract.outcomeType) {
|
||||
case 'BINARY':
|
||||
return <BinaryOverview contract={contract} bets={bets} />
|
||||
case 'NUMERIC':
|
||||
return <NumericOverview contract={contract} />
|
||||
case 'PSEUDO_NUMERIC':
|
||||
return <PseudoNumericOverview contract={contract} bets={bets} />
|
||||
case 'FREE_RESPONSE':
|
||||
case 'MULTIPLE_CHOICE':
|
||||
return <ChoiceOverview contract={contract} bets={bets} />
|
||||
}
|
||||
}
|
||||
|
|
|
@ -27,6 +27,7 @@ export function ContractsGrid(props: {
|
|||
}
|
||||
highlightOptions?: ContractHighlightOptions
|
||||
trackingPostfix?: string
|
||||
breakpointColumns?: { [key: string]: number }
|
||||
}) {
|
||||
const {
|
||||
contracts,
|
||||
|
@ -67,7 +68,7 @@ export function ContractsGrid(props: {
|
|||
<Col className="gap-8">
|
||||
<Masonry
|
||||
// Show only 1 column on tailwind's md breakpoint (768px)
|
||||
breakpointCols={{ default: 2, 768: 1 }}
|
||||
breakpointCols={props.breakpointColumns ?? { default: 2, 768: 1 }}
|
||||
className="-ml-4 flex w-auto"
|
||||
columnClassName="pl-4 bg-clip-padding"
|
||||
>
|
||||
|
|
|
@ -5,20 +5,25 @@ import { Row } from '../layout/row'
|
|||
import { Contract } from 'web/lib/firebase/contracts'
|
||||
import React, { useState } from 'react'
|
||||
import { Button } from 'web/components/button'
|
||||
import { User } from 'common/user'
|
||||
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 { ContractInfoDialog } from 'web/components/contract/contract-info-dialog'
|
||||
import { Col } from 'web/components/layout/col'
|
||||
import { withTracking } from 'web/lib/service/analytics'
|
||||
import { CreateChallengeModal } from 'web/components/challenges/create-challenge-modal'
|
||||
import { CHALLENGES_ENABLED } from 'common/challenge'
|
||||
|
||||
export function ExtraContractActionsRow(props: {
|
||||
contract: Contract
|
||||
user: User | undefined | null
|
||||
}) {
|
||||
const { user, contract } = props
|
||||
|
||||
export function ExtraContractActionsRow(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
const { outcomeType, resolution } = contract
|
||||
const user = useUser()
|
||||
const [isShareOpen, setShareOpen] = useState(false)
|
||||
const [openCreateChallengeModal, setOpenCreateChallengeModal] =
|
||||
useState(false)
|
||||
const showChallenge =
|
||||
user && outcomeType === 'BINARY' && !resolution && CHALLENGES_ENABLED
|
||||
|
||||
return (
|
||||
<Row className={'mt-0.5 justify-around sm:mt-2 lg:justify-start'}>
|
||||
|
@ -37,7 +42,6 @@ export function ExtraContractActionsRow(props: {
|
|||
/>
|
||||
<span>Share</span>
|
||||
</Col>
|
||||
|
||||
<ShareModal
|
||||
isOpen={isShareOpen}
|
||||
setOpen={setShareOpen}
|
||||
|
@ -46,6 +50,31 @@ export function ExtraContractActionsRow(props: {
|
|||
/>
|
||||
</Button>
|
||||
|
||||
{showChallenge && (
|
||||
<Button
|
||||
size="lg"
|
||||
color="gray-white"
|
||||
className="max-w-xs self-center"
|
||||
onClick={withTracking(
|
||||
() => setOpenCreateChallengeModal(true),
|
||||
'click challenge button'
|
||||
)}
|
||||
>
|
||||
<Col className="items-center sm:flex-row">
|
||||
<span className="h-[24px] w-5 sm:mr-2" aria-hidden="true">
|
||||
⚔️
|
||||
</span>
|
||||
<span>Challenge</span>
|
||||
</Col>
|
||||
<CreateChallengeModal
|
||||
isOpen={openCreateChallengeModal}
|
||||
setOpen={setOpenCreateChallengeModal}
|
||||
user={user}
|
||||
contract={contract}
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<FollowMarketButton contract={contract} user={user} />
|
||||
{user?.id !== contract.creatorId && (
|
||||
<LikeMarketButton contract={contract} user={user} />
|
||||
|
|
72
web/components/contract/prob-change-table.tsx
Normal file
72
web/components/contract/prob-change-table.tsx
Normal file
|
@ -0,0 +1,72 @@
|
|||
import clsx from 'clsx'
|
||||
import { contractPath } from 'web/lib/firebase/contracts'
|
||||
import { CPMMContract } from 'common/contract'
|
||||
import { formatPercent } from 'common/util/format'
|
||||
import { useProbChanges } from 'web/hooks/use-prob-changes'
|
||||
import { SiteLink } from '../site-link'
|
||||
|
||||
export function ProbChangeTable(props: { userId: string | undefined }) {
|
||||
const { userId } = props
|
||||
|
||||
const changes = useProbChanges(userId ?? '')
|
||||
console.log('changes', changes)
|
||||
|
||||
if (!changes) {
|
||||
return null
|
||||
}
|
||||
|
||||
const { positiveChanges, negativeChanges } = changes
|
||||
|
||||
const count = 3
|
||||
|
||||
return (
|
||||
<div className="grid max-w-xl gap-x-2 gap-y-2 rounded bg-white p-4 text-gray-700">
|
||||
<div className="text-xl text-gray-800">Daily movers</div>
|
||||
<div className="text-right">% pts</div>
|
||||
{positiveChanges.slice(0, count).map((contract) => (
|
||||
<>
|
||||
<div className="line-clamp-2">
|
||||
<SiteLink href={contractPath(contract)}>
|
||||
{contract.question}
|
||||
</SiteLink>
|
||||
</div>
|
||||
<ProbChange className="text-right" contract={contract} />
|
||||
</>
|
||||
))}
|
||||
<div className="col-span-2 my-2" />
|
||||
{negativeChanges.slice(0, count).map((contract) => (
|
||||
<>
|
||||
<div className="line-clamp-2">
|
||||
<SiteLink href={contractPath(contract)}>
|
||||
{contract.question}
|
||||
</SiteLink>
|
||||
</div>
|
||||
<ProbChange className="text-right" contract={contract} />
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function ProbChange(props: {
|
||||
contract: CPMMContract
|
||||
className?: string
|
||||
}) {
|
||||
const { contract, className } = props
|
||||
const {
|
||||
probChanges: { day: change },
|
||||
} = contract
|
||||
|
||||
const color =
|
||||
change > 0
|
||||
? 'text-green-500'
|
||||
: change < 0
|
||||
? 'text-red-500'
|
||||
: 'text-gray-500'
|
||||
|
||||
const str =
|
||||
change === 0
|
||||
? '+0%'
|
||||
: `${change > 0 ? '+' : '-'}${formatPercent(Math.abs(change))}`
|
||||
return <div className={clsx(className, color)}>{str}</div>
|
||||
}
|
|
@ -45,7 +45,7 @@ export function ShareModal(props: {
|
|||
|
||||
return (
|
||||
<Modal open={isOpen} setOpen={setOpen} size="md">
|
||||
<Col className="gap-4 rounded bg-white p-4">
|
||||
<Col className="gap-2.5 rounded bg-white p-4 sm:gap-4">
|
||||
<Title className="!mt-0 !mb-2" text="Share this market" />
|
||||
<p>
|
||||
Earn{' '}
|
||||
|
@ -57,7 +57,7 @@ export function ShareModal(props: {
|
|||
<Button
|
||||
size="2xl"
|
||||
color="gradient"
|
||||
className={'mb-2 flex max-w-xs self-center'}
|
||||
className={'flex max-w-xs self-center'}
|
||||
onClick={() => {
|
||||
copyToClipboard(shareUrl)
|
||||
toast.success('Link copied!', {
|
||||
|
@ -68,17 +68,18 @@ export function ShareModal(props: {
|
|||
>
|
||||
{linkIcon} Copy link
|
||||
</Button>
|
||||
<Row className={'justify-center'}>or</Row>
|
||||
{showChallenge && (
|
||||
<Button
|
||||
size="lg"
|
||||
color="gray-white"
|
||||
size="2xl"
|
||||
color="gradient"
|
||||
className={'mb-2 flex max-w-xs self-center'}
|
||||
onClick={withTracking(
|
||||
() => setOpenCreateChallengeModal(true),
|
||||
'click challenge button'
|
||||
)}
|
||||
>
|
||||
<span>⚔️ Challenge a friend</span>
|
||||
<span>⚔️ Challenge</span>
|
||||
<CreateChallengeModal
|
||||
isOpen={openCreateChallengeModal}
|
||||
setOpen={(open) => {
|
||||
|
|
|
@ -1,27 +1,13 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
|
||||
import { User } from 'web/lib/firebase/users'
|
||||
import { Button } from './button'
|
||||
import { SiteLink } from 'web/components/site-link'
|
||||
|
||||
export const CreateQuestionButton = (props: {
|
||||
user: User | null | undefined
|
||||
overrideText?: string
|
||||
className?: string
|
||||
query?: string
|
||||
}) => {
|
||||
const { user, overrideText, className, query } = props
|
||||
|
||||
if (!user || user?.isBannedFromPosting) return <></>
|
||||
|
||||
export const CreateQuestionButton = () => {
|
||||
return (
|
||||
<div className={clsx('flex justify-center', className)}>
|
||||
<Link href={`/create${query ? query : ''}`} passHref>
|
||||
<Button color="gradient" size="xl" className="mt-4">
|
||||
{overrideText ?? 'Create a market'}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<SiteLink href="/create">
|
||||
<Button color="gradient" size="xl" className="mt-4 w-full">
|
||||
Create a market
|
||||
</Button>
|
||||
</SiteLink>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -246,7 +246,7 @@ export function RichContent(props: {
|
|||
extensions: [
|
||||
StarterKit,
|
||||
smallImage ? DisplayImage : Image,
|
||||
DisplayLink,
|
||||
DisplayLink.configure({ openOnClick: false }), // stop link opening twice (browser still opens)
|
||||
DisplayMention,
|
||||
Iframe,
|
||||
TiptapTweet,
|
||||
|
|
|
@ -7,7 +7,7 @@ import { Col } from '../layout/col'
|
|||
import { Modal } from '../layout/modal'
|
||||
import { Row } from '../layout/row'
|
||||
import { LoadingIndicator } from '../loading-indicator'
|
||||
import { embedCode } from '../share-embed-button'
|
||||
import { embedContractCode, embedContractGridCode } from '../share-embed-button'
|
||||
import { insertContent } from './utils'
|
||||
|
||||
export function MarketModal(props: {
|
||||
|
@ -28,7 +28,11 @@ export function MarketModal(props: {
|
|||
|
||||
async function doneAddingContracts() {
|
||||
setLoading(true)
|
||||
insertContent(editor, ...contracts.map(embedCode))
|
||||
if (contracts.length == 1) {
|
||||
insertContent(editor, embedContractCode(contracts[0]))
|
||||
} else if (contracts.length > 1) {
|
||||
insertContent(editor, embedContractGridCode(contracts))
|
||||
}
|
||||
setLoading(false)
|
||||
setOpen(false)
|
||||
setContracts([])
|
||||
|
@ -42,9 +46,14 @@ export function MarketModal(props: {
|
|||
|
||||
{!loading && (
|
||||
<Row className="grow justify-end gap-4">
|
||||
{contracts.length > 0 && (
|
||||
{contracts.length == 1 && (
|
||||
<Button onClick={doneAddingContracts} color={'indigo'}>
|
||||
Embed {contracts.length} question
|
||||
Embed 1 question
|
||||
</Button>
|
||||
)}
|
||||
{contracts.length > 1 && (
|
||||
<Button onClick={doneAddingContracts} color={'indigo'}>
|
||||
Embed grid of {contracts.length} question
|
||||
{contracts.length > 1 && 's'}
|
||||
</Button>
|
||||
)}
|
||||
|
|
|
@ -125,15 +125,12 @@ export function FeedComment(props: {
|
|||
} = props
|
||||
const { text, content, userUsername, userName, userAvatarUrl, createdTime } =
|
||||
comment
|
||||
let betOutcome: string | undefined,
|
||||
bought: string | undefined,
|
||||
money: string | undefined
|
||||
|
||||
const matchedBet = betsBySameUser.find((bet) => bet.id === comment.betId)
|
||||
if (matchedBet) {
|
||||
betOutcome = matchedBet.outcome
|
||||
bought = matchedBet.amount >= 0 ? 'bought' : 'sold'
|
||||
money = formatMoney(Math.abs(matchedBet.amount))
|
||||
const betOutcome = comment.betOutcome
|
||||
let bought: string | undefined
|
||||
let money: string | undefined
|
||||
if (comment.betAmount != null) {
|
||||
bought = comment.betAmount >= 0 ? 'bought' : 'sold'
|
||||
money = formatMoney(Math.abs(comment.betAmount))
|
||||
}
|
||||
|
||||
const [highlighted, setHighlighted] = useState(false)
|
||||
|
@ -148,7 +145,7 @@ export function FeedComment(props: {
|
|||
const { userPosition, outcome } = getBettorsLargestPositionBeforeTime(
|
||||
contract,
|
||||
comment.createdTime,
|
||||
matchedBet ? [] : betsBySameUser
|
||||
comment.betId ? [] : betsBySameUser
|
||||
)
|
||||
|
||||
return (
|
||||
|
@ -175,7 +172,7 @@ export function FeedComment(props: {
|
|||
username={userUsername}
|
||||
name={userName}
|
||||
/>{' '}
|
||||
{!matchedBet &&
|
||||
{!comment.betId != null &&
|
||||
userPosition > 0 &&
|
||||
contract.outcomeType !== 'NUMERIC' && (
|
||||
<>
|
||||
|
@ -194,7 +191,6 @@ export function FeedComment(props: {
|
|||
of{' '}
|
||||
<OutcomeLabel
|
||||
outcome={betOutcome ? betOutcome : ''}
|
||||
value={(matchedBet as any).value}
|
||||
contract={contract}
|
||||
truncate="short"
|
||||
/>
|
||||
|
|
|
@ -1,99 +0,0 @@
|
|||
import { groupBy, mapValues, maxBy, sortBy } from 'lodash'
|
||||
import { Contract } from 'web/lib/firebase/contracts'
|
||||
import { ContractComment } from 'common/comment'
|
||||
import { Bet } from 'common/bet'
|
||||
|
||||
const MAX_ACTIVE_CONTRACTS = 75
|
||||
|
||||
// This does NOT include comment times, since those aren't part of the contract atm.
|
||||
// TODO: Maybe store last activity time directly in the contract?
|
||||
// Pros: simplifies this code; cons: harder to tweak "activity" definition later
|
||||
function lastActivityTime(contract: Contract) {
|
||||
return Math.max(contract.resolutionTime || 0, contract.createdTime)
|
||||
}
|
||||
|
||||
// Types of activity to surface:
|
||||
// - Comment on a market
|
||||
// - New market created
|
||||
// - Market resolved
|
||||
// - Bet on market
|
||||
export function findActiveContracts(
|
||||
allContracts: Contract[],
|
||||
recentComments: ContractComment[],
|
||||
recentBets: Bet[],
|
||||
seenContracts: { [contractId: string]: number }
|
||||
) {
|
||||
const idToActivityTime = new Map<string, number>()
|
||||
function record(contractId: string, time: number) {
|
||||
// Only record if the time is newer
|
||||
const oldTime = idToActivityTime.get(contractId)
|
||||
idToActivityTime.set(contractId, Math.max(oldTime ?? 0, time))
|
||||
}
|
||||
|
||||
const contractsById = new Map(allContracts.map((c) => [c.id, c]))
|
||||
|
||||
// Record contract activity.
|
||||
for (const contract of allContracts) {
|
||||
record(contract.id, lastActivityTime(contract))
|
||||
}
|
||||
|
||||
// Add every contract that had a recent comment, too
|
||||
for (const comment of recentComments) {
|
||||
if (comment.contractId) {
|
||||
const contract = contractsById.get(comment.contractId)
|
||||
if (contract) record(contract.id, comment.createdTime)
|
||||
}
|
||||
}
|
||||
|
||||
// Add contracts by last bet time.
|
||||
const contractBets = groupBy(recentBets, (bet) => bet.contractId)
|
||||
const contractMostRecentBet = mapValues(
|
||||
contractBets,
|
||||
(bets) => maxBy(bets, (bet) => bet.createdTime) as Bet
|
||||
)
|
||||
for (const bet of Object.values(contractMostRecentBet)) {
|
||||
const contract = contractsById.get(bet.contractId)
|
||||
if (contract) record(contract.id, bet.createdTime)
|
||||
}
|
||||
|
||||
let activeContracts = allContracts.filter(
|
||||
(contract) =>
|
||||
contract.visibility === 'public' &&
|
||||
!contract.isResolved &&
|
||||
(contract.closeTime ?? Infinity) > Date.now()
|
||||
)
|
||||
activeContracts = sortBy(
|
||||
activeContracts,
|
||||
(c) => -(idToActivityTime.get(c.id) ?? 0)
|
||||
)
|
||||
|
||||
const contractComments = groupBy(
|
||||
recentComments,
|
||||
(comment) => comment.contractId
|
||||
)
|
||||
const contractMostRecentComment = mapValues(
|
||||
contractComments,
|
||||
(comments) => maxBy(comments, (c) => c.createdTime) as ContractComment
|
||||
)
|
||||
|
||||
const prioritizedContracts = sortBy(activeContracts, (c) => {
|
||||
const seenTime = seenContracts[c.id]
|
||||
if (!seenTime) {
|
||||
return 0
|
||||
}
|
||||
|
||||
const lastCommentTime = contractMostRecentComment[c.id]?.createdTime
|
||||
if (lastCommentTime && lastCommentTime > seenTime) {
|
||||
return 1
|
||||
}
|
||||
|
||||
const lastBetTime = contractMostRecentBet[c.id]?.createdTime
|
||||
if (lastBetTime && lastBetTime > seenTime) {
|
||||
return 2
|
||||
}
|
||||
|
||||
return seenTime
|
||||
})
|
||||
|
||||
return prioritizedContracts.slice(0, MAX_ACTIVE_CONTRACTS)
|
||||
}
|
|
@ -2,9 +2,9 @@ import clsx from 'clsx'
|
|||
import { PencilIcon } from '@heroicons/react/outline'
|
||||
|
||||
import { User } from 'common/user'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { useFollowers, useFollows } from 'web/hooks/use-follows'
|
||||
import { prefetchUsers, useUser } from 'web/hooks/use-user'
|
||||
import { usePrefetchUsers, useUser } from 'web/hooks/use-user'
|
||||
import { FollowList } from './follow-list'
|
||||
import { Col } from './layout/col'
|
||||
import { Modal } from './layout/modal'
|
||||
|
@ -105,16 +105,9 @@ function FollowsDialog(props: {
|
|||
const { user, followingIds, followerIds, defaultTab, isOpen, setIsOpen } =
|
||||
props
|
||||
|
||||
useEffect(() => {
|
||||
prefetchUsers([...followingIds, ...followerIds])
|
||||
}, [followingIds, followerIds])
|
||||
|
||||
const currentUser = useUser()
|
||||
|
||||
const discoverUserIds = useDiscoverUsers(user?.id)
|
||||
useEffect(() => {
|
||||
prefetchUsers(discoverUserIds)
|
||||
}, [discoverUserIds])
|
||||
usePrefetchUsers([...followingIds, ...followerIds, ...discoverUserIds])
|
||||
|
||||
return (
|
||||
<Modal open={isOpen} setOpen={setIsOpen}>
|
||||
|
|
|
@ -7,22 +7,30 @@ import { Button } from 'web/components/button'
|
|||
import { GroupSelector } from 'web/components/groups/group-selector'
|
||||
import {
|
||||
addContractToGroup,
|
||||
canModifyGroupContracts,
|
||||
removeContractFromGroup,
|
||||
} from 'web/lib/firebase/groups'
|
||||
import { User } from 'common/user'
|
||||
import { Contract } from 'common/contract'
|
||||
import { SiteLink } from 'web/components/site-link'
|
||||
import { GroupLink } from 'common/group'
|
||||
import { useGroupsWithContract } from 'web/hooks/use-group'
|
||||
import { useGroupsWithContract, useMemberGroupIds } from 'web/hooks/use-group'
|
||||
import { Group } from 'common/group'
|
||||
|
||||
export function ContractGroupsList(props: {
|
||||
groupLinks: GroupLink[]
|
||||
contract: Contract
|
||||
user: User | null | undefined
|
||||
}) {
|
||||
const { groupLinks, user, contract } = props
|
||||
const { user, contract } = props
|
||||
const { groupLinks } = contract
|
||||
const groups = useGroupsWithContract(contract)
|
||||
const memberGroupIds = useMemberGroupIds(user)
|
||||
|
||||
const canModifyGroupContracts = (group: Group, userId: string) => {
|
||||
return (
|
||||
group.creatorId === userId ||
|
||||
group.anyoneCanJoin ||
|
||||
memberGroupIds?.includes(group.id)
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Col className={'gap-2'}>
|
||||
<span className={'text-xl text-indigo-700'}>
|
||||
|
@ -35,7 +43,7 @@ export function ContractGroupsList(props: {
|
|||
options={{
|
||||
showSelector: true,
|
||||
showLabel: false,
|
||||
ignoreGroupIds: groupLinks.map((g) => g.groupId),
|
||||
ignoreGroupIds: groupLinks?.map((g) => g.groupId),
|
||||
}}
|
||||
setSelectedGroup={(group) =>
|
||||
group && addContractToGroup(group, contract, user.id)
|
||||
|
@ -62,7 +70,7 @@ export function ContractGroupsList(props: {
|
|||
<Button
|
||||
color={'gray-white'}
|
||||
size={'xs'}
|
||||
onClick={() => removeContractFromGroup(group, contract, user.id)}
|
||||
onClick={() => removeContractFromGroup(group, contract)}
|
||||
>
|
||||
<XIcon className="h-4 w-4 text-gray-500" />
|
||||
</Button>
|
||||
|
|
|
@ -3,17 +3,16 @@ import clsx from 'clsx'
|
|||
import { PencilIcon } from '@heroicons/react/outline'
|
||||
|
||||
import { Group } from 'common/group'
|
||||
import { deleteGroup, updateGroup } from 'web/lib/firebase/groups'
|
||||
import { deleteGroup, joinGroup } from 'web/lib/firebase/groups'
|
||||
import { Spacer } from '../layout/spacer'
|
||||
import { useRouter } from 'next/router'
|
||||
import { Modal } from 'web/components/layout/modal'
|
||||
import { FilterSelectUsers } from 'web/components/filter-select-users'
|
||||
import { User } from 'common/user'
|
||||
import { uniq } from 'lodash'
|
||||
import { useMemberIds } from 'web/hooks/use-group'
|
||||
|
||||
export function EditGroupButton(props: { group: Group; className?: string }) {
|
||||
const { group, className } = props
|
||||
const { memberIds } = group
|
||||
const router = useRouter()
|
||||
|
||||
const [name, setName] = useState(group.name)
|
||||
|
@ -21,7 +20,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
|
|||
const [open, setOpen] = useState(false)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [addMemberUsers, setAddMemberUsers] = useState<User[]>([])
|
||||
|
||||
const memberIds = useMemberIds(group.id)
|
||||
function updateOpen(newOpen: boolean) {
|
||||
setAddMemberUsers([])
|
||||
setOpen(newOpen)
|
||||
|
@ -33,11 +32,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
|
|||
const onSubmit = async () => {
|
||||
setIsSubmitting(true)
|
||||
|
||||
await updateGroup(group, {
|
||||
name,
|
||||
about,
|
||||
memberIds: uniq([...memberIds, ...addMemberUsers.map((user) => user.id)]),
|
||||
})
|
||||
await Promise.all(addMemberUsers.map((user) => joinGroup(group, user.id)))
|
||||
|
||||
setIsSubmitting(false)
|
||||
updateOpen(false)
|
||||
|
|
|
@ -1,391 +0,0 @@
|
|||
import { Row } from 'web/components/layout/row'
|
||||
import { Col } from 'web/components/layout/col'
|
||||
import { PrivateUser, User } from 'common/user'
|
||||
import React, { useEffect, memo, useState, useMemo } from 'react'
|
||||
import { Avatar } from 'web/components/avatar'
|
||||
import { Group } from 'common/group'
|
||||
import { Comment, GroupComment } from 'common/comment'
|
||||
import { createCommentOnGroup } from 'web/lib/firebase/comments'
|
||||
import { CommentInputTextArea } from 'web/components/feed/feed-comments'
|
||||
import { track } from 'web/lib/service/analytics'
|
||||
import { firebaseLogin } from 'web/lib/firebase/users'
|
||||
import { useRouter } from 'next/router'
|
||||
import clsx from 'clsx'
|
||||
import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
|
||||
import { CommentTipMap, CommentTips } from 'web/hooks/use-tip-txns'
|
||||
import { Tipper } from 'web/components/tipper'
|
||||
import { sum } from 'lodash'
|
||||
import { formatMoney } from 'common/util/format'
|
||||
import { useWindowSize } from 'web/hooks/use-window-size'
|
||||
import { Content, useTextEditor } from 'web/components/editor'
|
||||
import { useUnseenNotifications } from 'web/hooks/use-notifications'
|
||||
import { ChevronDownIcon, UsersIcon } from '@heroicons/react/outline'
|
||||
import { setNotificationsAsSeen } from 'web/pages/notifications'
|
||||
import { usePrivateUser } from 'web/hooks/use-user'
|
||||
import { UserLink } from 'web/components/user-link'
|
||||
|
||||
export function GroupChat(props: {
|
||||
messages: GroupComment[]
|
||||
user: User | null | undefined
|
||||
group: Group
|
||||
tips: CommentTipMap
|
||||
}) {
|
||||
const { messages, user, group, tips } = props
|
||||
|
||||
const privateUser = usePrivateUser()
|
||||
|
||||
const { editor, upload } = useTextEditor({
|
||||
simple: true,
|
||||
placeholder: 'Send a message',
|
||||
})
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [scrollToBottomRef, setScrollToBottomRef] =
|
||||
useState<HTMLDivElement | null>(null)
|
||||
const [scrollToMessageId, setScrollToMessageId] = useState('')
|
||||
const [scrollToMessageRef, setScrollToMessageRef] =
|
||||
useState<HTMLDivElement | null>(null)
|
||||
const [replyToUser, setReplyToUser] = useState<any>()
|
||||
|
||||
const router = useRouter()
|
||||
const isMember = user && group.memberIds.includes(user?.id)
|
||||
|
||||
const { width, height } = useWindowSize()
|
||||
const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
|
||||
// Subtract bottom bar when it's showing (less than lg screen)
|
||||
const bottomBarHeight = (width ?? 0) < 1024 ? 58 : 0
|
||||
const remainingHeight =
|
||||
(height ?? 0) - (containerRef?.offsetTop ?? 0) - bottomBarHeight
|
||||
|
||||
// array of groups, where each group is an array of messages that are displayed as one
|
||||
const groupedMessages = useMemo(() => {
|
||||
// Group messages with createdTime within 2 minutes of each other.
|
||||
const tempGrouped: GroupComment[][] = []
|
||||
for (let i = 0; i < messages.length; i++) {
|
||||
const message = messages[i]
|
||||
if (i === 0) tempGrouped.push([message])
|
||||
else {
|
||||
const prevMessage = messages[i - 1]
|
||||
const diff = message.createdTime - prevMessage.createdTime
|
||||
const creatorsMatch = message.userId === prevMessage.userId
|
||||
if (diff < 2 * 60 * 1000 && creatorsMatch) {
|
||||
tempGrouped.at(-1)?.push(message)
|
||||
} else {
|
||||
tempGrouped.push([message])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return tempGrouped
|
||||
}, [messages])
|
||||
|
||||
useEffect(() => {
|
||||
scrollToMessageRef?.scrollIntoView()
|
||||
}, [scrollToMessageRef])
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollToBottomRef)
|
||||
scrollToBottomRef.scrollTo({ top: scrollToBottomRef.scrollHeight || 0 })
|
||||
// Must also listen to groupedMessages as they update the height of the messaging window
|
||||
}, [scrollToBottomRef, groupedMessages])
|
||||
|
||||
useEffect(() => {
|
||||
const elementInUrl = router.asPath.split('#')[1]
|
||||
if (messages.map((m) => m.id).includes(elementInUrl)) {
|
||||
setScrollToMessageId(elementInUrl)
|
||||
}
|
||||
}, [messages, router.asPath])
|
||||
|
||||
useEffect(() => {
|
||||
// is mobile?
|
||||
if (width && width > 720) focusInput()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [width])
|
||||
|
||||
function onReplyClick(comment: Comment) {
|
||||
setReplyToUser({ id: comment.userId, username: comment.userUsername })
|
||||
}
|
||||
|
||||
async function submitMessage() {
|
||||
if (!user) {
|
||||
track('sign in to comment')
|
||||
return await firebaseLogin()
|
||||
}
|
||||
if (!editor || editor.isEmpty || isSubmitting) return
|
||||
setIsSubmitting(true)
|
||||
await createCommentOnGroup(group.id, editor.getJSON(), user)
|
||||
editor.commands.clearContent()
|
||||
setIsSubmitting(false)
|
||||
setReplyToUser(undefined)
|
||||
focusInput()
|
||||
}
|
||||
function focusInput() {
|
||||
editor?.commands.focus()
|
||||
}
|
||||
|
||||
return (
|
||||
<Col ref={setContainerRef} style={{ height: remainingHeight }}>
|
||||
<Col
|
||||
className={
|
||||
'w-full flex-1 space-y-2 overflow-x-hidden overflow-y-scroll pt-2'
|
||||
}
|
||||
ref={setScrollToBottomRef}
|
||||
>
|
||||
{groupedMessages.map((messages) => (
|
||||
<GroupMessage
|
||||
user={user}
|
||||
key={`group ${messages[0].id}`}
|
||||
comments={messages}
|
||||
group={group}
|
||||
onReplyClick={onReplyClick}
|
||||
highlight={messages[0].id === scrollToMessageId}
|
||||
setRef={
|
||||
scrollToMessageId === messages[0].id
|
||||
? setScrollToMessageRef
|
||||
: undefined
|
||||
}
|
||||
tips={tips[messages[0].id] ?? {}}
|
||||
/>
|
||||
))}
|
||||
{messages.length === 0 && (
|
||||
<div className="p-2 text-gray-500">
|
||||
No messages yet. Why not{isMember ? ` ` : ' join and '}
|
||||
<button
|
||||
className={'cursor-pointer font-bold text-gray-700'}
|
||||
onClick={focusInput}
|
||||
>
|
||||
add one?
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
{user && group.memberIds.includes(user.id) && (
|
||||
<div className="flex w-full justify-start gap-2 p-2">
|
||||
<div className="mt-1">
|
||||
<Avatar
|
||||
username={user?.username}
|
||||
avatarUrl={user?.avatarUrl}
|
||||
size={'sm'}
|
||||
/>
|
||||
</div>
|
||||
<div className={'flex-1'}>
|
||||
<CommentInputTextArea
|
||||
editor={editor}
|
||||
upload={upload}
|
||||
user={user}
|
||||
replyToUser={replyToUser}
|
||||
submitComment={submitMessage}
|
||||
isSubmitting={isSubmitting}
|
||||
submitOnEnter
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{privateUser && (
|
||||
<GroupChatNotificationsIcon
|
||||
group={group}
|
||||
privateUser={privateUser}
|
||||
shouldSetAsSeen={true}
|
||||
hidden={true}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
export function GroupChatInBubble(props: {
|
||||
messages: GroupComment[]
|
||||
user: User | null | undefined
|
||||
privateUser: PrivateUser | null | undefined
|
||||
group: Group
|
||||
tips: CommentTipMap
|
||||
}) {
|
||||
const { messages, user, group, tips, privateUser } = props
|
||||
const [shouldShowChat, setShouldShowChat] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
const groupsWithChatEmphasis = [
|
||||
'welcome',
|
||||
'bugs',
|
||||
'manifold-features-25bad7c7792e',
|
||||
'updates',
|
||||
]
|
||||
if (
|
||||
router.asPath.includes('/chat') ||
|
||||
groupsWithChatEmphasis.includes(
|
||||
router.asPath.split('/group/')[1].split('/')[0]
|
||||
)
|
||||
) {
|
||||
setShouldShowChat(true)
|
||||
}
|
||||
// Leave chat open between groups if user is using chat?
|
||||
else {
|
||||
setShouldShowChat(false)
|
||||
}
|
||||
}, [router.asPath])
|
||||
|
||||
return (
|
||||
<Col
|
||||
className={clsx(
|
||||
'fixed right-0 bottom-[0px] h-1 w-full sm:bottom-[20px] sm:right-20 sm:w-2/3 md:w-1/2 lg:right-24 lg:w-1/3 xl:right-32 xl:w-1/4',
|
||||
shouldShowChat ? 'p-2m z-10 h-screen bg-white' : ''
|
||||
)}
|
||||
>
|
||||
{shouldShowChat && (
|
||||
<GroupChat messages={messages} user={user} group={group} tips={tips} />
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(
|
||||
'fixed right-1 inline-flex items-center rounded-full border md:right-2 lg:right-5 xl:right-10' +
|
||||
' border-transparent p-3 text-white shadow-sm lg:p-4' +
|
||||
' focus:outline-none focus:ring-2 focus:ring-offset-2 ' +
|
||||
' bottom-[70px] ',
|
||||
shouldShowChat
|
||||
? 'bottom-auto top-2 bg-gray-600 hover:bg-gray-400 focus:ring-gray-500 sm:bottom-[70px] sm:top-auto '
|
||||
: ' bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500'
|
||||
)}
|
||||
onClick={() => {
|
||||
// router.push('/chat')
|
||||
setShouldShowChat(!shouldShowChat)
|
||||
track('mobile group chat button')
|
||||
}}
|
||||
>
|
||||
{!shouldShowChat ? (
|
||||
<UsersIcon className="h-10 w-10" aria-hidden="true" />
|
||||
) : (
|
||||
<ChevronDownIcon className={'h-10 w-10'} aria-hidden={'true'} />
|
||||
)}
|
||||
{privateUser && (
|
||||
<GroupChatNotificationsIcon
|
||||
group={group}
|
||||
privateUser={privateUser}
|
||||
shouldSetAsSeen={shouldShowChat}
|
||||
hidden={false}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
function GroupChatNotificationsIcon(props: {
|
||||
group: Group
|
||||
privateUser: PrivateUser
|
||||
shouldSetAsSeen: boolean
|
||||
hidden: boolean
|
||||
}) {
|
||||
const { privateUser, group, shouldSetAsSeen, hidden } = props
|
||||
const notificationsForThisGroup = useUnseenNotifications(
|
||||
privateUser
|
||||
// Disabled tracking by customHref for now.
|
||||
// {
|
||||
// customHref: `/group/${group.slug}`,
|
||||
// }
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!notificationsForThisGroup) return
|
||||
|
||||
notificationsForThisGroup.forEach((notification) => {
|
||||
if (
|
||||
(shouldSetAsSeen && notification.isSeenOnHref?.includes('chat')) ||
|
||||
// old style chat notif that simply ended with the group slug
|
||||
notification.isSeenOnHref?.endsWith(group.slug)
|
||||
) {
|
||||
setNotificationsAsSeen([notification])
|
||||
}
|
||||
})
|
||||
}, [group.slug, notificationsForThisGroup, shouldSetAsSeen])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
!hidden &&
|
||||
notificationsForThisGroup &&
|
||||
notificationsForThisGroup.length > 0 &&
|
||||
!shouldSetAsSeen
|
||||
? 'absolute right-4 top-4 h-3 w-3 rounded-full border-2 border-white bg-red-500'
|
||||
: 'hidden'
|
||||
}
|
||||
></div>
|
||||
)
|
||||
}
|
||||
|
||||
const GroupMessage = memo(function GroupMessage_(props: {
|
||||
user: User | null | undefined
|
||||
comments: GroupComment[]
|
||||
group: Group
|
||||
onReplyClick?: (comment: Comment) => void
|
||||
setRef?: (ref: HTMLDivElement) => void
|
||||
highlight?: boolean
|
||||
tips: CommentTips
|
||||
}) {
|
||||
const { comments, onReplyClick, group, setRef, highlight, user, tips } = props
|
||||
const first = comments[0]
|
||||
const { id, userUsername, userName, userAvatarUrl, createdTime } = first
|
||||
|
||||
const isCreatorsComment = user && first.userId === user.id
|
||||
return (
|
||||
<Col
|
||||
ref={setRef}
|
||||
className={clsx(
|
||||
isCreatorsComment ? 'mr-2 self-end' : '',
|
||||
'w-fit max-w-sm gap-1 space-x-3 rounded-md bg-white p-1 text-sm text-gray-500 transition-colors duration-1000 sm:max-w-md sm:p-3 sm:leading-[1.3rem]',
|
||||
highlight ? `-m-1 bg-indigo-500/[0.2] p-2` : ''
|
||||
)}
|
||||
>
|
||||
<Row className={'items-center'}>
|
||||
{!isCreatorsComment && (
|
||||
<Col>
|
||||
<Avatar
|
||||
className={'mx-2 ml-2.5'}
|
||||
size={'xs'}
|
||||
username={userUsername}
|
||||
avatarUrl={userAvatarUrl}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
{!isCreatorsComment ? (
|
||||
<UserLink username={userUsername} name={userName} />
|
||||
) : (
|
||||
<span className={'ml-2.5'}>{'You'}</span>
|
||||
)}
|
||||
<CopyLinkDateTimeComponent
|
||||
prefix={'group'}
|
||||
slug={group.slug}
|
||||
createdTime={createdTime}
|
||||
elementId={id}
|
||||
/>
|
||||
</Row>
|
||||
<div className="mt-2 text-base text-black">
|
||||
{comments.map((comment) => (
|
||||
<Content
|
||||
key={comment.id}
|
||||
content={comment.content || comment.text}
|
||||
smallImage
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Row>
|
||||
{!isCreatorsComment && onReplyClick && (
|
||||
<button
|
||||
className={
|
||||
'self-start py-1 text-xs font-bold text-gray-500 hover:underline'
|
||||
}
|
||||
onClick={() => onReplyClick(first)}
|
||||
>
|
||||
Reply
|
||||
</button>
|
||||
)}
|
||||
{isCreatorsComment && sum(Object.values(tips)) > 0 && (
|
||||
<span className={'text-primary'}>
|
||||
{formatMoney(sum(Object.values(tips)))}
|
||||
</span>
|
||||
)}
|
||||
{!isCreatorsComment && <Tipper comment={first} tips={tips} />}
|
||||
</Row>
|
||||
</Col>
|
||||
)
|
||||
})
|
|
@ -5,6 +5,7 @@ import {
|
|||
CheckIcon,
|
||||
PlusCircleIcon,
|
||||
SelectorIcon,
|
||||
UserIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import clsx from 'clsx'
|
||||
import { CreateGroupButton } from 'web/components/groups/create-group-button'
|
||||
|
@ -12,6 +13,7 @@ import { useState } from 'react'
|
|||
import { useMemberGroups, useOpenGroups } from 'web/hooks/use-group'
|
||||
import { User } from 'common/user'
|
||||
import { searchInAny } from 'common/util/parse'
|
||||
import { Row } from 'web/components/layout/row'
|
||||
|
||||
export function GroupSelector(props: {
|
||||
selectedGroup: Group | undefined
|
||||
|
@ -28,13 +30,27 @@ export function GroupSelector(props: {
|
|||
const { showSelector, showLabel, ignoreGroupIds } = options
|
||||
const [query, setQuery] = useState('')
|
||||
const openGroups = useOpenGroups()
|
||||
const memberGroups = useMemberGroups(creator?.id)
|
||||
const memberGroupIds = memberGroups?.map((g) => g.id) ?? []
|
||||
const availableGroups = openGroups
|
||||
.concat(
|
||||
(useMemberGroups(creator?.id) ?? []).filter(
|
||||
(memberGroups ?? []).filter(
|
||||
(g) => !openGroups.map((og) => og.id).includes(g.id)
|
||||
)
|
||||
)
|
||||
.filter((group) => !ignoreGroupIds?.includes(group.id))
|
||||
.sort((a, b) => b.totalContracts - a.totalContracts)
|
||||
// put the groups the user is a member of first
|
||||
.sort((a, b) => {
|
||||
if (memberGroupIds.includes(a.id)) {
|
||||
return -1
|
||||
}
|
||||
if (memberGroupIds.includes(b.id)) {
|
||||
return 1
|
||||
}
|
||||
return 0
|
||||
})
|
||||
|
||||
const filteredGroups = availableGroups.filter((group) =>
|
||||
searchInAny(query, group.name)
|
||||
)
|
||||
|
@ -96,7 +112,7 @@ export function GroupSelector(props: {
|
|||
value={group}
|
||||
className={({ active }) =>
|
||||
clsx(
|
||||
'relative h-12 cursor-pointer select-none py-2 pl-4 pr-9',
|
||||
'relative h-12 cursor-pointer select-none py-2 pr-6',
|
||||
active ? 'bg-indigo-500 text-white' : 'text-gray-900'
|
||||
)
|
||||
}
|
||||
|
@ -115,11 +131,28 @@ export function GroupSelector(props: {
|
|||
)}
|
||||
<span
|
||||
className={clsx(
|
||||
'ml-5 mt-1 block truncate',
|
||||
'ml-3 mt-1 block flex flex-row justify-between',
|
||||
selected && 'font-semibold'
|
||||
)}
|
||||
>
|
||||
{group.name}
|
||||
<Row className={'items-center gap-1 truncate pl-5'}>
|
||||
{memberGroupIds.includes(group.id) && (
|
||||
<UserIcon
|
||||
className={'text-primary h-4 w-4 shrink-0'}
|
||||
/>
|
||||
)}
|
||||
{group.name}
|
||||
</Row>
|
||||
<span
|
||||
className={clsx(
|
||||
'ml-1 w-[1.4rem] shrink-0 rounded-full bg-indigo-500 text-center text-white',
|
||||
group.totalContracts > 99 ? 'w-[2.1rem]' : ''
|
||||
)}
|
||||
>
|
||||
{group.totalContracts > 99
|
||||
? '99+'
|
||||
: group.totalContracts}
|
||||
</span>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import clsx from 'clsx'
|
||||
import { User } from 'common/user'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { useUser } from 'web/hooks/use-user'
|
||||
import { withTracking } from 'web/lib/service/analytics'
|
||||
import { Row } from 'web/components/layout/row'
|
||||
import { useMemberGroups } from 'web/hooks/use-group'
|
||||
import { useMemberGroups, useMemberIds } from 'web/hooks/use-group'
|
||||
import { TextButton } from 'web/components/text-button'
|
||||
import { Group } from 'common/group'
|
||||
import { Modal } from 'web/components/layout/modal'
|
||||
|
@ -17,9 +17,7 @@ import toast from 'react-hot-toast'
|
|||
export function GroupsButton(props: { user: User }) {
|
||||
const { user } = props
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const groups = useMemberGroups(user.id, undefined, {
|
||||
by: 'mostRecentChatActivityTime',
|
||||
})
|
||||
const groups = useMemberGroups(user.id)
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -74,51 +72,34 @@ function GroupsList(props: { groups: Group[] }) {
|
|||
|
||||
function GroupItem(props: { group: Group; className?: string }) {
|
||||
const { group, className } = props
|
||||
const user = useUser()
|
||||
const memberIds = useMemberIds(group.id)
|
||||
return (
|
||||
<Row className={clsx('items-center justify-between gap-2 p-2', className)}>
|
||||
<Row className="line-clamp-1 items-center gap-2">
|
||||
<GroupLinkItem group={group} />
|
||||
</Row>
|
||||
<JoinOrLeaveGroupButton group={group} />
|
||||
<JoinOrLeaveGroupButton
|
||||
group={group}
|
||||
user={user}
|
||||
isMember={user ? memberIds?.includes(user.id) : false}
|
||||
/>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
export function JoinOrLeaveGroupButton(props: {
|
||||
group: Group
|
||||
isMember: boolean
|
||||
user: User | undefined | null
|
||||
small?: boolean
|
||||
className?: string
|
||||
}) {
|
||||
const { group, small, className } = props
|
||||
const currentUser = useUser()
|
||||
const [isMember, setIsMember] = useState<boolean>(false)
|
||||
useEffect(() => {
|
||||
if (currentUser && group.memberIds.includes(currentUser.id)) {
|
||||
setIsMember(group.memberIds.includes(currentUser.id))
|
||||
}
|
||||
}, [currentUser, group])
|
||||
|
||||
const onJoinGroup = () => {
|
||||
if (!currentUser) return
|
||||
setIsMember(true)
|
||||
joinGroup(group, currentUser.id).catch(() => {
|
||||
setIsMember(false)
|
||||
toast.error('Failed to join group')
|
||||
})
|
||||
}
|
||||
const onLeaveGroup = () => {
|
||||
if (!currentUser) return
|
||||
setIsMember(false)
|
||||
leaveGroup(group, currentUser.id).catch(() => {
|
||||
setIsMember(true)
|
||||
toast.error('Failed to leave group')
|
||||
})
|
||||
}
|
||||
|
||||
const { group, small, className, isMember, user } = props
|
||||
const smallStyle =
|
||||
'btn !btn-xs border-2 border-gray-500 bg-white normal-case text-gray-500 hover:border-gray-500 hover:bg-white hover:text-gray-500'
|
||||
|
||||
if (!currentUser || isMember === undefined) {
|
||||
if (!user) {
|
||||
if (!group.anyoneCanJoin)
|
||||
return <div className={clsx(className, 'text-gray-500')}>Closed</div>
|
||||
return (
|
||||
|
@ -126,10 +107,20 @@ export function JoinOrLeaveGroupButton(props: {
|
|||
onClick={firebaseLogin}
|
||||
className={clsx('btn btn-sm', small && smallStyle, className)}
|
||||
>
|
||||
Login to Join
|
||||
Login to follow
|
||||
</button>
|
||||
)
|
||||
}
|
||||
const onJoinGroup = () => {
|
||||
joinGroup(group, user.id).catch(() => {
|
||||
toast.error('Failed to join group')
|
||||
})
|
||||
}
|
||||
const onLeaveGroup = () => {
|
||||
leaveGroup(group, user.id).catch(() => {
|
||||
toast.error('Failed to leave group')
|
||||
})
|
||||
}
|
||||
|
||||
if (isMember) {
|
||||
return (
|
||||
|
@ -141,7 +132,7 @@ export function JoinOrLeaveGroupButton(props: {
|
|||
)}
|
||||
onClick={withTracking(onLeaveGroup, 'leave group')}
|
||||
>
|
||||
Leave
|
||||
Unfollow
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
@ -153,7 +144,7 @@ export function JoinOrLeaveGroupButton(props: {
|
|||
className={clsx('btn btn-sm', small && smallStyle, className)}
|
||||
onClick={withTracking(onJoinGroup, 'join group')}
|
||||
>
|
||||
Join
|
||||
Follow
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
75
web/components/multi-user-transaction-link.tsx
Normal file
75
web/components/multi-user-transaction-link.tsx
Normal file
|
@ -0,0 +1,75 @@
|
|||
import { useState } from 'react'
|
||||
import { Row } from 'web/components/layout/row'
|
||||
import { Modal } from 'web/components/layout/modal'
|
||||
import { Col } from 'web/components/layout/col'
|
||||
import { formatMoney } from 'common/util/format'
|
||||
import { Avatar } from 'web/components/avatar'
|
||||
import { UserLink } from 'web/components/user-link'
|
||||
import { Button } from 'web/components/button'
|
||||
|
||||
export type MultiUserLinkInfo = {
|
||||
name: string
|
||||
username: string
|
||||
avatarUrl: string | undefined
|
||||
amount: number
|
||||
}
|
||||
|
||||
export function MultiUserTransactionLink(props: {
|
||||
userInfos: MultiUserLinkInfo[]
|
||||
modalLabel: string
|
||||
}) {
|
||||
const { userInfos, modalLabel } = props
|
||||
const [open, setOpen] = useState(false)
|
||||
const maxShowCount = 5
|
||||
return (
|
||||
<Row>
|
||||
<Button
|
||||
size={'xs'}
|
||||
color={'gray-white'}
|
||||
className={'z-10 mr-1 gap-1 bg-transparent'}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setOpen(true)
|
||||
}}
|
||||
>
|
||||
<Row className={'items-center gap-1 sm:gap-2'}>
|
||||
{userInfos.map(
|
||||
(userInfo, index) =>
|
||||
index < maxShowCount && (
|
||||
<Avatar
|
||||
username={userInfo.username}
|
||||
size={'sm'}
|
||||
avatarUrl={userInfo.avatarUrl}
|
||||
noLink={userInfos.length > 1}
|
||||
key={userInfo.username + 'avatar'}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
{userInfos.length > maxShowCount && (
|
||||
<span>& {userInfos.length - maxShowCount} more</span>
|
||||
)}
|
||||
</Row>
|
||||
</Button>
|
||||
<Modal open={open} setOpen={setOpen} size={'sm'}>
|
||||
<Col className="items-start gap-4 rounded-md bg-white p-6">
|
||||
<span className={'text-xl'}>{modalLabel}</span>
|
||||
{userInfos.map((userInfo) => (
|
||||
<Row
|
||||
key={userInfo.username + 'list'}
|
||||
className="w-full items-center gap-2"
|
||||
>
|
||||
<span className="text-primary min-w-[3.5rem]">
|
||||
+{formatMoney(userInfo.amount)}
|
||||
</span>
|
||||
<Avatar
|
||||
username={userInfo.username}
|
||||
avatarUrl={userInfo.avatarUrl}
|
||||
/>
|
||||
<UserLink name={userInfo.name} username={userInfo.username} />
|
||||
</Row>
|
||||
))}
|
||||
</Col>
|
||||
</Modal>
|
||||
</Row>
|
||||
)
|
||||
}
|
|
@ -19,12 +19,10 @@ export function MenuButton(props: {
|
|||
as="div"
|
||||
className={clsx(className ? className : 'relative z-40 flex-shrink-0')}
|
||||
>
|
||||
<div>
|
||||
<Menu.Button className="w-full rounded-full">
|
||||
<span className="sr-only">Open user menu</span>
|
||||
{buttonContent}
|
||||
</Menu.Button>
|
||||
</div>
|
||||
<Menu.Button className="w-full rounded-full">
|
||||
<span className="sr-only">Open user menu</span>
|
||||
{buttonContent}
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
|
|
|
@ -11,7 +11,7 @@ export function ProfileSummary(props: { user: User }) {
|
|||
<Link href={`/${user.username}?tab=bets`}>
|
||||
<a
|
||||
onClick={trackCallback('sidebar: profile')}
|
||||
className="group flex flex-row items-center gap-4 rounded-md py-3 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
|
||||
className="group mb-3 flex flex-row items-center gap-4 truncate rounded-md py-3 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
|
||||
>
|
||||
<Avatar avatarUrl={user.avatarUrl} username={user.username} noLink />
|
||||
|
||||
|
|
|
@ -234,11 +234,7 @@ export default function Sidebar(props: { className?: string }) {
|
|||
|
||||
{!user && <SignInButton className="mb-4" />}
|
||||
|
||||
{user && (
|
||||
<div className="min-h-[80px] w-full">
|
||||
<ProfileSummary user={user} />
|
||||
</div>
|
||||
)}
|
||||
{user && <ProfileSummary user={user} />}
|
||||
|
||||
{/* Mobile navigation */}
|
||||
<div className="flex min-h-0 shrink flex-col gap-1 lg:hidden">
|
||||
|
@ -255,7 +251,7 @@ export default function Sidebar(props: { className?: string }) {
|
|||
</div>
|
||||
|
||||
{/* Desktop navigation */}
|
||||
<div className="hidden min-h-0 shrink flex-col gap-1 lg:flex">
|
||||
<div className="hidden min-h-0 shrink flex-col items-stretch gap-1 lg:flex ">
|
||||
{navigationOptions.map((item) => (
|
||||
<SidebarItem key={item.href} item={item} currentPage={currentPage} />
|
||||
))}
|
||||
|
@ -264,7 +260,7 @@ export default function Sidebar(props: { className?: string }) {
|
|||
buttonContent={<MoreButton />}
|
||||
/>
|
||||
|
||||
{user && <CreateQuestionButton user={user} />}
|
||||
{user && !user.isBannedFromPosting && <CreateQuestionButton />}
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
|
|
|
@ -12,11 +12,9 @@ export default function NotificationsIcon(props: { className?: string }) {
|
|||
const privateUser = usePrivateUser()
|
||||
|
||||
return (
|
||||
<Row className={clsx('justify-center')}>
|
||||
<div className={'relative'}>
|
||||
{privateUser && <UnseenNotificationsBubble privateUser={privateUser} />}
|
||||
<BellIcon className={clsx(props.className)} />
|
||||
</div>
|
||||
<Row className="relative justify-center">
|
||||
{privateUser && <UnseenNotificationsBubble privateUser={privateUser} />}
|
||||
<BellIcon className={clsx(props.className)} />
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
@ -32,11 +30,11 @@ function UnseenNotificationsBubble(props: { privateUser: PrivateUser }) {
|
|||
|
||||
const notifications = useUnseenGroupedNotification(privateUser)
|
||||
if (!notifications || notifications.length === 0 || seen) {
|
||||
return <div />
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="-mt-0.75 absolute ml-3.5 min-w-[15px] rounded-full bg-indigo-500 p-[2px] text-center text-[10px] leading-3 text-white lg:-mt-1 lg:ml-2">
|
||||
<div className="-mt-0.75 absolute ml-3.5 min-w-[15px] rounded-full bg-indigo-500 p-[2px] text-center text-[10px] leading-3 text-white lg:left-0 lg:-mt-1 lg:ml-2">
|
||||
{notifications.length > NOTIFICATIONS_PER_PAGE
|
||||
? `${NOTIFICATIONS_PER_PAGE}+`
|
||||
: notifications.length}
|
||||
|
|
|
@ -58,7 +58,7 @@ export function Pagination(props: {
|
|||
|
||||
const maxPage = Math.ceil(totalItems / itemsPerPage) - 1
|
||||
|
||||
if (maxPage === 0) return <Spacer h={4} />
|
||||
if (maxPage <= 0) return <Spacer h={4} />
|
||||
|
||||
return (
|
||||
<nav
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import clsx from 'clsx'
|
||||
import { User } from 'common/user'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { prefetchUsers, useUserById } from 'web/hooks/use-user'
|
||||
import { usePrefetchUsers, useUserById } from 'web/hooks/use-user'
|
||||
import { Col } from './layout/col'
|
||||
import { Modal } from './layout/modal'
|
||||
import { Tabs } from './layout/tabs'
|
||||
|
@ -56,9 +56,7 @@ function ReferralsDialog(props: {
|
|||
}
|
||||
}, [isOpen, referredByUser, user.referredByUserId])
|
||||
|
||||
useEffect(() => {
|
||||
prefetchUsers(referralIds)
|
||||
}, [referralIds])
|
||||
usePrefetchUsers(referralIds)
|
||||
|
||||
return (
|
||||
<Modal open={isOpen} setOpen={setIsOpen}>
|
||||
|
|
|
@ -9,11 +9,18 @@ import { DOMAIN } from 'common/envs/constants'
|
|||
import { copyToClipboard } from 'web/lib/util/copy'
|
||||
import { track } from 'web/lib/service/analytics'
|
||||
|
||||
export function embedCode(contract: Contract) {
|
||||
export function embedContractCode(contract: Contract) {
|
||||
const title = contract.question
|
||||
const src = `https://${DOMAIN}/embed${contractPath(contract)}`
|
||||
return `<iframe src="${src}" title="${title}" frameborder="0"></iframe>`
|
||||
}
|
||||
|
||||
return `<iframe width="560" height="405" src="${src}" title="${title}" frameborder="0"></iframe>`
|
||||
export function embedContractGridCode(contracts: Contract[]) {
|
||||
const height = (contracts.length - (contracts.length % 2)) * 100 + 'px'
|
||||
const src = `https://${DOMAIN}/embed/grid/${contracts
|
||||
.map((c) => c.slug)
|
||||
.join('/')}`
|
||||
return `<iframe height="${height}" src="${src}" title="Grid of contracts" frameborder="0"></iframe>`
|
||||
}
|
||||
|
||||
export function ShareEmbedButton(props: { contract: Contract }) {
|
||||
|
@ -26,7 +33,7 @@ export function ShareEmbedButton(props: { contract: Contract }) {
|
|||
as="div"
|
||||
className="relative z-10 flex-shrink-0"
|
||||
onMouseUp={() => {
|
||||
copyToClipboard(embedCode(contract))
|
||||
copyToClipboard(embedContractCode(contract))
|
||||
toast.success('Embed code copied!', {
|
||||
icon: codeIcon,
|
||||
})
|
||||
|
|
|
@ -1,13 +1,7 @@
|
|||
import { linkClass, SiteLink } from 'web/components/site-link'
|
||||
import { SiteLink } from 'web/components/site-link'
|
||||
import clsx from 'clsx'
|
||||
import { Row } from 'web/components/layout/row'
|
||||
import { Modal } from 'web/components/layout/modal'
|
||||
import { Col } from 'web/components/layout/col'
|
||||
import { useState } from 'react'
|
||||
import { Avatar } from 'web/components/avatar'
|
||||
import { formatMoney } from 'common/util/format'
|
||||
|
||||
function shortenName(name: string) {
|
||||
export function shortenName(name: string) {
|
||||
const firstName = name.split(' ')[0]
|
||||
const maxLength = 11
|
||||
const shortName =
|
||||
|
@ -38,63 +32,3 @@ export function UserLink(props: {
|
|||
</SiteLink>
|
||||
)
|
||||
}
|
||||
|
||||
export type MultiUserLinkInfo = {
|
||||
name: string
|
||||
username: string
|
||||
avatarUrl: string | undefined
|
||||
amountTipped: number
|
||||
}
|
||||
|
||||
export function MultiUserTipLink(props: {
|
||||
userInfos: MultiUserLinkInfo[]
|
||||
className?: string
|
||||
}) {
|
||||
const { userInfos, className } = props
|
||||
const [open, setOpen] = useState(false)
|
||||
const maxShowCount = 2
|
||||
return (
|
||||
<>
|
||||
<Row
|
||||
className={clsx('mr-1 inline-flex gap-1', linkClass, className)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setOpen(true)
|
||||
}}
|
||||
>
|
||||
{userInfos.map((userInfo, index) =>
|
||||
index < maxShowCount ? (
|
||||
<span key={userInfo.username + 'shortened'} className={linkClass}>
|
||||
{shortenName(userInfo.name) +
|
||||
(index < maxShowCount - 1 ? ', ' : '')}
|
||||
</span>
|
||||
) : (
|
||||
<span className={linkClass}>
|
||||
& {userInfos.length - maxShowCount} more
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</Row>
|
||||
<Modal open={open} setOpen={setOpen} size={'sm'}>
|
||||
<Col className="items-start gap-4 rounded-md bg-white p-6">
|
||||
<span className={'text-xl'}>Who tipped you</span>
|
||||
{userInfos.map((userInfo) => (
|
||||
<Row
|
||||
key={userInfo.username + 'list'}
|
||||
className="w-full items-center gap-2"
|
||||
>
|
||||
<span className="text-primary min-w-[3.5rem]">
|
||||
+{formatMoney(userInfo.amountTipped)}
|
||||
</span>
|
||||
<Avatar
|
||||
username={userInfo.username}
|
||||
avatarUrl={userInfo.avatarUrl}
|
||||
/>
|
||||
<UserLink name={userInfo.name} username={userInfo.username} />
|
||||
</Row>
|
||||
))}
|
||||
</Col>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useEvent } from '../hooks/use-event'
|
||||
|
||||
export function VisibilityObserver(props: {
|
||||
|
@ -8,17 +8,18 @@ export function VisibilityObserver(props: {
|
|||
const { className } = props
|
||||
const [elem, setElem] = useState<HTMLElement | null>(null)
|
||||
const onVisibilityUpdated = useEvent(props.onVisibilityUpdated)
|
||||
|
||||
useEffect(() => {
|
||||
const hasIOSupport = !!window.IntersectionObserver
|
||||
if (!hasIOSupport || !elem) return
|
||||
|
||||
const observer = new IntersectionObserver(([entry]) => {
|
||||
const observer = useRef(
|
||||
new IntersectionObserver(([entry]) => {
|
||||
onVisibilityUpdated(entry.isIntersecting)
|
||||
}, {})
|
||||
observer.observe(elem)
|
||||
return () => observer.disconnect()
|
||||
}, [elem, onVisibilityUpdated])
|
||||
).current
|
||||
|
||||
useEffect(() => {
|
||||
if (elem) {
|
||||
observer.observe(elem)
|
||||
return () => observer.unobserve(elem)
|
||||
}
|
||||
}, [elem, observer])
|
||||
|
||||
return <div ref={setElem} className={className}></div>
|
||||
}
|
||||
|
|
|
@ -9,9 +9,10 @@ import {
|
|||
listenForHotContracts,
|
||||
listenForInactiveContracts,
|
||||
listenForNewContracts,
|
||||
getUserBetContracts,
|
||||
getUserBetContractsQuery,
|
||||
} from 'web/lib/firebase/contracts'
|
||||
import { QueryClient } from 'react-query'
|
||||
import { useQueryClient } from 'react-query'
|
||||
|
||||
export const useContracts = () => {
|
||||
const [contracts, setContracts] = useState<Contract[] | undefined>()
|
||||
|
@ -93,12 +94,12 @@ export const useUpdatedContracts = (contracts: Contract[] | undefined) => {
|
|||
: undefined
|
||||
}
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
export const prefetchUserBetContracts = (userId: string) =>
|
||||
queryClient.prefetchQuery(['contracts', 'bets', userId], () =>
|
||||
getUserBetContractsQuery(userId)
|
||||
export const usePrefetchUserBetContracts = (userId: string) => {
|
||||
const queryClient = useQueryClient()
|
||||
return queryClient.prefetchQuery(['contracts', 'bets', userId], () =>
|
||||
getUserBetContracts(userId)
|
||||
)
|
||||
}
|
||||
|
||||
export const useUserBetContracts = (userId: string) => {
|
||||
const result = useFirestoreQueryData(
|
||||
|
|
|
@ -2,16 +2,21 @@ import { useEffect, useState } from 'react'
|
|||
import { Group } from 'common/group'
|
||||
import { User } from 'common/user'
|
||||
import {
|
||||
GroupMemberDoc,
|
||||
groupMembers,
|
||||
listenForGroup,
|
||||
listenForGroupContractDocs,
|
||||
listenForGroups,
|
||||
listenForMemberGroupIds,
|
||||
listenForMemberGroups,
|
||||
listenForOpenGroups,
|
||||
listGroups,
|
||||
} from 'web/lib/firebase/groups'
|
||||
import { getUser, getUsers } from 'web/lib/firebase/users'
|
||||
import { getUser } from 'web/lib/firebase/users'
|
||||
import { filterDefined } from 'common/util/array'
|
||||
import { Contract } from 'common/contract'
|
||||
import { uniq } from 'lodash'
|
||||
import { listenForValues } from 'web/lib/firebase/utils'
|
||||
|
||||
export const useGroup = (groupId: string | undefined) => {
|
||||
const [group, setGroup] = useState<Group | null | undefined>()
|
||||
|
@ -43,29 +48,12 @@ export const useOpenGroups = () => {
|
|||
return groups
|
||||
}
|
||||
|
||||
export const useMemberGroups = (
|
||||
userId: string | null | undefined,
|
||||
options?: { withChatEnabled: boolean },
|
||||
sort?: { by: 'mostRecentChatActivityTime' | 'mostRecentContractAddedTime' }
|
||||
) => {
|
||||
export const useMemberGroups = (userId: string | null | undefined) => {
|
||||
const [memberGroups, setMemberGroups] = useState<Group[] | undefined>()
|
||||
useEffect(() => {
|
||||
if (userId)
|
||||
return listenForMemberGroups(
|
||||
userId,
|
||||
(groups) => {
|
||||
if (options?.withChatEnabled)
|
||||
return setMemberGroups(
|
||||
filterDefined(
|
||||
groups.filter((group) => group.chatDisabled !== true)
|
||||
)
|
||||
)
|
||||
return setMemberGroups(groups)
|
||||
},
|
||||
sort
|
||||
)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [options?.withChatEnabled, sort?.by, userId])
|
||||
return listenForMemberGroups(userId, (groups) => setMemberGroups(groups))
|
||||
}, [userId])
|
||||
return memberGroups
|
||||
}
|
||||
|
||||
|
@ -77,16 +65,8 @@ export const useMemberGroupIds = (user: User | null | undefined) => {
|
|||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
const key = `member-groups-${user.id}`
|
||||
const memberGroupJson = localStorage.getItem(key)
|
||||
if (memberGroupJson) {
|
||||
setMemberGroupIds(JSON.parse(memberGroupJson))
|
||||
}
|
||||
|
||||
return listenForMemberGroups(user.id, (Groups) => {
|
||||
const groupIds = Groups.map((group) => group.id)
|
||||
return listenForMemberGroupIds(user.id, (groupIds) => {
|
||||
setMemberGroupIds(groupIds)
|
||||
localStorage.setItem(key, JSON.stringify(groupIds))
|
||||
})
|
||||
}
|
||||
}, [user])
|
||||
|
@ -94,26 +74,29 @@ export const useMemberGroupIds = (user: User | null | undefined) => {
|
|||
return memberGroupIds
|
||||
}
|
||||
|
||||
export function useMembers(group: Group, max?: number) {
|
||||
export function useMembers(groupId: string | undefined) {
|
||||
const [members, setMembers] = useState<User[]>([])
|
||||
useEffect(() => {
|
||||
const { memberIds } = group
|
||||
if (memberIds.length > 0) {
|
||||
listMembers(group, max).then((members) => setMembers(members))
|
||||
}
|
||||
}, [group, max])
|
||||
if (groupId)
|
||||
listenForValues<GroupMemberDoc>(groupMembers(groupId), (memDocs) => {
|
||||
const memberIds = memDocs.map((memDoc) => memDoc.userId)
|
||||
Promise.all(memberIds.map((id) => getUser(id))).then((users) => {
|
||||
setMembers(users)
|
||||
})
|
||||
})
|
||||
}, [groupId])
|
||||
return members
|
||||
}
|
||||
|
||||
export async function listMembers(group: Group, max?: number) {
|
||||
const { memberIds } = group
|
||||
const numToRetrieve = max ?? memberIds.length
|
||||
if (memberIds.length === 0) return []
|
||||
if (numToRetrieve > 100)
|
||||
return (await getUsers()).filter((user) =>
|
||||
group.memberIds.includes(user.id)
|
||||
)
|
||||
return await Promise.all(group.memberIds.slice(0, numToRetrieve).map(getUser))
|
||||
export function useMemberIds(groupId: string | null) {
|
||||
const [memberIds, setMemberIds] = useState<string[]>([])
|
||||
useEffect(() => {
|
||||
if (groupId)
|
||||
return listenForValues<GroupMemberDoc>(groupMembers(groupId), (docs) => {
|
||||
setMemberIds(docs.map((doc) => doc.userId))
|
||||
})
|
||||
}, [groupId])
|
||||
return memberIds
|
||||
}
|
||||
|
||||
export const useGroupsWithContract = (contract: Contract) => {
|
||||
|
@ -128,3 +111,16 @@ export const useGroupsWithContract = (contract: Contract) => {
|
|||
|
||||
return groups
|
||||
}
|
||||
|
||||
export function useGroupContractIds(groupId: string) {
|
||||
const [contractIds, setContractIds] = useState<string[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
if (groupId)
|
||||
return listenForGroupContractDocs(groupId, (docs) =>
|
||||
setContractIds(docs.map((doc) => doc.contractId))
|
||||
)
|
||||
}, [groupId])
|
||||
|
||||
return contractIds
|
||||
}
|
||||
|
|
|
@ -16,11 +16,7 @@ export type NotificationGroup = {
|
|||
function useNotifications(privateUser: PrivateUser) {
|
||||
const result = useFirestoreQueryData(
|
||||
['notifications-all', privateUser.id],
|
||||
getNotificationsQuery(privateUser.id),
|
||||
{ subscribe: true, includeMetadataChanges: true },
|
||||
// Temporary workaround for react-query bug:
|
||||
// https://github.com/invertase/react-query-firebase/issues/25
|
||||
{ refetchOnMount: 'always' }
|
||||
getNotificationsQuery(privateUser.id)
|
||||
)
|
||||
|
||||
const notifications = useMemo(() => {
|
||||
|
|
|
@ -103,6 +103,7 @@ export const usePagination = <T>(opts: PaginationOptions<T>) => {
|
|||
isEnd: state.isComplete && state.pageEnd >= state.docs.length,
|
||||
getPrev: () => dispatch({ type: 'PREV' }),
|
||||
getNext: () => dispatch({ type: 'NEXT' }),
|
||||
allItems: () => state.docs.map((d) => d.data()),
|
||||
getItems: () =>
|
||||
state.docs.slice(state.pageStart, state.pageEnd).map((d) => d.data()),
|
||||
}
|
||||
|
|
|
@ -1,19 +1,22 @@
|
|||
import { QueryClient } from 'react-query'
|
||||
import { useQueryClient } from 'react-query'
|
||||
import { useFirestoreQueryData } from '@react-query-firebase/firestore'
|
||||
import { DAY_MS, HOUR_MS } from 'common/util/time'
|
||||
import { getPortfolioHistoryQuery, Period } from 'web/lib/firebase/users'
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
import {
|
||||
getPortfolioHistory,
|
||||
getPortfolioHistoryQuery,
|
||||
Period,
|
||||
} from 'web/lib/firebase/users'
|
||||
|
||||
const getCutoff = (period: Period) => {
|
||||
const nowRounded = Math.round(Date.now() / HOUR_MS) * HOUR_MS
|
||||
return periodToCutoff(nowRounded, period).valueOf()
|
||||
}
|
||||
|
||||
export const prefetchPortfolioHistory = (userId: string, period: Period) => {
|
||||
export const usePrefetchPortfolioHistory = (userId: string, period: Period) => {
|
||||
const queryClient = useQueryClient()
|
||||
const cutoff = getCutoff(period)
|
||||
return queryClient.prefetchQuery(['portfolio-history', userId, cutoff], () =>
|
||||
getPortfolioHistoryQuery(userId, cutoff)
|
||||
getPortfolioHistory(userId, cutoff)
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
import { prefetchUserBetContracts } from './use-contracts'
|
||||
import { prefetchPortfolioHistory } from './use-portfolio-history'
|
||||
import { prefetchUserBets } from './use-user-bets'
|
||||
import { usePrefetchUserBetContracts } from './use-contracts'
|
||||
import { usePrefetchPortfolioHistory } from './use-portfolio-history'
|
||||
import { usePrefetchUserBets } from './use-user-bets'
|
||||
|
||||
export function usePrefetch(userId: string | undefined) {
|
||||
const maybeUserId = userId ?? ''
|
||||
|
||||
prefetchUserBets(maybeUserId)
|
||||
prefetchUserBetContracts(maybeUserId)
|
||||
prefetchPortfolioHistory(maybeUserId, 'weekly')
|
||||
return Promise.all([
|
||||
usePrefetchUserBets(maybeUserId),
|
||||
usePrefetchUserBetContracts(maybeUserId),
|
||||
usePrefetchPortfolioHistory(maybeUserId, 'weekly'),
|
||||
])
|
||||
}
|
||||
|
|
22
web/hooks/use-prob-changes.tsx
Normal file
22
web/hooks/use-prob-changes.tsx
Normal file
|
@ -0,0 +1,22 @@
|
|||
import { useFirestoreQueryData } from '@react-query-firebase/firestore'
|
||||
import {
|
||||
getProbChangesNegative,
|
||||
getProbChangesPositive,
|
||||
} from 'web/lib/firebase/contracts'
|
||||
|
||||
export const useProbChanges = (userId: string) => {
|
||||
const { data: positiveChanges } = useFirestoreQueryData(
|
||||
['prob-changes-day-positive', userId],
|
||||
getProbChangesPositive(userId)
|
||||
)
|
||||
const { data: negativeChanges } = useFirestoreQueryData(
|
||||
['prob-changes-day-negative', userId],
|
||||
getProbChangesNegative(userId)
|
||||
)
|
||||
|
||||
if (!positiveChanges || !negativeChanges) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
return { positiveChanges, negativeChanges }
|
||||
}
|
|
@ -1,13 +0,0 @@
|
|||
import { useCallback, useEffect, useRef } from 'react'
|
||||
|
||||
export function useTimeSinceFirstRender() {
|
||||
const startTimeRef = useRef(0)
|
||||
useEffect(() => {
|
||||
startTimeRef.current = Date.now()
|
||||
}, [])
|
||||
|
||||
return useCallback(() => {
|
||||
if (!startTimeRef.current) return 0
|
||||
return Date.now() - startTimeRef.current
|
||||
}, [])
|
||||
}
|
|
@ -1,16 +1,17 @@
|
|||
import { QueryClient } from 'react-query'
|
||||
import { useQueryClient } from 'react-query'
|
||||
import { useFirestoreQueryData } from '@react-query-firebase/firestore'
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
Bet,
|
||||
getUserBets,
|
||||
getUserBetsQuery,
|
||||
listenForUserContractBets,
|
||||
} from 'web/lib/firebase/bets'
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
export const prefetchUserBets = (userId: string) =>
|
||||
queryClient.prefetchQuery(['bets', userId], () => getUserBetsQuery(userId))
|
||||
export const usePrefetchUserBets = (userId: string) => {
|
||||
const queryClient = useQueryClient()
|
||||
return queryClient.prefetchQuery(['bets', userId], () => getUserBets(userId))
|
||||
}
|
||||
|
||||
export const useUserBets = (userId: string) => {
|
||||
const result = useFirestoreQueryData(
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { useContext } from 'react'
|
||||
import { useFirestoreDocumentData } from '@react-query-firebase/firestore'
|
||||
import { QueryClient } from 'react-query'
|
||||
import { useQueryClient } from 'react-query'
|
||||
|
||||
import { doc, DocumentData } from 'firebase/firestore'
|
||||
import { getUser, User, users } from 'web/lib/firebase/users'
|
||||
|
@ -28,12 +28,13 @@ export const useUserById = (userId = '_') => {
|
|||
return result.isLoading ? undefined : result.data
|
||||
}
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
export const prefetchUser = (userId: string) => {
|
||||
queryClient.prefetchQuery(['users', userId], () => getUser(userId))
|
||||
export const usePrefetchUser = (userId: string) => {
|
||||
return usePrefetchUsers([userId])[0]
|
||||
}
|
||||
|
||||
export const prefetchUsers = (userIds: string[]) => {
|
||||
userIds.forEach(prefetchUser)
|
||||
export const usePrefetchUsers = (userIds: string[]) => {
|
||||
const queryClient = useQueryClient()
|
||||
return userIds.map((userId) =>
|
||||
queryClient.prefetchQuery(['users', userId], () => getUser(userId))
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,74 +0,0 @@
|
|||
import { PROJECT_ID } from 'common/envs/constants'
|
||||
import { setCookie, getCookies } from '../util/cookie'
|
||||
import { IncomingMessage, ServerResponse } from 'http'
|
||||
|
||||
const ONE_HOUR_SECS = 60 * 60
|
||||
const TEN_YEARS_SECS = 60 * 60 * 24 * 365 * 10
|
||||
const TOKEN_KINDS = ['refresh', 'id', 'custom'] as const
|
||||
const TOKEN_AGES = {
|
||||
id: ONE_HOUR_SECS,
|
||||
refresh: TEN_YEARS_SECS,
|
||||
custom: ONE_HOUR_SECS,
|
||||
} as const
|
||||
export type TokenKind = typeof TOKEN_KINDS[number]
|
||||
|
||||
const getAuthCookieName = (kind: TokenKind) => {
|
||||
const suffix = `${PROJECT_ID}_${kind}`.toUpperCase().replace(/-/g, '_')
|
||||
return `FIREBASE_TOKEN_${suffix}`
|
||||
}
|
||||
|
||||
const COOKIE_NAMES = Object.fromEntries(
|
||||
TOKEN_KINDS.map((k) => [k, getAuthCookieName(k)])
|
||||
) as Record<TokenKind, string>
|
||||
|
||||
const getCookieDataIsomorphic = (req?: IncomingMessage) => {
|
||||
if (req != null) {
|
||||
return req.headers.cookie ?? ''
|
||||
} else if (document != null) {
|
||||
return document.cookie
|
||||
} else {
|
||||
throw new Error(
|
||||
'Neither request nor document is available; no way to get cookies.'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const setCookieDataIsomorphic = (cookies: string[], res?: ServerResponse) => {
|
||||
if (res != null) {
|
||||
res.setHeader('Set-Cookie', cookies)
|
||||
} else if (document != null) {
|
||||
for (const ck of cookies) {
|
||||
document.cookie = ck
|
||||
}
|
||||
} else {
|
||||
throw new Error(
|
||||
'Neither response nor document is available; no way to set cookies.'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export const getTokensFromCookies = (req?: IncomingMessage) => {
|
||||
const cookies = getCookies(getCookieDataIsomorphic(req))
|
||||
return Object.fromEntries(
|
||||
TOKEN_KINDS.map((k) => [k, cookies[COOKIE_NAMES[k]]])
|
||||
) as Partial<Record<TokenKind, string>>
|
||||
}
|
||||
|
||||
export const setTokenCookies = (
|
||||
cookies: Partial<Record<TokenKind, string | undefined>>,
|
||||
res?: ServerResponse
|
||||
) => {
|
||||
const data = TOKEN_KINDS.filter((k) => k in cookies).map((k) => {
|
||||
const maxAge = cookies[k] ? TOKEN_AGES[k as TokenKind] : 0
|
||||
return setCookie(COOKIE_NAMES[k], cookies[k] ?? '', [
|
||||
['path', '/'],
|
||||
['max-age', maxAge.toString()],
|
||||
['samesite', 'lax'],
|
||||
['secure'],
|
||||
])
|
||||
})
|
||||
setCookieDataIsomorphic(data, res)
|
||||
}
|
||||
|
||||
export const deleteTokenCookies = (res?: ServerResponse) =>
|
||||
setTokenCookies({ id: undefined, refresh: undefined, custom: undefined }, res)
|
|
@ -70,20 +70,16 @@ export function listenForBets(
|
|||
)
|
||||
}
|
||||
|
||||
export async function getUserBets(
|
||||
userId: string,
|
||||
options: { includeRedemptions: boolean }
|
||||
) {
|
||||
const { includeRedemptions } = options
|
||||
return getValues<Bet>(
|
||||
query(collectionGroup(db, 'bets'), where('userId', '==', userId))
|
||||
)
|
||||
.then((bets) =>
|
||||
bets.filter(
|
||||
(bet) => (includeRedemptions || !bet.isRedemption) && !bet.isAnte
|
||||
)
|
||||
)
|
||||
.catch((reason) => reason)
|
||||
export async function getUserBets(userId: string) {
|
||||
return getValues<Bet>(getUserBetsQuery(userId))
|
||||
}
|
||||
|
||||
export function getUserBetsQuery(userId: string) {
|
||||
return query(
|
||||
collectionGroup(db, 'bets'),
|
||||
where('userId', '==', userId),
|
||||
orderBy('createdTime', 'desc')
|
||||
) as Query<Bet>
|
||||
}
|
||||
|
||||
export async function getBets(options: {
|
||||
|
@ -124,22 +120,16 @@ export async function getBets(options: {
|
|||
}
|
||||
|
||||
export async function getContractsOfUserBets(userId: string) {
|
||||
const bets: Bet[] = await getUserBets(userId, { includeRedemptions: false })
|
||||
const contractIds = uniq(bets.map((bet) => bet.contractId))
|
||||
const bets = await getUserBets(userId)
|
||||
const contractIds = uniq(
|
||||
bets.filter((b) => !b.isAnte).map((bet) => bet.contractId)
|
||||
)
|
||||
const contracts = await Promise.all(
|
||||
contractIds.map((contractId) => getContractFromId(contractId))
|
||||
)
|
||||
return filterDefined(contracts)
|
||||
}
|
||||
|
||||
export function getUserBetsQuery(userId: string) {
|
||||
return query(
|
||||
collectionGroup(db, 'bets'),
|
||||
where('userId', '==', userId),
|
||||
orderBy('createdTime', 'desc')
|
||||
) as Query<Bet>
|
||||
}
|
||||
|
||||
export function listenForUserContractBets(
|
||||
userId: string,
|
||||
contractId: string,
|
||||
|
|
|
@ -16,7 +16,7 @@ import {
|
|||
import { partition, sortBy, sum, uniqBy } from 'lodash'
|
||||
|
||||
import { coll, getValues, listenForValue, listenForValues } from './utils'
|
||||
import { BinaryContract, Contract } from 'common/contract'
|
||||
import { BinaryContract, Contract, CPMMContract } from 'common/contract'
|
||||
import { createRNG, shuffle } from 'common/util/random'
|
||||
import { formatMoney, formatPercent } from 'common/util/format'
|
||||
import { DAY_MS } from 'common/util/time'
|
||||
|
@ -104,6 +104,14 @@ export async function listContracts(creatorId: string): Promise<Contract[]> {
|
|||
return snapshot.docs.map((doc) => doc.data())
|
||||
}
|
||||
|
||||
export const tournamentContractsByGroupSlugQuery = (slug: string) =>
|
||||
query(
|
||||
contracts,
|
||||
where('groupSlugs', 'array-contains', slug),
|
||||
where('isResolved', '==', false),
|
||||
orderBy('popularityScore', 'desc')
|
||||
)
|
||||
|
||||
export async function listContractsByGroupSlug(
|
||||
slug: string
|
||||
): Promise<Contract[]> {
|
||||
|
@ -157,6 +165,10 @@ export function listenForUserContracts(
|
|||
return listenForValues<Contract>(q, setContracts)
|
||||
}
|
||||
|
||||
export function getUserBetContracts(userId: string) {
|
||||
return getValues<Contract>(getUserBetContractsQuery(userId))
|
||||
}
|
||||
|
||||
export function getUserBetContractsQuery(userId: string) {
|
||||
return query(
|
||||
contracts,
|
||||
|
@ -391,3 +403,21 @@ export async function getRecentBetsAndComments(contract: Contract) {
|
|||
recentComments,
|
||||
}
|
||||
}
|
||||
|
||||
export const getProbChangesPositive = (userId: string) =>
|
||||
query(
|
||||
contracts,
|
||||
where('uniqueBettorIds', 'array-contains', userId),
|
||||
where('probChanges.day', '>', 0),
|
||||
orderBy('probChanges.day', 'desc'),
|
||||
limit(10)
|
||||
) as Query<CPMMContract>
|
||||
|
||||
export const getProbChangesNegative = (userId: string) =>
|
||||
query(
|
||||
contracts,
|
||||
where('uniqueBettorIds', 'array-contains', userId),
|
||||
where('probChanges.day', '<', 0),
|
||||
orderBy('probChanges.day', 'asc'),
|
||||
limit(10)
|
||||
) as Query<CPMMContract>
|
||||
|
|
|
@ -1,13 +1,17 @@
|
|||
import {
|
||||
collection,
|
||||
collectionGroup,
|
||||
deleteDoc,
|
||||
deleteField,
|
||||
doc,
|
||||
getDocs,
|
||||
onSnapshot,
|
||||
query,
|
||||
setDoc,
|
||||
updateDoc,
|
||||
where,
|
||||
} from 'firebase/firestore'
|
||||
import { sortBy, uniq } from 'lodash'
|
||||
import { uniq, uniqBy } from 'lodash'
|
||||
import { Group, GROUP_CHAT_SLUG, GroupLink } from 'common/group'
|
||||
import {
|
||||
coll,
|
||||
|
@ -17,9 +21,19 @@ import {
|
|||
listenForValues,
|
||||
} from './utils'
|
||||
import { Contract } from 'common/contract'
|
||||
import { updateContract } from 'web/lib/firebase/contracts'
|
||||
import { getContractFromId, updateContract } from 'web/lib/firebase/contracts'
|
||||
import { db } from 'web/lib/firebase/init'
|
||||
import { filterDefined } from 'common/util/array'
|
||||
import { getUser } from 'web/lib/firebase/users'
|
||||
|
||||
export const groups = coll<Group>('groups')
|
||||
export const groupMembers = (groupId: string) =>
|
||||
collection(groups, groupId, 'groupMembers')
|
||||
export const groupContracts = (groupId: string) =>
|
||||
collection(groups, groupId, 'groupContracts')
|
||||
const openGroupsQuery = query(groups, where('anyoneCanJoin', '==', true))
|
||||
const memberGroupsQuery = (userId: string) =>
|
||||
query(collectionGroup(db, 'groupMembers'), where('userId', '==', userId))
|
||||
|
||||
export function groupPath(
|
||||
groupSlug: string,
|
||||
|
@ -33,6 +47,9 @@ export function groupPath(
|
|||
return `/group/${groupSlug}${subpath ? `/${subpath}` : ''}`
|
||||
}
|
||||
|
||||
export type GroupContractDoc = { contractId: string; createdTime: number }
|
||||
export type GroupMemberDoc = { userId: string; createdTime: number }
|
||||
|
||||
export function updateGroup(group: Group, updates: Partial<Group>) {
|
||||
return updateDoc(doc(groups, group.id), updates)
|
||||
}
|
||||
|
@ -57,13 +74,27 @@ export function listenForGroups(setGroups: (groups: Group[]) => void) {
|
|||
return listenForValues(groups, setGroups)
|
||||
}
|
||||
|
||||
export function listenForOpenGroups(setGroups: (groups: Group[]) => void) {
|
||||
return listenForValues(
|
||||
query(groups, where('anyoneCanJoin', '==', true)),
|
||||
setGroups
|
||||
export function listenForGroupContractDocs(
|
||||
groupId: string,
|
||||
setContractDocs: (docs: GroupContractDoc[]) => void
|
||||
) {
|
||||
return listenForValues(groupContracts(groupId), setContractDocs)
|
||||
}
|
||||
|
||||
export async function listGroupContracts(groupId: string) {
|
||||
const contractDocs = await getValues<{
|
||||
contractId: string
|
||||
createdTime: number
|
||||
}>(groupContracts(groupId))
|
||||
return Promise.all(
|
||||
contractDocs.map((doc) => getContractFromId(doc.contractId))
|
||||
)
|
||||
}
|
||||
|
||||
export function listenForOpenGroups(setGroups: (groups: Group[]) => void) {
|
||||
return listenForValues(openGroupsQuery, setGroups)
|
||||
}
|
||||
|
||||
export function getGroup(groupId: string) {
|
||||
return getValue<Group>(doc(groups, groupId))
|
||||
}
|
||||
|
@ -81,33 +112,47 @@ export function listenForGroup(
|
|||
return listenForValue(doc(groups, groupId), setGroup)
|
||||
}
|
||||
|
||||
export function listenForMemberGroups(
|
||||
export function listenForMemberGroupIds(
|
||||
userId: string,
|
||||
setGroups: (groups: Group[]) => void,
|
||||
sort?: { by: 'mostRecentChatActivityTime' | 'mostRecentContractAddedTime' }
|
||||
setGroupIds: (groupIds: string[]) => void
|
||||
) {
|
||||
const q = query(groups, where('memberIds', 'array-contains', userId))
|
||||
const sorter = (group: Group) => {
|
||||
if (sort?.by === 'mostRecentChatActivityTime') {
|
||||
return group.mostRecentChatActivityTime ?? group.createdTime
|
||||
}
|
||||
if (sort?.by === 'mostRecentContractAddedTime') {
|
||||
return group.mostRecentContractAddedTime ?? group.createdTime
|
||||
}
|
||||
return group.mostRecentActivityTime
|
||||
}
|
||||
return listenForValues<Group>(q, (groups) => {
|
||||
const sorted = sortBy(groups, [(group) => -sorter(group)])
|
||||
setGroups(sorted)
|
||||
const q = memberGroupsQuery(userId)
|
||||
return onSnapshot(q, { includeMetadataChanges: true }, (snapshot) => {
|
||||
if (snapshot.metadata.fromCache) return
|
||||
|
||||
const values = snapshot.docs.map((doc) => doc.ref.parent.parent?.id)
|
||||
|
||||
setGroupIds(filterDefined(values))
|
||||
})
|
||||
}
|
||||
|
||||
export async function listenForGroupsWithContractId(
|
||||
contractId: string,
|
||||
export function listenForMemberGroups(
|
||||
userId: string,
|
||||
setGroups: (groups: Group[]) => void
|
||||
) {
|
||||
const q = query(groups, where('contractIds', 'array-contains', contractId))
|
||||
return listenForValues<Group>(q, setGroups)
|
||||
return listenForMemberGroupIds(userId, (groupIds) => {
|
||||
return Promise.all(groupIds.map(getGroup)).then((groups) => {
|
||||
setGroups(filterDefined(groups))
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export async function listAvailableGroups(userId: string) {
|
||||
const [openGroups, memberGroupSnapshot] = await Promise.all([
|
||||
getValues<Group>(openGroupsQuery),
|
||||
getDocs(memberGroupsQuery(userId)),
|
||||
])
|
||||
const memberGroups = filterDefined(
|
||||
await Promise.all(
|
||||
memberGroupSnapshot.docs.map((doc) => {
|
||||
return doc.ref.parent.parent?.id
|
||||
? getGroup(doc.ref.parent.parent?.id)
|
||||
: null
|
||||
})
|
||||
)
|
||||
)
|
||||
|
||||
return uniqBy([...openGroups, ...memberGroups], (g) => g.id)
|
||||
}
|
||||
|
||||
export async function addUserToGroupViaId(groupId: string, userId: string) {
|
||||
|
@ -121,19 +166,18 @@ export async function addUserToGroupViaId(groupId: string, userId: string) {
|
|||
}
|
||||
|
||||
export async function joinGroup(group: Group, userId: string): Promise<void> {
|
||||
const { memberIds } = group
|
||||
if (memberIds.includes(userId)) return // already a member
|
||||
|
||||
const newMemberIds = [...memberIds, userId]
|
||||
return await updateGroup(group, { memberIds: uniq(newMemberIds) })
|
||||
// create a new member document in grouoMembers collection
|
||||
const memberDoc = doc(groupMembers(group.id), userId)
|
||||
return await setDoc(memberDoc, {
|
||||
userId,
|
||||
createdTime: Date.now(),
|
||||
})
|
||||
}
|
||||
|
||||
export async function leaveGroup(group: Group, userId: string): Promise<void> {
|
||||
const { memberIds } = group
|
||||
if (!memberIds.includes(userId)) return // not a member
|
||||
|
||||
const newMemberIds = memberIds.filter((id) => id !== userId)
|
||||
return await updateGroup(group, { memberIds: uniq(newMemberIds) })
|
||||
// delete the member document in groupMembers collection
|
||||
const memberDoc = doc(groupMembers(group.id), userId)
|
||||
return await deleteDoc(memberDoc)
|
||||
}
|
||||
|
||||
export async function addContractToGroup(
|
||||
|
@ -141,7 +185,6 @@ export async function addContractToGroup(
|
|||
contract: Contract,
|
||||
userId: string
|
||||
) {
|
||||
if (!canModifyGroupContracts(group, userId)) return
|
||||
const newGroupLinks = [
|
||||
...(contract.groupLinks ?? []),
|
||||
{
|
||||
|
@ -158,25 +201,18 @@ export async function addContractToGroup(
|
|||
groupLinks: newGroupLinks,
|
||||
})
|
||||
|
||||
if (!group.contractIds.includes(contract.id)) {
|
||||
return await updateGroup(group, {
|
||||
contractIds: uniq([...group.contractIds, contract.id]),
|
||||
})
|
||||
.then(() => group)
|
||||
.catch((err) => {
|
||||
console.error('error adding contract to group', err)
|
||||
return err
|
||||
})
|
||||
}
|
||||
// create new contract document in groupContracts collection
|
||||
const contractDoc = doc(groupContracts(group.id), contract.id)
|
||||
await setDoc(contractDoc, {
|
||||
contractId: contract.id,
|
||||
createdTime: Date.now(),
|
||||
})
|
||||
}
|
||||
|
||||
export async function removeContractFromGroup(
|
||||
group: Group,
|
||||
contract: Contract,
|
||||
userId: string
|
||||
contract: Contract
|
||||
) {
|
||||
if (!canModifyGroupContracts(group, userId)) return
|
||||
|
||||
if (contract.groupLinks?.map((l) => l.groupId).includes(group.id)) {
|
||||
const newGroupLinks = contract.groupLinks?.filter(
|
||||
(link) => link.slug !== group.slug
|
||||
|
@ -188,23 +224,26 @@ export async function removeContractFromGroup(
|
|||
})
|
||||
}
|
||||
|
||||
if (group.contractIds.includes(contract.id)) {
|
||||
const newContractIds = group.contractIds.filter((id) => id !== contract.id)
|
||||
return await updateGroup(group, {
|
||||
contractIds: uniq(newContractIds),
|
||||
})
|
||||
.then(() => group)
|
||||
.catch((err) => {
|
||||
console.error('error removing contract from group', err)
|
||||
return err
|
||||
})
|
||||
}
|
||||
// delete the contract document in groupContracts collection
|
||||
const contractDoc = doc(groupContracts(group.id), contract.id)
|
||||
await deleteDoc(contractDoc)
|
||||
}
|
||||
|
||||
export function canModifyGroupContracts(group: Group, userId: string) {
|
||||
return (
|
||||
group.creatorId === userId ||
|
||||
group.memberIds.includes(userId) ||
|
||||
group.anyoneCanJoin
|
||||
export function getGroupLinkToDisplay(contract: Contract) {
|
||||
const { groupLinks } = contract
|
||||
const sortedGroupLinks = groupLinks?.sort(
|
||||
(a, b) => b.createdTime - a.createdTime
|
||||
)
|
||||
const groupCreatorAdded = sortedGroupLinks?.find(
|
||||
(g) => g.userId === contract.creatorId
|
||||
)
|
||||
const groupToDisplay = groupCreatorAdded
|
||||
? groupCreatorAdded
|
||||
: sortedGroupLinks?.[0] ?? null
|
||||
return groupToDisplay
|
||||
}
|
||||
|
||||
export async function listMembers(group: Group) {
|
||||
const members = await getValues<GroupMemberDoc>(groupMembers(group.id))
|
||||
return await Promise.all(members.map((m) => m.userId).map(getUser))
|
||||
}
|
||||
|
|
|
@ -10,9 +10,28 @@ import { connectFunctionsEmulator, getFunctions } from 'firebase/functions'
|
|||
// Initialize Firebase
|
||||
export const app = getApps().length ? getApp() : initializeApp(FIREBASE_CONFIG)
|
||||
|
||||
export const db = initializeFirestore(app, {
|
||||
experimentalForceLongPolling: true,
|
||||
})
|
||||
function iOS() {
|
||||
if (typeof navigator === 'undefined') {
|
||||
// We're on the server, proceed normally
|
||||
return false
|
||||
}
|
||||
return (
|
||||
[
|
||||
'iPad Simulator',
|
||||
'iPhone Simulator',
|
||||
'iPod Simulator',
|
||||
'iPad',
|
||||
'iPhone',
|
||||
'iPod',
|
||||
].includes(navigator.platform) ||
|
||||
// iPad on iOS 13 detection
|
||||
(navigator.userAgent.includes('Mac') && 'ontouchend' in document)
|
||||
)
|
||||
}
|
||||
// Long polling is necessary for ios, see: https://github.com/firebase/firebase-js-sdk/issues/6118
|
||||
const opts = iOS() ? { experimentalForceLongPolling: true } : {}
|
||||
export const db = initializeFirestore(app, opts)
|
||||
|
||||
export const functions = getFunctions()
|
||||
export const storage = getStorage()
|
||||
|
||||
|
|
|
@ -1,165 +1,81 @@
|
|||
import fetch from 'node-fetch'
|
||||
import { IncomingMessage, ServerResponse } from 'http'
|
||||
import { FIREBASE_CONFIG, PROJECT_ID } from 'common/envs/constants'
|
||||
import { getFunctionUrl } from 'common/api'
|
||||
import { UserCredential } from 'firebase/auth'
|
||||
import {
|
||||
getTokensFromCookies,
|
||||
setTokenCookies,
|
||||
deleteTokenCookies,
|
||||
} from './auth'
|
||||
import { Auth as FirebaseAuth, User as FirebaseUser } from 'firebase/auth'
|
||||
import { AUTH_COOKIE_NAME } from 'common/envs/constants'
|
||||
import { getCookies } from 'web/lib/util/cookie'
|
||||
import {
|
||||
GetServerSideProps,
|
||||
GetServerSidePropsContext,
|
||||
GetServerSidePropsResult,
|
||||
} from 'next'
|
||||
|
||||
// server firebase SDK
|
||||
import * as admin from 'firebase-admin'
|
||||
|
||||
// client firebase SDK
|
||||
import { app as clientApp } from './init'
|
||||
import { getAuth, signInWithCustomToken } from 'firebase/auth'
|
||||
|
||||
const ensureApp = async () => {
|
||||
// Note: firebase-admin can only be imported from a server context,
|
||||
// because it relies on Node standard library dependencies.
|
||||
if (admin.apps.length === 0) {
|
||||
// never initialize twice
|
||||
return admin.initializeApp({ projectId: PROJECT_ID })
|
||||
}
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
return admin.apps[0]!
|
||||
}
|
||||
|
||||
const requestFirebaseIdToken = async (refreshToken: string) => {
|
||||
// See https://firebase.google.com/docs/reference/rest/auth/#section-refresh-token
|
||||
const refreshUrl = new URL('https://securetoken.googleapis.com/v1/token')
|
||||
refreshUrl.searchParams.append('key', FIREBASE_CONFIG.apiKey)
|
||||
const result = await fetch(refreshUrl.toString(), {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
grant_type: 'refresh_token',
|
||||
refresh_token: refreshToken,
|
||||
}),
|
||||
})
|
||||
if (!result.ok) {
|
||||
throw new Error(`Could not refresh ID token: ${await result.text()}`)
|
||||
}
|
||||
return (await result.json()) as { id_token: string; refresh_token: string }
|
||||
}
|
||||
|
||||
const requestManifoldCustomToken = async (idToken: string) => {
|
||||
const functionUrl = getFunctionUrl('getcustomtoken')
|
||||
const result = await fetch(functionUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: `Bearer ${idToken}`,
|
||||
},
|
||||
})
|
||||
if (!result.ok) {
|
||||
throw new Error(`Could not get custom token: ${await result.text()}`)
|
||||
}
|
||||
return (await result.json()) as { token: string }
|
||||
}
|
||||
import { getAuth, updateCurrentUser } from 'firebase/auth'
|
||||
|
||||
type RequestContext = {
|
||||
req: IncomingMessage
|
||||
res: ServerResponse
|
||||
}
|
||||
|
||||
const authAndRefreshTokens = async (ctx: RequestContext) => {
|
||||
const adminAuth = (await ensureApp()).auth()
|
||||
const clientAuth = getAuth(clientApp)
|
||||
console.debug('Initialized Firebase auth libraries.')
|
||||
// The Firebase SDK doesn't really support persisting the logged-in state between
|
||||
// devices, or anything like that. To get it from the client to the server:
|
||||
//
|
||||
// 1. We pack up the user by calling (the undocumented) User.toJSON(). This is the
|
||||
// same way the Firebase SDK saves it to disk, so it's gonna have the right stuff.
|
||||
//
|
||||
// 2. We put it into a cookie and read the cookie out here.
|
||||
//
|
||||
// 3. We use the Firebase "persistence manager" to write the cookie value into the persistent
|
||||
// store on the server (an in-memory store), just as if the SDK had saved the user itself.
|
||||
//
|
||||
// 4. We ask the persistence manager for the current user, which reads what we just wrote,
|
||||
// and creates a real puffed-up internal user object from the serialized user.
|
||||
//
|
||||
// 5. We set that user to be the current Firebase user in the SDK.
|
||||
//
|
||||
// 6. We ask for the ID token, which will refresh it if necessary (i.e. if this cookie
|
||||
// is from an old browser session), so that we know the SDK is prepared to do real
|
||||
// Firebase queries.
|
||||
//
|
||||
// This strategy should be robust, since it's repurposing Firebase's internal persistence
|
||||
// machinery, but the details may eventually need updating for new versions of the SDK.
|
||||
//
|
||||
// References:
|
||||
// Persistence manager: https://github.com/firebase/firebase-js-sdk/blob/39f4635ebc07316661324145f1b8c27f9bd7aedb/packages/auth/src/core/persistence/persistence_user_manager.ts#L64
|
||||
// Token manager: https://github.com/firebase/firebase-js-sdk/blob/39f4635ebc07316661324145f1b8c27f9bd7aedb/packages/auth/src/core/user/token_manager.ts#L76
|
||||
|
||||
let { id, refresh, custom } = getTokensFromCookies(ctx.req)
|
||||
|
||||
// step 0: if you have no refresh token you are logged out
|
||||
if (refresh == null) {
|
||||
console.debug('User is unauthenticated.')
|
||||
return null
|
||||
}
|
||||
|
||||
console.debug('User may be authenticated; checking cookies.')
|
||||
|
||||
// step 1: given a valid refresh token, ensure a valid ID token
|
||||
if (id != null) {
|
||||
// if they have an ID token, throw it out if it's invalid/expired
|
||||
try {
|
||||
await adminAuth.verifyIdToken(id)
|
||||
console.debug('Verified ID token.')
|
||||
} catch {
|
||||
id = undefined
|
||||
console.debug('Invalid existing ID token.')
|
||||
interface FirebaseAuthInternal extends FirebaseAuth {
|
||||
persistenceManager: {
|
||||
fullUserKey: string
|
||||
getCurrentUser: () => Promise<FirebaseUser | null>
|
||||
persistence: {
|
||||
_set: (k: string, obj: Record<string, unknown>) => Promise<void>
|
||||
}
|
||||
}
|
||||
if (id == null) {
|
||||
// ask for a new one from google using the refresh token
|
||||
try {
|
||||
const resp = await requestFirebaseIdToken(refresh)
|
||||
console.debug('Obtained fresh ID token from Firebase.')
|
||||
id = resp.id_token
|
||||
refresh = resp.refresh_token
|
||||
} catch (e) {
|
||||
// big unexpected problem -- functionally, they are not logged in
|
||||
console.error(e)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// step 2: given a valid ID token, ensure a valid custom token, and sign in
|
||||
// to the client SDK with the custom token
|
||||
if (custom != null) {
|
||||
// sign in with this token, or throw it out if it's invalid/expired
|
||||
try {
|
||||
const creds = await signInWithCustomToken(clientAuth, custom)
|
||||
console.debug('Signed in with custom token.')
|
||||
return { creds, id, refresh, custom }
|
||||
} catch {
|
||||
custom = undefined
|
||||
console.debug('Invalid existing custom token.')
|
||||
}
|
||||
}
|
||||
if (custom == null) {
|
||||
// ask for a new one from our cloud functions using the ID token, then sign in
|
||||
try {
|
||||
const resp = await requestManifoldCustomToken(id)
|
||||
console.debug('Obtained fresh custom token from backend.')
|
||||
custom = resp.token
|
||||
const creds = await signInWithCustomToken(clientAuth, custom)
|
||||
console.debug('Signed in with custom token.')
|
||||
return { creds, id, refresh, custom }
|
||||
} catch (e) {
|
||||
// big unexpected problem -- functionally, they are not logged in
|
||||
console.error(e)
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export const authenticateOnServer = async (ctx: RequestContext) => {
|
||||
console.debug('Server authentication sequence starting.')
|
||||
const tokens = await authAndRefreshTokens(ctx)
|
||||
console.debug('Finished checking and refreshing tokens.')
|
||||
const creds = tokens?.creds
|
||||
try {
|
||||
if (tokens == null) {
|
||||
deleteTokenCookies(ctx.res)
|
||||
console.debug('Not logged in; cleared token cookies.')
|
||||
} else {
|
||||
setTokenCookies(tokens, ctx.res)
|
||||
console.debug('Logged in; set current token cookies.')
|
||||
}
|
||||
} catch (e) {
|
||||
// definitely not supposed to happen, but let's be maximally robust
|
||||
console.error(e)
|
||||
const user = getCookies(ctx.req.headers.cookie ?? '')[AUTH_COOKIE_NAME]
|
||||
if (user == null) {
|
||||
console.debug('User is unauthenticated.')
|
||||
return null
|
||||
}
|
||||
try {
|
||||
const deserializedUser = JSON.parse(user)
|
||||
const clientAuth = getAuth(clientApp) as FirebaseAuthInternal
|
||||
const persistenceManager = clientAuth.persistenceManager
|
||||
const persistence = persistenceManager.persistence
|
||||
await persistence._set(persistenceManager.fullUserKey, deserializedUser)
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const fbUser = (await persistenceManager.getCurrentUser())!
|
||||
await fbUser.getIdToken() // forces a refresh if necessary
|
||||
await updateCurrentUser(clientAuth, fbUser)
|
||||
console.debug('Signed in with user from cookie.')
|
||||
return fbUser
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
return null
|
||||
}
|
||||
return creds ?? null
|
||||
}
|
||||
|
||||
// note that we might want to define these types more generically if we want better
|
||||
|
@ -167,7 +83,7 @@ export const authenticateOnServer = async (ctx: RequestContext) => {
|
|||
|
||||
type GetServerSidePropsAuthed<P> = (
|
||||
context: GetServerSidePropsContext,
|
||||
creds: UserCredential
|
||||
creds: FirebaseUser
|
||||
) => Promise<GetServerSidePropsResult<P>>
|
||||
|
||||
export const redirectIfLoggedIn = <P extends { [k: string]: any }>(
|
||||
|
|
|
@ -1,43 +0,0 @@
|
|||
import { doc, collection, setDoc } from 'firebase/firestore'
|
||||
|
||||
import { db } from './init'
|
||||
import { ClickEvent, LatencyEvent, View } from 'common/tracking'
|
||||
|
||||
export async function trackView(userId: string, contractId: string) {
|
||||
const ref = doc(collection(db, 'private-users', userId, 'views'))
|
||||
|
||||
const view: View = {
|
||||
contractId,
|
||||
timestamp: Date.now(),
|
||||
}
|
||||
|
||||
return await setDoc(ref, view)
|
||||
}
|
||||
|
||||
export async function trackClick(userId: string, contractId: string) {
|
||||
const ref = doc(collection(db, 'private-users', userId, 'events'))
|
||||
|
||||
const clickEvent: ClickEvent = {
|
||||
type: 'click',
|
||||
contractId,
|
||||
timestamp: Date.now(),
|
||||
}
|
||||
|
||||
return await setDoc(ref, clickEvent)
|
||||
}
|
||||
|
||||
export async function trackLatency(
|
||||
userId: string,
|
||||
type: 'feed' | 'portfolio',
|
||||
latency: number
|
||||
) {
|
||||
const ref = doc(collection(db, 'private-users', userId, 'latency'))
|
||||
|
||||
const latencyEvent: LatencyEvent = {
|
||||
type,
|
||||
latency,
|
||||
timestamp: Date.now(),
|
||||
}
|
||||
|
||||
return await setDoc(ref, latencyEvent)
|
||||
}
|
|
@ -254,6 +254,10 @@ export async function unfollow(userId: string, unfollowedUserId: string) {
|
|||
await deleteDoc(followDoc)
|
||||
}
|
||||
|
||||
export function getPortfolioHistory(userId: string, since: number) {
|
||||
return getValues<PortfolioMetrics>(getPortfolioHistoryQuery(userId, since))
|
||||
}
|
||||
|
||||
export function getPortfolioHistoryQuery(userId: string, since: number) {
|
||||
return query(
|
||||
collectionGroup(db, 'portfolioHistory'),
|
||||
|
|
|
@ -1,73 +0,0 @@
|
|||
type Bid = { yesBid: number; noBid: number }
|
||||
|
||||
// An entry has a yes/no for bid, weight, payout, return. Also a current probability
|
||||
export type Entry = {
|
||||
yesBid: number
|
||||
noBid: number
|
||||
yesWeight: number
|
||||
noWeight: number
|
||||
yesPayout: number
|
||||
noPayout: number
|
||||
yesReturn: number
|
||||
noReturn: number
|
||||
prob: number
|
||||
}
|
||||
|
||||
function makeWeights(bids: Bid[]) {
|
||||
const weights = []
|
||||
let yesPot = 0
|
||||
let noPot = 0
|
||||
|
||||
// First pass: calculate all the weights
|
||||
for (const { yesBid, noBid } of bids) {
|
||||
const yesWeight =
|
||||
yesBid +
|
||||
(yesBid * Math.pow(noPot, 2)) /
|
||||
(Math.pow(yesPot, 2) + yesBid * yesPot) || 0
|
||||
const noWeight =
|
||||
noBid +
|
||||
(noBid * Math.pow(yesPot, 2)) / (Math.pow(noPot, 2) + noBid * noPot) ||
|
||||
0
|
||||
|
||||
// Note: Need to calculate weights BEFORE updating pot
|
||||
yesPot += yesBid
|
||||
noPot += noBid
|
||||
const prob =
|
||||
Math.pow(yesPot, 2) / (Math.pow(yesPot, 2) + Math.pow(noPot, 2))
|
||||
|
||||
weights.push({
|
||||
yesBid,
|
||||
noBid,
|
||||
yesWeight,
|
||||
noWeight,
|
||||
prob,
|
||||
})
|
||||
}
|
||||
return weights
|
||||
}
|
||||
|
||||
export function makeEntries(bids: Bid[]): Entry[] {
|
||||
const YES_SEED = bids[0].yesBid
|
||||
const NO_SEED = bids[0].noBid
|
||||
|
||||
const weights = makeWeights(bids)
|
||||
const yesPot = weights.reduce((sum, { yesBid }) => sum + yesBid, 0)
|
||||
const noPot = weights.reduce((sum, { noBid }) => sum + noBid, 0)
|
||||
const yesWeightsSum = weights.reduce((sum, entry) => sum + entry.yesWeight, 0)
|
||||
const noWeightsSum = weights.reduce((sum, entry) => sum + entry.noWeight, 0)
|
||||
|
||||
const potSize = yesPot + noPot - YES_SEED - NO_SEED
|
||||
|
||||
// Second pass: calculate all the payouts
|
||||
const entries: Entry[] = []
|
||||
|
||||
for (const weight of weights) {
|
||||
const { yesBid, noBid, yesWeight, noWeight } = weight
|
||||
const yesPayout = (yesWeight / yesWeightsSum) * potSize
|
||||
const noPayout = (noWeight / noWeightsSum) * potSize
|
||||
const yesReturn = (yesPayout - yesBid) / yesBid
|
||||
const noReturn = (noPayout - noBid) / noBid
|
||||
entries.push({ ...weight, yesPayout, noPayout, yesReturn, noReturn })
|
||||
}
|
||||
return entries
|
||||
}
|
|
@ -1,58 +0,0 @@
|
|||
const data = `1,9
|
||||
8,
|
||||
,1
|
||||
1,
|
||||
,1
|
||||
1,
|
||||
,5
|
||||
5,
|
||||
,5
|
||||
5,
|
||||
,1
|
||||
1,
|
||||
100,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,
|
||||
,10
|
||||
10,`
|
||||
|
||||
// Parse data into Yes/No orders
|
||||
// E.g. `8,\n,1\n1,` =>
|
||||
// [{yesBid: 8, noBid: 0}, {yesBid: 0, noBid: 1}, {yesBid: 1, noBid: 0}]
|
||||
export const bids = data.split('\n').map((line) => {
|
||||
const [yesBid, noBid] = line.split(',')
|
||||
return {
|
||||
yesBid: parseInt(yesBid || '0'),
|
||||
noBid: parseInt(noBid || '0'),
|
||||
}
|
||||
})
|
|
@ -4,6 +4,7 @@ const ABOUT_PAGE_URL = 'https://docs.manifold.markets/$how-to'
|
|||
|
||||
/** @type {import('next').NextConfig} */
|
||||
module.exports = {
|
||||
productionBrowserSourceMaps: true,
|
||||
staticPageGenerationTimeout: 600, // e.g. stats page
|
||||
reactStrictMode: true,
|
||||
optimizeFonts: false,
|
||||
|
|
|
@ -36,6 +36,8 @@ import { useSaveReferral } from 'web/hooks/use-save-referral'
|
|||
import { User } from 'common/user'
|
||||
import { ContractComment } from 'common/comment'
|
||||
import { getOpenGraphProps } from 'common/contract-details'
|
||||
import { ContractDescription } from 'web/components/contract/contract-description'
|
||||
import { ExtraContractActionsRow } from 'web/components/contract/extra-contract-actions-row'
|
||||
import {
|
||||
ContractLeaderboard,
|
||||
ContractTopTrades,
|
||||
|
@ -232,6 +234,8 @@ export function ContractPageContent(
|
|||
)}
|
||||
|
||||
<ContractOverview contract={contract} bets={nonChallengeBets} />
|
||||
<ExtraContractActionsRow contract={contract} />
|
||||
<ContractDescription className="mb-6 px-2" contract={contract} />
|
||||
|
||||
{outcomeType === 'NUMERIC' && (
|
||||
<AlertBox
|
||||
|
|
|
@ -17,7 +17,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
|||
const creds = await authenticateOnServer(ctx)
|
||||
const username = ctx.params!.username as string // eslint-disable-line @typescript-eslint/no-non-null-assertion
|
||||
const [auth, user] = (await Promise.all([
|
||||
creds != null ? getUserAndPrivateUser(creds.user.uid) : null,
|
||||
creds != null ? getUserAndPrivateUser(creds.uid) : null,
|
||||
getUserByUsername(username),
|
||||
])) as [UserAndPrivateUser | null, User | null]
|
||||
return { props: { auth, user } }
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user