diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -47,6 +47,7 @@
import { EditModalProvider } from './chat/edit-message-provider.js';
import { MemberListSidebarProvider } from './chat/member-list-sidebar/member-list-sidebar-provider.react.js';
import NavigationArrows from './components/navigation-arrows.react.js';
+import MinVersionHandler from './components/version-handler.react.js';
import { olmAPI } from './crypto/olm-api.js';
import electron from './electron.js';
import InputStateContainer from './input/input-state-container.react.js';
@@ -226,6 +227,7 @@
+
{content}
diff --git a/web/components/version-handler.css b/web/components/version-handler.css
new file mode 100644
--- /dev/null
+++ b/web/components/version-handler.css
@@ -0,0 +1,21 @@
+.modalContent {
+ color: var(--text-background-primary-default);
+ font-size: var(--s-font-14);
+ margin-top: 8px;
+ display: flex;
+}
+
+.wrapper {
+ display: flex;
+ flex-shrink: 1;
+ justify-content: center;
+}
+
+.ancestryContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 40px;
+ background-color: var(--frame-background-tertiary-default);
+ margin-top: 20px;
+}
diff --git a/web/components/version-handler.react.js b/web/components/version-handler.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/version-handler.react.js
@@ -0,0 +1,86 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import ashoat from 'lib/facts/ashoat.js';
+
+import KeyserverPill from './keyserver-pill.react.js';
+import css from './version-handler.css';
+import Modal from '../modals/modal.react.js';
+import { useSelector } from '../redux/redux-utils.js';
+
+type ModalProps = {
+ +keyserverName: string,
+};
+
+function VersionUnsupportedModal(props: ModalProps): React.Node {
+ const { popModal } = useModalContext();
+
+ const subheader = React.useMemo(
+ () => (
+
+
+
+ ),
+ [props.keyserverName],
+ );
+
+ return (
+
+
+ Your app version is pretty old, and the server doesn’t know how to speak
+ to it anymore. Please reload the app.
+
+
+ );
+}
+
+type Props = {
+ +keyserverID: string,
+};
+
+function SingleKeyserverMinVersionHandler(props: Props): null {
+ const { keyserverID } = props;
+
+ const connectionIssue = useSelector(
+ state =>
+ state.keyserverStore.keyserverInfos[keyserverID].connection
+ .connectionIssue,
+ );
+
+ const admin = useSelector(state => state.userStore[keyserverID]);
+ let keyserverName = admin?.username;
+ if (!keyserverName) {
+ keyserverName = keyserverID === ashoat.id ? ashoat.username : keyserverID;
+ }
+
+ const { pushModal } = useModalContext();
+
+ React.useEffect(() => {
+ if (connectionIssue === 'client_version_unsupported') {
+ pushModal();
+ }
+ }, [keyserverName, connectionIssue, keyserverID, pushModal]);
+
+ return null;
+}
+const MemoizedSingleKeyserverMinVersionHandler: React.ComponentType =
+ React.memo(SingleKeyserverMinVersionHandler);
+
+function MinVersionHandler(): React.Node {
+ const keyserverIDs = useSelector(state =>
+ Object.keys(state.keyserverStore.keyserverInfos),
+ );
+
+ return keyserverIDs.map(id => (
+
+ ));
+}
+
+export default MinVersionHandler;