for self-verif, mention which device, not user we're verifying in panel

src/components/views/right_panel/EncryptionPanel.js

@@ -22,6 +22,7 @@ import VerificationPanel from "./VerificationPanel";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {ensureDMExists} from "../../../createRoom";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import {useAsyncMemo} from "../../../hooks/useAsyncMemo";
 import Modal from "../../../Modal";
 import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import * as sdk from "../../../index";
@@ -45,6 +46,12 @@ const EncryptionPanel = (props) => {
         }
     }, [verificationRequest]);
 
+    const deviceId = request && request.channel.deviceId;
+    const device = useAsyncMemo(() => {
+        const cli = MatrixClientPeg.get();
+        return cli.getStoredDevice(cli.getUserId(), deviceId);
+    }, [deviceId]);
+
     useEffect(() => {
         async function awaitPromise() {
             setRequesting(true);
@@ -139,7 +146,8 @@ const EncryptionPanel = (props) => {
                 request={request}
                 key={request.channel.transactionId}
                 inDialog={inDialog}
-                phase={phase} />
+                phase={phase}
+                device={device} />
         </React.Fragment>);
     }
 };

src/components/views/right_panel/VerificationPanel.js

@@ -210,12 +210,19 @@ export default class VerificationPanel extends React.PureComponent {
         }
 
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const description = request.isSelfVerification ?
+            _t("You've successfully verified %(deviceName)s (%(deviceId)s)!", {
+                deviceName: this.props.device.getDisplayName(),
+                deviceId: this.props.device.deviceId,
+            }):
+            _t("You've successfully verified %(displayName)s!", {
+                displayName: member.displayName || member.name || member.userId,
+            });
+
         return (
             <div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
                 <h3>{_t("Verified")}</h3>
-                <p>{_t("You've successfully verified %(displayName)s!", {
-                    displayName: member.displayName || member.name || member.userId,
-                })}</p>
+                <p>{description}</p>
                 <E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
                 <p>{ text }</p>
 
@@ -276,6 +283,7 @@ export default class VerificationPanel extends React.PureComponent {
                                 onDone={this._onSasMatchesClick}
                                 inDialog={this.props.inDialog}
                                 isSelf={request.isSelfVerification}
+                                device={this.props.device}
                             /> : <Spinner />;
                         return <div className="mx_UserInfo_container">
                             <h3>{_t("Compare emoji")}</h3>

src/components/views/verification/VerificationShowSas.js

@@ -107,8 +107,15 @@ export default class VerificationShowSas extends React.Component {
         if (this.state.pending || this.state.cancelling) {
             let text;
             if (this.state.pending) {
-                const {displayName} = this.props;
-                text = _t("Waiting for %(displayName)s to verify…", {displayName});
+                if (this.props.isSelf) {
+                    text = _t("Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", {
+                        deviceName: this.props.device.getDisplayName(),
+                        deviceId: this.props.device.deviceId,
+                    });
+                } else {
+                    const {displayName} = this.props;
+                    text = _t("Waiting for %(displayName)s to verify…", {displayName});
+                }
             } else {
                 text = _t("Cancelling…");
             }