diff --git a/.editorconfig b/.editorconfig
index 56631484cd5..98ebc4dc8f1 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -23,4 +23,4 @@ indent_size = 4
 trim_trailing_whitespace = true
 
 [*.{yml,yaml}]
-indent_size = 2
+indent_size = 4
diff --git a/.eslintrc.js b/.eslintrc.js
index 7c2ebb96df5..d133a3c0051 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -165,10 +165,31 @@ module.exports = {
         },
         {
             files: ["test/**/*.{ts,tsx}", "cypress/**/*.ts"],
+            extends: ["plugin:matrix-org/jest"],
             rules: {
                 // We don't need super strict typing in test utilities
                 "@typescript-eslint/explicit-function-return-type": "off",
                 "@typescript-eslint/explicit-member-accessibility": "off",
+
+                // Jest/Cypress specific
+
+                // Disabled tests are a reality for now but as soon as all of the xits are
+                // eliminated, we should enforce this.
+                "jest/no-disabled-tests": "off",
+                // TODO: There are many tests with invalid expects that should be fixed,
+                // https://github.com/vector-im/element-web/issues/24709
+                "jest/valid-expect": "off",
+                // TODO: There are many cases to refactor away,
+                // https://github.com/vector-im/element-web/issues/24710
+                "jest/no-conditional-expect": "off",
+                // Also treat "oldBackendOnly" as a test function.
+                // Used in some crypto tests.
+                "jest/no-standalone-expect": [
+                    "error",
+                    {
+                        additionalTestBlockFunctions: ["beforeAll", "beforeEach", "oldBackendOnly"],
+                    },
+                ],
             },
         },
         {
@@ -176,6 +197,11 @@ module.exports = {
             parserOptions: {
                 project: ["./cypress/tsconfig.json"],
             },
+            rules: {
+                // Cypress "promises" work differently - disable some related rules
+                "jest/valid-expect-in-promise": "off",
+                "jest/no-done-callback": "off",
+            },
         },
     ],
     settings: {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b8428ec020..3b156c98a1d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,15 @@
-Changes in [3.67.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.67.0) (2023-02-28)
+Changes in [3.68.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.68.0) (2023-03-15)
 =====================================================================================================
 
 ## ✨ Features
+ * Only allow to start a DM with one email if encryption by default is enabled ([\#10253](https://github.com/matrix-org/matrix-react-sdk/pull/10253)). Fixes vector-im/element-web#23133.
+ * DM rooms are now encrypted if encryption by default is enabled and only inviting a single email address. Any action in the result DM room will be blocked until the other has joined. ([\#10229](https://github.com/matrix-org/matrix-react-sdk/pull/10229)).
+ * Reduce bottom margin of ReplyChain on compact modern layout ([\#8972](https://github.com/matrix-org/matrix-react-sdk/pull/8972)). Fixes vector-im/element-web#22748. Contributed by @luixxiul.
+ * Support for v2 of MSC3903 ([\#10165](https://github.com/matrix-org/matrix-react-sdk/pull/10165)). Contributed by @hughns.
+ * When starting a DM, existing rooms with pending third-party invites will be reused. ([\#10256](https://github.com/matrix-org/matrix-react-sdk/pull/10256)). Fixes vector-im/element-web#23139.
+ * Polls push rules: synchronise poll rules with message rules ([\#10263](https://github.com/matrix-org/matrix-react-sdk/pull/10263)). Contributed by @kerryarchibald.
+ * New verification request toast button labels ([\#10259](https://github.com/matrix-org/matrix-react-sdk/pull/10259)).
+ * Remove padding around integration manager iframe ([\#10148](https://github.com/matrix-org/matrix-react-sdk/pull/10148)).
  * Fix block code styling in rich text editor ([\#10246](https://github.com/matrix-org/matrix-react-sdk/pull/10246)). Contributed by @alunturner.
  * Poll history: fetch more poll history ([\#10235](https://github.com/matrix-org/matrix-react-sdk/pull/10235)). Contributed by @kerryarchibald.
  * Sort short/exact emoji matches before longer incomplete matches ([\#10212](https://github.com/matrix-org/matrix-react-sdk/pull/10212)). Fixes vector-im/element-web#23210. Contributed by @grimhilt.
@@ -13,6 +21,28 @@ Changes in [3.67.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/
  * Support joining non-peekable rooms via the module API ([\#10154](https://github.com/matrix-org/matrix-react-sdk/pull/10154)). Contributed by @maheichyk.
  * The "new login" toast does now display the same device information as in the settings. "No" does now open the device settings. "Yes, it was me" dismisses the toast. ([\#10200](https://github.com/matrix-org/matrix-react-sdk/pull/10200)).
  * Do not prompt for a password when doing a „reset all“ after login ([\#10208](https://github.com/matrix-org/matrix-react-sdk/pull/10208)).
+
+## 🐛 Bug Fixes
+ * Fix incorrect copy in space creation flow ([\#10296](https://github.com/matrix-org/matrix-react-sdk/pull/10296)). Fixes vector-im/element-web#24741.
+ * Fix space settings dialog having rogue title tooltip ([\#10293](https://github.com/matrix-org/matrix-react-sdk/pull/10293)). Fixes vector-im/element-web#24740.
+ * Show spinner when starting a DM from the user profile (right panel) ([\#10290](https://github.com/matrix-org/matrix-react-sdk/pull/10290)).
+ * Reduce height of toggle on expanded view source event ([\#10283](https://github.com/matrix-org/matrix-react-sdk/pull/10283)). Fixes vector-im/element-web#22873. Contributed by @luixxiul.
+ * Pillify http and non-prefixed matrix.to links ([\#10277](https://github.com/matrix-org/matrix-react-sdk/pull/10277)). Fixes vector-im/element-web#20844.
+ * Fix some features not being configurable via `features` ([\#10276](https://github.com/matrix-org/matrix-react-sdk/pull/10276)).
+ * Fix starting a DM from the right panel in some cases ([\#10278](https://github.com/matrix-org/matrix-react-sdk/pull/10278)). Fixes vector-im/element-web#24722.
+ * Align info EventTile and normal EventTile on IRC layout ([\#10197](https://github.com/matrix-org/matrix-react-sdk/pull/10197)). Fixes vector-im/element-web#22782. Contributed by @luixxiul.
+ * Fix blowout of waveform of the voice message player on narrow UI ([\#8861](https://github.com/matrix-org/matrix-react-sdk/pull/8861)). Fixes vector-im/element-web#22604. Contributed by @luixxiul.
+ * Fix the hidden view source toggle on IRC layout ([\#10266](https://github.com/matrix-org/matrix-react-sdk/pull/10266)). Fixes vector-im/element-web#22872. Contributed by @luixxiul.
+ * Fix buttons on the room header being compressed due to long room name ([\#10155](https://github.com/matrix-org/matrix-react-sdk/pull/10155)). Contributed by @luixxiul.
+ * Use the room avatar as a placeholder in calls ([\#10231](https://github.com/matrix-org/matrix-react-sdk/pull/10231)).
+ * Fix calls showing as 'connecting' after hangup ([\#10223](https://github.com/matrix-org/matrix-react-sdk/pull/10223)).
+ * Prevent multiple Jitsi calls started at the same time ([\#10183](https://github.com/matrix-org/matrix-react-sdk/pull/10183)). Fixes vector-im/element-web#23009.
+ * Make localization keys compatible with agglutinative and/or SOV type languages ([\#10159](https://github.com/matrix-org/matrix-react-sdk/pull/10159)). Contributed by @luixxiul.
+
+Changes in [3.67.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.67.0) (2023-02-28)
+=====================================================================================================
+
+## ✨ Features
  * Display "The sender has blocked you from receiving this message" error message instead of "Unable to decrypt message" ([\#10202](https://github.com/matrix-org/matrix-react-sdk/pull/10202)). Contributed by @florianduros.
  * Polls: show warning about undecryptable relations ([\#10179](https://github.com/matrix-org/matrix-react-sdk/pull/10179)). Contributed by @kerryarchibald.
  * Poll history: fetch last 30 days of polls ([\#10157](https://github.com/matrix-org/matrix-react-sdk/pull/10157)). Contributed by @kerryarchibald.
@@ -25,11 +55,7 @@ Changes in [3.67.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/
  * Render poll end events in timeline ([\#10027](https://github.com/matrix-org/matrix-react-sdk/pull/10027)). Contributed by @kerryarchibald.
 
 ## 🐛 Bug Fixes
- * Use the room avatar as a placeholder in calls ([\#10231](https://github.com/matrix-org/matrix-react-sdk/pull/10231)).
- * Fix calls showing as 'connecting' after hangup ([\#10223](https://github.com/matrix-org/matrix-react-sdk/pull/10223)).
  * Stop access token overflowing the box ([\#10069](https://github.com/matrix-org/matrix-react-sdk/pull/10069)). Fixes vector-im/element-web#24023. Contributed by @sbjaj33.
- * Prevent multiple Jitsi calls started at the same time ([\#10183](https://github.com/matrix-org/matrix-react-sdk/pull/10183)). Fixes vector-im/element-web#23009.
- * Make localization keys compatible with agglutinative and/or SOV type languages ([\#10159](https://github.com/matrix-org/matrix-react-sdk/pull/10159)). Contributed by @luixxiul.
  * Add link to next file in the export ([\#10190](https://github.com/matrix-org/matrix-react-sdk/pull/10190)). Fixes vector-im/element-web#20272. Contributed by @grimhilt.
  * Ended poll tiles: add ended the poll message ([\#10193](https://github.com/matrix-org/matrix-react-sdk/pull/10193)). Fixes vector-im/element-web#24579. Contributed by @kerryarchibald.
  * Fix accidentally inverted condition for room ordering ([\#10178](https://github.com/matrix-org/matrix-react-sdk/pull/10178)). Fixes vector-im/element-web#24527. Contributed by @justjanne.
diff --git a/cypress/e2e/create-room/create-room.spec.ts b/cypress/e2e/create-room/create-room.spec.ts
index 72805d5e12b..a51c22ef862 100644
--- a/cypress/e2e/create-room/create-room.spec.ts
+++ b/cypress/e2e/create-room/create-room.spec.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2022-2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -61,4 +61,31 @@ describe("Create Room", () => {
         cy.contains(".mx_RoomHeader_nametext", name);
         cy.contains(".mx_RoomHeader_topic", topic);
     });
+
+    it("should create a room with a long room name, which is displayed with ellipsis", () => {
+        let roomId: string;
+        const LONG_ROOM_NAME =
+            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " +
+            "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
+            "aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
+            "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " +
+            "officia deserunt mollit anim id est laborum.";
+
+        cy.createRoom({ name: LONG_ROOM_NAME }).then((_roomId) => {
+            roomId = _roomId;
+            cy.visit("/#/room/" + roomId);
+        });
+
+        // Wait until the room name is set
+        cy.get(".mx_RoomHeader_nametext").contains("Lorem ipsum");
+
+        // Make sure size of buttons on RoomHeader (except .mx_RoomHeader_name) are specified
+        // and the buttons are not compressed
+        // TODO: use a same class name
+        cy.get(".mx_RoomHeader_button").should("have.css", "height", "32px").should("have.css", "width", "32px");
+        cy.get(".mx_HeaderButtons > .mx_RightPanel_headerButton")
+            .should("have.css", "height", "32px")
+            .should("have.css", "width", "32px");
+        cy.get(".mx_RoomHeader").percySnapshotElement("Room header with a long room name");
+    });
 });
diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts
index 13e3c56abab..15b437d6211 100644
--- a/cypress/e2e/crypto/decryption-failure.spec.ts
+++ b/cypress/e2e/crypto/decryption-failure.spec.ts
@@ -118,7 +118,12 @@ describe("Decryption Failure Bar", () => {
                         "Verify this device to access all messages",
                     );
 
-                    cy.percySnapshot("DecryptionFailureBar prompts user to verify");
+                    cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
+                        "DecryptionFailureBar prompts user to verify",
+                        {
+                            widths: [320, 640],
+                        },
+                    );
 
                     cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist");
                     cy.contains(".mx_DecryptionFailureBar_button", "Verify").click();
@@ -146,8 +151,11 @@ describe("Decryption Failure Bar", () => {
                 "Open another device to load encrypted messages",
             );
 
-            cy.percySnapshot(
+            cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
                 "DecryptionFailureBar prompts user to open another device, with Resend Key Requests button",
+                {
+                    widths: [320, 640],
+                },
             );
 
             cy.intercept("/_matrix/client/r0/sendToDevice/m.room_key_request/*").as("keyRequest");
@@ -155,8 +163,11 @@ describe("Decryption Failure Bar", () => {
             cy.wait("@keyRequest");
             cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist");
 
-            cy.percySnapshot(
-                "DecryptionFailureBar prompts user to open another device, " + "without Resend Key Requests button",
+            cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
+                "DecryptionFailureBar prompts user to open another device, without Resend Key Requests button",
+                {
+                    widths: [320, 640],
+                },
             );
         },
     );
@@ -177,7 +188,9 @@ describe("Decryption Failure Bar", () => {
                 "Reset your keys to prevent future decryption errors",
             );
 
-            cy.percySnapshot("DecryptionFailureBar prompts user to reset keys");
+            cy.get(".mx_DecryptionFailureBar").percySnapshotElement("DecryptionFailureBar prompts user to reset keys", {
+                widths: [320, 640],
+            });
 
             cy.contains(".mx_DecryptionFailureBar_button", "Reset").click();
 
@@ -196,7 +209,12 @@ describe("Decryption Failure Bar", () => {
                 "Some messages could not be decrypted",
             );
 
-            cy.percySnapshot("DecryptionFailureBar displays general message with no call to action");
+            cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
+                "DecryptionFailureBar displays general message with no call to action",
+                {
+                    widths: [320, 640],
+                },
+            );
         },
     );
 
@@ -210,7 +228,10 @@ describe("Decryption Failure Bar", () => {
         cy.get(".mx_DecryptionFailureBar").should("exist");
         cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("exist");
 
-        cy.percySnapshot("DecryptionFailureBar displays loading spinner");
+        cy.get(".mx_DecryptionFailureBar").percySnapshotElement("DecryptionFailureBar displays loading spinner", {
+            allowSpinners: true,
+            widths: [320, 640],
+        });
 
         cy.wait(5000);
         cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("not.exist");
diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts
index 07a14533c70..b2537c2cbeb 100644
--- a/cypress/e2e/polls/polls.spec.ts
+++ b/cypress/e2e/polls/polls.spec.ts
@@ -20,7 +20,7 @@ import { HomeserverInstance } from "../../plugins/utils/homeserver";
 import { MatrixClient } from "../../global";
 import Chainable = Cypress.Chainable;
 
-const hideTimestampCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";
+const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
 
 describe("Polls", () => {
     let homeserver: HomeserverInstance;
@@ -133,7 +133,7 @@ describe("Polls", () => {
             .as("pollId");
 
         cy.get<string>("@pollId").then((pollId) => {
-            getPollTile(pollId).percySnapshotElement("Polls Timeline tile - no votes", { percyCSS: hideTimestampCSS });
+            getPollTile(pollId).percySnapshotElement("Polls Timeline tile - no votes", { percyCSS: hidePercyCSS });
 
             // Bot votes 'Maybe' in the poll
             botVoteForOption(bot, roomId, pollId, pollParams.options[2]);
diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts
index c6d2c298fed..2cae1a12184 100644
--- a/cypress/e2e/sliding-sync/sliding-sync.ts
+++ b/cypress/e2e/sliding-sync/sliding-sync.ts
@@ -356,7 +356,7 @@ describe("Sliding Sync", () => {
     });
 
     // Regression test for https://github.com/vector-im/element-web/issues/21462
-    it("should not cancel replies when permalinks are clicked ", () => {
+    it("should not cancel replies when permalinks are clicked", () => {
         cy.get<string>("@roomId").then((roomId) => {
             // we require a first message as you cannot click the permalink text with the avatar in the way
             return cy
diff --git a/cypress/e2e/spotlight/spotlight.spec.ts b/cypress/e2e/spotlight/spotlight.spec.ts
index d9ead17bb3b..d8453b9d993 100644
--- a/cypress/e2e/spotlight/spotlight.spec.ts
+++ b/cypress/e2e/spotlight/spotlight.spec.ts
@@ -24,7 +24,7 @@ import Timeoutable = Cypress.Timeoutable;
 import Withinable = Cypress.Withinable;
 import Shadow = Cypress.Shadow;
 
-export enum Filter {
+enum Filter {
     People = "people",
     PublicRooms = "public_rooms",
 }
@@ -297,27 +297,28 @@ describe("Spotlight", () => {
 
     // TODO: We currently can’t test finding rooms on other homeservers/other protocols
     // We obviously don’t have federation or bridges in cypress tests
-    /*
-    const room3Name = "Matrix HQ";
-    const room3Id = "#matrix:matrix.org";
-
-    it("should find unknown public rooms on other homeservers", () => {
-        cy.openSpotlightDialog().within(() => {
-            cy.spotlightFilter(Filter.PublicRooms);
-            cy.spotlightSearch().clear().type(room3Name);
-            cy.get("[aria-haspopup=true][role=button]").click();
-        }).then(() => {
-            cy.contains(".mx_GenericDropdownMenu_Option--header", "matrix.org")
-                .next("[role=menuitemradio]")
-                .click();
-            cy.wait(3_600_000);
-        }).then(() => cy.spotlightDialog().within(() => {
-            cy.spotlightResults().should("have.length", 1);
-            cy.spotlightResults().eq(0).should("contain", room3Name);
-            cy.spotlightResults().eq(0).should("contain", room3Id);
-        }));
+    it.skip("should find unknown public rooms on other homeservers", () => {
+        cy.openSpotlightDialog()
+            .within(() => {
+                cy.spotlightFilter(Filter.PublicRooms);
+                cy.spotlightSearch().clear().type(room3Name);
+                cy.get("[aria-haspopup=true][role=button]").click();
+            })
+            .then(() => {
+                cy.contains(".mx_GenericDropdownMenu_Option--header", "matrix.org")
+                    .next("[role=menuitemradio]")
+                    .click();
+                cy.wait(3_600_000);
+            })
+            .then(() =>
+                cy.spotlightDialog().within(() => {
+                    cy.spotlightResults().should("have.length", 1);
+                    cy.spotlightResults().eq(0).should("contain", room3Name);
+                    cy.spotlightResults().eq(0).should("contain", room3Id);
+                }),
+            );
     });
-    */
+
     it("should find known people", () => {
         cy.openSpotlightDialog()
             .within(() => {
diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts
index d946ad34dac..c1af15d2b07 100644
--- a/cypress/e2e/threads/threads.spec.ts
+++ b/cypress/e2e/threads/threads.spec.ts
@@ -18,6 +18,8 @@ limitations under the License.
 
 import { HomeserverInstance } from "../../plugins/utils/homeserver";
 import { MatrixClient } from "../../global";
+import { SettingLevel } from "../../../src/settings/SettingLevel";
+import { Layout } from "../../../src/settings/enums/Layout";
 
 describe("Threads", () => {
     let homeserver: HomeserverInstance;
@@ -54,9 +56,25 @@ describe("Threads", () => {
             cy.visit("/#/room/" + roomId);
         });
 
+        // Around 200 characters
+        const MessageLong =
+            "Hello there. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt " +
+            "ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi";
+
+        // --MessageTimestamp-color = #acacac = rgb(172, 172, 172)
+        // See: _MessageTimestamp.pcss
+        const MessageTimestampColor = "rgb(172, 172, 172)";
+
         // User sends message
         cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}");
 
+        // Check the colour of timestamp on the main timeline
+        cy.get(".mx_RoomView_body .mx_EventTile_last .mx_EventTile_line .mx_MessageTimestamp").should(
+            "have.css",
+            "color",
+            MessageTimestampColor,
+        );
+
         // Wait for message to send, get its ID and save as @threadId
         cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
             .invoke("attr", "data-scroll-tokens")
@@ -65,7 +83,8 @@ describe("Threads", () => {
         // Bot starts thread
         cy.get<string>("@threadId").then((threadId) => {
             bot.sendMessage(roomId, threadId, {
-                body: "Hello there",
+                // Send a message long enough to be wrapped to check if avatars inside the ReadReceiptGroup are visible
+                body: MessageLong,
                 msgtype: "m.text",
             });
         });
@@ -75,9 +94,41 @@ describe("Threads", () => {
         cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Hello there");
         cy.get(".mx_RoomView_body .mx_ThreadSummary").click();
 
+        cy.get(".mx_ThreadView .mx_EventTile[data-layout='group'].mx_EventTile_last").within(() => {
+            // Wait until the messages are rendered
+            cy.get(".mx_EventTile_line .mx_MTextBody").should("have.text", MessageLong);
+
+            // Make sure the avatar inside ReadReceiptGroup is visible on the group layout
+            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
+        });
+
+        // Enable the bubble layout
+        cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
+
+        cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble'].mx_EventTile_last").within(() => {
+            // TODO: remove this after fixing the issue of ReadReceiptGroup being hidden on the bubble layout
+            // See: https://github.com/vector-im/element-web/issues/23569
+            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("exist");
+
+            // Make sure the avatar inside ReadReceiptGroup is visible on bubble layout
+            // TODO: enable this after fixing the issue of ReadReceiptGroup being hidden on the bubble layout
+            // See: https://github.com/vector-im/element-web/issues/23569
+            // cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
+        });
+
+        // Re-enable the group layout
+        cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group);
+
         // User responds in thread
         cy.get(".mx_ThreadView .mx_BasicMessageComposer_input").type("Test{enter}");
 
+        // Check the colour of timestamp on EventTile in a thread (mx_ThreadView)
+        cy.get(".mx_ThreadView .mx_EventTile_last[data-layout='group'] .mx_EventTile_line .mx_MessageTimestamp").should(
+            "have.css",
+            "color",
+            MessageTimestampColor,
+        );
+
         // User asserts summary was updated correctly
         cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "Tom");
         cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Test");
@@ -130,6 +181,10 @@ describe("Threads", () => {
         cy.get(".mx_ThreadPanel .mx_EventTile_last").within(() => {
             cy.get(".mx_EventTile_body").should("contain", "Hello Mr. Bot");
             cy.get(".mx_ThreadSummary_content").should("contain", "How are things?");
+
+            // Check the colour of timestamp on thread list
+            cy.get(".mx_EventTile_details .mx_MessageTimestamp").should("have.css", "color", MessageTimestampColor);
+
             // User opens thread via threads list
             cy.get(".mx_EventTile_line").click();
         });
diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts
index bef1cd0393c..3876e457b56 100644
--- a/cypress/e2e/timeline/timeline.spec.ts
+++ b/cypress/e2e/timeline/timeline.spec.ts
@@ -159,8 +159,8 @@ describe("Timeline", () => {
                     ".mx_GenericEventListSummary_summary",
                 "created and configured the room.",
             ).should("exist");
-            cy.get(".mx_Spinner").should("not.exist");
-            cy.percySnapshot("Configured room on IRC layout");
+
+            cy.get(".mx_MainSplit").percySnapshotElement("Configured room on IRC layout");
         });
 
         it("should add inline start margin to an event line on IRC layout", () => {
@@ -179,20 +179,128 @@ describe("Timeline", () => {
             // Check the event line has margin instead of inset property
             // cf. _EventTile.pcss
             //  --EventTile_irc_line_info-margin-inline-start
-            //  = calc(var(--name-width) + 10px + var(--icon-width))
-            //  = 80 + 10 + 14 = 104px
+            //  = calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding))
+            //  = 80 + 14 + 5 = 99px
+
             cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line")
-                .should("have.css", "margin-inline-start", "104px")
+                .should("have.css", "margin-inline-start", "99px")
                 .should("have.css", "inset-inline-start", "0px");
 
-            cy.get(".mx_Spinner").should("not.exist");
-            // Exclude timestamp from snapshot
-            const percyCSS =
-                ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp " + "{ visibility: hidden !important; }";
-            cy.percySnapshot("Event line with inline start margin on IRC layout", { percyCSS });
+            // Exclude timestamp and read marker from snapshot
+            const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
+            cy.get(".mx_MainSplit").percySnapshotElement("Event line with inline start margin on IRC layout", {
+                percyCSS,
+            });
             cy.checkA11y();
         });
 
+        it("should align generic event list summary with messages and emote on IRC layout", () => {
+            // This test aims to check:
+            // 1. Alignment of collapsed GELS (generic event list summary) and messages
+            // 2. Alignment of expanded GELS and messages
+            // 3. Alignment of expanded GELS and placeholder of deleted message
+            // 4. Alignment of expanded GELS, placeholder of deleted message, and emote
+
+            // Exclude timestamp from snapshot of mx_MainSplit
+            const percyCSS = ".mx_MainSplit .mx_MessageTimestamp { visibility: hidden !important; }";
+
+            cy.visit("/#/room/" + roomId);
+            cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
+
+            // Wait until configuration is finished
+            cy.contains(
+                ".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
+                "created and configured the room.",
+            ).should("exist");
+
+            // Send messages
+            cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}");
+            cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello again, Mr. Bot{enter}");
+            // Make sure the second message was sent
+            cy.get(".mx_RoomView_MessageList > .mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible");
+
+            // 1. Alignment of collapsed GELS (generic event list summary) and messages
+            // Check inline start spacing of collapsed GELS
+            // See: _EventTile.pcss
+            // .mx_GenericEventListSummary[data-layout="irc"] > .mx_EventTile_line
+            //  = var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding)
+            //  = 80 + 14 + 46 + 2 * 5
+            //  = 150px
+            cy.get(".mx_GenericEventListSummary[data-layout=irc] > .mx_EventTile_line").should(
+                "have.css",
+                "padding-inline-start",
+                "150px",
+            );
+            // Check width and spacing values of elements in .mx_EventTile, which should be equal to 150px
+            // --right-padding should be applied
+            cy.get(".mx_EventTile > *").should("have.css", "margin-right", "5px");
+            // --name-width width zero inline end margin should be applied
+            cy.get(".mx_EventTile .mx_DisambiguatedProfile")
+                .should("have.css", "width", "80px")
+                .should("have.css", "margin-inline-end", "0px");
+            // --icon-width should be applied
+            cy.get(".mx_EventTile .mx_EventTile_avatar > .mx_BaseAvatar").should("have.css", "width", "14px");
+            // $MessageTimestamp_width should be applied
+            cy.get(".mx_EventTile > a").should("have.css", "min-width", "46px");
+            // Record alignment of collapsed GELS and messages on messagePanel
+            cy.get(".mx_MainSplit").percySnapshotElement("Collapsed GELS and messages on IRC layout", { percyCSS });
+
+            // 2. Alignment of expanded GELS and messages
+            // Click "expand" link button
+            cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click();
+            // Check inline start spacing of info line on expanded GELS
+            cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line")
+                // See: _EventTile.pcss
+                // --EventTile_irc_line_info-margin-inline-start
+                // = 80 + 14 + 1 * 5
+                .should("have.css", "margin-inline-start", "99px");
+            // Record alignment of expanded GELS and messages on messagePanel
+            cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS and messages on IRC layout", { percyCSS });
+
+            // 3. Alignment of expanded GELS and placeholder of deleted message
+            // Delete the second (last) message
+            cy.get(".mx_RoomView_MessageList > .mx_EventTile_last").realHover();
+            cy.get(".mx_RoomView_MessageList > .mx_EventTile_last .mx_MessageActionBar_optionsButton", {
+                timeout: 1000,
+            })
+                .should("exist")
+                .realHover()
+                .click({ force: false });
+            cy.get(".mx_IconizedContextMenu_item[aria-label=Remove]").should("be.visible").click({ force: false });
+            // Confirm deletion
+            cy.get(".mx_Dialog_buttons button[data-testid=dialog-primary-button]")
+                .should("have.text", "Remove")
+                .click({ force: false });
+            // Make sure the dialog was closed and the second (last) message was redacted
+            cy.get(".mx_Dialog").should("not.exist");
+            cy.get(".mx_GenericEventListSummary .mx_EventTile_last .mx_RedactedBody").should("be.visible");
+            cy.get(".mx_GenericEventListSummary .mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible");
+            // Record alignment of expanded GELS and placeholder of deleted message on messagePanel
+            cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS and with placeholder of deleted message", {
+                percyCSS,
+            });
+
+            // 4. Alignment of expanded GELS, placeholder of deleted message, and emote
+            // Send a emote
+            cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("/me says hello to Mr. Bot{enter}");
+            // Check inline start margin of its avatar
+            // Here --right-padding is for the avatar on the message line
+            // See: _IRCLayout.pcss
+            // .mx_IRCLayout .mx_EventTile_emote .mx_EventTile_avatar
+            // = calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding))
+            // = 80 + 14 + 1 * 5
+            cy.get(".mx_EventTile_emote .mx_EventTile_avatar").should("have.css", "margin-left", "99px");
+            // Make sure emote was sent
+            cy.get(".mx_EventTile_last.mx_EventTile_emote .mx_EventTile_receiptSent").should("be.visible");
+            // Record alignment of expanded GELS, placeholder of deleted message, and emote
+            cy.get(".mx_MainSplit").percySnapshotElement(
+                "Expanded GELS and with emote and placeholder of deleted message",
+                {
+                    percyCSS,
+                },
+            );
+        });
+
         it("should set inline start padding to a hidden event line", () => {
             sendEvent(roomId);
             cy.visit("/#/room/" + roomId);
@@ -212,9 +320,8 @@ describe("Timeline", () => {
             // Click timestamp to highlight hidden event line
             cy.get(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click();
 
-            // Exclude timestamp from snapshot
-            const percyCSS =
-                ".mx_RoomView_body .mx_EventTile .mx_MessageTimestamp " + "{ visibility: hidden !important; }";
+            // Exclude timestamp and read marker from snapshot
+            const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
 
             // should not add inline start padding to a hidden event line on IRC layout
             cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
@@ -223,17 +330,30 @@ describe("Timeline", () => {
                 "padding-inline-start",
                 "0px",
             );
-            cy.percySnapshot("Hidden event line with zero padding on IRC layout", { percyCSS });
+
+            cy.get(".mx_MainSplit").percySnapshotElement("Hidden event line with zero padding on IRC layout", {
+                percyCSS,
+            });
 
             // should add inline start padding to a hidden event line on modern layout
             cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group);
             cy.get(".mx_EventTile[data-layout=group].mx_EventTile_info .mx_EventTile_line")
                 // calc(var(--EventTile_group_line-spacing-inline-start) + 20px) = 64 + 20 = 84px
                 .should("have.css", "padding-inline-start", "84px");
-            cy.percySnapshot("Hidden event line with padding on modern layout", { percyCSS });
+
+            cy.get(".mx_MainSplit").percySnapshotElement("Hidden event line with padding on modern layout", {
+                percyCSS,
+            });
         });
 
-        it("should click top left of view source event toggle", () => {
+        it("should click view source event toggle", () => {
+            // This test checks:
+            // 1. clickability of top left of view source event toggle
+            // 2. clickability of view source toggle on IRC layout
+
+            // Exclude timestamp from snapshot
+            const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";
+
             sendEvent(roomId);
             cy.visit("/#/room/" + roomId);
             cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);
@@ -249,8 +369,47 @@ describe("Timeline", () => {
             });
             cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit").should("exist");
 
+            // 1. clickability of top left of view source event toggle
+
             // Click top left of the event toggle, which should not be covered by MessageActionBar's safe area
-            cy.get(".mx_EventTile:not(:first-child) .mx_ViewSourceEvent")
+            cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent")
+                .should("exist")
+                .realHover()
+                .within(() => {
+                    cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false });
+                });
+
+            // Make sure the expand toggle works
+            cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent_expanded")
+                .should("be.visible")
+                .realHover()
+                .within(() => {
+                    cy.get(".mx_ViewSourceEvent_toggle")
+                        // Check size and position of toggle on expanded view source event
+                        // See: _ViewSourceEvent.pcss
+                        .should("have.css", "height", "12px") // --ViewSourceEvent_toggle-size
+                        .should("have.css", "align-self", "flex-end")
+
+                        // Click again to collapse the source
+                        .click("topLeft", { force: false });
+                });
+
+            // Make sure the collapse toggle works
+            cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent_expanded").should("not.exist");
+
+            // 2. clickability of view source toggle on IRC layout
+
+            // Enable IRC layout
+            cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
+
+            // Hover the view source toggle on IRC layout
+            cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent")
+                .should("exist")
+                .realHover()
+                .percySnapshotElement("Hovered hidden event line on IRC layout", { percyCSS });
+
+            // Click view source event toggle
+            cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent")
                 .should("exist")
                 .realHover()
                 .within(() => {
@@ -258,7 +417,7 @@ describe("Timeline", () => {
                 });
 
             // Make sure the expand toggle worked
-            cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("be.visible");
+            cy.get(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded").should("be.visible");
         });
 
         it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => {
@@ -329,7 +488,11 @@ describe("Timeline", () => {
             cy.wait("@mxc");
 
             cy.checkA11y();
+
+            // Exclude timestamp and read marker from snapshot
+            const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
             cy.get(".mx_EventTile_last").percySnapshotElement("URL Preview", {
+                percyCSS,
                 widths: [800, 400],
             });
         });
diff --git a/cypress/e2e/widgets/stickers.spec.ts b/cypress/e2e/widgets/stickers.spec.ts
index 5c016b406a9..27986af10e7 100644
--- a/cypress/e2e/widgets/stickers.spec.ts
+++ b/cypress/e2e/widgets/stickers.spec.ts
@@ -133,6 +133,7 @@ describe("Stickers", () => {
                     type: "m.stickerpicker",
                     name: STICKER_PICKER_WIDGET_NAME,
                     url: stickerPickerUrl,
+                    creatorUserId: "@userId",
                 },
                 id: STICKER_PICKER_WIDGET_ID,
             },
diff --git a/cypress/support/percy.ts b/cypress/support/percy.ts
index f5e30a58fcb..9183d5ebf6b 100644
--- a/cypress/support/percy.ts
+++ b/cypress/support/percy.ts
@@ -22,6 +22,7 @@ declare global {
     namespace Cypress {
         interface SnapshotOptions extends PercySnapshotOptions {
             domTransformation?: (documentClone: Document) => void;
+            allowSpinners?: boolean;
         }
 
         interface Chainable {
@@ -38,6 +39,12 @@ declare global {
 }
 
 Cypress.Commands.add("percySnapshotElement", { prevSubject: "element" }, (subject, name, options) => {
+    if (!options?.allowSpinners) {
+        // Await spinners to vanish
+        cy.get(".mx_Spinner", { log: false }).should("not.exist");
+        // But like really no more spinners please
+        cy.get(".mx_Spinner", { log: false }).should("not.exist");
+    }
     cy.percySnapshot(name, {
         domTransformation: (documentClone) => scope(documentClone, subject.selector),
         ...options,
diff --git a/package.json b/package.json
index 3642474ee7d..40152a0a353 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "matrix-react-sdk",
-    "version": "3.67.0",
+    "version": "3.68.0",
     "description": "SDK for matrix.org using React",
     "author": "matrix.org",
     "repository": {
@@ -54,11 +54,15 @@
         "test:cypress:open": "cypress open",
         "coverage": "yarn test --coverage"
     },
+    "resolutions": {
+        "@types/react-dom": "17.0.19",
+        "@types/react": "17.0.53"
+    },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@matrix-org/analytics-events": "^0.4.0",
+        "@matrix-org/analytics-events": "^0.5.0",
         "@matrix-org/matrix-wysiwyg": "^1.1.1",
-        "@matrix-org/react-sdk-module-api": "^0.0.3",
+        "@matrix-org/react-sdk-module-api": "^0.0.4",
         "@sentry/browser": "^7.0.0",
         "@sentry/tracing": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
@@ -75,7 +79,7 @@
         "emojibase-regex": "6.0.1",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
-        "filesize": "10.0.5",
+        "filesize": "10.0.6",
         "flux": "4.0.3",
         "focus-visible": "^5.2.0",
         "gfm.css": "^1.1.2",
@@ -93,26 +97,26 @@
         "maplibre-gl": "^2.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "23.4.0",
+        "matrix-js-sdk": "23.5.0",
         "matrix-widget-api": "^1.1.1",
         "minimist": "^1.2.5",
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "parse5": "^6.0.1",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.36.0",
+        "posthog-js": "1.50.3",
         "qrcode": "1.5.1",
         "re-resizable": "^6.9.0",
         "react": "17.0.2",
         "react-beautiful-dnd": "^13.1.0",
-        "react-blurhash": "^0.2.0",
+        "react-blurhash": "^0.3.0",
         "react-dom": "17.0.2",
         "react-focus-lock": "^2.5.1",
         "react-lite-youtube-embed": "^2.3.52",
         "react-transition-group": "^4.4.1",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.8.0",
+        "sanitize-html": "2.10.0",
         "tar-js": "^0.3.0",
         "ua-parser-js": "^1.0.2",
         "url": "^0.11.0",
@@ -144,12 +148,10 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^12.1.5",
         "@testing-library/user-event": "^14.4.3",
-        "@types/classnames": "^2.2.11",
         "@types/commonmark": "^0.27.4",
         "@types/counterpart": "^0.18.1",
         "@types/css-font-loading-module": "^0.0.7",
         "@types/diff-match-patch": "^1.0.32",
-        "@types/enzyme": "^3.10.9",
         "@types/escape-html": "^1.0.1",
         "@types/file-saver": "^2.0.3",
         "@types/flux": "^3.1.9",
@@ -165,9 +167,9 @@
         "@types/pako": "^2.0.0",
         "@types/parse5": "^6.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "17.0.49",
+        "@types/react": "17.0.53",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "17.0.17",
+        "@types/react-dom": "17.0.19",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.8.0",
         "@types/tar-js": "^0.3.2",
@@ -175,7 +177,6 @@
         "@types/zxcvbn": "^4.4.0",
         "@typescript-eslint/eslint-plugin": "^5.35.1",
         "@typescript-eslint/parser": "^5.6.0",
-        "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
         "allchange": "^1.1.0",
         "axe-core": "4.4.3",
         "babel-jest": "^29.0.0",
@@ -185,15 +186,14 @@
         "cypress-axe": "^1.0.0",
         "cypress-multi-reporters": "^1.6.1",
         "cypress-real-events": "^1.7.1",
-        "enzyme": "^3.11.0",
-        "enzyme-to-json": "^3.6.2",
-        "eslint": "8.28.0",
+        "eslint": "8.35.0",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-deprecate": "^0.7.0",
         "eslint-plugin-import": "^2.25.4",
+        "eslint-plugin-jest": "^27.2.1",
         "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-matrix-org": "0.10.0",
+        "eslint-plugin-matrix-org": "1.1.0",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
         "eslint-plugin-unicorn": "^45.0.0",
@@ -210,20 +210,17 @@
         "mocha-junit-reporter": "^2.2.0",
         "node-fetch": "2",
         "postcss-scss": "^4.0.4",
-        "prettier": "2.8.0",
+        "prettier": "2.8.4",
         "raw-loader": "^4.0.2",
-        "rimraf": "^3.0.2",
-        "stylelint": "^14.9.1",
+        "rimraf": "^4.0.0",
+        "stylelint": "^15.0.0",
         "stylelint-config-prettier": "^9.0.4",
-        "stylelint-config-standard": "^29.0.0",
+        "stylelint-config-standard": "^30.0.0",
         "stylelint-scss": "^4.2.0",
-        "typescript": "4.9.3",
+        "typescript": "4.9.5",
         "walk": "^2.3.14"
     },
     "jest": {
-        "snapshotSerializers": [
-            "enzyme-to-json/serializer"
-        ],
         "testEnvironment": "jsdom",
         "testMatch": [
             "<rootDir>/test/**/*-test.[jt]s?(x)"
diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index f1f15287d5e..367684b9331 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -17,6 +17,7 @@
 @import "./components/views/beacon/_ShareLatestLocation.pcss";
 @import "./components/views/beacon/_StyledLiveBeaconIcon.pcss";
 @import "./components/views/context_menus/_KebabContextMenu.pcss";
+@import "./components/views/dialogs/polls/_PollDetailHeader.pcss";
 @import "./components/views/dialogs/polls/_PollListItem.pcss";
 @import "./components/views/dialogs/polls/_PollListItemEnded.pcss";
 @import "./components/views/elements/_FilterDropdown.pcss";
@@ -135,7 +136,6 @@
 @import "./views/dialogs/_FeedbackDialog.pcss";
 @import "./views/dialogs/_ForwardDialog.pcss";
 @import "./views/dialogs/_GenericFeatureFeedbackDialog.pcss";
-@import "./views/dialogs/_HostSignupDialog.pcss";
 @import "./views/dialogs/_IncomingSasDialog.pcss";
 @import "./views/dialogs/_InviteDialog.pcss";
 @import "./views/dialogs/_JoinRuleDropdown.pcss";
diff --git a/src/components/views/dialogs/IDialogProps.ts b/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
similarity index 66%
rename from src/components/views/dialogs/IDialogProps.ts
rename to res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
index b294fdafe19..6f29b6e08fd 100644
--- a/src/components/views/dialogs/IDialogProps.ts
+++ b/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,6 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export interface IDialogProps {
-    onFinished(...args: any): void;
+.mx_PollDetailHeader {
+    // override accessiblebutton style
+    font-size: $font-15px !important;
+}
+
+.mx_PollDetailHeader_icon {
+    height: 15px;
+    width: 15px;
+    margin-right: $spacing-8;
+    vertical-align: middle;
 }
diff --git a/res/css/components/views/dialogs/polls/_PollListItem.pcss b/res/css/components/views/dialogs/polls/_PollListItem.pcss
index 7b19e675943..d6036fa3787 100644
--- a/res/css/components/views/dialogs/polls/_PollListItem.pcss
+++ b/res/css/components/views/dialogs/polls/_PollListItem.pcss
@@ -16,12 +16,17 @@ limitations under the License.
 
 .mx_PollListItem {
     width: 100%;
+}
+
+.mx_PollListItem_content {
+    width: 100%;
     display: grid;
     justify-content: left;
     align-items: center;
     grid-gap: $spacing-8;
     grid-template-columns: auto auto auto;
     grid-template-rows: auto;
+    cursor: pointer;
 
     color: $primary-content;
 }
diff --git a/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss b/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss
index 6518052ab61..16ea5dcce07 100644
--- a/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss
+++ b/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss
@@ -16,9 +16,14 @@ limitations under the License.
 
 .mx_PollListItemEnded {
     width: 100%;
+}
+
+.mx_PollListItemEnded_content {
+    width: 100%;
     display: flex;
     flex-direction: column;
     color: $primary-content;
+    cursor: pointer;
 }
 
 .mx_PollListItemEnded_title {
diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss
index 434d8629e9b..177e367b58f 100644
--- a/res/css/structures/_RightPanel.pcss
+++ b/res/css/structures/_RightPanel.pcss
@@ -48,6 +48,9 @@ limitations under the License.
     align-items: center;
 }
 
+/* See: mx_RoomHeader_button, of which this is a copy.
+ * TODO: factor out a common component to avoid this duplication.
+ */
 .mx_RightPanel_headerButton {
     cursor: pointer;
     flex: 0 0 auto;
diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
index ef5d47e1cd4..8536ff90bf1 100644
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@@ -111,12 +111,6 @@ $activeBorderColor: $primary-content;
 
     .mx_SpaceItem_new {
         position: relative;
-
-        .mx_BetaDot {
-            position: absolute;
-            left: 33px;
-            top: -5px;
-        }
     }
 
     .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss
index 6be33771af1..f9b399a3074 100644
--- a/res/css/structures/_UserMenu.pcss
+++ b/res/css/structures/_UserMenu.pcss
@@ -150,12 +150,8 @@ limitations under the License.
             justify-content: center;
         }
 
-        &.mx_UserMenu_contextMenu_guestPrompts,
-        &.mx_UserMenu_contextMenu_hostingLink {
-            padding-top: 0;
-        }
-
         &.mx_UserMenu_contextMenu_guestPrompts {
+            padding-top: 0;
             display: inline-block;
 
             > span {
@@ -198,10 +194,6 @@ limitations under the License.
         mask-image: url("$(res)/img/element-icons/roomlist/dnd-cross.svg");
     }
 
-    .mx_UserMenu_iconHosting::before {
-        mask-image: url("$(res)/img/element-icons/brands/element.svg");
-    }
-
     .mx_UserMenu_iconBell::before {
         mask-image: url("$(res)/img/element-icons/notifications.svg");
     }
diff --git a/res/css/views/audio_messages/_PlaybackContainer.pcss b/res/css/views/audio_messages/_PlaybackContainer.pcss
index d2c101658c8..67b311e9674 100644
--- a/res/css/views/audio_messages/_PlaybackContainer.pcss
+++ b/res/css/views/audio_messages/_PlaybackContainer.pcss
@@ -29,6 +29,11 @@ limitations under the License.
 
     contain: content;
 
+    .mx_Waveform,
+    .mx_RecordingPlayback_timelineLayoutMiddle {
+        min-width: 0; /* Prevent a blowout */
+    }
+
     /* Waveforms are present in live recording only */
     .mx_Waveform {
         .mx_Waveform_bar {
diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss
index 0f8d8a66e73..e4e4db01e56 100644
--- a/res/css/views/beta/_BetaCard.pcss
+++ b/res/css/views/beta/_BetaCard.pcss
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_BetaCard {
-    margin-bottom: 20px;
-    padding: 24px;
+    margin-bottom: $spacing-20;
+    padding: $spacing-24;
     background-color: $system;
     border-radius: 8px;
     box-sizing: border-box;
@@ -25,7 +25,7 @@ limitations under the License.
     .mx_BetaCard_columns {
         display: flex;
         flex-flow: wrap;
-        gap: 20px;
+        gap: $spacing-20;
         justify-content: center;
 
         .mx_BetaCard_columns_description {
@@ -36,11 +36,11 @@ limitations under the License.
                 font-size: $font-18px;
                 line-height: $font-22px;
                 color: $primary-content;
-                margin: 4px 0 14px;
+                margin: $spacing-4 0 14px; // TODO: use a spacing variable
 
                 display: flex;
                 align-items: center;
-                column-gap: 12px;
+                column-gap: $spacing-12;
             }
 
             .mx_BetaCard_caption {
@@ -78,7 +78,7 @@ limitations under the License.
                 line-height: $font-15px;
 
                 > h4 {
-                    margin: 12px 0 0;
+                    margin: $spacing-12 0 0;
                 }
 
                 > p {
@@ -102,13 +102,13 @@ limitations under the License.
 
     .mx_BetaCard_relatedSettings {
         .mx_SettingsFlag {
-            margin: 16px 0 0;
+            margin: $spacing-16 0 0;
             font-size: $font-15px;
             line-height: $font-24px;
             color: $primary-content;
 
             .mx_SettingsFlag_microcopy {
-                margin-top: 4px;
+                margin-top: $spacing-4;
                 font-size: $font-12px;
                 line-height: $font-15px;
             }
@@ -122,10 +122,10 @@ limitations under the License.
 
 .mx_BetaCard_betaPill {
     background-color: $accent-alt;
-    padding: 4px 10px;
+    padding: $spacing-4 10px; // TODO: use a spacing variable
     border-radius: 8px;
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: $font-12px;
     font-weight: $font-semi-bold;
     line-height: 15px;
     color: $button-primary-fg-color;
@@ -137,64 +137,3 @@ limitations under the License.
         cursor: pointer;
     }
 }
-
-$pulse-color: $accent-alt;
-$dot-size: 12px;
-
-.mx_BetaDot {
-    border-radius: 50%;
-    margin: 10px;
-    height: $dot-size;
-    width: $dot-size;
-    transform: scale(1);
-    background: rgba($pulse-color, 1);
-    animation: mx_Beta_bluePulse 2s infinite;
-    animation-iteration-count: 20;
-    position: relative;
-    pointer-events: none;
-
-    &::after {
-        content: "";
-        position: absolute;
-        width: inherit;
-        height: inherit;
-        top: 0;
-        left: 0;
-        transform: scale(1);
-        transform-origin: center center;
-        animation-name: mx_Beta_bluePulse_shadow;
-        animation-duration: inherit;
-        animation-iteration-count: inherit;
-        border-radius: 50%;
-        background: rgba($pulse-color, 1);
-    }
-}
-
-@keyframes mx_Beta_bluePulse {
-    0% {
-        transform: scale(0.95);
-    }
-
-    70% {
-        transform: scale(1);
-    }
-
-    100% {
-        transform: scale(0.95);
-    }
-}
-
-@keyframes mx_Beta_bluePulse_shadow {
-    0% {
-        opacity: 0.7;
-    }
-
-    70% {
-        transform: scale(2.2);
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
diff --git a/res/css/views/dialogs/_HostSignupDialog.pcss b/res/css/views/dialogs/_HostSignupDialog.pcss
deleted file mode 100644
index 15c383f1e84..00000000000
--- a/res/css/views/dialogs/_HostSignupDialog.pcss
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_HostSignupDialog {
-    width: 90vw;
-    max-width: 580px;
-    height: 80vh;
-    max-height: 600px;
-    /* Ensure dialog borders are always white as the HostSignupDialog */
-    /* does not yet support dark mode or theming in general. */
-    /* In the future we might want to pass the theme to the called */
-    /* iframe, should some hosting provider have that need. */
-    background-color: #ffffff;
-
-    .mx_HostSignupDialog_info {
-        text-align: center;
-
-        .mx_HostSignupDialog_content_top {
-            margin-bottom: 24px;
-        }
-
-        .mx_HostSignupDialog_paragraphs {
-            text-align: left;
-            padding-left: 25%;
-            padding-right: 25%;
-        }
-
-        .mx_HostSignupDialog_buttons {
-            margin-bottom: 24px;
-            display: flex;
-            justify-content: center;
-
-            button {
-                padding: 12px;
-                margin: 0 16px;
-            }
-        }
-
-        .mx_HostSignupDialog_footer {
-            display: flex;
-            justify-content: center;
-            align-items: baseline;
-
-            img {
-                padding-right: 5px;
-            }
-        }
-    }
-
-    iframe {
-        width: 100%;
-        height: 100%;
-        border: none;
-        background-color: #fff;
-        min-height: 540px;
-    }
-}
-
-.mx_HostSignupDialog_text_dark {
-    color: $primary-content;
-}
-
-.mx_HostSignupDialog_text_light {
-    color: $secondary-content;
-}
-
-.mx_HostSignup_maximize_button {
-    mask: url("$(res)/img/element-icons/maximise-expand.svg");
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: cover;
-    width: 14px;
-    height: 14px;
-    background-color: $dialog-close-fg-color;
-    cursor: pointer;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-}
-
-.mx_HostSignup_minimize_button {
-    mask: url("$(res)/img/element-icons/minimise-collapse.svg");
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: cover;
-    width: 14px;
-    height: 14px;
-    background-color: $dialog-close-fg-color;
-    cursor: pointer;
-    position: absolute;
-    top: 10px;
-    right: 25px;
-}
-
-.mx_HostSignupDialog_minimized {
-    position: fixed;
-    bottom: 80px;
-    right: 26px;
-    width: 314px;
-    height: 217px;
-    overflow: hidden;
-
-    &.mx_Dialog {
-        padding: 12px;
-    }
-
-    .mx_Dialog_title {
-        text-align: left !important;
-        padding-left: 20px;
-        font-size: $font-15px;
-    }
-
-    iframe {
-        width: 100%;
-        height: 100%;
-        border: none;
-        background-color: #fff;
-    }
-}
diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss
index 581d4f1de03..d2db7fa163d 100644
--- a/res/css/views/dialogs/_InviteDialog.pcss
+++ b/res/css/views/dialogs/_InviteDialog.pcss
@@ -452,3 +452,8 @@ limitations under the License.
 .mx_InviteDialog_identityServer {
     margin-top: 1em; /* TODO: Use a spacing variable */
 }
+
+.mx_InviteDialog_oneThreepid {
+    font-size: $font-12px;
+    margin: $spacing-8 0;
+}
diff --git a/res/css/views/dialogs/polls/_PollHistoryList.pcss b/res/css/views/dialogs/polls/_PollHistoryList.pcss
index ee6f0254f71..be6ca7423af 100644
--- a/res/css/views/dialogs/polls/_PollHistoryList.pcss
+++ b/res/css/views/dialogs/polls/_PollHistoryList.pcss
@@ -41,10 +41,20 @@ limitations under the License.
 .mx_PollHistoryList_noResults {
     height: 100%;
     width: 100%;
+    box-sizing: border-box;
+    padding: 0 $spacing-64;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+    text-align: center;
+
+    line-height: $font-24px;
     color: $secondary-content;
+
+    .mx_PollHistoryList_loadMorePolls {
+        margin-top: $spacing-16;
+    }
 }
 
 .mx_PollHistoryList_loading {
@@ -57,3 +67,7 @@ limitations under the License.
         margin: auto auto;
     }
 }
+
+.mx_PollHistoryList_loadMorePolls {
+    width: max-content;
+}
diff --git a/res/css/views/elements/_CopyableText.pcss b/res/css/views/elements/_CopyableText.pcss
index 8e1d3f3cfd7..edd1cdf7163 100644
--- a/res/css/views/elements/_CopyableText.pcss
+++ b/res/css/views/elements/_CopyableText.pcss
@@ -23,11 +23,12 @@ limitations under the License.
     max-width: 100%;
 
     &.mx_CopyableText_border {
+        overflow: auto;
         border-radius: 5px;
         border: solid 1px $light-fg-color;
         margin-bottom: 10px;
         margin-top: 10px;
-        padding: 10px;
+        padding: 10px 0 10px 10px;
     }
 
     .mx_CopyableText_copyButton {
@@ -36,7 +37,8 @@ limitations under the License.
         width: 1em;
         height: 1em;
         cursor: pointer;
-        margin-left: 20px;
+        padding-left: 12px;
+        padding-right: 10px;
         display: block;
         /* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
         position: sticky;
diff --git a/res/css/views/elements/_ReplyChain.pcss b/res/css/views/elements/_ReplyChain.pcss
index a84f04547fc..b404f643940 100644
--- a/res/css/views/elements/_ReplyChain.pcss
+++ b/res/css/views/elements/_ReplyChain.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_ReplyChain {
-    margin: 0 0 $spacing-8 0;
+    margin: 0; // Reset default blockquote margin
     padding-left: 10px; // TODO: Use a spacing variable
     border-left: 2px solid var(--username-color); // TODO: Use a spacing variable
 
diff --git a/res/css/views/messages/_LegacyCallEvent.pcss b/res/css/views/messages/_LegacyCallEvent.pcss
index 873f5d4b5b1..8d0f5abbc30 100644
--- a/res/css/views/messages/_LegacyCallEvent.pcss
+++ b/res/css/views/messages/_LegacyCallEvent.pcss
@@ -160,6 +160,7 @@ limitations under the License.
             flex-wrap: wrap;
             align-items: center;
             color: $secondary-content;
+            font-size: $font-12px;
             gap: $spacing-12; /* See mx_IncomingLegacyCallToast_buttons */
             margin-inline-start: 42px; /* avatar (32px) + mx_LegacyCallEvent_info_basic margin (10px) */
             word-break: break-word;
@@ -168,6 +169,7 @@ limitations under the License.
             .mx_LegacyCallEvent_content_button {
                 @mixin LegacyCallButton;
                 padding: 0 $spacing-12;
+                font-size: inherit;
 
                 span::before {
                     mask-size: 16px;
diff --git a/res/css/views/messages/_MessageTimestamp.pcss b/res/css/views/messages/_MessageTimestamp.pcss
index e4e1a475ec8..1b94ad3a6f1 100644
--- a/res/css/views/messages/_MessageTimestamp.pcss
+++ b/res/css/views/messages/_MessageTimestamp.pcss
@@ -16,8 +16,9 @@ limitations under the License.
 
 .mx_MessageTimestamp {
     --MessageTimestamp-max-width: 80px;
+    --MessageTimestamp-color: $event-timestamp-color;
 
-    color: $event-timestamp-color;
+    color: var(--MessageTimestamp-color);
     font-size: $font-10px;
     font-variant-numeric: tabular-nums;
     display: block; /* enable the width setting below */
diff --git a/res/css/views/messages/_ViewSourceEvent.pcss b/res/css/views/messages/_ViewSourceEvent.pcss
index 63698a13719..725c8341887 100644
--- a/res/css/views/messages/_ViewSourceEvent.pcss
+++ b/res/css/views/messages/_ViewSourceEvent.pcss
@@ -29,32 +29,34 @@ limitations under the License.
 
     pre {
         line-height: 1.2;
-        margin: 3.5px 0;
+        margin: 3.5px 0; /* TODO: use a variable */
     }
 
     .mx_ViewSourceEvent_toggle {
+        --ViewSourceEvent_toggle-size: 12px;
+
         visibility: hidden;
         /* override styles from AccessibleButton */
         border-radius: 0;
         /* icon */
         mask-repeat: no-repeat;
         mask-position: 0 center;
-        mask-size: auto 12px;
-        width: 12px;
-        min-width: 12px;
+        mask-size: auto var(--ViewSourceEvent_toggle-size);
+        width: var(--ViewSourceEvent_toggle-size);
+        min-width: var(--ViewSourceEvent_toggle-size);
         background-color: $accent;
         mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
+
+        .mx_EventTile:hover & {
+            visibility: visible;
+        }
     }
 
     &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
+        align-self: flex-end;
+        height: var(--ViewSourceEvent_toggle-size);
         mask-position: 0 bottom;
-        margin-bottom: 5px;
+        margin-bottom: 5px; /* TODO: use a variable */
         mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
     }
 }
-
-.mx_EventTile:hover {
-    .mx_ViewSourceEvent_toggle {
-        visibility: visible;
-    }
-}
diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss
index 683b576d2a6..a1ad8298804 100644
--- a/res/css/views/right_panel/_ThreadPanel.pcss
+++ b/res/css/views/right_panel/_ThreadPanel.pcss
@@ -130,7 +130,7 @@ limitations under the License.
     }
 
     .mx_MessageTimestamp {
-        color: $event-timestamp-color;
+        color: var(--MessageTimestamp-color); /* TODO: check whether needed or not */
     }
 
     .mx_BaseCard_footer {
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index f577f4836dc..050f164a050 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -267,10 +267,18 @@ $left-gutter: 64px;
         .mx_EventTileBubble {
             margin-inline: auto;
         }
+
+        .mx_ReplyChain {
+            margin-bottom: $spacing-8;
+        }
     }
 
     &[data-layout="irc"] {
-        --EventTile_irc_line_info-margin-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
+        /* add --right-padding value of MessageTimestamp only */
+        /* stylelint-disable-next-line declaration-colon-space-after */
+        --EventTile_irc_line_info-margin-inline-start: calc(
+            var(--name-width) + var(--icon-width) + 1 * var(--right-padding)
+        );
 
         .mx_EventTile_msgOption {
             .mx_ReadReceiptGroup {
@@ -291,6 +299,10 @@ $left-gutter: 64px;
             }
         }
 
+        .mx_ReplyChain {
+            margin: 0;
+        }
+
         .mx_ReplyTile .mx_EventTileBubble {
             left: unset; /* Cancel the value specified above for the tile inside ReplyTile */
         }
@@ -483,20 +495,12 @@ $left-gutter: 64px;
     }
 
     &[data-layout="irc"] {
-        .mx_EventTile_line .mx_RedactedBody {
-            padding-left: 24px; /* 25px - 1px */
-
-            &::before {
-                left: var(--right-padding);
-            }
-        }
-
         /* Apply only collapsed events block */
         > .mx_EventTile_line {
-            /* 15 px of padding */
+            /* add --right-padding value of MessageTimestamp and avatar only */
             /* stylelint-disable-next-line declaration-colon-space-after */
             padding-left: calc(
-                var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)
+                var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding)
             );
         }
     }
@@ -1260,6 +1264,10 @@ $left-gutter: 64px;
                 padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
             }
 
+            .mx_ReplyChain {
+                margin-bottom: $spacing-4;
+            }
+
             &.mx_EventTile_info {
                 padding-top: 0; /* same as the padding for non-compact .mx_EventTile.mx_EventTile_info */
                 font-size: $font-13px;
diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss
index 02ae02fa5eb..ed27991839f 100644
--- a/res/css/views/rooms/_IRCLayout.pcss
+++ b/res/css/views/rooms/_IRCLayout.pcss
@@ -130,12 +130,17 @@ $irc-line-height: $font-18px;
             .mx_TextualEvent,
             .mx_ViewSourceEvent,
             .mx_MTextBody {
-                display: inline-block;
                 /* add a 1px padding top and bottom because our larger
                 emoji font otherwise gets cropped by anti-zalgo */
                 padding: var(--EventTile_irc_line-padding-block) 0;
             }
 
+            .mx_EventTile_e2eIcon,
+            .mx_TextualEvent,
+            .mx_MTextBody {
+                display: inline-block;
+            }
+
             .mx_ReplyTile {
                 .mx_MTextBody {
                     display: -webkit-box; /* Enable -webkit-line-clamp */
@@ -154,7 +159,8 @@ $irc-line-height: $font-18px;
 
     .mx_EventTile_emote {
         .mx_EventTile_avatar {
-            margin-left: calc(var(--name-width) + var(--icon-width) + var(--right-padding));
+            /* add --right-padding value of MessageTimestamp only */
+            margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding));
         }
     }
 
@@ -177,7 +183,6 @@ $irc-line-height: $font-18px;
     }
 
     .mx_ReplyChain {
-        margin: 0;
         .mx_DisambiguatedProfile {
             order: unset;
             width: unset;
diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
index 6410a1e5574..7a21629dd12 100644
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -201,12 +201,13 @@ limitations under the License.
 }
 
 .mx_RoomHeader_button {
-    position: relative;
+    cursor: pointer;
+    flex: 0 0 auto;
     margin-left: 1px;
     margin-right: 1px;
-    cursor: pointer;
     height: 32px;
     width: 32px;
+    position: relative;
     border-radius: 100%;
 
     &::before {
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index 51a213192ca..a2c66202a4e 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -88,17 +88,17 @@ limitations under the License.
             border-radius: 2px;
         }
 
-        code {
+        code:not(pre *) {
             font-family: $monospace-font-family !important;
             background-color: $inlinecode-background-color;
             border: 1px solid $inlinecode-border-color;
             border-radius: 4px;
             padding: $spacing-2;
-        }
 
-        code:empty {
-            border: unset;
-            padding: unset;
+            &:empty {
+                border: unset;
+                padding: unset;
+            }
         }
     }
 
diff --git a/res/css/views/settings/_IntegrationManager.pcss b/res/css/views/settings/_IntegrationManager.pcss
index f91d3fdd6c9..505ccf86c24 100644
--- a/res/css/views/settings/_IntegrationManager.pcss
+++ b/res/css/views/settings/_IntegrationManager.pcss
@@ -17,6 +17,7 @@ limitations under the License.
 .mx_IntegrationManager {
     .mx_Dialog {
         box-sizing: border-box;
+        padding: 0;
         width: 60%;
         height: 70%;
         overflow: hidden;
diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index 5a61bcd2dab..c03de9f36ce 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -28,9 +28,4 @@ limitations under the License.
             margin-bottom: $spacing-16;
         }
     }
-
-    /* prevent the access token from overflowing the text box */
-    div .mx_CopyableText {
-        overflow: scroll;
-    }
 }
diff --git a/scripts/make-react-component.js b/scripts/make-react-component.js
index 544a4f4f311..40eb331785a 100755
--- a/scripts/make-react-component.js
+++ b/scripts/make-react-component.js
@@ -31,19 +31,19 @@ const %%ComponentName%%: React.FC<Props> = () => {
 export default %%ComponentName%%;
 `,
     TEST: `
-import React from 'react';
-import { mount } from 'enzyme';
+import React from "react";
+import { render } from "@testing-library/react";
 
 import %%ComponentName%% from '%%RelativeComponentPath%%';
 
-describe('<%%ComponentName%% />', () => {
+describe("<%%ComponentName%% />", () => {
     const defaultProps = {};
     const getComponent = (props = {}) =>
-        mount(<%%ComponentName%% {...defaultProps} {...props} />);
+        render(<%%ComponentName%% {...defaultProps} {...props} />);
 
-    it('renders', () => {
-        const component = getComponent();
-        expect(component).toBeTruthy();
+    it("matches snapshot", () => {
+        const { asFragment } = getComponent();
+        expect(asFragment()).toMatchSnapshot()();
     });
 });
 `,
diff --git a/src/@types/common.ts b/src/@types/common.ts
index ddcd0bb3dc6..be77708a82e 100644
--- a/src/@types/common.ts
+++ b/src/@types/common.ts
@@ -48,16 +48,6 @@ export type RecursivePartial<T> = {
         : T[P];
 };
 
-// Inspired by https://stackoverflow.com/a/60206860
-export type KeysWithObjectShape<Input> = {
-    [P in keyof Input]: Input[P] extends object
-        ? // Arrays are counted as objects - exclude them
-          Input[P] extends Array<unknown>
-            ? never
-            : P
-        : never;
-}[keyof Input];
-
 export type KeysStartingWith<Input extends object, Str extends string> = {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     [P in keyof Input]: P extends `${Str}${infer _X}` ? P : never; // we don't use _X
diff --git a/src/AddThreepid.ts b/src/AddThreepid.ts
index 5d8d947854d..51779042f9c 100644
--- a/src/AddThreepid.ts
+++ b/src/AddThreepid.ts
@@ -49,7 +49,7 @@ export type Binding = {
  */
 export default class AddThreepid {
     private sessionId: string;
-    private submitUrl: string;
+    private submitUrl?: string;
     private clientSecret: string;
     private bind: boolean;
 
@@ -93,7 +93,7 @@ export default class AddThreepid {
         if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
             // For separate bind, request a token directly from the IS.
             const authClient = new IdentityAuthClient();
-            const identityAccessToken = await authClient.getAccessToken();
+            const identityAccessToken = (await authClient.getAccessToken()) ?? undefined;
             return MatrixClientPeg.get()
                 .requestEmailToken(emailAddress, this.clientSecret, 1, undefined, identityAccessToken)
                 .then(
@@ -155,7 +155,7 @@ export default class AddThreepid {
         if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
             // For separate bind, request a token directly from the IS.
             const authClient = new IdentityAuthClient();
-            const identityAccessToken = await authClient.getAccessToken();
+            const identityAccessToken = (await authClient.getAccessToken()) ?? undefined;
             return MatrixClientPeg.get()
                 .requestMsisdnToken(phoneCountry, phoneNumber, this.clientSecret, 1, undefined, identityAccessToken)
                 .then(
@@ -184,7 +184,7 @@ export default class AddThreepid {
      * with a "message" property which contains a human-readable message detailing why
      * the request failed.
      */
-    public async checkEmailLinkClicked(): Promise<[boolean, IAuthData | Error | null]> {
+    public async checkEmailLinkClicked(): Promise<[success?: boolean, result?: IAuthData | Error | null]> {
         try {
             if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
                 if (this.bind) {
@@ -202,7 +202,7 @@ export default class AddThreepid {
 
                         // The spec has always required this to use UI auth but synapse briefly
                         // implemented it without, so this may just succeed and that's OK.
-                        return;
+                        return [true];
                     } catch (e) {
                         if (e.httpStatus !== 401 || !e.data || !e.data.flows) {
                             // doesn't look like an interactive-auth failure
@@ -213,8 +213,7 @@ export default class AddThreepid {
                             [SSOAuthEntry.PHASE_PREAUTH]: {
                                 title: _t("Use Single Sign On to continue"),
                                 body: _t(
-                                    "Confirm adding this email address by using " +
-                                        "Single Sign On to prove your identity.",
+                                    "Confirm adding this email address by using Single Sign On to prove your identity.",
                                 ),
                                 continueText: _t("Single Sign On"),
                                 continueKind: "primary",
@@ -226,19 +225,16 @@ export default class AddThreepid {
                                 continueKind: "primary",
                             },
                         };
-                        const { finished } = Modal.createDialog<[boolean, IAuthData | Error | null]>(
-                            InteractiveAuthDialog,
-                            {
-                                title: _t("Add Email Address"),
-                                matrixClient: MatrixClientPeg.get(),
-                                authData: e.data,
-                                makeRequest: this.makeAddThreepidOnlyRequest,
-                                aestheticsForStagePhases: {
-                                    [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
-                                    [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
-                                },
+                        const { finished } = Modal.createDialog(InteractiveAuthDialog, {
+                            title: _t("Add Email Address"),
+                            matrixClient: MatrixClientPeg.get(),
+                            authData: e.data,
+                            makeRequest: this.makeAddThreepidOnlyRequest,
+                            aestheticsForStagePhases: {
+                                [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+                                [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
                             },
-                        );
+                        });
                         return finished;
                     }
                 }
@@ -260,6 +256,7 @@ export default class AddThreepid {
             }
             throw err;
         }
+        return [];
     }
 
     /**
@@ -282,7 +279,7 @@ export default class AddThreepid {
      * with a "message" property which contains a human-readable message detailing why
      * the request failed.
      */
-    public async haveMsisdnToken(msisdnToken: string): Promise<any[]> {
+    public async haveMsisdnToken(msisdnToken: string): Promise<any[] | undefined> {
         const authClient = new IdentityAuthClient();
         const supportsSeparateAddAndBind = await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind();
 
@@ -333,7 +330,7 @@ export default class AddThreepid {
                         [SSOAuthEntry.PHASE_PREAUTH]: {
                             title: _t("Use Single Sign On to continue"),
                             body: _t(
-                                "Confirm adding this phone number by using " + "Single Sign On to prove your identity.",
+                                "Confirm adding this phone number by using Single Sign On to prove your identity.",
                             ),
                             continueText: _t("Single Sign On"),
                             continueKind: "primary",
diff --git a/src/AsyncWrapper.tsx b/src/AsyncWrapper.tsx
index e4e12bedfe5..4ee10ca22db 100644
--- a/src/AsyncWrapper.tsx
+++ b/src/AsyncWrapper.tsx
@@ -18,16 +18,16 @@ import React, { ComponentType } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "./languageHandler";
-import { IDialogProps } from "./components/views/dialogs/IDialogProps";
 import BaseDialog from "./components/views/dialogs/BaseDialog";
 import DialogButtons from "./components/views/elements/DialogButtons";
 import Spinner from "./components/views/elements/Spinner";
 
 type AsyncImport<T> = { default: T };
 
-interface IProps extends IDialogProps {
+interface IProps {
     // A promise which resolves with the real component
-    prom: Promise<ComponentType | AsyncImport<ComponentType>>;
+    prom: Promise<ComponentType<any> | AsyncImport<ComponentType<any>>>;
+    onFinished(): void;
 }
 
 interface IState {
@@ -71,7 +71,7 @@ export default class AsyncWrapper extends React.Component<IProps, IState> {
     }
 
     private onWrapperCancelClick = (): void => {
-        this.props.onFinished(false);
+        this.props.onFinished();
     };
 
     public render(): React.ReactNode {
diff --git a/src/Avatar.ts b/src/Avatar.ts
index 5036b8f2561..d58420deefe 100644
--- a/src/Avatar.ts
+++ b/src/Avatar.ts
@@ -139,14 +139,18 @@ export function getInitialLetter(name: string): string | undefined {
 
 export function avatarUrlForRoom(
     room: Room | null,
-    width: number,
-    height: number,
+    width?: number,
+    height?: number,
     resizeMethod?: ResizeMethod,
 ): string | null {
     if (!room) return null; // null-guard
 
     if (room.getMxcAvatarUrl()) {
-        return mediaFromMxc(room.getMxcAvatarUrl() || undefined).getThumbnailOfSourceHttp(width, height, resizeMethod);
+        const media = mediaFromMxc(room.getMxcAvatarUrl() ?? undefined);
+        if (width !== undefined && height !== undefined) {
+            return media.getThumbnailOfSourceHttp(width, height, resizeMethod);
+        }
+        return media.srcHttp;
     }
 
     // space rooms cannot be DMs so skip the rest
@@ -160,7 +164,11 @@ export function avatarUrlForRoom(
     // If there are only two members in the DM use the avatar of the other member
     const otherMember = room.getAvatarFallbackMember();
     if (otherMember?.getMxcAvatarUrl()) {
-        return mediaFromMxc(otherMember.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod);
+        const media = mediaFromMxc(otherMember.getMxcAvatarUrl());
+        if (width !== undefined && height !== undefined) {
+            return media.getThumbnailOfSourceHttp(width, height, resizeMethod);
+        }
+        return media.srcHttp;
     }
     return null;
 }
diff --git a/src/ContentMessages.ts b/src/ContentMessages.ts
index e05858bb166..41bd0361a2a 100644
--- a/src/ContentMessages.ts
+++ b/src/ContentMessages.ts
@@ -389,7 +389,7 @@ export default class ContentMessages {
         }
 
         if (tooBigFiles.length > 0) {
-            const { finished } = Modal.createDialog<[boolean]>(UploadFailureDialog, {
+            const { finished } = Modal.createDialog(UploadFailureDialog, {
                 badFiles: tooBigFiles,
                 totalFiles: files.length,
                 contentMessages: this,
@@ -407,7 +407,7 @@ export default class ContentMessages {
             const loopPromiseBefore = promBefore;
 
             if (!uploadAll) {
-                const { finished } = Modal.createDialog<[boolean, boolean]>(UploadConfirmDialog, {
+                const { finished } = Modal.createDialog(UploadConfirmDialog, {
                     file,
                     currentIndex: i,
                     totalFiles: okFiles.length,
@@ -546,7 +546,7 @@ export default class ContentMessages {
             if (upload.cancelled) throw new UploadCanceledError();
             const threadId = relation?.rel_type === THREAD_RELATION_TYPE.name ? relation.event_id : null;
 
-            const response = await matrixClient.sendMessage(roomId, threadId, content);
+            const response = await matrixClient.sendMessage(roomId, threadId ?? null, content);
 
             if (SettingsStore.getValue("Performance.addSendMessageTimingMetadata")) {
                 sendRoundTripMetric(matrixClient, roomId, response.event_id);
diff --git a/src/IConfigOptions.ts b/src/IConfigOptions.ts
index 1db73cc0745..b2e44f23ce2 100644
--- a/src/IConfigOptions.ts
+++ b/src/IConfigOptions.ts
@@ -148,19 +148,6 @@ export interface IConfigOptions {
     analytics_owner?: string; // defaults to `brand`
     privacy_policy_url?: string; // location for cookie policy
 
-    // Server hosting upsell options
-    hosting_signup_link?: string; // slightly different from `host_signup`
-    host_signup?: {
-        brand?: string; // acts as the enabled flag too (truthy == show)
-
-        // Required-ness denotes when `brand` is truthy
-        cookie_policy_url: string;
-        privacy_policy_url: string;
-        terms_of_service_url: string;
-        url: string;
-        domains?: string[];
-    };
-
     enable_presence_by_hs_url?: Record<string, boolean>; // <HomeserverName, Enabled>
 
     terms_and_conditions_links?: { url: string; text: string }[];
diff --git a/src/LegacyCallHandler.tsx b/src/LegacyCallHandler.tsx
index 34fffffc505..708db7a32d3 100644
--- a/src/LegacyCallHandler.tsx
+++ b/src/LegacyCallHandler.tsx
@@ -58,7 +58,7 @@ import IncomingLegacyCallToast, { getIncomingLegacyCallToastKey } from "./toasts
 import ToastStore from "./stores/ToastStore";
 import Resend from "./Resend";
 import { ViewRoomPayload } from "./dispatcher/payloads/ViewRoomPayload";
-import { KIND_CALL_TRANSFER } from "./components/views/dialogs/InviteDialogTypes";
+import { InviteKind } from "./components/views/dialogs/InviteDialogTypes";
 import { OpenInviteDialogPayload } from "./dispatcher/payloads/OpenInviteDialogPayload";
 import { findDMForUser } from "./utils/dm/findDMForUser";
 import { getJoinedNonFunctionalMembers } from "./utils/room/getJoinedNonFunctionalMembers";
@@ -737,7 +737,7 @@ export default class LegacyCallHandler extends EventEmitter {
         );
         if (!stats) {
             logger.debug(
-                "Call statistics are undefined. The call has " + "probably failed before a peerConn was established",
+                "Call statistics are undefined. The call has probably failed before a peerConn was established",
             );
             return;
         }
@@ -1024,13 +1024,12 @@ export default class LegacyCallHandler extends EventEmitter {
     }
 
     public answerCall(roomId: string): void {
-        const call = this.calls.get(roomId);
-
-        this.stopRingingIfPossible(call.callId);
-
         // no call to answer
         if (!this.calls.has(roomId)) return;
 
+        const call = this.calls.get(roomId)!;
+        this.stopRingingIfPossible(call.callId);
+
         if (this.getAllActiveCalls().length > 1) {
             Modal.createDialog(ErrorDialog, {
                 title: _t("Too Many Calls"),
@@ -1215,7 +1214,7 @@ export default class LegacyCallHandler extends EventEmitter {
         call.setRemoteOnHold(true);
         dis.dispatch<OpenInviteDialogPayload>({
             action: Action.OpenInviteDialog,
-            kind: KIND_CALL_TRANSFER,
+            kind: InviteKind.CallTransfer,
             call,
             analyticsName: "Transfer Call",
             className: "mx_InviteDialog_transferWrapper",
diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts
index b28a7f80380..590b7eb1801 100644
--- a/src/Lifecycle.ts
+++ b/src/Lifecycle.ts
@@ -265,7 +265,7 @@ export function handleInvalidStoreError(e: InvalidStoreError): Promise<void> {
             .then(() => {
                 const lazyLoadEnabled = e.value;
                 if (lazyLoadEnabled) {
-                    return new Promise((resolve) => {
+                    return new Promise<void>((resolve) => {
                         Modal.createDialog(LazyLoadingResyncDialog, {
                             onFinished: resolve,
                         });
@@ -275,7 +275,7 @@ export function handleInvalidStoreError(e: InvalidStoreError): Promise<void> {
                     // between LL/non-LL version on same host.
                     // as disabling LL when previously enabled
                     // is a strong indicator of this (/develop & /app)
-                    return new Promise((resolve) => {
+                    return new Promise<void>((resolve) => {
                         Modal.createDialog(LazyLoadingDisabledDialog, {
                             onFinished: resolve,
                             host: window.location.host,
@@ -287,7 +287,7 @@ export function handleInvalidStoreError(e: InvalidStoreError): Promise<void> {
                 return MatrixClientPeg.get().store.deleteAllData();
             })
             .then(() => {
-                PlatformPeg.get().reload();
+                PlatformPeg.get()?.reload();
             });
     }
 }
@@ -519,7 +519,7 @@ export async function setLoggedIn(credentials: IMatrixClientCreds): Promise<Matr
     stopMatrixClient();
     const pickleKey =
         credentials.userId && credentials.deviceId
-            ? await PlatformPeg.get().createPickleKey(credentials.userId, credentials.deviceId)
+            ? await PlatformPeg.get()?.createPickleKey(credentials.userId, credentials.deviceId)
             : null;
 
     if (pickleKey) {
diff --git a/src/MatrixClientPeg.ts b/src/MatrixClientPeg.ts
index 69a2263fc59..13c75f0ba3c 100644
--- a/src/MatrixClientPeg.ts
+++ b/src/MatrixClientPeg.ts
@@ -40,6 +40,7 @@ import { SlidingSyncManager } from "./SlidingSyncManager";
 import CryptoStoreTooNewDialog from "./components/views/dialogs/CryptoStoreTooNewDialog";
 import { _t } from "./languageHandler";
 import { SettingLevel } from "./settings/SettingLevel";
+import MatrixClientBackedController from "./settings/controllers/MatrixClientBackedController";
 
 export interface IMatrixClientCreds {
     homeserverUrl: string;
@@ -166,7 +167,7 @@ class MatrixClientPegClass implements IMatrixClientPeg {
         }
 
         try {
-            const registrationTime = parseInt(window.localStorage.getItem("mx_registration_time"), 10);
+            const registrationTime = parseInt(window.localStorage.getItem("mx_registration_time")!, 10);
             const diff = Date.now() - registrationTime;
             return diff / 36e5 <= hours;
         } catch (e) {
@@ -176,7 +177,7 @@ class MatrixClientPegClass implements IMatrixClientPeg {
 
     public userRegisteredAfter(timestamp: Date): boolean {
         try {
-            const registrationTime = parseInt(window.localStorage.getItem("mx_registration_time"), 10);
+            const registrationTime = parseInt(window.localStorage.getItem("mx_registration_time")!, 10);
             return timestamp.getTime() <= registrationTime;
         } catch (e) {
             return false;
@@ -237,6 +238,7 @@ class MatrixClientPegClass implements IMatrixClientPeg {
         // Connect the matrix client to the dispatcher and setting handlers
         MatrixActionCreators.start(this.matrixClient);
         MatrixClientBackedSettingsHandler.matrixClient = this.matrixClient;
+        MatrixClientBackedController.matrixClient = this.matrixClient;
 
         return opts;
     }
@@ -292,7 +294,7 @@ class MatrixClientPegClass implements IMatrixClientPeg {
     }
 
     public getCredentials(): IMatrixClientCreds {
-        let copiedCredentials = this.currentClientCreds;
+        let copiedCredentials: IMatrixClientCreds | null = this.currentClientCreds;
         if (this.currentClientCreds?.userId !== this.matrixClient?.credentials?.userId) {
             // cached credentials belong to a different user - don't use them
             copiedCredentials = null;
diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts
index fcb066e92fe..7e66fbc3df6 100644
--- a/src/MediaDeviceHandler.ts
+++ b/src/MediaDeviceHandler.ts
@@ -64,7 +64,7 @@ export default class MediaDeviceHandler extends EventEmitter {
      *
      * @return Promise<IMediaDevices> The available media devices
      */
-    public static async getDevices(): Promise<IMediaDevices> {
+    public static async getDevices(): Promise<IMediaDevices | undefined> {
         try {
             const devices = await navigator.mediaDevices.enumerateDevices();
             const output: Record<MediaDeviceKindEnum, MediaDeviceInfo[]> = {
diff --git a/src/Modal.tsx b/src/Modal.tsx
index 3b21c47d3d0..54ae185ad14 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -27,34 +27,35 @@ import AsyncWrapper from "./AsyncWrapper";
 const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
 const STATIC_DIALOG_CONTAINER_ID = "mx_Dialog_StaticContainer";
 
-export interface IModal<T extends any[]> {
+// Type which accepts a React Component which looks like a Modal (accepts an onFinished prop)
+export type ComponentType = React.ComponentType<{
+    onFinished?(...args: any): void;
+}>;
+
+// Generic type which returns the props of the Modal component with the onFinished being optional.
+export type ComponentProps<C extends ComponentType> = Omit<React.ComponentProps<C>, "onFinished"> &
+    Partial<Pick<React.ComponentProps<C>, "onFinished">>;
+
+export interface IModal<C extends ComponentType> {
     elem: React.ReactNode;
     className?: string;
     beforeClosePromise?: Promise<boolean>;
     closeReason?: string;
     onBeforeClose?(reason?: string): Promise<boolean>;
-    onFinished?(...args: T): void;
-    close(...args: T): void;
+    onFinished: ComponentProps<C>["onFinished"];
+    close(...args: Parameters<ComponentProps<C>["onFinished"]>): void;
     hidden?: boolean;
 }
 
-export interface IHandle<T extends any[]> {
-    finished: Promise<T>;
-    close(...args: T): void;
-}
-
-interface IProps<T extends any[]> {
-    onFinished?(...args: T): void;
-    // TODO improve typing here once all Modals are TS and we can exhaustively check the props
-    [key: string]: any;
+export interface IHandle<C extends ComponentType> {
+    finished: Promise<Parameters<ComponentProps<C>["onFinished"]>>;
+    close(...args: Parameters<ComponentProps<C>["onFinished"]>): void;
 }
 
-interface IOptions<T extends any[]> {
-    onBeforeClose?: IModal<T>["onBeforeClose"];
+interface IOptions<C extends ComponentType> {
+    onBeforeClose?: IModal<C>["onBeforeClose"];
 }
 
-type ParametersWithoutFirst<T extends (...args: any) => any> = T extends (a: any, ...args: infer P) => any ? P : never;
-
 export enum ModalManagerEvent {
     Opened = "opened",
 }
@@ -111,18 +112,30 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
         return !!this.priorityModal || !!this.staticModal || this.modals.length > 0;
     }
 
-    public createDialog<T extends any[]>(
-        Element: React.ComponentType<any>,
-        ...rest: ParametersWithoutFirst<ModalManager["createDialogAsync"]>
-    ): IHandle<T> {
-        return this.createDialogAsync<T>(Promise.resolve(Element), ...rest);
+    public createDialog<C extends ComponentType>(
+        Element: C,
+        props?: ComponentProps<C>,
+        className?: string,
+        isPriorityModal = false,
+        isStaticModal = false,
+        options: IOptions<C> = {},
+    ): IHandle<C> {
+        return this.createDialogAsync<C>(
+            Promise.resolve(Element),
+            props,
+            className,
+            isPriorityModal,
+            isStaticModal,
+            options,
+        );
     }
 
-    public appendDialog<T extends any[]>(
+    public appendDialog<C extends ComponentType>(
         Element: React.ComponentType,
-        ...rest: ParametersWithoutFirst<ModalManager["appendDialogAsync"]>
-    ): IHandle<T> {
-        return this.appendDialogAsync<T>(Promise.resolve(Element), ...rest);
+        props?: ComponentProps<C>,
+        className?: string,
+    ): IHandle<C> {
+        return this.appendDialogAsync<C>(Promise.resolve(Element), props, className);
     }
 
     public closeCurrentModal(reason: string): void {
@@ -134,15 +147,15 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
         modal.close();
     }
 
-    private buildModal<T extends any[]>(
+    private buildModal<C extends ComponentType>(
         prom: Promise<React.ComponentType>,
-        props?: IProps<T>,
+        props?: ComponentProps<C>,
         className?: string,
-        options?: IOptions<T>,
+        options?: IOptions<C>,
     ): {
-        modal: IModal<T>;
-        closeDialog: IHandle<T>["close"];
-        onFinishedProm: IHandle<T>["finished"];
+        modal: IModal<C>;
+        closeDialog: IHandle<C>["close"];
+        onFinishedProm: IHandle<C>["finished"];
     } {
         const modal = {
             onFinished: props?.onFinished,
@@ -151,10 +164,10 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
 
             // these will be set below but we need an object reference to pass to getCloseFn before we can do that
             elem: null,
-        } as IModal<T>;
+        } as IModal<C>;
 
         // never call this from onFinished() otherwise it will loop
-        const [closeDialog, onFinishedProm] = this.getCloseFn<T>(modal, props);
+        const [closeDialog, onFinishedProm] = this.getCloseFn<C>(modal, props);
 
         // don't attempt to reuse the same AsyncWrapper for different dialogs,
         // otherwise we'll get confused.
@@ -168,13 +181,13 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
         return { modal, closeDialog, onFinishedProm };
     }
 
-    private getCloseFn<T extends any[]>(
-        modal: IModal<T>,
-        props?: IProps<T>,
-    ): [IHandle<T>["close"], IHandle<T>["finished"]] {
-        const deferred = defer<T>();
+    private getCloseFn<C extends ComponentType>(
+        modal: IModal<C>,
+        props?: ComponentProps<C>,
+    ): [IHandle<C>["close"], IHandle<C>["finished"]] {
+        const deferred = defer<Parameters<ComponentProps<C>["onFinished"]>>();
         return [
-            async (...args: T): Promise<void> => {
+            async (...args: Parameters<ComponentProps<C>["onFinished"]>): Promise<void> => {
                 if (modal.beforeClosePromise) {
                     await modal.beforeClosePromise;
                 } else if (modal.onBeforeClose) {
@@ -249,16 +262,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
      * @param {onBeforeClose} options.onBeforeClose a callback to decide whether to close the dialog
      * @returns {object} Object with 'close' parameter being a function that will close the dialog
      */
-    public createDialogAsync<T extends any[]>(
-        prom: Promise<React.ComponentType>,
-        props?: IProps<T>,
+    public createDialogAsync<C extends ComponentType>(
+        prom: Promise<C>,
+        props?: ComponentProps<C>,
         className?: string,
         isPriorityModal = false,
         isStaticModal = false,
-        options: IOptions<T> = {},
-    ): IHandle<T> {
+        options: IOptions<C> = {},
+    ): IHandle<C> {
         const beforeModal = this.getCurrentModal();
-        const { modal, closeDialog, onFinishedProm } = this.buildModal<T>(prom, props, className, options);
+        const { modal, closeDialog, onFinishedProm } = this.buildModal<C>(prom, props, className, options);
         if (isPriorityModal) {
             // XXX: This is destructive
             this.priorityModal = modal;
@@ -278,13 +291,13 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
         };
     }
 
-    private appendDialogAsync<T extends any[]>(
+    private appendDialogAsync<C extends ComponentType>(
         prom: Promise<React.ComponentType>,
-        props?: IProps<T>,
+        props?: ComponentProps<C>,
         className?: string,
-    ): IHandle<T> {
+    ): IHandle<C> {
         const beforeModal = this.getCurrentModal();
-        const { modal, closeDialog, onFinishedProm } = this.buildModal<T>(prom, props, className, {});
+        const { modal, closeDialog, onFinishedProm } = this.buildModal<C>(prom, props, className, {});
 
         this.modals.push(modal);
 
diff --git a/src/PosthogTrackers.ts b/src/PosthogTrackers.ts
index a82b78c1dd2..c03a20216c1 100644
--- a/src/PosthogTrackers.ts
+++ b/src/PosthogTrackers.ts
@@ -54,8 +54,8 @@ export default class PosthogTrackers {
     }
 
     private view: Views = Views.LOADING;
-    private pageType?: PageType = null;
-    private override?: ScreenName = null;
+    private pageType?: PageType;
+    private override?: ScreenName;
 
     public trackPageChange(view: Views, pageType: PageType | undefined, durationMs: number): void {
         this.view = view;
@@ -66,7 +66,7 @@ export default class PosthogTrackers {
 
     private trackPage(durationMs?: number): void {
         const screenName =
-            this.view === Views.LOGGED_IN ? loggedInPageTypeMap[this.pageType] : notLoggedInMap[this.view];
+            this.view === Views.LOGGED_IN ? loggedInPageTypeMap[this.pageType!] : notLoggedInMap[this.view];
         PosthogAnalytics.instance.trackEvent<ScreenEvent>({
             eventName: "$pageview",
             $current_url: screenName,
@@ -85,7 +85,7 @@ export default class PosthogTrackers {
 
     public clearOverride(screenName: ScreenName): void {
         if (screenName !== this.override) return;
-        this.override = null;
+        this.override = undefined;
         this.trackPage();
     }
 
diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx
index c92ebcc55e2..0d2b64f244f 100644
--- a/src/RoomInvite.tsx
+++ b/src/RoomInvite.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ComponentProps } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { User } from "matrix-js-sdk/src/models/user";
@@ -29,7 +29,7 @@ import InviteDialog from "./components/views/dialogs/InviteDialog";
 import BaseAvatar from "./components/views/avatars/BaseAvatar";
 import { mediaFromMxc } from "./customisations/Media";
 import ErrorDialog from "./components/views/dialogs/ErrorDialog";
-import { KIND_DM, KIND_INVITE } from "./components/views/dialogs/InviteDialogTypes";
+import { InviteKind } from "./components/views/dialogs/InviteDialogTypes";
 import { Member } from "./utils/direct-messages";
 
 export interface IInviteResult {
@@ -64,7 +64,7 @@ export function showStartChatInviteDialog(initialText = ""): void {
     // This dialog handles the room creation internally - we don't need to worry about it.
     Modal.createDialog(
         InviteDialog,
-        { kind: KIND_DM, initialText },
+        { kind: InviteKind.Dm, initialText },
         /*className=*/ "mx_InviteDialog_flexWrapper",
         /*isPriority=*/ false,
         /*isStatic=*/ true,
@@ -76,10 +76,10 @@ export function showRoomInviteDialog(roomId: string, initialText = ""): void {
     Modal.createDialog(
         InviteDialog,
         {
-            kind: KIND_INVITE,
+            kind: InviteKind.Invite,
             initialText,
             roomId,
-        },
+        } as Omit<ComponentProps<typeof InviteDialog>, "onFinished">,
         /*className=*/ "mx_InviteDialog_flexWrapper",
         /*isPriority=*/ false,
         /*isStatic=*/ true,
diff --git a/src/SdkConfig.ts b/src/SdkConfig.ts
index 0ba1d4f46e4..ff4e63b22a9 100644
--- a/src/SdkConfig.ts
+++ b/src/SdkConfig.ts
@@ -19,14 +19,12 @@ import { Optional } from "matrix-events-sdk";
 
 import { SnakedObject } from "./utils/SnakedObject";
 import { IConfigOptions, ISsoRedirectOptions } from "./IConfigOptions";
-import { KeysWithObjectShape } from "./@types/common";
 
 // see element-web config.md for docs, or the IConfigOptions interface for dev docs
 export const DEFAULTS: IConfigOptions = {
     brand: "SchildiChat",
     integrations_ui_url: "https://scalar.vector.im/",
     integrations_rest_url: "https://scalar.vector.im/api",
-    bug_report_endpoint_url: null,
     uisi_autorageshake_app: "element-auto-uisi",
 
     jitsi: {
@@ -79,10 +77,10 @@ export default class SdkConfig {
         return SdkConfig.fallback.get(key, altCaseName);
     }
 
-    public static getObject<K extends KeysWithObjectShape<IConfigOptions>>(
+    public static getObject<K extends keyof IConfigOptions>(
         key: K,
         altCaseName?: string,
-    ): Optional<SnakedObject<IConfigOptions[K]>> {
+    ): Optional<SnakedObject<NonNullable<IConfigOptions[K]>>> {
         const val = SdkConfig.get(key, altCaseName);
         if (val !== null && val !== undefined) {
             return new SnakedObject(val);
diff --git a/src/SecurityManager.ts b/src/SecurityManager.ts
index 2a56de87513..563aac09ad0 100644
--- a/src/SecurityManager.ts
+++ b/src/SecurityManager.ts
@@ -22,13 +22,13 @@ import { decodeRecoveryKey } from "matrix-js-sdk/src/crypto/recoverykey";
 import { encodeBase64 } from "matrix-js-sdk/src/crypto/olmlib";
 import { DeviceTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning";
 import { logger } from "matrix-js-sdk/src/logger";
-import { ComponentType } from "react";
 
+import type CreateSecretStorageDialog from "./async-components/views/dialogs/security/CreateSecretStorageDialog";
 import Modal from "./Modal";
 import { MatrixClientPeg } from "./MatrixClientPeg";
 import { _t } from "./languageHandler";
 import { isSecureBackupRequired } from "./utils/WellKnownUtils";
-import AccessSecretStorageDialog from "./components/views/dialogs/security/AccessSecretStorageDialog";
+import AccessSecretStorageDialog, { KeyParams } from "./components/views/dialogs/security/AccessSecretStorageDialog";
 import RestoreKeyBackupDialog from "./components/views/dialogs/security/RestoreKeyBackupDialog";
 import SettingsStore from "./settings/SettingsStore";
 import SecurityCustomisations from "./customisations/Security";
@@ -83,8 +83,6 @@ async function confirmToDismiss(): Promise<boolean> {
     return !sure;
 }
 
-type KeyParams = { passphrase: string; recoveryKey: string };
-
 function makeInputToKey(keyInfo: ISecretStorageKeyInfo): (keyParams: KeyParams) => Promise<Uint8Array> {
     return async ({ passphrase, recoveryKey }): Promise<Uint8Array> => {
         if (passphrase) {
@@ -333,7 +331,7 @@ export async function accessSecretStorage(func = async (): Promise<void> => {},
             // passphrase creation.
             const { finished } = Modal.createDialogAsync(
                 import("./async-components/views/dialogs/security/CreateSecretStorageDialog") as unknown as Promise<
-                    ComponentType<{}>
+                    typeof CreateSecretStorageDialog
                 >,
                 {
                     forceReset,
diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx
index 66f673445dd..b1df460f803 100644
--- a/src/SlashCommands.tsx
+++ b/src/SlashCommands.tsx
@@ -198,7 +198,7 @@ function reject(error?: any): RunResult {
     return { error };
 }
 
-function success(promise?: Promise<any>): RunResult {
+function success(promise: Promise<any> = Promise.resolve()): RunResult {
     return { promise };
 }
 
@@ -221,7 +221,7 @@ export const Commands = [
         command: "spoiler",
         args: "<message>",
         description: _td("Sends the given message as a spoiler"),
-        runFn: function (roomId, message) {
+        runFn: function (roomId, message = "") {
             return successSync(ContentHelpers.makeHtmlMessage(message, `<span data-mx-spoiler>${message}</span>`));
         },
         category: CommandCategories.messages,
@@ -282,7 +282,7 @@ export const Commands = [
         command: "plain",
         args: "<message>",
         description: _td("Sends a message as plain text, without interpreting it as markdown"),
-        runFn: function (roomId, messages) {
+        runFn: function (roomId, messages = "") {
             return successSync(ContentHelpers.makeTextMessage(messages));
         },
         category: CommandCategories.messages,
@@ -291,7 +291,7 @@ export const Commands = [
         command: "html",
         args: "<message>",
         description: _td("Sends a message as html, without interpreting it as markdown"),
-        runFn: function (roomId, messages) {
+        runFn: function (roomId, messages = "") {
             return successSync(ContentHelpers.makeHtmlMessage(messages, messages));
         },
         category: CommandCategories.messages,
@@ -551,7 +551,7 @@ export const Commands = [
                     ) {
                         const defaultIdentityServerUrl = getDefaultIdentityServerUrl();
                         if (defaultIdentityServerUrl) {
-                            const { finished } = Modal.createDialog<[boolean]>(QuestionDialog, {
+                            const { finished } = Modal.createDialog(QuestionDialog, {
                                 title: _t("Use an identity server"),
                                 description: (
                                     <p>
diff --git a/src/Terms.ts b/src/Terms.ts
index f66f543887c..ad4386d7aa0 100644
--- a/src/Terms.ts
+++ b/src/Terms.ts
@@ -191,7 +191,7 @@ export async function dialogTermsInteractionCallback(
 ): Promise<string[]> {
     logger.log("Terms that need agreement", policiesAndServicePairs);
 
-    const { finished } = Modal.createDialog<[boolean, string[]]>(
+    const { finished } = Modal.createDialog(
         TermsDialog,
         {
             policiesAndServicePairs,
diff --git a/src/accessibility/KeyboardShortcuts.ts b/src/accessibility/KeyboardShortcuts.ts
index 3011a5b5bd7..bcd720ee21b 100644
--- a/src/accessibility/KeyboardShortcuts.ts
+++ b/src/accessibility/KeyboardShortcuts.ts
@@ -154,7 +154,7 @@ export enum KeyBindingAction {
     ToggleHiddenEventVisibility = "KeyBinding.toggleHiddenEventVisibility",
 }
 
-type KeyboardShortcutSetting = IBaseSetting<KeyCombo>;
+type KeyboardShortcutSetting = Omit<IBaseSetting<KeyCombo>, "supportedLevels">;
 
 // TODO: We should figure out what to do with the keyboard shortcuts that are not handled by KeybindingManager
 export type IKeyboardShortcuts = Partial<Record<KeyBindingAction, KeyboardShortcutSetting>>;
diff --git a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx
index 300e67df825..a1e9485e027 100644
--- a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx
+++ b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx
@@ -27,7 +27,7 @@ import { Action } from "../../../../dispatcher/actions";
 import { SettingLevel } from "../../../../settings/SettingLevel";
 
 interface IProps {
-    onFinished: (success: boolean) => void;
+    onFinished: (success?: boolean) => void;
 }
 
 interface IState {
diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx
index 5393ae3fc6e..517a56d23b3 100644
--- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx
+++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx
@@ -27,17 +27,18 @@ import { SettingLevel } from "../../../../settings/SettingLevel";
 import Field from "../../../../components/views/elements/Field";
 import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
 import DialogButtons from "../../../../components/views/elements/DialogButtons";
-import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps";
 import { IIndexStats } from "../../../../indexing/BaseEventIndexManager";
 
-interface IProps extends IDialogProps {}
+interface IProps {
+    onFinished(): void;
+}
 
 interface IState {
     eventIndexSize: number;
     eventCount: number;
     crawlingRoomsCount: number;
     roomCount: number;
-    currentRoom: string;
+    currentRoom: string | null;
     crawlerSleepTime: number;
 }
 
@@ -60,7 +61,8 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
 
     public updateCurrentRoom = async (room: Room): Promise<void> => {
         const eventIndex = EventIndexPeg.get();
-        let stats: IIndexStats;
+        if (!eventIndex) return;
+        let stats: IIndexStats | undefined;
 
         try {
             stats = await eventIndex.getStats();
@@ -70,7 +72,7 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
             return;
         }
 
-        let currentRoom = null;
+        let currentRoom: string | null = null;
 
         if (room) currentRoom = room.name;
         const roomStats = eventIndex.crawlingRooms();
@@ -78,8 +80,8 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
         const roomCount = roomStats.totalRooms.size;
 
         this.setState({
-            eventIndexSize: stats.size,
-            eventCount: stats.eventCount,
+            eventIndexSize: stats?.size ?? 0,
+            eventCount: stats?.eventCount ?? 0,
             crawlingRoomsCount: crawlingRoomsCount,
             roomCount: roomCount,
             currentRoom: currentRoom,
@@ -99,7 +101,7 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
         let crawlingRoomsCount = 0;
         let roomCount = 0;
         let eventCount = 0;
-        let currentRoom = null;
+        let currentRoom: string | null = null;
 
         const eventIndex = EventIndexPeg.get();
 
@@ -108,8 +110,10 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
 
             try {
                 const stats = await eventIndex.getStats();
-                eventIndexSize = stats.size;
-                eventCount = stats.eventCount;
+                if (stats) {
+                    eventIndexSize = stats.size;
+                    eventCount = stats.eventCount;
+                }
             } catch {
                 // This call may fail if sporadically, not a huge issue as we
                 // will try later again in the updateCurrentRoom call and
@@ -135,7 +139,7 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
 
     private onDisable = async (): Promise<void> => {
         const DisableEventIndexDialog = (await import("./DisableEventIndexDialog")).default;
-        Modal.createDialog(DisableEventIndexDialog, null, null, /* priority = */ false, /* static = */ true);
+        Modal.createDialog(DisableEventIndexDialog, undefined, undefined, /* priority = */ false, /* static = */ true);
     };
 
     private onCrawlerSleepTimeChange = (e: ChangeEvent<HTMLInputElement>): void => {
@@ -157,11 +161,9 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
 
         const eventIndexingSettings = (
             <div>
-                {_t(
-                    "%(brand)s is securely caching encrypted messages locally for them " +
-                        "to appear in search results:",
-                    { brand },
-                )}
+                {_t("%(brand)s is securely caching encrypted messages locally for them to appear in search results:", {
+                    brand,
+                })}
                 <div className="mx_SettingsTab_subsectionText">
                     {crawlerState}
                     <br />
diff --git a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx
index a9327f2a467..ec8cf31f30f 100644
--- a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx
+++ b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx
@@ -26,7 +26,6 @@ import { accessSecretStorage } from "../../../../SecurityManager";
 import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
 import { copyNode } from "../../../../utils/strings";
 import PassphraseField from "../../../../components/views/auth/PassphraseField";
-import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps";
 import Field from "../../../../components/views/elements/Field";
 import Spinner from "../../../../components/views/elements/Spinner";
 import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
@@ -45,10 +44,12 @@ enum Phase {
 
 const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
 
-interface IProps extends IDialogProps {}
+interface IProps {
+    onFinished(done?: boolean): void;
+}
 
 interface IState {
-    secureSecretStorage: boolean;
+    secureSecretStorage: boolean | null;
     phase: Phase;
     passPhrase: string;
     passPhraseValid: boolean;
@@ -120,7 +121,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
         const { secureSecretStorage } = this.state;
         this.setState({
             phase: Phase.BackingUp,
-            error: null,
+            error: undefined,
         });
         let info;
         try {
@@ -218,7 +219,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
 
     private onPassPhraseValidate = (result: IValidationResult): void => {
         this.setState({
-            passPhraseValid: result.valid,
+            passPhraseValid: !!result.valid,
         });
     };
 
@@ -305,7 +306,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
             changeText = _t("Go back to set it again.");
         }
 
-        let passPhraseMatch = null;
+        let passPhraseMatch: JSX.Element | undefined;
         if (matchText) {
             passPhraseMatch = (
                 <div className="mx_CreateKeyBackupDialog_passPhraseMatch">
diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
index 1f2e7fd6b98..3e487398261 100644
--- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
+++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
@@ -43,7 +43,6 @@ import {
     SecureBackupSetupMethod,
 } from "../../../../utils/WellKnownUtils";
 import SecurityCustomisations from "../../../../customisations/Security";
-import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps";
 import Field from "../../../../components/views/elements/Field";
 import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
 import Spinner from "../../../../components/views/elements/Spinner";
@@ -67,10 +66,11 @@ enum Phase {
 
 const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
 
-interface IProps extends IDialogProps {
-    hasCancel: boolean;
-    accountPassword: string;
-    forceReset: boolean;
+interface IProps {
+    hasCancel?: boolean;
+    accountPassword?: string;
+    forceReset?: boolean;
+    onFinished(ok?: boolean): void;
 }
 
 interface IState {
@@ -81,13 +81,13 @@ interface IState {
     copied: boolean;
     downloaded: boolean;
     setPassphrase: boolean;
-    backupInfo: IKeyBackupInfo;
-    backupSigStatus: TrustInfo;
+    backupInfo: IKeyBackupInfo | null;
+    backupSigStatus: TrustInfo | null;
     // does the server offer a UI auth flow with just m.login.password
     // for /keys/device_signing/upload?
-    canUploadKeysWithPasswordOnly: boolean;
+    canUploadKeysWithPasswordOnly: boolean | null;
     accountPassword: string;
-    accountPasswordCorrect: boolean;
+    accountPasswordCorrect: boolean | null;
     canSkip: boolean;
     passPhraseKeySelected: string;
     error?: string;
@@ -119,7 +119,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
         }
 
         const accountPassword = props.accountPassword || "";
-        let canUploadKeysWithPasswordOnly = null;
+        let canUploadKeysWithPasswordOnly: boolean | null = null;
         if (accountPassword) {
             // If we have an account password in memory, let's simplify and
             // assume it means password auth is also supported for device
@@ -172,12 +172,14 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
         this.fetchBackupInfo();
     }
 
-    private async fetchBackupInfo(): Promise<{ backupInfo: IKeyBackupInfo; backupSigStatus: TrustInfo }> {
+    private async fetchBackupInfo(): Promise<{ backupInfo?: IKeyBackupInfo; backupSigStatus?: TrustInfo }> {
         try {
             const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
             const backupSigStatus =
                 // we may not have started crypto yet, in which case we definitely don't trust the backup
-                MatrixClientPeg.get().isCryptoEnabled() && (await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo));
+                backupInfo && MatrixClientPeg.get().isCryptoEnabled()
+                    ? await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo)
+                    : null;
 
             const { forceReset } = this.props;
             const phase = backupInfo && !forceReset ? Phase.Migrate : Phase.ChooseKeyPassphrase;
@@ -189,17 +191,18 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
             });
 
             return {
-                backupInfo,
-                backupSigStatus,
+                backupInfo: backupInfo ?? undefined,
+                backupSigStatus: backupSigStatus ?? undefined,
             };
         } catch (e) {
             this.setState({ phase: Phase.LoadError });
+            return {};
         }
     }
 
     private async queryKeyUploadAuth(): Promise<void> {
         try {
-            await MatrixClientPeg.get().uploadDeviceSigningKeys(null, {} as CrossSigningKeys);
+            await MatrixClientPeg.get().uploadDeviceSigningKeys(undefined, {} as CrossSigningKeys);
             // We should never get here: the server should always require
             // UI auth to upload device signing keys. If we do, we upload
             // no keys which would be a no-op.
@@ -248,7 +251,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
 
     private onMigrateFormSubmit = (e: React.FormEvent): void => {
         e.preventDefault();
-        if (this.state.backupSigStatus.usable) {
+        if (this.state.backupSigStatus?.usable) {
             this.bootstrapSecretStorage();
         } else {
             this.restoreBackup();
@@ -265,7 +268,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
     };
 
     private onDownloadClick = (): void => {
-        const blob = new Blob([this.recoveryKey.encodedPrivateKey], {
+        const blob = new Blob([this.recoveryKey.encodedPrivateKey!], {
             type: "text/plain;charset=us-ascii",
         });
         FileSaver.saveAs(blob, "security-key.txt");
@@ -323,7 +326,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
     private bootstrapSecretStorage = async (): Promise<void> => {
         this.setState({
             phase: Phase.Storing,
-            error: null,
+            error: undefined,
         });
 
         const cli = MatrixClientPeg.get();
@@ -351,7 +354,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                 });
                 await cli.bootstrapSecretStorage({
                     createSecretStorageKey: async () => this.recoveryKey,
-                    keyBackupInfo: this.state.backupInfo,
+                    keyBackupInfo: this.state.backupInfo!,
                     setupNewKeyBackup: !this.state.backupInfo,
                     getKeyBackupPassphrase: async (): Promise<Uint8Array> => {
                         // We may already have the backup key if we earlier went
@@ -399,14 +402,14 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                 showSummary: false,
                 keyCallback,
             },
-            null,
+            undefined,
             /* priority = */ false,
             /* static = */ false,
         );
 
         await finished;
         const { backupSigStatus } = await this.fetchBackupInfo();
-        if (backupSigStatus.usable && this.state.canUploadKeysWithPasswordOnly && this.state.accountPassword) {
+        if (backupSigStatus?.usable && this.state.canUploadKeysWithPasswordOnly && this.state.accountPassword) {
             this.bootstrapSecretStorage();
         }
     };
@@ -467,7 +470,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
 
     private onPassPhraseValidate = (result: IValidationResult): void => {
         this.setState({
-            passPhraseValid: result.valid,
+            passPhraseValid: !!result.valid,
         });
     };
 
@@ -581,13 +584,13 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                             label={_t("Password")}
                             value={this.state.accountPassword}
                             onChange={this.onAccountPasswordChange}
-                            forceValidity={this.state.accountPasswordCorrect === false ? false : null}
+                            forceValidity={this.state.accountPasswordCorrect === false ? false : undefined}
                             autoFocus={true}
                         />
                     </div>
                 </div>
             );
-        } else if (!this.state.backupSigStatus.usable) {
+        } else if (!this.state.backupSigStatus?.usable) {
             authPrompt = (
                 <div>
                     <div>{_t("Restore your key backup to upgrade your encryption")}</div>
@@ -612,7 +615,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                     primaryButton={nextCaption}
                     onPrimaryButtonClick={this.onMigrateFormSubmit}
                     hasCancel={false}
-                    primaryDisabled={this.state.canUploadKeysWithPasswordOnly && !this.state.accountPassword}
+                    primaryDisabled={!!this.state.canUploadKeysWithPasswordOnly && !this.state.accountPassword}
                 >
                     <button type="button" className="danger" onClick={this.onCancelClick}>
                         {_t("Skip")}
@@ -680,7 +683,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
             changeText = _t("Go back to set it again.");
         }
 
-        let passPhraseMatch = null;
+        let passPhraseMatch: JSX.Element | undefined;
         if (matchText) {
             passPhraseMatch = (
                 <div>
@@ -721,7 +724,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
     }
 
     private renderPhaseShowKey(): JSX.Element {
-        let continueButton;
+        let continueButton: JSX.Element;
         if (this.state.phase === Phase.ShowKey) {
             continueButton = (
                 <DialogButtons
@@ -928,7 +931,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
             }
         }
 
-        let titleClass = null;
+        let titleClass: string | string[] | undefined;
         switch (this.state.phase) {
             case Phase.Passphrase:
             case Phase.PassphraseConfirm:
diff --git a/src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx b/src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx
index 26c49b40fcd..139ede4d9ce 100644
--- a/src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx
+++ b/src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx
@@ -22,7 +22,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../../languageHandler";
 import * as MegolmExportEncryption from "../../../../utils/MegolmExportEncryption";
-import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps";
 import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
 import Field from "../../../../components/views/elements/Field";
 import { KeysStartingWith } from "../../../../@types/common";
@@ -32,13 +31,14 @@ enum Phase {
     Exporting = "exporting",
 }
 
-interface IProps extends IDialogProps {
+interface IProps {
     matrixClient: MatrixClient;
+    onFinished(doExport?: boolean): void;
 }
 
 interface IState {
     phase: Phase;
-    errStr: string;
+    errStr: string | null;
     passphrase1: string;
     passphrase2: string;
 }
diff --git a/src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx b/src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx
index 5d3864e811c..d2552b4093b 100644
--- a/src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx
+++ b/src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx
@@ -21,7 +21,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import * as MegolmExportEncryption from "../../../../utils/MegolmExportEncryption";
 import { _t } from "../../../../languageHandler";
-import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps";
 import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
 import Field from "../../../../components/views/elements/Field";
 
@@ -29,7 +28,11 @@ function readFileAsArrayBuffer(file: File): Promise<ArrayBuffer> {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = (e) => {
-            resolve(e.target.result as ArrayBuffer);
+            if (e.target?.result) {
+                resolve(e.target.result as ArrayBuffer);
+            } else {
+                reject(new Error("Failed to read file due to unknown error"));
+            }
         };
         reader.onerror = reject;
 
@@ -42,14 +45,15 @@ enum Phase {
     Importing = "importing",
 }
 
-interface IProps extends IDialogProps {
+interface IProps {
     matrixClient: MatrixClient;
+    onFinished(imported?: boolean): void;
 }
 
 interface IState {
     enableSubmit: boolean;
     phase: Phase;
-    errStr: string;
+    errStr: string | null;
     passphrase: string;
 }
 
@@ -73,7 +77,7 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
     }
 
     private onFormChange = (): void => {
-        const files = this.file.current.files;
+        const files = this.file.current?.files;
         this.setState({
             enableSubmit: this.state.passphrase !== "" && !!files?.length,
         });
@@ -87,7 +91,10 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
     private onFormSubmit = (ev: React.FormEvent): boolean => {
         ev.preventDefault();
         // noinspection JSIgnoredPromiseFromCall
-        this.startImport(this.file.current.files[0], this.state.passphrase);
+        const file = this.file.current?.files?.[0];
+        if (file) {
+            this.startImport(file, this.state.passphrase);
+        }
         return false;
     };
 
diff --git a/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx b/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx
index fbb823dd8ec..7268f62e1c8 100644
--- a/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx
+++ b/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx
@@ -24,12 +24,12 @@ import { _t } from "../../../../languageHandler";
 import Modal from "../../../../Modal";
 import RestoreKeyBackupDialog from "../../../../components/views/dialogs/security/RestoreKeyBackupDialog";
 import { Action } from "../../../../dispatcher/actions";
-import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps";
 import DialogButtons from "../../../../components/views/elements/DialogButtons";
 import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
 
-interface IProps extends IDialogProps {
+interface IProps {
     newVersionInfo: IKeyBackupInfo;
+    onFinished(): void;
 }
 
 export default class NewRecoveryMethodDialog extends React.PureComponent<IProps> {
diff --git a/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx b/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx
index f795a3e534e..7363f192a20 100644
--- a/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx
+++ b/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx
@@ -21,11 +21,12 @@ import dis from "../../../../dispatcher/dispatcher";
 import { _t } from "../../../../languageHandler";
 import Modal from "../../../../Modal";
 import { Action } from "../../../../dispatcher/actions";
-import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps";
 import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
 import DialogButtons from "../../../../components/views/elements/DialogButtons";
 
-interface IProps extends IDialogProps {}
+interface IProps {
+    onFinished(): void;
+}
 
 export default class RecoveryMethodRemovedDialog extends React.PureComponent<IProps> {
     private onGoToSettingsClick = (): void => {
@@ -38,7 +39,7 @@ export default class RecoveryMethodRemovedDialog extends React.PureComponent<IPr
         Modal.createDialogAsync(
             import("./CreateKeyBackupDialog") as unknown as Promise<ComponentType<{}>>,
             undefined,
-            null,
+            undefined,
             /* priority = */ false,
             /* static = */ true,
         );
diff --git a/src/autocomplete/Autocompleter.ts b/src/autocomplete/Autocompleter.ts
index 7a619fedc79..59e61318dc4 100644
--- a/src/autocomplete/Autocompleter.ts
+++ b/src/autocomplete/Autocompleter.ts
@@ -27,6 +27,7 @@ import { timeout } from "../utils/promise";
 import AutocompleteProvider, { ICommand } from "./AutocompleteProvider";
 import SpaceProvider from "./SpaceProvider";
 import { TimelineRenderingType } from "../contexts/RoomContext";
+import { filterBoolean } from "../utils/arrays";
 
 export interface ISelectionRange {
     beginning?: boolean; // whether the selection is in the first block of the editor or not
@@ -55,7 +56,7 @@ const PROVIDER_COMPLETION_TIMEOUT = 3000;
 export interface IProviderCompletions {
     completions: ICompletion[];
     provider: AutocompleteProvider;
-    command: ICommand;
+    command: Partial<ICommand>;
 }
 
 export default class Autocompleter {
@@ -98,8 +99,8 @@ export default class Autocompleter {
         );
 
         // map then filter to maintain the index for the map-operation, for this.providers to line up
-        return completionsList
-            .map((completions, i) => {
+        return filterBoolean(
+            completionsList.map((completions, i) => {
                 if (!completions || !completions.length) return;
 
                 return {
@@ -112,7 +113,7 @@ export default class Autocompleter {
                      */
                     command: this.providers[i].getCurrentCommand(query, selection, force),
                 };
-            })
-            .filter(Boolean) as IProviderCompletions[];
+            }),
+        );
     }
 }
diff --git a/src/autocomplete/EmojiProvider.tsx b/src/autocomplete/EmojiProvider.tsx
index 7257a7a1ee5..5da6608cc3c 100644
--- a/src/autocomplete/EmojiProvider.tsx
+++ b/src/autocomplete/EmojiProvider.tsx
@@ -19,7 +19,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { uniq, sortBy, ListIteratee } from "lodash";
+import { uniq, sortBy, uniqBy, ListIteratee } from "lodash";
 import EMOTICON_REGEX from "emojibase-regex/emoticon";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -36,6 +36,7 @@ import { mediaFromMxc } from "../customisations/Media";
 import { ICustomEmoji, loadImageSet } from "../emojipicker/customemoji";
 import * as recent from "../emojipicker/recent";
 import { MatrixClientPeg } from "../MatrixClientPeg";
+import { filterBoolean } from "../utils/arrays";
 
 const LIMIT = 20;
 
@@ -126,7 +127,7 @@ export default class EmojiProvider extends AutocompleteProvider {
             shouldMatchWordsOnly: true,
         });
 
-        this.recentlyUsed = Array.from(new Set(recent.get().map(getEmojiFromUnicode).filter(Boolean))) as (IEmoji | ICustomEmoji)[];
+        this.recentlyUsed = Array.from(new Set(filterBoolean(recent.get().map(getEmojiFromUnicode))));
     }
 
     public async getCompletions(
@@ -155,7 +156,7 @@ export default class EmojiProvider extends AutocompleteProvider {
             // do a match for the custom emoji
             completions = completions.concat(this.customEmojiMatcher.match(matchedString, limit));
 
-            let sorters: ListIteratee<ISortedEmoji>[] = [];
+            const sorters: ListIteratee<ISortedEmoji>[] = [];
             // make sure that emoticons come first
             sorters.push((c) => score(matchedString, c.emoji.emoticon || ""));
 
@@ -177,11 +178,27 @@ export default class EmojiProvider extends AutocompleteProvider {
             completions = completions.slice(0, LIMIT);
 
             // Do a second sort to place emoji matching with frequently used one on top
-            sorters = [];
+            const recentlyUsedAutocomplete: ISortedEmoji[] = [];
             this.recentlyUsed.forEach((emoji) => {
-                sorters.push((c) => score(emoji.shortcodes[0], c.emoji.shortcodes[0]));
+                if (emoji.shortcodes[0].indexOf(trimmedMatch) === 0) {
+                    recentlyUsedAutocomplete.push({ emoji: emoji, _orderBy: 0 });
+                }
             });
-            completions = sortBy<ISortedEmoji>(uniq(completions), sorters);
+
+            //if there is an exact shortcode match in the frequently used emojis, it goes before everything
+            for (let i = 0; i < recentlyUsedAutocomplete.length; i++) {
+                if (recentlyUsedAutocomplete[i].emoji.shortcodes[0] === trimmedMatch) {
+                    const exactMatchEmoji = recentlyUsedAutocomplete[i];
+                    for (let j = i; j > 0; j--) {
+                        recentlyUsedAutocomplete[j] = recentlyUsedAutocomplete[j - 1];
+                    }
+                    recentlyUsedAutocomplete[0] = exactMatchEmoji;
+                    break;
+                }
+            }
+
+            completions = recentlyUsedAutocomplete.concat(completions);
+            completions = uniqBy(completions, "emoji");
 
             completionResult = completions
                 .map((c) => {
diff --git a/src/components/structures/EmbeddedPage.tsx b/src/components/structures/EmbeddedPage.tsx
index cbd7d885c7e..7ee30cb3ec6 100644
--- a/src/components/structures/EmbeddedPage.tsx
+++ b/src/components/structures/EmbeddedPage.tsx
@@ -46,7 +46,7 @@ interface IState {
 export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
     private unmounted = false;
-    private dispatcherRef: string = null;
+    private dispatcherRef: string | null = null;
 
     public constructor(props: IProps, context: typeof MatrixClientContext) {
         super(props, context);
@@ -64,7 +64,7 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
         let res: Response;
 
         try {
-            res = await fetch(this.props.url, { method: "GET" });
+            res = await fetch(this.props.url!, { method: "GET" });
         } catch (err) {
             if (this.unmounted) return;
             logger.warn(`Error loading page: ${err}`);
@@ -84,7 +84,7 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
 
         if (this.props.replaceMap) {
             Object.keys(this.props.replaceMap).forEach((key) => {
-                body = body.split(key).join(this.props.replaceMap[key]);
+                body = body.split(key).join(this.props.replaceMap![key]);
             });
         }
 
@@ -123,8 +123,7 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
         const client = this.context || MatrixClientPeg.get();
         const isGuest = client ? client.isGuest() : true;
         const className = this.props.className;
-        const classes = classnames({
-            [className]: true,
+        const classes = classnames(className, {
             [`${className}_guest`]: isGuest,
             [`${className}_loggedIn`]: !!client,
         });
diff --git a/src/components/structures/FileDropTarget.tsx b/src/components/structures/FileDropTarget.tsx
index e8a8fa5e289..2f6bc13d798 100644
--- a/src/components/structures/FileDropTarget.tsx
+++ b/src/components/structures/FileDropTarget.tsx
@@ -40,6 +40,7 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
         const onDragEnter = (ev: DragEvent): void => {
             ev.stopPropagation();
             ev.preventDefault();
+            if (!ev.dataTransfer) return;
 
             setState((state) => ({
                 // We always increment the counter no matter the types, because dragging is
@@ -49,7 +50,8 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
                 // https://docs.w3cub.com/dom/datatransfer/types
                 // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file
                 dragging:
-                    ev.dataTransfer.types.includes("Files") || ev.dataTransfer.types.includes("application/x-moz-file")
+                    ev.dataTransfer!.types.includes("Files") ||
+                    ev.dataTransfer!.types.includes("application/x-moz-file")
                         ? true
                         : state.dragging,
             }));
@@ -68,6 +70,7 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
         const onDragOver = (ev: DragEvent): void => {
             ev.stopPropagation();
             ev.preventDefault();
+            if (!ev.dataTransfer) return;
 
             ev.dataTransfer.dropEffect = "none";
 
@@ -82,6 +85,7 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
         const onDrop = (ev: DragEvent): void => {
             ev.stopPropagation();
             ev.preventDefault();
+            if (!ev.dataTransfer) return;
             onFileDrop(ev.dataTransfer);
 
             setState((state) => ({
diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx
index ccbb7621357..892da0b8cd8 100644
--- a/src/components/structures/FilePanel.tsx
+++ b/src/components/structures/FilePanel.tsx
@@ -68,7 +68,7 @@ class FilePanel extends React.Component<IProps, IState> {
 
     private onRoomTimeline = (
         ev: MatrixEvent,
-        room: Room | null,
+        room: Room | undefined,
         toStartOfTimeline: boolean,
         removed: boolean,
         data: IRoomTimelineData,
@@ -80,7 +80,7 @@ class FilePanel extends React.Component<IProps, IState> {
         client.decryptEventIfNeeded(ev);
 
         if (ev.isBeingDecrypted()) {
-            this.decryptingEvents.add(ev.getId());
+            this.decryptingEvents.add(ev.getId()!);
         } else {
             this.addEncryptedLiveEvent(ev);
         }
@@ -88,7 +88,7 @@ class FilePanel extends React.Component<IProps, IState> {
 
     private onEventDecrypted = (ev: MatrixEvent, err?: any): void => {
         if (ev.getRoomId() !== this.props.roomId) return;
-        const eventId = ev.getId();
+        const eventId = ev.getId()!;
 
         if (!this.decryptingEvents.delete(eventId)) return;
         if (err) return;
@@ -105,7 +105,7 @@ class FilePanel extends React.Component<IProps, IState> {
             return;
         }
 
-        if (!this.state.timelineSet.eventIdToTimeline(ev.getId())) {
+        if (!this.state.timelineSet.eventIdToTimeline(ev.getId()!)) {
             this.state.timelineSet.addEventToTimeline(ev, timeline, false);
         }
     }
diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx
index 13fc1325166..bb2fbc068df 100644
--- a/src/components/structures/HomePage.tsx
+++ b/src/components/structures/HomePage.tsx
@@ -56,15 +56,15 @@ const getOwnProfile = (
     userId: string,
 ): {
     displayName: string;
-    avatarUrl: string;
+    avatarUrl?: string;
 } => ({
     displayName: OwnProfileStore.instance.displayName || userId,
-    avatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(AVATAR_SIZE),
+    avatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(AVATAR_SIZE) ?? undefined,
 });
 
 const UserWelcomeTop: React.FC = () => {
     const cli = useContext(MatrixClientContext);
-    const userId = cli.getUserId();
+    const userId = cli.getUserId()!;
     const [ownProfile, setOwnProfile] = useState(getOwnProfile(userId));
     useEventEmitter(OwnProfileStore.instance, UPDATE_EVENT, () => {
         setOwnProfile(getOwnProfile(userId));
diff --git a/src/components/structures/HostSignupAction.tsx b/src/components/structures/HostSignupAction.tsx
deleted file mode 100644
index 757a7360fb1..00000000000
--- a/src/components/structures/HostSignupAction.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from "react";
-
-import { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../views/context_menus/IconizedContextMenu";
-import { _t } from "../../languageHandler";
-import { HostSignupStore } from "../../stores/HostSignupStore";
-import SdkConfig from "../../SdkConfig";
-
-interface IProps {
-    onClick?(): void;
-}
-
-interface IState {}
-
-export default class HostSignupAction extends React.PureComponent<IProps, IState> {
-    private openDialog = async (): Promise<void> => {
-        this.props.onClick?.();
-        await HostSignupStore.instance.setHostSignupActive(true);
-    };
-
-    public render(): React.ReactNode {
-        const hostSignupConfig = SdkConfig.getObject("host_signup");
-        if (!hostSignupConfig?.get("brand")) {
-            return null;
-        }
-
-        return (
-            <IconizedContextMenuOptionList>
-                <IconizedContextMenuOption
-                    iconClassName="mx_UserMenu_iconHosting"
-                    label={_t("Upgrade to %(hostSignupBrand)s", {
-                        hostSignupBrand: hostSignupConfig.get("brand"),
-                    })}
-                    onClick={this.openDialog}
-                />
-            </IconizedContextMenuOptionList>
-        );
-    }
-}
diff --git a/src/components/structures/InteractiveAuth.tsx b/src/components/structures/InteractiveAuth.tsx
index fd83f0aea24..d737c6dd5e2 100644
--- a/src/components/structures/InteractiveAuth.tsx
+++ b/src/components/structures/InteractiveAuth.tsx
@@ -33,7 +33,7 @@ export const ERROR_USER_CANCELLED = new Error("User cancelled auth session");
 
 type InteractiveAuthCallbackSuccess = (
     success: true,
-    response: IAuthData,
+    response?: IAuthData,
     extra?: { emailSid?: string; clientSecret?: string },
 ) => void;
 type InteractiveAuthCallbackFailure = (success: false, response: IAuthData | Error) => void;
@@ -80,7 +80,7 @@ interface IProps {
     // Called when the stage changes, or the stage's phase changes. First
     // argument is the stage, second is the phase. Some stages do not have
     // phases and will be counted as 0 (numeric).
-    onStagePhaseChange?(stage: AuthType, phase: number): void;
+    onStagePhaseChange?(stage: AuthType | null, phase: number): void;
 }
 
 interface IState {
@@ -94,7 +94,7 @@ interface IState {
 
 export default class InteractiveAuthComponent extends React.Component<IProps, IState> {
     private readonly authLogic: InteractiveAuth;
-    private readonly intervalId: number = null;
+    private readonly intervalId: number | null = null;
     private readonly stageComponent = createRef<IStageComponent>();
 
     private unmounted = false;
@@ -103,10 +103,7 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
         super(props);
 
         this.state = {
-            authStage: null,
             busy: false,
-            errorText: null,
-            errorCode: null,
             submitButtonEnabled: false,
         };
 
@@ -173,7 +170,8 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
             busy: true,
         });
         try {
-            return await this.props.requestEmailToken(email, secret, attempt, session);
+            // We know this method only gets called on flows where requestEmailToken is passed but types don't
+            return await this.props.requestEmailToken!(email, secret, attempt, session);
         } finally {
             this.setState({
                 busy: false,
@@ -213,8 +211,8 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
         if (busy) {
             this.setState({
                 busy: true,
-                errorText: null,
-                errorCode: null,
+                errorText: undefined,
+                errorCode: undefined,
             });
         }
         // The JS SDK eagerly reports itself as "not busy" right after any
@@ -234,7 +232,7 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
     };
 
     private onPhaseChange = (newPhase: number): void => {
-        this.props.onStagePhaseChange?.(this.state.authStage, newPhase || 0);
+        this.props.onStagePhaseChange?.(this.state.authStage ?? null, newPhase || 0);
     };
 
     private onStageCancel = (): void => {
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 0580cd73987..1df623c9210 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -166,10 +166,11 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             }
         >();
 
-        let lastTopHeader;
-        let firstBottomHeader;
+        let lastTopHeader: HTMLDivElement | undefined;
+        let firstBottomHeader: HTMLDivElement | undefined;
         for (const sublist of sublists) {
             const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist_stickable");
+            if (!header) continue; // this should never occur
             header.style.removeProperty("display"); // always clear display:none first
 
             // When an element is <=40% off screen, make it take over
@@ -196,7 +197,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         // cause a no-op update, as adding/removing properties that are/aren't there cause
         // layout updates.
         for (const header of targetStyles.keys()) {
-            const style = targetStyles.get(header);
+            const style = targetStyles.get(header)!;
 
             if (style.makeInvisible) {
                 // we will have already removed the 'display: none', so add it back.
@@ -324,7 +325,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     }
 
     private renderSearchDialExplore(): React.ReactNode {
-        let dialPadButton = null;
+        let dialPadButton: JSX.Element | undefined;
 
         // If we have dialer support, show a button to bring up the dial pad
         // to start a new call
@@ -338,7 +339,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             );
         }
 
-        let rightButton: JSX.Element;
+        let rightButton: JSX.Element | undefined;
         if (this.state.showBreadcrumbs === BreadcrumbsMode.Labs) {
             rightButton = <RecentlyViewedButton />;
         } else if (
diff --git a/src/components/structures/LegacyCallEventGrouper.ts b/src/components/structures/LegacyCallEventGrouper.ts
index 53653529218..4abd4d8d191 100644
--- a/src/components/structures/LegacyCallEventGrouper.ts
+++ b/src/components/structures/LegacyCallEventGrouper.ts
@@ -35,7 +35,7 @@ const CONNECTING_STATES = [
     CallState.CreateAnswer,
 ];
 
-const SUPPORTED_STATES = [CallState.Connected, CallState.Ringing];
+const SUPPORTED_STATES = [CallState.Connected, CallState.Ringing, CallState.Ended];
 
 export enum CustomCallState {
     Missed = "missed",
@@ -72,7 +72,7 @@ export function buildLegacyCallEventGroupers(
 
 export default class LegacyCallEventGrouper extends EventEmitter {
     private events: Set<MatrixEvent> = new Set<MatrixEvent>();
-    private call: MatrixCall;
+    private call: MatrixCall | null = null;
     public state: CallState | CustomCallState;
 
     public constructor() {
@@ -111,7 +111,7 @@ export default class LegacyCallEventGrouper extends EventEmitter {
     }
 
     public get hangupReason(): string | null {
-        return this.hangup?.getContent()?.reason;
+        return this.call?.hangupReason ?? this.hangup?.getContent()?.reason ?? null;
     }
 
     public get rejectParty(): string {
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 165957e09c1..30eefb2b6b2 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -48,7 +48,6 @@ import SoundPackContainer from "./SoundPackContainer";
 import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import Modal from "../../Modal";
 import { ICollapseConfig } from "../../resizer/distributors/collapse";
-import HostSignupContainer from "../views/host_signup/HostSignupContainer";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import { IOpts } from "../../createRoom";
 import SpacePanel from "../views/spaces/SpacePanel";
@@ -718,7 +717,6 @@ class LoggedInView extends React.Component<IProps, IState> {
                 </div>
                 <PipContainer />
                 <NonUrgentToastContainer />
-                <HostSignupContainer />
                 <SoundPackContainer />
                 {audioFeedArraysForCalls}
             </MatrixClientContext.Provider>
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index d4eb7e28a9b..d622776482f 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentType, createRef } from "react";
+import React, { createRef } from "react";
 import {
     ClientEvent,
     createClient,
@@ -38,6 +38,8 @@ import "focus-visible";
 // what-input helps improve keyboard accessibility
 import "what-input";
 
+import type NewRecoveryMethodDialog from "../../async-components/views/dialogs/security/NewRecoveryMethodDialog";
+import type RecoveryMethodRemovedDialog from "../../async-components/views/dialogs/security/RecoveryMethodRemovedDialog";
 import PosthogTrackers from "../../PosthogTrackers";
 import { DecryptionFailureTracker } from "../../DecryptionFailureTracker";
 import { IMatrixClientCreds, MatrixClientPeg } from "../../MatrixClientPeg";
@@ -141,6 +143,7 @@ import RovingSpotlightDialog, { Filter } from "../views/dialogs/spotlight/Spotli
 import { findDMForUser } from "../../utils/dm/findDMForUser";
 import { Linkify } from "../../HtmlUtils";
 import { NotificationColor } from "../../stores/notifications/NotificationColor";
+import { UserTab } from "../views/dialogs/UserTab";
 
 // legacy export
 export { default as Views } from "../../Views";
@@ -227,8 +230,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
     private screenAfterLogin?: IScreen;
     private tokenLogin?: boolean;
-    private accountPassword?: string;
-    private accountPasswordTimer?: number;
     private focusComposer: boolean;
     private subTitleStatus: string;
     private prevWindowWidth: number;
@@ -297,9 +298,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             Lifecycle.loadSession();
         }
 
-        this.accountPassword = null;
-        this.accountPasswordTimer = null;
-
         this.dispatcherRef = dis.register(this.onAction);
 
         this.themeWatcher = new ThemeWatcher();
@@ -440,7 +438,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.state.resizeNotifier.removeListener("middlePanelResized", this.dispatchTimelineResize);
         window.removeEventListener("resize", this.onWindowResized);
 
-        if (this.accountPasswordTimer !== null) clearTimeout(this.accountPasswordTimer);
+        this.stores.accountPasswordStore.clearPassword();
         if (this.voiceBroadcastResumer) this.voiceBroadcastResumer.destroy();
     }
 
@@ -711,7 +709,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 const tabPayload = payload as OpenToTabPayload;
                 Modal.createDialog(
                     UserSettingsDialog,
-                    { initialTabId: tabPayload.initialTabId },
+                    { initialTabId: tabPayload.initialTabId as UserTab },
                     /*className=*/ null,
                     /*isPriority=*/ false,
                     /*isStatic=*/ true,
@@ -1658,14 +1656,14 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 Modal.createDialogAsync(
                     import(
                         "../../async-components/views/dialogs/security/NewRecoveryMethodDialog"
-                    ) as unknown as Promise<ComponentType<{}>>,
+                    ) as unknown as Promise<typeof NewRecoveryMethodDialog>,
                     { newVersionInfo },
                 );
             } else {
                 Modal.createDialogAsync(
                     import(
                         "../../async-components/views/dialogs/security/RecoveryMethodRemovedDialog"
-                    ) as unknown as Promise<ComponentType<{}>>,
+                    ) as unknown as Promise<typeof RecoveryMethodRemovedDialog>,
                 );
             }
         });
@@ -2011,13 +2009,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
      * this, as they instead jump straight into the app after `attemptTokenLogin`.
      */
     private onUserCompletedLoginFlow = async (credentials: IMatrixClientCreds, password: string): Promise<void> => {
-        this.accountPassword = password;
-        // self-destruct the password after 5mins
-        if (this.accountPasswordTimer !== null) clearTimeout(this.accountPasswordTimer);
-        this.accountPasswordTimer = window.setTimeout(() => {
-            this.accountPassword = null;
-            this.accountPasswordTimer = null;
-        }, 60 * 5 * 1000);
+        this.stores.accountPasswordStore.setPassword(password);
 
         // Create and start the client
         await Lifecycle.setLoggedIn(credentials);
@@ -2047,7 +2039,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
     public render(): React.ReactNode {
         const fragmentAfterLogin = this.getFragmentAfterLogin();
-        let view = null;
+        let view: JSX.Element;
 
         if (this.state.view === Views.LOADING) {
             view = (
@@ -2061,7 +2053,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             view = (
                 <E2eSetup
                     onFinished={this.onCompleteSecurityE2eSetupFinished}
-                    accountPassword={this.accountPassword}
+                    accountPassword={this.stores.accountPasswordStore.getPassword()}
                     tokenLogin={!!this.tokenLogin}
                 />
             );
@@ -2164,6 +2156,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             view = <UseCaseSelection onFinished={(useCase): Promise<void> => this.onShowPostLoginScreen(useCase)} />;
         } else {
             logger.error(`Unknown view ${this.state.view}`);
+            return null;
         }
 
         return (
diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx
index cda85e2a72d..166b5008f48 100644
--- a/src/components/structures/RightPanel.tsx
+++ b/src/components/structures/RightPanel.tsx
@@ -272,7 +272,14 @@ export default class RightPanel extends React.Component<IProps, IState> {
                 break;
 
             case RightPanelPhases.RoomSummary:
-                card = <RoomSummaryCard room={this.props.room} onClose={this.onClose} />;
+                card = (
+                    <RoomSummaryCard
+                        room={this.props.room}
+                        onClose={this.onClose}
+                        // whenever RightPanel is passed a room it is passed a permalinkcreator
+                        permalinkCreator={this.props.permalinkCreator!}
+                    />
+                );
                 break;
 
             case RightPanelPhases.Widget:
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index a281dd70057..bc925cc692e 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -116,8 +116,13 @@ import { RoomSearchView } from "./RoomSearchView";
 import eventSearch from "../../Searching";
 import VoipUserMapper from "../../VoipUserMapper";
 import { isCallEvent } from "./LegacyCallEventGrouper";
+import { WidgetType } from "../../widgets/WidgetType";
+import WidgetUtils from "../../utils/WidgetUtils";
+import { shouldEncryptRoomWithSingle3rdPartyInvite } from "../../utils/room/shouldEncryptRoomWithSingle3rdPartyInvite";
+import { WaitingForThirdPartyRoomView } from "./WaitingForThirdPartyRoomView";
 
 const DEBUG = false;
+const PREVENT_MULTIPLE_JITSI_WITHIN = 30_000;
 let debuglog = function (msg: string): void {};
 
 const BROWSER_SUPPORTS_SANDBOX = "sandbox" in document.createElement("iframe");
@@ -234,6 +239,7 @@ export interface IRoomState {
 }
 
 interface LocalRoomViewProps {
+    localRoom: LocalRoom;
     resizeNotifier: ResizeNotifier;
     permalinkCreator: RoomPermalinkCreator;
     roomView: RefObject<HTMLElement>;
@@ -249,7 +255,7 @@ interface LocalRoomViewProps {
 function LocalRoomView(props: LocalRoomViewProps): ReactElement {
     const context = useContext(RoomContext);
     const room = context.room as LocalRoom;
-    const encryptionEvent = context.room.currentState.getStateEvents(EventType.RoomEncryption)[0];
+    const encryptionEvent = props.localRoom.currentState.getStateEvents(EventType.RoomEncryption)[0];
     let encryptionTile: ReactNode;
 
     if (encryptionEvent) {
@@ -264,8 +270,8 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
         });
     };
 
-    let statusBar: ReactElement;
-    let composer: ReactElement;
+    let statusBar: ReactElement | null = null;
+    let composer: ReactElement | null = null;
 
     if (room.isError) {
         const buttons = (
@@ -284,7 +290,7 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
     } else {
         composer = (
             <MessageComposer
-                room={context.room}
+                room={props.localRoom}
                 resizeNotifier={props.resizeNotifier}
                 permalinkCreator={props.permalinkCreator}
             />
@@ -296,7 +302,7 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
             <ErrorBoundary>
                 <RoomHeader
                     room={context.room}
-                    searchInfo={null}
+                    searchInfo={undefined}
                     inRoom={true}
                     onSearchClick={null}
                     onInviteClick={null}
@@ -345,7 +351,7 @@ function LocalRoomCreateLoader(props: ILocalRoomCreateLoaderProps): ReactElement
             <ErrorBoundary>
                 <RoomHeader
                     room={context.room}
-                    searchInfo={null}
+                    searchInfo={undefined}
                     inRoom={true}
                     onSearchClick={null}
                     onInviteClick={null}
@@ -376,7 +382,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
     private roomView = createRef<HTMLElement>();
     private searchResultsPanel = createRef<ScrollPanel>();
-    private messagePanel: TimelinePanel;
+    private messagePanel?: TimelinePanel;
     private roomViewBody = createRef<HTMLDivElement>();
 
     public static contextType = SDKContext;
@@ -385,15 +391,19 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     public constructor(props: IRoomProps, context: React.ContextType<typeof SDKContext>) {
         super(props, context);
 
+        if (!context.client) {
+            throw new Error("Unable to create RoomView without MatrixClient");
+        }
+
         const llMembers = context.client.hasLazyLoadMembersEnabled();
         this.state = {
-            roomId: null,
+            roomId: undefined,
             roomLoading: true,
             peekLoading: false,
             shouldPeek: true,
             membersLoaded: !llMembers,
             numUnreadMessages: 0,
-            callState: null,
+            callState: undefined,
             activeCall: null,
             canPeek: false,
             canSelfRedact: false,
@@ -515,6 +525,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     private onWidgetStoreUpdate = (): void => {
         if (!this.state.room) return;
         this.checkWidgets(this.state.room);
+        this.doMaybeRemoveOwnJitsiWidget();
     };
 
     private onWidgetEchoStoreUpdate = (): void => {
@@ -535,6 +546,56 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         this.checkWidgets(this.state.room);
     };
 
+    /**
+     * Removes the Jitsi widget from the current user if
+     * - Multiple Jitsi widgets have been added within {@link PREVENT_MULTIPLE_JITSI_WITHIN}
+     * - The last (server timestamp) of these widgets is from the currrent user
+     * This solves the issue if some people decide to start a conference and click the call button at the same time.
+     */
+    private doMaybeRemoveOwnJitsiWidget(): void {
+        if (!this.state.roomId || !this.state.room || !this.context.client) return;
+
+        const apps = this.context.widgetStore.getApps(this.state.roomId);
+        const jitsiApps = apps.filter((app) => app.eventId && WidgetType.JITSI.matches(app.type));
+
+        // less than two Jitsi widgets → nothing to do
+        if (jitsiApps.length < 2) return;
+
+        const currentUserId = this.context.client.getSafeUserId();
+        const createdByCurrentUser = jitsiApps.find((apps) => apps.creatorUserId === currentUserId);
+
+        // no Jitsi widget from current user → nothing to do
+        if (!createdByCurrentUser) return;
+
+        const createdByCurrentUserEvent = this.state.room.findEventById(createdByCurrentUser.eventId!);
+
+        // widget event not found → nothing can be done
+        if (!createdByCurrentUserEvent) return;
+
+        const createdByCurrentUserTs = createdByCurrentUserEvent.getTs();
+
+        // widget timestamp is empty → nothing can be done
+        if (!createdByCurrentUserTs) return;
+
+        const lastCreatedByOtherTs = jitsiApps.reduce((maxByNow: number, app) => {
+            if (app.eventId === createdByCurrentUser.eventId) return maxByNow;
+
+            const appCreateTs = this.state.room!.findEventById(app.eventId!)?.getTs() || 0;
+            return Math.max(maxByNow, appCreateTs);
+        }, 0);
+
+        // last widget timestamp from other is empty → nothing can be done
+        if (!lastCreatedByOtherTs) return;
+
+        if (
+            createdByCurrentUserTs > lastCreatedByOtherTs &&
+            createdByCurrentUserTs - lastCreatedByOtherTs < PREVENT_MULTIPLE_JITSI_WITHIN
+        ) {
+            // more than one Jitsi widget with the last one from the current user → remove it
+            WidgetUtils.setRoomWidget(this.state.roomId, createdByCurrentUser.id);
+        }
+    }
+
     private checkWidgets = (room: Room): void => {
         this.setState({
             hasPinnedWidgets: this.context.widgetLayoutStore.hasPinnedWidgets(room),
@@ -1976,10 +2037,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         );
     }
 
-    private renderLocalRoomView(): ReactElement {
+    private renderLocalRoomView(localRoom: LocalRoom): ReactElement {
         return (
             <RoomContext.Provider value={this.state}>
                 <LocalRoomView
+                    localRoom={localRoom}
                     resizeNotifier={this.props.resizeNotifier}
                     permalinkCreator={this.permalinkCreator}
                     roomView={this.roomView}
@@ -1989,13 +2051,33 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         );
     }
 
+    private renderWaitingForThirdPartyRoomView(inviteEvent: MatrixEvent): ReactElement {
+        return (
+            <RoomContext.Provider value={this.state}>
+                <WaitingForThirdPartyRoomView
+                    resizeNotifier={this.props.resizeNotifier}
+                    roomView={this.roomView}
+                    inviteEvent={inviteEvent}
+                />
+            </RoomContext.Provider>
+        );
+    }
+
     public render(): React.ReactNode {
         if (this.state.room instanceof LocalRoom) {
             if (this.state.room.state === LocalRoomState.CREATING) {
                 return this.renderLocalRoomCreateLoader();
             }
 
-            return this.renderLocalRoomView();
+            return this.renderLocalRoomView(this.state.room);
+        }
+
+        if (this.state.room) {
+            const { shouldEncrypt, inviteEvent } = shouldEncryptRoomWithSingle3rdPartyInvite(this.state.room);
+
+            if (shouldEncrypt) {
+                return this.renderWaitingForThirdPartyRoomView(inviteEvent);
+            }
         }
 
         if (!this.state.room) {
@@ -2013,6 +2095,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                                 loading={loading}
                                 joining={this.state.joining}
                                 oobData={this.props.oobData}
+                                roomId={this.state.roomId}
                             />
                         </ErrorBoundary>
                     </div>
@@ -2042,7 +2125,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                                 invitedEmail={invitedEmail}
                                 oobData={this.props.oobData}
                                 signUrl={this.props.threepidInvite?.signUrl}
-                                room={this.state.room}
+                                roomId={this.state.roomId}
                             />
                         </ErrorBoundary>
                     </div>
@@ -2079,6 +2162,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                             error={this.state.roomLoadError}
                             joining={this.state.joining}
                             rejecting={this.state.rejecting}
+                            roomId={this.state.roomId}
                         />
                     </ErrorBoundary>
                 );
@@ -2108,6 +2192,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                                 canPreview={false}
                                 joining={this.state.joining}
                                 room={this.state.room}
+                                roomId={this.state.roomId}
                             />
                         </ErrorBoundary>
                     </div>
@@ -2200,6 +2285,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     oobData={this.props.oobData}
                     canPreview={this.state.canPeek}
                     room={this.state.room}
+                    roomId={this.state.roomId}
                 />
             );
             if (!this.state.canPeek && !this.state.room?.isSpaceRoom()) {
diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx
index 238eaa18611..d466af5a510 100644
--- a/src/components/structures/SpaceHierarchy.tsx
+++ b/src/components/structures/SpaceHierarchy.tsx
@@ -332,6 +332,7 @@ const Tile: React.FC<ITileProps> = ({
         <li
             className="mx_SpaceHierarchy_roomTileWrapper"
             role="treeitem"
+            aria-selected={selected}
             aria-expanded={children ? showChildren : undefined}
         >
             <AccessibleButton
diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx
index 69cc147bd09..10a603e5985 100644
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@@ -415,7 +415,7 @@ const SpaceAddExistingRooms: React.FC<{
                         {_t("Skip for now")}
                     </AccessibleButton>
                 }
-                filterPlaceholder={_t("Search for rooms or spaces")}
+                filterPlaceholder={_t("Search for rooms")}
                 onFinished={onFinished}
                 roomsRenderer={defaultRoomsRenderer}
                 dmsRenderer={defaultDmsRenderer}
diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx
index 0fca785cf3c..73770a51df2 100644
--- a/src/components/structures/TimelinePanel.tsx
+++ b/src/components/structures/TimelinePanel.tsx
@@ -1501,9 +1501,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
                         "do not have permission to view the message in question.",
                 );
             } else {
-                description = _t(
-                    "Tried to load a specific point in this room's timeline, but was " + "unable to find it.",
-                );
+                description = _t("Tried to load a specific point in this room's timeline, but was unable to find it.");
             }
 
             Modal.createDialog(ErrorDialog, {
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 77bb39bf009..03bbdc72585 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -42,7 +42,6 @@ import IconizedContextMenu, {
     IconizedContextMenuOptionList,
 } from "../views/context_menus/IconizedContextMenu";
 import { UIFeature } from "../../settings/UIFeature";
-import HostSignupAction from "./HostSignupAction";
 import SpaceStore from "../../stores/spaces/SpaceStore";
 import { UPDATE_SELECTED_SPACE } from "../../stores/spaces";
 import { Theme } from "../../settings/enums/Theme";
@@ -251,7 +250,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
         if (!this.state.contextMenuPosition) return null;
 
         let topSection;
-        const hostSignupConfig = SdkConfig.getObject("host_signup");
         if (MatrixClientPeg.get().isGuest()) {
             topSection = (
                 <div className="mx_UserMenu_contextMenu_header mx_UserMenu_contextMenu_guestPrompts">
@@ -279,15 +277,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     )}
                 </div>
             );
-        } else if (hostSignupConfig?.get("url")) {
-            // If hostSignup.domains is set to a non-empty array, only show
-            // dialog if the user is on the domain or a subdomain.
-            const hostSignupDomains = hostSignupConfig.get("domains") || [];
-            const mxDomain = MatrixClientPeg.get().getDomain();
-            const validDomains = hostSignupDomains.filter((d) => d === mxDomain || mxDomain.endsWith(`.${d}`));
-            if (!hostSignupConfig.get("domains") || validDomains.length > 0) {
-                topSection = <HostSignupAction onClick={this.onCloseMenu} />;
-            }
         }
 
         let homeButton = null;
@@ -397,7 +386,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
     public render(): React.ReactNode {
         const avatarSize = 32; // should match border-radius of the avatar
 
-        const userId = MatrixClientPeg.get().getUserId();
+        const userId = MatrixClientPeg.get().getSafeUserId();
         const displayName = OwnProfileStore.instance.displayName || userId;
         const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
 
diff --git a/src/components/structures/ViewSource.tsx b/src/components/structures/ViewSource.tsx
index faf445cef5a..f804eb2ce81 100644
--- a/src/components/structures/ViewSource.tsx
+++ b/src/components/structures/ViewSource.tsx
@@ -23,15 +23,15 @@ import { _t } from "../../languageHandler";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { canEditContent } from "../../utils/EventUtils";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { IDialogProps } from "../views/dialogs/IDialogProps";
 import BaseDialog from "../views/dialogs/BaseDialog";
 import { DevtoolsContext } from "../views/dialogs/devtools/BaseTool";
 import { StateEventEditor } from "../views/dialogs/devtools/RoomState";
 import { stringify, TimelineEventEditor } from "../views/dialogs/devtools/Event";
 import CopyableText from "../views/elements/CopyableText";
 
-interface IProps extends IDialogProps {
+interface IProps {
     mxEvent: MatrixEvent; // the MatrixEvent associated with the context menu
+    onFinished(): void;
 }
 
 interface IState {
@@ -139,15 +139,15 @@ export default class ViewSource extends React.Component<IProps, IState> {
     private canSendStateEvent(mxEvent: MatrixEvent): boolean {
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(mxEvent.getRoomId());
-        return room.currentState.mayClientSendStateEvent(mxEvent.getType(), cli);
+        return !!room?.currentState.mayClientSendStateEvent(mxEvent.getType(), cli);
     }
 
     public render(): React.ReactNode {
         const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
 
         const isEditing = this.state.isEditing;
-        const roomId = mxEvent.getRoomId();
-        const eventId = mxEvent.getId();
+        const roomId = mxEvent.getRoomId()!;
+        const eventId = mxEvent.getId()!;
         const canEdit = mxEvent.isState() ? this.canSendStateEvent(mxEvent) : canEditContent(this.props.mxEvent);
         return (
             <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t("View Source")}>
diff --git a/src/components/structures/WaitingForThirdPartyRoomView.tsx b/src/components/structures/WaitingForThirdPartyRoomView.tsx
new file mode 100644
index 00000000000..b747fd007f8
--- /dev/null
+++ b/src/components/structures/WaitingForThirdPartyRoomView.tsx
@@ -0,0 +1,82 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { RefObject } from "react";
+
+import { useRoomContext } from "../../contexts/RoomContext";
+import ResizeNotifier from "../../utils/ResizeNotifier";
+import { E2EStatus } from "../../utils/ShieldUtils";
+import ErrorBoundary from "../views/elements/ErrorBoundary";
+import RoomHeader from "../views/rooms/RoomHeader";
+import ScrollPanel from "./ScrollPanel";
+import EventTileBubble from "../views/messages/EventTileBubble";
+import NewRoomIntro from "../views/rooms/NewRoomIntro";
+import { UnwrappedEventTile } from "../views/rooms/EventTile";
+import { _t } from "../../languageHandler";
+
+interface Props {
+    roomView: RefObject<HTMLElement>;
+    resizeNotifier: ResizeNotifier;
+    inviteEvent: MatrixEvent;
+}
+
+/**
+ * Component that displays a waiting room for an encrypted DM with a third party invite.
+ * If encryption by default is enabled, DMs with a third party invite should be encrypted as well.
+ * To avoid UTDs, users are shown a waiting room until the others have joined.
+ */
+export const WaitingForThirdPartyRoomView: React.FC<Props> = ({ roomView, resizeNotifier, inviteEvent }) => {
+    const context = useRoomContext();
+
+    return (
+        <div className="mx_RoomView mx_RoomView--local">
+            <ErrorBoundary>
+                <RoomHeader
+                    room={context.room}
+                    inRoom={true}
+                    onSearchClick={null}
+                    onInviteClick={null}
+                    onForgetClick={null}
+                    e2eStatus={E2EStatus.Normal}
+                    onAppsClick={null}
+                    appsShown={false}
+                    excludedRightPanelPhaseButtons={[]}
+                    showButtons={false}
+                    enableRoomOptionsMenu={false}
+                    viewingCall={false}
+                    activeCall={null}
+                />
+                <main className="mx_RoomView_body" ref={roomView}>
+                    <div className="mx_RoomView_timeline">
+                        <ScrollPanel className="mx_RoomView_messagePanel" resizeNotifier={resizeNotifier}>
+                            <EventTileBubble
+                                className="mx_cryptoEvent mx_cryptoEvent_icon"
+                                title={_t("Waiting for users to join Element")}
+                                subtitle={_t(
+                                    "Once invited users have joined Element, you will be able to chat and the room will be end-to-end encrypted",
+                                )}
+                            />
+                            <NewRoomIntro />
+                            <UnwrappedEventTile mxEvent={inviteEvent} />
+                        </ScrollPanel>
+                    </div>
+                </main>
+            </ErrorBoundary>
+        </div>
+    );
+};
diff --git a/src/components/structures/auth/ForgotPassword.tsx b/src/components/structures/auth/ForgotPassword.tsx
index c3a6201252b..d7a51956f4d 100644
--- a/src/components/structures/auth/ForgotPassword.tsx
+++ b/src/components/structures/auth/ForgotPassword.tsx
@@ -368,7 +368,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
     }
 
     public async renderConfirmLogoutDevicesDialog(): Promise<boolean> {
-        const { finished } = Modal.createDialog<[boolean]>(QuestionDialog, {
+        const { finished } = Modal.createDialog(QuestionDialog, {
             title: _t("Warning!"),
             description: (
                 <div>
diff --git a/src/components/structures/auth/Login.tsx b/src/components/structures/auth/Login.tsx
index 243d56cee1a..97f3866f965 100644
--- a/src/components/structures/auth/Login.tsx
+++ b/src/components/structures/auth/Login.tsx
@@ -39,6 +39,7 @@ import AuthBody from "../../views/auth/AuthBody";
 import AuthHeader from "../../views/auth/AuthHeader";
 import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton";
 import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
+import { filterBoolean } from "../../../utils/arrays";
 
 // These are used in several places, and come from the js-sdk's autodiscovery
 // stuff. We define them here so that they'll be picked up by i18n.
@@ -120,15 +121,11 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
 
         this.state = {
             busy: false,
-            busyLoggingIn: null,
             errorText: null,
             loginIncorrect: false,
             canTryLogin: true,
 
-            flows: null,
-
             username: props.defaultUsername ? props.defaultUsername : "",
-            phoneCountry: null,
             phoneNumber: "",
 
             serverIsAlive: true,
@@ -167,7 +164,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         }
     }
 
-    public isBusy = (): boolean => this.state.busy || this.props.busy;
+    public isBusy = (): boolean => !!this.state.busy || !!this.props.busy;
 
     public onPasswordLogin: OnPasswordLogin = async (
         username: string | undefined,
@@ -349,7 +346,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
             ev.preventDefault();
             ev.stopPropagation();
             const ssoKind = ssoFlow.type === "m.login.sso" ? "sso" : "cas";
-            PlatformPeg.get().startSingleSignOn(
+            PlatformPeg.get()?.startSingleSignOn(
                 this.loginLogic.createTemporaryClient(),
                 ssoKind,
                 this.props.fragmentAfterLogin,
@@ -457,7 +454,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         }
 
         let errorText: ReactNode =
-            _t("There was a problem communicating with the homeserver, " + "please try again later.") +
+            _t("There was a problem communicating with the homeserver, please try again later.") +
             (errCode ? " (" + errCode + ")" : "");
 
         if (err instanceof ConnectionError) {
@@ -511,13 +508,13 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         return errorText;
     }
 
-    public renderLoginComponentForFlows(): JSX.Element {
+    public renderLoginComponentForFlows(): ReactNode {
         if (!this.state.flows) return null;
 
         // this is the ideal order we want to show the flows in
         const order = ["m.login.password", "m.login.sso"];
 
-        const flows = order.map((type) => this.state.flows.find((flow) => flow.type === type)).filter(Boolean);
+        const flows = filterBoolean(order.map((type) => this.state.flows.find((flow) => flow.type === type)));
         return (
             <React.Fragment>
                 {flows.map((flow) => {
diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx
index 196b3904177..dd9be190b2a 100644
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@@ -78,9 +78,9 @@ interface IProps {
 }
 
 interface IState {
+    // true if we're waiting for the user to complete
     busy: boolean;
     errorText?: ReactNode;
-    // true if we're waiting for the user to complete
     // We remember the values entered by the user because
     // the registration form will be unmounted during the
     // course of registration, but if there's an error we
@@ -88,7 +88,7 @@ interface IState {
     // values the user entered still in it. We can keep
     // them in this component's state since this component
     // persist for the duration of the registration process.
-    formVals: Record<string, string>;
+    formVals: Record<string, string | undefined>;
     // user-interactive auth
     // If we've been given a session ID, we're resuming
     // straight back into UI auth
@@ -96,9 +96,11 @@ interface IState {
     // If set, we've registered but are not going to log
     // the user in to their new account automatically.
     completedNoSignin: boolean;
-    flows: {
-        stages: string[];
-    }[];
+    flows:
+        | {
+              stages: string[];
+          }[]
+        | null;
     // We perform liveliness checks later, but for now suppress the errors.
     // We also track the server dead errors independently of the regular errors so
     // that we can render it differently, and override any other error the user may
@@ -158,7 +160,7 @@ export default class Registration extends React.Component<IProps, IState> {
         window.removeEventListener("beforeunload", this.unloadCallback);
     }
 
-    private unloadCallback = (event: BeforeUnloadEvent): string => {
+    private unloadCallback = (event: BeforeUnloadEvent): string | undefined => {
         if (this.state.doingUIAuth) {
             event.preventDefault();
             event.returnValue = "";
@@ -215,7 +217,7 @@ export default class Registration extends React.Component<IProps, IState> {
         this.loginLogic.setHomeserverUrl(hsUrl);
         this.loginLogic.setIdentityServerUrl(isUrl);
 
-        let ssoFlow: ISSOFlow;
+        let ssoFlow: ISSOFlow | undefined;
         try {
             const loginFlows = await this.loginLogic.getFlows();
             if (serverConfig !== this.latestServerConfig) return; // discard, serverConfig changed from under us
@@ -289,6 +291,7 @@ export default class Registration extends React.Component<IProps, IState> {
         sendAttempt: number,
         sessionId: string,
     ): Promise<IRequestTokenResponse> => {
+        if (!this.state.matrixClient) throw new Error("Matrix client has not yet been loaded");
         return this.state.matrixClient.requestRegisterEmailToken(
             emailAddress,
             clientSecret,
@@ -303,6 +306,8 @@ export default class Registration extends React.Component<IProps, IState> {
     };
 
     private onUIAuthFinished: InteractiveAuthCallback = async (success, response): Promise<void> => {
+        if (!this.state.matrixClient) throw new Error("Matrix client has not yet been loaded");
+
         debuglog("Registration: ui authentication finished: ", { success, response });
         if (!success) {
             let errorText: ReactNode = (response as Error).message || (response as Error).toString();
@@ -327,10 +332,8 @@ export default class Registration extends React.Component<IProps, IState> {
                     </div>
                 );
             } else if ((response as IAuthData).required_stages?.includes(AuthType.Msisdn)) {
-                let msisdnAvailable = false;
-                for (const flow of (response as IAuthData).available_flows) {
-                    msisdnAvailable = msisdnAvailable || flow.stages.includes(AuthType.Msisdn);
-                }
+                const flows = (response as IAuthData).available_flows ?? [];
+                const msisdnAvailable = flows.some((flow) => flow.stages.includes(AuthType.Msisdn));
                 if (!msisdnAvailable) {
                     errorText = _t("This server does not support authentication with a phone number.");
                 }
@@ -348,12 +351,16 @@ export default class Registration extends React.Component<IProps, IState> {
             return;
         }
 
-        MatrixClientPeg.setJustRegisteredUserId((response as IAuthData).user_id);
+        const userId = (response as IAuthData).user_id;
+        const accessToken = (response as IAuthData).access_token;
+        if (!userId || !accessToken) throw new Error("Registration failed");
+
+        MatrixClientPeg.setJustRegisteredUserId(userId);
 
         const newState: Partial<IState> = {
             doingUIAuth: false,
             registeredUsername: (response as IAuthData).user_id,
-            differentLoggedInUserId: null,
+            differentLoggedInUserId: undefined,
             completedNoSignin: false,
             // we're still busy until we get unmounted: don't show the registration form again
             busy: true,
@@ -393,13 +400,13 @@ export default class Registration extends React.Component<IProps, IState> {
             // the email, not the client that started the registration flow
             await this.props.onLoggedIn(
                 {
-                    userId: (response as IAuthData).user_id,
+                    userId,
                     deviceId: (response as IAuthData).device_id,
                     homeserverUrl: this.state.matrixClient.getHomeserverUrl(),
                     identityServerUrl: this.state.matrixClient.getIdentityServerUrl(),
-                    accessToken: (response as IAuthData).access_token,
+                    accessToken,
                 },
-                this.state.formVals.password,
+                this.state.formVals.password!,
             );
 
             this.setupPushers();
@@ -457,6 +464,8 @@ export default class Registration extends React.Component<IProps, IState> {
     };
 
     private makeRegisterRequest = (auth: IAuthData | null): Promise<IAuthData> => {
+        if (!this.state.matrixClient) throw new Error("Matrix client has not yet been loaded");
+
         const registerParams: IRegisterRequestParams = {
             username: this.state.formVals.username,
             password: this.state.formVals.password,
@@ -494,7 +503,7 @@ export default class Registration extends React.Component<IProps, IState> {
         return sessionLoaded;
     };
 
-    private renderRegisterComponent(): JSX.Element {
+    private renderRegisterComponent(): ReactNode {
         if (this.state.matrixClient && this.state.doingUIAuth) {
             return (
                 <InteractiveAuth
@@ -517,8 +526,8 @@ export default class Registration extends React.Component<IProps, IState> {
                     <Spinner />
                 </div>
             );
-        } else if (this.state.flows.length) {
-            let ssoSection;
+        } else if (this.state.matrixClient && this.state.flows.length) {
+            let ssoSection: JSX.Element | undefined;
             if (this.state.ssoFlow) {
                 let continueWithSection;
                 const providers = this.state.ssoFlow.identity_providers || [];
@@ -571,6 +580,8 @@ export default class Registration extends React.Component<IProps, IState> {
                 </React.Fragment>
             );
         }
+
+        return null;
     }
 
     public render(): React.ReactNode {
diff --git a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
index d1de4ba4b3f..72792a19990 100644
--- a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
+++ b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 
 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../../views/elements/AccessibleButton";
@@ -26,7 +26,8 @@ import { ErrorMessage } from "../../ErrorMessage";
 
 interface Props {
     email: string;
-    errorText: string | null;
+    errorText: ReactNode | null;
+    onFinished(): void; // This modal is weird in that the way you close it signals intent
     onCloseClick: () => void;
     onReEnterEmailClick: () => void;
     onResendClick: () => Promise<boolean>;
diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx
index a865f0aeef2..4f2fddc4ab8 100644
--- a/src/components/views/audio_messages/PlayPauseButton.tsx
+++ b/src/components/views/audio_messages/PlayPauseButton.tsx
@@ -60,7 +60,7 @@ export default class PlayPauseButton extends React.PureComponent<IProps> {
 
         return (
             <AccessibleTooltipButton
-                data-test-id="play-pause-button"
+                data-testid="play-pause-button"
                 className={classes}
                 title={isPlaying ? _t("Pause") : _t("Play")}
                 onClick={this.onClick}
diff --git a/src/components/views/auth/CaptchaForm.tsx b/src/components/views/auth/CaptchaForm.tsx
index 9119743378d..a34038f0006 100644
--- a/src/components/views/auth/CaptchaForm.tsx
+++ b/src/components/views/auth/CaptchaForm.tsx
@@ -65,7 +65,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
                 "src",
                 `https://www.recaptcha.net/recaptcha/api.js?onload=mxOnRecaptchaLoaded&render=explicit`,
             );
-            this.recaptchaContainer.current.appendChild(scriptTag);
+            this.recaptchaContainer.current?.appendChild(scriptTag);
         }
     }
 
@@ -91,11 +91,11 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
         const publicKey = this.props.sitePublicKey;
         if (!publicKey) {
             logger.error("No public key for recaptcha!");
-            throw new Error("This server has not supplied enough information for Recaptcha " + "authentication");
+            throw new Error("This server has not supplied enough information for Recaptcha authentication");
         }
 
         logger.info("Rendering to %s", divId);
-        this.captchaWidgetId = global.grecaptcha.render(divId, {
+        this.captchaWidgetId = global.grecaptcha?.render(divId, {
             sitekey: publicKey,
             callback: this.props.onCaptchaResponse,
         });
@@ -113,7 +113,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
             this.renderRecaptcha(DIV_ID);
             // clear error if re-rendered
             this.setState({
-                errorText: null,
+                errorText: undefined,
             });
         } catch (e) {
             this.setState({
@@ -123,7 +123,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
     }
 
     public render(): React.ReactNode {
-        let error = null;
+        let error: JSX.Element | undefined;
         if (this.state.errorText) {
             error = <div className="error">{this.state.errorText}</div>;
         }
diff --git a/src/components/views/auth/EmailField.tsx b/src/components/views/auth/EmailField.tsx
index 2731503e383..0426c08f867 100644
--- a/src/components/views/auth/EmailField.tsx
+++ b/src/components/views/auth/EmailField.tsx
@@ -50,12 +50,12 @@ class EmailField extends PureComponent<IProps> {
             {
                 key: "required",
                 test: ({ value, allowEmpty }) => allowEmpty || !!value,
-                invalid: () => _t(this.props.labelRequired),
+                invalid: () => _t(this.props.labelRequired!),
             },
             {
                 key: "email",
                 test: ({ value }) => !value || Email.looksValid(value),
-                invalid: () => _t(this.props.labelInvalid),
+                invalid: () => _t(this.props.labelInvalid!),
             },
         ],
     });
@@ -80,7 +80,7 @@ class EmailField extends PureComponent<IProps> {
                 id={this.props.id}
                 ref={this.props.fieldRef}
                 type="text"
-                label={_t(this.props.label)}
+                label={_t(this.props.label!)}
                 value={this.props.value}
                 autoFocus={this.props.autoFocus}
                 onChange={this.props.onChange}
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx
index 79f777ce5d3..8910b91945c 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx
@@ -83,7 +83,7 @@ export const DEFAULT_PHASE = 0;
 interface IAuthEntryProps {
     matrixClient: MatrixClient;
     loginType: string;
-    authSessionId: string;
+    authSessionId?: string;
     errorText?: string;
     errorCode?: string;
     // Is the auth logic currently waiting for something to happen?
@@ -120,7 +120,7 @@ export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswor
             type: AuthType.Password,
             // TODO: Remove `user` once servers support proper UIA
             // See https://github.com/vector-im/element-web/issues/10312
-            user: this.props.matrixClient.credentials.userId,
+            user: this.props.matrixClient.credentials.userId ?? undefined,
             identifier: {
                 type: "m.id.user",
                 user: this.props.matrixClient.credentials.userId,
@@ -286,7 +286,7 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         //     }
         // }
 
-        const allPolicies = this.props.stageParams.policies || {};
+        const allPolicies = this.props.stageParams?.policies || {};
         const prefLang = SettingsStore.getValue("language");
         const initToggles: Record<string, boolean> = {};
         const pickedPolicies: {
@@ -300,12 +300,12 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
             // Pick a language based on the user's language, falling back to english,
             // and finally to the first language available. If there's still no policy
             // available then the homeserver isn't respecting the spec.
-            let langPolicy = policy[prefLang];
+            let langPolicy: LocalisedPolicy | undefined = policy[prefLang];
             if (!langPolicy) langPolicy = policy["en"];
             if (!langPolicy) {
                 // last resort
                 const firstLang = Object.keys(policy).find((e) => e !== "version");
-                langPolicy = policy[firstLang];
+                langPolicy = firstLang ? policy[firstLang] : undefined;
             }
             if (!langPolicy) throw new Error("Failed to find a policy to show the user");
 
@@ -358,7 +358,7 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
             return <Spinner />;
         }
 
-        const checkboxes = [];
+        const checkboxes: JSX.Element[] = [];
         let allChecked = true;
         for (const policy of this.state.policies) {
             const checked = this.state.toggledPolicies[policy.id];
@@ -384,7 +384,7 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
             );
         }
 
-        let submitButton;
+        let submitButton: JSX.Element | undefined;
         if (this.props.showContinue !== false) {
             // XXX: button classes
             submitButton = (
@@ -462,7 +462,7 @@ export class EmailIdentityAuthEntry extends React.Component<
         // We only have a session ID if the user has clicked the link in their email,
         // so show a loading state instead of "an email has been sent to..." because
         // that's confusing when you've already read that email.
-        if (this.props.inputs.emailAddress === undefined || this.props.stageState?.emailSid) {
+        if (this.props.inputs?.emailAddress === undefined || this.props.stageState?.emailSid) {
             if (errorSection) {
                 return errorSection;
             }
@@ -549,13 +549,13 @@ interface IMsisdnAuthEntryProps extends IAuthEntryProps {
 interface IMsisdnAuthEntryState {
     token: string;
     requestingToken: boolean;
-    errorText: string;
+    errorText: string | null;
 }
 
 export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsisdnAuthEntryState> {
     public static LOGIN_TYPE = AuthType.Msisdn;
 
-    private submitUrl: string;
+    private submitUrl?: string;
     private sid: string;
     private msisdn: string;
 
@@ -798,11 +798,13 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
     public static PHASE_POSTAUTH = 2; // button to confirm SSO completed
 
     private ssoUrl: string;
-    private popupWindow: Window;
+    private popupWindow: Window | null;
 
     public constructor(props: ISSOAuthEntryProps) {
         super(props);
 
+        if (!this.props.authSessionId) throw new Error("This UIA flow requires an authSessionId");
+
         // We actually send the user through fallback auth so we don't have to
         // deal with a redirect back to us, losing application context.
         this.ssoUrl = props.matrixClient.getFallbackAuthUrl(this.props.loginType, this.props.authSessionId);
@@ -858,10 +860,10 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
     };
 
     public render(): React.ReactNode {
-        let continueButton = null;
+        let continueButton: JSX.Element;
         const cancelButton = (
             <AccessibleButton
-                onClick={this.props.onCancel}
+                onClick={this.props.onCancel ?? null}
                 kind={this.props.continueKind ? this.props.continueKind + "_outline" : "primary_outline"}
             >
                 {_t("Cancel")}
@@ -909,7 +911,7 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
 }
 
 export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
-    private popupWindow: Window;
+    private popupWindow: Window | null;
     private fallbackButton = createRef<HTMLButtonElement>();
 
     public constructor(props: IAuthEntryProps) {
@@ -927,18 +929,16 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
 
     public componentWillUnmount(): void {
         window.removeEventListener("message", this.onReceiveMessage);
-        if (this.popupWindow) {
-            this.popupWindow.close();
-        }
+        this.popupWindow?.close();
     }
 
     public focus = (): void => {
-        if (this.fallbackButton.current) {
-            this.fallbackButton.current.focus();
-        }
+        this.fallbackButton.current?.focus();
     };
 
     private onShowFallbackClick = (e: MouseEvent): void => {
+        if (!this.props.authSessionId) return;
+
         e.preventDefault();
         e.stopPropagation();
 
diff --git a/src/components/views/auth/LanguageSelector.tsx b/src/components/views/auth/LanguageSelector.tsx
index 3eee9940662..b7816ea2967 100644
--- a/src/components/views/auth/LanguageSelector.tsx
+++ b/src/components/views/auth/LanguageSelector.tsx
@@ -26,7 +26,7 @@ import LanguageDropdown from "../elements/LanguageDropdown";
 function onChange(newLang: string): void {
     if (getCurrentLanguage() !== newLang) {
         SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang);
-        PlatformPeg.get().reload();
+        PlatformPeg.get()?.reload();
     }
 }
 
diff --git a/src/components/views/auth/LoginWithQR.tsx b/src/components/views/auth/LoginWithQR.tsx
index 80a57cab36b..2285d2b5890 100644
--- a/src/components/views/auth/LoginWithQR.tsx
+++ b/src/components/views/auth/LoginWithQR.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 import { MSC3906Rendezvous, MSC3906RendezvousPayload, RendezvousFailureReason } from "matrix-js-sdk/src/rendezvous";
 import { MSC3886SimpleHttpRendezvousTransport } from "matrix-js-sdk/src/rendezvous/transports";
-import { MSC3903ECDHPayload, MSC3903ECDHv1RendezvousChannel } from "matrix-js-sdk/src/rendezvous/channels";
+import { MSC3903ECDHPayload, MSC3903ECDHv2RendezvousChannel } from "matrix-js-sdk/src/rendezvous/channels";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 
@@ -158,7 +158,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
                 client: this.props.client,
             });
 
-            const channel = new MSC3903ECDHv1RendezvousChannel<MSC3906RendezvousPayload>(
+            const channel = new MSC3903ECDHv2RendezvousChannel<MSC3906RendezvousPayload>(
                 transport,
                 undefined,
                 this.onFailure,
diff --git a/src/components/views/auth/PassphraseConfirmField.tsx b/src/components/views/auth/PassphraseConfirmField.tsx
index a1fb67c5280..2411547912e 100644
--- a/src/components/views/auth/PassphraseConfirmField.tsx
+++ b/src/components/views/auth/PassphraseConfirmField.tsx
@@ -20,15 +20,16 @@ import Field, { IInputProps } from "../elements/Field";
 import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import { _t, _td } from "../../../languageHandler";
 
-interface IProps extends Omit<IInputProps, "onValidate"> {
+interface IProps extends Omit<IInputProps, "onValidate" | "label"> {
     id?: string;
     fieldRef?: RefCallback<Field> | RefObject<Field>;
     autoComplete?: string;
     value: string;
     password: string; // The password we're confirming
 
-    labelRequired?: string;
-    labelInvalid?: string;
+    label: string;
+    labelRequired: string;
+    labelInvalid: string;
 
     onChange(ev: React.FormEvent<HTMLElement>): void;
     onValidate?(result: IValidationResult): void;
diff --git a/src/components/views/auth/PassphraseField.tsx b/src/components/views/auth/PassphraseField.tsx
index b221322e523..5175de6aa7a 100644
--- a/src/components/views/auth/PassphraseField.tsx
+++ b/src/components/views/auth/PassphraseField.tsx
@@ -31,10 +31,10 @@ interface IProps extends Omit<IInputProps, "onValidate"> {
     value: string;
     fieldRef?: RefCallback<Field> | RefObject<Field>;
 
-    label?: string;
-    labelEnterPassword?: string;
-    labelStrongPassword?: string;
-    labelAllowedButUnsafe?: string;
+    label: string;
+    labelEnterPassword: string;
+    labelStrongPassword: string;
+    labelAllowedButUnsafe: string;
 
     onChange(ev: React.FormEvent<HTMLElement>): void;
     onValidate?(result: IValidationResult): void;
@@ -48,12 +48,12 @@ class PassphraseField extends PureComponent<IProps> {
         labelAllowedButUnsafe: _td("Password is allowed, but unsafe"),
     };
 
-    public readonly validate = withValidation<this, zxcvbn.ZXCVBNResult>({
+    public readonly validate = withValidation<this, zxcvbn.ZXCVBNResult | null>({
         description: function (complexity) {
             const score = complexity ? complexity.score : 0;
             return <progress className="mx_PassphraseField_progress" max={4} value={score} />;
         },
-        deriveData: async ({ value }): Promise<zxcvbn.ZXCVBNResult> => {
+        deriveData: async ({ value }): Promise<zxcvbn.ZXCVBNResult | null> => {
             if (!value) return null;
             const { scorePassword } = await import("../../../utils/PasswordScorer");
             return scorePassword(value);
@@ -67,7 +67,7 @@ class PassphraseField extends PureComponent<IProps> {
             {
                 key: "complexity",
                 test: async function ({ value }, complexity): Promise<boolean> {
-                    if (!value) {
+                    if (!value || !complexity) {
                         return false;
                     }
                     const safe = complexity.score >= this.props.minScore;
@@ -78,7 +78,7 @@ class PassphraseField extends PureComponent<IProps> {
                     // Unsafe passwords that are valid are only possible through a
                     // configuration flag. We'll print some helper text to signal
                     // to the user that their password is allowed, but unsafe.
-                    if (complexity.score >= this.props.minScore) {
+                    if (complexity && complexity.score >= this.props.minScore) {
                         return _t(this.props.labelStrongPassword);
                     }
                     return _t(this.props.labelAllowedButUnsafe);
diff --git a/src/components/views/auth/PasswordLogin.tsx b/src/components/views/auth/PasswordLogin.tsx
index bb630b5fc22..727505551ac 100644
--- a/src/components/views/auth/PasswordLogin.tsx
+++ b/src/components/views/auth/PasswordLogin.tsx
@@ -36,7 +36,7 @@ interface IProps {
     phoneNumber: string;
 
     serverConfig: ValidatedServerConfig;
-    loginIncorrect?: boolean;
+    loginIncorrect: boolean;
     disableSubmit?: boolean;
     busy?: boolean;
 
@@ -67,9 +67,9 @@ const enum LoginField {
  * The email/username/phone fields are fully-controlled, the password field is not.
  */
 export default class PasswordLogin extends React.PureComponent<IProps, IState> {
-    private [LoginField.Email]: Field;
-    private [LoginField.Phone]: Field;
-    private [LoginField.MatrixId]: Field;
+    private [LoginField.Email]: Field | null;
+    private [LoginField.Phone]: Field | null;
+    private [LoginField.MatrixId]: Field | null;
 
     public static defaultProps = {
         onUsernameChanged: function () {},
@@ -93,7 +93,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
     private onForgotPasswordClick = (ev: ButtonEvent): void => {
         ev.preventDefault();
         ev.stopPropagation();
-        this.props.onForgotPasswordClick();
+        this.props.onForgotPasswordClick?.();
     };
 
     private onSubmitForm = async (ev: SyntheticEvent): Promise<void> => {
@@ -116,25 +116,25 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
     };
 
     private onUsernameChanged = (ev: React.ChangeEvent<HTMLInputElement>): void => {
-        this.props.onUsernameChanged(ev.target.value);
+        this.props.onUsernameChanged?.(ev.target.value);
     };
 
     private onUsernameBlur = (ev: React.FocusEvent<HTMLInputElement>): void => {
-        this.props.onUsernameBlur(ev.target.value);
+        this.props.onUsernameBlur?.(ev.target.value);
     };
 
     private onLoginTypeChange = (ev: React.ChangeEvent<HTMLSelectElement>): void => {
         const loginType = ev.target.value as IState["loginType"];
         this.setState({ loginType });
-        this.props.onUsernameChanged(""); // Reset because email and username use the same state
+        this.props.onUsernameChanged?.(""); // Reset because email and username use the same state
     };
 
     private onPhoneCountryChanged = (country: PhoneNumberCountryDefinition): void => {
-        this.props.onPhoneCountryChanged(country.iso2);
+        this.props.onPhoneCountryChanged?.(country.iso2);
     };
 
     private onPhoneNumberChanged = (ev: React.ChangeEvent<HTMLInputElement>): void => {
-        this.props.onPhoneNumberChanged(ev.target.value);
+        this.props.onPhoneNumberChanged?.(ev.target.value);
     };
 
     private onPasswordChanged = (ev: React.ChangeEvent<HTMLInputElement>): void => {
@@ -199,7 +199,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         return null;
     }
 
-    private markFieldValid(fieldID: LoginField, valid: boolean): void {
+    private markFieldValid(fieldID: LoginField, valid?: boolean): void {
         const { fieldValid } = this.state;
         fieldValid[fieldID] = valid;
         this.setState({
@@ -368,7 +368,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
     }
 
     public render(): React.ReactNode {
-        let forgotPasswordJsx;
+        let forgotPasswordJsx: JSX.Element | undefined;
 
         if (this.props.onForgotPasswordClick) {
             forgotPasswordJsx = (
diff --git a/src/components/views/auth/RegistrationForm.tsx b/src/components/views/auth/RegistrationForm.tsx
index 25a319e8179..17d540b4ed6 100644
--- a/src/components/views/auth/RegistrationForm.tsx
+++ b/src/components/views/auth/RegistrationForm.tsx
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { BaseSyntheticEvent } from "react";
+import React, { BaseSyntheticEvent, ReactNode } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixError } from "matrix-js-sdk/src/matrix";
@@ -82,7 +82,7 @@ interface IState {
     // Field error codes by field ID
     fieldValid: Partial<Record<RegistrationField, boolean>>;
     // The ISO2 country code selected in the phone number entry
-    phoneCountry: string;
+    phoneCountry?: string;
     username: string;
     email: string;
     phoneNumber: string;
@@ -95,11 +95,11 @@ interface IState {
  * A pure UI component which displays a registration form.
  */
 export default class RegistrationForm extends React.PureComponent<IProps, IState> {
-    private [RegistrationField.Email]: Field;
-    private [RegistrationField.Password]: Field;
-    private [RegistrationField.PasswordConfirm]: Field;
-    private [RegistrationField.Username]: Field;
-    private [RegistrationField.PhoneNumber]: Field;
+    private [RegistrationField.Email]: Field | null;
+    private [RegistrationField.Password]: Field | null;
+    private [RegistrationField.PasswordConfirm]: Field | null;
+    private [RegistrationField.Username]: Field | null;
+    private [RegistrationField.PhoneNumber]: Field | null;
 
     public static defaultProps = {
         onValidationChange: logger.error,
@@ -117,7 +117,6 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
             phoneNumber: this.props.defaultPhoneNumber || "",
             password: this.props.defaultPassword || "",
             passwordConfirm: this.props.defaultPassword || "",
-            passwordComplexity: null,
         };
     }
 
@@ -138,7 +137,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
             if (this.showEmail()) {
                 Modal.createDialog(RegistrationEmailPromptDialog, {
                     onFinished: async (confirmed: boolean, email?: string): Promise<void> => {
-                        if (confirmed) {
+                        if (confirmed && email !== undefined) {
                             this.setState(
                                 {
                                     email,
@@ -265,7 +264,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
     };
 
     private onEmailValidate = (result: IValidationResult): void => {
-        this.markFieldValid(RegistrationField.Email, result.valid);
+        this.markFieldValid(RegistrationField.Email, !!result.valid);
     };
 
     private validateEmailRules = withValidation({
@@ -294,7 +293,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
     };
 
     private onPasswordValidate = (result: IValidationResult): void => {
-        this.markFieldValid(RegistrationField.Password, result.valid);
+        this.markFieldValid(RegistrationField.Password, !!result.valid);
     };
 
     private onPasswordConfirmChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
@@ -304,7 +303,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
     };
 
     private onPasswordConfirmValidate = (result: IValidationResult): void => {
-        this.markFieldValid(RegistrationField.PasswordConfirm, result.valid);
+        this.markFieldValid(RegistrationField.PasswordConfirm, !!result.valid);
     };
 
     private onPhoneCountryChange = (newVal: PhoneNumberCountryDefinition): void => {
@@ -321,7 +320,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
 
     private onPhoneNumberValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await this.validatePhoneNumberRules(fieldState);
-        this.markFieldValid(RegistrationField.PhoneNumber, result.valid);
+        this.markFieldValid(RegistrationField.PhoneNumber, !!result.valid);
         return result;
     };
 
@@ -352,14 +351,14 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
 
     private onUsernameValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await this.validateUsernameRules(fieldState);
-        this.markFieldValid(RegistrationField.Username, result.valid);
+        this.markFieldValid(RegistrationField.Username, !!result.valid);
         return result;
     };
 
     private validateUsernameRules = withValidation<this, UsernameAvailableStatus>({
         description: (_, results) => {
             // omit the description if the only failing result is the `available` one as it makes no sense for it.
-            if (results.every(({ key, valid }) => key === "available" || valid)) return;
+            if (results.every(({ key, valid }) => key === "available" || valid)) return null;
             return _t("Use lowercase letters, numbers, dashes and underscores only");
         },
         hideDescriptionIfValid: true,
@@ -448,7 +447,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         return true;
     }
 
-    private renderEmail(): JSX.Element {
+    private renderEmail(): ReactNode {
         if (!this.showEmail()) {
             return null;
         }
@@ -492,7 +491,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         );
     }
 
-    public renderPhoneNumber(): JSX.Element {
+    public renderPhoneNumber(): ReactNode {
         if (!this.showPhoneNumber()) {
             return null;
         }
@@ -518,7 +517,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         );
     }
 
-    public renderUsername(): JSX.Element {
+    public renderUsername(): ReactNode {
         return (
             <Field
                 id="mx_RegistrationForm_username"
@@ -534,12 +533,12 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         );
     }
 
-    public render(): React.ReactNode {
+    public render(): ReactNode {
         const registerButton = (
             <input className="mx_Login_submit" type="submit" value={_t("Register")} disabled={!this.props.canSubmit} />
         );
 
-        let emailHelperText = null;
+        let emailHelperText: JSX.Element | undefined;
         if (this.showEmail()) {
             if (this.showPhoneNumber()) {
                 emailHelperText = (
diff --git a/src/components/views/auth/Welcome.tsx b/src/components/views/auth/Welcome.tsx
index adcbdad25a1..29294f70a60 100644
--- a/src/components/views/auth/Welcome.tsx
+++ b/src/components/views/auth/Welcome.tsx
@@ -34,7 +34,7 @@ interface IProps {}
 export default class Welcome extends React.PureComponent<IProps> {
     public render(): React.ReactNode {
         const pagesConfig = SdkConfig.getObject("embedded_pages");
-        let pageUrl = null;
+        let pageUrl: string | undefined;
         if (pagesConfig) {
             pageUrl = pagesConfig.get("welcome_url");
         }
diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx
index 469c5fbb2ab..8728673b589 100644
--- a/src/components/views/avatars/BaseAvatar.tsx
+++ b/src/components/views/avatars/BaseAvatar.tsx
@@ -32,13 +32,13 @@ import { toPx } from "../../../utils/units";
 import { _t } from "../../../languageHandler";
 
 interface IProps {
-    name: string; // The name (first initial used as default)
+    name?: string; // The name (first initial used as default)
     idName?: string; // ID for generating hash colours
     title?: string; // onHover title text
-    url?: string; // highest priority of them all, shortcut to set in urls[0]
+    url?: string | null; // highest priority of them all, shortcut to set in urls[0]
     urls?: string[]; // [highest_priority, ... , lowest_priority]
-    width?: number;
-    height?: number;
+    width: number;
+    height: number;
     // XXX: resizeMethod not actually used.
     resizeMethod?: ResizeMethod;
     defaultToInitialLetter?: boolean; // true to add default url
@@ -48,7 +48,7 @@ interface IProps {
     tabIndex?: number;
 }
 
-const calculateUrls = (url?: string, urls?: string[], lowBandwidth = false): string[] => {
+const calculateUrls = (url?: string | null, urls?: string[], lowBandwidth = false): string[] => {
     // work out the full set of urls to try to load. This is formed like so:
     // imageUrls: [ props.url, ...props.urls ]
 
@@ -66,7 +66,7 @@ const calculateUrls = (url?: string, urls?: string[], lowBandwidth = false): str
     return Array.from(new Set(_urls));
 };
 
-const useImageUrl = ({ url, urls }: { url?: string; urls?: string[] }): [string, () => void] => {
+const useImageUrl = ({ url, urls }: { url?: string | null; urls?: string[] }): [string, () => void] => {
     // Since this is a hot code path and the settings store can be slow, we
     // use the cached lowBandwidth value from the room context if it exists
     const roomContext = useContext(RoomContext);
diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx
index 6d1ec066e72..953ffc2288a 100644
--- a/src/components/views/avatars/DecoratedRoomAvatar.tsx
+++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx
@@ -62,7 +62,7 @@ enum Icon {
     PresenceBusy = "BUSY",
 }
 
-function tooltipText(variant: Icon): string {
+function tooltipText(variant: Icon): string | undefined {
     switch (variant) {
         case Icon.Globe:
             return _t("This room is public");
@@ -78,7 +78,7 @@ function tooltipText(variant: Icon): string {
 }
 
 export default class DecoratedRoomAvatar extends React.PureComponent<IProps, IState> {
-    private _dmUser: User;
+    private _dmUser: User | null;
     private isUnmounted = false;
     private isWatchingTimeline = false;
 
@@ -103,11 +103,11 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         return joinRule === JoinRule.Public;
     }
 
-    private get dmUser(): User {
+    private get dmUser(): User | null {
         return this._dmUser;
     }
 
-    private set dmUser(val: User) {
+    private set dmUser(val: User | null) {
         const oldUser = this._dmUser;
         this._dmUser = val;
         if (oldUser && oldUser !== this._dmUser) {
@@ -120,7 +120,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         }
     }
 
-    private onRoomTimeline = (ev: MatrixEvent, room: Room | null): void => {
+    private onRoomTimeline = (ev: MatrixEvent, room?: Room): void => {
         if (this.isUnmounted) return;
         if (this.props.room.roomId !== room?.roomId) return;
 
@@ -182,7 +182,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
 
     public render(): React.ReactNode {
         let badge: React.ReactNode;
-        if (this.props.displayBadge) {
+        if (this.props.displayBadge && this.state.notificationState) {
             badge = (
                 <NotificationBadge
                     notification={this.state.notificationState}
@@ -192,7 +192,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
             );
         }
 
-        let icon;
+        let icon: JSX.Element | undefined;
         if (this.state.icon !== Icon.None) {
             icon = (
                 <TextWithTooltip
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 67609064502..64f50bdf1cc 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -65,7 +65,7 @@ export default function MemberAvatar({
 
     const name = member?.name ?? fallbackUserId;
     let title: string | undefined = props.title;
-    let imageUrl: string | undefined;
+    let imageUrl: string | null | undefined;
     if (member?.name) {
         if (member.getMxcAvatarUrl()) {
             imageUrl = mediaFromMxc(member.getMxcAvatarUrl() ?? "").getThumbnailOfSourceHttp(
diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx
index 3a13dfdac4b..69ee06a2cc2 100644
--- a/src/components/views/avatars/RoomAvatar.tsx
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -30,13 +30,14 @@ import DMRoomMap from "../../../utils/DMRoomMap";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { IOOBData } from "../../../stores/ThreepidInviteStore";
 import { LocalRoom } from "../../../models/LocalRoom";
+import { filterBoolean } from "../../../utils/arrays";
 
 interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick"> {
     // Room may be left unset here, but if it is,
     // oobData.avatarUrl should be set (else there
     // would be nowhere to get the avatar from)
     room?: Room;
-    oobData?: IOOBData & {
+    oobData: IOOBData & {
         roomId?: string;
     };
     viewAvatarOnClick?: boolean;
@@ -86,7 +87,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     };
 
     private static getImageUrls(props: IProps): string[] {
-        let oobAvatar = null;
+        let oobAvatar: string | null = null;
         if (props.oobData.avatarUrl) {
             oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp(
                 props.width,
@@ -94,28 +95,27 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
                 props.resizeMethod,
             );
         }
-        return [
+
+        return filterBoolean([
             oobAvatar, // highest priority
             RoomAvatar.getRoomAvatarUrl(props),
-        ].filter(function (url) {
-            return url !== null && url !== "";
-        });
+        ]);
     }
 
-    private static getRoomAvatarUrl(props: IProps): string {
+    private static getRoomAvatarUrl(props: IProps): string | null {
         if (!props.room) return null;
 
         return Avatar.avatarUrlForRoom(props.room, props.width, props.height, props.resizeMethod);
     }
 
     private onRoomAvatarClick = (): void => {
-        const avatarUrl = Avatar.avatarUrlForRoom(this.props.room, null, null, null);
+        const avatarUrl = Avatar.avatarUrlForRoom(this.props.room ?? null, undefined, undefined, undefined);
         const params = {
             src: avatarUrl,
-            name: this.props.room.name,
+            name: this.props.room?.name,
         };
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", undefined, true);
     };
 
     private get roomIdName(): string | undefined {
@@ -137,7 +137,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
 
     public render(): React.ReactNode {
         const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props;
-        const roomName = room?.name ?? oobData.name;
+        const roomName = room?.name ?? oobData.name ?? "?";
 
         return (
             <BaseAvatar
diff --git a/src/components/views/avatars/WidgetAvatar.tsx b/src/components/views/avatars/WidgetAvatar.tsx
index fa07a513109..e02e9243653 100644
--- a/src/components/views/avatars/WidgetAvatar.tsx
+++ b/src/components/views/avatars/WidgetAvatar.tsx
@@ -21,8 +21,10 @@ import { IApp } from "../../../stores/WidgetStore";
 import BaseAvatar, { BaseAvatarType } from "./BaseAvatar";
 import { mediaFromMxc } from "../../../customisations/Media";
 
-interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls"> {
+interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls" | "height" | "width"> {
     app: IApp;
+    height?: number;
+    width?: number;
 }
 
 const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 20, ...props }) => {
@@ -44,7 +46,7 @@ const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 2
             name={app.id}
             className={classNames("mx_WidgetAvatar", className)}
             // MSC2765
-            url={app.avatar_url ? mediaFromMxc(app.avatar_url).getSquareThumbnailHttp(20) : undefined}
+            url={app.avatar_url ? mediaFromMxc(app.avatar_url).getSquareThumbnailHttp(20) : null}
             urls={iconUrls}
             width={width}
             height={height}
diff --git a/src/components/views/beacon/BeaconListItem.tsx b/src/components/views/beacon/BeaconListItem.tsx
index 24fdb05f325..caeff53bf5c 100644
--- a/src/components/views/beacon/BeaconListItem.tsx
+++ b/src/components/views/beacon/BeaconListItem.tsx
@@ -42,14 +42,14 @@ const BeaconListItem: React.FC<Props & HTMLProps<HTMLLIElement>> = ({ beacon, ..
     const matrixClient = useContext(MatrixClientContext);
     const room = matrixClient.getRoom(beacon.roomId);
 
-    if (!latestLocationState || !beacon.isLive) {
+    if (!latestLocationState || !beacon.isLive || !room) {
         return null;
     }
 
-    const isSelfLocation = beacon.beaconInfo.assetType === LocationAssetType.Self;
-    const beaconMember = isSelfLocation ? room.getMember(beacon.beaconInfoOwner) : undefined;
+    const isSelfLocation = beacon.beaconInfo?.assetType === LocationAssetType.Self;
+    const beaconMember = isSelfLocation ? room.getMember(beacon.beaconInfoOwner) : null;
 
-    const humanizedUpdateTime = humanizeTime(latestLocationState.timestamp);
+    const humanizedUpdateTime = (latestLocationState.timestamp && humanizeTime(latestLocationState.timestamp)) || "";
 
     return (
         <li className="mx_BeaconListItem" {...rest}>
@@ -62,7 +62,7 @@ const BeaconListItem: React.FC<Props & HTMLProps<HTMLLIElement>> = ({ beacon, ..
                 <BeaconStatus
                     className="mx_BeaconListItem_status"
                     beacon={beacon}
-                    label={beaconMember?.name || beacon.beaconInfo.description || beacon.beaconInfoOwner}
+                    label={beaconMember?.name || beacon.beaconInfo?.description || beacon.beaconInfoOwner}
                     displayStatus={BeaconDisplayStatus.Active}
                 >
                     {/* eat events from interactive share buttons
diff --git a/src/components/views/beacon/BeaconStatusTooltip.tsx b/src/components/views/beacon/BeaconStatusTooltip.tsx
index a0f70504c18..d66f4a59d01 100644
--- a/src/components/views/beacon/BeaconStatusTooltip.tsx
+++ b/src/components/views/beacon/BeaconStatusTooltip.tsx
@@ -27,11 +27,11 @@ interface Props {
     beacon: Beacon;
 }
 
-const useBeaconName = (beacon: Beacon): string => {
+const useBeaconName = (beacon: Beacon): string | undefined => {
     const matrixClient = useContext(MatrixClientContext);
 
-    if (beacon.beaconInfo.assetType !== LocationAssetType.Self) {
-        return beacon.beaconInfo.description;
+    if (beacon.beaconInfo?.assetType !== LocationAssetType.Self) {
+        return beacon.beaconInfo?.description;
     }
     const room = matrixClient.getRoom(beacon.roomId);
     const member = room?.getMember(beacon.beaconInfoOwner);
diff --git a/src/components/views/beacon/BeaconViewDialog.tsx b/src/components/views/beacon/BeaconViewDialog.tsx
index 6c91cd1f39a..818ca822426 100644
--- a/src/components/views/beacon/BeaconViewDialog.tsx
+++ b/src/components/views/beacon/BeaconViewDialog.tsx
@@ -23,7 +23,6 @@ import { Icon as LiveLocationIcon } from "../../../../res/img/location/live-loca
 import { useLiveBeacons } from "../../../utils/beacon/useLiveBeacons";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import BaseDialog from "../dialogs/BaseDialog";
-import { IDialogProps } from "../dialogs/IDialogProps";
 import Map from "../location/Map";
 import ZoomButtons from "../location/ZoomButtons";
 import BeaconMarker from "./BeaconMarker";
@@ -38,11 +37,12 @@ import MapFallback from "../location/MapFallback";
 import { MapError } from "../location/MapError";
 import { LocationShareError } from "../../../utils/location";
 
-interface IProps extends IDialogProps {
+interface IProps {
     roomId: Room["roomId"];
     matrixClient: MatrixClient;
     // open the map centered on this beacon's location
     initialFocusedBeacon?: Beacon;
+    onFinished(): void;
 }
 
 // track the 'focused time' as ts
@@ -54,7 +54,7 @@ interface FocusedBeaconState {
     beacon?: Beacon;
 }
 
-const getBoundsCenter = (bounds: Bounds): string | undefined => {
+const getBoundsCenter = (bounds?: Bounds): string | undefined => {
     if (!bounds) {
         return;
     }
@@ -70,10 +70,10 @@ const useMapPosition = (
     { beacon, ts }: FocusedBeaconState,
 ): {
     bounds?: Bounds;
-    centerGeoUri: string;
+    centerGeoUri?: string;
 } => {
     const [bounds, setBounds] = useState<Bounds | undefined>(getBeaconBounds(liveBeacons));
-    const [centerGeoUri, setCenterGeoUri] = useState<string>(
+    const [centerGeoUri, setCenterGeoUri] = useState<string | undefined>(
         beacon?.latestLocationState?.uri || getBoundsCenter(bounds),
     );
 
diff --git a/src/components/views/beacon/DialogOwnBeaconStatus.tsx b/src/components/views/beacon/DialogOwnBeaconStatus.tsx
index 8c74586f355..3c456004f41 100644
--- a/src/components/views/beacon/DialogOwnBeaconStatus.tsx
+++ b/src/components/views/beacon/DialogOwnBeaconStatus.tsx
@@ -45,12 +45,12 @@ const DialogOwnBeaconStatus: React.FC<Props> = ({ roomId }) => {
     const matrixClient = useContext(MatrixClientContext);
     const room = matrixClient.getRoom(roomId);
 
-    if (!beacon?.isLive) {
+    if (!beacon?.isLive || !room) {
         return null;
     }
 
-    const isSelfLocation = beacon.beaconInfo.assetType === LocationAssetType.Self;
-    const beaconMember = isSelfLocation ? room.getMember(beacon.beaconInfoOwner) : undefined;
+    const isSelfLocation = beacon.beaconInfo?.assetType === LocationAssetType.Self;
+    const beaconMember = isSelfLocation ? room.getMember(beacon.beaconInfoOwner) : null;
 
     return (
         <div className="mx_DialogOwnBeaconStatus">
diff --git a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
index d3577ba3ada..0104a79cae3 100644
--- a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
+++ b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
@@ -25,7 +25,7 @@ import { Icon as LiveLocationIcon } from "../../../../res/img/location/live-loca
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../../dispatcher/actions";
 import dispatcher from "../../../dispatcher/dispatcher";
-import AccessibleButton from "../elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 
 interface Props {
     isMinimized?: boolean;
@@ -121,7 +121,7 @@ const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
     );
 
     const onWarningClick = relevantBeacon
-        ? () => {
+        ? (_e: ButtonEvent) => {
               dispatcher.dispatch<ViewRoomPayload>({
                   action: Action.ViewRoom,
                   room_id: relevantBeacon.roomId,
@@ -131,7 +131,7 @@ const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
                   highlighted: true,
               });
           }
-        : undefined;
+        : null;
 
     const label = getLabel(hasStoppingErrors, hasLocationPublishErrors);
 
diff --git a/src/components/views/beacon/LiveTimeRemaining.tsx b/src/components/views/beacon/LiveTimeRemaining.tsx
index 3ffd248ca7d..b6682d710be 100644
--- a/src/components/views/beacon/LiveTimeRemaining.tsx
+++ b/src/components/views/beacon/LiveTimeRemaining.tsx
@@ -40,13 +40,19 @@ const getUpdateInterval = (ms: number): number => {
 const useMsRemaining = (beacon: Beacon): number => {
     const beaconInfo = useEventEmitterState(beacon, BeaconEvent.Update, () => beacon.beaconInfo);
 
-    const [msRemaining, setMsRemaining] = useState(() => getBeaconMsUntilExpiry(beaconInfo));
+    const [msRemaining, setMsRemaining] = useState(() => (beaconInfo ? getBeaconMsUntilExpiry(beaconInfo) : 0));
 
     useEffect(() => {
+        if (!beaconInfo) {
+            return;
+        }
         setMsRemaining(getBeaconMsUntilExpiry(beaconInfo));
     }, [beaconInfo]);
 
     const updateMsRemaining = useCallback(() => {
+        if (!beaconInfo) {
+            return;
+        }
         const ms = getBeaconMsUntilExpiry(beaconInfo);
         setMsRemaining(ms);
     }, [beaconInfo]);
diff --git a/src/components/views/beacon/OwnBeaconStatus.tsx b/src/components/views/beacon/OwnBeaconStatus.tsx
index 7baffe3e5fd..92afa950da2 100644
--- a/src/components/views/beacon/OwnBeaconStatus.tsx
+++ b/src/components/views/beacon/OwnBeaconStatus.tsx
@@ -42,7 +42,7 @@ const OwnBeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> = ({ beacon,
         stoppingInProgress,
         onStopSharing,
         onResetLocationPublishError,
-    } = useOwnLiveBeacons([beacon?.identifier]);
+    } = useOwnLiveBeacons(beacon?.identifier ? [beacon?.identifier] : []);
 
     // combine display status with errors that only occur for user's own beacons
     const ownDisplayStatus = hasLocationPublishError || hasStopSharingError ? BeaconDisplayStatus.Error : displayStatus;
diff --git a/src/components/views/beacon/ShareLatestLocation.tsx b/src/components/views/beacon/ShareLatestLocation.tsx
index 175e1d46e2e..ef525ad8385 100644
--- a/src/components/views/beacon/ShareLatestLocation.tsx
+++ b/src/components/views/beacon/ShareLatestLocation.tsx
@@ -28,9 +28,9 @@ interface Props {
 }
 
 const ShareLatestLocation: React.FC<Props> = ({ latestLocationState }) => {
-    const [coords, setCoords] = useState(null);
+    const [coords, setCoords] = useState<GeolocationCoordinates | undefined>();
     useEffect(() => {
-        if (!latestLocationState) {
+        if (!latestLocationState?.uri) {
             return;
         }
         const coords = parseGeoUri(latestLocationState.uri);
diff --git a/src/components/views/beacon/displayStatus.ts b/src/components/views/beacon/displayStatus.ts
index 51c63f95c65..48260cb672f 100644
--- a/src/components/views/beacon/displayStatus.ts
+++ b/src/components/views/beacon/displayStatus.ts
@@ -40,7 +40,5 @@ export const getBeaconDisplayStatus = (
     if (!latestLocationState) {
         return BeaconDisplayStatus.Loading;
     }
-    if (latestLocationState) {
-        return BeaconDisplayStatus.Active;
-    }
+    return BeaconDisplayStatus.Active;
 };
diff --git a/src/components/views/context_menus/WidgetContextMenu.tsx b/src/components/views/context_menus/WidgetContextMenu.tsx
index bef5cdc8bf1..2cc0e094c3c 100644
--- a/src/components/views/context_menus/WidgetContextMenu.tsx
+++ b/src/components/views/context_menus/WidgetContextMenu.tsx
@@ -17,6 +17,7 @@ limitations under the License.
 import React, { useContext } from "react";
 import { MatrixCapabilities } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
+import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
 
 import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu";
 import { ChevronFace } from "../../structures/ContextMenu";
@@ -34,6 +35,8 @@ import { WidgetType } from "../../../widgets/WidgetType";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Livestream";
+import { ModuleRunner } from "../../../modules/ModuleRunner";
+import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
 
 interface IProps extends React.ComponentProps<typeof IconizedContextMenu> {
     app: IApp;
@@ -45,7 +48,7 @@ interface IProps extends React.ComponentProps<typeof IconizedContextMenu> {
     onEditClick?(): void;
 }
 
-const WidgetContextMenu: React.FC<IProps> = ({
+export const WidgetContextMenu: React.FC<IProps> = ({
     onFinished,
     app,
     userWidget,
@@ -158,24 +161,31 @@ const WidgetContextMenu: React.FC<IProps> = ({
     const isLocalWidget = WidgetType.JITSI.matches(app.type);
     let revokeButton;
     if (!userWidget && !isLocalWidget && isAllowedWidget) {
-        const onRevokeClick = (): void => {
-            logger.info("Revoking permission for widget to load: " + app.eventId);
-            const current = SettingsStore.getValue("allowedWidgets", roomId);
-            if (app.eventId !== undefined) current[app.eventId] = false;
-            const level = SettingsStore.firstSupportedLevel("allowedWidgets");
-            SettingsStore.setValue("allowedWidgets", roomId, level, current).catch((err) => {
-                logger.error(err);
-                // We don't really need to do anything about this - the user will just hit the button again.
-            });
-            onFinished();
-        };
+        const opts: ApprovalOpts = { approved: undefined };
+        ModuleRunner.instance.invoke(WidgetLifecycle.PreLoadRequest, opts, new ElementWidget(app));
+
+        if (!opts.approved) {
+            const onRevokeClick = (): void => {
+                logger.info("Revoking permission for widget to load: " + app.eventId);
+                const current = SettingsStore.getValue("allowedWidgets", roomId);
+                if (app.eventId !== undefined) current[app.eventId] = false;
+                const level = SettingsStore.firstSupportedLevel("allowedWidgets");
+                if (!level) throw new Error("level must be defined");
+                SettingsStore.setValue("allowedWidgets", roomId ?? null, level, current).catch((err) => {
+                    logger.error(err);
+                    // We don't really need to do anything about this - the user will just hit the button again.
+                });
+                onFinished();
+            };
 
-        revokeButton = <IconizedContextMenuOption onClick={onRevokeClick} label={_t("Revoke permissions")} />;
+            revokeButton = <IconizedContextMenuOption onClick={onRevokeClick} label={_t("Revoke permissions")} />;
+        }
     }
 
     let moveLeftButton;
     if (showUnpin && widgetIndex > 0) {
         const onClick = (): void => {
+            if (!room) throw new Error("room must be defined");
             WidgetLayoutStore.instance.moveWithinContainer(room, Container.Top, app, -1);
             onFinished();
         };
@@ -207,5 +217,3 @@ const WidgetContextMenu: React.FC<IProps> = ({
         </IconizedContextMenu>
     );
 };
-
-export default WidgetContextMenu;
diff --git a/src/components/views/dialogs/AppDownloadDialog.tsx b/src/components/views/dialogs/AppDownloadDialog.tsx
index 46b7e455c23..dae321e683a 100644
--- a/src/components/views/dialogs/AppDownloadDialog.tsx
+++ b/src/components/views/dialogs/AppDownloadDialog.tsx
@@ -25,13 +25,16 @@ import AccessibleButton from "../elements/AccessibleButton";
 import QRCode from "../elements/QRCode";
 import Heading from "../typography/Heading";
 import BaseDialog from "./BaseDialog";
-import { IDialogProps } from "./IDialogProps";
 
 const fallbackAppStore = "https://apps.apple.com/app/vector/id1083446067";
 const fallbackGooglePlay = "https://play.google.com/store/apps/details?id=im.vector.app";
 const fallbackFDroid = "https://f-droid.org/repository/browse/?fdid=im.vector.app";
 
-export const AppDownloadDialog: FC<IDialogProps> = ({ onFinished }: IDialogProps) => {
+interface Props {
+    onFinished(): void;
+}
+
+export const AppDownloadDialog: FC<Props> = ({ onFinished }) => {
     const brand = SdkConfig.get("brand");
     const desktopBuilds = SdkConfig.getObject("desktop_builds");
     const mobileBuilds = SdkConfig.getObject("mobile_builds");
diff --git a/src/components/views/dialogs/AskInviteAnywayDialog.tsx b/src/components/views/dialogs/AskInviteAnywayDialog.tsx
index 9b9982618a9..a35971992e2 100644
--- a/src/components/views/dialogs/AskInviteAnywayDialog.tsx
+++ b/src/components/views/dialogs/AskInviteAnywayDialog.tsx
@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,14 +15,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { useCallback } from "react";
 
 import { _t } from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import BaseDialog from "./BaseDialog";
 
-interface IProps {
+export interface AskInviteAnywayDialogProps {
     unknownProfileUsers: Array<{
         userId: string;
         errorText: string;
@@ -31,57 +32,58 @@ interface IProps {
     onFinished: (success: boolean) => void;
 }
 
-export default class AskInviteAnywayDialog extends React.Component<IProps> {
-    private onInviteClicked = (): void => {
-        this.props.onInviteAnyways();
-        this.props.onFinished(true);
-    };
+export default function AskInviteAnywayDialog({
+    onFinished,
+    onGiveUp,
+    onInviteAnyways,
+    unknownProfileUsers,
+}: AskInviteAnywayDialogProps): JSX.Element {
+    const onInviteClicked = useCallback((): void => {
+        onInviteAnyways();
+        onFinished(true);
+    }, [onInviteAnyways, onFinished]);
 
-    private onInviteNeverWarnClicked = (): void => {
+    const onInviteNeverWarnClicked = useCallback((): void => {
         SettingsStore.setValue("promptBeforeInviteUnknownUsers", null, SettingLevel.ACCOUNT, false);
-        this.props.onInviteAnyways();
-        this.props.onFinished(true);
-    };
+        onInviteAnyways();
+        onFinished(true);
+    }, [onInviteAnyways, onFinished]);
 
-    private onGiveUpClicked = (): void => {
-        this.props.onGiveUp();
-        this.props.onFinished(false);
-    };
+    const onGiveUpClicked = useCallback((): void => {
+        onGiveUp();
+        onFinished(false);
+    }, [onGiveUp, onFinished]);
 
-    public render(): React.ReactNode {
-        const errorList = this.props.unknownProfileUsers.map((address) => (
-            <li key={address.userId}>
-                {address.userId}: {address.errorText}
-            </li>
-        ));
+    const errorList = unknownProfileUsers.map((address) => (
+        <li key={address.userId}>
+            {address.userId}: {address.errorText}
+        </li>
+    ));
 
-        return (
-            <BaseDialog
-                className="mx_RetryInvitesDialog"
-                onFinished={this.onGiveUpClicked}
-                title={_t("The following users may not exist")}
-                contentId="mx_Dialog_content"
-            >
-                <div id="mx_Dialog_content">
-                    <p>
-                        {_t(
-                            "Unable to find profiles for the Matrix IDs listed below - " +
-                                "would you like to invite them anyway?",
-                        )}
-                    </p>
-                    <ul>{errorList}</ul>
-                </div>
+    return (
+        <BaseDialog
+            className="mx_RetryInvitesDialog"
+            onFinished={onGiveUpClicked}
+            title={_t("The following users may not exist")}
+            contentId="mx_Dialog_content"
+        >
+            <div id="mx_Dialog_content">
+                <p>
+                    {_t(
+                        "Unable to find profiles for the Matrix IDs listed below - " +
+                            "would you like to invite them anyway?",
+                    )}
+                </p>
+                <ul>{errorList}</ul>
+            </div>
 
-                <div className="mx_Dialog_buttons">
-                    <button onClick={this.onGiveUpClicked}>{_t("Close")}</button>
-                    <button onClick={this.onInviteNeverWarnClicked}>
-                        {_t("Invite anyway and never warn me again")}
-                    </button>
-                    <button onClick={this.onInviteClicked} autoFocus={true}>
-                        {_t("Invite anyway")}
-                    </button>
-                </div>
-            </BaseDialog>
-        );
-    }
+            <div className="mx_Dialog_buttons">
+                <button onClick={onGiveUpClicked}>{_t("Close")}</button>
+                <button onClick={onInviteNeverWarnClicked}>{_t("Invite anyway and never warn me again")}</button>
+                <button onClick={onInviteClicked} autoFocus={true}>
+                    {_t("Invite anyway")}
+                </button>
+            </div>
+        </BaseDialog>
+    );
 }
diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx
index 2feb7aac338..0def4f1943c 100644
--- a/src/components/views/dialogs/BaseDialog.tsx
+++ b/src/components/views/dialogs/BaseDialog.tsx
@@ -21,17 +21,16 @@ import FocusLock from "react-focus-lock";
 import classNames from "classnames";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 
-import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
+import AccessibleButton from "../elements/AccessibleButton";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import Heading from "../typography/Heading";
-import { IDialogProps } from "./IDialogProps";
 import { PosthogScreenTracker, ScreenName } from "../../../PosthogTrackers";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 
-interface IProps extends IDialogProps {
+interface IProps {
     // Whether the dialog should have a 'close' button that will
     // cause the dialog to be cancelled. This should only be set
     // to false if there is nothing the app can sensibly do if the
@@ -75,6 +74,7 @@ interface IProps extends IDialogProps {
 
     // optional Posthog ScreenName to supply during the lifetime of this dialog
     "screenName"?: ScreenName;
+    onFinished(): void;
 }
 
 /*
@@ -86,7 +86,7 @@ interface IProps extends IDialogProps {
 export default class BaseDialog extends React.Component<IProps> {
     private matrixClient: MatrixClient;
 
-    public static defaultProps = {
+    public static defaultProps: Partial<IProps> = {
         hasCancel: true,
         fixedWidth: true,
     };
@@ -98,9 +98,7 @@ export default class BaseDialog extends React.Component<IProps> {
     }
 
     private onKeyDown = (e: KeyboardEvent | React.KeyboardEvent): void => {
-        if (this.props.onKeyDown) {
-            this.props.onKeyDown(e);
-        }
+        this.props.onKeyDown?.(e);
 
         const action = getKeyBindingsManager().getAccessibilityAction(e);
         switch (action) {
@@ -109,13 +107,13 @@ export default class BaseDialog extends React.Component<IProps> {
 
                 e.stopPropagation();
                 e.preventDefault();
-                this.props.onFinished(false);
+                this.props.onFinished();
                 break;
         }
     };
 
-    private onCancelClick = (e: ButtonEvent): void => {
-        this.props.onFinished(false);
+    private onCancelClick = (): void => {
+        this.props.onFinished();
     };
 
     public render(): React.ReactNode {
diff --git a/src/components/views/dialogs/BetaFeedbackDialog.tsx b/src/components/views/dialogs/BetaFeedbackDialog.tsx
index 86298fb970f..8223fde9295 100644
--- a/src/components/views/dialogs/BetaFeedbackDialog.tsx
+++ b/src/components/views/dialogs/BetaFeedbackDialog.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 
 import { _t } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
@@ -27,8 +26,9 @@ import GenericFeatureFeedbackDialog from "./GenericFeatureFeedbackDialog";
 
 // XXX: Keep this around for re-use in future Betas
 
-interface IProps extends IDialogProps {
+interface IProps {
     featureId: string;
+    onFinished(sendFeedback?: boolean): void;
 }
 
 const BetaFeedbackDialog: React.FC<IProps> = ({ featureId, onFinished }) => {
@@ -49,7 +49,7 @@ const BetaFeedbackDialog: React.FC<IProps> = ({ featureId, onFinished }) => {
             <AccessibleButton
                 kind="link_inline"
                 onClick={() => {
-                    onFinished(false);
+                    onFinished();
                     defaultDispatcher.dispatch({
                         action: Action.ViewUserSettings,
                         initialTabId: UserTab.Labs,
diff --git a/src/components/views/dialogs/BulkRedactDialog.tsx b/src/components/views/dialogs/BulkRedactDialog.tsx
index e1f9a11cd22..ba12f210399 100644
--- a/src/components/views/dialogs/BulkRedactDialog.tsx
+++ b/src/components/views/dialogs/BulkRedactDialog.tsx
@@ -26,19 +26,19 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
-import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "../dialogs/BaseDialog";
 import InfoDialog from "../dialogs/InfoDialog";
 import DialogButtons from "../elements/DialogButtons";
 import StyledCheckbox from "../elements/StyledCheckbox";
 
-interface IBulkRedactDialogProps extends IDialogProps {
+interface Props {
     matrixClient: MatrixClient;
     room: Room;
     member: RoomMember;
+    onFinished(redact?: boolean): void;
 }
 
-const BulkRedactDialog: React.FC<IBulkRedactDialogProps> = (props) => {
+const BulkRedactDialog: React.FC<Props> = (props) => {
     const { matrixClient: cli, room, member, onFinished } = props;
     const [keepStateEvents, setKeepStateEvents] = useState(true);
 
diff --git a/src/components/views/dialogs/ChangelogDialog.tsx b/src/components/views/dialogs/ChangelogDialog.tsx
index 85af8203b74..8321cc40f49 100644
--- a/src/components/views/dialogs/ChangelogDialog.tsx
+++ b/src/components/views/dialogs/ChangelogDialog.tsx
@@ -27,7 +27,7 @@ interface IProps {
     onFinished: (success: boolean) => void;
 }
 
-type State = Partial<Record<typeof REPOS[number], null | string | Commit[]>>;
+type State = Partial<Record<(typeof REPOS)[number], null | string | Commit[]>>;
 
 interface Commit {
     sha: string;
@@ -46,7 +46,7 @@ export default class ChangelogDialog extends React.Component<IProps, State> {
         this.state = {};
     }
 
-    private async fetchChanges(repo: typeof REPOS[number], oldVersion: string, newVersion: string): Promise<void> {
+    private async fetchChanges(repo: (typeof REPOS)[number], oldVersion: string, newVersion: string): Promise<void> {
         const url = `https://riot.im/github/repos/${repo}/compare/${oldVersion}...${newVersion}`;
 
         try {
diff --git a/src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx b/src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx
index 60e18eb263a..250b90e61df 100644
--- a/src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx
+++ b/src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx
@@ -24,7 +24,7 @@ import Spinner from "../elements/Spinner";
 
 interface IProps {
     redact: () => Promise<void>;
-    onFinished: (success: boolean) => void;
+    onFinished: (success?: boolean) => void;
 }
 
 interface IState {
diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.tsx b/src/components/views/dialogs/ConfirmUserActionDialog.tsx
index 0ee73f871a2..2fa684eda84 100644
--- a/src/components/views/dialogs/ConfirmUserActionDialog.tsx
+++ b/src/components/views/dialogs/ConfirmUserActionDialog.tsx
@@ -39,7 +39,7 @@ interface IProps {
     children?: ReactNode;
     className?: string;
     roomId?: string;
-    onFinished: (success: boolean, reason?: string) => void;
+    onFinished: (success?: boolean, reason?: string) => void;
 }
 
 interface IState {
@@ -55,7 +55,7 @@ interface IState {
  * Also tweaks the style for 'dangerous' actions (albeit only with colour)
  */
 export default class ConfirmUserActionDialog extends React.Component<IProps, IState> {
-    public static defaultProps = {
+    public static defaultProps: Partial<IProps> = {
         danger: false,
         askReason: false,
     };
diff --git a/src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx b/src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx
index 0f530a4fd77..e9ab1bc3cc5 100644
--- a/src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx
+++ b/src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx
@@ -21,7 +21,7 @@ import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 
 interface IProps {
-    onFinished: (success: boolean) => void;
+    onFinished: (success?: boolean) => void;
 }
 
 export default class ConfirmWipeDeviceDialog extends React.Component<IProps> {
diff --git a/src/components/views/dialogs/CreateRoomDialog.tsx b/src/components/views/dialogs/CreateRoomDialog.tsx
index 915ca9f249b..b15fb800d26 100644
--- a/src/components/views/dialogs/CreateRoomDialog.tsx
+++ b/src/components/views/dialogs/CreateRoomDialog.tsx
@@ -41,7 +41,7 @@ interface IProps {
     defaultName?: string;
     parentSpace?: Room;
     defaultEncrypted?: boolean;
-    onFinished(proceed: boolean, opts?: IOpts): void;
+    onFinished(proceed?: boolean, opts?: IOpts): void;
 }
 
 interface IState {
diff --git a/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx b/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx
index 59b697621f9..fe9f04af184 100644
--- a/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx
+++ b/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx
@@ -24,9 +24,10 @@ import Modal from "../../../Modal";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 import QuestionDialog from "./QuestionDialog";
-import { IDialogProps } from "./IDialogProps";
 
-interface IProps extends IDialogProps {}
+interface IProps {
+    onFinished(logout?: boolean): void;
+}
 
 const CryptoStoreTooNewDialog: React.FC<IProps> = (props: IProps) => {
     const brand = SdkConfig.get().brand;
@@ -72,7 +73,7 @@ const CryptoStoreTooNewDialog: React.FC<IProps> = (props: IProps) => {
             <DialogButtons
                 primaryButton={_t("Continue With Encryption Disabled")}
                 hasCancel={false}
-                onPrimaryButtonClick={props.onFinished}
+                onPrimaryButtonClick={() => props.onFinished(false)}
             >
                 <button onClick={_onLogoutClicked}>{_t("Sign out")}</button>
             </DialogButtons>
diff --git a/src/components/views/dialogs/DeactivateAccountDialog.tsx b/src/components/views/dialogs/DeactivateAccountDialog.tsx
index bdc1d54aba8..8e8f0be7703 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.tsx
+++ b/src/components/views/dialogs/DeactivateAccountDialog.tsx
@@ -39,20 +39,20 @@ type DialogAesthetics = Partial<{
 }>;
 
 interface IProps {
-    onFinished: (success: boolean) => void;
+    onFinished: (success?: boolean) => void;
 }
 
 interface IState {
     shouldErase: boolean;
-    errStr: string;
+    errStr: string | null;
     authData: any; // for UIA
     authEnabled: boolean; // see usages for information
 
     // A few strings that are passed to InteractiveAuth for design or are displayed
     // next to the InteractiveAuth component.
-    bodyText: string;
-    continueText: string;
-    continueKind: string;
+    bodyText?: string;
+    continueText?: string;
+    continueKind?: string;
 }
 
 export default class DeactivateAccountDialog extends React.Component<IProps, IState> {
@@ -64,12 +64,6 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
             errStr: null,
             authData: null, // for UIA
             authEnabled: true, // see usages for information
-
-            // A few strings that are passed to InteractiveAuth for design or are displayed
-            // next to the InteractiveAuth component.
-            bodyText: null,
-            continueText: null,
-            continueKind: null,
         };
 
         this.initAuth(/* shouldErase= */ false);
@@ -101,14 +95,16 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
         };
 
         const aesthetics = DEACTIVATE_AESTHETICS[stage];
-        let bodyText = null;
-        let continueText = null;
-        let continueKind = null;
+        let bodyText: string | undefined;
+        let continueText: string | undefined;
+        let continueKind: string | undefined;
         if (aesthetics) {
             const phaseAesthetics = aesthetics[phase];
-            if (phaseAesthetics?.body) bodyText = phaseAesthetics.body;
-            if (phaseAesthetics?.continueText) continueText = phaseAesthetics.continueText;
-            if (phaseAesthetics?.continueKind) continueKind = phaseAesthetics.continueKind;
+            if (phaseAesthetics) {
+                if (phaseAesthetics.body) bodyText = phaseAesthetics.body;
+                if (phaseAesthetics.continueText) continueText = phaseAesthetics.continueText;
+                if (phaseAesthetics.continueKind) continueKind = phaseAesthetics.continueKind;
+            }
         }
         this.setState({ bodyText, continueText, continueKind });
     };
@@ -183,7 +179,7 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
     }
 
     public render(): React.ReactNode {
-        let error = null;
+        let error: JSX.Element | undefined;
         if (this.state.errStr) {
             error = <div className="error">{this.state.errStr}</div>;
         }
diff --git a/src/components/views/dialogs/DevtoolsDialog.tsx b/src/components/views/dialogs/DevtoolsDialog.tsx
index 2b74667ba59..3fd45c17a10 100644
--- a/src/components/views/dialogs/DevtoolsDialog.tsx
+++ b/src/components/views/dialogs/DevtoolsDialog.tsx
@@ -65,7 +65,7 @@ const Tools: Record<Category, [label: string, tool: Tool][]> = {
 
 interface IProps {
     roomId: string;
-    onFinished(finished: boolean): void;
+    onFinished(finished?: boolean): void;
 }
 
 type ToolInfo = [label: string, tool: Tool];
diff --git a/src/components/views/dialogs/EndPollDialog.tsx b/src/components/views/dialogs/EndPollDialog.tsx
index 1951f881bb6..0d4a66dfe72 100644
--- a/src/components/views/dialogs/EndPollDialog.tsx
+++ b/src/components/views/dialogs/EndPollDialog.tsx
@@ -20,17 +20,16 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { PollEndEvent } from "matrix-js-sdk/src/extensible_events_v1/PollEndEvent";
 
 import { _t } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
 import QuestionDialog from "./QuestionDialog";
 import { findTopAnswer } from "../messages/MPollBody";
 import Modal from "../../../Modal";
 import ErrorDialog from "./ErrorDialog";
 import { GetRelationsForEvent } from "../rooms/EventTile";
 
-interface IProps extends IDialogProps {
+interface IProps {
     matrixClient: MatrixClient;
     event: MatrixEvent;
-    onFinished: (success: boolean) => void;
+    onFinished: (success?: boolean) => void;
     getRelationsForEvent?: GetRelationsForEvent;
 }
 
diff --git a/src/components/views/dialogs/ErrorDialog.tsx b/src/components/views/dialogs/ErrorDialog.tsx
index 62ce55cdf31..4a82941767a 100644
--- a/src/components/views/dialogs/ErrorDialog.tsx
+++ b/src/components/views/dialogs/ErrorDialog.tsx
@@ -31,7 +31,7 @@ import { _t } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
 
 interface IProps {
-    onFinished: (success: boolean) => void;
+    onFinished: (success?: boolean) => void;
     title?: string;
     description?: React.ReactNode;
     button?: string;
@@ -44,7 +44,7 @@ interface IState {
 }
 
 export default class ErrorDialog extends React.Component<IProps, IState> {
-    public static defaultProps = {
+    public static defaultProps: Partial<IProps> = {
         focus: true,
     };
 
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 406df1fd8e6..84afb0a4cc0 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -19,7 +19,6 @@ import { Room } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 import Field from "../elements/Field";
@@ -44,8 +43,9 @@ import InfoDialog from "./InfoDialog";
 import ChatExport from "../../../customisations/ChatExport";
 import { validateNumberInRange } from "../../../utils/validate";
 
-interface IProps extends IDialogProps {
+interface IProps {
     room: Room;
+    onFinished(doExport?: boolean): void;
 }
 
 interface ExportConfig {
@@ -110,11 +110,14 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
     const [displayCancel, setCancelWarning] = useState(false);
     const [exportCancelled, setExportCancelled] = useState(false);
     const [exportSuccessful, setExportSuccessful] = useState(false);
-    const [exporter, setExporter] = useStateCallback<Exporter>(null, async (exporter: Exporter): Promise<void> => {
-        await exporter?.export().then(() => {
-            if (!exportCancelled) setExportSuccessful(true);
-        });
-    });
+    const [exporter, setExporter] = useStateCallback<Exporter | null>(
+        null,
+        async (exporter: Exporter | null): Promise<void> => {
+            await exporter?.export().then(() => {
+                if (!exportCancelled) setExportSuccessful(true);
+            });
+        },
+    );
 
     const startExport = async (): Promise<void> => {
         const exportOptions = {
diff --git a/src/components/views/dialogs/FeedbackDialog.tsx b/src/components/views/dialogs/FeedbackDialog.tsx
index d1f950d7d62..d8ffb54d248 100644
--- a/src/components/views/dialogs/FeedbackDialog.tsx
+++ b/src/components/views/dialogs/FeedbackDialog.tsx
@@ -24,7 +24,6 @@ import SdkConfig from "../../../SdkConfig";
 import Modal from "../../../Modal";
 import BugReportDialog from "./BugReportDialog";
 import InfoDialog from "./InfoDialog";
-import { IDialogProps } from "./IDialogProps";
 import { submitFeedback } from "../../../rageshake/submit-rageshake";
 import { useStateToggle } from "../../../hooks/useStateToggle";
 import StyledCheckbox from "../elements/StyledCheckbox";
@@ -33,8 +32,9 @@ const existingIssuesUrl =
     "https://github.com/SchildiChat/schildichat-desktop/issues?q=is%3Aopen+is%3Aissue+sort%3Areactions-%2B1-desc";
 const newIssueUrl = "https://github.com/SchildiChat/schildichat-desktop/issues/new/choose";
 
-interface IProps extends IDialogProps {
+interface IProps {
     feature?: string;
+    onFinished(): void;
 }
 
 const FeedbackDialog: React.FC<IProps> = (props: IProps) => {
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index df922a5ed9f..00e32657655 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -29,7 +29,6 @@ import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import { useSettingValue } from "../../../hooks/useSettings";
 import { Layout } from "../../../settings/enums/Layout";
-import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import { avatarUrlForUser } from "../../../Avatar";
 import EventTile from "../rooms/EventTile";
@@ -55,13 +54,14 @@ import { RoomContextDetails } from "../rooms/RoomContextDetails";
 
 const AVATAR_SIZE = 30;
 
-interface IProps extends IDialogProps {
+interface IProps {
     matrixClient: MatrixClient;
     // The event to forward
     event: MatrixEvent;
     // We need a permalink creator for the source room to pass through to EventTile
     // in case the event is a reply (even though the user can't get at the link)
     permalinkCreator: RoomPermalinkCreator;
+    onFinished(): void;
 }
 
 interface IEntryProps {
diff --git a/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx b/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx
index 2bdc3b5b3f1..48e95f02443 100644
--- a/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx
+++ b/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx
@@ -20,17 +20,17 @@ import QuestionDialog from "./QuestionDialog";
 import { _t } from "../../../languageHandler";
 import Field from "../elements/Field";
 import SdkConfig from "../../../SdkConfig";
-import { IDialogProps } from "./IDialogProps";
 import { submitFeedback } from "../../../rageshake/submit-rageshake";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import Modal from "../../../Modal";
 import InfoDialog from "./InfoDialog";
 
-interface IProps extends IDialogProps {
+interface IProps {
     title: string;
     subheading: string;
     rageshakeLabel: string;
     rageshakeData?: Record<string, string>;
+    onFinished(sendFeedback?: boolean): void;
 }
 
 const GenericFeatureFeedbackDialog: React.FC<IProps> = ({
diff --git a/src/components/views/dialogs/HostSignupDialog.tsx b/src/components/views/dialogs/HostSignupDialog.tsx
deleted file mode 100644
index 631eb1abcf5..00000000000
--- a/src/components/views/dialogs/HostSignupDialog.tsx
+++ /dev/null
@@ -1,280 +0,0 @@
-/*
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from "react";
-import classNames from "classnames";
-import { logger } from "matrix-js-sdk/src/logger";
-
-import AccessibleButton from "../elements/AccessibleButton";
-import Modal from "../../../Modal";
-import QuestionDialog from "./QuestionDialog";
-import SdkConfig from "../../../SdkConfig";
-import { _t } from "../../../languageHandler";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { HostSignupStore } from "../../../stores/HostSignupStore";
-import { OwnProfileStore } from "../../../stores/OwnProfileStore";
-import { IPostmessage, IPostmessageResponseData, PostmessageAction } from "./HostSignupDialogTypes";
-import { IConfigOptions } from "../../../IConfigOptions";
-import { SnakedObject } from "../../../utils/SnakedObject";
-
-interface IProps {}
-
-interface IState {
-    completed: boolean;
-    error: string;
-    minimized: boolean;
-}
-
-export default class HostSignupDialog extends React.PureComponent<IProps, IState> {
-    private iframeRef: React.RefObject<HTMLIFrameElement> = React.createRef();
-    private readonly config: SnakedObject<IConfigOptions["host_signup"]>;
-
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            completed: false,
-            error: null,
-            minimized: false,
-        };
-
-        this.config = SdkConfig.getObject("host_signup");
-    }
-
-    private messageHandler = async (message: IPostmessage): Promise<void> => {
-        if (!this.config.get("url").startsWith(message.origin)) {
-            return;
-        }
-        switch (message.data.action) {
-            case PostmessageAction.HostSignupAccountDetailsRequest:
-                this.onAccountDetailsRequest();
-                break;
-            case PostmessageAction.Maximize:
-                this.setState({
-                    minimized: false,
-                });
-                break;
-            case PostmessageAction.Minimize:
-                this.setState({
-                    minimized: true,
-                });
-                break;
-            case PostmessageAction.SetupComplete:
-                this.setState({
-                    completed: true,
-                });
-                break;
-            case PostmessageAction.CloseDialog:
-                return this.closeDialog();
-        }
-    };
-
-    private maximizeDialog = (): void => {
-        this.setState({
-            minimized: false,
-        });
-        // Send this action to the iframe so it can act accordingly
-        this.sendMessage({
-            action: PostmessageAction.Maximize,
-        });
-    };
-
-    private minimizeDialog = (): void => {
-        this.setState({
-            minimized: true,
-        });
-        // Send this action to the iframe so it can act accordingly
-        this.sendMessage({
-            action: PostmessageAction.Minimize,
-        });
-    };
-
-    private closeDialog = async (): Promise<void> => {
-        window.removeEventListener("message", this.messageHandler);
-        // Finally clear the flag in
-        return HostSignupStore.instance.setHostSignupActive(false);
-    };
-
-    private onCloseClick = async (): Promise<void> => {
-        if (this.state.completed) {
-            // We're done, close
-            return this.closeDialog();
-        } else {
-            Modal.createDialog(QuestionDialog, {
-                title: _t("Confirm abort of host creation"),
-                description: _t(
-                    "Are you sure you wish to abort creation of the host? The process cannot be continued.",
-                ),
-                button: _t("Abort"),
-                onFinished: (result) => {
-                    if (result) {
-                        return this.closeDialog();
-                    }
-                },
-            });
-        }
-    };
-
-    private sendMessage = (message: IPostmessageResponseData): void => {
-        this.iframeRef.current.contentWindow.postMessage(message, this.config.get("url"));
-    };
-
-    private async sendAccountDetails(): Promise<void> {
-        const openIdToken = await MatrixClientPeg.get().getOpenIdToken();
-        if (!openIdToken || !openIdToken.access_token) {
-            logger.warn("Failed to connect to homeserver for OpenID token.");
-            this.setState({
-                completed: true,
-                error: _t("Failed to connect to your homeserver. Please close this dialog and try again."),
-            });
-            return;
-        }
-        this.sendMessage({
-            action: PostmessageAction.HostSignupAccountDetails,
-            account: {
-                accessToken: await MatrixClientPeg.get().getAccessToken(),
-                name: OwnProfileStore.instance.displayName,
-                openIdToken: openIdToken.access_token,
-                serverName: await MatrixClientPeg.get().getDomain(),
-                userLocalpart: await MatrixClientPeg.get().getUserIdLocalpart(),
-                termsAccepted: true,
-            },
-        });
-    }
-
-    private onAccountDetailsDialogFinished = async (result: boolean): Promise<void> => {
-        if (result) {
-            return this.sendAccountDetails();
-        }
-        return this.closeDialog();
-    };
-
-    private onAccountDetailsRequest = (): void => {
-        const cookiePolicyUrl = this.config.get("cookie_policy_url");
-        const privacyPolicyUrl = this.config.get("privacy_policy_url");
-        const tosUrl = this.config.get("terms_of_service_url");
-
-        const textComponent = (
-            <>
-                <p>
-                    {_t(
-                        "Continuing temporarily allows the %(hostSignupBrand)s setup process to access your " +
-                            "account to fetch verified email addresses. This data is not stored.",
-                        {
-                            hostSignupBrand: this.config.get("brand"),
-                        },
-                    )}
-                </p>
-                <p>
-                    {_t(
-                        "Learn more in our <privacyPolicyLink />, <termsOfServiceLink /> and <cookiePolicyLink />.",
-                        {},
-                        {
-                            cookiePolicyLink: () => (
-                                <a href={cookiePolicyUrl} target="_blank" rel="noreferrer noopener">
-                                    {_t("Cookie Policy")}
-                                </a>
-                            ),
-                            privacyPolicyLink: () => (
-                                <a href={privacyPolicyUrl} target="_blank" rel="noreferrer noopener">
-                                    {_t("Privacy Policy")}
-                                </a>
-                            ),
-                            termsOfServiceLink: () => (
-                                <a href={tosUrl} target="_blank" rel="noreferrer noopener">
-                                    {_t("Terms of Service")}
-                                </a>
-                            ),
-                        },
-                    )}
-                </p>
-            </>
-        );
-        Modal.createDialog(QuestionDialog, {
-            title: _t("You should know"),
-            description: textComponent,
-            button: _t("Continue"),
-            onFinished: this.onAccountDetailsDialogFinished,
-        });
-    };
-
-    public componentDidMount(): void {
-        window.addEventListener("message", this.messageHandler);
-    }
-
-    public componentWillUnmount(): void {
-        if (HostSignupStore.instance.isHostSignupActive) {
-            // Run the close dialog actions if we're still active, otherwise good to go
-            this.closeDialog();
-        }
-    }
-
-    public render(): React.ReactNode {
-        return (
-            <div className={classNames({ mx_Dialog_wrapper: !this.state.minimized })}>
-                <div
-                    className={classNames("mx_Dialog", {
-                        mx_HostSignupDialog_minimized: this.state.minimized,
-                        mx_HostSignupDialog: !this.state.minimized,
-                    })}
-                >
-                    {this.state.minimized && (
-                        <div className="mx_Dialog_header mx_Dialog_headerWithButton">
-                            <div className="mx_Dialog_title">
-                                {_t("%(hostSignupBrand)s Setup", {
-                                    hostSignupBrand: this.config.get("brand"),
-                                })}
-                            </div>
-                            <AccessibleButton
-                                className="mx_HostSignup_maximize_button"
-                                onClick={this.maximizeDialog}
-                                aria-label={_t("Maximise dialog")}
-                                title={_t("Maximise dialog")}
-                            />
-                        </div>
-                    )}
-                    {!this.state.minimized && (
-                        <div className="mx_Dialog_header mx_Dialog_headerWithCancel">
-                            <AccessibleButton
-                                onClick={this.minimizeDialog}
-                                className="mx_HostSignup_minimize_button"
-                                aria-label={_t("Minimise dialog")}
-                                title={_t("Minimise dialog")}
-                            />
-                            <AccessibleButton
-                                onClick={this.onCloseClick}
-                                className="mx_Dialog_cancelButton"
-                                aria-label={_t("Close dialog")}
-                                title={_t("Close dialog")}
-                            />
-                        </div>
-                    )}
-                    {this.state.error && <div>{this.state.error}</div>}
-                    {!this.state.error && (
-                        <iframe
-                            title={_t("Upgrade to %(hostSignupBrand)s", {
-                                hostSignupBrand: this.config.get("brand"),
-                            })}
-                            src={this.config.get("url")}
-                            ref={this.iframeRef}
-                            sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
-                        />
-                    )}
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/components/views/dialogs/HostSignupDialogTypes.ts b/src/components/views/dialogs/HostSignupDialogTypes.ts
deleted file mode 100644
index 46f0a70ce37..00000000000
--- a/src/components/views/dialogs/HostSignupDialogTypes.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-export enum PostmessageAction {
-    CloseDialog = "close_dialog",
-    HostSignupAccountDetails = "host_signup_account_details",
-    HostSignupAccountDetailsRequest = "host_signup_account_details_request",
-    Minimize = "host_signup_minimize",
-    Maximize = "host_signup_maximize",
-    SetupComplete = "setup_complete",
-}
-
-interface IAccountData {
-    accessToken: string;
-    name: string;
-    openIdToken: string;
-    serverName: string;
-    userLocalpart: string;
-    termsAccepted: boolean;
-}
-
-export interface IPostmessageRequestData {
-    action: PostmessageAction;
-}
-
-export interface IPostmessageResponseData {
-    action: PostmessageAction;
-    account?: IAccountData;
-}
-
-export interface IPostmessage {
-    data: IPostmessageRequestData;
-    origin: string;
-}
diff --git a/src/components/views/dialogs/IncomingSasDialog.tsx b/src/components/views/dialogs/IncomingSasDialog.tsx
index a9540ef95cb..1edb3d9a536 100644
--- a/src/components/views/dialogs/IncomingSasDialog.tsx
+++ b/src/components/views/dialogs/IncomingSasDialog.tsx
@@ -29,7 +29,6 @@ import Spinner from "../elements/Spinner";
 import VerificationShowSas from "../verification/VerificationShowSas";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
-import { IDialogProps } from "./IDialogProps";
 
 const PHASE_START = 0;
 const PHASE_SHOW_SAS = 1;
@@ -37,8 +36,9 @@ const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 2;
 const PHASE_VERIFIED = 3;
 const PHASE_CANCELLED = 4;
 
-interface IProps extends IDialogProps {
+interface IProps {
     verifier: VerificationBase<SasEvent, any>;
+    onFinished(verified?: boolean): void;
 }
 
 interface IState {
diff --git a/src/components/views/dialogs/InfoDialog.tsx b/src/components/views/dialogs/InfoDialog.tsx
index 3e975de6e36..790c77d4188 100644
--- a/src/components/views/dialogs/InfoDialog.tsx
+++ b/src/components/views/dialogs/InfoDialog.tsx
@@ -19,11 +19,10 @@ import React, { ReactNode, KeyboardEvent } from "react";
 import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 
-interface IProps extends IDialogProps {
+interface IProps {
     top?: ReactNode;
     title?: string;
     description?: ReactNode;
@@ -32,10 +31,11 @@ interface IProps extends IDialogProps {
     hasCloseButton?: boolean;
     fixedWidth?: boolean;
     onKeyDown?(event: KeyboardEvent): void;
+    onFinished(): void;
 }
 
 export default class InfoDialog extends React.Component<IProps> {
-    public static defaultProps = {
+    public static defaultProps: Partial<IProps> = {
         title: "",
         description: "",
         hasCloseButton: false,
diff --git a/src/components/views/dialogs/IntegrationsDisabledDialog.tsx b/src/components/views/dialogs/IntegrationsDisabledDialog.tsx
index 1daae2f8a84..f8098f3d419 100644
--- a/src/components/views/dialogs/IntegrationsDisabledDialog.tsx
+++ b/src/components/views/dialogs/IntegrationsDisabledDialog.tsx
@@ -21,9 +21,10 @@ import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
-import { IDialogProps } from "./IDialogProps";
 
-interface IProps extends IDialogProps {}
+interface IProps {
+    onFinished(): void;
+}
 
 export default class IntegrationsDisabledDialog extends React.Component<IProps> {
     private onAcknowledgeClick = (): void => {
diff --git a/src/components/views/dialogs/IntegrationsImpossibleDialog.tsx b/src/components/views/dialogs/IntegrationsImpossibleDialog.tsx
index a0b9246ce4b..5b158402e87 100644
--- a/src/components/views/dialogs/IntegrationsImpossibleDialog.tsx
+++ b/src/components/views/dialogs/IntegrationsImpossibleDialog.tsx
@@ -18,11 +18,12 @@ import React from "react";
 
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 
-interface IProps extends IDialogProps {}
+interface IProps {
+    onFinished(): void;
+}
 
 export default class IntegrationsImpossibleDialog extends React.Component<IProps> {
     private onAcknowledgeClick = (): void => {
diff --git a/src/components/views/dialogs/InteractiveAuthDialog.tsx b/src/components/views/dialogs/InteractiveAuthDialog.tsx
index 13e921a4f98..14b800243dd 100644
--- a/src/components/views/dialogs/InteractiveAuthDialog.tsx
+++ b/src/components/views/dialogs/InteractiveAuthDialog.tsx
@@ -25,7 +25,6 @@ import AccessibleButton from "../elements/AccessibleButton";
 import InteractiveAuth, { ERROR_USER_CANCELLED, InteractiveAuthCallback } from "../../structures/InteractiveAuth";
 import { SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
 import BaseDialog from "./BaseDialog";
-import { IDialogProps } from "./IDialogProps";
 
 type DialogAesthetics = Partial<{
     [x in AuthType]: {
@@ -38,7 +37,7 @@ type DialogAesthetics = Partial<{
     };
 }>;
 
-export interface InteractiveAuthDialogProps extends IDialogProps {
+export interface InteractiveAuthDialogProps {
     // matrix client to use for UI auth requests
     matrixClient: MatrixClient;
 
@@ -72,10 +71,12 @@ export interface InteractiveAuthDialogProps extends IDialogProps {
     //
     // Default is defined in _getDefaultDialogAesthetics()
     aestheticsForStagePhases?: DialogAesthetics;
+
+    onFinished(success?: boolean, result?: IAuthData | Error | null): void;
 }
 
 interface IState {
-    authError: Error;
+    authError: Error | null;
 
     // See _onUpdateStagePhase()
     uiaStage: AuthType | null;
@@ -146,20 +147,26 @@ export default class InteractiveAuthDialog extends React.Component<InteractiveAu
 
         let title = this.state.authError ? "Error" : this.props.title || _t("Authentication");
         let body = this.state.authError ? null : this.props.body;
-        let continueText = null;
-        let continueKind = null;
+        let continueText: string | undefined;
+        let continueKind: string | undefined;
         const dialogAesthetics = this.props.aestheticsForStagePhases || this.getDefaultDialogAesthetics();
         if (!this.state.authError && dialogAesthetics) {
-            if (dialogAesthetics[this.state.uiaStage]) {
-                const aesthetics = dialogAesthetics[this.state.uiaStage][this.state.uiaStagePhase];
-                if (aesthetics && aesthetics.title) title = aesthetics.title;
-                if (aesthetics && aesthetics.body) body = aesthetics.body;
-                if (aesthetics && aesthetics.continueText) continueText = aesthetics.continueText;
-                if (aesthetics && aesthetics.continueKind) continueKind = aesthetics.continueKind;
+            if (
+                this.state.uiaStage !== null &&
+                this.state.uiaStagePhase !== null &&
+                dialogAesthetics[this.state.uiaStage]
+            ) {
+                const aesthetics = dialogAesthetics[this.state.uiaStage]![this.state.uiaStagePhase];
+                if (aesthetics) {
+                    if (aesthetics.title) title = aesthetics.title;
+                    if (aesthetics.body) body = aesthetics.body;
+                    if (aesthetics.continueText) continueText = aesthetics.continueText;
+                    if (aesthetics.continueKind) continueKind = aesthetics.continueKind;
+                }
             }
         }
 
-        let content;
+        let content: JSX.Element;
         if (this.state.authError) {
             content = (
                 <div id="mx_Dialog_content">
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 30844406199..d5563d0e268 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -70,16 +70,17 @@ import {
     startDmOnFirstMessage,
     ThreepidMember,
 } from "../../../utils/direct-messages";
-import { KIND_CALL_TRANSFER, KIND_DM, KIND_INVITE } from "./InviteDialogTypes";
+import { InviteKind } from "./InviteDialogTypes";
 import Modal from "../../../Modal";
 import dis from "../../../dispatcher/dispatcher";
+import { privateShouldBeEncrypted } from "../../../utils/rooms";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
 
 interface Result {
     userId: string;
-    user: RoomMember | DirectoryMember | ThreepidMember;
+    user: Member;
     lastActive?: number;
 }
 
@@ -130,6 +131,20 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
     }
 }
 
+/**
+ * Converts a RoomMember to a Member.
+ * Returns the Member if it is already a Member.
+ */
+const toMember = (member: RoomMember | Member): Member => {
+    return member instanceof RoomMember
+        ? new DirectoryMember({
+              user_id: member.userId,
+              display_name: member.name,
+              avatar_url: member.getMxcAvatarUrl(),
+          })
+        : member;
+};
+
 interface IDMRoomTileProps {
     member: Member;
     lastActiveTs?: number;
@@ -232,7 +247,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
 
         const caption = (this.props.member as ThreepidMember).isEmail
             ? _t("Invite by email")
-            : this.highlightName(userIdentifier);
+            : this.highlightName(userIdentifier || this.props.member.userId);
 
         return (
             <div className="mx_InviteDialog_tile mx_InviteDialog_tile--room" onClick={this.onClick}>
@@ -253,32 +268,32 @@ interface BaseProps {
     // Takes a boolean which is true if a user / users were invited /
     // a call transfer was initiated or false if the dialog was cancelled
     // with no action taken.
-    onFinished: (success: boolean) => void;
+    onFinished: (success?: boolean) => void;
 
     // Initial value to populate the filter with
     initialText?: string;
 }
 
 interface InviteDMProps extends BaseProps {
-    // The kind of invite being performed. Assumed to be KIND_DM if not provided.
-    kind?: typeof KIND_DM;
+    // The kind of invite being performed. Assumed to be InviteKind.Dm if not provided.
+    kind?: InviteKind.Dm;
 }
 
 interface InviteRoomProps extends BaseProps {
-    kind: typeof KIND_INVITE;
+    kind: InviteKind.Invite;
 
-    // The room ID this dialog is for. Only required for KIND_INVITE.
+    // The room ID this dialog is for. Only required for InviteKind.Invite.
     roomId: string;
 }
 
 function isRoomInvite(props: Props): props is InviteRoomProps {
-    return props.kind === KIND_INVITE;
+    return props.kind === InviteKind.Invite;
 }
 
 interface InviteCallProps extends BaseProps {
-    kind: typeof KIND_CALL_TRANSFER;
+    kind: InviteKind.CallTransfer;
 
-    // The call to transfer. Only required for KIND_CALL_TRANSFER.
+    // The call to transfer. Only required for InviteKind.CallTransfer.
     call: MatrixCall;
 }
 
@@ -305,8 +320,8 @@ interface IInviteDialogState {
 }
 
 export default class InviteDialog extends React.PureComponent<Props, IInviteDialogState> {
-    public static defaultProps = {
-        kind: KIND_DM,
+    public static defaultProps: Partial<Props> = {
+        kind: InviteKind.Dm,
         initialText: "",
     };
 
@@ -314,17 +329,21 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
     private editorRef = createRef<HTMLInputElement>();
     private numberEntryFieldRef: React.RefObject<Field> = createRef();
     private unmounted = false;
+    private encryptionByDefault = false;
 
     public constructor(props: Props) {
         super(props);
 
-        if (props.kind === KIND_INVITE && !props.roomId) {
-            throw new Error("When using KIND_INVITE a roomId is required for an InviteDialog");
-        } else if (props.kind === KIND_CALL_TRANSFER && !props.call) {
-            throw new Error("When using KIND_CALL_TRANSFER a call is required for an InviteDialog");
+        if (props.kind === InviteKind.Invite && !props.roomId) {
+            throw new Error("When using InviteKind.Invite a roomId is required for an InviteDialog");
+        } else if (props.kind === InviteKind.CallTransfer && !props.call) {
+            throw new Error("When using InviteKind.CallTransfer a call is required for an InviteDialog");
         }
 
-        const alreadyInvited = new Set([MatrixClientPeg.get().getUserId()!, SdkConfig.get("welcome_user_id")]);
+        const alreadyInvited = new Set([MatrixClientPeg.get().getUserId()!]);
+        const welcomeUserId = SdkConfig.get("welcome_user_id");
+        if (welcomeUserId) alreadyInvited.add(welcomeUserId);
+
         if (isRoomInvite(props)) {
             const room = MatrixClientPeg.get().getRoom(props.roomId);
             if (!room) throw new Error("Room ID given to InviteDialog does not look like a room");
@@ -355,6 +374,8 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
     }
 
     public componentDidMount(): void {
+        this.encryptionByDefault = privateShouldBeEncrypted();
+
         if (this.props.initialText) {
             this.updateSuggestions(this.props.initialText);
         }
@@ -387,9 +408,10 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
 
         const recents: {
             userId: string;
-            user: RoomMember;
+            user: Member;
             lastActive: number;
         }[] = [];
+
         for (const userId in rooms) {
             // Filter out user IDs that are already in the room / should be excluded
             if (excludedTargetIds.has(userId)) {
@@ -398,8 +420,8 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             }
 
             const room = rooms[userId];
-            const member = room.getMember(userId);
-            if (!member) {
+            const roomMember = room.getMember(userId);
+            if (!roomMember) {
                 // just skip people who don't have memberships for some reason
                 logger.warn(`[Invite:Recents] ${userId} is missing a member object in their own DM (${room.roomId})`);
                 continue;
@@ -425,7 +447,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
                 continue;
             }
 
-            recents.push({ userId, user: member, lastActive: lastEventTs });
+            recents.push({ userId, user: toMember(roomMember), lastActive: lastEventTs });
         }
         if (!recents) logger.warn("[Invite:Recents] No recents to suggest!");
 
@@ -435,17 +457,18 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         return recents;
     }
 
-    private buildSuggestions(excludedTargetIds: Set<string>): { userId: string; user: RoomMember }[] {
+    private buildSuggestions(excludedTargetIds: Set<string>): { userId: string; user: Member }[] {
         const cli = MatrixClientPeg.get();
         const activityScores = buildActivityScores(cli);
         const memberScores = buildMemberScores(cli);
+
         const memberComparator = compareMembers(activityScores, memberScores);
 
         return Object.values(memberScores)
             .map(({ member }) => member)
             .filter((member) => !excludedTargetIds.has(member.userId))
             .sort(memberComparator)
-            .map((member) => ({ userId: member.userId, user: member }));
+            .map((member) => ({ userId: member.userId, user: toMember(member) }));
     }
 
     private shouldAbortAfterInviteError(result: IInviteResult, room: Room): boolean {
@@ -458,13 +481,20 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         // Check to see if there's anything to convert first
         if (!this.state.filterText || !this.state.filterText.includes("@")) return this.state.targets || [];
 
+        if (!this.canInviteMore()) {
+            // There should only be one third-party invite → do not allow more targets
+            return this.state.targets;
+        }
+
         let newMember: Member | undefined;
         if (this.state.filterText.startsWith("@")) {
             // Assume mxid
             newMember = new DirectoryMember({ user_id: this.state.filterText });
         } else if (SettingsStore.getValue(UIFeature.IdentityServer)) {
             // Assume email
-            newMember = new ThreepidMember(this.state.filterText);
+            if (this.canInviteThirdParty()) {
+                newMember = new ThreepidMember(this.state.filterText);
+            }
         }
         if (!newMember) return this.state.targets;
 
@@ -493,7 +523,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
     };
 
     private inviteUsers = async (): Promise<void> => {
-        if (this.props.kind !== KIND_INVITE) return;
+        if (this.props.kind !== InviteKind.Invite) return;
         this.setState({ busy: true });
         this.convertFilter();
         const targets = this.convertFilter();
@@ -528,7 +558,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
     };
 
     private transferCall = async (): Promise<void> => {
-        if (this.props.kind !== KIND_CALL_TRANSFER) return;
+        if (this.props.kind !== InviteKind.CallTransfer) return;
         if (this.state.currentTabId == TabId.UserDirectory) {
             this.convertFilter();
             const targets = this.convertFilter();
@@ -657,7 +687,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             this.setState({ tryingIdentityServer: true });
             return;
         }
-        if (term.indexOf("@") > 0 && Email.looksValid(term) && SettingsStore.getValue(UIFeature.IdentityServer)) {
+        if (Email.looksValid(term) && this.canInviteThirdParty() && SettingsStore.getValue(UIFeature.IdentityServer)) {
             // Start off by suggesting the plain email while we try and resolve it
             // to a real account.
             this.setState({
@@ -667,6 +697,9 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             try {
                 const authClient = new IdentityAuthClient();
                 const token = await authClient.getAccessToken();
+                // No token → unable to try a lookup
+                if (!token) return;
+
                 if (term !== this.state.filterText) return; // abandon hope
 
                 const lookup = await MatrixClientPeg.get().lookupThreePid("email", term, token);
@@ -737,7 +770,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             if (idx >= 0) {
                 targets.splice(idx, 1);
             } else {
-                if (this.props.kind === KIND_CALL_TRANSFER && targets.length > 0) {
+                if (this.props.kind === InviteKind.CallTransfer && targets.length > 0) {
                     targets = [];
                 }
                 targets.push(member);
@@ -764,6 +797,13 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     };
 
+    private parseFilter(filter: string): string[] {
+        return filter
+            .split(/[\s,]+/)
+            .map((p) => p.trim())
+            .filter((p) => !!p); // filter empty strings
+    }
+
     private onPaste = async (e: React.ClipboardEvent): Promise<void> => {
         if (this.state.filterText) {
             // if the user has already typed something, just let them
@@ -785,19 +825,32 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         ];
         const toAdd: Member[] = [];
         const failed: string[] = [];
-        const potentialAddresses = text
-            .split(/[\s,]+/)
-            .map((p) => p.trim())
-            .filter((p) => !!p); // filter empty strings
+
+        // Addresses that could not be added.
+        // Will be displayed as filter text to provide feedback.
+        const unableToAddMore: string[] = [];
+
+        const potentialAddresses = this.parseFilter(text);
+
         for (const address of potentialAddresses) {
             const member = possibleMembers.find((m) => m.userId === address);
             if (member) {
-                toAdd.push(member.user);
+                if (this.canInviteMore([...this.state.targets, ...toAdd])) {
+                    toAdd.push(member.user);
+                } else {
+                    // Invite not possible for current targets and pasted targets.
+                    unableToAddMore.push(address);
+                }
                 continue;
             }
 
-            if (address.indexOf("@") > 0 && Email.looksValid(address)) {
-                toAdd.push(new ThreepidMember(address));
+            if (Email.looksValid(address)) {
+                if (this.canInviteThirdParty([...this.state.targets, ...toAdd])) {
+                    toAdd.push(new ThreepidMember(address));
+                } else {
+                    // Third-party invite not possible for current targets and pasted targets.
+                    unableToAddMore.push(address);
+                }
                 continue;
             }
 
@@ -834,7 +887,16 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             });
         }
 
-        this.setState({ targets: [...this.state.targets, ...toAdd] });
+        if (unableToAddMore) {
+            this.setState({
+                filterText: unableToAddMore.join(" "),
+                targets: [...this.state.targets, ...toAdd],
+            });
+        } else {
+            this.setState({
+                targets: [...this.state.targets, ...toAdd],
+            });
+        }
     };
 
     private onClickInputArea = (e: React.MouseEvent): void => {
@@ -869,7 +931,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         const lastActive = (m: Result): number | undefined => (kind === "recents" ? m.lastActive : undefined);
         let sectionName = kind === "recents" ? _t("Recent Conversations") : _t("Suggestions");
 
-        if (this.props.kind === KIND_INVITE) {
+        if (this.props.kind === InviteKind.Invite) {
             sectionName = kind === "recents" ? _t("Recently Direct Messaged") : _t("Suggestions");
         }
 
@@ -898,6 +960,11 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         // Hide the section if there's nothing to filter by
         if (sourceMembers.length === 0 && !hasAdditionalMembers) return null;
 
+        if (!this.canInviteThirdParty()) {
+            // It is currently not allowed to add more third-party invites. Filter them out.
+            priorityAdditionalMembers = priorityAdditionalMembers.filter((s) => s instanceof ThreepidMember);
+        }
+
         // Do some simple filtering on the input before going much further. If we get no results, say so.
         if (this.state.filterText) {
             const filterBy = this.state.filterText.toLowerCase();
@@ -959,7 +1026,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
 
     private renderEditor(): JSX.Element {
         const hasPlaceholder =
-            this.props.kind == KIND_CALL_TRANSFER &&
+            this.props.kind == InviteKind.CallTransfer &&
             this.state.targets.length === 0 &&
             this.state.filterText.length === 0;
         const targets = this.state.targets.map((t) => (
@@ -974,7 +1041,9 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
                 ref={this.editorRef}
                 onPaste={this.onPaste}
                 autoFocus={true}
-                disabled={this.state.busy || (this.props.kind == KIND_CALL_TRANSFER && this.state.targets.length > 0)}
+                disabled={
+                    this.state.busy || (this.props.kind == InviteKind.CallTransfer && this.state.targets.length > 0)
+                }
                 autoComplete="off"
                 placeholder={hasPlaceholder ? _t("Search") : undefined}
                 data-testid="invite-dialog-input"
@@ -1085,11 +1154,47 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
 
     private get screenName(): ScreenName | undefined {
         switch (this.props.kind) {
-            case KIND_DM:
+            case InviteKind.Dm:
                 return "StartChat";
         }
     }
 
+    /**
+     * If encryption by default is enabled, third-party invites should be encrypted as well.
+     * For encryption to work, the other side requires a device.
+     * To achieve this Element implements a waiting room until all have joined.
+     * Waiting for many users degrades the UX → only one email invite is allowed at a time.
+     *
+     * @param targets - Optional member list to check. Uses targets from state if not provided.
+     */
+    private canInviteMore(targets?: (Member | RoomMember)[]): boolean {
+        targets = targets || this.state.targets;
+        return this.canInviteThirdParty(targets) || !targets.some((t) => t instanceof ThreepidMember);
+    }
+
+    /**
+     * A third-party invite is possible if
+     * - this is a non-DM dialog or
+     * - there are no invites yet or
+     * - encryption by default is not enabled
+     *
+     * Also see {@link InviteDialog#canInviteMore}.
+     *
+     * @param targets - Optional member list to check. Uses targets from state if not provided.
+     */
+    private canInviteThirdParty(targets?: (Member | RoomMember)[]): boolean {
+        targets = targets || this.state.targets;
+        return this.props.kind !== InviteKind.Dm || targets.length === 0 || !this.encryptionByDefault;
+    }
+
+    private hasFilterAtLeastOneEmail(): boolean {
+        if (!this.state.filterText) return false;
+
+        return this.parseFilter(this.state.filterText).some((address: string) => {
+            return Email.looksValid(address);
+        });
+    }
+
     public render(): React.ReactNode {
         let spinner: JSX.Element | undefined;
         if (this.state.busy) {
@@ -1112,7 +1217,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
 
         const cli = MatrixClientPeg.get();
         const userId = cli.getUserId()!;
-        if (this.props.kind === KIND_DM) {
+        if (this.props.kind === InviteKind.Dm) {
             title = _t("Direct Messages");
 
             if (identityServersEnabled) {
@@ -1164,7 +1269,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
                     </CopyableText>
                 </div>
             );
-        } else if (this.props.kind === KIND_INVITE) {
+        } else if (this.props.kind === InviteKind.Invite) {
             const roomId = this.props.roomId;
             const room = MatrixClientPeg.get()?.getRoom(roomId);
             const isSpace = room?.isSpaceRoom();
@@ -1235,7 +1340,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
                     );
                 }
             }
-        } else if (this.props.kind === KIND_CALL_TRANSFER) {
+        } else if (this.props.kind === InviteKind.CallTransfer) {
             title = _t("Transfer");
 
             consultConnectSection = (
@@ -1264,7 +1369,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
 
         const goButton =
-            this.props.kind == KIND_CALL_TRANSFER ? null : (
+            this.props.kind == InviteKind.CallTransfer ? null : (
                 <AccessibleButton
                     kind="primary"
                     onClick={goButtonFn}
@@ -1275,6 +1380,26 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
                 </AccessibleButton>
             );
 
+        let results: React.ReactNode | null = null;
+        let onlyOneThreepidNote: React.ReactNode | null = null;
+
+        if (!this.canInviteMore() || (this.hasFilterAtLeastOneEmail() && !this.canInviteThirdParty())) {
+            // We are in DM case here, because of the checks in canInviteMore() / canInviteThirdParty().
+            onlyOneThreepidNote = (
+                <div className="mx_InviteDialog_oneThreepid">
+                    {_t("Invites by email can only be sent one at a time")}
+                </div>
+            );
+        } else {
+            results = (
+                <div className="mx_InviteDialog_userSections">
+                    {this.renderSection("recents")}
+                    {this.renderSection("suggestions")}
+                    {extraSection}
+                </div>
+            );
+        }
+
         const usersSection = (
             <React.Fragment>
                 <p className="mx_InviteDialog_helpText">{helpText}</p>
@@ -1288,17 +1413,14 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
                 {keySharingWarning}
                 {this.renderIdentityServerWarning()}
                 <div className="error">{this.state.errorText}</div>
-                <div className="mx_InviteDialog_userSections">
-                    {this.renderSection("recents")}
-                    {this.renderSection("suggestions")}
-                    {extraSection}
-                </div>
+                {onlyOneThreepidNote}
+                {results}
                 {footer}
             </React.Fragment>
         );
 
         let dialogContent;
-        if (this.props.kind === KIND_CALL_TRANSFER) {
+        if (this.props.kind === InviteKind.CallTransfer) {
             const tabs: Tab[] = [];
             tabs.push(
                 new Tab(TabId.UserDirectory, _td("User Directory"), "mx_InviteDialog_userDirectoryIcon", usersSection),
@@ -1363,8 +1485,8 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         return (
             <BaseDialog
                 className={classNames({
-                    mx_InviteDialog_transfer: this.props.kind === KIND_CALL_TRANSFER,
-                    mx_InviteDialog_other: this.props.kind !== KIND_CALL_TRANSFER,
+                    mx_InviteDialog_transfer: this.props.kind === InviteKind.CallTransfer,
+                    mx_InviteDialog_other: this.props.kind !== InviteKind.CallTransfer,
                     mx_InviteDialog_hasFooter: !!footer,
                 })}
                 hasCancel={true}
diff --git a/src/components/views/dialogs/InviteDialogTypes.ts b/src/components/views/dialogs/InviteDialogTypes.ts
index 7eed739250c..a061b884d76 100644
--- a/src/components/views/dialogs/InviteDialogTypes.ts
+++ b/src/components/views/dialogs/InviteDialogTypes.ts
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export const KIND_DM = "dm";
-export const KIND_INVITE = "invite";
-// NB. This dialog needs the 'mx_InviteDialog_transferWrapper' wrapper class to have the correct
-// padding on the bottom (because all modals have 24px padding on all sides), so this needs to
-// be passed when creating the modal
-export const KIND_CALL_TRANSFER = "call_transfer";
-
-export type AnyInviteKind = typeof KIND_INVITE | typeof KIND_DM | typeof KIND_CALL_TRANSFER;
+export enum InviteKind {
+    Dm = "dm",
+    Invite = "invite",
+    // NB. This dialog needs the 'mx_InviteDialog_transferWrapper' wrapper class to have the correct
+    // padding on the bottom (because all modals have 24px padding on all sides), so this needs to
+    // be passed when creating the modal
+    CallTransfer = "call_transfer",
+}
diff --git a/src/components/views/dialogs/KeySignatureUploadFailedDialog.tsx b/src/components/views/dialogs/KeySignatureUploadFailedDialog.tsx
index 10a5d910288..25b367bf1d1 100644
--- a/src/components/views/dialogs/KeySignatureUploadFailedDialog.tsx
+++ b/src/components/views/dialogs/KeySignatureUploadFailedDialog.tsx
@@ -21,9 +21,8 @@ import SdkConfig from "../../../SdkConfig";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 import Spinner from "../elements/Spinner";
-import { IDialogProps } from "./IDialogProps";
 
-interface IProps extends IDialogProps {
+interface IProps {
     failures: Record<
         string,
         Record<
@@ -35,7 +34,8 @@ interface IProps extends IDialogProps {
         >
     >;
     source: string;
-    continuation: () => Promise<void>;
+    continuation: (opts: { shouldEmit: boolean }) => Promise<void>;
+    onFinished(): void;
 }
 
 const KeySignatureUploadFailedDialog: React.FC<IProps> = ({ failures, source, continuation, onFinished }) => {
@@ -61,7 +61,7 @@ const KeySignatureUploadFailedDialog: React.FC<IProps> = ({ failures, source, co
             }).finally(() => {
                 setCancelled(true);
             });
-            await Promise.race([continuation(), cancel]);
+            await Promise.race([continuation({ shouldEmit: false }), cancel]);
             setSuccess(true);
         } catch (e) {
             setRetry((r) => r - 1);
diff --git a/src/components/views/dialogs/LazyLoadingDisabledDialog.tsx b/src/components/views/dialogs/LazyLoadingDisabledDialog.tsx
index cdd54b56bf2..e1d5374fb3e 100644
--- a/src/components/views/dialogs/LazyLoadingDisabledDialog.tsx
+++ b/src/components/views/dialogs/LazyLoadingDisabledDialog.tsx
@@ -20,10 +20,10 @@ import React from "react";
 import QuestionDialog from "./QuestionDialog";
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import { IDialogProps } from "./IDialogProps";
 
-interface IProps extends IDialogProps {
+interface IProps {
     host: string;
+    onFinished(): void;
 }
 
 const LazyLoadingDisabledDialog: React.FC<IProps> = (props) => {
diff --git a/src/components/views/dialogs/LazyLoadingResyncDialog.tsx b/src/components/views/dialogs/LazyLoadingResyncDialog.tsx
index b96b1b4a9e5..c5bd2e0227c 100644
--- a/src/components/views/dialogs/LazyLoadingResyncDialog.tsx
+++ b/src/components/views/dialogs/LazyLoadingResyncDialog.tsx
@@ -20,9 +20,10 @@ import React from "react";
 import QuestionDialog from "./QuestionDialog";
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import { IDialogProps } from "./IDialogProps";
 
-interface IProps extends IDialogProps {}
+interface IProps {
+    onFinished(): void;
+}
 
 const LazyLoadingResyncDialog: React.FC<IProps> = (props) => {
     const brand = SdkConfig.get().brand;
diff --git a/src/components/views/dialogs/LogoutDialog.tsx b/src/components/views/dialogs/LogoutDialog.tsx
index af3fb65f6f4..a475fd53f02 100644
--- a/src/components/views/dialogs/LogoutDialog.tsx
+++ b/src/components/views/dialogs/LogoutDialog.tsx
@@ -15,10 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentType } from "react";
+import React from "react";
 import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
 import { logger } from "matrix-js-sdk/src/logger";
 
+import type CreateKeyBackupDialog from "../../../async-components/views/dialogs/security/CreateKeyBackupDialog";
+import type ExportE2eKeysDialog from "../../../async-components/views/dialogs/security/ExportE2eKeysDialog";
 import Modal from "../../../Modal";
 import dis from "../../../dispatcher/dispatcher";
 import { _t } from "../../../languageHandler";
@@ -36,7 +38,7 @@ interface IProps {
 interface IState {
     shouldLoadBackupStatus: boolean;
     loading: boolean;
-    backupInfo: IKeyBackupInfo;
+    backupInfo: IKeyBackupInfo | null;
     error?: string;
 }
 
@@ -55,7 +57,6 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
             shouldLoadBackupStatus: shouldLoadBackupStatus,
             loading: shouldLoadBackupStatus,
             backupInfo: null,
-            error: null,
         };
 
         if (shouldLoadBackupStatus) {
@@ -82,7 +83,7 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
     private onExportE2eKeysClicked = (): void => {
         Modal.createDialogAsync(
             import("../../../async-components/views/dialogs/security/ExportE2eKeysDialog") as unknown as Promise<
-                ComponentType<{}>
+                typeof ExportE2eKeysDialog
             >,
             {
                 matrixClient: MatrixClientPeg.get(),
@@ -90,7 +91,7 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
         );
     };
 
-    private onFinished = (confirmed: boolean): void => {
+    private onFinished = (confirmed?: boolean): void => {
         if (confirmed) {
             dis.dispatch({ action: "logout" });
         }
@@ -103,14 +104,20 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
             // A key backup exists for this account, but the creating device is not
             // verified, so restore the backup which will give us the keys from it and
             // allow us to trust it (ie. upload keys to it)
-            Modal.createDialog(RestoreKeyBackupDialog, null, null, /* priority = */ false, /* static = */ true);
+            Modal.createDialog(
+                RestoreKeyBackupDialog,
+                undefined,
+                undefined,
+                /* priority = */ false,
+                /* static = */ true,
+            );
         } else {
             Modal.createDialogAsync(
                 import("../../../async-components/views/dialogs/security/CreateKeyBackupDialog") as unknown as Promise<
-                    ComponentType<{}>
+                    typeof CreateKeyBackupDialog
                 >,
-                null,
-                null,
+                undefined,
+                undefined,
                 /* priority = */ false,
                 /* static = */ true,
             );
diff --git a/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx b/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx
index d2ce8358fc5..97c43ce8913 100644
--- a/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx
+++ b/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx
@@ -18,7 +18,6 @@ import React, { useMemo, useState } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 
 import { _t } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import SearchBox from "../../structures/SearchBox";
 import SpaceStore from "../../../stores/spaces/SpaceStore";
@@ -28,9 +27,10 @@ import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
-interface IProps extends IDialogProps {
+interface IProps {
     room: Room;
     selected?: string[];
+    onFinished(rooms?: string[]): void;
 }
 
 const Entry: React.FC<{
diff --git a/src/components/views/dialogs/ManualDeviceKeyVerificationDialog.tsx b/src/components/views/dialogs/ManualDeviceKeyVerificationDialog.tsx
index 0819d72d7e8..e3bc1dc4690 100644
--- a/src/components/views/dialogs/ManualDeviceKeyVerificationDialog.tsx
+++ b/src/components/views/dialogs/ManualDeviceKeyVerificationDialog.tsx
@@ -25,11 +25,11 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import * as FormattingUtils from "../../../utils/FormattingUtils";
 import { _t } from "../../../languageHandler";
 import QuestionDialog from "./QuestionDialog";
-import { IDialogProps } from "./IDialogProps";
 
-interface IProps extends IDialogProps {
+interface IProps {
     userId: string;
     device: DeviceInfo;
+    onFinished(confirm?: boolean): void;
 }
 
 export default class ManualDeviceKeyVerificationDialog extends React.Component<IProps> {
diff --git a/src/components/views/dialogs/MessageEditHistoryDialog.tsx b/src/components/views/dialogs/MessageEditHistoryDialog.tsx
index 2fcad2fe8c5..d558774bfdd 100644
--- a/src/components/views/dialogs/MessageEditHistoryDialog.tsx
+++ b/src/components/views/dialogs/MessageEditHistoryDialog.tsx
@@ -30,10 +30,10 @@ import ScrollPanel from "../../structures/ScrollPanel";
 import Spinner from "../elements/Spinner";
 import EditHistoryMessage from "../messages/EditHistoryMessage";
 import DateSeparator from "../messages/DateSeparator";
-import { IDialogProps } from "./IDialogProps";
 
-interface IProps extends IDialogProps {
+interface IProps {
     mxEvent: MatrixEvent;
+    onFinished(): void;
 }
 
 interface IState {
diff --git a/src/components/views/dialogs/ModalWidgetDialog.tsx b/src/components/views/dialogs/ModalWidgetDialog.tsx
index 85bd87db824..7975ebd163a 100644
--- a/src/components/views/dialogs/ModalWidgetDialog.tsx
+++ b/src/components/views/dialogs/ModalWidgetDialog.tsx
@@ -46,7 +46,7 @@ interface IProps {
     widgetDefinition: IModalWidgetOpenRequestData;
     widgetRoomId?: string;
     sourceWidgetId: string;
-    onFinished(success: boolean, data?: IModalWidgetReturnData): void;
+    onFinished(success?: boolean, data?: IModalWidgetReturnData): void;
 }
 
 interface IState {
diff --git a/src/components/views/dialogs/ModuleUiDialog.tsx b/src/components/views/dialogs/ModuleUiDialog.tsx
index c92c08e66f6..cced3907bb8 100644
--- a/src/components/views/dialogs/ModuleUiDialog.tsx
+++ b/src/components/views/dialogs/ModuleUiDialog.tsx
@@ -19,13 +19,13 @@ import { DialogContent, DialogProps } from "@matrix-org/react-sdk-module-api/lib
 import { logger } from "matrix-js-sdk/src/logger";
 
 import ScrollableBaseModal, { IScrollableBaseState } from "./ScrollableBaseModal";
-import { IDialogProps } from "./IDialogProps";
 import { _t } from "../../../languageHandler";
 
-interface IProps extends IDialogProps {
-    contentFactory: (props: DialogProps, ref: React.Ref<DialogContent>) => React.ReactNode;
+interface IProps<C extends React.Component = React.Component> {
+    contentFactory: (props: DialogProps, ref: React.Ref<C>) => React.ReactNode;
     contentProps: DialogProps;
     title: string;
+    onFinished(ok?: boolean, model?: Awaited<ReturnType<DialogContent["trySubmit"]>>): void;
 }
 
 interface IState extends IScrollableBaseState {
diff --git a/src/components/views/dialogs/QuestionDialog.tsx b/src/components/views/dialogs/QuestionDialog.tsx
index 43d62dcb68d..866b5412067 100644
--- a/src/components/views/dialogs/QuestionDialog.tsx
+++ b/src/components/views/dialogs/QuestionDialog.tsx
@@ -19,11 +19,10 @@ import React from "react";
 import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 
-export interface IQuestionDialogProps extends IDialogProps {
+export interface IQuestionDialogProps {
     title?: string;
     description?: React.ReactNode;
     extraButtons?: React.ReactNode;
@@ -37,6 +36,7 @@ export interface IQuestionDialogProps extends IDialogProps {
     className?: string;
     hasCancelButton?: boolean;
     cancelButton?: React.ReactNode;
+    onFinished(ok?: boolean): void;
 }
 
 export default class QuestionDialog extends React.Component<IQuestionDialogProps> {
diff --git a/src/components/views/dialogs/RegistrationEmailPromptDialog.tsx b/src/components/views/dialogs/RegistrationEmailPromptDialog.tsx
index 1e6c9901ee3..a175e146060 100644
--- a/src/components/views/dialogs/RegistrationEmailPromptDialog.tsx
+++ b/src/components/views/dialogs/RegistrationEmailPromptDialog.tsx
@@ -18,14 +18,14 @@ import * as React from "react";
 import { SyntheticEvent, useRef, useState } from "react";
 
 import { _t, _td } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
 import Field from "../elements/Field";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 import EmailField from "../auth/EmailField";
 
-interface IProps extends IDialogProps {
-    onFinished(continued: boolean, email?: string): void;
+interface IProps {
+    onFinished(continued: false, email?: undefined): void;
+    onFinished(continued: true, email: string): void;
 }
 
 const RegistrationEmailPromptDialog: React.FC<IProps> = ({ onFinished }) => {
diff --git a/src/components/views/dialogs/ReportEventDialog.tsx b/src/components/views/dialogs/ReportEventDialog.tsx
index f26dcf08ad1..6814ce55f3b 100644
--- a/src/components/views/dialogs/ReportEventDialog.tsx
+++ b/src/components/views/dialogs/ReportEventDialog.tsx
@@ -21,7 +21,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";
 import { ensureDMExists } from "../../../createRoom";
-import { IDialogProps } from "./IDialogProps";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import SdkConfig from "../../../SdkConfig";
 import Markdown from "../../../Markdown";
@@ -33,8 +32,9 @@ import Field from "../elements/Field";
 import Spinner from "../elements/Spinner";
 import LabelledCheckbox from "../elements/LabelledCheckbox";
 
-interface IProps extends IDialogProps {
+interface IProps {
     mxEvent: MatrixEvent;
+    onFinished(report?: boolean): void;
 }
 
 interface IState {
diff --git a/src/components/views/dialogs/RoomSettingsDialog.tsx b/src/components/views/dialogs/RoomSettingsDialog.tsx
index d451d4a6582..b8e31c15405 100644
--- a/src/components/views/dialogs/RoomSettingsDialog.tsx
+++ b/src/components/views/dialogs/RoomSettingsDialog.tsx
@@ -45,7 +45,7 @@ export const ROOM_ADVANCED_TAB = "ROOM_ADVANCED_TAB";
 
 interface IProps {
     roomId: string;
-    onFinished: (success: boolean) => void;
+    onFinished: (success?: boolean) => void;
     initialTabId?: string;
 }
 
diff --git a/src/components/views/dialogs/RoomUpgradeDialog.tsx b/src/components/views/dialogs/RoomUpgradeDialog.tsx
index 86d24934426..9acf8b6ef89 100644
--- a/src/components/views/dialogs/RoomUpgradeDialog.tsx
+++ b/src/components/views/dialogs/RoomUpgradeDialog.tsx
@@ -20,14 +20,14 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import Modal from "../../../Modal";
 import { _t } from "../../../languageHandler";
 import { upgradeRoom } from "../../../utils/RoomUpgrade";
-import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import ErrorDialog from "./ErrorDialog";
 import DialogButtons from "../elements/DialogButtons";
 import Spinner from "../elements/Spinner";
 
-interface IProps extends IDialogProps {
+interface IProps {
     room: Room;
+    onFinished(upgrade?: boolean): void;
 }
 
 interface IState {
diff --git a/src/components/views/dialogs/RoomUpgradeWarningDialog.tsx b/src/components/views/dialogs/RoomUpgradeWarningDialog.tsx
index 65652cec437..c0d97aa5cef 100644
--- a/src/components/views/dialogs/RoomUpgradeWarningDialog.tsx
+++ b/src/components/views/dialogs/RoomUpgradeWarningDialog.tsx
@@ -23,7 +23,6 @@ import SdkConfig from "../../../SdkConfig";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
-import { IDialogProps } from "./IDialogProps";
 import BugReportDialog from "./BugReportDialog";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
@@ -35,11 +34,12 @@ export interface IFinishedOpts {
     invite: boolean;
 }
 
-interface IProps extends IDialogProps {
+interface IProps {
     roomId: string;
     targetVersion: string;
     description?: ReactNode;
     doUpgrade?(opts: IFinishedOpts, fn: (progressText: string, progress: number, total: number) => void): Promise<void>;
+    onFinished(opts?: IFinishedOpts): void;
 }
 
 interface IState {
@@ -70,19 +70,14 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
         this.setState({ progressText, progress, total });
     };
 
-    private onContinue = (): void => {
+    private onContinue = async (): Promise<void> => {
         const opts = {
             continue: true,
             invite: this.isPrivate && this.state.inviteUsersToNewRoom,
         };
 
-        if (this.props.doUpgrade) {
-            this.props.doUpgrade(opts, this.onProgressCallback).then(() => {
-                this.props.onFinished(opts);
-            });
-        } else {
-            this.props.onFinished(opts);
-        }
+        await this.props.doUpgrade?.(opts, this.onProgressCallback);
+        this.props.onFinished(opts);
     };
 
     private onCancel = (): void => {
diff --git a/src/components/views/dialogs/ScrollableBaseModal.tsx b/src/components/views/dialogs/ScrollableBaseModal.tsx
index ca3d8591c3f..88c85053aa4 100644
--- a/src/components/views/dialogs/ScrollableBaseModal.tsx
+++ b/src/components/views/dialogs/ScrollableBaseModal.tsx
@@ -19,7 +19,6 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import FocusLock from "react-focus-lock";
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { IDialogProps } from "./IDialogProps";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -36,7 +35,7 @@ export interface IScrollableBaseState {
  * Scrollable dialog base from Compound (Web Components).
  */
 export default abstract class ScrollableBaseModal<
-    TProps extends IDialogProps,
+    TProps extends { onFinished?: (...args: any[]) => void },
     TState extends IScrollableBaseState,
 > extends React.PureComponent<TProps, TState> {
     protected constructor(props: TProps) {
diff --git a/src/components/views/dialogs/ServerOfflineDialog.tsx b/src/components/views/dialogs/ServerOfflineDialog.tsx
index 6945edc254f..c6a384c7f90 100644
--- a/src/components/views/dialogs/ServerOfflineDialog.tsx
+++ b/src/components/views/dialogs/ServerOfflineDialog.tsx
@@ -28,9 +28,10 @@ import Spinner from "../elements/Spinner";
 import AccessibleButton from "../elements/AccessibleButton";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { IDialogProps } from "./IDialogProps";
 
-interface IProps extends IDialogProps {}
+interface IProps {
+    onFinished(): void;
+}
 
 export default class ServerOfflineDialog extends React.PureComponent<IProps> {
     public componentDidMount(): void {
diff --git a/src/components/views/dialogs/SeshatResetDialog.tsx b/src/components/views/dialogs/SeshatResetDialog.tsx
index e63a1569a06..badd808ac9e 100644
--- a/src/components/views/dialogs/SeshatResetDialog.tsx
+++ b/src/components/views/dialogs/SeshatResetDialog.tsx
@@ -19,9 +19,12 @@ import React from "react";
 import { _t } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
-import { IDialogProps } from "./IDialogProps";
 
-export default class SeshatResetDialog extends React.PureComponent<IDialogProps> {
+interface Props {
+    onFinished(reset?: boolean): void;
+}
+
+export default class SeshatResetDialog extends React.PureComponent<Props> {
     public render(): React.ReactNode {
         return (
             <BaseDialog
diff --git a/src/components/views/dialogs/SessionRestoreErrorDialog.tsx b/src/components/views/dialogs/SessionRestoreErrorDialog.tsx
index b566f4ab1e6..9436b0ffadb 100644
--- a/src/components/views/dialogs/SessionRestoreErrorDialog.tsx
+++ b/src/components/views/dialogs/SessionRestoreErrorDialog.tsx
@@ -25,10 +25,10 @@ import QuestionDialog from "./QuestionDialog";
 import BugReportDialog from "./BugReportDialog";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
-import { IDialogProps } from "./IDialogProps";
 
-interface IProps extends IDialogProps {
+interface IProps {
     error: Error;
+    onFinished(clear?: boolean): void;
 }
 
 export default class SessionRestoreErrorDialog extends React.Component<IProps> {
diff --git a/src/components/views/dialogs/SetEmailDialog.tsx b/src/components/views/dialogs/SetEmailDialog.tsx
index 6455517961f..ec41240c469 100644
--- a/src/components/views/dialogs/SetEmailDialog.tsx
+++ b/src/components/views/dialogs/SetEmailDialog.tsx
@@ -27,10 +27,10 @@ import ErrorDialog from "./ErrorDialog";
 import QuestionDialog from "./QuestionDialog";
 import BaseDialog from "./BaseDialog";
 import EditableText from "../elements/EditableText";
-import { IDialogProps } from "./IDialogProps";
 
-interface IProps extends IDialogProps {
+interface IProps {
     title: string;
+    onFinished(ok?: boolean): void;
 }
 
 interface IState {
diff --git a/src/components/views/dialogs/ShareDialog.tsx b/src/components/views/dialogs/ShareDialog.tsx
index 353ad347e0a..9fcfee0dc2a 100644
--- a/src/components/views/dialogs/ShareDialog.tsx
+++ b/src/components/views/dialogs/ShareDialog.tsx
@@ -26,7 +26,6 @@ import QRCode from "../elements/QRCode";
 import { RoomPermalinkCreator, makeUserPermalink } from "../../../utils/permalinks/Permalinks";
 import { selectText } from "../../../utils/strings";
 import StyledCheckbox from "../elements/StyledCheckbox";
-import { IDialogProps } from "./IDialogProps";
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
 import BaseDialog from "./BaseDialog";
@@ -64,9 +63,10 @@ const socials = [
     },
 ];
 
-interface IProps extends IDialogProps {
+interface IProps {
     target: Room | User | RoomMember | MatrixEvent;
-    permalinkCreator: RoomPermalinkCreator;
+    permalinkCreator?: RoomPermalinkCreator;
+    onFinished(): void;
 }
 
 interface IState {
diff --git a/src/components/views/dialogs/SlashCommandHelpDialog.tsx b/src/components/views/dialogs/SlashCommandHelpDialog.tsx
index 1324babbebe..c650e78f41f 100644
--- a/src/components/views/dialogs/SlashCommandHelpDialog.tsx
+++ b/src/components/views/dialogs/SlashCommandHelpDialog.tsx
@@ -18,10 +18,11 @@ import React from "react";
 
 import { _t } from "../../../languageHandler";
 import { Command, CommandCategories, Commands } from "../../../SlashCommands";
-import { IDialogProps } from "./IDialogProps";
 import InfoDialog from "./InfoDialog";
 
-interface IProps extends IDialogProps {}
+interface IProps {
+    onFinished(): void;
+}
 
 const SlashCommandHelpDialog: React.FC<IProps> = ({ onFinished }) => {
     const categories: Record<string, Command[]> = {};
diff --git a/src/components/views/dialogs/SlidingSyncOptionsDialog.tsx b/src/components/views/dialogs/SlidingSyncOptionsDialog.tsx
index b74ad67b75e..d79bfab73ab 100644
--- a/src/components/views/dialogs/SlidingSyncOptionsDialog.tsx
+++ b/src/components/views/dialogs/SlidingSyncOptionsDialog.tsx
@@ -19,7 +19,6 @@ import { MatrixClient, Method } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
 import SettingsStore from "../../../settings/SettingsStore";
 import TextInputDialog from "./TextInputDialog";
 import withValidation from "../elements/Validation";
@@ -63,7 +62,7 @@ async function proxyHealthCheck(endpoint: string, hsUrl?: string): Promise<void>
     logger.info("sliding sync proxy is OK");
 }
 
-export const SlidingSyncOptionsDialog: React.FC<IDialogProps> = ({ onFinished }) => {
+export const SlidingSyncOptionsDialog: React.FC<{ onFinished(enabled: boolean): void }> = ({ onFinished }) => {
     const cli = MatrixClientPeg.get();
     const currentProxy = SettingsStore.getValue("feature_sliding_sync_proxy_url");
     const hasNativeSupport = useAsyncMemo(
diff --git a/src/components/views/dialogs/SpacePreferencesDialog.tsx b/src/components/views/dialogs/SpacePreferencesDialog.tsx
index 2a32e049f21..a66d0aad66f 100644
--- a/src/components/views/dialogs/SpacePreferencesDialog.tsx
+++ b/src/components/views/dialogs/SpacePreferencesDialog.tsx
@@ -19,7 +19,6 @@ import { Room } from "matrix-js-sdk/src/models/room";
 
 import { _t, _td } from "../../../languageHandler";
 import BaseDialog from "../dialogs/BaseDialog";
-import { IDialogProps } from "./IDialogProps";
 import TabbedView, { Tab } from "../../structures/TabbedView";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import { useSettingValue } from "../../../hooks/useSettings";
@@ -28,9 +27,10 @@ import { SettingLevel } from "../../../settings/SettingLevel";
 import RoomName from "../elements/RoomName";
 import { SpacePreferenceTab } from "../../../dispatcher/payloads/OpenSpacePreferencesPayload";
 
-interface IProps extends IDialogProps {
+interface IProps {
     space: Room;
     initialTabId?: SpacePreferenceTab;
+    onFinished(): void;
 }
 
 const SpacePreferencesAppearanceTab: React.FC<Pick<IProps, "space">> = ({ space }) => {
diff --git a/src/components/views/dialogs/SpaceSettingsDialog.tsx b/src/components/views/dialogs/SpaceSettingsDialog.tsx
index ef46371dcf3..e7d7489b08c 100644
--- a/src/components/views/dialogs/SpaceSettingsDialog.tsx
+++ b/src/components/views/dialogs/SpaceSettingsDialog.tsx
@@ -19,7 +19,6 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 
 import { _t, _td } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { useDispatcher } from "../../../hooks/useDispatcher";
@@ -39,15 +38,16 @@ export enum SpaceSettingsTab {
     Advanced = "SPACE_ADVANCED_TAB",
 }
 
-interface IProps extends IDialogProps {
+interface IProps {
     matrixClient: MatrixClient;
     space: Room;
+    onFinished(): void;
 }
 
 const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFinished }) => {
     useDispatcher(defaultDispatcher, (payload) => {
         if (payload.action === Action.AfterLeaveRoom && payload.room_id === space.roomId) {
-            onFinished(false);
+            onFinished();
         }
     });
 
@@ -57,7 +57,7 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
                 SpaceSettingsTab.General,
                 _td("General"),
                 "mx_SpaceSettingsDialog_generalIcon",
-                <SpaceSettingsGeneralTab matrixClient={cli} space={space} onFinished={onFinished} />,
+                <SpaceSettingsGeneralTab matrixClient={cli} space={space} />,
             ),
             new Tab(
                 SpaceSettingsTab.Visibility,
@@ -84,17 +84,13 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
 
     return (
         <BaseDialog
-            title={_t("Space settings")}
+            title={_t("Settings - %(spaceName)s", { spaceName: space.name || _t("Unnamed Space") })}
             className="mx_SpaceSettingsDialog"
             contentId="mx_SpaceSettingsDialog"
             onFinished={onFinished}
             fixedWidth={false}
         >
-            <div
-                className="mx_SpaceSettingsDialog_content"
-                id="mx_SpaceSettingsDialog"
-                title={_t("Settings - %(spaceName)s", { spaceName: space.name })}
-            >
+            <div className="mx_SpaceSettingsDialog_content" id="mx_SpaceSettingsDialog">
                 <TabbedView tabs={tabs} />
             </div>
         </BaseDialog>
diff --git a/src/components/views/dialogs/StorageEvictedDialog.tsx b/src/components/views/dialogs/StorageEvictedDialog.tsx
index 74af879731e..df27c4a31db 100644
--- a/src/components/views/dialogs/StorageEvictedDialog.tsx
+++ b/src/components/views/dialogs/StorageEvictedDialog.tsx
@@ -22,10 +22,11 @@ import { _t } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 import BugReportDialog from "./BugReportDialog";
-import { IDialogProps } from "./IDialogProps";
 import AccessibleButton from "../elements/AccessibleButton";
 
-interface IProps extends IDialogProps {}
+interface IProps {
+    onFinished(signOut?: boolean): void;
+}
 
 export default class StorageEvictedDialog extends React.Component<IProps> {
     private sendBugReport = (ev: React.MouseEvent): void => {
@@ -70,7 +71,7 @@ export default class StorageEvictedDialog extends React.Component<IProps> {
                         )}
                     </p>
                     <p>
-                        {_t("Your browser likely removed this data when running low on " + "disk space.")} {logRequest}
+                        {_t("Your browser likely removed this data when running low on disk space.")} {logRequest}
                     </p>
                 </div>
                 <DialogButtons
diff --git a/src/components/views/dialogs/TextInputDialog.tsx b/src/components/views/dialogs/TextInputDialog.tsx
index 4dfa3c0c3b8..073b2760d6a 100644
--- a/src/components/views/dialogs/TextInputDialog.tsx
+++ b/src/components/views/dialogs/TextInputDialog.tsx
@@ -21,9 +21,8 @@ import { _t, _td } from "../../../languageHandler";
 import { IFieldState, IValidationResult } from "../elements/Validation";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
-import { IDialogProps } from "./IDialogProps";
 
-interface IProps extends IDialogProps {
+interface IProps {
     title?: string;
     description?: React.ReactNode;
     value?: string;
@@ -34,6 +33,7 @@ interface IProps extends IDialogProps {
     hasCancel?: boolean;
     validator?: (fieldState: IFieldState) => Promise<IValidationResult>; // result of withValidation
     fixedWidth?: boolean;
+    onFinished(ok?: boolean, text?: string): void;
 }
 
 interface IState {
@@ -45,7 +45,7 @@ interface IState {
 export default class TextInputDialog extends React.Component<IProps, IState> {
     private field = createRef<Field>();
 
-    public static defaultProps = {
+    public static defaultProps: Partial<IProps> = {
         title: "",
         value: "",
         description: "",
diff --git a/src/components/views/dialogs/UntrustedDeviceDialog.tsx b/src/components/views/dialogs/UntrustedDeviceDialog.tsx
index eac0f8b69ac..0d70e3b71f4 100644
--- a/src/components/views/dialogs/UntrustedDeviceDialog.tsx
+++ b/src/components/views/dialogs/UntrustedDeviceDialog.tsx
@@ -22,12 +22,12 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import E2EIcon, { E2EState } from "../rooms/E2EIcon";
 import AccessibleButton from "../elements/AccessibleButton";
 import BaseDialog from "./BaseDialog";
-import { IDialogProps } from "./IDialogProps";
 import { IDevice } from "../right_panel/UserInfo";
 
-interface IProps extends IDialogProps {
+interface IProps {
     user: User;
     device: IDevice;
+    onFinished(mode?: "legacy" | "sas" | false): void;
 }
 
 const UntrustedDeviceDialog: React.FC<IProps> = ({ device, user, onFinished }) => {
diff --git a/src/components/views/dialogs/UploadConfirmDialog.tsx b/src/components/views/dialogs/UploadConfirmDialog.tsx
index 025540b9dc6..584015e1603 100644
--- a/src/components/views/dialogs/UploadConfirmDialog.tsx
+++ b/src/components/views/dialogs/UploadConfirmDialog.tsx
@@ -26,7 +26,7 @@ import DialogButtons from "../elements/DialogButtons";
 
 interface IProps {
     file: File;
-    currentIndex: number;
+    currentIndex?: number;
     totalFiles?: number;
     onFinished: (uploadConfirmed: boolean, uploadAll?: boolean) => void;
 }
@@ -35,7 +35,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
     private readonly objectUrl: string;
     private readonly mimeType: string;
 
-    public static defaultProps = {
+    public static defaultProps: Partial<IProps> = {
         totalFiles: 1,
     };
 
diff --git a/src/components/views/dialogs/UploadFailureDialog.tsx b/src/components/views/dialogs/UploadFailureDialog.tsx
index 2dd99e88a50..2bec57dd0d9 100644
--- a/src/components/views/dialogs/UploadFailureDialog.tsx
+++ b/src/components/views/dialogs/UploadFailureDialog.tsx
@@ -21,12 +21,12 @@ import { _t } from "../../../languageHandler";
 import ContentMessages from "../../../ContentMessages";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
-import { IDialogProps } from "./IDialogProps";
 
-interface IProps extends IDialogProps {
+interface IProps {
     badFiles: File[];
     totalFiles: number;
     contentMessages: ContentMessages;
+    onFinished(upload?: boolean): void;
 }
 
 /*
diff --git a/src/components/views/dialogs/UserSettingsDialog.tsx b/src/components/views/dialogs/UserSettingsDialog.tsx
index 5beae8ccaa6..07a795f04d8 100644
--- a/src/components/views/dialogs/UserSettingsDialog.tsx
+++ b/src/components/views/dialogs/UserSettingsDialog.tsx
@@ -32,14 +32,14 @@ import SdkConfig from "../../../SdkConfig";
 import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab";
 import { UIFeature } from "../../../settings/UIFeature";
 import BaseDialog from "./BaseDialog";
-import { IDialogProps } from "./IDialogProps";
 import SidebarUserSettingsTab from "../settings/tabs/user/SidebarUserSettingsTab";
 import KeyboardUserSettingsTab from "../settings/tabs/user/KeyboardUserSettingsTab";
 import SessionManagerTab from "../settings/tabs/user/SessionManagerTab";
 import { UserTab } from "./UserTab";
 
-interface IProps extends IDialogProps {
+interface IProps {
     initialTabId?: UserTab;
+    onFinished(): void;
 }
 
 interface IState {
@@ -202,7 +202,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
                 UserTab.Help,
                 _td("Help & About"),
                 "mx_UserSettingsDialog_helpIcon",
-                <HelpUserSettingsTab closeSettingsFn={() => this.props.onFinished(true)} />,
+                <HelpUserSettingsTab closeSettingsFn={() => this.props.onFinished()} />,
                 "UserSettingsHelpAbout",
             ),
         );
diff --git a/src/components/views/dialogs/VerificationRequestDialog.tsx b/src/components/views/dialogs/VerificationRequestDialog.tsx
index 84a8ac92ea9..53ac14f6c08 100644
--- a/src/components/views/dialogs/VerificationRequestDialog.tsx
+++ b/src/components/views/dialogs/VerificationRequestDialog.tsx
@@ -24,14 +24,14 @@ import BaseDialog from "./BaseDialog";
 import EncryptionPanel from "../right_panel/EncryptionPanel";
 
 interface IProps {
-    verificationRequest: VerificationRequest;
-    verificationRequestPromise: Promise<VerificationRequest>;
+    verificationRequest?: VerificationRequest;
+    verificationRequestPromise?: Promise<VerificationRequest>;
     onFinished: () => void;
-    member: User;
+    member?: User;
 }
 
 interface IState {
-    verificationRequest: VerificationRequest;
+    verificationRequest?: VerificationRequest;
 }
 
 export default class VerificationRequestDialog extends React.Component<IProps, IState> {
@@ -40,18 +40,16 @@ export default class VerificationRequestDialog extends React.Component<IProps, I
         this.state = {
             verificationRequest: this.props.verificationRequest,
         };
-        if (this.props.verificationRequestPromise) {
-            this.props.verificationRequestPromise.then((r) => {
-                this.setState({ verificationRequest: r });
-            });
-        }
+        this.props.verificationRequestPromise?.then((r) => {
+            this.setState({ verificationRequest: r });
+        });
     }
 
     public render(): React.ReactNode {
         const request = this.state.verificationRequest;
-        const otherUserId = request && request.otherUserId;
-        const member = this.props.member || (otherUserId && MatrixClientPeg.get().getUser(otherUserId));
-        const title = request && request.isSelfVerification ? _t("Verify other device") : _t("Verification Request");
+        const otherUserId = request?.otherUserId;
+        const member = this.props.member || (otherUserId ? MatrixClientPeg.get().getUser(otherUserId) : null);
+        const title = request?.isSelfVerification ? _t("Verify other device") : _t("Verification Request");
 
         return (
             <BaseDialog
diff --git a/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx b/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
index 66e67e439e6..b7d0a914991 100644
--- a/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
+++ b/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
@@ -20,17 +20,17 @@ import { lexicographicCompare } from "matrix-js-sdk/src/utils";
 
 import BaseDialog from "./BaseDialog";
 import { _t } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
 import { objectShallowClone } from "../../../utils/objects";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import DialogButtons from "../elements/DialogButtons";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { CapabilityText } from "../../../widgets/CapabilityText";
 
-interface IProps extends IDialogProps {
+interface IProps {
     requestedCapabilities: Set<Capability>;
     widget: Widget;
     widgetKind: WidgetKind; // TODO: Refactor into the Widget class
+    onFinished(result?: { approved: Capability[]; remember: boolean }): void;
 }
 
 type BooleanStates = Partial<{
diff --git a/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx b/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx
index f185c5b7e64..52b392d38f1 100644
--- a/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx
+++ b/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx
@@ -22,15 +22,15 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { _t } from "../../../languageHandler";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { OIDCState } from "../../../stores/widgets/WidgetPermissionStore";
-import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 import { SdkContextClass } from "../../../contexts/SDKContext";
 
-interface IProps extends IDialogProps {
+interface IProps {
     widget: Widget;
     widgetKind: WidgetKind;
     inRoomId?: string;
+    onFinished(allowed?: boolean): void;
 }
 
 interface IState {
diff --git a/src/components/views/dialogs/devtools/RoomNotifications.tsx b/src/components/views/dialogs/devtools/RoomNotifications.tsx
index 7ddfb5d8baa..25f4110ec11 100644
--- a/src/components/views/dialogs/devtools/RoomNotifications.tsx
+++ b/src/components/views/dialogs/devtools/RoomNotifications.tsx
@@ -20,7 +20,7 @@ import React, { useContext } from "react";
 
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { useNotificationState } from "../../../../hooks/useRoomNotificationState";
-import { _t } from "../../../../languageHandler";
+import { _t, _td } from "../../../../languageHandler";
 import { determineUnreadState } from "../../../../RoomNotifs";
 import { humanReadableNotificationColor } from "../../../../stores/notifications/NotificationColor";
 import { doesRoomOrThreadHaveUnreadMessages } from "../../../../Unread";
@@ -39,22 +39,38 @@ export default function RoomNotifications({ onBack }: IDevtoolsProps): JSX.Eleme
                 <h2>{_t("Room status")}</h2>
                 <ul>
                     <li>
-                        {_t("Room unread status: ")}
-                        <strong>{humanReadableNotificationColor(color)}</strong>
-                        {count > 0 && (
-                            <>
-                                {_t(", count:")} <strong>{count}</strong>
-                            </>
+                        {_t(
+                            "Room unread status: <strong>%(status)s</strong>, count: <strong>%(count)s</strong>",
+                            {
+                                status: humanReadableNotificationColor(color),
+                                count,
+                            },
+                            {
+                                strong: (sub) => <strong>{sub}</strong>,
+                            },
                         )}
                     </li>
                     <li>
-                        {_t("Notification state is")} <strong>{notificationState}</strong>
+                        {_t(
+                            "Notification state is <strong>%(notificationState)s</strong>",
+                            {
+                                notificationState,
+                            },
+                            {
+                                strong: (sub) => <strong>{sub}</strong>,
+                            },
+                        )}
                     </li>
                     <li>
-                        {_t("Room is ")}
-                        <strong>
-                            {cli.isRoomEncrypted(room.roomId!) ? _t("encrypted ✅") : _t("not encrypted 🚨")}
-                        </strong>
+                        {_t(
+                            cli.isRoomEncrypted(room.roomId!)
+                                ? _td("Room is <strong>encrypted ✅</strong>")
+                                : _td("Room is <strong>not encrypted 🚨</strong>"),
+                            {},
+                            {
+                                strong: (sub) => <strong>{sub}</strong>,
+                            },
+                        )}
                     </li>
                 </ul>
             </section>
diff --git a/src/components/views/dialogs/polls/PollDetail.tsx b/src/components/views/dialogs/polls/PollDetail.tsx
new file mode 100644
index 00000000000..068687a7fd1
--- /dev/null
+++ b/src/components/views/dialogs/polls/PollDetail.tsx
@@ -0,0 +1,89 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { Poll } from "matrix-js-sdk/src/matrix";
+
+import { _t } from "../../../../languageHandler";
+import dispatcher from "../../../../dispatcher/dispatcher";
+import { Action } from "../../../../dispatcher/actions";
+import { ViewRoomPayload } from "../../../../dispatcher/payloads/ViewRoomPayload";
+import { RoomPermalinkCreator } from "../../../../utils/permalinks/Permalinks";
+import { MediaEventHelper } from "../../../../utils/MediaEventHelper";
+import AccessibleButton, { ButtonEvent } from "../../elements/AccessibleButton";
+import MPollBody from "../../messages/MPollBody";
+
+interface Props {
+    poll: Poll;
+    requestModalClose: () => void;
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+const NOOP = (): void => {};
+
+/**
+ * Content of the PollHistoryDialog when a specific poll is selected
+ */
+export const PollDetail: React.FC<Props> = ({ poll, permalinkCreator, requestModalClose }) => {
+    // link to end event for ended polls
+    const eventIdToLinkTo = poll.isEnded ? poll.endEventId! : poll.pollId;
+    const linkToTimeline = permalinkCreator.forEvent(eventIdToLinkTo);
+
+    const onLinkClick = (e: ButtonEvent): void => {
+        if ((e as React.MouseEvent).ctrlKey || (e as React.MouseEvent).metaKey) {
+            // native behavior for link on ctrl/cmd + click
+            return;
+        }
+        // otherwise handle navigation in the app
+        e.preventDefault();
+        dispatcher.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            event_id: eventIdToLinkTo,
+            highlighted: true,
+            room_id: poll.roomId,
+            metricsTrigger: undefined, // room doesn't change
+        });
+
+        requestModalClose();
+    };
+    return (
+        <>
+            <MPollBody
+                mxEvent={poll.rootEvent}
+                permalinkCreator={permalinkCreator}
+                onHeightChanged={NOOP}
+                onMessageAllowed={NOOP}
+                // MPollBody doesn't use this
+                // and MessageEvent only defines it for eligible events
+                // should be fixed on IBodyProps types
+                // cheat to fulfil the type here
+                mediaEventHelper={{} as unknown as MediaEventHelper}
+            />
+            <br />
+            <div>
+                <AccessibleButton
+                    kind="link_inline"
+                    element="a"
+                    href={linkToTimeline}
+                    onClick={onLinkClick}
+                    rel="noreferrer noopener"
+                >
+                    {_t("View poll in timeline")}
+                </AccessibleButton>
+            </div>
+        </>
+    );
+};
diff --git a/src/components/views/dialogs/polls/PollDetailHeader.tsx b/src/components/views/dialogs/polls/PollDetailHeader.tsx
new file mode 100644
index 00000000000..edabec5b0b9
--- /dev/null
+++ b/src/components/views/dialogs/polls/PollDetailHeader.tsx
@@ -0,0 +1,36 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import { Icon as LeftCaretIcon } from "../../../../../res/img/element-icons/caret-left.svg";
+import { _t } from "../../../../languageHandler";
+import AccessibleButton from "../../elements/AccessibleButton";
+import { PollHistoryFilter } from "./types";
+
+interface Props {
+    filter: PollHistoryFilter;
+    onNavigateBack: () => void;
+}
+
+export const PollDetailHeader: React.FC<Props> = ({ filter, onNavigateBack }) => {
+    return (
+        <AccessibleButton kind="content_inline" onClick={onNavigateBack} className="mx_PollDetailHeader">
+            <LeftCaretIcon className="mx_PollDetailHeader_icon" />
+            {filter === "ACTIVE" ? _t("Active polls") : _t("Past polls")}
+        </AccessibleButton>
+    );
+};
diff --git a/src/components/views/dialogs/polls/PollHistoryDialog.tsx b/src/components/views/dialogs/polls/PollHistoryDialog.tsx
index bd6c9fae8a5..879ca8f4daa 100644
--- a/src/components/views/dialogs/polls/PollHistoryDialog.tsx
+++ b/src/components/views/dialogs/polls/PollHistoryDialog.tsx
@@ -16,19 +16,23 @@ limitations under the License.
 
 import React, { useState } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import { MatrixEvent, Poll } from "matrix-js-sdk/src/matrix";
+import { MatrixEvent, Poll, Room } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../../languageHandler";
 import BaseDialog from "../BaseDialog";
-import { IDialogProps } from "../IDialogProps";
 import { PollHistoryList } from "./PollHistoryList";
 import { PollHistoryFilter } from "./types";
+import { PollDetailHeader } from "./PollDetailHeader";
+import { PollDetail } from "./PollDetail";
+import { RoomPermalinkCreator } from "../../../../utils/permalinks/Permalinks";
 import { usePollsWithRelations } from "./usePollHistory";
 import { useFetchPastPolls } from "./fetchPastPolls";
 
-type PollHistoryDialogProps = Pick<IDialogProps, "onFinished"> & {
-    roomId: string;
+type PollHistoryDialogProps = {
+    room: Room;
     matrixClient: MatrixClient;
+    permalinkCreator: RoomPermalinkCreator;
+    onFinished(): void;
 };
 
 const sortEventsByLatest = (left: MatrixEvent, right: MatrixEvent): number => right.getTs() - left.getTs();
@@ -46,25 +50,44 @@ const filterAndSortPolls = (polls: Map<string, Poll>, filter: PollHistoryFilter)
         .sort(sortEventsByLatest);
 };
 
-export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({ roomId, matrixClient, onFinished }) => {
-    const room = matrixClient.getRoom(roomId)!;
-    const { isLoading } = useFetchPastPolls(room, matrixClient);
-    const { polls } = usePollsWithRelations(roomId, matrixClient);
+export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({
+    room,
+    matrixClient,
+    permalinkCreator,
+    onFinished,
+}) => {
+    const { polls } = usePollsWithRelations(room.roomId, matrixClient);
+    const { isLoading, loadMorePolls, oldestEventTimestamp } = useFetchPastPolls(room, matrixClient);
     const [filter, setFilter] = useState<PollHistoryFilter>("ACTIVE");
+    const [focusedPollId, setFocusedPollId] = useState<string | null>(null);
 
     const pollStartEvents = filterAndSortPolls(polls, filter);
     const isLoadingPollResponses = [...polls.values()].some((poll) => poll.isFetchingResponses);
 
+    const focusedPoll = focusedPollId ? polls.get(focusedPollId) : undefined;
+    const title = focusedPoll ? (
+        <PollDetailHeader filter={filter} onNavigateBack={() => setFocusedPollId(null)} />
+    ) : (
+        _t("Polls history")
+    );
+
     return (
-        <BaseDialog title={_t("Polls history")} onFinished={onFinished}>
+        <BaseDialog title={title} onFinished={onFinished}>
             <div className="mx_PollHistoryDialog_content">
-                <PollHistoryList
-                    pollStartEvents={pollStartEvents}
-                    isLoading={isLoading || isLoadingPollResponses}
-                    polls={polls}
-                    filter={filter}
-                    onFilterChange={setFilter}
-                />
+                {focusedPoll ? (
+                    <PollDetail poll={focusedPoll} permalinkCreator={permalinkCreator} requestModalClose={onFinished} />
+                ) : (
+                    <PollHistoryList
+                        onItemClick={setFocusedPollId}
+                        pollStartEvents={pollStartEvents}
+                        isLoading={isLoading || isLoadingPollResponses}
+                        oldestFetchedEventTimestamp={oldestEventTimestamp}
+                        polls={polls}
+                        filter={filter}
+                        onFilterChange={setFilter}
+                        loadMorePolls={loadMorePolls}
+                    />
+                )}
             </div>
         </BaseDialog>
     );
diff --git a/src/components/views/dialogs/polls/PollHistoryList.tsx b/src/components/views/dialogs/polls/PollHistoryList.tsx
index c686b82ebf2..c3f2f2fcf47 100644
--- a/src/components/views/dialogs/polls/PollHistoryList.tsx
+++ b/src/components/views/dialogs/polls/PollHistoryList.tsx
@@ -24,6 +24,7 @@ import InlineSpinner from "../../elements/InlineSpinner";
 import { PollHistoryFilter } from "./types";
 import { PollListItem } from "./PollListItem";
 import { PollListItemEnded } from "./PollListItemEnded";
+import AccessibleButton from "../../elements/AccessibleButton";
 
 const LoadingPolls: React.FC<{ noResultsYet?: boolean }> = ({ noResultsYet }) => (
     <div
@@ -36,11 +37,83 @@ const LoadingPolls: React.FC<{ noResultsYet?: boolean }> = ({ noResultsYet }) =>
     </div>
 );
 
+const LoadMorePolls: React.FC<{ loadMorePolls?: () => void; isLoading?: boolean }> = ({ isLoading, loadMorePolls }) =>
+    loadMorePolls ? (
+        <AccessibleButton
+            className="mx_PollHistoryList_loadMorePolls"
+            kind="link_inline"
+            onClick={() => loadMorePolls()}
+        >
+            {_t("Load more polls")}
+            {isLoading && <InlineSpinner />}
+        </AccessibleButton>
+    ) : null;
+
+const ONE_DAY_MS = 60000 * 60 * 24;
+const getNoResultsMessage = (
+    filter: PollHistoryFilter,
+    oldestEventTimestamp?: number,
+    loadMorePolls?: () => void,
+): string => {
+    if (!loadMorePolls) {
+        return filter === "ACTIVE"
+            ? _t("There are no active polls in this room")
+            : _t("There are no past polls in this room");
+    }
+
+    // we don't know how much history has been fetched
+    if (!oldestEventTimestamp) {
+        return filter === "ACTIVE"
+            ? _t("There are no active polls. Load more polls to view polls for previous months")
+            : _t("There are no past polls. Load more polls to view polls for previous months");
+    }
+
+    const fetchedHistoryDaysCount = Math.ceil((Date.now() - oldestEventTimestamp) / ONE_DAY_MS);
+    return filter === "ACTIVE"
+        ? _t(
+              "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months",
+              { count: fetchedHistoryDaysCount },
+          )
+        : _t("There are no past polls for the past %(count)s days. Load more polls to view polls for previous months", {
+              count: fetchedHistoryDaysCount,
+          });
+};
+
+const NoResults: React.FC<{
+    filter: PollHistoryFilter;
+    oldestFetchedEventTimestamp?: number;
+    loadMorePolls?: () => void;
+    isLoading?: boolean;
+}> = ({ filter, isLoading, oldestFetchedEventTimestamp, loadMorePolls }) => {
+    // we can't page the timeline anymore
+    // just use plain loader
+    if (!loadMorePolls && isLoading) {
+        return <LoadingPolls noResultsYet />;
+    }
+
+    return (
+        <span className="mx_PollHistoryList_noResults">
+            {getNoResultsMessage(filter, oldestFetchedEventTimestamp, loadMorePolls)}
+
+            {!!loadMorePolls && <LoadMorePolls loadMorePolls={loadMorePolls} isLoading={isLoading} />}
+        </span>
+    );
+};
+
 type PollHistoryListProps = {
     pollStartEvents: MatrixEvent[];
     polls: Map<string, Poll>;
     filter: PollHistoryFilter;
+    /**
+     * server ts of the oldest fetched poll
+     * ignoring filter
+     * used to render no results in last x days message
+     * undefined when no polls are found
+     */
+    oldestFetchedEventTimestamp?: number;
     onFilterChange: (filter: PollHistoryFilter) => void;
+    onItemClick: (pollId: string) => void;
+    loadMorePolls?: () => void;
     isLoading?: boolean;
 };
 export const PollHistoryList: React.FC<PollHistoryListProps> = ({
@@ -48,7 +121,10 @@ export const PollHistoryList: React.FC<PollHistoryListProps> = ({
     polls,
     filter,
     isLoading,
+    oldestFetchedEventTimestamp,
     onFilterChange,
+    loadMorePolls,
+    onItemClick,
 }) => {
     return (
         <div className="mx_PollHistoryList">
@@ -65,26 +141,32 @@ export const PollHistoryList: React.FC<PollHistoryListProps> = ({
                 <ol className={classNames("mx_PollHistoryList_list", `mx_PollHistoryList_list_${filter}`)}>
                     {pollStartEvents.map((pollStartEvent) =>
                         filter === "ACTIVE" ? (
-                            <PollListItem key={pollStartEvent.getId()!} event={pollStartEvent} />
+                            <PollListItem
+                                key={pollStartEvent.getId()!}
+                                event={pollStartEvent}
+                                onClick={() => onItemClick(pollStartEvent.getId()!)}
+                            />
                         ) : (
                             <PollListItemEnded
                                 key={pollStartEvent.getId()!}
                                 event={pollStartEvent}
                                 poll={polls.get(pollStartEvent.getId()!)!}
+                                onClick={() => onItemClick(pollStartEvent.getId()!)}
                             />
                         ),
                     )}
-                    {isLoading && <LoadingPolls />}
+                    {isLoading && !loadMorePolls && <LoadingPolls />}
+                    {!!loadMorePolls && <LoadMorePolls loadMorePolls={loadMorePolls} isLoading={isLoading} />}
                 </ol>
             )}
-            {!pollStartEvents.length && !isLoading && (
-                <span className="mx_PollHistoryList_noResults">
-                    {filter === "ACTIVE"
-                        ? _t("There are no active polls in this room")
-                        : _t("There are no past polls in this room")}
-                </span>
+            {!pollStartEvents.length && (
+                <NoResults
+                    oldestFetchedEventTimestamp={oldestFetchedEventTimestamp}
+                    isLoading={isLoading}
+                    filter={filter}
+                    loadMorePolls={loadMorePolls}
+                />
             )}
-            {!pollStartEvents.length && isLoading && <LoadingPolls noResultsYet />}
         </div>
     );
 };
diff --git a/src/components/views/dialogs/polls/PollListItem.tsx b/src/components/views/dialogs/polls/PollListItem.tsx
index 7a4ace08b05..f3c73998840 100644
--- a/src/components/views/dialogs/polls/PollListItem.tsx
+++ b/src/components/views/dialogs/polls/PollListItem.tsx
@@ -20,22 +20,30 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg";
 import { formatLocalDateShort } from "../../../../DateUtils";
+import { _t } from "../../../../languageHandler";
+import TooltipTarget from "../../elements/TooltipTarget";
+import { Alignment } from "../../elements/Tooltip";
 
 interface Props {
     event: MatrixEvent;
+    onClick: () => void;
 }
 
-export const PollListItem: React.FC<Props> = ({ event }) => {
+export const PollListItem: React.FC<Props> = ({ event, onClick }) => {
     const pollEvent = event.unstableExtensibleEvent as unknown as PollStartEvent;
     if (!pollEvent) {
         return null;
     }
     const formattedDate = formatLocalDateShort(event.getTs());
     return (
-        <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem">
-            <span>{formattedDate}</span>
-            <PollIcon className="mx_PollListItem_icon" />
-            <span className="mx_PollListItem_question">{pollEvent.question.text}</span>
+        <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem" onClick={onClick}>
+            <TooltipTarget label={_t("View poll")} alignment={Alignment.Top}>
+                <div className="mx_PollListItem_content">
+                    <span>{formattedDate}</span>
+                    <PollIcon className="mx_PollListItem_icon" />
+                    <span className="mx_PollListItem_question">{pollEvent.question.text}</span>
+                </div>
+            </TooltipTarget>
         </li>
     );
 };
diff --git a/src/components/views/dialogs/polls/PollListItemEnded.tsx b/src/components/views/dialogs/polls/PollListItemEnded.tsx
index 8a6b2c9595f..c78dd19d52d 100644
--- a/src/components/views/dialogs/polls/PollListItemEnded.tsx
+++ b/src/components/views/dialogs/polls/PollListItemEnded.tsx
@@ -25,10 +25,13 @@ import { formatLocalDateShort } from "../../../../DateUtils";
 import { allVotes, collectUserVotes, countVotes } from "../../messages/MPollBody";
 import { PollOption } from "../../polls/PollOption";
 import { Caption } from "../../typography/Caption";
+import TooltipTarget from "../../elements/TooltipTarget";
+import { Alignment } from "../../elements/Tooltip";
 
 interface Props {
     event: MatrixEvent;
     poll: Poll;
+    onClick: () => void;
 }
 
 type EndedPollState = {
@@ -88,7 +91,7 @@ const usePollVotes = (poll: Poll): Partial<EndedPollState> => {
  * @param event - the poll start MatrixEvent
  * @param poll - Poll instance
  */
-export const PollListItemEnded: React.FC<Props> = ({ event, poll }) => {
+export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) => {
     const pollEvent = poll.pollEvent;
     const { winningAnswers, totalVoteCount } = usePollVotes(poll);
     if (!pollEvent) {
@@ -97,31 +100,35 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll }) => {
     const formattedDate = formatLocalDateShort(event.getTs());
 
     return (
-        <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded">
-            <div className="mx_PollListItemEnded_title">
-                <PollIcon className="mx_PollListItemEnded_icon" />
-                <span className="mx_PollListItemEnded_question">{pollEvent.question.text}</span>
-                <Caption>{formattedDate}</Caption>
-            </div>
-            {!!winningAnswers?.length && (
-                <div className="mx_PollListItemEnded_answers">
-                    {winningAnswers?.map(({ answer, voteCount }) => (
-                        <PollOption
-                            key={answer.id}
-                            answer={answer}
-                            voteCount={voteCount}
-                            totalVoteCount={totalVoteCount!}
-                            pollId={poll.pollId}
-                            displayVoteCount
-                            isChecked
-                            isEnded
-                        />
-                    ))}
+        <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded" onClick={onClick}>
+            <TooltipTarget label={_t("View poll")} alignment={Alignment.Top}>
+                <div className="mx_PollListItemEnded_content">
+                    <div className="mx_PollListItemEnded_title">
+                        <PollIcon className="mx_PollListItemEnded_icon" />
+                        <span className="mx_PollListItemEnded_question">{pollEvent.question.text}</span>
+                        <Caption>{formattedDate}</Caption>
+                    </div>
+                    {!!winningAnswers?.length && (
+                        <div className="mx_PollListItemEnded_answers">
+                            {winningAnswers?.map(({ answer, voteCount }) => (
+                                <PollOption
+                                    key={answer.id}
+                                    answer={answer}
+                                    voteCount={voteCount}
+                                    totalVoteCount={totalVoteCount!}
+                                    pollId={poll.pollId}
+                                    displayVoteCount
+                                    isChecked
+                                    isEnded
+                                />
+                            ))}
+                        </div>
+                    )}
+                    <div className="mx_PollListItemEnded_voteCount">
+                        <Caption>{_t("Final result based on %(count)s votes", { count: totalVoteCount })}</Caption>
+                    </div>
                 </div>
-            )}
-            <div className="mx_PollListItemEnded_voteCount">
-                <Caption>{_t("Final result based on %(count)s votes", { count: totalVoteCount })}</Caption>
-            </div>
+            </TooltipTarget>
         </li>
     );
 };
diff --git a/src/components/views/dialogs/polls/fetchPastPolls.ts b/src/components/views/dialogs/polls/fetchPastPolls.ts
index 1d045d3d079..e97755874df 100644
--- a/src/components/views/dialogs/polls/fetchPastPolls.ts
+++ b/src/components/views/dialogs/polls/fetchPastPolls.ts
@@ -14,41 +14,82 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { M_POLL_START } from "matrix-js-sdk/src/@types/polls";
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import { EventTimeline, EventTimelineSet, Room } from "matrix-js-sdk/src/matrix";
+import { Direction, EventTimeline, EventTimelineSet, Room } from "matrix-js-sdk/src/matrix";
 import { Filter, IFilterDefinition } from "matrix-js-sdk/src/filter";
 import { logger } from "matrix-js-sdk/src/logger";
 
+const getOldestEventTimestamp = (timelineSet?: EventTimelineSet): number | undefined => {
+    if (!timelineSet) {
+        return;
+    }
+
+    const liveTimeline = timelineSet?.getLiveTimeline();
+    const events = liveTimeline.getEvents();
+    return events[0]?.getTs();
+};
+
 /**
- * Page timeline backwards until either:
- * - event older than endOfHistoryPeriodTimestamp is encountered
- * - end of timeline is reached
+ * Page backwards in timeline history
  * @param timelineSet - timelineset to page
  * @param matrixClient - client
- * @param endOfHistoryPeriodTimestamp - epoch timestamp to fetch until
- * @returns void
+ * @param canPageBackward - whether the timeline has more pages
+ * @param oldestEventTimestamp - server ts of the oldest encountered event
  */
-const pagePolls = async (
+const pagePollHistory = async (
     timelineSet: EventTimelineSet,
     matrixClient: MatrixClient,
-    endOfHistoryPeriodTimestamp: number,
-): Promise<void> => {
-    const liveTimeline = timelineSet.getLiveTimeline();
-    const events = liveTimeline.getEvents();
-    const oldestEventTimestamp = events[0]?.getTs() || Date.now();
-    const hasMorePages = !!liveTimeline.getPaginationToken(EventTimeline.BACKWARDS);
-
-    if (!hasMorePages || oldestEventTimestamp <= endOfHistoryPeriodTimestamp) {
-        return;
+): Promise<{
+    oldestEventTimestamp?: number;
+    canPageBackward: boolean;
+}> => {
+    if (!timelineSet) {
+        return { canPageBackward: false };
     }
 
+    const liveTimeline = timelineSet.getLiveTimeline();
+
     await matrixClient.paginateEventTimeline(liveTimeline, {
         backwards: true,
     });
 
-    return pagePolls(timelineSet, matrixClient, endOfHistoryPeriodTimestamp);
+    return {
+        oldestEventTimestamp: getOldestEventTimestamp(timelineSet),
+        canPageBackward: !!liveTimeline.getPaginationToken(EventTimeline.BACKWARDS),
+    };
+};
+
+/**
+ * Page timeline backwards until either:
+ * - event older than timestamp is encountered
+ * - end of timeline is reached
+ * @param timelineSet - timeline set to page
+ * @param matrixClient - client
+ * @param timestamp - epoch timestamp to page until
+ * @param canPageBackward - whether the timeline has more pages
+ * @param oldestEventTimestamp - server ts of the oldest encountered event
+ */
+const fetchHistoryUntilTimestamp = async (
+    timelineSet: EventTimelineSet | undefined,
+    matrixClient: MatrixClient,
+    timestamp: number,
+    canPageBackward: boolean,
+    oldestEventTimestamp?: number,
+): Promise<void> => {
+    if (!timelineSet || !canPageBackward || (oldestEventTimestamp && oldestEventTimestamp < timestamp)) {
+        return;
+    }
+    const result = await pagePollHistory(timelineSet, matrixClient);
+
+    return fetchHistoryUntilTimestamp(
+        timelineSet,
+        matrixClient,
+        timestamp,
+        result.canPageBackward,
+        result.oldestEventTimestamp,
+    );
 };
 
 const ONE_DAY_MS = 60000 * 60 * 24;
@@ -57,35 +98,73 @@ const ONE_DAY_MS = 60000 * 60 * 24;
  * @param timelineSet - timelineset to page
  * @param matrixClient - client
  * @param historyPeriodDays - number of days of history to fetch, from current day
- * @returns isLoading - true while fetching history
+ * @returns isLoading - true while fetching
+ * @returns oldestEventTimestamp - timestamp of oldest encountered poll, undefined when no polls found in timeline so far
+ * @returns loadMorePolls - function to page timeline backwards, undefined when timeline cannot be paged backwards
+ * @returns loadTimelineHistory - loads timeline history for the given history period
  */
 const useTimelineHistory = (
-    timelineSet: EventTimelineSet | null,
+    timelineSet: EventTimelineSet | undefined,
     matrixClient: MatrixClient,
     historyPeriodDays: number,
-): { isLoading: boolean } => {
+): {
+    isLoading: boolean;
+    oldestEventTimestamp?: number;
+    loadTimelineHistory: () => Promise<void>;
+    loadMorePolls?: () => Promise<void>;
+} => {
     const [isLoading, setIsLoading] = useState(true);
+    const [oldestEventTimestamp, setOldestEventTimestamp] = useState<number | undefined>(undefined);
+    const [canPageBackward, setCanPageBackward] = useState(false);
 
-    useEffect(() => {
+    const loadTimelineHistory = useCallback(async () => {
+        const endOfHistoryPeriodTimestamp = Date.now() - ONE_DAY_MS * historyPeriodDays;
+        setIsLoading(true);
+        try {
+            const liveTimeline = timelineSet?.getLiveTimeline();
+            const canPageBackward = !!liveTimeline?.getPaginationToken(Direction.Backward);
+            const oldestEventTimestamp = getOldestEventTimestamp(timelineSet);
+
+            await fetchHistoryUntilTimestamp(
+                timelineSet,
+                matrixClient,
+                endOfHistoryPeriodTimestamp,
+                canPageBackward,
+                oldestEventTimestamp,
+            );
+
+            setCanPageBackward(!!timelineSet?.getLiveTimeline()?.getPaginationToken(EventTimeline.BACKWARDS));
+            setOldestEventTimestamp(getOldestEventTimestamp(timelineSet));
+        } catch (error) {
+            logger.error("Failed to fetch room polls history", error);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [historyPeriodDays, timelineSet, matrixClient]);
+
+    const loadMorePolls = useCallback(async () => {
         if (!timelineSet) {
             return;
         }
-        const endOfHistoryPeriodTimestamp = Date.now() - ONE_DAY_MS * historyPeriodDays;
-
-        const doFetchHistory = async (): Promise<void> => {
-            setIsLoading(true);
-            try {
-                await pagePolls(timelineSet, matrixClient, endOfHistoryPeriodTimestamp);
-            } catch (error) {
-                logger.error("Failed to fetch room polls history", error);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-        doFetchHistory();
-    }, [timelineSet, historyPeriodDays, matrixClient]);
-
-    return { isLoading };
+        setIsLoading(true);
+        try {
+            const result = await pagePollHistory(timelineSet, matrixClient);
+
+            setCanPageBackward(result.canPageBackward);
+            setOldestEventTimestamp(result.oldestEventTimestamp);
+        } catch (error) {
+            logger.error("Failed to fetch room polls history", error);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [timelineSet, matrixClient]);
+
+    return {
+        isLoading,
+        oldestEventTimestamp,
+        loadTimelineHistory,
+        loadMorePolls: canPageBackward ? loadMorePolls : undefined,
+    };
 };
 
 const filterDefinition: IFilterDefinition = {
@@ -97,18 +176,24 @@ const filterDefinition: IFilterDefinition = {
 };
 
 /**
- * Fetch poll start events in the last N days of room history
+ * Fetches poll start events in the last N days of room history
  * @param room - room to fetch history for
  * @param matrixClient - client
  * @param historyPeriodDays - number of days of history to fetch, from current day
  * @returns isLoading - true while fetching history
+ * @returns oldestEventTimestamp - timestamp of oldest encountered poll, undefined when no polls found in timeline so far
+ * @returns loadMorePolls - function to page timeline backwards, undefined when timeline cannot be paged backwards
  */
 export const useFetchPastPolls = (
     room: Room,
     matrixClient: MatrixClient,
     historyPeriodDays = 30,
-): { isLoading: boolean } => {
-    const [timelineSet, setTimelineSet] = useState<EventTimelineSet | null>(null);
+): {
+    isLoading: boolean;
+    oldestEventTimestamp?: number;
+    loadMorePolls?: () => Promise<void>;
+} => {
+    const [timelineSet, setTimelineSet] = useState<EventTimelineSet | undefined>(undefined);
 
     useEffect(() => {
         const filter = new Filter(matrixClient.getSafeUserId());
@@ -123,7 +208,15 @@ export const useFetchPastPolls = (
         getFilteredTimelineSet();
     }, [room, matrixClient]);
 
-    const { isLoading } = useTimelineHistory(timelineSet, matrixClient, historyPeriodDays);
+    const { isLoading, oldestEventTimestamp, loadMorePolls, loadTimelineHistory } = useTimelineHistory(
+        timelineSet,
+        matrixClient,
+        historyPeriodDays,
+    );
+
+    useEffect(() => {
+        loadTimelineHistory();
+    }, [loadTimelineHistory]);
 
-    return { isLoading };
+    return { isLoading, oldestEventTimestamp, loadMorePolls };
 };
diff --git a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
index 0cf19b4eb28..e6a5c67bfd8 100644
--- a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
+++ b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
@@ -24,7 +24,6 @@ import { MatrixClientPeg } from "../../../../MatrixClientPeg";
 import Field from "../../elements/Field";
 import AccessibleButton from "../../elements/AccessibleButton";
 import { _t } from "../../../../languageHandler";
-import { IDialogProps } from "../IDialogProps";
 import { accessSecretStorage } from "../../../../SecurityManager";
 import Modal from "../../../../Modal";
 import InteractiveAuthDialog from "../InteractiveAuthDialog";
@@ -40,9 +39,12 @@ const KEY_FILE_MAX_SIZE = 128;
 // Don't shout at the user that their key is invalid every time they type a key: wait a short time
 const VALIDATION_THROTTLE_MS = 200;
 
-interface IProps extends IDialogProps {
+export type KeyParams = { passphrase?: string; recoveryKey?: string };
+
+interface IProps {
     keyInfo?: ISecretStorageKeyInfo;
-    checkPrivateKey: (k: { passphrase?: string; recoveryKey?: string }) => boolean;
+    checkPrivateKey: (k: KeyParams) => Promise<boolean>;
+    onFinished(result?: false | KeyParams): void;
 }
 
 interface IState {
@@ -246,7 +248,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
 
                 // Now we can indicate that the user is done pressing buttons, finally.
                 // Upstream flows will detect the new secret storage, key backup, etc and use it.
-                this.props.onFinished(true);
+                this.props.onFinished({});
             }, true);
         } catch (e) {
             logger.error(e);
diff --git a/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.tsx b/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.tsx
index 8e83a8d4b14..3b3d76b74c9 100644
--- a/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.tsx
+++ b/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.tsx
@@ -21,7 +21,7 @@ import BaseDialog from "../BaseDialog";
 import DialogButtons from "../../elements/DialogButtons";
 
 interface IProps {
-    onFinished: (success: boolean) => void;
+    onFinished: (success?: boolean) => void;
 }
 
 export default class ConfirmDestroyCrossSigningDialog extends React.Component<IProps> {
diff --git a/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx b/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx
index 8413b7cd539..3f44cfe9d6a 100644
--- a/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx
+++ b/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx
@@ -32,7 +32,7 @@ import InteractiveAuthDialog from "../InteractiveAuthDialog";
 interface IProps {
     accountPassword?: string;
     tokenLogin?: boolean;
-    onFinished?: (success: boolean) => void;
+    onFinished?: (success?: boolean) => void;
 }
 
 interface IState {
diff --git a/src/components/views/dialogs/security/RestoreKeyBackupDialog.tsx b/src/components/views/dialogs/security/RestoreKeyBackupDialog.tsx
index 6c52cae1a75..4c740b36d6a 100644
--- a/src/components/views/dialogs/security/RestoreKeyBackupDialog.tsx
+++ b/src/components/views/dialogs/security/RestoreKeyBackupDialog.tsx
@@ -24,7 +24,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixClientPeg } from "../../../../MatrixClientPeg";
 import { _t } from "../../../../languageHandler";
 import { accessSecretStorage } from "../../../../SecurityManager";
-import { IDialogProps } from "../IDialogProps";
 import Spinner from "../../elements/Spinner";
 import DialogButtons from "../../elements/DialogButtons";
 import AccessibleButton from "../../elements/AccessibleButton";
@@ -42,13 +41,14 @@ enum ProgressState {
     LoadKeys = "load_keys",
 }
 
-interface IProps extends IDialogProps {
+interface IProps {
     // if false, will close the dialog as soon as the restore completes successfully
     // default: true
     showSummary?: boolean;
     // If specified, gather the key from the user but then call the function with the backup
     // key rather than actually (necessarily) restoring the backup.
     keyCallback?: (key: Uint8Array) => void;
+    onFinished(done?: boolean): void;
 }
 
 interface IState {
@@ -77,7 +77,7 @@ interface IState {
  * Dialog for restoring e2e keys from a backup and the user's recovery key
  */
 export default class RestoreKeyBackupDialog extends React.PureComponent<IProps, IState> {
-    public static defaultProps = {
+    public static defaultProps: Partial<IProps> = {
         showSummary: true,
     };
 
@@ -405,7 +405,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
                 <div>
                     <p>
                         {_t(
-                            "<b>Warning</b>: you should only set up key backup " + "from a trusted computer.",
+                            "<b>Warning</b>: you should only set up key backup from a trusted computer.",
                             {},
                             { b: (sub) => <b>{sub}</b> },
                         )}
@@ -480,7 +480,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
                 <div>
                     <p>
                         {_t(
-                            "<b>Warning</b>: you should only set up key backup " + "from a trusted computer.",
+                            "<b>Warning</b>: you should only set up key backup from a trusted computer.",
                             {},
                             { b: (sub) => <b>{sub}</b> },
                         )}
diff --git a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
index a4cf53b73b8..659b9cc9e7a 100644
--- a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
+++ b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
@@ -20,7 +20,6 @@ import SetupEncryptionBody from "../../../structures/auth/SetupEncryptionBody";
 import BaseDialog from "../BaseDialog";
 import { _t } from "../../../../languageHandler";
 import { SetupEncryptionStore, Phase } from "../../../../stores/SetupEncryptionStore";
-import { IDialogProps } from "../IDialogProps";
 
 function iconFromPhase(phase: Phase): string {
     if (phase === Phase.Done) {
@@ -30,7 +29,9 @@ function iconFromPhase(phase: Phase): string {
     }
 }
 
-interface IProps extends IDialogProps {}
+interface IProps {
+    onFinished(): void;
+}
 interface IState {
     icon: string;
 }
diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index d8911876f5e..ab7c5397de8 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -83,7 +83,6 @@ import Spinner from "../../elements/Spinner";
 import NotificationBadge from "../../rooms/NotificationBadge";
 import BaseDialog from "../BaseDialog";
 import FeedbackDialog from "../FeedbackDialog";
-import { IDialogProps } from "../IDialogProps";
 import { Option } from "./Option";
 import { PublicRoomResultDetails } from "./PublicRoomResultDetails";
 import { RoomResultContextMenus } from "./RoomResultContextMenus";
@@ -93,14 +92,16 @@ import { isLocalRoom } from "../../../../utils/localRoom/isLocalRoom";
 import { shouldShowFeedback } from "../../../../utils/Feedback";
 import RoomAvatar from "../../avatars/RoomAvatar";
 import { useFeatureEnabled } from "../../../../hooks/useSettings";
+import { filterBoolean } from "../../../../utils/arrays";
 
 const MAX_RECENT_SEARCHES = 10;
 const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
 const AVATAR_SIZE = 24;
 
-interface IProps extends IDialogProps {
+interface IProps {
     initialText?: string;
     initialFilter?: Filter;
+    onFinished(): void;
 }
 
 function refIsForRecentlyViewed(ref: RefObject<HTMLElement>): boolean {
@@ -173,13 +174,13 @@ const toPublicRoomResult = (publicRoom: IPublicRoomsChunkRoom): IPublicRoomResul
     publicRoom,
     section: Section.PublicRooms,
     filter: [Filter.PublicRooms],
-    query: [
+    query: filterBoolean([
         publicRoom.room_id.toLowerCase(),
         publicRoom.canonical_alias?.toLowerCase(),
         publicRoom.name?.toLowerCase(),
         sanitizeHtml(publicRoom.topic?.toLowerCase() ?? "", { allowedTags: [] }),
         ...(publicRoom.aliases?.map((it) => it.toLowerCase()) || []),
-    ].filter(Boolean) as string[],
+    ]),
 });
 
 const toRoomResult = (room: Room): IRoomResult => {
diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
index 7bb1fe216bd..e6bf53426b8 100644
--- a/src/components/views/elements/AppTile.tsx
+++ b/src/components/views/elements/AppTile.tsx
@@ -23,6 +23,7 @@ import classNames from "classnames";
 import { MatrixCapabilities } from "matrix-widget-api";
 import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
 import { logger } from "matrix-js-sdk/src/logger";
+import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
 
 import AccessibleButton from "./AccessibleButton";
 import { _t } from "../../../languageHandler";
@@ -36,7 +37,7 @@ import { aboveLeftOf, ContextMenuButton } from "../../structures/ContextMenu";
 import PersistedElement, { getPersistKey } from "./PersistedElement";
 import { WidgetType } from "../../../widgets/WidgetType";
 import { ElementWidget, StopGapWidget } from "../../../stores/widgets/StopGapWidget";
-import WidgetContextMenu from "../context_menus/WidgetContextMenu";
+import { WidgetContextMenu } from "../context_menus/WidgetContextMenu";
 import WidgetAvatar from "../avatars/WidgetAvatar";
 import LegacyCallHandler from "../../../LegacyCallHandler";
 import { IApp } from "../../../stores/WidgetStore";
@@ -50,6 +51,7 @@ import { Action } from "../../../dispatcher/actions";
 import { ElementWidgetCapabilities } from "../../../stores/widgets/ElementWidgetCapabilities";
 import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
 import { SdkContextClass } from "../../../contexts/SDKContext";
+import { ModuleRunner } from "../../../modules/ModuleRunner";
 
 interface IProps {
     app: IApp;
@@ -162,6 +164,9 @@ export default class AppTile extends React.Component<IProps, IState> {
     private hasPermissionToLoad = (props: IProps): boolean => {
         if (this.usingLocalWidget()) return true;
         if (!props.room) return true; // user widgets always have permissions
+        const opts: ApprovalOpts = { approved: undefined };
+        ModuleRunner.instance.invoke(WidgetLifecycle.PreLoadRequest, opts, new ElementWidget(this.props.app));
+        if (opts.approved) return true;
 
         const currentlyAllowedWidgets = SettingsStore.getValue("allowedWidgets", props.room.roomId);
         const allowed = props.app.eventId !== undefined && (currentlyAllowedWidgets[props.app.eventId] ?? false);
diff --git a/src/components/views/elements/EditableTextContainer.tsx b/src/components/views/elements/EditableTextContainer.tsx
index 6e3132e226f..e2f4298062f 100644
--- a/src/components/views/elements/EditableTextContainer.tsx
+++ b/src/components/views/elements/EditableTextContainer.tsx
@@ -32,7 +32,7 @@ interface IProps {
 
     /* callback to update the value. Called with a single argument: the new
      * value. */
-    onSubmit?: (value: string) => Promise<{} | void>;
+    onSubmit: (value: string) => Promise<{} | void>;
 
     /* should the input submit when focus is lost? */
     blurToSubmit?: boolean;
@@ -40,7 +40,7 @@ interface IProps {
 
 interface IState {
     busy: boolean;
-    errorString: string;
+    errorString: string | null;
     value: string;
 }
 
@@ -72,7 +72,7 @@ export default class EditableTextContainer extends React.Component<IProps, IStat
         this.state = {
             busy: false,
             errorString: null,
-            value: props.initialValue,
+            value: props.initialValue ?? "",
         };
     }
 
diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 5bc1f0562b4..325c54304a1 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -33,7 +33,6 @@ import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { normalizeWheelEvent } from "../../../utils/Mouse";
-import { IDialogProps } from "../dialogs/IDialogProps";
 import UIStore from "../../../stores/UIStore";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
@@ -56,7 +55,7 @@ const getPanelHeight = (): number => {
     return parseInt(value.slice(0, value.length - 2));
 };
 
-interface IProps extends IDialogProps {
+interface IProps {
     src: string; // the source of the image being displayed
     name?: string; // the main title ('name') for the image
     link?: string; // the link (if any) applied to the name of the image
@@ -77,6 +76,7 @@ interface IProps extends IDialogProps {
         width: number;
         height: number;
     };
+    onFinished(): void;
 }
 
 interface IState {
diff --git a/src/components/views/elements/PollCreateDialog.tsx b/src/components/views/elements/PollCreateDialog.tsx
index c4717c6ecc0..a30453ed87c 100644
--- a/src/components/views/elements/PollCreateDialog.tsx
+++ b/src/components/views/elements/PollCreateDialog.tsx
@@ -27,7 +27,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { IPartialEvent } from "matrix-js-sdk/src/@types/extensible_events";
 
 import ScrollableBaseModal, { IScrollableBaseState } from "../dialogs/ScrollableBaseModal";
-import { IDialogProps } from "../dialogs/IDialogProps";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import Modal from "../../../Modal";
 import { _t } from "../../../languageHandler";
@@ -37,10 +36,11 @@ import AccessibleButton from "./AccessibleButton";
 import Spinner from "./Spinner";
 import { doMaybeLocalRoomAction } from "../../../utils/local-room";
 
-interface IProps extends IDialogProps {
+interface IProps {
     room: Room;
     threadId?: string;
     editingMxEvent?: MatrixEvent; // Truthy if we are editing an existing poll
+    onFinished(pollCreated?: boolean): void;
 }
 
 enum FocusTarget {
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx
index 0dffacb7ce9..5c90b39442f 100644
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/src/components/views/elements/SSOButtons.tsx
@@ -113,7 +113,7 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
         brandClass = `mx_SSOButton_brand_${brandName}`;
         icon = <img src={brandIcon} height="24" width="24" alt={brandName} />;
     } else if (typeof idp?.icon === "string" && idp.icon.startsWith("mxc://")) {
-        const src = mediaFromMxc(idp.icon, matrixClient).getSquareThumbnailHttp(24);
+        const src = mediaFromMxc(idp.icon, matrixClient).getSquareThumbnailHttp(24) ?? undefined;
         icon = <img src={src} height="24" width="24" alt={idp.name} />;
     }
 
diff --git a/src/components/views/elements/SearchWarning.tsx b/src/components/views/elements/SearchWarning.tsx
index fec5eee37f1..14ffcbd5107 100644
--- a/src/components/views/elements/SearchWarning.tsx
+++ b/src/components/views/elements/SearchWarning.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import EventIndexPeg from "../../../indexing/EventIndexPeg";
@@ -31,13 +31,13 @@ export enum WarningKind {
 }
 
 interface IProps {
-    isRoomEncrypted: boolean;
+    isRoomEncrypted?: boolean;
     kind: WarningKind;
 }
 
 export default function SearchWarning({ isRoomEncrypted, kind }: IProps): JSX.Element {
-    if (!isRoomEncrypted) return null;
-    if (EventIndexPeg.get()) return null;
+    if (!isRoomEncrypted) return <></>;
+    if (EventIndexPeg.get()) return <></>;
 
     if (EventIndexPeg.error) {
         return (
@@ -69,8 +69,8 @@ export default function SearchWarning({ isRoomEncrypted, kind }: IProps): JSX.El
     const brand = SdkConfig.get("brand");
     const desktopBuilds = SdkConfig.getObject("desktop_builds");
 
-    let text = null;
-    let logo = null;
+    let text: ReactNode | undefined;
+    let logo: JSX.Element | undefined;
     if (desktopBuilds.get("available")) {
         logo = <img src={desktopBuilds.get("logo")} />;
         const buildUrl = desktopBuilds.get("url");
@@ -116,7 +116,7 @@ export default function SearchWarning({ isRoomEncrypted, kind }: IProps): JSX.El
     // for safety
     if (!text) {
         logger.warn("Unknown desktop builds warning kind: ", kind);
-        return null;
+        return <></>;
     }
 
     return (
diff --git a/src/components/views/elements/Spinner.tsx b/src/components/views/elements/Spinner.tsx
index 672ab279468..f3032e266eb 100644
--- a/src/components/views/elements/Spinner.tsx
+++ b/src/components/views/elements/Spinner.tsx
@@ -22,6 +22,7 @@ interface IProps {
     w?: number;
     h?: number;
     message?: string;
+    onFinished: any; // XXX: Spinner pretends to be a dialog so it must accept an onFinished, but it never calls it
 }
 
 export default class Spinner extends React.PureComponent<IProps> {
diff --git a/src/components/views/elements/Validation.tsx b/src/components/views/elements/Validation.tsx
index e9e98ca6152..db51c46bae6 100644
--- a/src/components/views/elements/Validation.tsx
+++ b/src/components/views/elements/Validation.tsx
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import classNames from "classnames";
 
 type Data = Pick<IFieldState, "value" | "allowEmpty">;
@@ -26,18 +26,18 @@ interface IResult {
     text: string;
 }
 
-interface IRule<T, D = void> {
+interface IRule<T, D = undefined> {
     key: string;
     final?: boolean;
     skip?(this: T, data: Data, derivedData: D): boolean;
     test(this: T, data: Data, derivedData: D): boolean | Promise<boolean>;
-    valid?(this: T, derivedData: D): string;
-    invalid?(this: T, derivedData: D): string;
+    valid?(this: T, derivedData: D): string | null;
+    invalid?(this: T, derivedData: D): string | null;
 }
 
 interface IArgs<T, D = void> {
     rules: IRule<T, D>[];
-    description?(this: T, derivedData: D, results: IResult[]): React.ReactChild;
+    description?(this: T, derivedData: D, results: IResult[]): ReactNode;
     hideDescriptionIfValid?: boolean;
     deriveData?(data: Data): Promise<D>;
 }
@@ -90,14 +90,12 @@ export default function withValidation<T = void, D = void>({
         { value, focused, allowEmpty = true }: IFieldState,
     ): Promise<IValidationResult> {
         if (!value && allowEmpty) {
-            return {
-                valid: null,
-                feedback: null,
-            };
+            return {};
         }
 
         const data = { value, allowEmpty };
-        const derivedData: D | undefined = deriveData ? await deriveData.call(this, data) : undefined;
+        // We know that if deriveData is set then D will not be undefined
+        const derivedData: D = (await deriveData?.call(this, data)) as D;
 
         const results: IResult[] = [];
         let valid = true;
@@ -149,10 +147,7 @@ export default function withValidation<T = void, D = void>({
 
         // Hide feedback when not focused
         if (!focused) {
-            return {
-                valid,
-                feedback: null,
-            };
+            return { valid };
         }
 
         let details;
diff --git a/src/components/views/emojipicker/Category.tsx b/src/components/views/emojipicker/Category.tsx
index 0928f7adca4..6129193c287 100644
--- a/src/components/views/emojipicker/Category.tsx
+++ b/src/components/views/emojipicker/Category.tsx
@@ -39,8 +39,8 @@ export interface ICategory {
 interface IProps {
     id: string;
     name: string;
-    emojis: Array<IEmoji | ICustomEmoji>;
-    selectedEmojis: Set<string>;
+    emojis: (IEmoji | ICustomEmoji)[];
+    selectedEmojis?: Set<string>;
     heightBefore: number;
     viewportHeight: number;
     scrollTop: number;
diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx
index fd63282b76b..3cade19b9b3 100644
--- a/src/components/views/emojipicker/EmojiPicker.tsx
+++ b/src/components/views/emojipicker/EmojiPicker.tsx
@@ -29,6 +29,7 @@ import QuickReactions from "./QuickReactions";
 import Category, { ICategory, CategoryKey } from "./Category";
 import AccessibleButton from "../elements/AccessibleButton";
 import { ICustomEmoji, loadImageSet } from "../../../emojipicker/customemoji";
+import { filterBoolean } from "../../../utils/arrays";
 
 export const CATEGORY_HEADER_HEIGHT = 20;
 export const EMOJI_HEIGHT = 35;
@@ -69,7 +70,6 @@ class EmojiPicker extends React.Component<IProps, IState> {
 
         this.state = {
             filter: "",
-            previewEmoji: null,
             scrollTop: 0,
             viewportHeight: 280,
         };
@@ -92,12 +92,13 @@ class EmojiPicker extends React.Component<IProps, IState> {
         // Convert recent emoji characters to emoji data, removing unknowns and duplicates
         this.recentlyUsed = Array.from(
             new Set(
-                recent
-                    .get()
-                    .map((recentKey) => {
-                        return getEmojiFromUnicode(recentKey) || this.shortcodes_to_custom_emoji[recentKey];
-                    })
-                    .filter(Boolean),
+                filterBoolean(
+                    recent
+                        .get()
+                        .map((recentKey) => {
+                            return getEmojiFromUnicode(recentKey) || this.shortcodes_to_custom_emoji[recentKey];
+                        })
+                )
             ),
         );
         this.allEmojis = {
@@ -230,7 +231,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
     private onChangeFilter = (filter: string): void => {
         const lcFilter = filter.toLowerCase().trim(); // filter is case insensitive
         for (const cat of this.categories) {
-            let emojis: Array<IEmoji | ICustomEmoji>;
+            let emojis: (IEmoji | ICustomEmoji)[];
             // If the new filter string includes the old filter string, we don't have to re-filter the whole dataset.
             if (lcFilter.includes(this.state.filter)) {
                 emojis = this.memoizedDataByCategory[cat.id];
@@ -238,10 +239,30 @@ class EmojiPicker extends React.Component<IProps, IState> {
                 emojis = this.allEmojis[cat.id];
             }
             emojis = emojis.filter((emoji) => this.emojiMatchesFilter(emoji, lcFilter));
+            emojis = emojis.sort((a, b) => {
+                const indexA = a.shortcodes[0].indexOf(lcFilter);
+                const indexB = b.shortcodes[0].indexOf(lcFilter);
+
+                // Prioritize emojis containing the filter in its shortcode
+                if (indexA == -1 || indexB == -1) {
+                    return indexB - indexA;
+                }
+
+                // If both emojis start with the filter
+                // put the shorter emoji first
+                if (indexA == 0 && indexB == 0) {
+                    return a.shortcodes[0].length - b.shortcodes[0].length;
+                }
+
+                // Prioritize emojis starting with the filter
+                return indexA - indexB;
+            });
             this.memoizedDataByCategory[cat.id] = emojis;
             cat.enabled = emojis.length > 0;
             // The setState below doesn't re-render the header and we already have the refs for updateVisibility, so...
-            cat.ref.current.disabled = !cat.enabled;
+            if (cat.ref.current) {
+                cat.ref.current.disabled = !cat.enabled;
+            }
         }
         this.setState({ filter });
         // Header underlines need to be updated, but updating requires knowing
@@ -278,9 +299,9 @@ class EmojiPicker extends React.Component<IProps, IState> {
         });
     };
 
-    private onHoverEmojiEnd = (emoji: IEmoji): void => {
+    private onHoverEmojiEnd = (): void => {
         this.setState({
-            previewEmoji: null,
+            previewEmoji: undefined,
         });
     };
 
@@ -293,7 +314,9 @@ class EmojiPicker extends React.Component<IProps, IState> {
     private reactWith = (reaction: string): void => {
         this.props.onChoose({
             label: null,
+            group: null,
             hexcode: null,
+            order: null,
             shortcodes: [],
             unicode: reaction,
         });
diff --git a/src/components/views/emojipicker/QuickReactions.tsx b/src/components/views/emojipicker/QuickReactions.tsx
index 05460d2b70f..6b149069481 100644
--- a/src/components/views/emojipicker/QuickReactions.tsx
+++ b/src/components/views/emojipicker/QuickReactions.tsx
@@ -42,9 +42,7 @@ interface IState {
 class QuickReactions extends React.Component<IProps, IState> {
     public constructor(props: IProps) {
         super(props);
-        this.state = {
-            hover: null,
-        };
+        this.state = {};
     }
 
     private onMouseEnter = (emoji: IEmoji): void => {
@@ -55,7 +53,7 @@ class QuickReactions extends React.Component<IProps, IState> {
 
     private onMouseLeave = (): void => {
         this.setState({
-            hover: null,
+            hover: undefined,
         });
     };
 
diff --git a/src/components/views/emojipicker/ReactionPicker.tsx b/src/components/views/emojipicker/ReactionPicker.tsx
index 3f74197b680..d0d3b16c5aa 100644
--- a/src/components/views/emojipicker/ReactionPicker.tsx
+++ b/src/components/views/emojipicker/ReactionPicker.tsx
@@ -78,8 +78,8 @@ class ReactionPicker extends React.Component<IProps, IState> {
         if (!this.props.reactions) {
             return {};
         }
-        const userId = MatrixClientPeg.get().getUserId();
-        const myAnnotations = this.props.reactions.getAnnotationsBySender()[userId] || new Set<MatrixEvent>();
+        const userId = MatrixClientPeg.get().getUserId()!;
+        const myAnnotations = this.props.reactions.getAnnotationsBySender()?.[userId] ?? new Set<MatrixEvent>();
         return Object.fromEntries(
             [...myAnnotations]
                 .filter((event) => !event.isRedacted())
@@ -99,9 +99,9 @@ class ReactionPicker extends React.Component<IProps, IState> {
         this.props.onFinished();
         const myReactions = this.getReactions();
         if (myReactions.hasOwnProperty(reaction)) {
-            if (this.props.mxEvent.isRedacted() || !this.context.canSelfRedact) return;
+            if (this.props.mxEvent.isRedacted() || !this.context.canSelfRedact) return false;
 
-            MatrixClientPeg.get().redactEvent(this.props.mxEvent.getRoomId(), myReactions[reaction]);
+            MatrixClientPeg.get().redactEvent(this.props.mxEvent.getRoomId()!, myReactions[reaction]);
             dis.dispatch<FocusComposerPayload>({
                 action: Action.FocusAComposer,
                 context: this.context.timelineRenderingType,
@@ -109,7 +109,7 @@ class ReactionPicker extends React.Component<IProps, IState> {
             // Tell the emoji picker not to bump this in the more frequently used list.
             return false;
         } else {
-            MatrixClientPeg.get().sendEvent(this.props.mxEvent.getRoomId(), EventType.Reaction, {
+            MatrixClientPeg.get().sendEvent(this.props.mxEvent.getRoomId()!, EventType.Reaction, {
                 "m.relates_to": {
                     rel_type: RelationType.Annotation,
                     event_id: this.props.mxEvent.getId(),
diff --git a/src/components/views/emojipicker/Search.tsx b/src/components/views/emojipicker/Search.tsx
index ae0636aeecb..edd6b2c4fca 100644
--- a/src/components/views/emojipicker/Search.tsx
+++ b/src/components/views/emojipicker/Search.tsx
@@ -32,7 +32,7 @@ class Search extends React.PureComponent<IProps> {
 
     public componentDidMount(): void {
         // For some reason, neither the autoFocus nor just calling focus() here worked, so here's a window.setTimeout
-        window.setTimeout(() => this.inputRef.current.focus(), 0);
+        window.setTimeout(() => this.inputRef.current?.focus(), 0);
     }
 
     private onKeyDown = (ev: React.KeyboardEvent): void => {
diff --git a/src/components/views/host_signup/HostSignupContainer.tsx b/src/components/views/host_signup/HostSignupContainer.tsx
deleted file mode 100644
index e74f81a5f44..00000000000
--- a/src/components/views/host_signup/HostSignupContainer.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, { useState } from "react";
-
-import HostSignupDialog from "../dialogs/HostSignupDialog";
-import { HostSignupStore } from "../../../stores/HostSignupStore";
-import { useEventEmitter } from "../../../hooks/useEventEmitter";
-import { UPDATE_EVENT } from "../../../stores/AsyncStore";
-
-const HostSignupContainer: React.FC = () => {
-    const [isActive, setIsActive] = useState(HostSignupStore.instance.isHostSignupActive);
-    useEventEmitter(HostSignupStore.instance, UPDATE_EVENT, () => {
-        setIsActive(HostSignupStore.instance.isHostSignupActive);
-    });
-
-    return <div className="mx_HostSignupContainer">{isActive && <HostSignupDialog />}</div>;
-};
-
-export default HostSignupContainer;
diff --git a/src/components/views/location/LocationButton.tsx b/src/components/views/location/LocationButton.tsx
index 056caaa3da9..08e13537d2f 100644
--- a/src/components/views/location/LocationButton.tsx
+++ b/src/components/views/location/LocationButton.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactElement, SyntheticEvent, useContext } from "react";
+import React, { ReactNode, SyntheticEvent, useContext } from "react";
 import classNames from "classnames";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { IEventRelation } from "matrix-js-sdk/src/models/event";
@@ -41,9 +41,9 @@ export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition,
         overflowMenuCloser?.();
     };
 
-    let contextMenu: ReactElement;
+    let contextMenu: ReactNode = null;
     if (menuDisplayed) {
-        const position = menuPosition ?? aboveLeftOf(button.current.getBoundingClientRect());
+        const position = menuPosition ?? (button.current && aboveLeftOf(button.current.getBoundingClientRect())) ?? {};
 
         contextMenu = (
             <LocationShareMenu
diff --git a/src/components/views/location/LocationPicker.tsx b/src/components/views/location/LocationPicker.tsx
index 53c010c809f..c012a1ab786 100644
--- a/src/components/views/location/LocationPicker.tsx
+++ b/src/components/views/location/LocationPicker.tsx
@@ -52,9 +52,9 @@ const isSharingOwnLocation = (shareType: LocationShareType): boolean =>
 class LocationPicker extends React.Component<ILocationPickerProps, IState> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
-    private map?: maplibregl.Map = null;
-    private geolocate?: maplibregl.GeolocateControl = null;
-    private marker?: maplibregl.Marker = null;
+    private map?: maplibregl.Map;
+    private geolocate?: maplibregl.GeolocateControl;
+    private marker?: maplibregl.Marker;
 
     public constructor(props: ILocationPickerProps) {
         super(props);
@@ -93,14 +93,14 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
 
             this.map.on("error", (e) => {
                 logger.error(
-                    "Failed to load map: check map_style_url in config.json " + "has a valid URL and API key",
+                    "Failed to load map: check map_style_url in config.json has a valid URL and API key",
                     e.error,
                 );
                 this.setState({ error: LocationShareError.MapStyleUrlNotReachable });
             });
 
             this.map.on("load", () => {
-                this.geolocate.trigger();
+                this.geolocate?.trigger();
             });
 
             this.geolocate.on("error", this.onGeolocateError);
@@ -120,7 +120,7 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
         } catch (e) {
             logger.error("Failed to render map", e);
             const errorType =
-                e?.message === LocationShareError.MapStyleUrlNotConfigured
+                (e as Error)?.message === LocationShareError.MapStyleUrlNotConfigured
                     ? LocationShareError.MapStyleUrlNotConfigured
                     : LocationShareError.Default;
             this.setState({ error: errorType });
@@ -141,7 +141,7 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
             offset: [0, -1],
         })
             .setLngLat(new maplibregl.LngLat(0, 0))
-            .addTo(this.map);
+            .addTo(this.map!);
     };
 
     private updateStyleUrl = (clientWellKnown: IClientWellKnown): void => {
diff --git a/src/components/views/location/LocationShareMenu.tsx b/src/components/views/location/LocationShareMenu.tsx
index 5968d50c472..3fc369e3d56 100644
--- a/src/components/views/location/LocationShareMenu.tsx
+++ b/src/components/views/location/LocationShareMenu.tsx
@@ -64,14 +64,15 @@ const LocationShareMenu: React.FC<Props> = ({ menuPosition, onFinished, sender,
     );
 
     const displayName = OwnProfileStore.instance.displayName;
+    const userId = matrixClient.getSafeUserId();
 
     const onLocationSubmit =
         shareType === LocationShareType.Live
-            ? shareLiveLocation(matrixClient, roomId, displayName, openMenu)
-            : shareLocation(matrixClient, roomId, shareType, relation, openMenu);
+            ? shareLiveLocation(matrixClient, roomId, displayName || userId, openMenu)
+            : shareLocation(matrixClient, roomId, shareType ?? LocationShareType.Own, relation, openMenu);
 
     const onLiveShareEnableSubmit = (): void => {
-        SettingsStore.setValue("feature_location_share_live", undefined, SettingLevel.DEVICE, true);
+        SettingsStore.setValue("feature_location_share_live", null, SettingLevel.DEVICE, true);
     };
 
     const shouldAdvertiseLiveLabsFlag = shareType === LocationShareType.Live && !isLiveShareEnabled;
diff --git a/src/components/views/location/LocationViewDialog.tsx b/src/components/views/location/LocationViewDialog.tsx
index a84ec29c3b6..049c4a89a75 100644
--- a/src/components/views/location/LocationViewDialog.tsx
+++ b/src/components/views/location/LocationViewDialog.tsx
@@ -19,19 +19,19 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 
 import BaseDialog from "../dialogs/BaseDialog";
-import { IDialogProps } from "../dialogs/IDialogProps";
 import { locationEventGeoUri, isSelfLocation } from "../../../utils/location";
 import Map from "./Map";
 import SmartMarker from "./SmartMarker";
 import ZoomButtons from "./ZoomButtons";
 
-interface IProps extends IDialogProps {
+interface IProps {
     matrixClient: MatrixClient;
     mxEvent: MatrixEvent;
+    onFinished(): void;
 }
 
 interface IState {
-    error: Error;
+    error?: Error;
 }
 
 /**
@@ -58,7 +58,7 @@ export default class LocationViewDialog extends React.Component<IProps, IState>
         const { mxEvent } = this.props;
 
         // only pass member to marker when should render avatar marker
-        const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined;
+        const markerRoomMember = (isSelfLocation(mxEvent.getContent()) && mxEvent.sender) || undefined;
         const geoUri = locationEventGeoUri(mxEvent);
         return (
             <BaseDialog className="mx_LocationViewDialog" onFinished={this.props.onFinished} fixedWidth={false}>
diff --git a/src/components/views/location/Map.tsx b/src/components/views/location/Map.tsx
index 22a4bda63e8..2fc9f972801 100644
--- a/src/components/views/location/Map.tsx
+++ b/src/components/views/location/Map.tsx
@@ -70,6 +70,9 @@ const useMapWithStyle = ({
         if (map && centerGeoUri) {
             try {
                 const coords = parseGeoUri(centerGeoUri);
+                if (!coords) {
+                    throw new Error("Invalid geo URI");
+                }
                 map.setCenter({ lon: coords.longitude, lat: coords.latitude });
             } catch (_error) {
                 logger.error("Could not set map center");
diff --git a/src/components/views/location/ShareType.tsx b/src/components/views/location/ShareType.tsx
index a794b36e834..81d232e6f50 100644
--- a/src/components/views/location/ShareType.tsx
+++ b/src/components/views/location/ShareType.tsx
@@ -20,7 +20,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { _t } from "../../../languageHandler";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import BaseAvatar from "../avatars/BaseAvatar";
-import AccessibleButton from "../elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import Heading from "../typography/Heading";
 import { Icon as LocationIcon } from "../../../../res/img/element-icons/location.svg";
 import { LocationShareType } from "./shareLocation";
@@ -28,11 +28,11 @@ import StyledLiveBeaconIcon from "../beacon/StyledLiveBeaconIcon";
 
 const UserAvatar: React.FC = () => {
     const matrixClient = useContext(MatrixClientContext);
-    const userId = matrixClient.getUserId();
-    const displayName = OwnProfileStore.instance.displayName;
+    const userId = matrixClient.getSafeUserId();
+    const displayName = OwnProfileStore.instance.displayName ?? undefined;
     // 40 - 2px border
     const avatarSize = 36;
-    const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
+    const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize) ?? undefined;
 
     return (
         <div className={`mx_ShareType_option-icon ${LocationShareType.Own}`}>
@@ -49,9 +49,13 @@ const UserAvatar: React.FC = () => {
     );
 };
 
-type ShareTypeOptionProps = HTMLAttributes<Element> & { label: string; shareType: LocationShareType };
+type ShareTypeOptionProps = HTMLAttributes<Element> & {
+    label: string;
+    shareType: LocationShareType;
+    onClick?: ((e: ButtonEvent) => void | Promise<void>) | null;
+};
 const ShareTypeOption: React.FC<ShareTypeOptionProps> = ({ onClick, label, shareType, ...rest }) => (
-    <AccessibleButton element="button" className="mx_ShareType_option" onClick={onClick} {...rest}>
+    <AccessibleButton element="button" className="mx_ShareType_option" onClick={onClick ?? null} {...rest}>
         {shareType === LocationShareType.Own && <UserAvatar />}
         {shareType === LocationShareType.Pin && (
             <LocationIcon className={`mx_ShareType_option-icon ${LocationShareType.Pin}`} />
diff --git a/src/components/views/location/SmartMarker.tsx b/src/components/views/location/SmartMarker.tsx
index 225cfbdcdc5..f082bce8d80 100644
--- a/src/components/views/location/SmartMarker.tsx
+++ b/src/components/views/location/SmartMarker.tsx
@@ -33,9 +33,11 @@ const useMapMarker = (
                 return;
             }
             const coords = parseGeoUri(geoUri);
-            const newMarker = createMarker(coords, element);
-            newMarker.addTo(map);
-            setMarker(newMarker);
+            if (coords) {
+                const newMarker = createMarker(coords, element);
+                newMarker.addTo(map);
+                setMarker(newMarker);
+            }
         },
         [marker, geoUri, map],
     );
@@ -43,7 +45,9 @@ const useMapMarker = (
     useEffect(() => {
         if (marker) {
             const coords = parseGeoUri(geoUri);
-            marker.setLngLat({ lon: coords.longitude, lat: coords.latitude });
+            if (coords) {
+                marker.setLngLat({ lon: coords.longitude, lat: coords.latitude });
+            }
         }
     }, [marker, geoUri]);
 
diff --git a/src/components/views/location/shareLocation.ts b/src/components/views/location/shareLocation.ts
index 19234cde31a..808ef6e4cae 100644
--- a/src/components/views/location/shareLocation.ts
+++ b/src/components/views/location/shareLocation.ts
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { MatrixClient } from "matrix-js-sdk/src/client";
+import { IContent } from "matrix-js-sdk/src/matrix";
 import { MatrixError } from "matrix-js-sdk/src/http-api";
 import { makeLocationContent, makeBeaconInfoContent } from "matrix-js-sdk/src/content-helpers";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -94,7 +95,7 @@ const getDefaultErrorParams = (
     return { modalParams, errorMessage };
 };
 
-const handleShareError = (error: Error, openMenu: () => void, shareType: LocationShareType): void => {
+const handleShareError = (error: unknown, openMenu: () => void, shareType: LocationShareType): void => {
     const { modalParams, errorMessage } =
         (error as MatrixError).errcode === "M_FORBIDDEN"
             ? getPermissionsErrorParams(shareType)
@@ -135,9 +136,9 @@ export const shareLocation =
     async ({ uri, timestamp }): Promise<void> => {
         if (!uri) return;
         try {
-            const threadId = relation?.rel_type === THREAD_RELATION_TYPE.name ? relation.event_id : null;
+            const threadId = (relation?.rel_type === THREAD_RELATION_TYPE.name && relation?.event_id) || null;
             const assetType = shareType === LocationShareType.Pin ? LocationAssetType.Pin : LocationAssetType.Self;
-            const content = makeLocationContent(undefined, uri, timestamp, undefined, assetType);
+            const content = makeLocationContent(undefined, uri, timestamp, undefined, assetType) as IContent;
             await doMaybeLocalRoomAction(
                 roomId,
                 (actualRoomId: string) => client.sendMessage(actualRoomId, threadId, content),
diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx
index 54d8033dd05..b9cb3456804 100644
--- a/src/components/views/messages/DateSeparator.tsx
+++ b/src/components/views/messages/DateSeparator.tsx
@@ -73,7 +73,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
     }
 
     public componentWillUnmount(): void {
-        SettingsStore.unwatchSetting(this.settingWatcherRef);
+        if (this.settingWatcherRef) SettingsStore.unwatchSetting(this.settingWatcherRef);
     }
 
     private onContextMenuOpenClick = (e: React.MouseEvent): void => {
@@ -89,7 +89,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
 
     private closeMenu = (): void => {
         this.setState({
-            contextMenuPosition: null,
+            contextMenuPosition: undefined,
         });
     };
 
@@ -181,7 +181,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
     };
 
     private renderJumpToDateMenu(): React.ReactElement {
-        let contextMenu: JSX.Element;
+        let contextMenu: JSX.Element | undefined;
         if (this.state.contextMenuPosition) {
             contextMenu = (
                 <IconizedContextMenu
diff --git a/src/components/views/messages/EditHistoryMessage.tsx b/src/components/views/messages/EditHistoryMessage.tsx
index 22469a43f72..ec10869a713 100644
--- a/src/components/views/messages/EditHistoryMessage.tsx
+++ b/src/components/views/messages/EditHistoryMessage.tsx
@@ -80,7 +80,9 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
         Modal.createDialog(
             ConfirmAndWaitRedactDialog,
             {
-                redact: () => cli.redactEvent(event.getRoomId(), event.getId()),
+                redact: async () => {
+                    await cli.redactEvent(event.getRoomId(), event.getId());
+                },
             },
             "mx_Dialog_confirmredact",
         );
diff --git a/src/components/views/messages/LegacyCallEvent.tsx b/src/components/views/messages/LegacyCallEvent.tsx
index 223d46a85a5..2dcf9499276 100644
--- a/src/components/views/messages/LegacyCallEvent.tsx
+++ b/src/components/views/messages/LegacyCallEvent.tsx
@@ -193,6 +193,13 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
                         {this.props.timestamp}
                     </div>
                 );
+            } else if (hangupReason === CallErrorCode.AnsweredElsewhere) {
+                return (
+                    <div className="mx_LegacyCallEvent_content">
+                        {_t("Answered elsewhere")}
+                        {this.props.timestamp}
+                    </div>
+                );
             }
 
             let reason;
diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx
index 5d8a7a7d65f..363b69f7d4a 100644
--- a/src/components/views/messages/MBeaconBody.tsx
+++ b/src/components/views/messages/MBeaconBody.tsx
@@ -162,7 +162,6 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent, getRelati
                 roomId: mxEvent.getRoomId(),
                 matrixClient,
                 initialFocusedBeacon: beacon,
-                isMapDisplayError,
             },
             "mx_BeaconViewDialog_wrapper",
             false, // isPriority
diff --git a/src/components/views/messages/MLocationBody.tsx b/src/components/views/messages/MLocationBody.tsx
index acf7a196a88..3098ea2d5bf 100644
--- a/src/components/views/messages/MLocationBody.tsx
+++ b/src/components/views/messages/MLocationBody.tsx
@@ -43,6 +43,8 @@ interface IState {
 export default class MLocationBody extends React.Component<IBodyProps, IState> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
+
+    private unmounted = false;
     private mapId: string;
     private reconnectedListener: ClientEventHandlerMap[ClientEvent.Sync];
 
@@ -80,11 +82,15 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
     };
 
     private onError = (error: Error): void => {
+        if (this.unmounted) return;
         this.setState({ error });
+        // Unregister first in case we already had it registered
+        this.context.off(ClientEvent.Sync, this.reconnectedListener);
         this.context.on(ClientEvent.Sync, this.reconnectedListener);
     };
 
     public componentWillUnmount(): void {
+        this.unmounted = true;
         this.context.off(ClientEvent.Sync, this.reconnectedListener);
     }
 
diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx
index 138c09a502d..72cc0967fd1 100644
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef, SyntheticEvent, MouseEvent, ReactNode } from "react";
+import React, { createRef, SyntheticEvent, MouseEvent } from "react";
 import ReactDOM from "react-dom";
 import highlight from "highlight.js";
 import { MsgType } from "matrix-js-sdk/src/@types/event";
@@ -86,21 +86,24 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
     }
 
     private applyFormatting(): void {
+        // Function is only called from render / componentDidMount → contentRef is set
+        const content = this.contentRef.current!;
+
         const showLineNumbers = SettingsStore.getValue("showCodeLineNumbers");
-        this.activateSpoilers([this.contentRef.current]);
+        this.activateSpoilers([content]);
 
         // pillifyLinks BEFORE linkifyElement because plain room/user URLs in the composer
         // are still sent as plaintext URLs. If these are ever pillified in the composer,
         // we should be pillify them here by doing the linkifying BEFORE the pillifying.
-        pillifyLinks([this.contentRef.current], this.props.mxEvent, this.pills);
-        HtmlUtils.linkifyElement(this.contentRef.current);
+        pillifyLinks([content], this.props.mxEvent, this.pills);
+        HtmlUtils.linkifyElement(content);
 
         this.calculateUrlPreview();
 
         // tooltipifyLinks AFTER calculateUrlPreview because the DOM inside the tooltip
         // container is empty before the internal component has mounted so calculateUrlPreview
         // won't find any anchors
-        tooltipifyLinks([this.contentRef.current], this.pills, this.tooltips);
+        tooltipifyLinks([content], this.pills, this.tooltips);
 
         if (this.props.mxEvent.getContent().format === "org.matrix.custom.html") {
             // Handle expansion and add buttons
@@ -580,18 +583,16 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
 
         // only strip reply if this is the original replying event, edits thereafter do not have the fallback
         const stripReply = !mxEvent.replacingEvent() && !!getParentEventId(mxEvent);
-        let body: ReactNode;
-        if (!body) {
-            isEmote = content.msgtype === MsgType.Emote;
-            isNotice = content.msgtype === MsgType.Notice;
-            body = HtmlUtils.bodyToHtml(content, this.props.highlights, {
-                disableBigEmoji: isEmote || !SettingsStore.getValue<boolean>("TextualBody.enableBigEmoji"),
-                // Part of Replies fallback support
-                stripReplyFallback: stripReply,
-                ref: this.contentRef,
-                returnString: false,
-            });
-        }
+        isEmote = content.msgtype === MsgType.Emote;
+        isNotice = content.msgtype === MsgType.Notice;
+        let body = HtmlUtils.bodyToHtml(content, this.props.highlights, {
+            disableBigEmoji: isEmote || !SettingsStore.getValue<boolean>("TextualBody.enableBigEmoji"),
+            // Part of Replies fallback support
+            stripReplyFallback: stripReply,
+            ref: this.contentRef,
+            returnString: false,
+        });
+
         if (this.props.replacingEventId) {
             body = (
                 <>
diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx
index 283a6443821..b61f3b7c7ec 100644
--- a/src/components/views/right_panel/EncryptionPanel.tsx
+++ b/src/components/views/right_panel/EncryptionPanel.tsx
@@ -41,7 +41,7 @@ const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
 interface IProps {
     member: RoomMember | User;
     onClose: () => void;
-    verificationRequest: VerificationRequest;
+    verificationRequest?: VerificationRequest;
     verificationRequestPromise?: Promise<VerificationRequest>;
     layout: string;
     isRoomEncrypted: boolean;
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 37d9a6f97a6..476a0e8f8bd 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -37,10 +37,11 @@ import WidgetAvatar from "../avatars/WidgetAvatar";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import WidgetStore, { IApp } from "../../../stores/WidgetStore";
 import { E2EStatus } from "../../../utils/ShieldUtils";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import RoomContext from "../../../contexts/RoomContext";
 import { UIComponent, UIFeature } from "../../../settings/UIFeature";
 import { ChevronFace, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu";
-import WidgetContextMenu from "../context_menus/WidgetContextMenu";
+import { WidgetContextMenu } from "../context_menus/WidgetContextMenu";
 import { useRoomMemberCount } from "../../../hooks/useRoomMembers";
 import { useFeatureEnabled } from "../../../hooks/useSettings";
 import { usePinnedEvents } from "./PinnedMessagesCard";
@@ -55,6 +56,7 @@ import { PollHistoryDialog } from "../dialogs/polls/PollHistoryDialog";
 
 interface IProps {
     room: Room;
+    permalinkCreator: RoomPermalinkCreator;
     onClose(): void;
 }
 
@@ -268,7 +270,7 @@ const onRoomSettingsClick = (ev: ButtonEvent): void => {
     PosthogTrackers.trackInteraction("WebRightPanelRoomInfoSettingsButton", ev);
 };
 
-const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
+const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose }) => {
     const cli = useContext(MatrixClientContext);
 
     const onShareRoomClick = (): void => {
@@ -285,8 +287,9 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
 
     const onRoomPollHistoryClick = (): void => {
         Modal.createDialog(PollHistoryDialog, {
-            roomId: room.roomId,
+            room,
             matrixClient: cli,
+            permalinkCreator,
         });
     };
 
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index 72df34290d8..0a8ce90d513 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -30,6 +30,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
 import { UserTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning";
+import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
 
 import dis from "../../../dispatcher/dispatcher";
 import Modal from "../../../Modal";
@@ -79,10 +80,8 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { DirectoryMember, startDmOnFirstMessage } from "../../../utils/direct-messages";
 import { SdkContextClass } from "../../../contexts/SDKContext";
 
-export interface IDevice {
-    deviceId: string;
+export interface IDevice extends DeviceInfo {
     ambiguous?: boolean;
-    getDisplayName(): string;
 }
 
 export const disambiguateDevices = (devices: IDevice[]): void => {
@@ -122,13 +121,17 @@ export const getE2EStatus = (cli: MatrixClient, userId: string, devices: IDevice
     return anyDeviceUnverified ? E2EStatus.Warning : E2EStatus.Verified;
 };
 
-async function openDMForUser(matrixClient: MatrixClient, user: RoomMember): Promise<void> {
-    const startDMUser = new DirectoryMember({
+/**
+ * Converts the member to a DirectoryMember and starts a DM with them.
+ */
+async function openDmForUser(matrixClient: MatrixClient, user: Member): Promise<void> {
+    const avatarUrl = user instanceof User ? user.avatarUrl : user.getMxcAvatarUrl();
+    const startDmUser = new DirectoryMember({
         user_id: user.userId,
         display_name: user.rawDisplayName,
-        avatar_url: user.getMxcAvatarUrl(),
+        avatar_url: avatarUrl,
     });
-    startDmOnFirstMessage(matrixClient, [startDMUser]);
+    await startDmOnFirstMessage(matrixClient, [startDmUser]);
 }
 
 type SetUpdating = (updating: boolean) => void;
@@ -239,8 +242,8 @@ function DevicesSection({
     const isMe = userId === cli.getUserId();
     const deviceTrusts = devices.map((d) => cli.checkDeviceTrust(userId, d.deviceId));
 
-    let expandSectionDevices = [];
-    const unverifiedDevices = [];
+    let expandSectionDevices: IDevice[] = [];
+    const unverifiedDevices: IDevice[] = [];
 
     let expandCountCaption;
     let expandHideCaption;
@@ -311,7 +314,7 @@ function DevicesSection({
     );
 }
 
-const MessageButton = ({ member }: { member: RoomMember }): JSX.Element => {
+const MessageButton = ({ member }: { member: Member }): JSX.Element => {
     const cli = useContext(MatrixClientContext);
     const [busy, setBusy] = useState(false);
 
@@ -321,7 +324,7 @@ const MessageButton = ({ member }: { member: RoomMember }): JSX.Element => {
             onClick={async () => {
                 if (busy) return;
                 setBusy(true);
-                await openDMForUser(cli, member);
+                await openDmForUser(cli, member);
                 setBusy(false);
             }}
             className="mx_UserInfo_field"
@@ -333,7 +336,7 @@ const MessageButton = ({ member }: { member: RoomMember }): JSX.Element => {
 };
 
 export const UserOptionsSection: React.FC<{
-    member: RoomMember;
+    member: Member;
     isIgnored: boolean;
     canInvite: boolean;
     isSpace?: boolean;
@@ -361,8 +364,9 @@ export const UserOptionsSection: React.FC<{
     }, [cli, member]);
 
     const ignore = useCallback(async () => {
+        const name = (member instanceof User ? member.displayName : member.name) || member.userId;
         const { finished } = Modal.createDialog(QuestionDialog, {
-            title: _t("Ignore %(user)s", { user: member.name }),
+            title: _t("Ignore %(user)s", { user: name }),
             description: (
                 <div>
                     {_t(
@@ -395,7 +399,7 @@ export const UserOptionsSection: React.FC<{
             </AccessibleButton>
         );
 
-        if (member.roomId && !isSpace) {
+        if (member instanceof RoomMember && member.roomId && !isSpace) {
             const onReadReceiptButton = function (): void {
                 const room = cli.getRoom(member.roomId);
                 dis.dispatch<ViewRoomPayload>({
@@ -416,7 +420,7 @@ export const UserOptionsSection: React.FC<{
                 });
             };
 
-            const room = cli.getRoom(member.roomId);
+            const room = member instanceof RoomMember ? cli.getRoom(member.roomId) : undefined;
             if (room?.getEventReadUpTo(member.userId)) {
                 readReceiptButton = (
                     <AccessibleButton kind="link" onClick={onReadReceiptButton} className="mx_UserInfo_field">
@@ -432,7 +436,12 @@ export const UserOptionsSection: React.FC<{
             );
         }
 
-        if (canInvite && (member?.membership ?? "leave") === "leave" && shouldShowComponent(UIComponent.InviteUsers)) {
+        if (
+            member instanceof RoomMember &&
+            canInvite &&
+            (member?.membership ?? "leave") === "leave" &&
+            shouldShowComponent(UIComponent.InviteUsers)
+        ) {
             const roomId = member && member.roomId ? member.roomId : SdkContextClass.instance.roomViewStore.getRoomId();
             const onInviteUserButton = async (ev: ButtonEvent): Promise<void> => {
                 try {
@@ -487,7 +496,7 @@ export const UserOptionsSection: React.FC<{
 };
 
 const warnSelfDemote = async (isSpace: boolean): Promise<boolean> => {
-    const { finished } = Modal.createDialog<[boolean]>(QuestionDialog, {
+    const { finished } = Modal.createDialog(QuestionDialog, {
         title: _t("Demote yourself?"),
         description: (
             <div>
@@ -592,43 +601,52 @@ export const RoomKickButton = ({
     if (member.membership !== "invite" && member.membership !== "join") return null;
 
     const onKick = async (): Promise<void> => {
-        const { finished } = Modal.createDialog(
-            room.isSpaceRoom() ? ConfirmSpaceUserActionDialog : ConfirmUserActionDialog,
-            {
-                member,
-                action: room.isSpaceRoom()
-                    ? member.membership === "invite"
-                        ? _t("Disinvite from space")
-                        : _t("Remove from space")
-                    : member.membership === "invite"
-                    ? _t("Disinvite from room")
-                    : _t("Remove from room"),
-                title:
-                    member.membership === "invite"
-                        ? _t("Disinvite from %(roomName)s", { roomName: room.name })
-                        : _t("Remove from %(roomName)s", { roomName: room.name }),
-                askReason: member.membership === "join",
-                danger: true,
-                // space-specific props
-                space: room,
-                spaceChildFilter: (child: Room) => {
-                    // Return true if the target member is not banned and we have sufficient PL to ban them
-                    const myMember = child.getMember(cli.credentials.userId || "");
-                    const theirMember = child.getMember(member.userId);
-                    return (
-                        myMember &&
-                        theirMember &&
-                        theirMember.membership === member.membership &&
-                        myMember.powerLevel > theirMember.powerLevel &&
-                        child.currentState.hasSufficientPowerLevelFor("kick", myMember.powerLevel)
-                    );
+        const commonProps = {
+            member,
+            action: room.isSpaceRoom()
+                ? member.membership === "invite"
+                    ? _t("Disinvite from space")
+                    : _t("Remove from space")
+                : member.membership === "invite"
+                ? _t("Disinvite from room")
+                : _t("Remove from room"),
+            title:
+                member.membership === "invite"
+                    ? _t("Disinvite from %(roomName)s", { roomName: room.name })
+                    : _t("Remove from %(roomName)s", { roomName: room.name }),
+            askReason: member.membership === "join",
+            danger: true,
+        };
+
+        let finished: Promise<[success?: boolean, reason?: string, rooms?: Room[]]>;
+
+        if (room.isSpaceRoom()) {
+            ({ finished } = Modal.createDialog(
+                ConfirmSpaceUserActionDialog,
+                {
+                    ...commonProps,
+                    space: room,
+                    spaceChildFilter: (child: Room) => {
+                        // Return true if the target member is not banned and we have sufficient PL to ban them
+                        const myMember = child.getMember(cli.credentials.userId || "");
+                        const theirMember = child.getMember(member.userId);
+                        return (
+                            myMember &&
+                            theirMember &&
+                            theirMember.membership === member.membership &&
+                            myMember.powerLevel > theirMember.powerLevel &&
+                            child.currentState.hasSufficientPowerLevelFor("kick", myMember.powerLevel)
+                        );
+                    },
+                    allLabel: _t("Remove them from everything I'm able to"),
+                    specificLabel: _t("Remove them from specific things I'm able to"),
+                    warningMessage: _t("They'll still be able to access whatever you're not an admin of."),
                 },
-                allLabel: _t("Remove them from everything I'm able to"),
-                specificLabel: _t("Remove them from specific things I'm able to"),
-                warningMessage: _t("They'll still be able to access whatever you're not an admin of."),
-            },
-            room.isSpaceRoom() ? "mx_ConfirmSpaceUserActionDialog_wrapper" : undefined,
-        );
+                "mx_ConfirmSpaceUserActionDialog_wrapper",
+            ));
+        } else {
+            ({ finished } = Modal.createDialog(ConfirmUserActionDialog, commonProps));
+        }
 
         const [proceed, reason, rooms = []] = await finished;
         if (!proceed) return;
@@ -705,61 +723,70 @@ export const BanToggleButton = ({
 
     const isBanned = member.membership === "ban";
     const onBanOrUnban = async (): Promise<void> => {
-        const { finished } = Modal.createDialog(
-            room.isSpaceRoom() ? ConfirmSpaceUserActionDialog : ConfirmUserActionDialog,
-            {
-                member,
-                action: room.isSpaceRoom()
-                    ? isBanned
-                        ? _t("Unban from space")
-                        : _t("Ban from space")
-                    : isBanned
-                    ? _t("Unban from room")
-                    : _t("Ban from room"),
-                title: isBanned
-                    ? _t("Unban from %(roomName)s", { roomName: room.name })
-                    : _t("Ban from %(roomName)s", { roomName: room.name }),
-                askReason: !isBanned,
-                danger: !isBanned,
-                // space-specific props
-                space: room,
-                spaceChildFilter: isBanned
-                    ? (child: Room) => {
-                          // Return true if the target member is banned and we have sufficient PL to unban
-                          const myMember = child.getMember(cli.credentials.userId || "");
-                          const theirMember = child.getMember(member.userId);
-                          return (
-                              myMember &&
-                              theirMember &&
-                              theirMember.membership === "ban" &&
-                              myMember.powerLevel > theirMember.powerLevel &&
-                              child.currentState.hasSufficientPowerLevelFor("ban", myMember.powerLevel)
-                          );
-                      }
-                    : (child: Room) => {
-                          // Return true if the target member isn't banned and we have sufficient PL to ban
-                          const myMember = child.getMember(cli.credentials.userId || "");
-                          const theirMember = child.getMember(member.userId);
-                          return (
-                              myMember &&
-                              theirMember &&
-                              theirMember.membership !== "ban" &&
-                              myMember.powerLevel > theirMember.powerLevel &&
-                              child.currentState.hasSufficientPowerLevelFor("ban", myMember.powerLevel)
-                          );
-                      },
-                allLabel: isBanned
-                    ? _t("Unban them from everything I'm able to")
-                    : _t("Ban them from everything I'm able to"),
-                specificLabel: isBanned
-                    ? _t("Unban them from specific things I'm able to")
-                    : _t("Ban them from specific things I'm able to"),
-                warningMessage: isBanned
-                    ? _t("They won't be able to access whatever you're not an admin of.")
-                    : _t("They'll still be able to access whatever you're not an admin of."),
-            },
-            room.isSpaceRoom() ? "mx_ConfirmSpaceUserActionDialog_wrapper" : undefined,
-        );
+        const commonProps = {
+            member,
+            action: room.isSpaceRoom()
+                ? isBanned
+                    ? _t("Unban from space")
+                    : _t("Ban from space")
+                : isBanned
+                ? _t("Unban from room")
+                : _t("Ban from room"),
+            title: isBanned
+                ? _t("Unban from %(roomName)s", { roomName: room.name })
+                : _t("Ban from %(roomName)s", { roomName: room.name }),
+            askReason: !isBanned,
+            danger: !isBanned,
+        };
+
+        let finished: Promise<[success?: boolean, reason?: string, rooms?: Room[]]>;
+
+        if (room.isSpaceRoom()) {
+            ({ finished } = Modal.createDialog(
+                ConfirmSpaceUserActionDialog,
+                {
+                    ...commonProps,
+                    space: room,
+                    spaceChildFilter: isBanned
+                        ? (child: Room) => {
+                              // Return true if the target member is banned and we have sufficient PL to unban
+                              const myMember = child.getMember(cli.credentials.userId || "");
+                              const theirMember = child.getMember(member.userId);
+                              return (
+                                  myMember &&
+                                  theirMember &&
+                                  theirMember.membership === "ban" &&
+                                  myMember.powerLevel > theirMember.powerLevel &&
+                                  child.currentState.hasSufficientPowerLevelFor("ban", myMember.powerLevel)
+                              );
+                          }
+                        : (child: Room) => {
+                              // Return true if the target member isn't banned and we have sufficient PL to ban
+                              const myMember = child.getMember(cli.credentials.userId || "");
+                              const theirMember = child.getMember(member.userId);
+                              return (
+                                  myMember &&
+                                  theirMember &&
+                                  theirMember.membership !== "ban" &&
+                                  myMember.powerLevel > theirMember.powerLevel &&
+                                  child.currentState.hasSufficientPowerLevelFor("ban", myMember.powerLevel)
+                              );
+                          },
+                    allLabel: isBanned
+                        ? _t("Unban them from everything I'm able to")
+                        : _t("Ban them from everything I'm able to"),
+                    specificLabel: isBanned
+                        ? _t("Unban them from specific things I'm able to")
+                        : _t("Ban them from specific things I'm able to"),
+                    warningMessage: isBanned
+                        ? _t("They won't be able to access whatever you're not an admin of.")
+                        : _t("They'll still be able to access whatever you're not an admin of."),
+                },
+                "mx_ConfirmSpaceUserActionDialog_wrapper",
+            ));
+        } else {
+            ({ finished } = Modal.createDialog(ConfirmUserActionDialog, commonProps));
+        }
 
         const [proceed, reason, rooms = []] = await finished;
         if (!proceed) return;
@@ -1173,8 +1200,8 @@ export const useDevices = (userId: string): IDevice[] | undefined | null => {
                     return;
                 }
 
-                disambiguateDevices(devices as IDevice[]);
-                setDevices(devices as IDevice[]);
+                disambiguateDevices(devices);
+                setDevices(devices);
             } catch (err) {
                 setDevices(null);
             }
@@ -1193,7 +1220,7 @@ export const useDevices = (userId: string): IDevice[] | undefined | null => {
         const updateDevices = async (): Promise<void> => {
             const newDevices = cli.getStoredDevicesForUser(userId);
             if (cancel) return;
-            setDevices(newDevices as IDevice[]);
+            setDevices(newDevices);
         };
         const onDevicesUpdated = (users: string[]): void => {
             if (!users.includes(userId)) return;
@@ -1603,7 +1630,7 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
         RightPanelStore.instance.popCard();
     };
 
-    let content;
+    let content: JSX.Element | undefined;
     switch (phase) {
         case RightPanelPhases.RoomMemberInfo:
         case RightPanelPhases.SpaceMemberInfo:
@@ -1611,7 +1638,7 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
                 <BasicUserInfo
                     room={room as Room}
                     member={member as User}
-                    devices={devices as IDevice[]}
+                    devices={devices}
                     isRoomEncrypted={Boolean(isRoomEncrypted)}
                 />
             );
diff --git a/src/components/views/right_panel/WidgetCard.tsx b/src/components/views/right_panel/WidgetCard.tsx
index 44c5393638a..0e26ebcb6c8 100644
--- a/src/components/views/right_panel/WidgetCard.tsx
+++ b/src/components/views/right_panel/WidgetCard.tsx
@@ -24,7 +24,7 @@ import AppTile from "../elements/AppTile";
 import { _t } from "../../../languageHandler";
 import { useWidgets } from "./RoomSummaryCard";
 import { ChevronFace, ContextMenuButton, useContextMenu } from "../../structures/ContextMenu";
-import WidgetContextMenu from "../context_menus/WidgetContextMenu";
+import { WidgetContextMenu } from "../context_menus/WidgetContextMenu";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import UIStore from "../../../stores/UIStore";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
diff --git a/src/components/views/rooms/ExtraTile.tsx b/src/components/views/rooms/ExtraTile.tsx
index f7a09261206..83f7b179ea3 100644
--- a/src/components/views/rooms/ExtraTile.tsx
+++ b/src/components/views/rooms/ExtraTile.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2020 - 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,8 +21,9 @@ import { RovingAccessibleButton, RovingAccessibleTooltipButton } from "../../../
 import NotificationBadge from "./NotificationBadge";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
 import { ButtonEvent } from "../elements/AccessibleButton";
+import useHover from "../../../hooks/useHover";
 
-interface IProps {
+interface ExtraTileProps {
     isMinimized: boolean;
     isSelected: boolean;
     displayName: string;
@@ -31,83 +32,68 @@ interface IProps {
     onClick: (ev: ButtonEvent) => void;
 }
 
-interface IState {
-    hover: boolean;
-}
-
-export default class ExtraTile extends React.Component<IProps, IState> {
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            hover: false,
-        };
+export default function ExtraTile({
+    isSelected,
+    isMinimized,
+    notificationState,
+    displayName,
+    onClick,
+    avatar,
+}: ExtraTileProps): JSX.Element {
+    const [, { onMouseOver, onMouseLeave }] = useHover(() => false);
+
+    // XXX: We copy classes because it's easier
+    const classes = classNames({
+        mx_ExtraTile: true,
+        mx_RoomTile: true,
+        mx_RoomTile_selected: isSelected,
+        mx_RoomTile_minimized: isMinimized,
+    });
+
+    let badge: JSX.Element | null = null;
+    if (notificationState) {
+        badge = <NotificationBadge notification={notificationState} forceCount={false} />;
     }
 
-    private onTileMouseEnter = (): void => {
-        this.setState({ hover: true });
-    };
-
-    private onTileMouseLeave = (): void => {
-        this.setState({ hover: false });
-    };
-
-    public render(): React.ReactElement {
-        // XXX: We copy classes because it's easier
-        const classes = classNames({
-            mx_ExtraTile: true,
-            mx_RoomTile: true,
-            mx_RoomTile_selected: this.props.isSelected,
-            mx_RoomTile_minimized: this.props.isMinimized,
-        });
+    let name = displayName;
+    if (typeof name !== "string") name = "";
+    name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
 
-        let badge;
-        if (this.props.notificationState) {
-            badge = <NotificationBadge notification={this.props.notificationState} forceCount={false} />;
-        }
+    const nameClasses = classNames({
+        mx_RoomTile_title: true,
+        mx_RoomTile_titleHasUnreadEvents: notificationState?.isUnread,
+    });
 
-        let name = this.props.displayName;
-        if (typeof name !== "string") name = "";
-        name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
+    let nameContainer: JSX.Element | null = (
+        <div className="mx_RoomTile_titleContainer">
+            <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
+                {name}
+            </div>
+        </div>
+    );
+    if (isMinimized) nameContainer = null;
 
-        const nameClasses = classNames({
-            mx_RoomTile_title: true,
-            mx_RoomTile_titleHasUnreadEvents: this.props.notificationState?.isUnread,
-        });
+    let Button = RovingAccessibleButton;
+    if (isMinimized) {
+        Button = RovingAccessibleTooltipButton;
+    }
 
-        let nameContainer = (
-            <div className="mx_RoomTile_titleContainer">
-                <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
-                    {name}
+    return (
+        <Button
+            className={classes}
+            onMouseEnter={onMouseOver}
+            onMouseLeave={onMouseLeave}
+            onClick={onClick}
+            role="treeitem"
+            title={isMinimized ? name : undefined}
+        >
+            <div className="mx_RoomTile_avatarContainer">{avatar}</div>
+            <div className="mx_RoomTile_details">
+                <div className="mx_RoomTile_primaryDetails">
+                    {nameContainer}
+                    <div className="mx_RoomTile_badgeContainer">{badge}</div>
                 </div>
             </div>
-        );
-        if (this.props.isMinimized) nameContainer = null;
-
-        let Button = RovingAccessibleButton;
-        if (this.props.isMinimized) {
-            Button = RovingAccessibleTooltipButton;
-        }
-
-        return (
-            <React.Fragment>
-                <Button
-                    className={classes}
-                    onMouseEnter={this.onTileMouseEnter}
-                    onMouseLeave={this.onTileMouseLeave}
-                    onClick={this.props.onClick}
-                    role="treeitem"
-                    title={this.props.isMinimized ? name : undefined}
-                >
-                    <div className="mx_RoomTile_avatarContainer">{this.props.avatar}</div>
-                    <div className="mx_RoomTile_details">
-                        <div className="mx_RoomTile_primaryDetails">
-                            {nameContainer}
-                            <div className="mx_RoomTile_badgeContainer">{badge}</div>
-                        </div>
-                    </div>
-                </Button>
-            </React.Fragment>
-        );
-    }
+        </Button>
+    );
 }
diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
index 5656e37c8ff..42811142d7c 100644
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@@ -68,8 +68,7 @@ interface IState {
 }
 
 export default class MemberList extends React.Component<IProps, IState> {
-    // XXX: exported for tests
-    public showPresence = true;
+    private readonly showPresence: boolean;
     private mounted = false;
 
     public static contextType = SDKContext;
@@ -260,32 +259,6 @@ export default class MemberList extends React.Component<IProps, IState> {
         });
     };
 
-    /**
-     * SHOULD ONLY BE USED BY TESTS
-     */
-    public memberString(member: RoomMember): string {
-        if (!member) {
-            return "(null)";
-        } else {
-            const u = member.user;
-            return (
-                "(" +
-                member.name +
-                ", " +
-                member.powerLevel +
-                ", " +
-                (u ? u.lastActiveAgo : "<null>") +
-                ", " +
-                (u ? u.getLastActiveTs() : "<null>") +
-                ", " +
-                (u ? u.currentlyActive : "<null>") +
-                ", " +
-                (u ? u.presence : "<null>") +
-                ")"
-            );
-        }
-    }
-
     public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>, snapshot?: any): void {
         if (prevProps.searchQuery !== this.props.searchQuery) {
             this.updateListNow(false);
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index bfcde22e364..9f9a55e7c7a 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -261,7 +261,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
 
     private waitForOwnMember(): void {
         // If we have the member already, do that
-        const me = this.props.room.getMember(MatrixClientPeg.get().getUserId());
+        const me = this.props.room.getMember(MatrixClientPeg.get().getUserId()!);
         if (me) {
             this.setState({ me });
             return;
@@ -270,14 +270,14 @@ export class MessageComposer extends React.Component<IProps, IState> {
         // The members should already be loading, and loadMembersIfNeeded
         // will return the promise for the existing operation
         this.props.room.loadMembersIfNeeded().then(() => {
-            const me = this.props.room.getMember(MatrixClientPeg.get().getUserId());
+            const me = this.props.room.getMember(MatrixClientPeg.get().getUserId()!);
             this.setState({ me });
         });
     }
 
     public componentWillUnmount(): void {
         VoiceRecordingStore.instance.off(UPDATE_EVENT, this.onVoiceStoreUpdate);
-        dis.unregister(this.dispatcherRef);
+        if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
         UIStore.instance.stopTrackingElementDimensions(`MessageComposer${this.instanceId}`);
         UIStore.instance.removeListener(`MessageComposer${this.instanceId}`, this.onResize);
 
@@ -288,12 +288,12 @@ export class MessageComposer extends React.Component<IProps, IState> {
     private onTombstoneClick = (ev: ButtonEvent): void => {
         ev.preventDefault();
 
-        const replacementRoomId = this.context.tombstone.getContent()["replacement_room"];
+        const replacementRoomId = this.context.tombstone?.getContent()["replacement_room"];
         const replacementRoom = MatrixClientPeg.get().getRoom(replacementRoomId);
-        let createEventId = null;
+        let createEventId: string | undefined;
         if (replacementRoom) {
             const createEvent = replacementRoom.currentState.getStateEvents(EventType.RoomCreate, "");
-            if (createEvent && createEvent.getId()) createEventId = createEvent.getId();
+            if (createEvent?.getId()) createEventId = createEvent.getId();
         }
 
         const viaServers = [this.context.tombstone.getSender().split(":").slice(1).join(":")];
@@ -428,7 +428,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
 
     private onRecordingEndingSoon = ({ secondsLeft }: { secondsLeft: number }): void => {
         this.setState({ recordingTimeLeftSeconds: secondsLeft });
-        window.setTimeout(() => this.setState({ recordingTimeLeftSeconds: null }), 3000);
+        window.setTimeout(() => this.setState({ recordingTimeLeftSeconds: undefined }), 3000);
     };
 
     private setStickerPickerOpen = (isStickerPickerOpen: boolean): void => {
diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx
index fba24be3f22..070999b4fd5 100644
--- a/src/components/views/rooms/NewRoomIntro.tsx
+++ b/src/components/views/rooms/NewRoomIntro.tsx
@@ -23,7 +23,7 @@ import { User } from "matrix-js-sdk/src/models/user";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import RoomContext from "../../../contexts/RoomContext";
 import DMRoomMap from "../../../utils/DMRoomMap";
-import { _t } from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import MiniAvatarUploader, { AVATAR_SIZE } from "../elements/MiniAvatarUploader";
 import RoomAvatar from "../avatars/RoomAvatar";
@@ -39,6 +39,7 @@ import { shouldShowComponent } from "../../../customisations/helpers/UIComponent
 import { UIComponent } from "../../../settings/UIFeature";
 import { privateShouldBeEncrypted } from "../../../utils/rooms";
 import { LocalRoom } from "../../../models/LocalRoom";
+import { shouldEncryptRoomWithSingle3rdPartyInvite } from "../../../utils/room/shouldEncryptRoomWithSingle3rdPartyInvite";
 
 function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room): boolean {
     const isEncrypted: boolean = matrixClient.isRoomEncrypted(room.roomId);
@@ -46,21 +47,40 @@ function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room):
     return isPublic || !privateShouldBeEncrypted() || isEncrypted;
 }
 
+const determineIntroMessage = (room: Room, encryptedSingle3rdPartyInvite: boolean): string => {
+    if (room instanceof LocalRoom) {
+        return _td("Send your first message to invite <displayName/> to chat");
+    }
+
+    if (encryptedSingle3rdPartyInvite) {
+        return _td("Once everyone has joined, you’ll be able to chat");
+    }
+
+    return _td("This is the beginning of your direct message history with <displayName/>.");
+};
+
 const NewRoomIntro: React.FC = () => {
     const cli = useContext(MatrixClientContext);
     const { room, roomId } = useContext(RoomContext);
 
+    if (!room || !roomId) {
+        throw new Error("Unable to create a NewRoomIntro without room and roomId");
+    }
+
     const isLocalRoom = room instanceof LocalRoom;
     const dmPartner = isLocalRoom ? room.targets[0]?.userId : DMRoomMap.shared().getUserIdForRoomId(roomId);
 
     let body: JSX.Element;
     if (dmPartner) {
-        let introMessage = _t("This is the beginning of your direct message history with <displayName/>.");
+        const { shouldEncrypt: encryptedSingle3rdPartyInvite } = shouldEncryptRoomWithSingle3rdPartyInvite(room);
+        const introMessage = determineIntroMessage(room, encryptedSingle3rdPartyInvite);
         let caption: string | undefined;
 
-        if (isLocalRoom) {
-            introMessage = _t("Send your first message to invite <displayName/> to chat");
-        } else if (room.getJoinedMemberCount() + room.getInvitedMemberCount() === 2) {
+        if (
+            !(room instanceof LocalRoom) &&
+            !encryptedSingle3rdPartyInvite &&
+            room.getJoinedMemberCount() + room.getInvitedMemberCount() === 2
+        ) {
             caption = _t("Only the two of you are in this conversation, unless either of you invites anyone to join.");
         }
 
@@ -98,7 +118,7 @@ const NewRoomIntro: React.FC = () => {
     } else {
         const inRoom = room && room.getMyMembership() === "join";
         const topic = room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic;
-        const canAddTopic = inRoom && room.currentState.maySendStateEvent(EventType.RoomTopic, cli.getUserId());
+        const canAddTopic = inRoom && room.currentState.maySendStateEvent(EventType.RoomTopic, cli.getSafeUserId());
 
         const onTopicClick = (): void => {
             defaultDispatcher.dispatch(
@@ -110,7 +130,7 @@ const NewRoomIntro: React.FC = () => {
             );
             // focus the topic field to help the user find it as it'll gain an outline
             setImmediate(() => {
-                window.document.getElementById("profileTopic").focus();
+                window.document.getElementById("profileTopic")?.focus();
             });
         };
 
diff --git a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
index af7b5fc85d4..319787109da 100644
--- a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
@@ -38,7 +38,7 @@ export function StatelessNotificationBadge({ symbol, count, color, ...props }: P
 
     // Don't show a badge if we don't need to
     if (color === NotificationColor.None || (hideBold && color == NotificationColor.Bold)) {
-        return null;
+        return <></>;
     }
 
     const hasUnreadCount = color >= NotificationColor.Grey && (!!count || !!symbol);
@@ -54,8 +54,8 @@ export function StatelessNotificationBadge({ symbol, count, color, ...props }: P
         mx_NotificationBadge_visible: isEmptyBadge ? true : hasUnreadCount,
         mx_NotificationBadge_highlighted: color >= NotificationColor.Red,
         mx_NotificationBadge_dot: isEmptyBadge,
-        mx_NotificationBadge_2char: symbol?.length > 0 && symbol?.length < 3,
-        mx_NotificationBadge_3char: symbol?.length > 2,
+        mx_NotificationBadge_2char: symbol && symbol.length > 0 && symbol.length < 3,
+        mx_NotificationBadge_3char: symbol && symbol.length > 2,
     });
 
     if (props.onClick) {
diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx
index 8a5f28bbd02..0b36c3b2e92 100644
--- a/src/components/views/rooms/PinnedEventTile.tsx
+++ b/src/components/views/rooms/PinnedEventTile.tsx
@@ -64,7 +64,7 @@ export default class PinnedEventTile extends React.Component<IProps> {
         eventId: string,
         relationType: RelationType | string,
         eventType: EventType | string,
-    ): Relations => {
+    ): Relations | undefined => {
         if (eventId === this.props.event.getId()) {
             return this.relations.get(relationType)?.get(eventType);
         }
@@ -77,7 +77,7 @@ export default class PinnedEventTile extends React.Component<IProps> {
         const roomId = this.props.event.getRoomId();
         const room = this.context.getRoom(roomId);
 
-        let unpinButton = null;
+        let unpinButton: JSX.Element | undefined;
         if (this.props.onUnpinClicked) {
             unpinButton = (
                 <AccessibleTooltipButton
diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx
index 0586002043f..b3037159838 100644
--- a/src/components/views/rooms/ReadReceiptGroup.tsx
+++ b/src/components/views/rooms/ReadReceiptGroup.tsx
@@ -71,7 +71,7 @@ export function determineAvatarPosition(index: number, max: number): IAvatarPosi
     }
 }
 
-export function readReceiptTooltip(members: string[], hasMore: boolean): string | null {
+export function readReceiptTooltip(members: string[], hasMore: boolean): string | undefined {
     if (hasMore) {
         return _t("%(members)s and more", {
             members: members.join(", "),
@@ -83,8 +83,6 @@ export function readReceiptTooltip(members: string[], hasMore: boolean): string
         });
     } else if (members.length) {
         return members[0];
-    } else {
-        return null;
     }
 }
 
@@ -149,7 +147,7 @@ export function ReadReceiptGroup({
             const { hidden, position } = determineAvatarPosition(index, maxAvatars);
 
             const userId = receipt.userId;
-            let readReceiptInfo: IReadReceiptInfo;
+            let readReceiptInfo: IReadReceiptInfo | undefined;
 
             if (readReceiptMap) {
                 readReceiptInfo = readReceiptMap[userId];
@@ -176,7 +174,7 @@ export function ReadReceiptGroup({
         })
         .reverse();
 
-    let remText: JSX.Element;
+    let remText: JSX.Element | undefined;
     const remainder = readReceipts.length - maxAvatars;
     if (remainder > 0) {
         remText = (
diff --git a/src/components/views/rooms/ReadReceiptMarker.tsx b/src/components/views/rooms/ReadReceiptMarker.tsx
index 1ba0e9a19fc..1a47719f58c 100644
--- a/src/components/views/rooms/ReadReceiptMarker.tsx
+++ b/src/components/views/rooms/ReadReceiptMarker.tsx
@@ -133,7 +133,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
 
             target.top = 0;
             target.right = 0;
-            target.parent = null;
+            target.parent = undefined;
             return target;
         }
         // this is the mx_ReadReceiptsGroup
@@ -146,7 +146,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
 
             target.top = 0;
             target.right = 0;
-            target.parent = null;
+            target.parent = undefined;
             return target;
         }
 
@@ -179,7 +179,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
             : // treat new RRs as though they were off the top of the screen
               -READ_AVATAR_SIZE;
 
-        const startStyles = [];
+        const startStyles: IReadReceiptMarkerStyle[] = [];
         if (oldInfo?.right) {
             startStyles.push({
                 top: oldPosition - newPosition,
@@ -210,7 +210,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
         return (
             <NodeAnimator startStyles={this.state.startStyles}>
                 <MemberAvatar
-                    member={this.props.member}
+                    member={this.props.member ?? null}
                     fallbackUserId={this.props.fallbackUserId}
                     aria-hidden="true"
                     aria-live="off"
diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index 5ce9cf81868..9a7ff610508 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -170,7 +170,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
                             ...this.props,
 
                             // overrides
-                            ref: null,
+                            ref: undefined,
                             youtubeEmbedPlayer: false,
                             showUrlPreview: false,
                             overrideBodyTypes: msgtypeOverrides,
diff --git a/src/components/views/rooms/RoomContextDetails.tsx b/src/components/views/rooms/RoomContextDetails.tsx
index 84f95a6fd65..156ddf0895f 100644
--- a/src/components/views/rooms/RoomContextDetails.tsx
+++ b/src/components/views/rooms/RoomContextDetails.tsx
@@ -37,5 +37,5 @@ export function RoomContextDetails<T extends keyof ReactHTML>({ room, component,
         );
     }
 
-    return null;
+    return <></>;
 }
diff --git a/src/components/views/rooms/RoomInfoLine.tsx b/src/components/views/rooms/RoomInfoLine.tsx
index 114a613dcad..4fb723e0683 100644
--- a/src/components/views/rooms/RoomInfoLine.tsx
+++ b/src/components/views/rooms/RoomInfoLine.tsx
@@ -62,7 +62,7 @@ const RoomInfoLine: FC<IProps> = ({ room }) => {
         roomType = room.isSpaceRoom() ? _t("Private space") : _t("Private room");
     }
 
-    let members: JSX.Element;
+    let members: JSX.Element | undefined;
     if (membership === "invite" && summary) {
         // Don't trust local state and instead use the summary API
         members = (
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index 0c0a6a802cb..34dc7fb3193 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -122,7 +122,7 @@ const auxButtonContextMenuPosition = (handle: RefObject<HTMLDivElement>): MenuPr
 
 const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = defaultDispatcher }) => {
     const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
-    const activeSpace: Room = useEventEmitterState(SpaceStore.instance, UPDATE_SELECTED_SPACE, () => {
+    const activeSpace = useEventEmitterState(SpaceStore.instance, UPDATE_SELECTED_SPACE, () => {
         return SpaceStore.instance.activeSpaceRoom;
     });
 
@@ -132,7 +132,7 @@ const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = default
     // SC: Just show the button, no menu; add DM does not add DM automatically to space (yet?)
     // eslint-disable-next-line no-constant-condition
     if (activeSpace && (showCreateRooms || showInviteUsers) && false) {
-        let contextMenu: JSX.Element;
+        let contextMenu: JSX.Element | undefined;
         if (menuDisplayed) {
             const canInvite = shouldShowSpaceInvite(activeSpace);
 
@@ -217,7 +217,7 @@ const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = default
 
 const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
     const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
-    const activeSpace = useEventEmitterState<Room>(SpaceStore.instance, UPDATE_SELECTED_SPACE, () => {
+    const activeSpace = useEventEmitterState<Room | null>(SpaceStore.instance, UPDATE_SELECTED_SPACE, () => {
         return SpaceStore.instance.activeSpaceRoom;
     });
 
@@ -225,12 +225,12 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
     const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms");
     const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
 
-    let contextMenuContent: JSX.Element | null = null;
+    let contextMenuContent: JSX.Element | undefined;
     let scAddRoomButton: JSX.Element;
     if ((true || menuDisplayed) && activeSpace) {
         const canAddRooms = activeSpace.currentState.maySendStateEvent(
             EventType.SpaceChild,
-            MatrixClientPeg.get().getUserId(),
+            MatrixClientPeg.get().getUserId()!,
         );
 
         contextMenuContent = (
@@ -545,7 +545,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         SpaceStore.instance.off(UPDATE_SUGGESTED_ROOMS, this.updateSuggestedRooms);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.updateLists);
         SettingsStore.unwatchSetting(this.favouriteMessageWatcher);
-        defaultDispatcher.unregister(this.dispatcherRef);
+        if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
         SettingsStore.unwatchSetting(this.unifiedRoomListWatcherRef);
         SdkContextClass.instance.roomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
     }
@@ -558,7 +558,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
 
     private onRoomViewStoreUpdate = (): void => {
         this.setState({
-            currentRoomId: SdkContextClass.instance.roomViewStore.getRoomId(),
+            currentRoomId: SdkContextClass.instance.roomViewStore.getRoomId() ?? undefined,
         });
     };
 
@@ -712,7 +712,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             Object.values(RoomListStore.instance.orderedLists).every((list) => !list?.length);
 
         return TAG_ORDER.map((orderedTagId) => {
-            let extraTiles = null;
+            let extraTiles: ReactComponentElement<typeof ExtraTile>[] | undefined;
             if (orderedTagId === DefaultTagID.Suggested) {
                 extraTiles = this.renderSuggestedRooms();
             } else if (this.state.feature_favourite_messages && orderedTagId === DefaultTagID.SavedItems) {
diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx
index 16dfb98b54e..59207186ec6 100644
--- a/src/components/views/rooms/RoomListHeader.tsx
+++ b/src/components/views/rooms/RoomListHeader.tsx
@@ -138,12 +138,10 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
         }
     }, [closeMainMenu, canShowMainMenu, mainMenuDisplayed]);
 
-    const spaceName = useTypedEventEmitterState(activeSpace, RoomEvent.Name, () => activeSpace?.name);
+    const spaceName = useTypedEventEmitterState(activeSpace ?? undefined, RoomEvent.Name, () => activeSpace?.name);
 
     useEffect(() => {
-        if (onVisibilityChange) {
-            onVisibilityChange();
-        }
+        onVisibilityChange?.();
     }, [onVisibilityChange]);
 
     const canExploreRooms = shouldShowComponent(UIComponent.ExploreRooms);
@@ -152,7 +150,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
 
     const hasPermissionToAddSpaceChild = activeSpace?.currentState?.maySendStateEvent(
         EventType.SpaceChild,
-        cli.getUserId(),
+        cli.getUserId()!,
     );
     const canAddSubRooms = hasPermissionToAddSpaceChild && canCreateRooms;
     const canAddSubSpaces = hasPermissionToAddSpaceChild && canCreateSpaces;
@@ -162,7 +160,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
     // communities and spaces, but is at risk of no options on the Home tab.
     const canShowPlusMenu = canCreateRooms || canExploreRooms || canCreateSpaces || activeSpace;
 
-    let contextMenu: JSX.Element;
+    let contextMenu: JSX.Element | undefined;
     if (mainMenuDisplayed && mainMenuHandle.current) {
         let ContextMenuComponent;
         if (activeSpace) {
@@ -180,7 +178,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
             />
         );
     } else if (plusMenuDisplayed && activeSpace) {
-        let inviteOption: JSX.Element;
+        let inviteOption: JSX.Element | undefined;
         if (shouldShowSpaceInvite(activeSpace)) {
             inviteOption = (
                 <IconizedContextMenuOption
@@ -196,8 +194,8 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
             );
         }
 
-        let newRoomOptions: JSX.Element;
-        if (activeSpace?.currentState.maySendStateEvent(EventType.RoomAvatar, cli.getUserId())) {
+        let newRoomOptions: JSX.Element | undefined;
+        if (activeSpace?.currentState.maySendStateEvent(EventType.RoomAvatar, cli.getUserId()!)) {
             newRoomOptions = (
                 <>
                     <IconizedContextMenuOption
@@ -267,7 +265,9 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                             closePlusMenu();
                         }}
                         disabled={!canAddSubRooms}
-                        tooltip={!canAddSubRooms && _t("You do not have permissions to add rooms to this space")}
+                        tooltip={
+                            !canAddSubRooms ? _t("You do not have permissions to add rooms to this space") : undefined
+                        }
                     />
                     {canCreateSpaces && (
                         <IconizedContextMenuOption
@@ -280,7 +280,11 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                                 closePlusMenu();
                             }}
                             disabled={!canAddSubSpaces}
-                            tooltip={!canAddSubSpaces && _t("You do not have permissions to add spaces to this space")}
+                            tooltip={
+                                !canAddSubSpaces
+                                    ? _t("You do not have permissions to add spaces to this space")
+                                    : undefined
+                            }
                         >
                             <BetaPill />
                         </IconizedContextMenuOption>
@@ -289,8 +293,8 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
             </IconizedContextMenu>
         );
     } else if (plusMenuDisplayed) {
-        let newRoomOpts: JSX.Element;
-        let joinRoomOpt: JSX.Element;
+        let newRoomOpts: JSX.Element | undefined;
+        let joinRoomOpt: JSX.Element | undefined;
 
         if (canCreateRooms) {
             newRoomOpts = (
@@ -369,7 +373,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
     }
 
     let title: string;
-    if (activeSpace) {
+    if (activeSpace && spaceName) {
         title = spaceName;
     } else {
         title = getMetaSpaceName(spaceKey as MetaSpace, allRoomsInHome);
diff --git a/src/components/views/rooms/RoomPreviewBar.tsx b/src/components/views/rooms/RoomPreviewBar.tsx
index 1e80af26f5a..13c3a217fac 100644
--- a/src/components/views/rooms/RoomPreviewBar.tsx
+++ b/src/components/views/rooms/RoomPreviewBar.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixError } from "matrix-js-sdk/src/http-api";
 import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
@@ -76,6 +76,12 @@ interface IProps {
 
     canPreview?: boolean;
     previewLoading?: boolean;
+
+    // The id of the room to be previewed, if it is known.
+    // (It may be unknown if we are waiting for an alias to be resolved.)
+    roomId?: string;
+
+    // A `Room` object for the room to be previewed, if we have one.
     room?: Room;
 
     loading?: boolean;
@@ -215,25 +221,27 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
         return { memberName, reason };
     }
 
-    private joinRule(): JoinRule {
-        return this.props.room?.currentState
-            .getStateEvents(EventType.RoomJoinRules, "")
-            ?.getContent<IJoinRuleEventContent>().join_rule;
+    private joinRule(): JoinRule | null {
+        return (
+            this.props.room?.currentState
+                .getStateEvents(EventType.RoomJoinRules, "")
+                ?.getContent<IJoinRuleEventContent>().join_rule ?? null
+        );
     }
 
-    private getMyMember(): RoomMember {
-        return this.props.room?.getMember(MatrixClientPeg.get().getUserId());
+    private getMyMember(): RoomMember | null {
+        return this.props.room?.getMember(MatrixClientPeg.get().getUserId()!) ?? null;
     }
 
-    private getInviteMember(): RoomMember {
+    private getInviteMember(): RoomMember | null {
         const { room } = this.props;
         if (!room) {
-            return;
+            return null;
         }
-        const myUserId = MatrixClientPeg.get().getUserId();
+        const myUserId = MatrixClientPeg.get().getUserId()!;
         const inviteEvent = room.currentState.getMember(myUserId);
         if (!inviteEvent) {
-            return;
+            return null;
         }
         const inviterUserId = inviteEvent.events.member.getSender();
         return room.currentState.getMember(inviterUserId);
@@ -276,15 +284,15 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
         const isSpace = this.props.room?.isSpaceRoom() ?? this.props.oobData?.roomType === RoomType.Space;
 
         let showSpinner = false;
-        let title;
-        let subTitle;
-        let reasonElement;
-        let primaryActionHandler;
-        let primaryActionLabel;
-        let secondaryActionHandler;
-        let secondaryActionLabel;
-        let footer;
-        const extraComponents = [];
+        let title: string | undefined;
+        let subTitle: string | ReactNode[] | undefined;
+        let reasonElement: JSX.Element | undefined;
+        let primaryActionHandler: (() => void) | undefined;
+        let primaryActionLabel: string | undefined;
+        let secondaryActionHandler: (() => void) | undefined;
+        let secondaryActionLabel: string | undefined;
+        let footer: JSX.Element | undefined;
+        const extraComponents: JSX.Element[] = [];
 
         const messageCase = this.getMessageCase();
         switch (messageCase) {
@@ -310,18 +318,14 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
             }
             case MessageCase.NotLoggedIn: {
                 const opts: RoomPreviewOpts = { canJoin: false };
-                if (this.props.room?.roomId) {
-                    ModuleRunner.instance.invoke(
-                        RoomViewLifecycle.PreviewRoomNotLoggedIn,
-                        opts,
-                        this.props.room.roomId,
-                    );
+                if (this.props.roomId) {
+                    ModuleRunner.instance.invoke(RoomViewLifecycle.PreviewRoomNotLoggedIn, opts, this.props.roomId);
                 }
                 if (opts.canJoin) {
                     title = _t("Join the room to participate");
                     primaryActionLabel = _t("Join");
                     primaryActionHandler = () => {
-                        ModuleRunner.instance.invoke(RoomViewLifecycle.JoinFromRoomPreview, this.props.room.roomId);
+                        ModuleRunner.instance.invoke(RoomViewLifecycle.JoinFromRoomPreview, this.props.roomId);
                     };
                 } else {
                     title = _t("Join the conversation with an account");
@@ -349,7 +353,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
                 } else {
                     title = _t("You were removed by %(memberName)s", { memberName });
                 }
-                subTitle = reason ? _t("Reason: %(reason)s", { reason }) : null;
+                subTitle = reason ? _t("Reason: %(reason)s", { reason }) : undefined;
 
                 if (isSpace) {
                     primaryActionLabel = _t("Forget this space");
@@ -374,7 +378,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
                 } else {
                     title = _t("You were banned by %(memberName)s", { memberName });
                 }
-                subTitle = reason ? _t("Reason: %(reason)s", { reason }) : null;
+                subTitle = reason ? _t("Reason: %(reason)s", { reason }) : undefined;
                 if (isSpace) {
                     primaryActionLabel = _t("Forget this space");
                 } else {
@@ -431,7 +435,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
                 }
 
                 subTitle = _t(
-                    "Link this email with your account in Settings to receive invites " + "directly in %(brand)s.",
+                    "Link this email with your account in Settings to receive invites directly in %(brand)s.",
                     { brand },
                 );
                 primaryActionLabel = _t("Join the discussion");
@@ -497,7 +501,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
                     primaryActionLabel = _t("Accept");
                 }
 
-                const myUserId = MatrixClientPeg.get().getUserId();
+                const myUserId = MatrixClientPeg.get().getUserId()!;
                 const member = this.props.room?.currentState.getMember(myUserId);
                 const memberEventContent = member?.events.member?.getContent();
 
diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx
index 2baf98abfe8..86633bc3e5e 100644
--- a/src/components/views/rooms/RoomSublist.tsx
+++ b/src/components/views/rooms/RoomSublist.tsx
@@ -22,7 +22,7 @@ import { Dispatcher } from "flux";
 import { Enable, Resizable } from "re-resizable";
 import { Direction } from "re-resizable/lib/resizer";
 import * as React from "react";
-import { ComponentType, createRef, ReactComponentElement } from "react";
+import { ComponentType, createRef, ReactComponentElement, ReactNode } from "react";
 
 import { polyfillTouchEvent } from "../../../@types/polyfill";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
@@ -82,7 +82,7 @@ interface IProps {
     alwaysVisible?: boolean;
     forceExpanded?: boolean;
     resizeNotifier: ResizeNotifier;
-    extraTiles?: ReactComponentElement<typeof ExtraTile>[];
+    extraTiles?: ReactComponentElement<typeof ExtraTile>[] | null;
     onListCollapse?: (isExpanded: boolean) => void;
 }
 
@@ -95,7 +95,7 @@ interface ResizeDelta {
 type PartialDOMRect = Pick<DOMRect, "left" | "top" | "height">;
 
 interface IState {
-    contextMenuPosition: PartialDOMRect;
+    contextMenuPosition?: PartialDOMRect;
     isResizing: boolean;
     isExpanded: boolean; // used for the for expand of the sublist when the room list is being filtered
     height: number;
@@ -125,7 +125,6 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         this.heightAtStart = 0;
         this.notificationState = RoomNotificationStateStore.instance.getListState(this.props.tagId);
         this.state = {
-            contextMenuPosition: null,
             isResizing: false,
             isExpanded: !this.layout.isCollapsed,
             height: 0, // to be fixed in a moment, we need `rooms` to calculate this.
@@ -169,17 +168,14 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     }
 
     private get extraTiles(): ReactComponentElement<typeof ExtraTile>[] | null {
-        if (this.props.extraTiles) {
-            return this.props.extraTiles;
-        }
-        return null;
+        return this.props.extraTiles ?? null;
     }
 
     private get numTiles(): number {
         return RoomSublist.calcNumTiles(this.state.rooms, this.extraTiles);
     }
 
-    private static calcNumTiles(rooms: Room[], extraTiles: any[]): number {
+    private static calcNumTiles(rooms: Room[], extraTiles?: any[] | null): number {
         return (rooms || []).length + (extraTiles || []).length;
     }
 
@@ -403,7 +399,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     };
 
     private onCloseMenu = (): void => {
-        this.setState({ contextMenuPosition: null });
+        this.setState({ contextMenuPosition: undefined });
     };
 
     private onUnreadFirstChanged = (): void => {
@@ -519,7 +515,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             // On ArrowLeft go to the sublist header
             case KeyBindingAction.ArrowLeft:
                 ev.stopPropagation();
-                this.headerButton.current.focus();
+                this.headerButton.current?.focus();
                 break;
             // Consume ArrowRight so it doesn't cause focus to get sent to composer
             case KeyBindingAction.ArrowRight:
@@ -570,10 +566,10 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         return tiles;
     }
 
-    private renderMenu(): React.ReactElement {
+    private renderMenu(): ReactNode {
         if (this.props.tagId === DefaultTagID.Suggested || this.props.tagId === DefaultTagID.SavedItems) return null; // not sortable
 
-        let contextMenu = null;
+        let contextMenu: JSX.Element | undefined;
         if (this.state.contextMenuPosition) {
             let isAlphabetical = RoomListStore.instance.getTagSorting(this.props.tagId) === SortAlgorithm.Alphabetic;
             let isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
@@ -584,7 +580,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             }
 
             // Invites don't get some nonsense options, so only add them if we have to.
-            let otherSections = null;
+            let otherSections: JSX.Element | undefined;
             if (this.props.tagId !== DefaultTagID.Invite) {
                 otherSections = (
                     <React.Fragment>
@@ -678,7 +674,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                         />
                     );
 
-                    let addRoomButton = null;
+                    let addRoomButton: JSX.Element | undefined;
                     if (this.props.AuxButtonComponent) {
                         const AuxButtonComponent = this.props.AuxButtonComponent;
                         addRoomButton = <AuxButtonComponent tabIndex={tabIndex} />;
@@ -760,7 +756,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             mx_RoomSublist_hidden: hidden,
         });
 
-        let content = null;
+        let content: JSX.Element | undefined;
         if (this.state.roomsLoading) {
             content = <div className="mx_RoomSublist_skeletonUI" />;
         } else if (visibleTiles.length > 0 && this.props.forceExpanded) {
@@ -786,7 +782,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             // If we're hiding rooms, show a 'show more' button to the user. This button
             // floats above the resize handle, if we have one present. If the user has all
             // tiles visible, it becomes 'show less'.
-            let showNButton = null;
+            let showNButton: JSX.Element | undefined;
             const hasMoreSlidingSync =
                 this.slidingSyncMode && RoomListStore.instance.getCount(this.props.tagId) > this.state.rooms.length;
 
@@ -799,7 +795,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                     numMissing = RoomListStore.instance.getCount(this.props.tagId) - amountFullyShown;
                 }
                 const label = _t("Show %(count)s more", { count: numMissing });
-                let showMoreText = <span className="mx_RoomSublist_showNButtonText">{label}</span>;
+                let showMoreText: ReactNode = <span className="mx_RoomSublist_showNButtonText">{label}</span>;
                 if (this.props.isMinimized) showMoreText = null;
                 showNButton = (
                     <RovingAccessibleButton
@@ -817,7 +813,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             } else if (this.numTiles > this.layout.defaultVisibleTiles) {
                 // we have all tiles visible - add a button to show less
                 const label = _t("Show less");
-                let showLessText = <span className="mx_RoomSublist_showNButtonText">{label}</span>;
+                let showLessText: ReactNode = <span className="mx_RoomSublist_showNButtonText">{label}</span>;
                 if (this.props.isMinimized) showLessText = null;
                 showNButton = (
                     <RovingAccessibleButton
diff --git a/src/components/views/rooms/SearchBar.tsx b/src/components/views/rooms/SearchBar.tsx
index dbdb807426b..7f5fa794711 100644
--- a/src/components/views/rooms/SearchBar.tsx
+++ b/src/components/views/rooms/SearchBar.tsx
@@ -72,13 +72,13 @@ export default class SearchBar extends React.Component<IProps, IState> {
     };
 
     private searchIfQuery(): void {
-        if (this.searchTerm.current.value) {
+        if (this.searchTerm.current?.value) {
             this.onSearch();
         }
     }
 
     private onSearch = (): void => {
-        if (!this.searchTerm.current.value.trim()) return;
+        if (!this.searchTerm.current?.value.trim()) return;
         this.props.onSearch(this.searchTerm.current.value, this.state.scope);
     };
 
diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx
index b85b4c25682..b7d4a01106e 100644
--- a/src/components/views/rooms/SendMessageComposer.tsx
+++ b/src/components/views/rooms/SendMessageComposer.tsx
@@ -368,7 +368,12 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
                     this.props.relation?.rel_type === THREAD_RELATION_TYPE.name ? this.props.relation?.event_id : null;
 
                 let commandSuccessful: boolean;
-                [content, commandSuccessful] = await runSlashCommand(cmd, args, this.props.room.roomId, threadId);
+                [content, commandSuccessful] = await runSlashCommand(
+                    cmd,
+                    args,
+                    this.props.room.roomId,
+                    threadId ?? null,
+                );
                 if (!commandSuccessful) {
                     return; // errored
                 }
@@ -425,7 +430,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
 
             const prom = doMaybeLocalRoomAction(
                 roomId,
-                (actualRoomId: string) => this.props.mxClient.sendMessage(actualRoomId, threadId, content),
+                (actualRoomId: string) => this.props.mxClient.sendMessage(actualRoomId, threadId ?? null, content!),
                 this.props.mxClient,
             );
             if (replyToEvent) {
@@ -439,7 +444,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
             }
             dis.dispatch({ action: "message_sent" });
             CHAT_EFFECTS.forEach((effect) => {
-                if (containsEmoji(content, effect.emojis)) {
+                if (containsEmoji(content!, effect.emojis)) {
                     // For initial threads launch, chat effects are disabled
                     // see #19731
                     const isNotThread = this.props.relation?.rel_type !== THREAD_RELATION_TYPE.name;
diff --git a/src/components/views/rooms/Stickerpicker.tsx b/src/components/views/rooms/Stickerpicker.tsx
index a4c10039250..29e426d3ed8 100644
--- a/src/components/views/rooms/Stickerpicker.tsx
+++ b/src/components/views/rooms/Stickerpicker.tsx
@@ -52,9 +52,9 @@ interface IProps {
 }
 
 interface IState {
-    imError: string;
-    stickerpickerWidget: IWidgetEvent;
-    widgetId: string;
+    imError: string | null;
+    stickerpickerWidget: IWidgetEvent | null;
+    widgetId: string | null;
 }
 
 export default class Stickerpicker extends React.PureComponent<IProps, IState> {
@@ -71,7 +71,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
     private popoverWidth = 400;
     private popoverHeight = 450;
     // This is loaded by _acquireScalarClient on an as-needed basis.
-    private scalarClient: ScalarAuthClient = null;
+    private scalarClient: ScalarAuthClient | null = null;
 
     public constructor(props: IProps) {
         super(props);
@@ -82,13 +82,13 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
         };
     }
 
-    private acquireScalarClient(): Promise<void | ScalarAuthClient> {
+    private async acquireScalarClient(): Promise<void | undefined | null | ScalarAuthClient> {
         if (this.scalarClient) return Promise.resolve(this.scalarClient);
         // TODO: Pick the right manager for the widget
         if (IntegrationManagers.sharedInstance().hasManager()) {
-            this.scalarClient = IntegrationManagers.sharedInstance().getPrimaryManager().getScalarClient();
+            this.scalarClient = IntegrationManagers.sharedInstance().getPrimaryManager()?.getScalarClient() ?? null;
             return this.scalarClient
-                .connect()
+                ?.connect()
                 .then(() => {
                     this.forceUpdate();
                     return this.scalarClient;
@@ -170,21 +170,14 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
     private updateWidget = (): void => {
         const stickerpickerWidget = WidgetUtils.getStickerpickerWidgets()[0];
         if (!stickerpickerWidget) {
-            Stickerpicker.currentWidget = null;
+            Stickerpicker.currentWidget = undefined;
             this.setState({ stickerpickerWidget: null, widgetId: null });
             return;
         }
 
         const currentWidget = Stickerpicker.currentWidget;
-        let currentUrl = null;
-        if (currentWidget && currentWidget.content && currentWidget.content.url) {
-            currentUrl = currentWidget.content.url;
-        }
-
-        let newUrl = null;
-        if (stickerpickerWidget && stickerpickerWidget.content && stickerpickerWidget.content.url) {
-            newUrl = stickerpickerWidget.content.url;
-        }
+        const currentUrl = currentWidget?.content?.url ?? null;
+        const newUrl = stickerpickerWidget?.content?.url ?? null;
 
         if (newUrl !== currentUrl) {
             // Destroy the existing frame so a new one can be created
@@ -238,7 +231,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
     private sendVisibilityToWidget(visible: boolean): void {
         if (!this.state.stickerpickerWidget) return;
         const messaging = WidgetMessagingStore.instance.getMessagingForUid(
-            WidgetUtils.calcWidgetUid(this.state.stickerpickerWidget.id, null),
+            WidgetUtils.calcWidgetUid(this.state.stickerpickerWidget.id),
         );
         if (messaging && visible !== this.prevSentVisibility) {
             messaging.updateVisibility(visible).catch((err) => {
@@ -300,8 +293,8 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
                                 room={this.props.room}
                                 threadId={this.props.threadId}
                                 fullWidth={true}
-                                userId={MatrixClientPeg.get().credentials.userId}
-                                creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}
+                                userId={MatrixClientPeg.get().credentials.userId!}
+                                creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId!}
                                 waitForIframeLoad={true}
                                 showMenubar={true}
                                 onEditClick={this.launchManageIntegrations}
@@ -347,8 +340,8 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
     private launchManageIntegrations = (): void => {
         // noinspection JSIgnoredPromiseFromCall
         IntegrationManagers.sharedInstance()
-            .getPrimaryManager()
-            .open(this.props.room, `type_${WidgetType.STICKERPICKER.preferred}`, this.state.widgetId);
+            ?.getPrimaryManager()
+            ?.open(this.props.room, `type_${WidgetType.STICKERPICKER.preferred}`, this.state.widgetId ?? undefined);
     };
 
     public render(): React.ReactNode {
diff --git a/src/components/views/rooms/ThirdPartyMemberInfo.tsx b/src/components/views/rooms/ThirdPartyMemberInfo.tsx
index 04e429e6183..917e8d6ce30 100644
--- a/src/components/views/rooms/ThirdPartyMemberInfo.tsx
+++ b/src/components/views/rooms/ThirdPartyMemberInfo.tsx
@@ -45,19 +45,19 @@ interface IState {
 }
 
 export default class ThirdPartyMemberInfo extends React.Component<IProps, IState> {
-    private room: Room;
+    private readonly room: Room | null;
 
     public constructor(props: IProps) {
         super(props);
 
         this.room = MatrixClientPeg.get().getRoom(this.props.event.getRoomId());
-        const me = this.room.getMember(MatrixClientPeg.get().getUserId());
-        const powerLevels = this.room.currentState.getStateEvents("m.room.power_levels", "");
+        const me = this.room?.getMember(MatrixClientPeg.get().getUserId()!);
+        const powerLevels = this.room?.currentState.getStateEvents("m.room.power_levels", "");
 
         let kickLevel = powerLevels ? powerLevels.getContent().kick : 50;
         if (typeof kickLevel !== "number") kickLevel = 50;
 
-        const sender = this.room.getMember(this.props.event.getSender());
+        const sender = this.room?.getMember(this.props.event.getSender());
 
         this.state = {
             stateKey: this.props.event.getStateKey(),
@@ -121,7 +121,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
     };
 
     public render(): React.ReactNode {
-        let adminTools = null;
+        let adminTools: JSX.Element | undefined;
         if (this.state.canKick && this.state.invited) {
             adminTools = (
                 <div className="mx_MemberInfo_container">
@@ -135,8 +135,8 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
             );
         }
 
-        let scopeHeader;
-        if (this.room.isSpaceRoom()) {
+        let scopeHeader: JSX.Element | undefined;
+        if (this.room?.isSpaceRoom()) {
             scopeHeader = (
                 <div className="mx_RightPanel_scopeHeader">
                     <RoomAvatar room={this.room} height={32} width={32} />
diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx
index 7a55050898d..717767d9a19 100644
--- a/src/components/views/rooms/ThreadSummary.tsx
+++ b/src/components/views/rooms/ThreadSummary.tsx
@@ -77,18 +77,18 @@ interface IPreviewProps {
 export const ThreadMessagePreview: React.FC<IPreviewProps> = ({ thread, showDisplayname = false }) => {
     const cli = useContext(MatrixClientContext);
 
-    const lastReply = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.replyToEvent);
+    const lastReply = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.replyToEvent) ?? undefined;
     // track the content as a means to regenerate the thread message preview upon edits & decryption
-    const [content, setContent] = useState<IContent>(lastReply?.getContent());
+    const [content, setContent] = useState<IContent | undefined>(lastReply?.getContent());
     useTypedEventEmitter(lastReply, MatrixEventEvent.Replaced, () => {
-        setContent(lastReply.getContent());
+        setContent(lastReply!.getContent());
     });
     const awaitDecryption = lastReply?.shouldAttemptDecryption() || lastReply?.isBeingDecrypted();
-    useTypedEventEmitter(awaitDecryption ? lastReply : null, MatrixEventEvent.Decrypted, () => {
-        setContent(lastReply.getContent());
+    useTypedEventEmitter(awaitDecryption ? lastReply : undefined, MatrixEventEvent.Decrypted, () => {
+        setContent(lastReply!.getContent());
     });
 
-    const preview = useAsyncMemo(async (): Promise<string> => {
+    const preview = useAsyncMemo(async (): Promise<string | undefined> => {
         if (!lastReply) return;
         await cli.decryptEventIfNeeded(lastReply);
         return MessagePreviewStore.instance.generatePreviewForEvent(lastReply);
diff --git a/src/components/views/rooms/TopUnreadMessagesBar.tsx b/src/components/views/rooms/TopUnreadMessagesBar.tsx
index 3e4eb875381..51e67e611be 100644
--- a/src/components/views/rooms/TopUnreadMessagesBar.tsx
+++ b/src/components/views/rooms/TopUnreadMessagesBar.tsx
@@ -20,8 +20,8 @@ import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 
 interface IProps {
-    onScrollUpClick?: (e: React.MouseEvent) => void;
-    onCloseClick?: (e: React.MouseEvent) => void;
+    onScrollUpClick: (e: React.MouseEvent) => void;
+    onCloseClick: (e: React.MouseEvent) => void;
 }
 
 export default class TopUnreadMessagesBar extends React.PureComponent<IProps> {
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 938ef71d73e..2f7be4c9b29 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -48,7 +48,7 @@ import { createVoiceMessageContent } from "../../../utils/createVoiceMessageCont
 
 interface IProps {
     room: Room;
-    permalinkCreator?: RoomPermalinkCreator;
+    permalinkCreator: RoomPermalinkCreator;
     relation?: IEventRelation;
     replyToEvent?: MatrixEvent;
 }
@@ -70,9 +70,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
     public constructor(props: IProps) {
         super(props);
 
-        this.state = {
-            recorder: null, // no recording started by default
-        };
+        this.state = {};
 
         this.voiceRecordingId = VoiceRecordingStore.getVoiceRecordingId(this.props.room, this.props.relation);
     }
@@ -163,7 +161,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         await VoiceRecordingStore.instance.disposeRecording(this.voiceRecordingId);
 
         // Reset back to no recording, which means no phase (ie: restart component entirely)
-        this.setState({ recorder: null, recordingPhase: null, didUploadFail: false });
+        this.setState({ recorder: undefined, recordingPhase: undefined, didUploadFail: false });
     }
 
     private onCancel = async (): Promise<void> => {
@@ -220,7 +218,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
 
         try {
             // stop any noises which might be happening
-            PlaybackManager.instance.pauseAllExcept(null);
+            PlaybackManager.instance.pauseAllExcept();
             const recorder = VoiceRecordingStore.instance.startRecording(this.voiceRecordingId);
             await recorder.start();
 
diff --git a/src/components/views/rooms/WhoIsTypingTile.tsx b/src/components/views/rooms/WhoIsTypingTile.tsx
index 48416e6b25f..3c23e76482c 100644
--- a/src/components/views/rooms/WhoIsTypingTile.tsx
+++ b/src/components/views/rooms/WhoIsTypingTile.tsx
@@ -89,7 +89,7 @@ export default class WhoIsTypingTile extends React.Component<IProps, IState> {
         return WhoIsTypingTile.isVisible(this.state);
     };
 
-    private onRoomTimeline = (event: MatrixEvent, room: Room | null): void => {
+    private onRoomTimeline = (event: MatrixEvent, room?: Room): void => {
         if (room?.roomId === this.props.room.roomId) {
             const userId = event.getSender();
             // remove user from usersTyping
diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index 0c459323d76..a852aebe5ac 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -30,12 +30,11 @@ export function openLinkModal(
     composerContext: ComposerContextState,
     isEditing: boolean,
 ): void {
-    const modal = Modal.createDialog(
+    Modal.createDialog(
         LinkModal,
         {
             composerContext,
             composer,
-            onClose: () => modal.close(),
             isTextEnabled: isSelectionEmpty(),
             isEditing,
         },
@@ -52,18 +51,18 @@ function isEmpty(text: string): boolean {
 interface LinkModalProps {
     composer: FormattingFunctions;
     isTextEnabled: boolean;
-    onClose: () => void;
+    onFinished: () => void;
     composerContext: ComposerContextState;
     isEditing: boolean;
 }
 
-export function LinkModal({
+export const LinkModal: React.FC<LinkModalProps> = ({
     composer,
     isTextEnabled,
-    onClose,
+    onFinished,
     composerContext,
     isEditing,
-}: LinkModalProps): JSX.Element {
+}) => {
     const [hasLinkChanged, setHasLinkChanged] = useState(false);
     const [fields, setFields] = useState({ text: "", link: isEditing ? composer.getLink() : "" });
     const hasText = !isEditing && isTextEnabled;
@@ -74,7 +73,7 @@ export function LinkModal({
             className="mx_LinkModal"
             title={isEditing ? _t("Edit link") : _t("Create a link")}
             hasCancel={true}
-            onFinished={onClose}
+            onFinished={onFinished}
         >
             <form
                 className="mx_LinkModal_content"
@@ -82,7 +81,7 @@ export function LinkModal({
                     evt.preventDefault();
                     evt.stopPropagation();
 
-                    onClose();
+                    onFinished();
 
                     // When submitting is done when pressing enter when the link field has the focus,
                     // The link field is getting back the focus (due to react-focus-lock)
@@ -126,7 +125,7 @@ export function LinkModal({
                             className="danger"
                             onClick={() => {
                                 composer.removeLinks();
-                                onClose();
+                                onFinished();
                             }}
                         >
                             {_t("Remove")}
@@ -136,10 +135,10 @@ export function LinkModal({
                         primaryButton={_t("Save")}
                         primaryDisabled={isSaveDisabled}
                         primaryIsSubmit={true}
-                        onCancel={onClose}
+                        onCancel={onFinished}
                     />
                 </div>
             </form>
         </BaseDialog>
     );
-}
+};
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts b/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
index 648f63eaef6..83a18fb55b8 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
@@ -45,7 +45,7 @@ export function setCursorPositionAtTheEnd(element: HTMLElement): void {
     const range = document.createRange();
     range.selectNodeContents(element);
     range.collapse(false);
-    const selection = document.getSelection();
+    const selection = document.getSelection()!;
     selection.removeAllRanges();
     selection.addRange(range);
 
diff --git a/src/components/views/settings/BridgeTile.tsx b/src/components/views/settings/BridgeTile.tsx
index 34c36cda3fa..1ec7a07e5a1 100644
--- a/src/components/views/settings/BridgeTile.tsx
+++ b/src/components/views/settings/BridgeTile.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -79,13 +79,13 @@ export default class BridgeTile extends React.PureComponent<IProps> {
                 `Bridge info event ${this.props.ev.getId()} does not provide a 'bridgebot' key which` +
                     "is deprecated behaviour. Using sender for now.",
             );
-            content.bridgebot = this.props.ev.getSender();
+            content.bridgebot = this.props.ev.getSender()!;
         }
         const { channel, network, protocol } = content;
         const protocolName = protocol.displayname || protocol.id;
         const channelName = channel.displayname || channel.id;
 
-        let creator = null;
+        let creator: JSX.Element | undefined;
         if (content.creator) {
             creator = (
                 <li>
@@ -129,7 +129,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
         let networkIcon;
 
         if (protocol.avatar_url) {
-            const avatarUrl = mediaFromMxc(protocol.avatar_url).getSquareThumbnailHttp(64);
+            const avatarUrl = mediaFromMxc(protocol.avatar_url).getSquareThumbnailHttp(64) ?? undefined;
 
             networkIcon = (
                 <BaseAvatar
@@ -145,7 +145,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
         } else {
             networkIcon = <div className="mx_RoomSettingsDialog_noProtocolIcon" />;
         }
-        let networkItem = null;
+        let networkItem: ReactNode | undefined;
         if (network) {
             const networkName = network.displayname || network.id;
             let networkLink = <span>{networkName}</span>;
diff --git a/src/components/views/settings/ChangeDisplayName.tsx b/src/components/views/settings/ChangeDisplayName.tsx
index 0c68c54940f..696384ef673 100644
--- a/src/components/views/settings/ChangeDisplayName.tsx
+++ b/src/components/views/settings/ChangeDisplayName.tsx
@@ -24,8 +24,8 @@ export default class ChangeDisplayName extends React.Component {
     private getDisplayName = async (): Promise<string> => {
         const cli = MatrixClientPeg.get();
         try {
-            const res = await cli.getProfileInfo(cli.getUserId());
-            return res.displayname;
+            const res = await cli.getProfileInfo(cli.getUserId()!);
+            return res.displayname ?? "";
         } catch (e) {
             throw new Error("Failed to fetch display name");
         }
diff --git a/src/components/views/settings/ChangePassword.tsx b/src/components/views/settings/ChangePassword.tsx
index 333d73e4eae..9978985ad87 100644
--- a/src/components/views/settings/ChangePassword.tsx
+++ b/src/components/views/settings/ChangePassword.tsx
@@ -15,9 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentType } from "react";
+import React from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 
+import type ExportE2eKeysDialog from "../../../async-components/views/dialogs/security/ExportE2eKeysDialog";
 import Field from "../elements/Field";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -42,12 +43,12 @@ enum Phase {
 }
 
 interface IProps {
-    onFinished?: (outcome: {
+    onFinished: (outcome: {
         didSetEmail?: boolean;
         /** Was one or more other devices logged out whilst changing the password */
         didLogoutOutOtherDevices: boolean;
     }) => void;
-    onError?: (error: { error: string }) => void;
+    onError: (error: { error: string }) => void;
     rowClassName?: string;
     buttonClassName?: string;
     buttonKind?: string;
@@ -68,9 +69,9 @@ interface IState {
 }
 
 export default class ChangePassword extends React.Component<IProps, IState> {
-    private [FIELD_OLD_PASSWORD]: Field;
-    private [FIELD_NEW_PASSWORD]: Field;
-    private [FIELD_NEW_PASSWORD_CONFIRM]: Field;
+    private [FIELD_OLD_PASSWORD]: Field | null;
+    private [FIELD_NEW_PASSWORD]: Field | null;
+    private [FIELD_NEW_PASSWORD_CONFIRM]: Field | null;
 
     public static defaultProps: Partial<IProps> = {
         onFinished() {},
@@ -100,7 +101,7 @@ export default class ChangePassword extends React.Component<IProps, IState> {
 
         if (userHasOtherDevices && !serverSupportsControlOfDevicesLogout && this.props.confirm) {
             // warn about logging out all devices
-            const { finished } = Modal.createDialog<[boolean]>(QuestionDialog, {
+            const { finished } = Modal.createDialog(QuestionDialog, {
                 title: _t("Warning!"),
                 description: (
                     <div>
@@ -154,7 +155,7 @@ export default class ChangePassword extends React.Component<IProps, IState> {
             },
             // TODO: Remove `user` once servers support proper UIA
             // See https://github.com/matrix-org/synapse/issues/5665
-            user: cli.credentials.userId,
+            user: cli.credentials.userId ?? undefined,
             password: oldPassword,
         };
 
@@ -195,7 +196,7 @@ export default class ChangePassword extends React.Component<IProps, IState> {
             });
     }
 
-    private checkPassword(oldPass: string, newPass: string, confirmPass: string): { error: string } {
+    private checkPassword(oldPass: string, newPass: string, confirmPass: string): { error: string } | undefined {
         if (newPass !== confirmPass) {
             return {
                 error: _t("New passwords don't match"),
@@ -218,7 +219,7 @@ export default class ChangePassword extends React.Component<IProps, IState> {
     private onExportE2eKeysClicked = (): void => {
         Modal.createDialogAsync(
             import("../../../async-components/views/dialogs/security/ExportE2eKeysDialog") as unknown as Promise<
-                ComponentType<{}>
+                typeof ExportE2eKeysDialog
             >,
             {
                 matrixClient: MatrixClientPeg.get(),
@@ -226,7 +227,7 @@ export default class ChangePassword extends React.Component<IProps, IState> {
         );
     };
 
-    private markFieldValid(fieldID: FieldType, valid: boolean): void {
+    private markFieldValid(fieldID: FieldType, valid?: boolean): void {
         const { fieldValid } = this.state;
         fieldValid[fieldID] = valid;
         this.setState({
@@ -367,7 +368,7 @@ export default class ChangePassword extends React.Component<IProps, IState> {
         return Object.values(this.state.fieldValid).every(Boolean);
     }
 
-    private findFirstInvalidField(fieldIDs: FieldType[]): Field {
+    private findFirstInvalidField(fieldIDs: FieldType[]): Field | null {
         for (const fieldID of fieldIDs) {
             if (!this.state.fieldValid[fieldID] && this[fieldID]) {
                 return this[fieldID];
diff --git a/src/components/views/settings/CrossSigningPanel.tsx b/src/components/views/settings/CrossSigningPanel.tsx
index be563cfc465..0ba8f580f58 100644
--- a/src/components/views/settings/CrossSigningPanel.tsx
+++ b/src/components/views/settings/CrossSigningPanel.tsx
@@ -75,7 +75,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
 
     private onBootstrapClick = (): void => {
         if (this.state.crossSigningPrivateKeysInStorage) {
-            Modal.createDialog(SetupEncryptionDialog, {}, null, /* priority = */ false, /* static = */ true);
+            Modal.createDialog(SetupEncryptionDialog, {}, undefined, /* priority = */ false, /* static = */ true);
         } else {
             // Trigger the flow to set up secure backup, which is what this will do when in
             // the appropriate state.
@@ -90,8 +90,8 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
     private async getUpdatedStatus(): Promise<void> {
         const cli = MatrixClientPeg.get();
         const pkCache = cli.getCrossSigningCacheCallbacks();
-        const crossSigning = cli.crypto.crossSigningInfo;
-        const secretStorage = cli.crypto.secretStorage;
+        const crossSigning = cli.crypto!.crossSigningInfo;
+        const secretStorage = cli.crypto!.secretStorage;
         const crossSigningPublicKeysOnDevice = Boolean(crossSigning.getId());
         const crossSigningPrivateKeysInStorage = Boolean(await crossSigning.isStoredInSecretStorage(secretStorage));
         const masterPrivateKeyCached = !!(pkCache && (await pkCache.getCrossSigningKeyCache("master")));
@@ -209,7 +209,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
             selfSigningPrivateKeyCached &&
             userSigningPrivateKeyCached;
 
-        const actions = [];
+        const actions: JSX.Element[] = [];
 
         // TODO: determine how better to expose this to users in addition to prompts at login/toast
         if (!keysExistEverywhere && homeserverSupportsCrossSigning) {
diff --git a/src/components/views/settings/CryptographyPanel.tsx b/src/components/views/settings/CryptographyPanel.tsx
index 72d1d9e4855..34b52e405ee 100644
--- a/src/components/views/settings/CryptographyPanel.tsx
+++ b/src/components/views/settings/CryptographyPanel.tsx
@@ -14,8 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentType } from "react";
+import React from "react";
 
+import type ExportE2eKeysDialog from "../../../async-components/views/dialogs/security/ExportE2eKeysDialog";
+import type ImportE2eKeysDialog from "../../../async-components/views/dialogs/security/ImportE2eKeysDialog";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
@@ -44,7 +46,7 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
             identityKey = FormattingUtils.formatCryptoKey(identityKey);
         }
 
-        let importExportButtons = null;
+        let importExportButtons: JSX.Element | undefined;
         if (client.isCryptoEnabled()) {
             importExportButtons = (
                 <div className="mx_CryptographyPanel_importExportButtons">
@@ -58,7 +60,7 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
             );
         }
 
-        let noSendUnverifiedSetting;
+        let noSendUnverifiedSetting: JSX.Element | undefined;
         if (SettingsStore.isEnabled("blacklistUnverifiedDevices")) {
             noSendUnverifiedSetting = (
                 <SettingsFlag
@@ -99,7 +101,7 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
     private onExportE2eKeysClicked = (): void => {
         Modal.createDialogAsync(
             import("../../../async-components/views/dialogs/security/ExportE2eKeysDialog") as unknown as Promise<
-                ComponentType<{}>
+                typeof ExportE2eKeysDialog
             >,
             { matrixClient: MatrixClientPeg.get() },
         );
@@ -108,7 +110,7 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
     private onImportE2eKeysClicked = (): void => {
         Modal.createDialogAsync(
             import("../../../async-components/views/dialogs/security/ImportE2eKeysDialog") as unknown as Promise<
-                ComponentType<{}>
+                typeof ImportE2eKeysDialog
             >,
             { matrixClient: MatrixClientPeg.get() },
         );
diff --git a/src/components/views/settings/DevicesPanel.tsx b/src/components/views/settings/DevicesPanel.tsx
index 4a43acc2201..cf7506caa55 100644
--- a/src/components/views/settings/DevicesPanel.tsx
+++ b/src/components/views/settings/DevicesPanel.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2016 - 2021 The Matrix.org Foundation C.I.C.
+Copyright 2016 - 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,7 +18,6 @@ import React from "react";
 import classNames from "classnames";
 import { IMyDevice } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
-import { CrossSigningInfo } from "matrix-js-sdk/src/crypto/CrossSigning";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 
 import { _t } from "../../../languageHandler";
@@ -27,6 +26,7 @@ import Spinner from "../elements/Spinner";
 import AccessibleButton from "../elements/AccessibleButton";
 import { deleteDevicesWithInteractiveAuth } from "./devices/deleteDevices";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { isDeviceVerified } from "../../../utils/device/isDeviceVerified";
 
 interface IProps {
     className?: string;
@@ -34,7 +34,6 @@ interface IProps {
 
 interface IState {
     devices: IMyDevice[];
-    crossSigningInfo?: CrossSigningInfo;
     deviceLoadError?: string;
     selectedDevices: string[];
     deleting?: boolean;
@@ -65,7 +64,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
     }
 
     private onDevicesUpdated = (users: string[]): void => {
-        if (!users.includes(this.context.getUserId())) return;
+        if (!users.includes(this.context.getUserId()!)) return;
         this.loadDevices();
     };
 
@@ -77,14 +76,12 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
                     return;
                 }
 
-                const crossSigningInfo = cli.getStoredCrossSigningForUser(cli.getUserId());
                 this.setState((state, props) => {
                     const deviceIds = resp.devices.map((device) => device.device_id);
                     const selectedDevices = state.selectedDevices.filter((deviceId) => deviceIds.includes(deviceId));
                     return {
                         devices: resp.devices || [],
                         selectedDevices,
-                        crossSigningInfo: crossSigningInfo,
                     };
                 });
             },
@@ -123,16 +120,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
     }
 
     private isDeviceVerified(device: IMyDevice): boolean | null {
-        try {
-            const cli = this.context;
-            const deviceInfo = cli.getStoredDevice(cli.getUserId(), device.device_id);
-            return this.state.crossSigningInfo
-                .checkDeviceTrust(this.state.crossSigningInfo, deviceInfo, false, true)
-                .isCrossSigningVerified();
-        } catch (e) {
-            console.error("Error getting device cross-signing info", e);
-            return null;
-        }
+        return isDeviceVerified(device, this.context);
     }
 
     private onDeviceSelectionToggled = (device: IMyDevice): void => {
@@ -264,9 +252,9 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
         const otherDevices = devices.filter((device) => device.device_id !== myDeviceId);
         otherDevices.sort(this.deviceCompare);
 
-        const verifiedDevices = [];
-        const unverifiedDevices = [];
-        const nonCryptoDevices = [];
+        const verifiedDevices: IMyDevice[] = [];
+        const unverifiedDevices: IMyDevice[] = [];
+        const nonCryptoDevices: IMyDevice[] = [];
         for (const device of otherDevices) {
             const verified = this.isDeviceVerified(device);
             if (verified === true) {
@@ -283,7 +271,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
                 return <React.Fragment />;
             }
 
-            let selectButton: JSX.Element;
+            let selectButton: JSX.Element | undefined;
             if (deviceList.length > 1) {
                 const anySelected = deviceList.some((device) => this.state.selectedDevices.includes(device.device_id));
                 const buttonAction = anySelected
diff --git a/src/components/views/settings/DevicesPanelEntry.tsx b/src/components/views/settings/DevicesPanelEntry.tsx
index a0d23e44bfb..57f0bc24b29 100644
--- a/src/components/views/settings/DevicesPanelEntry.tsx
+++ b/src/components/views/settings/DevicesPanelEntry.tsx
@@ -103,7 +103,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
             });
         } else {
             const cli = MatrixClientPeg.get();
-            const userId = cli.getUserId();
+            const userId = cli.getUserId()!;
             const verificationRequestPromise = cli.requestVerification(userId, [this.props.device.device_id]);
             Modal.createDialog(VerificationRequestDialog, {
                 verificationRequestPromise,
@@ -119,7 +119,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
 
     public render(): React.ReactNode {
         let iconClass = "";
-        let verifyButton: JSX.Element;
+        let verifyButton: JSX.Element | undefined;
         if (this.props.verified !== null) {
             iconClass = this.props.verified ? "mx_E2EIcon_verified" : "mx_E2EIcon_warning";
             if (!this.props.verified && this.props.canBeVerified) {
@@ -131,7 +131,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
             }
         }
 
-        let signOutButton: JSX.Element;
+        let signOutButton: JSX.Element | undefined;
         if (this.props.isOwnDevice) {
             signOutButton = (
                 <AccessibleButton kind="danger_outline" onClick={this.onOwnDeviceSignOut}>
diff --git a/src/components/views/settings/EventIndexPanel.tsx b/src/components/views/settings/EventIndexPanel.tsx
index 6178e8bfd78..8a1d93c98f5 100644
--- a/src/components/views/settings/EventIndexPanel.tsx
+++ b/src/components/views/settings/EventIndexPanel.tsx
@@ -26,6 +26,7 @@ import EventIndexPeg from "../../../indexing/EventIndexPeg";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import SeshatResetDialog from "../dialogs/SeshatResetDialog";
 import InlineSpinner from "../elements/InlineSpinner";
+import { IIndexStats } from "../../../indexing/BaseEventIndexManager";
 
 interface IState {
     enabling: boolean;
@@ -48,10 +49,10 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
 
     public updateCurrentRoom = async (): Promise<void> => {
         const eventIndex = EventIndexPeg.get();
-        let stats;
+        let stats: IIndexStats | undefined;
 
         try {
-            stats = await eventIndex.getStats();
+            stats = await eventIndex?.getStats();
         } catch {
             // This call may fail if sporadically, not a huge issue as we will
             // try later again and probably succeed.
@@ -126,8 +127,8 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
         });
 
         await EventIndexPeg.initEventIndex();
-        await EventIndexPeg.get().addInitialCheckpoints();
-        EventIndexPeg.get().startCrawler();
+        await EventIndexPeg.get()?.addInitialCheckpoints();
+        EventIndexPeg.get()?.startCrawler();
         await SettingsStore.setValue("enableEventIndexing", null, SettingLevel.DEVICE, true);
         await this.updateState();
     };
@@ -146,7 +147,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
     };
 
     public render(): React.ReactNode {
-        let eventIndexingSettings = null;
+        let eventIndexingSettings: JSX.Element | undefined;
         const brand = SdkConfig.get().brand;
 
         if (EventIndexPeg.get() !== null) {
@@ -176,7 +177,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
             eventIndexingSettings = (
                 <div>
                     <div className="mx_SettingsTab_subsectionText">
-                        {_t("Securely cache encrypted messages locally for them to " + "appear in search results.")}
+                        {_t("Securely cache encrypted messages locally for them to appear in search results.")}
                     </div>
                     <div>
                         <AccessibleButton kind="primary" disabled={this.state.enabling} onClick={this.onEnable}>
diff --git a/src/components/views/settings/FontScalingPanel.tsx b/src/components/views/settings/FontScalingPanel.tsx
index 6290a141959..e8f5ebd7514 100644
--- a/src/components/views/settings/FontScalingPanel.tsx
+++ b/src/components/views/settings/FontScalingPanel.tsx
@@ -39,8 +39,8 @@ interface IState {
     layout: Layout;
     // User profile data for the message preview
     userId?: string;
-    displayName: string;
-    avatarUrl: string;
+    displayName?: string;
+    avatarUrl?: string;
 
     // For typeface
     useSystemFont: boolean;
@@ -57,9 +57,6 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
             fontSize: (SettingsStore.getValue("baseFontSize", null) + FontWatcher.SIZE_DIFF).toString(),
             useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
             layout: SettingsStore.getValue("layout"),
-            userId: null,
-            displayName: null,
-            avatarUrl: null,
             useSystemFont: SettingsStore.getValue("useSystemFont"),
             systemFont: SettingsStore.getValue("systemFont"),
         };
@@ -68,7 +65,7 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
     public async componentDidMount(): Promise<void> {
         // Fetch the current user profile for the message preview
         const client = MatrixClientPeg.get();
-        const userId = client.getUserId();
+        const userId = client.getUserId()!;
         const profileInfo = await client.getProfileInfo(userId);
         if (this.unmounted) return;
 
diff --git a/src/components/views/settings/IntegrationManager.tsx b/src/components/views/settings/IntegrationManager.tsx
index b07d75d520c..ee69c5cd920 100644
--- a/src/components/views/settings/IntegrationManager.tsx
+++ b/src/components/views/settings/IntegrationManager.tsx
@@ -26,10 +26,10 @@ import Heading from "../typography/Heading";
 
 interface IProps {
     // false to display an error saying that we couldn't connect to the integration manager
-    connected: boolean;
+    connected?: boolean;
 
     // true to display a loading spinner
-    loading: boolean;
+    loading?: boolean;
 
     // The source URL to load
     url?: string;
@@ -45,7 +45,7 @@ interface IState {
 export default class IntegrationManager extends React.Component<IProps, IState> {
     private dispatcherRef: string;
 
-    public static defaultProps = {
+    public static defaultProps: Partial<IProps> = {
         connected: true,
         loading: false,
     };
diff --git a/src/components/views/settings/JoinRuleSettings.tsx b/src/components/views/settings/JoinRuleSettings.tsx
index 61cf38f8dc5..5b1c5e0bbf0 100644
--- a/src/components/views/settings/JoinRuleSettings.tsx
+++ b/src/components/views/settings/JoinRuleSettings.tsx
@@ -24,7 +24,6 @@ import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import RoomAvatar from "../avatars/RoomAvatar";
 import SpaceStore from "../../../stores/spaces/SpaceStore";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
 import ManageRestrictedJoinRuleDialog from "../dialogs/ManageRestrictedJoinRuleDialog";
 import RoomUpgradeWarningDialog, { IFinishedOpts } from "../dialogs/RoomUpgradeWarningDialog";
@@ -74,17 +73,15 @@ const JoinRuleSettings: React.FC<IProps> = ({
             ? content.allow?.filter((o) => o.type === RestrictedAllowType.RoomMembership).map((o) => o.room_id)
             : undefined;
 
-    const editRestrictedRoomIds = async (): Promise<string[] | undefined> => {
+    const editRestrictedRoomIds = async (): Promise<string[]> => {
         let selected = restrictedAllowRoomIds;
         if (!selected?.length && SpaceStore.instance.activeSpaceRoom) {
             selected = [SpaceStore.instance.activeSpaceRoom.roomId];
         }
 
-        const matrixClient = MatrixClientPeg.get();
         const { finished } = Modal.createDialog(
             ManageRestrictedJoinRuleDialog,
             {
-                matrixClient,
                 room,
                 selected,
             },
@@ -127,7 +124,7 @@ const JoinRuleSettings: React.FC<IProps> = ({
             const shownSpaces = restrictedAllowRoomIds
                 .map((roomId) => cli.getRoom(roomId))
                 .filter((room) => room?.isSpaceRoom())
-                .slice(0, 4);
+                .slice(0, 4) as Room[];
 
             let moreText;
             if (shownSpaces.length < restrictedAllowRoomIds.length) {
@@ -234,7 +231,7 @@ const JoinRuleSettings: React.FC<IProps> = ({
     const onChange = async (joinRule: JoinRule): Promise<void> => {
         const beforeJoinRule = content.join_rule;
 
-        let restrictedAllowRoomIds: string[];
+        let restrictedAllowRoomIds: string[] | undefined;
         if (joinRule === JoinRule.Restricted) {
             if (beforeJoinRule === JoinRule.Restricted || roomSupportsRestricted) {
                 // Have the user pick which spaces to allow joins from
@@ -244,8 +241,8 @@ const JoinRuleSettings: React.FC<IProps> = ({
                 // Block this action on a room upgrade otherwise it'd make their room unjoinable
                 const targetVersion = preferredRestrictionVersion;
 
-                let warning: JSX.Element;
-                const userId = cli.getUserId();
+                let warning: JSX.Element | undefined;
+                const userId = cli.getUserId()!;
                 const unableToUpdateSomeParents = Array.from(SpaceStore.instance.getKnownParents(room.roomId)).some(
                     (roomId) => !cli.getRoom(roomId)?.currentState.maySendStateEvent(EventType.SpaceChild, userId),
                 );
@@ -332,7 +329,7 @@ const JoinRuleSettings: React.FC<IProps> = ({
             }
 
             // when setting to 0 allowed rooms/spaces set to invite only instead as per the note
-            if (!restrictedAllowRoomIds.length) {
+            if (!restrictedAllowRoomIds?.length) {
                 joinRule = JoinRule.Invite;
             }
         }
@@ -346,7 +343,7 @@ const JoinRuleSettings: React.FC<IProps> = ({
 
         // pre-set the accepted spaces with the currently viewed one as per the microcopy
         if (joinRule === JoinRule.Restricted) {
-            newContent.allow = restrictedAllowRoomIds.map((roomId) => ({
+            newContent.allow = restrictedAllowRoomIds?.map((roomId) => ({
                 type: RestrictedAllowType.RoomMembership,
                 room_id: roomId,
             }));
diff --git a/src/components/views/settings/Notifications.tsx b/src/components/views/settings/Notifications.tsx
index 3a0137c5308..815c9d740b8 100644
--- a/src/components/views/settings/Notifications.tsx
+++ b/src/components/views/settings/Notifications.tsx
@@ -15,10 +15,18 @@ limitations under the License.
 */
 
 import React, { ReactNode } from "react";
-import { IAnnotatedPushRule, IPusher, PushRuleAction, PushRuleKind, RuleId } from "matrix-js-sdk/src/@types/PushRules";
+import {
+    IAnnotatedPushRule,
+    IPusher,
+    PushRuleAction,
+    IPushRule,
+    PushRuleKind,
+    RuleId,
+} from "matrix-js-sdk/src/@types/PushRules";
 import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
 import { logger } from "matrix-js-sdk/src/logger";
 import { LocalNotificationSettings } from "matrix-js-sdk/src/@types/local_notifications";
+import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 
 import Spinner from "../elements/Spinner";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -93,6 +101,9 @@ interface IVectorPushRule {
     rule?: IAnnotatedPushRule;
     description: TranslatedString | string;
     vectorState: VectorState;
+    // loudest vectorState of a rule and its synced rules
+    // undefined when rule has no synced rules
+    syncedVectorState?: VectorState;
 }
 
 interface IProps {}
@@ -117,9 +128,68 @@ interface IState {
 
     clearingNotifications: boolean;
 }
+const findInDefaultRules = (
+    ruleId: RuleId | string,
+    defaultRules: {
+        [k in RuleClass]: IAnnotatedPushRule[];
+    },
+): IAnnotatedPushRule | undefined => {
+    for (const category in defaultRules) {
+        const rule: IAnnotatedPushRule | undefined = defaultRules[category as RuleClass].find(
+            (rule) => rule.rule_id === ruleId,
+        );
+        if (rule) {
+            return rule;
+        }
+    }
+};
+
+// Vector notification states ordered by loudness in ascending order
+const OrderedVectorStates = [VectorState.Off, VectorState.On, VectorState.Loud];
+
+/**
+ * Find the 'loudest' vector state assigned to a rule
+ * and it's synced rules
+ * If rules have fallen out of sync,
+ * the loudest rule can determine the display value
+ * @param defaultRules
+ * @param rule - parent rule
+ * @param definition - definition of parent rule
+ * @returns VectorState - the maximum/loudest state for the parent and synced rules
+ */
+const maximumVectorState = (
+    defaultRules: {
+        [k in RuleClass]: IAnnotatedPushRule[];
+    },
+    rule: IAnnotatedPushRule,
+    definition: VectorPushRuleDefinition,
+): VectorState | undefined => {
+    if (!definition.syncedRuleIds?.length) {
+        return undefined;
+    }
+    const vectorState = definition.syncedRuleIds.reduce<VectorState>((maxVectorState, ruleId) => {
+        // already set to maximum
+        if (maxVectorState === VectorState.Loud) {
+            return maxVectorState;
+        }
+        const syncedRule = findInDefaultRules(ruleId, defaultRules);
+        if (syncedRule) {
+            const syncedRuleVectorState = definition.ruleToVectorState(syncedRule);
+            // if syncedRule is 'louder' than current maximum
+            // set maximum to louder vectorState
+            if (OrderedVectorStates.indexOf(syncedRuleVectorState) > OrderedVectorStates.indexOf(maxVectorState)) {
+                return syncedRuleVectorState;
+            }
+        }
+        return maxVectorState;
+    }, definition.ruleToVectorState(rule));
+
+    return vectorState;
+};
 
 export default class Notifications extends React.PureComponent<IProps, IState> {
     private settingWatchers: string[];
+    private pushProcessor: PushProcessor;
 
     public constructor(props: IProps) {
         super(props);
@@ -151,6 +221,8 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
                 this.setState({ soundPack: value as SoundPack }),
             ),
         ];
+
+        this.pushProcessor = new PushProcessor(MatrixClientPeg.get());
     }
 
     private get isInhibited(): boolean {
@@ -287,6 +359,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
                     ruleId: rule.rule_id,
                     rule,
                     vectorState,
+                    syncedVectorState: maximumVectorState(defaultRules, rule, definition),
                     description: _t(definition.description),
                 });
             }
@@ -334,7 +407,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
         this.setState({ phase: Phase.Persisting });
 
         try {
-            const masterRule = this.state.masterPushRule;
+            const masterRule = this.state.masterPushRule!;
             await MatrixClientPeg.get().setPushRuleEnabled("global", masterRule.kind, masterRule.rule_id, !checked);
             await this.refreshFromServer();
         } catch (e) {
@@ -399,6 +472,43 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
         this.setState({ soundPack: value });
         await SettingsStore.setValue("soundPack", null, SettingLevel.DEVICE, value);
     };
+    
+    private setPushRuleActions = async (
+        ruleId: IPushRule["rule_id"],
+        kind: PushRuleKind,
+        actions?: PushRuleAction[],
+    ): Promise<void> => {
+        const cli = MatrixClientPeg.get();
+        if (!actions) {
+            await cli.setPushRuleEnabled("global", kind, ruleId, false);
+        } else {
+            await cli.setPushRuleActions("global", kind, ruleId, actions);
+            await cli.setPushRuleEnabled("global", kind, ruleId, true);
+        }
+    };
+
+    /**
+     * Updated syncedRuleIds from rule definition
+     * If a rule does not exist it is ignored
+     * Synced rules are updated sequentially
+     * and stop at first error
+     */
+    private updateSyncedRules = async (
+        syncedRuleIds: VectorPushRuleDefinition["syncedRuleIds"],
+        actions?: PushRuleAction[],
+    ): Promise<void> => {
+        // get synced rules that exist for user
+        const syncedRules: ReturnType<PushProcessor["getPushRuleAndKindById"]>[] = syncedRuleIds
+            ?.map((ruleId) => this.pushProcessor.getPushRuleAndKindById(ruleId))
+            .filter(Boolean);
+
+        if (!syncedRules?.length) {
+            return;
+        }
+        for (const { kind, rule: syncedRule } of syncedRules) {
+            await this.setPushRuleActions(syncedRule.rule_id, kind, actions);
+        }
+    };
 
     private onRadioChecked = async (rule: IVectorPushRule, checkedState: VectorState): Promise<void> => {
         this.setState({ phase: Phase.Persisting });
@@ -408,8 +518,8 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
             if (rule.ruleId === KEYWORD_RULE_ID) {
                 // Update all the keywords
                 for (const rule of this.state.vectorKeywordRuleInfo.rules) {
-                    let enabled: boolean;
-                    let actions: PushRuleAction[];
+                    let enabled: boolean | undefined;
+                    let actions: PushRuleAction[] | undefined;
                     if (checkedState === VectorState.On) {
                         if (rule.actions.length !== 1) {
                             // XXX: Magic number
@@ -440,12 +550,8 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
             } else {
                 const definition: VectorPushRuleDefinition = VectorPushRulesDefinitions[rule.ruleId];
                 const actions = definition.vectorStateToActions[checkedState];
-                if (!actions) {
-                    await cli.setPushRuleEnabled("global", rule.rule.kind, rule.rule.rule_id, false);
-                } else {
-                    await cli.setPushRuleActions("global", rule.rule.kind, rule.rule.rule_id, actions);
-                    await cli.setPushRuleEnabled("global", rule.rule.kind, rule.rule.rule_id, true);
-                }
+                await this.setPushRuleActions(rule.rule.rule_id, rule.rule.kind, actions);
+                await this.updateSyncedRules(definition.syncedRuleIds, actions);
             }
 
             await this.refreshFromServer();
@@ -722,7 +828,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
             <StyledRadioButton
                 key={r.ruleId + s}
                 name={r.ruleId}
-                checked={r.vectorState === s}
+                checked={(r.syncedVectorState ?? r.vectorState) === s}
                 onChange={this.onRadioChecked.bind(this, r, s)}
                 disabled={this.state.phase === Phase.Persisting}
                 aria-label={VectorStateToLabel[s]}
diff --git a/src/components/views/settings/ProfileSettings.tsx b/src/components/views/settings/ProfileSettings.tsx
index 5bba1c51b33..4a36b44973f 100644
--- a/src/components/views/settings/ProfileSettings.tsx
+++ b/src/components/views/settings/ProfileSettings.tsx
@@ -20,14 +20,12 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Field from "../elements/Field";
-import { getHostingLink } from "../../../utils/HostingLink";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import { mediaFromMxc } from "../../../customisations/Media";
 import AccessibleButton from "../elements/AccessibleButton";
 import AvatarSetting from "./AvatarSetting";
-import ExternalLink from "../elements/ExternalLink";
 import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
 import PosthogTrackers from "../../../PosthogTrackers";
@@ -161,26 +159,6 @@ export default class ProfileSettings extends React.Component<{}, IState> {
     };
 
     public render(): React.ReactNode {
-        const hostingSignupLink = getHostingLink("user-settings");
-        let hostingSignup: JSX.Element | undefined;
-        if (hostingSignupLink) {
-            hostingSignup = (
-                <span>
-                    {_t(
-                        "<a>Upgrade</a> to your own domain",
-                        {},
-                        {
-                            a: (sub) => (
-                                <ExternalLink href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
-                                    {sub}
-                                </ExternalLink>
-                            ),
-                        },
-                    )}
-                </span>
-            );
-        }
-
         const userIdentifier = UserIdentifierCustomisations.getDisplayUserIdentifier(this.state.userId, {
             withDisplayName: true,
         });
@@ -216,7 +194,6 @@ export default class ProfileSettings extends React.Component<{}, IState> {
                             {userIdentifier && (
                                 <span className="mx_ProfileSettings_profile_controls_userId">{userIdentifier}</span>
                             )}
-                            {hostingSignup}
                         </p>
                     </div>
                     <AvatarSetting
diff --git a/src/components/views/settings/SecureBackupPanel.tsx b/src/components/views/settings/SecureBackupPanel.tsx
index 59192259844..7ab22730fdd 100644
--- a/src/components/views/settings/SecureBackupPanel.tsx
+++ b/src/components/views/settings/SecureBackupPanel.tsx
@@ -15,12 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentType } from "react";
+import React from "react";
 import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
 import { TrustInfo } from "matrix-js-sdk/src/crypto/backup";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import { logger } from "matrix-js-sdk/src/logger";
 
+import type CreateKeyBackupDialog from "../../../async-components/views/dialogs/security/CreateKeyBackupDialog";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
@@ -33,14 +34,14 @@ import { accessSecretStorage } from "../../../SecurityManager";
 
 interface IState {
     loading: boolean;
-    error: null;
-    backupKeyStored: boolean;
-    backupKeyCached: boolean;
-    backupKeyWellFormed: boolean;
-    secretStorageKeyInAccount: boolean;
-    secretStorageReady: boolean;
-    backupInfo: IKeyBackupInfo;
-    backupSigStatus: TrustInfo;
+    error: Error | null;
+    backupKeyStored: boolean | null;
+    backupKeyCached: boolean | null;
+    backupKeyWellFormed: boolean | null;
+    secretStorageKeyInAccount: boolean | null;
+    secretStorageReady: boolean | null;
+    backupInfo: IKeyBackupInfo | null;
+    backupSigStatus: TrustInfo | null;
     sessionsRemaining: number;
 }
 
@@ -144,10 +145,10 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
 
     private async getUpdatedDiagnostics(): Promise<void> {
         const cli = MatrixClientPeg.get();
-        const secretStorage = cli.crypto.secretStorage;
+        const secretStorage = cli.crypto!.secretStorage;
 
         const backupKeyStored = !!(await cli.isKeyBackupKeyStored());
-        const backupKeyFromCache = await cli.crypto.getSessionBackupPrivateKey();
+        const backupKeyFromCache = await cli.crypto!.getSessionBackupPrivateKey();
         const backupKeyCached = !!backupKeyFromCache;
         const backupKeyWellFormed = backupKeyFromCache instanceof Uint8Array;
         const secretStorageKeyInAccount = await secretStorage.hasKey();
@@ -166,14 +167,14 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
     private startNewBackup = (): void => {
         Modal.createDialogAsync(
             import("../../../async-components/views/dialogs/security/CreateKeyBackupDialog") as unknown as Promise<
-                ComponentType<{}>
+                typeof CreateKeyBackupDialog
             >,
             {
                 onFinished: () => {
                     this.loadBackupStatus();
                 },
             },
-            null,
+            undefined,
             /* priority = */ false,
             /* static = */ true,
         );
@@ -183,7 +184,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
         Modal.createDialog(QuestionDialog, {
             title: _t("Delete Backup"),
             description: _t(
-                "Are you sure? You will lose your encrypted messages if your " + "keys are not backed up properly.",
+                "Are you sure? You will lose your encrypted messages if your keys are not backed up properly.",
             ),
             button: _t("Delete Backup"),
             danger: true,
@@ -200,7 +201,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
     };
 
     private restoreBackup = async (): Promise<void> => {
-        Modal.createDialog(RestoreKeyBackupDialog, null, null, /* priority = */ false, /* static = */ true);
+        Modal.createDialog(RestoreKeyBackupDialog, undefined, undefined, /* priority = */ false, /* static = */ true);
     };
 
     private resetSecretStorage = async (): Promise<void> => {
@@ -233,7 +234,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
         let statusDescription;
         let extraDetailsTableRows;
         let extraDetails;
-        const actions = [];
+        const actions: JSX.Element[] = [];
         if (error) {
             statusDescription = <div className="error">{_t("Unable to load key backup status")}</div>;
         } else if (loading) {
diff --git a/src/components/views/settings/SetIdServer.tsx b/src/components/views/settings/SetIdServer.tsx
index 9b57f182d76..50c1c6c4520 100644
--- a/src/components/views/settings/SetIdServer.tsx
+++ b/src/components/views/settings/SetIdServer.tsx
@@ -97,7 +97,6 @@ export default class SetIdServer extends React.Component<IProps, IState> {
             defaultIdServer,
             currentClientIdServer: MatrixClientPeg.get().getIdentityServerUrl(),
             idServer: "",
-            error: null,
             busy: false,
             disconnectBusy: false,
             checking: false,
@@ -128,7 +127,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
         this.setState({ idServer: u });
     };
 
-    private getTooltip = (): JSX.Element => {
+    private getTooltip = (): ReactNode => {
         if (this.state.checking) {
             return (
                 <div>
@@ -154,7 +153,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
         });
         this.setState({
             busy: false,
-            error: null,
+            error: undefined,
             currentClientIdServer: fullUrl,
             idServer: "",
         });
@@ -164,7 +163,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
         e.preventDefault();
         const { idServer, currentClientIdServer } = this.state;
 
-        this.setState({ busy: true, checking: true, error: null });
+        this.setState({ busy: true, checking: true, error: undefined });
 
         const fullUrl = unabbreviateUrl(idServer);
 
@@ -184,7 +183,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
                 const hasTerms = await doesIdentityServerHaveTerms(fullUrl);
                 if (!hasTerms) {
                     const [confirmed] = await this.showNoTermsWarning(fullUrl);
-                    save = confirmed;
+                    save = !!confirmed;
                 }
 
                 // Show a general warning, possibly with details about any bound
@@ -193,7 +192,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
                     const [confirmed] = await this.showServerChangeWarning({
                         title: _t("Change identity server"),
                         unboundMessage: _t(
-                            "Disconnect from the identity server <current /> and " + "connect to <new /> instead?",
+                            "Disconnect from the identity server <current /> and connect to <new /> instead?",
                             {},
                             {
                                 current: (sub) => <b>{abbreviateUrl(currentClientIdServer)}</b>,
@@ -202,7 +201,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
                         ),
                         button: _t("Continue"),
                     });
-                    save = confirmed;
+                    save = !!confirmed;
                 }
 
                 if (save) {
@@ -216,13 +215,13 @@ export default class SetIdServer extends React.Component<IProps, IState> {
         this.setState({
             busy: false,
             checking: false,
-            error: errStr,
+            error: errStr ?? undefined,
             currentClientIdServer: MatrixClientPeg.get().getIdentityServerUrl(),
         });
     };
 
-    private showNoTermsWarning(fullUrl: string): Promise<[boolean]> {
-        const { finished } = Modal.createDialog<[boolean]>(QuestionDialog, {
+    private showNoTermsWarning(fullUrl: string): Promise<[ok?: boolean]> {
+        const { finished } = Modal.createDialog(QuestionDialog, {
             title: _t("Identity server has no terms of service"),
             description: (
                 <div>
@@ -265,7 +264,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
         title: string;
         unboundMessage: ReactNode;
         button: string;
-    }): Promise<[boolean]> {
+    }): Promise<[ok?: boolean]> {
         const { currentClientIdServer } = this.state;
 
         let threepids: IThreepid[] = [];
@@ -331,7 +330,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
                 <div>
                     <p>
                         {_t(
-                            "You are still <b>sharing your personal data</b> on the identity " + "server <idserver />.",
+                            "You are still <b>sharing your personal data</b> on the identity server <idserver />.",
                             {},
                             messageElements,
                         )}
@@ -350,7 +349,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
             message = unboundMessage;
         }
 
-        const { finished } = Modal.createDialog<[boolean]>(QuestionDialog, {
+        const { finished } = Modal.createDialog(QuestionDialog, {
             title,
             description: message,
             button,
@@ -375,7 +374,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
 
         this.setState({
             busy: false,
-            error: null,
+            error: undefined,
             currentClientIdServer: MatrixClientPeg.get().getIdentityServerUrl(),
             idServer: newFieldVal,
         });
@@ -453,7 +452,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
                     tooltipContent={this.getTooltip()}
                     tooltipClassName="mx_SetIdServer_tooltip"
                     disabled={this.state.busy}
-                    forceValidity={this.state.error ? false : null}
+                    forceValidity={this.state.error ? false : undefined}
                 />
                 <AccessibleButton
                     type="submit"
diff --git a/src/components/views/settings/account/EmailAddresses.tsx b/src/components/views/settings/account/EmailAddresses.tsx
index 7de91171621..0d5405d93fb 100644
--- a/src/components/views/settings/account/EmailAddresses.tsx
+++ b/src/components/views/settings/account/EmailAddresses.tsx
@@ -133,7 +133,7 @@ interface IProps {
 
 interface IState {
     verifying: boolean;
-    addTask: AddThreepid;
+    addTask: AddThreepid | null;
     continueDisabled: boolean;
     newEmailAddress: string;
 }
@@ -201,7 +201,7 @@ export default class EmailAddresses extends React.Component<IProps, IState> {
 
         this.setState({ continueDisabled: true });
         this.state.addTask
-            .checkEmailLinkClicked()
+            ?.checkEmailLinkClicked()
             .then(([finished]) => {
                 let newEmailAddress = this.state.newEmailAddress;
                 if (finished) {
@@ -223,7 +223,7 @@ export default class EmailAddresses extends React.Component<IProps, IState> {
                     Modal.createDialog(ErrorDialog, {
                         title: _t("Your email address hasn't been verified yet"),
                         description: _t(
-                            "Click the link in the email you received to verify " + "and then click continue again.",
+                            "Click the link in the email you received to verify and then click continue again.",
                         ),
                     });
                 } else {
diff --git a/src/components/views/settings/devices/CurrentDeviceSection.tsx b/src/components/views/settings/devices/CurrentDeviceSection.tsx
index db56a07e0e1..ef9b28aa86a 100644
--- a/src/components/views/settings/devices/CurrentDeviceSection.tsx
+++ b/src/components/views/settings/devices/CurrentDeviceSection.tsx
@@ -33,11 +33,11 @@ interface Props {
     device?: ExtendedDevice;
     isLoading: boolean;
     isSigningOut: boolean;
-    localNotificationSettings?: LocalNotificationSettings | undefined;
+    localNotificationSettings?: LocalNotificationSettings;
     // number of other sessions the user has
     // excludes current session
     otherSessionsCount: number;
-    setPushNotifications?: (deviceId: string, enabled: boolean) => Promise<void> | undefined;
+    setPushNotifications: (deviceId: string, enabled: boolean) => Promise<void>;
     onVerifyCurrentDevice: () => void;
     onSignOutCurrentDevice: () => void;
     signOutAllOtherSessions?: () => void;
diff --git a/src/components/views/settings/devices/DeviceMetaData.tsx b/src/components/views/settings/devices/DeviceMetaData.tsx
new file mode 100644
index 00000000000..867b8417199
--- /dev/null
+++ b/src/components/views/settings/devices/DeviceMetaData.tsx
@@ -0,0 +1,89 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { Fragment } from "react";
+
+import { Icon as InactiveIcon } from "../../../../../res/img/element-icons/settings/inactive.svg";
+import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "../../../../components/views/settings/devices/filter";
+import { ExtendedDevice } from "../../../../components/views/settings/devices/types";
+import { formatDate, formatRelativeTime } from "../../../../DateUtils";
+import { _t } from "../../../../languageHandler";
+
+interface Props {
+    device: ExtendedDevice;
+}
+
+const MS_DAY = 24 * 60 * 60 * 1000;
+const MS_6_DAYS = 6 * MS_DAY;
+const formatLastActivity = (timestamp: number, now = new Date().getTime()): string => {
+    // less than a week ago
+    if (timestamp + MS_6_DAYS >= now) {
+        const date = new Date(timestamp);
+        // Tue 20:15
+        return formatDate(date);
+    }
+    return formatRelativeTime(new Date(timestamp));
+};
+
+const getInactiveMetadata = (device: ExtendedDevice): { id: string; value: React.ReactNode } | undefined => {
+    const isInactive = isDeviceInactive(device);
+
+    if (!isInactive || !device.last_seen_ts) {
+        return undefined;
+    }
+
+    return {
+        id: "inactive",
+        value: (
+            <>
+                <InactiveIcon className="mx_DeviceTile_inactiveIcon" />
+                {_t("Inactive for %(inactiveAgeDays)s+ days", { inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS }) +
+                    ` (${formatLastActivity(device.last_seen_ts)})`}
+            </>
+        ),
+    };
+};
+
+const DeviceMetaDatum: React.FC<{ value: string | React.ReactNode; id: string }> = ({ value, id }) =>
+    value ? <span data-testid={`device-metadata-${id}`}>{value}</span> : null;
+
+export const DeviceMetaData: React.FC<Props> = ({ device }) => {
+    const inactive = getInactiveMetadata(device);
+    const lastActivity = device.last_seen_ts && `${_t("Last activity")} ${formatLastActivity(device.last_seen_ts)}`;
+    const verificationStatus = device.isVerified ? _t("Verified") : _t("Unverified");
+    // if device is inactive, don't display last activity or verificationStatus
+    const metadata = inactive
+        ? [inactive, { id: "lastSeenIp", value: device.last_seen_ip }]
+        : [
+              { id: "isVerified", value: verificationStatus },
+              { id: "lastActivity", value: lastActivity },
+              { id: "lastSeenIp", value: device.last_seen_ip },
+              { id: "deviceId", value: device.device_id },
+          ];
+
+    return (
+        <>
+            {metadata.map(({ id, value }, index) =>
+                !!value ? (
+                    <Fragment key={id}>
+                        {!!index && " · "}
+                        <DeviceMetaDatum id={id} value={value} />
+                    </Fragment>
+                ) : null,
+            )}
+        </>
+    );
+};
diff --git a/src/components/views/settings/devices/DeviceTile.tsx b/src/components/views/settings/devices/DeviceTile.tsx
index 1fbf71442ae..2c60a49cd6b 100644
--- a/src/components/views/settings/devices/DeviceTile.tsx
+++ b/src/components/views/settings/devices/DeviceTile.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2022 - 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,17 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { Fragment } from "react";
+import React from "react";
 import classNames from "classnames";
 
-import { Icon as InactiveIcon } from "../../../../../res/img/element-icons/settings/inactive.svg";
-import { _t } from "../../../../languageHandler";
-import { formatDate, formatRelativeTime } from "../../../../DateUtils";
 import Heading from "../../typography/Heading";
-import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "./filter";
 import { ExtendedDevice } from "./types";
 import { DeviceTypeIcon } from "./DeviceTypeIcon";
 import { preventDefaultWrapper } from "../../../../utils/NativeEventUtils";
+import { DeviceMetaData } from "./DeviceMetaData";
 export interface DeviceTileProps {
     device: ExtendedDevice;
     isSelected?: boolean;
@@ -36,53 +33,7 @@ const DeviceTileName: React.FC<{ device: ExtendedDevice }> = ({ device }) => {
     return <Heading size="h4">{device.display_name || device.device_id}</Heading>;
 };
 
-const MS_DAY = 24 * 60 * 60 * 1000;
-const MS_6_DAYS = 6 * MS_DAY;
-const formatLastActivity = (timestamp: number, now = new Date().getTime()): string => {
-    // less than a week ago
-    if (timestamp + MS_6_DAYS >= now) {
-        const date = new Date(timestamp);
-        // Tue 20:15
-        return formatDate(date);
-    }
-    return formatRelativeTime(new Date(timestamp));
-};
-
-const getInactiveMetadata = (device: ExtendedDevice): { id: string; value: React.ReactNode } | undefined => {
-    const isInactive = isDeviceInactive(device);
-
-    if (!isInactive) {
-        return undefined;
-    }
-    return {
-        id: "inactive",
-        value: (
-            <>
-                <InactiveIcon className="mx_DeviceTile_inactiveIcon" />
-                {_t("Inactive for %(inactiveAgeDays)s+ days", { inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS }) +
-                    ` (${formatLastActivity(device.last_seen_ts)})`}
-            </>
-        ),
-    };
-};
-
-const DeviceMetadata: React.FC<{ value: string | React.ReactNode; id: string }> = ({ value, id }) =>
-    value ? <span data-testid={`device-metadata-${id}`}>{value}</span> : null;
-
 const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, isSelected, onClick }) => {
-    const inactive = getInactiveMetadata(device);
-    const lastActivity = device.last_seen_ts && `${_t("Last activity")} ${formatLastActivity(device.last_seen_ts)}`;
-    const verificationStatus = device.isVerified ? _t("Verified") : _t("Unverified");
-    // if device is inactive, don't display last activity or verificationStatus
-    const metadata = inactive
-        ? [inactive, { id: "lastSeenIp", value: device.last_seen_ip }]
-        : [
-              { id: "isVerified", value: verificationStatus },
-              { id: "lastActivity", value: lastActivity },
-              { id: "lastSeenIp", value: device.last_seen_ip },
-              { id: "deviceId", value: device.device_id },
-          ];
-
     return (
         <div
             className={classNames("mx_DeviceTile", { mx_DeviceTile_interactive: !!onClick })}
@@ -93,14 +44,7 @@ const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, isSelected, o
             <div className="mx_DeviceTile_info">
                 <DeviceTileName device={device} />
                 <div className="mx_DeviceTile_metadata">
-                    {metadata.map(({ id, value }, index) =>
-                        !!value ? (
-                            <Fragment key={id}>
-                                {!!index && " · "}
-                                <DeviceMetadata id={id} value={value} />
-                            </Fragment>
-                        ) : null,
-                    )}
+                    <DeviceMetaData device={device} />
                 </div>
             </div>
             <div className="mx_DeviceTile_actions" onClick={preventDefaultWrapper(() => {})}>
diff --git a/src/components/views/settings/devices/deleteDevices.tsx b/src/components/views/settings/devices/deleteDevices.tsx
index 3f4b34d04d5..c02c29f2cb7 100644
--- a/src/components/views/settings/devices/deleteDevices.tsx
+++ b/src/components/views/settings/devices/deleteDevices.tsx
@@ -25,14 +25,14 @@ import InteractiveAuthDialog from "../../dialogs/InteractiveAuthDialog";
 
 const makeDeleteRequest =
     (matrixClient: MatrixClient, deviceIds: string[]) =>
-    async (auth?: IAuthData): Promise<void> => {
-        await matrixClient.deleteMultipleDevices(deviceIds, auth);
+    async (auth?: IAuthData): Promise<IAuthData> => {
+        return matrixClient.deleteMultipleDevices(deviceIds, auth);
     };
 
 export const deleteDevicesWithInteractiveAuth = async (
     matrixClient: MatrixClient,
     deviceIds: string[],
-    onFinished?: InteractiveAuthCallback,
+    onFinished: InteractiveAuthCallback,
 ): Promise<void> => {
     if (!deviceIds.length) {
         return;
diff --git a/src/components/views/settings/discovery/EmailAddresses.tsx b/src/components/views/settings/discovery/EmailAddresses.tsx
index 9eaf69b0985..18cf49a1629 100644
--- a/src/components/views/settings/discovery/EmailAddresses.tsx
+++ b/src/components/views/settings/discovery/EmailAddresses.tsx
@@ -48,9 +48,9 @@ interface IEmailAddressProps {
 
 interface IEmailAddressState {
     verifying: boolean;
-    addTask: any; // FIXME: When AddThreepid is TSfied
+    addTask: AddThreepid | null;
     continueDisabled: boolean;
-    bound: boolean;
+    bound?: boolean;
 }
 
 export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddressState> {
@@ -172,7 +172,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
 
         this.setState({ continueDisabled: true });
         try {
-            await this.state.addTask.checkEmailLinkClicked();
+            await this.state.addTask?.checkEmailLinkClicked();
             this.setState({
                 addTask: null,
                 continueDisabled: false,
@@ -184,7 +184,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
                 Modal.createDialog(ErrorDialog, {
                     title: _t("Your email address hasn't been verified yet"),
                     description: _t(
-                        "Click the link in the email you received to verify " + "and then click continue again.",
+                        "Click the link in the email you received to verify and then click continue again.",
                     ),
                 });
             } else {
diff --git a/src/components/views/settings/discovery/PhoneNumbers.tsx b/src/components/views/settings/discovery/PhoneNumbers.tsx
index 4c2f3374772..b7d06244dee 100644
--- a/src/components/views/settings/discovery/PhoneNumbers.tsx
+++ b/src/components/views/settings/discovery/PhoneNumbers.tsx
@@ -41,10 +41,10 @@ interface IPhoneNumberProps {
 interface IPhoneNumberState {
     verifying: boolean;
     verificationCode: string;
-    addTask: any; // FIXME: When AddThreepid is TSfied
+    addTask: AddThreepid | null;
     continueDisabled: boolean;
-    bound: boolean;
-    verifyError: string;
+    bound?: boolean;
+    verifyError: string | null;
 }
 
 export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumberState> {
@@ -89,6 +89,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
                 // a leading plus sign to a number in E.164 format (which the 3PID
                 // address is), but this goes against the spec.
                 // See https://github.com/matrix-org/matrix-doc/issues/2222
+                // @ts-ignore
                 await task.bindMsisdn(null, `+${address}`);
                 this.setState({
                     continueDisabled: false,
@@ -128,8 +129,10 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
             // address is), but this goes against the spec.
             // See https://github.com/matrix-org/matrix-doc/issues/2222
             if (bind) {
+                // @ts-ignore
                 await task.bindMsisdn(null, `+${address}`);
             } else {
+                // @ts-ignore
                 await task.addMsisdn(null, `+${address}`);
             }
             this.setState({
@@ -183,7 +186,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
         this.setState({ continueDisabled: true });
         const token = this.state.verificationCode;
         try {
-            await this.state.addTask.haveMsisdnToken(token);
+            await this.state.addTask?.haveMsisdnToken(token);
             this.setState({
                 addTask: null,
                 continueDisabled: false,
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index 4c8cc9d967d..78bb1fe782a 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -32,7 +32,7 @@ import SettingsStore from "../../../../../settings/SettingsStore";
 import { UIFeature } from "../../../../../settings/UIFeature";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import SettingsFlag from "../../../elements/SettingsFlag";
-import createRoom, { IOpts } from "../../../../../createRoom";
+import createRoom from "../../../../../createRoom";
 import CreateRoomDialog from "../../../dialogs/CreateRoomDialog";
 import JoinRuleSettings from "../../JoinRuleSettings";
 import ErrorDialog from "../../../dialogs/ErrorDialog";
@@ -204,7 +204,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
     };
 
     private createNewRoom = async (defaultPublic: boolean, defaultEncrypted: boolean): Promise<boolean> => {
-        const modal = Modal.createDialog<[boolean, IOpts]>(CreateRoomDialog, { defaultPublic, defaultEncrypted });
+        const modal = Modal.createDialog(CreateRoomDialog, { defaultPublic, defaultEncrypted });
 
         PosthogTrackers.trackInteraction("WebRoomSettingsSecurityTabCreateNewRoomButton");
 
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
index 4b73d925f26..a1c6e6075f9 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import { SERVICE_TYPES } from "matrix-js-sdk/src/service-types";
 import { IThreepid } from "matrix-js-sdk/src/@types/threepids";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -64,20 +64,20 @@ interface IState {
     spellCheckEnabled: boolean;
     spellCheckLanguages: string[];
     haveIdServer: boolean;
-    serverSupportsSeparateAddAndBind: boolean;
+    serverSupportsSeparateAddAndBind?: boolean;
     idServerHasUnsignedTerms: boolean;
     requiredPolicyInfo: {
         // This object is passed along to a component for handling
         hasTerms: boolean;
-        policiesAndServices: ServicePolicyPair[]; // From the startTermsFlow callback
-        agreedUrls: string[]; // From the startTermsFlow callback
-        resolve: (values: string[]) => void; // Promise resolve function for startTermsFlow callback
+        policiesAndServices: ServicePolicyPair[] | null; // From the startTermsFlow callback
+        agreedUrls: string[] | null; // From the startTermsFlow callback
+        resolve: ((values: string[]) => void) | null; // Promise resolve function for startTermsFlow callback
     };
     emails: IThreepid[];
     msisdns: IThreepid[];
     loading3pids: boolean; // whether or not the emails and msisdns have been loaded
     canChangePassword: boolean;
-    idServerName: string;
+    idServerName?: string;
     externalAccountManagementUrl?: string;
 }
 
@@ -92,7 +92,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             spellCheckEnabled: false,
             spellCheckLanguages: [],
             haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl()),
-            serverSupportsSeparateAddAndBind: null,
             idServerHasUnsignedTerms: false,
             requiredPolicyInfo: {
                 // This object is passed along to a component for handling
@@ -105,8 +104,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             msisdns: [],
             loading3pids: true, // whether or not the emails and msisdns have been loaded
             canChangePassword: false,
-            idServerName: null,
-            externalAccountManagementUrl: undefined,
         };
 
         this.dispatcherRef = dis.register(this.onAction);
@@ -118,8 +115,8 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
     public async componentDidMount(): Promise<void> {
         const plat = PlatformPeg.get();
         const [spellCheckEnabled, spellCheckLanguages] = await Promise.all([
-            plat.getSpellCheckEnabled(),
-            plat.getSpellCheckLanguages(),
+            plat?.getSpellCheckEnabled(),
+            plat?.getSpellCheckLanguages(),
         ]);
 
         if (spellCheckLanguages) {
@@ -301,7 +298,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
     }
 
     private renderAccountSection(): JSX.Element {
-        let passwordChangeForm = (
+        let passwordChangeForm: ReactNode = (
             <ChangePassword
                 className="mx_GeneralUserSettingsTab_changePassword"
                 rowClassName=""
@@ -311,7 +308,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             />
         );
 
-        let threepidSection = null;
+        let threepidSection: ReactNode = null;
 
         // For older homeservers without separate 3PID add and bind methods (MSC2290),
         // we use a combo add with bind option API which requires an identity server to
@@ -345,7 +342,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             threepidSection = <Spinner />;
         }
 
-        let passwordChangeText = _t("Set a new account password…");
+        let passwordChangeText: ReactNode = _t("Set a new account password…");
         if (!this.state.canChangePassword) {
             // Just don't show anything if you can't do anything.
             passwordChangeText = null;
@@ -483,7 +480,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
         );
     }
 
-    private renderIntegrationManagerSection(): JSX.Element {
+    private renderIntegrationManagerSection(): ReactNode {
         if (!SettingsStore.getValue(UIFeature.Widgets)) return null;
 
         return (
@@ -496,7 +493,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
     public render(): React.ReactNode {
         const plaf = PlatformPeg.get();
-        const supportsMultiLanguageSpellCheck = plaf.supportsSpellCheckSettings();
+        const supportsMultiLanguageSpellCheck = plaf?.supportsSpellCheckSettings();
 
         const discoWarning = this.state.requiredPolicyInfo.hasTerms ? (
             <img
@@ -508,7 +505,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             />
         ) : null;
 
-        let accountManagementSection;
+        let accountManagementSection: JSX.Element | undefined;
         if (SettingsStore.getValue(UIFeature.Deactivate)) {
             accountManagementSection = (
                 <>
diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
index 4a67ed85b92..bc37d3ed1a0 100644
--- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
@@ -353,10 +353,26 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
                     <span className="mx_SettingsTab_subheading">{_t("Advanced")}</span>
                     <div className="mx_SettingsTab_subsectionText">
                         <div>
-                            {_t("Homeserver is")} <code>{MatrixClientPeg.get().getHomeserverUrl()}</code>
+                            {_t(
+                                "Homeserver is <code>%(homeserverUrl)s</code>",
+                                {
+                                    homeserverUrl: MatrixClientPeg.get().getHomeserverUrl(),
+                                },
+                                {
+                                    code: (sub) => <code>{sub}</code>,
+                                },
+                            )}
                         </div>
                         <div>
-                            {_t("Identity server is")} <code>{MatrixClientPeg.get().getIdentityServerUrl()}</code>
+                            {_t(
+                                "Identity server is <code>%(identityServerUrl)s</code>",
+                                {
+                                    identityServerUrl: MatrixClientPeg.get().getIdentityServerUrl(),
+                                },
+                                {
+                                    code: (sub) => <code>{sub}</code>,
+                                },
+                            )}
                         </div>
                         <details>
                             <summary>{_t("Access Token")}</summary>
diff --git a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx
index e4380f2aa62..889b1e43872 100644
--- a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx
@@ -23,38 +23,41 @@ import { SettingLevel } from "../../../../../settings/SettingLevel";
 import SdkConfig from "../../../../../SdkConfig";
 import BetaCard from "../../../beta/BetaCard";
 import SettingsFlag from "../../../elements/SettingsFlag";
-import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
-import { LabGroup, labGroupNames } from "../../../../../settings/Settings";
+import { defaultWatchManager, LabGroup, labGroupNames } from "../../../../../settings/Settings";
 import { EnhancedMap } from "../../../../../utils/maps";
+import { arrayHasDiff } from "../../../../../utils/arrays";
 
-interface IState {
-    showJumpToDate: boolean;
-    showExploringPublicSpaces: boolean;
+interface State {
+    labs: string[];
+    betas: string[];
 }
 
-export default class LabsUserSettingsTab extends React.Component<{}, IState> {
+export default class LabsUserSettingsTab extends React.Component<{}, State> {
+    private readonly features = SettingsStore.getFeatureSettingNames();
+
     public constructor(props: {}) {
         super(props);
 
-        const cli = MatrixClientPeg.get();
-
-        cli.doesServerSupportUnstableFeature("org.matrix.msc3030").then((showJumpToDate) => {
-            this.setState({ showJumpToDate });
-        });
+        this.state = {
+            betas: [],
+            labs: [],
+        };
+    }
 
-        cli.doesServerSupportUnstableFeature("org.matrix.msc3827.stable").then((showExploringPublicSpaces) => {
-            this.setState({ showExploringPublicSpaces });
+    public componentDidMount(): void {
+        this.features.forEach((feature) => {
+            defaultWatchManager.watchSetting(feature, null, this.onChange);
         });
+        this.onChange();
+    }
 
-        this.state = {
-            showJumpToDate: false,
-            showExploringPublicSpaces: false,
-        };
+    public componentWillUnmount(): void {
+        defaultWatchManager.unwatchSetting(this.onChange);
     }
 
-    public render(): React.ReactNode {
-        const features = SettingsStore.getFeatureSettingNames();
-        const [labs, betas] = features.reduce(
+    private onChange = (): void => {
+        const features = SettingsStore.getFeatureSettingNames().filter((f) => SettingsStore.isEnabled(f));
+        const [_labs, betas] = features.reduce(
             (arr, f) => {
                 arr[SettingsStore.getBetaInfo(f) ? 1 : 0].push(f);
                 return arr;
@@ -62,21 +65,28 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
             [[], []] as [string[], string[]],
         );
 
-        let betaSection;
-        if (betas.length) {
+        const labs = SdkConfig.get("show_labs_settings") ? _labs : [];
+        if (arrayHasDiff(labs, this.state.labs) || arrayHasDiff(betas, this.state.betas)) {
+            this.setState({ labs, betas });
+        }
+    };
+
+    public render(): React.ReactNode {
+        let betaSection: JSX.Element | undefined;
+        if (this.state.betas.length) {
             betaSection = (
                 <div data-testid="labs-beta-section" className="mx_SettingsTab_section">
-                    {betas.map((f) => (
+                    {this.state.betas.map((f) => (
                         <BetaCard key={f} featureId={f} />
                     ))}
                 </div>
             );
         }
 
-        let labsSections;
-        if (SdkConfig.get("show_labs_settings")) {
+        let labsSections: JSX.Element | undefined;
+        if (this.state.labs.length) {
             const groups = new EnhancedMap<LabGroup, JSX.Element[]>();
-            labs.forEach((f) => {
+            this.state.labs.forEach((f) => {
                 groups
                     .getOrCreate(SettingsStore.getLabGroup(f), [])
                     .push(<SettingsFlag level={SettingLevel.DEVICE} name={f} key={f} />);
@@ -101,30 +111,6 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
                     />,
                 );
 
-            if (this.state.showJumpToDate) {
-                groups
-                    .getOrCreate(LabGroup.Messaging, [])
-                    .push(
-                        <SettingsFlag
-                            key="feature_jump_to_date"
-                            name="feature_jump_to_date"
-                            level={SettingLevel.DEVICE}
-                        />,
-                    );
-            }
-
-            if (this.state.showExploringPublicSpaces) {
-                groups
-                    .getOrCreate(LabGroup.Spaces, [])
-                    .push(
-                        <SettingsFlag
-                            key="feature_exploring_public_spaces"
-                            name="feature_exploring_public_spaces"
-                            level={SettingLevel.DEVICE}
-                        />,
-                    );
-            }
-
             labsSections = (
                 <>
                     {sortBy(Array.from(groups.entries()), "0").map(([group, flags]) => (
diff --git a/src/components/views/spaces/SpaceChildrenPicker.tsx b/src/components/views/spaces/SpaceChildrenPicker.tsx
index 3cf63fd0ad2..4201b7db1a0 100644
--- a/src/components/views/spaces/SpaceChildrenPicker.tsx
+++ b/src/components/views/spaces/SpaceChildrenPicker.tsx
@@ -23,6 +23,7 @@ import QueryMatcher from "../../../autocomplete/QueryMatcher";
 import SearchBox from "../../structures/SearchBox";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { Entry } from "../dialogs/AddExistingToSpaceDialog";
+import { filterBoolean } from "../../../utils/arrays";
 
 enum Target {
     All = "All",
@@ -53,7 +54,7 @@ const SpecificChildrenPicker: React.FC<ISpecificChildrenPickerProps> = ({
 
         const matcher = new QueryMatcher<Room>(rooms, {
             keys: ["name"],
-            funcs: [(r) => [r.getCanonicalAlias(), ...r.getAltAliases()].filter(Boolean) as string[]],
+            funcs: [(r) => filterBoolean([r.getCanonicalAlias(), ...r.getAltAliases()])],
             shouldMatchWordsOnly: false,
         });
 
diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx
index 3a23b4074be..ec383f6f5e6 100644
--- a/src/components/views/spaces/SpaceCreateMenu.tsx
+++ b/src/components/views/spaces/SpaceCreateMenu.tsx
@@ -56,7 +56,7 @@ export const createSpace = async (
     avatar?: string | File,
     createOpts: Partial<ICreateRoomOpts> = {},
     otherOpts: Partial<Omit<ICreateOpts, "createOpts">> = {},
-): Promise<string> => {
+): Promise<string | null> => {
     return createRoom({
         createOpts: {
             name,
@@ -139,7 +139,7 @@ export const SpaceFeedbackPrompt: React.FC<{
                         rageshakeData: Object.fromEntries(
                             ["Spaces.allRoomsInHome", "Spaces.enabledMetaSpaces"].map((k) => [
                                 k,
-                                SettingsStore.getValue(k),
+                                String(SettingsStore.getValue(k)),
                             ]),
                         ),
                     });
@@ -179,7 +179,7 @@ export const SpaceCreateForm: React.FC<ISpaceCreateFormProps> = ({
     children,
 }) => {
     const cli = useContext(MatrixClientContext);
-    const domain = cli.getDomain();
+    const domain = cli.getDomain() ?? undefined;
 
     const onKeyDown = (ev: KeyboardEvent): void => {
         const action = getKeyBindingsManager().getAccessibilityAction(ev);
@@ -231,7 +231,7 @@ export const SpaceCreateForm: React.FC<ISpaceCreateFormProps> = ({
                 name="spaceTopic"
                 element="textarea"
                 label={_t("Description")}
-                value={topic}
+                value={topic ?? ""}
                 onChange={(ev) => setTopic(ev.target.value)}
                 rows={3}
                 disabled={busy}
@@ -261,14 +261,18 @@ const SpaceCreateMenu: React.FC<{
 
         setBusy(true);
         // require & validate the space name field
-        if (!(await spaceNameField.current.validate({ allowEmpty: false }))) {
+        if (spaceNameField.current && !(await spaceNameField.current.validate({ allowEmpty: false }))) {
             spaceNameField.current.focus();
             spaceNameField.current.validate({ allowEmpty: false, focused: true });
             setBusy(false);
             return;
         }
 
-        if (visibility === Visibility.Public && !(await spaceAliasField.current.validate({ allowEmpty: false }))) {
+        if (
+            spaceAliasField.current &&
+            visibility === Visibility.Public &&
+            !(await spaceAliasField.current.validate({ allowEmpty: false }))
+        ) {
             spaceAliasField.current.focus();
             spaceAliasField.current.validate({ allowEmpty: false, focused: true });
             setBusy(false);
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 92d919c5d20..a138b909e0e 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -233,6 +233,7 @@ const CreateSpaceButton: React.FC<Pick<IInnerSpacePanelProps, "isPanelCollapsed"
                 collapsed: isPanelCollapsed,
             })}
             role="treeitem"
+            aria-selected={false}
         >
             <SpaceButton
                 data-testid="create-space-button"
diff --git a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
index 2215d148f63..329a580b798 100644
--- a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
+++ b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
@@ -24,17 +24,16 @@ import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import SpaceBasicSettings from "./SpaceBasicSettings";
 import { avatarUrlForRoom } from "../../../Avatar";
-import { IDialogProps } from "../dialogs/IDialogProps";
 import { htmlSerializeFromMdIfNeeded } from "../../../editor/serialize";
 import { leaveSpace } from "../../../utils/leave-behaviour";
 import { getTopic } from "../../../hooks/room/useTopic";
 
-interface IProps extends IDialogProps {
+interface IProps {
     matrixClient: MatrixClient;
     space: Room;
 }
 
-const SpaceSettingsGeneralTab: React.FC<IProps> = ({ matrixClient: cli, space, onFinished }) => {
+const SpaceSettingsGeneralTab: React.FC<IProps> = ({ matrixClient: cli, space }) => {
     const [busy, setBusy] = useState(false);
     const [error, setError] = useState("");
 
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index 8338101794f..a2f8719add0 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -185,7 +185,7 @@ interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
     onExpand?: Function;
     parents?: Set<string>;
     innerRef?: LegacyRef<HTMLLIElement>;
-    dragHandleProps?: DraggableProvidedDragHandleProps;
+    dragHandleProps?: DraggableProvidedDragHandleProps | null;
 }
 
 interface IItemState {
diff --git a/src/components/views/toasts/VerificationRequestToast.tsx b/src/components/views/toasts/VerificationRequestToast.tsx
index b1f76d2d2a8..b62303076e4 100644
--- a/src/components/views/toasts/VerificationRequestToast.tsx
+++ b/src/components/views/toasts/VerificationRequestToast.tsx
@@ -174,13 +174,13 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
             }
         }
         const declineLabel =
-            this.state.counter === 0 ? _t("Decline") : _t("Decline (%(counter)s)", { counter: this.state.counter });
+            this.state.counter === 0 ? _t("Ignore") : _t("Ignore (%(counter)s)", { counter: this.state.counter });
 
         return (
             <GenericToast
                 description={description}
                 detail={detail}
-                acceptLabel={_t("Accept")}
+                acceptLabel={_t("Verify Session")}
                 onAccept={this.accept}
                 rejectLabel={declineLabel}
                 onReject={this.cancel}
diff --git a/src/components/views/voip/LegacyCallView.tsx b/src/components/views/voip/LegacyCallView.tsx
index 1e8b4621f9a..86be87608d5 100644
--- a/src/components/views/voip/LegacyCallView.tsx
+++ b/src/components/views/voip/LegacyCallView.tsx
@@ -290,7 +290,7 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
             isScreensharing = await this.props.call.setScreensharingEnabled(false);
         } else {
             if (PlatformPeg.get()?.supportsDesktopCapturer()) {
-                const { finished } = Modal.createDialog<[string]>(DesktopCapturerSourcePicker);
+                const { finished } = Modal.createDialog(DesktopCapturerSourcePicker);
                 const [source] = await finished;
                 if (!source) return;
 
@@ -430,7 +430,8 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
         const { pipMode, call, onResize } = this.props;
         const { isLocalOnHold, isRemoteOnHold, sidebarShown, primaryFeed, secondaryFeed, sidebarFeeds } = this.state;
 
-        const callRoom = MatrixClientPeg.get().getRoom(call.roomId) ?? undefined;
+        const callRoomId = LegacyCallHandler.instance.roomIdForCall(call);
+        const callRoom = (callRoomId ? MatrixClientPeg.get().getRoom(callRoomId) : undefined) ?? undefined;
         const avatarSize = pipMode ? 76 : 160;
         const transfereeCall = LegacyCallHandler.instance.getTransfereeForCallId(call.callId);
         const isOnHold = isLocalOnHold || isRemoteOnHold;
@@ -527,23 +528,44 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
                 </div>
             );
         } else if (pipMode) {
+            // We've already checked that we have feeds so we cast away the optional when passing the feed
             return (
                 <div className="mx_LegacyCallView_content" onMouseMove={this.onMouseMove}>
-                    <VideoFeed feed={primaryFeed} call={call} pipMode={pipMode} onResize={onResize} primary={true} />
+                    <VideoFeed
+                        feed={primaryFeed as CallFeed}
+                        call={call}
+                        pipMode={pipMode}
+                        onResize={onResize}
+                        primary={true}
+                    />
                 </div>
             );
         } else if (secondaryFeed) {
             return (
                 <div className="mx_LegacyCallView_content" onMouseMove={this.onMouseMove}>
-                    <VideoFeed feed={primaryFeed} call={call} pipMode={pipMode} onResize={onResize} primary={true} />
+                    <VideoFeed
+                        feed={primaryFeed as CallFeed}
+                        call={call}
+                        pipMode={pipMode}
+                        onResize={onResize}
+                        primary={true}
+                    />
                     {secondaryFeedElement}
                 </div>
             );
         } else {
             return (
                 <div className="mx_LegacyCallView_content" onMouseMove={this.onMouseMove}>
-                    <VideoFeed feed={primaryFeed} call={call} pipMode={pipMode} onResize={onResize} primary={true} />
-                    {sidebarShown && <LegacyCallViewSidebar feeds={sidebarFeeds} call={call} pipMode={pipMode} />}
+                    <VideoFeed
+                        feed={primaryFeed as CallFeed}
+                        call={call}
+                        pipMode={pipMode}
+                        onResize={onResize}
+                        primary={true}
+                    />
+                    {sidebarShown && (
+                        <LegacyCallViewSidebar feeds={sidebarFeeds} call={call} pipMode={Boolean(pipMode)} />
+                    )}
                 </div>
             );
         }
diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx
index 0ff66fc4e8f..471bcb03a0e 100644
--- a/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx
+++ b/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx
@@ -34,6 +34,7 @@ import {
 import { _t } from "../../../../languageHandler";
 import DeviceContextMenu from "../../context_menus/DeviceContextMenu";
 import { MediaDeviceKindEnum } from "../../../../MediaDeviceHandler";
+import { ButtonEvent } from "../../elements/AccessibleButton";
 
 // Height of the header duplicated from CSS because we need to subtract it from our max
 // height to get the max height of the video
@@ -46,7 +47,6 @@ interface IButtonProps extends Omit<React.ComponentProps<typeof AccessibleToolti
     className: string;
     onLabel?: string;
     offLabel?: string;
-    onClick: (event: React.MouseEvent) => void;
 }
 
 const LegacyCallViewToggleButton: React.FC<IButtonProps> = ({
@@ -86,7 +86,7 @@ const LegacyCallViewDropdownButton: React.FC<IDropdownButtonProps> = ({ state, d
         mx_LegacyCallViewButtons_dropdownButton_collapsed: !menuDisplayed,
     });
 
-    const onClick = (event: React.MouseEvent): void => {
+    const onClick = (event: ButtonEvent): void => {
         event.stopPropagation();
         openMenu();
     };
diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx
index 35fb851f4a2..503c53ec66e 100644
--- a/src/components/views/voip/VideoFeed.tsx
+++ b/src/components/views/voip/VideoFeed.tsx
@@ -23,7 +23,9 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
 
 import SettingsStore from "../../../settings/SettingsStore";
-import MemberAvatar from "../avatars/MemberAvatar";
+import LegacyCallHandler from "../../../LegacyCallHandler";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import RoomAvatar from "../avatars/RoomAvatar";
 
 interface IProps {
     call: MatrixCall;
@@ -197,7 +199,8 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
 
         let content;
         if (this.state.videoMuted) {
-            const member = this.props.feed.getMember();
+            const callRoomId = LegacyCallHandler.instance.roomIdForCall(this.props.call);
+            const callRoom = (callRoomId ? MatrixClientPeg.get().getRoom(callRoomId) : undefined) ?? undefined;
 
             let avatarSize;
             if (pipMode && primary) avatarSize = 76;
@@ -205,7 +208,7 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
             else if (!pipMode && primary) avatarSize = 160;
             else; // TBD
 
-            content = <MemberAvatar member={member} height={avatarSize} width={avatarSize} />;
+            content = <RoomAvatar room={callRoom} height={avatarSize} width={avatarSize} />;
         } else {
             const videoClasses = classnames("mx_VideoFeed_video", {
                 mx_VideoFeed_video_mirror:
diff --git a/src/contexts/SDKContext.ts b/src/contexts/SDKContext.ts
index 53e5d8a72bb..3254e69aab8 100644
--- a/src/contexts/SDKContext.ts
+++ b/src/contexts/SDKContext.ts
@@ -21,6 +21,7 @@ import defaultDispatcher from "../dispatcher/dispatcher";
 import LegacyCallHandler from "../LegacyCallHandler";
 import { PosthogAnalytics } from "../PosthogAnalytics";
 import { SlidingSyncManager } from "../SlidingSyncManager";
+import { AccountPasswordStore } from "../stores/AccountPasswordStore";
 import { MemberListStore } from "../stores/MemberListStore";
 import { RoomNotificationStateStore } from "../stores/notifications/RoomNotificationStateStore";
 import RightPanelStore from "../stores/right-panel/RightPanelStore";
@@ -73,6 +74,7 @@ export class SdkContextClass {
     protected _VoiceBroadcastRecordingsStore?: VoiceBroadcastRecordingsStore;
     protected _VoiceBroadcastPreRecordingStore?: VoiceBroadcastPreRecordingStore;
     protected _VoiceBroadcastPlaybacksStore?: VoiceBroadcastPlaybacksStore;
+    protected _AccountPasswordStore?: AccountPasswordStore;
 
     /**
      * Automatically construct stores which need to be created eagerly so they can register with
@@ -176,4 +178,11 @@ export class SdkContextClass {
         }
         return this._VoiceBroadcastPlaybacksStore;
     }
+
+    public get accountPasswordStore(): AccountPasswordStore {
+        if (!this._AccountPasswordStore) {
+            this._AccountPasswordStore = new AccountPasswordStore();
+        }
+        return this._AccountPasswordStore;
+    }
 }
diff --git a/src/customisations/UserIdentifier.ts b/src/customisations/UserIdentifier.ts
index 40ad641a227..12e0004783c 100644
--- a/src/customisations/UserIdentifier.ts
+++ b/src/customisations/UserIdentifier.ts
@@ -31,7 +31,7 @@ function getDisplayUserIdentifier(
 // them all as optional. This allows customisers to only define and export the
 // customisations they need while still maintaining type safety.
 export interface IUserIdentifierCustomisations {
-    getDisplayUserIdentifier?: typeof getDisplayUserIdentifier;
+    getDisplayUserIdentifier: typeof getDisplayUserIdentifier;
 }
 
 // A real customisation module will define and export one or more of the
diff --git a/src/dispatcher/payloads/JoinRoomErrorPayload.ts b/src/dispatcher/payloads/JoinRoomErrorPayload.ts
index cbd5332dbc9..b393c14b328 100644
--- a/src/dispatcher/payloads/JoinRoomErrorPayload.ts
+++ b/src/dispatcher/payloads/JoinRoomErrorPayload.ts
@@ -23,5 +23,5 @@ export interface JoinRoomErrorPayload extends Pick<ActionPayload, "action"> {
     action: Action.JoinRoomError;
 
     roomId: string;
-    err?: MatrixError;
+    err: MatrixError;
 }
diff --git a/src/dispatcher/payloads/OpenInviteDialogPayload.ts b/src/dispatcher/payloads/OpenInviteDialogPayload.ts
index eb0b11e20d0..add3e37a2cb 100644
--- a/src/dispatcher/payloads/OpenInviteDialogPayload.ts
+++ b/src/dispatcher/payloads/OpenInviteDialogPayload.ts
@@ -19,12 +19,12 @@ import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 
 import { ActionPayload } from "../payloads";
 import { Action } from "../actions";
-import { AnyInviteKind } from "../../components/views/dialogs/InviteDialogTypes";
+import { InviteKind } from "../../components/views/dialogs/InviteDialogTypes";
 
 export interface OpenInviteDialogPayload extends ActionPayload {
     action: Action.OpenInviteDialog;
 
-    kind: AnyInviteKind;
+    kind: InviteKind;
     onFinishedCallback: Optional<(results: boolean[]) => void>;
 
     call?: MatrixCall;
diff --git a/src/editor/commands.tsx b/src/editor/commands.tsx
index f65507054be..71f9b678b32 100644
--- a/src/editor/commands.tsx
+++ b/src/editor/commands.tsx
@@ -59,7 +59,7 @@ export function getSlashCommand(model: EditorModel): [Command | undefined, strin
 
 export async function runSlashCommand(
     cmd: Command,
-    args: string,
+    args: string | undefined,
     roomId: string,
     threadId: string | null,
 ): Promise<[content: IContent | null, success: boolean]> {
diff --git a/src/editor/model.ts b/src/editor/model.ts
index 83f0a232f6c..695e544c225 100644
--- a/src/editor/model.ts
+++ b/src/editor/model.ts
@@ -45,7 +45,7 @@ import { Caret } from "./caret";
  */
 
 type TransformCallback = (caretPosition: DocumentPosition, inputType: string, diff: IDiff) => number | void;
-type UpdateCallback = (caret: Caret, inputType?: string, diff?: IDiff) => void;
+type UpdateCallback = (caret?: Caret, inputType?: string, diff?: IDiff) => void;
 type ManualTransformCallback = () => Caret;
 
 export default class EditorModel {
@@ -252,7 +252,7 @@ export default class EditorModel {
     }
 
     private onAutoComplete = ({ replaceParts, close }: ICallback): void => {
-        let pos;
+        let pos: DocumentPosition | undefined;
         if (replaceParts) {
             this._parts.splice(this.autoCompletePartIdx, this.autoCompletePartCount, ...replaceParts);
             this.autoCompletePartCount = replaceParts.length;
@@ -380,13 +380,15 @@ export default class EditorModel {
             // reset it to insert as first part
             index = 0;
         }
-        while (str) {
-            const newPart = this._partCreator.createPartForInput(str, index, inputType);
-            const oldStr = str;
-            str = newPart.appendUntilRejected(str, inputType);
-            if (str === oldStr) {
+
+        let it: string | undefined = str;
+        while (it) {
+            const newPart = this._partCreator.createPartForInput(it, index, inputType);
+            const oldStr = it;
+            it = newPart.appendUntilRejected(it, inputType);
+            if (it === oldStr) {
                 // nothing changed, break out of this infinite loop and log an error
-                console.error(`Failed to update model for input (str ${str}) (type ${inputType})`);
+                console.error(`Failed to update model for input (str ${it}) (type ${inputType})`);
                 break;
             }
             this.insertPart(index, newPart);
diff --git a/src/email.ts b/src/email.ts
index 24022064a25..7a9d4769bca 100644
--- a/src/email.ts
+++ b/src/email.ts
@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,5 +23,8 @@ const EMAIL_ADDRESS_REGEX = new RegExp(
 );
 
 export function looksValid(email: string): boolean {
+    // short circuit regex with this basic check
+    if (email.indexOf("@") < 1) return false;
+
     return EMAIL_ADDRESS_REGEX.test(email);
 }
diff --git a/src/hooks/spotlight/useRecentSearches.ts b/src/hooks/spotlight/useRecentSearches.ts
index 0c7c2cf53a2..ec416ee4ce3 100644
--- a/src/hooks/spotlight/useRecentSearches.ts
+++ b/src/hooks/spotlight/useRecentSearches.ts
@@ -20,12 +20,13 @@ import { Room } from "matrix-js-sdk/src/matrix";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import { SettingLevel } from "../../settings/SettingLevel";
 import SettingsStore from "../../settings/SettingsStore";
+import { filterBoolean } from "../../utils/arrays";
 
 export const useRecentSearches = (): [Room[], () => void] => {
     const [rooms, setRooms] = useState(() => {
         const cli = MatrixClientPeg.get();
         const recents = SettingsStore.getValue<string[]>("SpotlightSearch.recentSearches", null);
-        return recents.map((r) => cli.getRoom(r)).filter(Boolean) as Room[];
+        return filterBoolean(recents.map((r) => cli.getRoom(r)));
     });
 
     return [
diff --git a/src/hooks/useEventEmitter.ts b/src/hooks/useEventEmitter.ts
index 40176d2c261..54a5a7a0170 100644
--- a/src/hooks/useEventEmitter.ts
+++ b/src/hooks/useEventEmitter.ts
@@ -67,7 +67,7 @@ type Mapper<T> = (...args: any[]) => T;
  * {@link useEventEmitterState}
  */
 export function useTypedEventEmitterState<T, Events extends string, Arguments extends ListenerMap<Events>>(
-    emitter: TypedEventEmitter<Events, Arguments>,
+    emitter: TypedEventEmitter<Events, Arguments> | undefined,
     eventName: Events,
     fn: Mapper<T>,
 ): T {
diff --git a/src/hooks/usePublicRoomDirectory.ts b/src/hooks/usePublicRoomDirectory.ts
index d4862b6e262..a14142ebcf7 100644
--- a/src/hooks/usePublicRoomDirectory.ts
+++ b/src/hooks/usePublicRoomDirectory.ts
@@ -107,7 +107,7 @@ export const usePublicRoomDirectory = (): {
                         "org.matrix.msc3827.stable",
                     ))
                         ? Array.from<RoomType | null>(roomTypes)
-                        : null,
+                        : undefined,
                 };
             }
 
diff --git a/src/hooks/useUserOnboardingContext.ts b/src/hooks/useUserOnboardingContext.ts
index 234fc997a90..a3ea8ed3193 100644
--- a/src/hooks/useUserOnboardingContext.ts
+++ b/src/hooks/useUserOnboardingContext.ts
@@ -84,7 +84,7 @@ function useUserOnboardingContextValue<T>(defaultValue: T, callback: (cli: Matri
 
 export function useUserOnboardingContext(): UserOnboardingContext {
     const hasAvatar = useUserOnboardingContextValue(false, async (cli) => {
-        const profile = await cli.getProfileInfo(cli.getUserId());
+        const profile = await cli.getProfileInfo(cli.getUserId()!);
         return Boolean(profile?.avatar_url);
     });
     const hasDevices = useUserOnboardingContextValue(false, async (cli) => {
diff --git a/src/indexing/BaseEventIndexManager.ts b/src/indexing/BaseEventIndexManager.ts
index 11b1b195da6..1234496b44b 100644
--- a/src/indexing/BaseEventIndexManager.ts
+++ b/src/indexing/BaseEventIndexManager.ts
@@ -21,7 +21,7 @@ import { Direction } from "matrix-js-sdk/src/matrix";
 /* eslint-disable camelcase */
 export interface ICrawlerCheckpoint {
     roomId: string;
-    token: string;
+    token: string | null;
     fullCrawl?: boolean;
     direction: Direction;
 }
diff --git a/src/indexing/EventIndex.ts b/src/indexing/EventIndex.ts
index fbc528dec4b..bca7547b6ce 100644
--- a/src/indexing/EventIndex.ts
+++ b/src/indexing/EventIndex.ts
@@ -56,6 +56,7 @@ export default class EventIndex extends EventEmitter {
 
     public async init(): Promise<void> {
         const indexManager = PlatformPeg.get()?.getEventIndexingManager();
+        if (!indexManager) return;
 
         this.crawlerCheckpoints = await indexManager.loadCheckpoints();
         logger.log("EventIndex: Loaded checkpoints", this.crawlerCheckpoints);
@@ -93,6 +94,7 @@ export default class EventIndex extends EventEmitter {
      */
     public async addInitialCheckpoints(): Promise<void> {
         const indexManager = PlatformPeg.get()?.getEventIndexingManager();
+        if (!indexManager) return;
         const client = MatrixClientPeg.get();
         const rooms = client.getRooms();
 
@@ -160,6 +162,7 @@ export default class EventIndex extends EventEmitter {
      */
     private onSync = async (state: SyncState, prevState: SyncState | null, data?: ISyncStateData): Promise<void> => {
         const indexManager = PlatformPeg.get()?.getEventIndexingManager();
+        if (!indexManager) return;
 
         if (prevState === "PREPARED" && state === "SYNCING") {
             // If our indexer is empty we're most likely running Element the
@@ -230,6 +233,7 @@ export default class EventIndex extends EventEmitter {
      */
     private redactEvent = async (ev: MatrixEvent): Promise<void> => {
         const indexManager = PlatformPeg.get()?.getEventIndexingManager();
+        if (!indexManager) return;
 
         try {
             await indexManager.deleteEvent(ev.getAssociatedId());
@@ -355,6 +359,7 @@ export default class EventIndex extends EventEmitter {
 
     private async addRoomCheckpoint(roomId: string, fullCrawl = false): Promise<void> {
         const indexManager = PlatformPeg.get()?.getEventIndexingManager();
+        if (!indexManager) return;
         const client = MatrixClientPeg.get();
         const room = client.getRoom(roomId);
 
@@ -403,6 +408,7 @@ export default class EventIndex extends EventEmitter {
 
         const client = MatrixClientPeg.get();
         const indexManager = PlatformPeg.get()?.getEventIndexingManager();
+        if (!indexManager) return;
 
         this.crawler = {
             cancel: () => {
@@ -653,7 +659,7 @@ export default class EventIndex extends EventEmitter {
         const indexManager = PlatformPeg.get()?.getEventIndexingManager();
         this.removeListeners();
         this.stopCrawler();
-        await indexManager.closeEventIndex();
+        await indexManager?.closeEventIndex();
     }
 
     /**
@@ -665,9 +671,9 @@ export default class EventIndex extends EventEmitter {
      * @return {Promise<IResultRoomEvents[]>} A promise that will resolve to an array
      * of search results once the search is done.
      */
-    public async search(searchArgs: ISearchArgs): Promise<IResultRoomEvents> {
+    public async search(searchArgs: ISearchArgs): Promise<IResultRoomEvents | undefined> {
         const indexManager = PlatformPeg.get()?.getEventIndexingManager();
-        return indexManager.searchEventIndex(searchArgs);
+        return indexManager?.searchEventIndex(searchArgs);
     }
 
     /**
@@ -699,6 +705,7 @@ export default class EventIndex extends EventEmitter {
     ): Promise<MatrixEvent[]> {
         const client = MatrixClientPeg.get();
         const indexManager = PlatformPeg.get()?.getEventIndexingManager();
+        if (!indexManager) return [];
 
         const loadArgs: ILoadArgs = {
             roomId: room.roomId,
diff --git a/src/integrations/IntegrationManagers.ts b/src/integrations/IntegrationManagers.ts
index c1f8eb5a3c8..9adcb561623 100644
--- a/src/integrations/IntegrationManagers.ts
+++ b/src/integrations/IntegrationManagers.ts
@@ -74,8 +74,8 @@ export class IntegrationManagers {
     }
 
     private setupConfiguredManager(): void {
-        const apiUrl: string = SdkConfig.get("integrations_rest_url");
-        const uiUrl: string = SdkConfig.get("integrations_ui_url");
+        const apiUrl = SdkConfig.get("integrations_rest_url");
+        const uiUrl = SdkConfig.get("integrations_ui_url");
 
         if (apiUrl && uiUrl) {
             this.managers.push(new IntegrationManagerInstance(Kind.Config, apiUrl, uiUrl));
diff --git a/src/linkify-matrix.ts b/src/linkify-matrix.ts
index 29258558ce3..3369a18157b 100644
--- a/src/linkify-matrix.ts
+++ b/src/linkify-matrix.ts
@@ -172,16 +172,16 @@ export const options: Opts = {
                 return {
                     // @ts-ignore see https://linkify.js.org/docs/options.html
                     click: function (e: MouseEvent) {
-                        const userId = parsePermalink(href).userId;
-                        onUserClick(e, userId);
+                        const userId = parsePermalink(href)?.userId;
+                        if (userId) onUserClick(e, userId);
                     },
                 };
             case Type.RoomAlias:
                 return {
                     // @ts-ignore see https://linkify.js.org/docs/options.html
                     click: function (e: MouseEvent) {
-                        const alias = parsePermalink(href).roomIdOrAlias;
-                        onAliasClick(e, alias);
+                        const alias = parsePermalink(href)?.roomIdOrAlias;
+                        if (alias) onAliasClick(e, alias);
                     },
                 };
         }
diff --git a/src/mjolnir/BanList.ts b/src/mjolnir/BanList.ts
index d3c4fbc143a..7eec5d3b26c 100644
--- a/src/mjolnir/BanList.ts
+++ b/src/mjolnir/BanList.ts
@@ -29,7 +29,7 @@ export const ROOM_RULE_TYPES = [RULE_ROOM, "m.room.rule.room", "org.matrix.mjoln
 export const SERVER_RULE_TYPES = [RULE_SERVER, "m.room.rule.server", "org.matrix.mjolnir.rule.server"];
 export const ALL_RULE_TYPES = [...USER_RULE_TYPES, ...ROOM_RULE_TYPES, ...SERVER_RULE_TYPES];
 
-export function ruleTypeToStable(rule: string): string {
+export function ruleTypeToStable(rule: string): string | null {
     if (USER_RULE_TYPES.includes(rule)) {
         return RULE_USER;
     }
@@ -68,9 +68,11 @@ export class BanList {
     }
 
     public async banEntity(kind: string, entity: string, reason: string): Promise<any> {
+        const type = ruleTypeToStable(kind);
+        if (!type) return; // unknown rule type
         await MatrixClientPeg.get().sendStateEvent(
             this._roomId,
-            ruleTypeToStable(kind),
+            type,
             {
                 entity: entity,
                 reason: reason,
@@ -78,12 +80,14 @@ export class BanList {
             },
             "rule:" + entity,
         );
-        this._rules.push(new ListRule(entity, RECOMMENDATION_BAN, reason, ruleTypeToStable(kind)));
+        this._rules.push(new ListRule(entity, RECOMMENDATION_BAN, reason, type));
     }
 
     public async unbanEntity(kind: string, entity: string): Promise<any> {
+        const type = ruleTypeToStable(kind);
+        if (!type) return; // unknown rule type
         // Empty state event is effectively deleting it.
-        await MatrixClientPeg.get().sendStateEvent(this._roomId, ruleTypeToStable(kind), {}, "rule:" + entity);
+        await MatrixClientPeg.get().sendStateEvent(this._roomId, type, {}, "rule:" + entity);
         this._rules = this._rules.filter((r) => {
             if (r.kind !== ruleTypeToStable(kind)) return true;
             if (r.entity !== entity) return true;
@@ -103,6 +107,7 @@ export class BanList {
                 if (!ev.getStateKey()) continue;
 
                 const kind = ruleTypeToStable(eventType);
+                if (!kind) continue; // unknown type
 
                 const entity = ev.getContent()["entity"];
                 const recommendation = ev.getContent()["recommendation"];
diff --git a/src/modules/ProxiedModuleApi.ts b/src/modules/ProxiedModuleApi.ts
index 56fc3ff1215..818a1f9fcdf 100644
--- a/src/modules/ProxiedModuleApi.ts
+++ b/src/modules/ProxiedModuleApi.ts
@@ -88,7 +88,7 @@ export class ProxiedModuleApi implements ModuleApi {
                 },
                 "mx_CompoundDialog",
             ).finished.then(([didOkOrSubmit, model]) => {
-                resolve({ didOkOrSubmit, model });
+                resolve({ didOkOrSubmit, model: model as M });
             });
         });
     }
diff --git a/src/notifications/VectorPushRulesDefinitions.ts b/src/notifications/VectorPushRulesDefinitions.ts
index 81a9c84a4e1..cfa77342828 100644
--- a/src/notifications/VectorPushRulesDefinitions.ts
+++ b/src/notifications/VectorPushRulesDefinitions.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { IAnnotatedPushRule, PushRuleAction } from "matrix-js-sdk/src/@types/PushRules";
+import { IAnnotatedPushRule, PushRuleAction, RuleId } from "matrix-js-sdk/src/@types/PushRules";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _td } from "../languageHandler";
@@ -29,15 +29,22 @@ type StateToActionsMap = {
 interface IVectorPushRuleDefinition {
     description: string;
     vectorStateToActions: StateToActionsMap;
+    /**
+     * Rules that should be updated to be kept in sync
+     * when this rule changes
+     */
+    syncedRuleIds?: (RuleId | string)[];
 }
 
 class VectorPushRuleDefinition {
     public readonly description: string;
     public readonly vectorStateToActions: StateToActionsMap;
+    public readonly syncedRuleIds?: (RuleId | string)[];
 
     public constructor(opts: IVectorPushRuleDefinition) {
         this.description = opts.description;
         this.vectorStateToActions = opts.vectorStateToActions;
+        this.syncedRuleIds = opts.syncedRuleIds;
     }
 
     // Translate the rule actions and its enabled value into vector state
@@ -125,6 +132,12 @@ export const VectorPushRulesDefinitions: Record<string, VectorPushRuleDefinition
             [VectorState.Loud]: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
             [VectorState.Off]: StandardActions.ACTION_DONT_NOTIFY,
         },
+        syncedRuleIds: [
+            RuleId.PollStartOneToOne,
+            RuleId.PollStartOneToOneUnstable,
+            RuleId.PollEndOneToOne,
+            RuleId.PollEndOneToOneUnstable,
+        ],
     }),
 
     // Encrypted messages just sent to the user in a 1:1 room
@@ -147,6 +160,7 @@ export const VectorPushRulesDefinitions: Record<string, VectorPushRuleDefinition
             [VectorState.Loud]: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
             [VectorState.Off]: StandardActions.ACTION_DONT_NOTIFY,
         },
+        syncedRuleIds: [RuleId.PollStart, RuleId.PollStartUnstable, RuleId.PollEnd, RuleId.PollEndUnstable],
     }),
 
     // Encrypted messages just sent to a group chat room
diff --git a/src/rageshake/submit-rageshake.ts b/src/rageshake/submit-rageshake.ts
index ec0d6b45941..dce87998297 100644
--- a/src/rageshake/submit-rageshake.ts
+++ b/src/rageshake/submit-rageshake.ts
@@ -40,15 +40,12 @@ async function collectBugReport(opts: IOpts = {}, gzipLogs = true): Promise<Form
     const progressCallback = opts.progressCallback || ((): void => {});
 
     progressCallback(_t("Collecting app version information"));
-    let version = "UNKNOWN";
+    let version: string | undefined;
     try {
-        version = await PlatformPeg.get().getAppVersion();
+        version = await PlatformPeg.get()?.getAppVersion();
     } catch (err) {} // PlatformPeg already logs this.
 
-    let userAgent = "UNKNOWN";
-    if (window.navigator && window.navigator.userAgent) {
-        userAgent = window.navigator.userAgent;
-    }
+    const userAgent = window.navigator?.userAgent ?? "UNKNOWN";
 
     let installedPWA = "UNKNOWN";
     try {
@@ -69,7 +66,7 @@ async function collectBugReport(opts: IOpts = {}, gzipLogs = true): Promise<Form
     const body = new FormData();
     body.append("text", opts.userText || "User did not supply any additional text.");
     body.append("app", opts.customApp || "element-web");
-    body.append("version", version);
+    body.append("version", version ?? "UNKNOWN");
     body.append("user_agent", userAgent);
     body.append("installed_pwa", installedPWA);
     body.append("touch_input", touchInput);
diff --git a/src/resizer/item.ts b/src/resizer/item.ts
index 7b16077f016..7c4b8645fc1 100644
--- a/src/resizer/item.ts
+++ b/src/resizer/item.ts
@@ -19,7 +19,7 @@ import Sizer from "./sizer";
 
 export default class ResizeItem<C extends IConfig = IConfig> {
     public readonly domNode: HTMLElement;
-    protected readonly id: string;
+    protected readonly id: string | null;
     protected reverse: boolean;
 
     public constructor(
diff --git a/src/resizer/resizer.ts b/src/resizer/resizer.ts
index a69b2c446e1..4f5c97f72cd 100644
--- a/src/resizer/resizer.ts
+++ b/src/resizer/resizer.ts
@@ -34,7 +34,7 @@ interface IClassNames {
 export interface IConfig {
     onResizeStart?(): void;
     onResizeStop?(): void;
-    onResized?(size: number, id: string, element: HTMLElement): void;
+    onResized?(size: number | null, id: string | null, element: HTMLElement): void;
     handler?: HTMLDivElement;
 }
 
@@ -51,7 +51,7 @@ export default class Resizer<C extends IConfig = IConfig> {
                 resizeHandle: HTMLDivElement,
                 resizer: Resizer,
                 sizer: Sizer,
-                container: HTMLElement,
+                container?: HTMLElement,
             ): ResizeItem;
             createSizer(containerElement: HTMLElement, vertical: boolean, reverse: boolean): Sizer;
         },
diff --git a/src/sentry.ts b/src/sentry.ts
index a9cd1f18fcc..fbb52dbb140 100644
--- a/src/sentry.ts
+++ b/src/sentry.ts
@@ -53,8 +53,8 @@ type CryptoContext = {
 };
 
 type DeviceContext = {
-    device_id: string;
-    mx_local_settings: string;
+    device_id?: string;
+    mx_local_settings: string | null;
     modernizr_missing_features?: string;
 };
 
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index d7b160767a8..6bfd33e2aa2 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -49,6 +49,10 @@ import { FontWatcher } from "./watchers/FontWatcher";
 import { BorderRadius } from "./enums/BorderRadius";
 import { SoundPack } from "./enums/SoundPack";
 import RustCryptoSdkController from "./controllers/RustCryptoSdkController";
+import ServerSupportUnstableFeatureController from "./controllers/ServerSupportUnstableFeatureController";
+import { WatchManager } from "./WatchManager";
+
+export const defaultWatchManager = new WatchManager();
 
 // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times
 const LEVELS_ROOM_SETTINGS = [
@@ -131,7 +135,7 @@ export interface IBaseSetting<T extends SettingValueType = SettingValueType> {
 
     // The supported levels are required. Preferably, use the preset arrays
     // at the top of this file to define this rather than a custom array.
-    supportedLevels?: SettingLevel[];
+    supportedLevels: SettingLevel[];
 
     // Required. Can be any data type. The value specified here should match
     // the data being stored (ie: if a boolean is used, the setting should
@@ -223,9 +227,14 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         },
     },
     "feature_exploring_public_spaces": {
+        isFeature: true,
+        labsGroup: LabGroup.Spaces,
         displayName: _td("Explore public spaces in the new search dialog"),
         supportedLevels: LEVELS_FEATURE,
         default: false,
+        controller: new ServerSupportUnstableFeatureController("feature_exploring_public_spaces", defaultWatchManager, [
+            "org.matrix.msc3827.stable",
+        ]),
     },
     "feature_msc3531_hide_messages_pending_moderation": {
         isFeature: true,
@@ -375,13 +384,14 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         default: false,
     },
     "feature_jump_to_date": {
-        // We purposely leave out `isFeature: true` so it doesn't show in Labs
-        // by default. We will conditionally show it depending on whether we can
-        // detect MSC3030 support (see LabUserSettingsTab.tsx).
-        // labsGroup: LabGroup.Messaging,
+        isFeature: true,
+        labsGroup: LabGroup.Messaging,
         displayName: _td("Jump to date (adds /jumptodate and jump to date headers)"),
         supportedLevels: LEVELS_FEATURE,
         default: false,
+        controller: new ServerSupportUnstableFeatureController("feature_jump_to_date", defaultWatchManager, [
+            "org.matrix.msc3030",
+        ]),
     },
     "RoomList.backgroundImage": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
@@ -403,6 +413,7 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         controller: new SlidingSyncController(),
     },
     "feature_sliding_sync_proxy_url": {
+        // This is not a distinct feature, it is a setting for feature_sliding_sync above
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
         default: "",
     },
diff --git a/src/settings/SettingsStore.ts b/src/settings/SettingsStore.ts
index bcc7b14509d..d03f45bcc5d 100644
--- a/src/settings/SettingsStore.ts
+++ b/src/settings/SettingsStore.ts
@@ -27,9 +27,9 @@ import RoomSettingsHandler from "./handlers/RoomSettingsHandler";
 import ConfigSettingsHandler from "./handlers/ConfigSettingsHandler";
 import { _t } from "../languageHandler";
 import dis from "../dispatcher/dispatcher";
-import { IFeature, ISetting, LabGroup, SETTINGS } from "./Settings";
+import { IFeature, ISetting, LabGroup, SETTINGS, defaultWatchManager } from "./Settings";
 import LocalEchoWrapper from "./handlers/LocalEchoWrapper";
-import { CallbackFn as WatchCallbackFn, WatchManager } from "./WatchManager";
+import { CallbackFn as WatchCallbackFn } from "./WatchManager";
 import { SettingLevel } from "./SettingLevel";
 import SettingsHandler from "./handlers/SettingsHandler";
 import { SettingUpdatedPayload } from "../dispatcher/payloads/SettingUpdatedPayload";
@@ -39,19 +39,17 @@ import dispatcher from "../dispatcher/dispatcher";
 import { ActionPayload } from "../dispatcher/payloads";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 
-const defaultWatchManager = new WatchManager();
-
 // Convert the settings to easier to manage objects for the handlers
 const defaultSettings: Record<string, any> = {};
 const invertedDefaultSettings: Record<string, boolean> = {};
 const featureNames: string[] = [];
-for (const key of Object.keys(SETTINGS)) {
-    defaultSettings[key] = SETTINGS[key].default;
-    if (SETTINGS[key].isFeature) featureNames.push(key);
-    if (SETTINGS[key].invertedSettingName) {
-        // Invert now so that the rest of the system will invert it back
-        // to what was intended.
-        invertedDefaultSettings[SETTINGS[key].invertedSettingName] = !SETTINGS[key].default;
+for (const key in SETTINGS) {
+    const setting = SETTINGS[key];
+    defaultSettings[key] = setting.default;
+    if (setting.isFeature) featureNames.push(key);
+    if (setting.invertedSettingName) {
+        // Invert now so that the rest of the system will invert it back to what was intended.
+        invertedDefaultSettings[setting.invertedSettingName] = !setting.default;
     }
 }
 
@@ -250,7 +248,7 @@ export default class SettingsStore {
             if (roomId === null) {
                 // Unregister all existing watchers and register the new one
                 rooms.forEach((roomId) => {
-                    SettingsStore.unwatchSetting(this.monitors.get(settingName)!.get(roomId));
+                    SettingsStore.unwatchSetting(this.monitors.get(settingName)!.get(roomId)!);
                 });
                 this.monitors.get(settingName)!.clear();
                 registerWatcher();
diff --git a/src/settings/WatchManager.ts b/src/settings/WatchManager.ts
index 0e3cae84358..a917d513b56 100644
--- a/src/settings/WatchManager.ts
+++ b/src/settings/WatchManager.ts
@@ -39,7 +39,7 @@ export class WatchManager {
     public unwatchSetting(cb: CallbackFn): void {
         this.watchers.forEach((map) => {
             map.forEach((callbacks) => {
-                let idx;
+                let idx: number;
                 while ((idx = callbacks.indexOf(cb)) !== -1) {
                     callbacks.splice(idx, 1);
                 }
diff --git a/src/settings/controllers/MatrixClientBackedController.ts b/src/settings/controllers/MatrixClientBackedController.ts
new file mode 100644
index 00000000000..6a68e729d0a
--- /dev/null
+++ b/src/settings/controllers/MatrixClientBackedController.ts
@@ -0,0 +1,52 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
+import SettingController from "./SettingController";
+
+// Dev note: This whole class exists in the event someone logs out and back in - we want
+// to make sure the right MatrixClient is listening for changes.
+
+/**
+ * Represents the base class for settings controllers which need access to a MatrixClient.
+ * This class performs no logic and should be overridden.
+ */
+export default abstract class MatrixClientBackedController extends SettingController {
+    private static _matrixClient: MatrixClient;
+    private static instances: MatrixClientBackedController[] = [];
+
+    public static set matrixClient(client: MatrixClient) {
+        const oldClient = MatrixClientBackedController._matrixClient;
+        MatrixClientBackedController._matrixClient = client;
+
+        for (const instance of MatrixClientBackedController.instances) {
+            instance.initMatrixClient(oldClient, client);
+        }
+    }
+
+    protected constructor() {
+        super();
+
+        MatrixClientBackedController.instances.push(this);
+    }
+
+    public get client(): MatrixClient {
+        return MatrixClientBackedController._matrixClient;
+    }
+
+    protected abstract initMatrixClient(oldClient: MatrixClient, newClient: MatrixClient): void;
+}
diff --git a/src/settings/controllers/ServerSupportUnstableFeatureController.ts b/src/settings/controllers/ServerSupportUnstableFeatureController.ts
new file mode 100644
index 00000000000..e50b673d82f
--- /dev/null
+++ b/src/settings/controllers/ServerSupportUnstableFeatureController.ts
@@ -0,0 +1,77 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { SettingLevel } from "../SettingLevel";
+import MatrixClientBackedController from "./MatrixClientBackedController";
+import { WatchManager } from "../WatchManager";
+import SettingsStore from "../SettingsStore";
+
+/**
+ * Disables a given setting if the server unstable feature it requires is not supported
+ * When a setting gets disabled or enabled from this controller it notifies the given WatchManager
+ */
+export default class ServerSupportUnstableFeatureController extends MatrixClientBackedController {
+    private enabled: boolean | undefined;
+
+    public constructor(
+        private readonly settingName: string,
+        private readonly watchers: WatchManager,
+        private readonly unstableFeatures: string[],
+        private readonly forcedValue: any = false,
+    ) {
+        super();
+    }
+
+    public get disabled(): boolean {
+        return !this.enabled;
+    }
+
+    public set disabled(v: boolean) {
+        if (!v === this.enabled) return;
+        this.enabled = !v;
+        const level = SettingsStore.firstSupportedLevel(this.settingName);
+        const settingValue = SettingsStore.getValue(this.settingName, null);
+        this.watchers.notifyUpdate(this.settingName, null, level, settingValue);
+    }
+
+    protected async initMatrixClient(oldClient: MatrixClient, newClient: MatrixClient): Promise<void> {
+        this.disabled = true;
+        let supported = true;
+        for (const feature of this.unstableFeatures) {
+            supported = await this.client.doesServerSupportUnstableFeature(feature);
+            if (!supported) break;
+        }
+        this.disabled = !supported;
+    }
+
+    public getValueOverride(
+        level: SettingLevel,
+        roomId: string,
+        calculatedValue: any,
+        calculatedAtLevel: SettingLevel | null,
+    ): any {
+        if (this.settingDisabled) {
+            return this.forcedValue;
+        }
+        return null; // no override
+    }
+
+    public get settingDisabled(): boolean {
+        return this.disabled;
+    }
+}
diff --git a/src/settings/controllers/SlidingSyncController.ts b/src/settings/controllers/SlidingSyncController.ts
index fdbea7bda0a..56149f2099f 100644
--- a/src/settings/controllers/SlidingSyncController.ts
+++ b/src/settings/controllers/SlidingSyncController.ts
@@ -29,7 +29,7 @@ export default class SlidingSyncController extends SettingController {
     }
 
     public async onChange(): Promise<void> {
-        PlatformPeg.get().reload();
+        PlatformPeg.get()?.reload();
     }
 
     public get settingDisabled(): boolean {
diff --git a/src/settings/watchers/ThemeWatcher.ts b/src/settings/watchers/ThemeWatcher.ts
index a147846f4ef..bb6c678da48 100644
--- a/src/settings/watchers/ThemeWatcher.ts
+++ b/src/settings/watchers/ThemeWatcher.ts
@@ -54,20 +54,16 @@ export default class ThemeWatcher {
         this.lightThemeWatchRef = SettingsStore.watchSetting("light_theme", null, this.onChange);
         this.darkThemeWatchRef = SettingsStore.watchSetting("dark_theme", null, this.onChange);
         this.themeInUseWatchRef = SettingsStore.watchSetting("theme_in_use", null, this.onChange);
-        if (this.preferDark.addEventListener) {
-            this.preferDark.addEventListener("change", this.onChange);
-            this.preferLight.addEventListener("change", this.onChange);
-            this.preferHighContrast.addEventListener("change", this.onChange);
-        }
+        this.preferDark.addEventListener("change", this.onChange);
+        this.preferLight.addEventListener("change", this.onChange);
+        this.preferHighContrast.addEventListener("change", this.onChange);
         this.dispatcherRef = dis.register(this.onAction);
     }
 
     public stop(): void {
-        if (this.preferDark.addEventListener) {
-            this.preferDark.removeEventListener("change", this.onChange);
-            this.preferLight.removeEventListener("change", this.onChange);
-            this.preferHighContrast.removeEventListener("change", this.onChange);
-        }
+        this.preferDark.removeEventListener("change", this.onChange);
+        this.preferLight.removeEventListener("change", this.onChange);
+        this.preferHighContrast.removeEventListener("change", this.onChange);
         if (this.themeInUseWatchRef) SettingsStore.unwatchSetting(this.themeInUseWatchRef);
         if (this.darkThemeWatchRef) SettingsStore.unwatchSetting(this.darkThemeWatchRef);
         if (this.lightThemeWatchRef) SettingsStore.unwatchSetting(this.lightThemeWatchRef);
diff --git a/src/stores/AccountPasswordStore.ts b/src/stores/AccountPasswordStore.ts
new file mode 100644
index 00000000000..7b7b5a85e98
--- /dev/null
+++ b/src/stores/AccountPasswordStore.ts
@@ -0,0 +1,43 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const PASSWORD_TIMEOUT = 5 * 60 * 1000; // five minutes
+
+/**
+ * Store for the account password.
+ * This password can be used for a short time after login
+ * to avoid requestin the password all the time for instance during e2ee setup.
+ */
+export class AccountPasswordStore {
+    private password?: string;
+    private passwordTimeoutId?: ReturnType<typeof setTimeout>;
+
+    public setPassword(password: string): void {
+        this.password = password;
+        clearTimeout(this.passwordTimeoutId);
+        this.passwordTimeoutId = setTimeout(this.clearPassword, PASSWORD_TIMEOUT);
+    }
+
+    public getPassword(): string | undefined {
+        return this.password;
+    }
+
+    public clearPassword = (): void => {
+        clearTimeout(this.passwordTimeoutId);
+        this.passwordTimeoutId = undefined;
+        this.password = undefined;
+    };
+}
diff --git a/src/stores/HostSignupStore.ts b/src/stores/HostSignupStore.ts
deleted file mode 100644
index 0b8e316f901..00000000000
--- a/src/stores/HostSignupStore.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import defaultDispatcher from "../dispatcher/dispatcher";
-import { AsyncStore } from "./AsyncStore";
-import { ActionPayload } from "../dispatcher/payloads";
-
-interface IState {
-    hostSignupActive: boolean;
-}
-
-export class HostSignupStore extends AsyncStore<IState> {
-    private static internalInstance = new HostSignupStore();
-
-    private constructor() {
-        super(defaultDispatcher, { hostSignupActive: false });
-    }
-
-    public static get instance(): HostSignupStore {
-        return HostSignupStore.internalInstance;
-    }
-
-    public get isHostSignupActive(): boolean {
-        return this.state.hostSignupActive;
-    }
-
-    public async setHostSignupActive(status: boolean): Promise<void> {
-        return this.updateState({
-            hostSignupActive: status,
-        });
-    }
-
-    protected onDispatch(payload: ActionPayload): void {
-        // Nothing to do
-    }
-}
diff --git a/src/stores/ModalWidgetStore.ts b/src/stores/ModalWidgetStore.ts
index f32d1f1fb73..479ca4fe3f4 100644
--- a/src/stores/ModalWidgetStore.ts
+++ b/src/stores/ModalWidgetStore.ts
@@ -35,7 +35,7 @@ export class ModalWidgetStore extends AsyncStoreWithClient<IState> {
         instance.start();
         return instance;
     })();
-    private modalInstance: IHandle<void[]> | null = null;
+    private modalInstance: IHandle<typeof ModalWidgetDialog> | null = null;
     private openSourceWidgetId: string | null = null;
     private openSourceWidgetRoomId: string | null = null;
 
diff --git a/src/stores/RoomViewStore.tsx b/src/stores/RoomViewStore.tsx
index 86f0f6bdb24..47bc9b959bf 100644
--- a/src/stores/RoomViewStore.tsx
+++ b/src/stores/RoomViewStore.tsx
@@ -593,7 +593,7 @@ export class RoomViewStore extends EventEmitter {
             );
         } else if (err.httpStatus === 404) {
             const invitingUserId = this.getInvitingUserId(roomId);
-            // only provide a better error message for invites
+            // provide a better error message for invites
             if (invitingUserId) {
                 // if the inviting user is on the same HS, there can only be one cause: they left.
                 if (invitingUserId.endsWith(`:${MatrixClientPeg.get().getDomain()}`)) {
@@ -602,6 +602,23 @@ export class RoomViewStore extends EventEmitter {
                     description = _t("The person who invited you has already left, or their server is offline.");
                 }
             }
+
+            // provide a more detailed error than "No known servers" when attempting to
+            // join using a room ID and no via servers
+            if (roomId === this.state.roomId && this.state.viaServers.length === 0) {
+                description = (
+                    <div>
+                        {_t(
+                            "You attempted to join using a room ID without providing a list " +
+                                "of servers to join through. Room IDs are internal identifiers and " +
+                                "cannot be used to join a room without additional information.",
+                        )}
+                        <br />
+                        <br />
+                        {_t("If you know a room address, try joining through that instead.")}
+                    </div>
+                );
+            }
         }
 
         Modal.createDialog(ErrorDialog, {
@@ -615,7 +632,9 @@ export class RoomViewStore extends EventEmitter {
             joining: false,
             joinError: payload.err,
         });
-        this.showJoinRoomError(payload.err, payload.roomId);
+        if (payload.err) {
+            this.showJoinRoomError(payload.err, payload.roomId);
+        }
     }
 
     public reset(): void {
diff --git a/src/stores/SetupEncryptionStore.ts b/src/stores/SetupEncryptionStore.ts
index baedc7de171..d2d2ee0a4d8 100644
--- a/src/stores/SetupEncryptionStore.ts
+++ b/src/stores/SetupEncryptionStore.ts
@@ -30,6 +30,7 @@ import { AccessCancelledError, accessSecretStorage } from "../SecurityManager";
 import Modal from "../Modal";
 import InteractiveAuthDialog from "../components/views/dialogs/InteractiveAuthDialog";
 import { _t } from "../languageHandler";
+import { SdkContextClass } from "../contexts/SDKContext";
 
 export enum Phase {
     Loading = 0,
@@ -224,6 +225,21 @@ export class SetupEncryptionStore extends EventEmitter {
                 const cli = MatrixClientPeg.get();
                 await cli.bootstrapCrossSigning({
                     authUploadDeviceSigningKeys: async (makeRequest): Promise<void> => {
+                        const cachedPassword = SdkContextClass.instance.accountPasswordStore.getPassword();
+
+                        if (cachedPassword) {
+                            await makeRequest({
+                                type: "m.login.password",
+                                identifier: {
+                                    type: "m.id.user",
+                                    user: cli.getUserId(),
+                                },
+                                user: cli.getUserId(),
+                                password: cachedPassword,
+                            });
+                            return;
+                        }
+
                         const { finished } = Modal.createDialog(InteractiveAuthDialog, {
                             title: _t("Setting up keys"),
                             matrixClient: cli,
diff --git a/src/stores/ThreepidInviteStore.ts b/src/stores/ThreepidInviteStore.ts
index 742856ff196..6dfb7d05610 100644
--- a/src/stores/ThreepidInviteStore.ts
+++ b/src/stores/ThreepidInviteStore.ts
@@ -82,7 +82,7 @@ export default class ThreepidInviteStore extends EventEmitter {
         const results: IPersistedThreepidInvite[] = [];
         for (let i = 0; i < localStorage.length; i++) {
             const keyName = localStorage.key(i);
-            if (!keyName.startsWith(STORAGE_PREFIX)) continue;
+            if (!keyName?.startsWith(STORAGE_PREFIX)) continue;
             results.push(JSON.parse(localStorage.getItem(keyName)) as IPersistedThreepidInvite);
         }
         return results;
diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts
index 96b1432ca7a..8e8155c4bc3 100644
--- a/src/stores/right-panel/RightPanelStore.ts
+++ b/src/stores/right-panel/RightPanelStore.ts
@@ -160,7 +160,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
         }
     }
 
-    public setCards(cards: IRightPanelCard[], allowClose = true, roomId: string = null): void {
+    public setCards(cards: IRightPanelCard[], allowClose = true, roomId: string | null = null): void {
         // This function sets the history of the right panel and shows the right panel if not already visible.
         const rId = roomId ?? this.viewedRoomId;
         const history = cards.map((c) => ({ phase: c.phase, state: c.state ?? {} }));
@@ -170,7 +170,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
     }
 
     // Appends a card to the history and shows the right panel if not already visible
-    public pushCard(card: IRightPanelCard, allowClose = true, roomId: string = null): void {
+    public pushCard(card: IRightPanelCard, allowClose = true, roomId: string | null = null): void {
         const rId = roomId ?? this.viewedRoomId;
         const redirect = this.getVerificationRedirect(card);
         const targetPhase = redirect?.phase ?? card.phase;
@@ -196,7 +196,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
         this.emitAndUpdateSettings();
     }
 
-    public popCard(roomId: string = null): IRightPanelCard {
+    public popCard(roomId: string | null = null): IRightPanelCard | undefined {
         const rId = roomId ?? this.viewedRoomId;
         if (!this.byRoom[rId]) return;
 
@@ -304,7 +304,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
         return true;
     }
 
-    private getVerificationRedirect(card: IRightPanelCard): IRightPanelCard {
+    private getVerificationRedirect(card: IRightPanelCard): IRightPanelCard | null {
         if (card.phase === RightPanelPhases.RoomMemberInfo && card.state) {
             // RightPanelPhases.RoomMemberInfo -> needs to be changed to RightPanelPhases.EncryptionPanel if there is a pending verification request
             const { member } = card.state;
@@ -322,8 +322,8 @@ export default class RightPanelStore extends ReadyWatchingStore {
         return null;
     }
 
-    private isPhaseValid(targetPhase: RightPanelPhases, isViewingRoom: boolean): boolean {
-        if (!RightPanelPhases[targetPhase]) {
+    private isPhaseValid(targetPhase: RightPanelPhases | null, isViewingRoom: boolean): boolean {
+        if (!targetPhase || !RightPanelPhases[targetPhase]) {
             logger.warn(`Tried to switch right panel to unknown phase: ${targetPhase}`);
             return false;
         }
diff --git a/src/stores/right-panel/RightPanelStoreIPanelState.ts b/src/stores/right-panel/RightPanelStoreIPanelState.ts
index 34b6d03ed4d..8064f24c438 100644
--- a/src/stores/right-panel/RightPanelStoreIPanelState.ts
+++ b/src/stores/right-panel/RightPanelStoreIPanelState.ts
@@ -52,7 +52,7 @@ export interface IRightPanelCardStateStored {
 }
 
 export interface IRightPanelCard {
-    phase: RightPanelPhases;
+    phase: RightPanelPhases | null;
     state?: IRightPanelCardState;
 }
 
@@ -90,10 +90,10 @@ export function convertCardToStore(panelState: IRightPanelCard): IRightPanelCard
         spaceId: state.spaceId,
         isInitialEventHighlighted: state.isInitialEventHighlighted,
         initialEventScrollIntoView: state.initialEventScrollIntoView,
-        threadHeadEventId: !!state?.threadHeadEvent?.getId() ? panelState.state.threadHeadEvent.getId() : undefined,
-        memberInfoEventId: !!state?.memberInfoEvent?.getId() ? panelState.state.memberInfoEvent.getId() : undefined,
-        initialEventId: !!state?.initialEvent?.getId() ? panelState.state.initialEvent.getId() : undefined,
-        memberId: !!state?.member?.userId ? panelState.state.member.userId : undefined,
+        threadHeadEventId: !!state?.threadHeadEvent?.getId() ? state.threadHeadEvent.getId() : undefined,
+        memberInfoEventId: !!state?.memberInfoEvent?.getId() ? state.memberInfoEvent.getId() : undefined,
+        initialEventId: !!state?.initialEvent?.getId() ? state.initialEvent.getId() : undefined,
+        memberId: !!state?.member?.userId ? state.member.userId : undefined,
     };
 
     return { state: stateStored, phase: panelState.phase };
@@ -113,7 +113,7 @@ function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room):
             ? room.findEventById(stateStored.memberInfoEventId)
             : undefined,
         initialEvent: !!stateStored?.initialEventId ? room.findEventById(stateStored.initialEventId) : undefined,
-        member: !!stateStored?.memberId ? room.getMember(stateStored.memberId) : undefined,
+        member: (!!stateStored?.memberId && room.getMember(stateStored.memberId)) || undefined,
     };
 
     return { state: state, phase: panelStateStore.phase };
diff --git a/src/stores/room-list/Interface.ts b/src/stores/room-list/Interface.ts
index 55de9dd3ad2..4e30182e94a 100644
--- a/src/stores/room-list/Interface.ts
+++ b/src/stores/room-list/Interface.ts
@@ -57,7 +57,7 @@ export interface RoomListStore extends EventEmitter {
      * @param tagId tag to get the sort algorithm for
      * @returns the sort algorithm
      */
-    getTagSorting(tagId: TagID): SortAlgorithm;
+    getTagSorting(tagId: TagID): SortAlgorithm | null;
 
     /**
      * Set the list algorithm for the specified tag.
@@ -71,7 +71,7 @@ export interface RoomListStore extends EventEmitter {
      * @param tagId tag to get the list algorithm for
      * @returns the list algorithm
      */
-    getListOrder(tagId: TagID): ListAlgorithm;
+    getListOrder(tagId: TagID): ListAlgorithm | null;
 
     /**
      * Regenerates the room whole room list, discarding any previous results.
diff --git a/src/stores/room-list/RoomListLayoutStore.ts b/src/stores/room-list/RoomListLayoutStore.ts
index 5b7ec0692aa..ce8bcf836d5 100644
--- a/src/stores/room-list/RoomListLayoutStore.ts
+++ b/src/stores/room-list/RoomListLayoutStore.ts
@@ -51,7 +51,7 @@ export default class RoomListLayoutStore extends AsyncStoreWithClient<IState> {
         if (!this.layoutMap.has(tagId)) {
             this.layoutMap.set(tagId, new ListLayout(tagId));
         }
-        return this.layoutMap.get(tagId);
+        return this.layoutMap.get(tagId)!;
     }
 
     // Note: this primarily exists for debugging, and isn't really intended to be used by anything.
diff --git a/src/stores/room-list/RoomListStore.ts b/src/stores/room-list/RoomListStore.ts
index c0c1e81fbd0..a27ca24b39b 100644
--- a/src/stores/room-list/RoomListStore.ts
+++ b/src/stores/room-list/RoomListStore.ts
@@ -404,7 +404,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> implements
         localStorage.setItem(`mx_tagSort_${tagId}`, sort);
     }
 
-    public getTagSorting(tagId: TagID): SortAlgorithm {
+    public getTagSorting(tagId: TagID): SortAlgorithm | null {
         return this.algorithm.getTagSorting(tagId);
     }
 
@@ -443,7 +443,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> implements
         localStorage.setItem(`mx_listOrder_${tagId}`, order);
     }
 
-    public getListOrder(tagId: TagID): ListAlgorithm {
+    public getListOrder(tagId: TagID): ListAlgorithm | null {
         return this.algorithm.getListOrdering(tagId);
     }
 
diff --git a/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts b/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
index e9af79fa1a0..b6ee070c034 100644
--- a/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
+++ b/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
@@ -56,7 +56,7 @@ export const sortRooms = (rooms: Room[]): Room[] => {
     // See https://github.com/vector-im/element-web/issues/14458
     let myUserId = "";
     if (MatrixClientPeg.get()) {
-        myUserId = MatrixClientPeg.get().getUserId();
+        myUserId = MatrixClientPeg.get().getUserId()!;
     }
 
     const tsCache: { [roomId: string]: number } = {};
diff --git a/src/stores/room-list/previews/LegacyCallAnswerEventPreview.ts b/src/stores/room-list/previews/LegacyCallAnswerEventPreview.ts
index 68826b2611c..e8a604e31e9 100644
--- a/src/stores/room-list/previews/LegacyCallAnswerEventPreview.ts
+++ b/src/stores/room-list/previews/LegacyCallAnswerEventPreview.ts
@@ -23,7 +23,7 @@ import { _t } from "../../../languageHandler";
 
 export class LegacyCallAnswerEventPreview implements IPreview {
     public getTextFor(event: MatrixEvent, tagId?: TagID): string {
-        if (shouldPrefixMessagesIn(event.getRoomId(), tagId)) {
+        if (shouldPrefixMessagesIn(event.getRoomId()!, tagId)) {
             if (isSelf(event)) {
                 return _t("You joined the call");
             } else {
diff --git a/src/stores/room-list/previews/LegacyCallHangupEvent.ts b/src/stores/room-list/previews/LegacyCallHangupEvent.ts
index 0896e43bf09..397a491bcd7 100644
--- a/src/stores/room-list/previews/LegacyCallHangupEvent.ts
+++ b/src/stores/room-list/previews/LegacyCallHangupEvent.ts
@@ -23,7 +23,7 @@ import { _t } from "../../../languageHandler";
 
 export class LegacyCallHangupEvent implements IPreview {
     public getTextFor(event: MatrixEvent, tagId?: TagID): string {
-        if (shouldPrefixMessagesIn(event.getRoomId(), tagId)) {
+        if (shouldPrefixMessagesIn(event.getRoomId()!, tagId)) {
             if (isSelf(event)) {
                 return _t("You ended the call");
             } else {
diff --git a/src/stores/room-list/previews/LegacyCallInviteEventPreview.ts b/src/stores/room-list/previews/LegacyCallInviteEventPreview.ts
index 1aff65decce..0afeaa56da6 100644
--- a/src/stores/room-list/previews/LegacyCallInviteEventPreview.ts
+++ b/src/stores/room-list/previews/LegacyCallInviteEventPreview.ts
@@ -23,7 +23,7 @@ import { _t } from "../../../languageHandler";
 
 export class LegacyCallInviteEventPreview implements IPreview {
     public getTextFor(event: MatrixEvent, tagId?: TagID): string {
-        if (shouldPrefixMessagesIn(event.getRoomId(), tagId)) {
+        if (shouldPrefixMessagesIn(event.getRoomId()!, tagId)) {
             if (isSelf(event)) {
                 return _t("You started a call");
             } else {
diff --git a/src/stores/spaces/SpaceStore.ts b/src/stores/spaces/SpaceStore.ts
index 9a57f3123c3..5648540e929 100644
--- a/src/stores/spaces/SpaceStore.ts
+++ b/src/stores/spaces/SpaceStore.ts
@@ -36,7 +36,7 @@ import { DefaultTagID } from "../room-list/models";
 import { EnhancedMap, mapDiff } from "../../utils/maps";
 import { setDiff, setHasDiff } from "../../utils/sets";
 import { Action } from "../../dispatcher/actions";
-import { arrayHasDiff, arrayHasOrderChange } from "../../utils/arrays";
+import { arrayHasDiff, arrayHasOrderChange, filterBoolean } from "../../utils/arrays";
 import { reorderLexicographically } from "../../utils/stringOrderField";
 import { TAG_ORDER } from "../../components/views/rooms/RoomList";
 import { SettingUpdatedPayload } from "../../dispatcher/payloads/SettingUpdatedPayload";
@@ -390,31 +390,29 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
     public getParents(roomId: string, canonicalOnly = false): Room[] {
         const userId = this.matrixClient?.getUserId();
         const room = this.matrixClient?.getRoom(roomId);
-        return (
-            (room?.currentState
-                .getStateEvents(EventType.SpaceParent)
-                .map((ev) => {
-                    const content = ev.getContent();
-                    if (!Array.isArray(content.via) || (canonicalOnly && !content.canonical)) {
-                        return; // skip
-                    }
+        const events = room?.currentState.getStateEvents(EventType.SpaceParent) ?? [];
+        return filterBoolean(
+            events.map((ev) => {
+                const content = ev.getContent();
+                if (!Array.isArray(content.via) || (canonicalOnly && !content.canonical)) {
+                    return; // skip
+                }
 
-                    // only respect the relationship if the sender has sufficient permissions in the parent to set
-                    // child relations, as per MSC1772.
-                    // https://github.com/matrix-org/matrix-doc/blob/main/proposals/1772-groups-as-rooms.md#relationship-between-rooms-and-spaces
-                    const parent = this.matrixClient.getRoom(ev.getStateKey());
-                    const relation = parent?.currentState.getStateEvents(EventType.SpaceChild, roomId);
-                    if (
-                        !parent?.currentState.maySendStateEvent(EventType.SpaceChild, userId) ||
-                        // also skip this relation if the parent had this child added but then since removed it
-                        (relation && !Array.isArray(relation.getContent().via))
-                    ) {
-                        return; // skip
-                    }
+                // only respect the relationship if the sender has sufficient permissions in the parent to set
+                // child relations, as per MSC1772.
+                // https://github.com/matrix-org/matrix-doc/blob/main/proposals/1772-groups-as-rooms.md#relationship-between-rooms-and-spaces
+                const parent = this.matrixClient.getRoom(ev.getStateKey());
+                const relation = parent?.currentState.getStateEvents(EventType.SpaceChild, roomId);
+                if (
+                    !parent?.currentState.maySendStateEvent(EventType.SpaceChild, userId) ||
+                    // also skip this relation if the parent had this child added but then since removed it
+                    (relation && !Array.isArray(relation.getContent().via))
+                ) {
+                    return; // skip
+                }
 
-                    return parent;
-                })
-                .filter(Boolean) as Room[]) || []
+                return parent;
+            }),
         );
     }
 
diff --git a/src/stores/widgets/StopGapWidgetDriver.ts b/src/stores/widgets/StopGapWidgetDriver.ts
index 9c428e2e286..8e892a05e61 100644
--- a/src/stores/widgets/StopGapWidgetDriver.ts
+++ b/src/stores/widgets/StopGapWidgetDriver.ts
@@ -39,6 +39,11 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { logger } from "matrix-js-sdk/src/logger";
 import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
 import { Direction } from "matrix-js-sdk/src/matrix";
+import {
+    ApprovalOpts,
+    CapabilitiesOpts,
+    WidgetLifecycle,
+} from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
 
 import SdkConfig, { DEFAULTS } from "../../SdkConfig";
 import { iterableDiff, iterableIntersection } from "../../utils/iterables";
@@ -55,6 +60,7 @@ import dis from "../../dispatcher/dispatcher";
 import { ElementWidgetCapabilities } from "./ElementWidgetCapabilities";
 import { navigateToPermalink } from "../../utils/permalinks/navigator";
 import { SdkContextClass } from "../../contexts/SDKContext";
+import { ModuleRunner } from "../../modules/ModuleRunner";
 
 // TODO: Purge this from the universe
 
@@ -171,27 +177,27 @@ export class StopGapWidgetDriver extends WidgetDriver {
             allowedSoFar.add(cap);
             missing.delete(cap);
         });
+
+        let approved: Set<string> | undefined;
         if (WidgetPermissionCustomisations.preapproveCapabilities) {
-            const approved = await WidgetPermissionCustomisations.preapproveCapabilities(this.forWidget, requested);
-            if (approved) {
-                approved.forEach((cap) => {
-                    allowedSoFar.add(cap);
-                    missing.delete(cap);
-                });
-            }
+            approved = await WidgetPermissionCustomisations.preapproveCapabilities(this.forWidget, requested);
+        } else {
+            const opts: CapabilitiesOpts = { approvedCapabilities: undefined };
+            ModuleRunner.instance.invoke(WidgetLifecycle.CapabilitiesRequest, opts, this.forWidget, requested);
+            approved = opts.approvedCapabilities;
         }
+        if (approved) {
+            approved.forEach((cap) => {
+                allowedSoFar.add(cap);
+                missing.delete(cap);
+            });
+        }
+
         // TODO: Do something when the widget requests new capabilities not yet asked for
         let rememberApproved = false;
         if (missing.size > 0) {
             try {
-                const [result] = await Modal.createDialog<
-                    [
-                        {
-                            approved: Capability[];
-                            remember: boolean;
-                        },
-                    ]
-                >(WidgetCapabilitiesPromptDialog, {
+                const [result] = await Modal.createDialog(WidgetCapabilitiesPromptDialog, {
                     requestedCapabilities: missing,
                     widget: this.forWidget,
                     widgetKind: this.forWidgetKind,
@@ -366,6 +372,15 @@ export class StopGapWidgetDriver extends WidgetDriver {
     }
 
     public async askOpenID(observer: SimpleObservable<IOpenIDUpdate>): Promise<void> {
+        const opts: ApprovalOpts = { approved: undefined };
+        ModuleRunner.instance.invoke(WidgetLifecycle.IdentityRequest, opts, this.forWidget);
+        if (opts.approved) {
+            return observer.update({
+                state: OpenIDRequestState.Allowed,
+                token: await MatrixClientPeg.get().getOpenIdToken(),
+            });
+        }
+
         const oidcState = SdkContextClass.instance.widgetPermissionStore.getOIDCState(
             this.forWidget,
             this.forWidgetKind,
diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts
index a204b7d6ed6..74a6d6c3ee8 100644
--- a/src/stores/widgets/WidgetLayoutStore.ts
+++ b/src/stores/widgets/WidgetLayoutStore.ts
@@ -99,7 +99,7 @@ export class WidgetLayoutStore extends ReadyWatchingStore {
         [roomId: string]: Partial<{
             [container in Container]: {
                 ordered: IApp[];
-                height?: number;
+                height?: number | null;
                 distributions?: number[];
             };
         }>;
@@ -402,11 +402,11 @@ export class WidgetLayoutStore extends ReadyWatchingStore {
         this.updateUserLayout(room, localLayout);
     }
 
-    public getContainerHeight(room: Room, container: Container): number {
-        return this.byRoom[room.roomId]?.[container]?.height; // let the default get returned if needed
+    public getContainerHeight(room: Room, container: Container): number | null {
+        return this.byRoom[room.roomId]?.[container]?.height ?? null; // let the default get returned if needed
     }
 
-    public setContainerHeight(room: Room, container: Container, height: number): void {
+    public setContainerHeight(room: Room, container: Container, height?: number): void {
         const widgets = this.getContainerWidgets(room, container);
         const widths = this.byRoom[room.roomId]?.[container]?.distributions;
         const localLayout: Record<string, IStoredLayout> = {};
@@ -502,8 +502,8 @@ export class WidgetLayoutStore extends ReadyWatchingStore {
                 const height = this.byRoom[room.roomId]?.[container]?.height;
                 evContent.widgets[widget.id] = {
                     ...evContent.widgets[widget.id],
-                    height: height ? Math.round(height) : null,
-                    width: widths[idx] ? Math.round(widths[idx]) : null,
+                    height: height ? Math.round(height) : undefined,
+                    width: widths?.[idx] ? Math.round(widths[idx]) : undefined,
                     index: idx,
                 };
             }
diff --git a/src/theme.ts b/src/theme.ts
index cf9b3875cd9..043834e3db1 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -26,7 +26,7 @@ const HIGH_CONTRAST_THEMES: Record<string, string> = {
     light: "light-high-contrast",
 };
 
-interface IFontFaces extends Omit<Record<typeof allowedFontFaceProps[number], string>, "src"> {
+interface IFontFaces extends Omit<Record<(typeof allowedFontFaceProps)[number], string>, "src"> {
     src: {
         format: string;
         url: string;
@@ -145,9 +145,9 @@ function generateCustomFontFaceCSS(faces: IFontFaces[]): string {
                     return "";
                 })
                 .join(", ");
-            const props = Object.keys(face).filter((prop: typeof allowedFontFaceProps[number]) =>
+            const props = Object.keys(face).filter((prop: (typeof allowedFontFaceProps)[number]) =>
                 allowedFontFaceProps.includes(prop),
-            ) as Array<typeof allowedFontFaceProps[number]>;
+            ) as Array<(typeof allowedFontFaceProps)[number]>;
             const body = props
                 .map((prop) => {
                     let value: string;
diff --git a/src/toasts/DesktopNotificationsToast.ts b/src/toasts/DesktopNotificationsToast.ts
index bb64272f973..856c6d9dd64 100644
--- a/src/toasts/DesktopNotificationsToast.ts
+++ b/src/toasts/DesktopNotificationsToast.ts
@@ -24,7 +24,7 @@ import { getLocalNotificationAccountDataEventType } from "../utils/notifications
 const onAccept = (): void => {
     Notifier.setEnabled(true);
     const cli = MatrixClientPeg.get();
-    const eventType = getLocalNotificationAccountDataEventType(cli.deviceId);
+    const eventType = getLocalNotificationAccountDataEventType(cli.deviceId!);
     cli.setAccountData(eventType, {
         is_silenced: false,
     });
diff --git a/src/toasts/UnverifiedSessionToast.ts b/src/toasts/UnverifiedSessionToast.tsx
similarity index 78%
rename from src/toasts/UnverifiedSessionToast.ts
rename to src/toasts/UnverifiedSessionToast.tsx
index 52c4d76301e..7efa592919a 100644
--- a/src/toasts/UnverifiedSessionToast.ts
+++ b/src/toasts/UnverifiedSessionToast.tsx
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React from "react";
+
 import { _t } from "../languageHandler";
 import dis from "../dispatcher/dispatcher";
 import { MatrixClientPeg } from "../MatrixClientPeg";
@@ -21,6 +23,9 @@ import DeviceListener from "../DeviceListener";
 import ToastStore from "../stores/ToastStore";
 import GenericToast from "../components/views/toasts/GenericToast";
 import { Action } from "../dispatcher/actions";
+import { isDeviceVerified } from "../utils/device/isDeviceVerified";
+import { DeviceType } from "../utils/device/parseUserAgent";
+import { DeviceMetaData } from "../components/views/settings/devices/DeviceMetaData";
 
 function toastKey(deviceId: string): string {
     return "unverified_session_" + deviceId;
@@ -31,16 +36,21 @@ export const showToast = async (deviceId: string): Promise<void> => {
 
     const onAccept = (): void => {
         DeviceListener.sharedInstance().dismissUnverifiedSessions([deviceId]);
-        dis.dispatch({
-            action: Action.ViewUserDeviceSettings,
-        });
     };
 
     const onReject = (): void => {
         DeviceListener.sharedInstance().dismissUnverifiedSessions([deviceId]);
+        dis.dispatch({
+            action: Action.ViewUserDeviceSettings,
+        });
     };
 
     const device = await cli.getDevice(deviceId);
+    const extendedDevice = {
+        ...device,
+        isVerified: isDeviceVerified(device, cli),
+        deviceType: DeviceType.Unknown,
+    };
 
     ToastStore.sharedInstance().addOrReplaceToast({
         key: toastKey(deviceId),
@@ -48,13 +58,10 @@ export const showToast = async (deviceId: string): Promise<void> => {
         icon: "verification_warning",
         props: {
             description: device.display_name,
-            detail: _t("%(deviceId)s from %(ip)s", {
-                deviceId,
-                ip: device.last_seen_ip,
-            }),
-            acceptLabel: _t("Check your devices"),
+            detail: <DeviceMetaData device={extendedDevice} />,
+            acceptLabel: _t("Yes, it was me"),
             onAccept,
-            rejectLabel: _t("Later"),
+            rejectLabel: _t("No"),
             onReject,
         },
         component: GenericToast,
diff --git a/src/utils/DialogOpener.ts b/src/utils/DialogOpener.ts
index 0121fb7c180..c02ccf2841a 100644
--- a/src/utils/DialogOpener.ts
+++ b/src/utils/DialogOpener.ts
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import classnames from "classnames";
+import { ComponentProps } from "react";
 
 import defaultDispatcher from "../dispatcher/dispatcher";
 import { ActionPayload } from "../dispatcher/payloads";
@@ -114,7 +115,7 @@ export class DialogOpener {
                         kind: payload.kind,
                         call: payload.call,
                         roomId: payload.roomId,
-                    },
+                    } as Omit<ComponentProps<typeof InviteDialog>, "onFinished">,
                     classnames("mx_InviteDialog_flexWrapper", payload.className),
                     false,
                     true,
diff --git a/src/utils/ErrorUtils.tsx b/src/utils/ErrorUtils.tsx
index 1cc049c03a4..e45e3091a1a 100644
--- a/src/utils/ErrorUtils.tsx
+++ b/src/utils/ErrorUtils.tsx
@@ -34,12 +34,12 @@ import { _t, _td, Tags, TranslatedString } from "../languageHandler";
  * @returns {*} Translated string or react component
  */
 export function messageForResourceLimitError(
-    limitType: string,
+    limitType: string | undefined,
     adminContact: string | undefined,
     strings: Record<string, string>,
     extraTranslations?: Tags,
 ): TranslatedString {
-    let errString = strings[limitType];
+    let errString = limitType ? strings[limitType] : undefined;
     if (errString === undefined) errString = strings[""];
 
     const linkSub = (sub: string): ReactNode => {
diff --git a/src/utils/HostingLink.ts b/src/utils/HostingLink.ts
deleted file mode 100644
index eb14ed0fd3a..00000000000
--- a/src/utils/HostingLink.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
-Copyright 2019 New Vector Ltd.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import SdkConfig from "../SdkConfig";
-import { MatrixClientPeg } from "../MatrixClientPeg";
-
-export function getHostingLink(campaign: string): string | null {
-    const hostingLink = SdkConfig.get().hosting_signup_link;
-    if (!hostingLink) return null;
-    if (!campaign) return hostingLink;
-
-    if (MatrixClientPeg.get().getDomain() !== "matrix.org") return null;
-
-    try {
-        const hostingUrl = new URL(hostingLink);
-        hostingUrl.searchParams.set("utm_campaign", campaign);
-        return hostingUrl.toString();
-    } catch (e) {
-        return hostingLink;
-    }
-}
diff --git a/src/utils/Reply.ts b/src/utils/Reply.ts
index be59f72ec91..ffa29b6ffd3 100644
--- a/src/utils/Reply.ts
+++ b/src/utils/Reply.ts
@@ -218,17 +218,20 @@ export function shouldDisplayReply(event: MatrixEvent): boolean {
     return !!inReplyTo.event_id;
 }
 
-interface IAddReplyOpts {
+interface AddReplyOpts {
     permalinkCreator?: RoomPermalinkCreator;
-    includeLegacyFallback?: boolean;
+    includeLegacyFallback: false;
+}
+
+interface IncludeLegacyFeedbackOpts {
+    permalinkCreator: RoomPermalinkCreator;
+    includeLegacyFallback: true;
 }
 
 export function addReplyToMessageContent(
     content: IContent,
     replyToEvent: MatrixEvent,
-    opts: IAddReplyOpts = {
-        includeLegacyFallback: true,
-    },
+    opts: AddReplyOpts | IncludeLegacyFeedbackOpts,
 ): void {
     content["m.relates_to"] = {
         ...(content["m.relates_to"] || {}),
diff --git a/src/utils/SortMembers.ts b/src/utils/SortMembers.ts
index 4bc17be2c1e..2f63dacd7b3 100644
--- a/src/utils/SortMembers.ts
+++ b/src/utils/SortMembers.ts
@@ -64,7 +64,7 @@ interface IActivityScore {
 // We do this by checking every room to see who has sent a message in the last few hours, and giving them
 // a score which correlates to the freshness of their message. In theory, this results in suggestions
 // which are closer to "continue this conversation" rather than "this person exists".
-export function buildActivityScores(cli: MatrixClient): { [key: string]: IActivityScore } {
+export function buildActivityScores(cli: MatrixClient): { [key: string]: IActivityScore | undefined } {
     const now = new Date().getTime();
     const earliestAgeConsidered = now - 60 * 60 * 1000; // 1 hour ago
     const maxMessagesConsidered = 50; // so we don't iterate over a huge amount of traffic
@@ -73,7 +73,8 @@ export function buildActivityScores(cli: MatrixClient): { [key: string]: IActivi
         .filter((ev) => ev.getTs() > earliestAgeConsidered);
     const senderEvents = groupBy(events, (ev) => ev.getSender());
     return mapValues(senderEvents, (events) => {
-        const lastEvent = maxBy(events, (ev) => ev.getTs());
+        if (!events.length) return;
+        const lastEvent = maxBy(events, (ev) => ev.getTs())!;
         const distanceFromNow = Math.abs(now - lastEvent.getTs()); // abs to account for slight future messages
         const inverseTime = now - earliestAgeConsidered - distanceFromNow;
         return {
@@ -92,7 +93,7 @@ interface IMemberScore {
     numRooms: number;
 }
 
-export function buildMemberScores(cli: MatrixClient): { [key: string]: IMemberScore } {
+export function buildMemberScores(cli: MatrixClient): { [key: string]: IMemberScore | undefined } {
     const maxConsideredMembers = 200;
     const consideredRooms = joinedRooms(cli).filter((room) => room.getJoinedMemberCount() < maxConsideredMembers);
     const memberPeerEntries = consideredRooms.flatMap((room) =>
@@ -100,10 +101,11 @@ export function buildMemberScores(cli: MatrixClient): { [key: string]: IMemberSc
     );
     const userMeta = groupBy(memberPeerEntries, ({ member }) => member.userId);
     return mapValues(userMeta, (roomMemberships) => {
+        if (!roomMemberships.length) return;
         const maximumPeers = maxConsideredMembers * roomMemberships.length;
         const totalPeers = sumBy(roomMemberships, (entry) => entry.roomSize);
         return {
-            member: minBy(roomMemberships, (entry) => entry.roomSize).member,
+            member: minBy(roomMemberships, (entry) => entry.roomSize)!.member,
             numRooms: roomMemberships.length,
             score: Math.max(0, Math.pow(1 - totalPeers / maximumPeers, 5)),
         };
diff --git a/src/utils/UserInteractiveAuth.ts b/src/utils/UserInteractiveAuth.ts
index 042fe67effe..c5d1c84c475 100644
--- a/src/utils/UserInteractiveAuth.ts
+++ b/src/utils/UserInteractiveAuth.ts
@@ -43,7 +43,7 @@ export function wrapRequestWithDialog<R, A = any>(
                         makeRequest: (authData?: IAuthData) => boundFunction(authData, ...args),
                         onFinished: (success, result) => {
                             if (success) {
-                                resolve(result);
+                                resolve(result as R);
                             } else {
                                 reject(result);
                             }
diff --git a/src/utils/arrays.ts b/src/utils/arrays.ts
index d5436c601c0..bbc75fa4f7e 100644
--- a/src/utils/arrays.ts
+++ b/src/utils/arrays.ts
@@ -323,3 +323,7 @@ export async function asyncEvery<T>(values: T[], predicate: (value: T) => Promis
     }
     return true;
 }
+
+export function filterBoolean<T>(values: Array<T | null | undefined>): T[] {
+    return values.filter(Boolean) as T[];
+}
diff --git a/src/utils/beacon/getShareableLocation.ts b/src/utils/beacon/getShareableLocation.ts
index 1b353f2b04e..e6652187a9f 100644
--- a/src/utils/beacon/getShareableLocation.ts
+++ b/src/utils/beacon/getShareableLocation.ts
@@ -23,7 +23,7 @@ import { MatrixClient, MatrixEvent, getBeaconInfoIdentifier } from "matrix-js-sd
  */
 export const getShareableLocationEventForBeacon = (event: MatrixEvent, cli: MatrixClient): MatrixEvent | null => {
     const room = cli.getRoom(event.getRoomId());
-    const beacon = room.currentState.beacons?.get(getBeaconInfoIdentifier(event));
+    const beacon = room?.currentState.beacons?.get(getBeaconInfoIdentifier(event));
     const latestLocationEvent = beacon?.latestLocationEvent;
 
     if (beacon?.isLive && latestLocationEvent) {
diff --git a/src/utils/beacon/useOwnLiveBeacons.ts b/src/utils/beacon/useOwnLiveBeacons.ts
index 8d9c01a3802..989d12c4fd1 100644
--- a/src/utils/beacon/useOwnLiveBeacons.ts
+++ b/src/utils/beacon/useOwnLiveBeacons.ts
@@ -23,11 +23,11 @@ import { sortBeaconsByLatestExpiry } from "./duration";
 
 type LiveBeaconsState = {
     beacon?: Beacon;
-    onStopSharing?: () => void;
-    onResetLocationPublishError?: () => void;
-    stoppingInProgress?: boolean;
-    hasStopSharingError?: boolean;
-    hasLocationPublishError?: boolean;
+    onStopSharing: () => void;
+    onResetLocationPublishError: () => void;
+    stoppingInProgress: boolean;
+    hasStopSharingError: boolean;
+    hasLocationPublishError: boolean;
 };
 
 /**
diff --git a/src/utils/device/isDeviceVerified.ts b/src/utils/device/isDeviceVerified.ts
new file mode 100644
index 00000000000..4f600b785d3
--- /dev/null
+++ b/src/utils/device/isDeviceVerified.ts
@@ -0,0 +1,32 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { IMyDevice, MatrixClient } from "matrix-js-sdk/src/matrix";
+
+export const isDeviceVerified = (device: IMyDevice, client: MatrixClient): boolean | null => {
+    try {
+        const crossSigningInfo = client.getStoredCrossSigningForUser(client.getSafeUserId());
+        const deviceInfo = client.getStoredDevice(client.getSafeUserId(), device.device_id);
+
+        // no cross-signing or device info available
+        if (!crossSigningInfo || !deviceInfo) return false;
+
+        return crossSigningInfo.checkDeviceTrust(crossSigningInfo, deviceInfo, false, true).isCrossSigningVerified();
+    } catch (e) {
+        console.error("Error getting device cross-signing info", e);
+        return null;
+    }
+};
diff --git a/src/utils/direct-messages.ts b/src/utils/direct-messages.ts
index aede86f93be..9174defdfac 100644
--- a/src/utils/direct-messages.ts
+++ b/src/utils/direct-messages.ts
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
-import { Room } from "matrix-js-sdk/src/models/room";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { canEncryptToAllUsers } from "../createRoom";
@@ -30,7 +29,7 @@ import { createDmLocalRoom } from "./dm/createDmLocalRoom";
 import { startDm } from "./dm/startDm";
 import { resolveThreePids } from "./threepids";
 
-export async function startDmOnFirstMessage(client: MatrixClient, targets: Member[]): Promise<Room> {
+export async function startDmOnFirstMessage(client: MatrixClient, targets: Member[]): Promise<string | null> {
     let resolvedTargets = targets;
 
     try {
@@ -49,7 +48,13 @@ export async function startDmOnFirstMessage(client: MatrixClient, targets: Membe
             joining: false,
             metricsTrigger: "MessageUser",
         });
-        return existingRoom;
+        return existingRoom.roomId;
+    }
+
+    if (targets.length === 1 && targets[0] instanceof ThreepidMember && privateShouldBeEncrypted()) {
+        // Single 3rd-party invite and well-known promotes encryption:
+        // Directly create a room and invite the other.
+        return await startDm(client, targets);
     }
 
     const room = await createDmLocalRoom(client, resolvedTargets);
@@ -59,7 +64,7 @@ export async function startDmOnFirstMessage(client: MatrixClient, targets: Membe
         joining: false,
         targets: resolvedTargets,
     });
-    return room;
+    return room.roomId;
 }
 
 /**
@@ -81,6 +86,8 @@ export async function createRoomFromLocalRoom(client: MatrixClient, localRoom: L
 
     return startDm(client, localRoom.targets, false).then(
         (roomId) => {
+            if (!roomId) throw new Error(`startDm for local room ${localRoom.roomId} didn't return a room Id`);
+
             localRoom.actualRoomId = roomId;
             return waitForRoomReadyAndApplyAfterCreateCallbacks(client, localRoom);
         },
@@ -186,6 +193,9 @@ export interface IDMUserTileProps {
  */
 export async function determineCreateRoomEncryptionOption(client: MatrixClient, targets: Member[]): Promise<boolean> {
     if (privateShouldBeEncrypted()) {
+        // Enable encryption for a single 3rd party invite.
+        if (targets.length === 1 && targets[0] instanceof ThreepidMember) return true;
+
         // Check whether all users have uploaded device keys before.
         // If so, enable encryption in the new room.
         const has3PidMembers = targets.some((t) => t instanceof ThreepidMember);
diff --git a/src/utils/dm/findDMForUser.ts b/src/utils/dm/findDMForUser.ts
index 3f6fcbfca08..92575d41be2 100644
--- a/src/utils/dm/findDMForUser.ts
+++ b/src/utils/dm/findDMForUser.ts
@@ -21,7 +21,20 @@ import { isLocalRoom } from "../localRoom/isLocalRoom";
 import { isJoinedOrNearlyJoined } from "../membership";
 import { getFunctionalMembers } from "../room/getFunctionalMembers";
 
-function extractSuitableRoom(rooms: Room[], userId: string): Room | undefined {
+/**
+ * Iterates the rooms and tries to find a DM room with the user identified by UserId.
+ * A DM room is assumed if one of the following matches:
+ * - Has two members and contains a membership for the user identified by userId
+ * - findRoomWithThirdpartyInvites is true and has one member and a third pending third party invite
+ *
+ * If multiple rooms match it will return the one with the most recent event.
+ *
+ * @param rooms - Rooms to iterate
+ * @param userId - User Id of the other user
+ * @param [findRoomWithThirdpartyInvites] - Whether to find a DM for a pending thirdparty invite
+ * @returns DM room if found or undefined if not
+ */
+function extractSuitableRoom(rooms: Room[], userId: string, findRoomWithThirdpartyInvites: boolean): Room | undefined {
     const suitableRooms = rooms
         .filter((r) => {
             // Validate that we are joined and the other person is also joined. We'll also make sure
@@ -38,7 +51,15 @@ function extractSuitableRoom(rooms: Room[], userId: string): Room | undefined {
                     (m) => !functionalUsers.includes(m.userId) && m.membership && isJoinedOrNearlyJoined(m.membership),
                 );
                 const otherMember = joinedMembers.find((m) => m.userId === userId);
-                return otherMember && joinedMembers.length === 2;
+
+                if (otherMember && joinedMembers.length === 2) {
+                    return true;
+                }
+
+                const thirdPartyInvites = r.currentState.getStateEvents("m.room.third_party_invite") || [];
+
+                // match room with pending third-party invite
+                return findRoomWithThirdpartyInvites && joinedMembers.length === 1 && thirdPartyInvites.length === 1;
             }
             return false;
         })
@@ -63,7 +84,10 @@ function extractSuitableRoom(rooms: Room[], userId: string): Room | undefined {
 export function findDMForUser(client: MatrixClient, userId: string): Room | undefined {
     const roomIdsForUserId = DMRoomMap.shared().getDMRoomsForUserId(userId);
     const roomsForUserId = roomIdsForUserId.map((id) => client.getRoom(id)).filter((r): r is Room => r !== null);
-    const suitableRoomForUserId = extractSuitableRoom(roomsForUserId, userId);
+    // Call with findRoomWithThirdpartyInvites = true to also include rooms with pending thirdparty invites.
+    // roomsForUserId can only contain rooms with the other user here,
+    // because they have been queried by getDMRoomsForUserId().
+    const suitableRoomForUserId = extractSuitableRoom(roomsForUserId, userId, true);
 
     if (suitableRoomForUserId) {
         return suitableRoomForUserId;
@@ -74,5 +98,5 @@ export function findDMForUser(client: MatrixClient, userId: string): Room | unde
     const allRooms = Array.from(allRoomIds)
         .map((id) => client.getRoom(id))
         .filter((r): r is Room => r !== null);
-    return extractSuitableRoom(allRooms, userId);
+    return extractSuitableRoom(allRooms, userId, false);
 }
diff --git a/src/utils/dm/startDm.ts b/src/utils/dm/startDm.ts
index bea04c1ed6b..782785bf62f 100644
--- a/src/utils/dm/startDm.ts
+++ b/src/utils/dm/startDm.ts
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { IInvite3PID, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
+import { Optional } from "matrix-events-sdk";
 
 import { Action } from "../../dispatcher/actions";
 import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
@@ -35,11 +36,11 @@ export async function startDm(client: MatrixClient, targets: Member[], showSpinn
     const targetIds = targets.map((t) => t.userId);
 
     // Check if there is already a DM with these people and reuse it if possible.
-    let existingRoom: Room | undefined;
+    let existingRoom: Optional<Room>;
     if (targetIds.length === 1) {
         existingRoom = findDMForUser(client, targetIds[0]);
     } else {
-        existingRoom = DMRoomMap.shared().getDMRoomForIdentifiers(targetIds);
+        existingRoom = DMRoomMap.shared().getDMRoomForIdentifiers(targetIds) ?? undefined;
     }
     if (existingRoom && !isLocalRoom(existingRoom)) {
         dis.dispatch<ViewRoomPayload>({
diff --git a/src/utils/leave-behaviour.ts b/src/utils/leave-behaviour.ts
index 10319977241..e47567ba7fb 100644
--- a/src/utils/leave-behaviour.ts
+++ b/src/utils/leave-behaviour.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { sleep } from "matrix-js-sdk/src/utils";
-import React from "react";
+import React, { ReactNode } from "react";
 import { EventStatus } from "matrix-js-sdk/src/models/event-status";
 import { MatrixEventEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
@@ -110,7 +110,7 @@ export async function leaveRoomBehaviour(roomId: string, retry = true, spinner =
 
     const errors = Object.entries(results).filter((r) => !!r[1]);
     if (errors.length > 0) {
-        const messages = [];
+        const messages: ReactNode[] = [];
         for (const roomErr of errors) {
             const err = roomErr[1]; // [0] is the roomId
             let message = _t("Unexpected server error trying to leave the room");
diff --git a/src/utils/location/findMapStyleUrl.ts b/src/utils/location/findMapStyleUrl.ts
index 0653d65cf24..02ff401b145 100644
--- a/src/utils/location/findMapStyleUrl.ts
+++ b/src/utils/location/findMapStyleUrl.ts
@@ -29,9 +29,7 @@ export function findMapStyleUrl(): string {
     const mapStyleUrl = getTileServerWellKnown()?.map_style_url ?? SdkConfig.get().map_style_url;
 
     if (!mapStyleUrl) {
-        logger.error(
-            "'map_style_url' missing from homeserver .well-known area, and " + "missing from from config.json.",
-        );
+        logger.error("'map_style_url' missing from homeserver .well-known area, and missing from from config.json.");
         throw new Error(LocationShareError.MapStyleUrlNotConfigured);
     }
 
diff --git a/src/utils/location/map.ts b/src/utils/location/map.ts
index 34d3d01478b..b0434d76cde 100644
--- a/src/utils/location/map.ts
+++ b/src/utils/location/map.ts
@@ -50,10 +50,7 @@ export const createMap = (interactive: boolean, bodyId: string, onError?: (error
         map.addControl(new maplibregl.AttributionControl(), "top-right");
 
         map.on("error", (e) => {
-            logger.error(
-                "Failed to load map: check map_style_url in config.json has a " + "valid URL and API key",
-                e.error,
-            );
+            logger.error("Failed to load map: check map_style_url in config.json has a valid URL and API key", e.error);
             onError?.(new Error(LocationShareError.MapStyleUrlNotReachable));
         });
 
diff --git a/src/utils/location/parseGeoUri.ts b/src/utils/location/parseGeoUri.ts
index 0ad4adbad92..c0de9cf4161 100644
--- a/src/utils/location/parseGeoUri.ts
+++ b/src/utils/location/parseGeoUri.ts
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 export const parseGeoUri = (uri: string): GeolocationCoordinates | undefined => {
-    function parse(s: string): number | undefined {
+    function parse(s: string): number | null {
         const ret = parseFloat(s);
         if (Number.isNaN(ret)) {
-            return undefined;
+            return null;
         } else {
             return ret;
         }
@@ -28,7 +28,7 @@ export const parseGeoUri = (uri: string): GeolocationCoordinates | undefined =>
     if (!m) return;
     const parts = m[1].split(";");
     const coords = parts[0].split(",");
-    let uncertainty: number | undefined;
+    let uncertainty: number | null;
     for (const param of parts.slice(1)) {
         const m = param.match(/u=(.*)/);
         if (m) uncertainty = parse(m[1]);
@@ -38,8 +38,8 @@ export const parseGeoUri = (uri: string): GeolocationCoordinates | undefined =>
         longitude: parse(coords[1]),
         altitude: parse(coords[2]),
         accuracy: uncertainty,
-        altitudeAccuracy: undefined,
-        heading: undefined,
-        speed: undefined,
+        altitudeAccuracy: null,
+        heading: null,
+        speed: null,
     };
 };
diff --git a/src/utils/permalinks/MatrixToPermalinkConstructor.ts b/src/utils/permalinks/MatrixToPermalinkConstructor.ts
index 1e962a1ba1c..a40f5106c5d 100644
--- a/src/utils/permalinks/MatrixToPermalinkConstructor.ts
+++ b/src/utils/permalinks/MatrixToPermalinkConstructor.ts
@@ -18,6 +18,7 @@ import PermalinkConstructor, { PermalinkParts } from "./PermalinkConstructor";
 
 export const host = "matrix.to";
 export const baseUrl = `https://${host}`;
+export const baseUrlPattern = `^(?:https?://)?${host.replace(".", "\\.")}/#/(.*)`;
 
 /**
  * Generates matrix.to permalinks
@@ -55,11 +56,17 @@ export default class MatrixToPermalinkConstructor extends PermalinkConstructor {
     // Heavily inspired by/borrowed from the matrix-bot-sdk (with permission):
     // https://github.com/turt2live/matrix-js-bot-sdk/blob/7c4665c9a25c2c8e0fe4e509f2616505b5b66a1c/src/Permalinks.ts#L33-L61
     public parsePermalink(fullUrl: string): PermalinkParts {
-        if (!fullUrl || !fullUrl.startsWith(baseUrl)) {
+        if (!fullUrl) {
             throw new Error("Does not appear to be a permalink");
         }
 
-        const parts = fullUrl.substring(`${baseUrl}/#/`.length).split("/");
+        const matches = [...fullUrl.matchAll(new RegExp(baseUrlPattern, "gi"))][0];
+
+        if (!matches || matches.length < 2) {
+            throw new Error("Does not appear to be a permalink");
+        }
+
+        const parts = matches[1].split("/");
 
         const entity = parts[0];
         if (entity[0] === "@") {
diff --git a/src/utils/permalinks/PermalinkConstructor.ts b/src/utils/permalinks/PermalinkConstructor.ts
index c8f1cfc1ed9..74f7d2d1684 100644
--- a/src/utils/permalinks/PermalinkConstructor.ts
+++ b/src/utils/permalinks/PermalinkConstructor.ts
@@ -48,10 +48,10 @@ export default class PermalinkConstructor {
 // https://github.com/turt2live/matrix-js-bot-sdk/blob/7c4665c9a25c2c8e0fe4e509f2616505b5b66a1c/src/Permalinks.ts#L1-L6
 export class PermalinkParts {
     public constructor(
-        public readonly roomIdOrAlias: string,
-        public readonly eventId: string,
-        public readonly userId: string,
-        public readonly viaServers: string[],
+        public readonly roomIdOrAlias: string | null,
+        public readonly eventId: string | null,
+        public readonly userId: string | null,
+        public readonly viaServers: string[] | null,
     ) {}
 
     public static forUser(userId: string): PermalinkParts {
@@ -66,11 +66,11 @@ export class PermalinkParts {
         return new PermalinkParts(roomId, eventId, null, viaServers);
     }
 
-    public get primaryEntityId(): string {
+    public get primaryEntityId(): string | null {
         return this.roomIdOrAlias || this.userId;
     }
 
     public get sigil(): string {
-        return this.primaryEntityId[0];
+        return this.primaryEntityId?.[0] || "?";
     }
 }
diff --git a/src/utils/permalinks/Permalinks.ts b/src/utils/permalinks/Permalinks.ts
index a209e9dfc4e..9ccb3e2915a 100644
--- a/src/utils/permalinks/Permalinks.ts
+++ b/src/utils/permalinks/Permalinks.ts
@@ -22,7 +22,10 @@ import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 
 import { MatrixClientPeg } from "../../MatrixClientPeg";
-import MatrixToPermalinkConstructor, { baseUrl as matrixtoBaseUrl } from "./MatrixToPermalinkConstructor";
+import MatrixToPermalinkConstructor, {
+    baseUrl as matrixtoBaseUrl,
+    baseUrlPattern as matrixToBaseUrlPattern,
+} from "./MatrixToPermalinkConstructor";
 import PermalinkConstructor, { PermalinkParts } from "./PermalinkConstructor";
 import ElementPermalinkConstructor from "./ElementPermalinkConstructor";
 import SdkConfig from "../../SdkConfig";
@@ -84,7 +87,7 @@ export class RoomPermalinkCreator {
     private populationMap: { [serverName: string]: number } | null = null;
     private bannedHostsRegexps: RegExp[] | null = null;
     private allowedHostsRegexps: RegExp[] | null = null;
-    private _serverCandidates: string[] | null = null;
+    private _serverCandidates?: string[];
     private started = false;
 
     // We support being given a roomId as a fallback in the event the `room` object
@@ -124,7 +127,7 @@ export class RoomPermalinkCreator {
         this.started = false;
     }
 
-    public get serverCandidates(): string[] {
+    public get serverCandidates(): string[] | undefined {
         return this._serverCandidates;
     }
 
@@ -420,8 +423,9 @@ function getPermalinkConstructor(): PermalinkConstructor {
 export function parsePermalink(fullUrl: string): PermalinkParts | null {
     try {
         const elementPrefix = SdkConfig.get("permalink_prefix");
-        if (decodeURIComponent(fullUrl).startsWith(matrixtoBaseUrl)) {
-            return new MatrixToPermalinkConstructor().parsePermalink(decodeURIComponent(fullUrl));
+        const decodedUrl = decodeURIComponent(fullUrl);
+        if (new RegExp(matrixToBaseUrlPattern, "i").test(decodedUrl)) {
+            return new MatrixToPermalinkConstructor().parsePermalink(decodedUrl);
         } else if (fullUrl.startsWith("matrix:")) {
             return new MatrixSchemePermalinkConstructor().parsePermalink(fullUrl);
         } else if (elementPrefix && fullUrl.startsWith(elementPrefix)) {
diff --git a/src/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite.ts b/src/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite.ts
new file mode 100644
index 00000000000..a3a1abe212e
--- /dev/null
+++ b/src/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite.ts
@@ -0,0 +1,48 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import DMRoomMap from "../DMRoomMap";
+import { privateShouldBeEncrypted } from "../rooms";
+
+/**
+ * Tests whether a DM room with exactly one third-party invite should be encrypted.
+ * If it should be encrypted, the third-party invitation event is also returned.
+ */
+export const shouldEncryptRoomWithSingle3rdPartyInvite = (
+    room: Room,
+): { shouldEncrypt: true; inviteEvent: MatrixEvent } | { shouldEncrypt: false; inviteEvent?: undefined } => {
+    // encryption not promoted via .well-known
+    if (!privateShouldBeEncrypted()) return { shouldEncrypt: false };
+
+    // not a DM room
+    if (!DMRoomMap.shared().getRoomIds().has(room.roomId)) return { shouldEncrypt: false };
+
+    // more than one room member / invite
+    if (room.getInvitedAndJoinedMemberCount() !== 1) return { shouldEncrypt: false };
+
+    const thirdPartyInvites = room.currentState.getStateEvents("m.room.third_party_invite") || [];
+
+    if (thirdPartyInvites.length === 1) {
+        return {
+            shouldEncrypt: true,
+            inviteEvent: thirdPartyInvites[0],
+        };
+    }
+
+    return { shouldEncrypt: false };
+};
diff --git a/src/utils/space.tsx b/src/utils/space.tsx
index fc183a3a7d8..2c076436d4b 100644
--- a/src/utils/space.tsx
+++ b/src/utils/space.tsx
@@ -23,7 +23,7 @@ import { ICreateRoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { calculateRoomVia } from "./permalinks/Permalinks";
 import Modal from "../Modal";
 import CreateRoomDialog from "../components/views/dialogs/CreateRoomDialog";
-import createRoom, { IOpts } from "../createRoom";
+import createRoom from "../createRoom";
 import { _t } from "../languageHandler";
 import SpacePublicShare from "../components/views/spaces/SpacePublicShare";
 import InfoDialog from "../components/views/dialogs/InfoDialog";
@@ -75,7 +75,7 @@ export const showAddExistingRooms = (space: Room): void => {
 };
 
 export const showCreateNewRoom = async (space: Room, type?: RoomType): Promise<boolean> => {
-    const modal = Modal.createDialog<[boolean, IOpts]>(CreateRoomDialog, {
+    const modal = Modal.createDialog(CreateRoomDialog, {
         type,
         defaultPublic: space.getJoinRule() === JoinRule.Public,
         parentSpace: space,
diff --git a/src/utils/stringOrderField.ts b/src/utils/stringOrderField.ts
index 7c950e75fed..22f5022f217 100644
--- a/src/utils/stringOrderField.ts
+++ b/src/utils/stringOrderField.ts
@@ -54,7 +54,7 @@ export function midPointsBetweenStrings(
 
 interface IEntry {
     index: number;
-    order: string;
+    order?: string;
 }
 
 export const reorderLexicographically = (
@@ -82,12 +82,12 @@ export const reorderLexicographically = (
     let canMoveLeft = true;
     const nextBase =
         newOrder[toIndex + 1]?.order !== undefined
-            ? stringToBase(newOrder[toIndex + 1].order)
+            ? stringToBase(newOrder[toIndex + 1].order!)
             : BigInt(Number.MAX_VALUE);
 
     // check how far left we would have to mutate to fit in that direction
     for (let i = toIndex - 1, j = 1; i >= 0; i--, j++) {
-        if (newOrder[i]?.order !== undefined && nextBase - stringToBase(newOrder[i].order) > j) break;
+        if (newOrder[i]?.order !== undefined && nextBase - stringToBase(newOrder[i].order!) > j) break;
         leftBoundIdx = i;
     }
 
@@ -108,12 +108,12 @@ export const reorderLexicographically = (
     if (canDisplaceRight) {
         const prevBase =
             newOrder[toIndex - 1]?.order !== undefined
-                ? stringToBase(newOrder[toIndex - 1]?.order)
+                ? stringToBase(newOrder[toIndex - 1].order!)
                 : BigInt(Number.MIN_VALUE);
 
         // check how far right we would have to mutate to fit in that direction
         for (let i = toIndex + 1, j = 1; i < newOrder.length; i++, j++) {
-            if (newOrder[i]?.order === undefined || stringToBase(newOrder[i].order) - prevBase > j) break;
+            if (newOrder[i]?.order === undefined || stringToBase(newOrder[i].order!) - prevBase > j) break;
             rightBoundIdx = i;
         }
 
diff --git a/src/utils/strings.ts b/src/utils/strings.ts
index aef2ea850c0..d065339f1f1 100644
--- a/src/utils/strings.ts
+++ b/src/utils/strings.ts
@@ -37,7 +37,7 @@ export async function copyPlaintext(text: string): Promise<boolean> {
             textArea.style.position = "fixed";
 
             document.body.appendChild(textArea);
-            const selection = document.getSelection();
+            const selection = document.getSelection()!;
             const range = document.createRange();
             // range.selectNodeContents(textArea);
             range.selectNode(textArea);
@@ -59,7 +59,7 @@ export function selectText(target: Element): void {
     const range = document.createRange();
     range.selectNodeContents(target);
 
-    const selection = window.getSelection();
+    const selection = window.getSelection()!;
     selection.removeAllRanges();
     selection.addRange(range);
 }
@@ -70,7 +70,8 @@ export function selectText(target: Element): void {
  * In certain browsers it may only work if triggered by a user action or may ask user for permissions
  * @param ref pointer to the node to copy
  */
-export function copyNode(ref: Element): boolean {
+export function copyNode(ref?: Element | null): boolean {
+    if (!ref) return false;
     selectText(ref);
     return document.execCommand("copy");
 }
@@ -80,5 +81,5 @@ export function copyNode(ref: Element): boolean {
  * @returns the selected text
  */
 export function getSelectedText(): string {
-    return window.getSelection().toString();
+    return window.getSelection()!.toString();
 }
diff --git a/src/voice-broadcast/components/molecules/ConfirmListeBroadcastStopCurrent.tsx b/src/voice-broadcast/components/molecules/ConfirmListeBroadcastStopCurrent.tsx
index babef3564f5..39ab4339b4e 100644
--- a/src/voice-broadcast/components/molecules/ConfirmListeBroadcastStopCurrent.tsx
+++ b/src/voice-broadcast/components/molecules/ConfirmListeBroadcastStopCurrent.tsx
@@ -23,7 +23,7 @@ import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
 
 interface Props {
-    onFinished: (confirmed: boolean) => void;
+    onFinished: (confirmed?: boolean) => void;
 }
 
 export const ConfirmListenBroadcastStopCurrentDialog: React.FC<Props> = ({ onFinished }) => {
diff --git a/src/voice-broadcast/hooks/useCurrentVoiceBroadcastRecording.ts b/src/voice-broadcast/hooks/useCurrentVoiceBroadcastRecording.ts
index a9b9635ba77..18283bcf043 100644
--- a/src/voice-broadcast/hooks/useCurrentVoiceBroadcastRecording.ts
+++ b/src/voice-broadcast/hooks/useCurrentVoiceBroadcastRecording.ts
@@ -20,7 +20,7 @@ import { useTypedEventEmitterState } from "../../hooks/useEventEmitter";
 export const useCurrentVoiceBroadcastRecording = (
     voiceBroadcastRecordingsStore: VoiceBroadcastRecordingsStore,
 ): {
-    currentVoiceBroadcastRecording: VoiceBroadcastRecording;
+    currentVoiceBroadcastRecording: VoiceBroadcastRecording | null;
 } => {
     const currentVoiceBroadcastRecording = useTypedEventEmitterState(
         voiceBroadcastRecordingsStore,
diff --git a/test/ContentMessages-test.ts b/test/ContentMessages-test.ts
index 323cb1834b5..b24feca1da0 100644
--- a/test/ContentMessages-test.ts
+++ b/test/ContentMessages-test.ts
@@ -327,6 +327,6 @@ describe("uploadFile", () => {
         const prom = uploadFile(client, "!roomId:server", file);
         mocked(client.uploadContent).mock.calls[0][1]!.abortController!.abort();
         deferred.resolve({ content_uri: "mxc://foo/bar" });
-        await expect(prom).rejects.toThrowError(UploadCanceledError);
+        await expect(prom).rejects.toThrow(UploadCanceledError);
     });
 });
diff --git a/test/DecryptionFailureTracker-test.js b/test/DecryptionFailureTracker-test.js
index 14f3a67b618..63b0489ee4c 100644
--- a/test/DecryptionFailureTracker-test.js
+++ b/test/DecryptionFailureTracker-test.js
@@ -38,7 +38,7 @@ function createFailedDecryptionEvent() {
 }
 
 describe("DecryptionFailureTracker", function () {
-    it("tracks a failed decryption for a visible event", function (done) {
+    it("tracks a failed decryption for a visible event", function () {
         const failedDecryptionEvent = createFailedDecryptionEvent();
 
         let count = 0;
@@ -59,11 +59,9 @@ describe("DecryptionFailureTracker", function () {
         tracker.trackFailures();
 
         expect(count).not.toBe(0, "should track a failure for an event that failed decryption");
-
-        done();
     });
 
-    it("tracks a failed decryption with expected raw error for a visible event", function (done) {
+    it("tracks a failed decryption with expected raw error for a visible event", function () {
         const failedDecryptionEvent = createFailedDecryptionEvent();
 
         let count = 0;
@@ -89,11 +87,9 @@ describe("DecryptionFailureTracker", function () {
 
         expect(count).not.toBe(0, "should track a failure for an event that failed decryption");
         expect(reportedRawCode).toBe("INBOUND_SESSION_MISMATCH_ROOM_ID", "Should add the rawCode to the event context");
-
-        done();
     });
 
-    it("tracks a failed decryption for an event that becomes visible later", function (done) {
+    it("tracks a failed decryption for an event that becomes visible later", function () {
         const failedDecryptionEvent = createFailedDecryptionEvent();
 
         let count = 0;
@@ -114,11 +110,9 @@ describe("DecryptionFailureTracker", function () {
         tracker.trackFailures();
 
         expect(count).not.toBe(0, "should track a failure for an event that failed decryption");
-
-        done();
     });
 
-    it("does not track a failed decryption for an event that never becomes visible", function (done) {
+    it("does not track a failed decryption for an event that never becomes visible", function () {
         const failedDecryptionEvent = createFailedDecryptionEvent();
 
         let count = 0;
@@ -137,11 +131,9 @@ describe("DecryptionFailureTracker", function () {
         tracker.trackFailures();
 
         expect(count).toBe(0, "should not track a failure for an event that never became visible");
-
-        done();
     });
 
-    it("does not track a failed decryption where the event is subsequently successfully decrypted", (done) => {
+    it("does not track a failed decryption where the event is subsequently successfully decrypted", () => {
         const decryptedEvent = createFailedDecryptionEvent();
         const tracker = new DecryptionFailureTracker(
             (total) => {
@@ -164,13 +156,12 @@ describe("DecryptionFailureTracker", function () {
 
         // Immediately track the newest failures
         tracker.trackFailures();
-        done();
     });
 
     it(
         "does not track a failed decryption where the event is subsequently successfully decrypted " +
             "and later becomes visible",
-        (done) => {
+        () => {
             const decryptedEvent = createFailedDecryptionEvent();
             const tracker = new DecryptionFailureTracker(
                 (total) => {
@@ -193,11 +184,10 @@ describe("DecryptionFailureTracker", function () {
 
             // Immediately track the newest failures
             tracker.trackFailures();
-            done();
         },
     );
 
-    it("only tracks a single failure per event, despite multiple failed decryptions for multiple events", (done) => {
+    it("only tracks a single failure per event, despite multiple failed decryptions for multiple events", () => {
         const decryptedEvent = createFailedDecryptionEvent();
         const decryptedEvent2 = createFailedDecryptionEvent();
 
@@ -231,11 +221,9 @@ describe("DecryptionFailureTracker", function () {
         tracker.trackFailures();
 
         expect(count).toBe(2, count + " failures tracked, should only track a single failure per event");
-
-        done();
     });
 
-    it("should not track a failure for an event that was tracked previously", (done) => {
+    it("should not track a failure for an event that was tracked previously", () => {
         const decryptedEvent = createFailedDecryptionEvent();
 
         let count = 0;
@@ -261,11 +249,9 @@ describe("DecryptionFailureTracker", function () {
         tracker.trackFailures();
 
         expect(count).toBe(1, "should only track a single failure per event");
-
-        done();
     });
 
-    xit("should not track a failure for an event that was tracked in a previous session", (done) => {
+    it.skip("should not track a failure for an event that was tracked in a previous session", () => {
         // This test uses localStorage, clear it beforehand
         localStorage.clear();
 
@@ -304,8 +290,6 @@ describe("DecryptionFailureTracker", function () {
         secondTracker.trackFailures();
 
         expect(count).toBe(1, count + " failures tracked, should only track a single failure per event");
-
-        done();
     });
 
     it("should count different error codes separately for multiple failures with different error codes", () => {
diff --git a/test/MatrixClientPeg-test.ts b/test/MatrixClientPeg-test.ts
index 46b9757ad94..5608b803d65 100644
--- a/test/MatrixClientPeg-test.ts
+++ b/test/MatrixClientPeg-test.ts
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";
+import fetchMockJest from "fetch-mock-jest";
 
 import { advanceDateAndTime, stubClient } from "./test-utils";
 import { IMatrixClientPeg, MatrixClientPeg as peg } from "../src/MatrixClientPeg";
@@ -68,6 +69,7 @@ describe("MatrixClientPeg", () => {
             // instantiate a MatrixClientPegClass instance, with a new MatrixClient
             const PegClass = Object.getPrototypeOf(peg).constructor;
             testPeg = new PegClass();
+            fetchMockJest.get("http://example.com/_matrix/client/versions", {});
             testPeg.replaceUsingCreds({
                 accessToken: "SEKRET",
                 homeserverUrl: "http://example.com",
diff --git a/test/Notifier-test.ts b/test/Notifier-test.ts
index e156658ddc5..033360d04cc 100644
--- a/test/Notifier-test.ts
+++ b/test/Notifier-test.ts
@@ -302,7 +302,7 @@ describe("Notifier", () => {
             );
         });
 
-        it("should display the expected notification for a broadcast chunk with sequence = 1", () => {
+        it("should display the expected notification for a broadcast chunk with sequence = 2", () => {
             const audioEvent = mkAudioEvent({ sequence: 2 });
             Notifier.displayPopupNotification(audioEvent, testRoom);
             expect(MockPlatform.displayNotification).not.toHaveBeenCalled();
diff --git a/test/PosthogAnalytics-test.ts b/test/PosthogAnalytics-test.ts
index 5188bd9a1fd..e0b47e028ed 100644
--- a/test/PosthogAnalytics-test.ts
+++ b/test/PosthogAnalytics-test.ts
@@ -35,7 +35,7 @@ const getFakePosthog = (): PostHog =>
         register: jest.fn(),
     } as unknown as PostHog);
 
-export interface ITestEvent extends IPosthogEvent {
+interface ITestEvent extends IPosthogEvent {
     eventName: "JestTestEvents";
     foo?: string;
 }
diff --git a/test/RoomNotifs-test.ts b/test/RoomNotifs-test.ts
index 04ee9e693b4..e80e943e3c4 100644
--- a/test/RoomNotifs-test.ts
+++ b/test/RoomNotifs-test.ts
@@ -218,7 +218,7 @@ describe("RoomNotifs test", () => {
             expect(getUnreadNotificationCount(room, NotificationCountType.Highlight, THREAD_ID)).toBe(0);
         });
 
-        it("counts notifications type", () => {
+        it("counts thread notifications type", () => {
             room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Total, 2);
             room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Highlight, 1);
 
diff --git a/test/ScalarAuthClient-test.ts b/test/ScalarAuthClient-test.ts
index 9dad8e24596..aa4213c14a6 100644
--- a/test/ScalarAuthClient-test.ts
+++ b/test/ScalarAuthClient-test.ts
@@ -58,7 +58,7 @@ describe("ScalarAuthClient", function () {
 
         await sac.connect();
 
-        expect(sac.exchangeForScalarToken).toBeCalledWith(tokenObject);
+        expect(sac.exchangeForScalarToken).toHaveBeenCalledWith(tokenObject);
         expect(sac.hasCredentials).toBeTruthy();
         // @ts-ignore private property
         expect(sac.scalarToken).toEqual("wokentoken");
diff --git a/test/SlidingSyncManager-test.ts b/test/SlidingSyncManager-test.ts
index 19183663830..3b49e7ee2a7 100644
--- a/test/SlidingSyncManager-test.ts
+++ b/test/SlidingSyncManager-test.ts
@@ -46,7 +46,7 @@ describe("SlidingSyncManager", () => {
             mocked(slidingSync.getRoomSubscriptions).mockReturnValue(subs);
             mocked(slidingSync.modifyRoomSubscriptions).mockResolvedValue("yep");
             await manager.setRoomVisible(roomId, true);
-            expect(slidingSync.modifyRoomSubscriptions).toBeCalledWith(new Set<string>([roomId]));
+            expect(slidingSync.modifyRoomSubscriptions).toHaveBeenCalledWith(new Set<string>([roomId]));
         });
         it("adds a custom subscription for a lazy-loadable room", async () => {
             const roomId = "!lazy:id";
@@ -72,9 +72,9 @@ describe("SlidingSyncManager", () => {
             mocked(slidingSync.getRoomSubscriptions).mockReturnValue(subs);
             mocked(slidingSync.modifyRoomSubscriptions).mockResolvedValue("yep");
             await manager.setRoomVisible(roomId, true);
-            expect(slidingSync.modifyRoomSubscriptions).toBeCalledWith(new Set<string>([roomId]));
+            expect(slidingSync.modifyRoomSubscriptions).toHaveBeenCalledWith(new Set<string>([roomId]));
             // we aren't prescriptive about what the sub name is.
-            expect(slidingSync.useCustomSubscription).toBeCalledWith(roomId, expect.anything());
+            expect(slidingSync.useCustomSubscription).toHaveBeenCalledWith(roomId, expect.anything());
         });
     });
 
@@ -86,7 +86,7 @@ describe("SlidingSyncManager", () => {
             await manager.ensureListRegistered(listKey, {
                 sort: ["by_recency"],
             });
-            expect(slidingSync.setList).toBeCalledWith(
+            expect(slidingSync.setList).toHaveBeenCalledWith(
                 listKey,
                 expect.objectContaining({
                     sort: ["by_recency"],
@@ -103,7 +103,7 @@ describe("SlidingSyncManager", () => {
             await manager.ensureListRegistered(listKey, {
                 sort: ["by_recency"],
             });
-            expect(slidingSync.setList).toBeCalledWith(
+            expect(slidingSync.setList).toHaveBeenCalledWith(
                 listKey,
                 expect.objectContaining({
                     sort: ["by_recency"],
@@ -121,8 +121,8 @@ describe("SlidingSyncManager", () => {
             await manager.ensureListRegistered(listKey, {
                 ranges: [[0, 52]],
             });
-            expect(slidingSync.setList).not.toBeCalled();
-            expect(slidingSync.setListRanges).toBeCalledWith(listKey, [[0, 52]]);
+            expect(slidingSync.setList).not.toHaveBeenCalled();
+            expect(slidingSync.setListRanges).toHaveBeenCalledWith(listKey, [[0, 52]]);
         });
 
         it("no-ops for idential changes", async () => {
@@ -136,8 +136,8 @@ describe("SlidingSyncManager", () => {
                 ranges: [[0, 42]],
                 sort: ["by_recency"],
             });
-            expect(slidingSync.setList).not.toBeCalled();
-            expect(slidingSync.setListRanges).not.toBeCalled();
+            expect(slidingSync.setList).not.toHaveBeenCalled();
+            expect(slidingSync.setListRanges).not.toHaveBeenCalled();
         });
     });
 
@@ -163,12 +163,12 @@ describe("SlidingSyncManager", () => {
                 [50, 59],
                 [60, 69],
             ];
-            expect(slidingSync.getListData).toBeCalledTimes(wantWindows.length);
-            expect(slidingSync.setList).toBeCalledTimes(1);
-            expect(slidingSync.setListRanges).toBeCalledTimes(wantWindows.length - 1);
+            expect(slidingSync.getListData).toHaveBeenCalledTimes(wantWindows.length);
+            expect(slidingSync.setList).toHaveBeenCalledTimes(1);
+            expect(slidingSync.setListRanges).toHaveBeenCalledTimes(wantWindows.length - 1);
             wantWindows.forEach((range, i) => {
                 if (i === 0) {
-                    expect(slidingSync.setList).toBeCalledWith(
+                    expect(slidingSync.setList).toHaveBeenCalledWith(
                         SlidingSyncManager.ListSearch,
                         expect.objectContaining({
                             ranges: [[0, batchSize - 1], range],
@@ -176,7 +176,7 @@ describe("SlidingSyncManager", () => {
                     );
                     return;
                 }
-                expect(slidingSync.setListRanges).toBeCalledWith(SlidingSyncManager.ListSearch, [
+                expect(slidingSync.setListRanges).toHaveBeenCalledWith(SlidingSyncManager.ListSearch, [
                     [0, batchSize - 1],
                     range,
                 ]);
@@ -193,9 +193,9 @@ describe("SlidingSyncManager", () => {
                 };
             });
             await manager.startSpidering(batchSize, gapMs);
-            expect(slidingSync.getListData).toBeCalledTimes(1);
-            expect(slidingSync.setList).toBeCalledTimes(1);
-            expect(slidingSync.setList).toBeCalledWith(
+            expect(slidingSync.getListData).toHaveBeenCalledTimes(1);
+            expect(slidingSync.setList).toHaveBeenCalledTimes(1);
+            expect(slidingSync.setList).toHaveBeenCalledWith(
                 SlidingSyncManager.ListSearch,
                 expect.objectContaining({
                     ranges: [
@@ -216,9 +216,9 @@ describe("SlidingSyncManager", () => {
                 };
             });
             await manager.startSpidering(batchSize, gapMs);
-            expect(slidingSync.getListData).toBeCalledTimes(1);
-            expect(slidingSync.setList).toBeCalledTimes(1);
-            expect(slidingSync.setList).toBeCalledWith(
+            expect(slidingSync.getListData).toHaveBeenCalledTimes(1);
+            expect(slidingSync.setList).toHaveBeenCalledTimes(1);
+            expect(slidingSync.setList).toHaveBeenCalledWith(
                 SlidingSyncManager.ListSearch,
                 expect.objectContaining({
                     ranges: [
diff --git a/test/Terms-test.tsx b/test/Terms-test.tsx
index 7d02c3fe66b..c04ddd03dda 100644
--- a/test/Terms-test.tsx
+++ b/test/Terms-test.tsx
@@ -68,7 +68,7 @@ describe("Terms", function () {
         const interactionCallback = jest.fn().mockResolvedValue([]);
         await startTermsFlow([IM_SERVICE_ONE], interactionCallback);
 
-        expect(interactionCallback).toBeCalledWith(
+        expect(interactionCallback).toHaveBeenCalledWith(
             [
                 {
                     service: IM_SERVICE_ONE,
@@ -100,7 +100,7 @@ describe("Terms", function () {
         await startTermsFlow([IM_SERVICE_ONE], interactionCallback);
 
         expect(interactionCallback).not.toHaveBeenCalled();
-        expect(mockClient.agreeToTerms).toBeCalledWith(SERVICE_TYPES.IM, "https://imone.test", "a token token", [
+        expect(mockClient.agreeToTerms).toHaveBeenCalledWith(SERVICE_TYPES.IM, "https://imone.test", "a token token", [
             "http://example.com/one",
         ]);
     });
@@ -124,7 +124,7 @@ describe("Terms", function () {
         const interactionCallback = jest.fn().mockResolvedValue(["http://example.com/one", "http://example.com/two"]);
         await startTermsFlow([IM_SERVICE_ONE], interactionCallback);
 
-        expect(interactionCallback).toBeCalledWith(
+        expect(interactionCallback).toHaveBeenCalledWith(
             [
                 {
                     service: IM_SERVICE_ONE,
@@ -135,7 +135,7 @@ describe("Terms", function () {
             ],
             ["http://example.com/one"],
         );
-        expect(mockClient.agreeToTerms).toBeCalledWith(SERVICE_TYPES.IM, "https://imone.test", "a token token", [
+        expect(mockClient.agreeToTerms).toHaveBeenCalledWith(SERVICE_TYPES.IM, "https://imone.test", "a token token", [
             "http://example.com/one",
             "http://example.com/two",
         ]);
@@ -170,7 +170,7 @@ describe("Terms", function () {
         const interactionCallback = jest.fn().mockResolvedValue(["http://example.com/one", "http://example.com/two"]);
         await startTermsFlow([IM_SERVICE_ONE, IM_SERVICE_TWO], interactionCallback);
 
-        expect(interactionCallback).toBeCalledWith(
+        expect(interactionCallback).toHaveBeenCalledWith(
             [
                 {
                     service: IM_SERVICE_TWO,
@@ -181,10 +181,10 @@ describe("Terms", function () {
             ],
             ["http://example.com/one"],
         );
-        expect(mockClient.agreeToTerms).toBeCalledWith(SERVICE_TYPES.IM, "https://imone.test", "a token token", [
+        expect(mockClient.agreeToTerms).toHaveBeenCalledWith(SERVICE_TYPES.IM, "https://imone.test", "a token token", [
             "http://example.com/one",
         ]);
-        expect(mockClient.agreeToTerms).toBeCalledWith(SERVICE_TYPES.IM, "https://imtwo.test", "a token token", [
+        expect(mockClient.agreeToTerms).toHaveBeenCalledWith(SERVICE_TYPES.IM, "https://imtwo.test", "a token token", [
             "http://example.com/two",
         ]);
     });
diff --git a/test/TextForEvent-test.ts b/test/TextForEvent-test.ts
index 97a093efee9..161d3e26507 100644
--- a/test/TextForEvent-test.ts
+++ b/test/TextForEvent-test.ts
@@ -471,7 +471,7 @@ describe("TextForEvent", () => {
                 expect(textForEvent(callEvent)).toEqual("Video call started in Test room.");
             });
 
-            it("returns correct message for call event when supported", () => {
+            it("returns correct message for call event when not supported", () => {
                 mocked(mockClient).supportsVoip.mockReturnValue(false);
 
                 expect(textForEvent(callEvent)).toEqual(
diff --git a/test/accessibility/KeyboardShortcutUtils-test.ts b/test/accessibility/KeyboardShortcutUtils-test.ts
index cca7b55085c..2a78f7c1b8b 100644
--- a/test/accessibility/KeyboardShortcutUtils-test.ts
+++ b/test/accessibility/KeyboardShortcutUtils-test.ts
@@ -59,7 +59,7 @@ describe("KeyboardShortcutUtils", () => {
     });
 
     describe("correctly filters shortcuts", () => {
-        it("when on web and not on macOS ", async () => {
+        it("when on web and not on macOS", async () => {
             mockKeyboardShortcuts({
                 KEYBOARD_SHORTCUTS: {
                     Keybind1: {},
diff --git a/test/accessibility/RovingTabIndex-test.tsx b/test/accessibility/RovingTabIndex-test.tsx
index 54625b7ef51..4a2e67fece6 100644
--- a/test/accessibility/RovingTabIndex-test.tsx
+++ b/test/accessibility/RovingTabIndex-test.tsx
@@ -185,7 +185,6 @@ describe("RovingTabIndex", () => {
             const ref4 = React.createRef<HTMLElement>();
 
             let state: IState = {
-                activeRef: null,
                 refs: [ref1, ref2, ref3, ref4],
             };
 
@@ -196,7 +195,6 @@ describe("RovingTabIndex", () => {
                 },
             });
             expect(state).toStrictEqual({
-                activeRef: null,
                 refs: [ref1, ref3, ref4],
             });
 
@@ -207,7 +205,6 @@ describe("RovingTabIndex", () => {
                 },
             });
             expect(state).toStrictEqual({
-                activeRef: null,
                 refs: [ref1, ref4],
             });
 
@@ -218,7 +215,6 @@ describe("RovingTabIndex", () => {
                 },
             });
             expect(state).toStrictEqual({
-                activeRef: null,
                 refs: [ref1],
             });
 
@@ -229,7 +225,6 @@ describe("RovingTabIndex", () => {
                 },
             });
             expect(state).toStrictEqual({
-                activeRef: null,
                 refs: [],
             });
         });
@@ -250,7 +245,6 @@ describe("RovingTabIndex", () => {
             );
 
             let state: IState = {
-                activeRef: null,
                 refs: [],
             };
 
diff --git a/test/autocomplete/EmojiProvider-test.ts b/test/autocomplete/EmojiProvider-test.ts
index ac5e40d041b..c3f3c7fc353 100644
--- a/test/autocomplete/EmojiProvider-test.ts
+++ b/test/autocomplete/EmojiProvider-test.ts
@@ -69,20 +69,30 @@ describe("EmojiProvider", function () {
         },
     );
 
-    it("Returns correct autocompletion based on recently used emoji", async function () {
+    it("Recently used emojis are correctly sorted", async function () {
         add("😘"); //kissing_heart
-        add("😘");
-        add("😚"); //kissing_closed_eyes
-        const emojiProvider = new EmojiProvider(null!);
+        add("💗"); //heartpulse
+        add("💗"); //heartpulse
+        add("😍"); //heart_eyes
 
-        let completionsList = await emojiProvider.getCompletions(":kis", { beginning: true, end: 3, start: 3 });
-        expect(completionsList[0].component!.props.title).toEqual(":kissing_heart:");
-        expect(completionsList[1].component!.props.title).toEqual(":kissing_closed_eyes:");
+        const ep = new EmojiProvider(testRoom);
+        const completionsList = await ep.getCompletions(":heart", { beginning: true, start: 0, end: 6 });
+        expect(completionsList[0]?.component?.props.title).toEqual(":heartpulse:");
+        expect(completionsList[1]?.component?.props.title).toEqual(":heart_eyes:");
+    });
 
-        completionsList = await emojiProvider.getCompletions(":kissing_c", { beginning: true, end: 3, start: 3 });
-        expect(completionsList[0].component!.props.title).toEqual(":kissing_closed_eyes:");
+    it("Exact match in recently used takes the lead", async function () {
+        add("😘"); //kissing_heart
+        add("💗"); //heartpulse
+        add("💗"); //heartpulse
+        add("😍"); //heart_eyes
+
+        add("❤️"); //heart
+        const ep = new EmojiProvider(testRoom);
+        const completionsList = await ep.getCompletions(":heart", { beginning: true, start: 0, end: 6 });
 
-        completionsList = await emojiProvider.getCompletions(":so", { beginning: true, end: 2, start: 2 });
-        expect(completionsList[0].component!.props.title).toEqual(":sob:");
+        expect(completionsList[0]?.component?.props.title).toEqual(":heart:");
+        expect(completionsList[1]?.component?.props.title).toEqual(":heartpulse:");
+        expect(completionsList[2]?.component?.props.title).toEqual(":heart_eyes:");
     });
 });
diff --git a/test/components/structures/MessagePanel-test.tsx b/test/components/structures/MessagePanel-test.tsx
index e02e96b6163..b565cef3bc3 100644
--- a/test/components/structures/MessagePanel-test.tsx
+++ b/test/components/structures/MessagePanel-test.tsx
@@ -46,7 +46,6 @@ const roomId = "!roomId:server_name";
 
 describe("MessagePanel", function () {
     let clock: FakeTimers.InstalledClock;
-    const realSetTimeout = window.setTimeout;
     const events = mkEvents();
     const userId = "@me:here";
     const client = getMockClientWithEventEmitter({
@@ -404,7 +403,7 @@ describe("MessagePanel", function () {
         expect(isReadMarkerVisible(rm)).toBeFalsy();
     });
 
-    it("shows a ghost read-marker when the read-marker moves", function (done) {
+    it("shows a ghost read-marker when the read-marker moves", function () {
         // fake the clock so that we can test the velocity animation.
         clock = FakeTimers.install();
 
@@ -446,19 +445,9 @@ describe("MessagePanel", function () {
         // the second should be the real thing
         expect(readMarkers[1].previousSibling).toEqual(tiles[6]);
 
-        // advance the clock, and then let the browser run an animation frame,
-        // to let the animation start
+        // advance the clock, and then let the browser run an animation frame to let the animation start
         clock.tick(1500);
-
-        realSetTimeout(() => {
-            // then advance it again to let it complete
-            clock.tick(1000);
-            realSetTimeout(() => {
-                // the ghost should now have finished
-                expect(hr.style.opacity).toEqual("0");
-                done();
-            }, 100);
-        }, 100);
+        expect(hr.style.opacity).toEqual("0");
     });
 
     it("should collapse creation events", function () {
diff --git a/test/components/structures/RoomView-test.tsx b/test/components/structures/RoomView-test.tsx
index 704dc5f66bb..f7425072ef8 100644
--- a/test/components/structures/RoomView-test.tsx
+++ b/test/components/structures/RoomView-test.tsx
@@ -14,16 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import React, { createRef, RefObject } from "react";
 import { mocked, MockedObject } from "jest-mock";
 import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
 import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { EventType } from "matrix-js-sdk/src/matrix";
+import { EventType, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { MEGOLM_ALGORITHM } from "matrix-js-sdk/src/crypto/olmlib";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render, screen, RenderResult } from "@testing-library/react";
 
 import {
     stubClient,
@@ -31,6 +29,11 @@ import {
     unmockPlatformPeg,
     wrapInMatrixClientContext,
     flushPromises,
+    mkEvent,
+    setupAsyncStoreWithClient,
+    filterConsole,
+    mkRoomMemberJoinEvent,
+    mkThirdPartyInviteEvent,
 } from "../../test-utils";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
 import { Action } from "../../../src/dispatcher/actions";
@@ -49,6 +52,9 @@ import { createDmLocalRoom } from "../../../src/utils/dm/createDmLocalRoom";
 import { UPDATE_EVENT } from "../../../src/stores/AsyncStore";
 import { SdkContextClass, SDKContext } from "../../../src/contexts/SDKContext";
 import VoipUserMapper from "../../../src/VoipUserMapper";
+import WidgetUtils from "../../../src/utils/WidgetUtils";
+import { WidgetType } from "../../../src/widgets/WidgetType";
+import WidgetStore from "../../../src/stores/WidgetStore";
 
 const RoomView = wrapInMatrixClientContext(_RoomView);
 
@@ -59,7 +65,10 @@ describe("RoomView", () => {
     let roomCount = 0;
     let stores: SdkContextClass;
 
-    beforeEach(async () => {
+    // mute some noise
+    filterConsole("RVS update", "does not have an m.room.create event", "Current version: 1", "Version capability");
+
+    beforeEach(() => {
         mockPlatformPeg({ reload: () => {} });
         stubClient();
         cli = mocked(MatrixClientPeg.get());
@@ -82,12 +91,12 @@ describe("RoomView", () => {
         jest.spyOn(VoipUserMapper.sharedInstance(), "getVirtualRoomForRoom").mockResolvedValue(undefined);
     });
 
-    afterEach(async () => {
+    afterEach(() => {
         unmockPlatformPeg();
         jest.restoreAllMocks();
     });
 
-    const mountRoomView = async (): Promise<ReactWrapper> => {
+    const mountRoomView = async (ref?: RefObject<_RoomView>): Promise<RenderResult> => {
         if (stores.roomViewStore.getRoomId() !== room.roomId) {
             const switchedRoom = new Promise<void>((resolve) => {
                 const subFn = () => {
@@ -108,7 +117,7 @@ describe("RoomView", () => {
             await switchedRoom;
         }
 
-        const roomView = mount(
+        const roomView = render(
             <SDKContext.Provider value={stores}>
                 <RoomView
                     // threepidInvite should be optional on RoomView props
@@ -116,6 +125,7 @@ describe("RoomView", () => {
                     threepidInvite={undefined as any}
                     resizeNotifier={new ResizeNotifier()}
                     forceTimeline={false}
+                    wrappedRef={ref as any}
                 />
             </SDKContext.Provider>,
         );
@@ -159,8 +169,11 @@ describe("RoomView", () => {
         await flushPromises();
         return roomView;
     };
-    const getRoomViewInstance = async (): Promise<_RoomView> =>
-        (await mountRoomView()).find(_RoomView).instance() as _RoomView;
+    const getRoomViewInstance = async (): Promise<_RoomView> => {
+        const ref = createRef<_RoomView>();
+        await mountRoomView(ref);
+        return ref.current!;
+    };
 
     it("when there is no room predecessor, getHiddenHighlightCount should return 0", async () => {
         const instance = await getRoomViewInstance();
@@ -359,4 +372,116 @@ describe("RoomView", () => {
             });
         });
     });
+
+    describe("when rendering a DM room with a single third-party invite", () => {
+        beforeEach(async () => {
+            room.currentState.setStateEvents([
+                mkRoomMemberJoinEvent(cli.getSafeUserId(), room.roomId),
+                mkThirdPartyInviteEvent(cli.getSafeUserId(), "user@example.com", room.roomId),
+            ]);
+            jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(cli.getSafeUserId());
+            jest.spyOn(DMRoomMap.shared(), "getRoomIds").mockReturnValue(new Set([room.roomId]));
+            mocked(cli).isRoomEncrypted.mockReturnValue(true);
+            await renderRoomView();
+        });
+
+        it("should render the »waiting for third-party« view", () => {
+            expect(screen.getByText("Waiting for users to join Element")).toBeInTheDocument();
+            expect(
+                screen.getByText(
+                    "Once invited users have joined Element, you will be able to chat and the room will be end-to-end encrypted",
+                ),
+            ).toBeInTheDocument();
+
+            // no message composer
+            expect(screen.queryByText("Send an encrypted message…")).not.toBeInTheDocument();
+            expect(screen.queryByText("Send a message…")).not.toBeInTheDocument();
+        });
+    });
+
+    describe("when there is a RoomView", () => {
+        const widget1Id = "widget1";
+        const widget2Id = "widget2";
+        const otherUserId = "@other:example.com";
+
+        const addJitsiWidget = async (id: string, user: string, ts?: number): Promise<void> => {
+            const widgetEvent = mkEvent({
+                event: true,
+                room: room.roomId,
+                user,
+                type: "im.vector.modular.widgets",
+                content: {
+                    id,
+                    name: "Jitsi",
+                    type: WidgetType.JITSI.preferred,
+                    url: "https://example.com",
+                },
+                skey: id,
+                ts,
+            });
+            room.addLiveEvents([widgetEvent]);
+            room.currentState.setStateEvents([widgetEvent]);
+            cli.emit(RoomStateEvent.Events, widgetEvent, room.currentState, null);
+            await flushPromises();
+        };
+
+        beforeEach(async () => {
+            jest.spyOn(WidgetUtils, "setRoomWidget");
+            const widgetStore = WidgetStore.instance;
+            await setupAsyncStoreWithClient(widgetStore, cli);
+            getRoomViewInstance();
+        });
+
+        const itShouldNotRemoveTheLastWidget = (): void => {
+            it("should not remove the last widget", (): void => {
+                expect(WidgetUtils.setRoomWidget).not.toHaveBeenCalledWith(room.roomId, widget2Id);
+            });
+        };
+
+        describe("and there is a Jitsi widget from another user", () => {
+            beforeEach(async () => {
+                await addJitsiWidget(widget1Id, otherUserId, 10_000);
+            });
+
+            describe("and the current user adds a Jitsi widget after 10s", () => {
+                beforeEach(async () => {
+                    await addJitsiWidget(widget2Id, cli.getSafeUserId(), 20_000);
+                });
+
+                it("the last Jitsi widget should be removed", () => {
+                    expect(WidgetUtils.setRoomWidget).toHaveBeenCalledWith(room.roomId, widget2Id);
+                });
+            });
+
+            describe("and the current user adds a Jitsi widget after two minutes", () => {
+                beforeEach(async () => {
+                    await addJitsiWidget(widget2Id, cli.getSafeUserId(), 130_000);
+                });
+
+                itShouldNotRemoveTheLastWidget();
+            });
+
+            describe("and the current user adds a Jitsi widget without timestamp", () => {
+                beforeEach(async () => {
+                    await addJitsiWidget(widget2Id, cli.getSafeUserId());
+                });
+
+                itShouldNotRemoveTheLastWidget();
+            });
+        });
+
+        describe("and there is a Jitsi widget from another user without timestamp", () => {
+            beforeEach(async () => {
+                await addJitsiWidget(widget1Id, otherUserId);
+            });
+
+            describe("and the current user adds a Jitsi widget", () => {
+                beforeEach(async () => {
+                    await addJitsiWidget(widget2Id, cli.getSafeUserId(), 10_000);
+                });
+
+                itShouldNotRemoveTheLastWidget();
+            });
+        });
+    });
 });
diff --git a/test/components/structures/ThreadView-test.tsx b/test/components/structures/ThreadView-test.tsx
index 5b1526843be..94cfc660964 100644
--- a/test/components/structures/ThreadView-test.tsx
+++ b/test/components/structures/ThreadView-test.tsx
@@ -147,7 +147,7 @@ describe("ThreadView", () => {
         );
     });
 
-    it("sends a message with the correct fallback", async () => {
+    it("sends a thread message with the correct fallback", async () => {
         const { container } = await getComponent();
 
         const { rootEvent: rootEvent2 } = mkThread({
diff --git a/test/components/structures/TimelinePanel-test.tsx b/test/components/structures/TimelinePanel-test.tsx
index be566397149..1b8a0c4a9a7 100644
--- a/test/components/structures/TimelinePanel-test.tsx
+++ b/test/components/structures/TimelinePanel-test.tsx
@@ -15,8 +15,6 @@ limitations under the License.
 */
 
 import { render, waitFor, screen } from "@testing-library/react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
 import { ReceiptType } from "matrix-js-sdk/src/@types/read_receipts";
 import {
     EventTimelineSet,
@@ -38,7 +36,7 @@ import {
     ThreadEvent,
     ThreadFilterType,
 } from "matrix-js-sdk/src/models/thread";
-import React from "react";
+import React, { createRef } from "react";
 
 import TimelinePanel from "../../../src/components/structures/TimelinePanel";
 import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
@@ -137,15 +135,17 @@ describe("TimelinePanel", () => {
             // Create a TimelinePanel with ev0 already present
             const timelineSet = new EventTimelineSet(room, {});
             timelineSet.addLiveEvent(ev0);
-            const component: ReactWrapper<TimelinePanel> = mount(
+            const ref = createRef<TimelinePanel>();
+            render(
                 <TimelinePanel
                     timelineSet={timelineSet}
                     manageReadMarkers={true}
                     manageReadReceipts={true}
                     eventId={ev0.getId()}
+                    ref={ref}
                 />,
             );
-            const timelinePanel = component.instance() as TimelinePanel;
+            const timelinePanel = ref.current!;
 
             // An event arrived, and we read it
             timelineSet.addLiveEvent(ev1);
diff --git a/test/components/views/audio_messages/RecordingPlayback-test.tsx b/test/components/views/audio_messages/RecordingPlayback-test.tsx
index ac7f0e46593..ec20f12d637 100644
--- a/test/components/views/audio_messages/RecordingPlayback-test.tsx
+++ b/test/components/views/audio_messages/RecordingPlayback-test.tsx
@@ -15,20 +15,16 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
 import { mocked } from "jest-mock";
 import { logger } from "matrix-js-sdk/src/logger";
-import { act } from "react-dom/test-utils";
+import { fireEvent, render, RenderResult } from "@testing-library/react";
 
 import RecordingPlayback, { PlaybackLayout } from "../../../../src/components/views/audio_messages/RecordingPlayback";
 import { Playback } from "../../../../src/audio/Playback";
 import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
 import { createAudioContext } from "../../../../src/audio/compat";
-import { findByTestId, flushPromises } from "../../../test-utils";
-import PlaybackWaveform from "../../../../src/components/views/audio_messages/PlaybackWaveform";
-import SeekBar from "../../../../src/components/views/audio_messages/SeekBar";
-import PlaybackClock from "../../../../src/components/views/audio_messages/PlaybackClock";
+import { flushPromises } from "../../../test-utils";
+import { IRoomState } from "../../../../src/components/structures/RoomView";
 
 jest.mock("../../../../src/audio/compat", () => ({
     createAudioContext: jest.fn(),
@@ -57,12 +53,13 @@ describe("<RecordingPlayback />", () => {
 
     const mockChannelData = new Float32Array();
 
-    const defaultRoom = { roomId: "!room:server.org", timelineRenderingType: TimelineRenderingType.File };
+    const defaultRoom = { roomId: "!room:server.org", timelineRenderingType: TimelineRenderingType.File } as IRoomState;
     const getComponent = (props: React.ComponentProps<typeof RecordingPlayback>, room = defaultRoom) =>
-        mount(<RecordingPlayback {...props} />, {
-            wrappingComponent: RoomContext.Provider,
-            wrappingComponentProps: { value: room },
-        });
+        render(
+            <RoomContext.Provider value={room}>
+                <RecordingPlayback {...props} />
+            </RoomContext.Provider>,
+        );
 
     beforeEach(() => {
         jest.spyOn(logger, "error").mockRestore();
@@ -71,7 +68,7 @@ describe("<RecordingPlayback />", () => {
         mocked(createAudioContext).mockReturnValue(mockAudioContext as unknown as AudioContext);
     });
 
-    const getPlayButton = (component: ReactWrapper) => findByTestId(component, "play-pause-button").at(0);
+    const getPlayButton = (component: RenderResult) => component.getByTestId("play-pause-button");
 
     it("renders recording playback", () => {
         const playback = new Playback(new ArrayBuffer(8));
@@ -82,15 +79,16 @@ describe("<RecordingPlayback />", () => {
     it("disables play button while playback is decoding", async () => {
         const playback = new Playback(new ArrayBuffer(8));
         const component = getComponent({ playback });
-        expect(getPlayButton(component).props().disabled).toBeTruthy();
+        expect(getPlayButton(component)).toHaveAttribute("disabled");
+        expect(getPlayButton(component)).toHaveAttribute("aria-disabled", "true");
     });
 
     it("enables play button when playback is finished decoding", async () => {
         const playback = new Playback(new ArrayBuffer(8));
         const component = getComponent({ playback });
         await flushPromises();
-        component.setProps({});
-        expect(getPlayButton(component).props().disabled).toBeFalsy();
+        expect(getPlayButton(component)).not.toHaveAttribute("disabled");
+        expect(getPlayButton(component)).not.toHaveAttribute("aria-disabled", "true");
     });
 
     it("displays error when playback decoding fails", async () => {
@@ -101,7 +99,7 @@ describe("<RecordingPlayback />", () => {
         const playback = new Playback(new ArrayBuffer(8));
         const component = getComponent({ playback });
         await flushPromises();
-        expect(component.find(".text-warning").length).toBeFalsy();
+        expect(component.container.querySelector(".text-warning")).toBeDefined();
     });
 
     it("displays pre-prepared playback with correct playback phase", async () => {
@@ -109,8 +107,9 @@ describe("<RecordingPlayback />", () => {
         await playback.prepare();
         const component = getComponent({ playback });
         // playback already decoded, button is not disabled
-        expect(getPlayButton(component).props().disabled).toBeFalsy();
-        expect(component.find(".text-warning").length).toBeFalsy();
+        expect(getPlayButton(component)).not.toHaveAttribute("disabled");
+        expect(getPlayButton(component)).not.toHaveAttribute("aria-disabled", "true");
+        expect(component.container.querySelector(".text-warning")).toBeFalsy();
     });
 
     it("toggles playback on play pause button click", async () => {
@@ -119,9 +118,7 @@ describe("<RecordingPlayback />", () => {
         await playback.prepare();
         const component = getComponent({ playback });
 
-        act(() => {
-            getPlayButton(component).simulate("click");
-        });
+        fireEvent.click(getPlayButton(component));
 
         expect(playback.toggle).toHaveBeenCalled();
     });
@@ -131,9 +128,9 @@ describe("<RecordingPlayback />", () => {
             const playback = new Playback(new ArrayBuffer(8));
             const component = getComponent({ playback, layout: PlaybackLayout.Composer });
 
-            expect(component.find(PlaybackClock).length).toBeTruthy();
-            expect(component.find(PlaybackWaveform).length).toBeTruthy();
-            expect(component.find(SeekBar).length).toBeFalsy();
+            expect(component.container.querySelector(".mx_Clock")).toBeDefined();
+            expect(component.container.querySelector(".mx_Waveform")).toBeDefined();
+            expect(component.container.querySelector(".mx_SeekBar")).toBeFalsy();
         });
     });
 
@@ -142,18 +139,18 @@ describe("<RecordingPlayback />", () => {
             const playback = new Playback(new ArrayBuffer(8));
             const component = getComponent({ playback, layout: PlaybackLayout.Timeline });
 
-            expect(component.find(PlaybackClock).length).toBeTruthy();
-            expect(component.find(PlaybackWaveform).length).toBeTruthy();
-            expect(component.find(SeekBar).length).toBeTruthy();
+            expect(component.container.querySelector(".mx_Clock")).toBeDefined();
+            expect(component.container.querySelector(".mx_Waveform")).toBeDefined();
+            expect(component.container.querySelector(".mx_SeekBar")).toBeDefined();
         });
 
         it("should be the default", () => {
             const playback = new Playback(new ArrayBuffer(8));
             const component = getComponent({ playback }); // no layout set for test
 
-            expect(component.find(PlaybackClock).length).toBeTruthy();
-            expect(component.find(PlaybackWaveform).length).toBeTruthy();
-            expect(component.find(SeekBar).length).toBeTruthy();
+            expect(component.container.querySelector(".mx_Clock")).toBeDefined();
+            expect(component.container.querySelector(".mx_Waveform")).toBeDefined();
+            expect(component.container.querySelector(".mx_SeekBar")).toBeDefined();
         });
     });
 });
diff --git a/test/components/views/auth/RegistrationToken-test.tsx b/test/components/views/auth/RegistrationToken-test.tsx
index bbe6ebfe365..bd10615f7d5 100644
--- a/test/components/views/auth/RegistrationToken-test.tsx
+++ b/test/components/views/auth/RegistrationToken-test.tsx
@@ -17,9 +17,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { act } from "react-dom/test-utils";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import { fireEvent, render, RenderResult } from "@testing-library/react";
 
 import InteractiveAuthComponent from "../../../../src/components/structures/InteractiveAuth";
 import { flushPromises, getMockClientWithEventEmitter, unmockClientPeg } from "../../../test-utils";
@@ -34,7 +32,7 @@ describe("InteractiveAuthComponent", function () {
         makeRequest: jest.fn().mockResolvedValue(undefined),
         onAuthFinished: jest.fn(),
     };
-    const getComponent = (props = {}) => mount(<InteractiveAuthComponent {...defaultProps} {...props} />);
+    const getComponent = (props = {}) => render(<InteractiveAuthComponent {...defaultProps} {...props} />);
 
     beforeEach(function () {
         jest.clearAllMocks();
@@ -44,9 +42,10 @@ describe("InteractiveAuthComponent", function () {
         unmockClientPeg();
     });
 
-    const getSubmitButton = (wrapper: ReactWrapper) => wrapper.find('AccessibleButton[kind="primary"]').at(0);
-    const getRegistrationTokenInput = (wrapper: ReactWrapper) =>
-        wrapper.find('input[name="registrationTokenField"]').at(0);
+    const getSubmitButton = ({ container }: RenderResult) =>
+        container.querySelector(".mx_AccessibleButton_kind_primary");
+    const getRegistrationTokenInput = ({ container }: RenderResult) =>
+        container.querySelector('input[name="registrationTokenField"]');
 
     it("Should successfully complete a registration token flow", async () => {
         const onAuthFinished = jest.fn();
@@ -61,34 +60,31 @@ describe("InteractiveAuthComponent", function () {
 
         const registrationTokenNode = getRegistrationTokenInput(wrapper);
         const submitNode = getSubmitButton(wrapper);
-        const formNode = wrapper.find("form").at(0);
+        const formNode = wrapper.container.querySelector("form");
 
         expect(registrationTokenNode).toBeTruthy();
         expect(submitNode).toBeTruthy();
         expect(formNode).toBeTruthy();
 
         // submit should be disabled
-        expect(submitNode.props().disabled).toBe(true);
+        expect(submitNode).toHaveAttribute("disabled");
+        expect(submitNode).toHaveAttribute("aria-disabled", "true");
 
         // put something in the registration token box
-        act(() => {
-            registrationTokenNode.simulate("change", { target: { value: "s3kr3t" } });
-            wrapper.setProps({});
-        });
+        fireEvent.change(registrationTokenNode!, { target: { value: "s3kr3t" } });
 
-        expect(getRegistrationTokenInput(wrapper).props().value).toEqual("s3kr3t");
-        expect(getSubmitButton(wrapper).props().disabled).toBe(false);
+        expect(getRegistrationTokenInput(wrapper)).toHaveValue("s3kr3t");
+        expect(submitNode).not.toHaveAttribute("disabled");
+        expect(submitNode).not.toHaveAttribute("aria-disabled", "true");
 
         // hit enter; that should trigger a request
-        act(() => {
-            formNode.simulate("submit");
-        });
+        fireEvent.submit(formNode!);
 
         // wait for auth request to resolve
         await flushPromises();
 
         expect(makeRequest).toHaveBeenCalledTimes(1);
-        expect(makeRequest).toBeCalledWith(
+        expect(makeRequest).toHaveBeenCalledWith(
             expect.objectContaining({
                 session: "sess",
                 type: "m.login.registration_token",
@@ -96,8 +92,8 @@ describe("InteractiveAuthComponent", function () {
             }),
         );
 
-        expect(onAuthFinished).toBeCalledTimes(1);
-        expect(onAuthFinished).toBeCalledWith(
+        expect(onAuthFinished).toHaveBeenCalledTimes(1);
+        expect(onAuthFinished).toHaveBeenCalledWith(
             true,
             { a: 1 },
             { clientSecret: "t35tcl1Ent5ECr3T", emailSid: undefined },
diff --git a/test/components/views/beacon/BeaconViewDialog-test.tsx b/test/components/views/beacon/BeaconViewDialog-test.tsx
index 11c1863a577..cee880c966e 100644
--- a/test/components/views/beacon/BeaconViewDialog-test.tsx
+++ b/test/components/views/beacon/BeaconViewDialog-test.tsx
@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { act } from "react-dom/test-utils";
-import { fireEvent, render, RenderResult } from "@testing-library/react";
+import { act, fireEvent, render, RenderResult } from "@testing-library/react";
 import { MatrixClient, MatrixEvent, Room, RoomMember, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";
 import * as maplibregl from "maplibre-gl";
 import { mocked } from "jest-mock";
diff --git a/test/components/views/beacon/OwnBeaconStatus-test.tsx b/test/components/views/beacon/OwnBeaconStatus-test.tsx
index 019af5d6644..2abcbbc354e 100644
--- a/test/components/views/beacon/OwnBeaconStatus-test.tsx
+++ b/test/components/views/beacon/OwnBeaconStatus-test.tsx
@@ -29,6 +29,14 @@ jest.mock("../../../../src/utils/beacon/useOwnLiveBeacons", () => ({
     useOwnLiveBeacons: jest.fn(),
 }));
 
+const defaultLiveBeaconsState = {
+    onStopSharing: jest.fn(),
+    onResetLocationPublishError: jest.fn(),
+    stoppingInProgress: false,
+    hasStopSharingError: false,
+    hasLocationPublishError: false,
+};
+
 describe("<OwnBeaconStatus />", () => {
     const defaultProps = {
         displayStatus: BeaconDisplayStatus.Loading,
@@ -43,7 +51,7 @@ describe("<OwnBeaconStatus />", () => {
 
     beforeEach(() => {
         jest.spyOn(global.Date, "now").mockReturnValue(123456789);
-        mocked(useOwnLiveBeacons).mockClear().mockReturnValue({});
+        mocked(useOwnLiveBeacons).mockClear().mockReturnValue(defaultLiveBeaconsState);
 
         defaultBeacon = new Beacon(makeBeaconInfoEvent(userId, roomId));
     });
@@ -57,6 +65,7 @@ describe("<OwnBeaconStatus />", () => {
         it("renders stop button", () => {
             const displayStatus = BeaconDisplayStatus.Active;
             mocked(useOwnLiveBeacons).mockReturnValue({
+                ...defaultLiveBeaconsState,
                 onStopSharing: jest.fn(),
             });
             renderComponent({ displayStatus, beacon: defaultBeacon });
@@ -68,6 +77,7 @@ describe("<OwnBeaconStatus />", () => {
             const displayStatus = BeaconDisplayStatus.Active;
             const onStopSharing = jest.fn();
             mocked(useOwnLiveBeacons).mockReturnValue({
+                ...defaultLiveBeaconsState,
                 onStopSharing,
             });
             renderComponent({ displayStatus, beacon: defaultBeacon });
@@ -90,6 +100,7 @@ describe("<OwnBeaconStatus />", () => {
             it("renders in error mode", () => {
                 const displayStatus = BeaconDisplayStatus.Active;
                 mocked(useOwnLiveBeacons).mockReturnValue({
+                    ...defaultLiveBeaconsState,
                     hasLocationPublishError: true,
                     onResetLocationPublishError: jest.fn(),
                 });
@@ -103,6 +114,7 @@ describe("<OwnBeaconStatus />", () => {
                 const displayStatus = BeaconDisplayStatus.Active;
                 const onResetLocationPublishError = jest.fn();
                 mocked(useOwnLiveBeacons).mockReturnValue({
+                    ...defaultLiveBeaconsState,
                     hasLocationPublishError: true,
                     onResetLocationPublishError,
                 });
@@ -117,6 +129,7 @@ describe("<OwnBeaconStatus />", () => {
             it("renders in error mode", () => {
                 const displayStatus = BeaconDisplayStatus.Active;
                 mocked(useOwnLiveBeacons).mockReturnValue({
+                    ...defaultLiveBeaconsState,
                     hasLocationPublishError: false,
                     hasStopSharingError: true,
                     onStopSharing: jest.fn(),
@@ -131,6 +144,7 @@ describe("<OwnBeaconStatus />", () => {
                 const displayStatus = BeaconDisplayStatus.Active;
                 const onStopSharing = jest.fn();
                 mocked(useOwnLiveBeacons).mockReturnValue({
+                    ...defaultLiveBeaconsState,
                     hasStopSharingError: true,
                     onStopSharing,
                 });
diff --git a/test/components/views/context_menus/ContextMenu-test.tsx b/test/components/views/context_menus/ContextMenu-test.tsx
index f97842ffc40..56c45d499b7 100644
--- a/test/components/views/context_menus/ContextMenu-test.tsx
+++ b/test/components/views/context_menus/ContextMenu-test.tsx
@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
+import { render } from "@testing-library/react";
 
 import ContextMenu, { ChevronFace } from "../../../../src/components/structures/ContextMenu";
 import UIStore from "../../../../src/stores/UIStore";
@@ -41,11 +40,11 @@ describe("<ContextMenu />", () => {
 
     const targetChevronOffset = 25;
 
-    describe("near top edge of window", () => {
+    it("near top edge of window", () => {
         const targetY = -50;
         const onFinished = jest.fn();
 
-        const wrapper = mount(
+        render(
             <ContextMenu
                 bottom={windowSize - targetY - menuSize}
                 right={menuSize}
@@ -54,25 +53,25 @@ describe("<ContextMenu />", () => {
                 chevronOffset={targetChevronOffset}
             />,
         );
-        const chevron = wrapper.find(".mx_ContextualMenu_chevron_left");
+        const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_left")!;
 
-        const bottomStyle = parseInt(wrapper.getDOMNode<HTMLElement>().style.getPropertyValue("bottom"));
+        const bottomStyle = parseInt(
+            document.querySelector<HTMLElement>(".mx_ContextualMenu_wrapper")!.style.getPropertyValue("bottom"),
+        );
         const actualY = windowSize - bottomStyle - menuSize;
-        const actualChevronOffset = parseInt(chevron.getDOMNode<HTMLElement>().style.getPropertyValue("top"));
-
-        it("stays within the window", () => {
-            expect(actualY).toBeGreaterThanOrEqual(0);
-        });
-        it("positions the chevron correctly", () => {
-            expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY);
-        });
+        const actualChevronOffset = parseInt(chevron.style.getPropertyValue("top"));
+
+        // stays within the window
+        expect(actualY).toBeGreaterThanOrEqual(0);
+        // positions the chevron correctly
+        expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY);
     });
 
-    describe("near right edge of window", () => {
+    it("near right edge of window", () => {
         const targetX = windowSize - menuSize + 50;
         const onFinished = jest.fn();
 
-        const wrapper = mount(
+        render(
             <ContextMenu
                 bottom={0}
                 onFinished={onFinished}
@@ -81,24 +80,24 @@ describe("<ContextMenu />", () => {
                 chevronOffset={targetChevronOffset}
             />,
         );
-        const chevron = wrapper.find(".mx_ContextualMenu_chevron_top");
+        const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_top")!;
 
-        const actualX = parseInt(wrapper.getDOMNode<HTMLElement>().style.getPropertyValue("left"));
-        const actualChevronOffset = parseInt(chevron.getDOMNode<HTMLElement>().style.getPropertyValue("left"));
+        const actualX = parseInt(
+            document.querySelector<HTMLElement>(".mx_ContextualMenu_wrapper")!.style.getPropertyValue("left"),
+        );
+        const actualChevronOffset = parseInt(chevron.style.getPropertyValue("left"));
 
-        it("stays within the window", () => {
-            expect(actualX + menuSize).toBeLessThanOrEqual(windowSize);
-        });
-        it("positions the chevron correctly", () => {
-            expect(actualChevronOffset).toEqual(targetChevronOffset + targetX - actualX);
-        });
+        // stays within the window
+        expect(actualX + menuSize).toBeLessThanOrEqual(windowSize);
+        // positions the chevron correctly
+        expect(actualChevronOffset).toEqual(targetChevronOffset + targetX - actualX);
     });
 
-    describe("near bottom edge of window", () => {
+    it("near bottom edge of window", () => {
         const targetY = windowSize - menuSize + 50;
         const onFinished = jest.fn();
 
-        const wrapper = mount(
+        render(
             <ContextMenu
                 top={targetY}
                 left={0}
@@ -107,24 +106,24 @@ describe("<ContextMenu />", () => {
                 chevronOffset={targetChevronOffset}
             />,
         );
-        const chevron = wrapper.find(".mx_ContextualMenu_chevron_right");
+        const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_right")!;
 
-        const actualY = parseInt(wrapper.getDOMNode<HTMLElement>().style.getPropertyValue("top"));
-        const actualChevronOffset = parseInt(chevron.getDOMNode<HTMLElement>().style.getPropertyValue("top"));
+        const actualY = parseInt(
+            document.querySelector<HTMLElement>(".mx_ContextualMenu_wrapper")!.style.getPropertyValue("top"),
+        );
+        const actualChevronOffset = parseInt(chevron.style.getPropertyValue("top"));
 
-        it("stays within the window", () => {
-            expect(actualY + menuSize).toBeLessThanOrEqual(windowSize);
-        });
-        it("positions the chevron correctly", () => {
-            expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY);
-        });
+        // stays within the window
+        expect(actualY + menuSize).toBeLessThanOrEqual(windowSize);
+        // positions the chevron correctly
+        expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY);
     });
 
-    describe("near left edge of window", () => {
+    it("near left edge of window", () => {
         const targetX = -50;
         const onFinished = jest.fn();
 
-        const wrapper = mount(
+        render(
             <ContextMenu
                 top={0}
                 right={windowSize - targetX - menuSize}
@@ -133,25 +132,25 @@ describe("<ContextMenu />", () => {
                 chevronOffset={targetChevronOffset}
             />,
         );
-        const chevron = wrapper.find(".mx_ContextualMenu_chevron_bottom");
+        const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_bottom")!;
 
-        const rightStyle = parseInt(wrapper.getDOMNode<HTMLElement>().style.getPropertyValue("right"));
+        const rightStyle = parseInt(
+            document.querySelector<HTMLElement>(".mx_ContextualMenu_wrapper")!.style.getPropertyValue("right"),
+        );
         const actualX = windowSize - rightStyle - menuSize;
-        const actualChevronOffset = parseInt(chevron.getDOMNode<HTMLElement>().style.getPropertyValue("left"));
-
-        it("stays within the window", () => {
-            expect(actualX).toBeGreaterThanOrEqual(0);
-        });
-        it("positions the chevron correctly", () => {
-            expect(actualChevronOffset).toEqual(targetChevronOffset + targetX - actualX);
-        });
+        const actualChevronOffset = parseInt(chevron.style.getPropertyValue("left"));
+
+        // stays within the window
+        expect(actualX).toBeGreaterThanOrEqual(0);
+        // positions the chevron correctly
+        expect(actualChevronOffset).toEqual(targetChevronOffset + targetX - actualX);
     });
 
     it("should automatically close when a modal is opened", () => {
         const targetX = -50;
         const onFinished = jest.fn();
 
-        mount(
+        render(
             <ContextMenu
                 top={0}
                 right={windowSize - targetX - menuSize}
@@ -171,7 +170,7 @@ describe("<ContextMenu />", () => {
         const onFinished = jest.fn();
 
         Modal.createDialog(BaseDialog);
-        mount(
+        render(
             <ContextMenu
                 top={0}
                 right={windowSize - targetX - menuSize}
diff --git a/test/components/views/context_menus/MessageContextMenu-test.tsx b/test/components/views/context_menus/MessageContextMenu-test.tsx
index 7e0a532917c..a018e159542 100644
--- a/test/components/views/context_menus/MessageContextMenu-test.tsx
+++ b/test/components/views/context_menus/MessageContextMenu-test.tsx
@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import { fireEvent, render, RenderResult } from "@testing-library/react";
 import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
 import {
@@ -30,7 +29,6 @@ import { M_POLL_KIND_DISCLOSED } from "matrix-js-sdk/src/@types/polls";
 import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 import { FeatureSupport, Thread } from "matrix-js-sdk/src/models/thread";
 import { mocked } from "jest-mock";
-import { act } from "@testing-library/react";
 
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
@@ -70,17 +68,16 @@ describe("MessageContextMenu", () => {
         const props = {
             link: "https://google.com/",
         };
-        const menu = createMenuWithContent(eventContent, props);
-        const copyLinkButton = menu.find('a[aria-label="Copy link"]');
-        expect(copyLinkButton).toHaveLength(1);
-        expect(copyLinkButton.props().href).toBe(props.link);
+        createMenuWithContent(eventContent, props);
+        const copyLinkButton = document.querySelector('a[aria-label="Copy link"]');
+        expect(copyLinkButton).toHaveAttribute("href", props.link);
     });
 
     it("does not show copy link button when not supplied a link", () => {
         const eventContent = createMessageEventContent("hello");
-        const menu = createMenuWithContent(eventContent);
-        const copyLinkButton = menu.find('a[aria-label="Copy link"]');
-        expect(copyLinkButton).toHaveLength(0);
+        createMenuWithContent(eventContent);
+        const copyLinkButton = document.querySelector('a[aria-label="Copy link"]');
+        expect(copyLinkButton).toBeFalsy();
     });
 
     describe("message pinning", () => {
@@ -100,9 +97,9 @@ describe("MessageContextMenu", () => {
             // mock permission to disallow adding pinned messages to room
             jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(false);
 
-            const menu = createMenu(event, {}, {}, undefined, room);
+            createMenu(event, {}, {}, undefined, room);
 
-            expect(menu.find('div[aria-label="Pin"]')).toHaveLength(0);
+            expect(document.querySelector('div[aria-label="Pin"]')).toBeFalsy();
         });
 
         it("does not show pin option for beacon_info event", () => {
@@ -112,9 +109,9 @@ describe("MessageContextMenu", () => {
             // mock permission to allow adding pinned messages to room
             jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
 
-            const menu = createMenu(deadBeaconEvent, {}, {}, undefined, room);
+            createMenu(deadBeaconEvent, {}, {}, undefined, room);
 
-            expect(menu.find('div[aria-label="Pin"]')).toHaveLength(0);
+            expect(document.querySelector('div[aria-label="Pin"]')).toBeFalsy();
         });
 
         it("does not show pin option when pinning feature is disabled", () => {
@@ -131,9 +128,9 @@ describe("MessageContextMenu", () => {
             // disable pinning feature
             jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
 
-            const menu = createMenu(pinnableEvent, {}, {}, undefined, room);
+            createMenu(pinnableEvent, {}, {}, undefined, room);
 
-            expect(menu.find('div[aria-label="Pin"]')).toHaveLength(0);
+            expect(document.querySelector('div[aria-label="Pin"]')).toBeFalsy();
         });
 
         it("shows pin option when pinning feature is enabled", () => {
@@ -148,9 +145,9 @@ describe("MessageContextMenu", () => {
             // mock permission to allow adding pinned messages to room
             jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
 
-            const menu = createMenu(pinnableEvent, {}, {}, undefined, room);
+            createMenu(pinnableEvent, {}, {}, undefined, room);
 
-            expect(menu.find('div[aria-label="Pin"]')).toHaveLength(1);
+            expect(document.querySelector('div[aria-label="Pin"]')).toBeTruthy();
         });
 
         it("pins event on pin option click", () => {
@@ -172,11 +169,9 @@ describe("MessageContextMenu", () => {
             const pinsAccountData = new MatrixEvent({ content: { event_ids: ["!1", "!2"] } });
             jest.spyOn(room, "getAccountData").mockReturnValue(pinsAccountData);
 
-            const menu = createMenu(pinnableEvent, { onFinished }, {}, undefined, room);
+            createMenu(pinnableEvent, { onFinished }, {}, undefined, room);
 
-            act(() => {
-                menu.find('div[aria-label="Pin"]').simulate("click");
-            });
+            fireEvent.click(document.querySelector('div[aria-label="Pin"]')!);
 
             // added to account data
             expect(client.setRoomAccountData).toHaveBeenCalledWith(roomId, ReadPinsEventId, {
@@ -228,11 +223,9 @@ describe("MessageContextMenu", () => {
             const pinsAccountData = new MatrixEvent({ content: { event_ids: ["!1", "!2"] } });
             jest.spyOn(room, "getAccountData").mockReturnValue(pinsAccountData);
 
-            const menu = createMenu(pinnableEvent, {}, {}, undefined, room);
+            createMenu(pinnableEvent, {}, {}, undefined, room);
 
-            act(() => {
-                menu.find('div[aria-label="Unpin"]').simulate("click");
-            });
+            fireEvent.click(document.querySelector('div[aria-label="Unpin"]')!);
 
             expect(client.setRoomAccountData).not.toHaveBeenCalled();
 
@@ -250,14 +243,14 @@ describe("MessageContextMenu", () => {
     describe("message forwarding", () => {
         it("allows forwarding a room message", () => {
             const eventContent = createMessageEventContent("hello");
-            const menu = createMenuWithContent(eventContent);
-            expect(menu.find('div[aria-label="Forward"]')).toHaveLength(1);
+            createMenuWithContent(eventContent);
+            expect(document.querySelector('div[aria-label="Forward"]')).toBeTruthy();
         });
 
         it("does not allow forwarding a poll", () => {
             const eventContent = PollStartEvent.from("why?", ["42"], M_POLL_KIND_DISCLOSED);
-            const menu = createMenuWithContent(eventContent);
-            expect(menu.find('div[aria-label="Forward"]')).toHaveLength(0);
+            createMenuWithContent(eventContent);
+            expect(document.querySelector('div[aria-label="Forward"]')).toBeFalsy();
         });
 
         it("should not allow forwarding a voice broadcast", () => {
@@ -267,8 +260,8 @@ describe("MessageContextMenu", () => {
                 "@user:example.com",
                 "ABC123",
             );
-            const menu = createMenu(broadcastStartEvent);
-            expect(menu.find('div[aria-label="Forward"]')).toHaveLength(0);
+            createMenu(broadcastStartEvent);
+            expect(document.querySelector('div[aria-label="Forward"]')).toBeFalsy();
         });
 
         describe("forwarding beacons", () => {
@@ -279,8 +272,8 @@ describe("MessageContextMenu", () => {
                 const beacon = new Beacon(deadBeaconEvent);
                 const beacons = new Map<BeaconIdentifier, Beacon>();
                 beacons.set(getBeaconInfoIdentifier(deadBeaconEvent), beacon);
-                const menu = createMenu(deadBeaconEvent, {}, {}, beacons);
-                expect(menu.find('div[aria-label="Forward"]')).toHaveLength(0);
+                createMenu(deadBeaconEvent, {}, {}, beacons);
+                expect(document.querySelector('div[aria-label="Forward"]')).toBeFalsy();
             });
 
             it("does not allow forwarding a beacon that is not live but has a latestLocation", () => {
@@ -294,8 +287,8 @@ describe("MessageContextMenu", () => {
                 beacon._latestLocationEvent = beaconLocation;
                 const beacons = new Map<BeaconIdentifier, Beacon>();
                 beacons.set(getBeaconInfoIdentifier(deadBeaconEvent), beacon);
-                const menu = createMenu(deadBeaconEvent, {}, {}, beacons);
-                expect(menu.find('div[aria-label="Forward"]')).toHaveLength(0);
+                createMenu(deadBeaconEvent, {}, {}, beacons);
+                expect(document.querySelector('div[aria-label="Forward"]')).toBeFalsy();
             });
 
             it("does not allow forwarding a live beacon that does not have a latestLocation", () => {
@@ -304,8 +297,8 @@ describe("MessageContextMenu", () => {
                 const beacon = new Beacon(beaconEvent);
                 const beacons = new Map<BeaconIdentifier, Beacon>();
                 beacons.set(getBeaconInfoIdentifier(beaconEvent), beacon);
-                const menu = createMenu(beaconEvent, {}, {}, beacons);
-                expect(menu.find('div[aria-label="Forward"]')).toHaveLength(0);
+                createMenu(beaconEvent, {}, {}, beacons);
+                expect(document.querySelector('div[aria-label="Forward"]')).toBeFalsy();
             });
 
             it("allows forwarding a live beacon that has a location", () => {
@@ -319,8 +312,8 @@ describe("MessageContextMenu", () => {
                 beacon._latestLocationEvent = beaconLocation;
                 const beacons = new Map<BeaconIdentifier, Beacon>();
                 beacons.set(getBeaconInfoIdentifier(liveBeaconEvent), beacon);
-                const menu = createMenu(liveBeaconEvent, {}, {}, beacons);
-                expect(menu.find('div[aria-label="Forward"]')).toHaveLength(1);
+                createMenu(liveBeaconEvent, {}, {}, beacons);
+                expect(document.querySelector('div[aria-label="Forward"]')).toBeTruthy();
             });
 
             it("opens forward dialog with correct event", () => {
@@ -335,11 +328,9 @@ describe("MessageContextMenu", () => {
                 beacon._latestLocationEvent = beaconLocation;
                 const beacons = new Map<BeaconIdentifier, Beacon>();
                 beacons.set(getBeaconInfoIdentifier(liveBeaconEvent), beacon);
-                const menu = createMenu(liveBeaconEvent, {}, {}, beacons);
+                createMenu(liveBeaconEvent, {}, {}, beacons);
 
-                act(() => {
-                    menu.find('div[aria-label="Forward"]').simulate("click");
-                });
+                fireEvent.click(document.querySelector('div[aria-label="Forward"]')!);
 
                 // called with forwardableEvent, not beaconInfo event
                 expect(dispatchSpy).toHaveBeenCalledWith(
@@ -354,8 +345,8 @@ describe("MessageContextMenu", () => {
     describe("open as map link", () => {
         it("does not allow opening a plain message in open street maps", () => {
             const eventContent = createMessageEventContent("hello");
-            const menu = createMenuWithContent(eventContent);
-            expect(menu.find('a[aria-label="Open in OpenStreetMap"]')).toHaveLength(0);
+            createMenuWithContent(eventContent);
+            expect(document.querySelector('a[aria-label="Open in OpenStreetMap"]')).toBeFalsy();
         });
 
         it("does not allow opening a beacon that does not have a shareable location event", () => {
@@ -363,15 +354,16 @@ describe("MessageContextMenu", () => {
             const beacon = new Beacon(deadBeaconEvent);
             const beacons = new Map<BeaconIdentifier, Beacon>();
             beacons.set(getBeaconInfoIdentifier(deadBeaconEvent), beacon);
-            const menu = createMenu(deadBeaconEvent, {}, {}, beacons);
-            expect(menu.find('a[aria-label="Open in OpenStreetMap"]')).toHaveLength(0);
+            createMenu(deadBeaconEvent, {}, {}, beacons);
+            expect(document.querySelector('a[aria-label="Open in OpenStreetMap"]')).toBeFalsy();
         });
 
         it("allows opening a location event in open street map", () => {
             const locationEvent = makeLocationEvent("geo:50,50");
-            const menu = createMenu(locationEvent);
+            createMenu(locationEvent);
             // exists with a href with the lat/lon from the location event
-            expect(menu.find('a[aria-label="Open in OpenStreetMap"]').at(0).props().href).toEqual(
+            expect(document.querySelector('a[aria-label="Open in OpenStreetMap"]')).toHaveAttribute(
+                "href",
                 "https://www.openstreetmap.org/?mlat=50&mlon=50#map=16/50/50",
             );
         });
@@ -387,9 +379,10 @@ describe("MessageContextMenu", () => {
             beacon._latestLocationEvent = beaconLocation;
             const beacons = new Map<BeaconIdentifier, Beacon>();
             beacons.set(getBeaconInfoIdentifier(liveBeaconEvent), beacon);
-            const menu = createMenu(liveBeaconEvent, {}, {}, beacons);
+            createMenu(liveBeaconEvent, {}, {}, beacons);
             // exists with a href with the lat/lon from the location event
-            expect(menu.find('a[aria-label="Open in OpenStreetMap"]').at(0).props().href).toEqual(
+            expect(document.querySelector('a[aria-label="Open in OpenStreetMap"]')).toHaveAttribute(
+                "href",
                 "https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41",
             );
         });
@@ -401,9 +394,9 @@ describe("MessageContextMenu", () => {
             const eventContent = createMessageEventContent(text);
             mocked(getSelectedText).mockReturnValue(text);
 
-            const menu = createRightClickMenuWithContent(eventContent);
-            const copyButton = menu.find('div[aria-label="Copy"]');
-            copyButton.simulate("mousedown");
+            createRightClickMenuWithContent(eventContent);
+            const copyButton = document.querySelector('div[aria-label="Copy"]')!;
+            fireEvent.mouseDown(copyButton);
             expect(copyPlaintext).toHaveBeenCalledWith(text);
         });
 
@@ -412,27 +405,27 @@ describe("MessageContextMenu", () => {
             const eventContent = createMessageEventContent(text);
             mocked(getSelectedText).mockReturnValue("");
 
-            const menu = createRightClickMenuWithContent(eventContent);
-            const copyButton = menu.find('div[aria-label="Copy"]');
-            expect(copyButton).toHaveLength(0);
+            createRightClickMenuWithContent(eventContent);
+            const copyButton = document.querySelector('div[aria-label="Copy"]');
+            expect(copyButton).toBeFalsy();
         });
 
         it("shows edit button when we can edit", () => {
             const eventContent = createMessageEventContent("hello");
             mocked(canEditContent).mockReturnValue(true);
 
-            const menu = createRightClickMenuWithContent(eventContent);
-            const editButton = menu.find('div[aria-label="Edit"]');
-            expect(editButton).toHaveLength(1);
+            createRightClickMenuWithContent(eventContent);
+            const editButton = document.querySelector('div[aria-label="Edit"]');
+            expect(editButton).toBeTruthy();
         });
 
         it("does not show edit button when we cannot edit", () => {
             const eventContent = createMessageEventContent("hello");
             mocked(canEditContent).mockReturnValue(false);
 
-            const menu = createRightClickMenuWithContent(eventContent);
-            const editButton = menu.find('div[aria-label="Edit"]');
-            expect(editButton).toHaveLength(0);
+            createRightClickMenuWithContent(eventContent);
+            const editButton = document.querySelector('div[aria-label="Edit"]');
+            expect(editButton).toBeFalsy();
         });
 
         it("shows reply button when we can reply", () => {
@@ -441,9 +434,9 @@ describe("MessageContextMenu", () => {
                 canSendMessages: true,
             };
 
-            const menu = createRightClickMenuWithContent(eventContent, context);
-            const replyButton = menu.find('div[aria-label="Reply"]');
-            expect(replyButton).toHaveLength(1);
+            createRightClickMenuWithContent(eventContent, context);
+            const replyButton = document.querySelector('div[aria-label="Reply"]');
+            expect(replyButton).toBeTruthy();
         });
 
         it("does not show reply button when we cannot reply", () => {
@@ -455,9 +448,9 @@ describe("MessageContextMenu", () => {
             // queued messages are not actionable
             unsentMessage.setStatus(EventStatus.QUEUED);
 
-            const menu = createMenu(unsentMessage, {}, context);
-            const replyButton = menu.find('div[aria-label="Reply"]');
-            expect(replyButton).toHaveLength(0);
+            createMenu(unsentMessage, {}, context);
+            const replyButton = document.querySelector('div[aria-label="Reply"]');
+            expect(replyButton).toBeFalsy();
         });
 
         it("shows react button when we can react", () => {
@@ -466,9 +459,9 @@ describe("MessageContextMenu", () => {
                 canReact: true,
             };
 
-            const menu = createRightClickMenuWithContent(eventContent, context);
-            const reactButton = menu.find('div[aria-label="React"]');
-            expect(reactButton).toHaveLength(1);
+            createRightClickMenuWithContent(eventContent, context);
+            const reactButton = document.querySelector('div[aria-label="React"]');
+            expect(reactButton).toBeTruthy();
         });
 
         it("does not show react button when we cannot react", () => {
@@ -477,9 +470,9 @@ describe("MessageContextMenu", () => {
                 canReact: false,
             };
 
-            const menu = createRightClickMenuWithContent(eventContent, context);
-            const reactButton = menu.find('div[aria-label="React"]');
-            expect(reactButton).toHaveLength(0);
+            createRightClickMenuWithContent(eventContent, context);
+            const reactButton = document.querySelector('div[aria-label="React"]');
+            expect(reactButton).toBeFalsy();
         });
 
         it("shows view in room button when the event is a thread root", () => {
@@ -493,17 +486,17 @@ describe("MessageContextMenu", () => {
                 timelineRenderingType: TimelineRenderingType.Thread,
             };
 
-            const menu = createMenu(mxEvent, props, context);
-            const reactButton = menu.find('div[aria-label="View in room"]');
-            expect(reactButton).toHaveLength(1);
+            createMenu(mxEvent, props, context);
+            const reactButton = document.querySelector('div[aria-label="View in room"]');
+            expect(reactButton).toBeTruthy();
         });
 
         it("does not show view in room button when the event is not a thread root", () => {
             const eventContent = createMessageEventContent("hello");
 
-            const menu = createRightClickMenuWithContent(eventContent);
-            const reactButton = menu.find('div[aria-label="View in room"]');
-            expect(reactButton).toHaveLength(0);
+            createRightClickMenuWithContent(eventContent);
+            const reactButton = document.querySelector('div[aria-label="View in room"]');
+            expect(reactButton).toBeFalsy();
         });
 
         it("creates a new thread on reply in thread click", () => {
@@ -516,11 +509,10 @@ describe("MessageContextMenu", () => {
             };
             jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
 
-            const menu = createRightClickMenu(mxEvent, context);
+            createRightClickMenu(mxEvent, context);
 
-            const replyInThreadButton = menu.find('div[aria-label="Reply in thread"]');
-            expect(replyInThreadButton).toHaveLength(1);
-            replyInThreadButton.simulate("click");
+            const replyInThreadButton = document.querySelector('div[aria-label="Reply in thread"]')!;
+            fireEvent.click(replyInThreadButton);
 
             expect(dispatcher.dispatch).toHaveBeenCalledWith({
                 action: Action.ShowThread,
@@ -531,11 +523,11 @@ describe("MessageContextMenu", () => {
     });
 });
 
-function createRightClickMenuWithContent(eventContent: object, context?: Partial<IRoomState>): ReactWrapper {
+function createRightClickMenuWithContent(eventContent: object, context?: Partial<IRoomState>): RenderResult {
     return createMenuWithContent(eventContent, { rightClick: true }, context);
 }
 
-function createRightClickMenu(mxEvent: MatrixEvent, context?: Partial<IRoomState>): ReactWrapper {
+function createRightClickMenu(mxEvent: MatrixEvent, context?: Partial<IRoomState>): RenderResult {
     return createMenu(mxEvent, { rightClick: true }, context);
 }
 
@@ -543,7 +535,7 @@ function createMenuWithContent(
     eventContent: object,
     props?: Partial<React.ComponentProps<typeof MessageContextMenu>>,
     context?: Partial<IRoomState>,
-): ReactWrapper {
+): RenderResult {
     // XXX: We probably shouldn't be assuming all events are going to be message events, but considering this
     // test is for the Message context menu, it's a fairly safe assumption.
     const mxEvent = new MatrixEvent({ type: EventType.RoomMessage, content: eventContent });
@@ -562,7 +554,7 @@ function createMenu(
     context: Partial<IRoomState> = {},
     beacons: Map<BeaconIdentifier, Beacon> = new Map(),
     room: Room = makeDefaultRoom(),
-): ReactWrapper {
+): RenderResult {
     const client = MatrixClientPeg.get();
 
     // @ts-ignore illegally set private prop
@@ -573,7 +565,7 @@ function createMenu(
     client.getUserId = jest.fn().mockReturnValue("@user:example.com");
     client.getRoom = jest.fn().mockReturnValue(room);
 
-    return mount(
+    return render(
         <RoomContext.Provider value={context as IRoomState}>
             <MessageContextMenu mxEvent={mxEvent} onFinished={jest.fn()} {...props} />
         </RoomContext.Provider>,
diff --git a/test/components/views/context_menus/WidgetContextMenu-test.tsx b/test/components/views/context_menus/WidgetContextMenu-test.tsx
new file mode 100644
index 00000000000..8d7872d4893
--- /dev/null
+++ b/test/components/views/context_menus/WidgetContextMenu-test.tsx
@@ -0,0 +1,98 @@
+/*
+Copyright 2023 Mikhail Aheichyk
+Copyright 2023 Nordeck IT + Consulting GmbH.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { ComponentProps } from "react";
+import { screen, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixWidgetType } from "matrix-widget-api";
+import {
+    ApprovalOpts,
+    WidgetInfo,
+    WidgetLifecycle,
+} from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
+
+import { WidgetContextMenu } from "../../../../src/components/views/context_menus/WidgetContextMenu";
+import { IApp } from "../../../../src/stores/WidgetStore";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+import WidgetUtils from "../../../../src/utils/WidgetUtils";
+import { ModuleRunner } from "../../../../src/modules/ModuleRunner";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+
+describe("<WidgetContextMenu />", () => {
+    const widgetId = "w1";
+    const eventId = "e1";
+    const roomId = "r1";
+    const userId = "@user-id:server";
+
+    const app: IApp = {
+        id: widgetId,
+        eventId,
+        roomId,
+        type: MatrixWidgetType.Custom,
+        url: "https://example.com",
+        name: "Example 1",
+        creatorUserId: userId,
+        avatar_url: undefined,
+    };
+
+    const mockClient = {
+        getUserId: jest.fn().mockReturnValue(userId),
+    } as unknown as MatrixClient;
+
+    let onFinished: () => void;
+
+    beforeEach(() => {
+        onFinished = jest.fn();
+        jest.spyOn(WidgetUtils, "canUserModifyWidgets").mockReturnValue(true);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    function getComponent(props: Partial<ComponentProps<typeof WidgetContextMenu>> = {}): JSX.Element {
+        return (
+            <MatrixClientContext.Provider value={mockClient}>
+                <WidgetContextMenu app={app} onFinished={onFinished} {...props} />
+            </MatrixClientContext.Provider>
+        );
+    }
+
+    it("renders revoke button", async () => {
+        const { rerender } = render(getComponent());
+
+        const revokeButton = screen.getByLabelText("Revoke permissions");
+        expect(revokeButton).toBeInTheDocument();
+
+        jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts, widgetInfo) => {
+            if (lifecycleEvent === WidgetLifecycle.PreLoadRequest && (widgetInfo as WidgetInfo).id === widgetId) {
+                (opts as ApprovalOpts).approved = true;
+            }
+        });
+
+        rerender(getComponent());
+        expect(revokeButton).not.toBeInTheDocument();
+    });
+
+    it("revokes permissions", async () => {
+        render(getComponent());
+        await userEvent.click(screen.getByLabelText("Revoke permissions"));
+        expect(onFinished).toHaveBeenCalled();
+        expect(SettingsStore.getValue("allowedWidgets", roomId)[eventId]).toBe(false);
+    });
+});
diff --git a/test/components/views/context_menus/__snapshots__/EmbeddedPage-test.tsx.snap b/test/components/views/context_menus/__snapshots__/EmbeddedPage-test.tsx.snap
index f5f874e2754..fd889878455 100644
--- a/test/components/views/context_menus/__snapshots__/EmbeddedPage-test.tsx.snap
+++ b/test/components/views/context_menus/__snapshots__/EmbeddedPage-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<EmbeddedPage /> should render nothing if no url given 1`] = `
 <DocumentFragment>
   <div
-    class="undefined undefined_guest"
+    class="undefined_guest"
   >
     <div
       class="undefined_body"
@@ -15,7 +15,7 @@ exports[`<EmbeddedPage /> should render nothing if no url given 1`] = `
 exports[`<EmbeddedPage /> should show error if unable to load 1`] = `
 <DocumentFragment>
   <div
-    class="undefined undefined_guest"
+    class="undefined_guest"
   >
     <div
       class="undefined_body"
@@ -29,7 +29,7 @@ exports[`<EmbeddedPage /> should show error if unable to load 1`] = `
 exports[`<EmbeddedPage /> should translate _t strings 1`] = `
 <DocumentFragment>
   <div
-    class="undefined undefined_guest"
+    class="undefined_guest"
   >
     <div
       class="undefined_body"
diff --git a/test/components/views/dialogs/AskInviteAnywayDialog-test.tsx b/test/components/views/dialogs/AskInviteAnywayDialog-test.tsx
new file mode 100644
index 00000000000..9ff4c315da8
--- /dev/null
+++ b/test/components/views/dialogs/AskInviteAnywayDialog-test.tsx
@@ -0,0 +1,93 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { getByText, render, RenderResult } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+import AskInviteAnywayDialog, {
+    AskInviteAnywayDialogProps,
+} from "../../../../src/components/views/dialogs/AskInviteAnywayDialog";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+
+describe("AskInviteaAnywayDialog", () => {
+    const onFinished: jest.Mock<any, any> = jest.fn();
+    const onGiveUp: jest.Mock<any, any> = jest.fn();
+    const onInviteAnyways: jest.Mock<any, any> = jest.fn();
+
+    function renderComponent(props: Partial<AskInviteAnywayDialogProps> = {}): RenderResult {
+        return render(
+            <AskInviteAnywayDialog
+                onFinished={onFinished}
+                onGiveUp={onGiveUp}
+                onInviteAnyways={onInviteAnyways}
+                unknownProfileUsers={[
+                    {
+                        userId: "@alice:localhost",
+                        errorText: "🤷‍♂️",
+                    },
+                ]}
+                {...props}
+            />,
+        );
+    }
+
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it("remembers to not warn again", async () => {
+        const { container } = renderComponent();
+
+        jest.spyOn(SettingsStore, "setValue").mockImplementation(async (): Promise<void> => {});
+
+        const neverWarnAgainBtn = getByText(container, /never warn/);
+        await userEvent.click(neverWarnAgainBtn);
+
+        expect(SettingsStore.setValue).toHaveBeenCalledWith(
+            "promptBeforeInviteUnknownUsers",
+            null,
+            expect.any(String),
+            false,
+        );
+        expect(onInviteAnyways).toHaveBeenCalledTimes(1);
+        expect(onFinished).toHaveBeenCalledWith(true);
+    });
+
+    it("invites anyway", async () => {
+        const { container } = renderComponent();
+
+        jest.spyOn(SettingsStore, "setValue");
+
+        const inviteAnywayBtn = getByText(container, "Invite anyway");
+        await userEvent.click(inviteAnywayBtn);
+
+        expect(onInviteAnyways).toHaveBeenCalledTimes(1);
+        expect(onFinished).toHaveBeenCalledWith(true);
+    });
+
+    it("gives up", async () => {
+        const { container } = renderComponent();
+
+        jest.spyOn(SettingsStore, "setValue");
+
+        const closeBtn = getByText(container, /Close/);
+        await userEvent.click(closeBtn);
+
+        expect(onGiveUp).toHaveBeenCalledTimes(1);
+        expect(onFinished).toHaveBeenCalledWith(false);
+    });
+});
diff --git a/test/components/views/dialogs/ExportDialog-test.tsx b/test/components/views/dialogs/ExportDialog-test.tsx
index afc490546f9..7ac59d24280 100644
--- a/test/components/views/dialogs/ExportDialog-test.tsx
+++ b/test/components/views/dialogs/ExportDialog-test.tsx
@@ -15,10 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import { fireEvent, render, RenderResult, waitFor } from "@testing-library/react";
 import { mocked } from "jest-mock";
-import { act } from "react-dom/test-utils";
 import { Room } from "matrix-js-sdk/src/matrix";
 
 import ExportDialog from "../../../../src/components/views/dialogs/ExportDialog";
@@ -58,49 +56,28 @@ describe("<ExportDialog />", () => {
         onFinished: jest.fn(),
     };
 
-    const getComponent = (props = {}) => mount(<ExportDialog {...defaultProps} {...props} />);
-
-    const getSizeInput = (component: ReactWrapper) => component.find('input[id="size-limit"]');
-    const getExportTypeInput = (component: ReactWrapper) => component.find('select[id="export-type"]');
-    const getAttachmentsCheckbox = (component: ReactWrapper) => component.find('input[id="include-attachments"]');
-    const getMessageCountInput = (component: ReactWrapper) => component.find('input[id="message-count"]');
-    const getExportFormatInput = (component: ReactWrapper, format: ExportFormat) =>
-        component.find(`input[id="exportFormat-${format}"]`);
-    const getPrimaryButton = (component: ReactWrapper) => component.find('[data-testid="dialog-primary-button"]');
-    const getSecondaryButton = (component: ReactWrapper) => component.find('[data-testid="dialog-cancel-button"]');
-
-    const submitForm = async (component: ReactWrapper) =>
-        act(async () => {
-            getPrimaryButton(component).simulate("click");
-            component.setProps({});
-        });
-    const selectExportFormat = async (component: ReactWrapper, format: ExportFormat) =>
-        act(async () => {
-            getExportFormatInput(component, format).simulate("change");
-            component.setProps({});
-        });
-    const selectExportType = async (component: ReactWrapper, type: ExportType) =>
-        act(async () => {
-            getExportTypeInput(component).simulate("change", { target: { value: type } });
-            component.setProps({});
-        });
-    const setMessageCount = async (component: ReactWrapper, count: number) =>
-        act(async () => {
-            getMessageCountInput(component).simulate("change", { target: { value: count } });
-            component.setProps({});
-        });
-
-    const setSizeLimit = async (component: ReactWrapper, limit: number) =>
-        act(async () => {
-            getSizeInput(component).simulate("change", { target: { value: limit } });
-            component.setProps({});
-        });
-
-    const setIncludeAttachments = async (component: ReactWrapper, checked: boolean) =>
-        act(async () => {
-            getAttachmentsCheckbox(component).simulate("change", { target: { checked } });
-            component.setProps({});
-        });
+    const getComponent = (props = {}) => render(<ExportDialog {...defaultProps} {...props} />);
+
+    const getSizeInput = ({ container }: RenderResult) => container.querySelector('input[id="size-limit"]')!;
+    const getExportTypeInput = ({ container }: RenderResult) => container.querySelector('select[id="export-type"]')!;
+    const getAttachmentsCheckbox = ({ container }: RenderResult) =>
+        container.querySelector('input[id="include-attachments"]')!;
+    const getMessageCountInput = ({ container }: RenderResult) => container.querySelector('input[id="message-count"]')!;
+    const getExportFormatInput = ({ container }: RenderResult, format: ExportFormat) =>
+        container.querySelector(`input[id="exportFormat-${format}"]`)!;
+    const getPrimaryButton = ({ getByTestId }: RenderResult) => getByTestId("dialog-primary-button")!;
+    const getSecondaryButton = ({ getByTestId }: RenderResult) => getByTestId("dialog-cancel-button")!;
+
+    const submitForm = async (component: RenderResult) => fireEvent.click(getPrimaryButton(component));
+    const selectExportFormat = async (component: RenderResult, format: ExportFormat) =>
+        fireEvent.click(getExportFormatInput(component, format));
+    const selectExportType = async (component: RenderResult, type: ExportType) =>
+        fireEvent.change(getExportTypeInput(component), { target: { value: type } });
+    const setMessageCount = async (component: RenderResult, count: number) =>
+        fireEvent.change(getMessageCountInput(component), { target: { value: count } });
+
+    const setSizeLimit = async (component: RenderResult, limit: number) =>
+        fireEvent.change(getSizeInput(component), { target: { value: limit } });
 
     beforeEach(() => {
         HTMLExporterMock.mockClear().mockImplementation(jest.fn().mockReturnValue(htmlExporterInstance));
@@ -114,15 +91,13 @@ describe("<ExportDialog />", () => {
 
     it("renders export dialog", () => {
         const component = getComponent();
-        expect(component.find(".mx_ExportDialog")).toMatchSnapshot();
+        expect(component.container.querySelector(".mx_ExportDialog")).toMatchSnapshot();
     });
 
     it("calls onFinished when cancel button is clicked", () => {
         const onFinished = jest.fn();
         const component = getComponent({ onFinished });
-        act(() => {
-            getSecondaryButton(component).simulate("click");
-        });
+        fireEvent.click(getSecondaryButton(component));
         expect(onFinished).toHaveBeenCalledWith(false);
     });
 
@@ -130,17 +105,19 @@ describe("<ExportDialog />", () => {
         const component = getComponent();
         await submitForm(component);
 
-        // 4th arg is an component function
-        const exportConstructorProps = HTMLExporterMock.mock.calls[0].slice(0, 3);
-        expect(exportConstructorProps).toEqual([
-            defaultProps.room,
-            ExportType.Timeline,
-            {
-                attachmentsIncluded: false,
-                maxSize: 8388608, // 8MB to bytes
-                numberOfMessages: 100,
-            },
-        ]);
+        await waitFor(() => {
+            // 4th arg is an component function
+            const exportConstructorProps = HTMLExporterMock.mock.calls[0].slice(0, 3);
+            expect(exportConstructorProps).toEqual([
+                defaultProps.room,
+                ExportType.Timeline,
+                {
+                    attachmentsIncluded: false,
+                    maxSize: 8388608, // 8MB to bytes
+                    numberOfMessages: 100,
+                },
+            ]);
+        });
         expect(htmlExporterInstance.export).toHaveBeenCalled();
     });
 
@@ -172,29 +149,28 @@ describe("<ExportDialog />", () => {
     it("renders success screen when export is finished", async () => {
         const component = getComponent();
         await submitForm(component);
-        component.setProps({});
 
         jest.runAllTimers();
 
-        expect(component.find(".mx_InfoDialog .mx_Dialog_content")).toMatchSnapshot();
+        expect(component.container.querySelector(".mx_InfoDialog .mx_Dialog_content")).toMatchSnapshot();
     });
 
     describe("export format", () => {
         it("renders export format with html selected by default", () => {
             const component = getComponent();
-            expect(getExportFormatInput(component, ExportFormat.Html).props().checked).toBeTruthy();
+            expect(getExportFormatInput(component, ExportFormat.Html)).toBeChecked();
         });
 
         it("sets export format on radio button click", async () => {
             const component = getComponent();
             await selectExportFormat(component, ExportFormat.PlainText);
-            expect(getExportFormatInput(component, ExportFormat.PlainText).props().checked).toBeTruthy();
-            expect(getExportFormatInput(component, ExportFormat.Html).props().checked).toBeFalsy();
+            expect(getExportFormatInput(component, ExportFormat.PlainText)).toBeChecked();
+            expect(getExportFormatInput(component, ExportFormat.Html)).not.toBeChecked();
         });
 
         it("hides export format input when format is valid in ForceRoomExportParameters", () => {
             const component = getComponent();
-            expect(getExportFormatInput(component, ExportFormat.Html).props().checked).toBeTruthy();
+            expect(getExportFormatInput(component, ExportFormat.Html)).toBeChecked();
         });
 
         it("does not render export format when set in ForceRoomExportParameters", () => {
@@ -202,20 +178,20 @@ describe("<ExportDialog />", () => {
                 format: ExportFormat.PlainText,
             });
             const component = getComponent();
-            expect(getExportFormatInput(component, ExportFormat.Html).length).toBeFalsy();
+            expect(getExportFormatInput(component, ExportFormat.Html)).toBeFalsy();
         });
     });
 
     describe("export type", () => {
         it("renders export type with timeline selected by default", () => {
             const component = getComponent();
-            expect(getExportTypeInput(component).props().value).toEqual(ExportType.Timeline);
+            expect(getExportTypeInput(component)).toHaveValue(ExportType.Timeline);
         });
 
         it("sets export type on change", async () => {
             const component = getComponent();
             await selectExportType(component, ExportType.Beginning);
-            expect(getExportTypeInput(component).props().value).toEqual(ExportType.Beginning);
+            expect(getExportTypeInput(component)).toHaveValue(ExportType.Beginning);
         });
 
         it("does not render export type when set in ForceRoomExportParameters", () => {
@@ -223,25 +199,25 @@ describe("<ExportDialog />", () => {
                 range: ExportType.Beginning,
             });
             const component = getComponent();
-            expect(getExportTypeInput(component).length).toBeFalsy();
+            expect(getExportTypeInput(component)).toBeFalsy();
         });
 
         it("does not render message count input", async () => {
             const component = getComponent();
-            expect(getMessageCountInput(component).length).toBeFalsy();
+            expect(getMessageCountInput(component)).toBeFalsy();
         });
 
         it("renders message count input with default value 100 when export type is lastNMessages", async () => {
             const component = getComponent();
             await selectExportType(component, ExportType.LastNMessages);
-            expect(getMessageCountInput(component).props().value).toEqual("100");
+            expect(getMessageCountInput(component)).toHaveValue(100);
         });
 
         it("sets message count on change", async () => {
             const component = getComponent();
             await selectExportType(component, ExportType.LastNMessages);
             await setMessageCount(component, 10);
-            expect(getMessageCountInput(component).props().value).toEqual("10");
+            expect(getMessageCountInput(component)).toHaveValue(10);
         });
 
         it("does not export when export type is lastNMessages and message count is falsy", async () => {
@@ -269,20 +245,22 @@ describe("<ExportDialog />", () => {
             await selectExportType(component, ExportType.Timeline);
             await submitForm(component);
 
-            expect(htmlExporterInstance.export).toHaveBeenCalled();
+            await waitFor(() => {
+                expect(htmlExporterInstance.export).toHaveBeenCalled();
+            });
         });
     });
 
     describe("size limit", () => {
         it("renders size limit input with default value", () => {
             const component = getComponent();
-            expect(getSizeInput(component).props().value).toEqual("8");
+            expect(getSizeInput(component)).toHaveValue(8);
         });
 
         it("updates size limit on change", async () => {
             const component = getComponent();
             await setSizeLimit(component, 20);
-            expect(getSizeInput(component).props().value).toEqual("20");
+            expect(getSizeInput(component)).toHaveValue(20);
         });
 
         it("does not export when size limit is falsy", async () => {
@@ -306,7 +284,9 @@ describe("<ExportDialog />", () => {
             await setSizeLimit(component, 2000);
             await submitForm(component);
 
-            expect(htmlExporterInstance.export).toHaveBeenCalled();
+            await waitFor(() => {
+                expect(htmlExporterInstance.export).toHaveBeenCalled();
+            });
         });
 
         it("does not render size limit input when set in ForceRoomExportParameters", () => {
@@ -314,7 +294,7 @@ describe("<ExportDialog />", () => {
                 sizeMb: 10000,
             });
             const component = getComponent();
-            expect(getSizeInput(component).length).toBeFalsy();
+            expect(getSizeInput(component)).toBeFalsy();
         });
 
         /**
@@ -334,13 +314,13 @@ describe("<ExportDialog />", () => {
     describe("include attachments", () => {
         it("renders input with default value of false", () => {
             const component = getComponent();
-            expect(getAttachmentsCheckbox(component).props().checked).toEqual(false);
+            expect(getAttachmentsCheckbox(component)).not.toBeChecked();
         });
 
         it("updates include attachments on change", async () => {
             const component = getComponent();
-            await setIncludeAttachments(component, true);
-            expect(getAttachmentsCheckbox(component).props().checked).toEqual(true);
+            fireEvent.click(getAttachmentsCheckbox(component));
+            expect(getAttachmentsCheckbox(component)).toBeChecked();
         });
 
         it("does not render input when set in ForceRoomExportParameters", () => {
@@ -348,7 +328,7 @@ describe("<ExportDialog />", () => {
                 includeAttachments: false,
             });
             const component = getComponent();
-            expect(getAttachmentsCheckbox(component).length).toBeFalsy();
+            expect(getAttachmentsCheckbox(component)).toBeFalsy();
         });
     });
 });
diff --git a/test/components/views/dialogs/InteractiveAuthDialog-test.tsx b/test/components/views/dialogs/InteractiveAuthDialog-test.tsx
index 3ce6ca89ca2..518d13e8e88 100644
--- a/test/components/views/dialogs/InteractiveAuthDialog-test.tsx
+++ b/test/components/views/dialogs/InteractiveAuthDialog-test.tsx
@@ -39,7 +39,7 @@ describe("InteractiveAuthDialog", function () {
 
     beforeEach(function () {
         jest.clearAllMocks();
-        mockClient.credentials = null;
+        mockClient.credentials = { userId: null };
     });
 
     afterAll(() => {
@@ -79,7 +79,7 @@ describe("InteractiveAuthDialog", function () {
         await flushPromises();
 
         expect(makeRequest).toHaveBeenCalledTimes(1);
-        expect(makeRequest).toBeCalledWith(
+        expect(makeRequest).toHaveBeenCalledWith(
             expect.objectContaining({
                 session: "sess",
                 type: "m.login.password",
@@ -91,7 +91,7 @@ describe("InteractiveAuthDialog", function () {
             }),
         );
 
-        expect(onFinished).toBeCalledTimes(1);
-        expect(onFinished).toBeCalledWith(true, { a: 1 });
+        expect(onFinished).toHaveBeenCalledTimes(1);
+        expect(onFinished).toHaveBeenCalledWith(true, { a: 1 });
     });
 });
diff --git a/test/components/views/dialogs/InviteDialog-test.tsx b/test/components/views/dialogs/InviteDialog-test.tsx
index 9c0dcda498b..e048240f90c 100644
--- a/test/components/views/dialogs/InviteDialog-test.tsx
+++ b/test/components/views/dialogs/InviteDialog-test.tsx
@@ -16,11 +16,12 @@ limitations under the License.
 
 import React from "react";
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { RoomType } from "matrix-js-sdk/src/@types/event";
 import { Room } from "matrix-js-sdk/src/matrix";
 
 import InviteDialog from "../../../../src/components/views/dialogs/InviteDialog";
-import { KIND_DM, KIND_INVITE } from "../../../../src/components/views/dialogs/InviteDialogTypes";
+import { InviteKind } from "../../../../src/components/views/dialogs/InviteDialogTypes";
 import { getMockClientWithEventEmitter, mkMembership, mkMessage, mkRoomCreateEvent } from "../../../test-utils";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import SdkConfig from "../../../../src/SdkConfig";
@@ -34,11 +35,37 @@ jest.mock("../../../../src/IdentityAuthClient", () =>
     })),
 );
 
+const getSearchField = () => screen.getByTestId("invite-dialog-input");
+
+const enterIntoSearchField = async (value: string) => {
+    const searchField = getSearchField();
+    await userEvent.clear(searchField);
+    await userEvent.type(searchField, value + "{enter}");
+};
+
+const pasteIntoSearchField = async (value: string) => {
+    const searchField = getSearchField();
+    await userEvent.clear(searchField);
+    searchField.focus();
+    await userEvent.paste(value);
+};
+
+const expectPill = (value: string) => {
+    expect(screen.getByText(value)).toBeInTheDocument();
+    expect(getSearchField()).toHaveValue("");
+};
+
+const expectNoPill = (value: string) => {
+    expect(screen.queryByText(value)).not.toBeInTheDocument();
+    expect(getSearchField()).toHaveValue(value);
+};
+
 describe("InviteDialog", () => {
     const roomId = "!111111111111111111:example.org";
     const aliceId = "@alice:example.org";
     const aliceEmail = "foobar@email.com";
     const bobId = "@bob:example.org";
+    const bobEmail = "bobbob@example.com"; // bob@example.com is already used as an example in the invite dialog
     const mockClient = getMockClientWithEventEmitter({
         getUserId: jest.fn().mockReturnValue(bobId),
         getSafeUserId: jest.fn().mockReturnValue(bobId),
@@ -63,6 +90,7 @@ describe("InviteDialog", () => {
         getTerms: jest.fn().mockResolvedValue({ policies: [] }),
         supportsThreads: jest.fn().mockReturnValue(false),
         isInitialSyncComplete: jest.fn().mockReturnValue(true),
+        getClientWellKnown: jest.fn(),
     });
     let room: Room;
 
@@ -71,6 +99,7 @@ describe("InviteDialog", () => {
         DMRoomMap.makeShared();
         jest.clearAllMocks();
         mockClient.getUserId.mockReturnValue(bobId);
+        mockClient.getClientWellKnown.mockReturnValue({});
 
         room = new Room(roomId, mockClient, mockClient.getSafeUserId());
         room.addLiveEvents([
@@ -108,20 +137,20 @@ describe("InviteDialog", () => {
         room.isSpaceRoom = jest.fn().mockReturnValue(true);
         room.getType = jest.fn().mockReturnValue(RoomType.Space);
         room.name = "Space";
-        render(<InviteDialog kind={KIND_INVITE} roomId={roomId} onFinished={jest.fn()} />);
+        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
 
         expect(screen.queryByText("Invite to Space")).toBeTruthy();
     });
 
     it("should label with room name", () => {
-        render(<InviteDialog kind={KIND_INVITE} roomId={roomId} onFinished={jest.fn()} />);
+        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
         expect(screen.getByText(`Invite to ${roomId}`)).toBeInTheDocument();
     });
 
     it("should suggest valid MXIDs even if unknown", async () => {
         render(
             <InviteDialog
-                kind={KIND_INVITE}
+                kind={InviteKind.Invite}
                 roomId={roomId}
                 onFinished={jest.fn()}
                 initialText="@localpart:server.tld"
@@ -134,7 +163,7 @@ describe("InviteDialog", () => {
     it("should not suggest invalid MXIDs", () => {
         render(
             <InviteDialog
-                kind={KIND_INVITE}
+                kind={InviteKind.Invite}
                 roomId={roomId}
                 onFinished={jest.fn()}
                 initialText="@localpart:server:tld"
@@ -144,9 +173,9 @@ describe("InviteDialog", () => {
         expect(screen.queryByText("@localpart:server:tld")).toBeFalsy();
     });
 
-    it.each([[KIND_DM], [KIND_INVITE]] as [typeof KIND_DM | typeof KIND_INVITE][])(
+    it.each([[InviteKind.Dm], [InviteKind.Invite]] as [typeof InviteKind.Dm | typeof InviteKind.Invite][])(
         "should lookup inputs which look like email addresses (%s)",
-        async (kind: typeof KIND_DM | typeof KIND_INVITE) => {
+        async (kind: typeof InviteKind.Dm | typeof InviteKind.Invite) => {
             mockClient.getIdentityServerUrl.mockReturnValue("https://identity-server");
             mockClient.lookupThreePid.mockResolvedValue({
                 address: aliceEmail,
@@ -161,7 +190,7 @@ describe("InviteDialog", () => {
             render(
                 <InviteDialog
                     kind={kind}
-                    roomId={kind === KIND_INVITE ? roomId : ""}
+                    roomId={kind === InviteKind.Invite ? roomId : ""}
                     onFinished={jest.fn()}
                     initialText={aliceEmail}
                 />,
@@ -181,10 +210,94 @@ describe("InviteDialog", () => {
         mockClient.lookupThreePid.mockResolvedValue({});
 
         render(
-            <InviteDialog kind={KIND_INVITE} roomId={roomId} onFinished={jest.fn()} initialText="foobar@email.com" />,
+            <InviteDialog
+                kind={InviteKind.Invite}
+                roomId={roomId}
+                onFinished={jest.fn()}
+                initialText="foobar@email.com"
+            />,
         );
 
         await screen.findByText("foobar@email.com");
         await screen.findByText("Invite by email");
     });
+
+    it("should add pasted values", async () => {
+        mockClient.getIdentityServerUrl.mockReturnValue("https://identity-server");
+        mockClient.lookupThreePid.mockResolvedValue({});
+
+        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
+
+        const input = screen.getByTestId("invite-dialog-input");
+        input.focus();
+        await userEvent.paste(`${bobId} ${aliceEmail}`);
+
+        await screen.findByText(bobId);
+        await screen.findByText(aliceEmail);
+        expect(input).toHaveValue("");
+    });
+
+    it("should allow to invite multiple emails to a room", async () => {
+        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
+
+        await enterIntoSearchField(aliceEmail);
+        expectPill(aliceEmail);
+
+        await enterIntoSearchField(bobEmail);
+        expectPill(bobEmail);
+    });
+
+    describe("when encryption by default is disabled", () => {
+        beforeEach(() => {
+            mockClient.getClientWellKnown.mockReturnValue({
+                "io.element.e2ee": {
+                    default: false,
+                },
+            });
+        });
+
+        it("should allow to invite more than one email to a DM", async () => {
+            render(<InviteDialog kind={InviteKind.Dm} onFinished={jest.fn()} />);
+
+            await enterIntoSearchField(aliceEmail);
+            expectPill(aliceEmail);
+
+            await enterIntoSearchField(bobEmail);
+            expectPill(bobEmail);
+        });
+    });
+
+    it("should not allow to invite more than one email to a DM", async () => {
+        render(<InviteDialog kind={InviteKind.Dm} onFinished={jest.fn()} />);
+
+        // Start with an email → should convert to a pill
+        await enterIntoSearchField(aliceEmail);
+        expect(screen.getByText("Invites by email can only be sent one at a time")).toBeInTheDocument();
+        expectPill(aliceEmail);
+
+        // Everything else from now on should not convert to a pill
+
+        await enterIntoSearchField(bobEmail);
+        expectNoPill(bobEmail);
+
+        await enterIntoSearchField(aliceId);
+        expectNoPill(aliceId);
+
+        await pasteIntoSearchField(bobEmail);
+        expectNoPill(bobEmail);
+    });
+
+    it("should not allow to invite a MXID and an email to a DM", async () => {
+        render(<InviteDialog kind={InviteKind.Dm} onFinished={jest.fn()} />);
+
+        // Start with a MXID → should convert to a pill
+        await enterIntoSearchField("@carol:example.com");
+        expect(screen.queryByText("Invites by email can only be sent one at a time")).not.toBeInTheDocument();
+        expectPill("@carol:example.com");
+
+        // Add an email → should not convert to a pill
+        await enterIntoSearchField(bobEmail);
+        expect(screen.getByText("Invites by email can only be sent one at a time")).toBeInTheDocument();
+        expectNoPill(bobEmail);
+    });
 });
diff --git a/test/components/views/dialogs/MessageEditHistoryDialog-test.tsx b/test/components/views/dialogs/MessageEditHistoryDialog-test.tsx
index cadb92e488c..28f1aa47658 100644
--- a/test/components/views/dialogs/MessageEditHistoryDialog-test.tsx
+++ b/test/components/views/dialogs/MessageEditHistoryDialog-test.tsx
@@ -69,7 +69,7 @@ describe("<MessageEditHistory />", () => {
         expect(container).toMatchSnapshot();
     });
 
-    it("should support events with ", async () => {
+    it("should support events with", async () => {
         mockEdits(
             { msg: "My Great Massage", ts: undefined },
             { msg: "My Great Massage?", ts: undefined },
diff --git a/test/components/views/dialogs/SpotlightDialog-test.tsx b/test/components/views/dialogs/SpotlightDialog-test.tsx
index 08e746bb1d7..276c42d5d56 100644
--- a/test/components/views/dialogs/SpotlightDialog-test.tsx
+++ b/test/components/views/dialogs/SpotlightDialog-test.tsx
@@ -97,7 +97,7 @@ function mockClient({
         );
         return Promise.resolve({
             results: results.slice(0, limit ?? +Infinity),
-            limited: limit && limit < results.length,
+            limited: !!limit && limit < results.length,
         });
     });
     cli.getProfileInfo = jest.fn(async (userId) => {
diff --git a/test/components/views/dialogs/UserSettingsDialog-test.tsx b/test/components/views/dialogs/UserSettingsDialog-test.tsx
index c0cf9fccec7..b5f04c7b787 100644
--- a/test/components/views/dialogs/UserSettingsDialog-test.tsx
+++ b/test/components/views/dialogs/UserSettingsDialog-test.tsx
@@ -22,7 +22,6 @@ import SettingsStore, { CallbackFn } from "../../../../src/settings/SettingsStor
 import SdkConfig from "../../../../src/SdkConfig";
 import { UserTab } from "../../../../src/components/views/dialogs/UserTab";
 import UserSettingsDialog from "../../../../src/components/views/dialogs/UserSettingsDialog";
-import { IDialogProps } from "../../../../src/components/views/dialogs/IDialogProps";
 import {
     getMockClientWithEventEmitter,
     mockClientMethodsUser,
@@ -62,7 +61,7 @@ describe("<UserSettingsDialog />", () => {
     });
 
     const defaultProps = { onFinished: jest.fn() };
-    const getComponent = (props: Partial<IDialogProps & { initialTabId?: UserTab }> = {}): ReactElement => (
+    const getComponent = (props: Partial<typeof defaultProps & { initialTabId?: UserTab }> = {}): ReactElement => (
         <UserSettingsDialog {...defaultProps} {...props} />
     );
 
@@ -74,8 +73,8 @@ describe("<UserSettingsDialog />", () => {
     });
 
     const getActiveTabLabel = (container: Element) =>
-        container.querySelector(".mx_TabbedView_tabLabel_active").textContent;
-    const getActiveTabHeading = (container: Element) => container.querySelector(".mx_SettingsTab_heading").textContent;
+        container.querySelector(".mx_TabbedView_tabLabel_active")?.textContent;
+    const getActiveTabHeading = (container: Element) => container.querySelector(".mx_SettingsTab_heading")?.textContent;
 
     it("should render general settings tab when no initialTabId", () => {
         const { container } = render(getComponent());
diff --git a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
index 48502f719b5..722baf1cbdf 100644
--- a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
@@ -1,2905 +1,206 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ExportDialog /> renders export dialog 1`] = `
-[
-  <BaseDialog
-    className="mx_ExportDialog false"
-    contentId="mx_Dialog_content"
-    fixedWidth={true}
-    hasCancel={true}
-    onFinished={[MockFunction]}
-    title="Export Chat"
+<div
+  aria-describedby="mx_Dialog_content"
+  aria-labelledby="mx_BaseDialog_title"
+  class="mx_ExportDialog false mx_Dialog_fixedWidth"
+  data-focus-lock-disabled="false"
+  role="dialog"
+>
+  <div
+    class="mx_Dialog_header mx_Dialog_headerWithCancel"
   >
-    <PosthogScreenTracker />
-    <ForwardRef(FocusLockUICombination)
-      className="mx_ExportDialog false mx_Dialog_fixedWidth"
-      lockProps={
-        {
-          "aria-describedby": "mx_Dialog_content",
-          "aria-labelledby": "mx_BaseDialog_title",
-          "onKeyDown": [Function],
-          "role": "dialog",
-        }
-      }
-      returnFocus={true}
+    <h2
+      class="mx_Heading_h2 mx_Dialog_title"
+      id="mx_BaseDialog_title"
     >
-      <ForwardRef(FocusLockUI)
-        as="div"
-        autoFocus={true}
-        className="mx_ExportDialog false mx_Dialog_fixedWidth"
-        crossFrame={true}
-        disabled={false}
-        lockProps={
-          {
-            "aria-describedby": "mx_Dialog_content",
-            "aria-labelledby": "mx_BaseDialog_title",
-            "onKeyDown": [Function],
-            "role": "dialog",
-          }
-        }
-        noFocusGuards={false}
-        persistentFocus={false}
-        returnFocus={true}
-        sideCar={[Function]}
-      >
-        <div
-          data-focus-guard={true}
-          key="guard-first"
-          style={
-            {
-              "height": "0px",
-              "left": "1px",
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "fixed",
-              "top": "1px",
-              "width": "1px",
-            }
-          }
-          tabIndex={0}
-        />
-        <SideEffect(FocusWatcher)
-          autoFocus={true}
-          crossFrame={true}
-          disabled={false}
-          id={{}}
-          observed={
-            <div
-              aria-describedby="mx_Dialog_content"
-              aria-labelledby="mx_BaseDialog_title"
-              class="mx_ExportDialog false mx_Dialog_fixedWidth"
-              data-focus-lock-disabled="false"
-              role="dialog"
-            >
-              <div
-                class="mx_Dialog_header mx_Dialog_headerWithCancel"
-              >
-                <h2
-                  class="mx_Heading_h2 mx_Dialog_title"
-                  id="mx_BaseDialog_title"
-                >
-                  Export Chat
-                </h2>
-                <div
-                  aria-label="Close dialog"
-                  class="mx_AccessibleButton mx_Dialog_cancelButton"
-                  role="button"
-                  tabindex="0"
-                />
-              </div>
-              <p>
-                Select from the options below to export chats from your timeline
-              </p>
-              <div
-                class="mx_ExportDialog_options"
-              >
-                <span
-                  class="mx_ExportDialog_subheading"
-                >
-                  Format
-                </span>
-                <label
-                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
-                >
-                  <input
-                    checked=""
-                    id="exportFormat-Html"
-                    name="exportFormat"
-                    type="radio"
-                    value="Html"
-                  />
-                  <div>
-                    <div />
-                  </div>
-                  <div
-                    class="mx_StyledRadioButton_content"
-                  >
-                    HTML
-                  </div>
-                  <div
-                    class="mx_StyledRadioButton_spacer"
-                  />
-                </label>
-                <label
-                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-                >
-                  <input
-                    id="exportFormat-PlainText"
-                    name="exportFormat"
-                    type="radio"
-                    value="PlainText"
-                  />
-                  <div>
-                    <div />
-                  </div>
-                  <div
-                    class="mx_StyledRadioButton_content"
-                  >
-                    Plain Text
-                  </div>
-                  <div
-                    class="mx_StyledRadioButton_spacer"
-                  />
-                </label>
-                <label
-                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-                >
-                  <input
-                    id="exportFormat-Json"
-                    name="exportFormat"
-                    type="radio"
-                    value="Json"
-                  />
-                  <div>
-                    <div />
-                  </div>
-                  <div
-                    class="mx_StyledRadioButton_content"
-                  >
-                    JSON
-                  </div>
-                  <div
-                    class="mx_StyledRadioButton_spacer"
-                  />
-                </label>
-                <span
-                  class="mx_ExportDialog_subheading"
-                >
-                  Messages
-                </span>
-                <div
-                  class="mx_Field mx_Field_select"
-                >
-                  <select
-                    id="export-type"
-                    type="text"
-                  >
-                    <option
-                      value="Timeline"
-                    >
-                      Current Timeline
-                    </option>
-                    <option
-                      value="Beginning"
-                    >
-                      From the beginning
-                    </option>
-                    <option
-                      value="LastNMessages"
-                    >
-                      Specify a number of messages
-                    </option>
-                  </select>
-                  <label
-                    for="export-type"
-                  />
-                </div>
-                <span
-                  class="mx_ExportDialog_subheading"
-                >
-                  Size Limit
-                </span>
-                <div
-                  class="mx_Field mx_Field_input"
-                >
-                  <input
-                    autocomplete="off"
-                    id="size-limit"
-                    type="number"
-                    value="8"
-                  />
-                  <label
-                    for="size-limit"
-                  />
-                  <span
-                    class="mx_Field_postfix"
-                  >
-                    <span>
-                      MB
-                    </span>
-                  </span>
-                </div>
-                <span
-                  class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-                >
-                  <input
-                    id="include-attachments"
-                    type="checkbox"
-                  />
-                  <label
-                    for="include-attachments"
-                  >
-                    <div
-                      class="mx_Checkbox_background"
-                    >
-                      <div
-                        class="mx_Checkbox_checkmark"
-                      />
-                    </div>
-                    <div>
-                      Include Attachments
-                    </div>
-                  </label>
-                </span>
-              </div>
-              <div
-                class="mx_Dialog_buttons"
-              >
-                <span
-                  class="mx_Dialog_buttons_row"
-                >
-                  <button
-                    data-testid="dialog-cancel-button"
-                    type="button"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    class="mx_Dialog_primary"
-                    data-testid="dialog-primary-button"
-                    type="button"
-                  >
-                    Export
-                  </button>
-                </span>
-              </div>
-            </div>
-          }
-          onActivation={[Function]}
-          onDeactivation={[Function]}
-          persistentFocus={false}
-          returnFocus={[Function]}
-          shards={[]}
-          sideCar={
-            {
-              "assignMedium": [Function],
-              "assignSyncMedium": [Function],
-              "options": {
-                "async": true,
-                "ssr": false,
-              },
-              "read": [Function],
-              "useMedium": [Function],
-            }
-          }
-        >
-          <FocusWatcher
-            autoFocus={true}
-            crossFrame={true}
-            disabled={false}
-            id={{}}
-            observed={
-              <div
-                aria-describedby="mx_Dialog_content"
-                aria-labelledby="mx_BaseDialog_title"
-                class="mx_ExportDialog false mx_Dialog_fixedWidth"
-                data-focus-lock-disabled="false"
-                role="dialog"
-              >
-                <div
-                  class="mx_Dialog_header mx_Dialog_headerWithCancel"
-                >
-                  <h2
-                    class="mx_Heading_h2 mx_Dialog_title"
-                    id="mx_BaseDialog_title"
-                  >
-                    Export Chat
-                  </h2>
-                  <div
-                    aria-label="Close dialog"
-                    class="mx_AccessibleButton mx_Dialog_cancelButton"
-                    role="button"
-                    tabindex="0"
-                  />
-                </div>
-                <p>
-                  Select from the options below to export chats from your timeline
-                </p>
-                <div
-                  class="mx_ExportDialog_options"
-                >
-                  <span
-                    class="mx_ExportDialog_subheading"
-                  >
-                    Format
-                  </span>
-                  <label
-                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
-                  >
-                    <input
-                      checked=""
-                      id="exportFormat-Html"
-                      name="exportFormat"
-                      type="radio"
-                      value="Html"
-                    />
-                    <div>
-                      <div />
-                    </div>
-                    <div
-                      class="mx_StyledRadioButton_content"
-                    >
-                      HTML
-                    </div>
-                    <div
-                      class="mx_StyledRadioButton_spacer"
-                    />
-                  </label>
-                  <label
-                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-                  >
-                    <input
-                      id="exportFormat-PlainText"
-                      name="exportFormat"
-                      type="radio"
-                      value="PlainText"
-                    />
-                    <div>
-                      <div />
-                    </div>
-                    <div
-                      class="mx_StyledRadioButton_content"
-                    >
-                      Plain Text
-                    </div>
-                    <div
-                      class="mx_StyledRadioButton_spacer"
-                    />
-                  </label>
-                  <label
-                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-                  >
-                    <input
-                      id="exportFormat-Json"
-                      name="exportFormat"
-                      type="radio"
-                      value="Json"
-                    />
-                    <div>
-                      <div />
-                    </div>
-                    <div
-                      class="mx_StyledRadioButton_content"
-                    >
-                      JSON
-                    </div>
-                    <div
-                      class="mx_StyledRadioButton_spacer"
-                    />
-                  </label>
-                  <span
-                    class="mx_ExportDialog_subheading"
-                  >
-                    Messages
-                  </span>
-                  <div
-                    class="mx_Field mx_Field_select"
-                  >
-                    <select
-                      id="export-type"
-                      type="text"
-                    >
-                      <option
-                        value="Timeline"
-                      >
-                        Current Timeline
-                      </option>
-                      <option
-                        value="Beginning"
-                      >
-                        From the beginning
-                      </option>
-                      <option
-                        value="LastNMessages"
-                      >
-                        Specify a number of messages
-                      </option>
-                    </select>
-                    <label
-                      for="export-type"
-                    />
-                  </div>
-                  <span
-                    class="mx_ExportDialog_subheading"
-                  >
-                    Size Limit
-                  </span>
-                  <div
-                    class="mx_Field mx_Field_input"
-                  >
-                    <input
-                      autocomplete="off"
-                      id="size-limit"
-                      type="number"
-                      value="8"
-                    />
-                    <label
-                      for="size-limit"
-                    />
-                    <span
-                      class="mx_Field_postfix"
-                    >
-                      <span>
-                        MB
-                      </span>
-                    </span>
-                  </div>
-                  <span
-                    class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-                  >
-                    <input
-                      id="include-attachments"
-                      type="checkbox"
-                    />
-                    <label
-                      for="include-attachments"
-                    >
-                      <div
-                        class="mx_Checkbox_background"
-                      >
-                        <div
-                          class="mx_Checkbox_checkmark"
-                        />
-                      </div>
-                      <div>
-                        Include Attachments
-                      </div>
-                    </label>
-                  </span>
-                </div>
-                <div
-                  class="mx_Dialog_buttons"
-                >
-                  <span
-                    class="mx_Dialog_buttons_row"
-                  >
-                    <button
-                      data-testid="dialog-cancel-button"
-                      type="button"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      class="mx_Dialog_primary"
-                      data-testid="dialog-primary-button"
-                      type="button"
-                    >
-                      Export
-                    </button>
-                  </span>
-                </div>
-              </div>
-            }
-            onActivation={[Function]}
-            onDeactivation={[Function]}
-            persistentFocus={false}
-            returnFocus={[Function]}
-            shards={[]}
-            sideCar={
-              {
-                "assignMedium": [Function],
-                "assignSyncMedium": [Function],
-                "options": {
-                  "async": true,
-                  "ssr": false,
-                },
-                "read": [Function],
-                "useMedium": [Function],
-              }
-            }
-          />
-        </SideEffect(FocusWatcher)>
-        <div
-          aria-describedby="mx_Dialog_content"
-          aria-labelledby="mx_BaseDialog_title"
-          className="mx_ExportDialog false mx_Dialog_fixedWidth"
-          data-focus-lock-disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          role="dialog"
-        >
-          <div
-            className="mx_Dialog_header mx_Dialog_headerWithCancel"
-          >
-            <Heading
-              className="mx_Dialog_title"
-              id="mx_BaseDialog_title"
-              size="h2"
-            >
-              <h2
-                className="mx_Heading_h2 mx_Dialog_title"
-                id="mx_BaseDialog_title"
-              >
-                Export Chat
-              </h2>
-            </Heading>
-            <AccessibleButton
-              aria-label="Close dialog"
-              className="mx_Dialog_cancelButton"
-              element="div"
-              onClick={[Function]}
-              role="button"
-              tabIndex={0}
-            >
-              <div
-                aria-label="Close dialog"
-                className="mx_AccessibleButton mx_Dialog_cancelButton"
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                role="button"
-                tabIndex={0}
-              />
-            </AccessibleButton>
-          </div>
-          <p>
-            Select from the options below to export chats from your timeline
-          </p>
-          <div
-            className="mx_ExportDialog_options"
-          >
-            <span
-              className="mx_ExportDialog_subheading"
-            >
-              Format
-            </span>
-            <StyledRadioGroup
-              definitions={
-                [
-                  {
-                    "label": "HTML",
-                    "value": "Html",
-                  },
-                  {
-                    "label": "Plain Text",
-                    "value": "PlainText",
-                  },
-                  {
-                    "label": "JSON",
-                    "value": "Json",
-                  },
-                ]
-              }
-              name="exportFormat"
-              onChange={[Function]}
-              value="Html"
-            >
-              <StyledRadioButton
-                checked={true}
-                childrenInLabel={true}
-                className=""
-                id="exportFormat-Html"
-                name="exportFormat"
-                onChange={[Function]}
-                value="Html"
-              >
-                <label
-                  className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
-                >
-                  <input
-                    checked={true}
-                    id="exportFormat-Html"
-                    name="exportFormat"
-                    onChange={[Function]}
-                    type="radio"
-                    value="Html"
-                  />
-                  <div>
-                    <div />
-                  </div>
-                  <div
-                    className="mx_StyledRadioButton_content"
-                  >
-                    HTML
-                  </div>
-                  <div
-                    className="mx_StyledRadioButton_spacer"
-                  />
-                </label>
-              </StyledRadioButton>
-              <StyledRadioButton
-                checked={false}
-                childrenInLabel={true}
-                className=""
-                id="exportFormat-PlainText"
-                name="exportFormat"
-                onChange={[Function]}
-                value="PlainText"
-              >
-                <label
-                  className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-                >
-                  <input
-                    checked={false}
-                    id="exportFormat-PlainText"
-                    name="exportFormat"
-                    onChange={[Function]}
-                    type="radio"
-                    value="PlainText"
-                  />
-                  <div>
-                    <div />
-                  </div>
-                  <div
-                    className="mx_StyledRadioButton_content"
-                  >
-                    Plain Text
-                  </div>
-                  <div
-                    className="mx_StyledRadioButton_spacer"
-                  />
-                </label>
-              </StyledRadioButton>
-              <StyledRadioButton
-                checked={false}
-                childrenInLabel={true}
-                className=""
-                id="exportFormat-Json"
-                name="exportFormat"
-                onChange={[Function]}
-                value="Json"
-              >
-                <label
-                  className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-                >
-                  <input
-                    checked={false}
-                    id="exportFormat-Json"
-                    name="exportFormat"
-                    onChange={[Function]}
-                    type="radio"
-                    value="Json"
-                  />
-                  <div>
-                    <div />
-                  </div>
-                  <div
-                    className="mx_StyledRadioButton_content"
-                  >
-                    JSON
-                  </div>
-                  <div
-                    className="mx_StyledRadioButton_spacer"
-                  />
-                </label>
-              </StyledRadioButton>
-            </StyledRadioGroup>
-            <span
-              className="mx_ExportDialog_subheading"
-            >
-              Messages
-            </span>
-            <Field
-              element="select"
-              id="export-type"
-              onChange={[Function]}
-              type="text"
-              validateOnBlur={true}
-              validateOnChange={true}
-              validateOnFocus={true}
-              value="Timeline"
-            >
-              <div
-                className="mx_Field mx_Field_select"
-              >
-                <select
-                  id="export-type"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  type="text"
-                  value="Timeline"
-                >
-                  <option
-                    key="Timeline"
-                    value="Timeline"
-                  >
-                    Current Timeline
-                  </option>
-                  <option
-                    key="Beginning"
-                    value="Beginning"
-                  >
-                    From the beginning
-                  </option>
-                  <option
-                    key="LastNMessages"
-                    value="LastNMessages"
-                  >
-                    Specify a number of messages
-                  </option>
-                </select>
-                <label
-                  htmlFor="export-type"
-                />
-              </div>
-            </Field>
-            <span
-              className="mx_ExportDialog_subheading"
-            >
-              Size Limit
-            </span>
-            <Field
-              autoComplete="off"
-              element="input"
-              id="size-limit"
-              onChange={[Function]}
-              onValidate={[Function]}
-              postfixComponent={
-                <span>
-                  MB
-                </span>
-              }
-              type="number"
-              validateOnBlur={true}
-              validateOnChange={true}
-              validateOnFocus={true}
-              value="8"
-            >
-              <div
-                className="mx_Field mx_Field_input"
-              >
-                <input
-                  autoComplete="off"
-                  id="size-limit"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  type="number"
-                  value="8"
-                />
-                <label
-                  htmlFor="size-limit"
-                />
-                <span
-                  className="mx_Field_postfix"
-                >
-                  <span>
-                    MB
-                  </span>
-                </span>
-              </div>
-            </Field>
-            <StyledCheckbox
-              checked={false}
-              className="mx_ExportDialog_attachments-checkbox"
-              id="include-attachments"
-              onChange={[Function]}
-            >
-              <span
-                className="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-              >
-                <input
-                  checked={false}
-                  id="include-attachments"
-                  onChange={[Function]}
-                  type="checkbox"
-                />
-                <label
-                  htmlFor="include-attachments"
-                >
-                  <div
-                    className="mx_Checkbox_background"
-                  >
-                    <div
-                      className="mx_Checkbox_checkmark"
-                    />
-                  </div>
-                  <div>
-                    Include Attachments
-                  </div>
-                </label>
-              </span>
-            </StyledCheckbox>
-          </div>
-          <DialogButtons
-            disabled={false}
-            hasCancel={true}
-            onCancel={[Function]}
-            onPrimaryButtonClick={[Function]}
-            primaryButton="Export"
-          >
-            <div
-              className="mx_Dialog_buttons"
-            >
-              <span
-                className="mx_Dialog_buttons_row"
-              >
-                <button
-                  data-testid="dialog-cancel-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
-                >
-                  Cancel
-                </button>
-                <button
-                  className="mx_Dialog_primary"
-                  data-testid="dialog-primary-button"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  Export
-                </button>
-              </span>
-            </div>
-          </DialogButtons>
-        </div>
-        <div
-          data-focus-guard={true}
-          style={
-            {
-              "height": "0px",
-              "left": "1px",
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "fixed",
-              "top": "1px",
-              "width": "1px",
-            }
-          }
-          tabIndex={0}
-        />
-      </ForwardRef(FocusLockUI)>
-    </ForwardRef(FocusLockUICombination)>
-  </BaseDialog>,
-  <ForwardRef(FocusLockUICombination)
-    className="mx_ExportDialog false mx_Dialog_fixedWidth"
-    lockProps={
-      {
-        "aria-describedby": "mx_Dialog_content",
-        "aria-labelledby": "mx_BaseDialog_title",
-        "onKeyDown": [Function],
-        "role": "dialog",
-      }
-    }
-    returnFocus={true}
+      Export Chat
+    </h2>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <p>
+    Select from the options below to export chats from your timeline
+  </p>
+  <div
+    class="mx_ExportDialog_options"
   >
-    <ForwardRef(FocusLockUI)
-      as="div"
-      autoFocus={true}
-      className="mx_ExportDialog false mx_Dialog_fixedWidth"
-      crossFrame={true}
-      disabled={false}
-      lockProps={
-        {
-          "aria-describedby": "mx_Dialog_content",
-          "aria-labelledby": "mx_BaseDialog_title",
-          "onKeyDown": [Function],
-          "role": "dialog",
-        }
-      }
-      noFocusGuards={false}
-      persistentFocus={false}
-      returnFocus={true}
-      sideCar={[Function]}
+    <span
+      class="mx_ExportDialog_subheading"
     >
-      <div
-        data-focus-guard={true}
-        key="guard-first"
-        style={
-          {
-            "height": "0px",
-            "left": "1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "fixed",
-            "top": "1px",
-            "width": "1px",
-          }
-        }
-        tabIndex={0}
+      Format
+    </span>
+    <label
+      class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+    >
+      <input
+        checked=""
+        id="exportFormat-Html"
+        name="exportFormat"
+        type="radio"
+        value="Html"
       />
-      <SideEffect(FocusWatcher)
-        autoFocus={true}
-        crossFrame={true}
-        disabled={false}
-        id={{}}
-        observed={
-          <div
-            aria-describedby="mx_Dialog_content"
-            aria-labelledby="mx_BaseDialog_title"
-            class="mx_ExportDialog false mx_Dialog_fixedWidth"
-            data-focus-lock-disabled="false"
-            role="dialog"
-          >
-            <div
-              class="mx_Dialog_header mx_Dialog_headerWithCancel"
-            >
-              <h2
-                class="mx_Heading_h2 mx_Dialog_title"
-                id="mx_BaseDialog_title"
-              >
-                Export Chat
-              </h2>
-              <div
-                aria-label="Close dialog"
-                class="mx_AccessibleButton mx_Dialog_cancelButton"
-                role="button"
-                tabindex="0"
-              />
-            </div>
-            <p>
-              Select from the options below to export chats from your timeline
-            </p>
-            <div
-              class="mx_ExportDialog_options"
-            >
-              <span
-                class="mx_ExportDialog_subheading"
-              >
-                Format
-              </span>
-              <label
-                class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
-              >
-                <input
-                  checked=""
-                  id="exportFormat-Html"
-                  name="exportFormat"
-                  type="radio"
-                  value="Html"
-                />
-                <div>
-                  <div />
-                </div>
-                <div
-                  class="mx_StyledRadioButton_content"
-                >
-                  HTML
-                </div>
-                <div
-                  class="mx_StyledRadioButton_spacer"
-                />
-              </label>
-              <label
-                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-              >
-                <input
-                  id="exportFormat-PlainText"
-                  name="exportFormat"
-                  type="radio"
-                  value="PlainText"
-                />
-                <div>
-                  <div />
-                </div>
-                <div
-                  class="mx_StyledRadioButton_content"
-                >
-                  Plain Text
-                </div>
-                <div
-                  class="mx_StyledRadioButton_spacer"
-                />
-              </label>
-              <label
-                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-              >
-                <input
-                  id="exportFormat-Json"
-                  name="exportFormat"
-                  type="radio"
-                  value="Json"
-                />
-                <div>
-                  <div />
-                </div>
-                <div
-                  class="mx_StyledRadioButton_content"
-                >
-                  JSON
-                </div>
-                <div
-                  class="mx_StyledRadioButton_spacer"
-                />
-              </label>
-              <span
-                class="mx_ExportDialog_subheading"
-              >
-                Messages
-              </span>
-              <div
-                class="mx_Field mx_Field_select"
-              >
-                <select
-                  id="export-type"
-                  type="text"
-                >
-                  <option
-                    value="Timeline"
-                  >
-                    Current Timeline
-                  </option>
-                  <option
-                    value="Beginning"
-                  >
-                    From the beginning
-                  </option>
-                  <option
-                    value="LastNMessages"
-                  >
-                    Specify a number of messages
-                  </option>
-                </select>
-                <label
-                  for="export-type"
-                />
-              </div>
-              <span
-                class="mx_ExportDialog_subheading"
-              >
-                Size Limit
-              </span>
-              <div
-                class="mx_Field mx_Field_input"
-              >
-                <input
-                  autocomplete="off"
-                  id="size-limit"
-                  type="number"
-                  value="8"
-                />
-                <label
-                  for="size-limit"
-                />
-                <span
-                  class="mx_Field_postfix"
-                >
-                  <span>
-                    MB
-                  </span>
-                </span>
-              </div>
-              <span
-                class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-              >
-                <input
-                  id="include-attachments"
-                  type="checkbox"
-                />
-                <label
-                  for="include-attachments"
-                >
-                  <div
-                    class="mx_Checkbox_background"
-                  >
-                    <div
-                      class="mx_Checkbox_checkmark"
-                    />
-                  </div>
-                  <div>
-                    Include Attachments
-                  </div>
-                </label>
-              </span>
-            </div>
-            <div
-              class="mx_Dialog_buttons"
-            >
-              <span
-                class="mx_Dialog_buttons_row"
-              >
-                <button
-                  data-testid="dialog-cancel-button"
-                  type="button"
-                >
-                  Cancel
-                </button>
-                <button
-                  class="mx_Dialog_primary"
-                  data-testid="dialog-primary-button"
-                  type="button"
-                >
-                  Export
-                </button>
-              </span>
-            </div>
-          </div>
-        }
-        onActivation={[Function]}
-        onDeactivation={[Function]}
-        persistentFocus={false}
-        returnFocus={[Function]}
-        shards={[]}
-        sideCar={
-          {
-            "assignMedium": [Function],
-            "assignSyncMedium": [Function],
-            "options": {
-              "async": true,
-              "ssr": false,
-            },
-            "read": [Function],
-            "useMedium": [Function],
-          }
-        }
-      >
-        <FocusWatcher
-          autoFocus={true}
-          crossFrame={true}
-          disabled={false}
-          id={{}}
-          observed={
-            <div
-              aria-describedby="mx_Dialog_content"
-              aria-labelledby="mx_BaseDialog_title"
-              class="mx_ExportDialog false mx_Dialog_fixedWidth"
-              data-focus-lock-disabled="false"
-              role="dialog"
-            >
-              <div
-                class="mx_Dialog_header mx_Dialog_headerWithCancel"
-              >
-                <h2
-                  class="mx_Heading_h2 mx_Dialog_title"
-                  id="mx_BaseDialog_title"
-                >
-                  Export Chat
-                </h2>
-                <div
-                  aria-label="Close dialog"
-                  class="mx_AccessibleButton mx_Dialog_cancelButton"
-                  role="button"
-                  tabindex="0"
-                />
-              </div>
-              <p>
-                Select from the options below to export chats from your timeline
-              </p>
-              <div
-                class="mx_ExportDialog_options"
-              >
-                <span
-                  class="mx_ExportDialog_subheading"
-                >
-                  Format
-                </span>
-                <label
-                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
-                >
-                  <input
-                    checked=""
-                    id="exportFormat-Html"
-                    name="exportFormat"
-                    type="radio"
-                    value="Html"
-                  />
-                  <div>
-                    <div />
-                  </div>
-                  <div
-                    class="mx_StyledRadioButton_content"
-                  >
-                    HTML
-                  </div>
-                  <div
-                    class="mx_StyledRadioButton_spacer"
-                  />
-                </label>
-                <label
-                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-                >
-                  <input
-                    id="exportFormat-PlainText"
-                    name="exportFormat"
-                    type="radio"
-                    value="PlainText"
-                  />
-                  <div>
-                    <div />
-                  </div>
-                  <div
-                    class="mx_StyledRadioButton_content"
-                  >
-                    Plain Text
-                  </div>
-                  <div
-                    class="mx_StyledRadioButton_spacer"
-                  />
-                </label>
-                <label
-                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-                >
-                  <input
-                    id="exportFormat-Json"
-                    name="exportFormat"
-                    type="radio"
-                    value="Json"
-                  />
-                  <div>
-                    <div />
-                  </div>
-                  <div
-                    class="mx_StyledRadioButton_content"
-                  >
-                    JSON
-                  </div>
-                  <div
-                    class="mx_StyledRadioButton_spacer"
-                  />
-                </label>
-                <span
-                  class="mx_ExportDialog_subheading"
-                >
-                  Messages
-                </span>
-                <div
-                  class="mx_Field mx_Field_select"
-                >
-                  <select
-                    id="export-type"
-                    type="text"
-                  >
-                    <option
-                      value="Timeline"
-                    >
-                      Current Timeline
-                    </option>
-                    <option
-                      value="Beginning"
-                    >
-                      From the beginning
-                    </option>
-                    <option
-                      value="LastNMessages"
-                    >
-                      Specify a number of messages
-                    </option>
-                  </select>
-                  <label
-                    for="export-type"
-                  />
-                </div>
-                <span
-                  class="mx_ExportDialog_subheading"
-                >
-                  Size Limit
-                </span>
-                <div
-                  class="mx_Field mx_Field_input"
-                >
-                  <input
-                    autocomplete="off"
-                    id="size-limit"
-                    type="number"
-                    value="8"
-                  />
-                  <label
-                    for="size-limit"
-                  />
-                  <span
-                    class="mx_Field_postfix"
-                  >
-                    <span>
-                      MB
-                    </span>
-                  </span>
-                </div>
-                <span
-                  class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-                >
-                  <input
-                    id="include-attachments"
-                    type="checkbox"
-                  />
-                  <label
-                    for="include-attachments"
-                  >
-                    <div
-                      class="mx_Checkbox_background"
-                    >
-                      <div
-                        class="mx_Checkbox_checkmark"
-                      />
-                    </div>
-                    <div>
-                      Include Attachments
-                    </div>
-                  </label>
-                </span>
-              </div>
-              <div
-                class="mx_Dialog_buttons"
-              >
-                <span
-                  class="mx_Dialog_buttons_row"
-                >
-                  <button
-                    data-testid="dialog-cancel-button"
-                    type="button"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    class="mx_Dialog_primary"
-                    data-testid="dialog-primary-button"
-                    type="button"
-                  >
-                    Export
-                  </button>
-                </span>
-              </div>
-            </div>
-          }
-          onActivation={[Function]}
-          onDeactivation={[Function]}
-          persistentFocus={false}
-          returnFocus={[Function]}
-          shards={[]}
-          sideCar={
-            {
-              "assignMedium": [Function],
-              "assignSyncMedium": [Function],
-              "options": {
-                "async": true,
-                "ssr": false,
-              },
-              "read": [Function],
-              "useMedium": [Function],
-            }
-          }
-        />
-      </SideEffect(FocusWatcher)>
+      <div>
+        <div />
+      </div>
       <div
-        aria-describedby="mx_Dialog_content"
-        aria-labelledby="mx_BaseDialog_title"
-        className="mx_ExportDialog false mx_Dialog_fixedWidth"
-        data-focus-lock-disabled={false}
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="dialog"
+        class="mx_StyledRadioButton_content"
       >
-        <div
-          className="mx_Dialog_header mx_Dialog_headerWithCancel"
-        >
-          <Heading
-            className="mx_Dialog_title"
-            id="mx_BaseDialog_title"
-            size="h2"
-          >
-            <h2
-              className="mx_Heading_h2 mx_Dialog_title"
-              id="mx_BaseDialog_title"
-            >
-              Export Chat
-            </h2>
-          </Heading>
-          <AccessibleButton
-            aria-label="Close dialog"
-            className="mx_Dialog_cancelButton"
-            element="div"
-            onClick={[Function]}
-            role="button"
-            tabIndex={0}
-          >
-            <div
-              aria-label="Close dialog"
-              className="mx_AccessibleButton mx_Dialog_cancelButton"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              role="button"
-              tabIndex={0}
-            />
-          </AccessibleButton>
-        </div>
-        <p>
-          Select from the options below to export chats from your timeline
-        </p>
-        <div
-          className="mx_ExportDialog_options"
-        >
-          <span
-            className="mx_ExportDialog_subheading"
-          >
-            Format
-          </span>
-          <StyledRadioGroup
-            definitions={
-              [
-                {
-                  "label": "HTML",
-                  "value": "Html",
-                },
-                {
-                  "label": "Plain Text",
-                  "value": "PlainText",
-                },
-                {
-                  "label": "JSON",
-                  "value": "Json",
-                },
-              ]
-            }
-            name="exportFormat"
-            onChange={[Function]}
-            value="Html"
-          >
-            <StyledRadioButton
-              checked={true}
-              childrenInLabel={true}
-              className=""
-              id="exportFormat-Html"
-              name="exportFormat"
-              onChange={[Function]}
-              value="Html"
-            >
-              <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
-              >
-                <input
-                  checked={true}
-                  id="exportFormat-Html"
-                  name="exportFormat"
-                  onChange={[Function]}
-                  type="radio"
-                  value="Html"
-                />
-                <div>
-                  <div />
-                </div>
-                <div
-                  className="mx_StyledRadioButton_content"
-                >
-                  HTML
-                </div>
-                <div
-                  className="mx_StyledRadioButton_spacer"
-                />
-              </label>
-            </StyledRadioButton>
-            <StyledRadioButton
-              checked={false}
-              childrenInLabel={true}
-              className=""
-              id="exportFormat-PlainText"
-              name="exportFormat"
-              onChange={[Function]}
-              value="PlainText"
-            >
-              <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-              >
-                <input
-                  checked={false}
-                  id="exportFormat-PlainText"
-                  name="exportFormat"
-                  onChange={[Function]}
-                  type="radio"
-                  value="PlainText"
-                />
-                <div>
-                  <div />
-                </div>
-                <div
-                  className="mx_StyledRadioButton_content"
-                >
-                  Plain Text
-                </div>
-                <div
-                  className="mx_StyledRadioButton_spacer"
-                />
-              </label>
-            </StyledRadioButton>
-            <StyledRadioButton
-              checked={false}
-              childrenInLabel={true}
-              className=""
-              id="exportFormat-Json"
-              name="exportFormat"
-              onChange={[Function]}
-              value="Json"
-            >
-              <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-              >
-                <input
-                  checked={false}
-                  id="exportFormat-Json"
-                  name="exportFormat"
-                  onChange={[Function]}
-                  type="radio"
-                  value="Json"
-                />
-                <div>
-                  <div />
-                </div>
-                <div
-                  className="mx_StyledRadioButton_content"
-                >
-                  JSON
-                </div>
-                <div
-                  className="mx_StyledRadioButton_spacer"
-                />
-              </label>
-            </StyledRadioButton>
-          </StyledRadioGroup>
-          <span
-            className="mx_ExportDialog_subheading"
-          >
-            Messages
-          </span>
-          <Field
-            element="select"
-            id="export-type"
-            onChange={[Function]}
-            type="text"
-            validateOnBlur={true}
-            validateOnChange={true}
-            validateOnFocus={true}
-            value="Timeline"
-          >
-            <div
-              className="mx_Field mx_Field_select"
-            >
-              <select
-                id="export-type"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                type="text"
-                value="Timeline"
-              >
-                <option
-                  key="Timeline"
-                  value="Timeline"
-                >
-                  Current Timeline
-                </option>
-                <option
-                  key="Beginning"
-                  value="Beginning"
-                >
-                  From the beginning
-                </option>
-                <option
-                  key="LastNMessages"
-                  value="LastNMessages"
-                >
-                  Specify a number of messages
-                </option>
-              </select>
-              <label
-                htmlFor="export-type"
-              />
-            </div>
-          </Field>
-          <span
-            className="mx_ExportDialog_subheading"
-          >
-            Size Limit
-          </span>
-          <Field
-            autoComplete="off"
-            element="input"
-            id="size-limit"
-            onChange={[Function]}
-            onValidate={[Function]}
-            postfixComponent={
-              <span>
-                MB
-              </span>
-            }
-            type="number"
-            validateOnBlur={true}
-            validateOnChange={true}
-            validateOnFocus={true}
-            value="8"
-          >
-            <div
-              className="mx_Field mx_Field_input"
-            >
-              <input
-                autoComplete="off"
-                id="size-limit"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                type="number"
-                value="8"
-              />
-              <label
-                htmlFor="size-limit"
-              />
-              <span
-                className="mx_Field_postfix"
-              >
-                <span>
-                  MB
-                </span>
-              </span>
-            </div>
-          </Field>
-          <StyledCheckbox
-            checked={false}
-            className="mx_ExportDialog_attachments-checkbox"
-            id="include-attachments"
-            onChange={[Function]}
-          >
-            <span
-              className="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-            >
-              <input
-                checked={false}
-                id="include-attachments"
-                onChange={[Function]}
-                type="checkbox"
-              />
-              <label
-                htmlFor="include-attachments"
-              >
-                <div
-                  className="mx_Checkbox_background"
-                >
-                  <div
-                    className="mx_Checkbox_checkmark"
-                  />
-                </div>
-                <div>
-                  Include Attachments
-                </div>
-              </label>
-            </span>
-          </StyledCheckbox>
-        </div>
-        <DialogButtons
-          disabled={false}
-          hasCancel={true}
-          onCancel={[Function]}
-          onPrimaryButtonClick={[Function]}
-          primaryButton="Export"
-        >
-          <div
-            className="mx_Dialog_buttons"
-          >
-            <span
-              className="mx_Dialog_buttons_row"
-            >
-              <button
-                data-testid="dialog-cancel-button"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Cancel
-              </button>
-              <button
-                className="mx_Dialog_primary"
-                data-testid="dialog-primary-button"
-                onClick={[Function]}
-                type="button"
-              >
-                Export
-              </button>
-            </span>
-          </div>
-        </DialogButtons>
+        HTML
       </div>
       <div
-        data-focus-guard={true}
-        style={
-          {
-            "height": "0px",
-            "left": "1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "fixed",
-            "top": "1px",
-            "width": "1px",
-          }
-        }
-        tabIndex={0}
+        class="mx_StyledRadioButton_spacer"
       />
-    </ForwardRef(FocusLockUI)>
-  </ForwardRef(FocusLockUICombination)>,
-  <ForwardRef(FocusLockUI)
-    as="div"
-    autoFocus={true}
-    className="mx_ExportDialog false mx_Dialog_fixedWidth"
-    crossFrame={true}
-    disabled={false}
-    lockProps={
-      {
-        "aria-describedby": "mx_Dialog_content",
-        "aria-labelledby": "mx_BaseDialog_title",
-        "onKeyDown": [Function],
-        "role": "dialog",
-      }
-    }
-    noFocusGuards={false}
-    persistentFocus={false}
-    returnFocus={true}
-    sideCar={[Function]}
-  >
-    <div
-      data-focus-guard={true}
-      key="guard-first"
-      style={
-        {
-          "height": "0px",
-          "left": "1px",
-          "overflow": "hidden",
-          "padding": 0,
-          "position": "fixed",
-          "top": "1px",
-          "width": "1px",
-        }
-      }
-      tabIndex={0}
-    />
-    <SideEffect(FocusWatcher)
-      autoFocus={true}
-      crossFrame={true}
-      disabled={false}
-      id={{}}
-      observed={
-        <div
-          aria-describedby="mx_Dialog_content"
-          aria-labelledby="mx_BaseDialog_title"
-          class="mx_ExportDialog false mx_Dialog_fixedWidth"
-          data-focus-lock-disabled="false"
-          role="dialog"
-        >
-          <div
-            class="mx_Dialog_header mx_Dialog_headerWithCancel"
-          >
-            <h2
-              class="mx_Heading_h2 mx_Dialog_title"
-              id="mx_BaseDialog_title"
-            >
-              Export Chat
-            </h2>
-            <div
-              aria-label="Close dialog"
-              class="mx_AccessibleButton mx_Dialog_cancelButton"
-              role="button"
-              tabindex="0"
-            />
-          </div>
-          <p>
-            Select from the options below to export chats from your timeline
-          </p>
-          <div
-            class="mx_ExportDialog_options"
-          >
-            <span
-              class="mx_ExportDialog_subheading"
-            >
-              Format
-            </span>
-            <label
-              class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
-            >
-              <input
-                checked=""
-                id="exportFormat-Html"
-                name="exportFormat"
-                type="radio"
-                value="Html"
-              />
-              <div>
-                <div />
-              </div>
-              <div
-                class="mx_StyledRadioButton_content"
-              >
-                HTML
-              </div>
-              <div
-                class="mx_StyledRadioButton_spacer"
-              />
-            </label>
-            <label
-              class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-            >
-              <input
-                id="exportFormat-PlainText"
-                name="exportFormat"
-                type="radio"
-                value="PlainText"
-              />
-              <div>
-                <div />
-              </div>
-              <div
-                class="mx_StyledRadioButton_content"
-              >
-                Plain Text
-              </div>
-              <div
-                class="mx_StyledRadioButton_spacer"
-              />
-            </label>
-            <label
-              class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-            >
-              <input
-                id="exportFormat-Json"
-                name="exportFormat"
-                type="radio"
-                value="Json"
-              />
-              <div>
-                <div />
-              </div>
-              <div
-                class="mx_StyledRadioButton_content"
-              >
-                JSON
-              </div>
-              <div
-                class="mx_StyledRadioButton_spacer"
-              />
-            </label>
-            <span
-              class="mx_ExportDialog_subheading"
-            >
-              Messages
-            </span>
-            <div
-              class="mx_Field mx_Field_select"
-            >
-              <select
-                id="export-type"
-                type="text"
-              >
-                <option
-                  value="Timeline"
-                >
-                  Current Timeline
-                </option>
-                <option
-                  value="Beginning"
-                >
-                  From the beginning
-                </option>
-                <option
-                  value="LastNMessages"
-                >
-                  Specify a number of messages
-                </option>
-              </select>
-              <label
-                for="export-type"
-              />
-            </div>
-            <span
-              class="mx_ExportDialog_subheading"
-            >
-              Size Limit
-            </span>
-            <div
-              class="mx_Field mx_Field_input"
-            >
-              <input
-                autocomplete="off"
-                id="size-limit"
-                type="number"
-                value="8"
-              />
-              <label
-                for="size-limit"
-              />
-              <span
-                class="mx_Field_postfix"
-              >
-                <span>
-                  MB
-                </span>
-              </span>
-            </div>
-            <span
-              class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-            >
-              <input
-                id="include-attachments"
-                type="checkbox"
-              />
-              <label
-                for="include-attachments"
-              >
-                <div
-                  class="mx_Checkbox_background"
-                >
-                  <div
-                    class="mx_Checkbox_checkmark"
-                  />
-                </div>
-                <div>
-                  Include Attachments
-                </div>
-              </label>
-            </span>
-          </div>
-          <div
-            class="mx_Dialog_buttons"
-          >
-            <span
-              class="mx_Dialog_buttons_row"
-            >
-              <button
-                data-testid="dialog-cancel-button"
-                type="button"
-              >
-                Cancel
-              </button>
-              <button
-                class="mx_Dialog_primary"
-                data-testid="dialog-primary-button"
-                type="button"
-              >
-                Export
-              </button>
-            </span>
-          </div>
-        </div>
-      }
-      onActivation={[Function]}
-      onDeactivation={[Function]}
-      persistentFocus={false}
-      returnFocus={[Function]}
-      shards={[]}
-      sideCar={
-        {
-          "assignMedium": [Function],
-          "assignSyncMedium": [Function],
-          "options": {
-            "async": true,
-            "ssr": false,
-          },
-          "read": [Function],
-          "useMedium": [Function],
-        }
-      }
+    </label>
+    <label
+      class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
     >
-      <FocusWatcher
-        autoFocus={true}
-        crossFrame={true}
-        disabled={false}
-        id={{}}
-        observed={
-          <div
-            aria-describedby="mx_Dialog_content"
-            aria-labelledby="mx_BaseDialog_title"
-            class="mx_ExportDialog false mx_Dialog_fixedWidth"
-            data-focus-lock-disabled="false"
-            role="dialog"
-          >
-            <div
-              class="mx_Dialog_header mx_Dialog_headerWithCancel"
-            >
-              <h2
-                class="mx_Heading_h2 mx_Dialog_title"
-                id="mx_BaseDialog_title"
-              >
-                Export Chat
-              </h2>
-              <div
-                aria-label="Close dialog"
-                class="mx_AccessibleButton mx_Dialog_cancelButton"
-                role="button"
-                tabindex="0"
-              />
-            </div>
-            <p>
-              Select from the options below to export chats from your timeline
-            </p>
-            <div
-              class="mx_ExportDialog_options"
-            >
-              <span
-                class="mx_ExportDialog_subheading"
-              >
-                Format
-              </span>
-              <label
-                class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
-              >
-                <input
-                  checked=""
-                  id="exportFormat-Html"
-                  name="exportFormat"
-                  type="radio"
-                  value="Html"
-                />
-                <div>
-                  <div />
-                </div>
-                <div
-                  class="mx_StyledRadioButton_content"
-                >
-                  HTML
-                </div>
-                <div
-                  class="mx_StyledRadioButton_spacer"
-                />
-              </label>
-              <label
-                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-              >
-                <input
-                  id="exportFormat-PlainText"
-                  name="exportFormat"
-                  type="radio"
-                  value="PlainText"
-                />
-                <div>
-                  <div />
-                </div>
-                <div
-                  class="mx_StyledRadioButton_content"
-                >
-                  Plain Text
-                </div>
-                <div
-                  class="mx_StyledRadioButton_spacer"
-                />
-              </label>
-              <label
-                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-              >
-                <input
-                  id="exportFormat-Json"
-                  name="exportFormat"
-                  type="radio"
-                  value="Json"
-                />
-                <div>
-                  <div />
-                </div>
-                <div
-                  class="mx_StyledRadioButton_content"
-                >
-                  JSON
-                </div>
-                <div
-                  class="mx_StyledRadioButton_spacer"
-                />
-              </label>
-              <span
-                class="mx_ExportDialog_subheading"
-              >
-                Messages
-              </span>
-              <div
-                class="mx_Field mx_Field_select"
-              >
-                <select
-                  id="export-type"
-                  type="text"
-                >
-                  <option
-                    value="Timeline"
-                  >
-                    Current Timeline
-                  </option>
-                  <option
-                    value="Beginning"
-                  >
-                    From the beginning
-                  </option>
-                  <option
-                    value="LastNMessages"
-                  >
-                    Specify a number of messages
-                  </option>
-                </select>
-                <label
-                  for="export-type"
-                />
-              </div>
-              <span
-                class="mx_ExportDialog_subheading"
-              >
-                Size Limit
-              </span>
-              <div
-                class="mx_Field mx_Field_input"
-              >
-                <input
-                  autocomplete="off"
-                  id="size-limit"
-                  type="number"
-                  value="8"
-                />
-                <label
-                  for="size-limit"
-                />
-                <span
-                  class="mx_Field_postfix"
-                >
-                  <span>
-                    MB
-                  </span>
-                </span>
-              </div>
-              <span
-                class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-              >
-                <input
-                  id="include-attachments"
-                  type="checkbox"
-                />
-                <label
-                  for="include-attachments"
-                >
-                  <div
-                    class="mx_Checkbox_background"
-                  >
-                    <div
-                      class="mx_Checkbox_checkmark"
-                    />
-                  </div>
-                  <div>
-                    Include Attachments
-                  </div>
-                </label>
-              </span>
-            </div>
-            <div
-              class="mx_Dialog_buttons"
-            >
-              <span
-                class="mx_Dialog_buttons_row"
-              >
-                <button
-                  data-testid="dialog-cancel-button"
-                  type="button"
-                >
-                  Cancel
-                </button>
-                <button
-                  class="mx_Dialog_primary"
-                  data-testid="dialog-primary-button"
-                  type="button"
-                >
-                  Export
-                </button>
-              </span>
-            </div>
-          </div>
-        }
-        onActivation={[Function]}
-        onDeactivation={[Function]}
-        persistentFocus={false}
-        returnFocus={[Function]}
-        shards={[]}
-        sideCar={
-          {
-            "assignMedium": [Function],
-            "assignSyncMedium": [Function],
-            "options": {
-              "async": true,
-              "ssr": false,
-            },
-            "read": [Function],
-            "useMedium": [Function],
-          }
-        }
+      <input
+        id="exportFormat-PlainText"
+        name="exportFormat"
+        type="radio"
+        value="PlainText"
       />
-    </SideEffect(FocusWatcher)>
-    <div
-      aria-describedby="mx_Dialog_content"
-      aria-labelledby="mx_BaseDialog_title"
-      className="mx_ExportDialog false mx_Dialog_fixedWidth"
-      data-focus-lock-disabled={false}
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      role="dialog"
-    >
+      <div>
+        <div />
+      </div>
       <div
-        className="mx_Dialog_header mx_Dialog_headerWithCancel"
+        class="mx_StyledRadioButton_content"
       >
-        <Heading
-          className="mx_Dialog_title"
-          id="mx_BaseDialog_title"
-          size="h2"
-        >
-          <h2
-            className="mx_Heading_h2 mx_Dialog_title"
-            id="mx_BaseDialog_title"
-          >
-            Export Chat
-          </h2>
-        </Heading>
-        <AccessibleButton
-          aria-label="Close dialog"
-          className="mx_Dialog_cancelButton"
-          element="div"
-          onClick={[Function]}
-          role="button"
-          tabIndex={0}
-        >
-          <div
-            aria-label="Close dialog"
-            className="mx_AccessibleButton mx_Dialog_cancelButton"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            role="button"
-            tabIndex={0}
-          />
-        </AccessibleButton>
+        Plain Text
       </div>
-      <p>
-        Select from the options below to export chats from your timeline
-      </p>
       <div
-        className="mx_ExportDialog_options"
-      >
-        <span
-          className="mx_ExportDialog_subheading"
-        >
-          Format
-        </span>
-        <StyledRadioGroup
-          definitions={
-            [
-              {
-                "label": "HTML",
-                "value": "Html",
-              },
-              {
-                "label": "Plain Text",
-                "value": "PlainText",
-              },
-              {
-                "label": "JSON",
-                "value": "Json",
-              },
-            ]
-          }
-          name="exportFormat"
-          onChange={[Function]}
-          value="Html"
-        >
-          <StyledRadioButton
-            checked={true}
-            childrenInLabel={true}
-            className=""
-            id="exportFormat-Html"
-            name="exportFormat"
-            onChange={[Function]}
-            value="Html"
-          >
-            <label
-              className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
-            >
-              <input
-                checked={true}
-                id="exportFormat-Html"
-                name="exportFormat"
-                onChange={[Function]}
-                type="radio"
-                value="Html"
-              />
-              <div>
-                <div />
-              </div>
-              <div
-                className="mx_StyledRadioButton_content"
-              >
-                HTML
-              </div>
-              <div
-                className="mx_StyledRadioButton_spacer"
-              />
-            </label>
-          </StyledRadioButton>
-          <StyledRadioButton
-            checked={false}
-            childrenInLabel={true}
-            className=""
-            id="exportFormat-PlainText"
-            name="exportFormat"
-            onChange={[Function]}
-            value="PlainText"
-          >
-            <label
-              className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-            >
-              <input
-                checked={false}
-                id="exportFormat-PlainText"
-                name="exportFormat"
-                onChange={[Function]}
-                type="radio"
-                value="PlainText"
-              />
-              <div>
-                <div />
-              </div>
-              <div
-                className="mx_StyledRadioButton_content"
-              >
-                Plain Text
-              </div>
-              <div
-                className="mx_StyledRadioButton_spacer"
-              />
-            </label>
-          </StyledRadioButton>
-          <StyledRadioButton
-            checked={false}
-            childrenInLabel={true}
-            className=""
-            id="exportFormat-Json"
-            name="exportFormat"
-            onChange={[Function]}
-            value="Json"
-          >
-            <label
-              className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-            >
-              <input
-                checked={false}
-                id="exportFormat-Json"
-                name="exportFormat"
-                onChange={[Function]}
-                type="radio"
-                value="Json"
-              />
-              <div>
-                <div />
-              </div>
-              <div
-                className="mx_StyledRadioButton_content"
-              >
-                JSON
-              </div>
-              <div
-                className="mx_StyledRadioButton_spacer"
-              />
-            </label>
-          </StyledRadioButton>
-        </StyledRadioGroup>
-        <span
-          className="mx_ExportDialog_subheading"
-        >
-          Messages
-        </span>
-        <Field
-          element="select"
-          id="export-type"
-          onChange={[Function]}
-          type="text"
-          validateOnBlur={true}
-          validateOnChange={true}
-          validateOnFocus={true}
-          value="Timeline"
-        >
-          <div
-            className="mx_Field mx_Field_select"
-          >
-            <select
-              id="export-type"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              type="text"
-              value="Timeline"
-            >
-              <option
-                key="Timeline"
-                value="Timeline"
-              >
-                Current Timeline
-              </option>
-              <option
-                key="Beginning"
-                value="Beginning"
-              >
-                From the beginning
-              </option>
-              <option
-                key="LastNMessages"
-                value="LastNMessages"
-              >
-                Specify a number of messages
-              </option>
-            </select>
-            <label
-              htmlFor="export-type"
-            />
-          </div>
-        </Field>
-        <span
-          className="mx_ExportDialog_subheading"
-        >
-          Size Limit
-        </span>
-        <Field
-          autoComplete="off"
-          element="input"
-          id="size-limit"
-          onChange={[Function]}
-          onValidate={[Function]}
-          postfixComponent={
-            <span>
-              MB
-            </span>
-          }
-          type="number"
-          validateOnBlur={true}
-          validateOnChange={true}
-          validateOnFocus={true}
-          value="8"
-        >
-          <div
-            className="mx_Field mx_Field_input"
-          >
-            <input
-              autoComplete="off"
-              id="size-limit"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              type="number"
-              value="8"
-            />
-            <label
-              htmlFor="size-limit"
-            />
-            <span
-              className="mx_Field_postfix"
-            >
-              <span>
-                MB
-              </span>
-            </span>
-          </div>
-        </Field>
-        <StyledCheckbox
-          checked={false}
-          className="mx_ExportDialog_attachments-checkbox"
-          id="include-attachments"
-          onChange={[Function]}
-        >
-          <span
-            className="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-          >
-            <input
-              checked={false}
-              id="include-attachments"
-              onChange={[Function]}
-              type="checkbox"
-            />
-            <label
-              htmlFor="include-attachments"
-            >
-              <div
-                className="mx_Checkbox_background"
-              >
-                <div
-                  className="mx_Checkbox_checkmark"
-                />
-              </div>
-              <div>
-                Include Attachments
-              </div>
-            </label>
-          </span>
-        </StyledCheckbox>
+        class="mx_StyledRadioButton_spacer"
+      />
+    </label>
+    <label
+      class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+    >
+      <input
+        id="exportFormat-Json"
+        name="exportFormat"
+        type="radio"
+        value="Json"
+      />
+      <div>
+        <div />
       </div>
-      <DialogButtons
-        disabled={false}
-        hasCancel={true}
-        onCancel={[Function]}
-        onPrimaryButtonClick={[Function]}
-        primaryButton="Export"
+      <div
+        class="mx_StyledRadioButton_content"
       >
-        <div
-          className="mx_Dialog_buttons"
-        >
-          <span
-            className="mx_Dialog_buttons_row"
-          >
-            <button
-              data-testid="dialog-cancel-button"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              Cancel
-            </button>
-            <button
-              className="mx_Dialog_primary"
-              data-testid="dialog-primary-button"
-              onClick={[Function]}
-              type="button"
-            >
-              Export
-            </button>
-          </span>
-        </div>
-      </DialogButtons>
-    </div>
-    <div
-      data-focus-guard={true}
-      style={
-        {
-          "height": "0px",
-          "left": "1px",
-          "overflow": "hidden",
-          "padding": 0,
-          "position": "fixed",
-          "top": "1px",
-          "width": "1px",
-        }
-      }
-      tabIndex={0}
-    />
-  </ForwardRef(FocusLockUI)>,
-  <div
-    aria-describedby="mx_Dialog_content"
-    aria-labelledby="mx_BaseDialog_title"
-    className="mx_ExportDialog false mx_Dialog_fixedWidth"
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    role="dialog"
-  >
+        JSON
+      </div>
+      <div
+        class="mx_StyledRadioButton_spacer"
+      />
+    </label>
+    <span
+      class="mx_ExportDialog_subheading"
+    >
+      Messages
+    </span>
     <div
-      className="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Field mx_Field_select"
     >
-      <Heading
-        className="mx_Dialog_title"
-        id="mx_BaseDialog_title"
-        size="h2"
+      <select
+        id="export-type"
+        type="text"
       >
-        <h2
-          className="mx_Heading_h2 mx_Dialog_title"
-          id="mx_BaseDialog_title"
+        <option
+          value="Timeline"
         >
-          Export Chat
-        </h2>
-      </Heading>
-      <AccessibleButton
-        aria-label="Close dialog"
-        className="mx_Dialog_cancelButton"
-        element="div"
-        onClick={[Function]}
-        role="button"
-        tabIndex={0}
-      >
-        <div
-          aria-label="Close dialog"
-          className="mx_AccessibleButton mx_Dialog_cancelButton"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          role="button"
-          tabIndex={0}
-        />
-      </AccessibleButton>
+          Current Timeline
+        </option>
+        <option
+          value="Beginning"
+        >
+          From the beginning
+        </option>
+        <option
+          value="LastNMessages"
+        >
+          Specify a number of messages
+        </option>
+      </select>
+      <label
+        for="export-type"
+      />
     </div>
-    <p>
-      Select from the options below to export chats from your timeline
-    </p>
+    <span
+      class="mx_ExportDialog_subheading"
+    >
+      Size Limit
+    </span>
     <div
-      className="mx_ExportDialog_options"
+      class="mx_Field mx_Field_input"
     >
+      <input
+        autocomplete="off"
+        id="size-limit"
+        type="number"
+        value="8"
+      />
+      <label
+        for="size-limit"
+      />
       <span
-        className="mx_ExportDialog_subheading"
-      >
-        Format
-      </span>
-      <StyledRadioGroup
-        definitions={
-          [
-            {
-              "label": "HTML",
-              "value": "Html",
-            },
-            {
-              "label": "Plain Text",
-              "value": "PlainText",
-            },
-            {
-              "label": "JSON",
-              "value": "Json",
-            },
-          ]
-        }
-        name="exportFormat"
-        onChange={[Function]}
-        value="Html"
-      >
-        <StyledRadioButton
-          checked={true}
-          childrenInLabel={true}
-          className=""
-          id="exportFormat-Html"
-          name="exportFormat"
-          onChange={[Function]}
-          value="Html"
-        >
-          <label
-            className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
-          >
-            <input
-              checked={true}
-              id="exportFormat-Html"
-              name="exportFormat"
-              onChange={[Function]}
-              type="radio"
-              value="Html"
-            />
-            <div>
-              <div />
-            </div>
-            <div
-              className="mx_StyledRadioButton_content"
-            >
-              HTML
-            </div>
-            <div
-              className="mx_StyledRadioButton_spacer"
-            />
-          </label>
-        </StyledRadioButton>
-        <StyledRadioButton
-          checked={false}
-          childrenInLabel={true}
-          className=""
-          id="exportFormat-PlainText"
-          name="exportFormat"
-          onChange={[Function]}
-          value="PlainText"
-        >
-          <label
-            className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-          >
-            <input
-              checked={false}
-              id="exportFormat-PlainText"
-              name="exportFormat"
-              onChange={[Function]}
-              type="radio"
-              value="PlainText"
-            />
-            <div>
-              <div />
-            </div>
-            <div
-              className="mx_StyledRadioButton_content"
-            >
-              Plain Text
-            </div>
-            <div
-              className="mx_StyledRadioButton_spacer"
-            />
-          </label>
-        </StyledRadioButton>
-        <StyledRadioButton
-          checked={false}
-          childrenInLabel={true}
-          className=""
-          id="exportFormat-Json"
-          name="exportFormat"
-          onChange={[Function]}
-          value="Json"
-        >
-          <label
-            className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
-          >
-            <input
-              checked={false}
-              id="exportFormat-Json"
-              name="exportFormat"
-              onChange={[Function]}
-              type="radio"
-              value="Json"
-            />
-            <div>
-              <div />
-            </div>
-            <div
-              className="mx_StyledRadioButton_content"
-            >
-              JSON
-            </div>
-            <div
-              className="mx_StyledRadioButton_spacer"
-            />
-          </label>
-        </StyledRadioButton>
-      </StyledRadioGroup>
-      <span
-        className="mx_ExportDialog_subheading"
+        class="mx_Field_postfix"
       >
-        Messages
+        <span>
+          MB
+        </span>
       </span>
-      <Field
-        element="select"
-        id="export-type"
-        onChange={[Function]}
-        type="text"
-        validateOnBlur={true}
-        validateOnChange={true}
-        validateOnFocus={true}
-        value="Timeline"
+    </div>
+    <span
+      class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+    >
+      <input
+        id="include-attachments"
+        type="checkbox"
+      />
+      <label
+        for="include-attachments"
       >
         <div
-          className="mx_Field mx_Field_select"
+          class="mx_Checkbox_background"
         >
-          <select
-            id="export-type"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            type="text"
-            value="Timeline"
-          >
-            <option
-              key="Timeline"
-              value="Timeline"
-            >
-              Current Timeline
-            </option>
-            <option
-              key="Beginning"
-              value="Beginning"
-            >
-              From the beginning
-            </option>
-            <option
-              key="LastNMessages"
-              value="LastNMessages"
-            >
-              Specify a number of messages
-            </option>
-          </select>
-          <label
-            htmlFor="export-type"
+          <div
+            class="mx_Checkbox_checkmark"
           />
         </div>
-      </Field>
-      <span
-        className="mx_ExportDialog_subheading"
-      >
-        Size Limit
-      </span>
-      <Field
-        autoComplete="off"
-        element="input"
-        id="size-limit"
-        onChange={[Function]}
-        onValidate={[Function]}
-        postfixComponent={
-          <span>
-            MB
-          </span>
-        }
-        type="number"
-        validateOnBlur={true}
-        validateOnChange={true}
-        validateOnFocus={true}
-        value="8"
-      >
-        <div
-          className="mx_Field mx_Field_input"
-        >
-          <input
-            autoComplete="off"
-            id="size-limit"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            type="number"
-            value="8"
-          />
-          <label
-            htmlFor="size-limit"
-          />
-          <span
-            className="mx_Field_postfix"
-          >
-            <span>
-              MB
-            </span>
-          </span>
+        <div>
+          Include Attachments
         </div>
-      </Field>
-      <StyledCheckbox
-        checked={false}
-        className="mx_ExportDialog_attachments-checkbox"
-        id="include-attachments"
-        onChange={[Function]}
-      >
-        <span
-          className="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-        >
-          <input
-            checked={false}
-            id="include-attachments"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <label
-            htmlFor="include-attachments"
-          >
-            <div
-              className="mx_Checkbox_background"
-            >
-              <div
-                className="mx_Checkbox_checkmark"
-              />
-            </div>
-            <div>
-              Include Attachments
-            </div>
-          </label>
-        </span>
-      </StyledCheckbox>
-    </div>
-    <DialogButtons
-      disabled={false}
-      hasCancel={true}
-      onCancel={[Function]}
-      onPrimaryButtonClick={[Function]}
-      primaryButton="Export"
+      </label>
+    </span>
+  </div>
+  <div
+    class="mx_Dialog_buttons"
+  >
+    <span
+      class="mx_Dialog_buttons_row"
     >
-      <div
-        className="mx_Dialog_buttons"
-      >
-        <span
-          className="mx_Dialog_buttons_row"
-        >
-          <button
-            data-testid="dialog-cancel-button"
-            disabled={false}
-            onClick={[Function]}
-            type="button"
-          >
-            Cancel
-          </button>
-          <button
-            className="mx_Dialog_primary"
-            data-testid="dialog-primary-button"
-            onClick={[Function]}
-            type="button"
-          >
-            Export
-          </button>
-        </span>
-      </div>
-    </DialogButtons>
-  </div>,
-]
-`;
-
-exports[`<ExportDialog /> renders success screen when export is finished 1`] = `
-<div
-  className="mx_Dialog_content"
-  id="mx_Dialog_content"
->
-  Your export was successful. Find it in your Downloads folder.
+      <button
+        data-testid="dialog-cancel-button"
+        type="button"
+      >
+        Cancel
+      </button>
+      <button
+        class="mx_Dialog_primary"
+        data-testid="dialog-primary-button"
+        type="button"
+      >
+        Export
+      </button>
+    </span>
+  </div>
 </div>
 `;
+
+exports[`<ExportDialog /> renders success screen when export is finished 1`] = `null`;
diff --git a/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
index 0eb2683003d..3fe34351439 100644
--- a/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
@@ -112,7 +112,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
 </div>
 `;
 
-exports[`<MessageEditHistory /> should support events with  1`] = `
+exports[`<MessageEditHistory /> should support events with 1`] = `
 <div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/dialogs/devtools/__snapshots__/RoomNotifications-test.tsx.snap b/test/components/views/dialogs/devtools/__snapshots__/RoomNotifications-test.tsx.snap
index 79e85f57e9e..843ee88ca5c 100644
--- a/test/components/views/dialogs/devtools/__snapshots__/RoomNotifications-test.tsx.snap
+++ b/test/components/views/dialogs/devtools/__snapshots__/RoomNotifications-test.tsx.snap
@@ -11,20 +11,26 @@ exports[`<RoomNotifications /> should render 1`] = `
       </h2>
       <ul>
         <li>
-          Room unread status: 
-          <strong>
-            None
-          </strong>
+          <span>
+            Room unread status: 
+            <strong>
+              None
+            </strong>
+          </span>
         </li>
         <li>
-          Notification state is 
-          <strong />
+          <span>
+            Notification state is 
+            <strong />
+          </span>
         </li>
         <li>
-          Room is 
-          <strong>
-            not encrypted 🚨
-          </strong>
+          <span>
+            Room is 
+            <strong>
+              not encrypted 🚨
+            </strong>
+          </span>
         </li>
       </ul>
     </section>
diff --git a/test/components/views/dialogs/polls/PollHistoryDialog-test.tsx b/test/components/views/dialogs/polls/PollHistoryDialog-test.tsx
index 062fe2d0d89..7e9d99f261f 100644
--- a/test/components/views/dialogs/polls/PollHistoryDialog-test.tsx
+++ b/test/components/views/dialogs/polls/PollHistoryDialog-test.tsx
@@ -31,6 +31,9 @@ import {
     setupRoomWithPollEvents,
     unmockIntlDateTimeFormat,
 } from "../../../../test-utils";
+import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
+import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
+import { Action } from "../../../../../src/dispatcher/actions";
 
 describe("<PollHistoryDialog />", () => {
     // 14.03.2022 16:15
@@ -57,8 +60,9 @@ describe("<PollHistoryDialog />", () => {
     });
 
     const defaultProps = {
-        roomId,
+        room,
         matrixClient: mockClient,
+        permalinkCreator: new RoomPermalinkCreator(room),
         onFinished: jest.fn(),
     };
     const getComponent = () => render(<PollHistoryDialog {...defaultProps} />);
@@ -70,9 +74,12 @@ describe("<PollHistoryDialog />", () => {
     beforeEach(() => {
         room = new Room(roomId, mockClient, userId);
         mockClient.getRoom.mockReturnValue(room);
+        defaultProps.room = room;
         mockClient.relations.mockResolvedValue({ events: [] });
         const timeline = room.getLiveTimeline();
         jest.spyOn(timeline, "getEvents").mockReturnValue([]);
+        jest.spyOn(defaultDispatcher, "dispatch").mockClear();
+        defaultProps.onFinished.mockClear();
         jest.spyOn(room, "getOrCreateFilteredTimelineSet");
         mockClient.getOrCreateFilter.mockResolvedValue(expectedFilter.filterId!);
         mockClient.paginateEventTimeline.mockReset().mockResolvedValue(false);
@@ -169,12 +176,20 @@ describe("<PollHistoryDialog />", () => {
         expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(1);
     });
 
-    it("displays loader and list while paging timeline", async () => {
+    it("renders a no polls message when there are no active polls in the room", async () => {
+        const { getByText } = getComponent();
+        await flushPromises();
+
+        expect(getByText("There are no active polls in this room")).toBeTruthy();
+    });
+
+    it("renders a no polls message and a load more button when not at end of timeline", async () => {
         const timelineSet = room.getOrCreateFilteredTimelineSet(expectedFilter);
         const liveTimeline = timelineSet.getLiveTimeline();
-        const tenDaysAgoTs = now - 60000 * 60 * 24 * 10;
+        const fourtyDaysAgoTs = now - 60000 * 60 * 24 * 40;
+        const pollStart = makePollStartEvent("Question?", userId, undefined, { ts: fourtyDaysAgoTs, id: "1" });
 
-        jest.spyOn(liveTimeline, "getEvents").mockReset().mockReturnValue([]);
+        jest.spyOn(liveTimeline, "getEvents").mockReset().mockReturnValueOnce([]).mockReturnValueOnce([pollStart]);
 
         // mock three pages of timeline history
         jest.spyOn(liveTimeline, "getPaginationToken")
@@ -182,57 +197,24 @@ describe("<PollHistoryDialog />", () => {
             .mockReturnValueOnce("test-pagination-token-2")
             .mockReturnValueOnce("test-pagination-token-3");
 
-        // reference to pagination resolve, so we can assert between pages
-        let resolvePagination1: (value: boolean) => void | undefined;
-        let resolvePagination2: (value: boolean) => void | undefined;
-        mockClient.paginateEventTimeline
-            .mockImplementationOnce(async (_p) => {
-                const pollStart = makePollStartEvent("Question?", userId, undefined, { ts: now, id: "1" });
-                jest.spyOn(liveTimeline, "getEvents").mockReturnValue([pollStart]);
-                room.processPollEvents([pollStart]);
-                return new Promise((resolve) => (resolvePagination1 = resolve));
-            })
-            .mockImplementationOnce(async (_p) => {
-                const pollStart = makePollStartEvent("Older question?", userId, undefined, {
-                    ts: tenDaysAgoTs,
-                    id: "2",
-                });
-                jest.spyOn(liveTimeline, "getEvents").mockReturnValue([pollStart]);
-                room.processPollEvents([pollStart]);
-                return new Promise((resolve) => (resolvePagination2 = resolve));
-            });
-
-        const { getByText, queryByText } = getComponent();
-
+        const { getByText } = getComponent();
         await flushPromises();
 
         expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(1);
 
-        resolvePagination1!(true);
-        await flushPromises();
-
-        // first page has results, display immediately
-        expect(getByText("Question?")).toBeInTheDocument();
-        // but we are still fetching history, diaply loader
-        expect(getByText("Loading polls")).toBeInTheDocument();
-
-        resolvePagination2!(true);
-        await flushPromises();
+        expect(getByText("There are no active polls. Load more polls to view polls for previous months")).toBeTruthy();
 
-        // additional results addeds
-        expect(getByText("Older question?")).toBeInTheDocument();
-        expect(getByText("Question?")).toBeInTheDocument();
-        // finished paging
-        expect(queryByText("Loading polls")).not.toBeInTheDocument();
+        fireEvent.click(getByText("Load more polls"));
 
-        expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(3);
-    });
+        // paged again
+        expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(2);
+        // load more polls button still in UI, with loader
+        expect(getByText("Load more polls")).toMatchSnapshot();
 
-    it("renders a no polls message when there are no active polls in the room", async () => {
-        const { getByText } = getComponent();
         await flushPromises();
 
-        expect(getByText("There are no active polls in this room")).toBeTruthy();
+        // no more spinner
+        expect(getByText("Load more polls")).toMatchSnapshot();
     });
 
     it("renders a no past polls message when there are no past polls in the room", async () => {
@@ -314,4 +296,140 @@ describe("<PollHistoryDialog />", () => {
         // this poll is ended
         expect(getByText("What?")).toBeInTheDocument();
     });
+
+    describe("Poll detail", () => {
+        const timestamp = 1675300825090;
+        const pollStart1 = makePollStartEvent("Question?", userId, undefined, { ts: timestamp, id: "$1" });
+        const pollStart2 = makePollStartEvent("Where?", userId, undefined, { ts: timestamp + 10000, id: "$2" });
+        const pollStart3 = makePollStartEvent("What?", userId, undefined, { ts: timestamp + 70000, id: "$3" });
+        const pollEnd3 = makePollEndEvent(pollStart3.getId()!, roomId, userId, timestamp + 1, "$4");
+
+        it("displays poll detail on active poll list item click", async () => {
+            await setupRoomWithPollEvents([pollStart1, pollStart2, pollStart3], [], [pollEnd3], mockClient, room);
+
+            const { getByText, queryByText } = getComponent();
+            await flushPromises();
+
+            fireEvent.click(getByText("Question?"));
+
+            expect(queryByText("Polls history")).not.toBeInTheDocument();
+            // elements from MPollBody
+            expect(getByText("Question?")).toMatchSnapshot();
+            expect(getByText("Socks")).toBeInTheDocument();
+            expect(getByText("Shoes")).toBeInTheDocument();
+        });
+
+        it("links to the poll start event from an active poll detail", async () => {
+            await setupRoomWithPollEvents([pollStart1, pollStart2, pollStart3], [], [pollEnd3], mockClient, room);
+
+            const { getByText } = getComponent();
+            await flushPromises();
+
+            fireEvent.click(getByText("Question?"));
+
+            // links to poll start event
+            expect(getByText("View poll in timeline").getAttribute("href")).toBe(
+                `https://matrix.to/#/!room:domain.org/${pollStart1.getId()!}`,
+            );
+        });
+
+        it("navigates in app when clicking view in timeline button", async () => {
+            await setupRoomWithPollEvents([pollStart1, pollStart2, pollStart3], [], [pollEnd3], mockClient, room);
+
+            const { getByText } = getComponent();
+            await flushPromises();
+
+            fireEvent.click(getByText("Question?"));
+
+            const event = new MouseEvent("click", { bubbles: true, cancelable: true });
+            jest.spyOn(event, "preventDefault");
+            fireEvent(getByText("View poll in timeline"), event);
+
+            expect(event.preventDefault).toHaveBeenCalled();
+
+            expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({
+                action: Action.ViewRoom,
+                event_id: pollStart1.getId()!,
+                highlighted: true,
+                metricsTrigger: undefined,
+                room_id: pollStart1.getRoomId()!,
+            });
+
+            // dialog closed
+            expect(defaultProps.onFinished).toHaveBeenCalled();
+        });
+
+        it("doesnt navigate in app when view in timeline link is ctrl + clicked", async () => {
+            await setupRoomWithPollEvents([pollStart1, pollStart2, pollStart3], [], [pollEnd3], mockClient, room);
+
+            const { getByText } = getComponent();
+            await flushPromises();
+
+            fireEvent.click(getByText("Question?"));
+
+            const event = new MouseEvent("click", { bubbles: true, cancelable: true, ctrlKey: true });
+            jest.spyOn(event, "preventDefault");
+            fireEvent(getByText("View poll in timeline"), event);
+
+            expect(event.preventDefault).not.toHaveBeenCalled();
+            expect(defaultDispatcher.dispatch).not.toHaveBeenCalled();
+            expect(defaultProps.onFinished).not.toHaveBeenCalled();
+        });
+
+        it("navigates back to poll list from detail view on header click", async () => {
+            await setupRoomWithPollEvents([pollStart1, pollStart2, pollStart3], [], [pollEnd3], mockClient, room);
+
+            const { getByText, queryByText, getByTestId, container } = getComponent();
+            await flushPromises();
+
+            fireEvent.click(getByText("Question?"));
+
+            // detail view
+            expect(getByText("Question?")).toBeInTheDocument();
+
+            // header not shown
+            expect(queryByText("Polls history")).not.toBeInTheDocument();
+
+            expect(getByText("Active polls")).toMatchSnapshot();
+            fireEvent.click(getByText("Active polls"));
+
+            // main list header displayed again
+            expect(getByText("Polls history")).toBeInTheDocument();
+            // active filter still active
+            expect(getByTestId("filter-tab-PollHistoryDialog_filter-ACTIVE").firstElementChild).toBeChecked();
+            // list displayed
+            expect(container.getElementsByClassName("mx_PollHistoryList_list").length).toBeTruthy();
+        });
+
+        it("displays poll detail on past poll list item click", async () => {
+            await setupRoomWithPollEvents([pollStart1, pollStart2, pollStart3], [], [pollEnd3], mockClient, room);
+
+            const { getByText } = getComponent();
+            await flushPromises();
+
+            fireEvent.click(getByText("Past polls"));
+
+            // pollStart3 is ended
+            fireEvent.click(getByText("What?"));
+
+            expect(getByText("What?")).toMatchSnapshot();
+        });
+
+        it("links to the poll end events from a ended poll detail", async () => {
+            await setupRoomWithPollEvents([pollStart1, pollStart2, pollStart3], [], [pollEnd3], mockClient, room);
+
+            const { getByText } = getComponent();
+            await flushPromises();
+
+            fireEvent.click(getByText("Past polls"));
+
+            // pollStart3 is ended
+            fireEvent.click(getByText("What?"));
+
+            // links to poll end event
+            expect(getByText("View poll in timeline").getAttribute("href")).toBe(
+                `https://matrix.to/#/!room:domain.org/${pollEnd3.getId()!}`,
+            );
+        });
+    });
 });
diff --git a/test/components/views/dialogs/polls/PollListItem-test.tsx b/test/components/views/dialogs/polls/PollListItem-test.tsx
index 5744a31df5d..0abe6db6bd4 100644
--- a/test/components/views/dialogs/polls/PollListItem-test.tsx
+++ b/test/components/views/dialogs/polls/PollListItem-test.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { PollListItem } from "../../../../../src/components/views/dialogs/polls/PollListItem";
@@ -24,7 +24,7 @@ import { makePollStartEvent, mockIntlDateTimeFormat, unmockIntlDateTimeFormat }
 describe("<PollListItem />", () => {
     const event = makePollStartEvent("Question?", "@me:domain.org");
     event.getContent().origin;
-    const defaultProps = { event };
+    const defaultProps = { event, onClick: jest.fn() };
     const getComponent = (props = {}) => render(<PollListItem {...defaultProps} {...props} />);
 
     beforeAll(() => {
@@ -50,4 +50,13 @@ describe("<PollListItem />", () => {
         const { container } = getComponent({ event });
         expect(container.firstElementChild).toBeFalsy();
     });
+
+    it("calls onClick handler on click", () => {
+        const onClick = jest.fn();
+        const { getByText } = getComponent({ onClick });
+
+        fireEvent.click(getByText("Question?"));
+
+        expect(onClick).toHaveBeenCalled();
+    });
 });
diff --git a/test/components/views/dialogs/polls/PollListItemEnded-test.tsx b/test/components/views/dialogs/polls/PollListItemEnded-test.tsx
index c58de7c5209..b14982d2cdd 100644
--- a/test/components/views/dialogs/polls/PollListItemEnded-test.tsx
+++ b/test/components/views/dialogs/polls/PollListItemEnded-test.tsx
@@ -60,7 +60,8 @@ describe("<PollListItemEnded />", () => {
     });
     const pollEndEvent = makePollEndEvent(pollId, roomId, userId, timestamp + 60000);
 
-    const getComponent = (props: { event: MatrixEvent; poll: Poll }) => render(<PollListItemEnded {...props} />);
+    const getComponent = (props: { event: MatrixEvent; poll: Poll }) =>
+        render(<PollListItemEnded {...props} onClick={jest.fn()} />);
 
     beforeAll(() => {
         // mock default locale to en-GB and set timezone
diff --git a/test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap b/test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap
index aae4cbc1961..a9c8d7f3e1d 100644
--- a/test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap
+++ b/test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap
@@ -1,5 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<PollHistoryDialog /> Poll detail displays poll detail on active poll list item click 1`] = `
+<h2
+  data-testid="pollQuestion"
+>
+  Question?
+</h2>
+`;
+
+exports[`<PollHistoryDialog /> Poll detail displays poll detail on past poll list item click 1`] = `
+<h2
+  data-testid="pollQuestion"
+>
+  What?
+</h2>
+`;
+
+exports[`<PollHistoryDialog /> Poll detail navigates back to poll list from detail view on header click 1`] = `
+<div
+  class="mx_AccessibleButton mx_PollDetailHeader mx_AccessibleButton_hasKind mx_AccessibleButton_kind_content_inline"
+  role="button"
+  tabindex="0"
+>
+  <div
+    class="mx_PollDetailHeader_icon"
+  />
+  Active polls
+</div>
+`;
+
 exports[`<PollHistoryDialog /> renders a list of active polls when there are polls in the room 1`] = `
 <div>
   <div
@@ -71,33 +100,49 @@ exports[`<PollHistoryDialog /> renders a list of active polls when there are pol
             class="mx_PollListItem"
             data-testid="pollListItem-$2"
           >
-            <span>
-              02/02/23
-            </span>
             <div
-              class="mx_PollListItem_icon"
-            />
-            <span
-              class="mx_PollListItem_question"
+              tabindex="0"
             >
-              Where?
-            </span>
+              <div
+                class="mx_PollListItem_content"
+              >
+                <span>
+                  02/02/23
+                </span>
+                <div
+                  class="mx_PollListItem_icon"
+                />
+                <span
+                  class="mx_PollListItem_question"
+                >
+                  Where?
+                </span>
+              </div>
+            </div>
           </li>
           <li
             class="mx_PollListItem"
             data-testid="pollListItem-$1"
           >
-            <span>
-              02/02/23
-            </span>
             <div
-              class="mx_PollListItem_icon"
-            />
-            <span
-              class="mx_PollListItem_question"
+              tabindex="0"
             >
-              Question?
-            </span>
+              <div
+                class="mx_PollListItem_content"
+              >
+                <span>
+                  02/02/23
+                </span>
+                <div
+                  class="mx_PollListItem_icon"
+                />
+                <span
+                  class="mx_PollListItem_question"
+                >
+                  Question?
+                </span>
+              </div>
+            </div>
           </li>
         </ol>
       </div>
@@ -110,3 +155,32 @@ exports[`<PollHistoryDialog /> renders a list of active polls when there are pol
   />
 </div>
 `;
+
+exports[`<PollHistoryDialog /> renders a no polls message and a load more button when not at end of timeline 1`] = `
+<div
+  class="mx_AccessibleButton mx_PollHistoryList_loadMorePolls mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+  role="button"
+  tabindex="0"
+>
+  Load more polls
+  <div
+    class="mx_InlineSpinner"
+  >
+    <div
+      aria-label="Loading…"
+      class="mx_InlineSpinner_icon mx_Spinner_icon"
+      style="width: 16px; height: 16px;"
+    />
+  </div>
+</div>
+`;
+
+exports[`<PollHistoryDialog /> renders a no polls message and a load more button when not at end of timeline 2`] = `
+<div
+  class="mx_AccessibleButton mx_PollHistoryList_loadMorePolls mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+  role="button"
+  tabindex="0"
+>
+  Load more polls
+</div>
+`;
diff --git a/test/components/views/dialogs/polls/__snapshots__/PollListItem-test.tsx.snap b/test/components/views/dialogs/polls/__snapshots__/PollListItem-test.tsx.snap
index 00ae9fbd06b..c6ebc5afc98 100644
--- a/test/components/views/dialogs/polls/__snapshots__/PollListItem-test.tsx.snap
+++ b/test/components/views/dialogs/polls/__snapshots__/PollListItem-test.tsx.snap
@@ -6,17 +6,25 @@ exports[`<PollListItem /> renders a poll 1`] = `
     class="mx_PollListItem"
     data-testid="pollListItem-$mypoll"
   >
-    <span>
-      01/01/70
-    </span>
     <div
-      class="mx_PollListItem_icon"
-    />
-    <span
-      class="mx_PollListItem_question"
+      tabindex="0"
     >
-      Question?
-    </span>
+      <div
+        class="mx_PollListItem_content"
+      >
+        <span>
+          01/01/70
+        </span>
+        <div
+          class="mx_PollListItem_icon"
+        />
+        <span
+          class="mx_PollListItem_question"
+        >
+          Question?
+        </span>
+      </div>
+    </div>
   </li>
 </div>
 `;
diff --git a/test/components/views/dialogs/polls/__snapshots__/PollListItemEnded-test.tsx.snap b/test/components/views/dialogs/polls/__snapshots__/PollListItemEnded-test.tsx.snap
index d40f067faa1..eecd3e115df 100644
--- a/test/components/views/dialogs/polls/__snapshots__/PollListItemEnded-test.tsx.snap
+++ b/test/components/views/dialogs/polls/__snapshots__/PollListItemEnded-test.tsx.snap
@@ -7,30 +7,38 @@ exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
     data-testid="pollListItem-1"
   >
     <div
-      class="mx_PollListItemEnded_title"
+      tabindex="0"
     >
       <div
-        class="mx_PollListItemEnded_icon"
-      />
-      <span
-        class="mx_PollListItemEnded_question"
+        class="mx_PollListItemEnded_content"
       >
-        Question?
-      </span>
-      <span
-        class="mx_Caption"
-      >
-        02/02/23
-      </span>
-    </div>
-    <div
-      class="mx_PollListItemEnded_voteCount"
-    >
-      <span
-        class="mx_Caption"
-      >
-        Final result based on 0 votes
-      </span>
+        <div
+          class="mx_PollListItemEnded_title"
+        >
+          <div
+            class="mx_PollListItemEnded_icon"
+          />
+          <span
+            class="mx_PollListItemEnded_question"
+          >
+            Question?
+          </span>
+          <span
+            class="mx_Caption"
+          >
+            02/02/23
+          </span>
+        </div>
+        <div
+          class="mx_PollListItemEnded_voteCount"
+        >
+          <span
+            class="mx_Caption"
+          >
+            Final result based on 0 votes
+          </span>
+        </div>
+      </div>
     </div>
   </li>
 </div>
diff --git a/test/components/views/elements/AppTile-test.tsx b/test/components/views/elements/AppTile-test.tsx
index 5aaead98fa2..99843d76e6e 100644
--- a/test/components/views/elements/AppTile-test.tsx
+++ b/test/components/views/elements/AppTile-test.tsx
@@ -23,6 +23,11 @@ import { act, render, RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { SpiedFunction } from "jest-mock";
+import {
+    ApprovalOpts,
+    WidgetInfo,
+    WidgetLifecycle,
+} from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
 
 import RightPanel from "../../../../src/components/structures/RightPanel";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@@ -44,6 +49,7 @@ import AppsDrawer from "../../../../src/components/views/rooms/AppsDrawer";
 import { ElementWidgetCapabilities } from "../../../../src/stores/widgets/ElementWidgetCapabilities";
 import { ElementWidget } from "../../../../src/stores/widgets/StopGapWidget";
 import { WidgetMessagingStore } from "../../../../src/stores/widgets/WidgetMessagingStore";
+import { ModuleRunner } from "../../../../src/modules/ModuleRunner";
 
 describe("AppTile", () => {
     let cli: MatrixClient;
@@ -380,4 +386,21 @@ describe("AppTile", () => {
             });
         });
     });
+
+    it("for a pinned widget permission load", () => {
+        jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts, widgetInfo) => {
+            if (lifecycleEvent === WidgetLifecycle.PreLoadRequest && (widgetInfo as WidgetInfo).id === app1.id) {
+                (opts as ApprovalOpts).approved = true;
+            }
+        });
+
+        // userId and creatorUserId are different
+        const renderResult = render(
+            <MatrixClientContext.Provider value={cli}>
+                <AppTile key={app1.id} app={app1} room={r1} userId="@user1" creatorUserId="@userAnother" />
+            </MatrixClientContext.Provider>,
+        );
+
+        expect(renderResult.queryByRole("button", { name: "Continue" })).not.toBeInTheDocument();
+    });
 });
diff --git a/test/components/views/elements/EventListSummary-test.tsx b/test/components/views/elements/EventListSummary-test.tsx
index 4ecb963ee00..3fcec7d6d81 100644
--- a/test/components/views/elements/EventListSummary-test.tsx
+++ b/test/components/views/elements/EventListSummary-test.tsx
@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React, { ComponentProps } from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import { render, RenderResult } from "@testing-library/react";
 import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
 
 import {
@@ -124,8 +123,8 @@ describe("EventListSummary", function () {
         events: [],
         children: [],
     };
-    const renderComponent = (props = {}): ReactWrapper => {
-        return mount(
+    const renderComponent = (props = {}): RenderResult => {
+        return render(
             <MatrixClientContext.Provider value={mockClient}>
                 <EventListSummary {...defaultProps} {...props} />
             </MatrixClientContext.Provider>,
@@ -150,16 +149,14 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props); // matrix cli context wrapper
+        const { container } = renderComponent(props); // matrix cli context wrapper
 
-        expect(wrapper.find("GenericEventListSummary").props().children).toEqual([
-            <div className="event_tile" key="event0">
-                Expanded membership
-            </div>,
-        ]);
+        const children = container.querySelector(".mx_GenericEventListSummary_unstyledList")!.children;
+        expect(children).toHaveLength(1);
+        expect(children[0]).toHaveTextContent("Expanded membership");
     });
 
-    it("renders expanded events if there are less than props.threshold", function () {
+    it("renders expanded events if there are less than props.threshold for join and leave", function () {
         const events = generateEvents([
             { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
             { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
@@ -172,16 +169,12 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props); // matrix cli context wrapper
+        const { container } = renderComponent(props); // matrix cli context wrapper
 
-        expect(wrapper.find("GenericEventListSummary").props().children).toEqual([
-            <div className="event_tile" key="event0">
-                Expanded membership
-            </div>,
-            <div className="event_tile" key="event1">
-                Expanded membership
-            </div>,
-        ]);
+        const children = container.querySelector(".mx_GenericEventListSummary_unstyledList")!.children;
+        expect(children).toHaveLength(2);
+        expect(children[0]).toHaveTextContent("Expanded membership");
+        expect(children[1]).toHaveTextContent("Expanded membership");
     });
 
     it("renders collapsed events if events.length = props.threshold", function () {
@@ -198,11 +191,9 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe("user_1 joined and left and joined");
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent("user_1 joined and left and joined");
     });
 
     it("truncates long join,leave repetitions", function () {
@@ -230,11 +221,9 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe("user_1 joined and left 7 times");
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent("user_1 joined and left 7 times");
     });
 
     it("truncates long join,leave repetitions between other events", function () {
@@ -274,11 +263,9 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe("user_1 was unbanned, joined and left 7 times and was invited");
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent("user_1 was unbanned, joined and left 7 times and was invited");
     });
 
     it("truncates multiple sequences of repetitions with other events between", function () {
@@ -320,11 +307,9 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe(
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent(
             "user_1 was unbanned, joined and left 2 times, was banned, " + "joined and left 3 times and was invited",
         );
     });
@@ -374,11 +359,11 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe("user_1 and one other were unbanned, joined and left 2 times and were banned");
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent(
+            "user_1 and one other were unbanned, joined and left 2 times and were banned",
+        );
     });
 
     it("handles many users following the same sequence of memberships", function () {
@@ -406,11 +391,11 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe("user_0 and 19 others were unbanned, joined and left 2 times and were banned");
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent(
+            "user_0 and 19 others were unbanned, joined and left 2 times and were banned",
+        );
     });
 
     it("correctly orders sequences of transitions by the order of their first event", function () {
@@ -450,11 +435,9 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe(
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent(
             "user_2 was unbanned and joined and left 2 times, user_1 was unbanned, " +
                 "joined and left 2 times and was banned",
         );
@@ -520,11 +503,9 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe(
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent(
             "user_1 was invited, was banned, joined, rejected their invitation, left, " +
                 "had their invitation withdrawn, was unbanned, was removed, left and was removed",
         );
@@ -563,12 +544,10 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe(
-            "user_1 and one other rejected their invitations and " + "had their invitations withdrawn",
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent(
+            "user_1 and one other rejected their invitations and had their invitations withdrawn",
         );
     });
 
@@ -593,11 +572,9 @@ describe("EventListSummary", function () {
             threshold: 1, // threshold = 1 to force collapse
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe("user_1 rejected their invitation 2 times");
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent("user_1 rejected their invitation 2 times");
     });
 
     it('handles a summary length = 2, with no "others"', function () {
@@ -615,11 +592,9 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe("user_1 and user_2 joined 2 times");
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent("user_1 and user_2 joined 2 times");
     });
 
     it('handles a summary length = 2, with 1 "other"', function () {
@@ -636,11 +611,9 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe("user_1, user_2 and one other joined");
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent("user_1, user_2 and one other joined");
     });
 
     it('handles a summary length = 2, with many "others"', function () {
@@ -653,11 +626,9 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe("user_0, user_1 and 18 others joined");
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent("user_0, user_1 and 18 others joined");
     });
 
     it("should not blindly group 3pid invites and treat them as distinct users instead", () => {
@@ -705,10 +676,8 @@ describe("EventListSummary", function () {
             threshold: 3,
         };
 
-        const wrapper = renderComponent(props);
-        const summary = wrapper.find(".mx_GenericEventListSummary_summary");
-        const summaryText = summary.text();
-
-        expect(summaryText).toBe("n...@d... was invited 2 times, d...@w... was invited");
+        const { container } = renderComponent(props);
+        const summary = container.querySelector(".mx_GenericEventListSummary_summary");
+        expect(summary).toHaveTextContent("n...@d... was invited 2 times, d...@w... was invited");
     });
 });
diff --git a/test/components/views/elements/PollCreateDialog-test.tsx b/test/components/views/elements/PollCreateDialog-test.tsx
index 2a0087b3552..551aae01aac 100644
--- a/test/components/views/elements/PollCreateDialog-test.tsx
+++ b/test/components/views/elements/PollCreateDialog-test.tsx
@@ -15,15 +15,14 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import { fireEvent, render, RenderResult } from "@testing-library/react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { M_POLL_KIND_DISCLOSED, M_POLL_KIND_UNDISCLOSED, M_POLL_START } from "matrix-js-sdk/src/@types/polls";
 import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { M_TEXT } from "matrix-js-sdk/src/@types/extensible_events";
 
-import { findById, getMockClientWithEventEmitter } from "../../../test-utils";
+import { getMockClientWithEventEmitter } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import PollCreateDialog from "../../../../src/components/views/elements/PollCreateDialog";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
@@ -51,40 +50,41 @@ describe("PollCreateDialog", () => {
     });
 
     it("renders a blank poll", () => {
-        const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />, {
-            wrappingComponent: MatrixClientContext.Provider,
-            wrappingComponentProps: { value: mockClient },
-        });
-        expect(dialog.html()).toMatchSnapshot();
+        const dialog = render(
+            <MatrixClientContext.Provider value={mockClient}>
+                <PollCreateDialog room={createRoom()} onFinished={jest.fn()} />
+            </MatrixClientContext.Provider>,
+        );
+        expect(dialog.asFragment()).toMatchSnapshot();
     });
 
     it("autofocuses the poll topic on mount", () => {
-        const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
-        expect(findById(dialog, "poll-topic-input").at(0).props().autoFocus).toEqual(true);
+        const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
+        expect(dialog.container.querySelector("#poll-topic-input")).toHaveFocus();
     });
 
     it("autofocuses the new poll option field after clicking add option button", () => {
-        const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
-        expect(findById(dialog, "poll-topic-input").at(0).props().autoFocus).toEqual(true);
+        const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
+        expect(dialog.container.querySelector("#poll-topic-input")).toHaveFocus();
 
-        dialog.find("div.mx_PollCreateDialog_addOption").simulate("click");
+        fireEvent.click(dialog.container.querySelector("div.mx_PollCreateDialog_addOption")!);
 
-        expect(findById(dialog, "poll-topic-input").at(0).props().autoFocus).toEqual(false);
-        expect(findById(dialog, "pollcreate_option_1").at(0).props().autoFocus).toEqual(false);
-        expect(findById(dialog, "pollcreate_option_2").at(0).props().autoFocus).toEqual(true);
+        expect(dialog.container.querySelector("#poll-topic-input")).not.toHaveFocus();
+        expect(dialog.container.querySelector("#pollcreate_option_1")).not.toHaveFocus();
+        expect(dialog.container.querySelector("#pollcreate_option_2")).toHaveFocus();
     });
 
     it("renders a question and some options", () => {
-        const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
-        expect(submitIsDisabled(dialog)).toBe(true);
+        const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
+        expectSubmitToBeDisabled(dialog, true);
 
         // When I set some values in the boxes
         changeValue(dialog, "Question or topic", "How many turnips is the optimal number?");
         changeValue(dialog, "Option 1", "As many as my neighbour");
         changeValue(dialog, "Option 2", "The question is meaningless");
-        dialog.find("div.mx_PollCreateDialog_addOption").simulate("click");
+        fireEvent.click(dialog.container.querySelector("div.mx_PollCreateDialog_addOption")!);
         changeValue(dialog, "Option 3", "Mu");
-        expect(dialog.html()).toMatchSnapshot();
+        expect(dialog.asFragment()).toMatchSnapshot();
     });
 
     it("renders info from a previous event", () => {
@@ -92,23 +92,23 @@ describe("PollCreateDialog", () => {
             PollStartEvent.from("Poll Q", ["Answer 1", "Answer 2"], M_POLL_KIND_DISCLOSED).serialize(),
         );
 
-        const dialog = mount(
+        const dialog = render(
             <PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
         );
 
-        expect(submitIsDisabled(dialog)).toBe(false);
-        expect(dialog.html()).toMatchSnapshot();
+        expectSubmitToBeDisabled(dialog, false);
+        expect(dialog.asFragment()).toMatchSnapshot();
     });
 
     it("doesn't allow submitting until there are options", () => {
-        const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
-        expect(submitIsDisabled(dialog)).toBe(true);
+        const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
+        expectSubmitToBeDisabled(dialog, true);
     });
 
     it("does allow submitting when there are options and a question", () => {
         // Given a dialog with no info in (which I am unable to submit)
-        const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
-        expect(submitIsDisabled(dialog)).toBe(true);
+        const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
+        expectSubmitToBeDisabled(dialog, true);
 
         // When I set some values in the boxes
         changeValue(dialog, "Question or topic", "Q");
@@ -116,28 +116,30 @@ describe("PollCreateDialog", () => {
         changeValue(dialog, "Option 2", "A2");
 
         // Then I am able to submit
-        expect(submitIsDisabled(dialog)).toBe(false);
+        expectSubmitToBeDisabled(dialog, false);
     });
 
     it("shows the open poll description at first", () => {
-        const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
-        expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_DISCLOSED.name);
-        expect(dialog.find("p").text()).toEqual("Voters see results as soon as they have voted");
+        const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
+        expect(dialog.container.querySelector("select")).toHaveValue(M_POLL_KIND_DISCLOSED.name);
+        expect(dialog.container.querySelector("p")).toHaveTextContent("Voters see results as soon as they have voted");
     });
 
     it("shows the closed poll description if we choose it", () => {
-        const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
+        const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
         changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name);
-        expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_UNDISCLOSED.name);
-        expect(dialog.find("p").text()).toEqual("Results are only revealed when you end the poll");
+        expect(dialog.container.querySelector("select")).toHaveValue(M_POLL_KIND_UNDISCLOSED.name);
+        expect(dialog.container.querySelector("p")).toHaveTextContent(
+            "Results are only revealed when you end the poll",
+        );
     });
 
     it("shows the open poll description if we choose it", () => {
-        const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
+        const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
         changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name);
         changeKind(dialog, M_POLL_KIND_DISCLOSED.name);
-        expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_DISCLOSED.name);
-        expect(dialog.find("p").text()).toEqual("Voters see results as soon as they have voted");
+        expect(dialog.container.querySelector("select")).toHaveValue(M_POLL_KIND_DISCLOSED.name);
+        expect(dialog.container.querySelector("p")).toHaveTextContent("Voters see results as soon as they have voted");
     });
 
     it("shows the closed poll description when editing a closed poll", () => {
@@ -146,32 +148,34 @@ describe("PollCreateDialog", () => {
         );
         previousEvent.event.event_id = "$prevEventId";
 
-        const dialog = mount(
+        const dialog = render(
             <PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
         );
 
-        expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_UNDISCLOSED.name);
-        expect(dialog.find("p").text()).toEqual("Results are only revealed when you end the poll");
+        expect(dialog.container.querySelector("select")).toHaveValue(M_POLL_KIND_UNDISCLOSED.name);
+        expect(dialog.container.querySelector("p")).toHaveTextContent(
+            "Results are only revealed when you end the poll",
+        );
     });
 
     it("displays a spinner after submitting", () => {
-        const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
+        const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
         changeValue(dialog, "Question or topic", "Q");
         changeValue(dialog, "Option 1", "A1");
         changeValue(dialog, "Option 2", "A2");
-        expect(dialog.find("Spinner").length).toBe(0);
+        expect(dialog.container.querySelector(".mx_Spinner")).toBeFalsy();
 
-        dialog.find("button").simulate("click");
-        expect(dialog.find("Spinner").length).toBe(1);
+        fireEvent.click(dialog.container.querySelector("button")!);
+        expect(dialog.container.querySelector(".mx_Spinner")).toBeDefined();
     });
 
     it("sends a poll create event when submitted", () => {
-        const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
+        const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
         changeValue(dialog, "Question or topic", "Q");
         changeValue(dialog, "Option 1", "A1");
         changeValue(dialog, "Option 2", "A2");
 
-        dialog.find("button").simulate("click");
+        fireEvent.click(dialog.container.querySelector("button")!);
         const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
         expect(M_POLL_START.matches(eventType)).toBeTruthy();
         expect(sentEventContent).toEqual({
@@ -206,14 +210,14 @@ describe("PollCreateDialog", () => {
         );
         previousEvent.event.event_id = "$prevEventId";
 
-        const dialog = mount(
+        const dialog = render(
             <PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
         );
 
         changeValue(dialog, "Question or topic", "Poll Q updated");
         changeValue(dialog, "Option 2", "Answer 2 updated");
         changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name);
-        dialog.find("button").simulate("click");
+        fireEvent.click(dialog.container.querySelector("button")!);
 
         const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
         expect(M_POLL_START.matches(eventType)).toBeTruthy();
@@ -255,12 +259,12 @@ describe("PollCreateDialog", () => {
         );
         previousEvent.event.event_id = "$prevEventId";
 
-        const dialog = mount(
+        const dialog = render(
             <PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
         );
 
         changeValue(dialog, "Question or topic", "Poll Q updated");
-        dialog.find("button").simulate("click");
+        fireEvent.click(dialog.container.querySelector("button")!);
 
         const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
         expect(M_POLL_START.matches(eventType)).toBeTruthy();
@@ -273,14 +277,20 @@ function createRoom(): Room {
     return new Room("roomid", MatrixClientPeg.get(), "@name:example.com", {});
 }
 
-function changeValue(wrapper: ReactWrapper, labelText: string, value: string) {
-    wrapper.find(`input[label="${labelText}"]`).simulate("change", { target: { value: value } });
+function changeValue(wrapper: RenderResult, labelText: string, value: string) {
+    fireEvent.change(wrapper.container.querySelector(`input[label="${labelText}"]`)!, {
+        target: { value: value },
+    });
 }
 
-function changeKind(wrapper: ReactWrapper, value: string) {
-    wrapper.find("select").simulate("change", { target: { value: value } });
+function changeKind(wrapper: RenderResult, value: string) {
+    fireEvent.change(wrapper.container.querySelector("select")!, { target: { value: value } });
 }
 
-function submitIsDisabled(wrapper: ReactWrapper) {
-    return wrapper.find('button[type="submit"]').prop("aria-disabled") === true;
+function expectSubmitToBeDisabled(wrapper: RenderResult, disabled: boolean) {
+    if (disabled) {
+        expect(wrapper.container.querySelector('button[type="submit"]')).toHaveAttribute("aria-disabled", "true");
+    } else {
+        expect(wrapper.container.querySelector('button[type="submit"]')).not.toHaveAttribute("aria-disabled", "true");
+    }
 }
diff --git a/test/components/views/elements/ReplyChain-test.tsx b/test/components/views/elements/ReplyChain-test.tsx
index 0bfafddbc91..30fa45b7626 100644
--- a/test/components/views/elements/ReplyChain-test.tsx
+++ b/test/components/views/elements/ReplyChain-test.tsx
@@ -85,141 +85,5 @@ describe("ReplyChain", () => {
                 "$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og",
             );
         });
-
-        it("retrieves relation reply from edit event when provided", () => {
-            const originalEvent = testUtils.mkEvent({
-                event: true,
-                type: "m.room.message",
-                content: {
-                    msgtype: "m.text",
-                    body: "foo",
-                },
-                user: "some_other_user",
-                room: "room_id",
-            });
-
-            const editEvent = testUtils.mkEvent({
-                event: true,
-                type: "m.room.message",
-                content: {
-                    "msgtype": "m.text",
-                    "body": "> Reply to this message\n\n * foo bar",
-                    "m.new_content": {
-                        "msgtype": "m.text",
-                        "body": "foo bar",
-                        "m.relates_to": {
-                            "m.in_reply_to": {
-                                event_id: "$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og",
-                            },
-                        },
-                    },
-                    "m.relates_to": {
-                        rel_type: "m.replace",
-                        event_id: originalEvent.getId(),
-                    },
-                },
-                user: "some_other_user",
-                room: "room_id",
-            });
-
-            // The edit replaces the original event
-            originalEvent.makeReplaced(editEvent);
-
-            // The relation should be pulled from the edit event
-            expect(getParentEventId(originalEvent)).toStrictEqual("$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og");
-        });
-
-        it("prefers relation reply from edit event over original event", () => {
-            const originalEventWithRelation = testUtils.mkEvent({
-                event: true,
-                type: "m.room.message",
-                content: {
-                    "msgtype": "m.text",
-                    "body": "> Reply to this message\n\n foo",
-                    "m.relates_to": {
-                        "m.in_reply_to": {
-                            event_id: "$111",
-                        },
-                    },
-                },
-                user: "some_other_user",
-                room: "room_id",
-            });
-
-            const editEvent = testUtils.mkEvent({
-                event: true,
-                type: "m.room.message",
-                content: {
-                    "msgtype": "m.text",
-                    "body": "> Reply to this message\n\n * foo bar",
-                    "m.new_content": {
-                        "msgtype": "m.text",
-                        "body": "foo bar",
-                        "m.relates_to": {
-                            "m.in_reply_to": {
-                                event_id: "$999",
-                            },
-                        },
-                    },
-                    "m.relates_to": {
-                        rel_type: "m.replace",
-                        event_id: originalEventWithRelation.getId(),
-                    },
-                },
-                user: "some_other_user",
-                room: "room_id",
-            });
-
-            // The edit replaces the original event
-            originalEventWithRelation.makeReplaced(editEvent);
-
-            // The relation should be pulled from the edit event
-            expect(getParentEventId(originalEventWithRelation)).toStrictEqual("$999");
-        });
-
-        it("able to clear relation reply from original event by providing empty relation field", () => {
-            const originalEventWithRelation = testUtils.mkEvent({
-                event: true,
-                type: "m.room.message",
-                content: {
-                    "msgtype": "m.text",
-                    "body": "> Reply to this message\n\n foo",
-                    "m.relates_to": {
-                        "m.in_reply_to": {
-                            event_id: "$111",
-                        },
-                    },
-                },
-                user: "some_other_user",
-                room: "room_id",
-            });
-
-            const editEvent = testUtils.mkEvent({
-                event: true,
-                type: "m.room.message",
-                content: {
-                    "msgtype": "m.text",
-                    "body": "> Reply to this message\n\n * foo bar",
-                    "m.new_content": {
-                        "msgtype": "m.text",
-                        "body": "foo bar",
-                        // Clear the relation from the original event
-                        "m.relates_to": {},
-                    },
-                    "m.relates_to": {
-                        rel_type: "m.replace",
-                        event_id: originalEventWithRelation.getId(),
-                    },
-                },
-                user: "some_other_user",
-                room: "room_id",
-            });
-
-            // The edit replaces the original event
-            originalEventWithRelation.makeReplaced(editEvent);
-
-            // The relation should be pulled from the edit event
-            expect(getParentEventId(originalEventWithRelation)).toStrictEqual(undefined);
-        });
     });
 });
diff --git a/test/components/views/elements/TooltipTarget-test.tsx b/test/components/views/elements/TooltipTarget-test.tsx
index c6fa4d47a05..0823229a904 100644
--- a/test/components/views/elements/TooltipTarget-test.tsx
+++ b/test/components/views/elements/TooltipTarget-test.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { act, renderIntoDocument, Simulate } from "react-dom/test-utils";
+import { fireEvent, render } from "@testing-library/react";
 
 import { Alignment } from "../../../../src/components/views/elements/Tooltip";
 import TooltipTarget from "../../../../src/components/views/elements/TooltipTarget";
@@ -28,27 +28,19 @@ describe("<TooltipTarget />", () => {
         "label": "test label",
         "alignment": Alignment.Left,
         "id": "test id",
-        "data-test-id": "test",
+        "data-testid": "test",
     };
 
-    afterEach(() => {
-        // clean up renderer tooltips
-        const wrapper = document.querySelector(".mx_Tooltip_wrapper");
-        while (wrapper?.firstChild) {
-            wrapper.removeChild(wrapper.lastChild!);
-        }
-    });
-
     const getComponent = (props = {}) => {
-        const wrapper = renderIntoDocument<HTMLSpanElement>(
+        const wrapper = render(
             // wrap in element so renderIntoDocument can render functional component
             <span>
                 <TooltipTarget {...defaultProps} {...props}>
                     <span>child</span>
                 </TooltipTarget>
             </span>,
-        ) as HTMLSpanElement;
-        return wrapper.querySelector("[data-test-id=test]");
+        );
+        return wrapper.getByTestId("test");
     };
 
     const getVisibleTooltip = () => document.querySelector(".mx_Tooltip.mx_Tooltip_visible");
@@ -62,41 +54,29 @@ describe("<TooltipTarget />", () => {
     const alignmentKeys = Object.keys(Alignment).filter((o: any) => isNaN(o));
     it.each(alignmentKeys)("displays %s aligned tooltip on mouseover", async (alignment: any) => {
         const wrapper = getComponent({ alignment: Alignment[alignment] })!;
-        act(() => {
-            Simulate.mouseOver(wrapper);
-        });
+        fireEvent.mouseOver(wrapper);
         expect(getVisibleTooltip()).toMatchSnapshot();
     });
 
     it("hides tooltip on mouseleave", () => {
         const wrapper = getComponent()!;
-        act(() => {
-            Simulate.mouseOver(wrapper);
-        });
+        fireEvent.mouseOver(wrapper);
         expect(getVisibleTooltip()).toBeTruthy();
-        act(() => {
-            Simulate.mouseLeave(wrapper);
-        });
+        fireEvent.mouseLeave(wrapper);
         expect(getVisibleTooltip()).toBeFalsy();
     });
 
     it("displays tooltip on focus", () => {
         const wrapper = getComponent()!;
-        act(() => {
-            Simulate.focus(wrapper);
-        });
+        fireEvent.focus(wrapper);
         expect(getVisibleTooltip()).toBeTruthy();
     });
 
     it("hides tooltip on blur", async () => {
         const wrapper = getComponent()!;
-        act(() => {
-            Simulate.focus(wrapper);
-        });
+        fireEvent.focus(wrapper);
         expect(getVisibleTooltip()).toBeTruthy();
-        act(() => {
-            Simulate.blur(wrapper);
-        });
+        fireEvent.blur(wrapper);
         expect(getVisibleTooltip()).toBeFalsy();
     });
 });
diff --git a/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap b/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap
index 6fdf8bfb29a..ef2306ccdca 100644
--- a/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap
@@ -1,7 +1,560 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PollCreateDialog renders a blank poll 1`] = `"<div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div><div data-focus-lock-disabled="false" role="dialog" aria-labelledby="mx_CompoundDialog_title" aria-describedby="mx_CompoundDialog_content" class="mx_CompoundDialog mx_ScrollableBaseDialog"><div class="mx_CompoundDialog_header"><h1>Create poll</h1><div aria-label="Close dialog" role="button" tabindex="0" class="mx_AccessibleButton mx_CompoundDialog_cancelButton"></div></div><form class="mx_CompoundDialog_form"><div class="mx_CompoundDialog_content"><div class="mx_PollCreateDialog"><h2>Poll type</h2><div class="mx_Field mx_Field_select"><select type="text" id="mx_Field_1"><option value="org.matrix.msc3381.poll.disclosed">Open poll</option><option value="org.matrix.msc3381.poll.undisclosed">Closed poll</option></select><label for="mx_Field_1"></label></div><p>Voters see results as soon as they have voted</p><h2>What is your poll question or topic?</h2><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="poll-topic-input" maxlength="340" label="Question or topic" placeholder="Write something…" type="text" value=""><label for="poll-topic-input">Question or topic</label></div><h2>Create options</h2><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_0" maxlength="340" label="Option 1" placeholder="Write an option" type="text" value=""><label for="pollcreate_option_0">Option 1</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_1" maxlength="340" label="Option 2" placeholder="Write an option" type="text" value=""><label for="pollcreate_option_1">Option 2</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary">Add option</div></div></div><div class="mx_CompoundDialog_footer"><div role="button" tabindex="0" class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline">Cancel</div><button type="submit" role="button" tabindex="0" aria-disabled="true" disabled="" class="mx_AccessibleButton mx_Dialog_nonDialogButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled">Create Poll</button></div></form></div><div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div>"`;
+exports[`PollCreateDialog renders a blank poll 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_CompoundDialog_content"
+    aria-labelledby="mx_CompoundDialog_title"
+    class="mx_CompoundDialog mx_ScrollableBaseDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_CompoundDialog_header"
+    >
+      <h1>
+        Create poll
+      </h1>
+      <div
+        aria-label="Close dialog"
+        class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <form
+      class="mx_CompoundDialog_form"
+    >
+      <div
+        class="mx_CompoundDialog_content"
+      >
+        <div
+          class="mx_PollCreateDialog"
+        >
+          <h2>
+            Poll type
+          </h2>
+          <div
+            class="mx_Field mx_Field_select"
+          >
+            <select
+              id="mx_Field_1"
+              type="text"
+            >
+              <option
+                value="org.matrix.msc3381.poll.disclosed"
+              >
+                Open poll
+              </option>
+              <option
+                value="org.matrix.msc3381.poll.undisclosed"
+              >
+                Closed poll
+              </option>
+            </select>
+            <label
+              for="mx_Field_1"
+            />
+          </div>
+          <p>
+            Voters see results as soon as they have voted
+          </p>
+          <h2>
+            What is your poll question or topic?
+          </h2>
+          <div
+            class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
+          >
+            <input
+              id="poll-topic-input"
+              label="Question or topic"
+              maxlength="340"
+              placeholder="Write something…"
+              type="text"
+              value=""
+            />
+            <label
+              for="poll-topic-input"
+            >
+              Question or topic
+            </label>
+          </div>
+          <h2>
+            Create options
+          </h2>
+          <div
+            class="mx_PollCreateDialog_option"
+          >
+            <div
+              class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
+            >
+              <input
+                id="pollcreate_option_0"
+                label="Option 1"
+                maxlength="340"
+                placeholder="Write an option"
+                type="text"
+                value=""
+              />
+              <label
+                for="pollcreate_option_0"
+              >
+                Option 1
+              </label>
+            </div>
+            <div
+              class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
+              role="button"
+              tabindex="0"
+            />
+          </div>
+          <div
+            class="mx_PollCreateDialog_option"
+          >
+            <div
+              class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
+            >
+              <input
+                id="pollcreate_option_1"
+                label="Option 2"
+                maxlength="340"
+                placeholder="Write an option"
+                type="text"
+                value=""
+              />
+              <label
+                for="pollcreate_option_1"
+              >
+                Option 2
+              </label>
+            </div>
+            <div
+              class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
+              role="button"
+              tabindex="0"
+            />
+          </div>
+          <div
+            class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
+            role="button"
+            tabindex="0"
+          >
+            Add option
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_CompoundDialog_footer"
+      >
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+          role="button"
+          tabindex="0"
+        >
+          Cancel
+        </div>
+        <button
+          aria-disabled="true"
+          class="mx_AccessibleButton mx_Dialog_nonDialogButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
+          disabled=""
+          role="button"
+          tabindex="0"
+          type="submit"
+        >
+          Create Poll
+        </button>
+      </div>
+    </form>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
 
-exports[`PollCreateDialog renders a question and some options 1`] = `"<div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div><div data-focus-lock-disabled="false" role="dialog" aria-labelledby="mx_CompoundDialog_title" aria-describedby="mx_CompoundDialog_content" class="mx_CompoundDialog mx_ScrollableBaseDialog"><div class="mx_CompoundDialog_header"><h1>Create poll</h1><div aria-label="Close dialog" role="button" tabindex="0" class="mx_AccessibleButton mx_CompoundDialog_cancelButton"></div></div><form class="mx_CompoundDialog_form"><div class="mx_CompoundDialog_content"><div class="mx_PollCreateDialog"><h2>Poll type</h2><div class="mx_Field mx_Field_select"><select type="text" id="mx_Field_4"><option value="org.matrix.msc3381.poll.disclosed">Open poll</option><option value="org.matrix.msc3381.poll.undisclosed">Closed poll</option></select><label for="mx_Field_4"></label></div><p>Voters see results as soon as they have voted</p><h2>What is your poll question or topic?</h2><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="poll-topic-input" maxlength="340" label="Question or topic" placeholder="Write something…" type="text" value="How many turnips is the optimal number?"><label for="poll-topic-input">Question or topic</label></div><h2>Create options</h2><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_0" maxlength="340" label="Option 1" placeholder="Write an option" type="text" value="As many as my neighbour"><label for="pollcreate_option_0">Option 1</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_1" maxlength="340" label="Option 2" placeholder="Write an option" type="text" value="The question is meaningless"><label for="pollcreate_option_1">Option 2</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_2" maxlength="340" label="Option 3" placeholder="Write an option" type="text" value="Mu"><label for="pollcreate_option_2">Option 3</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary">Add option</div></div></div><div class="mx_CompoundDialog_footer"><div role="button" tabindex="0" class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline">Cancel</div><button type="submit" role="button" tabindex="0" class="mx_AccessibleButton mx_Dialog_nonDialogButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary">Create Poll</button></div></form></div><div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div>"`;
+exports[`PollCreateDialog renders a question and some options 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_CompoundDialog_content"
+    aria-labelledby="mx_CompoundDialog_title"
+    class="mx_CompoundDialog mx_ScrollableBaseDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_CompoundDialog_header"
+    >
+      <h1>
+        Create poll
+      </h1>
+      <div
+        aria-label="Close dialog"
+        class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <form
+      class="mx_CompoundDialog_form"
+    >
+      <div
+        class="mx_CompoundDialog_content"
+      >
+        <div
+          class="mx_PollCreateDialog"
+        >
+          <h2>
+            Poll type
+          </h2>
+          <div
+            class="mx_Field mx_Field_select"
+          >
+            <select
+              id="mx_Field_4"
+              type="text"
+            >
+              <option
+                value="org.matrix.msc3381.poll.disclosed"
+              >
+                Open poll
+              </option>
+              <option
+                value="org.matrix.msc3381.poll.undisclosed"
+              >
+                Closed poll
+              </option>
+            </select>
+            <label
+              for="mx_Field_4"
+            />
+          </div>
+          <p>
+            Voters see results as soon as they have voted
+          </p>
+          <h2>
+            What is your poll question or topic?
+          </h2>
+          <div
+            class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
+          >
+            <input
+              id="poll-topic-input"
+              label="Question or topic"
+              maxlength="340"
+              placeholder="Write something…"
+              type="text"
+              value="How many turnips is the optimal number?"
+            />
+            <label
+              for="poll-topic-input"
+            >
+              Question or topic
+            </label>
+          </div>
+          <h2>
+            Create options
+          </h2>
+          <div
+            class="mx_PollCreateDialog_option"
+          >
+            <div
+              class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
+            >
+              <input
+                id="pollcreate_option_0"
+                label="Option 1"
+                maxlength="340"
+                placeholder="Write an option"
+                type="text"
+                value="As many as my neighbour"
+              />
+              <label
+                for="pollcreate_option_0"
+              >
+                Option 1
+              </label>
+            </div>
+            <div
+              class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
+              role="button"
+              tabindex="0"
+            />
+          </div>
+          <div
+            class="mx_PollCreateDialog_option"
+          >
+            <div
+              class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
+            >
+              <input
+                id="pollcreate_option_1"
+                label="Option 2"
+                maxlength="340"
+                placeholder="Write an option"
+                type="text"
+                value="The question is meaningless"
+              />
+              <label
+                for="pollcreate_option_1"
+              >
+                Option 2
+              </label>
+            </div>
+            <div
+              class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
+              role="button"
+              tabindex="0"
+            />
+          </div>
+          <div
+            class="mx_PollCreateDialog_option"
+          >
+            <div
+              class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
+            >
+              <input
+                id="pollcreate_option_2"
+                label="Option 3"
+                maxlength="340"
+                placeholder="Write an option"
+                type="text"
+                value="Mu"
+              />
+              <label
+                for="pollcreate_option_2"
+              >
+                Option 3
+              </label>
+            </div>
+            <div
+              class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
+              role="button"
+              tabindex="0"
+            />
+          </div>
+          <div
+            class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
+            role="button"
+            tabindex="0"
+          >
+            Add option
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_CompoundDialog_footer"
+      >
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+          role="button"
+          tabindex="0"
+        >
+          Cancel
+        </div>
+        <button
+          class="mx_AccessibleButton mx_Dialog_nonDialogButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+          role="button"
+          tabindex="0"
+          type="submit"
+        >
+          Create Poll
+        </button>
+      </div>
+    </form>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
 
-exports[`PollCreateDialog renders info from a previous event 1`] = `"<div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div><div data-focus-lock-disabled="false" role="dialog" aria-labelledby="mx_CompoundDialog_title" aria-describedby="mx_CompoundDialog_content" class="mx_CompoundDialog mx_ScrollableBaseDialog"><div class="mx_CompoundDialog_header"><h1>Edit poll</h1><div aria-label="Close dialog" role="button" tabindex="0" class="mx_AccessibleButton mx_CompoundDialog_cancelButton"></div></div><form class="mx_CompoundDialog_form"><div class="mx_CompoundDialog_content"><div class="mx_PollCreateDialog"><h2>Poll type</h2><div class="mx_Field mx_Field_select"><select type="text" id="mx_Field_5"><option value="org.matrix.msc3381.poll.disclosed">Open poll</option><option value="org.matrix.msc3381.poll.undisclosed">Closed poll</option></select><label for="mx_Field_5"></label></div><p>Voters see results as soon as they have voted</p><h2>What is your poll question or topic?</h2><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="poll-topic-input" maxlength="340" label="Question or topic" placeholder="Write something…" type="text" value="Poll Q"><label for="poll-topic-input">Question or topic</label></div><h2>Create options</h2><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_0" maxlength="340" label="Option 1" placeholder="Write an option" type="text" value="Answer 1"><label for="pollcreate_option_0">Option 1</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_1" maxlength="340" label="Option 2" placeholder="Write an option" type="text" value="Answer 2"><label for="pollcreate_option_1">Option 2</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary">Add option</div></div></div><div class="mx_CompoundDialog_footer"><div role="button" tabindex="0" class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline">Cancel</div><button type="submit" role="button" tabindex="0" class="mx_AccessibleButton mx_Dialog_nonDialogButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary">Done</button></div></form></div><div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div>"`;
+exports[`PollCreateDialog renders info from a previous event 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_CompoundDialog_content"
+    aria-labelledby="mx_CompoundDialog_title"
+    class="mx_CompoundDialog mx_ScrollableBaseDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_CompoundDialog_header"
+    >
+      <h1>
+        Edit poll
+      </h1>
+      <div
+        aria-label="Close dialog"
+        class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <form
+      class="mx_CompoundDialog_form"
+    >
+      <div
+        class="mx_CompoundDialog_content"
+      >
+        <div
+          class="mx_PollCreateDialog"
+        >
+          <h2>
+            Poll type
+          </h2>
+          <div
+            class="mx_Field mx_Field_select"
+          >
+            <select
+              id="mx_Field_5"
+              type="text"
+            >
+              <option
+                value="org.matrix.msc3381.poll.disclosed"
+              >
+                Open poll
+              </option>
+              <option
+                value="org.matrix.msc3381.poll.undisclosed"
+              >
+                Closed poll
+              </option>
+            </select>
+            <label
+              for="mx_Field_5"
+            />
+          </div>
+          <p>
+            Voters see results as soon as they have voted
+          </p>
+          <h2>
+            What is your poll question or topic?
+          </h2>
+          <div
+            class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
+          >
+            <input
+              id="poll-topic-input"
+              label="Question or topic"
+              maxlength="340"
+              placeholder="Write something…"
+              type="text"
+              value="Poll Q"
+            />
+            <label
+              for="poll-topic-input"
+            >
+              Question or topic
+            </label>
+          </div>
+          <h2>
+            Create options
+          </h2>
+          <div
+            class="mx_PollCreateDialog_option"
+          >
+            <div
+              class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
+            >
+              <input
+                id="pollcreate_option_0"
+                label="Option 1"
+                maxlength="340"
+                placeholder="Write an option"
+                type="text"
+                value="Answer 1"
+              />
+              <label
+                for="pollcreate_option_0"
+              >
+                Option 1
+              </label>
+            </div>
+            <div
+              class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
+              role="button"
+              tabindex="0"
+            />
+          </div>
+          <div
+            class="mx_PollCreateDialog_option"
+          >
+            <div
+              class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
+            >
+              <input
+                id="pollcreate_option_1"
+                label="Option 2"
+                maxlength="340"
+                placeholder="Write an option"
+                type="text"
+                value="Answer 2"
+              />
+              <label
+                for="pollcreate_option_1"
+              >
+                Option 2
+              </label>
+            </div>
+            <div
+              class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
+              role="button"
+              tabindex="0"
+            />
+          </div>
+          <div
+            class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
+            role="button"
+            tabindex="0"
+          >
+            Add option
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_CompoundDialog_footer"
+      >
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+          role="button"
+          tabindex="0"
+        >
+          Cancel
+        </div>
+        <button
+          class="mx_AccessibleButton mx_Dialog_nonDialogButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+          role="button"
+          tabindex="0"
+          type="submit"
+        >
+          Done
+        </button>
+      </div>
+    </form>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
diff --git a/test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap b/test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap
index 8221ef4b550..bcfbe5effd0 100644
--- a/test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap
@@ -95,7 +95,7 @@ exports[`<TooltipTarget /> renders container 1`] = `
 <div
   aria-describedby="test id"
   class="test tooltipTargetClassName"
-  data-test-id="test"
+  data-testid="test"
   tabindex="0"
 >
   <span>
diff --git a/test/components/views/emojipicker/EmojiPicker-test.tsx b/test/components/views/emojipicker/EmojiPicker-test.tsx
new file mode 100644
index 00000000000..efd09825a9c
--- /dev/null
+++ b/test/components/views/emojipicker/EmojiPicker-test.tsx
@@ -0,0 +1,34 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import EmojiPicker from "../../../../src/components/views/emojipicker/EmojiPicker";
+import { stubClient } from "../../../test-utils";
+
+describe("EmojiPicker", function () {
+    stubClient();
+
+    it("sort emojis by shortcode and size", function () {
+        const ep = new EmojiPicker({ onChoose: (str: String) => false });
+
+        //@ts-ignore private access
+        ep.onChangeFilter("heart");
+
+        //@ts-ignore private access
+        expect(ep.memoizedDataByCategory["people"][0].shortcodes[0]).toEqual("heart");
+        //@ts-ignore private access
+        expect(ep.memoizedDataByCategory["people"][1].shortcodes[0]).toEqual("heartbeat");
+    });
+});
diff --git a/test/components/views/location/LocationShareMenu-test.tsx b/test/components/views/location/LocationShareMenu-test.tsx
index 5aeb79b9221..9ee667f319e 100644
--- a/test/components/views/location/LocationShareMenu-test.tsx
+++ b/test/components/views/location/LocationShareMenu-test.tsx
@@ -33,6 +33,7 @@ import { LocationShareType } from "../../../../src/components/views/location/sha
 import {
     flushPromisesWithFakeTimers,
     getMockClientWithEventEmitter,
+    mockClientMethodsUser,
     setupAsyncStoreWithClient,
 } from "../../../test-utils";
 import Modal from "../../../../src/Modal";
@@ -74,7 +75,7 @@ jest.mock("../../../../src/Modal", () => ({
 describe("<LocationShareMenu />", () => {
     const userId = "@ernie:server.org";
     const mockClient = getMockClientWithEventEmitter({
-        getUserId: jest.fn().mockReturnValue(userId),
+        ...mockClientMethodsUser(userId),
         getClientWellKnown: jest.fn().mockResolvedValue({
             map_style_url: "maps.com",
         }),
@@ -146,7 +147,7 @@ describe("<LocationShareMenu />", () => {
     const setLocationGeolocate = () => {
         // get the callback LocationShareMenu registered for geolocate
         expect(mocked(mockGeolocate.on)).toHaveBeenCalledWith("geolocate", expect.any(Function));
-        const [, onGeolocateCallback] = mocked(mockGeolocate.on).mock.calls.find(([event]) => event === "geolocate");
+        const [, onGeolocateCallback] = mocked(mockGeolocate.on).mock.calls.find(([event]) => event === "geolocate")!;
 
         // set the location
         onGeolocateCallback(position);
@@ -155,7 +156,7 @@ describe("<LocationShareMenu />", () => {
     const setLocationClick = () => {
         // get the callback LocationShareMenu registered for geolocate
         expect(mocked(mockMap.on)).toHaveBeenCalledWith("click", expect.any(Function));
-        const [, onMapClickCallback] = mocked(mockMap.on).mock.calls.find(([event]) => event === "click");
+        const [, onMapClickCallback] = mocked(mockMap.on).mock.calls.find(([event]) => event === "click")!;
 
         const event = {
             lngLat: { lng: position.coords.longitude, lat: position.coords.latitude },
@@ -334,7 +335,7 @@ describe("<LocationShareMenu />", () => {
 
             expect(SettingsStore.setValue).toHaveBeenCalledWith(
                 "feature_location_share_live",
-                undefined,
+                null,
                 SettingLevel.DEVICE,
                 true,
             );
diff --git a/test/components/views/location/LocationViewDialog-test.tsx b/test/components/views/location/LocationViewDialog-test.tsx
index bcf8f8ec8da..f4108cd6251 100644
--- a/test/components/views/location/LocationViewDialog-test.tsx
+++ b/test/components/views/location/LocationViewDialog-test.tsx
@@ -51,6 +51,6 @@ describe("<LocationViewDialog />", () => {
         // @ts-ignore cheat assignment to property
         selfShareEvent.sender = member;
         const { container } = getComponent({ mxEvent: selfShareEvent });
-        expect(container.querySelector(".mx_BaseAvatar_image").getAttribute("title")).toEqual(userId);
+        expect(container.querySelector(".mx_BaseAvatar_image")?.getAttribute("title")).toEqual(userId);
     });
 });
diff --git a/test/components/views/messages/MBeaconBody-test.tsx b/test/components/views/messages/MBeaconBody-test.tsx
index b915c442e2d..f93025f210b 100644
--- a/test/components/views/messages/MBeaconBody-test.tsx
+++ b/test/components/views/messages/MBeaconBody-test.tsx
@@ -15,9 +15,7 @@ limitations under the License.
 */
 
 import React, { ComponentProps } from "react";
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
-import { act } from "react-dom/test-utils";
+import { act, fireEvent, render } from "@testing-library/react";
 import * as maplibregl from "maplibre-gl";
 import { BeaconEvent, getBeaconInfoIdentifier, RelationType, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
 import { Relations } from "matrix-js-sdk/src/models/relations";
@@ -36,7 +34,6 @@ import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import Modal from "../../../../src/Modal";
 import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils";
-import { MapError } from "../../../../src/components/views/location/MapError";
 import * as mapUtilHooks from "../../../../src/utils/location/useMap";
 import { LocationShareError } from "../../../../src/utils/location";
 
@@ -75,10 +72,11 @@ describe("<MBeaconBody />", () => {
     };
 
     const getComponent = (props = {}) =>
-        mount(<MBeaconBody {...defaultProps} {...props} />, {
-            wrappingComponent: MatrixClientContext.Provider,
-            wrappingComponentProps: { value: mockClient },
-        });
+        render(
+            <MatrixClientContext.Provider value={mockClient}>
+                <MBeaconBody {...defaultProps} {...props} />
+            </MatrixClientContext.Provider>,
+        );
 
     const modalSpy = jest.spyOn(Modal, "createDialog").mockReturnValue({
         finished: Promise.resolve([true]),
@@ -94,7 +92,7 @@ describe("<MBeaconBody />", () => {
             const beaconInfoEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: false }, "$alice-room1-1");
             makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
             const component = getComponent({ mxEvent: beaconInfoEvent });
-            expect(component.text()).toEqual("Live location ended");
+            expect(component.container).toHaveTextContent("Live location ended");
         });
 
         it("renders stopped beacon UI for an expired beacon", () => {
@@ -107,7 +105,7 @@ describe("<MBeaconBody />", () => {
             );
             makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
             const component = getComponent({ mxEvent: beaconInfoEvent });
-            expect(component.text()).toEqual("Live location ended");
+            expect(component.container).toHaveTextContent("Live location ended");
         });
 
         it("renders loading beacon UI for a beacon that has not started yet", () => {
@@ -120,7 +118,7 @@ describe("<MBeaconBody />", () => {
             );
             makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
             const component = getComponent({ mxEvent: beaconInfoEvent });
-            expect(component.text()).toEqual("Loading live location…");
+            expect(component.container).toHaveTextContent("Loading live location…");
         });
 
         it("does not open maximised map when on click when beacon is stopped", () => {
@@ -133,9 +131,7 @@ describe("<MBeaconBody />", () => {
             );
             makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
             const component = getComponent({ mxEvent: beaconInfoEvent });
-            act(() => {
-                component.find(".mx_MBeaconBody_map").at(0).simulate("click");
-            });
+            fireEvent.click(component.container.querySelector(".mx_MBeaconBody_map")!);
 
             expect(modalSpy).not.toHaveBeenCalled();
         });
@@ -155,7 +151,7 @@ describe("<MBeaconBody />", () => {
 
             const component = getComponent({ mxEvent: aliceBeaconInfo1 });
             // beacon1 has been superceded by beacon2
-            expect(component.text()).toEqual("Live location ended");
+            expect(component.container).toHaveTextContent("Live location ended");
         });
 
         it("renders stopped UI when a beacon event is replaced", () => {
@@ -179,10 +175,8 @@ describe("<MBeaconBody />", () => {
                 beaconInstance.update(aliceBeaconInfo2);
             });
 
-            component.setProps({});
-
             // beacon1 has been superceded by beacon2
-            expect(component.text()).toEqual("Live location ended");
+            expect(component.container).toHaveTextContent("Live location ended");
         });
     };
 
@@ -202,10 +196,8 @@ describe("<MBeaconBody />", () => {
                 beaconInstance.emit(BeaconEvent.LivenessChange, false, beaconInstance);
             });
 
-            component.setProps({});
-
             // stopped UI
-            expect(component.text()).toEqual("Live location ended");
+            expect(component.container).toHaveTextContent("Live location ended");
         });
     });
 
@@ -227,16 +219,14 @@ describe("<MBeaconBody />", () => {
             makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
             const component = getComponent({ mxEvent: aliceBeaconInfo });
 
-            expect(component.text()).toEqual("Loading live location…");
+            expect(component.container).toHaveTextContent("Loading live location…");
         });
 
         it("does nothing on click when a beacon has no location", () => {
             makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
             const component = getComponent({ mxEvent: aliceBeaconInfo });
 
-            act(() => {
-                component.find(".mx_MBeaconBody_map").at(0).simulate("click");
-            });
+            fireEvent.click(component.container.querySelector(".mx_MBeaconBody_map")!);
 
             expect(modalSpy).not.toHaveBeenCalled();
         });
@@ -247,7 +237,7 @@ describe("<MBeaconBody />", () => {
             beaconInstance.addLocations([location1]);
             const component = getComponent({ mxEvent: aliceBeaconInfo });
 
-            expect(component.find("Map").length).toBeTruthy;
+            expect(component.container.querySelector(".maplibregl-canvas-container")).toBeDefined();
         });
 
         it("opens maximised map view on click when beacon has a live location", () => {
@@ -256,43 +246,7 @@ describe("<MBeaconBody />", () => {
             beaconInstance.addLocations([location1]);
             const component = getComponent({ mxEvent: aliceBeaconInfo });
 
-            act(() => {
-                component.find("Map").simulate("click");
-            });
-
-            // opens modal
-            expect(modalSpy).toHaveBeenCalled();
-        });
-
-        it("does nothing on click when a beacon has no location", () => {
-            makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
-            const component = getComponent({ mxEvent: aliceBeaconInfo });
-
-            act(() => {
-                component.find(".mx_MBeaconBody_map").at(0).simulate("click");
-            });
-
-            expect(modalSpy).not.toHaveBeenCalled();
-        });
-
-        it("renders a live beacon with a location correctly", () => {
-            const room = makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
-            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo))!;
-            beaconInstance.addLocations([location1]);
-            const component = getComponent({ mxEvent: aliceBeaconInfo });
-
-            expect(component.find("Map").length).toBeTruthy;
-        });
-
-        it("opens maximised map view on click when beacon has a live location", () => {
-            const room = makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
-            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo))!;
-            beaconInstance.addLocations([location1]);
-            const component = getComponent({ mxEvent: aliceBeaconInfo });
-
-            act(() => {
-                component.find("Map").simulate("click");
-            });
+            fireEvent.click(component.container.querySelector(".mx_Map")!);
 
             // opens modal
             expect(modalSpy).toHaveBeenCalled();
@@ -300,12 +254,11 @@ describe("<MBeaconBody />", () => {
 
         it("updates latest location", () => {
             const room = makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
-            const component = getComponent({ mxEvent: aliceBeaconInfo });
+            getComponent({ mxEvent: aliceBeaconInfo });
 
             const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo))!;
             act(() => {
                 beaconInstance.addLocations([location1]);
-                component.setProps({});
             });
 
             expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 51, lon: 41 });
@@ -313,7 +266,6 @@ describe("<MBeaconBody />", () => {
 
             act(() => {
                 beaconInstance.addLocations([location2]);
-                component.setProps({});
             });
 
             expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 52, lon: 42 });
@@ -455,7 +407,7 @@ describe("<MBeaconBody />", () => {
             makeRoomWithBeacons(roomId, mockClient, [beaconInfoEvent], [location1]);
 
             const component = getComponent({ mxEvent: beaconInfoEvent });
-            expect(component.find(MapError)).toMatchSnapshot();
+            expect(component.getByTestId("map-rendering-error")).toMatchSnapshot();
         });
 
         // test that statuses display as expected with a map display error
diff --git a/test/components/views/messages/MLocationBody-test.tsx b/test/components/views/messages/MLocationBody-test.tsx
index a3f707a7343..f17e71b5b29 100644
--- a/test/components/views/messages/MLocationBody-test.tsx
+++ b/test/components/views/messages/MLocationBody-test.tsx
@@ -15,13 +15,11 @@ limitations under the License.
 */
 
 import React, { ComponentProps } from "react";
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
+import { fireEvent, render } from "@testing-library/react";
 import { LocationAssetType } from "matrix-js-sdk/src/@types/location";
 import { ClientEvent, RoomMember } from "matrix-js-sdk/src/matrix";
 import * as maplibregl from "maplibre-gl";
 import { logger } from "matrix-js-sdk/src/logger";
-import { act } from "react-dom/test-utils";
 import { SyncState } from "matrix-js-sdk/src/sync";
 
 import MLocationBody from "../../../../src/components/views/messages/MLocationBody";
@@ -34,6 +32,13 @@ import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils";
 import { makeLocationEvent } from "../../../test-utils/location";
 import { getMockClientWithEventEmitter } from "../../../test-utils";
 
+// Fake random strings to give a predictable snapshot
+jest.mock("matrix-js-sdk/src/randomstring", () => {
+    return {
+        randomString: () => "abdefghi",
+    };
+});
+
 describe("MLocationBody", () => {
     const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
     describe("<MLocationBody>", () => {
@@ -56,10 +61,11 @@ describe("MLocationBody", () => {
             mediaEventHelper: {} as MediaEventHelper,
         };
         const getComponent = (props = {}) =>
-            mount(<MLocationBody {...defaultProps} {...props} />, {
-                wrappingComponent: MatrixClientContext.Provider,
-                wrappingComponentProps: { value: mockClient },
-            });
+            render(
+                <MatrixClientContext.Provider value={mockClient}>
+                    <MLocationBody {...defaultProps} {...props} />
+                </MatrixClientContext.Provider>,
+            );
         const getMapErrorComponent = () => {
             const mockMap = new maplibregl.Map(mapOptions);
             mockClient.getClientWellKnown.mockReturnValue({
@@ -95,20 +101,19 @@ describe("MLocationBody", () => {
 
             it("displays correct fallback content without error style when map_style_url is not configured", () => {
                 const component = getComponent();
-                expect(component.find(".mx_EventTile_body")).toMatchSnapshot();
+                expect(component.container.querySelector(".mx_EventTile_body")).toMatchSnapshot();
             });
 
             it("displays correct fallback content when map_style_url is misconfigured", () => {
                 const component = getMapErrorComponent();
-                component.setProps({});
-                expect(component.find(".mx_EventTile_body")).toMatchSnapshot();
+                expect(component.container.querySelector(".mx_EventTile_body")).toMatchSnapshot();
             });
 
             it("should clear the error on reconnect", () => {
                 const component = getMapErrorComponent();
-                expect((component.state() as React.ComponentState).error).toBeDefined();
+                expect(component.container.querySelector(".mx_EventTile_tileError")).toBeDefined();
                 mockClient.emit(ClientEvent.Sync, SyncState.Reconnecting, SyncState.Error);
-                expect((component.state() as React.ComponentState).error).toBeUndefined();
+                expect(component.container.querySelector(".mx_EventTile_tileError")).toBeFalsy();
             });
         });
 
@@ -131,7 +136,7 @@ describe("MLocationBody", () => {
                 const mockMap = new maplibregl.Map(mapOptions);
                 const component = getComponent();
 
-                expect(component).toMatchSnapshot();
+                expect(component.asFragment()).toMatchSnapshot();
                 // map was centered
                 expect(mockMap.setCenter).toHaveBeenCalledWith({
                     lat: 51.5076,
@@ -139,32 +144,17 @@ describe("MLocationBody", () => {
                 });
             });
 
-            it("opens map dialog on click", () => {
+            it("opens map dialog on click", async () => {
                 const modalSpy = jest
                     .spyOn(Modal, "createDialog")
                     .mockReturnValue({ finished: new Promise(() => {}), close: jest.fn() });
                 const component = getComponent();
 
-                act(() => {
-                    component.find("Map").at(0).simulate("click");
-                });
+                await fireEvent.click(component.container.querySelector(".mx_Map")!);
 
                 expect(modalSpy).toHaveBeenCalled();
             });
 
-            it("renders marker correctly for a non-self share", () => {
-                const mockMap = new maplibregl.Map(mapOptions);
-                const component = getComponent();
-
-                expect(component.find("SmartMarker").at(0).props()).toEqual(
-                    expect.objectContaining({
-                        map: mockMap,
-                        geoUri: "geo:51.5076,-0.1276",
-                        roomMember: undefined,
-                    }),
-                );
-            });
-
             it("renders marker correctly for a self share", () => {
                 const selfShareEvent = makeLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Self);
                 const member = new RoomMember(roomId, userId);
@@ -173,7 +163,7 @@ describe("MLocationBody", () => {
                 const component = getComponent({ mxEvent: selfShareEvent });
 
                 // render self locations with user avatars
-                expect(component.find("SmartMarker").at(0).prop("roomMember")).toEqual(member);
+                expect(component.asFragment()).toMatchSnapshot();
             });
         });
     });
diff --git a/test/components/views/messages/MPollBody-test.tsx b/test/components/views/messages/MPollBody-test.tsx
index 6cb3187603d..bc77d90edd2 100644
--- a/test/components/views/messages/MPollBody-test.tsx
+++ b/test/components/views/messages/MPollBody-test.tsx
@@ -958,7 +958,7 @@ function endedVotesCount(renderResult: RenderResult, value: string): string {
     return votesCount(renderResult, value);
 }
 
-export function newPollStart(answers?: PollAnswer[], question?: string, disclosed = true): PollStartEventContent {
+function newPollStart(answers?: PollAnswer[], question?: string, disclosed = true): PollStartEventContent {
     if (!answers) {
         answers = [
             { id: "pizza", [M_TEXT.name]: "Pizza" },
@@ -1033,7 +1033,7 @@ function expectedResponseEventCall(answer: string) {
     return [roomId, eventType, content];
 }
 
-export function newPollEndEvent(sender = "@me:example.com", ts = 0): MatrixEvent {
+function newPollEndEvent(sender = "@me:example.com", ts = 0): MatrixEvent {
     return makePollEndEvent("$mypoll", "#myroom:example.com", sender, ts);
 }
 
diff --git a/test/components/views/messages/MessageActionBar-test.tsx b/test/components/views/messages/MessageActionBar-test.tsx
index d7e2ea509a2..da475a58de2 100644
--- a/test/components/views/messages/MessageActionBar-test.tsx
+++ b/test/components/views/messages/MessageActionBar-test.tsx
@@ -195,7 +195,7 @@ describe("<MessageActionBar />", () => {
         // because beforeRedaction event is fired... before redaction
         // event is unchanged at point when this component updates
         // TODO file bug
-        xit("updates component on before redaction event", () => {
+        it.skip("updates component on before redaction event", () => {
             const event = new MatrixEvent({
                 type: EventType.RoomMessage,
                 sender: userId,
diff --git a/test/components/views/messages/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx
index e01a5f809f4..f5466c46cfe 100644
--- a/test/components/views/messages/TextualBody-test.tsx
+++ b/test/components/views/messages/TextualBody-test.tsx
@@ -19,7 +19,7 @@ import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { MockedObject } from "jest-mock";
 import { render } from "@testing-library/react";
 
-import { getMockClientWithEventEmitter, mkEvent, mkStubRoom } from "../../../test-utils";
+import { getMockClientWithEventEmitter, mkEvent, mkMessage, mkStubRoom } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import * as languageHandler from "../../../../src/languageHandler";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
@@ -28,6 +28,15 @@ import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
 
+const mkRoomTextMessage = (body: string): MatrixEvent => {
+    return mkMessage({
+        msg: body,
+        room: "room_id",
+        user: "sender",
+        event: true,
+    });
+};
+
 describe("<TextualBody />", () => {
     afterEach(() => {
         jest.spyOn(MatrixClientPeg, "get").mockRestore();
@@ -38,9 +47,11 @@ describe("<TextualBody />", () => {
     beforeEach(() => {
         defaultMatrixClient = getMockClientWithEventEmitter({
             getRoom: () => defaultRoom,
+            getRooms: () => [defaultRoom],
             getAccountData: (): MatrixEvent | undefined => undefined,
             isGuest: () => false,
             mxcUrlToHttp: (s: string) => s,
+            getUserId: () => "@user:example.com",
         });
     });
 
@@ -116,17 +127,7 @@ describe("<TextualBody />", () => {
         });
 
         it("simple message renders as expected", () => {
-            const ev = mkEvent({
-                type: "m.room.message",
-                room: "room_id",
-                user: "sender",
-                content: {
-                    body: "this is a plaintext message",
-                    msgtype: "m.text",
-                },
-                event: true,
-            });
-
+            const ev = mkRoomTextMessage("this is a plaintext message");
             const { container } = getComponent({ mxEvent: ev });
             expect(container).toHaveTextContent(ev.getContent().body);
             const content = container.querySelector(".mx_EventTile_body");
@@ -135,17 +136,7 @@ describe("<TextualBody />", () => {
 
         // If pills were rendered within a Portal/same shadow DOM then it'd be easier to test
         it("linkification get applied correctly into the DOM", () => {
-            const ev = mkEvent({
-                type: "m.room.message",
-                room: "room_id",
-                user: "sender",
-                content: {
-                    body: "Visit https://matrix.org/",
-                    msgtype: "m.text",
-                },
-                event: true,
-            });
-
+            const ev = mkRoomTextMessage("Visit https://matrix.org/");
             const { container } = getComponent({ mxEvent: ev });
             expect(container).toHaveTextContent(ev.getContent().body);
             const content = container.querySelector(".mx_EventTile_body");
@@ -155,6 +146,24 @@ describe("<TextualBody />", () => {
                     "https://matrix.org/</a></span>",
             );
         });
+
+        it("should not pillify MXIDs", () => {
+            const ev = mkRoomTextMessage("Chat with @user:example.com");
+            const { container } = getComponent({ mxEvent: ev });
+            const content = container.querySelector(".mx_EventTile_body");
+            expect(content.innerHTML).toMatchInlineSnapshot(
+                `"Chat with <a href="https://matrix.to/#/@user:example.com" class="linkified" rel="noreferrer noopener">@user:example.com</a>"`,
+            );
+        });
+
+        it("should not pillify room aliases", () => {
+            const ev = mkRoomTextMessage("Visit #room:example.com");
+            const { container } = getComponent({ mxEvent: ev });
+            const content = container.querySelector(".mx_EventTile_body");
+            expect(content.innerHTML).toMatchInlineSnapshot(
+                `"Visit <a href="https://matrix.to/#/#room:example.com" class="linkified" rel="noreferrer noopener">#room:example.com</a>"`,
+            );
+        });
     });
 
     describe("renders formatted m.text correctly", () => {
@@ -382,17 +391,7 @@ describe("<TextualBody />", () => {
         });
         DMRoomMap.makeShared();
 
-        const ev = mkEvent({
-            type: "m.room.message",
-            room: "room_id",
-            user: "sender",
-            content: {
-                body: "Visit https://matrix.org/",
-                msgtype: "m.text",
-            },
-            event: true,
-        });
-
+        const ev = mkRoomTextMessage("Visit https://matrix.org/");
         const { container, rerender } = getComponent(
             { mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() },
             matrixClient,
diff --git a/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap
index 703f91ceff2..73b2570165a 100644
--- a/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap
@@ -1,35 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<MBeaconBody /> when map display is not configured renders maps unavailable error for a live beacon with location 1`] = `
-<MapError
-  className="mx_MBeaconBody_mapError mx_MBeaconBody_mapErrorInteractive"
-  error="MapStyleUrlNotConfigured"
-  isMinimised={true}
-  onClick={[Function]}
+<div
+  class="mx_MapError mx_MBeaconBody_mapError mx_MBeaconBody_mapErrorInteractive mx_MapError_isMinimised"
+  data-testid="map-rendering-error"
 >
   <div
-    className="mx_MapError mx_MBeaconBody_mapError mx_MBeaconBody_mapErrorInteractive mx_MapError_isMinimised"
-    data-testid="map-rendering-error"
-    onClick={[Function]}
+    class="mx_MapError_icon"
+  />
+  <h3
+    class="mx_Heading_h3 mx_MapError_heading"
   >
-    <div
-      className="mx_MapError_icon"
-    />
-    <Heading
-      className="mx_MapError_heading"
-      size="h3"
-    >
-      <h3
-        className="mx_Heading_h3 mx_MapError_heading"
-      >
-        Unable to load map
-      </h3>
-    </Heading>
-    <p
-      className="mx_MapError_message"
-    >
-      This homeserver is not configured to display maps.
-    </p>
-  </div>
-</MapError>
+    Unable to load map
+  </h3>
+  <p
+    class="mx_MapError_message"
+  >
+    This homeserver is not configured to display maps.
+  </p>
+</div>
 `;
diff --git a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
index 160a2b1aa2a..5be01d8e635 100644
--- a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`MLocationBody <MLocationBody> with error displays correct fallback content when map_style_url is misconfigured 1`] = `
 <div
-  className="mx_EventTile_body mx_MLocationBody"
+  class="mx_EventTile_body mx_MLocationBody"
 >
   <span
-    className="mx_EventTile_tileError"
+    class="mx_EventTile_tileError"
   >
     Unable to load map: This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.
   </span>
@@ -16,10 +16,10 @@ exports[`MLocationBody <MLocationBody> with error displays correct fallback cont
 
 exports[`MLocationBody <MLocationBody> with error displays correct fallback content without error style when map_style_url is not configured 1`] = `
 <div
-  className="mx_EventTile_body mx_MLocationBody"
+  class="mx_EventTile_body mx_MLocationBody"
 >
   <span
-    className=""
+    class=""
   >
     Unable to load map: This homeserver is not configured to display maps.
   </span>
@@ -29,188 +29,83 @@ exports[`MLocationBody <MLocationBody> with error displays correct fallback cont
 `;
 
 exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] = `
-<MLocationBody
-  highlightLink=""
-  highlights={[]}
-  mediaEventHelper={{}}
-  mxEvent={
-    {
-      "content": {
-        "body": "Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000",
-        "geo_uri": "geo:51.5076,-0.1276",
-        "msgtype": "m.location",
-        "org.matrix.msc1767.text": "Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000",
-        "org.matrix.msc3488.asset": {
-          "type": "m.pin",
-        },
-        "org.matrix.msc3488.location": {
-          "description": "Human-readable label",
-          "uri": "geo:51.5076,-0.1276",
-        },
-        "org.matrix.msc3488.ts": 252523,
-      },
-      "event_id": "$2",
-      "type": "org.matrix.msc3488.location",
-    }
-  }
-  onHeightChanged={[MockFunction]}
-  onMessageAllowed={[MockFunction]}
-  permalinkCreator={{}}
->
-  <LocationBodyContent
-    mapId="mx_MLocationBody_$2_HHHHHHHH"
-    mxEvent={
-      {
-        "content": {
-          "body": "Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000",
-          "geo_uri": "geo:51.5076,-0.1276",
-          "msgtype": "m.location",
-          "org.matrix.msc1767.text": "Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000",
-          "org.matrix.msc3488.asset": {
-            "type": "m.pin",
-          },
-          "org.matrix.msc3488.location": {
-            "description": "Human-readable label",
-            "uri": "geo:51.5076,-0.1276",
-          },
-          "org.matrix.msc3488.ts": 252523,
-        },
-        "event_id": "$2",
-        "type": "org.matrix.msc3488.location",
-      }
-    }
-    onClick={[Function]}
-    onError={[Function]}
-    tooltip="Expand map"
+<DocumentFragment>
+  <div
+    class="mx_MLocationBody"
+  >
+    <div
+      tabindex="0"
+    >
+      <div
+        class="mx_Map mx_MLocationBody_map"
+        id="mx_Map_mx_MLocationBody_$2_abdefghi"
+      >
+        <span>
+          <div
+            class="mx_Marker mx_Marker_defaultColor"
+            id="mx_MLocationBody_$2_abdefghi-marker"
+          >
+            <div
+              class="mx_Marker_border"
+            >
+              <div
+                class="mx_Marker_icon"
+              />
+            </div>
+          </div>
+        </span>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`MLocationBody <MLocationBody> without error renders marker correctly for a self share 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_MLocationBody"
   >
     <div
-      className="mx_MLocationBody"
+      tabindex="0"
     >
-      <TooltipTarget
-        alignment={5}
-        label="Expand map"
-        maxParentWidth={450}
+      <div
+        class="mx_Map mx_MLocationBody_map"
+        id="mx_Map_mx_MLocationBody_$3_abdefghi"
       >
-        <div
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          tabIndex={0}
-        >
-          <Map
-            centerGeoUri="geo:51.5076,-0.1276"
-            className="mx_MLocationBody_map"
-            id="mx_MLocationBody_$2_HHHHHHHH"
-            onClick={[Function]}
-            onError={[Function]}
+        <span>
+          <div
+            class="mx_Marker mx_Marker_defaultColor"
+            id="mx_MLocationBody_$3_abdefghi-marker"
           >
             <div
-              className="mx_Map mx_MLocationBody_map"
-              id="mx_Map_mx_MLocationBody_$2_HHHHHHHH"
-              onClick={[Function]}
+              class="mx_Marker_border"
             >
-              <SmartMarker
-                geoUri="geo:51.5076,-0.1276"
-                id="mx_MLocationBody_$2_HHHHHHHH-marker"
-                map={
-                  MockMap {
-                    "_events": {
-                      "error": [
-                        [Function],
-                        [Function],
-                        [Function],
-                        [Function],
-                        [Function],
-                        [Function],
-                      ],
-                    },
-                    "_eventsCount": 1,
-                    "_maxListeners": undefined,
-                    "addControl": [MockFunction] {
-                      "calls": [
-                        [
-                          MockAttributionControl {},
-                          "top-right",
-                        ],
-                        [
-                          MockAttributionControl {},
-                          "top-right",
-                        ],
-                      ],
-                      "results": [
-                        {
-                          "type": "return",
-                          "value": undefined,
-                        },
-                        {
-                          "type": "return",
-                          "value": undefined,
-                        },
-                      ],
-                    },
-                    "fitBounds": [MockFunction],
-                    "removeControl": [MockFunction],
-                    "setCenter": [MockFunction] {
-                      "calls": [
-                        [
-                          {
-                            "lat": 51.5076,
-                            "lon": -0.1276,
-                          },
-                        ],
-                        [
-                          {
-                            "lat": 51.5076,
-                            "lon": -0.1276,
-                          },
-                        ],
-                      ],
-                      "results": [
-                        {
-                          "type": "return",
-                          "value": undefined,
-                        },
-                        {
-                          "type": "return",
-                          "value": undefined,
-                        },
-                      ],
-                    },
-                    "setStyle": [MockFunction],
-                    "zoomIn": [MockFunction],
-                    "zoomOut": [MockFunction],
-                    Symbol(kCapture): false,
-                  }
-                }
+              <span
+                class="mx_BaseAvatar"
+                role="presentation"
               >
-                <span>
-                  <ForwardRef
-                    id="mx_MLocationBody_$2_HHHHHHHH-marker"
-                  >
-                    <div
-                      className="mx_Marker mx_Marker_defaultColor"
-                      id="mx_MLocationBody_$2_HHHHHHHH-marker"
-                    >
-                      <OptionalTooltip>
-                        <div
-                          className="mx_Marker_border"
-                        >
-                          <div
-                            className="mx_Marker_icon"
-                          />
-                        </div>
-                      </OptionalTooltip>
-                    </div>
-                  </ForwardRef>
+                <span
+                  aria-hidden="true"
+                  class="mx_BaseAvatar_initial"
+                  style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
+                >
+                  U
                 </span>
-              </SmartMarker>
+                <img
+                  alt=""
+                  aria-hidden="true"
+                  class="mx_BaseAvatar_image"
+                  data-testid="avatar-img"
+                  src="data:image/png;base64,00"
+                  style="width: 36px; height: 36px;"
+                  title="@user:server"
+                />
+              </span>
             </div>
-          </Map>
-        </div>
-      </TooltipTarget>
+          </div>
+        </span>
+      </div>
     </div>
-  </LocationBodyContent>
-</MLocationBody>
+  </div>
+</DocumentFragment>
 `;
diff --git a/test/components/views/right_panel/PinnedMessagesCard-test.tsx b/test/components/views/right_panel/PinnedMessagesCard-test.tsx
index f9c2650b556..a1d5d116522 100644
--- a/test/components/views/right_panel/PinnedMessagesCard-test.tsx
+++ b/test/components/views/right_panel/PinnedMessagesCard-test.tsx
@@ -14,11 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps } from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import React from "react";
+import { render, act, RenderResult } from "@testing-library/react";
 import { mocked } from "jest-mock";
-import { act } from "react-dom/test-utils";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { EventType, RelationType, MsgType } from "matrix-js-sdk/src/@types/event";
 import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
@@ -31,8 +29,6 @@ import { PollEndEvent } from "matrix-js-sdk/src/extensible_events_v1/PollEndEven
 import { stubClient, mkEvent, mkMessage, flushPromises } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import PinnedMessagesCard from "../../../../src/components/views/right_panel/PinnedMessagesCard";
-import PinnedEventTile from "../../../../src/components/views/rooms/PinnedEventTile";
-import MPollBody from "../../../../src/components/views/messages/MPollBody";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 
@@ -82,30 +78,26 @@ describe("<PinnedMessagesCard />", () => {
         return room;
     };
 
-    const mountPins = async (room: Room): Promise<ReactWrapper<ComponentProps<typeof PinnedMessagesCard>>> => {
-        let pins!: ReactWrapper<ComponentProps<typeof PinnedMessagesCard>>;
+    const mountPins = async (room: Room): Promise<RenderResult> => {
+        let pins!: RenderResult;
         await act(async () => {
-            pins = mount(
-                <PinnedMessagesCard
-                    room={room}
-                    onClose={jest.fn()}
-                    permalinkCreator={new RoomPermalinkCreator(room, room.roomId)}
-                />,
-                {
-                    wrappingComponent: MatrixClientContext.Provider,
-                    wrappingComponentProps: { value: cli },
-                },
+            pins = render(
+                <MatrixClientContext.Provider value={cli}>
+                    <PinnedMessagesCard
+                        room={room}
+                        onClose={jest.fn()}
+                        permalinkCreator={new RoomPermalinkCreator(room, room.roomId)}
+                    />
+                </MatrixClientContext.Provider>,
             );
             // Wait a tick for state updates
             await new Promise((resolve) => setImmediate(resolve));
         });
-        pins.update();
 
         return pins;
     };
 
-    const emitPinUpdates = async (pins: ReactWrapper<ComponentProps<typeof PinnedMessagesCard>>) => {
-        const room = pins.props().room;
+    const emitPinUpdates = async (room: Room) => {
         const pinListener = mocked(room.currentState).on.mock.calls.find(
             ([eventName, listener]) => eventName === RoomStateEvent.Events,
         )![1];
@@ -117,7 +109,6 @@ describe("<PinnedMessagesCard />", () => {
             // Wait a tick for state updates
             await new Promise((resolve) => setImmediate(resolve));
         });
-        pins.update();
     };
 
     const pin1 = mkMessage({
@@ -137,36 +128,38 @@ describe("<PinnedMessagesCard />", () => {
         // Start with nothing pinned
         const localPins: MatrixEvent[] = [];
         const nonLocalPins: MatrixEvent[] = [];
-        const pins = await mountPins(mkRoom(localPins, nonLocalPins));
-        expect(pins.find(PinnedEventTile).length).toBe(0);
+        const room = mkRoom(localPins, nonLocalPins);
+        const pins = await mountPins(room);
+        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(0);
 
         // Pin the first message
         localPins.push(pin1);
-        await emitPinUpdates(pins);
-        expect(pins.find(PinnedEventTile).length).toBe(1);
+        await emitPinUpdates(room);
+        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(1);
 
         // Pin the second message
         nonLocalPins.push(pin2);
-        await emitPinUpdates(pins);
-        expect(pins.find(PinnedEventTile).length).toBe(2);
+        await emitPinUpdates(room);
+        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(2);
     });
 
     it("updates when messages are unpinned", async () => {
         // Start with two pins
         const localPins = [pin1];
         const nonLocalPins = [pin2];
-        const pins = await mountPins(mkRoom(localPins, nonLocalPins));
-        expect(pins.find(PinnedEventTile).length).toBe(2);
+        const room = mkRoom(localPins, nonLocalPins);
+        const pins = await mountPins(room);
+        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(2);
 
         // Unpin the first message
         localPins.pop();
-        await emitPinUpdates(pins);
-        expect(pins.find(PinnedEventTile).length).toBe(1);
+        await emitPinUpdates(room);
+        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(1);
 
         // Unpin the second message
         nonLocalPins.pop();
-        await emitPinUpdates(pins);
-        expect(pins.find(PinnedEventTile).length).toBe(0);
+        await emitPinUpdates(room);
+        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(0);
     });
 
     it("hides unpinnable events found in local timeline", async () => {
@@ -181,7 +174,7 @@ describe("<PinnedMessagesCard />", () => {
         });
 
         const pins = await mountPins(mkRoom([pin], []));
-        expect(pins.find(PinnedEventTile).length).toBe(0);
+        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(0);
     });
 
     it("hides unpinnable events not found in local timeline", async () => {
@@ -196,7 +189,7 @@ describe("<PinnedMessagesCard />", () => {
         });
 
         const pins = await mountPins(mkRoom([], [pin]));
-        expect(pins.find(PinnedEventTile).length).toBe(0);
+        expect(pins.container.querySelectorAll(".mx_PinnedEventTile")).toHaveLength(0);
     });
 
     it("accounts for edits", async () => {
@@ -224,9 +217,9 @@ describe("<PinnedMessagesCard />", () => {
         });
 
         const pins = await mountPins(mkRoom([], [pin1]));
-        const pinTile = pins.find(PinnedEventTile);
+        const pinTile = pins.container.querySelectorAll(".mx_PinnedEventTile");
         expect(pinTile.length).toBe(1);
-        expect(pinTile.find(".mx_EventTile_body").text()).toEqual("First pinned message, edited");
+        expect(pinTile[0].querySelector(".mx_EventTile_body")!).toHaveTextContent("First pinned message, edited");
     });
 
     it("displays votes on polls not found in local timeline", async () => {
@@ -284,11 +277,11 @@ describe("<PinnedMessagesCard />", () => {
         const pollInstance = room.polls.get(poll.getId()!);
         expect(pollInstance).toBeTruthy();
 
-        const pinTile = pins.find(MPollBody);
+        const pinTile = pins.container.querySelectorAll(".mx_MPollBody");
 
-        expect(pinTile.length).toEqual(1);
-        expect(pinTile.find(".mx_PollOption_ended").length).toEqual(2);
-        expect(pinTile.find(".mx_PollOption_optionVoteCount").first().text()).toEqual("2 votes");
-        expect(pinTile.find(".mx_PollOption_optionVoteCount").last().text()).toEqual("1 vote");
+        expect(pinTile).toHaveLength(1);
+        expect(pinTile[0].querySelectorAll(".mx_PollOption_ended")).toHaveLength(2);
+        expect(pinTile[0].querySelectorAll(".mx_PollOption_optionVoteCount")[0]).toHaveTextContent("2 votes");
+        expect([...pinTile[0].querySelectorAll(".mx_PollOption_optionVoteCount")].at(-1)).toHaveTextContent("1 vote");
     });
 });
diff --git a/test/components/views/right_panel/RoomSummaryCard-test.tsx b/test/components/views/right_panel/RoomSummaryCard-test.tsx
index 7ec61433957..a52d47717b8 100644
--- a/test/components/views/right_panel/RoomSummaryCard-test.tsx
+++ b/test/components/views/right_panel/RoomSummaryCard-test.tsx
@@ -30,6 +30,7 @@ import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore"
 import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases";
 import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
 import { PollHistoryDialog } from "../../../../src/components/views/dialogs/polls/PollHistoryDialog";
+import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 
 describe("<RoomSummaryCard />", () => {
     const userId = "@alice:domain.org";
@@ -54,6 +55,7 @@ describe("<RoomSummaryCard />", () => {
     const defaultProps = {
         room,
         onClose: jest.fn(),
+        permalinkCreator: new RoomPermalinkCreator(room),
     };
     const getComponent = (props = {}) =>
         render(<RoomSummaryCard {...defaultProps} {...props} />, {
@@ -145,7 +147,11 @@ describe("<RoomSummaryCard />", () => {
 
             fireEvent.click(getByText("Polls history"));
 
-            expect(modalSpy).toHaveBeenCalledWith(PollHistoryDialog, { roomId, matrixClient: mockClient });
+            expect(modalSpy).toHaveBeenCalledWith(PollHistoryDialog, {
+                room,
+                matrixClient: mockClient,
+                permalinkCreator: defaultProps.permalinkCreator,
+            });
         });
     });
 
diff --git a/test/components/views/right_panel/UserInfo-test.tsx b/test/components/views/right_panel/UserInfo-test.tsx
index 049fa6ef281..f08c34a441a 100644
--- a/test/components/views/right_panel/UserInfo-test.tsx
+++ b/test/components/views/right_panel/UserInfo-test.tsx
@@ -15,19 +15,20 @@ limitations under the License.
 */
 
 import React from "react";
-import { fireEvent, render, screen, waitFor, cleanup } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, cleanup, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
 import { Room, User, MatrixClient, RoomMember, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
 import { Phase, VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import { DeviceTrustLevel, UserTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning";
+import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
+import { defer } from "matrix-js-sdk/src/utils";
 
 import UserInfo, {
     BanToggleButton,
     DeviceItem,
     disambiguateDevices,
     getPowerLevels,
-    IDevice,
     isMuted,
     PowerLevelEditor,
     RoomAdminToolsContainer,
@@ -43,6 +44,13 @@ import MultiInviter from "../../../../src/utils/MultiInviter";
 import * as mockVerification from "../../../../src/verification";
 import Modal from "../../../../src/Modal";
 import { E2EStatus } from "../../../../src/utils/ShieldUtils";
+import { DirectoryMember, startDmOnFirstMessage } from "../../../../src/utils/direct-messages";
+import { flushPromises } from "../../../test-utils";
+
+jest.mock("../../../../src/utils/direct-messages", () => ({
+    ...jest.requireActual("../../../../src/utils/direct-messages"),
+    startDmOnFirstMessage: jest.fn(),
+}));
 
 jest.mock("../../../../src/dispatcher/dispatcher");
 
@@ -80,6 +88,22 @@ const mockRoom = mocked({
     getEventReadUpTo: jest.fn(),
 } as unknown as Room);
 
+const mockSpace = mocked({
+    roomId: "!fkfk",
+    getType: jest.fn().mockReturnValue("m.space"),
+    isSpaceRoom: jest.fn().mockReturnValue(true),
+    getMember: jest.fn().mockReturnValue(undefined),
+    getMxcAvatarUrl: jest.fn().mockReturnValue("mock-avatar-url"),
+    name: "test room",
+    on: jest.fn(),
+    off: jest.fn(),
+    currentState: {
+        getStateEvents: jest.fn(),
+        on: jest.fn(),
+    },
+    getEventReadUpTo: jest.fn(),
+} as unknown as Room);
+
 const mockClient = mocked({
     getUser: jest.fn(),
     isGuest: jest.fn().mockReturnValue(false),
@@ -105,7 +129,7 @@ const mockClient = mocked({
     setPowerLevel: jest.fn(),
 } as unknown as MatrixClient);
 
-const defaultUserId = "@test:test";
+const defaultUserId = "@user:example.com";
 const defaultUser = new User(defaultUserId);
 
 beforeEach(() => {
@@ -258,7 +282,7 @@ describe("<UserInfoHeader />", () => {
 });
 
 describe("<DeviceItem />", () => {
-    const device: IDevice = { deviceId: "deviceId", getDisplayName: () => "deviceName" };
+    const device = { deviceId: "deviceId", getDisplayName: () => "deviceName" } as DeviceInfo;
     const defaultProps = {
         userId: defaultUserId,
         device,
@@ -404,7 +428,7 @@ describe("<UserOptionsSection />", () => {
         expect(screen.getByRole("button", { name: /share link to user/i })).toBeInTheDocument();
     });
 
-    it("does not show ignore or direct message buttons when member userId matches client userId ", () => {
+    it("does not show ignore or direct message buttons when member userId matches client userId", () => {
         mockClient.getUserId.mockReturnValueOnce(member.userId);
         renderComponent();
 
@@ -412,7 +436,7 @@ describe("<UserOptionsSection />", () => {
         expect(screen.queryByRole("button", { name: /message/i })).not.toBeInTheDocument();
     });
 
-    it("shows ignore, direct message and mention buttons when member userId does not match client userId ", () => {
+    it("shows ignore, direct message and mention buttons when member userId does not match client userId", () => {
         // call to client.getUserId returns undefined, which will not match member.userId
         renderComponent();
 
@@ -534,23 +558,6 @@ describe("<UserOptionsSection />", () => {
         });
     });
 
-    it("calling .invite with a null roomId still calls .invite and shows default error message", async () => {
-        inviteSpy.mockRejectedValue({ this: "could be anything" });
-
-        // render the component and click the button
-        renderComponent({ canInvite: true, member: { ...member, roomId: null } });
-        const inviteButton = screen.getByRole("button", { name: /invite/i });
-        expect(inviteButton).toBeInTheDocument();
-        await userEvent.click(inviteButton);
-
-        expect(inviteSpy).toHaveBeenCalledTimes(1);
-
-        // check that the default test error message is displayed
-        await waitFor(() => {
-            expect(screen.getByText(/operation failed/i)).toBeInTheDocument();
-        });
-    });
-
     it("shows a modal before ignoring the user", async () => {
         const originalCreateDialog = Modal.createDialog;
         const modalSpy = (Modal.createDialog = jest.fn().mockReturnValue({
@@ -596,6 +603,39 @@ describe("<UserOptionsSection />", () => {
         await userEvent.click(screen.getByRole("button", { name: "Unignore" }));
         expect(mockClient.setIgnoredUsers).toHaveBeenCalledWith([]);
     });
+
+    it.each([
+        ["for a RoomMember", member, member.getMxcAvatarUrl()],
+        ["for a User", defaultUser, defaultUser.avatarUrl],
+    ])(
+        "clicking »message« %s should start a DM",
+        async (test: string, member: RoomMember | User, expectedAvatarUrl: string | undefined) => {
+            const deferred = defer<string>();
+            mocked(startDmOnFirstMessage).mockReturnValue(deferred.promise);
+
+            renderComponent({ member });
+            await userEvent.click(screen.getByText("Message"));
+
+            // Checking the attribute, because the button is a DIV and toBeDisabled() does not work.
+            expect(screen.getByText("Message")).toHaveAttribute("disabled");
+
+            expect(startDmOnFirstMessage).toHaveBeenCalledWith(mockClient, [
+                new DirectoryMember({
+                    user_id: member.userId,
+                    display_name: member.rawDisplayName,
+                    avatar_url: expectedAvatarUrl,
+                }),
+            ]);
+
+            await act(async () => {
+                deferred.resolve("!dm:example.com");
+                await flushPromises();
+            });
+
+            // Checking the attribute, because the button is a DIV and toBeDisabled() does not work.
+            expect(screen.getByText("Message")).not.toHaveAttribute("disabled");
+        },
+    );
 });
 
 describe("<PowerLevelEditor />", () => {
@@ -722,14 +762,14 @@ describe("<RoomKickButton />", () => {
     it("clicking the kick button calls Modal.createDialog with the correct arguments", async () => {
         createDialogSpy.mockReturnValueOnce({ finished: Promise.resolve([]), close: jest.fn() });
 
-        renderComponent({ member: memberWithInviteMembership });
+        renderComponent({ room: mockSpace, member: memberWithInviteMembership });
         await userEvent.click(screen.getByText(/disinvite from/i));
 
         // check the last call arguments and the presence of the spaceChildFilter callback
         expect(createDialogSpy).toHaveBeenLastCalledWith(
             expect.any(Function),
             expect.objectContaining({ spaceChildFilter: expect.any(Function) }),
-            undefined,
+            "mx_ConfirmSpaceUserActionDialog_wrapper",
         );
 
         // test the spaceChildFilter callback
@@ -806,14 +846,14 @@ describe("<BanToggleButton />", () => {
     it("clicking the ban or unban button calls Modal.createDialog with the correct arguments if user is not banned", async () => {
         createDialogSpy.mockReturnValueOnce({ finished: Promise.resolve([]), close: jest.fn() });
 
-        renderComponent();
+        renderComponent({ room: mockSpace });
         await userEvent.click(screen.getByText(/ban from/i));
 
         // check the last call arguments and the presence of the spaceChildFilter callback
         expect(createDialogSpy).toHaveBeenLastCalledWith(
             expect.any(Function),
             expect.objectContaining({ spaceChildFilter: expect.any(Function) }),
-            undefined,
+            "mx_ConfirmSpaceUserActionDialog_wrapper",
         );
 
         // test the spaceChildFilter callback
@@ -844,14 +884,14 @@ describe("<BanToggleButton />", () => {
     it("clicking the ban or unban button calls Modal.createDialog with the correct arguments if user _is_ banned", async () => {
         createDialogSpy.mockReturnValueOnce({ finished: Promise.resolve([]), close: jest.fn() });
 
-        renderComponent({ member: memberWithBanMembership });
+        renderComponent({ room: mockSpace, member: memberWithBanMembership });
         await userEvent.click(screen.getByText(/ban from/i));
 
         // check the last call arguments and the presence of the spaceChildFilter callback
         expect(createDialogSpy).toHaveBeenLastCalledWith(
             expect.any(Function),
             expect.objectContaining({ spaceChildFilter: expect.any(Function) }),
-            undefined,
+            "mx_ConfirmSpaceUserActionDialog_wrapper",
         );
 
         // test the spaceChildFilter callback
@@ -955,9 +995,9 @@ describe("<RoomAdminToolsContainer />", () => {
 describe("disambiguateDevices", () => {
     it("does not add ambiguous key to unique names", () => {
         const initialDevices = [
-            { deviceId: "id1", getDisplayName: () => "name1" },
-            { deviceId: "id2", getDisplayName: () => "name2" },
-            { deviceId: "id3", getDisplayName: () => "name3" },
+            { deviceId: "id1", getDisplayName: () => "name1" } as DeviceInfo,
+            { deviceId: "id2", getDisplayName: () => "name2" } as DeviceInfo,
+            { deviceId: "id3", getDisplayName: () => "name3" } as DeviceInfo,
         ];
         disambiguateDevices(initialDevices);
 
@@ -969,14 +1009,14 @@ describe("disambiguateDevices", () => {
 
     it("adds ambiguous key to all ids with non-unique names", () => {
         const uniqueNameDevices = [
-            { deviceId: "id3", getDisplayName: () => "name3" },
-            { deviceId: "id4", getDisplayName: () => "name4" },
-            { deviceId: "id6", getDisplayName: () => "name6" },
+            { deviceId: "id3", getDisplayName: () => "name3" } as DeviceInfo,
+            { deviceId: "id4", getDisplayName: () => "name4" } as DeviceInfo,
+            { deviceId: "id6", getDisplayName: () => "name6" } as DeviceInfo,
         ];
         const nonUniqueNameDevices = [
-            { deviceId: "id1", getDisplayName: () => "nonUnique" },
-            { deviceId: "id2", getDisplayName: () => "nonUnique" },
-            { deviceId: "id5", getDisplayName: () => "nonUnique" },
+            { deviceId: "id1", getDisplayName: () => "nonUnique" } as DeviceInfo,
+            { deviceId: "id2", getDisplayName: () => "nonUnique" } as DeviceInfo,
+            { deviceId: "id5", getDisplayName: () => "nonUnique" } as DeviceInfo,
         ];
         const initialDevices = [...uniqueNameDevices, ...nonUniqueNameDevices];
         disambiguateDevices(initialDevices);
diff --git a/test/components/views/rooms/EventTile/EventTileThreadToolbar-test.tsx b/test/components/views/rooms/EventTile/EventTileThreadToolbar-test.tsx
new file mode 100644
index 00000000000..8c9bff2f1c2
--- /dev/null
+++ b/test/components/views/rooms/EventTile/EventTileThreadToolbar-test.tsx
@@ -0,0 +1,53 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { getByLabelText, render, RenderResult } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import { ComponentProps } from "react";
+
+import { EventTileThreadToolbar } from "../../../../../src/components/views/rooms/EventTile/EventTileThreadToolbar";
+
+describe("EventTileThreadToolbar", () => {
+    const viewInRoom = jest.fn();
+    const copyLink = jest.fn();
+
+    function renderComponent(props: Partial<ComponentProps<typeof EventTileThreadToolbar>> = {}): RenderResult {
+        return render(<EventTileThreadToolbar viewInRoom={viewInRoom} copyLinkToThread={copyLink} {...props} />);
+    }
+
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it("renders", () => {
+        const { asFragment } = renderComponent();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("calls the right callbacks", async () => {
+        const { container } = renderComponent();
+
+        const copyBtn = getByLabelText(container, "Copy link to thread");
+        const viewInRoomBtn = getByLabelText(container, "View in room");
+
+        await userEvent.click(copyBtn);
+        expect(copyLink).toHaveBeenCalledTimes(1);
+
+        await userEvent.click(viewInRoomBtn);
+        expect(viewInRoom).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/test/components/views/rooms/EventTile/__snapshots__/EventTileThreadToolbar-test.tsx.snap b/test/components/views/rooms/EventTile/__snapshots__/EventTileThreadToolbar-test.tsx.snap
new file mode 100644
index 00000000000..133531b447f
--- /dev/null
+++ b/test/components/views/rooms/EventTile/__snapshots__/EventTileThreadToolbar-test.tsx.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EventTileThreadToolbar renders 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Message Actions"
+    aria-live="off"
+    class="mx_MessageActionBar"
+    role="toolbar"
+  >
+    <div
+      aria-label="View in room"
+      class="mx_AccessibleButton mx_MessageActionBar_iconButton"
+      role="button"
+      tabindex="0"
+    >
+      <div />
+    </div>
+    <div
+      aria-label="Copy link to thread"
+      class="mx_AccessibleButton mx_MessageActionBar_iconButton"
+      role="button"
+      tabindex="-1"
+    >
+      <div />
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/test/components/views/rooms/ExtraTile-test.tsx b/test/components/views/rooms/ExtraTile-test.tsx
new file mode 100644
index 00000000000..70a439110c0
--- /dev/null
+++ b/test/components/views/rooms/ExtraTile-test.tsx
@@ -0,0 +1,61 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { getByRole, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React, { ComponentProps } from "react";
+
+import ExtraTile from "../../../../src/components/views/rooms/ExtraTile";
+
+describe("ExtraTile", () => {
+    function renderComponent(props: Partial<ComponentProps<typeof ExtraTile>> = {}) {
+        const defaultProps: ComponentProps<typeof ExtraTile> = {
+            isMinimized: false,
+            isSelected: false,
+            displayName: "test",
+            avatar: <React.Fragment />,
+            onClick: () => {},
+        };
+        return render(<ExtraTile {...defaultProps} {...props} />);
+    }
+
+    it("renders", () => {
+        const { asFragment } = renderComponent();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("hides text when minimized", () => {
+        const { container } = renderComponent({
+            isMinimized: true,
+            displayName: "testDisplayName",
+        });
+        expect(container).not.toHaveTextContent("testDisplayName");
+    });
+
+    it("registers clicks", async () => {
+        const onClick = jest.fn();
+
+        const { container } = renderComponent({
+            onClick,
+        });
+
+        const btn = getByRole(container, "treeitem");
+
+        await userEvent.click(btn);
+
+        expect(onClick).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/test/components/views/rooms/MemberList-test.tsx b/test/components/views/rooms/MemberList-test.tsx
index 735425c738a..6f364bff2a8 100644
--- a/test/components/views/rooms/MemberList-test.tsx
+++ b/test/components/views/rooms/MemberList-test.tsx
@@ -15,9 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { Component } from "react";
-import ReactTestUtils from "react-dom/test-utils";
-import ReactDOM from "react-dom";
+import React from "react";
+import { act, render, RenderResult } from "@testing-library/react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { User } from "matrix-js-sdk/src/models/user";
@@ -27,7 +26,6 @@ import { MatrixClient, RoomState } from "matrix-js-sdk/src/matrix";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import * as TestUtils from "../../../test-utils";
 import MemberList from "../../../../src/components/views/rooms/MemberList";
-import MemberTile from "../../../../src/components/views/rooms/MemberTile";
 import { SDKContext } from "../../../../src/contexts/SDKContext";
 import { TestSdkContext } from "../../../TestSdkContext";
 
@@ -44,9 +42,8 @@ describe("MemberList", () => {
         return room;
     }
 
-    let parentDiv: HTMLDivElement;
     let client: MatrixClient;
-    let root: Component;
+    let root: RenderResult;
     let memberListRoom: Room;
     let memberList: MemberList;
 
@@ -54,110 +51,40 @@ describe("MemberList", () => {
     let moderatorUsers: RoomMember[] = [];
     let defaultUsers: RoomMember[] = [];
 
-    beforeEach(function () {
-        TestUtils.stubClient();
-        client = MatrixClientPeg.get();
-        client.hasLazyLoadMembersEnabled = () => false;
-
-        parentDiv = document.createElement("div");
-        document.body.appendChild(parentDiv);
-
-        // Make room
-        memberListRoom = createRoom();
-        expect(memberListRoom.roomId).toBeTruthy();
-
-        // Make users
-        adminUsers = [];
-        moderatorUsers = [];
-        defaultUsers = [];
-        const usersPerLevel = 2;
-        for (let i = 0; i < usersPerLevel; i++) {
-            const adminUser = new RoomMember(memberListRoom.roomId, `@admin${i}:localhost`);
-            adminUser.membership = "join";
-            adminUser.powerLevel = 100;
-            adminUser.user = new User(adminUser.userId);
-            adminUser.user.currentlyActive = true;
-            adminUser.user.presence = "online";
-            adminUser.user.lastPresenceTs = 1000;
-            adminUser.user.lastActiveAgo = 10;
-            adminUsers.push(adminUser);
-
-            const moderatorUser = new RoomMember(memberListRoom.roomId, `@moderator${i}:localhost`);
-            moderatorUser.membership = "join";
-            moderatorUser.powerLevel = 50;
-            moderatorUser.user = new User(moderatorUser.userId);
-            moderatorUser.user.currentlyActive = true;
-            moderatorUser.user.presence = "online";
-            moderatorUser.user.lastPresenceTs = 1000;
-            moderatorUser.user.lastActiveAgo = 10;
-            moderatorUsers.push(moderatorUser);
-
-            const defaultUser = new RoomMember(memberListRoom.roomId, `@default${i}:localhost`);
-            defaultUser.membership = "join";
-            defaultUser.powerLevel = 0;
-            defaultUser.user = new User(defaultUser.userId);
-            defaultUser.user.currentlyActive = true;
-            defaultUser.user.presence = "online";
-            defaultUser.user.lastPresenceTs = 1000;
-            defaultUser.user.lastActiveAgo = 10;
-            defaultUsers.push(defaultUser);
+    function memberString(member: RoomMember): string {
+        if (!member) {
+            return "(null)";
+        } else {
+            const u = member.user;
+            return (
+                "(" +
+                member.name +
+                ", " +
+                member.powerLevel +
+                ", " +
+                (u ? u.lastActiveAgo : "<null>") +
+                ", " +
+                (u ? u.getLastActiveTs() : "<null>") +
+                ", " +
+                (u ? u.currentlyActive : "<null>") +
+                ", " +
+                (u ? u.presence : "<null>") +
+                ")"
+            );
         }
+    }
 
-        client.getRoom = (roomId) => {
-            if (roomId === memberListRoom.roomId) return memberListRoom;
-            else return null;
-        };
-        memberListRoom.currentState = {
-            members: {},
-            getMember: jest.fn(),
-            getStateEvents: ((eventType, stateKey) =>
-                stateKey === undefined ? [] : null) as RoomState["getStateEvents"], // ignore 3pid invites
-        } as unknown as RoomState;
-        for (const member of [...adminUsers, ...moderatorUsers, ...defaultUsers]) {
-            memberListRoom.currentState.members[member.userId] = member;
-        }
-
-        const gatherWrappedRef = (r: MemberList) => {
-            memberList = r;
-        };
-        const context = new TestSdkContext();
-        context.client = client;
-        root = ReactDOM.render(
-            <SDKContext.Provider value={context}>
-                <MemberList
-                    searchQuery=""
-                    onClose={jest.fn()}
-                    onSearchQueryChanged={jest.fn()}
-                    roomId={memberListRoom.roomId}
-                    ref={gatherWrappedRef}
-                />
-            </SDKContext.Provider>,
-            parentDiv,
-        ) as unknown as Component;
-    });
-
-    afterEach((done) => {
-        if (parentDiv) {
-            ReactDOM.unmountComponentAtNode(parentDiv);
-            parentDiv.remove();
-        }
-
-        done();
-    });
-
-    function expectOrderedByPresenceAndPowerLevel(memberTiles: MemberTile[], isPresenceEnabled: boolean) {
+    function expectOrderedByPresenceAndPowerLevel(memberTiles: NodeListOf<Element>, isPresenceEnabled: boolean) {
         let prevMember: RoomMember | undefined;
         for (const tile of memberTiles) {
             const memberA = prevMember;
-            const memberB = tile.props.member;
+            const memberB = memberListRoom.currentState.members[tile.getAttribute("title")!.split(" ")[0]];
             prevMember = memberB; // just in case an expect fails, set this early
             if (!memberA) {
                 continue;
             }
 
-            console.log("COMPARING A VS B:");
-            console.log(memberList.memberString(memberA));
-            console.log(memberList.memberString(memberB));
+            console.log("COMPARING A VS B:", memberString(memberA), memberString(memberB));
 
             const userA = memberA.user!;
             const userB = memberB.user!;
@@ -213,7 +140,86 @@ describe("MemberList", () => {
         }
     }
 
-    function itDoesOrderMembersCorrectly(enablePresence: boolean) {
+    describe.each([false, true])("does order members correctly (presence %s)", (enablePresence) => {
+        beforeEach(function () {
+            TestUtils.stubClient();
+            client = MatrixClientPeg.get();
+            client.hasLazyLoadMembersEnabled = () => false;
+
+            // Make room
+            memberListRoom = createRoom();
+            expect(memberListRoom.roomId).toBeTruthy();
+
+            // Make users
+            adminUsers = [];
+            moderatorUsers = [];
+            defaultUsers = [];
+            const usersPerLevel = 2;
+            for (let i = 0; i < usersPerLevel; i++) {
+                const adminUser = new RoomMember(memberListRoom.roomId, `@admin${i}:localhost`);
+                adminUser.membership = "join";
+                adminUser.powerLevel = 100;
+                adminUser.user = new User(adminUser.userId);
+                adminUser.user.currentlyActive = true;
+                adminUser.user.presence = "online";
+                adminUser.user.lastPresenceTs = 1000;
+                adminUser.user.lastActiveAgo = 10;
+                adminUsers.push(adminUser);
+
+                const moderatorUser = new RoomMember(memberListRoom.roomId, `@moderator${i}:localhost`);
+                moderatorUser.membership = "join";
+                moderatorUser.powerLevel = 50;
+                moderatorUser.user = new User(moderatorUser.userId);
+                moderatorUser.user.currentlyActive = true;
+                moderatorUser.user.presence = "online";
+                moderatorUser.user.lastPresenceTs = 1000;
+                moderatorUser.user.lastActiveAgo = 10;
+                moderatorUsers.push(moderatorUser);
+
+                const defaultUser = new RoomMember(memberListRoom.roomId, `@default${i}:localhost`);
+                defaultUser.membership = "join";
+                defaultUser.powerLevel = 0;
+                defaultUser.user = new User(defaultUser.userId);
+                defaultUser.user.currentlyActive = true;
+                defaultUser.user.presence = "online";
+                defaultUser.user.lastPresenceTs = 1000;
+                defaultUser.user.lastActiveAgo = 10;
+                defaultUsers.push(defaultUser);
+            }
+
+            client.getRoom = (roomId) => {
+                if (roomId === memberListRoom.roomId) return memberListRoom;
+                else return null;
+            };
+            memberListRoom.currentState = {
+                members: {},
+                getMember: jest.fn(),
+                getStateEvents: ((eventType, stateKey) =>
+                    stateKey === undefined ? [] : null) as RoomState["getStateEvents"], // ignore 3pid invites
+            } as unknown as RoomState;
+            for (const member of [...adminUsers, ...moderatorUsers, ...defaultUsers]) {
+                memberListRoom.currentState.members[member.userId] = member;
+            }
+
+            const gatherWrappedRef = (r: MemberList) => {
+                memberList = r;
+            };
+            const context = new TestSdkContext();
+            context.client = client;
+            context.memberListStore.isPresenceEnabled = jest.fn().mockReturnValue(enablePresence);
+            root = render(
+                <SDKContext.Provider value={context}>
+                    <MemberList
+                        searchQuery=""
+                        onClose={jest.fn()}
+                        onSearchQueryChanged={jest.fn()}
+                        roomId={memberListRoom.roomId}
+                        ref={gatherWrappedRef}
+                    />
+                </SDKContext.Provider>,
+            );
+        });
+
         describe("does order members correctly", () => {
             // Note: even if presence is disabled, we still expect that the presence
             // tests will pass. All expectOrderedByPresenceAndPowerLevel does is ensure
@@ -222,7 +228,7 @@ describe("MemberList", () => {
             // Each of the 4 tests here is done to prove that the member list can meet
             // all 4 criteria independently. Together, they should work.
 
-            it("by presence state", () => {
+            it("by presence state", async () => {
                 // Intentionally pick users that will confuse the power level sorting
                 const activeUsers = [defaultUsers[0]];
                 const onlineUsers = [adminUsers[0]];
@@ -241,25 +247,23 @@ describe("MemberList", () => {
                 });
 
                 // Bypass all the event listeners and skip to the good part
-                memberList.showPresence = enablePresence;
-                memberList.updateListNow();
+                await act(() => memberList.updateListNow(true));
 
-                const tiles = ReactTestUtils.scryRenderedComponentsWithType(root, MemberTile);
+                const tiles = root.container.querySelectorAll(".mx_EntityTile");
                 expectOrderedByPresenceAndPowerLevel(tiles, enablePresence);
             });
 
-            it("by power level", () => {
+            it("by power level", async () => {
                 // We already have admin, moderator, and default users so leave them alone
 
                 // Bypass all the event listeners and skip to the good part
-                memberList.showPresence = enablePresence;
-                memberList.updateListNow();
+                await act(() => memberList.updateListNow(true));
 
-                const tiles = ReactTestUtils.scryRenderedComponentsWithType(root, MemberTile);
+                const tiles = root.container.querySelectorAll(".mx_EntityTile");
                 expectOrderedByPresenceAndPowerLevel(tiles, enablePresence);
             });
 
-            it("by last active timestamp", () => {
+            it("by last active timestamp", async () => {
                 // Intentionally pick users that will confuse the power level sorting
                 // lastActiveAgoTs == lastPresenceTs - lastActiveAgo
                 const activeUsers = [defaultUsers[0]];
@@ -282,14 +286,13 @@ describe("MemberList", () => {
                 });
 
                 // Bypass all the event listeners and skip to the good part
-                memberList.showPresence = enablePresence;
-                memberList.updateListNow();
+                await act(() => memberList.updateListNow(true));
 
-                const tiles = ReactTestUtils.scryRenderedComponentsWithType(root, MemberTile);
+                const tiles = root.container.querySelectorAll(".mx_EntityTile");
                 expectOrderedByPresenceAndPowerLevel(tiles, enablePresence);
             });
 
-            it("by name", () => {
+            it("by name", async () => {
                 // Intentionally put everyone on the same level to force a name comparison
                 const allUsers = [...adminUsers, ...moderatorUsers, ...defaultUsers];
                 allUsers.forEach((u) => {
@@ -301,20 +304,11 @@ describe("MemberList", () => {
                 });
 
                 // Bypass all the event listeners and skip to the good part
-                memberList.showPresence = enablePresence;
-                memberList.updateListNow();
+                await act(() => memberList.updateListNow(true));
 
-                const tiles = ReactTestUtils.scryRenderedComponentsWithType(root, MemberTile);
+                const tiles = root.container.querySelectorAll(".mx_EntityTile");
                 expectOrderedByPresenceAndPowerLevel(tiles, enablePresence);
             });
         });
-    }
-
-    describe("when presence is enabled", () => {
-        itDoesOrderMembersCorrectly(true);
-    });
-
-    describe("when presence is not enabled", () => {
-        itDoesOrderMembersCorrectly(false);
     });
 });
diff --git a/test/components/views/rooms/NewRoomIntro-test.tsx b/test/components/views/rooms/NewRoomIntro-test.tsx
index 8989a4f6397..5694aeb5013 100644
--- a/test/components/views/rooms/NewRoomIntro-test.tsx
+++ b/test/components/views/rooms/NewRoomIntro-test.tsx
@@ -20,13 +20,12 @@ import { render, screen } from "@testing-library/react";
 import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 
 import { LocalRoom } from "../../../../src/models/LocalRoom";
-import { createTestClient } from "../../../test-utils";
+import { filterConsole, mkRoomMemberJoinEvent, mkThirdPartyInviteEvent, stubClient } from "../../../test-utils";
 import RoomContext from "../../../../src/contexts/RoomContext";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import NewRoomIntro from "../../../../src/components/views/rooms/NewRoomIntro";
 import { IRoomState } from "../../../../src/components/structures/RoomView";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
-import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { DirectoryMember } from "../../../../src/utils/direct-messages";
 
 const renderNewRoomIntro = (client: MatrixClient, room: Room | LocalRoom) => {
@@ -44,9 +43,10 @@ describe("NewRoomIntro", () => {
     const roomId = "!room:example.com";
     const userId = "@user:example.com";
 
-    beforeEach(() => {
-        client = createTestClient();
-        jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client);
+    filterConsole("Room !room:example.com does not have an m.room.create event");
+
+    beforeAll(() => {
+        client = stubClient();
         DMRoomMap.makeShared();
     });
 
@@ -64,6 +64,24 @@ describe("NewRoomIntro", () => {
         });
     });
 
+    it("should render as expected for a DM room with a single third-party invite", () => {
+        const room = new Room(roomId, client, client.getSafeUserId());
+        room.currentState.setStateEvents([
+            mkRoomMemberJoinEvent(client.getSafeUserId(), room.roomId),
+            mkThirdPartyInviteEvent(client.getSafeUserId(), "user@example.com", room.roomId),
+        ]);
+        jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(userId);
+        jest.spyOn(DMRoomMap.shared(), "getRoomIds").mockReturnValue(new Set([room.roomId]));
+        renderNewRoomIntro(client, room);
+
+        expect(screen.getByText("Once everyone has joined, you’ll be able to chat")).toBeInTheDocument();
+        expect(
+            screen.queryByText(
+                "Only the two of you are in this conversation, unless either of you invites anyone to join.",
+            ),
+        ).not.toBeInTheDocument();
+    });
+
     describe("for a DM LocalRoom", () => {
         beforeEach(() => {
             jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(userId);
diff --git a/test/components/views/rooms/ReadReceiptGroup-test.tsx b/test/components/views/rooms/ReadReceiptGroup-test.tsx
index b0110a2cc2a..12ed0769627 100644
--- a/test/components/views/rooms/ReadReceiptGroup-test.tsx
+++ b/test/components/views/rooms/ReadReceiptGroup-test.tsx
@@ -28,7 +28,7 @@ describe("ReadReceiptGroup", () => {
             expect(readReceiptTooltip(["Alice", "Bob", "Charlie"], true)).toEqual("Alice, Bob, Charlie and more");
             expect(readReceiptTooltip(["Alice", "Bob"], true)).toEqual("Alice, Bob and more");
             expect(readReceiptTooltip(["Alice"], true)).toEqual("Alice and more");
-            expect(readReceiptTooltip([], false)).toEqual(null);
+            expect(readReceiptTooltip([], false)).toBeUndefined();
         });
         it("returns a pretty list without hasMore", () => {
             expect(readReceiptTooltip(["Alice", "Bob", "Charlie", "Dan", "Eve"], false)).toEqual(
@@ -40,7 +40,7 @@ describe("ReadReceiptGroup", () => {
             expect(readReceiptTooltip(["Alice", "Bob", "Charlie"], false)).toEqual("Alice, Bob and Charlie");
             expect(readReceiptTooltip(["Alice", "Bob"], false)).toEqual("Alice and Bob");
             expect(readReceiptTooltip(["Alice"], false)).toEqual("Alice");
-            expect(readReceiptTooltip([], false)).toEqual(null);
+            expect(readReceiptTooltip([], false)).toBeUndefined();
         });
     });
     describe("AvatarPosition", () => {
diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx
index 935745c7610..9cf306a4b09 100644
--- a/test/components/views/rooms/RoomHeader-test.tsx
+++ b/test/components/views/rooms/RoomHeader-test.tsx
@@ -15,9 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
-import { render, screen, act, fireEvent, waitFor, getByRole } from "@testing-library/react";
+import { render, screen, act, fireEvent, waitFor, getByRole, RenderResult } from "@testing-library/react";
 import { mocked, Mocked } from "jest-mock";
 import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
 import { Room } from "matrix-js-sdk/src/models/room";
@@ -60,291 +58,7 @@ import WidgetUtils from "../../../../src/utils/WidgetUtils";
 import { ElementWidgetActions } from "../../../../src/stores/widgets/ElementWidgetActions";
 import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../../src/MediaDeviceHandler";
 
-describe("RoomHeader (Enzyme)", () => {
-    it("shows the room avatar in a room with only ourselves", () => {
-        // When we render a non-DM room with 1 person in it
-        const room = createRoom({ name: "X Room", isDm: false, userIds: [] });
-        const rendered = mountHeader(room);
-
-        // Then the room's avatar is the initial of its name
-        const initial = findSpan(rendered, ".mx_BaseAvatar_initial");
-        expect(initial.text()).toEqual("X");
-
-        // And there is no image avatar (because it's not set on this room)
-        const image = findImg(rendered, ".mx_BaseAvatar_image");
-        expect(image.prop("src")).toEqual("data:image/png;base64,00");
-    });
-
-    it("shows the room avatar in a room with 2 people", () => {
-        // When we render a non-DM room with 2 people in it
-        const room = createRoom({ name: "Y Room", isDm: false, userIds: ["other"] });
-        const rendered = mountHeader(room);
-
-        // Then the room's avatar is the initial of its name
-        const initial = findSpan(rendered, ".mx_BaseAvatar_initial");
-        expect(initial.text()).toEqual("Y");
-
-        // And there is no image avatar (because it's not set on this room)
-        const image = findImg(rendered, ".mx_BaseAvatar_image");
-        expect(image.prop("src")).toEqual("data:image/png;base64,00");
-    });
-
-    it("shows the room avatar in a room with >2 people", () => {
-        // When we render a non-DM room with 3 people in it
-        const room = createRoom({ name: "Z Room", isDm: false, userIds: ["other1", "other2"] });
-        const rendered = mountHeader(room);
-
-        // Then the room's avatar is the initial of its name
-        const initial = findSpan(rendered, ".mx_BaseAvatar_initial");
-        expect(initial.text()).toEqual("Z");
-
-        // And there is no image avatar (because it's not set on this room)
-        const image = findImg(rendered, ".mx_BaseAvatar_image");
-        expect(image.prop("src")).toEqual("data:image/png;base64,00");
-    });
-
-    it("shows the room avatar in a DM with only ourselves", () => {
-        // When we render a non-DM room with 1 person in it
-        const room = createRoom({ name: "Z Room", isDm: true, userIds: [] });
-        const rendered = mountHeader(room);
-
-        // Then the room's avatar is the initial of its name
-        const initial = findSpan(rendered, ".mx_BaseAvatar_initial");
-        expect(initial.text()).toEqual("Z");
-
-        // And there is no image avatar (because it's not set on this room)
-        const image = findImg(rendered, ".mx_BaseAvatar_image");
-        expect(image.prop("src")).toEqual("data:image/png;base64,00");
-    });
-
-    it("shows the user avatar in a DM with 2 people", () => {
-        // Note: this is the interesting case - this is the ONLY
-        //       time we should use the user's avatar.
-
-        // When we render a DM room with only 2 people in it
-        const room = createRoom({ name: "Y Room", isDm: true, userIds: ["other"] });
-        const rendered = mountHeader(room);
-
-        // Then we use the other user's avatar as our room's image avatar
-        const image = findImg(rendered, ".mx_BaseAvatar_image");
-        expect(image.prop("src")).toEqual("http://this.is.a.url/example.org/other");
-
-        // And there is no initial avatar
-        expect(rendered.find(".mx_BaseAvatar_initial")).toHaveLength(0);
-    });
-
-    it("shows the room avatar in a DM with >2 people", () => {
-        // When we render a DM room with 3 people in it
-        const room = createRoom({
-            name: "Z Room",
-            isDm: true,
-            userIds: ["other1", "other2"],
-        });
-        const rendered = mountHeader(room);
-
-        // Then the room's avatar is the initial of its name
-        const initial = findSpan(rendered, ".mx_BaseAvatar_initial");
-        expect(initial.text()).toEqual("Z");
-
-        // And there is no image avatar (because it's not set on this room)
-        const image = findImg(rendered, ".mx_BaseAvatar_image");
-        expect(image.prop("src")).toEqual("data:image/png;base64,00");
-    });
-
-    it("renders call buttons normally", () => {
-        const room = createRoom({ name: "Room", isDm: false, userIds: ["other"] });
-        const wrapper = mountHeader(room);
-
-        expect(wrapper.find('[aria-label="Voice call"]').hostNodes()).toHaveLength(1);
-        expect(wrapper.find('[aria-label="Video call"]').hostNodes()).toHaveLength(1);
-    });
-
-    it("hides call buttons when the room is tombstoned", () => {
-        const room = createRoom({ name: "Room", isDm: false, userIds: [] });
-        const wrapper = mountHeader(
-            room,
-            {},
-            {
-                tombstone: mkEvent({
-                    event: true,
-                    type: "m.room.tombstone",
-                    room: room.roomId,
-                    user: "@user1:server",
-                    skey: "",
-                    content: {},
-                    ts: Date.now(),
-                }),
-            },
-        );
-
-        expect(wrapper.find('[aria-label="Voice call"]').hostNodes()).toHaveLength(0);
-        expect(wrapper.find('[aria-label="Video call"]').hostNodes()).toHaveLength(0);
-    });
-
-    it("should render buttons if not passing showButtons (default true)", () => {
-        const room = createRoom({ name: "Room", isDm: false, userIds: [] });
-        const wrapper = mountHeader(room);
-        expect(wrapper.find(".mx_RoomHeader_button")).not.toHaveLength(0);
-    });
-
-    it("should not render buttons if passing showButtons = false", () => {
-        const room = createRoom({ name: "Room", isDm: false, userIds: [] });
-        const wrapper = mountHeader(room, { showButtons: false });
-        expect(wrapper.find(".mx_RoomHeader_button")).toHaveLength(0);
-    });
-
-    it("should render the room options context menu if not passing enableRoomOptionsMenu (default true)", () => {
-        const room = createRoom({ name: "Room", isDm: false, userIds: [] });
-        const wrapper = mountHeader(room);
-        expect(wrapper.find(".mx_RoomHeader_name.mx_AccessibleButton")).toHaveLength(1);
-    });
-
-    it("should not render the room options context menu if passing enableRoomOptionsMenu = false", () => {
-        const room = createRoom({ name: "Room", isDm: false, userIds: [] });
-        const wrapper = mountHeader(room, { enableRoomOptionsMenu: false });
-        expect(wrapper.find(".mx_RoomHeader_name.mx_AccessibleButton")).toHaveLength(0);
-    });
-});
-
-interface IRoomCreationInfo {
-    name: string;
-    isDm: boolean;
-    userIds: string[];
-}
-
-function createRoom(info: IRoomCreationInfo) {
-    stubClient();
-    const client: MatrixClient = MatrixClientPeg.get();
-
-    const roomId = "!1234567890:domain";
-    const userId = client.getUserId()!;
-    if (info.isDm) {
-        client.getAccountData = (eventType) => {
-            expect(eventType).toEqual("m.direct");
-            return mkDirectEvent(roomId, userId, info.userIds);
-        };
-    }
-
-    DMRoomMap.makeShared().start();
-
-    const room = new Room(roomId, client, userId, {
-        pendingEventOrdering: PendingEventOrdering.Detached,
-    });
-
-    const otherJoinEvents: MatrixEvent[] = [];
-    for (const otherUserId of info.userIds) {
-        otherJoinEvents.push(mkJoinEvent(roomId, otherUserId));
-    }
-
-    room.currentState.setStateEvents([
-        mkCreationEvent(roomId, userId),
-        mkNameEvent(roomId, userId, info.name),
-        mkJoinEvent(roomId, userId),
-        ...otherJoinEvents,
-    ]);
-    room.recalculate();
-
-    return room;
-}
-
-function mountHeader(room: Room, propsOverride = {}, roomContext?: Partial<IRoomState>): ReactWrapper {
-    const props: RoomHeaderProps = {
-        room,
-        inRoom: true,
-        onSearchClick: () => {},
-        onInviteClick: null,
-        onForgetClick: () => {},
-        onAppsClick: () => {},
-        e2eStatus: E2EStatus.Normal,
-        appsShown: true,
-        searchInfo: {
-            searchId: Math.random(),
-            promise: new Promise<ISearchResults>(() => {}),
-            term: "",
-            scope: SearchScope.Room,
-            count: 0,
-        },
-        viewingCall: false,
-        activeCall: null,
-        ...propsOverride,
-    };
-
-    return mount(
-        <RoomContext.Provider value={{ ...roomContext, room } as IRoomState}>
-            <RoomHeader {...props} />
-        </RoomContext.Provider>,
-    );
-}
-
-function mkCreationEvent(roomId: string, userId: string): MatrixEvent {
-    return mkEvent({
-        event: true,
-        type: "m.room.create",
-        room: roomId,
-        user: userId,
-        content: {
-            creator: userId,
-            room_version: "5",
-            predecessor: {
-                room_id: "!prevroom",
-                event_id: "$someevent",
-            },
-        },
-    });
-}
-
-function mkNameEvent(roomId: string, userId: string, name: string): MatrixEvent {
-    return mkEvent({
-        event: true,
-        type: "m.room.name",
-        room: roomId,
-        user: userId,
-        content: { name },
-    });
-}
-
-function mkJoinEvent(roomId: string, userId: string) {
-    const ret = mkEvent({
-        event: true,
-        type: "m.room.member",
-        room: roomId,
-        user: userId,
-        content: {
-            membership: "join",
-            avatar_url: "mxc://example.org/" + userId,
-        },
-    });
-    ret.event.state_key = userId;
-    return ret;
-}
-
-function mkDirectEvent(roomId: string, userId: string, otherUsers: string[]): MatrixEvent {
-    const content: Record<string, string[]> = {};
-    for (const otherUserId of otherUsers) {
-        content[otherUserId] = [roomId];
-    }
-    return mkEvent({
-        event: true,
-        type: "m.direct",
-        room: roomId,
-        user: userId,
-        content,
-    });
-}
-
-function findSpan(wrapper: ReactWrapper, selector: string): ReactWrapper {
-    const els = wrapper.find(selector).hostNodes();
-    expect(els).toHaveLength(1);
-    return els.at(0);
-}
-
-function findImg(wrapper: ReactWrapper, selector: string): ReactWrapper {
-    const els = wrapper.find(selector).hostNodes();
-    expect(els).toHaveLength(1);
-    return els.at(0);
-}
-
-describe("RoomHeader (React Testing Library)", () => {
+describe("RoomHeader", () => {
     let client: Mocked<MatrixClient>;
     let room: Room;
     let alice: RoomMember;
@@ -397,6 +111,9 @@ describe("RoomHeader (React Testing Library)", () => {
             [MediaDeviceKindEnum.VideoInput]: [],
             [MediaDeviceKindEnum.AudioOutput]: [],
         });
+
+        DMRoomMap.makeShared();
+        jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(carol.userId);
     });
 
     afterEach(async () => {
@@ -879,4 +596,274 @@ describe("RoomHeader (React Testing Library)", () => {
 
         expect(screen.queryByRole("button", { name: /invite/i })).toBeNull();
     });
+
+    it("shows the room avatar in a room with only ourselves", () => {
+        // When we render a non-DM room with 1 person in it
+        const room = createRoom({ name: "X Room", isDm: false, userIds: [] });
+        const rendered = mountHeader(room);
+
+        // Then the room's avatar is the initial of its name
+        const initial = rendered.container.querySelector(".mx_BaseAvatar_initial");
+        expect(initial).toHaveTextContent("X");
+
+        // And there is no image avatar (because it's not set on this room)
+        const image = rendered.container.querySelector(".mx_BaseAvatar_image");
+        expect(image).toHaveAttribute("src", "data:image/png;base64,00");
+    });
+
+    it("shows the room avatar in a room with 2 people", () => {
+        // When we render a non-DM room with 2 people in it
+        const room = createRoom({ name: "Y Room", isDm: false, userIds: ["other"] });
+        const rendered = mountHeader(room);
+
+        // Then the room's avatar is the initial of its name
+        const initial = rendered.container.querySelector(".mx_BaseAvatar_initial");
+        expect(initial).toHaveTextContent("Y");
+
+        // And there is no image avatar (because it's not set on this room)
+        const image = rendered.container.querySelector(".mx_BaseAvatar_image");
+        expect(image).toHaveAttribute("src", "data:image/png;base64,00");
+    });
+
+    it("shows the room avatar in a room with >2 people", () => {
+        // When we render a non-DM room with 3 people in it
+        const room = createRoom({ name: "Z Room", isDm: false, userIds: ["other1", "other2"] });
+        const rendered = mountHeader(room);
+
+        // Then the room's avatar is the initial of its name
+        const initial = rendered.container.querySelector(".mx_BaseAvatar_initial");
+        expect(initial).toHaveTextContent("Z");
+
+        // And there is no image avatar (because it's not set on this room)
+        const image = rendered.container.querySelector(".mx_BaseAvatar_image");
+        expect(image).toHaveAttribute("src", "data:image/png;base64,00");
+    });
+
+    it("shows the room avatar in a DM with only ourselves", () => {
+        // When we render a non-DM room with 1 person in it
+        const room = createRoom({ name: "Z Room", isDm: true, userIds: [] });
+        const rendered = mountHeader(room);
+
+        // Then the room's avatar is the initial of its name
+        const initial = rendered.container.querySelector(".mx_BaseAvatar_initial");
+        expect(initial).toHaveTextContent("Z");
+
+        // And there is no image avatar (because it's not set on this room)
+        const image = rendered.container.querySelector(".mx_BaseAvatar_image");
+        expect(image).toHaveAttribute("src", "data:image/png;base64,00");
+    });
+
+    it("shows the user avatar in a DM with 2 people", () => {
+        // Note: this is the interesting case - this is the ONLY
+        //       time we should use the user's avatar.
+
+        // When we render a DM room with only 2 people in it
+        const room = createRoom({ name: "Y Room", isDm: true, userIds: ["other"] });
+        const rendered = mountHeader(room);
+
+        // Then we use the other user's avatar as our room's image avatar
+        const image = rendered.container.querySelector(".mx_BaseAvatar_image");
+        expect(image).toHaveAttribute("src", "http://this.is.a.url/example.org/other");
+
+        // And there is no initial avatar
+        expect(rendered.container.querySelector(".mx_BaseAvatar_initial")).toBeFalsy();
+    });
+
+    it("shows the room avatar in a DM with >2 people", () => {
+        // When we render a DM room with 3 people in it
+        const room = createRoom({
+            name: "Z Room",
+            isDm: true,
+            userIds: ["other1", "other2"],
+        });
+        const rendered = mountHeader(room);
+
+        // Then the room's avatar is the initial of its name
+        const initial = rendered.container.querySelector(".mx_BaseAvatar_initial");
+        expect(initial).toHaveTextContent("Z");
+
+        // And there is no image avatar (because it's not set on this room)
+        const image = rendered.container.querySelector(".mx_BaseAvatar_image");
+        expect(image).toHaveAttribute("src", "data:image/png;base64,00");
+    });
+
+    it("renders call buttons normally", () => {
+        const room = createRoom({ name: "Room", isDm: false, userIds: ["other"] });
+        const wrapper = mountHeader(room);
+
+        expect(wrapper.container.querySelector('[aria-label="Voice call"]')).toBeDefined();
+        expect(wrapper.container.querySelector('[aria-label="Video call"]')).toBeDefined();
+    });
+
+    it("hides call buttons when the room is tombstoned", () => {
+        const room = createRoom({ name: "Room", isDm: false, userIds: [] });
+        const wrapper = mountHeader(
+            room,
+            {},
+            {
+                tombstone: mkEvent({
+                    event: true,
+                    type: "m.room.tombstone",
+                    room: room.roomId,
+                    user: "@user1:server",
+                    skey: "",
+                    content: {},
+                    ts: Date.now(),
+                }),
+            },
+        );
+
+        expect(wrapper.container.querySelector('[aria-label="Voice call"]')).toBeFalsy();
+        expect(wrapper.container.querySelector('[aria-label="Video call"]')).toBeFalsy();
+    });
+
+    it("should render buttons if not passing showButtons (default true)", () => {
+        const room = createRoom({ name: "Room", isDm: false, userIds: [] });
+        const wrapper = mountHeader(room);
+        expect(wrapper.container.querySelector(".mx_RoomHeader_button")).toBeDefined();
+    });
+
+    it("should not render buttons if passing showButtons = false", () => {
+        const room = createRoom({ name: "Room", isDm: false, userIds: [] });
+        const wrapper = mountHeader(room, { showButtons: false });
+        expect(wrapper.container.querySelector(".mx_RoomHeader_button")).toBeFalsy();
+    });
+
+    it("should render the room options context menu if not passing enableRoomOptionsMenu (default true)", () => {
+        const room = createRoom({ name: "Room", isDm: false, userIds: [] });
+        const wrapper = mountHeader(room);
+        expect(wrapper.container.querySelector(".mx_RoomHeader_name.mx_AccessibleButton")).toBeDefined();
+    });
+
+    it("should not render the room options context menu if passing enableRoomOptionsMenu = false", () => {
+        const room = createRoom({ name: "Room", isDm: false, userIds: [] });
+        const wrapper = mountHeader(room, { enableRoomOptionsMenu: false });
+        expect(wrapper.container.querySelector(".mx_RoomHeader_name.mx_AccessibleButton")).toBeFalsy();
+    });
 });
+
+interface IRoomCreationInfo {
+    name: string;
+    isDm: boolean;
+    userIds: string[];
+}
+
+function createRoom(info: IRoomCreationInfo) {
+    stubClient();
+    const client: MatrixClient = MatrixClientPeg.get();
+
+    const roomId = "!1234567890:domain";
+    const userId = client.getUserId()!;
+    if (info.isDm) {
+        client.getAccountData = (eventType) => {
+            expect(eventType).toEqual("m.direct");
+            return mkDirectEvent(roomId, userId, info.userIds);
+        };
+    }
+
+    DMRoomMap.makeShared().start();
+
+    const room = new Room(roomId, client, userId, {
+        pendingEventOrdering: PendingEventOrdering.Detached,
+    });
+
+    const otherJoinEvents: MatrixEvent[] = [];
+    for (const otherUserId of info.userIds) {
+        otherJoinEvents.push(mkJoinEvent(roomId, otherUserId));
+    }
+
+    room.currentState.setStateEvents([
+        mkCreationEvent(roomId, userId),
+        mkNameEvent(roomId, userId, info.name),
+        mkJoinEvent(roomId, userId),
+        ...otherJoinEvents,
+    ]);
+    room.recalculate();
+
+    return room;
+}
+
+function mountHeader(room: Room, propsOverride = {}, roomContext?: Partial<IRoomState>): RenderResult {
+    const props: RoomHeaderProps = {
+        room,
+        inRoom: true,
+        onSearchClick: () => {},
+        onInviteClick: null,
+        onForgetClick: () => {},
+        onAppsClick: () => {},
+        e2eStatus: E2EStatus.Normal,
+        appsShown: true,
+        searchInfo: {
+            searchId: Math.random(),
+            promise: new Promise<ISearchResults>(() => {}),
+            term: "",
+            scope: SearchScope.Room,
+            count: 0,
+        },
+        viewingCall: false,
+        activeCall: null,
+        ...propsOverride,
+    };
+
+    return render(
+        <RoomContext.Provider value={{ ...roomContext, room } as IRoomState}>
+            <RoomHeader {...props} />
+        </RoomContext.Provider>,
+    );
+}
+
+function mkCreationEvent(roomId: string, userId: string): MatrixEvent {
+    return mkEvent({
+        event: true,
+        type: "m.room.create",
+        room: roomId,
+        user: userId,
+        content: {
+            creator: userId,
+            room_version: "5",
+            predecessor: {
+                room_id: "!prevroom",
+                event_id: "$someevent",
+            },
+        },
+    });
+}
+
+function mkNameEvent(roomId: string, userId: string, name: string): MatrixEvent {
+    return mkEvent({
+        event: true,
+        type: "m.room.name",
+        room: roomId,
+        user: userId,
+        content: { name },
+    });
+}
+
+function mkJoinEvent(roomId: string, userId: string) {
+    const ret = mkEvent({
+        event: true,
+        type: "m.room.member",
+        room: roomId,
+        user: userId,
+        content: {
+            membership: "join",
+            avatar_url: "mxc://example.org/" + userId,
+        },
+    });
+    ret.event.state_key = userId;
+    return ret;
+}
+
+function mkDirectEvent(roomId: string, userId: string, otherUsers: string[]): MatrixEvent {
+    const content: Record<string, string[]> = {};
+    for (const otherUserId of otherUsers) {
+        content[otherUserId] = [roomId];
+    }
+    return mkEvent({
+        event: true,
+        type: "m.direct",
+        room: roomId,
+        user: userId,
+        content,
+    });
+}
diff --git a/test/components/views/rooms/RoomPreviewBar-test.tsx b/test/components/views/rooms/RoomPreviewBar-test.tsx
index 18484f8feb5..b6566132ac6 100644
--- a/test/components/views/rooms/RoomPreviewBar-test.tsx
+++ b/test/components/views/rooms/RoomPreviewBar-test.tsx
@@ -73,6 +73,7 @@ describe("<RoomPreviewBar />", () => {
 
     const getComponent = (props: ComponentProps<typeof RoomPreviewBar> = {}) => {
         const defaultProps = {
+            roomId,
             room: createRoom(roomId, userId),
         };
         return render(<RoomPreviewBar {...defaultProps} {...props} />);
diff --git a/test/components/views/rooms/SendMessageComposer-test.tsx b/test/components/views/rooms/SendMessageComposer-test.tsx
index 17b977077df..db05bb77e03 100644
--- a/test/components/views/rooms/SendMessageComposer-test.tsx
+++ b/test/components/views/rooms/SendMessageComposer-test.tsx
@@ -281,7 +281,7 @@ describe("<SendMessageComposer/>", () => {
 
         it("correctly sends a message", () => {
             mocked(doMaybeLocalRoomAction).mockImplementation(
-                <T extends {}>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
+                <T,>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
                     return fn(roomId);
                 },
             );
@@ -300,7 +300,7 @@ describe("<SendMessageComposer/>", () => {
 
         it("shows chat effects on message sending", () => {
             mocked(doMaybeLocalRoomAction).mockImplementation(
-                <T extends {}>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
+                <T,>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
                     return fn(roomId);
                 },
             );
@@ -321,7 +321,7 @@ describe("<SendMessageComposer/>", () => {
 
         it("not to send chat effects on message sending for threads", () => {
             mocked(doMaybeLocalRoomAction).mockImplementation(
-                <T extends {}>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
+                <T,>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
                     return fn(roomId);
                 },
             );
diff --git a/test/components/views/rooms/VoiceRecordComposerTile-test.tsx b/test/components/views/rooms/VoiceRecordComposerTile-test.tsx
index e9f7615cca0..6e7c24576fc 100644
--- a/test/components/views/rooms/VoiceRecordComposerTile-test.tsx
+++ b/test/components/views/rooms/VoiceRecordComposerTile-test.tsx
@@ -14,25 +14,36 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import React, { createRef, RefObject } from "react";
+import { render } from "@testing-library/react";
 import { MatrixClient, MsgType, Room } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 
 import VoiceRecordComposerTile from "../../../../src/components/views/rooms/VoiceRecordComposerTile";
-import { VoiceRecording } from "../../../../src/audio/VoiceRecording";
 import { doMaybeLocalRoomAction } from "../../../../src/utils/local-room";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import { IUpload } from "../../../../src/audio/VoiceMessageRecording";
+import { IUpload, VoiceMessageRecording } from "../../../../src/audio/VoiceMessageRecording";
+import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
+import { VoiceRecordingStore } from "../../../../src/stores/VoiceRecordingStore";
+import { PlaybackClock } from "../../../../src/audio/PlaybackClock";
 
 jest.mock("../../../../src/utils/local-room", () => ({
     doMaybeLocalRoomAction: jest.fn(),
 }));
 
+jest.mock("../../../../src/stores/VoiceRecordingStore", () => ({
+    VoiceRecordingStore: {
+        getVoiceRecordingId: jest.fn().mockReturnValue("voice-recording-id"),
+        instance: {
+            getActiveRecording: jest.fn(),
+            disposeRecording: jest.fn(),
+        },
+    },
+}));
+
 describe("<VoiceRecordComposerTile/>", () => {
-    let voiceRecordComposerTile: ReactWrapper<VoiceRecordComposerTile>;
-    let mockRecorder: VoiceRecording;
+    let voiceRecordComposerTile: RefObject<VoiceRecordComposerTile>;
+    let mockRecorder: VoiceMessageRecording;
     let mockUpload: IUpload;
     let mockClient: MatrixClient;
     const roomId = "!room:example.com";
@@ -43,30 +54,48 @@ describe("<VoiceRecordComposerTile/>", () => {
         } as unknown as MatrixClient;
         MatrixClientPeg.get = () => mockClient;
 
+        const room = {
+            roomId,
+        } as unknown as Room;
+
+        voiceRecordComposerTile = createRef();
         const props = {
-            room: {
-                roomId,
-            } as unknown as Room,
+            room,
+            ref: voiceRecordComposerTile,
+            permalinkCreator: new RoomPermalinkCreator(room),
         };
         mockUpload = {
             mxc: "mxc://example.com/voice",
         };
         mockRecorder = {
+            on: jest.fn(),
+            off: jest.fn(),
             stop: jest.fn(),
             upload: () => Promise.resolve(mockUpload),
             durationSeconds: 1337,
             contentType: "audio/ogg",
             getPlayback: () => ({
+                on: jest.fn(),
+                off: jest.fn(),
+                prepare: jest.fn().mockResolvedValue(void 0),
+                clockInfo: {
+                    timeSeconds: 0,
+                    liveData: {
+                        onUpdate: jest.fn(),
+                    },
+                } as unknown as PlaybackClock,
+                waveform: [1.4, 2.5, 3.6],
+                waveformData: {
+                    onUpdate: jest.fn(),
+                },
                 thumbnailWaveform: [1.4, 2.5, 3.6],
             }),
-        } as unknown as VoiceRecording;
-        voiceRecordComposerTile = mount(<VoiceRecordComposerTile {...props} />);
-        voiceRecordComposerTile.setState({
-            recorder: mockRecorder,
-        });
+        } as unknown as VoiceMessageRecording;
+        mocked(VoiceRecordingStore.instance.getActiveRecording).mockReturnValue(mockRecorder);
+        render(<VoiceRecordComposerTile {...props} />);
 
         mocked(doMaybeLocalRoomAction).mockImplementation(
-            <T extends {}>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
+            <T,>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
                 return fn(roomId);
             },
         );
@@ -74,7 +103,7 @@ describe("<VoiceRecordComposerTile/>", () => {
 
     describe("send", () => {
         it("should send the voice recording", async () => {
-            await (voiceRecordComposerTile.instance() as VoiceRecordComposerTile).send();
+            await voiceRecordComposerTile.current!.send();
             expect(mockClient.sendMessage).toHaveBeenCalledWith(roomId, {
                 "body": "Voice message",
                 "file": undefined,
diff --git a/test/components/views/rooms/__snapshots__/ExtraTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/ExtraTile-test.tsx.snap
new file mode 100644
index 00000000000..137dde17454
--- /dev/null
+++ b/test/components/views/rooms/__snapshots__/ExtraTile-test.tsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExtraTile renders 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_AccessibleButton mx_ExtraTile mx_RoomTile"
+    role="treeitem"
+    tabindex="-1"
+  >
+    <div
+      class="mx_RoomTile_avatarContainer"
+    />
+    <div
+      class="mx_RoomTile_details"
+    >
+      <div
+        class="mx_RoomTile_primaryDetails"
+      >
+        <div
+          class="mx_RoomTile_titleContainer"
+        >
+          <div
+            class="mx_RoomTile_title"
+            dir="auto"
+            tabindex="-1"
+            title="test"
+          >
+            test
+          </div>
+        </div>
+        <div
+          class="mx_RoomTile_badgeContainer"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
index 7b7b87e8be9..0098859ea22 100644
--- a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
@@ -177,12 +177,12 @@ describe("EditWysiwygComposer", () => {
             screen.getByText("Cancel").click();
 
             // Then
-            expect(spyDispatcher).toBeCalledWith({
+            expect(spyDispatcher).toHaveBeenCalledWith({
                 action: Action.EditEvent,
                 event: null,
                 timelineRenderingType: defaultRoomContext.timelineRenderingType,
             });
-            expect(spyDispatcher).toBeCalledWith({
+            expect(spyDispatcher).toHaveBeenCalledWith({
                 action: Action.FocusSendMessageComposer,
                 context: defaultRoomContext.timelineRenderingType,
             });
@@ -215,10 +215,10 @@ describe("EditWysiwygComposer", () => {
                 "msgtype": "m.text",
             };
             await waitFor(() =>
-                expect(mockClient.sendMessage).toBeCalledWith(mockEvent.getRoomId(), null, expectedContent),
+                expect(mockClient.sendMessage).toHaveBeenCalledWith(mockEvent.getRoomId(), null, expectedContent),
             );
 
-            expect(spyDispatcher).toBeCalledWith({ action: "message_sent" });
+            expect(spyDispatcher).toHaveBeenCalledWith({ action: "message_sent" });
         });
     });
 
diff --git a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
index 852354f0ba5..f7ae116720d 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
@@ -38,12 +38,12 @@ describe("LinkModal", () => {
         isForward: true,
     };
 
-    const customRender = (isTextEnabled: boolean, onClose: () => void, isEditing = false) => {
+    const customRender = (isTextEnabled: boolean, onFinished: () => void, isEditing = false) => {
         return render(
             <LinkModal
                 composer={formattingFunctions}
                 isTextEnabled={isTextEnabled}
-                onClose={onClose}
+                onFinished={onFinished}
                 composerContext={{ selection: defaultValue }}
                 isEditing={isEditing}
             />,
@@ -60,8 +60,8 @@ describe("LinkModal", () => {
 
     it("Should create a link", async () => {
         // When
-        const onClose = jest.fn();
-        customRender(false, onClose);
+        const onFinished = jest.fn();
+        customRender(false, onFinished);
 
         // Then
         expect(screen.getByLabelText("Link")).toBeTruthy();
@@ -84,7 +84,7 @@ describe("LinkModal", () => {
         // Then
         await waitFor(() => {
             expect(selectionSpy).toHaveBeenCalledWith(defaultValue);
-            expect(onClose).toBeCalledTimes(1);
+            expect(onFinished).toHaveBeenCalledTimes(1);
         });
 
         // Then
@@ -93,8 +93,8 @@ describe("LinkModal", () => {
 
     it("Should create a link with text", async () => {
         // When
-        const onClose = jest.fn();
-        customRender(true, onClose);
+        const onFinished = jest.fn();
+        customRender(true, onFinished);
 
         // Then
         expect(screen.getByLabelText("Text")).toBeTruthy();
@@ -127,7 +127,7 @@ describe("LinkModal", () => {
         // Then
         await waitFor(() => {
             expect(selectionSpy).toHaveBeenCalledWith(defaultValue);
-            expect(onClose).toBeCalledTimes(1);
+            expect(onFinished).toHaveBeenCalledTimes(1);
         });
 
         // Then
@@ -136,13 +136,13 @@ describe("LinkModal", () => {
 
     it("Should remove the link", async () => {
         // When
-        const onClose = jest.fn();
-        customRender(true, onClose, true);
+        const onFinished = jest.fn();
+        customRender(true, onFinished, true);
         await userEvent.click(screen.getByText("Remove"));
 
         // Then
         expect(formattingFunctions.removeLinks).toHaveBeenCalledTimes(1);
-        expect(onClose).toBeCalledTimes(1);
+        expect(onFinished).toHaveBeenCalledTimes(1);
     });
 
     it("Should display the link in editing", async () => {
diff --git a/test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
index 5ab567098b7..e3b1b2fce19 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
@@ -74,7 +74,7 @@ describe("PlainTextComposer", () => {
         await userEvent.type(screen.getByRole("textbox"), content);
 
         // Then
-        expect(onChange).toBeCalledWith(content);
+        expect(onChange).toHaveBeenCalledWith(content);
     });
 
     it("Should call onSend when Enter is pressed when ctrlEnterToSend is false", async () => {
@@ -84,7 +84,7 @@ describe("PlainTextComposer", () => {
         await userEvent.type(screen.getByRole("textbox"), "{enter}");
 
         // Then it sends a message
-        expect(onSend).toBeCalledTimes(1);
+        expect(onSend).toHaveBeenCalledTimes(1);
     });
 
     it("Should not call onSend when Enter is pressed when ctrlEnterToSend is true", async () => {
@@ -95,7 +95,7 @@ describe("PlainTextComposer", () => {
         await userEvent.type(screen.getByRole("textbox"), "{enter}");
 
         // Then it does not send a message
-        expect(onSend).toBeCalledTimes(0);
+        expect(onSend).toHaveBeenCalledTimes(0);
     });
 
     it("Should only call onSend when ctrl+enter is pressed when ctrlEnterToSend is true on windows", async () => {
@@ -109,15 +109,15 @@ describe("PlainTextComposer", () => {
 
         // Then it does NOT send a message on enter
         await userEvent.type(textBox, "{enter}");
-        expect(onSend).toBeCalledTimes(0);
+        expect(onSend).toHaveBeenCalledTimes(0);
 
         // Then it does NOT send a message on windows+enter
         await userEvent.type(textBox, "{meta>}{enter}{meta/}");
-        expect(onSend).toBeCalledTimes(0);
+        expect(onSend).toHaveBeenCalledTimes(0);
 
         // Then it does send a message on ctrl+enter
         await userEvent.type(textBox, "{control>}{enter}{control/}");
-        expect(onSend).toBeCalledTimes(1);
+        expect(onSend).toHaveBeenCalledTimes(1);
     });
 
     it("Should only call onSend when cmd+enter is pressed when ctrlEnterToSend is true on mac", async () => {
@@ -132,15 +132,15 @@ describe("PlainTextComposer", () => {
 
         // Then it does NOT send a message on enter
         await userEvent.type(textBox, "{enter}");
-        expect(onSend).toBeCalledTimes(0);
+        expect(onSend).toHaveBeenCalledTimes(0);
 
         // Then it does NOT send a message on ctrl+enter
         await userEvent.type(textBox, "{control>}{enter}{control/}");
-        expect(onSend).toBeCalledTimes(0);
+        expect(onSend).toHaveBeenCalledTimes(0);
 
         // Then it does send a message on cmd+enter
         await userEvent.type(textBox, "{meta>}{enter}{meta/}");
-        expect(onSend).toBeCalledTimes(1);
+        expect(onSend).toHaveBeenCalledTimes(1);
     });
 
     it("Should insert a newline character when shift enter is pressed when ctrlEnterToSend is false", async () => {
@@ -155,7 +155,7 @@ describe("PlainTextComposer", () => {
         await userEvent.type(textBox, inputWithShiftEnter);
 
         // Then it does not send a message, but inserts a newline character
-        expect(onSend).toBeCalledTimes(0);
+        expect(onSend).toHaveBeenCalledTimes(0);
         expect(textBox.innerHTML).toBe(expectedInnerHtml);
     });
 
@@ -172,7 +172,7 @@ describe("PlainTextComposer", () => {
         await userEvent.type(textBox, keyboardInput);
 
         // Then it does not send a message, but inserts a newline character
-        expect(onSend).toBeCalledTimes(0);
+        expect(onSend).toHaveBeenCalledTimes(0);
         expect(textBox.innerHTML).toBe(expectedInnerHtml);
     });
 
@@ -188,7 +188,7 @@ describe("PlainTextComposer", () => {
         await userEvent.type(textBox, "{enter}hello");
 
         // Then it does not send a message, but inserts a newline character
-        expect(onSend).toBeCalledTimes(0);
+        expect(onSend).toHaveBeenCalledTimes(0);
         expect(textBox).not.toContainHTML(enterThenTypeHtml);
     });
 
@@ -204,7 +204,7 @@ describe("PlainTextComposer", () => {
         await userEvent.type(textBox, "{enter}");
 
         // Then it does not send a message, but inserts a newline character
-        expect(onSend).toBeCalledTimes(0);
+        expect(onSend).toHaveBeenCalledTimes(0);
         expect(textBox).not.toContainHTML(defaultEnterHtml);
     });
 
diff --git a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
index 5a41488be45..aa5c0bd7399 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
@@ -88,10 +88,10 @@ describe("WysiwygComposer", () => {
             });
 
             // Then
-            await waitFor(() => expect(onChange).toBeCalledWith("foo bar"));
+            await waitFor(() => expect(onChange).toHaveBeenCalledWith("foo bar"));
         });
 
-        it("Should call onSend when Enter is pressed ", async () => {
+        it("Should call onSend when Enter is pressed", async () => {
             //When
             fireEvent(
                 screen.getByRole("textbox"),
@@ -101,18 +101,18 @@ describe("WysiwygComposer", () => {
             );
 
             // Then it sends a message
-            await waitFor(() => expect(onSend).toBeCalledTimes(1));
+            await waitFor(() => expect(onSend).toHaveBeenCalledTimes(1));
         });
 
-        it("Should not call onSend when Shift+Enter is pressed ", async () => {
+        it("Should not call onSend when Shift+Enter is pressed", async () => {
             //When
             await userEvent.type(screen.getByRole("textbox"), "{shift>}{enter}");
 
             // Then it sends a message
-            await waitFor(() => expect(onSend).toBeCalledTimes(0));
+            await waitFor(() => expect(onSend).toHaveBeenCalledTimes(0));
         });
 
-        it("Should not call onSend when ctrl+Enter is pressed ", async () => {
+        it("Should not call onSend when ctrl+Enter is pressed", async () => {
             //When
             // Using userEvent.type or .keyboard wasn't working as expected in the case of ctrl+enter
             fireEvent(
@@ -124,23 +124,23 @@ describe("WysiwygComposer", () => {
             );
 
             // Then it sends a message
-            await waitFor(() => expect(onSend).toBeCalledTimes(0));
+            await waitFor(() => expect(onSend).toHaveBeenCalledTimes(0));
         });
 
-        it("Should not call onSend when alt+Enter is pressed ", async () => {
+        it("Should not call onSend when alt+Enter is pressed", async () => {
             //When
             await userEvent.type(screen.getByRole("textbox"), "{alt>}{enter}");
 
             // Then it sends a message
-            await waitFor(() => expect(onSend).toBeCalledTimes(0));
+            await waitFor(() => expect(onSend).toHaveBeenCalledTimes(0));
         });
 
-        it("Should not call onSend when meta+Enter is pressed ", async () => {
+        it("Should not call onSend when meta+Enter is pressed", async () => {
             //When
             await userEvent.type(screen.getByRole("textbox"), "{meta>}{enter}");
 
             // Then it sends a message
-            await waitFor(() => expect(onSend).toBeCalledTimes(0));
+            await waitFor(() => expect(onSend).toHaveBeenCalledTimes(0));
         });
     });
 
@@ -172,7 +172,7 @@ describe("WysiwygComposer", () => {
             );
 
             // Then it does not send a message
-            await waitFor(() => expect(onSend).toBeCalledTimes(0));
+            await waitFor(() => expect(onSend).toHaveBeenCalledTimes(0));
 
             fireEvent(
                 textbox,
@@ -201,7 +201,7 @@ describe("WysiwygComposer", () => {
             );
 
             // Then it sends a message
-            await waitFor(() => expect(onSend).toBeCalledTimes(1));
+            await waitFor(() => expect(onSend).toHaveBeenCalledTimes(1));
         });
     });
 
@@ -269,7 +269,7 @@ describe("WysiwygComposer", () => {
                 });
 
                 // Then
-                expect(spyDispatcher).toBeCalledTimes(0);
+                expect(spyDispatcher).toHaveBeenCalledTimes(0);
             });
 
             it("Should moving when the composer is empty", async () => {
@@ -281,7 +281,7 @@ describe("WysiwygComposer", () => {
                 });
 
                 // Then
-                expect(spyDispatcher).toBeCalledWith({
+                expect(spyDispatcher).toHaveBeenCalledWith({
                     action: Action.EditEvent,
                     event: mockEvent,
                     timelineRenderingType: defaultRoomContext.timelineRenderingType,
@@ -316,7 +316,7 @@ describe("WysiwygComposer", () => {
                     });
 
                     // Then
-                    expect(spyDispatcher).toBeCalledTimes(0);
+                    expect(spyDispatcher).toHaveBeenCalledTimes(0);
                 });
 
                 it("Should not moving when the content has changed", async () => {
@@ -340,7 +340,7 @@ describe("WysiwygComposer", () => {
                     });
 
                     // Then
-                    expect(spyDispatcher).toBeCalledTimes(0);
+                    expect(spyDispatcher).toHaveBeenCalledTimes(0);
                 });
 
                 it("Should moving up", async () => {
@@ -366,7 +366,7 @@ describe("WysiwygComposer", () => {
 
                     // Then
                     await waitFor(() =>
-                        expect(spyDispatcher).toBeCalledWith({
+                        expect(spyDispatcher).toHaveBeenCalledWith({
                             action: Action.EditEvent,
                             event: mockEvent,
                             timelineRenderingType: defaultRoomContext.timelineRenderingType,
@@ -401,7 +401,7 @@ describe("WysiwygComposer", () => {
                     });
 
                     // Then
-                    expect(spyDispatcher).toBeCalledWith({
+                    expect(spyDispatcher).toHaveBeenCalledWith({
                         action: Action.EditEvent,
                         event: mockEvent,
                         timelineRenderingType: defaultRoomContext.timelineRenderingType,
@@ -427,7 +427,7 @@ describe("WysiwygComposer", () => {
                     });
 
                     // Then
-                    expect(spyDispatcher).toBeCalledTimes(0);
+                    expect(spyDispatcher).toHaveBeenCalledTimes(0);
                 });
 
                 it("Should not moving when the content has changed", async () => {
@@ -451,7 +451,7 @@ describe("WysiwygComposer", () => {
                     });
 
                     // Then
-                    expect(spyDispatcher).toBeCalledTimes(0);
+                    expect(spyDispatcher).toHaveBeenCalledTimes(0);
                 });
 
                 it("Should moving down", async () => {
@@ -479,7 +479,7 @@ describe("WysiwygComposer", () => {
 
                     // Then
                     await waitFor(() =>
-                        expect(spyDispatcher).toBeCalledWith({
+                        expect(spyDispatcher).toHaveBeenCalledWith({
                             action: Action.EditEvent,
                             event: mockEvent,
                             timelineRenderingType: defaultRoomContext.timelineRenderingType,
@@ -516,7 +516,7 @@ describe("WysiwygComposer", () => {
                     });
 
                     // Then
-                    expect(spyDispatcher).toBeCalledWith({
+                    expect(spyDispatcher).toHaveBeenCalledWith({
                         action: Action.EditEvent,
                         event: mockEvent,
                         timelineRenderingType: defaultRoomContext.timelineRenderingType,
@@ -549,7 +549,7 @@ describe("WysiwygComposer", () => {
 
                     // Then
                     await waitFor(() =>
-                        expect(spyDispatcher).toBeCalledWith({
+                        expect(spyDispatcher).toHaveBeenCalledWith({
                             action: Action.EditEvent,
                             event: null,
                             timelineRenderingType: defaultRoomContext.timelineRenderingType,
diff --git a/test/components/views/rooms/wysiwyg_composer/utils/message-test.ts b/test/components/views/rooms/wysiwyg_composer/utils/message-test.ts
index 733d5c117e9..49442127d05 100644
--- a/test/components/views/rooms/wysiwyg_composer/utils/message-test.ts
+++ b/test/components/views/rooms/wysiwyg_composer/utils/message-test.ts
@@ -66,8 +66,8 @@ describe("message", () => {
             await sendMessage("", true, { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
 
             // Then
-            expect(mockClient.sendMessage).toBeCalledTimes(0);
-            expect(spyDispatcher).toBeCalledTimes(0);
+            expect(mockClient.sendMessage).toHaveBeenCalledTimes(0);
+            expect(spyDispatcher).toHaveBeenCalledTimes(0);
         });
 
         it("Should not send message when there is no roomId", async () => {
@@ -82,8 +82,8 @@ describe("message", () => {
             });
 
             // Then
-            expect(mockClient.sendMessage).toBeCalledTimes(0);
-            expect(spyDispatcher).toBeCalledTimes(0);
+            expect(mockClient.sendMessage).toHaveBeenCalledTimes(0);
+            expect(spyDispatcher).toHaveBeenCalledTimes(0);
         });
 
         describe("calls client.sendMessage with", () => {
@@ -108,7 +108,7 @@ describe("message", () => {
                 });
 
                 // Then
-                expect(mockClient.sendMessage).toBeCalledWith(expect.anything(), null, expect.anything());
+                expect(mockClient.sendMessage).toHaveBeenCalledWith(expect.anything(), null, expect.anything());
             });
             it("a null argument if SendMessageParams has relation but rel_type does not match THREAD_RELATION_TYPE.name", async () => {
                 // When
@@ -123,7 +123,7 @@ describe("message", () => {
                 });
 
                 // Then
-                expect(mockClient.sendMessage).toBeCalledWith(expect.anything(), null, expect.anything());
+                expect(mockClient.sendMessage).toHaveBeenCalledWith(expect.anything(), null, expect.anything());
             });
 
             it("the event_id if SendMessageParams has relation and rel_type matches THREAD_RELATION_TYPE.name", async () => {
@@ -139,7 +139,7 @@ describe("message", () => {
                 });
 
                 // Then
-                expect(mockClient.sendMessage).toBeCalledWith(expect.anything(), "valid_id", expect.anything());
+                expect(mockClient.sendMessage).toHaveBeenCalledWith(expect.anything(), "valid_id", expect.anything());
             });
         });
 
@@ -158,8 +158,8 @@ describe("message", () => {
                 formatted_body: "<i><b>hello</b> world</i>",
                 msgtype: "m.text",
             };
-            expect(mockClient.sendMessage).toBeCalledWith("myfakeroom", null, expectedContent);
-            expect(spyDispatcher).toBeCalledWith({ action: "message_sent" });
+            expect(mockClient.sendMessage).toHaveBeenCalledWith("myfakeroom", null, expectedContent);
+            expect(spyDispatcher).toHaveBeenCalledWith({ action: "message_sent" });
         });
 
         it("Should send reply to html message", async () => {
@@ -180,7 +180,7 @@ describe("message", () => {
             });
 
             // Then
-            expect(spyDispatcher).toBeCalledWith({
+            expect(spyDispatcher).toHaveBeenCalledWith({
                 action: "reply_to_event",
                 event: null,
                 context: defaultRoomContext.timelineRenderingType,
@@ -200,7 +200,7 @@ describe("message", () => {
                     },
                 },
             };
-            expect(mockClient.sendMessage).toBeCalledWith("myfakeroom", null, expectedContent);
+            expect(mockClient.sendMessage).toHaveBeenCalledWith("myfakeroom", null, expectedContent);
         });
 
         it("Should scroll to bottom after sending a html message", async () => {
@@ -213,7 +213,7 @@ describe("message", () => {
             });
 
             // Then
-            expect(spyDispatcher).toBeCalledWith({
+            expect(spyDispatcher).toHaveBeenCalledWith({
                 action: "scroll_to_bottom",
                 timelineRenderingType: defaultRoomContext.timelineRenderingType,
             });
@@ -224,7 +224,7 @@ describe("message", () => {
             await sendMessage("🎉", false, { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
 
             // Then
-            expect(spyDispatcher).toBeCalledWith({ action: "effects.confetti" });
+            expect(spyDispatcher).toHaveBeenCalledWith({ action: "effects.confetti" });
         });
     });
 
@@ -256,10 +256,10 @@ describe("message", () => {
             await editMessage("", { roomContext: defaultRoomContext, mxClient: mockClient, editorStateTransfer });
 
             // Then
-            expect(mockClient.sendMessage).toBeCalledTimes(0);
-            expect(mockClient.cancelPendingEvent).toBeCalledTimes(1);
-            expect(mockCreateRedactEventDialog).toBeCalledTimes(1);
-            expect(spyDispatcher).toBeCalledTimes(0);
+            expect(mockClient.sendMessage).toHaveBeenCalledTimes(0);
+            expect(mockClient.cancelPendingEvent).toHaveBeenCalledTimes(1);
+            expect(mockCreateRedactEventDialog).toHaveBeenCalledTimes(1);
+            expect(spyDispatcher).toHaveBeenCalledTimes(0);
         });
 
         it("Should do nothing if the content is unmodified", async () => {
@@ -271,7 +271,7 @@ describe("message", () => {
             });
 
             // Then
-            expect(mockClient.sendMessage).toBeCalledTimes(0);
+            expect(mockClient.sendMessage).toHaveBeenCalledTimes(0);
         });
 
         it("Should send a message when the content is modified", async () => {
@@ -301,8 +301,8 @@ describe("message", () => {
                 msgtype,
                 format,
             };
-            expect(mockClient.sendMessage).toBeCalledWith(mockEvent.getRoomId(), null, expectedContent);
-            expect(spyDispatcher).toBeCalledWith({ action: "message_sent" });
+            expect(mockClient.sendMessage).toHaveBeenCalledWith(mockEvent.getRoomId(), null, expectedContent);
+            expect(spyDispatcher).toHaveBeenCalledWith({ action: "message_sent" });
         });
     });
 });
diff --git a/test/components/views/settings/Notifications-test.tsx b/test/components/views/settings/Notifications-test.tsx
index a30eb1b8434..2aa4c93a3b7 100644
--- a/test/components/views/settings/Notifications-test.tsx
+++ b/test/components/views/settings/Notifications-test.tsx
@@ -23,6 +23,9 @@ import {
     Room,
     NotificationCountType,
     PushRuleActionName,
+    TweakName,
+    ConditionKind,
+    IPushRuleCondition,
 } from "matrix-js-sdk/src/matrix";
 import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
 import { act, fireEvent, getByTestId, render, screen, waitFor } from "@testing-library/react";
@@ -47,27 +50,42 @@ const masterRule: IPushRule = {
 };
 const oneToOneRule: IPushRule = {
     conditions: [
-        { kind: "room_member_count", is: "2" },
-        { kind: "event_match", key: "type", pattern: "m.room.message" },
+        { kind: ConditionKind.RoomMemberCount, is: "2" },
+        { kind: ConditionKind.EventMatch, key: "type", pattern: "m.room.message" },
     ],
-    actions: ["notify", { set_tweak: "highlight", value: false }],
+    actions: [PushRuleActionName.Notify, { set_tweak: TweakName.Highlight, value: false }],
     rule_id: ".m.rule.room_one_to_one",
     default: true,
     enabled: true,
 } as IPushRule;
 const encryptedOneToOneRule: IPushRule = {
     conditions: [
-        { kind: "room_member_count", is: "2" },
-        { kind: "event_match", key: "type", pattern: "m.room.encrypted" },
+        { kind: ConditionKind.RoomMemberCount, is: "2" },
+        { kind: ConditionKind.EventMatch, key: "type", pattern: "m.room.encrypted" },
+    ],
+    actions: [
+        PushRuleActionName.Notify,
+        { set_tweak: TweakName.Sound, value: "default" },
+        { set_tweak: TweakName.Highlight, value: false },
     ],
-    actions: ["notify", { set_tweak: "sound", value: "default" }, { set_tweak: "highlight", value: false }],
     rule_id: ".m.rule.encrypted_room_one_to_one",
     default: true,
     enabled: true,
 } as IPushRule;
+const groupRule = {
+    conditions: [{ kind: ConditionKind.EventMatch, key: "type", pattern: "m.room.message" }],
+    actions: [
+        PushRuleActionName.Notify,
+        { set_tweak: TweakName.Sound, value: "default" },
+        { set_tweak: TweakName.Highlight, value: false },
+    ],
+    rule_id: ".m.rule.message",
+    default: true,
+    enabled: true,
+};
 const encryptedGroupRule: IPushRule = {
-    conditions: [{ kind: "event_match", key: "type", pattern: "m.room.encrypted" }],
-    actions: ["dont_notify"],
+    conditions: [{ kind: ConditionKind.EventMatch, key: "type", pattern: "m.room.encrypted" }],
+    actions: [PushRuleActionName.DontNotify],
     rule_id: ".m.rule.encrypted",
     default: true,
     enabled: true,
@@ -76,46 +94,55 @@ const pushRules: IPushRules = {
     global: {
         underride: [
             {
-                conditions: [{ kind: "event_match", key: "type", pattern: "m.call.invite" }],
-                actions: ["notify", { set_tweak: "sound", value: "ring" }, { set_tweak: "highlight", value: false }],
+                conditions: [{ kind: ConditionKind.EventMatch, key: "type", pattern: "m.call.invite" }],
+                actions: [
+                    PushRuleActionName.Notify,
+                    { set_tweak: TweakName.Sound, value: "ring" },
+                    { set_tweak: TweakName.Highlight, value: false },
+                ],
                 rule_id: ".m.rule.call",
                 default: true,
                 enabled: true,
             },
             oneToOneRule,
             encryptedOneToOneRule,
-            {
-                conditions: [{ kind: "event_match", key: "type", pattern: "m.room.message" }],
-                actions: ["notify", { set_tweak: "sound", value: "default" }, { set_tweak: "highlight", value: false }],
-                rule_id: ".m.rule.message",
-                default: true,
-                enabled: true,
-            },
+            groupRule,
             encryptedGroupRule,
             {
                 conditions: [
-                    { kind: "event_match", key: "type", pattern: "im.vector.modular.widgets" },
-                    { kind: "event_match", key: "content.type", pattern: "jitsi" },
-                    { kind: "event_match", key: "state_key", pattern: "*" },
+                    { kind: ConditionKind.EventMatch, key: "type", pattern: "im.vector.modular.widgets" },
+                    { kind: ConditionKind.EventMatch, key: "content.type", pattern: "jitsi" },
+                    { kind: ConditionKind.EventMatch, key: "state_key", pattern: "*" },
                 ],
-                actions: ["notify", { set_tweak: "highlight", value: false }],
+                actions: [PushRuleActionName.Notify, { set_tweak: TweakName.Highlight, value: false }],
                 rule_id: ".im.vector.jitsi",
                 default: true,
                 enabled: true,
             },
         ],
         sender: [],
-        room: [{ actions: ["dont_notify"], rule_id: "!zJPyWqpMorfCcWObge:matrix.org", default: false, enabled: true }],
+        room: [
+            {
+                actions: [PushRuleActionName.DontNotify],
+                rule_id: "!zJPyWqpMorfCcWObge:matrix.org",
+                default: false,
+                enabled: true,
+            },
+        ],
         content: [
             {
-                actions: ["notify", { set_tweak: "highlight", value: false }],
+                actions: [PushRuleActionName.Notify, { set_tweak: TweakName.Highlight, value: false }],
                 pattern: "banana",
                 rule_id: "banana",
                 default: false,
                 enabled: true,
             },
             {
-                actions: ["notify", { set_tweak: "sound", value: "default" }, { set_tweak: "highlight" }],
+                actions: [
+                    PushRuleActionName.Notify,
+                    { set_tweak: TweakName.Sound, value: "default" },
+                    { set_tweak: TweakName.Highlight },
+                ],
                 pattern: "kadev1",
                 rule_id: ".m.rule.contains_user_name",
                 default: true,
@@ -123,62 +150,76 @@ const pushRules: IPushRules = {
             },
         ],
         override: [
-            { conditions: [], actions: ["dont_notify"], rule_id: ".m.rule.master", default: true, enabled: false },
             {
-                conditions: [{ kind: "event_match", key: "content.msgtype", pattern: "m.notice" }],
-                actions: ["dont_notify"],
+                conditions: [],
+                actions: [PushRuleActionName.DontNotify],
+                rule_id: ".m.rule.master",
+                default: true,
+                enabled: false,
+            },
+            {
+                conditions: [{ kind: ConditionKind.EventMatch, key: "content.msgtype", pattern: "m.notice" }],
+                actions: [PushRuleActionName.DontNotify],
                 rule_id: ".m.rule.suppress_notices",
                 default: true,
                 enabled: true,
             },
             {
                 conditions: [
-                    { kind: "event_match", key: "type", pattern: "m.room.member" },
-                    { kind: "event_match", key: "content.membership", pattern: "invite" },
-                    { kind: "event_match", key: "state_key", pattern: "@kadev1:matrix.org" },
+                    { kind: ConditionKind.EventMatch, key: "type", pattern: "m.room.member" },
+                    { kind: ConditionKind.EventMatch, key: "content.membership", pattern: "invite" },
+                    { kind: ConditionKind.EventMatch, key: "state_key", pattern: "@kadev1:matrix.org" },
+                ],
+                actions: [
+                    PushRuleActionName.Notify,
+                    { set_tweak: TweakName.Sound, value: "default" },
+                    { set_tweak: TweakName.Highlight, value: false },
                 ],
-                actions: ["notify", { set_tweak: "sound", value: "default" }, { set_tweak: "highlight", value: false }],
                 rule_id: ".m.rule.invite_for_me",
                 default: true,
                 enabled: true,
             },
             {
-                conditions: [{ kind: "event_match", key: "type", pattern: "m.room.member" }],
-                actions: ["dont_notify"],
+                conditions: [{ kind: ConditionKind.EventMatch, key: "type", pattern: "m.room.member" }],
+                actions: [PushRuleActionName.DontNotify],
                 rule_id: ".m.rule.member_event",
                 default: true,
                 enabled: true,
             },
             {
                 conditions: [{ kind: "contains_display_name" }],
-                actions: ["notify", { set_tweak: "sound", value: "default" }, { set_tweak: "highlight" }],
+                actions: [
+                    PushRuleActionName.Notify,
+                    { set_tweak: TweakName.Sound, value: "default" },
+                    { set_tweak: TweakName.Highlight },
+                ],
                 rule_id: ".m.rule.contains_display_name",
                 default: true,
                 enabled: true,
             },
             {
                 conditions: [
-                    { kind: "event_match", key: "content.body", pattern: "@room" },
+                    { kind: ConditionKind.EventMatch, key: "content.body", pattern: "@room" },
                     { kind: "sender_notification_permission", key: "room" },
                 ],
-                actions: ["notify", { set_tweak: "highlight", value: true }],
+                actions: [PushRuleActionName.Notify, { set_tweak: TweakName.Highlight, value: true }],
                 rule_id: ".m.rule.roomnotif",
                 default: true,
                 enabled: true,
             },
             {
                 conditions: [
-                    { kind: "event_match", key: "type", pattern: "m.room.tombstone" },
-                    { kind: "event_match", key: "state_key", pattern: "" },
+                    { kind: ConditionKind.EventMatch, key: "type", pattern: "m.room.tombstone" },
+                    { kind: ConditionKind.EventMatch, key: "state_key", pattern: "" },
                 ],
-                actions: ["notify", { set_tweak: "highlight", value: true }],
+                actions: [PushRuleActionName.Notify, { set_tweak: TweakName.Highlight, value: true }],
                 rule_id: ".m.rule.tombstone",
                 default: true,
                 enabled: true,
             },
             {
-                conditions: [{ kind: "event_match", key: "type", pattern: "m.reaction" }],
-                actions: ["dont_notify"],
+                conditions: [{ kind: ConditionKind.EventMatch, key: "type", pattern: "m.reaction" }],
+                actions: [PushRuleActionName.DontNotify],
                 rule_id: ".m.rule.reaction",
                 default: true,
                 enabled: true,
@@ -231,6 +272,8 @@ describe("<Notifications />", () => {
         mockClient.getPushers.mockClear().mockResolvedValue({ pushers: [] });
         mockClient.getThreePids.mockClear().mockResolvedValue({ threepids: [] });
         mockClient.setPusher.mockClear().mockResolvedValue({});
+        mockClient.setPushRuleActions.mockClear().mockResolvedValue({});
+        mockClient.pushRules = pushRules;
     });
 
     it("renders spinner while loading", async () => {
@@ -429,6 +472,196 @@ describe("<Notifications />", () => {
                 StandardActions.ACTION_DONT_NOTIFY,
             );
         });
+
+        describe("synced rules", () => {
+            const pollStartOneToOne = {
+                conditions: [
+                    {
+                        kind: ConditionKind.RoomMemberCount,
+                        is: "2",
+                    } as IPushRuleCondition<ConditionKind.RoomMemberCount>,
+                    {
+                        kind: ConditionKind.EventMatch,
+                        key: "type",
+                        pattern: "org.matrix.msc3381.poll.start",
+                    } as IPushRuleCondition<ConditionKind.EventMatch>,
+                ],
+                actions: [PushRuleActionName.DontNotify],
+                rule_id: ".org.matrix.msc3930.rule.poll_start_one_to_one",
+                default: true,
+                enabled: true,
+            } as IPushRule;
+            const pollStartGroup = {
+                conditions: [
+                    {
+                        kind: ConditionKind.EventMatch,
+                        key: "type",
+                        pattern: "org.matrix.msc3381.poll.start",
+                    },
+                ],
+                actions: [PushRuleActionName.Notify],
+                rule_id: ".org.matrix.msc3930.rule.poll_start",
+                default: true,
+                enabled: true,
+            } as IPushRule;
+            const pollEndOneToOne = {
+                conditions: [
+                    {
+                        kind: ConditionKind.RoomMemberCount,
+                        is: "2",
+                    },
+                    {
+                        kind: ConditionKind.EventMatch,
+                        key: "type",
+                        pattern: "org.matrix.msc3381.poll.end",
+                    },
+                ],
+                actions: [
+                    PushRuleActionName.Notify,
+                    { set_tweak: TweakName.Highlight, value: false },
+                    { set_tweak: TweakName.Sound, value: "default" },
+                ],
+                rule_id: ".org.matrix.msc3930.rule.poll_end_one_to_one",
+                default: true,
+                enabled: true,
+            } as IPushRule;
+
+            const setPushRuleMock = (rules: IPushRule[] = []): void => {
+                const combinedRules = {
+                    ...pushRules,
+                    global: {
+                        ...pushRules.global,
+                        underride: [...pushRules.global.underride!, ...rules],
+                    },
+                };
+                mockClient.getPushRules.mockClear().mockResolvedValue(combinedRules);
+                mockClient.pushRules = combinedRules;
+            };
+
+            // ".m.rule.room_one_to_one" and ".m.rule.message" have synced rules
+            it("succeeds when no synced rules exist for user", async () => {
+                await getComponentAndWait();
+                const section = "vector_global";
+
+                const oneToOneRuleElement = screen.getByTestId(section + oneToOneRule.rule_id);
+
+                const offToggle = oneToOneRuleElement.querySelector('input[type="radio"]')!;
+                fireEvent.click(offToggle);
+
+                await flushPromises();
+
+                // didnt attempt to update any non-existant rules
+                expect(mockClient.setPushRuleActions).toHaveBeenCalledTimes(1);
+
+                // no error
+                expect(screen.queryByTestId("error-message")).not.toBeInTheDocument();
+            });
+
+            it("updates synced rules when they exist for user", async () => {
+                setPushRuleMock([pollStartOneToOne, pollStartGroup]);
+                await getComponentAndWait();
+                const section = "vector_global";
+                const oneToOneRuleElement = screen.getByTestId(section + oneToOneRule.rule_id);
+
+                const offToggle = oneToOneRuleElement.querySelector('input[type="radio"]')!;
+                fireEvent.click(offToggle);
+
+                await flushPromises();
+
+                // updated synced rule
+                expect(mockClient.setPushRuleActions).toHaveBeenCalledWith(
+                    "global",
+                    "underride",
+                    oneToOneRule.rule_id,
+                    [PushRuleActionName.DontNotify],
+                );
+                expect(mockClient.setPushRuleActions).toHaveBeenCalledWith(
+                    "global",
+                    "underride",
+                    pollStartOneToOne.rule_id,
+                    [PushRuleActionName.DontNotify],
+                );
+                // only called for parent rule and one existing synced rule
+                expect(mockClient.setPushRuleActions).toHaveBeenCalledTimes(2);
+
+                // no error
+                expect(screen.queryByTestId("error-message")).not.toBeInTheDocument();
+            });
+
+            it("does not update synced rules when main rule update fails", async () => {
+                setPushRuleMock([pollStartOneToOne]);
+                await getComponentAndWait();
+                const section = "vector_global";
+                const oneToOneRuleElement = screen.getByTestId(section + oneToOneRule.rule_id);
+                // have main rule update fail
+                mockClient.setPushRuleActions.mockRejectedValue("oups");
+
+                const offToggle = oneToOneRuleElement.querySelector('input[type="radio"]')!;
+                fireEvent.click(offToggle);
+
+                await flushPromises();
+
+                expect(mockClient.setPushRuleActions).toHaveBeenCalledWith(
+                    "global",
+                    "underride",
+                    oneToOneRule.rule_id,
+                    [PushRuleActionName.DontNotify],
+                );
+                // only called for parent rule
+                expect(mockClient.setPushRuleActions).toHaveBeenCalledTimes(1);
+
+                expect(screen.queryByTestId("error-message")).toBeInTheDocument();
+            });
+
+            it("sets the UI toggle to rule value when no synced rule exist for the user", async () => {
+                setPushRuleMock([]);
+                await getComponentAndWait();
+                const section = "vector_global";
+                const oneToOneRuleElement = screen.getByTestId(section + oneToOneRule.rule_id);
+
+                // loudest state of synced rules should be the toggle value
+                expect(oneToOneRuleElement.querySelector('input[aria-label="On"]')).toBeChecked();
+            });
+
+            it("sets the UI toggle to the loudest synced rule value", async () => {
+                // oneToOneRule is set to 'On'
+                // pollEndOneToOne is set to 'Loud'
+                setPushRuleMock([pollStartOneToOne, pollEndOneToOne]);
+                await getComponentAndWait();
+                const section = "vector_global";
+                const oneToOneRuleElement = screen.getByTestId(section + oneToOneRule.rule_id);
+
+                // loudest state of synced rules should be the toggle value
+                expect(oneToOneRuleElement.querySelector('input[aria-label="Noisy"]')).toBeChecked();
+
+                const onToggle = oneToOneRuleElement.querySelector('input[aria-label="On"]')!;
+                fireEvent.click(onToggle);
+
+                await flushPromises();
+
+                // called for all 3 rules
+                expect(mockClient.setPushRuleActions).toHaveBeenCalledTimes(3);
+                const expectedActions = [PushRuleActionName.Notify, { set_tweak: TweakName.Highlight, value: false }];
+                expect(mockClient.setPushRuleActions).toHaveBeenCalledWith(
+                    "global",
+                    "underride",
+                    oneToOneRule.rule_id,
+                    expectedActions,
+                );
+                expect(mockClient.setPushRuleActions).toHaveBeenCalledWith(
+                    "global",
+                    "underride",
+                    pollStartOneToOne.rule_id,
+                    expectedActions,
+                );
+                expect(mockClient.setPushRuleActions).toHaveBeenCalledWith(
+                    "global",
+                    "underride",
+                    pollEndOneToOne.rule_id,
+                    expectedActions,
+                );
+            });
+        });
     });
 
     describe("clear all notifications", () => {
diff --git a/test/components/views/settings/devices/CurrentDeviceSection-test.tsx b/test/components/views/settings/devices/CurrentDeviceSection-test.tsx
index b102a996cb5..15266827031 100644
--- a/test/components/views/settings/devices/CurrentDeviceSection-test.tsx
+++ b/test/components/views/settings/devices/CurrentDeviceSection-test.tsx
@@ -42,6 +42,7 @@ describe("<CurrentDeviceSection />", () => {
         isLoading: false,
         isSigningOut: false,
         otherSessionsCount: 1,
+        setPushNotifications: jest.fn(),
     };
 
     const getComponent = (props = {}): React.ReactElement => <CurrentDeviceSection {...defaultProps} {...props} />;
diff --git a/test/components/views/settings/devices/DeviceDetailHeading-test.tsx b/test/components/views/settings/devices/DeviceDetailHeading-test.tsx
index 2224e6054b2..3e4018066ff 100644
--- a/test/components/views/settings/devices/DeviceDetailHeading-test.tsx
+++ b/test/components/views/settings/devices/DeviceDetailHeading-test.tsx
@@ -47,7 +47,7 @@ describe("<DeviceDetailHeading />", () => {
         expect({ container }).toMatchSnapshot();
     });
 
-    it("renders device id as fallback when device has no display name ", () => {
+    it("renders device id as fallback when device has no display name", () => {
         const { getByText } = render(
             getComponent({
                 device: { ...device, display_name: undefined },
diff --git a/test/components/views/settings/devices/deleteDevices-test.tsx b/test/components/views/settings/devices/deleteDevices-test.tsx
index 80e62f423d9..bdd0c5a8c2b 100644
--- a/test/components/views/settings/devices/deleteDevices-test.tsx
+++ b/test/components/views/settings/devices/deleteDevices-test.tsx
@@ -28,7 +28,7 @@ describe("deleteDevices()", () => {
         deleteMultipleDevices: jest.fn(),
     });
 
-    const modalSpy = jest.spyOn(Modal, "createDialog");
+    const modalSpy = jest.spyOn(Modal, "createDialog") as jest.SpyInstance;
 
     const interactiveAuthError = { httpStatus: 401, data: { flows: [] as UIAFlow[] } };
 
diff --git a/test/components/views/settings/tabs/room/AdvancedRoomSettingsTab-test.tsx b/test/components/views/settings/tabs/room/AdvancedRoomSettingsTab-test.tsx
index cb4b373e4fb..da1f3460e00 100644
--- a/test/components/views/settings/tabs/room/AdvancedRoomSettingsTab-test.tsx
+++ b/test/components/views/settings/tabs/room/AdvancedRoomSettingsTab-test.tsx
@@ -47,7 +47,7 @@ describe("AdvancedRoomSettingsTab", () => {
         mocked(dis.dispatch).mockReset();
         mocked(room.findPredecessor).mockImplementation((msc3946: boolean) =>
             msc3946
-                ? { roomId: "old_room_id_via_predecessor", eventId: null }
+                ? { roomId: "old_room_id_via_predecessor" }
                 : { roomId: "old_room_id", eventId: "tombstone_event_id" },
         );
     });
@@ -136,7 +136,7 @@ describe("AdvancedRoomSettingsTab", () => {
             fireEvent.click(link);
             expect(dis.dispatch).toHaveBeenCalledWith({
                 action: Action.ViewRoom,
-                event_id: null,
+                event_id: undefined,
                 room_id: "old_room_id_via_predecessor",
                 metricsTrigger: "WebPredecessorSettings",
                 metricsViaKeyboard: false,
diff --git a/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx b/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx
index 7fa008d4a32..7bd5062cc4a 100644
--- a/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx
+++ b/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx
@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { render } from "@testing-library/react";
+import { defer } from "matrix-js-sdk/src/utils";
 
 import LabsUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/LabsUserSettingsTab";
 import SettingsStore from "../../../../../../src/settings/SettingsStore";
@@ -25,6 +26,7 @@ import {
     mockClientMethodsUser,
 } from "../../../../../test-utils";
 import SdkConfig from "../../../../../../src/SdkConfig";
+import MatrixClientBackedController from "../../../../../../src/settings/controllers/MatrixClientBackedController";
 
 describe("<SecurityUserSettingsTab />", () => {
     const sdkConfigSpy = jest.spyOn(SdkConfig, "get");
@@ -35,7 +37,7 @@ describe("<SecurityUserSettingsTab />", () => {
     const getComponent = () => <LabsUserSettingsTab {...defaultProps} />;
 
     const userId = "@alice:server.org";
-    getMockClientWithEventEmitter({
+    const cli = getMockClientWithEventEmitter({
         ...mockClientMethodsUser(userId),
         ...mockClientMethodsServer(),
     });
@@ -70,4 +72,21 @@ describe("<SecurityUserSettingsTab />", () => {
         const labsSections = container.getElementsByClassName("mx_SettingsTab_section");
         expect(labsSections.length).toEqual(11);
     });
+
+    it("renders a labs flag which requires unstable support once support is confirmed", async () => {
+        // enable labs
+        sdkConfigSpy.mockImplementation((configName) => configName === "show_labs_settings");
+
+        const deferred = defer<boolean>();
+        cli.doesServerSupportUnstableFeature.mockImplementation(async (featureName) => {
+            return featureName === "org.matrix.msc3827.stable" ? deferred.promise : false;
+        });
+        MatrixClientBackedController.matrixClient = cli;
+
+        const { queryByText, findByText } = render(getComponent());
+
+        expect(queryByText("Explore public spaces in the new search dialog")).toBeFalsy();
+        deferred.resolve(true);
+        await expect(findByText("Explore public spaces in the new search dialog")).resolves.toBeDefined();
+    });
 });
diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index 22ba02e5420..83589225272 100644
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -207,17 +207,6 @@ describe("<SessionManagerTab />", () => {
         expect(container.getElementsByClassName("mx_Spinner").length).toBeTruthy();
     });
 
-    it("removes spinner when device fetch fails", async () => {
-        mockClient.getDevices.mockRejectedValue({ httpStatus: 404 });
-        const { container } = render(getComponent());
-        expect(mockClient.getDevices).toHaveBeenCalled();
-
-        await act(async () => {
-            await flushPromises();
-        });
-        expect(container.getElementsByClassName("mx_Spinner").length).toBeFalsy();
-    });
-
     it("removes spinner when device fetch fails", async () => {
         // eat the expected error log
         jest.spyOn(logger, "error").mockImplementation(() => {});
@@ -760,7 +749,7 @@ describe("<SessionManagerTab />", () => {
                 expect(mockClient.getDevices).toHaveBeenCalled();
             });
 
-            it("deletes a device when interactive auth is not required", async () => {
+            it("does not delete a device when interactive auth is not required", async () => {
                 const { getByTestId } = render(getComponent());
 
                 await act(async () => {
diff --git a/test/components/views/spaces/SpacePanel-test.tsx b/test/components/views/spaces/SpacePanel-test.tsx
index 241b1ded731..8ed108ee398 100644
--- a/test/components/views/spaces/SpacePanel-test.tsx
+++ b/test/components/views/spaces/SpacePanel-test.tsx
@@ -48,6 +48,7 @@ jest.mock("../../../../src/customisations/helpers/UIComponents", () => ({
 describe("<SpacePanel />", () => {
     const mockClient = {
         getUserId: jest.fn().mockReturnValue("@test:test"),
+        getSafeUserId: jest.fn().mockReturnValue("@test:test"),
         isGuest: jest.fn(),
         getAccountData: jest.fn(),
     } as unknown as MatrixClient;
diff --git a/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx b/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx
index eb9ad8fd7ef..1d2ee066f98 100644
--- a/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx
+++ b/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx
@@ -16,8 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { act, Simulate } from "react-dom/test-utils";
-import { fireEvent, render, RenderResult } from "@testing-library/react";
+import { act, fireEvent, render, RenderResult } from "@testing-library/react";
 import { EventType, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { GuestAccess, HistoryVisibility, JoinRule } from "matrix-js-sdk/src/@types/partials";
 
@@ -163,8 +162,8 @@ describe("<SpaceSettingsVisibilityTab />", () => {
                 (mockMatrixClient.sendStateEvent as jest.Mock).mockRejectedValue({});
                 const component = getComponent({ space });
                 await toggleGuestAccessSection(component);
-                await act(async () => {
-                    Simulate.click(getGuestAccessToggle(component)!);
+                await act(() => {
+                    fireEvent.click(getGuestAccessToggle(component)!);
                 });
 
                 expect(getErrorMessage(component)).toEqual("Failed to update the guest access of this space");
@@ -213,14 +212,14 @@ describe("<SpaceSettingsVisibilityTab />", () => {
                 (mockMatrixClient.sendStateEvent as jest.Mock).mockRejectedValue({});
                 const component = getComponent({ space });
 
-                await act(async () => {
-                    Simulate.click(getHistoryVisibilityToggle(component)!);
+                await act(() => {
+                    fireEvent.click(getHistoryVisibilityToggle(component)!);
                 });
 
                 expect(getErrorMessage(component)).toEqual("Failed to update the history visibility of this space");
             });
 
-            it("disables room preview toggle when history visability changes are not allowed", () => {
+            it("disables room preview toggle when history visibility changes are not allowed", () => {
                 const space = makeMockSpace(mockMatrixClient, joinRule, guestRule, historyRule);
                 (space.currentState.maySendStateEvent as jest.Mock).mockReturnValue(false);
                 const component = getComponent({ space });
diff --git a/test/components/views/voip/VideoFeed-test.tsx b/test/components/views/voip/VideoFeed-test.tsx
new file mode 100644
index 00000000000..85152437e00
--- /dev/null
+++ b/test/components/views/voip/VideoFeed-test.tsx
@@ -0,0 +1,69 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import * as AvatarModule from "../../../../src/Avatar";
+import VideoFeed from "../../../../src/components/views/voip/VideoFeed";
+import { stubClient, useMockedCalls } from "../../../test-utils";
+import LegacyCallHandler from "../../../../src/LegacyCallHandler";
+import DMRoomMap from "../../../../src/utils/DMRoomMap";
+
+const FAKE_AVATAR_URL = "http://fakeurl.dummy/fake.png";
+
+describe("VideoFeed", () => {
+    useMockedCalls();
+
+    let client: MatrixClient;
+
+    beforeAll(() => {
+        client = stubClient();
+        (AvatarModule as any).avatarUrlForRoom = jest.fn().mockReturnValue(FAKE_AVATAR_URL);
+
+        const dmRoomMap = new DMRoomMap(client);
+        jest.spyOn(dmRoomMap, "getUserIdForRoomId");
+        jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
+    });
+
+    afterAll(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("Displays the room avatar when no video is available", () => {
+        window.mxLegacyCallHandler = {
+            roomIdForCall: jest.fn().mockReturnValue("!this:room.here"),
+        } as unknown as LegacyCallHandler;
+
+        const mockCall = {
+            room: new Room("!room:example.com", client, client.getSafeUserId()),
+        };
+
+        const feed = {
+            isAudioMuted: jest.fn().mockReturnValue(false),
+            isVideoMuted: jest.fn().mockReturnValue(true),
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+        };
+        render(<VideoFeed feed={feed as unknown as CallFeed} call={mockCall as unknown as MatrixCall} />);
+        const avatarImg = screen.getByRole("img");
+        expect(avatarImg).toHaveAttribute("src", FAKE_AVATAR_URL);
+    });
+});
diff --git a/test/createRoom-test.ts b/test/createRoom-test.ts
index 6ff690b41e9..9bb4f798756 100644
--- a/test/createRoom-test.ts
+++ b/test/createRoom-test.ts
@@ -78,22 +78,16 @@ describe("createRoom", () => {
         const createCallSpy = jest.spyOn(ElementCall, "create");
         const roomId = await createRoom({ roomType: RoomType.UnstableCall });
 
-        const [
-            [
-                {
-                    power_level_content_override: {
-                        users: { [userId]: userPower },
-                        events: {
-                            [ElementCall.CALL_EVENT_TYPE.name]: callPower,
-                            [ElementCall.MEMBER_EVENT_TYPE.name]: callMemberPower,
-                        },
-                    },
-                },
-            ],
-        ] = client.createRoom.mock.calls;
+        const userPower = client.createRoom.mock.calls[0][0].power_level_content_override?.users?.[userId];
+        const callPower =
+            client.createRoom.mock.calls[0][0].power_level_content_override?.events?.[ElementCall.CALL_EVENT_TYPE.name];
+        const callMemberPower =
+            client.createRoom.mock.calls[0][0].power_level_content_override?.events?.[
+                ElementCall.MEMBER_EVENT_TYPE.name
+            ];
 
         // We should have had enough power to be able to set up the call
-        expect(userPower).toBeGreaterThanOrEqual(callPower);
+        expect(userPower).toBeGreaterThanOrEqual(callPower!);
         // and should have actually set it up
         expect(createCallSpy).toHaveBeenCalled();
 
@@ -122,18 +116,12 @@ describe("createRoom", () => {
 
         await createRoom({});
 
-        const [
-            [
-                {
-                    power_level_content_override: {
-                        events: {
-                            [ElementCall.CALL_EVENT_TYPE.name]: callPower,
-                            [ElementCall.MEMBER_EVENT_TYPE.name]: callMemberPower,
-                        },
-                    },
-                },
-            ],
-        ] = client.createRoom.mock.calls;
+        const callPower =
+            client.createRoom.mock.calls[0][0].power_level_content_override?.events?.[ElementCall.CALL_EVENT_TYPE.name];
+        const callMemberPower =
+            client.createRoom.mock.calls[0][0].power_level_content_override?.events?.[
+                ElementCall.MEMBER_EVENT_TYPE.name
+            ];
 
         expect(callPower).toBe(100);
         expect(callMemberPower).toBe(100);
diff --git a/test/editor/deserialize-test.ts b/test/editor/deserialize-test.ts
index bcc7de9a79a..908b83a6512 100644
--- a/test/editor/deserialize-test.ts
+++ b/test/editor/deserialize-test.ts
@@ -215,7 +215,7 @@ describe("editor/deserialize", function () {
             expect(parts[4]).toStrictEqual({ type: "plain", text: "```" });
         });
         // failing likely because of https://github.com/vector-im/element-web/issues/10316
-        xit("code block with no trailing text and no newlines", function () {
+        it.skip("code block with no trailing text and no newlines", function () {
             const html = "<pre><code>0xDEADBEEF</code></pre>";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(5);
@@ -412,7 +412,7 @@ describe("editor/deserialize", function () {
                 text: "> <del>no formatting here</del>",
             });
         });
-        it("it strips plaintext replies", () => {
+        it("strips plaintext replies", () => {
             const body = "> Sender: foo\n\nMessage";
             const parts = normalize(parseEvent(textMessageReply(body), createPartCreator(), { shouldEscape: false }));
             expect(parts.length).toBe(1);
diff --git a/test/email-test.ts b/test/email-test.ts
new file mode 100644
index 00000000000..c1822d7eaf2
--- /dev/null
+++ b/test/email-test.ts
@@ -0,0 +1,32 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { looksValid } from "../src/email";
+
+describe("looksValid", () => {
+    it.each([
+        ["", false],
+        ["alice", false],
+        ["@", false],
+        ["@alice:example.com", false],
+        ["@b.org", false],
+        ["alice@example", false],
+        ["a@b.org", true],
+        ["alice@example.com", true],
+    ])("for »%s« should return %s", (value: string, expected: boolean) => {
+        expect(looksValid(value)).toBe(expected);
+    });
+});
diff --git a/test/events/RelationsHelper-test.ts b/test/events/RelationsHelper-test.ts
index 10859a349c3..9eb45a46516 100644
--- a/test/events/RelationsHelper-test.ts
+++ b/test/events/RelationsHelper-test.ts
@@ -95,7 +95,7 @@ describe("RelationsHelper", () => {
 
             expect(() => {
                 new RelationsHelper(event, RelationType.Reference, EventType.RoomMessage, client);
-            }).toThrowError("unable to create RelationsHelper: missing event ID");
+            }).toThrow("unable to create RelationsHelper: missing event ID");
         });
     });
 
@@ -105,7 +105,7 @@ describe("RelationsHelper", () => {
 
             expect(() => {
                 new RelationsHelper(event, RelationType.Reference, EventType.RoomMessage, client);
-            }).toThrowError("unable to create RelationsHelper: missing room ID");
+            }).toThrow("unable to create RelationsHelper: missing room ID");
         });
     });
 
diff --git a/test/i18n-test/languageHandler-test.tsx b/test/i18n-test/languageHandler-test.tsx
index 8c8b5402319..66c88fe5679 100644
--- a/test/i18n-test/languageHandler-test.tsx
+++ b/test/i18n-test/languageHandler-test.tsx
@@ -93,20 +93,17 @@ describe("languageHandler", function () {
     });
 
     describe("when translations exist in language", () => {
-        beforeEach(function (done) {
+        beforeEach(function () {
             stubClient();
 
-            setLanguage("en").then(done);
+            setLanguage("en");
             setMissingEntryGenerator((key) => key.split("|", 2)[1]);
         });
 
-        it("translates a string to german", function (done) {
-            setLanguage("de")
-                .then(function () {
-                    const translated = _t(basicString);
-                    expect(translated).toBe("Räume");
-                })
-                .then(done);
+        it("translates a string to german", async () => {
+            await setLanguage("de");
+            const translated = _t(basicString);
+            expect(translated).toBe("Räume");
         });
 
         it.each(testCasesEn)("%s", (_d, translationString, variables, tags, result) => {
diff --git a/test/models/Call-test.ts b/test/models/Call-test.ts
index 028cf12018a..da10098e53c 100644
--- a/test/models/Call-test.ts
+++ b/test/models/Call-test.ts
@@ -922,7 +922,7 @@ describe("ElementCall", () => {
                 const sourceId = "source_id";
                 jest.spyOn(Modal, "createDialog").mockReturnValue({
                     finished: new Promise((r) => r([sourceId])),
-                } as IHandle<any[]>);
+                } as IHandle<any>);
                 jest.spyOn(PlatformPeg.get()!, "supportsDesktopCapturer").mockReturnValue(true);
 
                 await call.connect();
@@ -950,7 +950,7 @@ describe("ElementCall", () => {
             it("sends ScreenshareStop if we couldn't get a source id", async () => {
                 jest.spyOn(Modal, "createDialog").mockReturnValue({
                     finished: new Promise((r) => r([null])),
-                } as IHandle<any[]>);
+                } as IHandle<any>);
                 jest.spyOn(PlatformPeg.get()!, "supportsDesktopCapturer").mockReturnValue(true);
 
                 await call.connect();
diff --git a/test/settings/controllers/ServerSupportUnstableFeatureController-test.ts b/test/settings/controllers/ServerSupportUnstableFeatureController-test.ts
new file mode 100644
index 00000000000..91f6083da6e
--- /dev/null
+++ b/test/settings/controllers/ServerSupportUnstableFeatureController-test.ts
@@ -0,0 +1,119 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { defer } from "matrix-js-sdk/src/utils";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import ServerSupportUnstableFeatureController from "../../../src/settings/controllers/ServerSupportUnstableFeatureController";
+import { SettingLevel } from "../../../src/settings/SettingLevel";
+import { LabGroup, SETTINGS } from "../../../src/settings/Settings";
+import { stubClient } from "../../test-utils";
+import { WatchManager } from "../../../src/settings/WatchManager";
+import MatrixClientBackedController from "../../../src/settings/controllers/MatrixClientBackedController";
+
+describe("ServerSupportUnstableFeatureController", () => {
+    const watchers = new WatchManager();
+    const setting = "setting_name";
+
+    async function prepareSetting(
+        cli: MatrixClient,
+        controller: ServerSupportUnstableFeatureController,
+    ): Promise<void> {
+        SETTINGS[setting] = {
+            isFeature: true,
+            labsGroup: LabGroup.Messaging,
+            displayName: "name of some kind",
+            supportedLevels: [SettingLevel.DEVICE, SettingLevel.CONFIG],
+            default: false,
+            controller,
+        };
+
+        const deferred = defer<any>();
+        watchers.watchSetting(setting, null, deferred.resolve);
+        MatrixClientBackedController.matrixClient = cli;
+        await deferred.promise;
+    }
+
+    describe("getValueOverride()", () => {
+        it("should return forced value is setting is disabled", async () => {
+            const cli = stubClient();
+            cli.doesServerSupportUnstableFeature = jest.fn(async () => false);
+
+            const controller = new ServerSupportUnstableFeatureController(
+                setting,
+                watchers,
+                ["feature"],
+                "other_value",
+            );
+            await prepareSetting(cli, controller);
+
+            expect(controller.getValueOverride(SettingLevel.DEVICE, null, true, SettingLevel.ACCOUNT)).toEqual(
+                "other_value",
+            );
+        });
+
+        it("should pass through to the handler if setting is not disabled", async () => {
+            const cli = stubClient();
+            cli.doesServerSupportUnstableFeature = jest.fn(async () => true);
+
+            const controller = new ServerSupportUnstableFeatureController(
+                setting,
+                watchers,
+                ["feature"],
+                "other_value",
+            );
+            await prepareSetting(cli, controller);
+
+            expect(controller.getValueOverride(SettingLevel.DEVICE, null, true, SettingLevel.ACCOUNT)).toEqual(null);
+        });
+    });
+
+    describe("settingDisabled()", () => {
+        it("returns true if there is no matrix client", () => {
+            const controller = new ServerSupportUnstableFeatureController(setting, watchers, ["org.matrix.msc3030"]);
+            expect(controller.settingDisabled).toEqual(true);
+        });
+
+        it("returns true if not all required features are supported", async () => {
+            const cli = stubClient();
+            cli.doesServerSupportUnstableFeature = jest.fn(async (featureName) => {
+                return featureName === "org.matrix.msc3827.stable";
+            });
+
+            const controller = new ServerSupportUnstableFeatureController(setting, watchers, [
+                "org.matrix.msc3827.stable",
+                "org.matrix.msc3030",
+            ]);
+            await prepareSetting(cli, controller);
+
+            expect(controller.settingDisabled).toEqual(true);
+        });
+
+        it("returns false if all required features are supported", async () => {
+            const cli = stubClient();
+            cli.doesServerSupportUnstableFeature = jest.fn(async (featureName) => {
+                return featureName === "org.matrix.msc3827.stable" || featureName === "org.matrix.msc3030";
+            });
+            const controller = new ServerSupportUnstableFeatureController(setting, watchers, [
+                "org.matrix.msc3827.stable",
+                "org.matrix.msc3030",
+            ]);
+            await prepareSetting(cli, controller);
+
+            expect(controller.settingDisabled).toEqual(false);
+        });
+    });
+});
diff --git a/test/setup/setupManualMocks.ts b/test/setup/setupManualMocks.ts
index b0cac01cbd5..2d4d4532566 100644
--- a/test/setup/setupManualMocks.ts
+++ b/test/setup/setupManualMocks.ts
@@ -85,6 +85,7 @@ window.HTMLElement.prototype.scrollIntoView = jest.fn();
 fetchMock.config.overwriteRoutes = false;
 fetchMock.catch("");
 fetchMock.get("/image-file-stub", "image file stub");
+fetchMock.get("/_matrix/client/versions", {});
 // @ts-ignore
 window.fetch = fetchMock.sandbox();
 
diff --git a/test/setupTests.js b/test/setupTests.js
index 48625ae52ff..4e696735480 100644
--- a/test/setupTests.js
+++ b/test/setupTests.js
@@ -15,14 +15,8 @@ limitations under the License.
 */
 
 import "@testing-library/jest-dom";
-import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
-// eslint-disable-next-line deprecate/import
-import { configure } from "enzyme";
 import "blob-polyfill"; // https://github.com/jsdom/jsdom/issues/2555
 
-// Enable the enzyme mocks
-configure({ adapter: new Adapter() });
-
 // Very carefully enable the mocks for everything else in
 // a specific order. We use this order to ensure we properly
 // establish an application state that actually works.
diff --git a/test/stores/AccountPasswordStore-test.ts b/test/stores/AccountPasswordStore-test.ts
new file mode 100644
index 00000000000..f54886fd1b9
--- /dev/null
+++ b/test/stores/AccountPasswordStore-test.ts
@@ -0,0 +1,61 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { AccountPasswordStore } from "../../src/stores/AccountPasswordStore";
+
+jest.useFakeTimers();
+
+describe("AccountPasswordStore", () => {
+    let accountPasswordStore: AccountPasswordStore;
+
+    beforeEach(() => {
+        accountPasswordStore = new AccountPasswordStore();
+    });
+
+    it("should not have a password by default", () => {
+        expect(accountPasswordStore.getPassword()).toBeUndefined();
+    });
+
+    describe("when setting a password", () => {
+        beforeEach(() => {
+            accountPasswordStore.setPassword("pass1");
+        });
+
+        it("should return the password", () => {
+            expect(accountPasswordStore.getPassword()).toBe("pass1");
+        });
+
+        describe("and the password timeout exceed", () => {
+            beforeEach(() => {
+                jest.advanceTimersToNextTimer();
+            });
+
+            it("should clear the password", () => {
+                expect(accountPasswordStore.getPassword()).toBeUndefined();
+            });
+        });
+
+        describe("and setting another password", () => {
+            beforeEach(() => {
+                accountPasswordStore.setPassword("pass2");
+            });
+
+            it("should return the other password", () => {
+                expect(accountPasswordStore.getPassword()).toBe("pass2");
+            });
+        });
+    });
+});
diff --git a/test/stores/AutoRageshakeStore-test.ts b/test/stores/AutoRageshakeStore-test.ts
index ff57bda59cb..d7efeaee17b 100644
--- a/test/stores/AutoRageshakeStore-test.ts
+++ b/test/stores/AutoRageshakeStore-test.ts
@@ -74,7 +74,8 @@ describe("AutoRageshakeStore", () => {
             });
 
             it("should send a rageshake", () => {
-                expect(mocked(client).sendToDevice.mock.calls).toMatchInlineSnapshot(`
+                expect(mocked(client).sendToDevice.mock.calls).toMatchInlineSnapshot(
+                    `
                     [
                       [
                         "im.vector.auto_rs_request",
@@ -82,7 +83,7 @@ describe("AutoRageshakeStore", () => {
                           "@userId:matrix.org": {
                             "undefined": {
                               "device_id": undefined,
-                              "event_id": "${utdEvent.getId()}",
+                              "event_id": "utd_event_id",
                               "recipient_rageshake": undefined,
                               "room_id": "!room:example.com",
                               "sender_key": undefined,
@@ -93,7 +94,8 @@ describe("AutoRageshakeStore", () => {
                         },
                       ],
                     ]
-                `);
+                `.replace("utd_event_id", utdEvent.getId()!),
+                );
             });
         });
     });
diff --git a/test/stores/RoomViewStore-test.ts b/test/stores/RoomViewStore-test.ts
index 87d549c3706..4ca203ffd93 100644
--- a/test/stores/RoomViewStore-test.ts
+++ b/test/stores/RoomViewStore-test.ts
@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Room } from "matrix-js-sdk/src/matrix";
+import { mocked } from "jest-mock";
+import { MatrixError, Room } from "matrix-js-sdk/src/matrix";
 import { sleep } from "matrix-js-sdk/src/utils";
 
 import { RoomViewStore } from "../../src/stores/RoomViewStore";
@@ -284,6 +285,29 @@ describe("RoomViewStore", function () {
         await viewCall();
     });
 
+    it("should display an error message when the room is unreachable via the roomId", async () => {
+        // When
+        // View and wait for the room
+        dis.dispatch({ action: Action.ViewRoom, room_id: roomId });
+        await untilDispatch(Action.ActiveRoomChanged, dis);
+        // Generate error to display the expected error message
+        const error = new MatrixError(undefined, 404);
+        roomViewStore.showJoinRoomError(error, roomId);
+
+        // Check the modal props
+        expect(mocked(Modal).createDialog.mock.calls[0][1]).toMatchSnapshot();
+    });
+
+    it("should display the generic error message when the roomId doesnt match", async () => {
+        // When
+        // Generate error to display the expected error message
+        const error = new MatrixError({ error: "my 404 error" }, 404);
+        roomViewStore.showJoinRoomError(error, roomId);
+
+        // Check the modal props
+        expect(mocked(Modal).createDialog.mock.calls[0][1]).toMatchSnapshot();
+    });
+
     describe("when listening to a voice broadcast", () => {
         let voiceBroadcastPlayback: VoiceBroadcastPlayback;
 
diff --git a/test/stores/SetupEncryptionStore-test.ts b/test/stores/SetupEncryptionStore-test.ts
new file mode 100644
index 00000000000..f2e27948f24
--- /dev/null
+++ b/test/stores/SetupEncryptionStore-test.ts
@@ -0,0 +1,68 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { mocked, Mocked } from "jest-mock";
+import { IBootstrapCrossSigningOpts } from "matrix-js-sdk/src/crypto";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { SdkContextClass } from "../../src/contexts/SDKContext";
+import { accessSecretStorage } from "../../src/SecurityManager";
+import { SetupEncryptionStore } from "../../src/stores/SetupEncryptionStore";
+import { stubClient } from "../test-utils";
+
+jest.mock("../../src/SecurityManager", () => ({
+    accessSecretStorage: jest.fn(),
+}));
+
+describe("SetupEncryptionStore", () => {
+    const cachedPassword = "p4assword";
+    let client: Mocked<MatrixClient>;
+    let setupEncryptionStore: SetupEncryptionStore;
+
+    beforeEach(() => {
+        client = mocked(stubClient());
+        setupEncryptionStore = new SetupEncryptionStore();
+        SdkContextClass.instance.accountPasswordStore.setPassword(cachedPassword);
+    });
+
+    afterEach(() => {
+        SdkContextClass.instance.accountPasswordStore.clearPassword();
+    });
+
+    it("resetConfirm should work with a cached account password", async () => {
+        const makeRequest = jest.fn();
+        client.hasSecretStorageKey.mockResolvedValue(true);
+        client.bootstrapCrossSigning.mockImplementation(async (opts: IBootstrapCrossSigningOpts) => {
+            await opts?.authUploadDeviceSigningKeys(makeRequest);
+        });
+        mocked(accessSecretStorage).mockImplementation(async (func: () => Promise<void>) => {
+            await func();
+        });
+
+        await setupEncryptionStore.resetConfirm();
+
+        expect(mocked(accessSecretStorage)).toHaveBeenCalledWith(expect.any(Function), true);
+        expect(makeRequest).toHaveBeenCalledWith({
+            identifier: {
+                type: "m.id.user",
+                user: "@userId:matrix.org",
+            },
+            password: cachedPassword,
+            type: "m.login.password",
+            user: "@userId:matrix.org",
+        });
+    });
+});
diff --git a/test/stores/SpaceStore-test.ts b/test/stores/SpaceStore-test.ts
index 907d000a485..2e086fd6367 100644
--- a/test/stores/SpaceStore-test.ts
+++ b/test/stores/SpaceStore-test.ts
@@ -1179,34 +1179,34 @@ describe("SpaceStore", () => {
             const fn = jest.fn();
             store.traverseSpace("!b:server", fn);
 
-            expect(fn).toBeCalledTimes(3);
-            expect(fn).toBeCalledWith("!a:server");
-            expect(fn).toBeCalledWith("!b:server");
-            expect(fn).toBeCalledWith("!c:server");
+            expect(fn).toHaveBeenCalledTimes(3);
+            expect(fn).toHaveBeenCalledWith("!a:server");
+            expect(fn).toHaveBeenCalledWith("!b:server");
+            expect(fn).toHaveBeenCalledWith("!c:server");
         });
 
         it("including rooms", () => {
             const fn = jest.fn();
             store.traverseSpace("!b:server", fn, true);
 
-            expect(fn).toBeCalledTimes(8); // twice for shared-child
-            expect(fn).toBeCalledWith("!a:server");
-            expect(fn).toBeCalledWith("!a-child:server");
-            expect(fn).toBeCalledWith("!b:server");
-            expect(fn).toBeCalledWith("!b-child:server");
-            expect(fn).toBeCalledWith("!c:server");
-            expect(fn).toBeCalledWith("!c-child:server");
-            expect(fn).toBeCalledWith("!shared-child:server");
+            expect(fn).toHaveBeenCalledTimes(8); // twice for shared-child
+            expect(fn).toHaveBeenCalledWith("!a:server");
+            expect(fn).toHaveBeenCalledWith("!a-child:server");
+            expect(fn).toHaveBeenCalledWith("!b:server");
+            expect(fn).toHaveBeenCalledWith("!b-child:server");
+            expect(fn).toHaveBeenCalledWith("!c:server");
+            expect(fn).toHaveBeenCalledWith("!c-child:server");
+            expect(fn).toHaveBeenCalledWith("!shared-child:server");
         });
 
         it("excluding rooms", () => {
             const fn = jest.fn();
             store.traverseSpace("!b:server", fn, false);
 
-            expect(fn).toBeCalledTimes(3);
-            expect(fn).toBeCalledWith("!a:server");
-            expect(fn).toBeCalledWith("!b:server");
-            expect(fn).toBeCalledWith("!c:server");
+            expect(fn).toHaveBeenCalledTimes(3);
+            expect(fn).toHaveBeenCalledWith("!a:server");
+            expect(fn).toHaveBeenCalledWith("!b:server");
+            expect(fn).toHaveBeenCalledWith("!c:server");
         });
     });
 
diff --git a/test/stores/__snapshots__/RoomViewStore-test.ts.snap b/test/stores/__snapshots__/RoomViewStore-test.ts.snap
index 64221efac47..a6b7953697b 100644
--- a/test/stores/__snapshots__/RoomViewStore-test.ts.snap
+++ b/test/stores/__snapshots__/RoomViewStore-test.ts.snap
@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`RoomViewStore should display an error message when the room is unreachable via the roomId 1`] = `
+{
+  "description": <div>
+    You attempted to join using a room ID without providing a list of servers to join through. Room IDs are internal identifiers and cannot be used to join a room without additional information.
+    <br />
+    <br />
+    If you know a room address, try joining through that instead.
+  </div>,
+  "title": "Failed to join",
+}
+`;
+
+exports[`RoomViewStore should display the generic error message when the roomId doesnt match 1`] = `
+{
+  "description": "MatrixError: [404] my 404 error",
+  "title": "Failed to join",
+}
+`;
+
 exports[`RoomViewStore when recording a voice broadcast and trying to view a call, it should not actually view it and show the info dialog 1`] = `
 [MockFunction] {
   "calls": [
diff --git a/test/stores/room-list/SlidingRoomListStore-test.ts b/test/stores/room-list/SlidingRoomListStore-test.ts
index 6d23e16698c..8d02ace27d8 100644
--- a/test/stores/room-list/SlidingRoomListStore-test.ts
+++ b/test/stores/room-list/SlidingRoomListStore-test.ts
@@ -163,13 +163,13 @@ describe("SlidingRoomListStore", () => {
     it("setTagSorting alters the 'sort' option in the list", async () => {
         const tagId: TagID = "foo";
         await store.setTagSorting(tagId, SortAlgorithm.Alphabetic);
-        expect(context._SlidingSyncManager!.ensureListRegistered).toBeCalledWith(tagId, {
+        expect(context._SlidingSyncManager!.ensureListRegistered).toHaveBeenCalledWith(tagId, {
             sort: SlidingSyncSortToFilter[SortAlgorithm.Alphabetic],
         });
         expect(store.getTagSorting(tagId)).toEqual(SortAlgorithm.Alphabetic);
 
         await store.setTagSorting(tagId, SortAlgorithm.Recent);
-        expect(context._SlidingSyncManager!.ensureListRegistered).toBeCalledWith(tagId, {
+        expect(context._SlidingSyncManager!.ensureListRegistered).toHaveBeenCalledWith(tagId, {
             sort: SlidingSyncSortToFilter[SortAlgorithm.Recent],
         });
         expect(store.getTagSorting(tagId)).toEqual(SortAlgorithm.Recent);
diff --git a/test/stores/widgets/StopGapWidgetDriver-test.ts b/test/stores/widgets/StopGapWidgetDriver-test.ts
index a258fbf52de..8d1e067d307 100644
--- a/test/stores/widgets/StopGapWidgetDriver-test.ts
+++ b/test/stores/widgets/StopGapWidgetDriver-test.ts
@@ -18,12 +18,27 @@ import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient, ClientEvent, ITurnServer as IClientTurnServer } from "matrix-js-sdk/src/client";
 import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
 import { Direction, EventType, MatrixEvent, MsgType, RelationType } from "matrix-js-sdk/src/matrix";
-import { Widget, MatrixWidgetType, WidgetKind, WidgetDriver, ITurnServer } from "matrix-widget-api";
+import {
+    Widget,
+    MatrixWidgetType,
+    WidgetKind,
+    WidgetDriver,
+    ITurnServer,
+    SimpleObservable,
+    OpenIDRequestState,
+    IOpenIDUpdate,
+} from "matrix-widget-api";
+import {
+    ApprovalOpts,
+    CapabilitiesOpts,
+    WidgetLifecycle,
+} from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
 
 import { SdkContextClass } from "../../../src/contexts/SDKContext";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
 import { StopGapWidgetDriver } from "../../../src/stores/widgets/StopGapWidgetDriver";
 import { stubClient } from "../../test-utils";
+import { ModuleRunner } from "../../../src/modules/ModuleRunner";
 import dis from "../../../src/dispatcher/dispatcher";
 
 describe("StopGapWidgetDriver", () => {
@@ -101,6 +116,44 @@ describe("StopGapWidgetDriver", () => {
         expect(approvedCapabilities).toEqual(requestedCapabilities);
     });
 
+    it("approves capabilities via module api", async () => {
+        const driver = mkDefaultDriver();
+
+        const requestedCapabilities = new Set(["org.matrix.msc2931.navigate", "org.matrix.msc2762.timeline:*"]);
+
+        jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation(
+            (lifecycleEvent, opts, widgetInfo, requested) => {
+                if (lifecycleEvent === WidgetLifecycle.CapabilitiesRequest) {
+                    (opts as CapabilitiesOpts).approvedCapabilities = requested;
+                }
+            },
+        );
+
+        const approvedCapabilities = await driver.validateCapabilities(requestedCapabilities);
+        expect(approvedCapabilities).toEqual(requestedCapabilities);
+    });
+
+    it("approves identity via module api", async () => {
+        const driver = mkDefaultDriver();
+
+        jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts, widgetInfo) => {
+            if (lifecycleEvent === WidgetLifecycle.IdentityRequest) {
+                (opts as ApprovalOpts).approved = true;
+            }
+        });
+
+        const listener = jest.fn();
+        const observer = new SimpleObservable<IOpenIDUpdate>();
+        observer.onUpdate(listener);
+        await driver.askOpenID(observer);
+
+        const openIdUpdate: IOpenIDUpdate = {
+            state: OpenIDRequestState.Allowed,
+            token: await client.getOpenIdToken(),
+        };
+        expect(listener).toHaveBeenCalledWith(openIdUpdate);
+    });
+
     describe("sendToDevice", () => {
         const contentMap = {
             "@alice:example.org": {
@@ -223,7 +276,7 @@ describe("StopGapWidgetDriver", () => {
                 prevBatch: undefined,
             });
 
-            expect(client.relations).toBeCalledWith("!this-room-id", "$event", null, null, {});
+            expect(client.relations).toHaveBeenCalledWith("!this-room-id", "$event", null, null, {});
         });
 
         it("reads related events from a selected room", async () => {
@@ -239,7 +292,7 @@ describe("StopGapWidgetDriver", () => {
                 prevBatch: undefined,
             });
 
-            expect(client.relations).toBeCalledWith("!room-id", "$event", null, null, {});
+            expect(client.relations).toHaveBeenCalledWith("!room-id", "$event", null, null, {});
         });
 
         it("reads related events with custom parameters", async () => {
@@ -265,7 +318,7 @@ describe("StopGapWidgetDriver", () => {
                 prevBatch: undefined,
             });
 
-            expect(client.relations).toBeCalledWith("!room-id", "$event", "m.reference", "m.room.message", {
+            expect(client.relations).toHaveBeenCalledWith("!room-id", "$event", "m.reference", "m.room.message", {
                 limit: 25,
                 from: "from-token",
                 to: "to-token",
diff --git a/test/test-utils/composer.ts b/test/test-utils/composer.ts
index 85227acbc12..cc43133049f 100644
--- a/test/test-utils/composer.ts
+++ b/test/test-utils/composer.ts
@@ -14,10 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// eslint-disable-next-line deprecate/import
-import { ReactWrapper } from "enzyme";
-import { act } from "react-dom/test-utils";
-import { act as actRTL, fireEvent, RenderResult } from "@testing-library/react";
+import { act, fireEvent, RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 export const addTextToComposer = (container: HTMLElement, text: string) =>
@@ -34,23 +31,8 @@ export const addTextToComposer = (container: HTMLElement, text: string) =>
         fireEvent.paste(container.querySelector('[role="textbox"]')!, pasteEvent);
     });
 
-export const addTextToComposerEnzyme = (wrapper: ReactWrapper, text: string) =>
-    act(() => {
-        // couldn't get input event on contenteditable to work
-        // paste works without illegal private method access
-        const pasteEvent: Partial<ClipboardEvent> = {
-            clipboardData: {
-                types: [],
-                files: [],
-                getData: (type: string) => (type === "text/plain" ? text : undefined),
-            } as unknown as DataTransfer,
-        };
-        wrapper.find('[role="textbox"]').simulate("paste", pasteEvent);
-        wrapper.update();
-    });
-
 export const addTextToComposerRTL = async (renderResult: RenderResult, text: string): Promise<void> => {
-    await actRTL(async () => {
+    await act(async () => {
         await userEvent.click(renderResult.getByLabelText("Send a message…"));
         await userEvent.keyboard(text);
     });
diff --git a/test/test-utils/poll.ts b/test/test-utils/poll.ts
index 81d95d532ab..9e11f46e8d7 100644
--- a/test/test-utils/poll.ts
+++ b/test/test-utils/poll.ts
@@ -66,9 +66,15 @@ export const makePollStartEvent = (
     });
 };
 
-export const makePollEndEvent = (pollStartEventId: string, roomId: string, sender: string, ts = 0): MatrixEvent => {
+export const makePollEndEvent = (
+    pollStartEventId: string,
+    roomId: string,
+    sender: string,
+    ts = 0,
+    id?: string,
+): MatrixEvent => {
     return new MatrixEvent({
-        event_id: uuid4(),
+        event_id: id || uuid4(),
         room_id: roomId,
         origin_server_ts: ts,
         type: M_POLL_END.name,
diff --git a/test/test-utils/test-utils.ts b/test/test-utils/test-utils.ts
index fb2910145c0..f7f0fe9c7c7 100644
--- a/test/test-utils/test-utils.ts
+++ b/test/test-utils/test-utils.ts
@@ -96,12 +96,18 @@ export function createTestClient(): MatrixClient {
         getUserId: jest.fn().mockReturnValue("@userId:matrix.org"),
         getSafeUserId: jest.fn().mockReturnValue("@userId:matrix.org"),
         getUserIdLocalpart: jest.fn().mockResolvedValue("userId"),
-        getUser: jest.fn().mockReturnValue({ on: jest.fn() }),
+        getUser: jest.fn().mockReturnValue({ on: jest.fn(), off: jest.fn() }),
+        getDevice: jest.fn(),
         getDeviceId: jest.fn().mockReturnValue("ABCDEFGHI"),
+        getStoredCrossSigningForUser: jest.fn(),
+        getStoredDevice: jest.fn(),
+        requestVerification: jest.fn(),
         deviceId: "ABCDEFGHI",
         getDevices: jest.fn().mockResolvedValue({ devices: [{ device_id: "ABCDEFGHI" }] }),
         getSessionId: jest.fn().mockReturnValue("iaszphgvfku"),
         credentials: { userId: "@userId:matrix.org" },
+        bootstrapCrossSigning: jest.fn(),
+        hasSecretStorageKey: jest.fn(),
 
         store: {
             getPendingEvents: jest.fn().mockResolvedValue([]),
@@ -449,6 +455,7 @@ export function mkRoomMember(roomId: string, userId: string, membership = "join"
         getAvatarUrl: () => {},
         getMxcAvatarUrl: () => {},
         getDMInviter: () => {},
+        off: () => {},
     } as unknown as RoomMember;
 }
 
@@ -502,6 +509,7 @@ export function mkStubRoom(
     return {
         canInvite: jest.fn(),
         client,
+        findThreadForEvent: jest.fn(),
         createThreadsTimelineSets: jest.fn().mockReturnValue(new Promise(() => {})),
         currentState: {
             getStateEvents: jest.fn((_type, key) => (key === undefined ? [] : null)),
@@ -684,6 +692,19 @@ export const mkRoomMemberJoinEvent = (user: string, room: string): MatrixEvent =
     });
 };
 
+export const mkThirdPartyInviteEvent = (user: string, displayName: string, room: string): MatrixEvent => {
+    return mkEvent({
+        event: true,
+        type: EventType.RoomThirdPartyInvite,
+        content: {
+            display_name: displayName,
+        },
+        skey: "test" + Math.random(),
+        user,
+        room,
+    });
+};
+
 export const mkPusher = (extra: Partial<IPusher> = {}): IPusher => ({
     app_display_name: "app",
     app_id: "123",
diff --git a/test/test-utils/utilities.ts b/test/test-utils/utilities.ts
index a03e10b83e4..2549b5971e8 100644
--- a/test/test-utils/utilities.ts
+++ b/test/test-utils/utilities.ts
@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// eslint-disable-next-line deprecate/import
-import { ReactWrapper } from "enzyme";
 import EventEmitter from "events";
 
 import { ActionPayload } from "../../src/dispatcher/payloads";
@@ -128,17 +126,6 @@ export function untilEmission(
     });
 }
 
-export const findByAttr = (attr: string) => (component: ReactWrapper, value: string) =>
-    component.find(`[${attr}="${value}"]`);
-export const findByTestId = findByAttr("data-test-id");
-export const findById = findByAttr("id");
-export const findByAriaLabel = findByAttr("aria-label");
-
-const findByTagAndAttr = (attr: string) => (component: ReactWrapper, value: string, tag: string) =>
-    component.find(`${tag}[${attr}="${value}"]`);
-
-export const findByTagAndTestId = findByTagAndAttr("data-test-id");
-
 export const flushPromises = async () => await new Promise((resolve) => window.setTimeout(resolve));
 
 // with jest's modern fake timers process.nextTick is also mocked,
diff --git a/test/test-utils/wrappers.tsx b/test/test-utils/wrappers.tsx
index 2afa15746d9..95775381559 100644
--- a/test/test-utils/wrappers.tsx
+++ b/test/test-utils/wrappers.tsx
@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { RefCallback, ComponentType } from "react";
+import React, { ComponentType, Ref } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg as peg } from "../../src/MatrixClientPeg";
 import MatrixClientContext from "../../src/contexts/MatrixClientContext";
 import { SDKContext, SdkContextClass } from "../../src/contexts/SDKContext";
 
-type WrapperProps<T> = { wrappedRef?: RefCallback<ComponentType<T>> } & T;
+type WrapperProps<T> = { wrappedRef?: Ref<ComponentType<T>> } & T;
 
 export function wrapInMatrixClientContext<T>(WrappedComponent: ComponentType<T>): ComponentType<WrapperProps<T>> {
     class Wrapper extends React.Component<WrapperProps<T>> {
diff --git a/test/theme-test.ts b/test/theme-test.ts
index d1dc5f68cc1..44a860f7ac1 100644
--- a/test/theme-test.ts
+++ b/test/theme-test.ts
@@ -63,7 +63,7 @@ describe("theme", () => {
 
             // Then
             expect(spyQuerySelectorAll).toHaveBeenCalledWith("[data-mx-theme]");
-            expect(spyQuerySelectorAll).toBeCalledTimes(1);
+            expect(spyQuerySelectorAll).toHaveBeenCalledTimes(1);
             expect(lightTheme.disabled).toBe(false);
             expect(darkTheme.disabled).toBe(true);
         });
diff --git a/test/toasts/UnverifiedSessionToast-test.tsx b/test/toasts/UnverifiedSessionToast-test.tsx
new file mode 100644
index 00000000000..8d540baf073
--- /dev/null
+++ b/test/toasts/UnverifiedSessionToast-test.tsx
@@ -0,0 +1,111 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render, RenderResult, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { mocked, Mocked } from "jest-mock";
+import { IMyDevice, MatrixClient } from "matrix-js-sdk/src/matrix";
+import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
+import { CrossSigningInfo } from "matrix-js-sdk/src/crypto/CrossSigning";
+
+import dis from "../../src/dispatcher/dispatcher";
+import { showToast } from "../../src/toasts/UnverifiedSessionToast";
+import { filterConsole, flushPromises, stubClient } from "../test-utils";
+import ToastContainer from "../../src/components/structures/ToastContainer";
+import { Action } from "../../src/dispatcher/actions";
+import DeviceListener from "../../src/DeviceListener";
+
+describe("UnverifiedSessionToast", () => {
+    const otherDevice: IMyDevice = {
+        device_id: "ABC123",
+    };
+    const otherDeviceInfo = new DeviceInfo(otherDevice.device_id);
+    let client: Mocked<MatrixClient>;
+    let renderResult: RenderResult;
+
+    filterConsole("Starting load of AsyncWrapper for modal", "Dismissing unverified sessions: ABC123");
+
+    beforeAll(() => {
+        client = mocked(stubClient());
+        client.getDevice.mockImplementation(async (deviceId: string) => {
+            if (deviceId === otherDevice.device_id) {
+                return otherDevice;
+            }
+
+            throw new Error(`Unknown device ${deviceId}`);
+        });
+        client.getStoredDevice.mockImplementation((userId: string, deviceId: string) => {
+            if (deviceId === otherDevice.device_id) {
+                return otherDeviceInfo;
+            }
+
+            return null;
+        });
+        client.getStoredCrossSigningForUser.mockReturnValue({
+            checkDeviceTrust: jest.fn().mockReturnValue({
+                isCrossSigningVerified: jest.fn().mockReturnValue(true),
+            }),
+        } as unknown as CrossSigningInfo);
+        jest.spyOn(dis, "dispatch");
+        jest.spyOn(DeviceListener.sharedInstance(), "dismissUnverifiedSessions");
+    });
+
+    beforeEach(() => {
+        renderResult = render(<ToastContainer />);
+    });
+
+    describe("when rendering the toast", () => {
+        beforeEach(async () => {
+            showToast(otherDevice.device_id);
+            await flushPromises();
+        });
+
+        const itShouldDismissTheDevice = () => {
+            it("should dismiss the device", () => {
+                expect(DeviceListener.sharedInstance().dismissUnverifiedSessions).toHaveBeenCalledWith([
+                    otherDevice.device_id,
+                ]);
+            });
+        };
+
+        it("should render as expected", () => {
+            expect(renderResult.baseElement).toMatchSnapshot();
+        });
+
+        describe("and confirming the login", () => {
+            beforeEach(async () => {
+                await userEvent.click(screen.getByRole("button", { name: "Yes, it was me" }));
+            });
+
+            itShouldDismissTheDevice();
+        });
+
+        describe("and dismissing the login", () => {
+            beforeEach(async () => {
+                await userEvent.click(screen.getByRole("button", { name: "No" }));
+            });
+
+            itShouldDismissTheDevice();
+
+            it("should show the device settings", () => {
+                expect(dis.dispatch).toHaveBeenCalledWith({
+                    action: Action.ViewUserDeviceSettings,
+                });
+            });
+        });
+    });
+});
diff --git a/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap b/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
new file mode 100644
index 00000000000..0aef2390306
--- /dev/null
+++ b/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnverifiedSessionToast when rendering the toast should render as expected 1`] = `
+<body>
+  <div>
+    <div
+      class="mx_ToastContainer"
+      role="alert"
+    >
+      <div
+        class="mx_Toast_toast mx_Toast_hasIcon mx_Toast_icon_verification_warning"
+      >
+        <div
+          class="mx_Toast_title"
+        >
+          <h2>
+            New login. Was this you?
+          </h2>
+          <span
+            class="mx_Toast_title_countIndicator"
+          />
+        </div>
+        <div
+          class="mx_Toast_body"
+        >
+          <div>
+            <div
+              class="mx_Toast_description"
+            >
+              <div
+                class="mx_Toast_detail"
+              >
+                <span
+                  data-testid="device-metadata-isVerified"
+                >
+                  Verified
+                </span>
+                 · 
+                <span
+                  data-testid="device-metadata-deviceId"
+                >
+                  ABC123
+                </span>
+              </div>
+            </div>
+            <div
+              aria-live="off"
+              class="mx_Toast_buttons"
+            >
+              <div
+                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+                role="button"
+                tabindex="0"
+              >
+                No
+              </div>
+              <div
+                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+                role="button"
+                tabindex="0"
+              >
+                Yes, it was me
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/test/utils/DMRoomMap-test.ts b/test/utils/DMRoomMap-test.ts
index 9a3ddd951cd..528bd0778c9 100644
--- a/test/utils/DMRoomMap-test.ts
+++ b/test/utils/DMRoomMap-test.ts
@@ -30,7 +30,7 @@ describe("DMRoomMap", () => {
         "user@example.com": [roomId1, roomId2],
         "@user:example.com": [roomId1, roomId3, roomId4],
         "@user2:example.com": [] as string[],
-    } satisfies IContent;
+    } as IContent;
 
     let client: Mocked<MatrixClient>;
     let dmRoomMap: DMRoomMap;
diff --git a/test/utils/MultiInviter-test.ts b/test/utils/MultiInviter-test.ts
index ed925227eb3..b6091e59080 100644
--- a/test/utils/MultiInviter-test.ts
+++ b/test/utils/MultiInviter-test.ts
@@ -18,10 +18,11 @@ import { mocked } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg } from "../../src/MatrixClientPeg";
-import Modal, { ModalManager } from "../../src/Modal";
+import Modal, { ComponentType, ComponentProps } from "../../src/Modal";
 import SettingsStore from "../../src/settings/SettingsStore";
 import MultiInviter, { CompletionStates } from "../../src/utils/MultiInviter";
 import * as TestUtilsMatrix from "../test-utils";
+import AskInviteAnywayDialog from "../../src/components/views/dialogs/AskInviteAnywayDialog";
 
 const ROOMID = "!room:server";
 
@@ -56,9 +57,11 @@ const mockPromptBeforeInviteUnknownUsers = (value: boolean) => {
 };
 
 const mockCreateTrackedDialog = (callbackName: "onInviteAnyways" | "onGiveUp") => {
-    mocked(Modal.createDialog).mockImplementation((...rest: Parameters<ModalManager["createDialog"]>): any => {
-        rest[1]![callbackName]();
-    });
+    mocked(Modal.createDialog).mockImplementation(
+        (Element: ComponentType, props?: ComponentProps<ComponentType>): any => {
+            (props as ComponentProps<typeof AskInviteAnywayDialog>)[callbackName]();
+        },
+    );
 };
 
 const expectAllInvitedResult = (result: CompletionStates) => {
diff --git a/test/utils/connection-test.ts b/test/utils/connection-test.ts
index 70b8a119417..c9fdb2e771c 100644
--- a/test/utils/connection-test.ts
+++ b/test/utils/connection-test.ts
@@ -35,7 +35,7 @@ describe("createReconnectedListener", () => {
     ].forEach(([from, to]) => {
         it(`should invoke the callback on a transition from ${from} to ${to}`, () => {
             reconnectedListener(to, from);
-            expect(onReconnect).toBeCalled();
+            expect(onReconnect).toHaveBeenCalled();
         });
     });
 
@@ -46,7 +46,7 @@ describe("createReconnectedListener", () => {
     ].forEach(([from, to]) => {
         it(`should not invoke the callback on a transition from ${from} to ${to}`, () => {
             reconnectedListener(to, from);
-            expect(onReconnect).not.toBeCalled();
+            expect(onReconnect).not.toHaveBeenCalled();
         });
     });
 });
diff --git a/test/utils/device/parseUserAgent-test.ts b/test/utils/device/parseUserAgent-test.ts
index 2aabdc479db..65e31a68a07 100644
--- a/test/utils/device/parseUserAgent-test.ts
+++ b/test/utils/device/parseUserAgent-test.ts
@@ -130,8 +130,8 @@ describe("parseUserAgent()", () => {
     const testPlatform = (platform: string, userAgents: string[], results: ExtendedDeviceInformation[]): void => {
         const testCases: TestCase[] = userAgents.map((userAgent, index) => [userAgent, results[index]]);
 
-        describe(platform, () => {
-            it.each(testCases)("Parses user agent correctly -  %s", (userAgent, expectedResult) => {
+        describe(`on platform ${platform}`, () => {
+            it.each(testCases)("should parse the user agent correctly -  %s", (userAgent, expectedResult) => {
                 expect(parseUserAgent(userAgent)).toEqual(expectedResult);
             });
         });
diff --git a/test/utils/direct-messages-test.ts b/test/utils/direct-messages-test.ts
index 80d9f9becc3..54222aae38b 100644
--- a/test/utils/direct-messages-test.ts
+++ b/test/utils/direct-messages-test.ts
@@ -116,11 +116,11 @@ describe("direct-messages", () => {
             it("should create a local room and dispatch a view room event", async () => {
                 mocked(createDmLocalRoom).mockResolvedValue(localRoom);
                 const members = [member1];
-                const room = await dmModule.startDmOnFirstMessage(mockClient, members);
-                expect(room).toBe(localRoom);
+                const roomId = await dmModule.startDmOnFirstMessage(mockClient, members);
+                expect(roomId).toBe(localRoom.roomId);
                 expect(dis.dispatch).toHaveBeenCalledWith({
                     action: Action.ViewRoom,
-                    room_id: room.roomId,
+                    room_id: roomId,
                     joining: false,
                     targets: [member1],
                 });
@@ -135,8 +135,8 @@ describe("direct-messages", () => {
 
                 mocked(createDmLocalRoom).mockResolvedValue(localRoom);
                 const members = [member1];
-                const room = await dmModule.startDmOnFirstMessage(mockClient, members);
-                expect(room).toBe(localRoom);
+                const roomId = await dmModule.startDmOnFirstMessage(mockClient, members);
+                expect(roomId).toBe(localRoom.roomId);
 
                 // ensure that startDmOnFirstMessage tries to resolve 3rd-party IDs
                 expect(resolveThreePids).toHaveBeenCalledWith(members, mockClient);
@@ -152,8 +152,8 @@ describe("direct-messages", () => {
             });
 
             it("should return the room and dispatch a view room event", async () => {
-                const room = await dmModule.startDmOnFirstMessage(mockClient, [member1]);
-                expect(room).toBe(room1);
+                const roomId = await dmModule.startDmOnFirstMessage(mockClient, [member1]);
+                expect(roomId).toBe(room1.roomId);
                 expect(dis.dispatch).toHaveBeenCalledWith({
                     action: Action.ViewRoom,
                     room_id: room1.roomId,
diff --git a/test/utils/dm/createDmLocalRoom-test.ts b/test/utils/dm/createDmLocalRoom-test.ts
index f014529114e..dc0bcab555f 100644
--- a/test/utils/dm/createDmLocalRoom-test.ts
+++ b/test/utils/dm/createDmLocalRoom-test.ts
@@ -70,10 +70,10 @@ describe("createDmLocalRoom", () => {
             mocked(privateShouldBeEncrypted).mockReturnValue(true);
         });
 
-        it("should create an unencrypted room for 3PID targets", async () => {
+        it("should create an encrytped room for 3PID targets", async () => {
             const room = await createDmLocalRoom(mockClient, [member2]);
             expect(mockClient.store.storeRoom).toHaveBeenCalledWith(room);
-            assertLocalRoom(room, [member2], false);
+            assertLocalRoom(room, [member2], true);
         });
 
         describe("for MXID targets with encryption available", () => {
diff --git a/test/utils/dm/findDMForUser-test.ts b/test/utils/dm/findDMForUser-test.ts
index 60c5b342f48..72a7764df66 100644
--- a/test/utils/dm/findDMForUser-test.ts
+++ b/test/utils/dm/findDMForUser-test.ts
@@ -18,7 +18,7 @@ import { mocked } from "jest-mock";
 import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 
 import DMRoomMap from "../../../src/utils/DMRoomMap";
-import { createTestClient, makeMembershipEvent } from "../../test-utils";
+import { createTestClient, makeMembershipEvent, mkThirdPartyInviteEvent } from "../../test-utils";
 import { LocalRoom } from "../../../src/models/LocalRoom";
 import { findDMForUser } from "../../../src/utils/dm/findDMForUser";
 import { getFunctionalMembers } from "../../../src/utils/room/getFunctionalMembers";
@@ -32,13 +32,15 @@ describe("findDMForUser", () => {
     const userId2 = "@user2:example.com";
     const userId3 = "@user3:example.com";
     const botId = "@bot:example.com";
+    const thirdPartyId = "party@example.com";
     let room1: Room;
     let room2: LocalRoom;
     let room3: Room;
     let room4: Room;
     let room5: Room;
     let room6: Room;
-    const room7Id = "!room7:example.com";
+    let room7: Room;
+    const unknownRoomId = "!unknown:example.com";
     let dmRoomMap: DMRoomMap;
     let mockClient: MatrixClient;
 
@@ -89,6 +91,14 @@ describe("findDMForUser", () => {
             makeMembershipEvent(room6.roomId, userId3, "join"),
         ]);
 
+        // room with pending third-party invite
+        room7 = new Room("!room7:example.com", mockClient, userId1);
+        room7.getMyMembership = () => "join";
+        room7.currentState.setStateEvents([
+            makeMembershipEvent(room7.roomId, userId1, "join"),
+            mkThirdPartyInviteEvent(thirdPartyId, "third-party", room7.roomId),
+        ]);
+
         mocked(mockClient.getRoom).mockImplementation((roomId: string) => {
             return (
                 {
@@ -98,6 +108,7 @@ describe("findDMForUser", () => {
                     [room4.roomId]: room4,
                     [room5.roomId]: room5,
                     [room6.roomId]: room6,
+                    [room7.roomId]: room7,
                 }[roomId] || null
             );
         });
@@ -113,14 +124,19 @@ describe("findDMForUser", () => {
                     room4.roomId,
                     room5.roomId,
                     room6.roomId,
-                    room7Id, // this room does not exist in client
+                    room7.roomId,
+                    unknownRoomId, // this room does not exist in client
                 ]),
             ),
         } as unknown as DMRoomMap;
         jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
         mocked(dmRoomMap.getDMRoomsForUserId).mockImplementation((userId: string) => {
             if (userId === userId1) {
-                return [room1.roomId, room2.roomId, room3.roomId, room4.roomId, room5.roomId, room7Id];
+                return [room1.roomId, room2.roomId, room3.roomId, room4.roomId, room5.roomId, unknownRoomId];
+            }
+
+            if (userId === thirdPartyId) {
+                return [room7.roomId];
             }
 
             return [];
@@ -158,4 +174,12 @@ describe("findDMForUser", () => {
 
         expect(findDMForUser(mockClient, userId3)).toBe(room6);
     });
+
+    it("should find a room with a pending third-party invite", () => {
+        expect(findDMForUser(mockClient, thirdPartyId)).toBe(room7);
+    });
+
+    it("should not find a room for an unknown Id", () => {
+        expect(findDMForUser(mockClient, "@unknown:example.com")).toBe(undefined);
+    });
 });
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index a75af856dbf..d018b83cff6 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { renderToString } from "react-dom/server";
+import { render } from "@testing-library/react";
 import {
     IContent,
     MatrixClient,
@@ -227,6 +227,10 @@ describe("export", function () {
         return matrixEvents;
     }
 
+    function renderToString(elem: JSX.Element): string {
+        return render(elem).container.outerHTML;
+    }
+
     it("checks if the export format is valid", function () {
         function isValidFormat(format: string): boolean {
             const options: string[] = Object.values(ExportFormat);
@@ -255,7 +259,7 @@ describe("export", function () {
             },
             setProgressText,
         );
-        const imageRegex = /<img.+ src="mxc:\/\/test.org" alt="image.png"\/>/;
+        const imageRegex = /<img.+ src="mxc:\/\/test.org" alt="image\.png"\/?>/;
         expect(imageRegex.test(renderToString(exporter.getEventTile(mkImageEvent(), true)))).toBeTruthy();
     });
 
@@ -286,7 +290,7 @@ describe("export", function () {
         ],
     ];
     it.each(invalidExportOptions)("%s", (_d, options) => {
-        expect(() => new PlainTextExporter(mockRoom, ExportType.Beginning, options, setProgressText)).toThrowError(
+        expect(() => new PlainTextExporter(mockRoom, ExportType.Beginning, options, setProgressText)).toThrow(
             "Invalid export options",
         );
     });
diff --git a/test/utils/exportUtils/HTMLExport-test.ts b/test/utils/exportUtils/HTMLExport-test.ts
index bbdfa9e6479..04f4f19e3ca 100644
--- a/test/utils/exportUtils/HTMLExport-test.ts
+++ b/test/utils/exportUtils/HTMLExport-test.ts
@@ -329,31 +329,28 @@ describe("HTMLExport", () => {
 
         // test link to the first page
         //@ts-ignore private access
-        exporter.wrapHTML("", 0, 3).then((res) => {
-            expect(res).not.toContain("Previous group of messages");
-            expect(res).toContain(
-                '<div style="text-align:center;margin:10px"><a href="./messages2.html" style="font-weight:bold">Next group of messages</a></div>',
-            );
-        });
+        let result = await exporter.wrapHTML("", 0, 3);
+        expect(result).not.toContain("Previous group of messages");
+        expect(result).toContain(
+            '<div style="text-align:center;margin:10px"><a href="./messages2.html" style="font-weight:bold">Next group of messages</a></div>',
+        );
 
         // test link for a middle page
         //@ts-ignore private access
-        exporter.wrapHTML("", 1, 3).then((res) => {
-            expect(res).toContain(
-                '<div style="text-align:center"><a href="./messages.html" style="font-weight:bold">Previous group of messages</a></div>',
-            );
-            expect(res).toContain(
-                '<div style="text-align:center;margin:10px"><a href="./messages3.html" style="font-weight:bold">Next group of messages</a></div>',
-            );
-        });
+        result = await exporter.wrapHTML("", 1, 3);
+        expect(result).toContain(
+            '<div style="text-align:center"><a href="./messages.html" style="font-weight:bold">Previous group of messages</a></div>',
+        );
+        expect(result).toContain(
+            '<div style="text-align:center;margin:10px"><a href="./messages3.html" style="font-weight:bold">Next group of messages</a></div>',
+        );
 
         // test link for last page
         //@ts-ignore private access
-        exporter.wrapHTML("", 2, 3).then((res) => {
-            expect(res).toContain(
-                '<div style="text-align:center"><a href="./messages2.html" style="font-weight:bold">Previous group of messages</a></div>',
-            );
-            expect(res).not.toContain("Next group of messages");
-        });
+        result = await exporter.wrapHTML("", 2, 3);
+        expect(result).toContain(
+            '<div style="text-align:center"><a href="./messages2.html" style="font-weight:bold">Previous group of messages</a></div>',
+        );
+        expect(result).not.toContain("Next group of messages");
     });
 });
diff --git a/test/utils/local-room-test.ts b/test/utils/local-room-test.ts
index 89cb279da13..8a319cf4119 100644
--- a/test/utils/local-room-test.ts
+++ b/test/utils/local-room-test.ts
@@ -120,16 +120,14 @@ describe("local-room", () => {
                 mocked(isRoomReady).mockReturnValue(false);
             });
 
-            it("should invoke the callbacks, set the room state to created and return the actual room id", (done) => {
+            it("should invoke the callbacks, set the room state to created and return the actual room id", async () => {
                 const prom = localRoomModule.waitForRoomReadyAndApplyAfterCreateCallbacks(client, localRoom);
                 jest.advanceTimersByTime(5000);
-                prom.then((roomId: string) => {
-                    expect(localRoom.state).toBe(LocalRoomState.CREATED);
-                    expect(localRoomCallbackRoomId).toBe(room1.roomId);
-                    expect(roomId).toBe(room1.roomId);
-                    expect(jest.getTimerCount()).toBe(0);
-                    done();
-                });
+                const roomId = await prom;
+                expect(localRoom.state).toBe(LocalRoomState.CREATED);
+                expect(localRoomCallbackRoomId).toBe(room1.roomId);
+                expect(roomId).toBe(room1.roomId);
+                expect(jest.getTimerCount()).toBe(0);
             });
         });
 
@@ -138,17 +136,15 @@ describe("local-room", () => {
                 mocked(isRoomReady).mockReturnValue(false);
             });
 
-            it("should invoke the callbacks, set the room state to created and return the actual room id", (done) => {
+            it("should invoke the callbacks, set the room state to created and return the actual room id", async () => {
                 const prom = localRoomModule.waitForRoomReadyAndApplyAfterCreateCallbacks(client, localRoom);
                 mocked(isRoomReady).mockReturnValue(true);
                 jest.advanceTimersByTime(500);
-                prom.then((roomId: string) => {
-                    expect(localRoom.state).toBe(LocalRoomState.CREATED);
-                    expect(localRoomCallbackRoomId).toBe(room1.roomId);
-                    expect(roomId).toBe(room1.roomId);
-                    expect(jest.getTimerCount()).toBe(0);
-                    done();
-                });
+                const roomId = await prom;
+                expect(localRoom.state).toBe(LocalRoomState.CREATED);
+                expect(localRoomCallbackRoomId).toBe(room1.roomId);
+                expect(roomId).toBe(room1.roomId);
+                expect(jest.getTimerCount()).toBe(0);
             });
         });
     });
diff --git a/test/utils/localRoom/isRoomReady-test.ts b/test/utils/localRoom/isRoomReady-test.ts
index c458672d51e..e317301e762 100644
--- a/test/utils/localRoom/isRoomReady-test.ts
+++ b/test/utils/localRoom/isRoomReady-test.ts
@@ -51,7 +51,7 @@ describe("isRoomReady", () => {
             mocked(client.getRoom).mockReturnValue(null);
         });
 
-        it("it should return false", () => {
+        it("should return false", () => {
             expect(isRoomReady(client, localRoom)).toBe(false);
         });
 
@@ -63,7 +63,7 @@ describe("isRoomReady", () => {
                 });
             });
 
-            it("it should return false", () => {
+            it("should return false", () => {
                 expect(isRoomReady(client, localRoom)).toBe(false);
             });
 
@@ -75,7 +75,7 @@ describe("isRoomReady", () => {
                     ]);
                 });
 
-                it("it should return false", () => {
+                it("should return false", () => {
                     expect(isRoomReady(client, localRoom)).toBe(false);
                 });
 
@@ -92,7 +92,7 @@ describe("isRoomReady", () => {
                         ]);
                     });
 
-                    it("it should return true", () => {
+                    it("should return true", () => {
                         expect(isRoomReady(client, localRoom)).toBe(true);
                     });
 
@@ -101,7 +101,7 @@ describe("isRoomReady", () => {
                             localRoom.encrypted = true;
                         });
 
-                        it("it should return false", () => {
+                        it("should return false", () => {
                             expect(isRoomReady(client, localRoom)).toBe(false);
                         });
 
@@ -118,7 +118,7 @@ describe("isRoomReady", () => {
                                 ]);
                             });
 
-                            it("it should return true", () => {
+                            it("should return true", () => {
                                 expect(isRoomReady(client, localRoom)).toBe(true);
                             });
                         });
diff --git a/test/utils/location/parseGeoUri-test.ts b/test/utils/location/parseGeoUri-test.ts
index 7e7a9020a89..027d0b3e850 100644
--- a/test/utils/location/parseGeoUri-test.ts
+++ b/test/utils/location/parseGeoUri-test.ts
@@ -35,9 +35,9 @@ describe("parseGeoUri", () => {
             longitude: 16.3695,
             altitude: 183,
             accuracy: undefined,
-            altitudeAccuracy: undefined,
-            heading: undefined,
-            speed: undefined,
+            altitudeAccuracy: null,
+            heading: null,
+            speed: null,
         });
     });
 
@@ -45,11 +45,11 @@ describe("parseGeoUri", () => {
         expect(parseGeoUri("geo:48.198634,16.371648;crs=wgs84;u=40")).toEqual({
             latitude: 48.198634,
             longitude: 16.371648,
-            altitude: undefined,
+            altitude: null,
             accuracy: 40,
-            altitudeAccuracy: undefined,
-            heading: undefined,
-            speed: undefined,
+            altitudeAccuracy: null,
+            heading: null,
+            speed: null,
         });
     });
 
@@ -57,11 +57,11 @@ describe("parseGeoUri", () => {
         expect(parseGeoUri("geo:90,-22.43;crs=WGS84")).toEqual({
             latitude: 90,
             longitude: -22.43,
-            altitude: undefined,
+            altitude: null,
             accuracy: undefined,
-            altitudeAccuracy: undefined,
-            heading: undefined,
-            speed: undefined,
+            altitudeAccuracy: null,
+            heading: null,
+            speed: null,
         });
     });
 
@@ -69,11 +69,11 @@ describe("parseGeoUri", () => {
         expect(parseGeoUri("geo:90,46")).toEqual({
             latitude: 90,
             longitude: 46,
-            altitude: undefined,
+            altitude: null,
             accuracy: undefined,
-            altitudeAccuracy: undefined,
-            heading: undefined,
-            speed: undefined,
+            altitudeAccuracy: null,
+            heading: null,
+            speed: null,
         });
     });
 
@@ -81,11 +81,11 @@ describe("parseGeoUri", () => {
         expect(parseGeoUri("geo:66,30;u=6.500;FOo=this%2dthat")).toEqual({
             latitude: 66,
             longitude: 30,
-            altitude: undefined,
+            altitude: null,
             accuracy: 6.5,
-            altitudeAccuracy: undefined,
-            heading: undefined,
-            speed: undefined,
+            altitudeAccuracy: null,
+            heading: null,
+            speed: null,
         });
     });
 
@@ -93,11 +93,11 @@ describe("parseGeoUri", () => {
         expect(parseGeoUri("geo:66.0,30;u=6.5;foo=this-that>")).toEqual({
             latitude: 66.0,
             longitude: 30,
-            altitude: undefined,
+            altitude: null,
             accuracy: 6.5,
-            altitudeAccuracy: undefined,
-            heading: undefined,
-            speed: undefined,
+            altitudeAccuracy: null,
+            heading: null,
+            speed: null,
         });
     });
 
@@ -105,11 +105,11 @@ describe("parseGeoUri", () => {
         expect(parseGeoUri("geo:70,20;foo=1.00;bar=white")).toEqual({
             latitude: 70,
             longitude: 20,
-            altitude: undefined,
+            altitude: null,
             accuracy: undefined,
-            altitudeAccuracy: undefined,
-            heading: undefined,
-            speed: undefined,
+            altitudeAccuracy: null,
+            heading: null,
+            speed: null,
         });
     });
 
@@ -117,11 +117,11 @@ describe("parseGeoUri", () => {
         expect(parseGeoUri("geo:-7.5,20")).toEqual({
             latitude: -7.5,
             longitude: 20,
-            altitude: undefined,
+            altitude: null,
             accuracy: undefined,
-            altitudeAccuracy: undefined,
-            heading: undefined,
-            speed: undefined,
+            altitudeAccuracy: null,
+            heading: null,
+            speed: null,
         });
     });
 
@@ -131,9 +131,9 @@ describe("parseGeoUri", () => {
             longitude: -20,
             altitude: 0,
             accuracy: undefined,
-            altitudeAccuracy: undefined,
-            heading: undefined,
-            speed: undefined,
+            altitudeAccuracy: null,
+            heading: null,
+            speed: null,
         });
     });
 });
diff --git a/test/utils/membership-test.ts b/test/utils/membership-test.ts
index 9f62ec3a93f..abe020db7bb 100644
--- a/test/utils/membership-test.ts
+++ b/test/utils/membership-test.ts
@@ -29,31 +29,32 @@ describe("waitForMember", () => {
         client = new EventEmitter();
     });
 
-    it("resolves with false if the timeout is reached", (done) => {
-        waitForMember(<MatrixClient>client, "", "", { timeout: 0 }).then((r) => {
-            expect(r).toBe(false);
-            done();
-        });
+    afterEach(() => {
+        jest.useRealTimers();
     });
 
-    it("resolves with false if the timeout is reached, even if other RoomState.newMember events fire", (done) => {
+    it("resolves with false if the timeout is reached", async () => {
+        const result = await waitForMember(<MatrixClient>client, "", "", { timeout: 0 });
+        expect(result).toBe(false);
+    });
+
+    it("resolves with false if the timeout is reached, even if other RoomState.newMember events fire", async () => {
+        jest.useFakeTimers();
         const roomId = "!roomId:domain";
         const userId = "@clientId:domain";
-        waitForMember(<MatrixClient>client, roomId, userId, { timeout }).then((r) => {
-            expect(r).toBe(false);
-            done();
-        });
+        const resultProm = waitForMember(<MatrixClient>client, roomId, userId, { timeout });
+        jest.advanceTimersByTime(50);
+        expect(await resultProm).toBe(false);
         client.emit("RoomState.newMember", undefined, undefined, { roomId, userId: "@anotherClient:domain" });
+        jest.useRealTimers();
     });
 
-    it("resolves with true if RoomState.newMember fires", (done) => {
+    it("resolves with true if RoomState.newMember fires", async () => {
         const roomId = "!roomId:domain";
         const userId = "@clientId:domain";
-        waitForMember(<MatrixClient>client, roomId, userId, { timeout }).then((r) => {
-            expect(r).toBe(true);
-            expect((<MatrixClient>client).listeners(RoomStateEvent.NewMember).length).toBe(0);
-            done();
-        });
+        expect((<MatrixClient>client).listeners(RoomStateEvent.NewMember).length).toBe(0);
+        const resultProm = waitForMember(<MatrixClient>client, roomId, userId, { timeout });
         client.emit("RoomState.newMember", undefined, undefined, { roomId, userId });
+        expect(await resultProm).toBe(true);
     });
 });
diff --git a/test/utils/notifications-test.ts b/test/utils/notifications-test.ts
index 077c0990f1c..36c8e418c94 100644
--- a/test/utils/notifications-test.ts
+++ b/test/utils/notifications-test.ts
@@ -128,7 +128,7 @@ describe("notifications", () => {
 
         it("sends a request even if everything has been read", () => {
             clearRoomNotification(room, client);
-            expect(sendReadReceiptSpy).not.toBeCalled();
+            expect(sendReadReceiptSpy).not.toHaveBeenCalled();
         });
 
         it("marks the room as read even if the receipt failed", async () => {
@@ -163,7 +163,7 @@ describe("notifications", () => {
 
         it("does not send any requests if everything has been read", () => {
             clearAllNotifications(client);
-            expect(sendReadReceiptSpy).not.toBeCalled();
+            expect(sendReadReceiptSpy).not.toHaveBeenCalled();
         });
 
         it("sends unthreaded receipt requests", () => {
@@ -178,7 +178,7 @@ describe("notifications", () => {
 
             clearAllNotifications(client);
 
-            expect(sendReadReceiptSpy).toBeCalledWith(message, ReceiptType.Read, true);
+            expect(sendReadReceiptSpy).toHaveBeenCalledWith(message, ReceiptType.Read, true);
         });
 
         it("sends private read receipts", () => {
@@ -195,7 +195,7 @@ describe("notifications", () => {
 
             clearAllNotifications(client);
 
-            expect(sendReadReceiptSpy).toBeCalledWith(message, ReceiptType.ReadPrivate, true);
+            expect(sendReadReceiptSpy).toHaveBeenCalledWith(message, ReceiptType.ReadPrivate, true);
         });
     });
 });
diff --git a/test/utils/permalinks/MatrixToPermalinkConstructor-test.ts b/test/utils/permalinks/MatrixToPermalinkConstructor-test.ts
new file mode 100644
index 00000000000..e8750114136
--- /dev/null
+++ b/test/utils/permalinks/MatrixToPermalinkConstructor-test.ts
@@ -0,0 +1,44 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import MatrixToPermalinkConstructor from "../../../src/utils/permalinks/MatrixToPermalinkConstructor";
+import { PermalinkParts } from "../../../src/utils/permalinks/PermalinkConstructor";
+
+describe("MatrixToPermalinkConstructor", () => {
+    const peramlinkConstructor = new MatrixToPermalinkConstructor();
+
+    describe("parsePermalink", () => {
+        it.each([
+            ["empty URL", ""],
+            ["something that is not an URL", "hello"],
+            ["should raise an error for a non-matrix.to URL", "https://example.com/#/@user:example.com"],
+        ])("should raise an error for %s", (name: string, url: string) => {
+            expect(() => peramlinkConstructor.parsePermalink(url)).toThrow(
+                new Error("Does not appear to be a permalink"),
+            );
+        });
+
+        it.each([
+            ["(https)", "https://matrix.to/#/@user:example.com"],
+            ["(http)", "http://matrix.to/#/@user:example.com"],
+            ["without protocol", "matrix.to/#/@user:example.com"],
+        ])("should parse an MXID %s", (name: string, url: string) => {
+            expect(peramlinkConstructor.parsePermalink(url)).toEqual(
+                new PermalinkParts(null, null, "@user:example.com", null),
+            );
+        });
+    });
+});
diff --git a/test/utils/permalinks/Permalinks-test.ts b/test/utils/permalinks/Permalinks-test.ts
index 7d27d046735..36b38a5c0d9 100644
--- a/test/utils/permalinks/Permalinks-test.ts
+++ b/test/utils/permalinks/Permalinks-test.ts
@@ -15,6 +15,7 @@ limitations under the License.
 import { Room, RoomMember, EventType, MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
+import { PermalinkParts } from "../../../src/utils/permalinks/PermalinkConstructor";
 import {
     makeRoomPermalink,
     makeUserPermalink,
@@ -91,7 +92,7 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(0);
+        expect(creator.serverCandidates!.length).toBe(0);
     });
 
     it("should gracefully handle invalid MXIDs", () => {
@@ -112,8 +113,8 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(3);
-        expect(creator.serverCandidates[0]).toBe("pl_95");
+        expect(creator.serverCandidates!.length).toBe(3);
+        expect(creator.serverCandidates![0]).toBe("pl_95");
         // we don't check the 2nd and 3rd servers because that is done by the next test
     });
 
@@ -128,15 +129,15 @@ describe("Permalinks", function () {
         ]);
         const creator = new RoomPermalinkCreator(room, null);
         creator.load();
-        expect(creator.serverCandidates[0]).toBe("pl_95");
+        expect(creator.serverCandidates![0]).toBe("pl_95");
         member95.membership = "left";
         // @ts-ignore illegal private property
         creator.onRoomStateUpdate();
-        expect(creator.serverCandidates[0]).toBe("pl_75");
+        expect(creator.serverCandidates![0]).toBe("pl_75");
         member95.membership = "join";
         // @ts-ignore illegal private property
         creator.onRoomStateUpdate();
-        expect(creator.serverCandidates[0]).toBe("pl_95");
+        expect(creator.serverCandidates![0]).toBe("pl_95");
     });
 
     it("should pick candidate servers based on user population", function () {
@@ -152,10 +153,10 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(3);
-        expect(creator.serverCandidates[0]).toBe("first");
-        expect(creator.serverCandidates[1]).toBe("second");
-        expect(creator.serverCandidates[2]).toBe("third");
+        expect(creator.serverCandidates!.length).toBe(3);
+        expect(creator.serverCandidates![0]).toBe("first");
+        expect(creator.serverCandidates![1]).toBe("second");
+        expect(creator.serverCandidates![2]).toBe("third");
     });
 
     it("should pick prefer candidate servers with higher power levels", function () {
@@ -168,10 +169,10 @@ describe("Permalinks", function () {
         ]);
         const creator = new RoomPermalinkCreator(room);
         creator.load();
-        expect(creator.serverCandidates.length).toBe(3);
-        expect(creator.serverCandidates[0]).toBe("first");
-        expect(creator.serverCandidates[1]).toBe("second");
-        expect(creator.serverCandidates[2]).toBe("third");
+        expect(creator.serverCandidates!.length).toBe(3);
+        expect(creator.serverCandidates![0]).toBe("first");
+        expect(creator.serverCandidates![1]).toBe("second");
+        expect(creator.serverCandidates![2]).toBe("third");
     });
 
     it("should pick a maximum of 3 candidate servers", function () {
@@ -186,7 +187,7 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(3);
+        expect(creator.serverCandidates!.length).toBe(3);
     });
 
     it("should not consider IPv4 hosts", function () {
@@ -195,7 +196,7 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(0);
+        expect(creator.serverCandidates!.length).toBe(0);
     });
 
     it("should not consider IPv6 hosts", function () {
@@ -204,7 +205,7 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(0);
+        expect(creator.serverCandidates!.length).toBe(0);
     });
 
     it("should not consider IPv4 hostnames with ports", function () {
@@ -213,7 +214,7 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(0);
+        expect(creator.serverCandidates!.length).toBe(0);
     });
 
     it("should not consider IPv6 hostnames with ports", function () {
@@ -222,7 +223,7 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(0);
+        expect(creator.serverCandidates!.length).toBe(0);
     });
 
     it("should work with hostnames with ports", function () {
@@ -232,8 +233,8 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(1);
-        expect(creator.serverCandidates[0]).toBe("example.org:8448");
+        expect(creator.serverCandidates!.length).toBe(1);
+        expect(creator.serverCandidates![0]).toBe("example.org:8448");
     });
 
     it("should not consider servers explicitly denied by ACLs", function () {
@@ -252,7 +253,7 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(0);
+        expect(creator.serverCandidates!.length).toBe(0);
     });
 
     it("should not consider servers not allowed by ACLs", function () {
@@ -271,7 +272,7 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(0);
+        expect(creator.serverCandidates!.length).toBe(0);
     });
 
     it("should consider servers not explicitly banned by ACLs", function () {
@@ -290,8 +291,8 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(1);
-        expect(creator.serverCandidates[0]).toEqual("evilcorp.com");
+        expect(creator.serverCandidates!.length).toBe(1);
+        expect(creator.serverCandidates![0]).toEqual("evilcorp.com");
     });
 
     it("should consider servers not disallowed by ACLs", function () {
@@ -310,8 +311,8 @@ describe("Permalinks", function () {
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator.serverCandidates).toBeTruthy();
-        expect(creator.serverCandidates.length).toBe(1);
-        expect(creator.serverCandidates[0]).toEqual("evilcorp.com");
+        expect(creator.serverCandidates!.length).toBe(1);
+        expect(creator.serverCandidates![0]).toEqual("evilcorp.com");
     });
 
     it("should generate an event permalink for room IDs with no candidate servers", function () {
@@ -367,24 +368,38 @@ describe("Permalinks", function () {
         expect(result).toBe("https://matrix.to/#/@someone:example.org");
     });
 
-    it("should correctly parse room permalinks with a via argument", () => {
-        const result = parsePermalink("https://matrix.to/#/!room_id:server?via=some.org");
-        expect(result?.roomIdOrAlias).toBe("!room_id:server");
-        expect(result?.viaServers).toEqual(["some.org"]);
-    });
+    describe("parsePermalink", () => {
+        it("should correctly parse room permalinks with a via argument", () => {
+            const result = parsePermalink("https://matrix.to/#/!room_id:server?via=some.org");
+            expect(result?.roomIdOrAlias).toBe("!room_id:server");
+            expect(result?.viaServers).toEqual(["some.org"]);
+        });
 
-    it("should correctly parse room permalink via arguments", () => {
-        const result = parsePermalink("https://matrix.to/#/!room_id:server?via=foo.bar&via=bar.foo");
-        expect(result?.roomIdOrAlias).toBe("!room_id:server");
-        expect(result?.viaServers).toEqual(["foo.bar", "bar.foo"]);
-    });
+        it("should correctly parse room permalink via arguments", () => {
+            const result = parsePermalink("https://matrix.to/#/!room_id:server?via=foo.bar&via=bar.foo");
+            expect(result?.roomIdOrAlias).toBe("!room_id:server");
+            expect(result?.viaServers).toEqual(["foo.bar", "bar.foo"]);
+        });
 
-    it("should correctly parse event permalink via arguments", () => {
-        const result = parsePermalink(
-            "https://matrix.to/#/!room_id:server/$event_id/some_thing_here/foobar" + "?via=m1.org&via=m2.org",
-        );
-        expect(result?.eventId).toBe("$event_id/some_thing_here/foobar");
-        expect(result?.roomIdOrAlias).toBe("!room_id:server");
-        expect(result?.viaServers).toEqual(["m1.org", "m2.org"]);
+        it("should correctly parse event permalink via arguments", () => {
+            const result = parsePermalink(
+                "https://matrix.to/#/!room_id:server/$event_id/some_thing_here/foobar" + "?via=m1.org&via=m2.org",
+            );
+            expect(result?.eventId).toBe("$event_id/some_thing_here/foobar");
+            expect(result?.roomIdOrAlias).toBe("!room_id:server");
+            expect(result?.viaServers).toEqual(["m1.org", "m2.org"]);
+        });
+
+        it("should correctly parse permalinks with http protocol", () => {
+            expect(parsePermalink("http://matrix.to/#/@user:example.com")).toEqual(
+                new PermalinkParts(null, null, "@user:example.com", null),
+            );
+        });
+
+        it("should correctly parse permalinks without protocol", () => {
+            expect(parsePermalink("matrix.to/#/@user:example.com")).toEqual(
+                new PermalinkParts(null, null, "@user:example.com", null),
+            );
+        });
     });
 });
diff --git a/test/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite-test.ts b/test/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite-test.ts
new file mode 100644
index 00000000000..1b74621254b
--- /dev/null
+++ b/test/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite-test.ts
@@ -0,0 +1,110 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { mocked } from "jest-mock";
+import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import DMRoomMap from "../../../src/utils/DMRoomMap";
+import { shouldEncryptRoomWithSingle3rdPartyInvite } from "../../../src/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite";
+import { privateShouldBeEncrypted } from "../../../src/utils/rooms";
+import { mkRoomMemberJoinEvent, mkThirdPartyInviteEvent, stubClient } from "../../test-utils";
+
+jest.mock("../../../src/utils/rooms", () => ({
+    privateShouldBeEncrypted: jest.fn(),
+}));
+
+describe("shouldEncryptRoomWithSingle3rdPartyInvite", () => {
+    let client: MatrixClient;
+    let thirdPartyInviteEvent: MatrixEvent;
+    let roomWithOneThirdPartyInvite: Room;
+
+    beforeAll(() => {
+        client = stubClient();
+        DMRoomMap.makeShared();
+    });
+
+    beforeEach(() => {
+        roomWithOneThirdPartyInvite = new Room("!room1:example.com", client, client.getSafeUserId());
+        thirdPartyInviteEvent = mkThirdPartyInviteEvent(
+            client.getSafeUserId(),
+            "user@example.com",
+            roomWithOneThirdPartyInvite.roomId,
+        );
+
+        roomWithOneThirdPartyInvite.currentState.setStateEvents([
+            mkRoomMemberJoinEvent(client.getSafeUserId(), roomWithOneThirdPartyInvite.roomId),
+            thirdPartyInviteEvent,
+        ]);
+        jest.spyOn(DMRoomMap.shared(), "getRoomIds").mockReturnValue(new Set([roomWithOneThirdPartyInvite.roomId]));
+    });
+
+    describe("when well-known promotes encryption", () => {
+        beforeEach(() => {
+            mocked(privateShouldBeEncrypted).mockReturnValue(true);
+        });
+
+        it("should return true + invite event for a DM room with one third-party invite", () => {
+            expect(shouldEncryptRoomWithSingle3rdPartyInvite(roomWithOneThirdPartyInvite)).toEqual({
+                shouldEncrypt: true,
+                inviteEvent: thirdPartyInviteEvent,
+            });
+        });
+
+        it("should return false for a non-DM room with one third-party invite", () => {
+            mocked(DMRoomMap.shared().getRoomIds).mockReturnValue(new Set());
+
+            expect(shouldEncryptRoomWithSingle3rdPartyInvite(roomWithOneThirdPartyInvite)).toEqual({
+                shouldEncrypt: false,
+            });
+        });
+
+        it("should return false for a DM room with two members", () => {
+            roomWithOneThirdPartyInvite.currentState.setStateEvents([
+                mkRoomMemberJoinEvent("@user2:example.com", roomWithOneThirdPartyInvite.roomId),
+            ]);
+
+            expect(shouldEncryptRoomWithSingle3rdPartyInvite(roomWithOneThirdPartyInvite)).toEqual({
+                shouldEncrypt: false,
+            });
+        });
+
+        it("should return false for a DM room with two third-party invites", () => {
+            roomWithOneThirdPartyInvite.currentState.setStateEvents([
+                mkThirdPartyInviteEvent(
+                    client.getSafeUserId(),
+                    "user2@example.com",
+                    roomWithOneThirdPartyInvite.roomId,
+                ),
+            ]);
+
+            expect(shouldEncryptRoomWithSingle3rdPartyInvite(roomWithOneThirdPartyInvite)).toEqual({
+                shouldEncrypt: false,
+            });
+        });
+    });
+
+    describe("when well-known does not promote encryption", () => {
+        beforeEach(() => {
+            mocked(privateShouldBeEncrypted).mockReturnValue(false);
+        });
+
+        it("should return false for a DM room with one third-party invite", () => {
+            expect(shouldEncryptRoomWithSingle3rdPartyInvite(roomWithOneThirdPartyInvite)).toEqual({
+                shouldEncrypt: false,
+            });
+        });
+    });
+});
diff --git a/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts b/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
index 312ee7f7859..c5194b7df99 100644
--- a/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
+++ b/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
@@ -269,7 +269,7 @@ describe("VoiceBroadcastRecording", () => {
         it("should raise an error when creating a broadcast", () => {
             expect(() => {
                 setUpVoiceBroadcastRecording();
-            }).toThrowError("Cannot create broadcast for info event without Id.");
+            }).toThrow("Cannot create broadcast for info event without Id.");
         });
     });
 
@@ -285,7 +285,7 @@ describe("VoiceBroadcastRecording", () => {
         it("should raise an error when creating a broadcast", () => {
             expect(() => {
                 setUpVoiceBroadcastRecording();
-            }).toThrowError(`Cannot create broadcast for unknown room (info event ${infoEvent.getId()})`);
+            }).toThrow(`Cannot create broadcast for unknown room (info event ${infoEvent.getId()})`);
         });
     });
 
diff --git a/test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts b/test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts
index ff7a50aef3e..f8a9cc94480 100644
--- a/test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts
+++ b/test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts
@@ -74,7 +74,7 @@ describe("VoiceBroadcastRecordingsStore", () => {
         infoEvent.event.event_id = undefined;
         expect(() => {
             recordings.setCurrent(recording);
-        }).toThrowError("Got broadcast info event without Id");
+        }).toThrow("Got broadcast info event without Id");
     });
 
     describe("when setting a current Voice Broadcast recording", () => {
diff --git a/test/voice-broadcast/utils/setUpVoiceBroadcastPreRecording-test.ts b/test/voice-broadcast/utils/setUpVoiceBroadcastPreRecording-test.ts
index 68b5c0ef947..f3f9c944857 100644
--- a/test/voice-broadcast/utils/setUpVoiceBroadcastPreRecording-test.ts
+++ b/test/voice-broadcast/utils/setUpVoiceBroadcastPreRecording-test.ts
@@ -67,11 +67,7 @@ describe("setUpVoiceBroadcastPreRecording", () => {
 
     beforeEach(() => {
         client = stubClient();
-
-        const clientUserId = client.getUserId();
-        if (!clientUserId) fail("empty userId");
-        userId = clientUserId;
-
+        userId = client.getSafeUserId();
         room = new Room(roomId, client, userId);
         infoEvent = mkVoiceBroadcastInfoStateEvent(
             roomId,
diff --git a/yarn.lock b/yarn.lock
index be3c09b7538..3dfe55b8566 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -32,7 +32,7 @@
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.0.1.tgz#b38b444ad3aa5fedbb15f2f746dcd934226a12dd"
   integrity sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==
 
-"@ampproject/remapping@^2.1.0":
+"@ampproject/remapping@^2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
   integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
@@ -41,11 +41,11 @@
     "@jridgewell/trace-mapping" "^0.3.9"
 
 "@babel/cli@^7.12.10":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.20.7.tgz#8fc12e85c744a1a617680eacb488fab1fcd35b7c"
-  integrity sha512-WylgcELHB66WwQqItxNILsMlaTd8/SO6SgTTjMp4uCI7P4QyH1r3nqgFmO3BfM4AtfniHgFMH3EpYFj/zynBkQ==
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.21.0.tgz#1868eb70e9824b427fc607610cce8e9e7889e7e1"
+  integrity sha512-xi7CxyS8XjSyiwUGCfwf+brtJxjW1/ZTcBUkP10xawIEXLX5HzLn+3aXkgxozcP2UhRhtKTmQurw9Uaes7jZrA==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.8"
+    "@jridgewell/trace-mapping" "^0.3.17"
     commander "^4.0.1"
     convert-source-map "^1.1.0"
     fs-readdir-recursive "^1.1.0"
@@ -63,31 +63,31 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
-"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.0", "@babel/compat-data@^7.20.1":
+"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.0", "@babel/compat-data@^7.20.5":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.0.tgz#c241dc454e5b5917e40d37e525e2f4530c399298"
+  integrity sha512-gMuZsmsgxk/ENC3O/fRw5QY8A9/uxQbbCEypnLIiYYc/qVJtEV7ouxC3EllIIwNzMqAQee5tanFabWsUOutS7g==
+
+"@babel/compat-data@^7.20.1":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.5.tgz#86f172690b093373a933223b4745deeb6049e733"
   integrity sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g==
 
-"@babel/compat-data@^7.20.5":
-  version "7.20.10"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.10.tgz#9d92fa81b87542fff50e848ed585b4212c1d34ec"
-  integrity sha512-sEnuDPpOJR/fcafHMjpcpGN5M2jbUGUHwmuWKM/YdPzeEDJg8bgmbcWQFUfE32MQjti1koACvoPVsDe8Uq+idg==
-
 "@babel/core@^7.0.0", "@babel/core@^7.11.6", "@babel/core@^7.12.10", "@babel/core@^7.12.3":
-  version "7.20.12"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.12.tgz#7930db57443c6714ad216953d1356dac0eb8496d"
-  integrity sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.0.tgz#1341aefdcc14ccc7553fcc688dd8986a2daffc13"
+  integrity sha512-PuxUbxcW6ZYe656yL3EAhpy7qXKq0DmYsrJLpbB8XrsCP9Nm+XCg9XFMb5vIDliPD7+U/+M+QJlH17XOcB7eXA==
   dependencies:
-    "@ampproject/remapping" "^2.1.0"
+    "@ampproject/remapping" "^2.2.0"
     "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.20.7"
+    "@babel/generator" "^7.21.0"
     "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-module-transforms" "^7.20.11"
-    "@babel/helpers" "^7.20.7"
-    "@babel/parser" "^7.20.7"
+    "@babel/helper-module-transforms" "^7.21.0"
+    "@babel/helpers" "^7.21.0"
+    "@babel/parser" "^7.21.0"
     "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.20.12"
-    "@babel/types" "^7.20.7"
+    "@babel/traverse" "^7.21.0"
+    "@babel/types" "^7.21.0"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
@@ -110,13 +110,14 @@
   dependencies:
     eslint-rule-composer "^0.3.0"
 
-"@babel/generator@^7.20.7":
-  version "7.20.14"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.14.tgz#9fa772c9f86a46c6ac9b321039400712b96f64ce"
-  integrity sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==
+"@babel/generator@^7.21.0", "@babel/generator@^7.21.1":
+  version "7.21.1"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.1.tgz#951cc626057bc0af2c35cd23e9c64d384dea83dd"
+  integrity sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA==
   dependencies:
-    "@babel/types" "^7.20.7"
+    "@babel/types" "^7.21.0"
     "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
 "@babel/generator@^7.7.2":
@@ -143,17 +144,7 @@
     "@babel/helper-explode-assignable-expression" "^7.18.6"
     "@babel/types" "^7.18.9"
 
-"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz#6bf5374d424e1b3922822f1d9bdaa43b1a139d0a"
-  integrity sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==
-  dependencies:
-    "@babel/compat-data" "^7.20.0"
-    "@babel/helper-validator-option" "^7.18.6"
-    browserslist "^4.21.3"
-    semver "^6.3.0"
-
-"@babel/helper-compilation-targets@^7.20.7":
+"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.20.7":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz#a6cd33e93629f5eb473b021aac05df62c4cd09bb"
   integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==
@@ -164,7 +155,17 @@
     lru-cache "^5.1.1"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.20.2", "@babel/helper-create-class-features-plugin@^7.20.5":
+"@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz#6bf5374d424e1b3922822f1d9bdaa43b1a139d0a"
+  integrity sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==
+  dependencies:
+    "@babel/compat-data" "^7.20.0"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.21.3"
+    semver "^6.3.0"
+
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.20.5":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.5.tgz#327154eedfb12e977baa4ecc72e5806720a85a06"
   integrity sha512-3RCdA/EmEaikrhayahwToF0fpweU/8o2p8vhc1c/1kftHOdTKuC65kik/TLc+qfbS8JKw4qqJbne4ovICDhmww==
@@ -177,6 +178,20 @@
     "@babel/helper-replace-supers" "^7.19.1"
     "@babel/helper-split-export-declaration" "^7.18.6"
 
+"@babel/helper-create-class-features-plugin@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.0.tgz#64f49ecb0020532f19b1d014b03bccaa1ab85fb9"
+  integrity sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-member-expression-to-functions" "^7.21.0"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.20.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+
 "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.20.5.tgz#5ea79b59962a09ec2acf20a963a01ab4d076ccca"
@@ -217,6 +232,14 @@
     "@babel/template" "^7.18.10"
     "@babel/types" "^7.19.0"
 
+"@babel/helper-function-name@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
+  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/types" "^7.21.0"
+
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
@@ -231,6 +254,13 @@
   dependencies:
     "@babel/types" "^7.18.9"
 
+"@babel/helper-member-expression-to-functions@^7.20.7", "@babel/helper-member-expression-to-functions@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz#319c6a940431a133897148515877d2f3269c3ba5"
+  integrity sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==
+  dependencies:
+    "@babel/types" "^7.21.0"
+
 "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
@@ -252,10 +282,10 @@
     "@babel/traverse" "^7.20.1"
     "@babel/types" "^7.20.2"
 
-"@babel/helper-module-transforms@^7.20.11":
-  version "7.20.11"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.11.tgz#df4c7af713c557938c50ea3ad0117a7944b2f1b0"
-  integrity sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==
+"@babel/helper-module-transforms@^7.21.0":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz#160caafa4978ac8c00ac66636cb0fa37b024e2d2"
+  integrity sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==
   dependencies:
     "@babel/helper-environment-visitor" "^7.18.9"
     "@babel/helper-module-imports" "^7.18.6"
@@ -263,8 +293,8 @@
     "@babel/helper-split-export-declaration" "^7.18.6"
     "@babel/helper-validator-identifier" "^7.19.1"
     "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.20.10"
-    "@babel/types" "^7.20.7"
+    "@babel/traverse" "^7.21.2"
+    "@babel/types" "^7.21.2"
 
 "@babel/helper-optimise-call-expression@^7.18.6":
   version "7.18.6"
@@ -299,6 +329,18 @@
     "@babel/traverse" "^7.19.1"
     "@babel/types" "^7.19.0"
 
+"@babel/helper-replace-supers@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331"
+  integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.20.7"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
 "@babel/helper-simple-access@^7.19.4", "@babel/helper-simple-access@^7.20.2":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
@@ -306,7 +348,7 @@
   dependencies:
     "@babel/types" "^7.20.2"
 
-"@babel/helper-skip-transparent-expression-wrappers@^7.18.9":
+"@babel/helper-skip-transparent-expression-wrappers@^7.18.9", "@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
   version "7.20.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
   integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==
@@ -330,10 +372,10 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
-"@babel/helper-validator-option@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
-  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+"@babel/helper-validator-option@^7.18.6", "@babel/helper-validator-option@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
+  integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
 
 "@babel/helper-wrap-function@^7.18.9":
   version "7.20.5"
@@ -345,14 +387,14 @@
     "@babel/traverse" "^7.20.5"
     "@babel/types" "^7.20.5"
 
-"@babel/helpers@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.20.7.tgz#04502ff0feecc9f20ecfaad120a18f011a8e6dce"
-  integrity sha512-PBPjs5BppzsGaxHQCDKnZ6Gd9s6xl8bBCluz3vEInLGRJmnZan4F6BYCeqtyXqkk4W5IlPmjK4JlOuZkpJ3xZA==
+"@babel/helpers@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.0.tgz#9dd184fb5599862037917cdc9eecb84577dc4e7e"
+  integrity sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==
   dependencies:
     "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.20.7"
-    "@babel/types" "^7.20.7"
+    "@babel/traverse" "^7.21.0"
+    "@babel/types" "^7.21.0"
 
 "@babel/highlight@^7.18.6":
   version "7.18.6"
@@ -363,10 +405,10 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.18.5", "@babel/parser@^7.20.13", "@babel/parser@^7.20.7":
-  version "7.20.15"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.15.tgz#eec9f36d8eaf0948bb88c87a46784b5ee9fd0c89"
-  integrity sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==
+"@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.18.5", "@babel/parser@^7.20.7", "@babel/parser@^7.21.0", "@babel/parser@^7.21.2":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.2.tgz#dacafadfc6d7654c3051a66d6fe55b6cb2f2a0b3"
+  integrity sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
@@ -901,12 +943,12 @@
     "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-transform-runtime@^7.12.10":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.19.6.tgz#9d2a9dbf4e12644d6f46e5e75bfbf02b5d6e9194"
-  integrity sha512-PRH37lz4JU156lYFW1p8OxE5i7d6Sl/zV58ooyr+q1J1lnQPyg5tIiXlIwNVhJaY4W3TmOtdc8jqdXQcB1v5Yw==
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.0.tgz#2a884f29556d0a68cd3d152dcc9e6c71dfb6eee8"
+  integrity sha512-ReY6pxwSzEU0b3r2/T/VhqMKg/AkceBT19X0UptA3/tYi5Pe2eXgEUH+NNMC5nok6c6XQz5tyVTUpuezRfSMSg==
   dependencies:
     "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     babel-plugin-polyfill-corejs2 "^0.3.3"
     babel-plugin-polyfill-corejs3 "^0.6.0"
     babel-plugin-polyfill-regenerator "^0.4.1"
@@ -948,12 +990,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-typescript@^7.18.6":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.20.2.tgz#91515527b376fc122ba83b13d70b01af8fe98f3f"
-  integrity sha512-jvS+ngBfrnTUBfOQq8NfGnSbF9BrqlR6hjJ2yVxMkmO5nL/cdifNbI30EfjRlN4g5wYWNnMPyj5Sa6R1pbLeag==
+"@babel/plugin-transform-typescript@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.0.tgz#f0956a153679e3b377ae5b7f0143427151e4c848"
+  integrity sha512-xo///XTPp3mDzTtrqXoBlK9eiAYW3wv9JXglcn/u1bi60RW11dEUxIgA8cbnDhutS1zacjMRmAwxE0gMklLnZg==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.20.2"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-typescript" "^7.20.0"
 
@@ -1077,18 +1119,18 @@
     "@babel/plugin-transform-react-pure-annotations" "^7.18.6"
 
 "@babel/preset-typescript@^7.12.7":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399"
-  integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.0.tgz#bcbbca513e8213691fe5d4b23d9251e01f00ebff"
+  integrity sha512-myc9mpoVA5m1rF8K8DgLEatOYFDpwC+RkMkjZ0Du6uI62YvDe8uxIEYVs/VCdSJ097nlALiU/yBC7//3nI+hNg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/helper-validator-option" "^7.18.6"
-    "@babel/plugin-transform-typescript" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-validator-option" "^7.21.0"
+    "@babel/plugin-transform-typescript" "^7.21.0"
 
 "@babel/register@^7.12.10":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.18.9.tgz#1888b24bc28d5cc41c412feb015e9ff6b96e439c"
-  integrity sha512-ZlbnXDcNYHMR25ITwwNKT88JiaukkdVj/nG7r3wnuXkOTHc60Uy05PwMCPre0hSkY68E6zK3xz+vUJSP2jWmcw==
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.21.0.tgz#c97bf56c2472e063774f31d344c592ebdcefa132"
+  integrity sha512-9nKsPmYDi5DidAqJaQooxIhsLJiNMkGr8ypQ8Uic7cIox7UCDsM7HuUGxdGT7mSDTYbqzIdsOWzfBton/YJrMw==
   dependencies:
     clone-deep "^4.0.1"
     find-cache-dir "^2.0.0"
@@ -1096,18 +1138,10 @@
     pirates "^4.0.5"
     source-map-support "^0.5.16"
 
-"@babel/runtime-corejs3@^7.10.2":
-  version "7.20.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.20.6.tgz#63dae945963539ab0ad578efbf3eff271e7067ae"
-  integrity sha512-tqeujPiuEfcH067mx+7otTQWROVMKHXEaOQcAeNV5dDdbPWvPcFA8/W9LXw2NfjNmOetqLl03dfnG2WALPlsRQ==
-  dependencies:
-    core-js-pure "^3.25.1"
-    regenerator-runtime "^0.13.11"
-
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.9", "@babel/runtime@^7.18.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.20.13"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
-  integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
+  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
   dependencies:
     regenerator-runtime "^0.13.11"
 
@@ -1129,23 +1163,23 @@
     "@babel/parser" "^7.18.10"
     "@babel/types" "^7.18.10"
 
-"@babel/traverse@^7.12.12", "@babel/traverse@^7.18.5", "@babel/traverse@^7.19.1", "@babel/traverse@^7.20.1", "@babel/traverse@^7.20.10", "@babel/traverse@^7.20.12", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.7.2":
-  version "7.20.13"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.13.tgz#817c1ba13d11accca89478bd5481b2d168d07473"
-  integrity sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==
+"@babel/traverse@^7.12.12", "@babel/traverse@^7.18.5", "@babel/traverse@^7.19.1", "@babel/traverse@^7.20.1", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.7.2":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.2.tgz#ac7e1f27658750892e815e60ae90f382a46d8e75"
+  integrity sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==
   dependencies:
     "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.20.7"
+    "@babel/generator" "^7.21.1"
     "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-function-name" "^7.21.0"
     "@babel/helper-hoist-variables" "^7.18.6"
     "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.20.13"
-    "@babel/types" "^7.20.7"
+    "@babel/parser" "^7.21.2"
+    "@babel/types" "^7.21.2"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.5.tgz#e206ae370b5393d94dfd1d04cd687cace53efa84"
   integrity sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==
@@ -1154,7 +1188,7 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7":
+"@babel/types@^7.18.10", "@babel/types@^7.19.0":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f"
   integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==
@@ -1163,15 +1197,24 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.18.6", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.2.tgz#92246f6e00f91755893c2876ad653db70c8310d1"
+  integrity sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
 "@casualbot/jest-sonar-reporter@^2.2.5":
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/@casualbot/jest-sonar-reporter/-/jest-sonar-reporter-2.2.5.tgz#23d187ddb8d65129a3c8d8239b0540a52c4dc82a"
-  integrity sha512-Pmb4aEtJudz9G0VsmEUzuDm5iWGOCDsmulzi6AP/RgAXEcmsSxVdxjcgA+2SHC005diU4mXnPLiQyiiMIAtUjA==
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@casualbot/jest-sonar-reporter/-/jest-sonar-reporter-2.2.7.tgz#3cc14c64f5d8ab5e9163b03b9cd2e07456432ed0"
+  integrity sha512-iswhPNodtcOQzfXR3TkD0A/8yHr5fnC86Ryt5UAqrJWfMI8mPZ9mpjykHnibbf91SjNtELv7ApZtha0bdWOmoQ==
   dependencies:
     mkdirp "1.0.4"
     uuid "8.3.2"
@@ -1182,15 +1225,30 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@csstools/selector-specificity@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
-  integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
+"@csstools/css-parser-algorithms@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.0.1.tgz#ff02629c7c95d1f4f8ea84d5ef1173461610535e"
+  integrity sha512-B9/8PmOtU6nBiibJg0glnNktQDZ3rZnGn/7UmDfrm2vMtrdlXO3p7ErE95N0up80IRk9YEtB5jyj/TmQ1WH3dw==
+
+"@csstools/css-tokenizer@^2.0.1":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.1.0.tgz#fee4de3d444db3ce9007f3af6474af8ba3e4b930"
+  integrity sha512-dtqFyoJBHUxGi9zPZdpCKP1xk8tq6KPHJ/NY4qWXiYo6IcSGwzk3L8x2XzZbbyOyBs9xQARoGveU2AsgLj6D2A==
+
+"@csstools/media-query-list-parser@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz#d85a366811563a5d002755ed10e5212a1613c91d"
+  integrity sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==
+
+"@csstools/selector-specificity@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz#c9c61d9fe5ca5ac664e1153bb0aa0eba1c6d6308"
+  integrity sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==
 
 "@cypress/request@^2.88.10":
-  version "2.88.10"
-  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.10.tgz#b66d76b07f860d3a4b8d7a0604d020c662752cce"
-  integrity sha512-Zp7F+R93N0yZyG34GutyTNr+okam7s/Fzc1+i3kcqOP8vk6OuajuE9qZJ6Rs+10/1JFtXFYMdyarnU1rZuJesg==
+  version "2.88.11"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.11.tgz#5a4c7399bc2d7e7ed56e92ce5acb620c8b187047"
+  integrity sha512-M83/wfQ1EkspjkE2lNWNV5ui2Cv7UCv1swW1DqljahbzLVWltcsexQh8jYtuS/vzFXP+HySntGM83ZXA9fn17w==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -1205,7 +1263,7 @@
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.19"
     performance-now "^2.1.0"
-    qs "~6.5.2"
+    qs "~6.10.3"
     safe-buffer "^5.1.2"
     tough-cookie "~2.5.0"
     tunnel-agent "^0.6.0"
@@ -1219,32 +1277,37 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@eslint-community/eslint-utils@^4.1.0":
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.1.2.tgz#14ca568ddaa291dd19a4a54498badc18c6cfab78"
-  integrity sha512-7qELuQWWjVDdVsFQ5+beUl+KPczrEDA7S3zM4QUd/bJl7oXgsmpXaEVqrRTnOBqenOV4rWf2kVZk2Ot085zPWA==
+"@eslint-community/eslint-utils@^4.1.2":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.2.0.tgz#a831e6e468b4b2b5ae42bf658bea015bf10bc518"
+  integrity sha512-gB8T4H4DEfX2IV9zGDJPOBgP1e/DbfCPDTtEqUMckpvzS1OYtva8JdFYBqMwYk7xAQ429WGF/UPqn8uQ//h2vQ==
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
-"@eslint/eslintrc@^1.3.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95"
-  integrity sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==
+"@eslint/eslintrc@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.0.tgz#943309d8697c52fc82c076e90c1c74fbbe69dbff"
+  integrity sha512-fluIaaV+GyV24CCu/ggiHdV+j4RNh85yQnAYS/G2mZODZgGmmlrgCydjUcV3YvxCm9x8nMAfThsqTni4KiXT4A==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
     espree "^9.4.0"
-    globals "^13.15.0"
+    globals "^13.19.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
     js-yaml "^4.1.0"
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@humanwhocodes/config-array@^0.11.6":
-  version "0.11.7"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz#38aec044c6c828f6ed51d5d7ae3d9b9faf6dbb0f"
-  integrity sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==
+"@eslint/js@8.35.0":
+  version "8.35.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.35.0.tgz#b7569632b0b788a0ca0e438235154e45d42813a7"
+  integrity sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw==
+
+"@humanwhocodes/config-array@^0.11.8":
+  version "0.11.8"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
+  integrity sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==
   dependencies:
     "@humanwhocodes/object-schema" "^1.2.1"
     debug "^4.1.1"
@@ -1526,7 +1589,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.8", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.17"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
   integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
@@ -1579,10 +1642,10 @@
   resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
   integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
 
-"@matrix-org/analytics-events@^0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.4.0.tgz#ec75400ac41272cd2d47774da433437aba789bcf"
-  integrity sha512-tLeak2pYiyxn431o7EdOJGwRjj2DApybOLZ0YtFMuhv87pBQhc3lz+IKCJ2c8NwV6e7kf4YNaTdXeygBvFPGFw==
+"@matrix-org/analytics-events@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.5.0.tgz#38b69c4e29d243944c5712cca7b674a3432056e6"
+  integrity sha512-uL5kf7MqC+GxsGJtimPVbFliyaFinohTHSzohz31JTysktHsjRR2SC+vV7sy2/dstTWVdG9EGOnohyPsB+oi3A==
 
 "@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.3":
   version "0.1.0-alpha.4"
@@ -1598,10 +1661,10 @@
   version "3.2.14"
   resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz#acd96c00a881d0f462e1f97a56c73742c8dbc984"
 
-"@matrix-org/react-sdk-module-api@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@matrix-org/react-sdk-module-api/-/react-sdk-module-api-0.0.3.tgz#a7ac1b18a72d18d08290b81fa33b0d8d00a77d2b"
-  integrity sha512-jQmLhVIanuX0g7Jx1OIqlzs0kp72PfSpv3umi55qVPYcAPQmO252AUs0vncatK8O4e013vohdnNhly19a/kmLQ==
+"@matrix-org/react-sdk-module-api@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@matrix-org/react-sdk-module-api/-/react-sdk-module-api-0.0.4.tgz#da71fc2e4c8143e87b5c2bc067ccbc0c146816fe"
+  integrity sha512-4gcgef3Ne9+Ae0bAErK1Swo9FxTZBDEogX/Iu2kcLWWROOKMjmeWL2PkM83ylsxZ32YY6a6ndRqV/SwRmDeJxg==
   dependencies:
     "@babel/runtime" "^7.17.9"
 
@@ -1766,105 +1829,105 @@
     tslib "^2.4.1"
     webcrypto-core "^1.7.4"
 
-"@percy/cli-app@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-app/-/cli-app-1.18.0.tgz#20c4033d4d8ed1fffebc8ef9aba3bf4da53695f8"
-  integrity sha512-EAqD61ivuCwfl6PacXW9Wx9kTRvMPCBlQnxmrhx7jJG5tIp418p4XB3zkFOAirUa/LOdwNIVaPCHJyVAcJ1V5Q==
+"@percy/cli-app@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-app/-/cli-app-1.20.0.tgz#6822396655d013abac27f45b6b8d09b04926e93f"
+  integrity sha512-7DMaNBWpW3MiibVcTH6FzZdE0QKFO5sHz4dyUmNNJ/Uxs3hVHVAEP2BQxU0lOYLW6wM7uumCfsc8ccgWxIsK3Q==
   dependencies:
-    "@percy/cli-command" "1.18.0"
-    "@percy/cli-exec" "1.18.0"
+    "@percy/cli-command" "1.20.0"
+    "@percy/cli-exec" "1.20.0"
 
-"@percy/cli-build@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-build/-/cli-build-1.18.0.tgz#797524e857574add7f5c08192b4f5668b1540cac"
-  integrity sha512-FuYWjXx4Wy0v27GpwxGX5qDq4xcLzlStbABNCp4H5RrNrLa1jkcViOKXTSurdjHYWlHHFWJUbk39D4g3ZRXOAA==
+"@percy/cli-build@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-build/-/cli-build-1.20.0.tgz#68aa0dad96414dd0e03d2bd09bff16e98198e946"
+  integrity sha512-TJ1Khk4cUq3yaHm3e7o1kyXlChfKIaGzxSykO5iIfJ4LYmo+DI6qBe8zGBEgxZ7NoABalGCsT3FswwwrF3TRSw==
   dependencies:
-    "@percy/cli-command" "1.18.0"
+    "@percy/cli-command" "1.20.0"
 
-"@percy/cli-command@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-command/-/cli-command-1.18.0.tgz#6e5af91c56cad09b5b7f26e3dc95d47ed4e203ef"
-  integrity sha512-2dHJalp83IygD/FqXCFNND22z7f4r5uZxqr5GAyiJ0STkQYitTgwkUp+4IRdfK1zmi+A2dbyYU0xV9txEW5v8g==
+"@percy/cli-command@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-command/-/cli-command-1.20.0.tgz#48f367162179ff28f514114429cbf4218b6cef32"
+  integrity sha512-6EWwevC26L4D8IxhGAwPssJyNVw9tTleur9fkX8t0v9gjVctxS4vvuIjThe2Ti8HMk31UkYfPoaIpO6Dss2o1g==
   dependencies:
-    "@percy/config" "1.18.0"
-    "@percy/core" "1.18.0"
-    "@percy/logger" "1.18.0"
+    "@percy/config" "1.20.0"
+    "@percy/core" "1.20.0"
+    "@percy/logger" "1.20.0"
 
-"@percy/cli-config@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-config/-/cli-config-1.18.0.tgz#0eb28a5496634d278945c19f654b055c84053380"
-  integrity sha512-N5I7av5SGO5n0YC61wbqVniNxFwAQFFubKyGyGaVlQkmKyRuYCmDMHlPdSv3zyvVD1ZJCvtDzi/VqQGDubEieg==
+"@percy/cli-config@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-config/-/cli-config-1.20.0.tgz#9e319c5bb1546bf65ec519039fdca27b580f8656"
+  integrity sha512-JJhhvQXNFIHr2yFgx0KTVoyG+7PLWXAR+Dfh7m8hpmF9I7O2A5IJUuXbVpRmHGNqSoLvQyOto4Dc6UQzNE5TEg==
   dependencies:
-    "@percy/cli-command" "1.18.0"
+    "@percy/cli-command" "1.20.0"
 
-"@percy/cli-exec@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-exec/-/cli-exec-1.18.0.tgz#edf560aad4a2a100c577d2295f57cfe43790d683"
-  integrity sha512-4y+XIsYS5KypJmTtGKyKFU4GZ6902dCcEMJNDc69grSsco9N2lBG2gsvChCrCA2gDT8nUvKng9z9KF2OiMvF3w==
+"@percy/cli-exec@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-exec/-/cli-exec-1.20.0.tgz#4d1821311f6fefac39a4320700ba093182590026"
+  integrity sha512-aZqmmAV7YLixpJ/jD2Nh/02n/lsJWI6EA4f27cmtz5E7tAMz/8BwJC2GxzH0J2PZV7Yf73COT5zgCaQFJec5gA==
   dependencies:
-    "@percy/cli-command" "1.18.0"
+    "@percy/cli-command" "1.20.0"
     cross-spawn "^7.0.3"
     which "^2.0.2"
 
-"@percy/cli-snapshot@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-snapshot/-/cli-snapshot-1.18.0.tgz#0ca97fe7cd89d68921fce1670d68bb3626008dd4"
-  integrity sha512-3a7HqJU/wCT7fKraYw6S4cs8KrlUZ0MbDV9/dEbFh9nSfz0BLQjcK+kL8OzjxM+bVwZ6pf62FJl44nVLpXqrGw==
+"@percy/cli-snapshot@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-snapshot/-/cli-snapshot-1.20.0.tgz#abf2696b91528dac2ee30739339cfbc3675694d5"
+  integrity sha512-s5ycpdgJbuxZ/RPjNc3EpJ2DpANza41dqLg7Q6O3kWhtAGhrBQENy7DBzNOYCTpEaDtP0IP53lI6+x7w3VQS5w==
   dependencies:
-    "@percy/cli-command" "1.18.0"
+    "@percy/cli-command" "1.20.0"
     yaml "^2.0.0"
 
-"@percy/cli-upload@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-upload/-/cli-upload-1.18.0.tgz#2ad505e6c290d54317001cfa817badf8d69920e5"
-  integrity sha512-JSRoE0aTnBH1HGNGmDJxGNkNIGor7H8pv6lO8AUiwCwQ55EHgLqtWlhwq+2AHz7QOiGD8aOHQTwJk6GcCIIa3A==
+"@percy/cli-upload@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-upload/-/cli-upload-1.20.0.tgz#f9fc5000588f7f578607e1097ec8b078505a9c58"
+  integrity sha512-a1v0CIEo8pfIhs3zM5vIaWexl73Ln0ApAW0vbzv6G33mrX2HAFf3nrnf7vJxBalZ7spPkeTl+61iRrgz0s9/Zg==
   dependencies:
-    "@percy/cli-command" "1.18.0"
+    "@percy/cli-command" "1.20.0"
     fast-glob "^3.2.11"
     image-size "^1.0.0"
 
 "@percy/cli@^1.11.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli/-/cli-1.18.0.tgz#9d734be256e75a600a4de67db4506f0f92656fe2"
-  integrity sha512-yfvVh2uwTqMGxn2wF/RCvGVsyfXkeKOt05Cil4s8PRSBQ94iDY872lMJ3al0gSq0y4GLAH9CO7ZVt3uqD2tlBg==
-  dependencies:
-    "@percy/cli-app" "1.18.0"
-    "@percy/cli-build" "1.18.0"
-    "@percy/cli-command" "1.18.0"
-    "@percy/cli-config" "1.18.0"
-    "@percy/cli-exec" "1.18.0"
-    "@percy/cli-snapshot" "1.18.0"
-    "@percy/cli-upload" "1.18.0"
-    "@percy/client" "1.18.0"
-    "@percy/logger" "1.18.0"
-
-"@percy/client@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/client/-/client-1.18.0.tgz#03e593eab84c2ba7f4fb03770f4bc9f976970b0c"
-  integrity sha512-onuVIpB6TPNjEhLlPsyhJYXTY2xdv3iNx4bj8Yfk751vQ33US2z4FEWDQKIEvHJGcFT7NEIHXFT3bYcFDmREdQ==
-  dependencies:
-    "@percy/env" "1.18.0"
-    "@percy/logger" "1.18.0"
-
-"@percy/config@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/config/-/config-1.18.0.tgz#d6a753c714938ee925a4ad799a83f3f33c9b1592"
-  integrity sha512-bjAiZuhORij3vxeolVjpf7ZU1Sjqv2Y9CgsBthoIu20f5o0a10w6JGgPkDjT3NaAIZDXgbxVsrWovlslbRC57w==
-  dependencies:
-    "@percy/logger" "1.18.0"
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli/-/cli-1.20.0.tgz#400bffb290fa91e02e3fe7c263613a8e8f322d62"
+  integrity sha512-23dfreXNT1PNBzn1f97hpMzD9l86koKPqdUAaXjFqL+iVrxSnq9Dfvw8W7QbChQOEsIjjhdeRkGOFrb1WZLsPg==
+  dependencies:
+    "@percy/cli-app" "1.20.0"
+    "@percy/cli-build" "1.20.0"
+    "@percy/cli-command" "1.20.0"
+    "@percy/cli-config" "1.20.0"
+    "@percy/cli-exec" "1.20.0"
+    "@percy/cli-snapshot" "1.20.0"
+    "@percy/cli-upload" "1.20.0"
+    "@percy/client" "1.20.0"
+    "@percy/logger" "1.20.0"
+
+"@percy/client@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/client/-/client-1.20.0.tgz#d899d7272fdbaf19640d431021831fb8c4fa4f47"
+  integrity sha512-x1iDqx3oCOHSdCP8TX4EZehNbjXFQFq6RhPmLIt8L8ZkNi+ugXPVc4J32evLw7dM+zwgVxXJvF4cwPYkHkOrFw==
+  dependencies:
+    "@percy/env" "1.20.0"
+    "@percy/logger" "1.20.0"
+
+"@percy/config@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/config/-/config-1.20.0.tgz#56c5b58b42d2d6374dc8c3087388e49fe89b5e62"
+  integrity sha512-2PlcF7OIEaX4sXtw4Wa+dxy3U6QcWWcrPFSa6W2hxJ8WplnO0UwYMq+PbJ/lP47LWURDvPgLNxyYrywQLe1NHg==
+  dependencies:
+    "@percy/logger" "1.20.0"
     ajv "^8.6.2"
     cosmiconfig "^7.0.0"
     yaml "^2.0.0"
 
-"@percy/core@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/core/-/core-1.18.0.tgz#e6493d45ea1db8272141dcda850ec71b4d014b77"
-  integrity sha512-9d8mkE6bfp0nRxhnGgC8N2KBG+MRiCxfvmZGfKENEoSY8NTTjJ5LqF+ol1JRwQ+uTABPZgy9XItWLINrS3yC1Q==
+"@percy/core@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/core/-/core-1.20.0.tgz#f589b57d29c37557fa38d1282ac794435cba6095"
+  integrity sha512-zb9W5udAnyr3BOMN3vDiWs/BEhgfY5zH4bUapw99zUxu19+/ipt31EWooI911CqxbHwoFtqr+o7JtIYmnICT6g==
   dependencies:
-    "@percy/client" "1.18.0"
-    "@percy/config" "1.18.0"
-    "@percy/dom" "1.18.0"
-    "@percy/logger" "1.18.0"
+    "@percy/client" "1.20.0"
+    "@percy/config" "1.20.0"
+    "@percy/dom" "1.20.0"
+    "@percy/logger" "1.20.0"
     content-disposition "^0.5.4"
     cross-spawn "^7.0.3"
     extract-zip "^2.0.1"
@@ -1882,20 +1945,20 @@
   dependencies:
     "@percy/sdk-utils" "^1.3.1"
 
-"@percy/dom@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/dom/-/dom-1.18.0.tgz#8698486134e6d94b98b132d39d3d25cd42597dba"
-  integrity sha512-FoaUgmdCaymSVV/5UQsDwPlZYpSymViODiGJxEJnfESKB4L5aNWQTL3QefFOAI67Q9lUIezW7oueLPsH2XlCNg==
+"@percy/dom@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/dom/-/dom-1.20.0.tgz#3b1f5c35b41d3d5134687d7c32283ed34f54c8d5"
+  integrity sha512-DA1kWILeoYxTF2H8J36ILH2GGcFpfFDaOrFMjQUvXMMkkEivxNR+dcemIlqphma+HDI2UuGnSXs4MQQ33MGXOQ==
 
-"@percy/env@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/env/-/env-1.18.0.tgz#831fcedee5d9d748f307a9b1465d5e28434c69fc"
-  integrity sha512-b+RTDPst4yKk67EQMjGeBIjfAkqZy2jUXgW3SKaNCyCOzI+16IXJ1gJSrniv29TpxgqDa1y3OUyWTPkmuDVi2A==
+"@percy/env@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/env/-/env-1.20.0.tgz#7b603bf007172b1b18277f06eca61db9602b9d59"
+  integrity sha512-hk/tPi+e7O0uF3FOOaMXYzA/7Gp0kBcYkYOOHL18/XrpETfBm8uXcP/26FrENdwSAH1nM/bu873NVgeS4pMECw==
 
-"@percy/logger@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@percy/logger/-/logger-1.18.0.tgz#d8f692625eb1725b489e796775f13a7e91650056"
-  integrity sha512-ZC9OqaTVPjnndcSfbQaU0NcquC0J4KZFx7hEDznukXNsLIK4WSLiEK1QS+tGxAkIKZilHmVc/vv9q3lMvlQDaQ==
+"@percy/logger@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@percy/logger/-/logger-1.20.0.tgz#c2a58ad29d52996d9fea579e248856e666de35ee"
+  integrity sha512-x76tOiB/m6GnND9KQ4Fjm+hl7l1NlITuveNWYuSS8Z2euqiggBAXdRuNSqV/oLR4UfgfiY6vYb7ENVpo9G33Iw==
 
 "@percy/sdk-utils@^1.3.1":
   version "1.16.0"
@@ -1931,7 +1994,7 @@
     "@sentry/utils" "7.23.0"
     tslib "^1.9.3"
 
-"@sentry/types@7.23.0", "@sentry/types@^7.2.0":
+"@sentry/types@7.23.0":
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.23.0.tgz#5d2ce94d81d7c1fad702645306f3c0932708cad5"
   integrity sha512-fZ5XfVRswVZhKoCutQ27UpIHP16tvyc6ws+xq+njHv8Jg8gFBCoOxlJxuFhegD2xxylAn1aiSHNAErFWdajbpA==
@@ -2057,20 +2120,6 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
-"@types/cheerio@*", "@types/cheerio@^0.22.22":
-  version "0.22.31"
-  resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.31.tgz#b8538100653d6bb1b08a1e46dec75b4f2a5d5eb6"
-  integrity sha512-Kt7Cdjjdi2XWSfrZ53v4Of0wG3ZcmaegFXjMmz9tfNrZSkzzo36G0AL1YqSdcIA78Etjt6E609pt5h1xnQkPUw==
-  dependencies:
-    "@types/node" "*"
-
-"@types/classnames@^2.2.11":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.3.1.tgz#3c2467aa0f1a93f1f021e3b9bcf938bd5dfdc0dd"
-  integrity sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==
-  dependencies:
-    classnames "*"
-
 "@types/commonmark@^0.27.4":
   version "0.27.5"
   resolved "https://registry.yarnpkg.com/@types/commonmark/-/commonmark-0.27.5.tgz#008f2e8fb845c906146aa97510d66953d916aed2"
@@ -2091,14 +2140,6 @@
   resolved "https://registry.yarnpkg.com/@types/diff-match-patch/-/diff-match-patch-1.0.32.tgz#d9c3b8c914aa8229485351db4865328337a3d09f"
   integrity sha512-bPYT5ECFiblzsVzyURaNhljBH2Gh1t9LowgUwciMrNAhFewLkHT2H0Mto07Y4/3KCOGZHRQll3CTtQZ0X11D/A==
 
-"@types/enzyme@^3.10.9":
-  version "3.10.12"
-  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.12.tgz#ac4494801b38188935580642f772ad18f72c132f"
-  integrity sha512-xryQlOEIe1TduDWAOphR0ihfebKFSWOXpIsk+70JskCfRfW+xALdnJ0r1ZOTo85F9Qsjk6vtlU7edTYHbls9tA==
-  dependencies:
-    "@types/cheerio" "*"
-    "@types/react" "*"
-
 "@types/escape-html@^1.0.1":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-1.0.2.tgz#072b7b13784fb3cee9c2450c22f36405983f5e3c"
@@ -2256,14 +2297,14 @@
     form-data "^3.0.0"
 
 "@types/node@*":
-  version "18.13.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.13.0.tgz#0400d1e6ce87e9d3032c19eb6c58205b0d3f7850"
-  integrity sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==
+  version "18.14.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.14.6.tgz#ae1973dd2b1eeb1825695bb11ebfb746d27e3e93"
+  integrity sha512-93+VvleD3mXwlLI/xASjw0FzKcwzl3OdTCzm1LaRfqgS21gfFtK3zDXM5Op9TeeMsJVOaJ2VRDpT9q4Y3d0AvA==
 
 "@types/node@^14.14.31":
-  version "14.18.34"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.34.tgz#cd2e6fa0dbfb08a62582a7b967558e73c32061ec"
-  integrity sha512-hcU9AIQVHmPnmjRK+XUUYlILlr9pQrsqSrwov/JK1pnf3GTQowVBhx54FbvM0AU/VXGH4i3+vgXS5EguR7fysA==
+  version "14.18.37"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.37.tgz#0bfcd173e8e1e328337473a8317e37b3b14fd30d"
+  integrity sha512-7GgtHCs/QZrBrDzgIJnQtuSvhFSwhyYSI2uafSwZoNt1iOGhEN5fwNrQMjtONyHm9+/LoA4453jH0CMYcr06Pg==
 
 "@types/node@^16":
   version "16.18.12"
@@ -2319,10 +2360,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@17.0.17", "@types/react-dom@<18.0.0":
-  version "17.0.17"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1"
-  integrity sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==
+"@types/react-dom@17.0.19", "@types/react-dom@<18.0.0":
+  version "17.0.19"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.19.tgz#36feef3aa35d045cacd5ed60fe0eef5272f19492"
+  integrity sha512-PiYG40pnQRdPHnlf7tZnp0aQ6q9tspYr72vD61saO6zFCybLfMqwUCN0va1/P+86DXn18ZWeW30Bk7xlC5eEAQ==
   dependencies:
     "@types/react" "^17"
 
@@ -2343,10 +2384,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.49", "@types/react@^17":
-  version "17.0.49"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.49.tgz#df87ba4ca8b7942209c3dc655846724539dc1049"
-  integrity sha512-CCBPMZaPhcKkYUTqFs/hOWqKjPxhTEmnZWjlHHgIMop67DsXywf9B5Os9Hz8KSacjNOgIdnZVJamwl232uxoPg==
+"@types/react@*", "@types/react@17.0.53", "@types/react@^17":
+  version "17.0.53"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.53.tgz#10d4d5999b8af3d6bc6a9369d7eb953da82442ab"
+  integrity sha512-1yIpQR2zdYu1Z/dc1OxC+MA6GR240u3gcnP4l6mvj/PJiVaqHsQPmWttsvHsfnhfPbU2FuGmo0wSITPygjBmsw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -2436,13 +2477,13 @@
   integrity sha512-3NoqvZC2W5gAC5DZbTpCeJ251vGQmgcWIHQJGq2J240HY6ErQ9aWKkwfoKJlHLx+A83WPNTZ9+3cd2ILxbvr1w==
 
 "@typescript-eslint/eslint-plugin@^5.35.1":
-  version "5.51.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.51.0.tgz#da3f2819633061ced84bb82c53bba45a6fe9963a"
-  integrity sha512-wcAwhEWm1RgNd7dxD/o+nnLW8oH+6RK1OGnmbmkj/GGoDPV1WWMVP0FXYQBivKHdwM1pwii3bt//RC62EriIUQ==
+  version "5.53.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.53.0.tgz#24b8b4a952f3c615fe070e3c461dd852b5056734"
+  integrity sha512-alFpFWNucPLdUOySmXCJpzr6HKC3bu7XooShWM+3w/EL6J2HIoB2PFxpLnq4JauWVk6DiVeNKzQlFEaE+X9sGw==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.51.0"
-    "@typescript-eslint/type-utils" "5.51.0"
-    "@typescript-eslint/utils" "5.51.0"
+    "@typescript-eslint/scope-manager" "5.53.0"
+    "@typescript-eslint/type-utils" "5.53.0"
+    "@typescript-eslint/utils" "5.53.0"
     debug "^4.3.4"
     grapheme-splitter "^1.0.4"
     ignore "^5.2.0"
@@ -2452,94 +2493,120 @@
     tsutils "^3.21.0"
 
 "@typescript-eslint/parser@^5.6.0":
-  version "5.51.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.51.0.tgz#2d74626652096d966ef107f44b9479f02f51f271"
-  integrity sha512-fEV0R9gGmfpDeRzJXn+fGQKcl0inIeYobmmUWijZh9zA7bxJ8clPhV9up2ZQzATxAiFAECqPQyMDB4o4B81AaA==
+  version "5.53.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.53.0.tgz#a1f2b9ae73b83181098747e96683f1b249ecab52"
+  integrity sha512-MKBw9i0DLYlmdOb3Oq/526+al20AJZpANdT6Ct9ffxcV8nKCHz63t/S0IhlTFNsBIHJv+GY5SFJ0XfqVeydQrQ==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.51.0"
-    "@typescript-eslint/types" "5.51.0"
-    "@typescript-eslint/typescript-estree" "5.51.0"
+    "@typescript-eslint/scope-manager" "5.53.0"
+    "@typescript-eslint/types" "5.53.0"
+    "@typescript-eslint/typescript-estree" "5.53.0"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.51.0":
-  version "5.51.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.51.0.tgz#ad3e3c2ecf762d9a4196c0fbfe19b142ac498990"
-  integrity sha512-gNpxRdlx5qw3yaHA0SFuTjW4rxeYhpHxt491PEcKF8Z6zpq0kMhe0Tolxt0qjlojS+/wArSDlj/LtE69xUJphQ==
+"@typescript-eslint/scope-manager@5.53.0":
+  version "5.53.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.53.0.tgz#42b54f280e33c82939275a42649701024f3fafef"
+  integrity sha512-Opy3dqNsp/9kBBeCPhkCNR7fmdSQqA+47r21hr9a14Bx0xnkElEQmhoHga+VoaoQ6uDHjDKmQPIYcUcKJifS7w==
   dependencies:
-    "@typescript-eslint/types" "5.51.0"
-    "@typescript-eslint/visitor-keys" "5.51.0"
+    "@typescript-eslint/types" "5.53.0"
+    "@typescript-eslint/visitor-keys" "5.53.0"
 
-"@typescript-eslint/type-utils@5.51.0":
-  version "5.51.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.51.0.tgz#7af48005531700b62a20963501d47dfb27095988"
-  integrity sha512-QHC5KKyfV8sNSyHqfNa0UbTbJ6caB8uhcx2hYcWVvJAZYJRBo5HyyZfzMdRx8nvS+GyMg56fugMzzWnojREuQQ==
+"@typescript-eslint/scope-manager@5.54.0":
+  version "5.54.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.54.0.tgz#74b28ac9a3fc8166f04e806c957adb8c1fd00536"
+  integrity sha512-VTPYNZ7vaWtYna9M4oD42zENOBrb+ZYyCNdFs949GcN8Miwn37b8b7eMj+EZaq7VK9fx0Jd+JhmkhjFhvnovhg==
   dependencies:
-    "@typescript-eslint/typescript-estree" "5.51.0"
-    "@typescript-eslint/utils" "5.51.0"
+    "@typescript-eslint/types" "5.54.0"
+    "@typescript-eslint/visitor-keys" "5.54.0"
+
+"@typescript-eslint/type-utils@5.53.0":
+  version "5.53.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.53.0.tgz#41665449935ba9b4e6a1ba6e2a3f4b2c31d6cf97"
+  integrity sha512-HO2hh0fmtqNLzTAme/KnND5uFNwbsdYhCZghK2SoxGp3Ifn2emv+hi0PBUjzzSh0dstUIFqOj3bp0AwQlK4OWw==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.53.0"
+    "@typescript-eslint/utils" "5.53.0"
     debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/types@5.51.0":
-  version "5.51.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.51.0.tgz#e7c1622f46c7eea7e12bbf1edfb496d4dec37c90"
-  integrity sha512-SqOn0ANn/v6hFn0kjvLwiDi4AzR++CBZz0NV5AnusT2/3y32jdc0G4woXPWHCumWtUXZKPAS27/9vziSsC9jnw==
+"@typescript-eslint/types@5.53.0":
+  version "5.53.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.53.0.tgz#f79eca62b97e518ee124086a21a24f3be267026f"
+  integrity sha512-5kcDL9ZUIP756K6+QOAfPkigJmCPHcLN7Zjdz76lQWWDdzfOhZDTj1irs6gPBKiXx5/6O3L0+AvupAut3z7D2A==
+
+"@typescript-eslint/types@5.54.0":
+  version "5.54.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.54.0.tgz#7d519df01f50739254d89378e0dcac504cab2740"
+  integrity sha512-nExy+fDCBEgqblasfeE3aQ3NuafBUxZxgxXcYfzYRZFHdVvk5q60KhCSkG0noHgHRo/xQ/BOzURLZAafFpTkmQ==
 
-"@typescript-eslint/typescript-estree@5.51.0":
-  version "5.51.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.51.0.tgz#0ec8170d7247a892c2b21845b06c11eb0718f8de"
-  integrity sha512-TSkNupHvNRkoH9FMA3w7TazVFcBPveAAmb7Sz+kArY6sLT86PA5Vx80cKlYmd8m3Ha2SwofM1KwraF24lM9FvA==
+"@typescript-eslint/typescript-estree@5.53.0":
+  version "5.53.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.53.0.tgz#bc651dc28cf18ab248ecd18a4c886c744aebd690"
+  integrity sha512-eKmipH7QyScpHSkhbptBBYh9v8FxtngLquq292YTEQ1pxVs39yFBlLC1xeIZcPPz1RWGqb7YgERJRGkjw8ZV7w==
   dependencies:
-    "@typescript-eslint/types" "5.51.0"
-    "@typescript-eslint/visitor-keys" "5.51.0"
+    "@typescript-eslint/types" "5.53.0"
+    "@typescript-eslint/visitor-keys" "5.53.0"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.51.0":
-  version "5.51.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.51.0.tgz#074f4fabd5b12afe9c8aa6fdee881c050f8b4d47"
-  integrity sha512-76qs+5KWcaatmwtwsDJvBk4H76RJQBFe+Gext0EfJdC3Vd2kpY2Pf//OHHzHp84Ciw0/rYoGTDnIAr3uWhhJYw==
+"@typescript-eslint/typescript-estree@5.54.0":
+  version "5.54.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.54.0.tgz#f6f3440cabee8a43a0b25fa498213ebb61fdfe99"
+  integrity sha512-X2rJG97Wj/VRo5YxJ8Qx26Zqf0RRKsVHd4sav8NElhbZzhpBI8jU54i6hfo9eheumj4oO4dcRN1B/zIVEqR/MQ==
+  dependencies:
+    "@typescript-eslint/types" "5.54.0"
+    "@typescript-eslint/visitor-keys" "5.54.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.53.0":
+  version "5.53.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.53.0.tgz#e55eaad9d6fffa120575ffaa530c7e802f13bce8"
+  integrity sha512-VUOOtPv27UNWLxFwQK/8+7kvxVC+hPHNsJjzlJyotlaHjLSIgOCKj9I0DBUjwOOA64qjBwx5afAPjksqOxMO0g==
   dependencies:
     "@types/json-schema" "^7.0.9"
     "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.51.0"
-    "@typescript-eslint/types" "5.51.0"
-    "@typescript-eslint/typescript-estree" "5.51.0"
+    "@typescript-eslint/scope-manager" "5.53.0"
+    "@typescript-eslint/types" "5.53.0"
+    "@typescript-eslint/typescript-estree" "5.53.0"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
     semver "^7.3.7"
 
-"@typescript-eslint/visitor-keys@5.51.0":
-  version "5.51.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.51.0.tgz#c0147dd9a36c0de758aaebd5b48cae1ec59eba87"
-  integrity sha512-Oh2+eTdjHjOFjKA27sxESlA87YPSOJafGCR0md5oeMdh1ZcCfAGCIOL216uTBAkAIptvLIfKQhl7lHxMJet4GQ==
+"@typescript-eslint/utils@^5.10.0":
+  version "5.54.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.54.0.tgz#3db758aae078be7b54b8ea8ea4537ff6cd3fbc21"
+  integrity sha512-cuwm8D/Z/7AuyAeJ+T0r4WZmlnlxQ8wt7C7fLpFlKMR+dY6QO79Cq1WpJhvZbMA4ZeZGHiRWnht7ZJ8qkdAunw==
   dependencies:
-    "@typescript-eslint/types" "5.51.0"
-    eslint-visitor-keys "^3.3.0"
+    "@types/json-schema" "^7.0.9"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.54.0"
+    "@typescript-eslint/types" "5.54.0"
+    "@typescript-eslint/typescript-estree" "5.54.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+    semver "^7.3.7"
 
-"@wojtekmaj/enzyme-adapter-react-17@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@wojtekmaj/enzyme-adapter-react-17/-/enzyme-adapter-react-17-0.8.0.tgz#138f404f82f502d152242c049e87d9621dcda4bd"
-  integrity sha512-zeUGfQRziXW7R7skzNuJyi01ZwuKCH8WiBNnTgUJwdS/CURrJwAhWsfW7nG7E30ak8Pu3ZwD9PlK9skBfAoOBw==
+"@typescript-eslint/visitor-keys@5.53.0":
+  version "5.53.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.53.0.tgz#8a5126623937cdd909c30d8fa72f79fa56cc1a9f"
+  integrity sha512-JqNLnX3leaHFZEN0gCh81sIvgrp/2GOACZNgO4+Tkf64u51kTpAyWFOY8XHx8XuXr3N2C9zgPPHtcpMg6z1g0w==
   dependencies:
-    "@wojtekmaj/enzyme-adapter-utils" "^0.2.0"
-    enzyme-shallow-equal "^1.0.0"
-    has "^1.0.0"
-    prop-types "^15.7.0"
-    react-is "^17.0.0"
-    react-test-renderer "^17.0.0"
+    "@typescript-eslint/types" "5.53.0"
+    eslint-visitor-keys "^3.3.0"
 
-"@wojtekmaj/enzyme-adapter-utils@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@wojtekmaj/enzyme-adapter-utils/-/enzyme-adapter-utils-0.2.0.tgz#dc2a8c14f92e502da28ea6b3fad96a082076d028"
-  integrity sha512-ZvZm9kZxZEKAbw+M1/Q3iDuqQndVoN8uLnxZ8bzxm7KgGTBejrGRoJAp8f1EN8eoO3iAjBNEQnTDW/H4Ekb0FQ==
+"@typescript-eslint/visitor-keys@5.54.0":
+  version "5.54.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.54.0.tgz#846878afbf0cd67c19cfa8d75947383d4490db8f"
+  integrity sha512-xu4wT7aRCakGINTLGeyGqDn+78BwFlggwBjnHa1ar/KaGagnmwLYmlrXIrgAaQ3AE1Vd6nLfKASm7LrFHNbKGA==
   dependencies:
-    function.prototype.name "^1.1.0"
-    has "^1.0.0"
-    object.fromentries "^2.0.0"
-    prop-types "^15.7.0"
+    "@typescript-eslint/types" "5.54.0"
+    eslint-visitor-keys "^3.3.0"
 
 abab@^2.0.6:
   version "2.0.6"
@@ -2599,17 +2666,7 @@ ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.1:
-  version "8.11.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.2.tgz#aecb20b50607acf2569b6382167b65a96008bb78"
-  integrity sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    json-schema-traverse "^1.0.0"
-    require-from-string "^2.0.2"
-    uri-js "^4.2.2"
-
-ajv@^8.6.2:
+ajv@^8.0.1, ajv@^8.6.2:
   version "8.12.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
   integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
@@ -2699,22 +2756,14 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-query@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
-  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
-  dependencies:
-    "@babel/runtime" "^7.10.2"
-    "@babel/runtime-corejs3" "^7.10.2"
-
-aria-query@^5.0.0:
+aria-query@^5.0.0, aria-query@^5.1.3:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
   integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
   dependencies:
     deep-equal "^2.0.5"
 
-array-includes@^3.1.4, array-includes@^3.1.5, array-includes@^3.1.6:
+array-includes@^3.1.5, array-includes@^3.1.6:
   version "3.1.6"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
   integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
@@ -2730,18 +2779,7 @@ array-union@^2.1.0:
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
-array.prototype.filter@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.filter/-/array.prototype.filter-1.0.2.tgz#5f90ca6e3d01c31ea8db24c147665541db28bb4c"
-  integrity sha512-us+UrmGOilqttSOgoWZTpOvHu68vZT2YCjc/H4vhu56vzZpaDFBhB+Se2UwqWzMKbDv7Myq5M5pcZLAtUvTQdQ==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-    es-array-method-boxes-properly "^1.0.0"
-    is-string "^1.0.7"
-
-array.prototype.flat@^1.2.3, array.prototype.flat@^1.2.5:
+array.prototype.flat@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz#ffc6576a7ca3efc2f46a143b9d1dda9b4b3cf5e2"
   integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==
@@ -2844,24 +2882,26 @@ aws-sign2@~0.7.0:
   integrity sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==
 
 aws4@^1.8.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
-  integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.12.0.tgz#ce1c9d143389679e253b314241ea9aa5cec980d3"
+  integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==
 
 axe-core@4.4.3:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.3.tgz#11c74d23d5013c0fa5d183796729bc3482bd2f6f"
   integrity sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==
 
-axe-core@^4.4.3:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.5.2.tgz#823fdf491ff717ac3c58a52631d4206930c1d9f7"
-  integrity sha512-u2MVsXfew5HBvjsczCv+xlwdNnB1oQR9HlAcsejZttNjKKSkeDNVwB1vMThIUIFI9GoT57Vtk8iQLwqOfAkboA==
+axe-core@^4.6.2:
+  version "4.6.3"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.6.3.tgz#fc0db6fdb65cc7a80ccf85286d91d64ababa3ece"
+  integrity sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==
 
-axobject-query@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
-  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+axobject-query@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.1.1.tgz#3b6e5c6d4e43ca7ba51c5babf99d22a9c68485e1"
+  integrity sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==
+  dependencies:
+    deep-equal "^2.0.5"
 
 babel-jest@^29.0.0, babel-jest@^29.3.1:
   version "29.3.1"
@@ -3036,15 +3076,15 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.21.3, browserslist@^4.21.4:
-  version "4.21.4"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
-  integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
+browserslist@^4.21.3, browserslist@^4.21.5:
+  version "4.21.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
+  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
   dependencies:
-    caniuse-lite "^1.0.30001400"
-    electron-to-chromium "^1.4.251"
-    node-releases "^2.0.6"
-    update-browserslist-db "^1.0.9"
+    caniuse-lite "^1.0.30001449"
+    electron-to-chromium "^1.4.284"
+    node-releases "^2.0.8"
+    update-browserslist-db "^1.0.10"
 
 bs58@^5.0.0:
   version "5.0.0"
@@ -3120,10 +3160,10 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-caniuse-lite@^1.0.30001400:
-  version "1.0.30001442"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001442.tgz#40337f1cf3be7c637b061e2f78582dc1daec0614"
-  integrity sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==
+caniuse-lite@^1.0.30001449:
+  version "1.0.30001458"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001458.tgz#871e35866b4654a7d25eccca86864f411825540c"
+  integrity sha512-lQ1VlUUq5q9ro9X+5gOEyH7i3vm+AYVT1WDCVB69XOZ17KZRhnZ9J0Sqz7wTHQaLBJccNCHq8/Ww5LlOIZbB0w==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -3182,7 +3222,7 @@ cheerio-select@^2.1.0:
     domhandler "^5.0.3"
     domutils "^3.0.1"
 
-cheerio@^1.0.0-rc.3, cheerio@^1.0.0-rc.9:
+cheerio@^1.0.0-rc.9:
   version "1.0.0-rc.12"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.12.tgz#788bf7466506b1c6bf5fae51d24a2c4d62e47683"
   integrity sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==
@@ -3210,22 +3250,17 @@ chokidar@^3.4.0, chokidar@^3.5.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
-ci-info@^3.2.0:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.7.1.tgz#708a6cdae38915d597afdf3b145f2f8e1ff55f3f"
-  integrity sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w==
-
-ci-info@^3.6.1:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.7.0.tgz#6d01b3696c59915b6ce057e4aa4adfc2fa25f5ef"
-  integrity sha512-2CpRNYmImPx+RXKLq6jko/L07phmS9I02TyqkcNU20GCF/GgaWvc58hPtjxDX8lPpkdwc9sNh72V9k00S7ezog==
+ci-info@^3.2.0, ci-info@^3.6.1:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91"
+  integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
 
 cjs-module-lexer@^1.0.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
-classnames@*, classnames@^2.2.6:
+classnames@^2.2.6:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
@@ -3355,11 +3390,6 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.19.0:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
 commander@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
@@ -3423,16 +3453,11 @@ convert-source-map@^2.0.0:
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
 core-js-compat@^3.25.1:
-  version "3.26.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.26.1.tgz#0e710b09ebf689d719545ac36e49041850f943df"
-  integrity sha512-622/KzTudvXCDLRw70iHW4KKs1aGpcRcowGWyYJr2DEBfRrd6hNJybxSWJFuZYD4ma86xhrwDDHxmDaIq4EA8A==
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.29.0.tgz#1b8d9eb4191ab112022e7f6364b99b65ea52f528"
+  integrity sha512-ScMn3uZNAFhK2DGoEfErguoiAHhV2Ju+oJo/jK08p7B3f3UhocUrCCkTvnZaiS+edl5nlIoiBXKcwMc6elv4KQ==
   dependencies:
-    browserslist "^4.21.4"
-
-core-js-pure@^3.25.1:
-  version "3.26.1"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.26.1.tgz#653f4d7130c427820dcecd3168b594e8bb095a33"
-  integrity sha512-VVXcDpp/xJ21KdULRq/lXdLzQAtX7+37LzpyfFM973il0tWSsDEoyzG38G14AjTpK9VTfiNM9jnFauq/CpaWGQ==
+    browserslist "^4.21.5"
 
 core-js@^3.0.0:
   version "3.26.1"
@@ -3449,7 +3474,7 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cosmiconfig@^7.0.0, cosmiconfig@^7.1.0:
+cosmiconfig@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
   integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
@@ -3460,6 +3485,16 @@ cosmiconfig@^7.0.0, cosmiconfig@^7.1.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cosmiconfig@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.1.0.tgz#947e174c796483ccf0a48476c24e4fefb7e1aea8"
+  integrity sha512-0tLZ9URlPGU7JsKq0DQOQ3FoRsYX8xDZ7xMiATQfaiGMz7EHowNkbU9u1coAOmnh9p/1ySpm0RB3JNWRXM5GCg==
+  dependencies:
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+
 counterpart@^0.18.6:
   version "0.18.6"
   resolved "https://registry.yarnpkg.com/counterpart/-/counterpart-0.18.6.tgz#cf6b60d8ef99a4b44b8bf6445fa99b4bd1b2f9dd"
@@ -3520,6 +3555,14 @@ css-select@^5.1.0:
     domutils "^3.0.1"
     nth-check "^2.0.1"
 
+css-tree@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
+  integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
+  dependencies:
+    mdn-data "2.0.30"
+    source-map-js "^1.0.1"
+
 css-what@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
@@ -3568,27 +3611,27 @@ csstype@^3.0.2:
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
 cypress-axe@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/cypress-axe/-/cypress-axe-1.0.0.tgz#ab4e9486eaa3bb956a90a1ae40d52df42827b4f0"
-  integrity sha512-QBlNMAd5eZoyhG8RGGR/pLtpHGkvgWXm2tkP68scJ+AjYiNNOlJihxoEwH93RT+rWOLrefw4iWwEx8kpEcrvJA==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/cypress-axe/-/cypress-axe-1.4.0.tgz#e67482bfe9e740796bf77c7823f19781a8a2faff"
+  integrity sha512-Ut7NKfzjyKm0BEbt2WxuKtLkIXmx6FD2j0RwdvO/Ykl7GmB/qRQkwbKLk3VP35+83hiIr8GKD04PDdrTK5BnyA==
 
 cypress-multi-reporters@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/cypress-multi-reporters/-/cypress-multi-reporters-1.6.1.tgz#515b891f6c80e0700068efb03ab9d55388399c95"
-  integrity sha512-FPeC0xWF1N6Myrwc2m7KC0xxlrtG8+x4hlsPFBDRWP8u/veR2x90pGaH3BuJfweV7xoQ4Zo85Qjhu3fgZGrBQQ==
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/cypress-multi-reporters/-/cypress-multi-reporters-1.6.2.tgz#129dfeffa00d4deca3e9f58d84570b9962c28c2b"
+  integrity sha512-lvwGwHqZG5CwGxBJ6UJXWaxlWGkJgxBjP0h+IVLrrwRlJpT4coSwwt+UzMdeqEMrzT4IDfhbtmUNOiDleisOYA==
   dependencies:
     debug "^4.1.1"
     lodash "^4.17.15"
 
 cypress-real-events@^1.7.1:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.7.4.tgz#87780ee0f6669ee30ce52016c4bfc94d094a6e3d"
-  integrity sha512-bAlIf3w6uJa72hcbLFpQIl/hBoNGYnSVzFMgohefWcooyZz2WbFZdFAEDOl5qOPATtAU01o92sWvc2QW9eT8aA==
+  version "1.7.6"
+  resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.7.6.tgz#6f17e0b2ceea1d6dc60f6737d8f84cc517bbbb4c"
+  integrity sha512-yP6GnRrbm6HK5q4DH6Nnupz37nOfZu/xn1xFYqsE2o4G73giPWQOdu6375QYpwfU1cvHNCgyD2bQ2hPH9D7NMw==
 
 cypress@^12.0.0:
-  version "12.3.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.3.0.tgz#ae3fb0540aef4b5eab1ef2bcd0760caf2992b8bf"
-  integrity sha512-ZQNebibi6NBt51TRxRMYKeFvIiQZ01t50HSy7z/JMgRVqBUey3cdjog5MYEbzG6Ktti5ckDt1tfcC47lmFwXkw==
+  version "12.7.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.7.0.tgz#69900f82af76cf3ba0ddb9b59ec3b0d38222ab22"
+  integrity sha512-7rq+nmhzz0u6yabCFyPtADU2OOrYt6pvUau9qV7xyifJ/hnsaw/vkr0tnLlcuuQKUAOC1v1M1e4Z0zG7S0IAvA==
   dependencies:
     "@cypress/request" "^2.88.10"
     "@cypress/xvfb" "^1.2.4"
@@ -3607,7 +3650,7 @@ cypress@^12.0.0:
     commander "^5.1.0"
     common-tags "^1.8.0"
     dayjs "^1.10.4"
-    debug "^4.3.2"
+    debug "^4.3.4"
     enquirer "^2.3.6"
     eventemitter2 "6.4.7"
     execa "4.1.0"
@@ -3668,9 +3711,9 @@ date-names@^0.1.11:
   integrity sha512-IxxoeD9tdx8pXVcmqaRlPvrXIsSrSrIZzfzlOkm9u+hyzKp5Wk/odt9O/gd7Ockzy8n/WHeEpTVJ2bF3mMV4LA==
 
 dayjs@^1.10.4:
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.6.tgz#2e79a226314ec3ec904e3ee1dd5a4f5e5b1c7afb"
-  integrity sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ==
+  version "1.11.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
+  integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
 debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
@@ -3679,13 +3722,6 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   dependencies:
     ms "2.1.2"
 
-debug@^2.6.9:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
 debug@^3.1.0, debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -3717,16 +3753,18 @@ dedent@^0.7.0:
   integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
 
 deep-equal@^2.0.5:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.1.0.tgz#5ba60402cf44ab92c2c07f3f3312c3d857a0e1dd"
-  integrity sha512-2pxgvWu3Alv1PoWEyVg7HS8YhGlUFUV7N5oOvfL6d+7xAmLSemMwv/c8Zv/i9KFzxV5Kt5CAvQc70fLwVuf4UA==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.0.tgz#5caeace9c781028b9ff459f33b779346637c43e6"
+  integrity sha512-RdpzE0Hv4lhowpIUKKMJfeH6C1pXdtT1/it80ubgWqwI3qpuxUBpC1S4hnHg+zjnuOoDkzUtUCEEkG+XG5l3Mw==
   dependencies:
     call-bind "^1.0.2"
     es-get-iterator "^1.1.2"
     get-intrinsic "^1.1.3"
     is-arguments "^1.1.1"
+    is-array-buffer "^3.0.1"
     is-date-object "^1.0.5"
     is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
     isarray "^2.0.5"
     object-is "^1.1.5"
     object-keys "^1.1.1"
@@ -3735,7 +3773,7 @@ deep-equal@^2.0.5:
     side-channel "^1.0.4"
     which-boxed-primitive "^1.0.2"
     which-collection "^1.0.1"
-    which-typed-array "^1.1.8"
+    which-typed-array "^1.1.9"
 
 deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.4"
@@ -3748,9 +3786,9 @@ deepmerge@^4.2.2:
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
 define-properties@^1.1.3, define-properties@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
-  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.0.tgz#52988570670c9eacedd8064f4a990f2405849bd5"
+  integrity sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==
   dependencies:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
@@ -3807,11 +3845,6 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-discontinuous-range@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
-  integrity sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==
-
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -3889,10 +3922,10 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-electron-to-chromium@^1.4.251:
-  version "1.4.284"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592"
-  integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==
+electron-to-chromium@^1.4.284:
+  version "1.4.313"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.313.tgz#ff95f01926ab748c65beb23fc55f2f178e7a24a9"
+  integrity sha512-QckB9OVqr2oybjIrbMI99uF+b9+iTja5weFe0ePbqLb5BHqXOJUO1SG6kDj/1WtWPRIBr51N153AEq8m7HuIaA==
 
 emittery@^0.13.1:
   version "0.13.1"
@@ -3958,51 +3991,6 @@ entities@~2.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.3.tgz#5c487e5742ab93c15abb5da22759b8590ec03b7f"
   integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
 
-enzyme-shallow-equal@^1.0.0, enzyme-shallow-equal@^1.0.1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.5.tgz#5528a897a6ad2bdc417c7221a7db682cd01711ba"
-  integrity sha512-i6cwm7hN630JXenxxJFBKzgLC3hMTafFQXflvzHgPmDhOBhxUWDe8AeRv1qp2/uWJ2Y8z5yLWMzmAfkTOiOCZg==
-  dependencies:
-    has "^1.0.3"
-    object-is "^1.1.5"
-
-enzyme-to-json@^3.6.2:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.6.2.tgz#94f85c413bcae8ab67be53b0a94b69a560e27823"
-  integrity sha512-Ynm6Z6R6iwQ0g2g1YToz6DWhxVnt8Dy1ijR2zynRKxTyBGA8rCDXU3rs2Qc4OKvUvc2Qoe1bcFK6bnPs20TrTg==
-  dependencies:
-    "@types/cheerio" "^0.22.22"
-    lodash "^4.17.21"
-    react-is "^16.12.0"
-
-enzyme@^3.11.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"
-  integrity sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==
-  dependencies:
-    array.prototype.flat "^1.2.3"
-    cheerio "^1.0.0-rc.3"
-    enzyme-shallow-equal "^1.0.1"
-    function.prototype.name "^1.1.2"
-    has "^1.0.3"
-    html-element-map "^1.2.0"
-    is-boolean-object "^1.0.1"
-    is-callable "^1.1.5"
-    is-number-object "^1.0.4"
-    is-regex "^1.0.5"
-    is-string "^1.0.5"
-    is-subset "^0.1.1"
-    lodash.escape "^4.0.1"
-    lodash.isequal "^4.5.0"
-    object-inspect "^1.7.0"
-    object-is "^1.0.2"
-    object.assign "^4.1.0"
-    object.entries "^1.1.1"
-    object.values "^1.1.1"
-    raf "^3.4.1"
-    rst-selector-parser "^2.2.3"
-    string.prototype.trim "^1.2.1"
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -4011,53 +3999,67 @@ error-ex@^1.3.1:
     is-arrayish "^0.2.1"
 
 es-abstract@^1.19.0, es-abstract@^1.20.4:
-  version "1.20.4"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.4.tgz#1d103f9f8d78d4cf0713edcd6d0ed1a46eed5861"
-  integrity sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==
+  version "1.21.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.21.1.tgz#e6105a099967c08377830a0c9cb589d570dd86c6"
+  integrity sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==
   dependencies:
+    available-typed-arrays "^1.0.5"
     call-bind "^1.0.2"
+    es-set-tostringtag "^2.0.1"
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
     function.prototype.name "^1.1.5"
     get-intrinsic "^1.1.3"
     get-symbol-description "^1.0.0"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
     has "^1.0.3"
     has-property-descriptors "^1.0.0"
+    has-proto "^1.0.1"
     has-symbols "^1.0.3"
-    internal-slot "^1.0.3"
+    internal-slot "^1.0.4"
+    is-array-buffer "^3.0.1"
     is-callable "^1.2.7"
     is-negative-zero "^2.0.2"
     is-regex "^1.1.4"
     is-shared-array-buffer "^1.0.2"
     is-string "^1.0.7"
+    is-typed-array "^1.1.10"
     is-weakref "^1.0.2"
     object-inspect "^1.12.2"
     object-keys "^1.1.1"
     object.assign "^4.1.4"
     regexp.prototype.flags "^1.4.3"
     safe-regex-test "^1.0.0"
-    string.prototype.trimend "^1.0.5"
-    string.prototype.trimstart "^1.0.5"
+    string.prototype.trimend "^1.0.6"
+    string.prototype.trimstart "^1.0.6"
+    typed-array-length "^1.0.4"
     unbox-primitive "^1.0.2"
-
-es-array-method-boxes-properly@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
-  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
+    which-typed-array "^1.1.9"
 
 es-get-iterator@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.2.tgz#9234c54aba713486d7ebde0220864af5e2b283f7"
-  integrity sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
+  integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
   dependencies:
     call-bind "^1.0.2"
-    get-intrinsic "^1.1.0"
-    has-symbols "^1.0.1"
-    is-arguments "^1.1.0"
+    get-intrinsic "^1.1.3"
+    has-symbols "^1.0.3"
+    is-arguments "^1.1.1"
     is-map "^2.0.2"
     is-set "^2.0.2"
-    is-string "^1.0.5"
+    is-string "^1.0.7"
     isarray "^2.0.5"
+    stop-iteration-iterator "^1.0.0"
+
+es-set-tostringtag@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
+  integrity sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==
+  dependencies:
+    get-intrinsic "^1.1.3"
+    has "^1.0.3"
+    has-tostringtag "^1.0.0"
 
 es-shim-unscopables@^1.0.0:
   version "1.0.0"
@@ -4154,19 +4156,20 @@ eslint-config-google@^0.14.0:
   integrity sha512-WsbX4WbjuMvTdeVL6+J3rK1RGhCTqjsFjX7UMSMgZiyxxaNLkoJENbrGExzERFeoTpGw3F3FypTiWAP9ZXzkEw==
 
 eslint-config-prettier@^8.5.0:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
-  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.7.0.tgz#f1cc58a8afebc50980bd53475451df146c13182d"
+  integrity sha512-HHVXLSlVUhMSmyW4ZzEuvjpwqamgmlfkutD53cYXLikh4pt/modINRcCIApJ84czDxM4GZInwUrromsDdTImTA==
 
-eslint-import-resolver-node@^0.3.6:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
-  integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
+eslint-import-resolver-node@^0.3.7:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz#83b375187d412324a1963d84fa664377a23eb4d7"
+  integrity sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==
   dependencies:
     debug "^3.2.7"
-    resolve "^1.20.0"
+    is-core-module "^2.11.0"
+    resolve "^1.22.1"
 
-eslint-module-utils@^2.7.3:
+eslint-module-utils@^2.7.4:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz#4f3e41116aaf13a20792261e61d3a2e7e0583974"
   integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
@@ -4179,47 +4182,59 @@ eslint-plugin-deprecate@^0.7.0:
   integrity sha512-MylhCqoH/SJ2MwzVgX0we6oE+lKPVwhOu9hAJ98vMCmbz3FNwqJ8XipdI23bCF7NHxUbhd6mdxFjywKE52pt7A==
 
 eslint-plugin-import@^2.25.4:
-  version "2.26.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
-  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
+  version "2.27.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65"
+  integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==
   dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flat "^1.2.5"
-    debug "^2.6.9"
+    array-includes "^3.1.6"
+    array.prototype.flat "^1.3.1"
+    array.prototype.flatmap "^1.3.1"
+    debug "^3.2.7"
     doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.6"
-    eslint-module-utils "^2.7.3"
+    eslint-import-resolver-node "^0.3.7"
+    eslint-module-utils "^2.7.4"
     has "^1.0.3"
-    is-core-module "^2.8.1"
+    is-core-module "^2.11.0"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
-    object.values "^1.1.5"
-    resolve "^1.22.0"
+    object.values "^1.1.6"
+    resolve "^1.22.1"
+    semver "^6.3.0"
     tsconfig-paths "^3.14.1"
 
+eslint-plugin-jest@^27.2.1:
+  version "27.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-27.2.1.tgz#b85b4adf41c682ea29f1f01c8b11ccc39b5c672c"
+  integrity sha512-l067Uxx7ZT8cO9NJuf+eJHvt6bqJyz2Z29wykyEdz/OtmcELQl2MQGQLX8J94O1cSJWAwUSEvCjwjA7KEK3Hmg==
+  dependencies:
+    "@typescript-eslint/utils" "^5.10.0"
+
 eslint-plugin-jsx-a11y@^6.5.1:
-  version "6.6.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz#93736fc91b83fdc38cc8d115deedfc3091aef1ff"
-  integrity sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz#fca5e02d115f48c9a597a6894d5bcec2f7a76976"
+  integrity sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==
   dependencies:
-    "@babel/runtime" "^7.18.9"
-    aria-query "^4.2.2"
-    array-includes "^3.1.5"
+    "@babel/runtime" "^7.20.7"
+    aria-query "^5.1.3"
+    array-includes "^3.1.6"
+    array.prototype.flatmap "^1.3.1"
     ast-types-flow "^0.0.7"
-    axe-core "^4.4.3"
-    axobject-query "^2.2.0"
+    axe-core "^4.6.2"
+    axobject-query "^3.1.1"
     damerau-levenshtein "^1.0.8"
     emoji-regex "^9.2.2"
     has "^1.0.3"
-    jsx-ast-utils "^3.3.2"
-    language-tags "^1.0.5"
+    jsx-ast-utils "^3.3.3"
+    language-tags "=1.0.5"
     minimatch "^3.1.2"
+    object.entries "^1.1.6"
+    object.fromentries "^2.0.6"
     semver "^6.3.0"
 
-eslint-plugin-matrix-org@0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-matrix-org/-/eslint-plugin-matrix-org-0.10.0.tgz#8d0998641a4d276343cae2abf253a01bb4d4cc60"
-  integrity sha512-L7ail0x1yUlF006kn4mHc+OT8/aYZI++i852YXPHxCbM1EY7jeg/fYAQ8tCx5+x08LyqXeS7inAVSL784m0C6Q==
+eslint-plugin-matrix-org@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-matrix-org/-/eslint-plugin-matrix-org-1.1.0.tgz#cb3c313b58aa84ee0dd52c57f4a614a1795e8744"
+  integrity sha512-UArLqthBuaCljVajS2TtlPQLXNMZZAPKRt+gA8D0ayzcAj+Ghl50amwGtvLHMzISGv3sqNDBFBMD9cElntE1zA==
 
 eslint-plugin-react-hooks@^4.3.0:
   version "4.6.0"
@@ -4227,9 +4242,9 @@ eslint-plugin-react-hooks@^4.3.0:
   integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
 eslint-plugin-react@^7.28.0:
-  version "7.31.11"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.31.11.tgz#011521d2b16dcf95795df688a4770b4eaab364c8"
-  integrity sha512-TTvq5JsT5v56wPa9OYHzsrOlHzKZKjV+aLgS+55NJP/cuzdiQPC7PfYoUjMoxlffKtvijpk7vA/jmuqRb9nohw==
+  version "7.32.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"
+  integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==
   dependencies:
     array-includes "^3.1.6"
     array.prototype.flatmap "^1.3.1"
@@ -4243,17 +4258,17 @@ eslint-plugin-react@^7.28.0:
     object.hasown "^1.1.2"
     object.values "^1.1.6"
     prop-types "^15.8.1"
-    resolve "^2.0.0-next.3"
+    resolve "^2.0.0-next.4"
     semver "^6.3.0"
     string.prototype.matchall "^4.0.8"
 
 eslint-plugin-unicorn@^45.0.0:
-  version "45.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-unicorn/-/eslint-plugin-unicorn-45.0.1.tgz#2307f4620502fd955c819733ce1276bed705b736"
-  integrity sha512-tLnIw5oDJJc3ILYtlKtqOxPP64FZLTkZkgeuoN6e7x6zw+rhBjOxyvq2c7577LGxXuIhBYrwisZuKNqOOHp3BA==
+  version "45.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-unicorn/-/eslint-plugin-unicorn-45.0.2.tgz#d6ba704793a6909fe5dfe013900d2b05b715284c"
+  integrity sha512-Y0WUDXRyGDMcKLiwgL3zSMpHrXI00xmdyixEGIg90gHnj0PcHY4moNv3Ppje/kDivdAy5vUeUr7z211ImPv2gw==
   dependencies:
     "@babel/helper-validator-identifier" "^7.19.1"
-    "@eslint-community/eslint-utils" "^4.1.0"
+    "@eslint-community/eslint-utils" "^4.1.2"
     ci-info "^3.6.1"
     clean-regexp "^1.0.0"
     esquery "^1.4.0"
@@ -4307,13 +4322,14 @@ eslint-visitor-keys@^3.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint@8.28.0:
-  version "8.28.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.28.0.tgz#81a680732634677cc890134bcdd9fdfea8e63d6e"
-  integrity sha512-S27Di+EVyMxcHiwDrFzk8dJYAaD+/5SoWKxL1ri/71CRHsnJnRDPNt2Kzj24+MT9FDupf4aqqyqPrvI8MvQ4VQ==
+eslint@8.35.0:
+  version "8.35.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.35.0.tgz#fffad7c7e326bae606f0e8f436a6158566d42323"
+  integrity sha512-BxAf1fVL7w+JLRQhWl2pzGeSiGqbWumV4WNvc9Rhp6tiCtm4oHnyPBSEtMGZwrQgudFQ+otqzWoPB7x+hxoWsw==
   dependencies:
-    "@eslint/eslintrc" "^1.3.3"
-    "@humanwhocodes/config-array" "^0.11.6"
+    "@eslint/eslintrc" "^2.0.0"
+    "@eslint/js" "8.35.0"
+    "@humanwhocodes/config-array" "^0.11.8"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
     ajv "^6.10.0"
@@ -4326,13 +4342,13 @@ eslint@8.28.0:
     eslint-utils "^3.0.0"
     eslint-visitor-keys "^3.3.0"
     espree "^9.4.0"
-    esquery "^1.4.0"
+    esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
     find-up "^5.0.0"
     glob-parent "^6.0.2"
-    globals "^13.15.0"
+    globals "^13.19.0"
     grapheme-splitter "^1.0.4"
     ignore "^5.2.0"
     import-fresh "^3.0.0"
@@ -4366,10 +4382,10 @@ esprima@^4.0.0, esprima@^4.0.1:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
-  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+esquery@^1.4.0, esquery@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
+  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
   dependencies:
     estraverse "^5.1.0"
 
@@ -4641,10 +4657,10 @@ file-saver@^2.0.5:
   resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
   integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
 
-filesize@10.0.5:
-  version "10.0.5"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-10.0.5.tgz#d77553eb00a525f4cc7983047d2197cda6fff321"
-  integrity sha512-qrzyt8gLh86nsyYiC3ibI5KyIYRCWg2yqIklYrWF4a0qNfekik4OQfn7AoPJG2hRrPMSlH6fET4VEITweZAzjA==
+filesize@10.0.6:
+  version "10.0.6"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-10.0.6.tgz#5f4cd2721664cd925db3a7a5a87bbfd6ab5ebb1a"
+  integrity sha512-rzpOZ4C9vMFDqOa6dNpog92CoLYjD79dnjLk2TYDDtImRIyLTOzqojCb05Opd1WuiWjs+fshhCgTd8cl7y5t+g==
 
 fill-range@^7.0.1:
   version "7.0.1"
@@ -4706,10 +4722,10 @@ flux@4.0.3:
     fbemitter "^3.0.0"
     fbjs "^3.0.1"
 
-focus-lock@^0.11.2:
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.11.4.tgz#fbf84894d7c384f25a2c7cf5d97c848131d97f6f"
-  integrity sha512-LzZWJcOBIcHslQ46N3SUu/760iLPSrUtp8omM4gh9du438V2CQdks8TcOu1yvmu2C68nVOBnl1WFiKGPbQ8L6g==
+focus-lock@^0.11.6:
+  version "0.11.6"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.11.6.tgz#e8821e21d218f03e100f7dc27b733f9c4f61e683"
+  integrity sha512-KSuV3ur4gf2KqMNoZx3nXNVhqCkn42GuTYCX4tXPEwf0MjpFQmNMiN6m7dXaUXgIoivL6/65agoUMg4RLS0Vbg==
   dependencies:
     tslib "^2.0.3"
 
@@ -4801,7 +4817,7 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
-function.prototype.name@^1.1.0, function.prototype.name@^1.1.2, function.prototype.name@^1.1.5:
+function.prototype.name@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
   integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
@@ -4831,10 +4847,10 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.3.tgz#063c84329ad93e83893c7f4f243ef63ffa351385"
-  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz#7ad1dc0535f3a2904bba075772763e5051f6d05f"
+  integrity sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==
   dependencies:
     function-bind "^1.1.1"
     has "^1.0.3"
@@ -4921,9 +4937,9 @@ glob@^7.1.3, glob@^7.1.4, glob@^7.2.0:
     path-is-absolute "^1.0.0"
 
 glob@^8.0.0:
-  version "8.0.3"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-8.0.3.tgz#415c6eb2deed9e502c68fa44a272e6da6eeca42e"
-  integrity sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
+  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -4931,6 +4947,16 @@ glob@^8.0.0:
     minimatch "^5.0.1"
     once "^1.3.0"
 
+glob@^9.2.0:
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-9.2.1.tgz#f47e34e1119e7d4f93a546e75851ba1f1e68de50"
+  integrity sha512-Pxxgq3W0HyA3XUvSXcFhRSs+43Jsx0ddxcFrbjxNGkL2Ak5BAUBxLqI5G6ADDeCHLfzzXFhe0b1yYcctGmytMA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    minimatch "^7.4.1"
+    minipass "^4.2.4"
+    path-scurry "^1.6.1"
+
 global-dirs@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.1.tgz#0c488971f066baceda21447aecb1a8b911d22485"
@@ -4959,13 +4985,20 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.15.0:
-  version "13.18.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.18.0.tgz#fb224daeeb2bb7d254cd2c640f003528b8d0c1dc"
-  integrity sha512-/mR4KI8Ps2spmoc0Ulu9L7agOF0du1CZNQ3dke8yItYlyKNmGrkONemBbd6V8UTc1Wgcqn21t3WYB7dbRmh6/A==
+globals@^13.19.0:
+  version "13.20.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.20.0.tgz#ea276a1e508ffd4f1612888f9d1bad1e2717bf82"
+  integrity sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==
   dependencies:
     type-fest "^0.20.2"
 
+globalthis@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
+  integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
+  dependencies:
+    define-properties "^1.1.3"
+
 globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
@@ -5027,7 +5060,12 @@ has-property-descriptors@^1.0.0:
   dependencies:
     get-intrinsic "^1.1.1"
 
-has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
+has-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
+  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+
+has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
@@ -5039,7 +5077,7 @@ has-tostringtag@^1.0.0:
   dependencies:
     has-symbols "^1.0.2"
 
-has@^1.0.0, has@^1.0.3:
+has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
@@ -5070,14 +5108,6 @@ hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
-html-element-map@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.3.1.tgz#44b2cbcfa7be7aa4ff59779e47e51012e1c73c08"
-  integrity sha512-6XMlxrAFX4UEEGxctfFnmrFaaZFNf9i5fNuV5wZ3WWQ4FVaNP1aX1LkX9j2mfEx1NpjeE/rL3nmgEn23GdFmrg==
-  dependencies:
-    array.prototype.filter "^1.0.0"
-    call-bind "^1.0.2"
-
 html-encoding-sniffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
@@ -5158,7 +5188,7 @@ ieee754@^1.1.12, ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.2.0:
+ignore@^5.2.0, ignore@^5.2.4:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
@@ -5234,12 +5264,12 @@ ini@^1.3.5:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
-internal-slot@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
-  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+internal-slot@^1.0.3, internal-slot@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
+  integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
   dependencies:
-    get-intrinsic "^1.1.0"
+    get-intrinsic "^1.2.0"
     has "^1.0.3"
     side-channel "^1.0.4"
 
@@ -5248,7 +5278,7 @@ ip-regex@^4.0.0:
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-4.3.0.tgz#687275ab0f57fa76978ff8f4dddc8a23d5990db5"
   integrity sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==
 
-is-arguments@^1.1.0, is-arguments@^1.1.1:
+is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
   integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
@@ -5256,6 +5286,15 @@ is-arguments@^1.1.0, is-arguments@^1.1.1:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-array-buffer@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz#f2653ced8412081638ecb0ebbd0c41c6e0aecbbe"
+  integrity sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.0"
+    is-typed-array "^1.1.10"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -5275,7 +5314,7 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.1, is-boolean-object@^1.1.0:
+is-boolean-object@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
   integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
@@ -5289,13 +5328,13 @@ is-buffer@~1.1.6:
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
 is-builtin-module@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-3.2.0.tgz#bb0310dfe881f144ca83f30100ceb10cf58835e0"
-  integrity sha512-phDA4oSGt7vl1n5tJvTWooWWAsXLY+2xCnxNqvKhGEzujg+A43wPlPOyDg3C8XQHN+6k/JTQWJ/j0dQh/qr+Hw==
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-3.2.1.tgz#f03271717d8654cfcaf07ab0463faa3571581169"
+  integrity sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==
   dependencies:
     builtin-modules "^3.3.0"
 
-is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.1.5, is-callable@^1.2.7:
+is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
@@ -5307,7 +5346,7 @@ is-ci@^3.0.0:
   dependencies:
     ci-info "^3.2.0"
 
-is-core-module@^2.5.0, is-core-module@^2.8.1, is-core-module@^2.9.0:
+is-core-module@^2.11.0, is-core-module@^2.5.0, is-core-module@^2.9.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
   integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
@@ -5412,7 +5451,7 @@ is-promise@^2.2.2:
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
   integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
 
-is-regex@^1.0.5, is-regex@^1.1.4:
+is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
   integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
@@ -5456,7 +5495,7 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
-is-typed-array@^1.1.10:
+is-typed-array@^1.1.10, is-typed-array@^1.1.9:
   version "1.1.10"
   resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.10.tgz#36a5b5cb4189b575d1a3e4b08536bfb485801e3f"
   integrity sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==
@@ -6111,7 +6150,7 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
-json5@^1.0.1:
+json5@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
   integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
@@ -6147,7 +6186,7 @@ jsprim@^2.0.2:
     json-schema "0.4.0"
     verror "1.10.0"
 
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.2:
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
   integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
@@ -6166,9 +6205,9 @@ jszip@^3.7.0:
     setimmediate "^1.0.5"
 
 katex@^0.16.0:
-  version "0.16.3"
-  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.3.tgz#29640560b8fa0403e45f3aa20da5fdbb6d2b83a8"
-  integrity sha512-3EykQddareoRmbtNiNEDgl3IGjryyrp2eg/25fHDEnlHymIDi33bptkMv6K4EOC2LZCybLW/ZkEo6Le+EM9pmA==
+  version "0.16.4"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.4.tgz#87021bc3bbd80586ef715aeb476794cba6a49ad4"
+  integrity sha512-WudRKUj8yyBeVDI4aYMNxhx5Vhh2PjpzQw1GRu/LVGqL4m1AxwD1GcUp0IMbdJaf5zsjtj8ghP0DOQRYhroNkw==
   dependencies:
     commander "^8.0.0"
 
@@ -6197,7 +6236,7 @@ language-subtag-registry@~0.3.2:
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
   integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
 
-language-tags@^1.0.5:
+language-tags@=1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
   integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
@@ -6312,16 +6351,6 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
-lodash.escape@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
-  integrity sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw==
-
-lodash.flattendeep@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
-  integrity sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==
-
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@@ -6396,6 +6425,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lru-cache@^7.14.1:
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
+  integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
+
 lru-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3"
@@ -6485,10 +6519,10 @@ matrix-events-sdk@0.0.1:
   resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd"
   integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==
 
-matrix-js-sdk@23.4.0:
-  version "23.4.0"
-  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-23.4.0.tgz#345c72bd1c5eae26f8db680db64636dda64dc8c1"
-  integrity sha512-3gHT6IrDYBkFYzaZM052uZXv1WFGoN+q83rTvmTpMtxZYrwosLHb6Y/w/Lfl26y1N1gTDdyQ0Vd3NpSycKmpJA==
+matrix-js-sdk@23.5.0:
+  version "23.5.0"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-23.5.0.tgz#644a1546340160bfc3de44df30030373e7cc2fc9"
+  integrity sha512-jkHJBxXcLqzz0aZ4+Hjbx7hvgryIy+DZPOxvNfM2jJM0sc803Yyu4JMZLEdx/JLwFG1KE7bFZGiXP26g5yu6Mw==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.3"
@@ -6536,6 +6570,11 @@ md5@^2.3.0:
     crypt "0.0.2"
     is-buffer "~1.1.6"
 
+mdn-data@2.0.30:
+  version "2.0.30"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
+  integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
+
 mdurl@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -6626,9 +6665,16 @@ minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
     brace-expansion "^1.1.7"
 
 minimatch@^5.0.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.1.tgz#6c9dffcf9927ff2a31e74b5af11adf8b9604b022"
-  integrity sha512-362NP+zlprccbEt/SkxKfRMHnNY85V74mVnpUpNyr3F35covl09Kec7/sEFLt3RA4oXmewtoaanoIf67SE5Y5g==
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^7.4.1:
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-7.4.2.tgz#157e847d79ca671054253b840656720cb733f10f"
+  integrity sha512-xy4q7wou3vUoC9k1xGTXc+awNdGaGVHtFUaey8tiX4H1QRc04DZ/rmDFwNm2EBsuYEhAZ6SgMmYf3InGY6OauA==
   dependencies:
     brace-expansion "^2.0.1"
 
@@ -6642,9 +6688,14 @@ minimist-options@4.1.0:
     kind-of "^6.0.3"
 
 minimist@>=1.2.2, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
-  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+minipass@^4.0.2, minipass@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-4.2.4.tgz#7d0d97434b6a19f59c5c3221698b48bbf3b2cd06"
+  integrity sha512-lwycX3cBMTvcejsHITUgYj6Gy6A7Nh4Q6h9NP4sTHY1ccJlC7yKzDmiShEHsJ16Jf1nKGDEaiHxiltsJEvk0nQ==
 
 mkdirp@1.0.4, mkdirp@~1.0.4:
   version "1.0.4"
@@ -6669,16 +6720,6 @@ moo-color@^1.0.2:
   dependencies:
     color-name "^1.1.4"
 
-moo@^0.5.0:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.2.tgz#f9fe82473bc7c184b0d32e2215d3f6e67278733c"
-  integrity sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==
-
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
-
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -6709,22 +6750,19 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-nearley@^2.7.10:
-  version "2.20.1"
-  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.20.1.tgz#246cd33eff0d012faf197ff6774d7ac78acdd474"
-  integrity sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==
-  dependencies:
-    commander "^2.19.0"
-    moo "^0.5.0"
-    railroad-diagrams "^1.0.0"
-    randexp "0.4.6"
-
 next-tick@1, next-tick@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
   integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
 
-node-fetch@2, node-fetch@2.6.7, node-fetch@^2.6.7:
+node-fetch@2:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.9.tgz#7c7f744b5cc6eb5fd404e0c7a9fec630a55657e6"
+  integrity sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==
+  dependencies:
+    whatwg-url "^5.0.0"
+
+node-fetch@2.6.7, node-fetch@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
   integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
@@ -6736,10 +6774,10 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
 
-node-releases@^2.0.6:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.8.tgz#0f349cdc8fcfa39a92ac0be9bc48b7706292b9ae"
-  integrity sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==
+node-releases@^2.0.8:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
+  integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==
 
 normalize-package-data@^2.5.0:
   version "2.5.0"
@@ -6790,12 +6828,12 @@ object-assign@^4.1.0, object-assign@^4.1.1:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
-object-inspect@^1.12.2, object-inspect@^1.7.0, object-inspect@^1.9.0:
-  version "1.12.2"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
-  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
+object-inspect@^1.12.2, object-inspect@^1.9.0:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
+  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
 
-object-is@^1.0.2, object-is@^1.1.5:
+object-is@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
   integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
@@ -6808,7 +6846,7 @@ object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object.assign@^4.1.0, object.assign@^4.1.3, object.assign@^4.1.4:
+object.assign@^4.1.3, object.assign@^4.1.4:
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
   integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
@@ -6818,7 +6856,7 @@ object.assign@^4.1.0, object.assign@^4.1.3, object.assign@^4.1.4:
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
-object.entries@^1.1.1, object.entries@^1.1.6:
+object.entries@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.6.tgz#9737d0e5b8291edd340a3e3264bb8a3b00d5fa23"
   integrity sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==
@@ -6827,7 +6865,7 @@ object.entries@^1.1.1, object.entries@^1.1.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-object.fromentries@^2.0.0, object.fromentries@^2.0.6:
+object.fromentries@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.6.tgz#cdb04da08c539cffa912dcd368b886e0904bfa73"
   integrity sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==
@@ -6844,7 +6882,7 @@ object.hasown@^1.1.2:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-object.values@^1.1.1, object.values@^1.1.5, object.values@^1.1.6:
+object.values@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
   integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
@@ -7033,6 +7071,14 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
+path-scurry@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.6.1.tgz#dab45f7bb1d3f45a0e271ab258999f4ab7e23132"
+  integrity sha512-OW+5s+7cw6253Q4E+8qQ/u1fVvcJQCJo/VFD8pje+dbJCF1n5ZRMV2AEHbGp+5Q7jxQIYJxkHopnj6nzdGeZLA==
+  dependencies:
+    lru-cache "^7.14.1"
+    minipass "^4.0.2"
+
 path-to-regexp@^2.2.1:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.4.0.tgz#35ce7f333d5616f1c1e1bfe266c3aba2e5b2e704"
@@ -7147,7 +7193,7 @@ postcss-scss@^4.0.4:
   resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.6.tgz#5d62a574b950a6ae12f2aa89b60d63d9e4432bfd"
   integrity sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==
 
-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.6:
+postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.6:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
   integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
@@ -7160,7 +7206,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.3.11, postcss@^8.4.19:
+postcss@^8.3.11:
   version "8.4.19"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc"
   integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==
@@ -7169,12 +7215,20 @@ postcss@^8.3.11, postcss@^8.4.19:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-posthog-js@1.36.0:
-  version "1.36.0"
-  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.36.0.tgz#cbefa031a1e7ee6ff25dae29b8aa77bd741adbba"
-  integrity sha512-LL9lbJxN46GbckRKSFZxX7fwNAvKUbi5nLFF0hMkmKY9o9zoz58oA0DJBZkqyEXK+15XzNoyLxF+wnxSPNwn3g==
+postcss@^8.4.21:
+  version "8.4.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
+  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+posthog-js@1.50.3:
+  version "1.50.3"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.50.3.tgz#b89e0a41ba6e34d804490664c0854f3e37f3acbf"
+  integrity sha512-QWEQ1bvKKsHUBLYGGIgwC2t9Lsivoi5gkQ/QgzAQrK9bMHQgexAx5CCTgdQ2ael9o88i9eIExWQId6+/RpALsw==
   dependencies:
-    "@sentry/types" "^7.2.0"
     fflate "^0.4.1"
     rrweb-snapshot "^1.1.14"
 
@@ -7193,10 +7247,10 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
 
-prettier@2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.0.tgz#c7df58393c9ba77d6fba3921ae01faf994fb9dc9"
-  integrity sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==
+prettier@2.8.4:
+  version "2.8.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.4.tgz#34dd2595629bfbb79d344ac4a91ff948694463c3"
+  integrity sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==
 
 pretty-bytes@^5.6.0:
   version "5.6.0"
@@ -7251,7 +7305,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7288,16 +7342,11 @@ punycode@1.3.2:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
   integrity sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==
 
-punycode@^2.1.0:
+punycode@^2.1.0, punycode@^2.1.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
   integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
 
-punycode@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
-  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
-
 pvtsutils@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/pvtsutils/-/pvtsutils-1.3.2.tgz#9f8570d132cdd3c27ab7d51a2799239bf8d8d5de"
@@ -7320,10 +7369,12 @@ qrcode@1.5.1:
     pngjs "^5.0.0"
     yargs "^15.3.1"
 
-qs@~6.5.2:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
-  integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
+qs@~6.10.3:
+  version "6.10.5"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.5.tgz#974715920a80ff6a262264acd2c7e6c2a53282b4"
+  integrity sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==
+  dependencies:
+    side-channel "^1.0.4"
 
 querystring@0.2.0:
   version "0.2.0"
@@ -7367,26 +7418,6 @@ raf-schd@^4.0.2:
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
   integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
 
-raf@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
-  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
-  dependencies:
-    performance-now "^2.1.0"
-
-railroad-diagrams@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
-  integrity sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==
-
-randexp@0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
-  integrity sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==
-  dependencies:
-    discontinuous-range "1.0.0"
-    ret "~0.1.10"
-
 raw-loader@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
@@ -7413,10 +7444,10 @@ react-beautiful-dnd@^13.1.0:
     redux "^4.0.4"
     use-memo-one "^1.1.1"
 
-react-blurhash@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/react-blurhash/-/react-blurhash-0.2.0.tgz#5c62ab827eaebddb3f9dcda695c7c7cf784c7f37"
-  integrity sha512-MfhPLfFTNCX3MCJ8nM5t+T5qAixBUv8QHVcHORs5iVaqdpg+IW/e4lpOphc0bm6AvKz//4MuHESIeKKoxi3wnA==
+react-blurhash@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/react-blurhash/-/react-blurhash-0.3.0.tgz#f125801d052644f74420c79b05981691d17c9705"
+  integrity sha512-XlKr4Ns1iYFRnk6DkAblNbAwN/bTJvxTVoxMvmTcURdc5oLoXZwqAF9N3LZUh/HT+QFlq5n6IS6VsDGsviYAiQ==
 
 react-clientside-effect@^1.2.6:
   version "1.2.6"
@@ -7442,36 +7473,31 @@ react-error-boundary@^3.1.0:
     "@babel/runtime" "^7.12.5"
 
 react-focus-lock@^2.5.1:
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.9.2.tgz#a57dfd7c493e5a030d87f161c96ffd082bd920f2"
-  integrity sha512-5JfrsOKyA5Zn3h958mk7bAcfphr24jPoMoznJ8vaJF6fUrPQ8zrtEd3ILLOK8P5jvGxdMd96OxWNjDzATfR2qw==
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.9.4.tgz#4753f6dcd167c39050c9d84f9c63c71b3ff8462e"
+  integrity sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg==
   dependencies:
     "@babel/runtime" "^7.0.0"
-    focus-lock "^0.11.2"
+    focus-lock "^0.11.6"
     prop-types "^15.6.2"
     react-clientside-effect "^1.2.6"
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
-  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
-
-react-is@^17.0.0, react-is@^17.0.1, react-is@^17.0.2:
+react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-lite-youtube-embed@^2.3.52:
-  version "2.3.52"
-  resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.3.52.tgz#7f8125a03e7a940745b63d11abd6821ffe1babe5"
-  integrity sha512-G010PvCavA4EqL8mZ/Sv9XXiHnjMfONW+lmNeCRnSEPluPdptv2lZ0cNlngrj7K9j7luc8pbpyrmNpKbD9VMmw==
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
 react-redux@^7.2.0:
   version "7.2.9"
@@ -7485,24 +7511,6 @@ react-redux@^7.2.0:
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
-react-shallow-renderer@^16.13.1:
-  version "16.15.0"
-  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
-  integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
-  dependencies:
-    object-assign "^4.1.1"
-    react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
-
-react-test-renderer@^17.0.0:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
-  integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
-  dependencies:
-    object-assign "^4.1.1"
-    react-is "^17.0.2"
-    react-shallow-renderer "^16.13.1"
-    scheduler "^0.20.2"
-
 react-transition-group@^4.4.1:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -7698,7 +7706,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
   integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
 
-resolve@^1.10.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.0:
+resolve@^1.10.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.1:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@@ -7707,7 +7715,7 @@ resolve@^1.10.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^2.0.0-next.3:
+resolve@^2.0.0-next.4:
   version "2.0.0-next.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
   integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
@@ -7724,11 +7732,6 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
-ret@~0.1.10:
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
-  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
-
 retry@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
@@ -7756,19 +7759,18 @@ rimraf@^3.0.0, rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+rimraf@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-4.3.0.tgz#cd4d9a918c1735197e0ae8217e5eeb4657d42154"
+  integrity sha512-5qVDXPbByA1qSJEWMv1qAwKsoS22vVpsL2QyxCKBw4gf6XiFo1K3uRLY6uSOOBFDwnqAZtnbILqWKKlzh8bkGg==
+  dependencies:
+    glob "^9.2.0"
+
 rrweb-snapshot@^1.1.14:
   version "1.1.14"
   resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz#9d4d9be54a28a893373428ee4393ec7e5bd83fcc"
   integrity sha512-eP5pirNjP5+GewQfcOQY4uBiDnpqxNRc65yKPW0eSoU1XamDfc4M8oqpXGMyUyvLyxFDB0q0+DChuxxiU2FXBQ==
 
-rst-selector-parser@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
-  integrity sha512-nDG1rZeP6oFTLN6yNDV/uiAvs1+FS/KlrEwh7+y7dpuApDBy6bI2HTBcc0/V8lv9OTqfyD34eF7au2pm8aBbhA==
-  dependencies:
-    lodash.flattendeep "^4.4.0"
-    nearley "^2.7.10"
-
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -7777,9 +7779,9 @@ run-parallel@^1.1.9:
     queue-microtask "^1.2.2"
 
 rxjs@^7.5.1:
-  version "7.5.7"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.7.tgz#2ec0d57fdc89ece220d2e702730ae8f1e49def39"
-  integrity sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.0.tgz#90a938862a82888ff4c7359811a595e14e1e09a4"
+  integrity sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==
   dependencies:
     tslib "^2.1.0"
 
@@ -7821,10 +7823,10 @@ sanitize-filename@^1.6.3:
   dependencies:
     truncate-utf8-bytes "^1.0.0"
 
-sanitize-html@2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.8.0.tgz#651d1d0e5b2d61b4ec6147cc46f6d6680eef98ce"
-  integrity sha512-ZsGyc6avnqgvEm3eMKrcy8xa7WM1MrGrfkGsUgQee2CU+vg3PCfNCexXwBDF/6dEPvaQ4k/QqRjnYKHL8xgNjg==
+sanitize-html@2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.10.0.tgz#74d28848dfcf72c39693139131895c78900ab452"
+  integrity sha512-JqdovUd81dG4k87vZt6uA6YhDfWkUGruUu/aPmXLxXi45gZExnt9Bnw/qeQU8oGf82vPyaE0vO4aH0PbobB9JQ==
   dependencies:
     deepmerge "^4.2.2"
     escape-string-regexp "^4.0.0"
@@ -7955,7 +7957,7 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
-source-map-js@^1.0.2:
+source-map-js@^1.0.1, source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -8039,6 +8041,13 @@ stack-utils@^2.0.3:
   dependencies:
     escape-string-regexp "^2.0.0"
 
+stop-iteration-iterator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
+  integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
+  dependencies:
+    internal-slot "^1.0.4"
+
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
@@ -8075,16 +8084,7 @@ string.prototype.repeat@^0.2.0:
   resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-0.2.0.tgz#aba36de08dcee6a5a337d49b2ea1da1b28fc0ecf"
   integrity sha512-1BH+X+1hSthZFW+X+JaUkjkkUPwIlLEMJBLANN3hOob3RhEk5snLWNECDnYbgn/m5c5JV7Ersu1Yubaf+05cIA==
 
-string.prototype.trim@^1.2.1:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz#a68352740859f6893f14ce3ef1bb3037f7a90533"
-  integrity sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-
-string.prototype.trimend@^1.0.5:
+string.prototype.trimend@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
   integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
@@ -8093,7 +8093,7 @@ string.prototype.trimend@^1.0.5:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-string.prototype.trimstart@^1.0.5:
+string.prototype.trimstart@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
   integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
@@ -8149,26 +8149,26 @@ style-search@^0.1.0:
   integrity sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==
 
 stylelint-config-prettier@^9.0.4:
-  version "9.0.4"
-  resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-9.0.4.tgz#1b1dda614d5b3ef6c1f583fa6fa55f88245eb00b"
-  integrity sha512-38nIGTGpFOiK5LjJ8Ma1yUgpKENxoKSOhbDNSemY7Ep0VsJoXIW9Iq/2hSt699oB9tReynfWicTAoIHiq8Rvbg==
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-9.0.5.tgz#9f78bbf31c7307ca2df2dd60f42c7014ee9da56e"
+  integrity sha512-U44lELgLZhbAD/xy/vncZ2Pq8sh2TnpiPvo38Ifg9+zeioR+LAkHu0i6YORIOxFafZoVg0xqQwex6e6F25S5XA==
 
-stylelint-config-recommended@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz#1c9e07536a8cd875405f8ecef7314916d94e7e40"
-  integrity sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==
+stylelint-config-recommended@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-10.0.1.tgz#25a8828acf6cde87dac6db2950c8c4ed82a69ae1"
+  integrity sha512-TQ4xQ48tW4QSlODcti7pgSRqBZcUaBzuh0jPpfiMhwJKBPkqzTIAU+IrSWL/7BgXlOM90DjB7YaNgFpx8QWhuA==
 
-stylelint-config-standard@^29.0.0:
-  version "29.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-29.0.0.tgz#4cc0e0f05512a39bb8b8e97853247d3a95d66fa2"
-  integrity sha512-uy8tZLbfq6ZrXy4JKu3W+7lYLgRQBxYTUUB88vPgQ+ZzAxdrvcaSUW9hOMNLYBnwH+9Kkj19M2DHdZ4gKwI7tg==
+stylelint-config-standard@^30.0.0:
+  version "30.0.1"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-30.0.1.tgz#a84d57c240c37f7db47023ab9d2e64c49090e1eb"
+  integrity sha512-NbeHOmpRQhjZh5XB1B/S4MLRWvz4xxAxeDBjzl0tY2xEcayNhLbaRGF0ZQzq+DQZLCcPpOHeS2Ru1ydbkhkmLg==
   dependencies:
-    stylelint-config-recommended "^9.0.0"
+    stylelint-config-recommended "^10.0.1"
 
 stylelint-scss@^4.2.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.3.0.tgz#638800faf823db11fff60d537c81051fe74c90fa"
-  integrity sha512-GvSaKCA3tipzZHoz+nNO7S02ZqOsdBzMiCx9poSmLlb3tdJlGddEX/8QzCOD8O7GQan9bjsvLMsO5xiw6IhhIQ==
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.4.0.tgz#87ce9d049eff1ce67cce788780fbfda63099017e"
+  integrity sha512-Qy66a+/30aylFhPmUArHhVsHOun1qrO93LGT15uzLuLjWS7hKDfpFm34mYo1ndR4MCo8W4bEZM1+AlJRJORaaw==
   dependencies:
     lodash "^4.17.21"
     postcss-media-query-parser "^0.2.3"
@@ -8176,16 +8176,20 @@ stylelint-scss@^4.2.0:
     postcss-selector-parser "^6.0.6"
     postcss-value-parser "^4.1.0"
 
-stylelint@^14.9.1:
-  version "14.15.0"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.15.0.tgz#4df55078e734869f81f6b85bbec2d56a4b478ece"
-  integrity sha512-JOgDAo5QRsqiOZPZO+B9rKJvBm64S0xasbuRPAbPs6/vQDgDCnZLIiw6XcAS6GQKk9k1sBWR6rmH3Mfj8OknKg==
+stylelint@^15.0.0:
+  version "15.2.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-15.2.0.tgz#e906eb59df83bde075d148623216f298f9ceb03a"
+  integrity sha512-wjg5OLn8zQwjlj5cYUgyQpMWKzct42AG5dYlqkHRJQJqsystFFn3onqEc263KH4xfEI0W3lZCnlIhFfS64uwSA==
   dependencies:
-    "@csstools/selector-specificity" "^2.0.2"
+    "@csstools/css-parser-algorithms" "^2.0.1"
+    "@csstools/css-tokenizer" "^2.0.1"
+    "@csstools/media-query-list-parser" "^2.0.1"
+    "@csstools/selector-specificity" "^2.1.1"
     balanced-match "^2.0.0"
     colord "^2.9.3"
-    cosmiconfig "^7.1.0"
+    cosmiconfig "^8.0.0"
     css-functions-list "^3.1.0"
+    css-tree "^2.3.1"
     debug "^4.3.4"
     fast-glob "^3.2.12"
     fastest-levenshtein "^1.0.16"
@@ -8194,7 +8198,7 @@ stylelint@^14.9.1:
     globby "^11.1.0"
     globjoin "^0.1.4"
     html-tags "^3.2.0"
-    ignore "^5.2.0"
+    ignore "^5.2.4"
     import-lazy "^4.0.0"
     imurmurhash "^0.1.4"
     is-plain-object "^5.0.0"
@@ -8204,11 +8208,11 @@ stylelint@^14.9.1:
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
     picocolors "^1.0.0"
-    postcss "^8.4.19"
+    postcss "^8.4.21"
     postcss-media-query-parser "^0.2.3"
     postcss-resolve-nested-selector "^0.1.1"
     postcss-safe-parser "^6.0.0"
-    postcss-selector-parser "^6.0.10"
+    postcss-selector-parser "^6.0.11"
     postcss-value-parser "^4.2.0"
     resolve-from "^5.0.0"
     string-width "^4.2.3"
@@ -8218,7 +8222,7 @@ stylelint@^14.9.1:
     svg-tags "^1.0.0"
     table "^6.8.1"
     v8-compile-cache "^2.3.0"
-    write-file-atomic "^4.0.2"
+    write-file-atomic "^5.0.0"
 
 supercluster@^7.1.5:
   version "7.1.5"
@@ -8403,12 +8407,12 @@ truncate-utf8-bytes@^1.0.0:
     utf8-byte-length "^1.0.1"
 
 tsconfig-paths@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
-  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
+  version "3.14.2"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
+  integrity sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==
   dependencies:
     "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
+    json5 "^1.0.2"
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
@@ -8417,7 +8421,12 @@ tslib@^1.8.1, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.4.1:
+tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
+tslib@^2.4.0, tslib@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
   integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
@@ -8500,10 +8509,19 @@ type@^2.7.2:
   resolved "https://registry.yarnpkg.com/type/-/type-2.7.2.tgz#2376a15a3a28b1efa0f5350dcf72d24df6ef98d0"
   integrity sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==
 
-typescript@4.9.3:
-  version "4.9.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.3.tgz#3aea307c1746b8c384435d8ac36b8a2e580d85db"
-  integrity sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==
+typed-array-length@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
+  integrity sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==
+  dependencies:
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    is-typed-array "^1.1.9"
+
+typescript@4.9.5:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
 ua-parser-js@^0.7.30:
   version "0.7.32"
@@ -8573,7 +8591,7 @@ untildify@^4.0.0:
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
   integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
 
-update-browserslist-db@^1.0.9:
+update-browserslist-db@^1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
   integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
@@ -8799,7 +8817,7 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==
 
-which-typed-array@^1.1.8:
+which-typed-array@^1.1.9:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
   integrity sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==
@@ -8853,7 +8871,7 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-write-file-atomic@^4.0.1, write-file-atomic@^4.0.2:
+write-file-atomic@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.2.tgz#a9df01ae5b77858a027fd2e80768ee433555fcfd"
   integrity sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==
@@ -8861,10 +8879,18 @@ write-file-atomic@^4.0.1, write-file-atomic@^4.0.2:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
+write-file-atomic@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-5.0.0.tgz#54303f117e109bf3d540261125c8ea5a7320fab0"
+  integrity sha512-R7NYMnHSlV42K54lwY9lvW6MnSm1HSJqZL3xiSgi9E7//FYaI74r2G0rd+/X6VAMkHEdzxQaU5HUOXWUz5kA/w==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.7"
+
 ws@^8.0.0:
-  version "8.12.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.12.0.tgz#485074cc392689da78e1828a9ff23585e06cddd8"
-  integrity sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.12.1.tgz#c51e583d79140b5e42e39be48c934131942d4a8f"
+  integrity sha512-1qo+M9Ba+xNhPB+YTWUlK6M17brTut5EXbcBaMRN5pH5dFrXz7lzz1ChFSUq3bOUl8yEvSenhHmYUNJxFzdJew==
 
 ws@^8.11.0:
   version "8.11.0"