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'; @@ -31,7 +33,11 @@ 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'; @@ -63,6 +69,7 @@ ); function SIWE(): React.Node { const { openConnectModal } = useConnectModal(); + const { address } = useAccount(); const { data: signer } = useSigner(); const dispatchActionPromise = useDispatchActionPromise(); const getSIWENonceCall = useServerCall(getSIWENonce); @@ -91,6 +98,16 @@ [], ); + const onSignInButtonClick = React.useCallback(async () => { + invariant(siweNonce, 'nonce must be present during SIWE attempt'); + const message = createSIWEMessage( + address, + siweStatementWithoutPublicKey, + siweNonce, + ); + await signer.signMessage(message); + }, [address, signer, siweNonce]); + let siweLoginForm; if (signer && !siweNonce) { siweLoginForm = ( @@ -109,7 +126,7 @@

{siweMessageSigningExplanationStatements[0]}

{siweMessageSigningExplanationStatements[1]}

-