use verif in right panel from "verify" button

src/components/views/right_panel/EncryptionInfo.js

@@ -21,9 +21,9 @@ export default class EncryptionInfo extends React.PureComponent {
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (<div>
-            <p>End-to-end encryption is great!</p>
+            <p>End-to-end encryption is great! You should try it.</p>
             <div>
-                <AccessibleButton onClick={this.props.onStartVerification}>Start verification</AccessibleButton>
+                <AccessibleButton kind="primary" onClick={this.props.onStartVerification}>Start verification</AccessibleButton>
             </div>
         </div>);
     }

src/components/views/right_panel/EncryptionPanel.js

@@ -20,6 +20,11 @@ import VerificationPanel from "./VerificationPanel";
 import MatrixClientPeg from "../../../MatrixClientPeg";
 
 export default class EncryptionPanel extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
     render() {
         const request = this.props.verificationRequest || this.state.verificationRequest;
         const {member} = this.props;
@@ -27,6 +32,8 @@ export default class EncryptionPanel extends React.PureComponent {
             return <VerificationPanel request={request} />;
         } else if (member) {
             return <EncryptionInfo onStartVerification={this._onStartVerification} member={member} />;
+        } else {
+            return <p>Not a member nor request, not sure what to render</p>;
         }
     }
 

src/components/views/right_panel/UserInfo.js

@@ -40,6 +40,7 @@ import E2EIcon from "../rooms/E2EIcon";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import {textualPowerLevel} from '../../../Roles';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
 
 const _disambiguateDevices = (devices) => {
     const names = Object.create(null);
@@ -128,6 +129,14 @@ function verifyDevice(userId, device) {
     }, null, /* priority = */ false, /* static = */ true);
 }
 
+function verifyUser(user) {
+    dis.dispatch({
+        action: "set_right_panel_phase",
+        phase: RIGHT_PANEL_PHASES.EncryptionPanel,
+        refireParams: {member: user},
+    });
+}
+
 function DeviceItem({userId, device}) {
     const cli = useContext(MatrixClientContext);
     const deviceTrust = cli.checkDeviceTrust(userId, device.deviceId);
@@ -1296,7 +1305,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
     const userVerified = cli.checkUserTrust(user.userId).isVerified();
     let verifyButton;
     if (!userVerified) {
-        verifyButton = <AccessibleButton className="mx_UserInfo_verify" onClick={() => verifyDevice(user.userId, null)}>
+        verifyButton = <AccessibleButton className="mx_UserInfo_verify" onClick={() => verifyUser(user)}>
             {_t("Verify")}
         </AccessibleButton>;
     }
@@ -1305,7 +1314,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         <div className="mx_UserInfo_container">
             <h3>{ _t("Security") }</h3>
             <p>{ text }</p>
-            {verifyButton}
+            { verifyButton }
             { devicesSection }
         </div>
     );
@@ -1323,7 +1332,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
 
             <div className="mx_UserInfo_container">
                 <div className="mx_UserInfo_profile">
-                    <div >
+                    <div>
                         <h2 aria-label={displayName}>
                             { e2eIcon }
                             { displayName }

src/components/views/right_panel/VerificationPanel.js

@@ -33,7 +33,7 @@ export default class VerificationPanel extends React.PureComponent {
         if (request.requested) {
             return (<p>Waiting for {request.otherUserId} to accept ... <Spinner /></p>);
         } else if (request.ready) {
-            return (<p>{request.otherUserId} is ready, start <AccessibleButton onClick={this._startSAS}>Verify by emoji</AccessibleButton></p>);
+            return (<p>{request.otherUserId} is ready, start <AccessibleButton kind="primary" onClick={this._startSAS}>Verify by emoji</AccessibleButton></p>);
         } else if (request.started) {
             if (this.state.sasEvent) {
                 const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
@@ -56,6 +56,8 @@ export default class VerificationPanel extends React.PureComponent {
         const verifier = this.props.request.beginKeyVerification(verificationMethods.SAS);
         try {
             await verifier.verify();
+        } catch (err) {
+            console.error(err);
         } finally {
             this.setState({sasEvent: null});
         }