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 ( <DndProvider backend={HTML5Backend}> <EditModalProvider> - <TooltipProvider> - <MenuProvider> - <WagmiConfig config={wagmiConfig}> - <AlchemyENSCacheProvider> + <MenuProvider> + <WagmiConfig config={wagmiConfig}> + <AlchemyENSCacheProvider> + <TooltipProvider> <MessageSearchStateProvider> <ChatMentionContextProvider> <FocusHandler /> @@ -221,10 +221,10 @@ {content} </ChatMentionContextProvider> </MessageSearchStateProvider> - </AlchemyENSCacheProvider> - </WagmiConfig> - </MenuProvider> - </TooltipProvider> + </TooltipProvider> + </AlchemyENSCacheProvider> + </WagmiConfig> + </MenuProvider> </EditModalProvider> </DndProvider> ); 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 => ( <p key={user.id} className={css.usernameText} @@ -46,7 +51,7 @@ {user.username} </p> )); - }, [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( () => <ReactionTooltip reactions={reactions} reaction={reaction} />,