Log phases in the verification process

When the EncryptionPanel (which does the work of the verification flow) changes
"phase", log it. I hope this will be helpful when diagnosing stuck
verifications.

src/components/views/right_panel/EncryptionPanel.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 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";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import EncryptionInfo from "./EncryptionInfo";
 import VerificationPanel from "./VerificationPanel";
@@ -48,7 +49,12 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
  // state to show a spinner immediately after clicking "start verification",
  // before we have a request
  const [isRequesting, setRequesting] = useState(false);
- const [phase, setPhase] = useState(request?.phase);
+ const [phase, doSetPhase] = useState(request?.phase);
+ const setPhase = (phase: VerificationPhase | undefined): void => {
+ logger.debug(`EncryptionPanel: phase now ${phase === undefined ? phase : VerificationPhase[phase]}`);
+ doSetPhase(phase);
+ };
+
  useEffect(() => {
  setRequest(verificationRequest);
  if (verificationRequest) {