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

Add notifications for badge awards

Browse Source
This commit is contained in:
Ian Philips 2022-10-06 21:16:23 -04:00
parent 4d94f24892
commit 71fac10e44
13 changed files with 223 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
common/badge.ts
View File

@ -4,13 +4,12 @@ export type Badge = {
type: BadgeTypes
createdTime: number
data: { [key: string]: any }
name: string
name: 'Proven Correct' | 'Streaker' | 'Market Maker'
}
export type BadgeTypes = 'PROVEN_CORRECT' | 'STREAKER' | 'MARKET_CREATOR'
export type ProvenCorrectBadgeData = {
name: 'Proven Correct'
type: 'PROVEN_CORRECT'
data: {
contractSlug: string
@ -22,7 +21,6 @@ export type ProvenCorrectBadgeData = {
}
export type MarketCreatorBadgeData = {
name: 'Market Maker'
type: 'MARKET_CREATOR'
data: {
totalContractsCreated: number
@ -30,7 +28,6 @@ export type MarketCreatorBadgeData = {
}
export type StreakerBadgeData = {
name: 'Streaker'
type: 'STREAKER'
data: {
totalBettingStreak: number

2
common/scoring.ts
View File

@ -79,6 +79,7 @@ export function scoreCommentorsAndBettors(
comments,
(c) => c.betId && -profitById[c.betId]
)[0]?.id
const topCommentBetId = commentsById[topCommentId]?.betId
return {
topCommentId,
@ -87,5 +88,6 @@ export function scoreCommentorsAndBettors(
profitById,
commentsById,
betsById,
topCommentBetId,
}
}

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

@ -6,7 +6,12 @@ import {
Notification,
notification_reason_types,
} from '../../common/notification'
import { User } from '../../common/user'
import {
MANIFOLD_AVATAR_URL,
MANIFOLD_USER_NAME,
MANIFOLD_USER_USERNAME,
User,
} from '../../common/user'
import { Contract } from '../../common/contract'
import { getPrivateUser, getValues } from './utils'
import { Comment } from '../../common/comment'
@ -30,6 +35,7 @@ import {
import { filterDefined } from '../../common/util/array'
import { getNotificationDestinationsForUser } from '../../common/user-notification-preferences'
import { ContractFollow } from '../../common/follow'
import { Badge } from 'common/badge'
const firestore = admin.firestore()
type recipients_to_reason_texts = {
@ -1087,6 +1093,43 @@ export const createBountyNotification = async (
sourceTitle: contract.question,
}
return await notificationRef.set(removeUndefinedProps(notification))
// maybe TODO: send email notification to comment creator
}
export const createBadgeAwardedNotification = async (
user: User,
badge: Badge
) => {
const privateUser = await getPrivateUser(user.id)
if (!privateUser) return
const { sendToBrowser } = getNotificationDestinationsForUser(
privateUser,
'badges_awarded'
)
if (!sendToBrowser) return
const notificationRef = firestore
.collection(`/users/${user.id}/notifications`)
.doc()
const notification: Notification = {
id: notificationRef.id,
userId: user.id,
reason: 'badges_awarded',
createdTime: Date.now(),
isSeen: false,
sourceId: badge.type,
sourceType: 'badge',
sourceUpdateType: 'created',
sourceUserName: MANIFOLD_USER_NAME,
sourceUserUsername: MANIFOLD_USER_USERNAME,
sourceUserAvatarUrl: MANIFOLD_AVATAR_URL,
sourceText: `You earned a new ${badge.name} badge!`,
sourceSlug: `/${user.username}?show=badges&badge=${badge.type}`,
sourceTitle: badge.name,
data: {
badge,
},
}
return await notificationRef.set(removeUndefinedProps(notification))
// TODO send email notification
}

3
functions/src/on-create-bet.ts
View File

@ -12,6 +12,7 @@ import {
revalidateStaticProps,
} from './utils'
import {
createBadgeAwardedNotification,
createBetFillNotification,
createBettingStreakBonusNotification,
createUniqueBettorBonusNotification,
@ -317,6 +318,7 @@ async function handleBettingStreakBadgeAward(
if (newBettingStreak in streakerBadgeRarityThresholds) {
const badge = {
type: 'STREAKER',
name: 'Streaker',
data: {
totalBettingStreak: newBettingStreak,
},
@ -335,5 +337,6 @@ async function handleBettingStreakBadgeAward(
},
},
})
await createBadgeAwardedNotification(user, badge)
}
}

7
functions/src/on-create-contract.ts
View File

@ -1,7 +1,10 @@
import * as functions from 'firebase-functions'
import { getUser, getValues } from './utils'
import { createNewContractNotification } from './create-notification'
import {
createBadgeAwardedNotification,
createNewContractNotification,
} from './create-notification'
import { Contract } from '../../common/contract'
import { parseMentions, richTextToString } from '../../common/util/parse'
import { JSONContent } from '@tiptap/core'
@ -49,6 +52,7 @@ async function handleMarketCreatorBadgeAward(contractCreator: User) {
if (contracts.length in marketMakerBadgeRarityThresholds) {
const badge = {
type: 'MARKET_CREATOR',
name: 'Market Maker',
data: {
totalContractsCreated: contracts.length,
},
@ -72,5 +76,6 @@ async function handleMarketCreatorBadgeAward(contractCreator: User) {
},
},
})
await createBadgeAwardedNotification(contractCreator, badge)
}
}

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

@ -1,6 +1,9 @@
import * as functions from 'firebase-functions'
import { getUser, getValues } from './utils'
import { createCommentOrAnswerOrUpdatedContractNotification } from './create-notification'
import {
createBadgeAwardedNotification,
createCommentOrAnswerOrUpdatedContractNotification,
} from './create-notification'
import { Contract } from '../../common/contract'
import { Bet } from '../../common/bet'
import * as admin from 'firebase-admin'
@ -50,18 +53,19 @@ async function handleResolvedContract(contract: Contract) {
firestore.collection(`contracts/${contract.id}/comments`)
)
const { topCommentId, profitById, commentsById, betsById } =
const { topCommentId, profitById, commentsById, betsById, topCommentBetId } =
scoreCommentorsAndBettors(contract, bets, comments)
if (topCommentId && profitById[topCommentId] > 0) {
if (topCommentBetId && profitById[topCommentBetId] > 0) {
// award proven correct badge to user
const comment = commentsById[topCommentId]
const bet = betsById[topCommentId]
const bet = betsById[topCommentBetId]
const user = await getUser(comment.userId)
if (!user) return
const newProvenCorrectBadge = {
createdTime: Date.now(),
type: 'PROVEN_CORRECT',
name: 'Proven Correct',
data: {
contractSlug: contract.slug,
contractCreatorUsername: contract.creatorUsername,
@ -87,6 +91,7 @@ async function handleResolvedContract(contract: Contract) {
},
},
})
await createBadgeAwardedNotification(user, newProvenCorrectBadge)
}
}

2
functions/src/scripts/add-new-notification-preference.ts
View File

@ -17,7 +17,7 @@ async function main() {
.update({
notificationPreferences: {
...privateUser.notificationPreferences,
badges_awarded: [],
badges_awarded: ['browser'],
},
})
})

30
web/components/contract/contract-leaderboard.tsx
View File

@ -3,8 +3,7 @@ import { resolvedPayout } from 'common/calculate'
import { Contract } from 'common/contract'
import { formatMoney } from 'common/util/format'
import { groupBy, mapValues, sumBy, sortBy } from 'lodash'
import { CommentTipMap } from 'web/hooks/use-tip-txns'
import { groupBy, mapValues, sumBy } from 'lodash'
import { FeedBet } from '../feed/feed-bets'
import { FeedComment } from '../feed/feed-comments'
import { Spacer } from '../layout/spacer'
@ -57,29 +56,34 @@ export function ContractTopTrades(props: {
contract: Contract
bets: Bet[]
comments: ContractComment[]
tips: CommentTipMap
}) {
const { contract, bets, comments, tips } = props
const { topBetId, topBettor, profitById, betsById } =
scoreCommentorsAndBettors(contract, bets, comments)
// And also the comment with the highest profit
const topComment = sortBy(comments, (c) => c.betId && -profitById[c.betId])[0]
const { contract, bets, comments } = props
const {
topBetId,
topBettor,
profitById,
betsById,
topCommentId,
commentsById,
topCommentBetId,
} = scoreCommentorsAndBettors(contract, bets, comments)
return (
<div className="mt-12 max-w-sm">
{topComment && profitById[topComment.id] > 0 && (
{topCommentBetId && profitById[topCommentBetId] > 0 && (
<>
<Title text="💬 Proven correct" className="!mt-0" />
<div className="relative flex items-start space-x-3 rounded-md bg-gray-50 px-2 py-4">
<FeedComment contract={contract} comment={topComment} />
<FeedComment
contract={contract}
comment={commentsById[topCommentId]}
/>
</div>
<Spacer h={16} />
</>
)}
{/* If they're the same, only show the comment; otherwise show both */}
{topBettor && topBetId !== topComment?.betId && profitById[topBetId] > 0 && (
{topBettor && topBetId !== topCommentId && profitById[topBetId] > 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">

1
web/components/notification-settings.tsx
View File

@ -131,6 +131,7 @@ export function NotificationSettings(props: {
'betting_streaks',
'referral_bonuses',
'unique_bettors_on_your_contract',
'badges_awarded',
],
}
const otherBalances: SectionData = {

4
web/components/profile/badges-modal.tsx
View File

@ -151,7 +151,7 @@ function StreakerBadgeItem(props: { badge: StreakerBadge; rarity: rarities }) {
const { badge, rarity } = props
const { totalBettingStreak } = badge.data
return (
<Col className={'text-center'}>
<Col className={'cursor-default text-center'}>
<Medal rarity={rarity} />
<Tooltip
text={`Make predictions ${totalBettingStreak} day
@ -179,7 +179,7 @@ function MarketCreatorBadgeItem(props: {
const { badge, rarity } = props
const { totalContractsCreated } = badge.data
return (
<Col className={'text-center'}>
<Col className={'cursor-default text-center'}>
<Medal rarity={rarity} />
<Tooltip
text={`Make ${totalContractsCreated} market${

6
web/pages/[username]/[contractSlug].tsx
View File

@ -270,7 +270,11 @@ export function ContractPageContent(
<>
<div className="grid grid-cols-1 sm:grid-cols-2">
<ContractLeaderboard contract={contract} bets={bets} />
<ContractTopTrades contract={contract} bets={bets} />
<ContractTopTrades
contract={contract}
bets={bets}
comments={comments}
/>
</div>
<Spacer h={12} />
</>

127
web/pages/notifications.tsx
View File

@ -13,11 +13,7 @@ import { Page } from 'web/components/page'
import { Title } from 'web/components/title'
import { doc, updateDoc } from 'firebase/firestore'
import { db } from 'web/lib/firebase/init'
import {
MANIFOLD_AVATAR_URL,
MANIFOLD_USER_USERNAME,
PrivateUser,
} from 'common/user'
import { MANIFOLD_AVATAR_URL, PAST_BETS, PrivateUser } from 'common/user'
import clsx from 'clsx'
import { RelativeTimestamp } from 'web/components/relative-timestamp'
import { Linkify } from 'web/components/linkify'
@ -736,6 +732,24 @@ function NotificationItem(props: {
justSummary={justSummary}
/>
)
} else if (sourceType === 'badge') {
return (
<BadgeNotification
notification={notification}
isChildOfGroup={isChildOfGroup}
highlighted={highlighted}
justSummary={justSummary}
/>
)
} else if (sourceType === 'contract' && sourceUpdateType === 'closed') {
return (
<MarketClosedNotification
notification={notification}
isChildOfGroup={isChildOfGroup}
highlighted={highlighted}
justSummary={justSummary}
/>
)
}
// TODO Add new notification components here
@ -809,9 +823,16 @@ function NotificationFrame(props: {
subtitle: string
children: React.ReactNode
isChildOfGroup?: boolean
showUserName?: boolean
}) {
const { notification, isChildOfGroup, highlighted, subtitle, children } =
props
const {
notification,
isChildOfGroup,
highlighted,
subtitle,
children,
showUserName,
} = props
const {
sourceType,
sourceUserName,
@ -822,7 +843,7 @@ function NotificationFrame(props: {
sourceUserUsername,
sourceText,
} = notification
const questionNeedsResolution = sourceUpdateType == 'closed'
const { width } = useWindowSize()
const isMobile = (width ?? 0) < 600
return (
@ -852,18 +873,10 @@ function NotificationFrame(props: {
/>
<Row className={'items-center text-gray-500 sm:justify-start'}>
<Avatar
avatarUrl={
questionNeedsResolution
? MANIFOLD_AVATAR_URL
: sourceUserAvatarUrl
}
avatarUrl={sourceUserAvatarUrl}
size={'sm'}
className={'z-10 mr-2'}
username={
questionNeedsResolution
? MANIFOLD_USER_USERNAME
: sourceUserUsername
}
username={sourceUserUsername}
/>
<div className={'flex w-full flex-row pl-1 sm:pl-0'}>
<div
@ -872,12 +885,14 @@ function NotificationFrame(props: {
}
>
<div>
<UserLink
name={sourceUserName || ''}
username={sourceUserUsername || ''}
className={'relative mr-1 flex-shrink-0'}
short={isMobile}
/>
{showUserName && (
<UserLink
name={sourceUserName || ''}
username={sourceUserUsername || ''}
className={'relative mr-1 flex-shrink-0'}
short={isMobile}
/>
)}
{subtitle}
{isChildOfGroup ? (
<RelativeTimestamp time={notification.createdTime} />
@ -965,6 +980,64 @@ function BetFillNotification(props: {
</NotificationFrame>
)
}
function MarketClosedNotification(props: {
notification: Notification
highlighted: boolean
justSummary: boolean
isChildOfGroup?: boolean
}) {
const { notification, isChildOfGroup, highlighted, justSummary } = props
notification.sourceUserAvatarUrl = MANIFOLD_AVATAR_URL
return (
<NotificationFrame
notification={notification}
isChildOfGroup={isChildOfGroup}
highlighted={highlighted}
subtitle={'Please resolve'}
>
<Row>
<span>
{`Your market has closed. Please resolve it to pay out ${PAST_BETS}.`}
</span>
</Row>
</NotificationFrame>
)
}
function BadgeNotification(props: {
notification: Notification
highlighted: boolean
justSummary: boolean
isChildOfGroup?: boolean
}) {
const { notification, isChildOfGroup, highlighted, justSummary } = props
const { sourceText } = notification
const subtitle = 'You earned a new badge!'
notification.sourceUserAvatarUrl = '/award.svg'
if (justSummary) {
return (
<NotificationSummaryFrame notification={notification} subtitle={subtitle}>
<Row className={'line-clamp-1'}>
<span>{sourceText} 🎉</span>
</Row>
</NotificationSummaryFrame>
)
}
return (
<NotificationFrame
notification={notification}
isChildOfGroup={isChildOfGroup}
highlighted={highlighted}
subtitle={subtitle}
showUserName={false}
>
<Row>
<span>{sourceText} 🎉</span>
</Row>
</NotificationFrame>
)
}
function ContractResolvedNotification(props: {
notification: Notification
@ -1136,6 +1209,11 @@ function getSourceUrl(notification: Notification) {
sourceId ?? '',
sourceType
)}`
else if (sourceSlug)
return `/${sourceSlug}#${getSourceIdForLinkComponent(
sourceId ?? '',
sourceType
)}`
}
function getSourceIdForLinkComponent(
@ -1235,7 +1313,6 @@ function getReasonForShowingNotification(
reasonText = justSummary ? 'asked the question' : 'asked'
else if (sourceUpdateType === 'resolved')
reasonText = justSummary ? `resolved the question` : `resolved`
else if (sourceUpdateType === 'closed') reasonText = `Please resolve`
else reasonText = justSummary ? 'updated the question' : `updated`
break
case 'answer':

28
web/public/award.svg Normal file
View File

@ -0,0 +1,28 @@
<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
<g id="color">
<polyline fill="#92d3f5" stroke="#92d3f5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="54.9988,4.0221 43,16.0208 36,16.0208 30.9584,10.9792 37.9207,4.0169 54.9988,4.0169"/>
<polyline fill="#ea5a47" stroke="#ea5a47" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="23.9831,4.0039 36,16.0208 29,16.0208 16.9675,3.9883 23.9831,3.9883"/>
<polyline fill="#fcea2b" stroke="none" points="28,22.4271 28,17 44,17 44,22.4271"/>
<circle cx="36" cy="45.0208" r="23" fill="#fcea2b" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<polygon fill="#f1b31c" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="35.9861,28 30.8575,38.4014 19.3815,40.0733 27.6891,48.1652 25.7329,59.5961 35.9958,54.1957 46.2628,59.5885 44.2981,48.159 52.5996,40.061 41.1225,38.3976"/>
</g>
<g id="hair"/>
<g id="skin"/>
<g id="skin-shadow"/>
<g id="line">
<circle cx="36" cy="45.0208" r="23" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
<circle cx="36" cy="45.0208" r="23" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<circle cx="36" cy="45.0208" r="23" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
<line x1="29" x2="29" y1="19" y2="16.0208" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<line x1="43" x2="43" y1="19" y2="16.0208" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<line x1="29" x2="43" y1="16.0208" y2="16.0208" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<line x1="25.9896" x2="16.9675" y1="13.0104" y2="3.9883" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<line x1="31.9896" x2="23.9831" y1="12.0104" y2="4.0039" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<line x1="34" x2="37.9207" y1="8" y2="4.0169" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<line x1="46" x2="54.9988" y1="13" y2="4.0221" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<line x1="16.9675" x2="23.9831" y1="3.9883" y2="3.9883" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<line x1="37.9207" x2="54.9988" y1="4.0169" y2="4.0169" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<circle cx="36" cy="45.0208" r="23" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
<polygon fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="35.9861,28 30.8575,38.4014 19.3815,40.0733 27.6891,48.1652 25.7329,59.5961 35.9958,54.1957 46.2628,59.5885 44.2981,48.159 52.5996,40.061 41.1225,38.3976"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB