diff --git a/web/account/siwe-login-form.react.js b/web/account/siwe-login-form.react.js index 4fa00b492..0b5ada9bd 100644 --- a/web/account/siwe-login-form.react.js +++ b/web/account/siwe-login-form.react.js @@ -1,226 +1,187 @@ // @flow import '@rainbow-me/rainbowkit/styles.css'; -import olm from '@matrix-org/olm'; import invariant from 'invariant'; import * as React from 'react'; import { useAccount, useSigner } from 'wagmi'; import { getSIWENonce, getSIWENonceActionTypes, siweAuth, siweAuthActionTypes, } from 'lib/actions/siwe-actions.js'; import ConnectedWalletInfo from 'lib/components/connected-wallet-info.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import type { LogInStartingPayload } from 'lib/types/account-types.js'; import type { OLMIdentityKeys, - PickledOLMAccount, SignedIdentityKeysBlob, } from 'lib/types/crypto-types.js'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils.js'; import { createSIWEMessage, getSIWEStatementForPublicKey, siweMessageSigningExplanationStatements, } from 'lib/utils/siwe-utils.js'; import HeaderSeparator from './header-separator.react.js'; import css from './siwe.css'; import Button from '../components/button.react.js'; import OrBreak from '../components/or-break.react.js'; import LoadingIndicator from '../loading-indicator.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { webLogInExtraInfoSelector } from '../selectors/account-selectors.js'; +import { signedIdentityKeysBlobSelector } from '../selectors/socket-selectors.js'; type SIWELoginFormProps = { +cancelSIWEAuthFlow: () => void, }; const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector( getSIWENonceActionTypes, ); function SIWELoginForm(props: SIWELoginFormProps): React.Node { const { address } = useAccount(); const { data: signer } = useSigner(); const dispatchActionPromise = useDispatchActionPromise(); const getSIWENonceCall = useServerCall(getSIWENonce); const getSIWENonceCallLoadingStatus = useSelector( getSIWENonceLoadingStatusSelector, ); const siweAuthCall = useServerCall(siweAuth); const logInExtraInfo = useSelector(webLogInExtraInfoSelector); const [siweNonce, setSIWENonce] = React.useState(null); const siweNonceShouldBeFetched = !siweNonce && getSIWENonceCallLoadingStatus !== 'loading'; React.useEffect(() => { if (!siweNonceShouldBeFetched) { return; } dispatchActionPromise( getSIWENonceActionTypes, (async () => { const response = await getSIWENonceCall(); setSIWENonce(response); })(), ); }, [dispatchActionPromise, getSIWENonceCall, siweNonceShouldBeFetched]); const primaryIdentityPublicKeys: ?OLMIdentityKeys = useSelector( state => state.cryptoStore.primaryIdentityKeys, ); - const notificationIdentityPublicKeys: ?OLMIdentityKeys = useSelector( - state => state.cryptoStore.notificationIdentityKeys, - ); - const primaryAccount: ?PickledOLMAccount = useSelector( - state => state.cryptoStore.primaryAccount, + + const signedIdentityKeysBlob: ?SignedIdentityKeysBlob = useSelector( + signedIdentityKeysBlobSelector, ); const callSIWEAuthEndpoint = React.useCallback( - ( - message: string, - signature: string, - extraInfo, - signedIdentityKeysBlob: SignedIdentityKeysBlob, - ) => - siweAuthCall({ + (message: string, signature: string, extraInfo) => { + invariant( + signedIdentityKeysBlob, + 'signedIdentityKeysBlob must be set in attemptSIWEAuth', + ); + return siweAuthCall({ message, signature, signedIdentityKeysBlob, ...extraInfo, - }), - [siweAuthCall], + }); + }, + [signedIdentityKeysBlob, siweAuthCall], ); const attemptSIWEAuth = React.useCallback( (message: string, signature: string) => { - invariant( - primaryIdentityPublicKeys, - 'primaryIdentityPublicKeys must be set in attemptSIWEAuth', - ); - invariant( - notificationIdentityPublicKeys, - 'notificationIdentityPublicKeys must be set in attemptSIWEAuth', - ); - invariant(primaryAccount, 'primaryAccount must be set in logInAction'); - - const primaryOLMAccount = new olm.Account(); - primaryOLMAccount.unpickle( - primaryAccount.picklingKey, - primaryAccount.pickledAccount, - ); - const payloadToBeSigned = JSON.stringify({ - primaryIdentityPublicKeys, - notificationIdentityPublicKeys, - }); - const signedIdentityKeysBlob: SignedIdentityKeysBlob = { - payload: payloadToBeSigned, - signature: primaryOLMAccount.sign(payloadToBeSigned), - }; - const extraInfo = logInExtraInfo(); dispatchActionPromise( siweAuthActionTypes, - callSIWEAuthEndpoint( - message, - signature, - extraInfo, - signedIdentityKeysBlob, - ), + callSIWEAuthEndpoint(message, signature, extraInfo), undefined, ({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload), ); }, - [ - callSIWEAuthEndpoint, - dispatchActionPromise, - logInExtraInfo, - notificationIdentityPublicKeys, - primaryAccount, - primaryIdentityPublicKeys, - ], + [callSIWEAuthEndpoint, dispatchActionPromise, logInExtraInfo], ); const onSignInButtonClick = React.useCallback(async () => { invariant(signer, 'signer must be present during SIWE attempt'); invariant(siweNonce, 'nonce must be present during SIWE attempt'); invariant( primaryIdentityPublicKeys, 'primaryIdentityPublicKeys must be present during SIWE attempt', ); const statement = getSIWEStatementForPublicKey( primaryIdentityPublicKeys.ed25519, ); const message = createSIWEMessage(address, statement, siweNonce); const signature = await signer.signMessage(message); attemptSIWEAuth(message, signature); }, [address, attemptSIWEAuth, primaryIdentityPublicKeys, signer, siweNonce]); const { cancelSIWEAuthFlow } = props; const backButtonColor = React.useMemo( () => ({ backgroundColor: '#211E2D' }), [], ); const signInButtonColor = React.useMemo( () => ({ backgroundColor: '#6A20E3' }), [], ); - if (!siweNonce || !primaryIdentityPublicKeys) { + if (!siweNonce || !primaryIdentityPublicKeys || !signedIdentityKeysBlob) { return (
); } return (

Sign in with Ethereum

Wallet Connected

{siweMessageSigningExplanationStatements}

By signing up, you agree to our{' '} Terms of Use &{' '} Privacy Policy.

); } export default SIWELoginForm;