Add warning if incompatible versionsd are being used

This will probably be overly sensitive until we start timing out
member events (ie. https://github.com/matrix-org/matrix-js-sdk/pull/2446
lands) because lots of calls might have old member events from people
who've joined previously.

src/Header.jsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { useRef } from "react";
+import React, { useCallback, useRef } from "react";
 import { Link } from "react-router-dom";
 import styles from "./Header.module.css";
 import { ReactComponent as Logo } from "./icons/Logo.svg";
@@ -8,6 +8,9 @@ import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
 import { useButton } from "@react-aria/button";
 import { Subtitle } from "./typography/Typography";
 import { Avatar } from "./Avatar";
+import { IncompatibleversionModal } from "./IncompatibleversionModal";
+import { useModalTriggerState } from "./Modal";
+import { Button } from "./button";
 
 export function Header({ children, className, ...rest }) {
   return (
@@ -84,3 +87,25 @@ export function RoomSetupHeaderInfo({ roomName, avatarUrl, ...rest }) {
     </button>
   );
 }
+
+export function VersionMismatchWarning({ users, room }) {
+  const { modalState, modalProps } = useModalTriggerState();
+
+  const onDetailsClick = useCallback(() => {
+    modalState.open();
+  }, [modalState]);
+
+  if (users.size === 0) return null;
+
+  return (
+    <span className={styles.versionMismatchWarning}>
+      Incomaptible versions!
+      <Button variant="link" onClick={onDetailsClick}>
+        Details
+      </Button>
+      {modalState.isOpen && (
+        <IncompatibleversionModal userIds={users} room={room} {...modalProps} />
+      )}
+    </span>
+  );
+}