Refactor Userlink, add MultiUserLink

web/components/answers/answers-panel.tsx

@@ -21,9 +21,9 @@ import { Modal } from 'web/components/layout/modal'
 import { AnswerBetPanel } from 'web/components/answers/answer-bet-panel'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
-import { UserLink } from 'web/components/user-page'
 import { Linkify } from 'web/components/linkify'
 import { BuyButton } from 'web/components/yes-no-selector'
+import { UserLink } from 'web/components/user-link'
 
 export function AnswersPanel(props: {
   contract: FreeResponseContract | MultipleChoiceContract

web/components/bets-list.tsx

@@ -31,7 +31,6 @@ import {
   getContractFromId,
 } from 'web/lib/firebase/contracts'
 import { Row } from './layout/row'
-import { UserLink } from './user-page'
 import { sellBet } from 'web/lib/firebase/api'
 import { ConfirmationButton } from './confirmation-button'
 import { OutcomeLabel, YesLabel, NoLabel } from './outcome-label'
@@ -59,6 +58,7 @@ import { floatingEqual } from 'common/util/math'
 import { filterDefined } from 'common/util/array'
 import { Pagination } from './pagination'
 import { LimitOrderTable } from './limit-bets'
+import { UserLink } from 'web/components/user-link'
 
 type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
 type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all'

web/components/charity/feed-items.tsx

@@ -1,9 +1,9 @@
 import { DonationTxn } from 'common/txn'
 import { Avatar } from '../avatar'
 import { useUserById } from 'web/hooks/use-user'
-import { UserLink } from '../user-page'
 import { manaToUSD } from '../../../common/util/format'
 import { RelativeTimestamp } from '../relative-timestamp'
+import { UserLink } from 'web/components/user-link'
 
 export function Donation(props: { txn: DonationTxn }) {
   const { txn } = props

web/components/comments-list.tsx

@@ -7,12 +7,12 @@ import { SiteLink } from './site-link'
 import { Row } from './layout/row'
 import { Avatar } from './avatar'
 import { RelativeTimestamp } from './relative-timestamp'
-import { UserLink } from './user-page'
 import { User } from 'common/user'
 import { Col } from './layout/col'
 import { Content } from './editor'
 import { Pagination } from './pagination'
 import { LoadingIndicator } from './loading-indicator'
+import { UserLink } from 'web/components/user-link'
 
 const COMMENTS_PER_PAGE = 50
 

web/components/contract/contract-details.tsx

@@ -8,7 +8,6 @@ import {
 
 import { Row } from '../layout/row'
 import { formatMoney } from 'common/util/format'
-import { UserLink } from '../user-page'
 import { Contract, updateContract } from 'web/lib/firebase/contracts'
 import dayjs from 'dayjs'
 import { DateTimeTooltip } from '../datetime-tooltip'
@@ -34,6 +33,7 @@ import clsx from 'clsx'
 import { contractMetrics } from 'common/contract-details'
 import { User } from 'common/user'
 import { FeaturedContractBadge } from 'web/components/contract/FeaturedContractBadge'
+import { UserLink } from 'web/components/user-link'
 
 export type ShowTime = 'resolve-date' | 'close-date'
 

web/components/feed/feed-answer-comment-group.tsx

@@ -5,7 +5,6 @@ import React, { useEffect, useState } from 'react'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
-import { UserLink } from 'web/components/user-page'
 import { Linkify } from 'web/components/linkify'
 import clsx from 'clsx'
 import {
@@ -19,6 +18,7 @@ import { groupBy } from 'lodash'
 import { User } from 'common/user'
 import { useEvent } from 'web/hooks/use-event'
 import { CommentTipMap } from 'web/hooks/use-tip-txns'
+import { UserLink } from 'web/components/user-link'
 
 export function FeedAnswerCommentGroup(props: {
   contract: any

web/components/feed/feed-bets.tsx

@@ -13,11 +13,11 @@ import { RelativeTimestamp } from 'web/components/relative-timestamp'
 import React, { Fragment, useEffect } from 'react'
 import { uniqBy, partition, sumBy, groupBy } from 'lodash'
 import { JoinSpans } from 'web/components/join-spans'
-import { UserLink } from '../user-page'
 import { formatNumericProbability } from 'common/pseudo-numeric'
 import { SiteLink } from 'web/components/site-link'
 import { getChallenge, getChallengeUrl } from 'web/lib/firebase/challenges'
 import { Challenge } from 'common/challenge'
+import { UserLink } from 'web/components/user-link'
 
 export function FeedBet(props: {
   contract: Contract

web/components/feed/feed-comments.tsx

@@ -10,7 +10,6 @@ import { useRouter } from 'next/router'
 import { Row } from 'web/components/layout/row'
 import clsx from 'clsx'
 import { Avatar } from 'web/components/avatar'
-import { UserLink } from 'web/components/user-page'
 import { OutcomeLabel } from 'web/components/outcome-label'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
 import { firebaseLogin } from 'web/lib/firebase/users'
@@ -29,6 +28,7 @@ import { CommentTipMap, CommentTips } from 'web/hooks/use-tip-txns'
 import { useWindowSize } from 'web/hooks/use-window-size'
 import { Content, TextEditor, useTextEditor } from '../editor'
 import { Editor } from '@tiptap/react'
+import { UserLink } from 'web/components/user-link'
 
 export function FeedCommentThread(props: {
   contract: Contract

web/components/feed/feed-items.tsx

@@ -17,7 +17,6 @@ import {
 import { BinaryResolutionOrChance } from '../contract/contract-card'
 import { SiteLink } from '../site-link'
 import { Col } from '../layout/col'
-import { UserLink } from '../user-page'
 import BetButton from '../bet-button'
 import { Avatar } from '../avatar'
 import { ActivityItem } from './activity-items'
@@ -38,6 +37,7 @@ import { SignUpPrompt } from '../sign-up-prompt'
 import { User } from 'common/user'
 import { PlayMoneyDisclaimer } from '../play-money-disclaimer'
 import { contractMetrics } from 'common/contract-details'
+import { UserLink } from 'web/components/user-link'
 
 export function FeedItems(props: {
   contract: Contract

web/components/feed/feed-liquidity.tsx

@@ -7,8 +7,8 @@ import clsx from 'clsx'
 import { formatMoney } from 'common/util/format'
 import { RelativeTimestamp } from 'web/components/relative-timestamp'
 import React from 'react'
-import { UserLink } from '../user-page'
 import { LiquidityProvision } from 'common/liquidity-provision'
+import { UserLink } from 'web/components/user-link'
 
 export function FeedLiquidity(props: {
   liquidity: LiquidityProvision

web/components/filter-select-users.tsx

@@ -6,8 +6,8 @@ import clsx from 'clsx'
 import { Menu, Transition } from '@headlessui/react'
 import { Avatar } from 'web/components/avatar'
 import { Row } from 'web/components/layout/row'
-import { UserLink } from 'web/components/user-page'
 import { searchInAny } from 'common/util/parse'
+import { UserLink } from 'web/components/user-link'
 
 export function FilterSelectUsers(props: {
   setSelectedUsers: (users: User[]) => void

web/components/follow-list.tsx

@@ -6,7 +6,7 @@ import { Avatar } from './avatar'
 import { FollowButton } from './follow-button'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
-import { UserLink } from './user-page'
+import { UserLink } from 'web/components/user-link'
 
 export function FollowList(props: { userIds: string[] }) {
   const { userIds } = props

web/components/groups/group-chat.tsx

@@ -11,7 +11,6 @@ import { track } from 'web/lib/service/analytics'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { useRouter } from 'next/router'
 import clsx from 'clsx'
-import { UserLink } from 'web/components/user-page'
 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'
@@ -23,6 +22,7 @@ import { useUnseenPreferredNotifications } 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[]

web/components/online-user-list.tsx

@@ -2,13 +2,13 @@ import clsx from 'clsx'
 import { Avatar } from './avatar'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
-import { UserLink } from './user-page'
 import { User } from 'common/user'
 import { UserCircleIcon } from '@heroicons/react/solid'
 import { useUsers } from 'web/hooks/use-users'
 import { partition } from 'lodash'
 import { useWindowSize } from 'web/hooks/use-window-size'
 import { useState } from 'react'
+import { UserLink } from 'web/components/user-link'
 
 const isOnline = (user?: User) =>
   user && user.lastPingTime && user.lastPingTime > Date.now() - 5 * 60 * 1000

web/components/referrals-button.tsx

@@ -7,11 +7,11 @@ import { Modal } from './layout/modal'
 import { Tabs } from './layout/tabs'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
-import { UserLink } from 'web/components/user-page'
 import { useReferrals } from 'web/hooks/use-referrals'
 import { FilterSelectUsers } from 'web/components/filter-select-users'
 import { getUser, updateUser } from 'web/lib/firebase/users'
 import { TextButton } from 'web/components/text-button'
+import { UserLink } from 'web/components/user-link'
 
 export function ReferralsButton(props: { user: User; currentUser?: User }) {
   const { user, currentUser } = props

web/components/user-link.tsx

@@ -0,0 +1,102 @@
+import { linkClass, 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) {
+  const firstName = name.split(' ')[0]
+  const maxLength = 10
+  const shortName =
+    firstName.length >= 3
+      ? firstName.length < maxLength
+        ? firstName
+        : firstName.substring(0, maxLength - 3) + '...'
+      : name.length > maxLength
+      ? name.substring(0, maxLength) + '...'
+      : name
+  return shortName
+}
+
+export function UserLink(props: {
+  name: string
+  username: string
+  showUsername?: boolean
+  className?: string
+  short?: boolean
+}) {
+  const { name, username, showUsername, className, short } = props
+  const shortName = short ? shortenName(name) : name
+  return (
+    <SiteLink
+      href={`/${username}`}
+      className={clsx('z-10 truncate', className)}
+    >
+      {shortName}
+      {showUsername && ` (@${username})`}
+    </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>
+    </>
+  )
+}

web/components/user-page.tsx

@@ -32,35 +32,6 @@ import { BettingStreakModal } from 'web/components/profile/betting-streak-modal'
 import { REFERRAL_AMOUNT } from 'common/economy'
 import { LoansModal } from './profile/loans-modal'
 
-export function UserLink(props: {
-  name: string
-  username: string
-  showUsername?: boolean
-  className?: string
-  short?: boolean
-}) {
-  const { name, username, showUsername, className, short } = props
-  const firstName = name.split(' ')[0]
-  const maxLength = 10
-  const shortName =
-    firstName.length >= 3
-      ? firstName.length < maxLength
-        ? firstName
-        : firstName.substring(0, maxLength - 3) + '...'
-      : name.length > maxLength
-      ? name.substring(0, maxLength) + '...'
-      : name
-  return (
-    <SiteLink
-      href={`/${username}`}
-      className={clsx('z-10 truncate', className)}
-    >
-      {short ? shortName : name}
-      {showUsername && ` (@${username})`}
-    </SiteLink>
-  )
-}
-
 export function UserPage(props: { user: User }) {
   const { user } = props
   const router = useRouter()

web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx

@@ -21,7 +21,6 @@ import { Page } from 'web/components/page'
 import { useUser, useUserById } from 'web/hooks/use-user'
 import { AcceptChallengeButton } from 'web/components/challenges/accept-challenge-button'
 import { Avatar } from 'web/components/avatar'
-import { UserLink } from 'web/components/user-page'
 import { BinaryOutcomeLabel } from 'web/components/outcome-label'
 import { formatMoney } from 'common/util/format'
 import { LoadingIndicator } from 'web/components/loading-indicator'
@@ -33,6 +32,7 @@ import { useSaveReferral } from 'web/hooks/use-save-referral'
 import { BinaryContract } from 'common/contract'
 import { Title } from 'web/components/title'
 import { getOpenGraphProps } from 'common/contract-details'
+import { UserLink } from 'web/components/user-link'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 

web/pages/challenges/index.tsx

@@ -19,7 +19,6 @@ import {
 import { Challenge, CHALLENGES_ENABLED } from 'common/challenge'
 import { Tabs } from 'web/components/layout/tabs'
 import { SiteLink } from 'web/components/site-link'
-import { UserLink } from 'web/components/user-page'
 import { Avatar } from 'web/components/avatar'
 import Router from 'next/router'
 import { contractPathWithoutContract } from 'web/lib/firebase/contracts'
@@ -30,6 +29,7 @@ import toast from 'react-hot-toast'
 import { Modal } from 'web/components/layout/modal'
 import { QRCode } from 'web/components/qr-code'
 import { CreateChallengeModal } from 'web/components/challenges/create-challenge-modal'
+import { UserLink } from 'web/components/user-link'
 
 dayjs.extend(customParseFormat)
 const columnClass = 'sm:px-5 px-2 py-3.5 max-w-[100px] truncate'

web/pages/group/[...slugs]/index.tsx

@@ -12,7 +12,6 @@ import {
   updateGroup,
 } from 'web/lib/firebase/groups'
 import { Row } from 'web/components/layout/row'
-import { UserLink } from 'web/components/user-page'
 import { firebaseLogin, getUser, User } from 'web/lib/firebase/users'
 import { Col } from 'web/components/layout/col'
 import { useUser } from 'web/hooks/use-user'
@@ -45,6 +44,7 @@ import { Button } from 'web/components/button'
 import { listAllCommentsOnGroup } from 'web/lib/firebase/comments'
 import { GroupComment } from 'common/comment'
 import { REFERRAL_AMOUNT } from 'common/economy'
+import { UserLink } from 'web/components/user-link'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: { params: { slugs: string[] } }) {

web/pages/groups.tsx

@@ -16,9 +16,9 @@ import { SiteLink } from 'web/components/site-link'
 import clsx from 'clsx'
 import { Avatar } from 'web/components/avatar'
 import { JoinOrLeaveGroupButton } from 'web/components/groups/groups-button'
-import { UserLink } from 'web/components/user-page'
 import { searchInAny } from 'common/util/parse'
 import { SEO } from 'web/components/SEO'
+import { UserLink } from 'web/components/user-link'
 
 export async function getStaticProps() {
   const groups = await listAllGroups().catch((_) => [])

web/pages/links.tsx

@@ -18,7 +18,6 @@ import { ManalinkTxn } from 'common/txn'
 import { User } from 'common/user'
 import { Avatar } from 'web/components/avatar'
 import { RelativeTimestamp } from 'web/components/relative-timestamp'
-import { UserLink } from 'web/components/user-page'
 import { CreateLinksButton } from 'web/components/manalinks/create-links-button'
 import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
 
@@ -27,6 +26,7 @@ import { Pagination } from 'web/components/pagination'
 import { Manalink } from 'common/manalink'
 import { SiteLink } from 'web/components/site-link'
 import { REFERRAL_AMOUNT } from 'common/economy'
+import { UserLink } from 'web/components/user-link'
 
 const LINKS_PER_PAGE = 24
 

web/pages/notifications.tsx

@@ -7,7 +7,6 @@ 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 { UserLink } from 'web/components/user-page'
 import {
   MANIFOLD_AVATAR_URL,
   MANIFOLD_USERNAME,
@@ -35,7 +34,7 @@ import {
   BETTING_STREAK_BONUS_AMOUNT,
   UNIQUE_BETTOR_BONUS_AMOUNT,
 } from 'common/economy'
-import { groupBy, sum, uniq } from 'lodash'
+import { groupBy, sum, uniqBy } from 'lodash'
 import { track } from '@amplitude/analytics-browser'
 import { Pagination } from 'web/components/pagination'
 import { useWindowSize } from 'web/hooks/use-window-size'
@@ -45,9 +44,13 @@ import { SiteLink } from 'web/components/site-link'
 import { NotificationSettings } from 'web/components/NotificationSettings'
 import { SEO } from 'web/components/SEO'
 import { useUser } from 'web/hooks/use-user'
+import {
+  MultiUserTipLink,
+  MultiUserLinkInfo,
+  UserLink,
+} from 'web/components/user-link'
 
 export const NOTIFICATIONS_PER_PAGE = 30
-const MULTIPLE_USERS_KEY = 'multipleUsers'
 const HIGHLIGHT_CLASS = 'bg-indigo-50'
 
 export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
@@ -253,10 +256,22 @@ function IncomeNotificationGroupItem(props: {
             notification.sourceText &&
             (sum = parseInt(notification.sourceText) + sum)
         )
-        const uniqueUsers = uniq(
+        const uniqueUsers = uniqBy(
           notificationsForSourceTitle.map((notification) => {
-            return notification.sourceUserUsername
-          })
+            let thisSum = 0
+            notificationsForSourceTitle
+              .filter(
+                (n) => n.sourceUserUsername === notification.sourceUserUsername
+              )
+              .forEach((n) => (thisSum = parseInt(n.sourceText) + thisSum))
+            return {
+              username: notification.sourceUserUsername,
+              name: notification.sourceUserName,
+              avatarUrl: notification.sourceUserAvatarUrl,
+              amountTipped: thisSum,
+            } as MultiUserLinkInfo
+          }),
+          (n) => n.username
         )
 
         const newNotification = {
@@ -264,7 +279,7 @@ function IncomeNotificationGroupItem(props: {
           sourceText: sum.toString(),
           sourceUserUsername:
             uniqueUsers.length > 1
-              ? MULTIPLE_USERS_KEY
+              ? JSON.stringify(uniqueUsers)
               : notificationsForSourceTitle[0].sourceType,
         }
         newNotifications.push(newNotification)
@@ -402,9 +417,8 @@ function IncomeNotificationItem(props: {
     } else if (sourceType === 'loan' && sourceText) {
       reasonText = `of your invested bets returned as a`
       // TODO: support just 'like' notification without a tip
-      // TODO: show who tip-liked your market
     } else if (sourceType === 'tip_and_like' && sourceText) {
-      reasonText = `in likes on`
+      reasonText = !simple ? `liked` : `in likes on`
     }
 
     const streakInDays =
@@ -513,9 +527,12 @@ function IncomeNotificationItem(props: {
               <span className={'mr-1'}>{incomeNotificationLabel()}</span>
             </div>
             <span>
-              {sourceType === 'tip' &&
-                (sourceUserUsername === MULTIPLE_USERS_KEY ? (
-                  <span className={'mr-1 truncate'}>Multiple users</span>
+              {(sourceType === 'tip' || sourceType === 'tip_and_like') &&
+                (sourceUserUsername?.includes(',') ? (
+                  <MultiUserTipLink
+                    userInfos={JSON.parse(sourceUserUsername)}
+                    noLink={true}
+                  />
                 ) : (
                   <UserLink
                     name={sourceUserName || ''}