diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 20df323c10..8d25116827 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -182,6 +182,7 @@ export default class RightPanel extends React.Component { member: payload.member, event: payload.event, verificationRequest: payload.verificationRequest, + verificationRequestPromise: payload.verificationRequestPromise, }); } } @@ -231,6 +232,7 @@ export default class RightPanel extends React.Component { onClose={onClose} phase={this.state.phase} verificationRequest={this.state.verificationRequest} + verificationRequestPromise={this.state.verificationRequestPromise} />; } else { panel = { +const EncryptionPanel = ({verificationRequest, verificationRequestPromise, member, onClose, layout}) => { const [request, setRequest] = useState(verificationRequest); // state to show a spinner immediately after clicking "start verification", // before we have a request @@ -43,6 +43,19 @@ const EncryptionPanel = ({verificationRequest, member, onClose, layout}) => { setPhase(verificationRequest.phase); } }, [verificationRequest]); + + useEffect(() => { + async function awaitPromise() { + setRequesting(true); + const request = await verificationRequestPromise; + setRequesting(false); + setRequest(request); + setPhase(request.phase); + } + if (verificationRequestPromise) { + awaitPromise(); + } + }, [verificationRequestPromise]); const changeHandler = useCallback(() => { // handle transitions -> cancelled for mismatches which fire a modal instead of showing a card if (request && request.cancelled && MISMATCHES.includes(request.cancellationCode)) { diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js index b8ba6968a4..17cb80492e 100644 --- a/src/components/views/right_panel/UserInfo.js +++ b/src/components/views/right_panel/UserInfo.js @@ -171,14 +171,14 @@ async function verifyDevice(userId, device) { return; } const cli = MatrixClientPeg.get(); - const verificationRequest = await cli.requestVerification( + const verificationRequestPromise = cli.requestVerification( userId, [device.deviceId], ); dis.dispatch({ action: "set_right_panel_phase", phase: RIGHT_PANEL_PHASES.EncryptionPanel, - refireParams: {member, verificationRequest}, + refireParams: {member, verificationRequestPromise}, }); }, primaryButton: _t("Done"),