Ensure we do not fire the verification mismatch modal multiple times (#12526)

* Ensure we do not fire the verification mismatch modal multiple times

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add rust crypto test for mismatch emoji cancellation

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/right_panel/EncryptionPanel.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { VerificationPhase, VerificationRequest, VerificationRequestEvent } from "matrix-js-sdk/src/crypto-api";
 import { RoomMember, User } from "matrix-js-sdk/src/matrix";
 
@@ -69,13 +69,17 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
             awaitPromise();
         }
     }, [verificationRequestPromise]);
+    // Use a ref to track whether we are already showing the mismatch modal as state may not update fast enough
+    // if two change events are fired in quick succession like can happen with rust crypto.
+    const isShowingMismatchModal = useRef(false);
     const changeHandler = useCallback(() => {
         // handle transitions -> cancelled for mismatches which fire a modal instead of showing a card
         if (
-            request &&
-            request.phase === VerificationPhase.Cancelled &&
+            !isShowingMismatchModal.current &&
+            request?.phase === VerificationPhase.Cancelled &&
             MISMATCHES.includes(request.cancellationCode ?? "")
         ) {
+            isShowingMismatchModal.current = true;
             Modal.createDialog(ErrorDialog, {
                 headerImage: require("../../../../res/img/e2e/warning-deprecated.svg").default,
                 title: _t("encryption|messages_not_secure|title"),