Show user an error if we fail to create a DM for verification

Related: element-hq/element-web#23819

This is still pretty poor, but at least we don't get stuck with a
'verifying...' spinner that is a total failure.

src/components/views/right_panel/EncryptionPanel.tsx

@@ -111,8 +111,21 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
     const onStartVerification = useCallback(async () => {
         setRequesting(true);
         const cli = MatrixClientPeg.get();
-        const roomId = await ensureDMExists(cli, member.userId);
-        const verificationRequest_ = await cli.requestVerificationDM(member.userId, roomId);
+        let verificationRequest_ : VerificationRequest;
+        try {
+            const roomId = await ensureDMExists(cli, member.userId);
+            verificationRequest_ = await cli.requestVerificationDM(member.userId, roomId);
+        } catch (e) {
+            console.error("Error starting verification", e);
+            setRequesting(false);
+
+            Modal.createDialog(ErrorDialog, {
+                headerImage: require("../../../../res/img/e2e/warning.svg").default,
+                title: _t("Error starting verification"),
+                description:  _t("We were unable to start a chat with the other user.")
+            });
+            return;
+        }
         setRequest(verificationRequest_);
         setPhase(verificationRequest_.phase);
         // Notify the RightPanelStore about this

src/i18n/strings/en_EN.json

@@ -3646,5 +3646,7 @@
     "Activate selected button": "Activate selected button",
     "New line": "New line",
     "Force complete": "Force complete",
-    "Search (must be enabled)": "Search (must be enabled)"
+    "Search (must be enabled)": "Search (must be enabled)",
+    "Error starting verification": "Error starting verification",
+    "We were unable to start a chat with the other user.": "We were unable to start a chat with the other user."
 }