diff --git a/lib/utils/entity-text.js b/lib/utils/entity-text.js --- a/lib/utils/entity-text.js +++ b/lib/utils/entity-text.js @@ -3,6 +3,7 @@ import invariant from 'invariant'; import * as React from 'react'; +import { useENSNames } from '../hooks/ens-cache'; import { threadNoun } from '../shared/thread-utils'; import { stringForUser } from '../shared/user-utils'; import { @@ -326,4 +327,28 @@ ); } -export { ET, entityTextToRawString, entityTextToReact, pluralizeEntityText }; +function useENSNamesForEntityText(entityText: EntityText): EntityText { + const allObjects = React.useMemo( + () => + entityText.map(entity => + typeof entity === 'string' ? { type: 'text', text: entity } : entity, + ), + [entityText], + ); + const objectsWithENSNames = useENSNames(allObjects); + return React.useMemo( + () => + objectsWithENSNames.map(entity => + entity.type === 'text' ? entity.text : entity, + ), + [objectsWithENSNames], + ); +} + +export { + ET, + entityTextToRawString, + entityTextToReact, + pluralizeEntityText, + useENSNamesForEntityText, +}; diff --git a/native/chat/inner-robotext-message.react.js b/native/chat/inner-robotext-message.react.js --- a/native/chat/inner-robotext-message.react.js +++ b/native/chat/inner-robotext-message.react.js @@ -8,6 +8,7 @@ import { entityTextToReact, entityTextToRawString, + useENSNamesForEntityText, type EntityText, } from 'lib/utils/entity-text'; @@ -43,9 +44,10 @@ const { messageInfo, robotext } = item; const { threadID } = messageInfo; + const robotextWithENSNames = useENSNamesForEntityText(robotext); const textParts = React.useMemo(() => { const darkColor = activeTheme === 'dark'; - return entityTextToReact(robotext, threadID, { + return entityTextToReact(robotextWithENSNames, threadID, { // eslint-disable-next-line react/display-name renderText: ({ text }) => ( , }); - }, [robotext, activeTheme, threadID, styles.robotext]); + }, [robotextWithENSNames, activeTheme, threadID, styles.robotext]); const viewStyle = [styles.robotextContainer]; if (!__DEV__) { diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js --- a/web/chat/robotext-message.react.js +++ b/web/chat/robotext-message.react.js @@ -7,7 +7,10 @@ import { threadInfoSelector } from 'lib/selectors/thread-selectors'; import type { Dispatch } from 'lib/types/redux-types'; import { type ThreadInfo } from 'lib/types/thread-types'; -import { entityTextToReact } from 'lib/utils/entity-text'; +import { + entityTextToReact, + useENSNamesForEntityText, +} from 'lib/utils/entity-text'; import Markdown from '../markdown/markdown.react'; import { linkRules } from '../markdown/rules.react'; @@ -48,8 +51,9 @@ const { messageInfo, robotext } = item; const { threadID } = messageInfo; + const robotextWithENSNames = useENSNamesForEntityText(robotext); const textParts = React.useMemo(() => { - return entityTextToReact(robotext, threadID, { + return entityTextToReact(robotextWithENSNames, threadID, { // eslint-disable-next-line react/display-name renderText: ({ text }) => ( {text} @@ -59,7 +63,7 @@ // eslint-disable-next-line react/display-name renderColor: ({ hex }) => , }); - }, [robotext, threadID]); + }, [robotextWithENSNames, threadID]); const { threadInfo } = props; const { onMouseEnter, onMouseLeave } = useMessageTooltip({