f26ba1c4a2
* Award badges for market creation, betting streaks, proven correct * Styling * Add minimum unique bettors for proven correct * Add name, refactor * Add notifications for badge awards * Correct styling * Need at least 3 unique bettors for market maker badge * Lint * Switch to badges_awarded * Don't include n/a resolutions in market creator badge * Add badges by rarities to profile * Show badges on profile, soon on market page * Add achievements to new user * Backfill all users badges
63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { User } from 'common/user'
|
|
import { NextRouter } from 'next/router'
|
|
import { useEffect, useState } from 'react'
|
|
import { getBadgesByRarity } from 'common/badge'
|
|
import { Row } from 'web/components/layout/row'
|
|
import clsx from 'clsx'
|
|
import { BadgesModal } from 'web/components/profile/badges-modal'
|
|
|
|
export const goldClassName = 'text-amber-400'
|
|
export const silverClassName = 'text-gray-500'
|
|
export const bronzeClassName = 'text-amber-900'
|
|
|
|
export function BadgeDisplay(props: {
|
|
user: User | undefined | null
|
|
router?: NextRouter
|
|
}) {
|
|
const { user, router } = props
|
|
const [showBadgesModal, setShowBadgesModal] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (!router) return
|
|
const showBadgesModal = router.query['show'] === 'badges'
|
|
setShowBadgesModal(showBadgesModal)
|
|
}, [router])
|
|
// get number of badges of each rarity type
|
|
const badgesByRarity = getBadgesByRarity(user)
|
|
const badgesByRarityItems = Object.entries(badgesByRarity).map(
|
|
([rarity, numBadges]) => {
|
|
return (
|
|
<Row
|
|
key={rarity}
|
|
className={clsx(
|
|
'items-center gap-2',
|
|
rarity === 'bronze'
|
|
? bronzeClassName
|
|
: rarity === 'silver'
|
|
? silverClassName
|
|
: goldClassName
|
|
)}
|
|
>
|
|
<span className={clsx('-m-0.5 text-lg')}>•</span>
|
|
<span className="text-xs">{numBadges}</span>
|
|
</Row>
|
|
)
|
|
}
|
|
)
|
|
return (
|
|
<Row
|
|
className={'cursor-pointer gap-2'}
|
|
onClick={() => setShowBadgesModal(true)}
|
|
>
|
|
{badgesByRarityItems}
|
|
{user && (
|
|
<BadgesModal
|
|
isOpen={showBadgesModal}
|
|
setOpen={setShowBadgesModal}
|
|
user={user}
|
|
/>
|
|
)}
|
|
</Row>
|
|
)
|
|
}
|