diff --git a/web/app.react.js b/web/app.react.js --- a/web/app.react.js +++ b/web/app.react.js @@ -206,10 +206,10 @@ return ( - - - - + + + + @@ -221,10 +221,10 @@ {content} - - - - + + + + ); diff --git a/web/tooltips/reaction-tooltip.react.js b/web/tooltips/reaction-tooltip.react.js --- a/web/tooltips/reaction-tooltip.react.js +++ b/web/tooltips/reaction-tooltip.react.js @@ -3,6 +3,7 @@ import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react.js'; +import { useENSNames } from 'lib/hooks/ens-cache.js'; import type { ReactionInfo } from 'lib/selectors/chat-selectors'; import css from './reaction-tooltip.css'; @@ -14,6 +15,8 @@ } from './tooltip-constants.js'; import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js'; +const useENSNamesOptions = { allAtOnce: true }; + type Props = { +reactions: ReactionInfo, +reaction: string, @@ -21,6 +24,8 @@ function ReactionTooltip(props: Props): React.Node { const { reactions, reaction } = props; + const { users } = reactions[reaction]; + const { pushModal, popModal } = useModalContext(); const onClickReactionTooltip = React.useCallback( @@ -34,10 +39,10 @@ [popModal, pushModal, reactions], ); - const usernames = React.useMemo(() => { - const { users } = reactions[reaction]; + const resolvedUsers = useENSNames(users, useENSNamesOptions); - return users.map(user => ( + const usernames = React.useMemo(() => { + return resolvedUsers.map(user => (

)); - }, [reaction, reactions]); + }, [resolvedUsers]); let seeMoreText; if (usernames && usernames.length > 5) { diff --git a/web/tooltips/tooltip-action-utils.js b/web/tooltips/tooltip-action-utils.js --- a/web/tooltips/tooltip-action-utils.js +++ b/web/tooltips/tooltip-action-utils.js @@ -4,6 +4,7 @@ import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react.js'; +import { useENSNames } from 'lib/hooks/ens-cache.js'; import { useResettingState } from 'lib/hooks/use-resetting-state.js'; import type { ChatMessageInfoItem, @@ -439,6 +440,8 @@ }; } +const useENSNamesOptions = { allAtOnce: true }; + type UseReactionTooltipArgs = { +reaction: string, +reactions: ReactionInfo, @@ -452,15 +455,17 @@ }: UseReactionTooltipArgs): UseTooltipResult { const { users } = reactions[reaction]; + const resolvedUsers = useENSNames(users, useENSNamesOptions); + const tooltipSize = React.useMemo(() => { if (typeof document === 'undefined') { return undefinedTooltipSize; } - const usernames = users.map(user => user.username).filter(Boolean); + const usernames = resolvedUsers.map(user => user.username).filter(Boolean); return calculateReactionTooltipSize(usernames); - }, [users]); + }, [resolvedUsers]); const createReactionTooltip = React.useCallback( () => ,