diff --git a/native/chat/message-header.react.js b/native/chat/message-header.react.js
--- a/native/chat/message-header.react.js
+++ b/native/chat/message-header.react.js
@@ -3,7 +3,7 @@
import * as React from 'react';
import { View } from 'react-native';
-import { stringForUser } from 'lib/shared/user-utils';
+import { useStringForUser } from 'lib/hooks/ens-cache';
import { SingleLine } from '../components/single-line.react';
import { useStyles } from '../themes/colors';
@@ -24,15 +24,16 @@
const { isViewer } = creator;
const modalDisplay = display === 'modal';
+ const shouldShowUsername = !isViewer && (modalDisplay || item.startsCluster);
+ const stringForUser = useStringForUser(shouldShowUsername ? creator : null);
+
let authorName = null;
- if (!isViewer && (modalDisplay || item.startsCluster)) {
+ if (stringForUser) {
const style = [styles.authorName];
if (modalDisplay) {
style.push(styles.modal);
}
- authorName = (
- {stringForUser(creator)}
- );
+ authorName = {stringForUser};
}
const timestamp =
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -8,8 +8,8 @@
XCircle as XCircleIcon,
} from 'react-feather';
+import { useStringForUser } from 'lib/hooks/ens-cache';
import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors';
-import { stringForUser } from 'lib/shared/user-utils';
import { assertComposableMessageType } from 'lib/types/message-types';
import { type ThreadInfo } from 'lib/types/thread-types';
@@ -56,6 +56,7 @@
+onMouseLeave: ?() => mixed,
+onMouseEnter: (event: SyntheticEvent) => mixed,
+containsInlineEngagement: boolean,
+ +stringForUser: ?string,
};
class ComposedMessage extends React.PureComponent {
static defaultProps: { +borderRadius: number } = {
@@ -90,10 +91,9 @@
};
let authorName = null;
- if (!isViewer && item.startsCluster) {
- authorName = (
- {stringForUser(creator)}
- );
+ const { stringForUser } = this.props;
+ if (stringForUser) {
+ authorName = {stringForUser};
}
let deliveryIcon = null;
@@ -167,7 +167,8 @@
function ConnectedComposedMessage(props) {
const { item, threadInfo } = props;
const inputState = React.useContext(InputStateContext);
- const isViewer = props.item.messageInfo.creator.isViewer;
+ const { creator } = props.item.messageInfo;
+ const { isViewer } = creator;
const availablePositions = isViewer
? availableTooltipPositionsForViewerMessage
: availableTooltipPositionsForNonViewerMessage;
@@ -179,6 +180,9 @@
availablePositions,
});
+ const shouldShowUsername = !isViewer && item.startsCluster;
+ const stringForUser = useStringForUser(shouldShowUsername ? creator : null);
+
return (
);
},