Hack in a layout option

src/components/structures/auth/CompleteSecurity.js

@@ -140,6 +140,7 @@ export default class CompleteSecurity extends React.Component {
         if (this.state.verificationRequest) {
             const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
             body = <EncryptionPanel
+                layout="dialog"
                 verificationRequest={this.state.verificationRequest}
                 onClose={this.props.onFinished}
                 member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}

src/components/views/dialogs/DeviceVerifyOwnDialog.js

@@ -28,6 +28,7 @@ export default class DeviceVerifyOwnDialog extends React.Component {
     render() {
         const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
         return <EncryptionPanel
+            layout="dialog"
             verificationRequest={this.props.verificationRequest}
             onClose={this.props.onFinished}
             member={MatrixClientPeg.get().getUser(this.props.verificationRequest.otherUserId)}

src/components/views/right_panel/EncryptionPanel.js

@@ -30,7 +30,7 @@ import {_t} from "../../../languageHandler";
 // cancellation codes which constitute a key mismatch
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
 
-const EncryptionPanel = ({verificationRequest, member, onClose}) => {
+const EncryptionPanel = ({verificationRequest, member, onClose, layout}) => {
     const [request, setRequest] = useState(verificationRequest);
     useEffect(() => {
         setRequest(verificationRequest);
@@ -77,6 +77,7 @@ const EncryptionPanel = ({verificationRequest, member, onClose}) => {
     } else {
         return (
             <VerificationPanel
+                layout={layout}
                 onClose={onClose}
                 member={member}
                 request={request}
@@ -89,6 +90,7 @@ EncryptionPanel.propTypes = {
     member: PropTypes.object.isRequired,
     onClose: PropTypes.func.isRequired,
     verificationRequest: PropTypes.object,
+    layout: PropTypes.string,
 };
 
 export default EncryptionPanel;

src/components/views/right_panel/VerificationPanel.js

@@ -31,9 +31,11 @@ import {
     PHASE_CANCELLED, VerificationRequest,
 } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import Spinner from "../elements/Spinner";
+import AccessibleButton from "../elements/AccessibleButton";
 
 export default class VerificationPanel extends React.PureComponent {
     static propTypes = {
+        layout: PropTypes.string,
         request: PropTypes.object.isRequired,
         member: PropTypes.object.isRequired,
         phase: PropTypes.oneOf([
@@ -69,6 +71,33 @@ export default class VerificationPanel extends React.PureComponent {
         const {member} = this.props;
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
+        if (this.props.layout === 'dialog') {
+            // HACK: This is a terrible idea.
+            let qrCode = <div className='mx_VerificationQREmojiOptions_noQR'><Spinner /></div>;
+            if (this.state.qrCodeProps) {
+                qrCode = <VerificationQRCode {...this.state.qrCodeProps} />;
+            }
+            return (
+                <div>
+                    {_t("Verify this session by completing one of the following:")}
+                    <div className='mx_IncomingSasDialog_startOptions'>
+                        <div className='mx_IncomingSasDialog_startOption'>
+                            <p>{_t("Scan this unique code")}</p>
+                            {qrCode}
+                        </div>
+                        <div className='mx_IncomingSasDialog_betweenText'>{_t("or")}</div>
+                        <div className='mx_IncomingSasDialog_startOption'>
+                            <p>{_t("Compare unique emoji")}</p>
+                            <span className='mx_IncomingSasDialog_helpText'>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
+                            <AccessibleButton onClick={this._startSAS} kind='primary'>
+                                {_t("Start")}
+                            </AccessibleButton>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+
         let button;
         if (pending) {
             button = <Spinner />;