@ethora/chat-component-rn 26.8.5 → 26.8.7

package/src/components/Modals/Modal/SwipeBackLayer.tsx

@@ -1,18 +1,19 @@
-import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
+  Animated,
   BackHandler,
   Keyboard,
   StyleSheet,
   useWindowDimensions,
   View,
 } from 'react-native';
-import Animated, {
-  interpolate,
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import {
   COMPLETE_DISTANCE,
@@ -33,37 +34,76 @@ interface SwipeBackLayerProps {
 /**
  * Full-screen modal layer with the same navigation feel as RoomStack: it
  * slides in from the right, and a swipe from the left edge drags it back
- * out over whatever is underneath (the room or the list).
+ * out over whatever is underneath (the room or the list). Like RoomStack it
+ * runs on RN's own `Animated`, one value driving every layer.
  */
 export const SwipeBackLayer: React.FC<SwipeBackLayerProps> = ({
   onClose,
   children,
 }) => {
   const { width: windowWidth } = useWindowDimensions();
-  const width = useSharedValue(windowWidth);
-  const x = useSharedValue(windowWidth);
-  const closing = useSharedValue(false);
+  const [width, setWidth] = useState(windowWidth);
+  const widthRef = useRef(width);
+  widthRef.current = width;
+  const x = useRef(new Animated.Value(windowWidth)).current;
+  const closing = useRef(false);
+
+  const slideTo = useCallback(
+    (
+      toValue: number,
+      config: typeof PUSH,
+      done?: (finished: boolean) => void
+    ) => {
+      Animated.timing(x, {
+        toValue,
+        ...config,
+        useNativeDriver: true,
+      }).start(({ finished }) => done?.(finished));
+    },
+    [x]
+  );
 
   useEffect(() => {
-    x.value = withTiming(0, PUSH);
+    slideTo(0, PUSH);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
-  const finish = useCallback(() => onCloseRef.current(), []);
+  const [closeCount, setCloseCount] = useState(0);
+  const finish = useCallback(() => {
+    onCloseRef.current();
+    setCloseCount(count => count + 1);
+  }, []);
 
-  const close = useCallback(() => {
-    if (closing.value) {
+  // `onClose` normally unmounts this layer. If it is still here afterwards
+  // (the modal did not close), slide the screen back rather than leave it
+  // parked off-screen.
+  useEffect(() => {
+    if (closeCount === 0) {
       return;
     }
-    closing.value = true;
-    Keyboard.dismiss();
-    x.value = withTiming(width.value, POP, finished => {
+    closing.current = false;
+    slideTo(0, POP);
+  }, [closeCount]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const slideOut = useCallback(() => {
+    closing.current = true;
+    slideTo(widthRef.current, POP, finished => {
       if (finished) {
-        runOnJS(finish)();
+        finish();
+      } else {
+        closing.current = false;
       }
     });
-  }, [finish]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [finish, slideTo]);
+
+  const close = useCallback(() => {
+    if (closing.current) {
+      return;
+    }
+    Keyboard.dismiss();
+    slideOut();
+  }, [slideOut]);
 
   useEffect(() => {
     const sub = BackHandler.addEventListener('hardwareBackPress', () => {
@@ -73,46 +113,51 @@ export const SwipeBackLayer: React.FC<SwipeBackLayerProps> = ({
     return () => sub.remove();
   }, [close]);
 
-  const dismissKeyboard = useCallback(() => Keyboard.dismiss(), []);
-
-  const swipeBack = Gesture.Pan()
-    .hitSlop({ left: 0, width: EDGE_WIDTH })
-    .activeOffsetX(12)
-    .failOffsetY([-16, 16])
-    .onStart(() => {
-      runOnJS(dismissKeyboard)();
-    })
-    .onUpdate(e => {
-      if (closing.value) {
-        return;
-      }
-      x.value = Math.min(Math.max(e.translationX, 0), width.value);
-    })
-    .onEnd(e => {
-      if (closing.value) {
-        return;
-      }
-      const complete =
-        x.value > width.value * COMPLETE_DISTANCE ||
-        e.velocityX > COMPLETE_VELOCITY;
-      if (complete) {
-        closing.value = true;
-        x.value = withTiming(width.value, POP, finished => {
-          if (finished) {
-            runOnJS(finish)();
+  const swipeBack = useMemo(
+    () =>
+      Gesture.Pan()
+        .runOnJS(true)
+        .hitSlop({ left: 0, width: EDGE_WIDTH })
+        .activeOffsetX(12)
+        .failOffsetY([-16, 16])
+        .onStart(() => {
+          if (closing.current) {
+            return;
           }
-        });
-      } else {
-        x.value = withTiming(0, POP);
-      }
-    });
+          Keyboard.dismiss();
+          x.stopAnimation();
+        })
+        .onUpdate(e => {
+          if (closing.current) {
+            return;
+          }
+          x.setValue(Math.min(Math.max(e.translationX, 0), widthRef.current));
+        })
+        .onEnd(e => {
+          if (closing.current) {
+            return;
+          }
+          const complete =
+            e.translationX > widthRef.current * COMPLETE_DISTANCE ||
+            e.velocityX > COMPLETE_VELOCITY;
+          if (complete) {
+            slideOut();
+          } else {
+            slideTo(0, POP);
+          }
+        }),
+    [slideOut, slideTo, x]
+  );
 
-  const screenStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: x.value }],
-  }));
-  const dimStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(x.value, [0, width.value], [LIST_DIM, 0]),
-  }));
+  const dimOpacity = useMemo(
+    () =>
+      x.interpolate({
+        inputRange: [0, width],
+        outputRange: [LIST_DIM, 0],
+        extrapolate: 'clamp',
+      }),
+    [x, width]
+  );
 
   return (
     <View
@@ -120,17 +165,23 @@ export const SwipeBackLayer: React.FC<SwipeBackLayerProps> = ({
       style={styles.host}
       onLayout={e => {
         const next = e.nativeEvent.layout.width;
-        if (next > 0) {
-          width.value = next;
+        if (next > 0 && next !== widthRef.current) {
+          setWidth(next);
         }
       }}
     >
       <Animated.View
         pointerEvents="none"
-        style={[styles.fill, styles.dim, dimStyle]}
+        style={[styles.fill, styles.dim, { opacity: dimOpacity }]}
       />
       <GestureDetector gesture={swipeBack}>
-        <Animated.View style={[styles.fill, styles.screen, screenStyle]}>
+        <Animated.View
+          style={[
+            styles.fill,
+            styles.screen,
+            { transform: [{ translateX: x }] },
+          ]}
+        >
           {children(close)}
         </Animated.View>
       </GestureDetector>

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -17,6 +17,7 @@ import {
   EditIcon,
   IconDoc,
   LeaveIcon,
+  LockIcon,
   LogoutIcon,
   ProfileIcon,
   ShareIcon,
@@ -43,7 +44,21 @@ import {
 import { addRoomViaApi, setCurrentRoom } from '../../../roomStore/roomsSlice';
 import { runLogoutFlow } from '../../Menu/HeaderRoomListMenu';
 import { useLogout } from '../../../hooks/useLogout';
-import { ApiRoom, postPrivateRoom } from '../../../networking/api-requests/rooms.api';
+import {
+  ApiRoom,
+  ownAppId,
+  postPrivateRoom,
+} from '../../../networking/api-requests/rooms.api';
+import EncryptionCard from '../../MainComponents/EncryptionCard';
+import { accountNameOf } from '../../../helpers/accountName';
+import { composeName } from '../../../helpers/displayName';
+import { isUnresolvedSenderId } from '../../../helpers/isUnresolvedSenderId';
+
+/** A name, unless it is only the account's id standing in for one. */
+const nameOrNothing = (name?: string | null): string => {
+  const trimmed = String(name ?? '').trim();
+  return isUnresolvedSenderId(trimmed) ? '' : trimmed;
+};
 import {
   getUserFiles,
   isMediaFile,
@@ -196,8 +211,8 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
 
   const handleShare = useCallback(async () => {
     const name =
-      profileUser?.name ||
-      `${profileUser?.firstName ?? ''} ${profileUser?.lastName ?? ''}`.trim();
+      nameOrNothing(profileUser?.name) ||
+      composeName(profileUser?.firstName, profileUser?.lastName);
     const id =
       profileUser?.userJID ||
       profileUser?.defaultWallet?.walletAddress ||
@@ -238,7 +253,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     }
   };
 
-  const handlePrivateMessage = useCallback(async () => {
+  const openPrivateRoom = useCallback(async (e2ee: boolean) => {
     showToast({
       id: Date.now().toString(),
       title: 'Room creation',
@@ -248,7 +263,8 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     });
     if (config?.newArch) {
       const newRoom = await postPrivateRoom(
-        selectedUser?.userJID ?? (selectedUser?.id || '')
+        selectedUser?.userJID ?? (selectedUser?.id || ''),
+        e2ee
       );
       handleRoomCreation(newRoom, 2);
     } else {
@@ -283,6 +299,17 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     dispatch(setActiveModal(undefined));
   }, [selectedUser]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const handlePrivateMessage = useCallback(
+    () => openPrivateRoom(false),
+    [openPrivateRoom]
+  );
+  const handleEncryptedPrivateMessage = useCallback(
+    () => openPrivateRoom(true),
+    [openPrivateRoom]
+  );
+  const canStartEncrypted =
+    config?.e2ee?.enabled === true && !!config?.newArch;
+
   const openFile = (file: UserFile) => {
     dispatch(
       setActiveFile({
@@ -333,6 +360,16 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
                     icon: (color: string) => <ChatIcon color={color} />,
                     onPress: handlePrivateMessage,
                   },
+                  ...(canStartEncrypted
+                    ? [
+                        {
+                          key: 'encrypted-message',
+                          label: t('action.encryptedMessage'),
+                          icon: (color: string) => <LockIcon color={color} />,
+                          onPress: handleEncryptedPrivateMessage,
+                        },
+                      ]
+                    : []),
                 ]),
             {
               key: 'share',
@@ -341,7 +378,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
               onPress: handleShare,
             },
           ],
-    [isOwnProfile, t, handleShare, handlePrivateMessage, handleLogout] // eslint-disable-line react-hooks/exhaustive-deps
+    [isOwnProfile, t, handleShare, handlePrivateMessage, handleEncryptedPrivateMessage, canStartEncrypted, handleLogout] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   // Collapsed, the hero's round buttons are gone — the "…" menu carries
@@ -373,8 +410,8 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
   }
 
   const displayName =
-    profileUser?.name ||
-    `${profileUser?.firstName ?? ''} ${profileUser?.lastName ?? ''}`.trim() ||
+    nameOrNothing(profileUser?.name) ||
+    composeName(profileUser?.firstName, profileUser?.lastName) ||
     t('modal.profile.title');
   const heroImage =
     appendFileToken(profileUser?.profileImage, fileToken) || null;
@@ -529,6 +566,14 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
             </Text>
           </View>
 
+          {!isOwnProfile && config?.e2ee?.enabled === true && (
+            <EncryptionCard
+              account={accountNameOf(profileUser, ownAppId())}
+              style={styles.card}
+              testID="user-profile-e2ee"
+            />
+          )}
+
           {tabs.length > 0 && (
             <View style={styles.card}>
               <View style={styles.tabsRow}>

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -1,5 +1,6 @@
 /** @format */
 
+import EncryptionCard from '../../MainComponents/EncryptionCard';
 import React, { useCallback, useMemo } from 'react';
 import {
   StyleSheet,
@@ -159,6 +160,10 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
           </View>
         ) : null}
 
+        {config?.e2ee?.enabled === true ? (
+          <EncryptionCard style={styles.card} testID="settings-e2ee" />
+        ) : null}
+
         {options.map((option) => (
           <TouchableOpacity
             key={option.key}

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
+import { UNREAD_CAP_PAGE } from '../../roomStore/roomsSlice';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
 import { IMessage } from '../../types/types';
@@ -19,6 +20,10 @@ import LastMessageItem from './LastMessageItem';
 import { LastRoomMessageText } from './styled/StyledRoomComponents';
 import { useTheme } from '../../hooks/useTheme';
 import { resolveTheme } from '../../theme/theme';
+import { LockIcon } from '../../assets/icons';
+import { useT } from '../../i18n/useT';
+import { composeName } from '../../helpers/displayName';
+import { isUnresolvedSenderId } from '../../helpers/isUnresolvedSenderId';
 
 interface ChatRoomItemProps {
   chat: IRoom;
@@ -36,6 +41,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   // Rows can be rendered with an explicit `config` prop (tests, hosts
   // composing their own list); honour its colours over the store's.
   const storeTheme = useTheme();
+  const t = useT();
   const theme = useMemo(
     () => (config ? resolveTheme(config) : storeTheme),
     [config, storeTheme]
@@ -60,19 +66,12 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
       const localId = rawUserId.split('@')[0];
       const entry = usersSet?.[localId] ?? usersSet?.[rawUserId];
       const fromUsersSet = entry
-        ? `${entry.firstName ?? ''} ${entry.lastName ?? ''}`.trim()
+        ? composeName(entry.firstName, entry.lastName)
         : '';
 
-      // usersSet first, exactly like Message.tsx: it's the live store, so
-      // a renamed user updates here too. The message's own `name` is the
-      // fallback that carries broadcast/system senders ("Ethora"), which
-      // never appear in usersSet.
+      const ownName = String(message?.user?.name || '').trim();
       const safeName =
-        fromUsersSet ||
-        String(message?.user?.name || '').trim() ||
-        localId ||
-        rawUserId ||
-        'Unknown';
+        fromUsersSet || (isUnresolvedSenderId(ownName) ? '' : ownName);
 
       return {
         ...message,
@@ -86,7 +85,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   );
 
   const lastMessage = useMemo(() => {
-    if (!chat?.messages || chat.messages.length === 0) {return undefined;}
+    if (!chat?.messages || chat.messages.length === 0) {
+      return chat?.lastMessage?.body
+        ? withAuthorFallback(chat.lastMessage as IMessage)
+        : undefined;
+    }
 
     for (let i = chat.messages.length - 1; i >= 0; i--) {
       const msg = chat.messages[i];
@@ -95,7 +98,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
       }
     }
     return undefined;
-  }, [chat?.messages, withAuthorFallback]);
+  }, [chat?.messages, chat?.lastMessage, withAuthorFallback]);
 
   // Mirrors web's formatter: tolerates undefined/garbage inputs (returns
   // undefined instead of "NaN:NaN"), and uses HH:MM today / MM/DD this
@@ -171,7 +174,21 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           }}
         >
           <ChatInfo>
-            <ChatName text={displayName} />
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+              <View style={{ flexShrink: 1 }}>
+                <ChatName text={displayName} />
+              </View>
+              {chat?.e2ee && (
+                <View
+                  accessible
+                  accessibilityRole="image"
+                  accessibilityLabel={t('e2ee.roomEncrypted')}
+                  testID="room-e2ee-lock"
+                >
+                  <LockIcon width={13} height={13} color={theme.textSecondary} />
+                </View>
+              )}
+            </View>
           </ChatInfo>
           {stamp ? (
             <UserCount
@@ -266,7 +283,9 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
                   fontWeight: '600',
                 }}
               >
-                {chat.unreadMessages || ''}
+                {chat.unreadCapped && (chat.unreadMessages || 0) >= UNREAD_CAP_PAGE
+                  ? `${chat.unreadMessages}+`
+                  : chat.unreadMessages || ''}
               </Text>
             </View>
           ) : null}
@@ -284,4 +303,4 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   );
 };
 
-export default ChatRoomItem;
+export default React.memo(ChatRoomItem);

package/src/components/RoomComponents/LastMessageItem.tsx

@@ -6,6 +6,7 @@ import LastMessagePhoto from './styled/LastMessagePhoto';
 import LastMessageEmoji from './styled/LastMessageEmoji';
 import LastMessageFile from './styled/LastMessageFile';
 import LastAudioMessage from './styled/LastAudioMessage';
+import LastMessageSealed from './styled/LastMessageSealed';
 
 interface LastMessageItemProps {
   lastMessage: LastMessage;
@@ -14,6 +15,10 @@ interface LastMessageItemProps {
 const LastMessageItem: FC<LastMessageItemProps> = ({ lastMessage }) => {
   const { body, emoji, mimetype } = lastMessage;
 
+  if (lastMessage?.clientEncrypted === 'true') {
+    return <LastMessageSealed {...lastMessage} />;
+  }
+
   if (mimetype) {
     if (mimetype.startsWith('image/')) {
       return <LastMessagePhoto {...lastMessage} />;

package/src/components/RoomComponents/styled/LastAudioMessage.tsx

@@ -33,7 +33,9 @@ const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body }) => {
   const theme = useTheme();
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName numberOfLines={1}>{user?.name ?? ''}</LastRoomMessageName>
+      {!!user?.name && (
+        <LastRoomMessageName numberOfLines={1}>{user.name}</LastRoomMessageName>
+      )}
       <AudioRow>
         <PlayButton>
           <PlayIcon width={10} height={10} color={theme.dark ? theme.text : '#1F2937'} />

package/src/components/RoomComponents/styled/LastMessageEmoji.tsx

@@ -5,22 +5,21 @@ import {
   LastRoomMessageText,
 } from './StyledRoomComponents';
 import { LastMessage } from '../../../types/types';
+import { getEmojiNativeById } from '../../../helpers/emoji';
 
 interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'emoji'> {}
 
 /**
- * Renders the per-room last-message preview when the latest message
- * is a reaction (emoji). The `emoji` field is expected to already be
- * a unicode glyph (the reaction stanza carries the rendered character,
- * not an `:id:`) so we just render it as-is — no emoji-id resolution
- * library needed. If a legacy payload still ships an `:id:`, it
- * renders verbatim instead of crashing.
+ * The room-list preview when the latest event in a room is a reaction.
+ * The stanza carries the emoji's short name (`joy`, `+1`), as on web — it
+ * is resolved to the glyph here; a glyph or unknown id renders as is.
  */
 const LastMessageEmoji: FC<LastMessageEmojiProps> = ({ user, emoji }) => {
+  const name = (user?.name || '').trim();
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
-      <LastRoomMessageText>{emoji || ''}</LastRoomMessageText>
+      {!!name && <LastRoomMessageName>{name}:</LastRoomMessageName>}
+      <LastRoomMessageText>{emoji ? getEmojiNativeById(emoji) : ''}</LastRoomMessageText>
     </LastRoomMessageContainer>
   );
 };

package/src/components/RoomComponents/styled/LastMessageFile.tsx

@@ -43,7 +43,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
 
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      {!!user?.name && <LastRoomMessageName>{user.name}:</LastRoomMessageName>}
       <View
         style={{
           display: 'flex',
@@ -67,7 +67,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
             }}
           />
         ) : (
-          <FileIcon style={{ width: '20px', height: '20px' }} />
+          <FileIcon width={20} height={20} />
         )}
         <LastRoomMessageText>{displayName}</LastRoomMessageText>
       </View>

package/src/components/RoomComponents/styled/LastMessagePhoto.tsx

@@ -47,7 +47,7 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
     : 'file';
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      {!!user?.name && <LastRoomMessageName>{user.name}:</LastRoomMessageName>}
       <View
         style={{
           display: 'flex',

package/src/components/RoomComponents/styled/LastMessageSealed.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import { View } from 'react-native';
+import { LastMessage } from '../../../types/types';
+import {
+  LastRoomMessageContainer,
+  LastRoomMessageName,
+  LastRoomMessageText,
+} from './StyledRoomComponents';
+import { LockIcon } from '../../../assets/icons';
+import { useTheme } from '../../../hooks/useTheme';
+import { useT } from '../../../i18n/useT';
+
+interface LastMessageSealedProps extends Pick<LastMessage, 'user'> {}
+
+const LastMessageSealed: FC<LastMessageSealedProps> = ({ user }) => {
+  const t = useT();
+  const theme = useTheme();
+  const name = user?.name;
+
+  return (
+    <LastRoomMessageContainer>
+      {!!name && <LastRoomMessageName>{name}:</LastRoomMessageName>}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+        <LockIcon width={14} height={14} color={theme.textSecondary} />
+        <LastRoomMessageText>{t('media.sealedFile')}</LastRoomMessageText>
+      </View>
+    </LastRoomMessageContainer>
+  );
+};
+
+export default LastMessageSealed;

package/src/components/RoomComponents/styled/LastMessageVideo.tsx

@@ -62,7 +62,7 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
     : 'file';
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      {!!user?.name && <LastRoomMessageName>{user.name}:</LastRoomMessageName>}
       <View
         style={{
           display: 'flex',