fixes!

src/components/views/messages/MKeyVerificationConclusion.js

@@ -45,32 +45,51 @@ export default class MKeyVerificationConclusion extends React.Component {
         this.forceUpdate();
     };
 
+    _shouldRender(mxEvent, request) {
+        // normally should not happen
+        if (!request) {
+            return false;
+        }
+        // .cancel event that was sent after the verification finished, ignore
+        if (mxEvent.getType() === "m.key.verification.cancel" && !request.cancelled) {
+            return false;
+        }
+        // .done event that was sent after the verification cancelled, ignore
+        if (mxEvent.getType() === "m.key.verification.done" && !request.done) {
+            return false;
+        }
+
+        // request hasn't concluded yet
+        if (request.pending) {
+            return false;
+        }
+        return true;
+    }
+
     render() {
         const {mxEvent} = this.props;
         const request = mxEvent.verificationRequest;
 
-        if (!request) {
+        if (!this._shouldRender(mxEvent, request)) {
             return null;
         }
 
         const client = MatrixClientPeg.get();
         const myUserId = client.getUserId();
 
-
         let title;
 
         if (request.done) {
             title = _t("You verified %(name)s", {name: getNameForEventRoom(request.otherUserId, mxEvent)});
         } else if (request.cancelled) {
-            if (mxEvent.getSender() === myUserId) {
+            const userId = request.cancellingUserId;
+            if (userId === myUserId) {
                 title = _t("You cancelled verifying %(name)s",
                     {name: getNameForEventRoom(request.otherUserId, mxEvent)});
-            } else if (mxEvent.getSender() === request.otherUserId) {
+            } else {
                 title = _t("%(name)s cancelled verifying",
-                    {name: getNameForEventRoom(request.otherUserId, mxEvent)});
+                    {name: getNameForEventRoom(userId, mxEvent)});
             }
-        } else {
-            title = `request conclusion tile with phase ${request.phase}`;
         }
 
         if (title) {

src/components/views/messages/MKeyVerificationRequest.js

@@ -43,6 +43,16 @@ export default class MKeyVerificationRequest extends React.Component {
         }
     }
 
+    _openRequest = () => {
+        const {verificationRequest} = this.props.mxEvent;
+        dis.dispatch({action: "show_right_panel"});
+        dis.dispatch({
+            action: "set_right_panel_phase",
+            phase: RIGHT_PANEL_PHASES.EncryptionPanel,
+            refireParams: {verificationRequest},
+        });
+    };
+
     _onRequestChanged = () => {
         this.forceUpdate();
     };
@@ -52,12 +62,7 @@ export default class MKeyVerificationRequest extends React.Component {
         if (request) {
             try {
                 await request.accept();
-                dis.dispatch({action: "show_right_panel"});
+                this._openRequest();
-                dis.dispatch({
-                    action: "set_right_panel_phase",
-                    phase: RIGHT_PANEL_PHASES.EncryptionPanel,
-                    refireParams: {verificationRequest: request},
-                });
             } catch (err) {
                 console.error(err.message);
             }
@@ -96,10 +101,13 @@ export default class MKeyVerificationRequest extends React.Component {
     }
 
     render() {
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+        const FormButton = sdk.getComponent("elements.FormButton");
+
         const {mxEvent} = this.props;
         const request = mxEvent.verificationRequest;
 
-        if (!request) {
+        if (!request || request.invalid) {
             return null;
         }
 
@@ -107,12 +115,13 @@ export default class MKeyVerificationRequest extends React.Component {
         let subtitle;
         let stateNode;
 
-
         const accepted = request.ready || request.started || request.done;
         if (accepted || request.cancelled) {
             let stateLabel;
             if (accepted) {
-                stateLabel = this._acceptedLabel(request.receivingUserId);
+                stateLabel = (<AccessibleButton onClick={this._openRequest}>
+                    {this._acceptedLabel(request.receivingUserId)}
+                </AccessibleButton>);
             } else {
                 stateLabel = this._cancelledLabel(request.cancellingUserId);
             }
@@ -124,8 +133,7 @@ export default class MKeyVerificationRequest extends React.Component {
                 _t("%(name)s wants to verify", {name: getNameForEventRoom(request.requestingUserId, mxEvent)})}</div>);
             subtitle = (<div className="mx_KeyVerification_subtitle">{
                 userLabelForEventRoom(request.requestingUserId, mxEvent)}</div>);
-            if (request.requested) {
+            if (request.requested && !request.observeOnly) {
-                const FormButton = sdk.getComponent("elements.FormButton");
                 stateNode = (<div className="mx_KeyVerification_buttons">
                     <FormButton kind="danger" onClick={this._onRejectClicked} label={_t("Decline")} />
                     <FormButton onClick={this._onAcceptClicked} label={_t("Accept")} />

src/components/views/right_panel/EncryptionInfo.js

@@ -21,7 +21,7 @@ import {_t} from "../../../languageHandler";
 export default class EncryptionInfo extends React.PureComponent {
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (<div class="mx_UserInfo"><div class="mx_UserInfo_container">
+        return (<div className="mx_UserInfo"><div className="mx_UserInfo_container">
             <h3>{_t("Verify User")}</h3>
             <p>{_t("For extra security, verify this user by checking a one-time code on both of your devices.")}</p>
             <p>{_t("For maximum security, do this in person.")}</p>

src/components/views/right_panel/VerificationPanel.js

@@ -26,8 +26,8 @@ export default class VerificationPanel extends React.PureComponent {
     }
 
     render() {
-        return <div class="mx_UserInfo">
+        return <div className="mx_UserInfo">
-            <div class="mx_UserInfo_container">
+            <div className="mx_UserInfo_container">
                 { this.renderStatus() }
             </div>
         </div>;

src/components/views/toasts/VerificationRequestToast.js

@@ -26,25 +26,16 @@ import dis from "../../../dispatcher";
 export default class VerificationRequestToast extends React.PureComponent {
     constructor(props) {
         super(props);
-        const {event, timeout} = props.request;
+        this.state = {counter: Math.ceil(props.request.timeout / 1000)};
-        // to_device requests don't have a timestamp, so consider them age=0
-        const age = event.getTs() ? event.getLocalAge() : 0;
-        const remaining = Math.max(0, timeout - age);
-        const counter = Math.ceil(remaining / 1000);
-        this.state = {counter};
     }
 
     componentDidMount() {
+        const {request} = this.props;
         this._intervalHandle = setInterval(() => {
             let {counter} = this.state;
-            counter -= 1;
+            counter = Math.max(0, counter - 1);
-            if (counter <= 0) {
+            this.setState({counter});
-                this.cancel();
-            } else {
-                this.setState({counter});
-            }
         }, 1000);
-        const {request} = this.props;
         request.on("change", this._checkRequestIsPending);
     }
 
@@ -56,7 +47,7 @@ export default class VerificationRequestToast extends React.PureComponent {
 
     _checkRequestIsPending = () => {
         const {request} = this.props;
-        if (request.ready || request.started || request.done || request.cancelled) {
+        if (request.ready || request.started || request.done || request.cancelled || request.observeOnly) {
             this.props.dismiss();
         }
     };