Remove references to VerificationRequest (#11050)

* Update references to `VerificationRequestEvent`

* Update references to `Phase`

* update references to legacy `PHASE_*` constants

* Replace `request.canAccept` with `canAcceptVerificationRequest`

* Replace `VerificationRequest` with the interface throughout

* Minor strict type fixes

* Add a couple of tests

cypress/e2e/crypto/complete-security.spec.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import type { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import type { VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 import { HomeserverInstance } from "../../plugins/utils/homeserver";
 import { handleVerificationRequest, logIntoElement, waitForVerificationRequest } from "./utils";
 import { CypressBot } from "../../support/bot";

cypress/e2e/crypto/crypto.spec.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import type { ISendEventResponse, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
-import type { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import type { VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 import type { CypressBot } from "../../support/bot";
 import { HomeserverInstance } from "../../plugins/utils/homeserver";
 import { UserCredentials } from "../../support/login";

cypress/e2e/crypto/utils.ts

@@ -16,7 +16,7 @@ limitations under the License.
 
 import type { ISasEvent } from "matrix-js-sdk/src/crypto/verification/SAS";
 import type { MatrixClient } from "matrix-js-sdk/src/matrix";
-import type { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import type { VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 
 export type EmojiMapping = [emoji: string, name: string];
 

src/components/structures/auth/SetupEncryptionBody.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 import { ISecretStorageKeyInfo } from "matrix-js-sdk/src/crypto/api";
 import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
-import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";

src/components/views/dialogs/VerificationRequestDialog.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 import { User } from "matrix-js-sdk/src/models/user";
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";

src/components/views/dialogs/devtools/VerificationExplorer.tsx

@@ -16,11 +16,8 @@ limitations under the License.
 */
 
 import React, { useContext, useEffect, useState } from "react";
-import {
+import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
-    Phase,
+import { VerificationPhase as Phase, VerificationRequestEvent } from "matrix-js-sdk/src/crypto-api";
-    VerificationRequest,
-    VerificationRequestEvent,
-} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 
 import { useTypedEventEmitter, useTypedEventEmitterState } from "../../../../hooks/useEventEmitter";

src/components/views/messages/MKeyVerificationConclusion.tsx

@@ -17,11 +17,7 @@ limitations under the License.
 import React from "react";
 import classNames from "classnames";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import {
+import { VerificationPhase, VerificationRequest, VerificationRequestEvent } from "matrix-js-sdk/src/crypto-api";
-    Phase as VerificationPhase,
-    VerificationRequest,
-    VerificationRequestEvent,
-} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 

src/components/views/messages/MKeyVerificationRequest.tsx

@@ -18,9 +18,10 @@ import React from "react";
 import { MatrixEvent, User } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
-    Phase as VerificationPhase,
+    canAcceptVerificationRequest,
+    VerificationPhase,
     VerificationRequestEvent,
-} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+} from "matrix-js-sdk/src/crypto-api";
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from "../../../languageHandler";
@@ -139,7 +140,7 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
         let subtitle: string;
         let stateNode: JSX.Element | undefined;
 
-        if (!request.canAccept) {
+        if (!canAcceptVerificationRequest(request)) {
             let stateLabel;
             const accepted =
                 request.phase === VerificationPhase.Ready ||
@@ -165,7 +166,7 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
             const name = getNameForEventRoom(client, request.otherUserId, mxEvent.getRoomId()!);
             title = _t("%(name)s wants to verify", { name });
             subtitle = userLabelForEventRoom(client, request.otherUserId, mxEvent.getRoomId()!);
-            if (request.canAccept) {
+            if (canAcceptVerificationRequest(request)) {
                 stateNode = (
                     <div className="mx_cryptoEvent_buttons">
                         <AccessibleButton kind="danger" onClick={this.onRejectClicked}>

src/components/views/right_panel/EncryptionPanel.tsx

@@ -15,13 +15,7 @@ limitations under the License.
 */
 
 import React, { useCallback, useEffect, useState } from "react";
-import {
+import { VerificationPhase, VerificationRequest, VerificationRequestEvent } from "matrix-js-sdk/src/crypto-api";
-    PHASE_REQUESTED,
-    PHASE_UNSENT,
-    Phase as VerificationPhase,
-    VerificationRequest,
-    VerificationRequestEvent,
-} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { User } from "matrix-js-sdk/src/models/user";
 
@@ -78,7 +72,11 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
     }, [verificationRequestPromise]);
     const changeHandler = useCallback(() => {
         // handle transitions -> cancelled for mismatches which fire a modal instead of showing a card
-        if (request && request.phase === VerificationPhase.Cancelled && MISMATCHES.includes(request.cancellationCode)) {
+        if (
+            request &&
+            request.phase === VerificationPhase.Cancelled &&
+            MISMATCHES.includes(request.cancellationCode ?? "")
+        ) {
             Modal.createDialog(ErrorDialog, {
                 headerImage: require("../../../../res/img/e2e/warning-deprecated.svg").default,
                 title: _t("Your messages are not secure"),
@@ -139,7 +137,8 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
 
     const requested: boolean =
         (!request && isRequesting) ||
-        (!!request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
+        (!!request &&
+            (phase === VerificationPhase.Requested || phase === VerificationPhase.Unsent || phase === undefined));
     const isSelfVerification = request ? request.isSelfVerification : member.userId === cli.getUserId();
 
     if (!request || requested) {

src/components/views/right_panel/UserInfo.tsx

@@ -24,7 +24,7 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { User } from "matrix-js-sdk/src/models/user";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { logger } from "matrix-js-sdk/src/logger";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";

src/components/views/right_panel/VerificationPanel.tsx

@@ -18,10 +18,10 @@ import React from "react";
 import { verificationMethods } from "matrix-js-sdk/src/crypto";
 import { SCAN_QR_CODE_METHOD } from "matrix-js-sdk/src/crypto/verification/QRCode";
 import {
-    Phase,
     VerificationRequest,
+    VerificationPhase as Phase,
     VerificationRequestEvent,
-} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+} from "matrix-js-sdk/src/crypto-api";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { User } from "matrix-js-sdk/src/models/user";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -202,7 +202,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
     };
 
     private getDevice(): DeviceInfo | null {
-        const deviceId = this.props.request && this.props.request.otherDeviceId;
+        const deviceId = this.props.request?.otherDeviceId;
         const userId = MatrixClientPeg.get().getUserId();
         if (deviceId && userId) {
             return MatrixClientPeg.get().getStoredDevice(userId, deviceId);

src/components/views/settings/devices/useOwnDevices.ts

@@ -26,7 +26,7 @@ import {
     PUSHER_ENABLED,
     UNSTABLE_MSC3852_LAST_SEEN_UA,
 } from "matrix-js-sdk/src/matrix";
-import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 import { MatrixError } from "matrix-js-sdk/src/http-api";
 import { logger } from "matrix-js-sdk/src/logger";
 import { LocalNotificationSettings } from "matrix-js-sdk/src/@types/local_notifications";

src/components/views/toasts/VerificationRequestToast.tsx

@@ -16,9 +16,10 @@ limitations under the License.
 
 import React from "react";
 import {
+    canAcceptVerificationRequest,
     VerificationRequest,
     VerificationRequestEvent,
-} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+} from "matrix-js-sdk/src/crypto-api";
 import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -41,6 +42,7 @@ interface IProps {
 }
 
 interface IState {
+    /** number of seconds left in the timeout counter. Zero if there is no timeout. */
     counter: number;
     device?: DeviceInfo;
     ip?: string;
@@ -51,7 +53,7 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
 
     public constructor(props: IProps) {
         super(props);
-        this.state = { counter: Math.ceil(props.request.timeout / 1000) };
+        this.state = { counter: Math.ceil((props.request.timeout ?? 0) / 1000) };
     }
 
     public async componentDidMount(): Promise<void> {
@@ -93,7 +95,7 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
 
     private checkRequestIsPending = (): void => {
         const { request } = this.props;
-        if (!request.canAccept) {
+        if (!canAcceptVerificationRequest(request)) {
             ToastStore.sharedInstance().dismissToast(this.props.toastKey);
         }
     };

src/stores/SetupEncryptionStore.ts

@@ -15,12 +15,7 @@ limitations under the License.
 */
 
 import EventEmitter from "events";
-import {
+import { VerificationPhase, VerificationRequest, VerificationRequestEvent } from "matrix-js-sdk/src/crypto-api";
-    PHASE_DONE as VERIF_PHASE_DONE,
-    Phase as VerificationPhase,
-    VerificationRequest,
-    VerificationRequestEvent,
-} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
 import { ISecretStorageKeyInfo } from "matrix-js-sdk/src/crypto/api";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -183,7 +178,7 @@ export class SetupEncryptionStore extends EventEmitter {
             this.verificationRequest.off(VerificationRequestEvent.Change, this.onVerificationRequestChange);
             this.verificationRequest = null;
             this.emit("update");
-        } else if (this.verificationRequest?.phase === VERIF_PHASE_DONE) {
+        } else if (this.verificationRequest?.phase === VerificationPhase.Done) {
             this.verificationRequest.off(VerificationRequestEvent.Change, this.onVerificationRequestChange);
             this.verificationRequest = null;
             // At this point, the verification has finished, we just need to wait for

src/stores/right-panel/RightPanelStoreIPanelState.ts

@@ -18,7 +18,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { User } from "matrix-js-sdk/src/models/user";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 
 import { RightPanelPhases } from "./RightPanelStorePhases";
 

src/verification.ts

@@ -17,8 +17,7 @@ limitations under the License.
 import { User } from "matrix-js-sdk/src/models/user";
 import { verificationMethods as VerificationMethods } from "matrix-js-sdk/src/crypto";
 import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
-import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { CrossSigningKey, VerificationRequest } from "matrix-js-sdk/src/crypto-api";
-import { CrossSigningKey } from "matrix-js-sdk/src/crypto-api";
 
 import dis from "./dispatcher/dispatcher";
 import Modal from "./Modal";

test/components/views/messages/MKeyVerificationRequest-test.tsx

@@ -18,10 +18,8 @@ import React from "react";
 import { render, within } from "@testing-library/react";
 import { EventEmitter } from "events";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
-import {
+import { VerificationPhase } from "matrix-js-sdk/src/crypto-api/verification";
-    Phase as VerificationPhase,
+import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
-    VerificationRequest,
-} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
@@ -85,6 +83,18 @@ describe("MKeyVerificationRequest", () => {
         expect(within(container).getByRole("button")).toHaveTextContent("@other:user accepted");
     });
 
+    it("should render appropriately when the request was initiated by the other user and has not yet been accepted", () => {
+        const event = new MatrixEvent({ type: "m.key.verification.request" });
+        event.verificationRequest = getMockVerificationRequest({
+            phase: VerificationPhase.Requested,
+            initiatedByMe: false,
+            otherUserId: "@other:user",
+        });
+        const result = render(<MKeyVerificationRequest mxEvent={event} />);
+        expect(result.container).toHaveTextContent("@other:user wants to verify");
+        result.getByRole("button", { name: "Accept" });
+    });
+
     it("should render appropriately when the request was initiated by the other user and has been accepted", () => {
         const event = new MatrixEvent({ type: "m.key.verification.request" });
         event.verificationRequest = getMockVerificationRequest({

test/components/views/right_panel/VerificationPanel-test.tsx

@@ -16,11 +16,6 @@ limitations under the License.
 
 import { act, render, waitFor } from "@testing-library/react";
 import React, { ComponentProps } from "react";
-import {
-    Phase,
-    VerificationRequest,
-    VerificationRequestEvent,
-} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
 import { User } from "matrix-js-sdk/src/models/user";
 import { Mocked } from "jest-mock";
@@ -30,6 +25,9 @@ import {
     Verifier,
     VerifierEvent,
     VerifierEventHandlerMap,
+    VerificationPhase as Phase,
+    VerificationRequest,
+    VerificationRequestEvent,
 } from "matrix-js-sdk/src/crypto-api/verification";
 
 import VerificationPanel from "../../../../src/components/views/right_panel/VerificationPanel";

test/components/views/toasts/VerificationRequestToast-test.tsx

@@ -27,6 +27,7 @@ import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter"
 
 import VerificationRequestToast from "../../../../src/components/views/toasts/VerificationRequestToast";
 import { flushPromises, getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
+import ToastStore from "../../../../src/stores/ToastStore";
 
 function renderComponent(
     props: Partial<ComponentProps<typeof VerificationRequestToast>> & { request: VerificationRequest },
@@ -82,6 +83,23 @@ describe("VerificationRequestToast", () => {
         });
         expect(result.container).toMatchSnapshot();
     });
+
+    it("dismisses itself once the request can no longer be accepted", async () => {
+        const otherUserId = "@other:user";
+        const request = makeMockVerificationRequest({
+            isSelfVerification: false,
+            otherUserId,
+        });
+        renderComponent({ request, toastKey: "testKey" });
+        await act(async () => {
+            await flushPromises();
+        });
+
+        const dismiss = jest.spyOn(ToastStore.sharedInstance(), "dismissToast");
+        Object.defineProperty(request, "accepting", { value: true });
+        request.emit(VerificationRequestEvent.Change);
+        expect(dismiss).toHaveBeenCalledWith("testKey");
+    });
 });
 
 function makeMockVerificationRequest(props: Partial<VerificationRequest> = {}): Mocked<VerificationRequest> {

test/components/views/toasts/__snapshots__/VerificationRequestToast-test.tsx.snap

@@ -17,7 +17,7 @@ exports[`VerificationRequestToast should render a cross-user verification 1`] =
         role="button"
         tabindex="0"
       >
-        Ignore (NaN)
+        Ignore
       </div>
       <div
         class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
@@ -53,7 +53,7 @@ exports[`VerificationRequestToast should render a self-verification 1`] = `
         role="button"
         tabindex="0"
       >
-        Ignore (NaN)
+        Ignore
       </div>
       <div
         class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"