diff --git a/web/chat/reaction-tooltip.react.js b/web/chat/reaction-tooltip.react.js --- a/web/chat/reaction-tooltip.react.js +++ b/web/chat/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 { @@ -14,6 +15,8 @@ import css from './reaction-tooltip.css'; 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) {