feat: say hello btn on new dm view (#18)

* feat: say hello btn on new dm view

* fix: tokengated room

res/themes/superhero/img/icons/tokengated-room.svg

@@ -1,6 +1,6 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="12" cy="12" r="7" fill="white" />
     <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M12 22C17.5229 22 22 17.5229 22 12C22 6.47705 17.5229 2 12 2C6.47705 2 2 6.47705 2 12C2 17.5229 6.47705 22 12 22ZM14.1455 6.79102C13.8464 6.66235 13.5195 6.56592 13.1643 6.50098V5H11.1643V6.45581C10.696 6.51904 10.2646 6.63818 9.86987 6.81323C9.25195 7.08252 8.76611 7.46362 8.41235 7.95703C8.05859 8.44531 7.88159 9.01831 7.88159 9.67603V9.68359C7.88159 10.4958 8.15063 11.1562 8.68896 11.6643C9.22705 12.1726 10.0269 12.5339 11.0884 12.7483L12.2244 12.9724C12.8972 13.1121 13.3755 13.2864 13.6597 13.4956C13.9485 13.7 14.093 13.9841 14.093 14.3479V14.3552C14.093 14.5161 14.0637 14.6658 14.0054 14.8042C13.9644 14.9019 13.9089 14.9939 13.8389 15.0803C13.6746 15.2847 13.4404 15.4441 13.1362 15.5588C12.8374 15.6685 12.4785 15.7231 12.0601 15.7231C11.6514 15.7231 11.2852 15.6685 10.9612 15.5588C10.6372 15.4441 10.3733 15.2871 10.1689 15.0879C9.96948 14.8835 9.84497 14.6418 9.79517 14.3628L9.78027 14.2805H7.6499L7.65747 14.4001C7.70215 15.063 7.90649 15.6311 8.27026 16.1045C8.63403 16.5728 9.13232 16.9341 9.76514 17.1882C9.97974 17.272 10.2065 17.3418 10.4453 17.3975C10.6738 17.4507 10.9136 17.491 11.1643 17.5183V18.9998H13.1643V17.4758C13.5918 17.4077 13.981 17.2996 14.3323 17.1509C14.9851 16.8718 15.4834 16.4807 15.8271 15.9773C16.176 15.469 16.3506 14.8687 16.3506 14.176V14.1685C16.3506 13.8398 16.3108 13.5393 16.231 13.2668C16.1741 13.0723 16.0969 12.8918 15.9993 12.7258C15.77 12.3223 15.4136 11.9883 14.9302 11.7241C14.447 11.4602 13.8291 11.2534 13.0767 11.1038L11.9329 10.8721C11.3149 10.7476 10.8616 10.5806 10.5725 10.3713C10.2834 10.1621 10.1389 9.88794 10.1389 9.54907V9.5415C10.1389 9.28247 10.2112 9.05566 10.3557 8.86133C10.446 8.74365 10.5603 8.64185 10.698 8.55518C10.7881 8.49878 10.8882 8.44873 10.9985 8.40552C11.2776 8.29077 11.6089 8.23364 11.9927 8.23364C12.3665 8.23364 12.6953 8.28833 12.9795 8.39795C13.2683 8.50757 13.5 8.66455 13.6746 8.8689C13.8489 9.06812 13.9561 9.30981 13.9958 9.59399L14.0034 9.68359H16.1338L16.1262 9.5415C16.0913 8.91382 15.9045 8.36304 15.5657 7.88965C15.2268 7.41626 14.7534 7.05005 14.1455 6.79102Z"
+        d="M11.24 1L2 5.02865V11.1152C2 16.7229 5.93847 21.9738 11.24 23.2744V17.4477C8.74755 16.9666 6.86506 14.7733 6.86506 12.1404C6.86506 9.50743 8.74755 7.31415 11.24 6.83307V1ZM12.86 17.514C15.568 17.2203 17.6759 14.9265 17.6759 12.1404C17.6759 9.35426 15.568 7.06046 12.86 6.76675V1L22.1 5.02865V11.1152C22.1 16.7229 18.1615 21.9738 12.86 23.2744V17.514Z"
         fill="#1161FE" />
+    <circle cx="12.3004" cy="12.16" r="3.94" fill="#1161FE" />
 </svg>

src/components/views/elements/RoomName.tsx

@@ -33,10 +33,12 @@ export const RoomName = ({ room, children, maxLength }: IProps): JSX.Element =>
     const isVerifiedRoom = useVerifiedRoom(room);
 
     const roomUsers: string[] = useMemo(() => {
-        return (room as Room)
-            .getMembers()
-            .map((m) => m.userId)
-            .filter((userId) => !!userId && userId != (room as Room).myUserId);
+        return (
+            (room as Room)
+                ?.getMembers?.()
+                .map((m: { userId: string }) => m.userId)
+                .filter((userId: string) => !!userId && userId !== (room as Room)?.myUserId) || []
+        );
     }, [room]);
 
     const truncatedRoomName = useMemo(() => {

src/components/views/rooms/NewRoomIntro.tsx

@@ -69,6 +69,24 @@ const NewRoomIntro: React.FC = () => {
     const isLocalRoom = room instanceof LocalRoom;
     const dmPartner = isLocalRoom ? room.targets[0]?.userId : DMRoomMap.shared().getUserIdForRoomId(roomId);
 
+    const onSendHelloClick = (): void => {
+        if (!dmPartner) return;
+        cli.sendEvent(roomId, EventType.RoomMessage, {
+            body: "👋",
+            msgtype: "m.text",
+        });
+    };
+
+    const sendHelloButton = !room.getLastActiveTimestamp() && (
+        <AccessibleButton
+            kind="primary_outline"
+            onClick={onSendHelloClick}
+            style={{ marginTop: "5px", fontSize: "30px" }}
+        >
+            👋
+        </AccessibleButton>
+    );
+
     let body: JSX.Element;
     if (dmPartner) {
         const { shouldEncrypt: encryptedSingle3rdPartyInvite } = shouldEncryptRoomWithSingle3rdPartyInvite(room);
@@ -113,6 +131,7 @@ const NewRoomIntro: React.FC = () => {
                     )}
                 </p>
                 {caption && <p>{caption}</p>}
+                {sendHelloButton}
             </React.Fragment>
         );
     } else {
@@ -262,6 +281,7 @@ const NewRoomIntro: React.FC = () => {
                 </p>
                 <p>{topicText}</p>
                 {buttons}
+                {sendHelloButton}
             </React.Fragment>
         );
     }