Show badges on profile, soon on market page

common/badge.ts

@@ -106,12 +106,13 @@ export const calculateBadgeRarity = (badge: Badge) => {
   }
 }
 
-export const getBadgesByRarity = (user: User) => {
+export const getBadgesByRarity = (user: User | null | undefined) => {
   const rarities: { [key in rarities]: number } = {
     bronze: 0,
     silver: 0,
     gold: 0,
   }
+  if (!user) return rarities
   Object.values(user.achievements).map((value) => {
     value.badges.map((badge) => {
       rarities[calculateBadgeRarity(badge)] =
@@ -120,7 +121,3 @@ export const getBadgesByRarity = (user: User) => {
   })
   return rarities
 }
-
-export const goldClassName = 'text-amber-400'
-export const silverClassName = 'text-gray-500'
-export const bronzeClassName = 'text-amber-900'

web/components/badge-display.tsx

@@ -0,0 +1,62 @@
+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>
+  )
+}

web/components/contract/contract-details.tsx

@@ -154,8 +154,8 @@ export function MarketSubheader(props: {
   const { creatorName, creatorUsername, creatorId, creatorAvatarUrl } = contract
   const { resolvedDate } = contractMetrics(contract)
   const user = useUser()
-  const correctResolutionPercentage =
-    useUserById(creatorId)?.fractionResolvedCorrectly
+  const creator = useUserById(creatorId)
+  const correctResolutionPercentage = creator?.fractionResolvedCorrectly
   const isCreator = user?.id === creatorId
   const isMobile = useIsMobile()
   return (
@@ -178,12 +178,15 @@ export function MarketSubheader(props: {
           {disabled ? (
             creatorName
           ) : (
-            <UserLink
-              className="my-auto whitespace-nowrap"
-              name={creatorName}
-              username={creatorUsername}
-              short={isMobile}
-            />
+            <Row className={'gap-2'}>
+              <UserLink
+                className="my-auto whitespace-nowrap"
+                name={creatorName}
+                username={creatorUsername}
+                short={isMobile}
+              />
+              {/*<BadgeDisplay user={creator} />*/}
+            </Row>
           )}
           {correctResolutionPercentage != null &&
             correctResolutionPercentage < BAD_CREATOR_THRESHOLD && (

web/components/profile/badges-modal.tsx

@@ -4,13 +4,10 @@ import { PAST_BETS, User } from 'common/user'
 import clsx from 'clsx'
 import {
   Badge,
-  bronzeClassName,
   calculateBadgeRarity,
-  goldClassName,
   MarketCreatorBadge,
   ProvenCorrectBadge,
   rarities,
-  silverClassName,
   StreakerBadge,
 } from 'common/badge'
 import { groupBy } from 'lodash'
@@ -18,6 +15,11 @@ import { Row } from 'web/components/layout/row'
 import { SiteLink } from 'web/components/site-link'
 import { contractPathWithoutContract } from 'web/lib/firebase/contracts'
 import { Tooltip } from 'web/components/tooltip'
+import {
+  bronzeClassName,
+  goldClassName,
+  silverClassName,
+} from 'web/components/badge-display'
 
 export function BadgesModal(props: {
   isOpen: boolean

web/components/user-page.tsx

@@ -33,16 +33,10 @@ import { PortfolioValueSection } from './portfolio/portfolio-value-section'
 import { formatMoney } from 'common/util/format'
 
 import { LoansModal } from './profile/loans-modal'
-import { BadgesModal } from 'web/components/profile/badges-modal'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { track } from 'web/lib/service/analytics'
 import { DOMAIN } from 'common/envs/constants'
-import {
-  bronzeClassName,
-  getBadgesByRarity,
-  goldClassName,
-  silverClassName,
-} from 'common/badge'
+import { BadgeDisplay } from 'web/components/badge-display'
 
 export function UserPage(props: { user: User }) {
   const { user } = props
@@ -334,49 +328,3 @@ export function ProfilePublicStats(props: { user: User; className?: string }) {
     </Row>
   )
 }
-
-function BadgeDisplay(props: { user: User; router: NextRouter }) {
-  const { user, router } = props
-  const [showBadgesModal, setShowBadgesModal] = useState(false)
-
-  useEffect(() => {
-    const showBadgesModal = router.query['show'] === 'badges'
-    setShowBadgesModal(showBadgesModal)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-  // 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}
-      <BadgesModal
-        isOpen={showBadgesModal}
-        setOpen={setShowBadgesModal}
-        user={user}
-      />
-    </Row>
-  )
-}