diff --git a/landing/siwe.react.js b/landing/siwe.react.js --- a/landing/siwe.react.js +++ b/landing/siwe.react.js @@ -5,6 +5,7 @@ getDefaultWallets, RainbowKitProvider, } from '@rainbow-me/rainbowkit'; +import invariant from 'invariant'; import * as React from 'react'; import { SiweMessage } from 'siwe'; import '@rainbow-me/rainbowkit/dist/index.css'; @@ -18,6 +19,7 @@ } from 'wagmi'; import { publicProvider } from 'wagmi/providers/public'; +import { SIWENonceContext } from './siwe-nonce-context.js'; import css from './siwe.css'; // details can be found https://wagmi.sh/docs/providers/configuring-chains @@ -37,7 +39,8 @@ provider, }); -function createSiweMessage(address, statement) { +function createSiweMessage(address: string, statement: string, nonce: string) { + invariant(nonce, 'nonce must be present in createSiweMessage'); const domain = window.location.host; const origin = window.location.origin; const message = new SiweMessage({ @@ -47,14 +50,17 @@ uri: origin, version: '1', chainId: '1', + nonce, }); return message.prepareMessage(); } -async function signInWithEthereum(address, signer) { +async function signInWithEthereum(address: string, signer, nonce: string) { + invariant(nonce, 'nonce must be present in signInWithEthereum'); const message = createSiweMessage( address, 'By continuing, I accept the Comm Terms of Service: https://comm.app/terms', + nonce, ); const signature = await signer.signMessage(message); const messageToPost = JSON.stringify({ address, message, signature }); @@ -65,10 +71,20 @@ function SIWE(): React.Node { const { address } = useAccount(); const { data: signer } = useSigner(); - const onClick = React.useCallback(() => signInWithEthereum(address, signer), [ - address, - signer, - ]); + const { siweNonce } = React.useContext(SIWENonceContext); + const onClick = React.useCallback(() => { + invariant(siweNonce, 'nonce must be present during SIWE attempt'); + signInWithEthereum(address, signer, siweNonce); + }, [address, signer, siweNonce]); + + if (siweNonce === null || siweNonce === undefined) { + return ( +