diff --git a/web/account/siwe.react.js b/web/account/siwe.react.js --- a/web/account/siwe.react.js +++ b/web/account/siwe.react.js @@ -9,6 +9,7 @@ RainbowKitProvider, useConnectModal, } from '@rainbow-me/rainbowkit'; +import invariant from 'invariant'; import _merge from 'lodash/fp/merge'; import * as React from 'react'; import { FaEthereum } from 'react-icons/fa'; @@ -16,6 +17,7 @@ chain, configureChains, createClient, + useAccount, useSigner, WagmiConfig, } from 'wagmi'; @@ -25,17 +27,25 @@ import { getSIWENonce, getSIWENonceActionTypes, + siweAuth, + siweAuthActionTypes, } from 'lib/actions/siwe-actions'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors'; +import type { LogInStartingPayload } from 'lib/types/account-types.js'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils'; -import { siweMessageSigningExplanationStatements } from 'lib/utils/siwe-utils.js'; +import { + createSIWEMessage, + siweMessageSigningExplanationStatements, + siweStatementWithoutPublicKey, +} from 'lib/utils/siwe-utils.js'; import Button from '../components/button.react'; import LoadingIndicator from '../loading-indicator.react'; import { useSelector } from '../redux/redux-utils'; +import { webLogInExtraInfoSelector } from '../selectors/account-selectors.js'; import css from './siwe.css'; // details can be found https://0.6.x.wagmi.sh/docs/providers/configuring-chains @@ -63,12 +73,15 @@ ); function SIWE(): React.Node { const { openConnectModal } = useConnectModal(); + 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); @@ -91,6 +104,40 @@ [], ); + const callSIWEAuthEndpoint = React.useCallback( + (message: string, signature: string, extraInfo) => + siweAuthCall({ + message, + signature, + ...extraInfo, + }), + [siweAuthCall], + ); + + const attemptSIWEAuth = React.useCallback( + (message: string, signature: string) => { + const extraInfo = logInExtraInfo(); + dispatchActionPromise( + siweAuthActionTypes, + callSIWEAuthEndpoint(message, signature, extraInfo), + undefined, + ({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload), + ); + }, + [callSIWEAuthEndpoint, dispatchActionPromise, logInExtraInfo], + ); + + const onSignInButtonClick = React.useCallback(async () => { + invariant(siweNonce, 'nonce must be present during SIWE attempt'); + const message = createSIWEMessage( + address, + siweStatementWithoutPublicKey, + siweNonce, + ); + const signature = await signer.signMessage(message); + attemptSIWEAuth(message, signature); + }, [address, attemptSIWEAuth, signer, siweNonce]); + let siweLoginForm; if (signer && !siweNonce) { siweLoginForm = ( @@ -109,7 +156,7 @@

{siweMessageSigningExplanationStatements[0]}

{siweMessageSigningExplanationStatements[1]}

-